Merge pull request #56 from significa/SIGN-621

Feat: MultiSelect

.vscode/settings.json

@@ -4,7 +4,7 @@
   },
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   "eslint.validate": ["svelte"],
   "tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]]

package.json

@@ -70,6 +70,8 @@
     "tailwindcss": "^3.3.3"
   },
   "devDependencies": {
+    "@melt-ui/pp": "^0.3.0",
+    "@melt-ui/svelte": "^0.70.0",
     "@storybook/addon-a11y": "^7.4.2",
     "@storybook/addon-essentials": "^7.4.2",
     "@storybook/addon-interactions": "^7.4.2",

src/lib/components/forms/multi-select.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { createSelect } from '@melt-ui/svelte';
+  import Checkbox from './checkbox.svelte';
+  import Icon, { type IconOptions } from '../icon.svelte';
+  import type { ListboxOption } from '@melt-ui/svelte/dist/builders/listbox/types';
+  import { fly } from 'svelte/transition';
+
+  const {
+    elements: { trigger, menu, option },
+    states: { open, selected: meltSelected },
+    helpers: { isSelected }
+  } = createSelect<string, true>({
+    forceVisible: true,
+    positioning: {
+      placement: 'bottom',
+      fitViewport: true,
+      sameWidth: true
+    },
+    multiple: true
+  });
+
+  export let icon: undefined | IconOptions = undefined;
+  export let options: string[] = [];
+  export let selected: ListboxOption<string>[] | undefined = [];
+  export let selectedLabel: undefined | string = '';
+  $: selected = $meltSelected;
+</script>
+
+<div class="flex flex-col gap-1">
+  <button
+    class="flex h-12 min-w-[220px] items-center justify-between rounded-sm border border-background-offset bg-background-panel px-5 py-2 text-sm font-semibold hover:opacity-90 hover:transition-all focus:border-border-active focus:outline-none focus:ring-4 focus:ring-outline focus:transition-all"
+    {...$trigger}
+    use:trigger
+  >
+    {selectedLabel || 'Select'}
+    <Icon icon={icon || 'chevron-down'} />
+  </button>
+  {#if $open}
+    <div
+      class="z-10 mt-1 flex max-h-[300px] flex-col overflow-y-auto rounded-sm border border-background-offset bg-background-panel p-2"
+      {...$menu}
+      use:menu
+      transition:fly={{ y: -12, duration: 150 }}
+    >
+      {#each options as value}
+        <div
+          class="relative flex cursor-pointer items-center justify-between rounded-xs px-3 py-2.5 text-sm font-semibold hover:cursor-pointer hover:bg-background-offset hover:ring-1 hover:ring-border hover:transition-all focus:z-10 data-[highlighted]:bg-background-offset data-[highlighted]:ring-1 data-[highlighted]:ring-border data-[highlighted]:transition-all"
+          {...$option({ value, label: value })}
+          use:option
+        >
+          {value}
+          <Checkbox class="cursor-pointer" checked={$isSelected(value)} />
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

src/lib/components/icon.svelte

@@ -40,6 +40,7 @@
     | 'pause'
     | 'pdf'
     | 'play'
+    | 'plus'
     | 'sun'
     | 'theme'
     | 'trash';

src/stories/multi-select-story.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import MultiSelect from '$lib/components/forms/multi-select.svelte';
+  import type { ListboxOption } from '@melt-ui/svelte/dist/builders/listbox/types';
+  const options = ['Caramel', 'Chocolate', 'Strawberry', 'Cookies & Cream'];
+
+  let selected: ListboxOption<string>[] | undefined;
+</script>
+
+<MultiSelect {options} bind:selected selectedLabel="Select a label" />

src/stories/multi-select.stories.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MultiSelect from './multi-select-story.svelte';
+
+const meta = {
+  title: 'Forms/MultiSelect',
+  component: MultiSelect,
+  argTypes: {}
+} satisfies Meta<MultiSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};