feat(component): New select component

docs/components/select.md

@@ -0,0 +1,74 @@
+<script setup>
+import SelectExample from './select/examples/SelectExample.vue';
+import DisabledSelect from './select/examples/DisabledSelect.vue';
+import SelectSize from './select/examples/SelectSize.vue';
+import UnderlinedSelect from './select/examples/UnderlinedSelect.vue';
+</script>
+
+# Vue Select Components - Flowbite
+
+#### Get started with the select component to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/forms/select/](https://flowbite.com/docs/forms/select/)
+:::
+
+The select input component can be used to gather information from users based on multiple options in the form of a dropdown list and by browsing this page you will find multiple options, styles, sizes, and variants built with the utility classes from Tailwind CSS also available in dark mode.
+
+## Default
+```vue
+<script setup>
+import { ref } from 'vue'
+import { Select } from 'flowbite-vue'
+
+let selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>
+<template>
+    <Select v-model="selected" :options="countries" />
+</template>
+```
+
+<SelectExample />
+
+## Disabled
+
+```vue
+<template>
+  <div>
+    <Select v-model="selected" :options="countries" placeholder="You can't select" :disabled="true" />
+  </div>
+</template>
+```
+
+<DisabledSelect />
+
+## Underlined
+
+```vue
+<template>
+  <div>
+    <Select v-model="selected" :options="countries" :underline="true" />
+  </div>
+</template>
+```
+
+<UnderlinedSelect />
+
+## Size
+
+```vue
+<template>
+  <div>
+    <Select v-model="selected" :options="countries" :size="lg" />
+  </div>
+</template>
+```
+
+<SelectSize />

docs/components/select/examples/DisabledSelect.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <Select v-model="selected" :options="countries" placeholder="You can't select" :disabled="true" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Select } from '../../../../src/index'
+
+let selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>

docs/components/select/examples/SelectExample.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <Select v-model="selected" :options="countries" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Select } from '../../../../src/index'
+
+let selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>

docs/components/select/examples/SelectSize.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <Select v-model="selected" :options="countries" size="lg" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Select } from '../../../../src/index'
+
+let selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>

docs/components/select/examples/UnderlinedSelect.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <Select v-model="selected" :options="countries" :underline="true" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Select } from '../../../../src/index'
+
+let selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>

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,
+}

src/index.ts

@@ -52,4 +52,6 @@ export { default as Input } from './components/Input/Input.vue'
 
 export { default as SlotListener } from './components/utils/SlotListener/SlotListener.vue'
 
+export { default as Select } from './components/Select/Select.vue'
+
 export * from './composables'