@zap-wunschlachen/wl-shared-components 1.0.15 → 1.0.17

package/src/stories/Select.stories.ts

@@ -1,419 +1,419 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import Select from '../components/Select/Select.vue';
-import { action } from '@storybook/addon-actions';
-import { ref } from 'vue';
-
-const meta: Meta<typeof Select> = {
-  title: 'WL/Select',
-  component: Select,
-  tags: ['autodocs'],
-  argTypes: {
-    clearable: { control: 'boolean' },
-    label: { control: 'text' },
-    chips: { control: 'boolean' },
-    multiple: { control: 'boolean' },
-    closableChips: { control: 'boolean' },
-    items: { control: 'object' },
-    returnObject: { control: 'boolean' },
-    'click:append': { action: 'click:append' },
-    'click:prepend': { action: 'click:prepend' },
-    'click:append-inner': { action: 'click:append-inner' },
-    'click:prepend-inner': { action: 'click:prepend-inner' },
-    'click:clear': { action: 'click:clear' },
-    'update:modelValue': { action: 'update:modelValue' },
-    'update:search': { action: 'update:search' },
-  },
-  args: {
-    items: ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming'],
-    label: 'Select a state',
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`Select\` component allows for a customizable dropdown menu with options for multiple selections, chips, clearable selections, and icons.
-
-### Props
-- **\`clearable\`**: Allows the selection to be cleared.
-- **\`label\`**: Specifies the label for the select input.
-- **\`chips\`**: Displays selected items as chips within the input.
-- **\`multiple\`**: Enables selection of multiple items.
-- **\`closableChips\`**: Allows chips to be individually closed.
-- **\`items\`**: An array of items to display in the dropdown.
-- **\`returnObject\`**: Returns the entire item object instead of just the value.
-
-### Slots
-- **\`prependIcon\`**: Adds an icon before the input.
-- **\`appendIcon\`**: Adds an icon after the input.
-
-### Example Usage
-The following examples demonstrate various configurations, including single and multiple selections, clearable, and chips.
-`,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: Story = {
-  render: (args) => ({
-    components: { Select },
-    setup() {
-      const prependClick = action('click:prepend');
-      const appendClick = action('click:append');
-      const prependInnerClick = action('click:prepend-inner');
-      const appendInnerClick = action('click:append-inner');
-      const clearClick = action('click:clear');
-      const updateModelValue = action('update:modelValue');
-      const updateSearch = action('update:search');
-
-      return {
-        args,
-        prependClick,
-        appendClick,
-        prependInnerClick,
-        appendInnerClick,
-        clearClick,
-        updateModelValue,
-        updateSearch,
-      };
-    },
-    template: `
-      <div style="padding: 16px;">
-        <Select
-          v-bind="args"
-          @click:prepend="prependClick"
-          @click:append="appendClick"
-          @click:prepend-inner="prependInnerClick"
-          @click:append-inner="appendInnerClick"
-          @click:clear="clearClick"
-          @update:modelValue="updateModelValue"
-          @update:search="updateSearch"
-        />
-      </div>
-    `,
-  }),
-};
-
-// Default story without any additional props like chips or clearable
-export const Default: Story = {
-  ...Template,
-  args: {},
-  parameters: {
-    docs: {
-      source: {
-        code: `<Select :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']" label="Select a state" />`,
-      },
-    },
-  },
-};
-
-// Story with chips enabled and clearable set to true
-export const WithChips: Story = {
-  ...Template,
-  args: {
-    chips: true,
-    closableChips: true,
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Select chips closableChips />`,
-      },
-    },
-  },
-};
-
-// Story with prepend and append icons
-export const WithPrependAppendIcons: Story = {
-  ...Template,
-  args: {
-    prependIcon: 'heroicons:calendar',
-    appendIcon: 'heroicons:calendar',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Select prependIcon="heroicons:calendar" appendIcon="heroicons:calendar" />`,
-      },
-    },
-  },
-};
-
-// Disabled state story
-export const Disabled: Story = {
-  ...Template,
-  args: { disabled: true },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Select disabled />`,
-      },
-    },
-  },
-};
-
-// Story with compact density
-export const CompactSelect: Story = {
-  ...Template,
-  args: { density: 'compact' },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Select density="compact" />`,
-      },
-    },
-  },
-};
-
-// Disabled state with icons
-export const DisabledWithIcons: Story = {
-  ...Template,
-  args: {
-    disabled: true,
-    prependIcon: 'heroicons:calendar',
-    appendIcon: 'heroicons:calendar',
-    appendInnerIcon: 'heroicons:calendar',
-    prependInnerIcon: 'heroicons:calendar',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Select disabled prependIcon="heroicons:calendar" appendIcon="heroicons:calendar" />`,
-      },
-    },
-  },
-};
-
-// Story with custom icons
-export const CustomIcons: Story = {
-  ...Template,
-  args: {
-    prependIcon: 'heroicons:sparkles',
-    appendIcon: 'heroicons:paper-airplane',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Select prependIcon="heroicons:sparkles" appendIcon="heroicons:paper-airplane" />`,
-      },
-    },
-  },
-};
-
-// Without chips
-export const WithoutChips: Story = {
-  ...Template,
-  args: { chips: false },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Select chips="false" />`,
-      },
-    },
-  },
-};
-
-// Multiple selection with chips enabled
-export const MultipleWithChips: Story = {
-  ...Template,
-  args: {
-    multiple: true,
-    chips: true,
-    closableChips: true,
-    items: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'],
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Select multiple chips closableChips :items="['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']" />`,
-      },
-    },
-  },
-};
-
-// Closable chips story
-export const ClosableChips: Story = {
-  ...Template,
-  args: {
-    chips: true,
-    closableChips: true,
-    items: ['Red', 'Blue', 'Green', 'Yellow', 'Purple'],
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Select chips closableChips :items="['Red', 'Blue', 'Green', 'Yellow', 'Purple']" />`,
-      },
-    },
-  },
-};
-
-// Menu and clear icons
-export const WithMenuAndClearIcons: Story = {
-  ...Template,
-  args: {
-    menuIcon: 'heroicons:menu',
-    clearIcon: 'heroicons:x-circle',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Select menuIcon="heroicons:menu" clearIcon="heroicons:x-circle" />`,
-      },
-    },
-  },
-};
-
-// Clearable and multiple disabled
-export const ClearableAndMultiple: Story = {
-  ...Template,
-  args: {
-    clearable: false,
-    multiple: false,
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Select clearable="false" multiple="false" />`,
-      },
-    },
-  },
-};
-
-// Preselected values with returnObject variations
-export const PreselectedValues: Story = {
-  render: (args) => ({
-    components: { Select },
-    setup() {
-      const items = [
-        { title: 'California', value: 'CA' },
-        { title: 'Colorado', value: 'CO' },
-        { title: 'Florida', value: 'FL' },
-        { title: 'Georgia', value: 'GA' },
-        { title: 'Texas', value: 'TX' },
-        { title: 'Wyoming', value: 'WY' },
-      ];
-
-      const selectedValueFalse = ref('CA'); // Single selection, returnObject: false
-      const selectedObjectTrue = ref(items.find((item) => item.value === 'FL')); // Single selection, returnObject: true
-      const selectedValuesFalse = ref(['CA', 'GA']); // Multiple selection, returnObject: false
-      const selectedObjectsTrue = ref(
-        items.filter((item) => ['TX', 'WY'].includes(item.value)),
-      ); // Multiple selection, returnObject: true
-
-      const updateModelValue = action('update:modelValue');
-
-      return {
-        args: { ...args, items, itemTitle: 'title', itemValue: 'value' },
-        selectedValueFalse,
-        selectedObjectTrue,
-        selectedValuesFalse,
-        selectedObjectsTrue,
-        updateModelValue,
-      };
-    },
-    template: `
-      <div style="padding: 16px; display: flex; flex-direction: column; gap: 24px;">
-        <!-- Single selection with returnObject: false -->
-        <Select v-bind="args" :returnObject="false" :multiple="false" v-model="selectedValueFalse" @update:modelValue="updateModelValue" />
-        <p>Selected Value (returnObject: false): {{ selectedValueFalse }}</p>
-
-        <!-- Single selection with returnObject: true -->
-        <Select v-bind="args" :returnObject="true" :multiple="false" v-model="selectedObjectTrue" @update:modelValue="updateModelValue" />
-        <p>Selected Object (returnObject: true): {{ selectedObjectTrue }}</p>
-
-        <!-- Multiple selection with returnObject: false -->
-        <Select v-bind="args" :returnObject="false" :multiple="true" v-model="selectedValuesFalse" @update:modelValue="updateModelValue" />
-        <p>Selected Values (multiple, returnObject: false): {{ selectedValuesFalse }}</p>
-
-        <!-- Multiple selection with returnObject: true -->
-        <Select v-bind="args" :returnObject="true" :multiple="true" v-model="selectedObjectsTrue" @update:modelValue="updateModelValue" />
-        <p>Selected Objects (multiple, returnObject: true): {{ selectedObjectsTrue }}</p>
-      </div>
-    `,
-  }),
-  args: {},
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <Select
-    :items="[
-      { title: 'California', value: 'CA' },
-      { title: 'Colorado', value: 'CO' },
-      { title: 'Florida', value: 'FL' },
-      { title: 'Georgia', value: 'GA' },
-      { title: 'Texas', value: 'TX' },
-      { title: 'Wyoming', value: 'WY' }
-    ]"
-    :returnObject="false"
-    :multiple="false"
-    v-model="selectedValueFalse"
-  />
-  <Select
-    :items="[
-      { title: 'California', value: 'CA' },
-      { title: 'Colorado', value: 'CO' },
-      { title: 'Florida', value: 'FL' },
-      { title: 'Georgia', value: 'GA' },
-      { title: 'Texas', value: 'TX' },
-      { title: 'Wyoming', value: 'WY' }
-    ]"
-    :returnObject="true"
-    :multiple="false"
-    v-model="selectedObjectTrue"
-  />
-  <Select
-    :items="[
-      { title: 'California', value: 'CA' },
-      { title: 'Colorado', value: 'CO' },
-      { title: 'Florida', value: 'FL' },
-      { title: 'Georgia', value: 'GA' },
-      { title: 'Texas', value: 'TX' },
-      { title: 'Wyoming', value: 'WY' }
-    ]"
-    :returnObject="false"
-    :multiple="true"
-    v-model="selectedValuesFalse"
-  />
-  <Select
-    :items="[
-      { title: 'California', value: 'CA' },
-      { title: 'Colorado', value: 'CO' },
-      { title: 'Florida', value: 'FL' },
-      { title: 'Georgia', value: 'GA' },
-      { title: 'Texas', value: 'TX' },
-      { title: 'Wyoming', value: 'WY' }
-    ]"
-    :returnObject="true"
-    :multiple="true"
-    v-model="selectedObjectsTrue"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const items = [
-  { title: 'California', value: 'CA' },
-  { title: 'Colorado', value: 'CO' },
-  { title: 'Florida', value: 'FL' },
-  { title: 'Georgia', value: 'GA' },
-  { title: 'Texas', value: 'TX' },
-  { title: 'Wyoming', value: 'WY' },
-];
-
-const selectedValueFalse = ref('CA');
-const selectedObjectTrue = ref(items.find((item) => item.value === 'FL'));
-const selectedValuesFalse = ref(['CA', 'GA']);
-const selectedObjectsTrue = ref(items.filter((item) => ['TX', 'WY'].includes(item.value)));
-</script>
-        `,
-      },
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import Select from '../components/Select/Select.vue';
+import { action } from '@storybook/addon-actions';
+import { ref } from 'vue';
+
+const meta: Meta<typeof Select> = {
+  title: 'WL/Select',
+  component: Select,
+  tags: ['autodocs'],
+  argTypes: {
+    clearable: { control: 'boolean' },
+    label: { control: 'text' },
+    chips: { control: 'boolean' },
+    multiple: { control: 'boolean' },
+    closableChips: { control: 'boolean' },
+    items: { control: 'object' },
+    returnObject: { control: 'boolean' },
+    'click:append': { action: 'click:append' },
+    'click:prepend': { action: 'click:prepend' },
+    'click:append-inner': { action: 'click:append-inner' },
+    'click:prepend-inner': { action: 'click:prepend-inner' },
+    'click:clear': { action: 'click:clear' },
+    'update:modelValue': { action: 'update:modelValue' },
+    'update:search': { action: 'update:search' },
+  },
+  args: {
+    items: ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming'],
+    label: 'Select a state',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`Select\` component allows for a customizable dropdown menu with options for multiple selections, chips, clearable selections, and icons.
+
+### Props
+- **\`clearable\`**: Allows the selection to be cleared.
+- **\`label\`**: Specifies the label for the select input.
+- **\`chips\`**: Displays selected items as chips within the input.
+- **\`multiple\`**: Enables selection of multiple items.
+- **\`closableChips\`**: Allows chips to be individually closed.
+- **\`items\`**: An array of items to display in the dropdown.
+- **\`returnObject\`**: Returns the entire item object instead of just the value.
+
+### Slots
+- **\`prependIcon\`**: Adds an icon before the input.
+- **\`appendIcon\`**: Adds an icon after the input.
+
+### Example Usage
+The following examples demonstrate various configurations, including single and multiple selections, clearable, and chips.
+`,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: Story = {
+  render: (args) => ({
+    components: { Select },
+    setup() {
+      const prependClick = action('click:prepend');
+      const appendClick = action('click:append');
+      const prependInnerClick = action('click:prepend-inner');
+      const appendInnerClick = action('click:append-inner');
+      const clearClick = action('click:clear');
+      const updateModelValue = action('update:modelValue');
+      const updateSearch = action('update:search');
+
+      return {
+        args,
+        prependClick,
+        appendClick,
+        prependInnerClick,
+        appendInnerClick,
+        clearClick,
+        updateModelValue,
+        updateSearch,
+      };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <Select
+          v-bind="args"
+          @click:prepend="prependClick"
+          @click:append="appendClick"
+          @click:prepend-inner="prependInnerClick"
+          @click:append-inner="appendInnerClick"
+          @click:clear="clearClick"
+          @update:modelValue="updateModelValue"
+          @update:search="updateSearch"
+        />
+      </div>
+    `,
+  }),
+};
+
+// Default story without any additional props like chips or clearable
+export const Default: Story = {
+  ...Template,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']" label="Select a state" />`,
+      },
+    },
+  },
+};
+
+// Story with chips enabled and clearable set to true
+export const WithChips: Story = {
+  ...Template,
+  args: {
+    chips: true,
+    closableChips: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select chips closableChips />`,
+      },
+    },
+  },
+};
+
+// Story with prepend and append icons
+export const WithPrependAppendIcons: Story = {
+  ...Template,
+  args: {
+    prependIcon: 'heroicons:calendar',
+    appendIcon: 'heroicons:calendar',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select prependIcon="heroicons:calendar" appendIcon="heroicons:calendar" />`,
+      },
+    },
+  },
+};
+
+// Disabled state story
+export const Disabled: Story = {
+  ...Template,
+  args: { disabled: true },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select disabled />`,
+      },
+    },
+  },
+};
+
+// Story with compact density
+export const CompactSelect: Story = {
+  ...Template,
+  args: { density: 'compact' },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select density="compact" />`,
+      },
+    },
+  },
+};
+
+// Disabled state with icons
+export const DisabledWithIcons: Story = {
+  ...Template,
+  args: {
+    disabled: true,
+    prependIcon: 'heroicons:calendar',
+    appendIcon: 'heroicons:calendar',
+    appendInnerIcon: 'heroicons:calendar',
+    prependInnerIcon: 'heroicons:calendar',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select disabled prependIcon="heroicons:calendar" appendIcon="heroicons:calendar" />`,
+      },
+    },
+  },
+};
+
+// Story with custom icons
+export const CustomIcons: Story = {
+  ...Template,
+  args: {
+    prependIcon: 'heroicons:sparkles',
+    appendIcon: 'heroicons:paper-airplane',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select prependIcon="heroicons:sparkles" appendIcon="heroicons:paper-airplane" />`,
+      },
+    },
+  },
+};
+
+// Without chips
+export const WithoutChips: Story = {
+  ...Template,
+  args: { chips: false },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select chips="false" />`,
+      },
+    },
+  },
+};
+
+// Multiple selection with chips enabled
+export const MultipleWithChips: Story = {
+  ...Template,
+  args: {
+    multiple: true,
+    chips: true,
+    closableChips: true,
+    items: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'],
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select multiple chips closableChips :items="['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']" />`,
+      },
+    },
+  },
+};
+
+// Closable chips story
+export const ClosableChips: Story = {
+  ...Template,
+  args: {
+    chips: true,
+    closableChips: true,
+    items: ['Red', 'Blue', 'Green', 'Yellow', 'Purple'],
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select chips closableChips :items="['Red', 'Blue', 'Green', 'Yellow', 'Purple']" />`,
+      },
+    },
+  },
+};
+
+// Menu and clear icons
+export const WithMenuAndClearIcons: Story = {
+  ...Template,
+  args: {
+    menuIcon: 'heroicons:menu',
+    clearIcon: 'heroicons:x-circle',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select menuIcon="heroicons:menu" clearIcon="heroicons:x-circle" />`,
+      },
+    },
+  },
+};
+
+// Clearable and multiple disabled
+export const ClearableAndMultiple: Story = {
+  ...Template,
+  args: {
+    clearable: false,
+    multiple: false,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select clearable="false" multiple="false" />`,
+      },
+    },
+  },
+};
+
+// Preselected values with returnObject variations
+export const PreselectedValues: Story = {
+  render: (args) => ({
+    components: { Select },
+    setup() {
+      const items = [
+        { title: 'California', value: 'CA' },
+        { title: 'Colorado', value: 'CO' },
+        { title: 'Florida', value: 'FL' },
+        { title: 'Georgia', value: 'GA' },
+        { title: 'Texas', value: 'TX' },
+        { title: 'Wyoming', value: 'WY' },
+      ];
+
+      const selectedValueFalse = ref('CA'); // Single selection, returnObject: false
+      const selectedObjectTrue = ref(items.find((item) => item.value === 'FL')); // Single selection, returnObject: true
+      const selectedValuesFalse = ref(['CA', 'GA']); // Multiple selection, returnObject: false
+      const selectedObjectsTrue = ref(
+        items.filter((item) => ['TX', 'WY'].includes(item.value)),
+      ); // Multiple selection, returnObject: true
+
+      const updateModelValue = action('update:modelValue');
+
+      return {
+        args: { ...args, items, itemTitle: 'title', itemValue: 'value' },
+        selectedValueFalse,
+        selectedObjectTrue,
+        selectedValuesFalse,
+        selectedObjectsTrue,
+        updateModelValue,
+      };
+    },
+    template: `
+      <div style="padding: 16px; display: flex; flex-direction: column; gap: 24px;">
+        <!-- Single selection with returnObject: false -->
+        <Select v-bind="args" :returnObject="false" :multiple="false" v-model="selectedValueFalse" @update:modelValue="updateModelValue" />
+        <p>Selected Value (returnObject: false): {{ selectedValueFalse }}</p>
+
+        <!-- Single selection with returnObject: true -->
+        <Select v-bind="args" :returnObject="true" :multiple="false" v-model="selectedObjectTrue" @update:modelValue="updateModelValue" />
+        <p>Selected Object (returnObject: true): {{ selectedObjectTrue }}</p>
+
+        <!-- Multiple selection with returnObject: false -->
+        <Select v-bind="args" :returnObject="false" :multiple="true" v-model="selectedValuesFalse" @update:modelValue="updateModelValue" />
+        <p>Selected Values (multiple, returnObject: false): {{ selectedValuesFalse }}</p>
+
+        <!-- Multiple selection with returnObject: true -->
+        <Select v-bind="args" :returnObject="true" :multiple="true" v-model="selectedObjectsTrue" @update:modelValue="updateModelValue" />
+        <p>Selected Objects (multiple, returnObject: true): {{ selectedObjectsTrue }}</p>
+      </div>
+    `,
+  }),
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Select
+    :items="[
+      { title: 'California', value: 'CA' },
+      { title: 'Colorado', value: 'CO' },
+      { title: 'Florida', value: 'FL' },
+      { title: 'Georgia', value: 'GA' },
+      { title: 'Texas', value: 'TX' },
+      { title: 'Wyoming', value: 'WY' }
+    ]"
+    :returnObject="false"
+    :multiple="false"
+    v-model="selectedValueFalse"
+  />
+  <Select
+    :items="[
+      { title: 'California', value: 'CA' },
+      { title: 'Colorado', value: 'CO' },
+      { title: 'Florida', value: 'FL' },
+      { title: 'Georgia', value: 'GA' },
+      { title: 'Texas', value: 'TX' },
+      { title: 'Wyoming', value: 'WY' }
+    ]"
+    :returnObject="true"
+    :multiple="false"
+    v-model="selectedObjectTrue"
+  />
+  <Select
+    :items="[
+      { title: 'California', value: 'CA' },
+      { title: 'Colorado', value: 'CO' },
+      { title: 'Florida', value: 'FL' },
+      { title: 'Georgia', value: 'GA' },
+      { title: 'Texas', value: 'TX' },
+      { title: 'Wyoming', value: 'WY' }
+    ]"
+    :returnObject="false"
+    :multiple="true"
+    v-model="selectedValuesFalse"
+  />
+  <Select
+    :items="[
+      { title: 'California', value: 'CA' },
+      { title: 'Colorado', value: 'CO' },
+      { title: 'Florida', value: 'FL' },
+      { title: 'Georgia', value: 'GA' },
+      { title: 'Texas', value: 'TX' },
+      { title: 'Wyoming', value: 'WY' }
+    ]"
+    :returnObject="true"
+    :multiple="true"
+    v-model="selectedObjectsTrue"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const items = [
+  { title: 'California', value: 'CA' },
+  { title: 'Colorado', value: 'CO' },
+  { title: 'Florida', value: 'FL' },
+  { title: 'Georgia', value: 'GA' },
+  { title: 'Texas', value: 'TX' },
+  { title: 'Wyoming', value: 'WY' },
+];
+
+const selectedValueFalse = ref('CA');
+const selectedObjectTrue = ref(items.find((item) => item.value === 'FL'));
+const selectedValuesFalse = ref(['CA', 'GA']);
+const selectedObjectsTrue = ref(items.filter((item) => ['TX', 'WY'].includes(item.value)));
+</script>
+        `,
+      },
+    },
+  },
+};