svelte-multiselect 11.5.0 → 11.5.2

package/dist/PrevNext.svelte

@@ -0,0 +1,105 @@
+<script lang="ts" generics="Item extends [string, unknown] = [string, unknown]">let { items = [], node = `nav`, current = ``, log = `errors`, nav_options = { replace_state: true, no_scroll: true }, titles = { prev: `&larr; Previous`, next: `Next &rarr;` }, onkeyup = ({ prev, next }) => ({ ArrowLeft: prev[0], ArrowRight: next[0] }), prev_snippet, children, between, next_snippet, min_items = 3, link_props, ...rest } = $props();
+// Convert items to consistent [key, value] format
+let items_arr = $derived((items ?? []).map((itm) => (typeof itm === `string` ? [itm, itm] : itm)));
+// Calculate prev/next items with wraparound
+let idx = $derived(items_arr.findIndex(([key]) => key === current));
+let prev = $derived(items_arr[idx - 1] ?? items_arr[items_arr.length - 1]);
+let next = $derived(items_arr[idx + 1] ?? items_arr[0]);
+// Validation and logging
+$effect.pre(() => {
+    if (log !== `silent`) {
+        if (items_arr.length < min_items && log === `verbose`) {
+            console.warn(`PrevNext received ${items_arr.length} items - minimum of ${min_items} expected`);
+        }
+        if (idx < 0 && log === `errors`) {
+            const valid = items_arr.map(([key]) => key);
+            console.error(`PrevNext received invalid current=${current}, expected one of ${valid}`);
+        }
+    }
+});
+function handle_keyup(event) {
+    if (!onkeyup)
+        return;
+    if ((items_arr?.length ?? 0) < min_items)
+        return;
+    if (!prev || !next)
+        return;
+    const key_map = onkeyup({ prev, next });
+    const to = key_map[event.key];
+    if (to !== undefined) {
+        const { replace_state, no_scroll } = nav_options;
+        const [scroll_x, scroll_y] = no_scroll
+            ? [window.scrollX, window.scrollY]
+            : [0, 0];
+        const goto = window.history[replace_state ? `replaceState` : `pushState`];
+        goto.call(window.history, {}, ``, to); // Navigate using appropriate history method
+        if (no_scroll)
+            window.scrollTo(scroll_x, scroll_y); // Restore scroll position if needed
+    }
+}
+export {};
+</script>
+
+<svelte:window onkeyup={handle_keyup} />
+
+{#if items_arr.length >= min_items}
+  <svelte:element this={node} class="prev-next" {...rest}>
+    <!-- ensures `prev` is a defined [key, value] tuple.
+      Due to prior normalization of the `items` prop, any defined `prev` item
+      is guaranteed to be a 2-element array except if `prev` is null.
+    -->
+    {#if prev?.length >= 2}
+      {#if prev_snippet}
+        {@render prev_snippet({ item: prev })}
+      {:else if children}
+        {@render children({ kind: `prev`, item: prev })}
+      {:else}
+        <div>
+          {#if titles.prev}<span>{@html titles.prev}</span>{/if}
+          <a data-sveltekit-preload-data="hover" {...link_props} href={prev[0]}>{
+            prev[0]
+          }</a>
+        </div>
+      {/if}
+    {/if}
+    {@render between?.()}
+    {#if next?.length >= 2}
+      {#if next_snippet}
+        {@render next_snippet({ item: next })}
+      {:else if children}
+        {@render children({ kind: `next`, item: next })}
+      {:else}
+        <div>
+          {#if titles.next}<span>{@html titles.next}</span>{/if}
+          <a data-sveltekit-preload-data="hover" {...link_props} href={next[0]}>{
+            next[0]
+          }</a>
+        </div>
+      {/if}
+    {/if}
+  </svelte:element>
+{/if}
+
+<style>
+  .prev-next {
+    display: flex;
+    list-style: none;
+    place-content: space-between;
+    gap: var(--prev-next-gap, 2em);
+    padding: var(--prev-next-padding, 0);
+    margin: var(--prev-next-margin, 3em auto);
+  }
+  .prev-next a {
+    color: var(--prev-next-color);
+    background: var(--prev-next-link-bg);
+    padding: var(--prev-next-link-padding);
+    border-radius: var(--prev-next-link-border-radius);
+  }
+  .prev-next span {
+    display: block;
+    margin: var(--prev-next-label-margin, 0 auto 1ex);
+  }
+  .prev-next > div:nth-child(2) {
+    text-align: right;
+  }
+</style>

package/dist/PrevNext.svelte.d.ts

@@ -0,0 +1,56 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<Item extends [string, unknown] = [string, unknown]>(): {
+    props: Omit<HTMLAttributes<HTMLElement>, "children" | "onkeyup"> & {
+        items?: (string | Item)[];
+        node?: string;
+        current?: string;
+        log?: `verbose` | `errors` | `silent`;
+        nav_options?: {
+            replace_state: boolean;
+            no_scroll: boolean;
+        };
+        titles?: {
+            prev: string;
+            next: string;
+        };
+        onkeyup?: ((obj: {
+            prev: Item;
+            next: Item;
+        }) => Record<string, string | undefined>) | null;
+        prev_snippet?: Snippet<[{
+            item: Item;
+        }]>;
+        children?: Snippet<[{
+            kind: `prev` | `next`;
+            item: Item;
+        }]>;
+        between?: Snippet<[]>;
+        next_snippet?: Snippet<[{
+            item: Item;
+        }]>;
+        min_items?: number;
+        link_props?: HTMLAttributes<HTMLAnchorElement>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item extends [string, unknown] = [string, unknown]> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item extends [string, unknown] = [string, unknown]>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item extends [string, unknown] = [string, unknown]>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PrevNext: $$IsomorphicComponent;
+type PrevNext<Item extends [string, unknown] = [string, unknown]> = InstanceType<typeof PrevNext<Item>>;
+export default PrevNext;

package/dist/Toggle.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">let { checked = $bindable(false), onkeydown, children, input_props, ...rest } = $props();
+// normally input type=checkbox toggles on space bar, this handler also responds to enter
+function handle_keydown(event) {
+    onkeydown?.(event);
+    if (event.key === `Enter`) {
+        event.preventDefault();
+        const target = event.target;
+        target.click(); // simulate real user toggle so 'change' is dispatched
+    }
+}
+export {};
+</script>
+
+<label {...rest}>
+  {@render children?.()}
+  <input
+    type="checkbox"
+    bind:checked
+    {...input_props}
+    onkeydown={handle_keydown}
+  />
+  <span></span>
+</label>
+
+<style>
+  label {
+    display: var(--toggle-label-display, inline-flex);
+    align-items: var(--toggle-label-align-items, center);
+    width: var(--toggle-label-width, max-content);
+    vertical-align: var(--toggle-label-vertical-align, middle);
+  }
+  span {
+    box-sizing: border-box;
+    height: var(--toggle-knob-height, 1.5em);
+    width: var(--toggle-knob-width, 3em);
+    padding: var(--toggle-knob-padding, 0.1em);
+    border: var(--toggle-knob-border, 1px solid light-dark(lightgray, #555));
+    border-radius: var(--toggle-knob-border-radius, 0.75em);
+    transition: var(--toggle-knob-transition, 0.3s);
+  }
+  input:checked + span {
+    background: var(--toggle-background, light-dark(#222, #555));
+  }
+  input {
+    position: absolute;
+    opacity: 0;
+    width: var(--toggle-input-width, 1em);
+  }
+  input + span::after {
+    content: '';
+    display: var(--toggle-knob-after-display, block);
+    height: var(--toggle-knob-after-height, 1.2em);
+    width: var(--toggle-knob-after-width, 1.2em);
+    border-radius: var(--toggle-knob-after-border-radius, 50%);
+    background: var(--toggle-knob-after-background, light-dark(gray, #888));
+    transition: var(--toggle-knob-after-transition, 0.3s);
+  }
+  input:checked + span::after {
+    background: var(--toggle-knob-after-background, light-dark(green, #4ade80));
+    transform: var(
+      --toggle-knob-after-transform,
+      translate(
+        calc(
+          var(--toggle-knob-width, 3em) - var(--toggle-knob-height, 1.5em)
+            + var(--toggle-knob-padding, 0.1em)
+            - var(--toggle-knob-border, 2px)
+        )
+      )
+    );
+  }
+  input:focus + span {
+    border: var(
+      --toggle-knob-focus-border,
+      1px solid light-dark(cornflowerblue, #6495ed)
+    );
+  }
+</style>

package/dist/Toggle.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLLabelElement> & {
+    checked?: boolean;
+    onkeydown?: (event: KeyboardEvent) => void;
+    children?: Snippet<[]>;
+    input_props?: HTMLAttributes<HTMLInputElement>;
+};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/Wiggle.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">import { Spring } from 'svelte/motion';
+let { wiggle = $bindable(false), angle = 0, scale = 1, dx = 0, dy = 0, duration = 200, spring_options = $bindable({ stiffness: 0.05, damping: 0.1 }), children, ...rest } = $props();
+const store = Spring.of(() => (wiggle ? { scale, angle, dx, dy } : { angle: 0, scale: 1, dx: 0, dy: 0 }), spring_options);
+// update spring physics when options change
+$effect(() => {
+    store.stiffness = spring_options.stiffness;
+    store.damping = spring_options.damping;
+});
+$effect.pre(() => {
+    if (wiggle)
+        setTimeout(() => (wiggle = false), duration);
+});
+</script>
+
+<span
+  {...rest}
+  style:display="inline-block"
+  style:transform="rotate({store.current.angle}deg) scale({store.current.scale})
+  translate({store.current.dx}px, {store.current.dy}px)"
+>
+  {@render children?.()}
+</span>

package/dist/Wiggle.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLSpanElement> & {
+    wiggle?: boolean;
+    angle?: number;
+    scale?: number;
+    dx?: number;
+    dy?: number;
+    duration?: number;
+    spring_options?: {
+        stiffness: number;
+        damping: number;
+    };
+    children?: Snippet;
+};
+declare const Wiggle: import("svelte").Component<$$ComponentProps, {}, "wiggle" | "spring_options">;
+type Wiggle = ReturnType<typeof Wiggle>;
+export default Wiggle;

package/dist/attachments.d.ts

@@ -0,0 +1,72 @@
+import { type Attachment } from 'svelte/attachments';
+declare global {
+    interface CSS {
+        highlights: HighlightRegistry;
+    }
+    interface HighlightRegistry extends Map<string, Highlight> {
+        clear(): void;
+        delete(key: string): boolean;
+        set(key: string, value: Highlight): this;
+    }
+}
+export interface DraggableOptions {
+    handle_selector?: string;
+    disabled?: boolean;
+    on_drag_start?: (event: MouseEvent) => void;
+    on_drag?: (event: MouseEvent) => void;
+    on_drag_end?: (event: MouseEvent) => void;
+}
+export type Dimensions = {
+    width: number;
+    height: number;
+};
+export type ResizeCallback = (event: MouseEvent, dimensions: Dimensions) => void;
+export interface ResizableOptions {
+    edges?: (`top` | `right` | `bottom` | `left`)[];
+    min_width?: number;
+    min_height?: number;
+    max_width?: number;
+    max_height?: number;
+    handle_size?: number;
+    disabled?: boolean;
+    on_resize_start?: ResizeCallback;
+    on_resize?: ResizeCallback;
+    on_resize_end?: ResizeCallback;
+}
+export declare const draggable: (options?: DraggableOptions) => Attachment;
+export declare const resizable: (options?: ResizableOptions) => Attachment;
+export declare function get_html_sort_value(element: HTMLElement): string;
+export interface SortableOptions {
+    header_selector?: string;
+    asc_class?: string;
+    desc_class?: string;
+    sorted_style?: Partial<CSSStyleDeclaration>;
+    disabled?: boolean;
+}
+export declare const sortable: (options?: SortableOptions) => (node: HTMLElement) => (() => void) | undefined;
+export type HighlightOptions = {
+    query?: string;
+    disabled?: boolean;
+    fuzzy?: boolean;
+    node_filter?: (node: Node) => number;
+    css_class?: string;
+};
+export declare const highlight_matches: (ops: HighlightOptions) => (node: HTMLElement) => (() => boolean) | undefined;
+export interface TooltipOptions {
+    content?: string;
+    placement?: `top` | `bottom` | `left` | `right`;
+    delay?: number;
+    hide_delay?: number;
+    disabled?: boolean | `touch-devices`;
+    style?: string;
+    show_arrow?: boolean;
+    offset?: number;
+    allow_html?: boolean;
+}
+export declare const tooltip: (options?: TooltipOptions) => Attachment;
+export type ClickOutsideConfig<T extends HTMLElement> = {
+    enabled?: boolean;
+    exclude?: string[];
+    callback?: (node: T, config: ClickOutsideConfig<T>) => void;
+};
+export declare const click_outside: <T extends HTMLElement>(config?: ClickOutsideConfig<T>) => (node: T) => (() => void) | undefined;