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] 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