From deec7dc22b0aa332c9cbd6271435552fc1a82c78 Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Sun, 24 Aug 2025 05:40:34 +0900
Subject: [PATCH] fix: option added & show prefix

---
 src/components/input/MultiSelect.stories.ts  | 73 +++++++++++++++++---
 src/components/input/SearchBox.stories.ts    |  8 +--
 src/components/input/SearchBox.vue           |  8 +--
 src/components/input/SingleSelect.stories.ts | 20 ++++--
 4 files changed, 85 insertions(+), 24 deletions(-)

diff --git a/src/components/input/MultiSelect.stories.ts b/src/components/input/MultiSelect.stories.ts
index 5ae461cf9..2d179c0fd 100644
--- a/src/components/input/MultiSelect.stories.ts
+++ b/src/components/input/MultiSelect.stories.ts
@@ -32,6 +32,12 @@ const meta: Meta<typeof MultiSelect> = {
   },
   args: {
     label: 'Select',
+    options: [
+      { name: 'Vue', value: 'vue' },
+      { name: 'React', value: 'react' },
+      { name: 'Angular', value: 'angular' },
+      { name: 'Svelte', value: 'svelte' }
+    ],
     showSearchBox: false,
     showSelectedCount: false,
     showClearButton: false,
@@ -47,7 +53,7 @@ export const Default: Story = {
     components: { MultiSelect },
     setup() {
       const selected = ref([])
-      const options = [
+      const options = args.options || [
         { name: 'Vue', value: 'vue' },
         { name: 'React', value: 'react' },
         { name: 'Angular', value: 'angular' },
@@ -60,8 +66,11 @@ export const Default: Story = {
         <MultiSelect 
           v-model="selected" 
           :options="options"
-          label="Select Frameworks"
-          v-bind="args"
+          :label="args.label"
+          :showSearchBox="args.showSearchBox"
+          :showSelectedCount="args.showSelectedCount"
+          :showClearButton="args.showClearButton"
+          :searchPlaceholder="args.searchPlaceholder"
         />
         <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
           <p class="text-sm">Selected: {{ selected.length > 0 ? selected.map(s => s.name).join(', ') : 'None' }}</p>
@@ -72,10 +81,10 @@ export const Default: Story = {
 }
 
 export const WithPreselectedValues: Story = {
-  render: () => ({
+  render: (args) => ({
     components: { MultiSelect },
     setup() {
-      const options = [
+      const options = args.options || [
         { name: 'JavaScript', value: 'js' },
         { name: 'TypeScript', value: 'ts' },
         { name: 'Python', value: 'python' },
@@ -83,25 +92,43 @@ export const WithPreselectedValues: Story = {
         { name: 'Rust', value: 'rust' }
       ]
       const selected = ref([options[0], options[1]])
-      return { selected, options }
+      return { selected, options, args }
     },
     template: `
       <div>
         <MultiSelect 
           v-model="selected" 
           :options="options"
-          label="Select Languages"
+          :label="args.label"
+          :showSearchBox="args.showSearchBox"
+          :showSelectedCount="args.showSelectedCount"
+          :showClearButton="args.showClearButton"
+          :searchPlaceholder="args.searchPlaceholder"
         />
         <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
           <p class="text-sm">Selected: {{ selected.map(s => s.name).join(', ') }}</p>
         </div>
       </div>
     `
-  })
+  }),
+  args: {
+    label: 'Select Languages',
+    options: [
+      { name: 'JavaScript', value: 'js' },
+      { name: 'TypeScript', value: 'ts' },
+      { name: 'Python', value: 'python' },
+      { name: 'Go', value: 'go' },
+      { name: 'Rust', value: 'rust' }
+    ],
+    showSearchBox: false,
+    showSelectedCount: false,
+    showClearButton: false,
+    searchPlaceholder: 'Search...'
+  }
 }
 
 export const MultipleSelectors: Story = {
-  render: () => ({
+  render: (args) => ({
     components: { MultiSelect },
     setup() {
       const frameworkOptions = ref([
@@ -136,7 +163,8 @@ export const MultipleSelectors: Story = {
         tagOptions,
         selectedFrameworks,
         selectedProjects,
-        selectedTags
+        selectedTags,
+        args
       }
     },
     template: `
@@ -146,16 +174,28 @@ export const MultipleSelectors: Story = {
             v-model="selectedFrameworks" 
             :options="frameworkOptions"
             label="Select Frameworks"
+            :showSearchBox="args.showSearchBox"
+            :showSelectedCount="args.showSelectedCount"
+            :showClearButton="args.showClearButton"
+            :searchPlaceholder="args.searchPlaceholder"
           />
           <MultiSelect 
             v-model="selectedProjects" 
             :options="projectOptions"
             label="Select Projects"
+            :showSearchBox="args.showSearchBox"
+            :showSelectedCount="args.showSelectedCount"
+            :showClearButton="args.showClearButton"
+            :searchPlaceholder="args.searchPlaceholder"
           />
           <MultiSelect 
             v-model="selectedTags" 
             :options="tagOptions"
             label="Select Tags"
+            :showSearchBox="args.showSearchBox"
+            :showSelectedCount="args.showSelectedCount"
+            :showClearButton="args.showClearButton"
+            :searchPlaceholder="args.searchPlaceholder"
           />
         </div>
         
@@ -169,12 +209,19 @@ export const MultipleSelectors: Story = {
         </div>
       </div>
     `
-  })
+  }),
+  args: {
+    showSearchBox: false,
+    showSelectedCount: false,
+    showClearButton: false,
+    searchPlaceholder: 'Search...'
+  }
 }
 
 export const WithSearchBox: Story = {
   ...Default,
   args: {
+    ...Default.args,
     showSearchBox: true
   }
 }
@@ -182,6 +229,7 @@ export const WithSearchBox: Story = {
 export const WithSelectedCount: Story = {
   ...Default,
   args: {
+    ...Default.args,
     showSelectedCount: true
   }
 }
@@ -189,6 +237,7 @@ export const WithSelectedCount: Story = {
 export const WithClearButton: Story = {
   ...Default,
   args: {
+    ...Default.args,
     showClearButton: true
   }
 }
@@ -196,6 +245,7 @@ export const WithClearButton: Story = {
 export const AllHeaderFeatures: Story = {
   ...Default,
   args: {
+    ...Default.args,
     showSearchBox: true,
     showSelectedCount: true,
     showClearButton: true
@@ -205,6 +255,7 @@ export const AllHeaderFeatures: Story = {
 export const CustomSearchPlaceholder: Story = {
   ...Default,
   args: {
+    ...Default.args,
     showSearchBox: true,
     searchPlaceholder: 'Filter packages...'
   }
diff --git a/src/components/input/SearchBox.stories.ts b/src/components/input/SearchBox.stories.ts
index c67776597..769e3fbad 100644
--- a/src/components/input/SearchBox.stories.ts
+++ b/src/components/input/SearchBox.stories.ts
@@ -11,14 +11,14 @@ const meta: Meta<typeof SearchBox> = {
     placeHolder: {
       control: 'text'
     },
-    hasBorder: {
+    showBorder: {
       control: 'boolean',
       description: 'Toggle border prop'
     }
   },
   args: {
     placeHolder: 'Search...',
-    hasBorder: false
+    showBorder: false
   }
 }
 
@@ -43,13 +43,13 @@ export const Default: Story = {
 export const WithBorder: Story = {
   ...Default,
   args: {
-    hasBorder: true
+    showBorder: true
   }
 }
 
 export const NoBorder: Story = {
   ...Default,
   args: {
-    hasBorder: false
+    showBorder: false
   }
 }
diff --git a/src/components/input/SearchBox.vue b/src/components/input/SearchBox.vue
index 0e60be550..a28db6a60 100644
--- a/src/components/input/SearchBox.vue
+++ b/src/components/input/SearchBox.vue
@@ -15,19 +15,19 @@
 import InputText from 'primevue/inputtext'
 import { computed } from 'vue'
 
-const { placeHolder, hasBorder = false } = defineProps<{
+const { placeHolder, showBorder = false } = defineProps<{
   placeHolder?: string
-  hasBorder?: boolean
+  showBorder?: boolean
 }>()
 const searchQuery = defineModel<string>('')
 
 const wrapperStyle = computed(() => {
-  return hasBorder
+  return showBorder
     ? 'flex w-full items-center rounded gap-2 bg-white dark-theme:bg-zinc-800 p-1 border border-solid border-zinc-200 dark-theme:border-zinc-700'
     : 'flex w-full items-center rounded px-2 py-1.5 gap-2 bg-white dark-theme:bg-zinc-800'
 })
 
 const iconColorStyle = computed(() => {
-  return !hasBorder ? 'text-neutral' : 'text-zinc-300 dark-theme:text-zinc-700'
+  return !showBorder ? 'text-neutral' : 'text-zinc-300 dark-theme:text-zinc-700'
 })
 </script>
diff --git a/src/components/input/SingleSelect.stories.ts b/src/components/input/SingleSelect.stories.ts
index ba802197c..2ce818553 100644
--- a/src/components/input/SingleSelect.stories.ts
+++ b/src/components/input/SingleSelect.stories.ts
@@ -9,7 +9,18 @@ const meta: Meta<typeof SingleSelect> = {
   component: SingleSelect,
   tags: ['autodocs'],
   argTypes: {
-    label: { control: 'text' }
+    label: { control: 'text' },
+    options: { control: 'object' }
+  },
+  args: {
+    label: 'Sorting Type',
+    options: [
+      { name: 'Popular', value: 'popular' },
+      { name: 'Newest', value: 'newest' },
+      { name: 'Oldest', value: 'oldest' },
+      { name: 'A → Z', value: 'az' },
+      { name: 'Z → A', value: 'za' }
+    ]
   }
 }
 
@@ -29,19 +40,18 @@ export const Default: Story = {
     components: { SingleSelect },
     setup() {
       const selected = ref<string | null>(null)
-      const options = sampleOptions
+      const options = args.options || sampleOptions
       return { selected, options, args }
     },
     template: `
       <div>
-        <SingleSelect v-model="selected" :options="options" :label="args.label || 'Sorting Type'" />
+        <SingleSelect v-model="selected" :options="options" :label="args.label" />
         <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
           <p class="text-sm">Selected: {{ selected ?? 'None' }}</p>
         </div>
       </div>
     `
-  }),
-  args: { label: 'Sorting Type' }
+  })
 }
 
 export const WithIcon: Story = {