@geoffcox/sterling-svelte 1.0.12 → 2.0.1

package/dist/Select.svelte

@@ -1,49 +1,32 @@
-<script>import { createEventDispatcher, tick } from 'svelte';
+<svelte:options runes={true} />
+
+<script lang="ts">import { tick } from 'svelte';
 import { clickOutside } from './actions/clickOutside';
 import { idGenerator } from './idGenerator';
 import List from './List.svelte';
 import Popover from './Popover.svelte';
+let { buttonSnippet, children, class: _class, disabled = false, open = $bindable(false), onSelect, onPending, selectedValue = $bindable(), listClass, valueSnippet, ...rest } = $props();
 const popupId = idGenerator.nextId('Select-popup');
-// ----- Props ----- //
-export let disabled = false;
-/** When true, the select's dropdown is open. */
-export let open = false;
-/** The value of the selected item.*/
-export let selectedValue = undefined;
-/** Additional class names to apply. */
-export let variant = '';
-/** Additional class names to apply to the List*/
-export let listVariant = '';
 // ----- State ----- //
-// Tracks the previous open state
-let prevOpen = false;
 // Tracks the pending selected index
-let pendingSelectedValue = selectedValue;
-let selectRef;
+let pendingSelectedValue = $state(selectedValue);
+// svelte-ignore non_reactive_update
+let selectRef = $state(undefined);
 let listRef;
-// ----- Events ----- //
-const dispatch = createEventDispatcher();
-const raiseSelect = (value) => {
-    dispatch('select', { value });
-};
-const raisePending = (value) => {
-    dispatch('pending', { value });
-};
 // ----- Reactions ----- //
-$: {
+$effect(() => {
     pendingSelectedValue = selectedValue;
-}
-$: {
-    raiseSelect(selectedValue);
-}
-$: {
+});
+$effect(() => {
+    onSelect?.(selectedValue);
+});
+$effect(() => {
     if (open) {
-        raisePending(pendingSelectedValue);
+        onPending?.(pendingSelectedValue);
     }
-}
-$: {
-    if (open && !prevOpen) {
-        prevOpen = true;
+});
+$effect(() => {
+    if (open) {
         tick().then(() => {
             setTimeout(() => {
                 listRef?.focus();
@@ -51,11 +34,12 @@ $: {
             }, 10);
         });
     }
-    else if (prevOpen) {
-        prevOpen = false;
+});
+$effect(() => {
+    if (!open) {
         tick().then(() => selectRef?.focus());
     }
-}
+});
 // ----- Methods ----- //
 export const blur = () => {
     selectRef?.blur();
@@ -78,6 +62,7 @@ const onSelectClick = (event) => {
         event.preventDefault();
         event.stopPropagation();
     }
+    rest.onclick?.(event);
 };
 const onSelectKeydown = (event) => {
     if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
@@ -95,10 +80,10 @@ const onSelectKeydown = (event) => {
             case 'ArrowUp':
                 {
                     if (selectedValue) {
-                        listRef.selectPreviousItem();
+                        listRef?.selectPreviousItem();
                     }
                     else {
-                        listRef.selectLastItem();
+                        listRef?.selectLastItem();
                     }
                     event.preventDefault();
                     event.stopPropagation();
@@ -108,10 +93,10 @@ const onSelectKeydown = (event) => {
             case 'ArrowDown':
                 {
                     if (selectedValue) {
-                        listRef.selectNextItem();
+                        listRef?.selectNextItem();
                     }
                     else {
-                        listRef.selectFirstItem();
+                        listRef?.selectFirstItem();
                     }
                     event.preventDefault();
                     event.stopPropagation();
@@ -120,6 +105,7 @@ const onSelectKeydown = (event) => {
                 break;
         }
     }
+    rest.onkeydown?.(event);
 };
 const onListKeydown = (event) => {
     if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
@@ -151,8 +137,8 @@ const onListClick = (event) => {
     event.stopPropagation();
     return false;
 };
-const onListSelect = (event) => {
-    pendingSelectedValue = event.detail.value;
+const onListSelect = (value) => {
+    pendingSelectedValue = value;
     if (!open) {
         selectedValue = pendingSelectedValue;
     }
@@ -164,71 +150,46 @@ const onListSelect = (event) => {
   aria-controls={popupId}
   aria-haspopup="listbox"
   aria-expanded={open}
-  class={`sterling-select ${variant}`}
+  class={['sterling-select', _class].filter(Boolean).join(' ')}
   class:disabled
   role="combobox"
   tabindex="0"
-  use:clickOutside
-  on:blur
-  on:click
-  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:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:wheel|passive
-  on:paste
-  on:click={onSelectClick}
-  on:click_outside={() => (open = false)}
-  on:keydown={onSelectKeydown}
-  {...$$restProps}
+  use:clickOutside={{ onclickoutside: () => (open = false) }}
+  {...rest}
+  onclick={onSelectClick}
+  onkeydown={onSelectKeydown}
 >
   <div class="value">
-    <slot name="value" {disabled} {open} {selectedValue} {variant}>
-      {#if selectedValue}
-        {selectedValue}
-      {:else}
-        <span>&nbsp;</span>
-      {/if}
-    </slot>
+    {#if valueSnippet}
+      {@render valueSnippet(selectedValue)}
+    {:else if selectedValue}
+      {selectedValue}
+    {:else}
+      <span>&nbsp;</span>
+    {/if}
   </div>
   <div class="button">
-    <slot name="button" {disabled} {open} {selectedValue} {variant}>
-      <slot name="icon" {disabled} {open} {selectedValue} {variant}>
-        <div class="chevron" />
-      </slot>
-    </slot>
+    {#if buttonSnippet}
+      {@render buttonSnippet()}
+    {:else}
+      <div class="chevron"></div>
+    {/if}
   </div>
   <Popover reference={selectRef} bind:open id={popupId} conditionalRender={false}>
-    <div class={`sterling-select-popup-content ${variant}`}>
+    <div class={['sterling-select-popup-content', _class].filter(Boolean).join(' ')}>
       <List
         bind:this={listRef}
         {disabled}
         selectedValue={pendingSelectedValue}
-        on:click={onListClick}
-        on:keydown={onListKeydown}
-        on:select={onListSelect}
-        tabIndex={open ? 0 : -1}
-        variant={`composed ${listVariant}`}
+        onclick={onListClick}
+        onkeydown={onListKeydown}
+        onSelect={onListSelect}
+        tabindex={open ? 0 : -1}
+        class={`composed ${listClass}`}
       >
-        <slot {variant} {listVariant} />
+        {#if children}
+          {@render children()}
+        {/if}
       </List>
     </div>
   </Popover>

package/dist/Select.svelte.d.ts

@@ -1,83 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        open?: boolean | undefined;
-        selectedValue?: string | undefined;
-        variant?: string | undefined;
-        listVariant?: string | undefined;
-        blur?: (() => void) | undefined;
-        click?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-        scrollToSelectedItem?: (() => 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;
-        select: CustomEvent<any>;
-        pending: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        value: {
-            disabled: boolean;
-            open: boolean;
-            selectedValue: string | undefined;
-            variant: string;
-        };
-        button: {
-            disabled: boolean;
-            open: boolean;
-            selectedValue: string | undefined;
-            variant: string;
-        };
-        icon: {
-            disabled: boolean;
-            open: boolean;
-            selectedValue: string | undefined;
-            variant: string;
-        };
-        default: {
-            variant: string;
-            listVariant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    buttonSnippet?: Snippet;
+    disabled?: boolean | null;
+    listClass?: string;
+    onPending?: (value?: string) => void;
+    onSelect?: (value?: string) => void;
+    open?: boolean | null;
+    selectedValue?: string;
+    valueSnippet?: Snippet<[string | undefined]>;
 };
-export type SelectProps = typeof __propDef.props;
-export type SelectEvents = typeof __propDef.events;
-export type SelectSlots = typeof __propDef.slots;
-export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
-    get blur(): () => void;
-    get click(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-    get scrollToSelectedItem(): () => void;
-}
-export {};
+declare const Select: import("svelte").Component<Props, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+    scrollToSelectedItem: () => void;
+}, "open" | "selectedValue">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/Slider.svelte

@@ -1,25 +1,8 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { round } from 'lodash-es';
-// ----- Props ----- //
-/** When true, the slider is disabled. */
-export let disabled = false;
-/** The minimum value of the slider. */
-export let min = 0;
-/** The maximum value of the slider. */
-export let max = 100;
-/** The number of decimal places for rounding the value. */
-export let precision = undefined;
-/** The amount the value changes by pressing arrow keys. */
-export let step = 1;
-/** The value of the slider. */
-export let value = 0;
-/** Additional class names to apply. */
-export let variant = '';
-/** When true, the slider is displayed vertically. */
-export let vertical = false;
-// ----- State ----- //
+<svelte:options runes={true} />
+
+<script lang="ts">import { round } from 'lodash-es';
+let { class: _class, disabled, min = 0, max = 100, onChange, precision = 0, step = 1, value = $bindable(0), vertical, ...rest } = $props();
 let sliderRef;
-// ----- Methods ----- //
 export const blur = () => {
     sliderRef?.blur();
 };
@@ -29,40 +12,24 @@ export const click = () => {
 export const focus = (options) => {
     sliderRef?.focus();
 };
-// -----Events----- //
-const dispatch = createEventDispatcher();
-//TODO: have change and input events for parity with input type=slider
-// or use input internally within this component.
-const raiseChange = (newValue) => {
-    dispatch('change', { value: newValue });
-};
-// ----- Value tracking ----- //
-// const getPrecision = (value?: number): number => {
-//   if (value !== undefined && Number !== null && !Number.isNaN(value)) {
-//     const text = value.toString();
-//     const position = text.indexOf('.');
-//     if (position !== -1) {
-//       const fraction = text.substring(position + 1);
-//       if (fraction) {
-//         return fraction.length;
-//       }
-//     }
-//   }
-//   return 0;
-// };
+let ratio = $derived((value - min) / (max - min));
 const setValue = (newValue) => {
     const clamped = Math.max(min, Math.min(max, newValue));
     value = precision !== undefined ? round(clamped, precision) : clamped;
 };
 // ensure min <= max
-$: {
+$effect(() => {
     if (min > max) {
         min = max;
     }
-}
-$: min, max, precision, setValue(value);
-// Compute the ratio of the value to the range
-$: ratio = (value - min) / (max - min);
+});
+$effect(() => {
+    const clamped = Math.max(min, Math.min(max, value));
+    const newValue = precision !== undefined ? round(clamped, precision) : clamped;
+    if (value !== newValue) {
+        value = newValue;
+    }
+});
 const setValueByOffset = (offset) => {
     if (sliderSize > 0) {
         const positionRatio = Math.max(0, Math.min(1, offset / sliderSize));
@@ -71,14 +38,14 @@ const setValueByOffset = (offset) => {
     }
 };
 // Raise change event when value changes
-$: {
-    raiseChange(value);
-}
+$effect(() => {
+    onChange?.(value);
+});
 // ----- Size tracking ----- //
-let sliderWidth;
-let sliderHeight;
-$: sliderSize = vertical ? sliderHeight : sliderWidth;
-$: valueOffset = sliderSize * ratio;
+let sliderWidth = $state(0);
+let sliderHeight = $state(0);
+let sliderSize = $derived(vertical ? sliderHeight : sliderWidth);
+let valueOffset = $derived(sliderSize * ratio);
 // ----- Event handlers ----- //
 const onPointerDown = (event) => {
     if (!disabled) {
@@ -90,6 +57,7 @@ const onPointerDown = (event) => {
             setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
         }
     }
+    rest?.onpointerdown?.(event);
 };
 const onPointerMove = (event) => {
     if (!disabled && event.currentTarget.hasPointerCapture(event.pointerId)) {
@@ -100,11 +68,13 @@ const onPointerMove = (event) => {
             setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
         }
     }
+    rest?.onpointermove?.(event);
 };
 const onPointerUp = (event) => {
     if (!disabled) {
         event.currentTarget.releasePointerCapture(event.pointerId);
     }
+    rest?.onpointerup?.(event);
 };
 const onKeyDown = (event) => {
     if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey) {
@@ -123,59 +93,26 @@ const onKeyDown = (event) => {
                 return;
         }
     }
+    rest?.onkeydown?.(event);
 };
 </script>
 
-<!-- @component
-Slider lets the user chose a value within a min/max range by dragging a thumb button.
--->
 <div
   aria-disabled={disabled}
-  aria-valuemin={0}
+  aria-valuemin={min}
   aria-valuenow={value}
   aria-valuemax={max}
-  class={`sterling-slider ${variant}`}
+  class={`sterling-slider ${_class}`}
   class:disabled
   class:horizontal={!vertical}
   class:vertical
   role="slider"
   tabindex={!disabled ? 0 : undefined}
-  on:blur
-  on:click
-  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:pointercancel
-  on:pointerdown
-  on:pointerdown={onPointerDown}
-  on:pointerenter
-  on:pointerleave
-  on:pointermove
-  on:pointermove={onPointerMove}
-  on:pointerover
-  on:pointerout
-  on:pointerup
-  on:pointerup={onPointerUp}
-  on:wheel|passive
-  {...$$restProps}
+  {...rest}
+  onkeydown={onKeyDown}
+  onpointerdown={onPointerDown}
+  onpointermove={onPointerMove}
+  onpointerup={onPointerUp}
 >
   <div
     class="container"
@@ -183,8 +120,14 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     bind:clientWidth={sliderWidth}
     bind:clientHeight={sliderHeight}
   >
-    <div class="track" />
-    <div class="fill" style={vertical ? `height: ${valueOffset}px` : `width: ${valueOffset}px`} />
-    <div class="thumb" style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`} />
+    <div class="track"></div>
+    <div
+      class="fill"
+      style={vertical ? `height: ${valueOffset}px` : `width: ${valueOffset}px`}
+    ></div>
+    <div
+      class="thumb"
+      style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`}
+    ></div>
   </div>
 </div>

package/dist/Slider.svelte.d.ts

@@ -1,66 +1,19 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        min?: number | undefined;
-        max?: number | undefined;
-        precision?: number | undefined;
-        step?: number | undefined;
-        value?: number | undefined;
-        variant?: string | undefined;
-        vertical?: boolean | undefined;
-        blur?: (() => void) | undefined;
-        click?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        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;
-        pointercancel: PointerEvent;
-        pointerdown: PointerEvent;
-        pointerenter: PointerEvent;
-        pointerleave: PointerEvent;
-        pointermove: PointerEvent;
-        pointerover: PointerEvent;
-        pointerout: PointerEvent;
-        pointerup: PointerEvent;
-        wheel: WheelEvent;
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+/// <reference types="svelte" />
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    min?: number;
+    max?: number;
+    precision?: number;
+    step?: number;
+    value?: number;
+    vertical?: boolean | null;
+    onChange?: (value: number) => void;
 };
-export type SliderProps = typeof __propDef.props;
-export type SliderEvents = typeof __propDef.events;
-export type SliderSlots = typeof __propDef.slots;
-/** Slider lets the user chose a value within a min/max range by dragging a thumb button. */
-export default class Slider extends SvelteComponent<SliderProps, SliderEvents, SliderSlots> {
-    get blur(): () => void;
-    get click(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};
+declare const Slider: import("svelte").Component<Props, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;