Merge branch 'main' into 3-update-button-component

# Conflicts:
#	tailwind.config.ts

src/components/BuiInput/BuiInput.vue

@@ -58,7 +58,7 @@ const emit = defineEmits(['focus', 'blur', 'update:modelValue'])
 const model = useVModel(props, 'modelValue')
 
 const inputClasses = twMerge(
-  'py-2 px-3 border border-slate-300 dark:border-gray-500  dark:focus:border-primary-500 focus:border-primary-500 bg-transparent rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-550 outline-none w-full dark:text-gray-100 text-clay-500 placeholder-gray-500',
+  'py-2 px-3 border border-slate-300 dark:border-gray-500 dark:focus:border-primary-500 focus:border-primary-500 bg-transparent rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-550 outline-none w-full dark:text-gray-100 text-clay-500 placeholder-gray-500',
   props.validationStatus === 'success' &&
     'border-green-300 focus:border-green-300 focus:ring-green-200',
   props.validationStatus === 'error' && 'border-red-300 focus:border-red-300 focus:ring-red-200'

src/components/BuiSelect/BuiSelect.spec.ts

@@ -0,0 +1,50 @@
+import { shallowMount } from '@vue/test-utils'
+import BuiSelect from './BuiSelect.vue'
+import { describe, expect, test } from 'vitest'
+import type { TestWrapper } from '../../types/globalTypes'
+
+const options = [
+  {
+    name: 'One',
+    value: '1'
+  },
+  {
+    name: 'Two',
+    value: '2'
+  }
+]
+describe('BuiSelect', () => {
+  // @ts-ignore
+  let wrapper: TestWrapper
+
+  const createComponent = (props: any) => {
+    wrapper = shallowMount(BuiSelect, {
+      global: { stubs: { teleport: true } },
+      ...props
+    })
+  }
+  test('select event fired', async () => {
+    createComponent({ props: { options: options } })
+    const input = wrapper.find('select')
+    await input.setValue('1')
+
+    expect(wrapper.emitted('update:modelValue')[0][0]).toBe('1')
+  })
+
+  test('disabled select', async () => {
+    createComponent({ props: { options: options, disabled: true } })
+    const input = wrapper.find('select')
+    await input.setValue('1')
+
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+  })
+
+  test('correct placeholder text', async () => {
+    const placeholderText = 'My placeholder'
+    createComponent({ props: { options: options, placeholder: placeholderText } })
+    const input = wrapper.find('select')
+    const optionList = input.findAll('option')
+
+    expect(optionList[0].text()).toBe(placeholderText)
+  })
+})

src/components/BuiSelect/BuiSelect.story.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import BuiSelect from './BuiSelect.vue'
+import { ref } from 'vue-demi'
+
+const model = ref(null)
+const options = [
+  {
+    name: 'One',
+    value: '1'
+  },
+  {
+    name: 'Two',
+    value: '2'
+  }
+]
+</script>
+
+<template>
+  <Story title="BuiSelect" autoPropsDisabled :layout="{ type: 'grid', width: '400px' }">
+    <Variant title="Default">
+      <div class="p-2">
+        <BuiSelect label="Default" v-model="model" :options="options" />
+      </div>
+    </Variant>
+    <Variant title="Disabled">
+      <div class="p-2">
+        <BuiSelect label="Default" v-model="model" :options="options" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>

src/components/BuiSelect/BuiSelect.vue

@@ -0,0 +1,70 @@
+<template>
+  <label class="relative">
+    <span v-if="label" :class="labelClasses">
+      {{ label }}
+    </span>
+
+    <span class="relative flex">
+      <select v-model="model" :disabled="disabled" :class="selectClasses">
+        <option disabled selected value="">
+          {{ placeholder }}
+        </option>
+        <option v-for="(option, index) in options" :key="index" :value="option.value">
+          {{ option.name }}
+        </option>
+      </select>
+      <span :class="selectIconClasses">
+        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+          <path
+            fill="currentColor"
+            d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z"
+          />
+        </svg>
+      </span>
+    </span>
+  </label>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { twMerge } from 'tailwind-merge'
+
+type OptionsType = {
+  name: string
+  value: any
+}
+interface InputProps {
+  modelValue?: string
+  label?: string
+  options?: OptionsType[]
+  placeholder?: string
+  disabled?: boolean
+}
+const props = withDefaults(defineProps<InputProps>(), {
+  modelValue: '',
+  label: '',
+  options: () => [],
+  placeholder: 'Please select one',
+  disabled: false
+})
+const emit = defineEmits(['update:modelValue'])
+
+const model = useVModel(props, 'modelValue', emit)
+
+const defaultLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
+const defaultSelectClasses =
+  'px-3 py-2 border border-slate-300 dark:border-gray-500 dark:focus:border-primary-500 focus:border-primary-500 bg-transparent rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-550 outline-none w-full dark:text-gray-100 text-clay-500 placeholder-gray-500 w-full appearance-none'
+const disabledSelectClasses = 'cursor-not-allowed bg-gray-200'
+const selectIconClasses = twMerge(
+  'absolute right-2 bottom-2.5',
+  props.disabled && 'bg-gray-200 text-gray-500'
+)
+const selectClasses = computed(() => {
+  return twMerge(defaultSelectClasses, props.disabled && disabledSelectClasses)
+})
+
+const labelClasses = computed(() => {
+  return defaultLabelClasses
+})
+</script>

src/index.ts

@@ -1,3 +1,5 @@
 import './assets/main.css'
 
 export { default as BuiButton } from './components/BuiButton/BuiButton.vue'
+export { default as BuiInput } from './components/BuiInput/BuiInput.vue'
+export { default as BuiSelect } from './components/BuiSelect/BuiSelect.vue'

tailwind.config.ts

@@ -32,6 +32,7 @@ module.exports = {
         gray: {
           100: '#F5F6F8',
           150: '#F8F8FA',
+          200: '#F8F8FA',
           400: '#AAAFBD',
           500: '#737680'
         },