From 2ec38694fcb22326e1564211ca57e9e17076d9bb Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Thu, 21 Aug 2025 23:30:21 +0900
Subject: [PATCH] [feat] Enhance MultiSelect component and update Storybook
 stories
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Improved MultiSelect component layout with proper spacing and conditional rendering
- Added default args to MultiSelect and SearchBox stories for better control
- Added new story variants: WithSearchBox, WithSelectedCount, WithClearButton, AllHeaderFeatures, CustomSearchPlaceholder
- Added WithBorder and NoBorder variants to SearchBox story
- Updated BaseWidget story to showcase MultiSelect with all header features enabled
- Fixed conditional rendering of header section in MultiSelect based on feature flags

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/input/MultiSelect.stories.ts   | 45 +++++++++++++++++++
 src/components/input/MultiSelect.vue          | 10 +++--
 src/components/input/SearchBox.stories.ts     | 22 ++++++++-
 .../widget/layout/BaseWidget.stories.ts       |  3 ++
 4 files changed, 75 insertions(+), 5 deletions(-)

diff --git a/src/components/input/MultiSelect.stories.ts b/src/components/input/MultiSelect.stories.ts
index 5df5fa909..abea5eb72 100644
--- a/src/components/input/MultiSelect.stories.ts
+++ b/src/components/input/MultiSelect.stories.ts
@@ -29,6 +29,13 @@ const meta: Meta<typeof MultiSelect> = {
     searchPlaceholder: {
       control: 'text'
     }
+  },
+  args: {
+    label: 'Select',
+    hasSearchBox: false,
+    showSelectedCount: false,
+    hasClearButton: false,
+    searchPlaceholder: 'Search...'
   }
 }
 
@@ -164,3 +171,41 @@ export const MultipleSelectors: Story = {
     `
   })
 }
+
+export const WithSearchBox: Story = {
+  ...Default,
+  args: {
+    hasSearchBox: true
+  }
+}
+
+export const WithSelectedCount: Story = {
+  ...Default,
+  args: {
+    showSelectedCount: true
+  }
+}
+
+export const WithClearButton: Story = {
+  ...Default,
+  args: {
+    hasClearButton: true
+  }
+}
+
+export const AllHeaderFeatures: Story = {
+  ...Default,
+  args: {
+    hasSearchBox: true,
+    showSelectedCount: true,
+    hasClearButton: true
+  }
+}
+
+export const CustomSearchPlaceholder: Story = {
+  ...Default,
+  args: {
+    hasSearchBox: true,
+    searchPlaceholder: 'Filter packages...'
+  }
+}
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index d1d02a4f1..1192e5f22 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -13,14 +13,18 @@
         v-if="hasSearchBox || showSelectedCount || hasClearButton"
         #header
       >
-        <div class="p-2 flex flex-col gap-y-4 pb-0">
+        <div class="p-2 flex flex-col pb-0">
           <SearchBox
             v-if="hasSearchBox"
             v-model="searchQuery"
+            :class="showSelectedCount || hasClearButton ? 'mb-2' : ''"
             :has-border="true"
             :place-holder="searchPlaceholder"
           />
-          <div class="flex items-center justify-between">
+          <div
+            v-if="showSelectedCount || hasClearButton"
+            class="mt-2 flex items-center justify-between"
+          >
             <span
               v-if="showSelectedCount"
               class="text-sm text-neutral-400 dark-theme:text-zinc-500 px-1"
@@ -40,7 +44,7 @@
               @click.stop="selectedItems = []"
             />
           </div>
-          <div class="h-px bg-zinc-200 dark-theme:bg-zinc-700"></div>
+          <div class="mt-4 h-px bg-zinc-200 dark-theme:bg-zinc-700"></div>
         </div>
       </template>
 
diff --git a/src/components/input/SearchBox.stories.ts b/src/components/input/SearchBox.stories.ts
index bdd26aa80..c67776597 100644
--- a/src/components/input/SearchBox.stories.ts
+++ b/src/components/input/SearchBox.stories.ts
@@ -15,6 +15,10 @@ const meta: Meta<typeof SearchBox> = {
       control: 'boolean',
       description: 'Toggle border prop'
     }
+  },
+  args: {
+    placeHolder: 'Search...',
+    hasBorder: false
   }
 }
 
@@ -29,9 +33,23 @@ export const Default: Story = {
       return { searchText, args }
     },
     template: `
-      <div>
-        <SearchBox v-model:="searchQuery" />
+      <div style="max-width: 320px;">
+        <SearchBox v-bind="args" v-model="searchText" />
       </div>
     `
   })
 }
+
+export const WithBorder: Story = {
+  ...Default,
+  args: {
+    hasBorder: true
+  }
+}
+
+export const NoBorder: Story = {
+  ...Default,
+  args: {
+    hasBorder: false
+  }
+}
diff --git a/src/components/widget/layout/BaseWidget.stories.ts b/src/components/widget/layout/BaseWidget.stories.ts
index 31e988cb2..0ac0341de 100644
--- a/src/components/widget/layout/BaseWidget.stories.ts
+++ b/src/components/widget/layout/BaseWidget.stories.ts
@@ -240,6 +240,9 @@ const createStoryTemplate = (args: StoryArgs) => ({
               v-model="selectedFrameworks"
               label="Select Frameworks"
               :options="frameworkOptions"
+              :has-search-box="true"
+              :show-selected-count="true"
+              :has-clear-button="true"
             />
             <MultiSelect
               v-model="selectedProjects"