@geoffcox/sterling-svelte 0.0.20 → 0.0.22

package/Radio.svelte

@@ -1,14 +1,15 @@
 <script>import { onMount } from "svelte";
-import { v4 as uuid } from "uuid";
+import { idGenerator } from "./idGenerator";
 import Label from "./Label.svelte";
 export let checked = false;
 export let disabled = false;
 export let group = void 0;
 export let id = void 0;
 let mounted = false;
+let radioRef;
 $: {
   if ($$slots.default && id === void 0) {
-    id = uuid();
+    id = idGenerator.nextId("Radio");
   }
 }
 $: {
@@ -21,6 +22,15 @@ const onChange = (e) => {
     group = $$restProps.value;
   }
 };
+export const blur = () => {
+  radioRef?.blur();
+};
+export const click = () => {
+  radioRef?.click();
+};
+export const focus = (options) => {
+  radioRef?.focus(options);
+};
 onMount(() => {
   if (checked) {
     group = $$restProps.value;
@@ -36,6 +46,7 @@ onMount(() => {
 <div class="sterling-radio">
   <div class="container">
     <input
+      bind:this={radioRef}
       checked={group === $$restProps.value}
       {disabled}
       {id}
@@ -68,7 +79,9 @@ onMount(() => {
   {#if $$slots.default}
     <div class="label">
       <Label {disabled} for={id}>
-        <slot {checked} {disabled} {group} />
+        <slot {checked} {disabled} {group} inputId={id} value={$$restProps.value}>
+          {$$restProps.value}
+        </slot>
       </Label>
     </div>
   {/if}

package/Radio.svelte.d.ts

@@ -6,6 +6,9 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         group?: any | undefined | null;
         id?: string | undefined;
+        blur?: (() => void) | undefined;
+        click?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -36,6 +39,8 @@ declare const __propDef: {
             checked: boolean;
             disabled: boolean;
             group: any;
+            inputId: string | undefined;
+            value: any;
         };
     };
 };
@@ -44,5 +49,8 @@ export type RadioEvents = typeof __propDef.events;
 export type RadioSlots = typeof __propDef.slots;
 /** A styled HTML input type=radio element with optional label. */
 export default class Radio extends SvelteComponentTyped<RadioProps, RadioEvents, RadioSlots> {
+    get blur(): () => void;
+    get click(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/Select.svelte

@@ -1,9 +1,9 @@
 <script>import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
 import { createEventDispatcher, onMount, tick } from "svelte";
-import { v4 as uuid } from "uuid";
 import { clickOutside } from "./actions/clickOutside";
+import { idGenerator } from "./idGenerator";
 import List from "./List.svelte";
-const popupId = uuid();
+const popupId = idGenerator.nextId("Select-popup");
 export let composed = false;
 export let disabled = false;
 export let open = false;
@@ -47,6 +47,20 @@ $: {
     tick().then(() => selectRef?.focus());
   }
 }
+export const blur = () => {
+  selectRef?.blur();
+};
+export const click = () => {
+  selectRef?.click();
+};
+export const focus = (options) => {
+  selectRef?.focus();
+};
+export const scrollToSelectedItem = () => {
+  if (open) {
+    listRef?.scrollToSelectedItem();
+  }
+};
 let mounted = false;
 onMount(() => {
   mounted = true;
@@ -192,7 +206,7 @@ const onListSelect = (event) => {
     </slot>
   </div>
   <div class="button">
-    <slot name="button" {open}>
+    <slot name="button" {disabled} {open} {selectedValue}>
       <div class="chevron" />
     </slot>
   </div>

package/Select.svelte.d.ts

@@ -6,6 +6,10 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         open?: boolean | undefined;
         selectedValue?: string | undefined;
+        blur?: (() => void) | undefined;
+        click?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
+        scrollToSelectedItem?: (() => void) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -40,7 +44,9 @@ declare const __propDef: {
             selectedValue: string | undefined;
         };
         button: {
+            disabled: boolean;
             open: boolean;
+            selectedValue: string | undefined;
         };
         default: {};
     };
@@ -49,5 +55,9 @@ export type SelectProps = typeof __propDef.props;
 export type SelectEvents = typeof __propDef.events;
 export type SelectSlots = typeof __propDef.slots;
 export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
+    get blur(): () => void;
+    get click(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
+    get scrollToSelectedItem(): () => void;
 }
 export {};

package/Slider.svelte

@@ -9,6 +9,15 @@ export let step = void 0;
 export let value = 0;
 export let vertical = false;
 let sliderRef;
+export const blur = () => {
+  sliderRef?.blur();
+};
+export const click = () => {
+  sliderRef?.click();
+};
+export const focus = (options) => {
+  sliderRef?.focus();
+};
 const dispatch = createEventDispatcher();
 const raiseChange = (newValue) => {
   dispatch("change", { value: newValue });

package/Slider.svelte.d.ts

@@ -10,6 +10,9 @@ declare const __propDef: {
         step?: number | undefined;
         value?: number | undefined;
         vertical?: boolean | undefined;
+        blur?: (() => void) | undefined;
+        click?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -48,5 +51,8 @@ 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 SvelteComponentTyped<SliderProps, SliderEvents, SliderSlots> {
+    get blur(): () => void;
+    get click(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/Switch.svelte

@@ -1,11 +1,12 @@
-<script>import { v4 as uuid } from "uuid";
-import Label from "./Label.svelte";
+<script>import Label from "./Label.svelte";
+import { idGenerator } from "./idGenerator";
 export let checked = false;
 export let disabled = false;
 export let vertical = false;
 export let onText = void 0;
 export let offText = void 0;
-const inputId = uuid();
+const inputId = idGenerator.nextId("Switch");
+let inputRef;
 let switchWidth = 0;
 let switchHeight = 0;
 let thumbWidth = 0;
@@ -22,6 +23,15 @@ $:
   hasOffLabel = $$slots.offLabel || offText !== void 0 && offText.length > 0;
 $:
   hasOnLabel = $$slots.onLabel || onText !== void 0 && onText.length > 0;
+export const blur = () => {
+  inputRef?.blur();
+};
+export const click = () => {
+  inputRef?.click();
+};
+export const focus = (options) => {
+  inputRef?.focus(options);
+};
 </script>
 
 <!--
@@ -30,6 +40,7 @@ $:
 -->
 <div class="sterling-switch" class:vertical class:disabled>
   <input
+    bind:this={inputRef}
     bind:checked
     {disabled}
     id={inputId}

package/Switch.svelte.d.ts

@@ -7,6 +7,9 @@ declare const __propDef: {
         vertical?: boolean | undefined;
         onText?: string | undefined;
         offText?: string | undefined;
+        blur?: (() => void) | undefined;
+        click?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -54,5 +57,8 @@ export type SwitchEvents = typeof __propDef.events;
 export type SwitchSlots = typeof __propDef.slots;
 /** A styled HTML input type=checkbox element. */
 export default class Switch extends SvelteComponentTyped<SwitchProps, SwitchEvents, SwitchSlots> {
+    get blur(): () => void;
+    get click(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/Tab.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext } from "svelte";
-import { tabListContextKey } from "./TabList.constants";
+import { TAB_LIST_CONTEXT_KEY } from "./TabList.constants";
 export let disabled = false;
 export let selected = false;
 export let text = void 0;
@@ -10,7 +10,7 @@ const {
   selectedValue,
   usingKeyboard,
   vertical
-} = getContext(tabListContextKey);
+} = getContext(TAB_LIST_CONTEXT_KEY);
 $:
   _disabled = $tabListDisabled || disabled;
 $: {
@@ -21,6 +21,15 @@ $: {
     selectedValue.set(value);
   }
 }
+export const click = () => {
+  tabRef?.click();
+};
+export const blur = () => {
+  tabRef?.blur();
+};
+export const focus = (options) => {
+  tabRef?.focus(options);
+};
 </script>
 
 <button

package/Tab.svelte.d.ts

@@ -5,6 +5,9 @@ declare const __propDef: {
         selected?: boolean | undefined;
         text?: string | undefined;
         value: string;
+        click?: (() => void) | undefined;
+        blur?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -48,5 +51,8 @@ export type TabProps = typeof __propDef.props;
 export type TabEvents = typeof __propDef.events;
 export type TabSlots = typeof __propDef.slots;
 export default class Tab extends SvelteComponentTyped<TabProps, TabEvents, TabSlots> {
+    get click(): () => void;
+    get blur(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/TabList.constants.d.ts

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

package/TabList.constants.js

@@ -1 +1 @@
-export const tabListContextKey = 'sterlingTabList';
+export const TAB_LIST_CONTEXT_KEY = 'sterlingTabList';

package/TabList.svelte

@@ -1,7 +1,7 @@
 <script>import { createKeyborg } from "keyborg";
 import { createEventDispatcher, onMount, setContext } from "svelte";
 import { writable } from "svelte/store";
-import { tabListContextKey } from "./TabList.constants";
+import { TAB_LIST_CONTEXT_KEY } from "./TabList.constants";
 export let disabled = false;
 export let vertical = false;
 export let selectedValue = void 0;
@@ -34,6 +34,12 @@ const raiseSelect = (value) => {
 $: {
   raiseSelect(selectedValue);
 }
+export const blur = () => {
+  tabListRef?.blur();
+};
+export const focus = (options) => {
+  tabListRef?.focus(options);
+};
 const isElementTab = (candidate) => {
   return candidate && candidate.getAttribute("data-value") !== null && candidate.getAttribute("data-value") !== void 0 && candidate.getAttribute("role") === "tab";
 };
@@ -166,7 +172,7 @@ const onKeydown = (event) => {
     }
   }
 };
-setContext(tabListContextKey, {
+setContext(TAB_LIST_CONTEXT_KEY, {
   disabled: disabledStore,
   selectedValue: selectedValueStore,
   usingKeyboard: usingKeyboardStore,

package/TabList.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         vertical?: boolean | undefined;
         selectedValue?: string | undefined;
+        blur?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
         selectFirstTab?: (() => boolean) | undefined;
         selectPreviousTab?: (() => boolean) | undefined;
         selectNextTab?: (() => boolean) | undefined;
@@ -48,6 +50,8 @@ export type TabListProps = typeof __propDef.props;
 export type TabListEvents = typeof __propDef.events;
 export type TabListSlots = typeof __propDef.slots;
 export default class TabList extends SvelteComponentTyped<TabListProps, TabListEvents, TabListSlots> {
+    get blur(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
     get selectFirstTab(): () => boolean;
     get selectPreviousTab(): () => boolean;
     get selectNextTab(): () => boolean;

package/TextArea.constants.d.ts

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

package/TextArea.constants.js

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

package/TextArea.svelte

@@ -13,6 +13,28 @@ const onInput = () => {
 };
 $:
   autoHeight, autoSetHeight();
+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>
 
 <textarea

package/TextArea.svelte.d.ts

@@ -1,11 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
-import type { TextAreaResize } from './TextArea.types';
 declare const __propDef: {
     props: {
         [x: string]: any;
         autoHeight?: boolean | undefined;
-        resize?: TextAreaResize | undefined;
+        resize?: "none" | "horizontal" | "vertical" | "both" | undefined;
         value: string;
+        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: {
         blur: FocusEvent;
@@ -43,5 +48,11 @@ export type TextAreaProps = typeof __propDef.props;
 export type TextAreaEvents = typeof __propDef.events;
 export type TextAreaSlots = typeof __propDef.slots;
 export default class TextArea extends SvelteComponentTyped<TextAreaProps, TextAreaEvents, TextAreaSlots> {
+    get blur(): () => void;
+    get click(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
+    get select(): () => void;
+    get setSelectionRange(): (start: number | null, end: number | null, direction?: "none" | "forward" | "backward" | undefined) => void;
+    get setRangeText(): (replacement: string, start?: number | undefined, end?: number | undefined, selectionMode?: SelectionMode | undefined) => void;
 }
 export {};

package/TextArea.types.d.ts

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

package/Tooltip.constants.d.ts

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

package/Tooltip.constants.js

@@ -0,0 +1 @@
+export const TOOLTIP_SHOW_ONS = ['hover', 'click'];

package/Tooltip.svelte

@@ -2,17 +2,18 @@
 import { arrow, autoUpdate, computePosition, flip, offset } from "@floating-ui/dom";
 import { onMount } from "svelte";
 import { fade } from "svelte/transition";
-export let autoShow = void 0;
+export let disabled = false;
+export let showOn = void 0;
 export let hoverDelayMilliseconds = 1e3;
 export let open = false;
 export let placement = "top";
 export let portalTarget = void 0;
-let anchorRef;
+let originRef;
 let tooltipRef;
 let arrowRef;
 let position = void 0;
 $:
-  reference = $$slots.default ? anchorRef?.previousElementSibling : void 0;
+  reference = $$slots.default ? originRef?.previousElementSibling : void 0;
 const computeTooltipPosition = async () => {
   if (reference && tooltipRef && arrowRef) {
     const floatingOffset = Math.sqrt(2 * arrowRef.offsetWidth ** 2) / 2;
@@ -84,14 +85,29 @@ const getArrowOffsetStyle = (position2) => {
 };
 $:
   arrowStyle = getArrowPlacementStyle(position) + getArrowOffsetStyle(position);
-const show = () => open = true;
+const show = () => {
+  if (!disabled) {
+    open = true;
+  }
+};
 const hide = () => open = false;
-const toggle = () => open = !open;
+const toggle = () => {
+  if (!disabled) {
+    open = !open;
+  } else {
+    open = false;
+  }
+};
 const delayShow = () => {
   hoverDelayMilliseconds === 0 ? show() : setTimeout(() => {
     show();
   }, hoverDelayMilliseconds);
 };
+$: {
+  if (disabled) {
+    hide();
+  }
+}
 let cleanupAutoShowUpdate = () => {
 };
 const autoShowUpdate = () => {
@@ -100,7 +116,7 @@ const autoShowUpdate = () => {
   };
   const element = reference;
   if (element) {
-    switch (autoShow) {
+    switch (showOn) {
       case "click":
         element.addEventListener("click", toggle);
         cleanupAutoShowUpdate = () => element.removeEventListener("click", toggle);
@@ -116,7 +132,7 @@ const autoShowUpdate = () => {
   }
 };
 $:
-  reference, autoShow, autoShowUpdate();
+  reference, showOn, autoShowUpdate();
 let mounted = false;
 onMount(() => {
   mounted = true;
@@ -127,8 +143,8 @@ onMount(() => {
 });
 </script>
 
-<slot />
-<div class="sterling-tooltip-anchor" bind:this={anchorRef} />
+<slot {disabled} {open} />
+<div class="sterling-tooltip-origin" bind:this={originRef} />
 
 {#if open}
   <div
@@ -144,7 +160,7 @@ onMount(() => {
 {/if}
 
 <style>
-  .sterling-tooltip-anchor {
+  .sterling-tooltip-origin {
     display: none;
     width: 0;
     height: 0;

package/Tooltip.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { TooltipAutoShow } from './Tooltip.types';
+import type { TooltipShowOn } from './Tooltip.types';
 declare const __propDef: {
     props: {
-        autoShow?: TooltipAutoShow | undefined;
+        disabled?: boolean | undefined;
+        showOn?: TooltipShowOn | undefined;
         hoverDelayMilliseconds?: number | undefined;
         open?: boolean | undefined;
         placement?: import("@floating-ui/core").Placement | undefined;
@@ -12,7 +13,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            disabled: boolean;
+            open: boolean;
+        };
         tip: {};
     };
 };

package/Tooltip.types.d.ts

@@ -1,3 +1,4 @@
-import type { Placement } from '@floating-ui/dom';
-export type TooltipAutoShow = 'hover' | 'click';
-export type TooltipPlacement = Placement;
+import type { TOOLTIP_SHOW_ONS } from './Tooltip.constants';
+type TooltipShowOnTuple = typeof TOOLTIP_SHOW_ONS;
+export type TooltipShowOn = TooltipShowOnTuple[number];
+export {};

package/Tree.constants.d.ts

@@ -1,2 +1,2 @@
-export declare const treeContextKey = "sterlingTree";
-export declare const treeItemContextKey = "sterlingTreeItem";
+export declare const TREE_CONTEXT_KEY = "sterlingTree";
+export declare const TREE_ITEM_CONTEXT_KEY = "sterlingTreeItem";

package/Tree.constants.js

@@ -1,2 +1,2 @@
-export const treeContextKey = 'sterlingTree';
-export const treeItemContextKey = 'sterlingTreeItem';
+export const TREE_CONTEXT_KEY = 'sterlingTree';
+export const TREE_ITEM_CONTEXT_KEY = 'sterlingTreeItem';

package/Tree.svelte

@@ -1,19 +1,21 @@
 <script>import { createKeyborg } from "keyborg";
 import { createEventDispatcher, onMount, setContext } from "svelte";
 import { writable } from "svelte/store";
-import { treeContextKey } from "./Tree.constants";
+import { TREE_CONTEXT_KEY } from "./Tree.constants";
 export let composed = false;
 export let disabled = false;
 export let selectedValue = void 0;
 export let expandedValues = [];
+let treeRef;
 const selectedValueStore = writable(selectedValue);
 const expandedValuesStore = writable(expandedValues);
 const disabledStore = writable(disabled);
-setContext(treeContextKey, {
-  expandedValues: expandedValuesStore,
-  selectedValue: selectedValueStore,
-  disabled: disabledStore
-});
+export const blur = () => {
+  treeRef?.blur();
+};
+export const focus = (options) => {
+  treeRef?.focus(options);
+};
 const dispatch = createEventDispatcher();
 const raiseExpandCollapse = (expandedValues2) => {
   dispatch("expandCollapse", { expandedValues: expandedValues2 });
@@ -49,18 +51,50 @@ onMount(() => {
     keyborg.unsubscribe(keyborgHandler);
   };
 });
+setContext(TREE_CONTEXT_KEY, {
+  expandedValues: expandedValuesStore,
+  selectedValue: selectedValueStore,
+  disabled: disabledStore
+});
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div
+  bind:this={treeRef}
   aria-disabled={disabled}
   class="sterling-tree"
   class:composed
   class:disabled
   class:using-keyboard={usingKeyboard}
   role="tree"
+  on:blur
+  on:click
+  on:dblclick
+  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:pointercancel
+  on:pointerdown
+  on:pointerenter
+  on:pointerleave
+  on:pointermove
+  on:pointerover
+  on:pointerout
+  on:pointerup
+  on:wheel
+  {...$$restProps}
 >
-  <slot />
+  <slot {composed} {disabled} />
 </div>
 
 <style>