svelte-multiselect 11.5.0 → 11.5.1

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,15 @@
+<script lang="ts">import { Spring } from 'svelte/motion';
+let { wiggle = $bindable(false), angle = 0, scale = 1, dx = 0, dy = 0, duration = 200, stiffness = 0.05, damping = 0.1, children, } = $props();
+const store = Spring.of(() => (wiggle ? { scale, angle, dx, dy } : { angle: 0, scale: 1, dx: 0, dy: 0 }), { stiffness, damping });
+$effect.pre(() => {
+    if (wiggle)
+        setTimeout(() => (wiggle = false), duration);
+});
+</script>
+
+<span
+  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,15 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    wiggle?: boolean;
+    angle?: number;
+    scale?: number;
+    dx?: number;
+    dy?: number;
+    duration?: number;
+    stiffness?: number;
+    damping?: number;
+    children?: Snippet;
+};
+declare const Wiggle: import("svelte").Component<$$ComponentProps, {}, "wiggle">;
+type Wiggle = ReturnType<typeof Wiggle>;
+export default Wiggle;

package/dist/attachments.d.ts

@@ -0,0 +1,68 @@
+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;
+    disabled?: boolean;
+    style?: string;
+}
+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;