@geoffcox/sterling-svelte 0.0.20 → 0.0.22

package/Tree.svelte.d.ts

@@ -1,24 +1,57 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         composed?: boolean | undefined;
         disabled?: boolean | undefined;
         selectedValue?: string | undefined;
         expandedValues?: string[] | undefined;
+        blur?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        dblclick: MouseEvent;
+        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;
         expandCollapse: CustomEvent<any>;
         select: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            composed: boolean;
+            disabled: boolean;
+        };
     };
 };
 export type TreeProps = typeof __propDef.props;
 export type TreeEvents = typeof __propDef.events;
 export type TreeSlots = typeof __propDef.slots;
 export default class Tree extends SvelteComponentTyped<TreeProps, TreeEvents, TreeSlots> {
+    get blur(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/Tree.types.d.ts

@@ -3,26 +3,14 @@ import type { Readable, Writable } from 'svelte/store';
  * Context for a Tree and its tree items.
  */
 export type TreeContext = {
+    /** If the tree is disabled */
+    disabled: Readable<boolean>;
     /**
-     * The IDs of the expanded ttree tree items.
+     * The values of the expanded tree tree items.
      */
     expandedValues: Writable<string[]>;
     /**
-     * The ID of the selected tree tree item.
+     * The value of the selected tree item.
      */
     selectedValue: Writable<string | undefined>;
-    /** If the tree is disabled */
-    disabled: Readable<boolean>;
-};
-/**
- * The context for a tree item.
- */
-export type TreeItemContext = {
-    /**
-     * How many levels deep this tree item is in the tree hierarchy.
-     * A top level item's depth is zero.
-     */
-    depth: number;
-    /** If the tree item is disabled */
-    disabled: Readable<boolean>;
 };

package/TreeChevron.svelte

@@ -6,7 +6,7 @@ let mounted = false;
 onMount(() => {
   setTimeout(() => {
     mounted = true;
-  }, 10);
+  }, 0);
 });
 let animate = false;
 $: {
@@ -17,7 +17,38 @@ $: {
 }
 </script>
 
-<div class="tree-chevron" class:leaf={!hasChildren} class:animate class:expanded />
+<div
+  class="tree-chevron"
+  class:leaf={!hasChildren}
+  class:animate
+  class:expanded
+  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}
+/>
 
 <style>
   .tree-chevron {

package/TreeChevron.svelte.d.ts

@@ -1,10 +1,37 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         expanded?: boolean | undefined;
         hasChildren?: boolean | undefined;
     };
     events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        dblclick: MouseEvent;
+        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;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/TreeItem.svelte

@@ -1,6 +1,6 @@
 <script>import { getContext, setContext } from "svelte";
 import { slide } from "svelte/transition";
-import { treeContextKey, treeItemContextKey } from "./Tree.constants";
+import { TREE_CONTEXT_KEY, TREE_ITEM_CONTEXT_KEY } from "./Tree.constants";
 import TreeItemDisplay from "./TreeItemDisplay.svelte";
 import { writable } from "svelte/store";
 export let disabled = false;
@@ -9,8 +9,8 @@ const {
   expandedValues,
   selectedValue,
   disabled: treeDisabled
-} = getContext(treeContextKey);
-const { depth = 0, disabled: parentDisabled } = getContext(treeItemContextKey) || {};
+} = getContext(TREE_CONTEXT_KEY);
+const { depth = 0, disabled: parentDisabled } = getContext(TREE_ITEM_CONTEXT_KEY) || {};
 let treeItemRef;
 $:
   hasChildren = $$slots.default;
@@ -26,7 +26,7 @@ $: {
 }
 const collapseItem = (index) => {
   if (!disabled) {
-    index = index ?? $expandedValues.findIndex((id) => id === value);
+    index = index ?? $expandedValues.findIndex((expandedValue) => expandedValue === value);
     if (index !== -1) {
       expandedValues.set([
         ...$expandedValues.slice(0, index),
@@ -37,9 +37,10 @@ const collapseItem = (index) => {
   }
   return false;
 };
+export const collapse = () => collapseItem();
 const expandItem = (index) => {
   if (!disabled) {
-    index = index ?? $expandedValues.findIndex((id) => id === value);
+    index = index ?? $expandedValues.findIndex((expandedValue) => expandedValue === value);
     if (index === -1) {
       expandedValues.set([...$expandedValues, value]);
       return true;
@@ -47,42 +48,93 @@ const expandItem = (index) => {
   }
   return false;
 };
-const toggleExpanded = () => {
+export const expand = () => expandItem();
+export const toggleExpanded = () => {
   if (!disabled) {
-    const index = $expandedValues.findIndex((id) => id === value);
+    const index = $expandedValues.findIndex((expandedValue) => expandedValue === value);
     return index !== -1 ? collapseItem(index) : expandItem(index);
   }
   return false;
 };
-const focusItem = (treeItemElement) => {
+const blurItem = (treeItemElement) => {
   if (!_disabled) {
-    const item = treeItemElement.querySelector(".item");
-    item?.focus();
+    const item = treeItemElement?.querySelector(".item");
+    item?.blur();
   }
 };
-const selectItemById = (value2) => {
+export const blur = () => {
+  blurItem(treeItemRef);
+};
+const focusItem = (treeItemElement, options) => {
+  if (!_disabled) {
+    const item = treeItemElement?.querySelector(".item");
+    item?.focus(options);
+  }
+};
+export const focus = (options) => {
+  focusItem(treeItemRef);
+  treeItemRef?.focus(options);
+};
+const clickItem = (treeItemElement) => {
+  if (!_disabled) {
+    const item = treeItemElement?.querySelector(".item");
+    item?.click();
+  }
+};
+export const click = () => {
+  clickItem(treeItemRef);
+};
+const selectItemByValue = (value2) => {
   if (!_disabled) {
     selectedValue.set(value2);
   }
 };
-export const selectItem = () => {
+export const select = () => {
   if (!_disabled) {
-    selectItemById(value);
+    selectItemByValue(value);
   }
 };
-const selectParentItem = () => {
+export const selectParent = () => {
   if (!_disabled) {
     let candidate = treeItemRef.parentElement?.closest('[role="treeitem"][data-value]');
     let candidateValue = candidate?.getAttribute("data-value");
     if (candidateValue && candidate) {
-      selectItemById(candidateValue);
+      selectItemByValue(candidateValue);
       focusItem(candidate);
       return true;
     }
   }
   return false;
 };
-const selectNextItem = () => {
+export const selectPrevious = () => {
+  if (!_disabled) {
+    let candidate = void 0;
+    let candidateValue = void 0;
+    const previousSibling = treeItemRef?.previousElementSibling;
+    if (previousSibling) {
+      const decendants = previousSibling.querySelectorAll('[role="treeitem"][data-value]');
+      if (decendants) {
+        candidate = decendants[decendants.length - 1];
+        candidateValue = candidate?.getAttribute("data-value");
+      }
+      if (!candidateValue) {
+        candidate = previousSibling;
+        candidateValue = candidate?.getAttribute("data-value");
+      }
+    }
+    if (!candidateValue) {
+      candidate = treeItemRef.parentElement?.closest('[role="treeitem"][data-value]');
+      candidateValue = candidate?.getAttribute("data-value");
+    }
+    if (candidateValue && candidate) {
+      selectItemByValue(candidateValue);
+      focusItem(candidate);
+      return true;
+    }
+  }
+  return false;
+};
+export const selectNext = () => {
   if (!_disabled) {
     let candidateValue = void 0;
     let candidate = treeItemRef.querySelector('[role="treeitem"][data-value]');
@@ -105,35 +157,7 @@ const selectNextItem = () => {
       }
     }
     if (candidateValue && candidate) {
-      selectItemById(candidateValue);
-      focusItem(candidate);
-      return true;
-    }
-  }
-  return false;
-};
-const selectPreviousItem = () => {
-  if (!_disabled) {
-    let candidate = void 0;
-    let candidateValue = void 0;
-    const previousSibling = treeItemRef?.previousElementSibling;
-    if (previousSibling) {
-      const decendants = previousSibling.querySelectorAll('[role="treeitem"][data-value]');
-      if (decendants) {
-        candidate = decendants[decendants.length - 1];
-        candidateValue = candidate?.getAttribute("data-value");
-      }
-      if (!candidateValue) {
-        candidate = previousSibling;
-        candidateValue = candidate?.getAttribute("data-value");
-      }
-    }
-    if (!candidateValue) {
-      candidate = treeItemRef.parentElement?.closest('[role="treeitem"][data-value]');
-      candidateValue = candidate?.getAttribute("data-value");
-    }
-    if (candidateValue && candidate) {
-      selectItemById(candidateValue);
+      selectItemByValue(candidateValue);
       focusItem(candidate);
       return true;
     }
@@ -143,7 +167,7 @@ const selectPreviousItem = () => {
 const onClick = () => {
   if (!_disabled) {
     toggleExpanded();
-    selectItem();
+    select();
   }
 };
 const onKeydown = (event) => {
@@ -160,7 +184,7 @@ const onKeydown = (event) => {
       case "ArrowRight":
         if (hasChildren) {
           if (expanded) {
-            if (selectNextItem()) {
+            if (selectNext()) {
               event.preventDefault();
               event.stopPropagation();
               return false;
@@ -179,21 +203,21 @@ const onKeydown = (event) => {
             event.stopPropagation();
             return false;
           }
-        } else if (selectParentItem()) {
+        } else if (selectParent()) {
           event.preventDefault();
           event.stopPropagation();
           return false;
         }
         break;
       case "ArrowUp":
-        if (selectPreviousItem()) {
+        if (selectPrevious()) {
           event.preventDefault();
           event.stopPropagation();
           return false;
         }
         break;
       case "ArrowDown":
-        if (selectNextItem()) {
+        if (selectNext()) {
           event.preventDefault();
           event.stopPropagation();
           return false;
@@ -202,7 +226,7 @@ const onKeydown = (event) => {
     }
   }
 };
-setContext(treeItemContextKey, { depth: depth + 1, disabled: disabledStore });
+setContext(TREE_ITEM_CONTEXT_KEY, { depth: depth + 1, disabled: disabledStore });
 </script>
 
 <!--
@@ -264,7 +288,7 @@ A item in a Tree displaying the item and children.
   </div>
   {#if expanded && hasChildren}
     <div class="children" transition:slide={{ duration: 200 }} role="group">
-      <slot />
+      <slot {depth} {disabled} {selected} {value} />
     </div>
   {/if}
 </div>

package/TreeItem.svelte.d.ts

@@ -4,7 +4,16 @@ declare const __propDef: {
         [x: string]: any;
         disabled?: boolean | undefined;
         value: string;
-        selectItem?: (() => void) | undefined;
+        collapse?: (() => boolean) | undefined;
+        expand?: (() => boolean) | undefined;
+        toggleExpanded?: (() => boolean) | undefined;
+        blur?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
+        click?: (() => void) | undefined;
+        select?: (() => void) | undefined;
+        selectParent?: (() => boolean) | undefined;
+        selectPrevious?: (() => boolean) | undefined;
+        selectNext?: (() => boolean) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -52,7 +61,12 @@ declare const __propDef: {
             selected: boolean;
             value: string;
         };
-        default: {};
+        default: {
+            depth: number;
+            disabled: boolean;
+            selected: boolean;
+            value: string;
+        };
     };
 };
 export type TreeItemProps = typeof __propDef.props;
@@ -60,6 +74,15 @@ export type TreeItemEvents = typeof __propDef.events;
 export type TreeItemSlots = typeof __propDef.slots;
 /** A item in a Tree displaying the item and children. */
 export default class TreeItem extends SvelteComponentTyped<TreeItemProps, TreeItemEvents, TreeItemSlots> {
-    get selectItem(): () => void;
+    get collapse(): () => boolean;
+    get expand(): () => boolean;
+    get toggleExpanded(): () => boolean;
+    get blur(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
+    get click(): () => void;
+    get select(): () => void;
+    get selectParent(): () => boolean;
+    get selectPrevious(): () => boolean;
+    get selectNext(): () => boolean;
 }
 export {};

package/TreeItem.types.d.ts

@@ -0,0 +1,13 @@
+import type { Readable } from 'svelte/store';
+/**
+ * The context for a tree item.
+ */
+export type TreeItemContext = {
+    /**
+     * How many levels deep this tree item is in the tree hierarchy.
+     * A top level item's depth is zero.
+     */
+    depth: number;
+    /** If the tree item is disabled */
+    disabled: Readable<boolean>;
+};

package/TreeItem.types.js

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

package/TreeItemDisplay.svelte

@@ -5,9 +5,20 @@ export let expanded = false;
 export let hasChildren = false;
 export let value;
 export let selected = false;
+let divRef;
+export const click = () => {
+  divRef?.click();
+};
+export const blur = () => {
+  divRef?.blur();
+};
+export const focus = (options) => {
+  divRef?.focus(options);
+};
 </script>
 
 <div
+  bind:this={divRef}
   class="sterling-tree-item"
   class:disabled
   class:expanded
@@ -74,6 +85,7 @@ export let selected = false;
   }
 
   .sterling-tree-item.disabled {
+    background-color: var(--stsv-Input__background-color--disabled);
     color: var(--stsv-Common__color--disabled);
     cursor: not-allowed;
   }

package/TreeItemDisplay.svelte.d.ts

@@ -8,6 +8,9 @@ declare const __propDef: {
         hasChildren?: boolean | undefined;
         value: string;
         selected?: boolean | undefined;
+        click?: (() => void) | undefined;
+        blur?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -53,5 +56,8 @@ export type TreeItemDisplayProps = typeof __propDef.props;
 export type TreeItemDisplayEvents = typeof __propDef.events;
 export type TreeItemDisplaySlots = typeof __propDef.slots;
 export default class TreeItemDisplay extends SvelteComponentTyped<TreeItemDisplayProps, TreeItemDisplayEvents, TreeItemDisplaySlots> {
+    get click(): () => void;
+    get blur(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/floating-ui.constants.d.ts

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

package/floating-ui.constants.js

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

package/floating-ui.types.d.ts

@@ -0,0 +1,2 @@
+import type { Placement } from '@floating-ui/dom';
+export type FloatingPlacement = Placement;

package/floating-ui.types.js

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

package/idGenerator.d.ts

@@ -0,0 +1,4 @@
+export declare const idGenerator: {
+    next: () => number;
+    nextId: (prefix?: string) => string;
+};

package/idGenerator.js

@@ -0,0 +1,10 @@
+let id = 0;
+const next = () => {
+    return ++id;
+};
+export const idGenerator = {
+    next,
+    nextId: (prefix) => {
+        return prefix ? `${prefix}-${next()}` : `${next()}`;
+    }
+};

package/index.d.ts

@@ -1,6 +1,7 @@
 export { clickOutside } from './actions/clickOutside';
 export { forwardEvents } from './actions/forwardEvents';
 export { portal } from './actions/portal';
+export { idGenerator } from './idGenerator';
 export { type Theme, type ThemeActionParams } from './theme/types';
 export { applyDarkTheme } from './theme/applyDarkTheme';
 export { applyLightTheme } from './theme/applyLightTheme';
@@ -9,20 +10,31 @@ export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
 export { neutralColors, lightStatusColors, darkStatusColors } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
-export { menuBarContextKey, menuItemContextKey } from './Menus.constants';
 export type { ButtonVariant, ButtonShape } from './Button.types';
 export type { FieldStatus } from './Field.types';
+export type { FloatingPlacement } from './floating-ui.types';
 export type { LinkVariant } from './Link.types';
 export type { ListContext } from './List.types';
-export type { MenuBarContext, MenuItemContext, MenuItemRegistration } from './Menus.types';
+export type { MenuBarContext } from './MenuBar.types';
+export type { MenuItemContext, MenuItemRegistration } from './MenuItem.types';
 export type { ProgressColorful } from './Progress.types';
 export type { TabListContext } from './TabList.types';
 export type { TextAreaResize } from './TextArea.types';
-export type { TooltipAutoShow, TooltipPlacement } from './Tooltip.types';
-export type { TreeContext, TreeItemContext } from './Tree.types';
-export { listContextKey } from './List.constants';
-export { tabListContextKey } from './TabList.constants';
-export { treeContextKey, treeItemContextKey } from './Tree.constants';
+export type { TooltipShowOn } from './Tooltip.types';
+export type { TreeContext } from './Tree.types';
+export type { TreeItemContext } from './TreeItem.types';
+export { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
+export { FIELD_STATUSES } from './Field.constants';
+export { FLOATING_PLACEMENTS } from './floating-ui.constants';
+export { LINK_VARIANTS } from './Link.constants';
+export { LIST_CONTEXT_KEY } from './List.constants';
+export { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
+export { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
+export { PROGRESS_COLORFULS } from './Progress.constants';
+export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
+export { TEXT_AREA_RESIZES } from './TextArea.constants';
+export { TOOLTIP_SHOW_ONS } from './Tooltip.constants';
+export { TREE_CONTEXT_KEY as treeContextKey, TREE_ITEM_CONTEXT_KEY as treeItemContextKey } from './Tree.constants';
 import Button from './Button.svelte';
 import Checkbox from './Checkbox.svelte';
 import Dialog from './Dialog.svelte';

package/index.js

@@ -2,6 +2,8 @@
 export { clickOutside } from './actions/clickOutside';
 export { forwardEvents } from './actions/forwardEvents';
 export { portal } from './actions/portal';
+// ----- functions ----- //
+export { idGenerator } from './idGenerator';
 // ----- theme ----- //
 export {} from './theme/types';
 export { applyDarkTheme } from './theme/applyDarkTheme';
@@ -11,12 +13,19 @@ export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
 export { neutralColors, lightStatusColors, darkStatusColors } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
-// ----- Button ----- //
-export { menuBarContextKey, menuItemContextKey } from './Menus.constants';
 // ----- Component constants ----- //
-export { listContextKey } from './List.constants';
-export { tabListContextKey } from './TabList.constants';
-export { treeContextKey, treeItemContextKey } from './Tree.constants';
+export { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
+export { FIELD_STATUSES } from './Field.constants';
+export { FLOATING_PLACEMENTS } from './floating-ui.constants';
+export { LINK_VARIANTS } from './Link.constants';
+export { LIST_CONTEXT_KEY } from './List.constants';
+export { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
+export { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
+export { PROGRESS_COLORFULS } from './Progress.constants';
+export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
+export { TEXT_AREA_RESIZES } from './TextArea.constants';
+export { TOOLTIP_SHOW_ONS } from './Tooltip.constants';
+export { TREE_CONTEXT_KEY as treeContextKey, TREE_ITEM_CONTEXT_KEY as treeItemContextKey } from './Tree.constants';
 // ----- Components ----- //
 import Button from './Button.svelte';
 import Checkbox from './Checkbox.svelte';