@getmicdrop/svelte-components 5.5.5 → 5.6.0

package/dist/recipes/inputs/MultiSelect.stories.svelte

@@ -1,133 +1,133 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import MultiSelect from './MultiSelect.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/Input/MultiSelect',
-    component: MultiSelect,
-    tags: ['autodocs'],
-  });
-</script>
-
-<script>
-  const fruits = [
-    { name: 'Apple', value: 'apple' },
-    { name: 'Banana', value: 'banana' },
-    { name: 'Cherry', value: 'cherry' },
-    { name: 'Date', value: 'date' },
-    { name: 'Elderberry', value: 'elderberry' },
-    { name: 'Fig', value: 'fig' },
-    { name: 'Grape', value: 'grape' },
-  ];
-
-  const skills = [
-    { name: 'JavaScript', value: 'js' },
-    { name: 'TypeScript', value: 'ts' },
-    { name: 'Python', value: 'py' },
-    { name: 'Java', value: 'java' },
-    { name: 'C++', value: 'cpp' },
-    { name: 'Rust', value: 'rust' },
-  ];
-
-  let selectedFruits = $state([]);
-  let selectedSkills = $state(['js', 'ts']);
-</script>
-
-
-<Story
-  name="Default"
-  args={{
-    items: fruits,
-    value: [],
-    placeholder: 'Select fruits',
-    label: 'Favorite Fruits',
-  }}
-/>
-
-<Story
-  name="With Initial Selection"
-  args={{
-    items: skills,
-    value: ['js', 'ts'],
-    placeholder: 'Select skills',
-    label: 'Programming Skills',
-  }}
-/>
-
-<Story
-  name="Required"
-  args={{
-    items: fruits,
-    value: [],
-    placeholder: 'Select at least one',
-    label: 'Required Field',
-    required: true,
-  }}
-/>
-
-<Story
-  name="With Error"
-  args={{
-    items: fruits,
-    value: [],
-    placeholder: 'Select fruits',
-    label: 'Favorite Fruits',
-    error: 'Please select at least one fruit',
-  }}
-/>
-
-<Story
-  name="Disabled"
-  args={{
-    items: fruits,
-    value: ['apple', 'banana'],
-    placeholder: 'Select fruits',
-    label: 'Disabled Field',
-    disabled: true,
-  }}
-/>
-
-<Story name="Interactive">
-  <div class="max-w-md space-y-4">
-    <MultiSelect
-      items={fruits}
-      bind:value={selectedFruits}
-      placeholder="Select your favorite fruits"
-      label="Favorite Fruits"
-      onchange={(e) => console.log('Selected:', e.value)}
-    />
-
-    <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded">
-      <p class="text-sm font-medium">Selected: {selectedFruits.join(', ') || 'None'}</p>
-    </div>
-  </div>
-</Story>
-
-<Story name="In Form">
-  <form class="max-w-md space-y-4">
-    <MultiSelect
-      items={skills}
-      bind:value={selectedSkills}
-      placeholder="Select your skills"
-      label="Technical Skills"
-      required={true}
-      name="skills"
-    />
-
-    <MultiSelect
-      items={fruits}
-      bind:value={selectedFruits}
-      placeholder="Select preferences"
-      label="Food Preferences"
-      hideClear={true}
-    />
-
-    <button
-      type="submit"
-      class="w-full px-4 py-2 bg-blue-500 text-white rounded hover:bg-primary"
-    >
-      Submit
-    </button>
-  </form>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import MultiSelect from './MultiSelect.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Input/MultiSelect',
+    component: MultiSelect,
+    tags: ['autodocs'],
+  });
+</script>
+
+<script>
+  const fruits = [
+    { name: 'Apple', value: 'apple' },
+    { name: 'Banana', value: 'banana' },
+    { name: 'Cherry', value: 'cherry' },
+    { name: 'Date', value: 'date' },
+    { name: 'Elderberry', value: 'elderberry' },
+    { name: 'Fig', value: 'fig' },
+    { name: 'Grape', value: 'grape' },
+  ];
+
+  const skills = [
+    { name: 'JavaScript', value: 'js' },
+    { name: 'TypeScript', value: 'ts' },
+    { name: 'Python', value: 'py' },
+    { name: 'Java', value: 'java' },
+    { name: 'C++', value: 'cpp' },
+    { name: 'Rust', value: 'rust' },
+  ];
+
+  let selectedFruits = $state([]);
+  let selectedSkills = $state(['js', 'ts']);
+</script>
+
+
+<Story
+  name="Default"
+  args={{
+    items: fruits,
+    value: [],
+    placeholder: 'Select fruits',
+    label: 'Favorite Fruits',
+  }}
+/>
+
+<Story
+  name="With Initial Selection"
+  args={{
+    items: skills,
+    value: ['js', 'ts'],
+    placeholder: 'Select skills',
+    label: 'Programming Skills',
+  }}
+/>
+
+<Story
+  name="Required"
+  args={{
+    items: fruits,
+    value: [],
+    placeholder: 'Select at least one',
+    label: 'Required Field',
+    required: true,
+  }}
+/>
+
+<Story
+  name="With Error"
+  args={{
+    items: fruits,
+    value: [],
+    placeholder: 'Select fruits',
+    label: 'Favorite Fruits',
+    error: 'Please select at least one fruit',
+  }}
+/>
+
+<Story
+  name="Disabled"
+  args={{
+    items: fruits,
+    value: ['apple', 'banana'],
+    placeholder: 'Select fruits',
+    label: 'Disabled Field',
+    disabled: true,
+  }}
+/>
+
+<Story name="Interactive">
+  <div class="max-w-md space-y-4">
+    <MultiSelect
+      items={fruits}
+      bind:value={selectedFruits}
+      placeholder="Select your favorite fruits"
+      label="Favorite Fruits"
+      onchange={(e) => console.log('Selected:', e.value)}
+    />
+
+    <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded">
+      <p class="text-sm font-medium">Selected: {selectedFruits.join(', ') || 'None'}</p>
+    </div>
+  </div>
+</Story>
+
+<Story name="In Form">
+  <form class="max-w-md space-y-4">
+    <MultiSelect
+      items={skills}
+      bind:value={selectedSkills}
+      placeholder="Select your skills"
+      label="Technical Skills"
+      required={true}
+      name="skills"
+    />
+
+    <MultiSelect
+      items={fruits}
+      bind:value={selectedFruits}
+      placeholder="Select preferences"
+      label="Food Preferences"
+      hideClear={true}
+    />
+
+    <button
+      type="submit"
+      class="w-full px-4 py-2 bg-blue-500 text-white rounded hover:bg-primary"
+    >
+      Submit
+    </button>
+  </form>
+</Story>