@geoffcox/sterling-svelte 0.0.12 → 0.0.14

package/containers/TreeChevron.svelte

@@ -0,0 +1,109 @@
+<script>import { onMount } from "svelte";
+export let expanded = false;
+export let hasChildren = false;
+let lastValue = expanded;
+let mounted = false;
+onMount(() => {
+  setTimeout(() => {
+    mounted = true;
+  }, 10);
+});
+let animate = false;
+$: {
+  if (expanded !== lastValue && mounted) {
+    animate = true;
+  }
+  lastValue = expanded;
+}
+</script>
+
+<div class="tree-chevron" class:leaf={!hasChildren} class:animate class:expanded />
+
+<style>
+  .tree-chevron {
+    position: relative;
+    border: none;
+    background: none;
+    height: 1em;
+    width: 1em;
+    transform-origin: 50% 50%;
+  }
+
+  .tree-chevron::after {
+    position: absolute;
+    content: '';
+    top: 50%;
+    left: 50%;
+    width: 7px;
+    height: 7px;
+    border-right: 3px solid currentColor;
+    border-top: 3px solid currentColor;
+  }
+
+  :not(.expanded):not(.animate)::after {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  .expanded:not(.animate)::after {
+    transform: translate(-50%, -70%) rotate(135deg);
+  }
+
+  @keyframes rotate-collapse {
+    from {
+      transform: translate(-50%, -70%) rotate(135deg);
+    }
+    to {
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+  }
+
+  @keyframes rotate-expand {
+    from {
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+    to {
+      transform: translate(-50%, -70%) rotate(135deg);
+    }
+  }
+
+  :not(.expanded).animate::after {
+    animation-name: rotate-collapse;
+    animation-duration: 100ms;
+    animation-iteration-count: 1;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+  }
+
+  .expanded.animate::after {
+    animation-name: rotate-expand;
+    animation-duration: 100ms;
+    animation-iteration-count: 1;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+  }
+
+  .tree-chevron.leaf::after {
+    animation: none;
+    content: '';
+    position: absolute;
+    font: inherit;
+    left: 50%;
+    top: 50%;
+    width: 0.35em;
+    height: 0.35em;
+    background: currentColor;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  @media (prefers-reduced-motion) {
+    :not(.expanded).animate::after {
+      animation: none;
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+    .expanded.animate::after {
+      animation: none;
+      transform: translate(-50%, -70%) rotate(135deg);
+    }
+  }
+</style>

package/containers/TreeChevron.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        expanded?: boolean | undefined;
+        hasChildren?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TreeChevronProps = typeof __propDef.props;
+export type TreeChevronEvents = typeof __propDef.events;
+export type TreeChevronSlots = typeof __propDef.slots;
+export default class TreeChevron extends SvelteComponentTyped<TreeChevronProps, TreeChevronEvents, TreeChevronSlots> {
+}
+export {};

package/containers/TreeItem.svelte

@@ -0,0 +1,96 @@
+<script>import TreeChevron from "./TreeChevron.svelte";
+export let depth = 0;
+export let disabled = false;
+export let expanded = false;
+export let hasChildren = false;
+export let selected = false;
+export let nodeId;
+export let node = void 0;
+</script>
+
+<div
+  class="sterling-tree-node-item"
+  class:disabled
+  class:expanded
+  class:selected
+  style={`--sterling-tree-node-depth: ${depth}`}
+  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}
+>
+  <TreeChevron {expanded} {hasChildren} />
+  <slot {depth} {disabled} {expanded} {hasChildren} {selected} {node} {nodeId} />
+</div>
+
+<style>
+  .sterling-tree-node-item {
+    align-content: center;
+    align-items: center;
+    background-color: transparent;
+    box-sizing: border-box;
+    color: var(--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));
+    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-node-item.selected {
+    background-color: var(--Input__background-color--selected);
+    color: var(--Input__color--selected);
+  }
+
+  .sterling-tree-node-item.disabled {
+    color: var(--Input__color--disabled);
+  }
+
+  .sterling-tree-node-item.leaf {
+    border: none;
+    background: currentColor;
+    border-radius: 50%;
+    height: 0.5em;
+    width: 0.5em;
+    margin: 0.5;
+    transform-origin: 50% 50%;
+  }
+
+  @media (prefers-reduced-motion) {
+    .sterling-tree-node-item {
+      transition: none;
+    }
+  }
+</style>

package/containers/TreeItem.svelte.d.ts

@@ -0,0 +1,60 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TreeNodeData } from './Tree.types';
+declare class __sveltets_Render<T> {
+    props(): {
+        [x: string]: any;
+        depth?: number | undefined;
+        disabled?: boolean | undefined;
+        expanded?: boolean | undefined;
+        hasChildren?: boolean | undefined;
+        selected?: boolean | undefined;
+        nodeId: string;
+        node?: TreeNodeData<T> | 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(): {
+        default: {
+            depth: number;
+            disabled: boolean;
+            expanded: boolean;
+            hasChildren: boolean;
+            selected: boolean;
+            node: TreeNodeData<T> | undefined;
+            nodeId: 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 {};

package/containers/TreeNode.svelte

@@ -0,0 +1,267 @@
+<script>import { getContext, setContext } from "svelte";
+import { slide } from "svelte/transition";
+import { treeContextKey, treeNodeContextKey } from "./Tree.constants";
+import TreeItem from "./TreeItem.svelte";
+export let disabled = false;
+export let nodeId;
+export let node = void 0;
+const { getNodeId, expandedNodeIds, selectedNodeId, selectedNodeEventHandlers } = getContext(treeContextKey);
+const { parentNodeId, depth } = getContext(treeNodeContextKey);
+if (nodeId && node) {
+  if (nodeId !== getNodeId(node)) {
+    throw new Error("The nodeId does not match node.nodeId.");
+  }
+} else if (node) {
+  nodeId = getNodeId(node);
+} else if (!nodeId) {
+  throw new Error("Both nodeId and node are missing.");
+}
+setContext("sterlingTreeNode", { parentNodeId: nodeId, depth: depth + 1 });
+let treeNodeRef;
+let itemRef;
+$:
+  hasChildren = (node?.children?.length || 0) > 0 || $$slots.children || $$slots.default;
+$:
+  expanded = $expandedNodeIds.includes(nodeId);
+$:
+  selected = $selectedNodeId === nodeId;
+const collapseNode = (index) => {
+  if (!disabled) {
+    index = index ?? $expandedNodeIds.findIndex((id) => id === nodeId);
+    if (index !== -1) {
+      expandedNodeIds.set([
+        ...$expandedNodeIds.slice(0, index),
+        ...$expandedNodeIds.slice(index + 1)
+      ]);
+    }
+  }
+};
+const expandNode = (index) => {
+  if (!disabled) {
+    index = index ?? $expandedNodeIds.findIndex((id) => id === nodeId);
+    if (index === -1) {
+      expandedNodeIds.set([...$expandedNodeIds, nodeId]);
+    }
+  }
+};
+const toggleExpanded = () => {
+  if (!disabled) {
+    const index = $expandedNodeIds.findIndex((id) => id === nodeId);
+    index !== -1 ? collapseNode(index) : expandNode(index);
+  }
+};
+const selectNodeById = (nodeId2) => {
+  if (!disabled) {
+    selectedNodeId.set(nodeId2);
+  }
+};
+export const selectNode = () => {
+  if (!disabled) {
+    selectNodeById(nodeId);
+  }
+};
+const selectParentNode = () => {
+  if (!disabled && parentNodeId) {
+    selectNodeById(parentNodeId);
+  }
+};
+const selectNextNode = () => {
+  if (!disabled) {
+    let nextNodeId = void 0;
+    const decendants = treeNodeRef.getElementsByClassName("sterling-tree-node");
+    const last = decendants.length > 0 ? decendants.item(0) : void 0;
+    nextNodeId = last?.getAttribute("data-node-id");
+    if (!nextNodeId) {
+      nextNodeId = treeNodeRef.nextElementSibling?.getAttribute("data-node-id");
+    }
+    if (!nextNodeId) {
+      let ancestor = treeNodeRef.closest(".sterling-tree-node");
+      while (ancestor && !nextNodeId) {
+        nextNodeId = ancestor?.nextElementSibling?.getAttribute("data-node-id");
+        ancestor = ancestor.parentElement?.closest(".sterling-tree-node");
+      }
+    }
+    if (nextNodeId) {
+      selectNodeById(nextNodeId);
+    }
+  }
+};
+const selectPreviousNode = () => {
+  if (!disabled) {
+    let prevNodeId = void 0;
+    const previousSibling = treeNodeRef?.previousElementSibling;
+    if (previousSibling) {
+      const decendants = previousSibling.getElementsByClassName("sterling-tree-node");
+      const last = decendants.length > 0 ? decendants.item(decendants.length - 1) : previousSibling;
+      prevNodeId = last?.getAttribute("data-node-id");
+    }
+    if (!prevNodeId) {
+      prevNodeId = parentNodeId;
+    }
+    if (prevNodeId) {
+      selectNodeById(prevNodeId);
+    }
+  }
+};
+const onItemClick = () => {
+  console.log("onItemClick");
+  toggleExpanded();
+  selectNode();
+};
+const onKeydown = (event) => {
+  if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
+    switch (event.key) {
+      case "Enter":
+      case " ":
+        toggleExpanded();
+        event.preventDefault();
+        return false;
+      case "ArrowRight":
+        if (!expanded && hasChildren) {
+          expandNode();
+        } else {
+          selectNextNode();
+        }
+        event.preventDefault();
+        return false;
+      case "ArrowLeft":
+        if (expanded && hasChildren) {
+          collapseNode();
+        } else if (parentNodeId) {
+          selectParentNode();
+        } else {
+          selectPreviousNode();
+        }
+        event.preventDefault();
+        return false;
+      case "ArrowUp":
+        selectPreviousNode();
+        event.preventDefault();
+        return false;
+      case "ArrowDown":
+        selectNextNode();
+        event.preventDefault();
+        return false;
+    }
+  }
+};
+$: {
+  if (selected) {
+    selectedNodeEventHandlers.set({ onKeydown });
+    treeNodeRef?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+  }
+}
+</script>
+
+<!--
+@component
+A node in a Tree displaying the item and children.
+  -->
+<div
+  aria-selected={selected ? true : undefined}
+  aria-expanded={expanded}
+  class="sterling-tree-node"
+  class:disabled
+  bind:this={treeNodeRef}
+  data-node-id={nodeId}
+  role="treeitem"
+>
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div bind:this={itemRef} class="item" class:selected on:click={onItemClick}>
+    <slot name="item" {disabled} {expanded} {hasChildren} {depth} {node} {nodeId} {selected}>
+      <TreeItem {disabled} {expanded} {hasChildren} {depth} {node} {nodeId} {selected}>
+        <svelte:fragment
+          let:disabled
+          let:expanded
+          let:hasChildren
+          let:depth
+          let:node
+          let:nodeId
+          let:selected
+        >
+          <slot name="label" {disabled} {expanded} {hasChildren} {depth} {node} {nodeId} {selected}
+            >{nodeId}</slot
+          >
+        </svelte:fragment>
+      </TreeItem>
+    </slot>
+  </div>
+  {#if expanded && hasChildren}
+    <div class="children" transition:slide={{ duration: 200 }} role="group">
+      <slot name="children">
+        {#if node?.children}
+          {#each node.children as child}
+            <svelte:self {disabled} node={child} nodeId={child.nodeId}>
+              <!-- 
+              Forward the item slot into each tree node.
+              It is cleanest to have a fragment for the TreeNode item slot to 
+              capture the let params, then apply them to the Tree item slot. 
+              -->
+              <svelte:fragment
+                slot="item"
+                let:disabled
+                let:expanded
+                let:hasChildren
+                let:depth
+                let:node
+                let:nodeId
+                let:selected
+              >
+                <slot
+                  name="item"
+                  {disabled}
+                  {expanded}
+                  {hasChildren}
+                  {depth}
+                  {node}
+                  {nodeId}
+                  {selected}
+                >
+                  <!-- 
+                  Svelte prevents conditionally applying slots.
+                  This repeats exact same item slot default for this child
+                  so the item slot is passed down the tree.
+                  -->
+                  <TreeItem {disabled} {expanded} {hasChildren} {depth} {node} {nodeId} {selected}>
+                    <svelte:fragment
+                      let:disabled
+                      let:expanded
+                      let:hasChildren
+                      let:depth
+                      let:node
+                      let:nodeId
+                      let:selected
+                    >
+                      <!-- This uses the label slot for the TreeItem default slot. -->
+                      <slot
+                        name="label"
+                        {disabled}
+                        {expanded}
+                        {hasChildren}
+                        {depth}
+                        {node}
+                        {nodeId}
+                        {selected}>{nodeId}</slot
+                      >
+                    </svelte:fragment>
+                  </TreeItem>
+                </slot>
+              </svelte:fragment>
+            </svelte:self>
+          {/each}
+        {/if}
+      </slot>
+      <slot />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .item {
+    outline: none;
+  }
+
+  .item:focus-visible {
+    border: 1px solid blue;
+  }
+</style>

package/containers/TreeNode.svelte.d.ts

@@ -0,0 +1,43 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TreeNodeData } from './Tree.types';
+declare class __sveltets_Render<T> {
+    props(): {
+        disabled?: boolean | undefined;
+        nodeId: string;
+        node?: TreeNodeData<T> | undefined;
+        selectNode?: (() => void) | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        item: {
+            disabled: any;
+            expanded: any;
+            hasChildren: any;
+            depth: any;
+            node: any;
+            nodeId: any;
+            selected: any;
+        };
+        label: {
+            disabled: any;
+            expanded: any;
+            hasChildren: any;
+            depth: any;
+            node: any;
+            nodeId: any;
+            selected: any;
+        };
+        children: {};
+        default: {};
+    };
+}
+export type TreeNodeProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type TreeNodeEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type TreeNodeSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+/** A node in a Tree displaying the item and children. */
+export default class TreeNode<T> extends SvelteComponentTyped<TreeNodeProps<T>, TreeNodeEvents<T>, TreeNodeSlots<T>> {
+    get selectNode(): () => void;
+}
+export {};

package/display/Progress.svelte

@@ -54,11 +54,9 @@ $:
   {...$$restProps}
 >
   {#if $$slots.label}
-    <div class="label">
-      <Label {disabled} for={inputId}>
-        <slot name="label" />
-      </Label>
-    </div>
+    <Label {disabled} for={inputId}>
+      <slot name="label" />
+    </Label>
   {/if}
   <div class="progress-bar" id={inputId}>
     <div class="container" bind:clientWidth bind:clientHeight>
@@ -82,9 +80,13 @@ $:
     align-items: flex-start;
   }
 
-  .label {
+  .sterling-progress > :global(label) {
     font-size: 0.7em;
-    margin: 0.5em 0;
+    margin: 0.5em 0.7em;
+  }
+
+  .sterling-progress > :global(label):empty {
+    margin: 0;
   }
 
   .progress-bar {

package/index.d.ts

@@ -6,18 +6,24 @@ export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
 export { neutrals } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
-export { type ButtonVariant, type ButtonShape } from './buttons/Button.types';
-export { type ProgressColorful } from './display/Progress.types';
+export type { ButtonVariant, ButtonShape } from './buttons/Button.types';
+export type { ProgressColorful } from './display/Progress.types';
+export type { TextAreaResize } from './inputs/TextArea.types';
+export type { TreeNodeData } from './containers/Tree.types';
 export { clickOutside } from './clickOutside';
 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 './lists/List.svelte';
+import List from './containers/List.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';
-export { Button, Checkbox, Dialog, Input, Label, List, Progress, Radio, Select, Slider, Switch };
+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, Progress, Radio, Select, Slider, Switch, TextArea, Tree, TreeChevron, TreeItem };

package/index.js

@@ -6,18 +6,20 @@ export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
 export { neutrals } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
-export {} from './buttons/Button.types';
-export {} from './display/Progress.types';
 export { clickOutside } from './clickOutside';
 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 './lists/List.svelte';
+import List from './containers/List.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';
-export { Button, Checkbox, Dialog, Input, Label, List, Progress, Radio, Select, Slider, Switch };
+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, Progress, Radio, Select, Slider, Switch, TextArea, Tree, TreeChevron, TreeItem };