feat(component): adding label to select

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

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>
 

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>
 

docs/components/select/examples/SelectSize.vue

@@ -1,6 +1,8 @@
 <template>
-  <div>
+  <div class="flex flex-col gap-2">
-    <Select v-model="selected" :options="countries" size="lg" />
+    <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>
 

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>
 

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>

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