@geoffcox/sterling-svelte 1.0.12 → 2.0.1

package/dist/Dialog.svelte.d.ts

@@ -1,37 +1,14 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        backdropCloses?: boolean | undefined;
-        open?: boolean | undefined;
-        returnValue?: string | undefined;
-        variant?: string | undefined;
-    };
-    events: {
-        close: Event;
-        cancel: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        content: {};
-        header: {};
-        title: {};
-        body: {};
-        footer: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
+import type { HTMLDialogAttributes } from 'svelte/elements';
+import { type Snippet } from 'svelte';
+type Props = HTMLDialogAttributes & {
+    backdropCloses?: boolean | null | undefined;
+    body?: Snippet;
+    content?: Snippet;
+    footer?: Snippet;
+    header?: Snippet;
+    returnValue?: string;
+    headerTitle?: string | Snippet;
 };
-export type DialogProps = typeof __propDef.props;
-export type DialogEvents = typeof __propDef.events;
-export type DialogSlots = typeof __propDef.slots;
-/**
- * A styled &lt;dialog&gt; element
- *
- * - Slots for typical dialog content.
- * - Props and events to make using &lt;dialog&gt; easier
- */
-export default class Dialog extends SvelteComponent<DialogProps, DialogEvents, DialogSlots> {
-}
-export {};
+declare const Dialog: import("svelte").Component<Props, {}, "open" | "returnValue">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/Dropdown.svelte

@@ -1,4 +1,6 @@
-<script>import { createEventDispatcher } from 'svelte';
+<svelte:options runes={true} />
+
+<script lang="ts">import {} from 'svelte';
 import Popover from './Popover.svelte';
 import { clickOutside } from './actions/clickOutside';
 import { idGenerator } from './idGenerator';
@@ -6,27 +8,15 @@ import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
 import { slide } from 'svelte/transition';
 import { usingKeyboard } from './mediaQueries/usingKeyboard';
 const popupId = idGenerator.nextId('Dropdown-popup');
-// ----- Props ----- //
-/** Disables the dropdown. */
-export let disabled = false;
-/** When true, the dropdown is open. */
-export let open = false;
-/** When the user clicks away from the dropdown, it remains open. */
-export let stayOpenOnClickAway = false;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-let dropdownRef;
-let popupContentRef;
-// ----- Events ----- //
-const dispatch = createEventDispatcher();
-const raiseOpen = (open) => {
-    dispatch('open', { open });
-};
+let { class: _class, children, disabled = false, open = $bindable(false), onOpen, stayOpenOnClickAway = false, button, buttonIcon, value, ...rest } = $props();
+// svelte-ignore non_reactive_update
+let dropdownRef = $state(undefined);
+// svelte-ignore non_reactive_update
+let popupContentRef = $state(undefined);
 // ----- Reactions ----- //
-$: {
-    raiseOpen(open);
-}
+$effect(() => {
+    onOpen?.(open);
+});
 // ----- Methods ----- //
 export const click = () => {
     dropdownRef?.click();
@@ -37,13 +27,13 @@ export const blur = () => {
 export const focus = (options) => {
     dropdownRef?.focus(options);
 };
-// ----- Event Handlers ----- //
 const onClick = (event) => {
     if (!disabled) {
         open = !open;
         event.preventDefault();
         event.stopPropagation();
     }
+    rest.onclick?.(event);
 };
 const onKeydown = (event) => {
     if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
@@ -52,14 +42,13 @@ const onKeydown = (event) => {
                 open = !open;
                 event.preventDefault();
                 event.stopPropagation();
-                return false;
             case 'Escape':
                 open = false;
                 event.preventDefault();
                 event.stopPropagation();
-                return false;
         }
     }
+    rest.onkeydown?.(event);
 };
 const onClickOutside = (event) => {
     if (!stayOpenOnClickAway) {
@@ -70,7 +59,7 @@ const onClickOutside = (event) => {
 const slideNoOp = (node, params) => {
     return { delay: 0, duration: 0 };
 };
-$: slideMotion = !$prefersReducedMotion ? slide : slideNoOp;
+let slideMotion = $derived(!$prefersReducedMotion ? slide : slideNoOp);
 </script>
 
 <div
@@ -78,64 +67,43 @@ $: slideMotion = !$prefersReducedMotion ? slide : slideNoOp;
   aria-controls={popupId}
   aria-haspopup={true}
   aria-expanded={open}
-  class={`sterling-dropdown ${variant}`}
+  class={`sterling-dropdown ${_class}`}
   class:disabled
   class:open
   class:using-keyboard={$usingKeyboard}
   role="combobox"
   tabindex="0"
-  use:clickOutside={{ ignoreOthers: [popupContentRef] }}
-  on:blur
-  on:click
-  on:click={onClick}
-  on:copy
-  on:cut
-  on:dblclick
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  on:focus
-  on:focusin
-  on:focusout
-  on:keydown
-  on:keydown={onKeydown}
-  on:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:wheel|passive
-  on:paste
-  on:click_outside={onClickOutside}
-  {...$$restProps}
+  use:clickOutside={{ ignoreOthers: [popupContentRef!], onclickoutside: onClickOutside }}
+  {...rest}
+  onclick={onClick}
+  onkeydown={onKeydown}
 >
-  {#if $$slots.value}
-    <div class="value">
-      <slot name="value" {disabled} {open} {variant} />
-    </div>
-  {/if}
-  <slot name="button" {disabled} {open} {variant}>
-    <div class="button">
-      <slot name="icon" {disabled} {open} {variant}>
-        <div class="chevron" />
-      </slot>
-    </div>
-  </slot>
+  <div class="value">
+    {#if value}
+      {#if typeof value === 'string'}
+        {value}
+      {:else}
+        {@render value()}
+      {/if}
+    {/if}
+  </div>
+  <div class="button">
+    {#if button}
+      {@render button()}
+    {:else if buttonIcon}
+      {@render buttonIcon()}
+    {:else}
+      <div class="chevron"></div>
+    {/if}
+  </div>
 
   <Popover reference={dropdownRef} open={!disabled && open} placement="bottom-start">
     <div
-      class={`sterling-dropdown-popup-content ${variant}`}
+      class={`sterling-dropdown-popup-content ${_class}`}
       transition:slideMotion|global={{ duration: 200 }}
       bind:this={popupContentRef}
     >
-      <slot {disabled} {open} {variant} />
+      {@render children?.()}
     </div>
   </Popover>
 </div>

package/dist/Dropdown.svelte.d.ts

@@ -1,77 +1,18 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        open?: boolean | undefined;
-        stayOpenOnClickAway?: boolean | undefined;
-        variant?: string | undefined;
-        click?: (() => void) | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        copy: ClipboardEvent;
-        cut: ClipboardEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        wheel: WheelEvent;
-        paste: ClipboardEvent;
-        open: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        value: {
-            disabled: boolean;
-            open: boolean;
-            variant: string;
-        };
-        button: {
-            disabled: boolean;
-            open: boolean;
-            variant: string;
-        };
-        icon: {
-            disabled: boolean;
-            open: boolean;
-            variant: string;
-        };
-        default: {
-            disabled: boolean;
-            open: boolean;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null | undefined;
+    open?: boolean | null | undefined;
+    stayOpenOnClickAway?: boolean | null | undefined;
+    onOpen?: (open: boolean | null | undefined) => void;
+    button?: Snippet;
+    buttonIcon?: Snippet;
+    value?: string | Snippet;
 };
-export type DropdownProps = typeof __propDef.props;
-export type DropdownEvents = typeof __propDef.events;
-export type DropdownSlots = typeof __propDef.slots;
-export default class Dropdown extends SvelteComponent<DropdownProps, DropdownEvents, DropdownSlots> {
-    get click(): () => void;
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};
+declare const Dropdown: import("svelte").Component<Props, {
+    click: () => void;
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "open">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/Input.svelte

@@ -1,19 +1,14 @@
-<script>import { idGenerator } from './idGenerator';
+<svelte:options runes={true} />
+
+<script lang="ts">import { idGenerator } from './idGenerator';
 import { usingKeyboard } from './mediaQueries/usingKeyboard';
-// ----- Props ----- //
-export let disabled = false;
-export let id = undefined;
-export let value = '';
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
+let { id, children, class: _class, disabled = false, value = $bindable(undefined), ...rest } = $props();
 let inputRef;
-$: {
-    if ($$slots.default && id === undefined) {
+$effect(() => {
+    if (children && id === undefined) {
         id = idGenerator.nextId('Input');
     }
-}
-// ----- Methods ----- //
+});
 export const blur = () => {
     inputRef?.blur();
 };
@@ -39,51 +34,22 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
 };
 </script>
 
-{#if $$slots.default}
-  <label class={`sterling-input-label ${variant}`} class:disabled for={id}>
-    <slot {disabled} {value} {variant} />
+{#if children}
+  <label class={['sterling-input-label', _class].filter(Boolean).join(' ')} class:disabled for={id}>
+    {@render children()}
   </label>
 {/if}
-<div class={`sterling-input ${variant}`} class:disabled class:using-keyboard={$usingKeyboard}>
+<div
+  class={['sterling-input', _class].filter(Boolean).join(' ')}
+  class:disabled
+  class:using-keyboard={$usingKeyboard}
+>
   <input
     bind:this={inputRef}
     class:using-keyboard={$usingKeyboard}
     {disabled}
     {id}
     bind:value
-    on:beforeinput
-    on:blur
-    on:click
-    on:change
-    on:copy
-    on:cut
-    on:paste
-    on:dblclick
-    on:dragend
-    on:dragenter
-    on:dragleave
-    on:dragover
-    on:dragstart
-    on:drop
-    on:focus
-    on:focusin
-    on:focusout
-    on:input
-    on:invalid
-    on:keydown
-    on:keypress
-    on:keyup
-    on:mousedown
-    on:mouseenter
-    on:mouseleave
-    on:mousemove
-    on:mouseover
-    on:mouseout
-    on:mouseup
-    on:select
-    on:submit
-    on:reset
-    on:wheel|passive
-    {...$$restProps}
+    {...rest}
   />
 </div>

package/dist/Input.svelte.d.ts

@@ -1,74 +1,12 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        id?: string | undefined;
-        value?: string | undefined;
-        variant?: string | undefined;
-        blur?: (() => void) | undefined;
-        click?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-        select?: (() => void) | undefined;
-        setSelectionRange?: ((start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none') => void) | undefined;
-        setRangeText?: ((replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => void) | undefined;
-    };
-    events: {
-        beforeinput: InputEvent;
-        blur: FocusEvent;
-        click: MouseEvent;
-        change: Event;
-        copy: ClipboardEvent;
-        cut: ClipboardEvent;
-        paste: ClipboardEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        input: Event;
-        invalid: Event;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        select: Event;
-        submit: SubmitEvent;
-        reset: Event;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            disabled: boolean;
-            value: string;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type InputProps = typeof __propDef.props;
-export type InputEvents = typeof __propDef.events;
-export type InputSlots = typeof __propDef.slots;
-export default class Input extends SvelteComponent<InputProps, InputEvents, InputSlots> {
-    get blur(): () => void;
-    get click(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-    get select(): () => void;
-    get setSelectionRange(): (start: number | null, end: number | null, direction?: "forward" | "backward" | "none" | undefined) => void;
-    get setRangeText(): (replacement: string, start?: number | undefined, end?: number | undefined, selectionMode?: SelectionMode | undefined) => void;
-}
-export {};
+/// <reference types="svelte" />
+import type { HTMLInputAttributes } from 'svelte/elements';
+declare const Input: import("svelte").Component<HTMLInputAttributes, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+    select: () => void;
+    setSelectionRange: (start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none') => void;
+    setRangeText: (replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => void;
+}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;