Merge pull request #150 from vasucp1207/select

feat(component): Select component

.eslintrc.js

@@ -20,5 +20,6 @@ module.exports = {
     'comma-dangle': ['error', 'always-multiline'],
     'no-multiple-empty-lines': 'error',
     'object-curly-spacing': ['error', 'always'],
+    'vue/no-v-model-argument': 'off',
   },
 }

docs/.vitepress/config.ts

@@ -65,6 +65,7 @@ function getComponents() {
 function getFormComponents() {
   return [
     { text: 'Input', link: 'components/input' },
+    { text: 'Select', link: 'components/select' },
   ]
 }
 

docs/components/select.md

@@ -0,0 +1,76 @@
+<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" />
+    <Select v-model="selected" :options="countries" :size="md" />
+    <Select v-model="selected" :options="countries" :size="sm" />
+  </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" label="Select a country" :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" label="Select a country" />
+  </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,19 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <Select v-model="selected" :options="countries" label="Select a country" size="lg" />
+    <Select v-model="selected" :options="countries" label="Select a country" size="md" />
+    <Select v-model="selected" :options="countries" label="Select a country" size="sm" />
+  </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" label="Select a country" :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,49 @@
+<template>
+  <div>
+    <label v-if="label" :class="labelClasses">{{ label }}</label>
+    <select v-model="model" :disabled="disabled" :class="[selectClasses, underline? underlineClasses: '']">
+      <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 { InputSize } from '@/components/Input/types'
+import type { OptionsType } from '@/components/Select/types'
+import { toRefs, computed } from 'vue'
+import { useSelectClasses } from '@/components/Select/composables/useSelectClasses'
+
+interface InputProps {
+  modelValue?: string;
+  label?: string;
+  options?: OptionsType[];
+  placeholder?: string;
+  disabled?: boolean;
+  underline?: boolean;
+  size?: InputSize;
+}
+const props = withDefaults(defineProps<InputProps>(), {
+  modelValue: '',
+  label: '',
+  options: () => [],
+  placeholder: 'Please select one',
+  disabled: false,
+  underline: false,
+  size: 'md',
+})
+const emit = defineEmits(['update:modelValue'])
+
+const model = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  },
+})
+
+const { selectClasses, underlineClasses, labelClasses } = useSelectClasses(toRefs(props))
+</script>

src/components/Select/composables/useSelectClasses.ts

@@ -0,0 +1,43 @@
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
+import type { InputSize } from '@/components/Input/types'
+
+// LABEL
+const defaultLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300'
+
+// 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
+  })
+
+  const labelClasses = computed(() => {
+    return defaultLabelClasses
+  })
+
+  return { 
+    selectClasses,
+    underlineClasses,
+    labelClasses,
+  }
+}

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'