@geoffcox/sterling-svelte 2.0.1 → 2.0.3

package/dist/Pagination.svelte

@@ -0,0 +1,267 @@
+<script lang="ts">
+  import type { ChangeEventHandler } from 'svelte/elements';
+  import type { PaginationProps } from './Pagination.types';
+
+  let {
+    class: _class,
+    itemCount,
+    itemRange = $bindable(), //readonly
+    page = $bindable(),
+    pageCount = $bindable(), //readonly
+    pageSize = 1,
+    pageStep = 10,
+    onChange,
+    firstNumber,
+    stepPreviousNumber,
+    previousNumber,
+    currentNumber,
+    nextNumber,
+    stepNextNumber,
+    lastNumber
+  }: PaginationProps = $props();
+
+  let _pageCount = $derived(
+    itemCount > 0 && pageSize > 0 ? Math.ceil(itemCount / pageSize) : undefined
+  );
+
+  // 1 time update of pageCount when loaded because effect runs too late
+  // svelte-ignore state_referenced_locally
+  pageCount = _pageCount;
+
+  // readonly props cannot be assigned $derived values
+  $effect(() => {
+    pageCount = _pageCount;
+  });
+
+  // clamp the page internally
+  let _page = $derived(_pageCount && page ? Math.max(1, Math.min(page, _pageCount)) : undefined);
+
+  let _itemRange = $derived(
+    _pageCount && _page
+      ? {
+          index: _page ? Math.max(0, (_page - 1) * pageSize) : 0,
+          count: _page ? Math.max(0, Math.min(pageSize, itemCount - (_page - 1) * pageSize)) : 0
+        }
+      : undefined
+  );
+
+  // 1 time update of itemRange when loaded because effect runs too late
+  // svelte-ignore state_referenced_locally
+  itemRange = _itemRange;
+
+  // readonly props cannot be assigned $derived values yet
+  $effect(() => {
+    itemRange = _itemRange;
+  });
+
+  $effect(() => {
+    onChange?.(_page, _itemRange);
+  });
+
+  let firstValue = $derived(_pageCount && _page && _page >= 3 ? 1 : undefined);
+  let stepPreviousValue = $derived(_pageCount && _page ? Math.max(1, _page - pageStep) : undefined);
+  let previousValue = $derived(_pageCount && _page && _page >= 2 ? _page - 1 : undefined);
+  // _page acts as the currentValue;
+  let nextValue = $derived(_pageCount && _page && _page <= _pageCount - 1 ? _page + 1 : undefined);
+  let stepNextValue = $derived(
+    _pageCount && _page ? Math.min(_pageCount, _page + pageStep) : undefined
+  );
+  let lastValue = $derived(_pageCount && _page && _page <= _pageCount - 2 ? _pageCount : undefined);
+
+  let numberOfDigits = $derived(_pageCount ? _pageCount.toString().length : 1);
+
+  // clamp page when the value changes
+  const setPage = (newPage?: number) => {
+    page = _pageCount && newPage ? Math.max(1, Math.min(newPage, _pageCount)) : undefined;
+  };
+
+  const onFirst = () => {
+    setPage(1);
+  };
+
+  const onStepPrevious = () => {
+    _page && setPage(_page - Math.abs(pageStep));
+  };
+
+  const onPrevious = () => {
+    _page && setPage(_page - 1);
+  };
+
+  const onNext = () => {
+    _page && setPage(_page + 1);
+  };
+
+  const onStepNext = () => {
+    _page && setPage(_page + Math.abs(pageStep));
+  };
+
+  const onLast = () => {
+    _pageCount && setPage(_pageCount);
+  };
+
+  const onInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    const inputValue = event.currentTarget.value;
+    if (inputValue.length > 0) {
+      const value = parseInt(inputValue, 10);
+      value && setPage(value);
+    }
+  };
+
+  let holdTimeout: NodeJS.Timeout | undefined = undefined;
+  let holdInterval: NodeJS.Timeout | undefined = undefined;
+
+  const startHoldButton = (
+    event: MouseEvent,
+    action: () => void,
+    delayMs: number = 500,
+    repeatMs: number = 100
+  ) => {
+    clearInterval(holdTimeout);
+    clearInterval(holdInterval);
+    if (event.button !== 0) {
+      return;
+    }
+    action();
+    holdTimeout = setTimeout(() => {
+      holdInterval = setInterval(action, repeatMs);
+    }, delayMs);
+  };
+
+  const stopHoldButton = (event: MouseEvent) => {
+    clearInterval(holdTimeout);
+    clearInterval(holdInterval);
+  };
+
+  const onKeydown = (event: KeyboardEvent, action: () => void) => {
+    if (event.key === ' ') {
+      event.preventDefault();
+      event.stopPropagation();
+      action();
+      return false;
+    }
+  };
+</script>
+
+<div class="sterling-pagination" style={`--page-number-width: ${numberOfDigits}ch`}>
+  <div class="page-number first">
+    <button
+      disabled={firstValue === undefined}
+      type="button"
+      onclick={onFirst}
+      onkeydown={(event) => onKeydown(event, onFirst)}
+      data-value={firstValue}
+    >
+      {#if firstNumber}
+        {@render firstNumber(firstValue)}
+      {:else if firstValue}
+        {firstValue}
+      {:else}
+        -
+      {/if}</button
+    >
+  </div>
+  <div class="page-number step-previous">
+    <button
+      disabled={stepPreviousValue === undefined}
+      type="button"
+      onmousedown={(event) => startHoldButton(event, onStepPrevious)}
+      onmouseup={stopHoldButton}
+      onmouseleave={stopHoldButton}
+      onkeydown={(event) => onKeydown(event, onStepPrevious)}
+      data-value={stepPreviousValue}
+    >
+      {#if stepPreviousNumber}
+        {@render stepPreviousNumber(stepPreviousValue)}
+      {:else if stepPreviousValue}
+        &lt;&lt;
+      {:else}
+        -
+      {/if}
+    </button>
+  </div>
+  <div class="page-number previous">
+    <button
+      disabled={previousValue === undefined}
+      type="button"
+      onmousedown={(event) => startHoldButton(event, onPrevious)}
+      onmouseup={stopHoldButton}
+      onmouseleave={stopHoldButton}
+      onkeydown={(event) => onKeydown(event, onPrevious)}
+      data-value={previousValue}
+    >
+      {#if previousNumber}
+        {@render previousNumber(previousValue)}
+      {:else if previousValue}
+        {previousValue}
+      {:else}
+        -
+      {/if}
+    </button>
+  </div>
+  <div class="page-number current">
+    {#if _page}
+      {#if currentNumber}
+        {@render currentNumber(_page)}
+      {:else}
+        <input disabled={_page === undefined} value={_page} onchange={onInputChange} />
+      {/if}
+    {:else}
+      -
+    {/if}
+  </div>
+  <div class="page-number next">
+    <button
+      disabled={nextValue === undefined}
+      type="button"
+      onmousedown={(event) => startHoldButton(event, onNext)}
+      onmouseup={stopHoldButton}
+      onmouseleave={stopHoldButton}
+      onkeydown={(event) => onKeydown(event, onNext)}
+      data-value={nextValue}
+    >
+      {#if nextNumber}
+        {@render nextNumber(nextValue)}
+      {:else if nextValue}
+        {nextValue}
+      {:else}
+        -
+      {/if}
+    </button>
+  </div>
+  <div class="page-number step-next">
+    <button
+      disabled={stepNextValue === undefined}
+      type="button"
+      onmousedown={(event) => startHoldButton(event, onStepNext)}
+      onmouseup={stopHoldButton}
+      onmouseleave={stopHoldButton}
+      onkeydown={(event) => onKeydown(event, onStepNext)}
+      data-value={stepNextValue}
+    >
+      {#if stepNextNumber}
+        {@render stepNextNumber(stepNextValue)}
+      {:else if stepNextValue}
+        &gt;&gt;
+      {:else}
+        -
+      {/if}
+    </button>
+  </div>
+  <div class="page-number last">
+    <button
+      disabled={lastValue === undefined}
+      type="button"
+      onclick={() => onLast()}
+      onkeydown={(event) => onKeydown(event, onLast)}
+      data-value={lastValue}
+    >
+      {#if lastNumber}
+        {@render lastNumber(lastValue)}
+      {:else if lastValue}
+        {lastValue}
+      {:else}
+        -
+      {/if}
+    </button>
+  </div>
+</div>

package/dist/Pagination.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PaginationProps } from './Pagination.types';
+declare const Pagination: import("svelte").Component<PaginationProps, {}, "page" | "itemRange" | "pageCount">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/Pagination.types.d.ts

@@ -0,0 +1,24 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type PaginationProps = HTMLAttributes<HTMLDivElement> & {
+    itemCount: number;
+    itemRange?: {
+        index: number;
+        count: number;
+    };
+    page?: number;
+    pageCount?: number;
+    pageSize?: number;
+    pageStep?: number;
+    onChange?: (page?: number, itemRange?: {
+        index: number;
+        count: number;
+    }) => void;
+    firstNumber?: Snippet<[number | undefined]>;
+    stepPreviousNumber?: Snippet<[number | undefined]>;
+    previousNumber?: Snippet<[number | undefined]>;
+    currentNumber?: Snippet<[number | undefined]>;
+    nextNumber?: Snippet<[number | undefined]>;
+    stepNextNumber?: Snippet<[number | undefined]>;
+    lastNumber?: Snippet<[number | undefined]>;
+};

package/dist/Pagination.types.js

@@ -0,0 +1 @@
+import {} from 'svelte';

package/dist/Popover.svelte

@@ -1,93 +1,147 @@
 <svelte:options runes={true} />
 
-<script lang="ts">import { getContext, onMount, tick } from 'svelte';
-import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
-import { portal } from './actions/portal';
-import { STERLING_PORTAL_HOST_ID, STERLING_PORTAL_CONTEXT_ID } from './Portal.constants';
-let { children, conditionalRender = $bindable(true), crossAxisOffset = $bindable(0), mainAxisOffset = $bindable(0), open = $bindable(false), placement = $bindable('top-start'), portalHost, reference, class: _class, ...rest } = $props();
-let popupRef = $state(undefined);
-let popupPosition = $state({ x: 0, y: 0 });
-let floatingUIPlacement = $derived(placement);
-let bodyHeight = $state(0);
-let resizeObserver = undefined;
-const { portalHost: contextPortalHost } = getContext(STERLING_PORTAL_CONTEXT_ID) || {
+<script lang="ts">
+  import {
+    autoUpdate,
+    computePosition,
+    flip,
+    offset,
+    type ComputePositionReturn,
+    type Placement
+  } from '@floating-ui/dom';
+  import { getContext, tick } from 'svelte';
+  import type { HTMLAttributes, KeyboardEventHandler } from 'svelte/elements';
+  import { portal } from './actions/portal';
+  import type { PopoverPlacement } from './Popover.types';
+  import { STERLING_PORTAL_CONTEXT_ID, STERLING_PORTAL_HOST_ID } from './Portal.constants';
+  import type { PortalContext } from './Portal.types';
+
+  // ----- Props ----- //
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    conditionalRender?: boolean;
+    crossAxisOffset?: number;
+    mainAxisOffset?: number;
+    open?: boolean | null;
+    placement?: PopoverPlacement;
+    portalHost?: HTMLElement;
+    reference?: HTMLElement;
+  };
+
+  let {
+    children,
+    conditionalRender = $bindable(true),
+    crossAxisOffset = $bindable(0),
+    mainAxisOffset = $bindable(0),
+    open = $bindable(false),
+    placement = $bindable('top-start'),
+    portalHost,
+    reference,
+    class: _class,
+    ...rest
+  }: Props = $props();
+
+  let popupRef: HTMLDivElement | undefined = $state(undefined);
+  let popupPosition: Partial<ComputePositionReturn> = $state({ x: 0, y: 0 });
+  let floatingUIPlacement = $derived(placement as Placement);
+  let bodyHeight = $state(0);
+  let resizeObserver: ResizeObserver | undefined = undefined;
+
+  const portalContext = getContext<PortalContext>(STERLING_PORTAL_CONTEXT_ID) || {
     portalHost: undefined
-};
-// ----- Portal Host ----- //
-const ensurePortalHost = async () => {
+  };
+
+  // ----- Portal Host ----- //
+
+  const ensurePortalHost = async () => {
     await tick();
+
     // use the host set from context, usually set from a Dialog
-    let host = $contextPortalHost;
+    let host = portalContext.portalHost;
+
     // use or create the sterling portal host
     if (!host && globalThis?.document) {
-        host = globalThis.document.querySelector(`#${STERLING_PORTAL_HOST_ID}`);
-        // fallback to creating the sterling portal host
-        if (!host) {
-            host = globalThis.document.createElement('div');
-            host.id = STERLING_PORTAL_HOST_ID;
-            host.style.overflow = 'visible';
-            globalThis.document.body.append(host);
-        }
+      host = globalThis.document.querySelector(`#${STERLING_PORTAL_HOST_ID}`) as HTMLElement;
+
+      // fallback to creating the sterling portal host
+      if (!host) {
+        host = globalThis.document.createElement('div');
+        host.id = STERLING_PORTAL_HOST_ID;
+        host.style.overflow = 'visible';
+        globalThis.document.body.append(host);
+      }
     }
+
     portalHost = host;
-};
-// ----- Position ----- //
-let middleware = $derived([
+  };
+
+  // ----- Position ----- //
+
+  let middleware = $derived([
     offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }),
     flip()
-]);
-const computePopoverPosition = async () => {
+  ]);
+
+  const computePopoverPosition = async () => {
     if (reference && popupRef) {
-        popupPosition = await computePosition(reference, popupRef, {
-            placement: floatingUIPlacement,
-            middleware
-        });
-    }
-    else {
-        popupPosition = { x: 0, y: 0 };
+      popupPosition = await computePosition(reference, popupRef, {
+        placement: floatingUIPlacement,
+        middleware
+      });
+    } else {
+      popupPosition = { x: 0, y: 0 };
     }
-};
-// whenever a positioned element is portaled it needs resubscription to auto-update
-let cleanupAutoUpdate = () => { };
-const autoUpdatePopoverPosition = () => {
+  };
+
+  // whenever a positioned element is portaled it needs resubscription to auto-update
+  let cleanupAutoUpdate = () => {};
+  const autoUpdatePopoverPosition = () => {
     cleanupAutoUpdate();
     if (reference && popupRef) {
-        cleanupAutoUpdate = autoUpdate(reference, popupRef, computePopoverPosition);
+      cleanupAutoUpdate = autoUpdate(reference, popupRef, computePopoverPosition);
     }
-};
-$effect(() => {
+  };
+
+  $effect(() => {
     autoUpdatePopoverPosition();
     return () => {
-        cleanupAutoUpdate();
-        cleanupAutoUpdate = () => { };
+      cleanupAutoUpdate();
+      cleanupAutoUpdate = () => {};
     };
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     bodyHeight;
     computePopoverPosition();
-});
-// ----- EventHandlers ----- //
-$effect(() => {
+  });
+
+  // ----- EventHandlers ----- //
+  $effect(() => {
     ensurePortalHost();
+
     resizeObserver = new ResizeObserver((entries) => {
-        bodyHeight = entries[0].target.clientHeight;
+      bodyHeight = entries[0].target.clientHeight;
     });
+
     // start observing a DOM node
     resizeObserver.observe(document.body);
+
     return () => {
-        resizeObserver?.unobserve(document.body);
-        resizeObserver?.disconnect();
-        resizeObserver = undefined;
+      resizeObserver?.unobserve(document.body);
+      resizeObserver?.disconnect();
+      resizeObserver = undefined;
     };
-});
-const onKeydown = (event) => {
+  });
+
+  const onKeydown: KeyboardEventHandler<HTMLDivElement> = (event) => {
     if (event.key === 'Escape') {
-        open = false;
+      open = false;
     }
     rest.onkeydown?.(event);
-};
-//TODO: Is this necessary?
-ensurePortalHost();
+  };
+
+  //TODO: Is this necessary?
+  ensurePortalHost();
 </script>
 
 {#if open || !conditionalRender}
@@ -95,7 +149,7 @@ ensurePortalHost();
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       bind:this={popupRef}
-      class={['sterling-popover', _class].filter(Boolean).join(' ')}
+      class={['sterling-popover', _class]}
       class:open
       class:top={popupPosition.placement === 'top'}
       class:top-start={popupPosition.placement === 'top-start'}

package/dist/Popover.svelte.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="svelte" />
-import type { PopoverPlacement } from './Popover.types';
 import type { HTMLAttributes } from 'svelte/elements';
+import type { PopoverPlacement } from './Popover.types';
 type Props = HTMLAttributes<HTMLDivElement> & {
     conditionalRender?: boolean;
     crossAxisOffset?: number;

package/dist/Portal.types.d.ts

@@ -1,6 +1,3 @@
-/// <reference types="svelte" />
-import type { Readable } from 'svelte/store';
 export type PortalContext = {
-    /** The portal host for usePortal */
-    portalHost: Readable<HTMLElement | undefined>;
+    portalHost: HTMLElement | undefined;
 };

package/dist/Progress.svelte

@@ -1,26 +1,51 @@
 <svelte:options runes={true} />
 
-<script lang="ts">let { class: _class, disabled = false, max = 100, percent = $bindable(0), //readonly
-value = $bindable(0), vertical, ...rest } = $props();
-//----- State ----- //
-let clientHeight = $state(0);
-let clientWidth = $state(0);
-let clampMax = $derived(Math.max(1, max));
-let clampValue = $derived(Math.max(0, Math.min(value, clampMax)));
-let ratio = $derived(clampValue / clampMax);
-$effect(() => {
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    max?: number;
+    percent?: number;
+    value?: number;
+    vertical?: boolean | null;
+  };
+
+  let {
+    class: _class,
+    disabled = false,
+    max = 100,
+    percent = $bindable(0), //readonly
+    value = $bindable(0),
+    vertical,
+    ...rest
+  }: Props = $props();
+
+  //----- State ----- //
+
+  let clientHeight: number = $state(0);
+  let clientWidth: number = $state(0);
+
+  let clampMax = $derived(Math.max(1, max));
+  let clampValue = $derived(Math.max(0, Math.min(value, clampMax)));
+  let ratio = $derived(clampValue / clampMax);
+
+  $effect(() => {
     percent = Math.round(ratio * 100);
-});
-let percentHeight = $derived(clientHeight * ratio);
-let percentWidth = $derived(clientWidth * ratio);
-let indicatorStyle = $derived(vertical ? `height: ${percentHeight}px` : `width: ${percentWidth}px`);
-export {};
+  });
+
+  let percentHeight = $derived(clientHeight * ratio);
+  let percentWidth = $derived(clientWidth * ratio);
+
+  let indicatorStyle = $derived(
+    vertical ? `height: ${percentHeight}px` : `width: ${percentWidth}px`
+  );
 </script>
 
 <!-- svelte-ignore a11y_role_supports_aria_props -->
 <div
   aria-orientation={vertical ? 'vertical' : 'horizontal'}
-  class={['sterling-progress', _class].filter(Boolean).join(' ')}
+  class={['sterling-progress', _class]}
   class:disabled
   class:horizontal={!vertical}
   class:vertical

package/dist/Progress.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = HTMLAttributes<HTMLDivElement> & {
     disabled?: boolean | null;

package/dist/Radio.svelte

@@ -1,34 +1,46 @@
 <svelte:options runes={true} />
 
-<script lang="ts">import { idGenerator } from './idGenerator';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-let { id, children, checked = $bindable(false), class: _class, disabled = false, group = $bindable(), ...rest } = $props();
-let inputRef;
-$effect(() => {
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import { usingKeyboard } from './mediaQueries/usingKeyboard';
+
+  const uuid = $props.id();
+
+  type Props = HTMLInputAttributes & {
+    group?: any | null;
+  };
+
+  let {
+    id,
+    children,
+    checked = $bindable(false),
+    class: _class,
+    disabled = false,
+    group = $bindable(),
+    ...rest
+  }: Props = $props();
+
+  let inputRef: HTMLInputElement;
+
+  $effect(() => {
     if (children && id === undefined) {
-        id = idGenerator.nextId('Radio');
+      id = `Radio-${uuid}`;
     }
-});
-// ----- Methods ----- //
-export const blur = () => {
+  });
+
+  // ----- Methods ----- //
+
+  export const blur = () => {
     inputRef?.blur();
-};
-export const click = () => {
+  };
+
+  export const click = () => {
     inputRef?.click();
-};
-export const focus = (options) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
     inputRef?.focus(options);
-};
-// ----- Event Handlers ----- //
-const onChange = (e) => {
-    console.log('onChange', e);
-    // if ((e.currentTarget && e.currentTarget.checked) || (e.target && e.target.checked)) {
-    //   group = value;
-    // }
-};
-$effect(() => {
-    console.log(id, '-checked', checked);
-});
+  };
 </script>
 
 <!--
@@ -36,7 +48,7 @@ $effect(() => {
 	A styled HTML input type=radio element with optional label.
 -->
 <div
-  class={`sterling-radio ${_class}`}
+  class={['sterling-radio', _class]}
   class:checked
   class:disabled
   class:using-keyboard={$usingKeyboard}