@geoffcox/sterling-svelte 2.0.0 → 2.0.2

package/Slider.svelte

@@ -1,133 +0,0 @@
-<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;
-export const blur = () => {
-    sliderRef?.blur();
-};
-export const click = () => {
-    sliderRef?.click();
-};
-export const focus = (options) => {
-    sliderRef?.focus();
-};
-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;
-    }
-});
-$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));
-        const newValue = min + positionRatio * (max - min);
-        setValue(newValue);
-    }
-};
-// Raise change event when value changes
-$effect(() => {
-    onChange?.(value);
-});
-// ----- Size tracking ----- //
-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) {
-        event.currentTarget.setPointerCapture(event.pointerId);
-        if (vertical) {
-            setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
-        }
-        else {
-            setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
-        }
-    }
-    rest?.onpointerdown?.(event);
-};
-const onPointerMove = (event) => {
-    if (!disabled && event.currentTarget.hasPointerCapture(event.pointerId)) {
-        if (vertical) {
-            setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
-        }
-        else {
-            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) {
-        switch (event.code) {
-            case 'ArrowDown':
-            case 'ArrowLeft':
-                setValue(value - step);
-                event.preventDefault();
-                event.stopPropagation();
-                return;
-            case 'ArrowRight':
-            case 'ArrowUp':
-                setValue(value + step);
-                event.preventDefault();
-                event.stopPropagation();
-                return;
-        }
-    }
-    rest?.onkeydown?.(event);
-};
-</script>
-
-<div
-  aria-disabled={disabled}
-  aria-valuemin={min}
-  aria-valuenow={value}
-  aria-valuemax={max}
-  class={`sterling-slider ${_class}`}
-  class:disabled
-  class:horizontal={!vertical}
-  class:vertical
-  role="slider"
-  tabindex={!disabled ? 0 : undefined}
-  {...rest}
-  onkeydown={onKeyDown}
-  onpointerdown={onPointerDown}
-  onpointermove={onPointerMove}
-  onpointerup={onPointerUp}
->
-  <div
-    class="container"
-    bind:this={sliderRef}
-    bind:clientWidth={sliderWidth}
-    bind:clientHeight={sliderHeight}
-  >
-    <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/Slider.svelte.d.ts

@@ -1,19 +0,0 @@
-/// <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;
-};
-declare const Slider: import("svelte").Component<Props, {
-    blur: () => void;
-    click: () => void;
-    focus: (options?: FocusOptions) => void;
-}, "value">;
-type Slider = ReturnType<typeof Slider>;
-export default Slider;

package/Switch.svelte

@@ -1,61 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">import { idGenerator } from './idGenerator';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-let { checked = $bindable(false), class: _class, disabled, id, offLabel, onLabel, vertical, ...rest } = $props();
-const inputId = id || idGenerator.nextId('Switch');
-let inputRef;
-let switchWidth = $state(0);
-let switchHeight = $state(0);
-let thumbWidth = $state(0);
-let thumbHeight = $state(0);
-let switchSize = $derived(vertical ? switchHeight : switchWidth);
-let thumbSize = $derived(vertical ? thumbHeight : thumbWidth);
-let ratio = $derived(vertical ? (checked ? 0 : 1) : checked ? 1 : 0);
-let valueOffset = $derived((switchSize - thumbSize) * ratio);
-export const blur = () => {
-    inputRef?.blur();
-};
-export const click = () => {
-    inputRef?.click();
-};
-export const focus = (options) => {
-    inputRef?.focus(options);
-};
-</script>
-
-<div
-  class={`sterling-switch ${_class}`}
-  class:checked
-  class:disabled
-  class:vertical
-  class:using-keyboard={$usingKeyboard}
->
-  <input bind:this={inputRef} bind:checked {disabled} id={inputId} type="checkbox" {...rest} />
-  {#if offLabel}
-    <div class="off-label">
-      {#if typeof offLabel === 'string'}
-        {offLabel}
-      {:else}
-        {@render offLabel({ checked, disabled, inputId })}
-      {/if}
-    </div>
-  {/if}
-  <div class="toggle" bind:offsetWidth={switchWidth} bind:offsetHeight={switchHeight}>
-    <div
-      class="thumb"
-      bind:offsetWidth={thumbWidth}
-      bind:offsetHeight={thumbHeight}
-      style={`--thumb-offset: ${valueOffset}px`}
-    ></div>
-  </div>
-  {#if onLabel}
-    <div class="on-label">
-      {#if typeof onLabel === 'string'}
-        {onLabel}
-      {:else}
-        {@render onLabel({ checked, disabled, inputId })}
-      {/if}
-    </div>
-  {/if}
-</div>

package/Switch.svelte.d.ts

@@ -1,21 +0,0 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-import type { Snippet } from 'svelte';
-type LabelSnippet = Snippet<[
-    {
-        checked: boolean | null | undefined;
-        disabled: boolean | null | undefined;
-        inputId: string;
-    }
-]>;
-type Props = HTMLInputAttributes & {
-    offLabel?: string | LabelSnippet;
-    onLabel?: string | LabelSnippet;
-    vertical?: boolean | null | undefined;
-};
-declare const Switch: import("svelte").Component<Props, {
-    blur: () => void;
-    click: () => void;
-    focus: (options?: FocusOptions) => void;
-}, "checked">;
-type Switch = ReturnType<typeof Switch>;
-export default Switch;

package/Tab.svelte

@@ -1,51 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">import { getContext } from 'svelte';
-import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-let { children, class: _class, disabled = false, value, ...rest } = $props();
-let tabRef;
-const tabListContext = getContext(TAB_LIST_CONTEXT_KEY);
-let selected = $state(tabListContext.selectedValue === value);
-let _disabled = $derived(tabListContext.disabled || disabled);
-// Using $derived would be preferred, but this helps avoid
-// updates to every tab when selectedValue changes.
-// let selected = $derived(tabContext.selectedValue === value);
-$effect(() => {
-    if (tabListContext.selectedValue === value && !selected) {
-        selected = true;
-    }
-    else if (tabListContext.selectedValue !== value && selected) {
-        selected = false;
-    }
-});
-export const click = () => {
-    tabRef?.click();
-};
-export const blur = () => {
-    tabRef?.blur();
-};
-export const focus = (options) => {
-    tabRef?.focus(options);
-};
-</script>
-
-<button
-  bind:this={tabRef}
-  aria-selected={selected}
-  class={`sterling-tab ${_class}`}
-  class:selected
-  class:using-keyboard={$usingKeyboard}
-  class:vertical={tabListContext.vertical}
-  data-value={value}
-  disabled={_disabled}
-  role="tab"
-  type="button"
-  tabIndex={selected ? 0 : -1}
-  {...rest}
->
-  <div class="content">
-    {@render children?.()}
-  </div>
-  <div class="indicator"></div>
-</button>

package/Tab.svelte.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="svelte" />
-import type { HTMLButtonAttributes } from 'svelte/elements';
-type Props = HTMLButtonAttributes & {
-    value: string;
-};
-declare const Tab: import("svelte").Component<Props, {
-    click: () => void;
-    blur: () => void;
-    focus: (options?: FocusOptions) => void;
-}, "">;
-type Tab = ReturnType<typeof Tab>;
-export default Tab;

package/TabList.constants.d.ts

@@ -1 +0,0 @@
-export declare const TAB_LIST_CONTEXT_KEY = "sterlingTabList";

package/TabList.constants.js

@@ -1 +0,0 @@
-export const TAB_LIST_CONTEXT_KEY = 'sterlingTabList';

package/TabList.svelte

@@ -1,202 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">import { setContext } from 'svelte';
-import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
-let { children, class: _class, disabled = false, onSelect, selectedValue = $bindable(), vertical = false, ...rest } = $props();
-let tabListRef;
-let lastSelectedTabRef;
-let tabListContext = {
-    get disabled() {
-        return disabled;
-    },
-    set disabled(value) {
-        disabled = value;
-    },
-    get selectedValue() {
-        return selectedValue;
-    },
-    set selectedValue(value) {
-        selectedValue = value;
-    },
-    get vertical() {
-        return vertical;
-    },
-    set vertical(value) {
-        vertical = value;
-    }
-};
-$effect(() => {
-    tabListContext.disabled = disabled;
-});
-$effect(() => {
-    tabListContext.selectedValue = selectedValue;
-});
-$effect(() => {
-    tabListContext.vertical = vertical;
-});
-setContext(TAB_LIST_CONTEXT_KEY, tabListContext);
-$effect(() => {
-    onSelect?.(selectedValue);
-});
-export const blur = () => {
-    tabListRef?.blur();
-};
-export const focus = (options) => {
-    let selectedItem = getSelectedTabElement();
-    if (selectedValue && selectedItem) {
-        selectTab(selectedValue, selectedItem);
-    }
-    else {
-        selectFirstTab();
-    }
-};
-const isElementTab = (candidate) => {
-    return (candidate &&
-        candidate.getAttribute('data-value') !== null &&
-        candidate.getAttribute('data-value') !== undefined &&
-        candidate.getAttribute('role') === 'tab');
-};
-const getSelectedTabElement = () => {
-    if (isElementTab(lastSelectedTabRef) &&
-        lastSelectedTabRef?.getAttribute('data-value') === selectedValue &&
-        lastSelectedTabRef?.closest('[role="tablist"]') === tabListRef) {
-        return lastSelectedTabRef;
-    }
-    else {
-        return tabListRef?.querySelector('[data-value][aria-selected=true]');
-    }
-};
-const selectTab = (value, element) => {
-    selectedValue = value;
-    lastSelectedTabRef = element;
-    element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-    element.focus();
-};
-export const selectFirstTab = () => {
-    let candidate = tabListRef?.firstElementChild;
-    while (candidate && !isElementTab(candidate)) {
-        candidate = candidate.nextElementSibling;
-    }
-    let candidateValue = candidate?.getAttribute('data-value');
-    if (candidateValue && candidate) {
-        selectTab(candidateValue, candidate);
-        return true;
-    }
-    return false;
-};
-export const selectPreviousTab = () => {
-    let selectedTab = getSelectedTabElement();
-    let candidate = selectedTab?.previousElementSibling;
-    while (candidate && !isElementTab(candidate)) {
-        candidate = candidate.previousElementSibling;
-    }
-    let candidateValue = candidate?.getAttribute('data-value');
-    if (candidateValue && candidate) {
-        selectTab(candidateValue, candidate);
-        return true;
-    }
-    return false;
-};
-export const selectNextTab = () => {
-    let selectedTab = getSelectedTabElement();
-    let candidate = selectedTab?.nextElementSibling;
-    while (candidate && !isElementTab(candidate)) {
-        candidate = candidate.nextElementSibling;
-    }
-    let candidateValue = candidate?.getAttribute('data-value');
-    if (candidateValue && candidate) {
-        selectTab(candidateValue, candidate);
-        return true;
-    }
-    return false;
-};
-export const selectLastTab = () => {
-    let candidate = tabListRef?.lastElementChild;
-    while (candidate && !isElementTab(candidate)) {
-        candidate = candidate.previousElementSibling;
-    }
-    let candidateValue = candidate?.getAttribute('data-value');
-    if (candidateValue && candidate) {
-        selectTab(candidateValue, candidate);
-        return true;
-    }
-    return false;
-};
-const onClick = (event) => {
-    if (!disabled) {
-        let candidate = event.target;
-        let candidateValue = candidate?.getAttribute('data-value');
-        if (candidateValue === undefined || candidateValue === null) {
-            candidate = candidate?.closest('[role=tab]');
-            candidateValue = candidate?.getAttribute('data-value');
-        }
-        if (candidateValue && candidate) {
-            selectTab(candidateValue, candidate);
-        }
-    }
-    rest.onclick?.(event);
-};
-const onKeydown = (event) => {
-    // if using arrows, only move when there are no modifier keys
-    if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
-        switch (event.key) {
-            case 'Home':
-                selectFirstTab();
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'End':
-                selectLastTab();
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'ArrowLeft':
-                if (!vertical) {
-                    selectPreviousTab();
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'ArrowRight':
-                if (!vertical) {
-                    selectNextTab();
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'ArrowUp':
-                if (vertical) {
-                    selectPreviousTab();
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'ArrowDown':
-                if (vertical) {
-                    selectNextTab();
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            default:
-                break;
-        }
-    }
-    rest.onkeydown?.(event);
-};
-</script>
-
-<div
-  aria-orientation={vertical ? 'vertical' : 'horizontal'}
-  bind:this={tabListRef}
-  class={`sterling-tab-list ${_class}`}
-  class:disabled
-  class:vertical
-  role="tablist"
-  tabindex="-1"
-  onclick={onClick}
-  onkeydown={onKeydown}
-  {...rest}
->
-  {@render children?.()}
-</div>

package/TabList.svelte.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="svelte" />
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    selectedValue?: string;
-    vertical?: boolean | null;
-    onSelect?: (value?: string) => void;
-};
-declare const TabList: import("svelte").Component<Props, {
-    blur: () => void;
-    focus: (options?: FocusOptions) => void;
-    selectFirstTab: () => boolean;
-    selectPreviousTab: () => boolean;
-    selectNextTab: () => boolean;
-    selectLastTab: () => boolean;
-}, "selectedValue">;
-type TabList = ReturnType<typeof TabList>;
-export default TabList;

package/TabList.types.d.ts

@@ -1,5 +0,0 @@
-export type TabListContext = {
-    disabled?: boolean | null | undefined;
-    selectedValue?: string | undefined;
-    vertical?: boolean | null | undefined;
-};

package/TabList.types.js

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

package/TextArea.constants.d.ts

@@ -1 +0,0 @@
-export declare const TEXT_AREA_RESIZES: readonly ["none", "horizontal", "vertical", "both"];

package/TextArea.constants.js

@@ -1 +0,0 @@
-export const TEXT_AREA_RESIZES = ['none', 'horizontal', 'vertical', 'both'];

package/TextArea.svelte

@@ -1,74 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">import { tick } from 'svelte';
-let { class: _class, disabled = false, value = $bindable(''), autoHeight = false, resize = $bindable('none'), style, ...rest } = $props();
-let textAreaRef;
-const correctResize = async () => {
-    await tick();
-    setTimeout(() => {
-        if (autoHeight) {
-            if (resize === 'both') {
-                console.warn('The resize property cannot be set to "both" when autoHeight is true. The resize property will be set to "horizontal".');
-                resize = 'horizontal';
-            }
-            if (resize === 'vertical') {
-                console.warn('The resize property cannot be set to "vertical" when autoHeight is true. The resize property will be set to "none".');
-                resize = 'none';
-            }
-        }
-    }, 0);
-};
-const autoSetHeight = () => {
-    if (autoHeight && textAreaRef) {
-        // the style must be directly set to avoid re-rendering looping latency
-        // setting to auto for a moment allows the textarea to shrink
-        textAreaRef.style.height = 'auto';
-        textAreaRef.style.height = `${textAreaRef.scrollHeight}px`;
-    }
-};
-$effect(() => {
-    autoHeight;
-    resize;
-    correctResize();
-    autoSetHeight();
-});
-const onInput = (event) => {
-    autoSetHeight();
-    rest.oninput?.(event);
-};
-export const blur = () => {
-    textAreaRef?.blur();
-};
-export const click = () => {
-    textAreaRef?.click();
-};
-export const focus = (options) => {
-    textAreaRef?.focus();
-};
-export const select = () => {
-    textAreaRef?.select();
-};
-export const setSelectionRange = (start, end, direction) => {
-    textAreaRef?.setSelectionRange(start, end, direction);
-};
-export const setRangeText = (replacement, start, end, selectionMode) => {
-    if (start && end) {
-        textAreaRef?.setRangeText(replacement, start, end, selectionMode);
-    }
-    else {
-        textAreaRef?.setRangeText(replacement);
-    }
-};
-</script>
-
-<div class={`sterling-text-area ${_class}`} class:disabled>
-  <textarea
-    bind:this={textAreaRef}
-    bind:value
-    {disabled}
-    rows="1"
-    {...rest}
-    oninput={onInput}
-    style={`--TextArea__resize: ${resize};${style}`}
-  ></textarea>
-</div>

package/TextArea.svelte.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="svelte" />
-import type { TextAreaResize } from './TextArea.types';
-import type { HTMLTextareaAttributes } from 'svelte/elements';
-type Props = HTMLTextareaAttributes & {
-    autoHeight?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
-    value?: string;
-    resize?: TextAreaResize;
-};
-declare const TextArea: import("svelte").Component<Props, {
-    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" | "resize">;
-type TextArea = ReturnType<typeof TextArea>;
-export default TextArea;

package/TextArea.types.d.ts

@@ -1,4 +0,0 @@
-import type { TEXT_AREA_RESIZES } from './TextArea.constants';
-type TextAreaResizeTuple = typeof TEXT_AREA_RESIZES;
-export type TextAreaResize = TextAreaResizeTuple[number];
-export {};

package/TextArea.types.js

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