feat(v-select): new props: label, labelClass, wrapperClass

gitsindonesia · Jun 28, 2022 · f6ed412 · f6ed412
1 parent 1c1e620
commit f6ed412
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/packages/select/src/VSelect.stories.ts b/packages/select/src/VSelect.stories.ts
@@ -76,3 +76,16 @@ NoCheckIcon.parameters = {
     },
   },
 };
+
+export const Label = Template.bind({});
+Label.args = {
+  label: 'My Label',
+  labelClass: 'font-semibold mb-1 block',
+};
+Label.parameters = {
+  docs: {
+    source: {
+      code: '<v-select :items="items" label="My Label" label-class="font-semibold mb-1 block" />',
+    },
+  },
+};
diff --git a/packages/select/src/VSelect.vue b/packages/select/src/VSelect.vue
@@ -5,6 +5,7 @@ import {
   ListboxButton,
   ListboxOptions,
   ListboxOption,
+  ListboxLabel,
 } from '@headlessui/vue';
 import {CheckIcon, ChevronDownIcon, XIcon} from '@heroicons/vue/solid';
 import {getBgColor} from '@gits-id/utils';
@@ -96,6 +97,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  labelClass: {
+    type: String,
+    default: 'mb-1 block',
+  },
+  wrapperClass: {
+    type: String,
+    default: '',
+  },
 });
 
 const {
@@ -193,8 +202,9 @@ const clear = () => (selectedItem.value = '');
 </script>
 
 <template>
-  <div class="">
+  <div :class="wrapperClass">
     <Listbox v-model="selectedItem">
+      <ListboxLabel v-if="label" :class="labelClass">{{ label }}</ListboxLabel>
       <div class="relative">
         <ListboxButton
           class="