@geoffcox/sterling-svelte 0.0.16 → 0.0.17

package/TreeItem.svelte

@@ -0,0 +1,276 @@
+<script>import { getContext, setContext } from "svelte";
+import { slide } from "svelte/transition";
+import { treeContextKey, treeItemContextKey } from "./Tree.constants";
+import TreeItemDisplay from "./TreeItemDisplay.svelte";
+import { writable } from "svelte/store";
+export let disabled = false;
+export let value;
+const {
+  expandedValues,
+  selectedValue,
+  disabled: treeDisabled
+} = getContext(treeContextKey);
+const { depth = 0, disabled: parentDisabled } = getContext(treeItemContextKey) || {};
+let treeItemRef;
+$:
+  hasChildren = $$slots.default;
+$:
+  expanded = $expandedValues.includes(value);
+$:
+  selected = $selectedValue === value;
+$:
+  _disabled = disabled || $parentDisabled || $treeDisabled;
+const disabledStore = writable(_disabled);
+$: {
+  disabledStore.set(_disabled);
+}
+const collapseItem = (index) => {
+  if (!disabled) {
+    index = index ?? $expandedValues.findIndex((id) => id === value);
+    if (index !== -1) {
+      expandedValues.set([
+        ...$expandedValues.slice(0, index),
+        ...$expandedValues.slice(index + 1)
+      ]);
+      return true;
+    }
+  }
+  return false;
+};
+const expandItem = (index) => {
+  if (!disabled) {
+    index = index ?? $expandedValues.findIndex((id) => id === value);
+    if (index === -1) {
+      expandedValues.set([...$expandedValues, value]);
+      return true;
+    }
+  }
+  return false;
+};
+const toggleExpanded = () => {
+  if (!disabled) {
+    const index = $expandedValues.findIndex((id) => id === value);
+    return index !== -1 ? collapseItem(index) : expandItem(index);
+  }
+  return false;
+};
+const focusItem = (treeItemElement) => {
+  if (!_disabled) {
+    const item = treeItemElement.querySelector(".item");
+    item?.focus();
+  }
+};
+const selectItemById = (value2) => {
+  if (!_disabled) {
+    selectedValue.set(value2);
+  }
+};
+export const selectItem = () => {
+  if (!_disabled) {
+    selectItemById(value);
+  }
+};
+const selectParentItem = () => {
+  if (!_disabled) {
+    let candidate = treeItemRef.parentElement?.closest('[role="treeitem"][data-value]');
+    let candidateValue = candidate?.getAttribute("data-value");
+    if (candidateValue && candidate) {
+      selectItemById(candidateValue);
+      focusItem(candidate);
+      return true;
+    }
+  }
+  return false;
+};
+const selectNextItem = () => {
+  if (!_disabled) {
+    let candidateValue = void 0;
+    let candidate = treeItemRef.querySelector('[role="treeitem"][data-value]');
+    candidateValue = candidate?.getAttribute("data-value");
+    if (!candidateValue) {
+      candidate = treeItemRef.nextElementSibling;
+      while (candidate && candidate.getAttribute("data-value") === null) {
+        candidate = candidate.nextElementSibling;
+      }
+      candidateValue = candidate?.getAttribute("data-value");
+    }
+    if (!candidateValue) {
+      let ancestor = treeItemRef.parentElement?.closest(
+        '[role="treeitem"][data-value]'
+      );
+      while (ancestor && !candidateValue) {
+        candidate = ancestor?.nextElementSibling;
+        candidateValue = candidate?.getAttribute("data-value");
+        ancestor = ancestor.parentElement?.closest('[role="treeitem"][data-value]');
+      }
+    }
+    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);
+      focusItem(candidate);
+      return true;
+    }
+  }
+  return false;
+};
+const onClick = () => {
+  if (!_disabled) {
+    toggleExpanded();
+    selectItem();
+  }
+};
+const onKeydown = (event) => {
+  if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
+    switch (event.key) {
+      case "Enter":
+      case " ":
+        if (toggleExpanded()) {
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        }
+        break;
+      case "ArrowRight":
+        if (hasChildren) {
+          if (expanded) {
+            if (selectNextItem()) {
+              event.preventDefault();
+              event.stopPropagation();
+              return false;
+            }
+          } else if (expandItem()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return false;
+          }
+        }
+        break;
+      case "ArrowLeft":
+        if (hasChildren && expanded) {
+          if (collapseItem()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return false;
+          }
+        } else if (selectParentItem()) {
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        }
+        break;
+      case "ArrowUp":
+        if (selectPreviousItem()) {
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        }
+        break;
+      case "ArrowDown":
+        if (selectNextItem()) {
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        }
+        break;
+    }
+  }
+};
+setContext(treeItemContextKey, { depth: depth + 1, disabled: disabledStore });
+</script>
+
+<!--
+@component
+A item in a Tree displaying the item and children.
+  -->
+<div
+  aria-selected={selected ? true : undefined}
+  aria-expanded={expanded}
+  bind:this={treeItemRef}
+  class="sterling-tree-item"
+  class:disabled={_disabled}
+  data-value={value}
+  role="treeitem"
+  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}
+>
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <div
+    class="item"
+    class:selected
+    tabindex={selected ? 0 : -1}
+    on:click={onClick}
+    on:keydown={onKeydown}
+  >
+    <slot name="item" {depth} disabled={_disabled} {expanded} {hasChildren} {selected} {value}>
+      <TreeItemDisplay {depth} disabled={_disabled} {expanded} {hasChildren} {selected} {value}>
+        <svelte:fragment let:depth let:disabled let:expanded let:hasChildren let:selected let:value>
+          <slot name="label" {depth} {disabled} {expanded} {hasChildren} {selected} {value}
+            >{value}</slot
+          >
+        </svelte:fragment>
+      </TreeItemDisplay>
+    </slot>
+  </div>
+  {#if expanded && hasChildren}
+    <div class="children" transition:slide={{ duration: 200 }} role="group">
+      <slot />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .item {
+    outline: none;
+  }
+</style>

package/TreeItem.svelte.d.ts

@@ -0,0 +1,65 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        disabled?: boolean | undefined;
+        value: string;
+        selectItem?: (() => 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;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        item: {
+            depth: number;
+            disabled: boolean;
+            expanded: boolean;
+            hasChildren: boolean;
+            selected: boolean;
+            value: string;
+        };
+        label: {
+            depth: number;
+            disabled: boolean;
+            expanded: boolean;
+            hasChildren: boolean;
+            selected: boolean;
+            value: string;
+        };
+        default: {};
+    };
+};
+export type TreeItemProps = typeof __propDef.props;
+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;
+}
+export {};

package/{containers/TreeItem.svelte → TreeItemDisplay.svelte}

@@ -3,17 +3,16 @@ export let depth = 0;
 export let disabled = false;
 export let expanded = false;
 export let hasChildren = false;
+export let value;
 export let selected = false;
-export let nodeId;
-export let node = void 0;
 </script>
 
 <div
-  class="sterling-tree-node-item"
+  class="sterling-tree-item"
   class:disabled
   class:expanded
   class:selected
-  style={`--sterling-tree-node-depth: ${depth}`}
+  style={`--sterling-tree-item-depth: ${depth}`}
   on:blur
   on:click
   on:dblclick
@@ -42,43 +41,44 @@ export let node = void 0;
   {...$$restProps}
 >
   <TreeChevron {expanded} {hasChildren} />
-  <slot {depth} {disabled} {expanded} {hasChildren} {selected} {node} {nodeId} />
+  <slot {depth} {disabled} {expanded} {hasChildren} {selected} {value} />
 </div>
 
 <style>
-  .sterling-tree-node-item {
+  .sterling-tree-item {
     align-content: center;
     align-items: center;
     background-color: transparent;
     box-sizing: border-box;
-    color: var(--Input__color);
+    color: var(--stsv-Input__color);
     display: grid;
     grid-template-columns: auto 1fr;
     column-gap: 0.25em;
     margin: 0;
     outline: none;
     padding: 0.5em;
-    padding-left: calc(0.5em * var(--sterling-tree-node-depth));
+    padding-left: calc(0.2em + (0.5em * var(--sterling-tree-item-depth)));
     text-overflow: ellipsis;
     transition: background-color 250ms, color 250ms, border-color 250ms;
     white-space: nowrap;
   }
 
-  .sterling-tree-node-item:hover {
-    background-color: var(--Button__background-color--hover);
-    color: var(--Button__color--hover);
+  .sterling-tree-item:hover {
+    background-color: var(--stsv-Button__background-color--hover);
+    color: var(--stsv-Button__color--hover);
   }
 
-  .sterling-tree-node-item.selected {
-    background-color: var(--Input__background-color--selected);
-    color: var(--Input__color--selected);
+  .sterling-tree-item.selected {
+    background-color: var(--stsv-Input__background-color--selected);
+    color: var(--stsv-Input__color--selected);
   }
 
-  .sterling-tree-node-item.disabled {
-    color: var(--Input__color--disabled);
+  .sterling-tree-item.disabled {
+    color: var(--stsv-Common__color--disabled);
+    cursor: not-allowed;
   }
 
-  .sterling-tree-node-item.leaf {
+  .sterling-tree-item.leaf {
     border: none;
     background: currentColor;
     border-radius: 50%;
@@ -89,7 +89,7 @@ export let node = void 0;
   }
 
   @media (prefers-reduced-motion) {
-    .sterling-tree-node-item {
+    .sterling-tree-item {
       transition: none;
     }
   }

package/{containers/TreeItem.svelte.d.ts → TreeItemDisplay.svelte.d.ts}

@@ -1,17 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
-import type { TreeNodeData } from './Tree.types';
-declare class __sveltets_Render<T> {
-    props(): {
+declare const __propDef: {
+    props: {
         [x: string]: any;
         depth?: number | undefined;
         disabled?: boolean | undefined;
         expanded?: boolean | undefined;
         hasChildren?: boolean | undefined;
+        value: string;
         selected?: boolean | undefined;
-        nodeId: string;
-        node?: TreeNodeData<T> | undefined;
     };
-    events(): {
+    events: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
@@ -40,21 +38,20 @@ declare class __sveltets_Render<T> {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {
+    slots: {
         default: {
             depth: number;
             disabled: boolean;
             expanded: boolean;
             hasChildren: boolean;
             selected: boolean;
-            node: TreeNodeData<T> | undefined;
-            nodeId: string;
+            value: string;
         };
     };
-}
-export type TreeItemProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type TreeItemEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type TreeItemSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class TreeItem<T> extends SvelteComponentTyped<TreeItemProps<T>, TreeItemEvents<T>, TreeItemSlots<T>> {
+};
+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> {
 }
 export {};

package/{forwardEvents.js → actions/forwardEvents.js}

@@ -2,11 +2,9 @@ import { custom_event } from 'svelte/internal';
 export const forwardEvents = (node, params) => {
     const addListeners = (node, target, events, customEvents) => {
         let forward = (event) => {
-            console.log('forward', node, target, event);
             target.dispatchEvent(event);
         };
         let forwardCustom = (event) => {
-            console.log('custom forward', node, target, event);
             const customEvent = event;
             target.dispatchEvent(custom_event(customEvent.type, customEvent.detail, {
                 bubbles: customEvent.bubbles,

package/index.d.ts

@@ -1,3 +1,6 @@
+export { clickOutside } from './actions/clickOutside';
+export { forwardEvents } from './actions/forwardEvents';
+export { portal } from './actions/portal';
 export { type Theme, type ThemeActionParams } from './theme/types';
 export { applyDarkTheme } from './theme/applyDarkTheme';
 export { applyLightTheme } from './theme/applyLightTheme';
@@ -6,34 +9,42 @@ export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
 export { neutrals } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
-export { clickOutside } from './clickOutside';
-export { menuBarContextKey, menuItemContextKey } from './containers/Menus.constants';
-export type { ButtonVariant, ButtonShape } from './buttons/Button.types';
-export type { MenuItemRegistration, MenuBarContext, MenuItemContext } from './containers/Menus.types';
-export type { ProgressColorful } from './display/Progress.types';
-export type { TextAreaResize } from './inputs/TextArea.types';
-export type { TabData } from './containers/Tabs.types';
-export type { TreeNodeData } from './containers/Tree.types';
-import Button from './buttons/Button.svelte';
-import Checkbox from './inputs/Checkbox.svelte';
-import Dialog from './surfaces/Dialog.svelte';
-import Input from './inputs/Input.svelte';
-import Label from './display/Label.svelte';
-import List from './containers/List.svelte';
-import Menu from './containers/Menu.svelte';
-import MenuBar from './containers/MenuBar.svelte';
-import MenuButton from './buttons/MenuButton.svelte';
-import MenuItem from './containers/MenuItem.svelte';
-import MenuSeparator from './containers/MenuSeparator.svelte';
-import Progress from './display/Progress.svelte';
-import Radio from './inputs/Radio.svelte';
-import Select from './inputs/Select.svelte';
-import Slider from './inputs/Slider.svelte';
-import Switch from './inputs/Switch.svelte';
-import Tab from './containers/Tab.svelte';
-import TabList from './containers/TabList.svelte';
-import TextArea from './inputs/TextArea.svelte';
-import Tree from './containers/Tree.svelte';
-import TreeChevron from './containers/TreeChevron.svelte';
-import TreeItem from './containers/TreeItem.svelte';
-export { Button, Checkbox, Dialog, Input, Label, List, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tree, TreeChevron, TreeItem };
+export { menuBarContextKey, menuItemContextKey } from './Menus.constants';
+export type { ButtonVariant, ButtonShape } from './Button.types';
+export type { ListContext } from './List.types';
+export type { MenuBarContext, MenuItemContext, MenuItemRegistration } from './Menus.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';
+import Button from './Button.svelte';
+import Checkbox from './Checkbox.svelte';
+import Dialog from './Dialog.svelte';
+import Input from './Input.svelte';
+import Label from './Label.svelte';
+import List from './List.svelte';
+import ListItem from './ListItem.svelte';
+import Menu from './Menu.svelte';
+import MenuBar from './MenuBar.svelte';
+import MenuButton from './MenuButton.svelte';
+import MenuItem from './MenuItem.svelte';
+import MenuItemDisplay from './MenuItemDisplay.svelte';
+import MenuSeparator from './MenuSeparator.svelte';
+import Progress from './Progress.svelte';
+import Radio from './Radio.svelte';
+import Select from './Select.svelte';
+import Slider from './Slider.svelte';
+import Switch from './Switch.svelte';
+import Tab from './Tab.svelte';
+import TabList from './TabList.svelte';
+import TextArea from './TextArea.svelte';
+import Tooltip from './Tooltip.svelte';
+import Tree from './Tree.svelte';
+import TreeChevron from './TreeChevron.svelte';
+import TreeItem from './TreeItem.svelte';
+import TreeItemDisplay from './TreeItemDisplay.svelte';
+export { Button, Checkbox, Dialog, Input, Label, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/index.js

@@ -1,3 +1,8 @@
+// ----- actions ----- //
+export { clickOutside } from './actions/clickOutside';
+export { forwardEvents } from './actions/forwardEvents';
+export { portal } from './actions/portal';
+// ----- theme ----- //
 export {} from './theme/types';
 export { applyDarkTheme } from './theme/applyDarkTheme';
 export { applyLightTheme } from './theme/applyLightTheme';
@@ -6,28 +11,37 @@ export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
 export { neutrals } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
-export { clickOutside } from './clickOutside';
-export { menuBarContextKey, menuItemContextKey } from './containers/Menus.constants';
-import Button from './buttons/Button.svelte';
-import Checkbox from './inputs/Checkbox.svelte';
-import Dialog from './surfaces/Dialog.svelte';
-import Input from './inputs/Input.svelte';
-import Label from './display/Label.svelte';
-import List from './containers/List.svelte';
-import Menu from './containers/Menu.svelte';
-import MenuBar from './containers/MenuBar.svelte';
-import MenuButton from './buttons/MenuButton.svelte';
-import MenuItem from './containers/MenuItem.svelte';
-import MenuSeparator from './containers/MenuSeparator.svelte';
-import Progress from './display/Progress.svelte';
-import Radio from './inputs/Radio.svelte';
-import Select from './inputs/Select.svelte';
-import Slider from './inputs/Slider.svelte';
-import Switch from './inputs/Switch.svelte';
-import Tab from './containers/Tab.svelte';
-import TabList from './containers/TabList.svelte';
-import TextArea from './inputs/TextArea.svelte';
-import Tree from './containers/Tree.svelte';
-import TreeChevron from './containers/TreeChevron.svelte';
-import TreeItem from './containers/TreeItem.svelte';
-export { Button, Checkbox, Dialog, Input, Label, List, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tree, TreeChevron, TreeItem };
+// ----- 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';
+// ----- Components ----- //
+import Button from './Button.svelte';
+import Checkbox from './Checkbox.svelte';
+import Dialog from './Dialog.svelte';
+import Input from './Input.svelte';
+import Label from './Label.svelte';
+import List from './List.svelte';
+import ListItem from './ListItem.svelte';
+import Menu from './Menu.svelte';
+import MenuBar from './MenuBar.svelte';
+import MenuButton from './MenuButton.svelte';
+import MenuItem from './MenuItem.svelte';
+import MenuItemDisplay from './MenuItemDisplay.svelte';
+import MenuSeparator from './MenuSeparator.svelte';
+import Progress from './Progress.svelte';
+import Radio from './Radio.svelte';
+import Select from './Select.svelte';
+import Slider from './Slider.svelte';
+import Switch from './Switch.svelte';
+import Tab from './Tab.svelte';
+import TabList from './TabList.svelte';
+import TextArea from './TextArea.svelte';
+import Tooltip from './Tooltip.svelte';
+import Tree from './Tree.svelte';
+import TreeChevron from './TreeChevron.svelte';
+import TreeItem from './TreeItem.svelte';
+import TreeItemDisplay from './TreeItemDisplay.svelte';
+export { Button, Checkbox, Dialog, Input, Label, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };