@geoffcox/sterling-svelte 2.0.2 → 2.0.3

package/dist/MenuSeparator.svelte

@@ -0,0 +1,11 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = HTMLAttributes<HTMLDivElement>;
+
+  let { class: _class, ...rest }: Props = $props();
+</script>
+
+<div class={['sterling-menu-separator', _class]} role="separator" {...rest}></div>

package/dist/MenuSeparator.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement>;
+declare const MenuSeparator: import("svelte").Component<Props, {}, "">;
+type MenuSeparator = ReturnType<typeof MenuSeparator>;
+export default MenuSeparator;

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.constants.d.ts

@@ -0,0 +1 @@
+export declare const POPOVER_PLACEMENTS: string[];

package/dist/Popover.constants.js

@@ -0,0 +1,14 @@
+export const POPOVER_PLACEMENTS = [
+    'top-start',
+    'top',
+    'top-end',
+    'right-start',
+    'right',
+    'right-end',
+    'bottom-end',
+    'bottom',
+    'bottom-start',
+    'left-end',
+    'left',
+    'left-start'
+];

package/dist/Popover.svelte

@@ -0,0 +1,175 @@
+<svelte:options runes={true} />
+
+<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 () => {
+    await tick();
+
+    // use the host set from context, usually set from a Dialog
+    let host = portalContext.portalHost;
+
+    // use or create the sterling portal host
+    if (!host && globalThis?.document) {
+      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([
+    offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }),
+    flip()
+  ]);
+
+  const computePopoverPosition = async () => {
+    if (reference && popupRef) {
+      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 = () => {
+    cleanupAutoUpdate();
+    if (reference && popupRef) {
+      cleanupAutoUpdate = autoUpdate(reference, popupRef, computePopoverPosition);
+    }
+  };
+
+  $effect(() => {
+    autoUpdatePopoverPosition();
+    return () => {
+      cleanupAutoUpdate();
+      cleanupAutoUpdate = () => {};
+    };
+  });
+
+  $effect(() => {
+    bodyHeight;
+    computePopoverPosition();
+  });
+
+  // ----- EventHandlers ----- //
+  $effect(() => {
+    ensurePortalHost();
+
+    resizeObserver = new ResizeObserver((entries) => {
+      bodyHeight = entries[0].target.clientHeight;
+    });
+
+    // start observing a DOM node
+    resizeObserver.observe(document.body);
+
+    return () => {
+      resizeObserver?.unobserve(document.body);
+      resizeObserver?.disconnect();
+      resizeObserver = undefined;
+    };
+  });
+
+  const onKeydown: KeyboardEventHandler<HTMLDivElement> = (event) => {
+    if (event.key === 'Escape') {
+      open = false;
+    }
+    rest.onkeydown?.(event);
+  };
+
+  //TODO: Is this necessary?
+  ensurePortalHost();
+</script>
+
+{#if open || !conditionalRender}
+  <div use:portal={{ target: portalHost }} class="sterling-popover-portal">
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      bind:this={popupRef}
+      class={['sterling-popover', _class]}
+      class:open
+      class:top={popupPosition.placement === 'top'}
+      class:top-start={popupPosition.placement === 'top-start'}
+      class:top-end={popupPosition.placement === 'top-end'}
+      class:right={popupPosition.placement === 'right'}
+      class:right-start={popupPosition.placement === 'right-start'}
+      class:right-end={popupPosition.placement === 'right-end'}
+      class:bottom={popupPosition.placement === 'bottom'}
+      class:bottom-start={popupPosition.placement === 'bottom-start'}
+      class:bottom-end={popupPosition.placement === 'bottom-end'}
+      class:left={popupPosition.placement === 'left'}
+      class:left-start={popupPosition.placement === 'left-start'}
+      class:left-end={popupPosition.placement === 'left-end'}
+      {...rest}
+      onkeydown={onKeydown}
+      style="left:{popupPosition.x}px; top:{popupPosition.y}px"
+    >
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+  </div>
+{/if}

package/dist/Popover.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { PopoverPlacement } from './Popover.types';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    conditionalRender?: boolean;
+    crossAxisOffset?: number;
+    mainAxisOffset?: number;
+    open?: boolean | null;
+    placement?: PopoverPlacement;
+    portalHost?: HTMLElement;
+    reference?: HTMLElement;
+};
+declare const Popover: import("svelte").Component<Props, {}, "conditionalRender" | "crossAxisOffset" | "mainAxisOffset" | "open" | "placement">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/Popover.types.d.ts

@@ -0,0 +1,4 @@
+import type { POPOVER_PLACEMENTS } from './Popover.constants';
+type PopoverPlacementTuple = typeof POPOVER_PLACEMENTS;
+export type PopoverPlacement = PopoverPlacementTuple[number];
+export {};

package/dist/Popover.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Portal.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const STERLING_PORTAL_HOST_ID = "SterlingPortalHost";
+export declare const STERLING_PORTAL_CONTEXT_ID = "SterlingPortalContext";

package/dist/Portal.constants.js

@@ -0,0 +1,2 @@
+export const STERLING_PORTAL_HOST_ID = 'SterlingPortalHost';
+export const STERLING_PORTAL_CONTEXT_ID = 'SterlingPortalContext';

package/dist/Portal.types.d.ts

@@ -0,0 +1,3 @@
+export type PortalContext = {
+    portalHost: HTMLElement | undefined;
+};

package/dist/Portal.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Progress.constants.d.ts

@@ -0,0 +1 @@
+export declare const PROGRESS_ORIENTATIONS: string[];

package/dist/Progress.constants.js

@@ -0,0 +1 @@
+export const PROGRESS_ORIENTATIONS = ['horizontal', 'vertical'];

package/dist/Progress.svelte

@@ -0,0 +1,61 @@
+<svelte:options runes={true} />
+
+<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`
+  );
+</script>
+
+<!-- svelte-ignore a11y_role_supports_aria_props -->
+<div
+  aria-orientation={vertical ? 'vertical' : 'horizontal'}
+  class={['sterling-progress', _class]}
+  class:disabled
+  class:horizontal={!vertical}
+  class:vertical
+  data-progress-percent={percent}
+  data-progress-max={max}
+  data-progress-value={value}
+  role="progressbar"
+  {...rest}
+>
+  <div class="container" bind:clientWidth bind:clientHeight>
+    <div class="indicator" style={indicatorStyle}></div>
+  </div>
+</div>

package/dist/Progress.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    max?: number;
+    percent?: number;
+    value?: number;
+    vertical?: boolean | null;
+};
+declare const Progress: import("svelte").Component<Props, {}, "value" | "percent">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/Progress.types.d.ts

@@ -0,0 +1,4 @@
+import type { PROGRESS_ORIENTATIONS } from './Progress.constants';
+type ProgressOrientationTuple = typeof PROGRESS_ORIENTATIONS;
+export type ProgressOrientation = ProgressOrientationTuple[number];
+export {};

package/dist/Progress.types.js

@@ -0,0 +1 @@
+export {};