From 6e6acd2cf20ebb7c8f9cfaeaccd7964277975e25 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Tue, 9 Sep 2025 22:17:56 +0400
Subject: [PATCH 1/3] refactor: #86eunvbgj  Update Input, Button, and Select
 components to improve disabled state handling

- Enhanced Input, Button, and Select components to manage disabled states based on InputGroup context, allowing for more flexible and consistent behavior.
- Updated the logic for determining the disabled state to prioritize child component settings over InputGroup settings.
- Adjusted related tests to reflect changes in how disabled states are applied and verified across components.
---
 src/elements/Button.vue                       | 10 +++-
 src/form/Input.vue                            | 15 +++--
 src/form/InputGroup.vue                       |  4 +-
 src/form/Select.vue                           | 12 +++-
 .../InputGroup.accessibility.test.ts          |  8 +--
 src/form/__tests__/InputGroup.test.ts         | 60 +++++++++++++++++--
 6 files changed, 88 insertions(+), 21 deletions(-)

diff --git a/src/elements/Button.vue b/src/elements/Button.vue
index 69a13d1..23fb176 100644
--- a/src/elements/Button.vue
+++ b/src/elements/Button.vue
@@ -24,7 +24,9 @@
             computedFocusColor,
             computedHoverNeutralizeClasses,
             // Handle disabled styling when in InputGroup
-            (isInInputGroup && context && context.disabled) ||
+            (isInInputGroup &&
+              context &&
+              (disabled !== undefined ? disabled : context.disabled)) ||
             disabled ||
             cardDisabled
               ? 'bg-gray-100 text-gray-400 cursor-not-allowed border-gray-200 dark:bg-gray-800 dark:border-gray-700'
@@ -51,7 +53,11 @@
             props.chip ? 'is-chip' : undefined,
           ],
     ]"
-    :disabled="disabled || cardDisabled || isLoading ? true : undefined"
+    :disabled="
+      isInInputGroup && context
+        ? (disabled !== undefined ? disabled : context.disabled) || isLoading
+        : disabled || cardDisabled || isLoading
+    "
     @focus="handleFocusEvent"
     @blur="handleBlurEvent"
   >
diff --git a/src/form/Input.vue b/src/form/Input.vue
index 524cc82..9550058 100644
--- a/src/form/Input.vue
+++ b/src/form/Input.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-1">
+  <div :class="['flex flex-col gap-1', isInInputGroup ? 'flex-1' : 'w-full']">
     <label
       v-if="label && !isInInputGroup"
       :for="id"
@@ -21,6 +21,7 @@
       />
       <input
         :class="[
+          'w-full',
           iconName && actualIconPosition === 'left' ? 'pl-10' : '',
           iconName && actualIconPosition === 'right' ? 'pr-10' : '',
           // base classes - only apply form-input when NOT in InputGroup
@@ -33,13 +34,15 @@
           isInInputGroup
             ? [
                 ...inputGroupClasses,
-                'flex-1',
+
                 'h-10',
                 'focus:ring-2 focus:ring-primary/20 focus:border-primary',
                 // Ensure error state is applied even in InputGroup
                 effectiveError ? '!border-red-500' : '',
                 // Handle disabled styling when in InputGroup
-                (isInInputGroup && context && context.disabled) ||
+                (isInInputGroup &&
+                  context &&
+                  (disabled !== undefined ? disabled : context.disabled)) ||
                 disabled ||
                 cardDisabled
                   ? 'bg-gray-100 text-gray-400 cursor-not-allowed border-gray-200 dark:bg-gray-800 dark:border-gray-700'
@@ -58,7 +61,9 @@
         :placeholder="placeholder"
         :disabled="
           isInInputGroup && context
-            ? context.disabled
+            ? disabled !== undefined
+              ? disabled
+              : context.disabled
             : disabled || cardDisabled
         "
         :required="required"
@@ -113,7 +118,7 @@ const props = withDefaults(defineProps<InputProps>(), {
   modelValue: "",
   type: "text",
   placeholder: "",
-  disabled: false,
+  disabled: undefined,
   required: false,
   error: false,
   errorMessage: "",
diff --git a/src/form/InputGroup.vue b/src/form/InputGroup.vue
index 4fc504f..693a1df 100644
--- a/src/form/InputGroup.vue
+++ b/src/form/InputGroup.vue
@@ -18,9 +18,9 @@
             'data-input-group-total': children.length,
             'data-input-group-remove-right-border': index < children.length - 1,
             'data-input-group-index': index,
-            // Pass error and disabled state to children for styling
+            // Pass error state to children for styling
             error: props.error,
-            disabled: props.disabled,
+            // Don't pass disabled directly - let children handle priority
           }"
           :class="getChildBorderClasses(index)"
           @focus="handleChildFocus(index)"
diff --git a/src/form/Select.vue b/src/form/Select.vue
index 04d3046..8dee9ca 100644
--- a/src/form/Select.vue
+++ b/src/form/Select.vue
@@ -42,7 +42,11 @@
                   // Ensure error state is applied even in InputGroup
                   effectiveError ? '!border-red-500' : '',
                   // Handle disabled styling when in InputGroup
-                  (isInInputGroup && context && context.disabled) ||
+                  (isInInputGroup &&
+                    context &&
+                    (props.disabled !== undefined
+                      ? props.disabled
+                      : context.disabled)) ||
                   props.disabled ||
                   cardDisabled
                     ? 'bg-gray-100 text-gray-400 cursor-not-allowed border-gray-200 dark:bg-gray-800 dark:border-gray-700'
@@ -61,7 +65,9 @@
           ]"
           :disabled="
             isInInputGroup && context
-              ? context.disabled
+              ? props.disabled !== undefined
+                ? props.disabled
+                : context.disabled
               : props.disabled || cardDisabled
           "
           :aria-expanded="isOpen"
@@ -357,7 +363,7 @@ const props = withDefaults(defineProps<SelectProps>(), {
   modelValue: undefined,
   options: () => [],
   placeholder: "Select an option",
-  disabled: false,
+  disabled: undefined,
   required: false,
   error: false,
   errorMessage: "",
diff --git a/src/form/__tests__/InputGroup.accessibility.test.ts b/src/form/__tests__/InputGroup.accessibility.test.ts
index 0b2d9ab..6b9157a 100644
--- a/src/form/__tests__/InputGroup.accessibility.test.ts
+++ b/src/form/__tests__/InputGroup.accessibility.test.ts
@@ -290,9 +290,9 @@ describe("InputGroup Component Accessibility", () => {
         }
       );
 
-      // Disabled state should be passed to child components
+      // Disabled state should be applied to child components via context
       const input = wrapper.findComponent(Input);
-      expect(input.props("disabled")).toBe(true);
+      expect(input.find("input").element.disabled).toBe(true);
     });
 
     it("maintains disabled state consistency", () => {
@@ -303,10 +303,10 @@ describe("InputGroup Component Accessibility", () => {
         }
       );
 
-      // Child component should receive disabled state
+      // Child component should receive disabled state via context
       const input = wrapper.findComponent(Input);
 
-      expect(input.props("disabled")).toBe(true);
+      expect(input.find("input").element.disabled).toBe(true);
     });
   });
 
diff --git a/src/form/__tests__/InputGroup.test.ts b/src/form/__tests__/InputGroup.test.ts
index a2b0934..87eae61 100644
--- a/src/form/__tests__/InputGroup.test.ts
+++ b/src/form/__tests__/InputGroup.test.ts
@@ -132,7 +132,7 @@ describe("InputGroup Component", () => {
       expect(inputComponent.props("error")).toBe(true);
     });
 
-    it("passes disabled prop to child components", () => {
+    it("provides disabled state via context when child disabled is undefined", () => {
       wrapper = mount(InputGroup, {
         props: { disabled: true },
         slots: {
@@ -143,9 +143,9 @@ describe("InputGroup Component", () => {
         },
       });
 
-      // The Input component should receive the disabled prop
+      // The Input component should use InputGroup's disabled state via context
       const inputComponent = wrapper.findComponent(Input);
-      expect(inputComponent.props("disabled")).toBe(true);
+      expect(inputComponent.find("input").element.disabled).toBe(true);
     });
   });
 
@@ -300,7 +300,7 @@ describe("InputGroup Component", () => {
   });
 
   describe("Disabled States", () => {
-    it("passes disabled state to child components", () => {
+    it("uses InputGroup disabled state when child disabled is undefined", () => {
       wrapper = mount(InputGroup, {
         props: { disabled: true },
         slots: {
@@ -312,7 +312,57 @@ describe("InputGroup Component", () => {
       });
 
       const input = wrapper.findComponent(Input);
-      expect(input.props("disabled")).toBe(true);
+      // Child doesn't have disabled prop, so it should use InputGroup's disabled state
+      expect(input.find("input").element.disabled).toBe(true);
+    });
+
+    it("prioritizes child disabled prop over InputGroup disabled prop", () => {
+      wrapper = mount(InputGroup, {
+        props: { disabled: true },
+        slots: {
+          default: `<Input model-value="test" :disabled="false" />`,
+        },
+        global: {
+          components: { Input },
+        },
+      });
+
+      const input = wrapper.findComponent(Input);
+      // Child's disabled=false should override InputGroup's disabled=true
+      // Check the actual disabled property of the DOM element
+      expect(input.find("input").element.disabled).toBe(false);
+    });
+
+    it("uses InputGroup disabled when child disabled is undefined (duplicate test)", () => {
+      wrapper = mount(InputGroup, {
+        props: { disabled: true },
+        slots: {
+          default: `<Input model-value="test" />`,
+        },
+        global: {
+          components: { Input },
+        },
+      });
+
+      const input = wrapper.findComponent(Input);
+      // Should use InputGroup's disabled=true when child disabled is undefined
+      expect(input.find("input").element.disabled).toBe(true);
+    });
+
+    it("prioritizes child disabled=true over InputGroup disabled=false", () => {
+      wrapper = mount(InputGroup, {
+        props: { disabled: false },
+        slots: {
+          default: `<Input model-value="test" :disabled="true" />`,
+        },
+        global: {
+          components: { Input },
+        },
+      });
+
+      const input = wrapper.findComponent(Input);
+      // Child's disabled=true should override InputGroup's disabled=false
+      expect(input.find("input").element.disabled).toBe(true);
     });
   });
 

From 79d98b7f55d44c269130d7d3a576f9e3600c2cc0 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Sun, 16 Nov 2025 15:19:50 +0200
Subject: [PATCH 2/3] feat: Add custom selected display slot to Select
 component

- Introduced a new `selected` slot in the Select component to allow customization of how selected options are displayed in the trigger button.
- Updated the Select component to handle both single and multiple selection modes, providing scoped variables for selected options.
- Enhanced Storybook examples to demonstrate the new functionality, including custom display for selected items and handling of multiple selections.
- Refactored related rendering logic to support the new slot and improve overall component behavior.
---
 src/form/Select.stories.ts | 356 +++++++++++++++++++++++++------------
 src/form/Select.vue        |  46 ++++-
 2 files changed, 281 insertions(+), 121 deletions(-)

diff --git a/src/form/Select.stories.ts b/src/form/Select.stories.ts
index 656d294..796a8ad 100644
--- a/src/form/Select.stories.ts
+++ b/src/form/Select.stories.ts
@@ -53,6 +53,18 @@ When \`custom={true}\`, the component provides three specialized slots:
 - **Scoped Variables**:
   - \`close\`: Function to close dropdown with acceptance parameter
 
+## Selected Slot
+
+The \`selected\` slot allows you to customize how selected options are displayed in the trigger button. This slot is available in both default and custom modes.
+
+- **Purpose**: Custom display of selected option(s) in the trigger button
+- **Scoped Variables**:
+  - \`selectedOption\`: The selected value (single mode only, undefined in multiple mode)
+  - \`selectedOptions\`: Array of selected values (always an array - contains single item in single mode, multiple items in multiple mode)
+  - \`multiple\`: Boolean indicating if multiple selection mode is enabled
+  - \`getOptionLabel\`: Helper function to get the display label for an option
+  - \`selectedCount\`: Number of selected items
+
 ## Accessibility
 
 - Full keyboard navigation support (Enter, Space, Arrow keys, Escape)
@@ -800,9 +812,29 @@ export const SearchableObjects: Story = {
 
 // Complex Grouped Example
 export const ComplexGrouped: Story = {
-  render: () => {
-    const selectedValue = ref({ name: "Option 1" });
-    const options = [
+  render: (args) => ({
+    components: { Select },
+    setup() {
+      const selectedValue = ref(args.modelValue || { name: "Option 1" });
+      return { args, selectedValue };
+    },
+    template: `
+      <div class="space-y-4">
+        <Select
+          v-model="selectedValue"
+          v-bind="args"
+          @update:modelValue="selectedValue = $event"
+        />
+        <div class="text-sm text-gray-600">
+          Selected: {{ selectedValue ? selectedValue.name : 'None' }}
+        </div>
+      </div>
+    `,
+  }),
+  args: {
+    label: "Complex Grouped Select",
+    grouped: true,
+    options: [
       {
         group_name: "Group 1",
         list: [{ name: "Option 1" }, { name: "Option 2" }],
@@ -811,66 +843,40 @@ export const ComplexGrouped: Story = {
         group_name: "Group 2",
         list: [{ name: "Option 3" }],
       },
-    ];
-
-    return {
-      components: { Select },
-      setup() {
-        return { selectedValue, options };
-      },
-      template: `
-        <div class="space-y-4">
-          <Select
-            v-model="selectedValue"
-            :options="options"
-            grouped
-            group-label="group_name"
-            group-values="list"
-            label-key="name"
-            placeholder="Select from grouped options"
-            label="Complex Grouped Select"
-          />
-          <div class="text-sm text-gray-600">
-            Selected: {{ selectedValue ? selectedValue.name : 'None' }}
-          </div>
-        </div>
-      `,
-    };
+    ],
+    groupLabel: "group_name",
+    groupValues: "list",
+    labelKey: "name",
+    placeholder: "Select from grouped options",
   },
 };
 
 // Confirmation Mode
 export const ConfirmationMode: Story = {
-  render: () => {
-    const selectedValue = ref("Option 1");
-    const options = [
-      "Option 1",
-      "Option 2",
-      "Option 3",
-      "Option 4",
-      "Option 5",
-    ];
-
-    return {
-      components: { Select },
-      setup() {
-        return { selectedValue, options };
-      },
-      template: `
-        <div class="space-y-4">
-          <Select
-            v-model="selectedValue"
-            :options="options"
-            confirm
-            placeholder="Select an option (confirmation required)"
-            label="Confirmation Mode Select (Single)"
-          />
-          <div class="text-sm text-gray-600">
-            Selected: {{ selectedValue || 'None' }}
-          </div>
+  render: (args) => ({
+    components: { Select },
+    setup() {
+      const selectedValue = ref(args.modelValue || "Option 1");
+      return { args, selectedValue };
+    },
+    template: `
+      <div class="space-y-4">
+        <Select
+          v-model="selectedValue"
+          v-bind="args"
+          @update:modelValue="selectedValue = $event"
+        />
+        <div class="text-sm text-gray-600">
+          Selected: {{ selectedValue || 'None' }}
         </div>
-      `,
-    };
+      </div>
+    `,
+  }),
+  args: {
+    label: "Confirmation Mode Select (Single)",
+    confirm: true,
+    options: ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"],
+    placeholder: "Select an option (confirmation required)",
   },
   parameters: {
     docs: {
@@ -893,37 +899,31 @@ The confirmation footer appears below the options and provides clear actions for
 
 // Multiple Confirmation Mode
 export const MultipleConfirmationMode: Story = {
-  render: () => {
-    const selectedValues = ref(["Option 1"]);
-    const options = [
-      "Option 1",
-      "Option 2",
-      "Option 3",
-      "Option 4",
-      "Option 5",
-    ];
-
-    return {
-      components: { Select },
-      setup() {
-        return { selectedValues, options };
-      },
-      template: `
-        <div class="space-y-4">
-          <Select
-            v-model="selectedValues"
-            :options="options"
-            confirm
-            multiple
-            placeholder="Select multiple options (confirmation required)"
-            label="Confirmation Mode Select (Multiple)"
-          />
-          <div class="text-sm text-gray-600">
-            Selected: {{ selectedValues.length > 0 ? selectedValues.join(', ') : 'None' }}
-          </div>
+  render: (args) => ({
+    components: { Select },
+    setup() {
+      const selectedValues = ref(args.modelValue || ["Option 1"]);
+      return { args, selectedValues };
+    },
+    template: `
+      <div class="space-y-4">
+        <Select
+          v-model="selectedValues"
+          v-bind="args"
+          @update:modelValue="selectedValues = $event"
+        />
+        <div class="text-sm text-gray-600">
+          Selected: {{ selectedValues.length > 0 ? selectedValues.join(', ') : 'None' }}
         </div>
-      `,
-    };
+      </div>
+    `,
+  }),
+  args: {
+    label: "Confirmation Mode Select (Multiple)",
+    confirm: true,
+    multiple: true,
+    options: ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"],
+    placeholder: "Select multiple options (confirmation required)",
   },
   parameters: {
     docs: {
@@ -946,31 +946,19 @@ This mode is particularly useful for forms where users need to make multiple sel
 
 // Custom Mode
 export const CustomMode: Story = {
-  render: () => {
-    const selectedValue = ref(["Option 1"]);
-    const options = [
-      "Option 1",
-      "Option 2",
-      "Option 3",
-      "Option 4",
-      "Option 5",
-    ];
-
-    return {
-      components: { Select },
-      setup() {
-        return { selectedValue, options };
-      },
-      template: `
-        <div class="space-y-4">
-          <Select
-            v-model="selectedValue"
-            :options="options"
-            custom
-            multiple
-            placeholder="Custom select with slots"
-            label="Custom Mode Select (Multiple)"
-          >
+  render: (args) => ({
+    components: { Select },
+    setup() {
+      const selectedValue = ref(args.modelValue || ["Option 1"]);
+      return { args, selectedValue };
+    },
+    template: `
+      <div class="space-y-4">
+        <Select
+          v-model="selectedValue"
+          v-bind="args"
+          @update:modelValue="selectedValue = $event"
+        >
             <!-- Header Slot -->
             <template #header="{ allOptions, setNewList }">
               <div class="p-3 bg-blue-50 dark:bg-blue-900/20">
@@ -1049,7 +1037,13 @@ export const CustomMode: Story = {
           </div>
         </div>
       `,
-    };
+  }),
+  args: {
+    label: "Custom Mode Select (Multiple)",
+    custom: true,
+    multiple: true,
+    options: ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"],
+    placeholder: "Custom select with slots",
   },
   parameters: {
     docs: {
@@ -1070,3 +1064,139 @@ The component is configured with \`custom={true}\` and \`multiple={true}\` to en
     },
   },
 };
+
+// Custom Selected Display Slot
+export const CustomSelectedDisplay: Story = {
+  render: (args) => ({
+    components: { Select },
+    setup() {
+      const selectedValue = ref(args.modelValue || "");
+      return { args, selectedValue };
+    },
+    template: `
+      <div class="space-y-4">
+        <Select
+          v-model="selectedValue"
+          v-bind="args"
+          @update:modelValue="selectedValue = $event"
+        >
+          <template #selected="{ selectedOption, selectedOptions, multiple, getOptionLabel, selectedCount }">
+            <span v-if="multiple" class="flex items-center gap-2">
+              <span class="inline-flex items-center justify-center w-5 h-5 text-xs font-semibold text-white bg-blue-600 rounded-full">
+                {{ selectedCount }}
+              </span>
+              <span class="font-medium">Selected</span>
+            </span>
+            <span v-else class="flex items-center gap-2">
+              <span class="inline-flex items-center justify-center w-5 h-5 text-xs text-blue-600">
+                ✓
+              </span>
+              <span class="font-medium">{{ getOptionLabel(selectedOption) }}</span>
+            </span>
+          </template>
+        </Select>
+        <div class="text-sm text-gray-600">
+          Selected: {{ Array.isArray(selectedValue) ? selectedValue.join(', ') : selectedValue || 'None' }}
+        </div>
+      </div>
+    `,
+  }),
+  args: {
+    label: "Custom Selected Display",
+    options: ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"],
+    placeholder: "Select an option",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+This story demonstrates the **Selected Slot** functionality, which allows you to customize how selected options are displayed in the trigger button.
+
+**Scoped Variables:**
+- \`selectedOption\`: The selected value(s) - single value or array depending on mode
+- \`multiple\`: Boolean indicating if multiple selection mode is enabled
+- \`getOptionLabel\`: Helper function to get the display label for an option
+- \`selectedCount\`: Number of selected items (for multiple mode)
+
+**Use Cases:**
+- Custom badges or chips for selected items
+- Icons or indicators for selection state
+- Custom formatting for selected values
+- Displaying additional information about selections
+
+The slot provides a default implementation that shows a count for multiple selections or the option label for single selections, but you can completely customize this display.
+        `,
+      },
+    },
+  },
+};
+
+// Custom Selected Display with Multiple Selection
+export const CustomSelectedDisplayMultiple: Story = {
+  render: (args) => ({
+    components: { Select },
+    setup() {
+      const selectedValues = ref(args.modelValue || []);
+      return { args, selectedValues };
+    },
+    template: `
+      <div class="space-y-4">
+        <Select
+          v-model="selectedValues"
+          v-bind="args"
+          @update:modelValue="selectedValues = $event"
+        >
+          <template #selected="{ selectedOption, selectedOptions, multiple, getOptionLabel, selectedCount }">
+            <div v-if="multiple && selectedOptions.length > 0" class="flex items-center gap-2 flex-wrap">
+              <span class="text-xs text-gray-500 dark:text-gray-400">Selected:</span>
+              <div class="flex items-center gap-1 flex-wrap">
+                <span
+                  v-for="(option, index) in selectedOptions.slice(0, 2)"
+                  :key="index"
+                  class="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded"
+                >
+                  {{ getOptionLabel(option) }}
+                </span>
+                <span
+                  v-if="selectedCount > 2"
+                  class="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded"
+                >
+                  +{{ selectedCount - 2 }} more
+                </span>
+              </div>
+            </div>
+            <span v-else-if="!multiple" class="flex items-center gap-2">
+              <span class="inline-flex items-center justify-center w-5 h-5 text-xs text-blue-600">
+                ✓
+              </span>
+              <span class="font-medium">{{ getOptionLabel(selectedOption) }}</span>
+            </span>
+          </template>
+        </Select>
+        <div class="text-sm text-gray-600">
+          Selected: {{ selectedValues.length > 0 ? selectedValues.join(', ') : 'None' }}
+        </div>
+      </div>
+    `,
+  }),
+  args: {
+    label: "Custom Selected Display (Multiple)",
+    multiple: true,
+    options: ["Red", "Green", "Blue", "Yellow", "Purple", "Orange"],
+    placeholder: "Select multiple colors",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+This story demonstrates the **Selected Slot** with multiple selection mode, showing how to display selected items as chips/badges with a "more" indicator when there are many selections.
+
+The custom implementation shows:
+- Up to 2 selected items as individual badges
+- A "+X more" badge when more than 2 items are selected
+- Clean, compact display that works well in limited space
+        `,
+      },
+    },
+  },
+};
diff --git a/src/form/Select.vue b/src/form/Select.vue
index 8dee9ca..ad9267c 100644
--- a/src/form/Select.vue
+++ b/src/form/Select.vue
@@ -87,7 +87,23 @@
                 {{ placeholder }}
               </span>
               <span v-else-if="hasSelectedOption" class="truncate">
-                {{ getOptionLabel(selectedOption) }}
+                <slot
+                  name="selected"
+                  :selected-option="selectedOption"
+                  :selected-options="selectedOptions"
+                  :multiple="multiple"
+                  :get-option-label="getOptionLabel"
+                  :selected-count="multiple ? selectedOptions.length : 1"
+                >
+                  <template v-if="multiple">
+                    {{ selectedOptions.length }}
+                    {{ selectedOptions.length === 1 ? "item" : "items" }}
+                    selected
+                  </template>
+                  <template v-else>
+                    {{ getOptionLabel(selectedOption) }}
+                  </template>
+                </slot>
               </span>
             </div>
             <Icon
@@ -113,7 +129,7 @@
           leave-to-class="transform opacity-0 scale-95"
         >
           <div
-            v-if="isOpen"
+            v-show="isOpen"
             :class="[
               'absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg',
               custom ? 'max-h-96' : 'max-h-60',
@@ -159,7 +175,7 @@
                           name="each"
                           :option="option"
                           :is-selected="isOptionSelected(option)"
-                          :set-selected="() => selectOption(option)"
+                          :set-selected="(selectedOption:any) => selectOption(selectedOption || option)"
                         />
                       </div>
                     </div>
@@ -397,7 +413,6 @@ const emit = defineEmits<{
 }>();
 
 const cardDisabled = inject<boolean>("cardDisabled", false);
-const store = useAppStore();
 const { isInInputGroup, inputGroupClasses, handleFocus, handleBlur, context } =
   useInputGroup();
 
@@ -420,11 +435,23 @@ const actualIconPosition = computed(() =>
 
 const selectedOption = computed(() => {
   if (props.multiple) {
-    return Array.isArray(props.modelValue) ? props.modelValue : [];
+    return undefined; // In multiple mode, use selectedOptions instead
   }
   return props.modelValue;
 });
 
+const selectedOptions = computed(() => {
+  if (props.multiple) {
+    return Array.isArray(props.modelValue) ? props.modelValue : [];
+  }
+  // In single mode, return array with single option if selected
+  return props.modelValue !== undefined &&
+    props.modelValue !== null &&
+    props.modelValue !== ""
+    ? [props.modelValue]
+    : [];
+});
+
 const hasSelectedOption = computed(() => {
   if (props.multiple) {
     return Array.isArray(props.modelValue) && props.modelValue.length > 0;
@@ -478,13 +505,13 @@ const getOptionLabel = (option: any): string => {
   if (typeof option === "string" || typeof option === "number") {
     return String(option);
   }
-  return option[props.labelKey] ?? option.name ?? String(option);
+  return option[props.labelKey] ?? String(option);
 };
 
 const isOptionSelected = (option: any): boolean => {
   if (!option) return false;
   if (props.multiple) {
-    return selectedOption.value.some(
+    return selectedOptions.value.some(
       (selected: any) => getOptionValue(selected) === getOptionValue(option)
     );
   }
@@ -630,7 +657,10 @@ const setNewList = (
 const closeWithAcceptance = (accepted: boolean) => {
   if (accepted) {
     // Accept the current selection
-    emit("change", selectedOption.value);
+    emit(
+      "change",
+      props.multiple ? selectedOptions.value : selectedOption.value
+    );
   } else {
     // Cancel - revert to original value
     if (props.confirm && originalValue.value !== undefined) {

From 5fbb4802041d86f36a93ba6c9bba27d38974a107 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Sun, 16 Nov 2025 15:25:54 +0200
Subject: [PATCH 3/3] docs: Update Storybook Development Guidelines to enforce
 Args-to-Props consistency

- Added guidelines to ensure all story args are passed to components via props using `v-bind="args"`.
- Emphasized the importance of not hardcoding props in templates and ensuring all component props are controllable through Storybook controls.
- Included examples for correct and incorrect usage of props in templates to enhance clarity and adherence to best practices.
---
 .../Storybook-development-guidelines.mdc      | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/.cursor/rules/Storybook-development-guidelines.mdc b/.cursor/rules/Storybook-development-guidelines.mdc
index 31a8593..7792e76 100644
--- a/.cursor/rules/Storybook-development-guidelines.mdc
+++ b/.cursor/rules/Storybook-development-guidelines.mdc
@@ -132,6 +132,42 @@ alwaysApply: false
   };
   ```
 
+- **Args-to-Props Consistency**: All story args must be passed to the rendered component via props. Never hardcode props in templates when they should come from args:
+  - ✅ **Correct**: Use `v-bind="args"` to pass all args as props
+  ```typescript
+  template: `
+    <ComponentName v-bind="args" />
+  `
+  ```
+  - ❌ **Incorrect**: Hardcoding props that should come from args
+  ```typescript
+  template: `
+    <ComponentName 
+      :label="'Hardcoded Label'" 
+      :placeholder="'Hardcoded Placeholder'"
+    />
+  `
+  ```
+  - ✅ **Correct**: When overriding specific props, still use `v-bind="args"` first, then override:
+  ```typescript
+  template: `
+    <ComponentName 
+      v-bind="args"
+      :model-value="reactiveValue"
+      @update:model-value="handleChange"
+    />
+  `
+  ```
+  - **Story Args**: All component props should be controllable through story args. Define props in the story's `args` object rather than hardcoding them in templates:
+  ```typescript
+  args: {
+    label: "Custom Label",
+    placeholder: "Custom Placeholder",
+    options: ["Option 1", "Option 2"]
+  }
+  ```
+  - **Verification**: Ensure that when users modify controls in Storybook, those changes are reflected in the rendered component through the args binding.
+
 ### 4. ArgTypes & Controls Configuration
 
 - **ArgTypes Definition**: Define comprehensive argTypes for all props:
@@ -413,6 +449,7 @@ Note: Avoid embedding code in this section; Storybook auto-generates usage code.
 
 - **Story Creation**: Automatically create comprehensive stories for new components with proper structure, argTypes, and documentation.
 - **Pattern Consistency**: Follow established patterns from existing stories in the project.
+- **Args-to-Props Matching**: Always ensure story args are passed to rendered components via `v-bind="args"`. Never hardcode props in templates that should come from story args. All component props must be controllable through Storybook controls.
 - **TypeScript Integration**: Ensure proper TypeScript typing for all stories and meta configurations.
 - **Theme Integration**: Leverage global theme controls and main decorator for consistent theming.
 - **Documentation Quality**: Include comprehensive component documentation with usage examples.