fix(Standalone Forms): support disabled option on Select component

gitsindonesia · Sep 4, 2023 · f382d09 · f382d09
1 parent 5b2e7df
commit f382d09
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 8 deletions.
diff --git a/packages/forms/src/form-select/Select.stories.ts b/packages/forms/src/form-select/Select.stories.ts
@@ -15,11 +15,11 @@ function createItems(length = 5, additionalAttrs = {}) {
   }));
 }
 
-const items = createItems()
+const items = createItems();
 
 const groupItems = createItems(5, {
   options: createItems(5),
-})
+});
 
 export default {
   title: 'Experimental/Forms/Select',
@@ -31,7 +31,18 @@ export default {
     },
   },
   args: {
-    options: items,
+    options: [
+      {
+        label: 'Choose',
+        value: '',
+      },
+      ...items,
+      {
+        label: 'Disabled item',
+        value: 'x',
+        disabled: true,
+      },
+    ],
   },
 } as Meta;
 
@@ -62,15 +73,15 @@ DefaultValue.args = {
 
 export const OptionGroup = Template.bind({});
 OptionGroup.args = {
-  options: groupItems
+  options: groupItems,
 };
 
 export const VModel: Story<typeof Select> = (args) => ({
   components: {
     Select,
   },
   setup() {
-    const value = ref('')
+    const value = ref('');
     return {args, value};
   },
   template: `

diff --git a/packages/forms/src/form-select/Select.vue b/packages/forms/src/form-select/Select.vue
@@ -134,11 +134,11 @@ defineSlots<{
         <SelectOptions :options="options" />
       </select>
     </div>
-    <p v-if="hint" class="v-input-hint">
+    <div v-if="hint" class="v-input-hint">
       <slot name="hint">
         {{ hint }}
       </slot>
-    </p>
+    </div>
     <div v-if="errorMessage" class="v-input-error" :class="errorClass">
       <slot name="error">
         {{ errorMessage }}

diff --git a/packages/forms/src/input/SelectOptions.vue b/packages/forms/src/input/SelectOptions.vue
@@ -2,6 +2,8 @@
 export interface Option {
   label: string;
   value: string | number;
+  disabled?: boolean;
+  selected?: boolean;
   options?: Option[];
 }
 
@@ -21,11 +23,19 @@ withDefaults(defineProps<Props>(), {
         v-for="(subOption, index) in option.options"
         :key="index"
         :value="subOption?.value || subOption"
+        :disabled="subOption?.disabled"
+        :selected="subOption?.selected"
       >
         {{ subOption?.label || subOption }}
       </option>
     </optgroup>
-    <option v-else :key="index" :value="option?.value || option">
+    <option
+      v-else
+      :key="index"
+      :value="option?.value || option"
+      :disabled="option?.disabled"
+      :selected="option?.selected"
+    >
       {{ option?.label || option }}
     </option>
   </template>