svelte-multiselect 11.0.0-rc.1 → 11.1.0

package/dist/CircleSpinner.svelte

@@ -1,6 +1,5 @@
-<script>export let color = `cornflowerblue`;
-export let duration = `1.5s`;
-export let size = `1em`;
+<script lang="ts">"use strict";
+let { color = `cornflowerblue`, duration = `1.5s`, size = `1em` } = $props();
 </script>
 
 <div
@@ -9,7 +8,7 @@ export let size = `1em`;
   {color}"
   style:width={size}
   style:height={size}
-/>
+></div>
 
 <style>
   div {

package/dist/CircleSpinner.svelte.d.ts

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        color?: string;
-        duration?: string;
-        size?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type CircleSpinnerProps = typeof __propDef.props;
-export type CircleSpinnerEvents = typeof __propDef.events;
-export type CircleSpinnerSlots = typeof __propDef.slots;
-export default class CircleSpinner extends SvelteComponent<CircleSpinnerProps, CircleSpinnerEvents, CircleSpinnerSlots> {
+interface Props {
+    color?: string;
+    duration?: string;
+    size?: string;
 }
-export {};
+declare const CircleSpinner: import("svelte").Component<Props, {}, "">;
+type CircleSpinner = ReturnType<typeof CircleSpinner>;
+export default CircleSpinner;

package/dist/CmdPalette.svelte

@@ -1,23 +1,13 @@
-<script>import { tick } from 'svelte';
-import { fade } from 'svelte/transition';
+<script lang="ts">import { fade } from 'svelte/transition';
 import Select from './MultiSelect.svelte';
-export let actions;
-export let triggers = [`k`];
-export let close_keys = [`Escape`];
-export let fade_duration = 200; // in ms
-export let style = ``; // for dialog
-// for span in option slot, has no effect when passing a slot
-export let span_style = ``;
-export let open = false;
-export let dialog = null;
-export let input = null;
-export let placeholder = `Filter actions...`;
+let { actions, triggers = [`k`], close_keys = [`Escape`], fade_duration = 200, style = ``, open = $bindable(false), dialog = $bindable(null), input = $bindable(null), placeholder = `Filter actions...`, ...rest } = $props();
+$effect(() => {
+    if (open && input)
+        input?.focus(); // focus input when palette is opened
+});
 async function toggle(event) {
     if (triggers.includes(event.key) && event.metaKey && !open) {
-        // open on cmd+trigger
         open = true;
-        await tick(); // wait for dialog to open and input to be mounted
-        input?.focus();
     }
     else if (close_keys.includes(event.key) && open) {
         open = false;
@@ -28,13 +18,13 @@ function close_if_outside(event) {
         open = false;
     }
 }
-function trigger_action_and_close(event) {
-    event.detail.option.action(event.detail.option.label);
+function trigger_action_and_close({ option }) {
+    option.action(option.label);
     open = false;
 }
 </script>
 
-<svelte:window on:keydown={toggle} on:click={close_if_outside} />
+<svelte:window onkeydown={toggle} onclick={close_if_outside} />
 
 {#if open}
   <dialog open bind:this={dialog} transition:fade={{ duration: fade_duration }} {style}>
@@ -42,16 +32,16 @@ function trigger_action_and_close(event) {
       options={actions}
       bind:input
       {placeholder}
-      on:add={trigger_action_and_close}
-      on:keydown={toggle}
-      {...$$restProps}
-      let:option
-    >
-      <!-- wait for https://github.com/sveltejs/svelte/pull/8304 -->
-      <slot>
-        <span style={span_style}>{option.label}</span>
-      </slot>
-    </Select>
+      onadd={trigger_action_and_close}
+      onkeydown={toggle}
+      {...rest}
+      --sms-bg="var(--sms-options-bg)"
+      --sms-width="min(20em, 90vw)"
+      --sms-max-width="none"
+      --sms-placeholder-color="lightgray"
+      --sms-options-margin="1px 0"
+      --sms-options-border-radius="0 0 1ex 1ex"
+    />
   </dialog>
 {/if}
 
@@ -67,12 +57,4 @@ function trigger_action_and_close(event) {
     z-index: 10;
     font-size: 2.4ex;
   }
-  dialog :global(div.multiselect) {
-    --sms-bg: var(--sms-options-bg);
-    --sms-width: min(20em, 90vw);
-    --sms-max-width: none;
-    --sms-placeholder-color: lightgray;
-    --sms-options-margin: 1px 0;
-    --sms-options-border-radius: 0 0 1ex 1ex;
-  }
 </style>

package/dist/CmdPalette.svelte.d.ts

@@ -1,33 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        actions: {
-            label: string;
-            action: () => void;
-        }[];
-        triggers?: string[] | undefined;
-        close_keys?: string[] | undefined;
-        fade_duration?: number | undefined;
-        style?: string | undefined;
-        span_style?: string | undefined;
-        open?: boolean | undefined;
-        dialog?: (HTMLDialogElement | null) | undefined;
-        input?: (HTMLInputElement | null) | undefined;
-        placeholder?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type CmdPaletteProps = typeof __propDef.props;
-export type CmdPaletteEvents = typeof __propDef.events;
-export type CmdPaletteSlots = typeof __propDef.slots;
-export default class CmdPalette extends SvelteComponent<CmdPaletteProps, CmdPaletteEvents, CmdPaletteSlots> {
+import type { MultiSelectProps } from './props';
+import type { ObjectOption } from './types';
+interface Action extends ObjectOption {
+    label: string;
+    action: (label: string) => void;
 }
-export {};
+interface Props extends Omit<MultiSelectProps<Action>, `options` | `onadd` | `onkeydown` | `placeholder`> {
+    actions: Action[];
+    triggers?: string[];
+    close_keys?: string[];
+    fade_duration?: number;
+    style?: string;
+    open?: boolean;
+    dialog?: HTMLDialogElement | null;
+    input?: HTMLInputElement | null;
+    placeholder?: string;
+}
+declare const CmdPalette: import("svelte").Component<Props, {}, "open" | "input" | "dialog">;
+type CmdPalette = ReturnType<typeof CmdPalette>;
+export default CmdPalette;