svelte-multiselect 11.0.0-rc.1 → 11.0.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,17 +1,7 @@
-<script>import { tick } from 'svelte';
+<script lang="ts">import { tick } from 'svelte';
 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 = ``, span_style = ``, open = $bindable(false), dialog = $bindable(null), input = $bindable(null), placeholder = `Filter actions...`, children, ...rest } = $props();
 async function toggle(event) {
     if (triggers.includes(event.key) && event.metaKey && !open) {
         // open on cmd+trigger
@@ -28,13 +18,14 @@ 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;
 }
+const children_render = $derived(children);
 </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,21 +33,25 @@ function trigger_action_and_close(event) {
       options={actions}
       bind:input
       {placeholder}
-      on:add={trigger_action_and_close}
-      on:keydown={toggle}
-      {...$$restProps}
-      let:option
+      onadd={trigger_action_and_close}
+      onkeydown={toggle}
+      {...rest}
     >
-      <!-- wait for https://github.com/sveltejs/svelte/pull/8304 -->
-      <slot>
-        <span style={span_style}>{option.label}</span>
-      </slot>
+      {#snippet children({ option })}
+        <!-- wait for https://github.com/sveltejs/svelte/pull/8304 -->
+        {#if children_render}
+          {@render children_render()}
+        {:else}
+          <span style={span_style}>{option.label}</span>
+        {/if}
+      {/snippet}
     </Select>
   </dialog>
 {/if}
 
 <style>
-  :where(dialog) {
+  /* TODO maybe remove global */
+  :where(:global(dialog)) {
     position: fixed;
     top: 30%;
     border: none;

package/dist/CmdPalette.svelte.d.ts

@@ -1,33 +1,23 @@
-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 Snippet } from 'svelte';
+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;
+    span_style?: string;
+    open?: boolean;
+    dialog?: HTMLDialogElement | null;
+    input?: HTMLInputElement | null;
+    placeholder?: string;
+    children?: Snippet;
+}
+declare const CmdPalette: import("svelte").Component<Props, {}, "open" | "input" | "dialog">;
+type CmdPalette = ReturnType<typeof CmdPalette>;
+export default CmdPalette;