From b87c8d775177effd72533c31f6389972386c45af Mon Sep 17 00:00:00 2001
From: vasu <vasucp1207@gmail.com>
Date: Tue, 13 Jun 2023 14:51:41 +0530
Subject: [PATCH 01/12] feat(component): New select component

---
 docs/components/select.md                     | 74 +++++++++++++++++++
 .../select/examples/DisabledSelect.vue        | 17 +++++
 .../select/examples/SelectExample.vue         | 17 +++++
 .../components/select/examples/SelectSize.vue | 17 +++++
 .../select/examples/UnderlinedSelect.vue      | 17 +++++
 src/components/Select/Select.vue              | 51 +++++++++++++
 .../Select/composables/useSelectClasses.ts    | 35 +++++++++
 src/components/Select/types.ts                |  4 +
 src/index.ts                                  |  2 +
 9 files changed, 234 insertions(+)
 create mode 100644 docs/components/select.md
 create mode 100644 docs/components/select/examples/DisabledSelect.vue
 create mode 100644 docs/components/select/examples/SelectExample.vue
 create mode 100644 docs/components/select/examples/SelectSize.vue
 create mode 100644 docs/components/select/examples/UnderlinedSelect.vue
 create mode 100644 src/components/Select/Select.vue
 create mode 100644 src/components/Select/composables/useSelectClasses.ts
 create mode 100644 src/components/Select/types.ts

diff --git a/docs/components/select.md b/docs/components/select.md
new file mode 100644
index 0000000..44cda73
--- /dev/null
+++ b/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 />
\ No newline at end of file
diff --git a/docs/components/select/examples/DisabledSelect.vue b/docs/components/select/examples/DisabledSelect.vue
new file mode 100644
index 0000000..878a76f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/components/select/examples/SelectExample.vue b/docs/components/select/examples/SelectExample.vue
new file mode 100644
index 0000000..36c81e4
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/components/select/examples/SelectSize.vue b/docs/components/select/examples/SelectSize.vue
new file mode 100644
index 0000000..c08866f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/components/select/examples/UnderlinedSelect.vue b/docs/components/select/examples/UnderlinedSelect.vue
new file mode 100644
index 0000000..9b2d69c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
new file mode 100644
index 0000000..c56dd6d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Select/composables/useSelectClasses.ts b/src/components/Select/composables/useSelectClasses.ts
new file mode 100644
index 0000000..29d8568
--- /dev/null
+++ b/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,
+  }
+}
\ No newline at end of file
diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts
new file mode 100644
index 0000000..2ad533f
--- /dev/null
+++ b/src/components/Select/types.ts
@@ -0,0 +1,4 @@
+export type optionsType = {
+  value: string,
+  name: string,
+}
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 1a34345..a1b73bd 100644
--- a/src/index.ts
+++ b/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'

From 2c97b192849bb68b3b88b5a628a632d8cfc9c29b Mon Sep 17 00:00:00 2001
From: vasu <vasucp1207@gmail.com>
Date: Tue, 13 Jun 2023 15:00:35 +0530
Subject: [PATCH 02/12] feat(component): New select component docs

---
 docs/.vitepress/config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 649fdf6..8cf9f9f 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -65,6 +65,7 @@ function getComponents() {
 function getFormComponents() {
   return [
     { text: 'Input', link: 'components/input' },
+    { text: 'Select', link: 'components/select' },
   ]
 }
 

From 996064edae81e2b270030a77203f18e92ad9e9a3 Mon Sep 17 00:00:00 2001
From: vasu <vasucp1207@gmail.com>
Date: Tue, 13 Jun 2023 18:44:13 +0530
Subject: [PATCH 03/12] feat(component): adding label to select

---
 docs/components/select.md                             | 2 ++
 docs/components/select/examples/DisabledSelect.vue    | 2 +-
 docs/components/select/examples/SelectExample.vue     | 2 +-
 docs/components/select/examples/SelectSize.vue        | 6 ++++--
 docs/components/select/examples/UnderlinedSelect.vue  | 2 +-
 src/components/Select/Select.vue                      | 7 ++++++-
 src/components/Select/composables/useSelectClasses.ts | 8 ++++++++
 7 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/docs/components/select.md b/docs/components/select.md
index 44cda73..c3d3059 100644
--- a/docs/components/select.md
+++ b/docs/components/select.md
@@ -67,6 +67,8 @@ const countries = [
 <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>
 ```
diff --git a/docs/components/select/examples/DisabledSelect.vue b/docs/components/select/examples/DisabledSelect.vue
index 878a76f..e6b4508 100644
--- a/docs/components/select/examples/DisabledSelect.vue
+++ b/docs/components/select/examples/DisabledSelect.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Select v-model="selected" :options="countries" placeholder="You can't select" :disabled="true" />
+    <Select v-model="selected" :options="countries" placeholder="You can't select" label="Select a country" :disabled="true" />
   </div>
 </template>
 
diff --git a/docs/components/select/examples/SelectExample.vue b/docs/components/select/examples/SelectExample.vue
index 36c81e4..d1f84fd 100644
--- a/docs/components/select/examples/SelectExample.vue
+++ b/docs/components/select/examples/SelectExample.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Select v-model="selected" :options="countries" />
+    <Select v-model="selected" :options="countries" label="Select a country" />
   </div>
 </template>
 
diff --git a/docs/components/select/examples/SelectSize.vue b/docs/components/select/examples/SelectSize.vue
index c08866f..5583775 100644
--- a/docs/components/select/examples/SelectSize.vue
+++ b/docs/components/select/examples/SelectSize.vue
@@ -1,6 +1,8 @@
 <template>
-  <div>
-    <Select v-model="selected" :options="countries" size="lg" />
+  <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>
 
diff --git a/docs/components/select/examples/UnderlinedSelect.vue b/docs/components/select/examples/UnderlinedSelect.vue
index 9b2d69c..809ac8b 100644
--- a/docs/components/select/examples/UnderlinedSelect.vue
+++ b/docs/components/select/examples/UnderlinedSelect.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Select v-model="selected" :options="countries" :underline="true" />
+    <Select v-model="selected" :options="countries" label="Select a country" :underline="true" />
   </div>
 </template>
 
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
index c56dd6d..d22cc96 100644
--- a/src/components/Select/Select.vue
+++ b/src/components/Select/Select.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <label v-if="label" :class="labelClasses">{{ label }}</label>
     <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">
@@ -20,6 +21,10 @@ const props = defineProps({
   modelValue: {
     default: '',
   },
+  label: {
+    type: String,
+    default: '',
+  },
   options: {
     type: Array as PropType<optionsType[]>,
     default: () => [],
@@ -47,5 +52,5 @@ const handelChange = (event: Event) => {
   emit('update:modelValue', (event.target as HTMLInputElement).value)
 }
 
-const { selectClasses, underlineClasses } = useSelectClasses(toRefs(props))
+const { selectClasses, underlineClasses, labelClasses } = useSelectClasses(toRefs(props))
 </script>
\ No newline at end of file
diff --git a/src/components/Select/composables/useSelectClasses.ts b/src/components/Select/composables/useSelectClasses.ts
index 29d8568..3b1d710 100644
--- a/src/components/Select/composables/useSelectClasses.ts
+++ b/src/components/Select/composables/useSelectClasses.ts
@@ -3,6 +3,9 @@ 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'
@@ -28,8 +31,13 @@ export function useSelectClasses(props: UseSelectClassesProps) {
     return underlineSelectClasses
   })
 
+  const labelClasses = computed(() => {
+    return defaultLabelClasses
+  })
+
   return { 
     selectClasses,
     underlineClasses,
+    labelClasses,
   }
 }
\ No newline at end of file

From 5b32943a4a56788aedee50663828b0c83815bfc9 Mon Sep 17 00:00:00 2001
From: vasu <vasucp1207@gmail.com>
Date: Thu, 15 Jun 2023 06:27:39 +0530
Subject: [PATCH 04/12] v-model eslint

---
 .eslintrc.js                                         | 1 +
 docs/components/select/examples/DisabledSelect.vue   | 2 +-
 docs/components/select/examples/SelectExample.vue    | 2 +-
 docs/components/select/examples/SelectSize.vue       | 6 +++---
 docs/components/select/examples/UnderlinedSelect.vue | 2 +-
 src/components/Select/Select.vue                     | 6 +++---
 6 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 6e93d4a..bfe268c 100644
--- a/.eslintrc.js
+++ b/.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',
   },
 }
diff --git a/docs/components/select/examples/DisabledSelect.vue b/docs/components/select/examples/DisabledSelect.vue
index e6b4508..0aa83fa 100644
--- a/docs/components/select/examples/DisabledSelect.vue
+++ b/docs/components/select/examples/DisabledSelect.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Select v-model="selected" :options="countries" placeholder="You can't select" label="Select a country" :disabled="true" />
+    <Select v-model:value="selected" :options="countries" placeholder="You can't select" label="Select a country" :disabled="true" />
   </div>
 </template>
 
diff --git a/docs/components/select/examples/SelectExample.vue b/docs/components/select/examples/SelectExample.vue
index d1f84fd..c5f4f2a 100644
--- a/docs/components/select/examples/SelectExample.vue
+++ b/docs/components/select/examples/SelectExample.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Select v-model="selected" :options="countries" label="Select a country" />
+    <Select v-model:value="selected" :options="countries" label="Select a country" />
   </div>
 </template>
 
diff --git a/docs/components/select/examples/SelectSize.vue b/docs/components/select/examples/SelectSize.vue
index 5583775..3995c41 100644
--- a/docs/components/select/examples/SelectSize.vue
+++ b/docs/components/select/examples/SelectSize.vue
@@ -1,8 +1,8 @@
 <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" />
+    <Select v-model:value="selected" :options="countries" label="Select a country" size="lg" />
+    <Select v-model:value="selected" :options="countries" label="Select a country" size="md" />
+    <Select v-model:value="selected" :options="countries" label="Select a country" size="sm" />
   </div>
 </template>
 
diff --git a/docs/components/select/examples/UnderlinedSelect.vue b/docs/components/select/examples/UnderlinedSelect.vue
index 809ac8b..86148db 100644
--- a/docs/components/select/examples/UnderlinedSelect.vue
+++ b/docs/components/select/examples/UnderlinedSelect.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Select v-model="selected" :options="countries" label="Select a country" :underline="true" />
+    <Select v-model:value="selected" :options="countries" label="Select a country" :underline="true" />
   </div>
 </template>
 
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
index d22cc96..006bb6f 100644
--- a/src/components/Select/Select.vue
+++ b/src/components/Select/Select.vue
@@ -18,7 +18,7 @@ import { toRefs } from 'vue'
 import { useSelectClasses } from '@/components/Select/composables/useSelectClasses'
 
 const props = defineProps({
-  modelValue: {
+  value: {
     default: '',
   },
   label: {
@@ -47,9 +47,9 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:value'])
 const handelChange = (event: Event) => {
-  emit('update:modelValue', (event.target as HTMLInputElement).value)
+  emit('update:value', (event.target as HTMLInputElement).value)
 }
 
 const { selectClasses, underlineClasses, labelClasses } = useSelectClasses(toRefs(props))

From 90f392e42d63eb3040f52f5f4d3c539304a51229 Mon Sep 17 00:00:00 2001
From: vasu <vasucp1207@gmail.com>
Date: Thu, 15 Jun 2023 23:24:25 +0530
Subject: [PATCH 05/12] code refactor

---
 .../select/examples/SelectExample.vue         |  2 +-
 src/components/Select/Select.vue              | 63 +++++++++----------
 src/components/Select/types.ts                |  2 +-
 3 files changed, 30 insertions(+), 37 deletions(-)

diff --git a/docs/components/select/examples/SelectExample.vue b/docs/components/select/examples/SelectExample.vue
index c5f4f2a..d1f84fd 100644
--- a/docs/components/select/examples/SelectExample.vue
+++ b/docs/components/select/examples/SelectExample.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Select v-model:value="selected" :options="countries" label="Select a country" />
+    <Select v-model="selected" :options="countries" label="Select a country" />
   </div>
 </template>
 
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
index 006bb6f..ea86414 100644
--- a/src/components/Select/Select.vue
+++ b/src/components/Select/Select.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <label v-if="label" :class="labelClasses">{{ label }}</label>
-    <select :disabled="disabled" :class="[selectClasses, underline? underlineClasses: '']" @change="handelChange">
+    <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 }}
@@ -11,46 +11,39 @@
 </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 type { OptionsType } from '@/components/Select/types'
+import { toRefs, computed } from 'vue'
 import { useSelectClasses } from '@/components/Select/composables/useSelectClasses'
 
-const props = defineProps({
-  value: {
-    default: '',
+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
   },
-  label: {
-    type: String,
-    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',
+  set(val) {
+    emit('update:modelValue', val)
   },
 })
 
-const emit = defineEmits(['update:value'])
-const handelChange = (event: Event) => {
-  emit('update:value', (event.target as HTMLInputElement).value)
-}
-
 const { selectClasses, underlineClasses, labelClasses } = useSelectClasses(toRefs(props))
 </script>
\ No newline at end of file
diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts
index 2ad533f..7f633e1 100644
--- a/src/components/Select/types.ts
+++ b/src/components/Select/types.ts
@@ -1,4 +1,4 @@
-export type optionsType = {
+export type OptionsType = {
   value: string,
   name: string,
 }
\ No newline at end of file

From 20af382076db8f87a8e95018eec1cd5ab4447cd7 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Fri, 16 Jun 2023 10:55:50 +0300
Subject: [PATCH 06/12] Update src/components/Select/Select.vue

---
 src/components/Select/Select.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
index ea86414..e145ce8 100644
--- a/src/components/Select/Select.vue
+++ b/src/components/Select/Select.vue
@@ -46,4 +46,4 @@ const model = computed({
 })
 
 const { selectClasses, underlineClasses, labelClasses } = useSelectClasses(toRefs(props))
-</script>
\ No newline at end of file
+</script>

From 1a8b894592b07035592f82c05744a7433350e369 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Fri, 16 Jun 2023 10:55:57 +0300
Subject: [PATCH 07/12] Update src/components/Select/types.ts

---
 src/components/Select/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts
index 7f633e1..b879850 100644
--- a/src/components/Select/types.ts
+++ b/src/components/Select/types.ts
@@ -1,4 +1,4 @@
 export type OptionsType = {
   value: string,
   name: string,
-}
\ No newline at end of file
+}

From ceb5a45df66ea15a5a1f3e0a49530db2c6709472 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Fri, 16 Jun 2023 10:56:03 +0300
Subject: [PATCH 08/12] Update
 docs/components/select/examples/DisabledSelect.vue

---
 docs/components/select/examples/DisabledSelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/select/examples/DisabledSelect.vue b/docs/components/select/examples/DisabledSelect.vue
index 0aa83fa..e6b4508 100644
--- a/docs/components/select/examples/DisabledSelect.vue
+++ b/docs/components/select/examples/DisabledSelect.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Select v-model:value="selected" :options="countries" placeholder="You can't select" label="Select a country" :disabled="true" />
+    <Select v-model="selected" :options="countries" placeholder="You can't select" label="Select a country" :disabled="true" />
   </div>
 </template>
 

From 218b7551e443d92d972503193fe8c96bd18d5fc0 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Fri, 16 Jun 2023 10:56:11 +0300
Subject: [PATCH 09/12] Update docs/components/select/examples/SelectSize.vue

---
 docs/components/select/examples/SelectSize.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/select/examples/SelectSize.vue b/docs/components/select/examples/SelectSize.vue
index 3995c41..b53a157 100644
--- a/docs/components/select/examples/SelectSize.vue
+++ b/docs/components/select/examples/SelectSize.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-2">
-    <Select v-model:value="selected" :options="countries" label="Select a country" size="lg" />
+    <Select v-model="selected" :options="countries" label="Select a country" size="lg" />
     <Select v-model:value="selected" :options="countries" label="Select a country" size="md" />
     <Select v-model:value="selected" :options="countries" label="Select a country" size="sm" />
   </div>

From d4f64e1dffb5b518fe904d72eb13b64c8d06b684 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Fri, 16 Jun 2023 10:56:18 +0300
Subject: [PATCH 10/12] Update docs/components/select/examples/SelectSize.vue

---
 docs/components/select/examples/SelectSize.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/select/examples/SelectSize.vue b/docs/components/select/examples/SelectSize.vue
index b53a157..648c032 100644
--- a/docs/components/select/examples/SelectSize.vue
+++ b/docs/components/select/examples/SelectSize.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-2">
     <Select v-model="selected" :options="countries" label="Select a country" size="lg" />
-    <Select v-model:value="selected" :options="countries" label="Select a country" size="md" />
+    <Select v-model="selected" :options="countries" label="Select a country" size="md" />
     <Select v-model:value="selected" :options="countries" label="Select a country" size="sm" />
   </div>
 </template>

From 1b5957c0c90e1afaec0197ae4d37982f5953d3d6 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Fri, 16 Jun 2023 10:56:23 +0300
Subject: [PATCH 11/12] Update docs/components/select/examples/SelectSize.vue

---
 docs/components/select/examples/SelectSize.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/select/examples/SelectSize.vue b/docs/components/select/examples/SelectSize.vue
index 648c032..5583775 100644
--- a/docs/components/select/examples/SelectSize.vue
+++ b/docs/components/select/examples/SelectSize.vue
@@ -2,7 +2,7 @@
   <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:value="selected" :options="countries" label="Select a country" size="sm" />
+    <Select v-model="selected" :options="countries" label="Select a country" size="sm" />
   </div>
 </template>
 

From 86ad5076f551e2c14aebfbbf42093efd4b7edfda Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Fri, 16 Jun 2023 10:56:31 +0300
Subject: [PATCH 12/12] Update
 docs/components/select/examples/UnderlinedSelect.vue

---
 docs/components/select/examples/UnderlinedSelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/select/examples/UnderlinedSelect.vue b/docs/components/select/examples/UnderlinedSelect.vue
index 86148db..809ac8b 100644
--- a/docs/components/select/examples/UnderlinedSelect.vue
+++ b/docs/components/select/examples/UnderlinedSelect.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Select v-model:value="selected" :options="countries" label="Select a country" :underline="true" />
+    <Select v-model="selected" :options="countries" label="Select a country" :underline="true" />
   </div>
 </template>