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