feat(component): New select component

src/components/Select/Select.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <select :disabled="disabled" :class="[selectClasses, underline? underlineClasses: '']" @change="handelChange">
+      <option disabled selected value="">{{ placeholder }}</option>
+      <option :value="option.value" v-for="(option, index) in options" :key="index">
+        {{ option.name }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { InputSize } from '@/components/Input/types'
+import type { optionsType } from '@/components/Select/types'
+import { toRefs } from 'vue'
+import { useSelectClasses } from '@/components/Select/composables/useSelectClasses'
+
+const props = defineProps({
+  modelValue: {
+    default: '',
+  },
+  options: {
+    type: Array as PropType<optionsType[]>,
+    default: () => [],
+  },
+  placeholder: {
+    type: String,
+    default: 'Please select one',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  underline: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String as PropType<InputSize>,
+    default: 'md',
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+const handelChange = (event: Event) => {
+  emit('update:modelValue', (event.target as HTMLInputElement).value)
+}
+
+const { selectClasses, underlineClasses } = useSelectClasses(toRefs(props))
+</script>

src/components/Select/composables/useSelectClasses.ts

@@ -0,0 +1,35 @@
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
+import type { InputSize } from '@/components/Input/types'
+
+// SELECT
+const defaultSelectClasses = 'w-full text-gray-900 bg-gray-50 border-[1px] border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500'
+const disabledSelectClasses = 'cursor-not-allowed bg-gray-100'
+const underlineSelectClasses = 'bg-transparent dark:bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer rounded-none'
+const selectSizeClasses: Record<InputSize, string> = {
+  lg: 'p-4',
+  md: 'p-2.5 text-sm',
+  sm: 'p-2 text-sm',
+}
+
+export type UseSelectClassesProps = {
+  size: Ref<InputSize>
+  disabled: Ref<boolean>
+  underline: Ref<boolean>
+}
+
+export function useSelectClasses(props: UseSelectClassesProps) {
+  const selectClasses = computed(() => {
+    return simplifyTailwindClasses(defaultSelectClasses, selectSizeClasses[props.size.value], props.disabled.value ? disabledSelectClasses : '')
+  })
+
+  const underlineClasses = computed(() => {
+    return underlineSelectClasses
+  })
+
+  return { 
+    selectClasses,
+    underlineClasses,
+  }
+}

src/components/Select/types.ts

@@ -0,0 +1,4 @@
+export type optionsType = {
+  value: string,
+  name: string,
+}