@vc-shell/framework 1.1.0-alpha.8 → 1.1.0

package/ui/components/molecules/vc-select/vc-select.stories.ts

@@ -1,685 +1,1582 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcSelect } from "./";
-import { ref } from "vue";
-
-export default {
-  title: "molecules/VcSelect",
-  component: VcSelect as Record<keyof typeof VcSelect, unknown>,
-  args: {
-    label: "Select",
-    placeholder: "Select an option",
-  },
-  argTypes: {
-    options: {
-      description: `Method that is used to get select options.
-      Method should be defined in the blade \`scope\` and could be:
-      \n1) async method with the following arguments: (\`keyword: string\`, \`skip\`, \`ids?: string[]\`).
-      \n2) any array
-      \n3) composable returning array`,
-      table: {
-        type: {
-          summary: "((keyword?: string, skip?: number, ids?: string[]) => Promise<P>) | T[]",
-        },
-      },
-    },
-    optionValue: {
-      description: "Property which holds the `value`",
-      control: "text",
-      table: {
-        type: {
-          summary: "string",
-        },
-        defaultValue: {
-          summary: "id",
-        },
-      },
-    },
-    optionLabel: {
-      description: "Property which holds the `label`",
-      control: "text",
-      table: {
-        type: {
-          summary: "string",
-        },
-        defaultValue: {
-          summary: "title",
-        },
-      },
-    },
-    debounce: {
-      control: "number",
-    },
-    clearable: {
-      description: "Whether the select is clearable or not.",
-      control: "boolean",
-      table: {
-        type: {
-          summary: "boolean",
-        },
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    emitValue: {
-      description: `Update model with the value of the selected option instead of the whole option.
-      \n Example:
-      \nIf emitValue is \`true\` and the selected option is { id: 1, title: "Option 1" }, the model will be updated with 1.
-      \nIf emitValue is \`false\`, the model will be updated with the whole option.`,
-      table: {
-        type: {
-          summary: "boolean",
-        },
-        defaultValue: {
-          summary: "true",
-        },
-      },
-    },
-    searchable: {
-      description: "Whether the select is searchable or not.",
-      table: {
-        type: {
-          summary: "boolean",
-        },
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    multiple: {
-      description: "Select multiple values.",
-      table: {
-        type: {
-          summary: "boolean",
-        },
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-  },
-} satisfies Meta<typeof VcSelect>;
-
-export const ObjectArrayOptions: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref();
-    return { args, val };
-  },
-  template: `<VcSelect
-    v-bind="args"
-      v-model="val"
-      :options="[
-        { title: 'Option 1', label: 'Option 1' },
-        { title: 'Option 2', label: 'Option 2' },
-        { title: 'Option 3', label: 'Option 3' },
-      ]"
-      optionLabel="label"
-      optionValue="title"
-    ></VcSelect>`,
-});
-
-export const StringArrayOptions: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref();
-    return { args, val };
-  },
-  template: `<VcSelect v-bind="args" v-model="val" :options="['Option 1', 'Option 2', 'Option 3']"></VcSelect>`,
-});
-
-export const AsyncOptions: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref();
-    const getItems = async () =>
-      new Promise((resolve) => {
-        setTimeout(() => {
-          resolve({
-            results: [
-              { title: "Option 1", label: "Option 1" },
-              { title: "Option 2", label: "Option 2" },
-              { title: "Option 3", label: "Option 3" },
-            ],
-            totalCount: 3,
-          });
-        }, 1000);
-      });
-    return { args, val, getItems };
-  },
-
-  template: `
-      <VcSelect
-        v-bind="args"
-          v-model="val"
-          :options="getItems"
-          optionLabel="label"
-          optionValue="title"
-      ></VcSelect>`,
-});
-
-export const EmitValueTrueProp: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref("Option 1");
-    return { args, val };
-  },
-
-  template: `
-      <div>
-        <VcSelect
-            v-bind="args"
-            v-model="val"
-            :options="[
-              { title: 'Option 1', label: 'Option 1 label' },
-              { title: 'Option 2', label: 'Option 2 label' },
-              { title: 'Option 3', label: 'Option 3 label' },
-            ]"
-            optionLabel="label"
-            optionValue="title"
-        ></VcSelect>
-
-        <p>Selected value: {{val}}</p>
-      </div>`,
-});
-EmitValueTrueProp.parameters = {
-  docs: {
-    description: {
-      story: "The default emitValue === <b>true</b> returns the value of key defined in optionValue",
-    },
-  },
-};
-
-export const EmitValueFalseProp: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref({ title: "Option 1", label: "Option 1 label" });
-    return { args, val };
-  },
-
-  template: `
-      <div>
-        <VcSelect
-            v-bind="args"
-            v-model="val"
-            :emit-value="false"
-            :options="[
-              { title: 'Option 1', label: 'Option 1 label' },
-              { title: 'Option 2', label: 'Option 2 label' },
-              { title: 'Option 3', label: 'Option 3 label' },
-            ]"
-            optionLabel="label"
-            optionValue="title"
-        ></VcSelect>
-
-        <p>Selected value: {{val}}</p>
-      </div>`,
-});
-EmitValueFalseProp.parameters = {
-  docs: {
-    description: {
-      story: "emitValue === <b>false</b> returns the complete object as the result",
-    },
-  },
-};
-
-export const MapOptionsTrueProp: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref("Option 1 title");
-    return { args, val };
-  },
-
-  template: `
-      <div>
-        <VcSelect
-            v-bind="args"
-            v-model="val"
-            :options="[
-              { title: 'Option 1 title', label: 'Option 1 label' },
-              { title: 'Option 2 title', label: 'Option 2 label' },
-              { title: 'Option 3 title', label: 'Option 3 label' },
-            ]"
-            optionLabel="label"
-            optionValue="title"
-        ></VcSelect>
-
-        <p>Selected value: {{val}}</p>
-      </div>`,
-});
-MapOptionsTrueProp.parameters = {
-  docs: {
-    description: {
-      story:
-        "The default mapOptions === <b>true</b> maps map labels of model from 'options' Array. If you are using emit-value you will probably need to use map-options to display the label text in the select field rather than the value.",
-    },
-  },
-};
-
-export const MapOptionsFalseProp: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref("Option 1 title");
-    return { args, val };
-  },
-
-  template: `
-      <div>
-        <VcSelect
-            v-bind="args"
-            v-model="val"
-            :map-options="false"
-            :options="[
-              { title: 'Option 1 title', label: 'Option 1 label' },
-              { title: 'Option 2 title', label: 'Option 2 label' },
-              { title: 'Option 3 title', label: 'Option 3 label' },
-            ]"
-            optionLabel="label"
-            optionValue="title"
-        ></VcSelect>
-
-        <p>Selected value: {{val}}</p>
-      </div>`,
-});
-MapOptionsFalseProp.parameters = {
-  docs: {
-    description: {
-      story: "mapOptions === <b>false</b> will not map labels of model from 'options' Array.",
-    },
-  },
-};
-
-export const Error = ObjectArrayOptions.bind({});
-Error.args = {
-  error: true,
-  errorMessage: "Some error message",
-};
-
-export const Tooltip = ObjectArrayOptions.bind({});
-Tooltip.args = {
-  tooltip: "Some tooltip",
-};
-
-export const Disabled = ObjectArrayOptions.bind({});
-Disabled.args = {
-  disabled: true,
-};
-
-export const SearchableInput = ObjectArrayOptions.bind({});
-SearchableInput.args = {
-  searchable: true,
-};
-
-export const SearchableInputCustomDebounce = SearchableInput.bind({});
-SearchableInputCustomDebounce.args = {
-  searchable: true,
-  debounce: 2000,
-};
-
-export const Required = ObjectArrayOptions.bind({});
-Required.args = {
-  required: true,
-};
-
-export const MultipleSelect: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref([
-      { title: "Option 1", label: "Option 1" },
-      { title: "Option 2", label: "Option 2" },
-    ]);
-    return { args, val };
-  },
-
-  template: `
-        <VcSelect
-            v-bind="args"
-            v-model="val"
-            multiple
-            :options="[
-              { title: 'Option 1', label: 'Option 1' },
-              { title: 'Option 2', label: 'Option 2' },
-              { title: 'Option 3', label: 'Option 3' },
-            ]"
-            optionLabel="label"
-            optionValue="title"
-        ></VcSelect>`,
-});
-
-export const NotClearable: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref("Option 1");
-    return { args, val };
-  },
-  template: `<VcSelect
-    v-bind="args"
-      v-model="val"
-      :clearable="false"
-      :options="[
-        { title: 'Option 1', label: 'Option 1' },
-        { title: 'Option 2', label: 'Option 2' },
-        { title: 'Option 3', label: 'Option 3' },
-      ]"
-      optionLabel="label"
-      optionValue="title"
-    ></VcSelect>`,
-});
-
-export const Loading = ObjectArrayOptions.bind({});
-Loading.args = {
-  loading: true,
-};
-
-export const Prefix = ObjectArrayOptions.bind({});
-Prefix.args = {
-  prefix: "prefix",
-};
-
-export const Suffix = ObjectArrayOptions.bind({});
-Suffix.args = {
-  suffix: "suffix",
-};
-
-export const Hint = ObjectArrayOptions.bind({});
-Hint.args = {
-  hint: "Some hint",
-};
-
-export const CustomSelectControlSlot: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref();
-    return { args, val };
-  },
-  template: `<VcSelect
-    v-bind="args"
-      v-model="val"
-      :options="[
-        { title: 'Option 1', label: 'Option 1' },
-        { title: 'Option 2', label: 'Option 2' },
-        { title: 'Option 3', label: 'Option 3' },
-      ]"
-      optionLabel="label"
-      optionValue="title"
-      customSelectControl
-    >
-      <template #control="scope">
-        <VcButton @click="scope.toggleHandler" class="tw-w-full">Custom control</VcButton>
-      </template>
-    </VcSelect>`,
-});
-CustomSelectControlSlot.parameters = {
-  docs: {
-    description: {
-      story: `
-      "control": (scope: {
-        /**
-         * Toggle dropdown handler
-         */
-        toggleHandler: () => void;
-      }) => any;`,
-    },
-  },
-};
-
-export const CustomPrependInnerSlot: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref();
-    return { args, val };
-  },
-  template: `<VcSelect
-    v-bind="args"
-      v-model="val"
-      :options="[
-        { title: 'Option 1', label: 'Option 1' },
-        { title: 'Option 2', label: 'Option 2' },
-        { title: 'Option 3', label: 'Option 3' },
-      ]"
-      optionLabel="label"
-      optionValue="title"
-      customPrependInner
-    >
-      <template #prepend-inner>
-        <VcButton>Action</VcButton>
-      </template>
-    </VcSelect>`,
-});
-
-export const CustomAppendInnerSlot: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref();
-    return { args, val };
-  },
-  template: `<VcSelect
-    v-bind="args"
-      v-model="val"
-      :options="[
-        { title: 'Option 1', label: 'Option 1' },
-        { title: 'Option 2', label: 'Option 2' },
-        { title: 'Option 3', label: 'Option 3' },
-      ]"
-      optionLabel="label"
-      optionValue="title"
-      customAppendInner
-    >
-      <template #append-inner>
-        <VcButton>Action</VcButton>
-      </template>
-    </VcSelect>`,
-});
-
-export const CustomPrependSlot: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref();
-    return { args, val };
-  },
-  template: `<VcSelect
-    v-bind="args"
-      v-model="val"
-      :options="[
-        { title: 'Option 1', label: 'Option 1' },
-        { title: 'Option 2', label: 'Option 2' },
-        { title: 'Option 3', label: 'Option 3' },
-      ]"
-      optionLabel="label"
-      optionValue="title"
-      customPrepend
-    >
-      <template #prepend>
-        <VcButton>Action</VcButton>
-      </template>
-    </VcSelect>`,
-});
-
-export const CustomAppendSlot: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref();
-    return { args, val };
-  },
-  template: `<VcSelect
-    v-bind="args"
-      v-model="val"
-      :options="[
-        { title: 'Option 1', label: 'Option 1' },
-        { title: 'Option 2', label: 'Option 2' },
-        { title: 'Option 3', label: 'Option 3' },
-      ]"
-      optionLabel="label"
-      optionValue="title"
-      customAppend
-    >
-      <template #append>
-        <VcButton>Action</VcButton>
-      </template>
-    </VcSelect>`,
-});
-
-export const CustomNoOptionsSlot: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref();
-    return { args, val };
-  },
-  template: `<VcSelect
-    v-bind="args"
-      v-model="val"
-      :options="[]"
-      optionLabel="label"
-      optionValue="title"
-      customNoOptions
-    >
-      <template #no-options>
-        <h2 class="tw-font-bold">I'm custom slot!</h2>
-        <p>Please try again later</p>
-      </template>
-    </VcSelect>`,
-});
-
-export const CustomErrorSlot: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref();
-    return { args, val };
-  },
-  template: `<VcSelect
-    v-bind="args"
-      v-model="val"
-      :options="[]"
-      optionLabel="label"
-      optionValue="title"
-      error
-      customError
-    >
-      <template #error>
-        <p class="tw-font-bold">I'm custom error message!</p>
-      </template>
-    </VcSelect>`,
-});
-
-export const CustomHintSlot: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref();
-    return { args, val };
-  },
-  template: `<VcSelect
-    v-bind="args"
-      v-model="val"
-      :options="[]"
-      optionLabel="label"
-      optionValue="title"
-      customHint
-    >
-      <template #hint>
-        <p class="tw-font-bold">I'm custom hint message!</p>
-      </template>
-    </VcSelect>`,
-});
-
-export const CustomSelectedOptionSlot: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref("Option 1");
-    return { args, val };
-  },
-  template: `<VcSelect
-    v-bind="args"
-      v-model="val"
-      :options="[
-        { title: 'Option 1', label: 'Option 1' },
-        { title: 'Option 2', label: 'Option 2' },
-        { title: 'Option 3', label: 'Option 3' },
-      ]"
-      optionLabel="label"
-      optionValue="title"
-    >
-      <template #selected-item="{ opt }">
-
-          <VcIcon class="tw-mr-2 tw-text-green-300" icon="fas fa-check" />
-          <p>{{opt.label}}</p>
-
-      </template>
-    </VcSelect>`,
-});
-CustomSelectedOptionSlot.parameters = {
-  docs: {
-    description: {
-      story: `
-      "selected-item": (scope: {
-        /**
-         * Selection index
-         */
-        index: number;
-        /**
-         * Selected option -- its value is taken from model
-         */
-        opt: Option;
-        /**
-         * Always true -- passed as prop
-         */
-        selected: boolean;
-        /**
-         * Remove selected option located at specific index
-         * @param index Index at which to remove selection
-         */
-        removeAtIndex: (index: number) => void;
-      }) => any;`,
-    },
-  },
-};
-
-export const CustomListOptionSlot: StoryFn<typeof VcSelect> = (args) => ({
-  components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
-  setup() {
-    const val = ref("Option 1");
-    return { args, val };
-  },
-  template: `<VcSelect
-    v-bind="args"
-      v-model="val"
-      :options="[
-        { title: 'Option 1', label: 'Option 1' },
-        { title: 'Option 2', label: 'Option 2' },
-        { title: 'Option 3', label: 'Option 3' },
-      ]"
-      optionLabel="label"
-      optionValue="title"
-    >
-      <template #option="{ opt }">
-        <VcIcon class="tw-mr-2 tw-text-green-300" icon="fas fa-check" />
-        <p>{{opt.label}}</p>
-      </template>
-    </VcSelect>`,
-});
-CustomListOptionSlot.parameters = {
-  docs: {
-    description: {
-      story: `
-      option: (scope: {
-        /**
-         * Option index
-         */
-        index: number;
-        /**
-         * Option -- its value is taken from 'options' prop
-         */
-        opt: Option;
-        /**
-         * Is option selected
-         */
-        selected: boolean;
-        /**
-         * Add/remove option from model
-         * @param opt Option to add to model
-         */
-        toggleOption: (opt: any) => void;
-      }) => any;
-      `,
-    },
-  },
-};
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcSelect } from "./";
+import { ref, h, computed } from "vue";
+import { VcIcon } from "../../atoms/vc-icon";
+import { VcButton } from "../../atoms/vc-button";
+
+/**
+ * `VcSelect` is a versatile dropdown component for selecting single or multiple options.
+ * It supports various data sources, async loading, searching, and extensive customization through slots.
+ */
+const meta = {
+  title: "Molecules/VcSelect",
+  component: VcSelect,
+  tags: ["autodocs"],
+  args: {
+    label: "Select",
+    placeholder: "Select an option",
+    options: [
+      { id: 1, title: "Option 1" },
+      { id: 2, title: "Option 2" },
+      { id: 3, title: "Option 3" },
+      { id: 4, title: "Option 4" },
+      { id: 5, title: "Option 5" },
+    ],
+    optionValue: "id",
+    optionLabel: "title",
+  },
+  argTypes: {
+    modelValue: {
+      description: "Value of the select (v-model)",
+      control: "text",
+      table: {
+        category: "Model",
+        type: { summary: "any" },
+      },
+    },
+    options: {
+      description: `Options for the select dropdown. Can be an array of objects, an array of primitives, or an async function`,
+      control: "object",
+      table: {
+        category: "Data",
+        type: {
+          summary: "Array<any> | Function",
+          detail: `Can be:
+1) Array of objects (with optionValue and optionLabel properties)
+2) Array of primitive values (strings, numbers)
+3) Async function: (keyword?: string, skip?: number, ids?: string[]) => Promise<{ results: any[] }>`,
+        },
+      },
+    },
+    optionValue: {
+      description: "Property name or function to get the value from option objects",
+      control: "text",
+      table: {
+        category: "Data",
+        type: {
+          summary: "string | Function",
+          detail: "Property name to use as value or function that returns value from option object",
+        },
+        defaultValue: { summary: "id" },
+      },
+    },
+    optionLabel: {
+      description: "Property name or function to get the display label from option objects",
+      control: "text",
+      table: {
+        category: "Data",
+        type: {
+          summary: "string | Function",
+          detail: "Property name to use as label or function that returns label from option object",
+        },
+        defaultValue: { summary: "title" },
+      },
+    },
+    label: {
+      description: "Label text displayed above the select",
+      control: "text",
+      table: {
+        category: "Appearance",
+        type: { summary: "string" },
+      },
+    },
+    placeholder: {
+      description: "Placeholder text when no value is selected",
+      control: "text",
+      table: {
+        category: "Appearance",
+        type: { summary: "string" },
+      },
+    },
+    debounce: {
+      description: "Debounce time for search input (in milliseconds)",
+      control: "number",
+      table: {
+        category: "Behavior",
+        type: { summary: "number" },
+        defaultValue: { summary: 300 },
+      },
+    },
+    clearable: {
+      description: "Whether the select allows clearing the selected value",
+      control: "boolean",
+      table: {
+        category: "Behavior",
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+    },
+    emitValue: {
+      description: "Emit only the value instead of the entire option object",
+      control: "boolean",
+      table: {
+        category: "Model",
+        type: { summary: "boolean" },
+        defaultValue: { summary: true },
+      },
+    },
+    searchable: {
+      description: "Enable searching/filtering options",
+      control: "boolean",
+      table: {
+        category: "Behavior",
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+    },
+    multiple: {
+      description: "Allow selecting multiple values",
+      control: "boolean",
+      table: {
+        category: "Behavior",
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      description: "Disable the select component",
+      control: "boolean",
+      table: {
+        category: "State",
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+    },
+    required: {
+      description: "Mark the select as required (shows asterisk)",
+      control: "boolean",
+      table: {
+        category: "Validation",
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+    },
+    error: {
+      description: "Show the select in error state",
+      control: "boolean",
+      table: {
+        category: "Validation",
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+    },
+    errorMessage: {
+      description: "Error message to display below the select",
+      control: "text",
+      table: {
+        category: "Validation",
+        type: { summary: "string" },
+      },
+    },
+    hint: {
+      description: "Hint text to display below the select",
+      control: "text",
+      table: {
+        category: "Appearance",
+        type: { summary: "string" },
+      },
+    },
+    tooltip: {
+      description: "Tooltip text to display next to the label",
+      control: "text",
+      table: {
+        category: "Appearance",
+        type: { summary: "string" },
+      },
+    },
+    prefix: {
+      description: "Prefix text to display inside the select field",
+      control: "text",
+      table: {
+        category: "Appearance",
+        type: { summary: "string" },
+      },
+    },
+    suffix: {
+      description: "Suffix text to display inside the select field",
+      control: "text",
+      table: {
+        category: "Appearance",
+        type: { summary: "string" },
+      },
+    },
+    size: {
+      description: "Size of the select field",
+      control: "select",
+      options: ["default", "small"],
+      table: {
+        category: "Appearance",
+        type: { summary: "'default' | 'small'" },
+        defaultValue: { summary: "default" },
+      },
+    },
+    mapOptions: {
+      description: "Map labels of model from options array",
+      control: "boolean",
+      table: {
+        category: "Behavior",
+        type: { summary: "boolean" },
+        defaultValue: { summary: true },
+      },
+    },
+    loading: {
+      description: "Show loading state",
+      control: "boolean",
+      table: {
+        category: "State",
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+    },
+    outline: {
+      description: "Whether to show an outline around the select",
+      control: "boolean",
+      table: {
+        category: "Appearance",
+        type: { summary: "boolean" },
+        defaultValue: { summary: true },
+      },
+    },
+    control: {
+      description: "Slot for customizing the entire control element",
+      table: {
+        category: "Slots",
+        type: { summary: "{ toggleHandler: () => void }" },
+      },
+    },
+    "prepend-inner": {
+      description: "Slot for content to prepend inside the select field",
+      table: {
+        category: "Slots",
+        type: { summary: "VNode | string" },
+      },
+    },
+    "append-inner": {
+      description: "Slot for content to append inside the select field",
+      table: {
+        category: "Slots",
+        type: { summary: "VNode | string" },
+      },
+    },
+    prepend: {
+      description: "Slot for content to prepend outside the select field",
+      table: {
+        category: "Slots",
+        type: { summary: "VNode | string" },
+      },
+    },
+    append: {
+      description: "Slot for content to append outside the select field",
+      table: {
+        category: "Slots",
+        type: { summary: "VNode | string" },
+      },
+    },
+    "selected-item": {
+      description: "Slot for customizing the selected item display",
+      table: {
+        category: "Slots",
+        type: { summary: "{ index: number, opt: any, selected: boolean, removeAtIndex: Function }" },
+      },
+    },
+    option: {
+      description: "Slot for customizing option display in the dropdown",
+      table: {
+        category: "Slots",
+        type: { summary: "{ index: number, opt: any, selected: boolean, toggleOption: Function, label: string }" },
+      },
+    },
+    // error: {
+    //   description: "Slot for custom error message",
+    //   table: {
+    //     category: "Slots",
+    //     type: { summary: "VNode | string" },
+    //   },
+    // },
+    // hint: {
+    //   description: "Slot for custom hint",
+    //   table: {
+    //     category: "Slots",
+    //     type: { summary: "VNode | string" },
+    //   },
+    // },
+    "no-options": {
+      description: "Slot for customizing the 'no options' state",
+      table: {
+        category: "Slots",
+        type: { summary: "VNode | string" },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+A comprehensive select component for Vue 3 with the following features:
+
+## Key Features
+- Single and multiple selection modes
+- Object and primitive value support
+- Async options loading with pagination
+- Searchable dropdown
+- Rich customization through slots and props
+- Keyboard navigation support
+- Various states (loading, error, disabled)
+- Customizable appearance (prefix, suffix, size)
+
+## Slot System
+The component has an extensive slot system for customization:
+- \`control\`: Customize the entire control element
+- \`prepend\`/\`append\`: Add content before/after the select
+- \`prepend-inner\`/\`append-inner\`: Add content inside the select field
+- \`selected-item\`: Customize how selected items appear
+- \`option\`: Customize how dropdown options appear
+- \`error\`/\`hint\`: Custom error/hint messages
+- \`no-options\`: Custom message when no options are available
+
+## Usage Example
+
+\`\`\`vue
+<template>
+  <VcSelect
+    v-model="selectedValue"
+    :options="options"
+    label="Country"
+    placeholder="Select a country"
+    :searchable="true"
+    :clearable="true"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { VcSelect } from '@vc-shell/framework';
+
+const options = [
+  { id: 'us', title: 'United States' },
+  { id: 'ca', title: 'Canada' },
+  { id: 'mx', title: 'Mexico' }
+];
+
+const selectedValue = ref(null);
+</script>
+\`\`\`
+        `,
+      },
+    },
+  },
+} satisfies Meta<typeof VcSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Basic implementation with an array of objects as options, specifying both label and value properties.
+ */
+export const Basic: Story = {
+  render: (args) => ({
+    components: { VcSelect },
+    setup() {
+      const value = ref(null);
+
+      const handleChange = (newValue: any) => {
+        console.log("Value changed:", newValue);
+      };
+
+      return { args, value, handleChange };
+    },
+    template: `
+      <div class="tw-p-4 tw-max-w-sm">
+        <VcSelect
+    v-bind="args"
+          v-model="value"
+          @update:modelValue="handleChange"
+        />
+        <div class="tw-mt-4 tw-text-sm">
+          <p>Selected value: <code>{{ JSON.stringify(value) }}</code></p>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Use multiple selection to choose several options at once.
+ * The model value will be an array of the selected values.
+ */
+export const MultipleSelection: Story = {
+  args: {
+    multiple: true,
+    placeholder: "Select multiple options",
+    clearable: true,
+  },
+  render: (args) => ({
+    components: { VcSelect },
+    setup() {
+      const value = ref([]);
+
+      const handleChange = (newValue: any) => {
+        console.log("Value changed:", newValue);
+      };
+
+      return { args, value, handleChange };
+    },
+    template: `
+      <div class="tw-p-4 tw-max-w-sm">
+      <VcSelect
+        v-bind="args"
+          v-model="value"
+          @update:modelValue="handleChange"
+        />
+        <div class="tw-mt-4 tw-text-sm">
+          <p>Selected values: <code>{{ JSON.stringify(value) }}</code></p>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Enable searching to filter options as you type. This is particularly
+ * useful for dropdowns with many options.
+ */
+export const Searchable: Story = {
+  args: {
+    searchable: true,
+    placeholder: "Search and select an option",
+    options: [
+      { id: 1, title: "Apple" },
+      { id: 2, title: "Banana" },
+      { id: 3, title: "Cherry" },
+      { id: 4, title: "Date" },
+      { id: 5, title: "Elderberry" },
+      { id: 6, title: "Fig" },
+      { id: 7, title: "Grape" },
+      { id: 8, title: "Honeydew" },
+      { id: 9, title: "Kiwi" },
+      { id: 10, title: "Lemon" },
+    ],
+  },
+  render: (args) => ({
+    components: { VcSelect },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+      <div class="tw-p-4 tw-max-w-sm">
+        <VcSelect
+            v-bind="args"
+          v-model="value"
+        />
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Loading data asynchronously with a function that returns a Promise.
+ * This example simulates fetching data from an API.
+ */
+export const AsyncOptions: Story = {
+  args: {
+    searchable: true,
+    label: "Users",
+    placeholder: "Search for a user",
+  },
+  render: (args) => ({
+    components: { VcSelect },
+    setup() {
+      const value = ref(null);
+
+      // Mock API function that simulates fetching data
+      const fetchUsers = async (keyword = "", skip = 0) => {
+        console.log(`Fetching users with keyword: ${keyword}, skip: ${skip}`);
+
+        // Simulate API delay
+        await new Promise((resolve) => setTimeout(resolve, 500));
+
+        const allUsers = [
+          { id: 1, title: "John Smith" },
+          { id: 2, title: "Jane Doe" },
+          { id: 3, title: "Alice Johnson" },
+          { id: 4, title: "Bob Brown" },
+          { id: 5, title: "Charlie Davis" },
+          { id: 6, title: "Diana Evans" },
+          { id: 7, title: "Edward Frank" },
+          { id: 8, title: "Grace Garcia" },
+          { id: 9, title: "Henry Hill" },
+          { id: 10, title: "Isabel Irwin" },
+        ];
+
+        // Filter users by keyword if provided
+        let filteredUsers = keyword
+          ? allUsers.filter((user) => user.title.toLowerCase().includes(keyword.toLowerCase()))
+          : allUsers;
+
+        // Simulate pagination
+        filteredUsers = filteredUsers.slice(skip, skip + 5);
+
+        return {
+          results: filteredUsers,
+          totalCount: filteredUsers.length,
+        };
+      };
+
+      return { args, value, fetchUsers };
+    },
+    template: `
+      <div class="tw-p-4 tw-max-w-sm">
+        <VcSelect
+          v-bind="args"
+          v-model="value"
+          :options="fetchUsers"
+        />
+        <div class="tw-mt-4 tw-text-sm tw-text-gray-600">
+          Type to search for users. Results are loaded asynchronously.
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * You can make the select display various states like disabled, loading,
+ * error or required.
+ */
+export const States: Story = {
+  render: (args) => ({
+    components: { VcSelect },
+    setup() {
+      const standardValue = ref(null);
+      const disabledValue = ref(2);
+      const loadingValue = ref(null);
+      const errorValue = ref(null);
+      const requiredValue = ref(null);
+
+      return {
+        args,
+        standardValue,
+        disabledValue,
+        loadingValue,
+        errorValue,
+        requiredValue,
+      };
+    },
+    template: `
+      <div class="tw-p-4 tw-space-y-6">
+        <div class="tw-max-w-sm">
+          <h3 class="tw-text-sm tw-font-medium tw-mb-2">Standard</h3>
+        <VcSelect
+            v-bind="args"
+            v-model="standardValue"
+            label="Standard Select"
+          />
+        </div>
+
+        <div class="tw-max-w-sm">
+          <h3 class="tw-text-sm tw-font-medium tw-mb-2">Disabled</h3>
+          <VcSelect
+            v-bind="args"
+            v-model="disabledValue"
+            label="Disabled Select"
+            :disabled="true"
+          />
+        </div>
+
+        <div class="tw-max-w-sm">
+          <h3 class="tw-text-sm tw-font-medium tw-mb-2">Loading</h3>
+          <VcSelect
+            v-bind="args"
+            v-model="loadingValue"
+            label="Loading Select"
+            :loading="true"
+          />
+        </div>
+
+        <div class="tw-max-w-sm">
+          <h3 class="tw-text-sm tw-font-medium tw-mb-2">Error</h3>
+          <VcSelect
+            v-bind="args"
+            v-model="errorValue"
+            label="Error Select"
+            :error="true"
+            errorMessage="This field has an error"
+          />
+        </div>
+
+        <div class="tw-max-w-sm">
+          <h3 class="tw-text-sm tw-font-medium tw-mb-2">Required</h3>
+          <VcSelect
+            v-bind="args"
+            v-model="requiredValue"
+            label="Required Select"
+            :required="true"
+          />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * You can customize the appearance with props like size, hint,
+ * tooltip, prefix, and suffix.
+ */
+export const Appearance: Story = {
+  render: (args) => ({
+    components: { VcSelect },
+    setup() {
+      const standardValue = ref(null);
+      const smallValue = ref(null);
+      const tooltipValue = ref(null);
+      const hintValue = ref(null);
+      const prefixSuffixValue = ref(null);
+
+      return {
+        args,
+        standardValue,
+        smallValue,
+        tooltipValue,
+        hintValue,
+        prefixSuffixValue,
+      };
+    },
+    template: `
+      <div class="tw-p-4 tw-space-y-6">
+        <div class="tw-max-w-sm">
+          <h3 class="tw-text-sm tw-font-medium tw-mb-2">Default Size</h3>
+        <VcSelect
+            v-bind="args"
+            v-model="standardValue"
+            label="Default Size"
+            size="default"
+          />
+        </div>
+
+        <div class="tw-max-w-sm">
+          <h3 class="tw-text-sm tw-font-medium tw-mb-2">Small Size</h3>
+          <VcSelect
+            v-bind="args"
+            v-model="smallValue"
+            label="Small Size"
+            size="small"
+          />
+        </div>
+
+        <div class="tw-max-w-sm">
+          <h3 class="tw-text-sm tw-font-medium tw-mb-2">With Tooltip</h3>
+          <VcSelect
+            v-bind="args"
+            v-model="tooltipValue"
+            label="With Tooltip"
+            tooltip="This is a helpful tooltip"
+          />
+        </div>
+
+        <div class="tw-max-w-sm">
+          <h3 class="tw-text-sm tw-font-medium tw-mb-2">With Hint</h3>
+          <VcSelect
+            v-bind="args"
+            v-model="hintValue"
+            label="With Hint"
+            hint="This is a helpful hint below the select"
+          />
+        </div>
+
+        <div class="tw-max-w-sm">
+          <h3 class="tw-text-sm tw-font-medium tw-mb-2">With Prefix & Suffix</h3>
+          <VcSelect
+            v-bind="args"
+            v-model="prefixSuffixValue"
+            label="With Prefix & Suffix"
+            prefix="$"
+            suffix="USD"
+          />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * The component supports a wide range of slots to customize its appearance.
+ * This example demonstrates various slot customizations.
+ */
+export const CustomizingWithSlots: Story = {
+  args: {
+    searchable: true,
+    multiple: true,
+    clearable: true,
+  },
+  render: (args) => ({
+    components: { VcSelect, VcIcon },
+    setup() {
+      const value = ref([]);
+
+      return { args, value };
+    },
+    template: `
+      <div class="tw-p-4 tw-max-w-sm">
+        <VcSelect
+            v-bind="args"
+          v-model="value"
+          label="Customized Select"
+        >
+          <!-- Customizing the appearance of selected items -->
+          <template #selected-item="{ opt }">
+            <div class="tw-flex tw-items-center">
+              <span class="tw-w-3 tw-h-3 tw-rounded-full tw-bg-blue-500 tw-mr-2"></span>
+              <strong class="tw-text-blue-700">{{ opt.title }}</strong>
+            </div>
+          </template>
+
+          <!-- Customizing option appearance in dropdown -->
+          <template #option="{ opt, selected }">
+            <div class="tw-flex tw-items-center tw-justify-between tw-w-full tw-px-1">
+              <div class="tw-flex tw-items-center">
+                <span class="tw-w-2 tw-h-2 tw-rounded-full tw-bg-gray-400 tw-mr-2"></span>
+                {{ opt.title }}
+              </div>
+              <VcIcon
+                v-if="selected"
+                icon="material-check"
+                class="tw-text-green-600"
+                size="s"
+              />
+            </div>
+          </template>
+
+          <!-- Adding content inside the field -->
+          <template #prepend-inner>
+            <VcIcon icon="material-search" class="tw-mr-2" size="s" />
+          </template>
+
+          <!-- Adding content outside the field -->
+          <template #append>
+            <button
+              class="tw-ml-2 tw-bg-blue-100 tw-text-blue-700 tw-px-2 tw-py-1 tw-rounded hover:tw-bg-blue-200"
+              @click="value = args.options.map(o => o.id)"
+            >
+              Select All
+            </button>
+          </template>
+
+          <!-- Custom "no options" message -->
+          <template #no-options>
+            <div class="tw-text-center tw-py-3 tw-text-gray-500">
+              <VcIcon icon="material-error" class="tw-mb-2" />
+              <p>No matching options found</p>
+            </div>
+          </template>
+
+          <!-- Custom hint -->
+          <template #hint>
+            <div class="tw-flex tw-items-center tw-text-blue-600">
+              <VcIcon icon="material-info" class="tw-mr-1" size="xs" />
+              <span>Select multiple options as needed</span>
+            </div>
+          </template>
+        </VcSelect>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * You can completely override the control element with the control slot.
+ * This allows for creating custom triggers for the dropdown.
+ */
+export const CustomControl: Story = {
+  args: {
+    clearable: true,
+  },
+  render: (args) => ({
+    components: { VcSelect, VcIcon },
+    setup() {
+      const value = ref(null);
+
+      return { args, value };
+    },
+    template: `
+      <div class="tw-p-4 tw-max-w-sm">
+        <VcSelect
+          v-bind="args"
+          v-model="value"
+          label="Custom Control"
+        >
+          <template #control="{ toggleHandler }">
+            <button
+              class="tw-w-full tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg tw-px-4 tw-py-2 tw-flex tw-items-center tw-justify-between hover:tw-bg-blue-100"
+              @click="toggleHandler"
+            >
+              <div class="tw-flex tw-items-center">
+                <VcIcon icon="fas fa-list-ul" class="tw-mr-2" size="s" />
+                <span v-if="value">Option {{ value }} selected</span>
+                <span v-else class="tw-text-gray-500">Click to select an option</span>
+              </div>
+              <VcIcon icon="material-keyboard_arrow_down" size="s" />
+            </button>
+          </template>
+        </VcSelect>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Using primitive values (strings, numbers) as options instead of objects.
+ */
+export const PrimitiveOptions: Story = {
+  args: {
+    options: ["Red", "Green", "Blue", "Yellow", "Purple"],
+    optionValue: undefined,
+    optionLabel: undefined,
+    clearable: true,
+  },
+  render: (args) => ({
+    components: { VcSelect },
+    setup() {
+      const value = ref(null);
+
+      return { args, value };
+    },
+    template: `
+      <div class="tw-p-4 tw-max-w-sm">
+        <VcSelect
+            v-bind="args"
+          v-model="value"
+          label="Colors"
+        />
+        <div class="tw-mt-4 tw-text-sm">
+          <p>Selected color: <code>{{ value }}</code></p>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * The emitValue prop controls whether the v-model contains just the value or the entire option object.
+ */
+export const EmitValueOptions: Story = {
+  render: (args) => ({
+    components: { VcSelect },
+    setup() {
+      const valueOnly = ref(null);
+      const objectValue = ref(null);
+
+      return { args, valueOnly, objectValue };
+    },
+    template: `
+      <div class="tw-p-4 tw-space-y-6">
+        <div class="tw-max-w-sm">
+          <h3 class="tw-text-sm tw-font-medium tw-mb-2">Emit Value Only (emitValue: true)</h3>
+          <VcSelect
+    v-bind="args"
+            v-model="valueOnly"
+            label="Value Only"
+            :emitValue="true"
+          />
+          <div class="tw-mt-1 tw-text-sm">
+            <p>Model: <code>{{ JSON.stringify(valueOnly) }}</code></p>
+          </div>
+        </div>
+
+        <div class="tw-max-w-sm">
+          <h3 class="tw-text-sm tw-font-medium tw-mb-2">Emit Full Object (emitValue: false)</h3>
+          <VcSelect
+            v-bind="args"
+            v-model="objectValue"
+            label="Object Value"
+            :emitValue="false"
+          />
+          <div class="tw-mt-1 tw-text-sm">
+            <p>Model: <code>{{ JSON.stringify(objectValue) }}</code></p>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Use custom functions to extract the value and label from option objects
+ */
+export const CustomGetters: Story = {
+  args: {
+    options: [
+      { code: "US", name: "United States", population: 331000000 },
+      { code: "CA", name: "Canada", population: 38000000 },
+      { code: "MX", name: "Mexico", population: 126000000 },
+      { code: "BR", name: "Brazil", population: 212000000 },
+      { code: "FR", name: "France", population: 67000000 },
+    ],
+    label: "Countries",
+    clearable: true,
+  },
+  render: (args) => ({
+    components: { VcSelect },
+    setup() {
+      const value = ref(null);
+
+      // Custom getter functions instead of string properties
+      const getOptionValue = (option) => option.code;
+      const getOptionLabel = (option) => `${option.name} (${option.code})`;
+
+      return { args, value, getOptionValue, getOptionLabel };
+    },
+    template: `
+      <div class="tw-p-4 tw-max-w-sm">
+        <VcSelect
+          v-bind="args"
+          v-model="value"
+          :optionValue="getOptionValue"
+          :optionLabel="getOptionLabel"
+        />
+        <div class="tw-mt-4 tw-text-sm">
+          <p>Selected country code: <code>{{ value }}</code></p>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Detailed demonstration of the option slot, which allows custom rendering of each option in the dropdown.
+ * This is useful for creating rich dropdown items with icons, badges, or additional information.
+ */
+export const CustomOptionSlot: Story = {
+  args: {
+    searchable: true,
+    clearable: true,
+    options: [
+      { id: 1, title: "Draft", color: "gray", icon: "fas fa-pencil-alt" },
+      { id: 2, title: "Published", color: "green", icon: "material-check_circle" },
+      { id: 3, title: "Archived", color: "amber", icon: "fas fa-archive" },
+      { id: 4, title: "Deleted", color: "red", icon: "material-delete" },
+    ],
+  },
+  render: (args) => ({
+    components: { VcSelect, VcIcon },
+    setup() {
+      const value = ref(null);
+
+      const getStatusColor = (color) => {
+        const colors = {
+          gray: "tw-bg-gray-200 tw-text-gray-800",
+          green: "tw-bg-green-100 tw-text-green-800",
+          amber: "tw-bg-amber-100 tw-text-amber-800",
+          red: "tw-bg-red-100 tw-text-red-800",
+        };
+        return colors[color] || colors.gray;
+      };
+
+      return { args, value, getStatusColor };
+    },
+    template: `
+      <div class="tw-p-4 tw-max-w-lg">
+        <h3 class="tw-text-lg tw-font-medium tw-mb-3">Custom Option Display</h3>
+        <VcSelect
+    v-bind="args"
+          v-model="value"
+          label="Select Status"
+          placeholder="Choose document status"
+        >
+          <template #option="{ opt, selected }">
+            <div class="tw-flex tw-items-center tw-justify-between tw-w-full tw-py-1">
+              <div class="tw-flex tw-items-center">
+                <div :class="['tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-full tw-mr-3', getStatusColor(opt.color)]">
+                  <VcIcon :icon="opt.icon" size="s" />
+                </div>
+                <div>
+                  <div class="tw-font-medium">{{ opt.title }}</div>
+                  <div class="tw-text-xs tw-text-gray-500">Status ID: {{ opt.id }}</div>
+                </div>
+              </div>
+              <VcIcon
+                v-if="selected"
+                icon="material-check"
+                class="tw-text-green-600"
+                size="s"
+              />
+            </div>
+      </template>
+        </VcSelect>
+
+        <div class="tw-mt-4 tw-text-sm tw-bg-gray-50 tw-p-3 tw-rounded">
+          <p class="tw-text-gray-700 tw-mb-2"><strong>Selected value:</strong> {{ value }}</p>
+          <p class="tw-text-gray-500">The option slot above customizes each dropdown item with an icon, label, and description.</p>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Detailed demonstration of the selected-item slot, which allows custom rendering of
+ * the selected values in the input field. This is particularly useful for multiple selection.
+ */
+export const CustomSelectedItemSlot: Story = {
+  args: {
+    multiple: true,
+    clearable: true,
+    options: [
+      { id: "red", title: "Red", hex: "#f87171" },
+      { id: "blue", title: "Blue", hex: "#60a5fa" },
+      { id: "green", title: "Green", hex: "#4ade80" },
+      { id: "purple", title: "Purple", hex: "#c084fc" },
+      { id: "yellow", title: "Yellow", hex: "#fbbf24" },
+      { id: "pink", title: "Pink", hex: "#f472b6" },
+    ],
+  },
+  render: (args) => ({
+    components: { VcSelect, VcIcon },
+    setup() {
+      const value = ref([]);
+
+      return { args, value };
+    },
+    template: `
+      <div class="tw-p-4 tw-max-w-lg">
+        <h3 class="tw-text-lg tw-font-medium tw-mb-3">Custom Selected Item Display</h3>
+        <VcSelect
+    v-bind="args"
+          v-model="value"
+          label="Select Colors"
+          placeholder="Choose your favorite colors"
+        >
+          <!-- Custom rendering of selected items -->
+          <template #selected-item="{ opt, removeAtIndex, index }">
+            <div
+              class="tw-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-mr-1"
+              :style="{ backgroundColor: opt.hex + '33', color: opt.hex }"
+            >
+              <span
+                class="tw-w-3 tw-h-3 tw-rounded-full tw-mr-1"
+                :style="{ backgroundColor: opt.hex }"
+              ></span>
+              {{ opt.title }}
+              <VcIcon
+                icon="material-close"
+                size="xs"
+                class="tw-ml-1 tw-cursor-pointer hover:tw-opacity-80"
+                @click.stop="removeAtIndex(index)"
+              />
+            </div>
+      </template>
+
+          <!-- Custom rendering of dropdown options -->
+          <template #option="{ opt, selected }">
+            <div class="tw-flex tw-items-center tw-justify-between tw-w-full tw-py-1">
+              <div class="tw-flex tw-items-center">
+                <span
+                  class="tw-w-4 tw-h-4 tw-rounded tw-mr-2"
+                  :style="{ backgroundColor: opt.hex }"
+                ></span>
+                {{ opt.title }}
+                <span class="tw-text-xs tw-ml-2 tw-text-gray-500">{{ opt.hex }}</span>
+              </div>
+              <VcIcon
+                v-if="selected"
+                icon="material-check"
+                class="tw-text-green-600"
+                size="s"
+              />
+            </div>
+          </template>
+        </VcSelect>
+
+        <div class="tw-mt-4 tw-text-sm tw-bg-gray-50 tw-p-3 tw-rounded">
+          <p class="tw-text-gray-700 tw-mb-2"><strong>Selected values:</strong> {{ value.join(', ') }}</p>
+          <p class="tw-text-gray-500">The selected-item slot above customizes how each selected color is displayed as a badge.</p>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Demonstration of using the prepend-inner and append-inner slots to add custom elements
+ * inside the select input field. This is useful for adding icons, buttons or other interactive elements.
+ */
+export const InnerSlots: Story = {
+  args: {
+    clearable: true,
+    placeholder: "Search in categories",
+    options: [
+      { id: 1, title: "Electronics" },
+      { id: 2, title: "Clothing" },
+      { id: 3, title: "Home & Kitchen" },
+      { id: 4, title: "Books" },
+      { id: 5, title: "Sports & Outdoors" },
+    ],
+  },
+  render: (args) => ({
+    components: { VcSelect, VcIcon },
+    setup() {
+      const value = ref(null);
+      const resetValue = () => {
+        value.value = null;
+      };
+
+      return { args, value, resetValue };
+    },
+    template: `
+      <div class="tw-p-4 tw-max-w-lg">
+        <h3 class="tw-text-lg tw-font-medium tw-mb-3">Inner Prepend & Append Slots</h3>
+        <VcSelect
+    v-bind="args"
+          v-model="value"
+          label="Category"
+          searchable
+        >
+          <!-- Adding a search icon at the beginning of the field -->
+          <template #prepend-inner>
+            <div class="tw-flex tw-items-center tw-text-gray-500">
+              <VcIcon icon="material-search" size="s" />
+            </div>
+          </template>
+
+          <!-- Adding a clear button at the end of the field -->
+      <template #append-inner>
+            <div
+              v-if="value"
+              class="tw-flex tw-items-center tw-text-gray-400 hover:tw-text-gray-700 tw-cursor-pointer"
+              @click.stop="resetValue"
+            >
+              <VcIcon icon="material-cancel" size="s" />
+            </div>
+      </template>
+        </VcSelect>
+
+        <div class="tw-mt-4 tw-text-sm tw-bg-gray-50 tw-p-3 tw-rounded">
+          <p class="tw-text-gray-700 tw-mb-2"><strong>How it works:</strong></p>
+          <ul class="tw-text-gray-500 tw-list-disc tw-pl-5 tw-space-y-1">
+            <li>The <code>prepend-inner</code> slot adds a search icon inside the field at the beginning</li>
+            <li>The <code>append-inner</code> slot adds a custom clear button that appears when a value is selected</li>
+          </ul>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Demonstration of using the prepend and append slots to add elements outside the select field.
+ * This is useful for creating compound controls or add-ons.
+ */
+export const OuterSlots: Story = {
+  args: {
+    clearable: true,
+    options: [
+      { id: "USD", title: "US Dollar" },
+      { id: "EUR", title: "Euro" },
+      { id: "GBP", title: "British Pound" },
+      { id: "JPY", title: "Japanese Yen" },
+      { id: "CAD", title: "Canadian Dollar" },
+    ],
+  },
+  render: (args) => ({
+    components: { VcSelect, VcIcon },
+    setup() {
+      const value = ref(null);
+      const amount = ref("");
+
+      return { args, value, amount };
+    },
+    template: `
+      <div class="tw-p-4 tw-max-w-lg">
+        <h3 class="tw-text-lg tw-font-medium tw-mb-3">Outer Prepend & Append Slots</h3>
+        <div class="tw-mb-6">
+          <VcSelect
+    v-bind="args"
+            v-model="value"
+            label="Currency Converter"
+            placeholder="Select currency"
+          >
+            <!-- Adding an input field before the select -->
+      <template #prepend>
+              <div class="tw-flex tw-items-center tw-border tw-border-r-0 tw-border-gray-300 tw-rounded-l tw-px-3 tw-h-[36px] tw-bg-white">
+                <span class="tw-text-gray-500">$</span>
+              </div>
+      </template>
+
+            <!-- Adding a button after the select -->
+      <template #append>
+              <button class="tw-flex tw-items-center tw-bg-blue-500 tw-text-white tw-px-4 tw-h-[36px] tw-rounded-r hover:tw-bg-blue-600">
+                <VcIcon icon="fas fa-exchange-alt" size="s" class="tw-mr-1" />
+                Convert
+              </button>
+      </template>
+          </VcSelect>
+
+          <div class="tw-mt-4 tw-text-sm tw-bg-gray-50 tw-p-3 tw-rounded">
+            <p class="tw-text-gray-700 tw-mb-2"><strong>How it works:</strong></p>
+            <ul class="tw-text-gray-500 tw-list-disc tw-pl-5 tw-space-y-1">
+              <li>The <code>prepend</code> slot adds a currency symbol outside the field</li>
+              <li>The <code>append</code> slot adds a conversion button after the field</li>
+              <li>These outer slots help create a compound control with attached elements</li>
+            </ul>
+          </div>
+        </div>
+
+        <h3 class="tw-text-lg tw-font-medium tw-mb-3">Search Input with Button</h3>
+        <VcSelect
+    v-bind="args"
+          v-model="value"
+          placeholder="Search products..."
+          searchable
+        >
+          <!-- Adding a select-category label before the field -->
+          <template #prepend>
+            <div class="tw-px-3 tw-flex tw-items-center tw-bg-gray-100 tw-border tw-border-r-0 tw-border-gray-300 tw-rounded-l tw-h-[36px]">
+              <span class="tw-text-gray-700 tw-text-sm">Category</span>
+            </div>
+      </template>
+
+          <!-- Adding a search button after the field -->
+          <template #append>
+            <button class="tw-px-4 tw-flex tw-items-center tw-bg-primary-500 tw-text-white tw-h-[36px] tw-rounded-r hover:tw-bg-primary-600">
+              <VcIcon icon="material-search" size="s" class="tw-mr-1" />
+              Search
+            </button>
+          </template>
+        </VcSelect>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Demonstration of using the error and hint slots to provide custom feedback messages.
+ */
+export const CustomMessagingSlots: Story = {
+  args: {
+    label: "Product Category",
+    clearable: true,
+    options: [
+      { id: 1, title: "Electronics" },
+      { id: 2, title: "Clothing" },
+      { id: 3, title: "Home & Kitchen" },
+      { id: 4, title: "Books" },
+      { id: 5, title: "Sports & Outdoors" },
+    ],
+  },
+  render: (args) => ({
+    components: { VcSelect, VcIcon },
+    setup() {
+      const value = ref(null);
+      const showError = ref(false);
+
+      const toggleError = () => {
+        showError.value = !showError.value;
+      };
+
+      return { args, value, showError, toggleError };
+    },
+    template: `
+      <div class="tw-p-4 tw-max-w-lg">
+        <h3 class="tw-text-lg tw-font-medium tw-mb-3">Custom Error & Hint Messages</h3>
+
+        <div class="tw-mb-2">
+          <button
+            class="tw-px-3 tw-py-1 tw-text-sm tw-rounded tw-mr-2"
+            :class="showError ? 'tw-bg-red-100 tw-text-red-700' : 'tw-bg-blue-100 tw-text-blue-700'"
+            @click="toggleError"
+          >
+            {{ showError ? 'Show Hint' : 'Show Error' }}
+          </button>
+        </div>
+
+        <VcSelect
+    v-bind="args"
+          v-model="value"
+          :error="showError"
+          errorMessage="This is the standard error message"
+          hint="This is the standard hint message"
+        >
+          <!-- Custom error message with icon and formatting -->
+      <template #error>
+            <div class="tw-flex tw-items-start tw-mt-1 tw-p-2 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded">
+              <VcIcon icon="fas fa-exclamation-triangle" class="tw-text-red-500 tw-mr-2 tw-mt-0.5" size="s" />
+              <div>
+                <p class="tw-text-red-700 tw-font-medium">Category selection required</p>
+                <p class="tw-text-red-600 tw-text-xs">Please select a product category to continue with your submission.</p>
+              </div>
+            </div>
+      </template>
+
+          <!-- Custom hint with additional help information -->
+      <template #hint>
+            <div class="tw-flex tw-items-start tw-mt-1 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded">
+              <VcIcon icon="material-info" class="tw-text-blue-500 tw-mr-2 tw-mt-0.5" size="s" />
+              <div>
+                <p class="tw-text-blue-700 tw-font-medium">Choosing the right category</p>
+                <p class="tw-text-blue-600 tw-text-xs">The category helps determine which department will process your request.</p>
+              </div>
+            </div>
+      </template>
+        </VcSelect>
+
+        <div class="tw-mt-4 tw-text-sm tw-bg-gray-50 tw-p-3 tw-rounded">
+          <p class="tw-text-gray-700 tw-mb-2"><strong>How it works:</strong></p>
+          <ul class="tw-text-gray-500 tw-list-disc tw-pl-5 tw-space-y-1">
+            <li>The <code>error</code> slot replaces the standard error message with a custom component</li>
+            <li>The <code>hint</code> slot replaces the standard hint with a more detailed explanation</li>
+            <li>Use the toggle button to switch between error and hint states</li>
+          </ul>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Demonstration of the no-options slot to customize the display when there are no options
+ * available or when a search returns no results.
+ */
+export const CustomNoOptionsSlot: Story = {
+  args: {
+    searchable: true,
+    label: "Search Products",
+    placeholder: "Type to search...",
+    options: [
+      { id: 1, title: "Laptop" },
+      { id: 2, title: "Smartphone" },
+      { id: 3, title: "Headphones" },
+      { id: 4, title: "Keyboard" },
+      { id: 5, title: "Monitor" },
+    ],
+  },
+  render: (args) => ({
+    components: { VcSelect, VcIcon },
+    setup() {
+      const value = ref(null);
+
+      return { args, value };
+    },
+    template: `
+      <div class="tw-p-4 tw-max-w-lg">
+        <h3 class="tw-text-lg tw-font-medium tw-mb-3">Custom "No Options" Display</h3>
+        <VcSelect
+    v-bind="args"
+          v-model="value"
+        >
+          <template #no-options>
+            <div class="tw-py-4 tw-px-3 tw-text-center">
+              <VcIcon
+                icon="material-search"
+                class="tw-text-gray-400 tw-mb-2 tw-text-2xl"
+              />
+              <p class="tw-text-gray-600 tw-font-medium">No matching products found</p>
+              <p class="tw-text-gray-500 tw-text-sm">Try different search terms or browse all categories</p>
+              <button
+                class="tw-mt-2 tw-px-3 tw-py-1 tw-bg-blue-100 tw-text-blue-700 tw-rounded tw-text-sm hover:tw-bg-blue-200"
+              >
+                Browse All Products
+              </button>
+            </div>
+          </template>
+        </VcSelect>
+
+        <div class="tw-mt-4 tw-text-sm tw-bg-gray-50 tw-p-3 tw-rounded">
+          <p class="tw-text-gray-700 tw-mb-2"><strong>How to test:</strong></p>
+          <p class="tw-text-gray-500">Type a search term that doesn't match any options (like "xyz") to see the custom no-options slot in action.</p>
+          <p class="tw-mt-2 tw-text-gray-500">The custom no-options slot provides:
+            <ul class="tw-list-disc tw-pl-5 tw-mt-1 tw-space-y-1">
+              <li>A more helpful message to guide users</li>
+              <li>Visual indication with an icon</li>
+              <li>A call-to-action button for alternative options</li>
+            </ul>
+          </p>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Comprehensive example showing how to completely customize the VcSelect component
+ * using multiple slots together to create a rich user interface.
+ */
+export const ComprehensiveSlotExample: Story = {
+  args: {
+    searchable: true,
+    multiple: true,
+    clearable: true,
+    options: [
+      { id: 1, title: "Electronics", icon: "fas fa-microchip", level: "Enterprise", color: "#0078d7" },
+      { id: 2, title: "Industrial", icon: "fas fa-industry", level: "Mid-Market", color: "#e07c24" },
+      { id: 3, title: "Office Supplies", icon: "fas fa-paperclip", level: "SMB", color: "#009688" },
+      { id: 4, title: "Medical Equipment", icon: "fas fa-medkit", level: "Enterprise", color: "#e91e63" },
+      { id: 5, title: "Construction", icon: "fas fa-hard-hat", level: "Mid-Market", color: "#ffc107" },
+      { id: 6, title: "Food & Beverage", icon: "fas fa-utensils", level: "SMB", color: "#8bc34a" },
+      { id: 7, title: "Automotive", icon: "fas fa-car", level: "Mid-Market", color: "#3f51b5" },
+    ],
+  },
+  render: (args) => ({
+    components: { VcSelect, VcIcon },
+    setup() {
+      const value = ref([]);
+
+      const getLevelBadge = (level: string) => {
+        const badges = {
+          SMB: "tw-bg-green-100 tw-text-green-800",
+          "Mid-Market": "tw-bg-blue-100 tw-text-blue-800",
+          Enterprise: "tw-bg-purple-100 tw-text-purple-800",
+        };
+        return badges[level];
+      };
+
+      const selectAll = () => {
+        value.value = args.options.map((opt) => opt.id);
+      };
+
+      const clearAll = () => {
+        value.value = [];
+      };
+
+      return { args, value, getLevelBadge, selectAll, clearAll };
+    },
+    template: `
+      <div class="tw-p-4 tw-max-w-lg">
+        <h3 class="tw-text-lg tw-font-medium tw-mb-3">Complete VcSelect Customization</h3>
+
+        <VcSelect
+    v-bind="args"
+          v-model="value"
+          label="Product Categories"
+          placeholder="Select product categories"
+          hint="Choose multiple categories available in your marketplace"
+        >
+          <!-- Custom control wrapper -->
+          <template #control="{ toggleHandler }">
+            <div class="tw-border tw-border-gray-300 tw-rounded-lg tw-overflow-hidden tw-shadow-sm">
+              <!-- Custom header -->
+              <div class="tw-bg-gray-50 tw-px-3 tw-py-2 tw-border-b tw-border-gray-300 tw-flex tw-justify-between tw-items-center">
+                <div class="tw-flex tw-items-center">
+                  <VcIcon icon="fas fa-tags" class="tw-text-gray-600 tw-mr-2" size="s" />
+                  <span class="tw-font-medium tw-text-gray-700">B2B Category Selector</span>
+                </div>
+                <div class="tw-flex tw-space-x-2">
+                  <button
+                    class="tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-50 tw-text-blue-700 tw-rounded hover:tw-bg-blue-100"
+                    @click.stop="selectAll"
+                  >
+                    All
+                  </button>
+                  <button
+                    class="tw-px-2 tw-py-1 tw-text-xs tw-bg-gray-100 tw-text-gray-700 tw-rounded hover:tw-bg-gray-200"
+                    @click.stop="clearAll"
+                  >
+                    Clear
+                  </button>
+                </div>
+              </div>
+
+              <!-- Custom selection area -->
+              <div
+                class="tw-px-3 tw-py-2 tw-bg-white tw-min-h-[40px] tw-flex tw-flex-wrap tw-gap-2 tw-cursor-pointer"
+                @click.stop="toggleHandler"
+              >
+                <template v-if="value.length === 0">
+                  <span class="tw-text-gray-400 tw-text-sm">Click to select categories...</span>
+      </template>
+                <template v-else>
+                  <div
+                    v-for="(id, index) in value"
+                    :key="id"
+                    class="tw-flex tw-items-center tw-px-2 tw-py-1 tw-rounded"
+                    :style="{ backgroundColor: args.options.find(o => o.id === id)?.color + '22' }"
+                  >
+                    <VcIcon
+                      :icon="args.options.find(o => o.id === id)?.icon"
+                      class="tw-mr-1"
+                      size="s"
+                      :style="{ color: args.options.find(o => o.id === id)?.color }"
+                    />
+                    <span class="tw-text-sm">{{ args.options.find(o => o.id === id)?.title }}</span>
+                    <VcIcon
+                      icon="material-close"
+                      size="xs"
+                      class="tw-ml-1 tw-cursor-pointer hover:tw-opacity-80"
+                      @click.stop="value.splice(index, 1)"
+                    />
+                  </div>
+                </template>
+              </div>
+
+              <!-- Custom footer -->
+              <div class="tw-bg-gray-50 tw-px-3 tw-py-2 tw-border-t tw-border-gray-300 tw-flex tw-justify-between tw-items-center">
+                <span class="tw-text-xs tw-text-gray-500">Selected: {{ value.length }} of {{ args.options.length }}</span>
+                <VcIcon
+                  icon="material-keyboard_arrow_down"
+                  class="tw-text-gray-400"
+                  size="s"
+                />
+              </div>
+            </div>
+          </template>
+
+          <!-- Custom option rendering -->
+          <template #option="{ opt, selected, toggleOption }">
+            <div
+              class="tw-flex tw-items-center tw-justify-between tw-w-full tw-p-2 tw-cursor-pointer hover:tw-bg-gray-50"
+              @click.stop="toggleOption(opt)"
+            >
+              <div class="tw-flex tw-items-center">
+                <div
+                  class="tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-mr-3"
+                  :style="{ backgroundColor: opt.color + '22', color: opt.color }"
+                >
+                  <VcIcon :icon="opt.icon" />
+                </div>
+                <div>
+                  <div class="tw-font-medium">{{ opt.title }}</div>
+                  <div class="tw-flex tw-items-center tw-mt-1">
+                    <span
+                      :class="['tw-text-xs tw-px-2 tw-py-0.5 tw-rounded-full', getLevelBadge(opt.level)]"
+                    >
+                      {{ opt.level }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="tw-w-5 tw-h-5 tw-rounded-sm tw-flex tw-items-center tw-justify-center"
+                :class="selected ? 'tw-bg-blue-500' : 'tw-border tw-border-gray-300'"
+              >
+                <VcIcon
+                  v-if="selected"
+                  icon="material-check"
+                  class="tw-text-white"
+                  size="xs"
+                />
+              </div>
+            </div>
+          </template>
+
+          <!-- Custom no-options message -->
+          <template #no-options>
+            <div class="tw-p-4 tw-text-center tw-border-t tw-border-gray-200">
+              <VcIcon icon="material-search" class="tw-text-gray-400 tw-mb-2" />
+              <p class="tw-text-gray-600">No matching categories found</p>
+              <p class="tw-text-xs tw-text-gray-500 tw-mt-1">Try searching for other product types or industries</p>
+            </div>
+          </template>
+
+          <!-- Custom hint -->
+          <template #hint>
+            <div class="tw-flex tw-items-start tw-mt-2">
+              <VcIcon icon="fas fa-lightbulb" class="tw-text-yellow-500 tw-mr-2 tw-mt-0.5" size="s" />
+              <div class="tw-text-sm tw-text-gray-600">
+                Select the product categories available in your marketplace to help buyers find relevant offerings.
+              </div>
+            </div>
+          </template>
+        </VcSelect>
+      </div>
+    `,
+  }),
+};