@geoffcox/sterling-svelte 0.0.13 → 0.0.14

package/{lists → containers}/List.svelte

@@ -1,18 +1,19 @@
 <script>import { createEventDispatcher } from "svelte";
 import { v4 as uuid } from "uuid";
 import Label from "../display/Label.svelte";
+import ListItem from "./ListItem.svelte";
 export let disabled = false;
 export let items = [];
 export let horizontal = false;
 export let selectedIndex = -1;
 export let selectedItem = void 0;
+export let composed = false;
 $: {
   selectedItem = items[selectedIndex];
 }
 const inputId = uuid();
 let listRef;
 let itemRefs = {};
-let focusVisible = false;
 const dispatch = createEventDispatcher();
 const raiseItemSelected = (index) => {
   dispatch("itemSelected", { index, item: items[index] });
@@ -37,6 +38,12 @@ export const selectNextItem = () => {
     selectedIndex = Math.min(items.length - 1, selectedIndex + 1);
   }
 };
+export const selectItem = (item) => {
+  const index = items.indexOf(item);
+  if (index !== -1) {
+    selectedIndex = index;
+  }
+};
 $: {
   raiseItemSelected(selectedIndex);
 }
@@ -93,19 +100,17 @@ const onKeydown = (event) => {
 @component
 A list of items where a single item can be selected.
   -->
-<div class="sterling-list" class:horizontal class:disabled>
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<div class="sterling-list" class:horizontal class:disabled class:composed tabindex={0}>
   {#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
     bind:this={listRef}
     class="list"
     class:disabled
-    class:focus-visible={focusVisible}
     class:horizontal
     role="listbox"
     tabindex={!disabled ? 0 : undefined}
@@ -140,14 +145,16 @@ A list of items where a single item can be selected.
         bind:this={itemRefs[index]}
         aria-selected={disabled ? undefined : selected}
         class="list-item"
-        class:selected
-        class:disabled
         data-index={index + 1}
         role="option"
         on:click={() => onItemClick(index)}
       >
-        <slot {disabled} {index} {item} {selected}>
-          {item}
+        <slot name="item" {disabled} {index} {item} {selected}>
+          <ListItem {disabled} {selected} {index} {item}>
+            <slot {disabled} {index} {item} {selected}>
+              {item}
+            </slot>
+          </ListItem>
         </slot>
       </div>
     {/each}
@@ -168,6 +175,7 @@ A list of items where a single item can be selected.
     grid-template-rows: auto 1fr;
     height: 100%;
     margin: 0;
+    overflow: hidden;
     padding: 0;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
@@ -182,8 +190,7 @@ A list of items where a single item can be selected.
     color: var(--Common__color--hover);
   }
 
-  .sterling-list:focus-visible,
-  .sterling-list.focus-visible {
+  .sterling-list:focus-within {
     border-color: var(--Common__border-color--focus);
     color: var(--Common__color--focus);
     outline-color: var(--Common__outline-color);
@@ -199,6 +206,15 @@ A list of items where a single item can be selected.
     cursor: not-allowed;
   }
 
+  .sterling-list.composed,
+  .sterling-list:hover.composed,
+  .sterling-list:focus-visible.composed,
+  .sterling-list.disabled.composed {
+    background: none;
+    border: none;
+    outline: none;
+  }
+
   .list {
     display: flex;
     flex-direction: column;
@@ -206,6 +222,7 @@ A list of items where a single item can be selected.
     grid-row: 2 / span 1;
     overflow-x: hidden;
     overflow-y: scroll;
+    outline: none;
     position: relative;
   }
 
@@ -215,39 +232,17 @@ A list of items where a single item can be selected.
     overflow-y: hidden;
   }
 
-  .label {
+  .sterling-list > :global(label) {
     font-size: 0.7em;
     margin: 0.5em 0.7em;
   }
 
-  .list-item {
-    box-sizing: border-box;
-    color: var(--Input__color);
+  .sterling-list > :global(label):empty {
     margin: 0;
-    padding: 0.5em;
-    outline: none;
-    text-overflow: ellipsis;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-    white-space: nowrap;
-  }
-
-  .list-item:hover {
-    background-color: var(--Button__background-color--hover);
-    color: var(--Button__color--hover);
-  }
-
-  .list-item.selected {
-    background-color: var(--Input__background-color--selected);
-    color: var(--Input__color--selected);
-  }
-
-  .list-item.disabled {
-    color: var(--Input__color--disabled);
   }
 
   @media (prefers-reduced-motion) {
-    .sterling-list,
-    .list-item {
+    .sterling-list {
       transition: none;
     }
   }

package/{lists → containers}/List.svelte.d.ts

@@ -1,17 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
+declare class __sveltets_Render<T> {
+    props(): {
         [x: string]: any;
         disabled?: boolean | undefined;
-        items?: any[] | undefined;
+        items?: T[] | undefined;
         horizontal?: boolean | undefined;
         selectedIndex?: number | undefined;
-        selectedItem?: any;
+        selectedItem?: T | undefined;
+        composed?: boolean | undefined;
         focusSelectedItem?: (() => void) | undefined;
         selectPreviousItem?: (() => void) | undefined;
         selectNextItem?: (() => void) | undefined;
+        selectItem?: ((item: T) => void) | undefined;
     };
-    events: {
+    events(): {
         blur: FocusEvent;
         click: MouseEvent;
         copy: ClipboardEvent;
@@ -37,23 +39,30 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
+    slots(): {
         label: {};
+        item: {
+            disabled: boolean;
+            index: any;
+            item: T;
+            selected: any;
+        };
         default: {
             disabled: boolean;
             index: any;
-            item: any;
+            item: T;
             selected: any;
         };
     };
-};
-export type ListProps = typeof __propDef.props;
-export type ListEvents = typeof __propDef.events;
-export type ListSlots = typeof __propDef.slots;
+}
+export type ListProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type ListEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type ListSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
 /** A list of items where a single item can be selected. */
-export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+export default class List<T> extends SvelteComponentTyped<ListProps<T>, ListEvents<T>, ListSlots<T>> {
     get focusSelectedItem(): () => void;
     get selectPreviousItem(): () => void;
     get selectNextItem(): () => void;
+    get selectItem(): (item: T) => void;
 }
 export {};

package/containers/ListItem.svelte

@@ -0,0 +1,48 @@
+<script>export let disabled = false;
+export let selected = false;
+export let index = -1;
+export let item = void 0;
+</script>
+
+<div
+  aria-selected={disabled ? undefined : selected}
+  class="sterling-list-item"
+  class:disabled
+  class:selected
+>
+  <slot {disabled} {selected} {index} {item} />
+</div>
+
+<style>
+  .sterling-list-item {
+    background-color: transparent;
+    box-sizing: border-box;
+    color: var(--Input__color);
+    margin: 0;
+    padding: 0.5em;
+    outline: none;
+    text-overflow: ellipsis;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+    white-space: nowrap;
+  }
+
+  .sterling-list-item:hover {
+    background-color: var(--Button__background-color--hover);
+    color: var(--Button__color--hover);
+  }
+
+  .sterling-list-item.selected {
+    background-color: var(--Input__background-color--selected);
+    color: var(--Input__color--selected);
+  }
+
+  .sterling-list-item.disabled {
+    color: var(--Input__color--disabled);
+  }
+
+  @media (prefers-reduced-motion) {
+    .sterling-list-item {
+      transition: none;
+    }
+  }
+</style>

package/containers/ListItem.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare class __sveltets_Render<T> {
+    props(): {
+        disabled?: boolean | undefined;
+        selected?: boolean | undefined;
+        index?: number | undefined;
+        item?: T | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: {
+            disabled: boolean;
+            selected: boolean;
+            index: number;
+            item: T | undefined;
+        };
+    };
+}
+export type ListItemProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type ListItemEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type ListItemSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class ListItem<T> extends SvelteComponentTyped<ListItemProps<T>, ListItemEvents<T>, ListItemSlots<T>> {
+}
+export {};

package/containers/Tree.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const treeContextKey = "sterlingTree";
+export declare const treeNodeContextKey = "sterlingTreeNode";

package/containers/Tree.constants.js

@@ -0,0 +1,2 @@
+export const treeContextKey = 'sterlingTree';
+export const treeNodeContextKey = 'sterlingTreeNode';

package/containers/Tree.svelte

@@ -0,0 +1,222 @@
+<script>import { v4 as uuid } from "uuid";
+import { createEventDispatcher, setContext } from "svelte";
+import { writable } from "svelte/store";
+import { treeContextKey, treeNodeContextKey } from "./Tree.constants";
+import Label from "../display/Label.svelte";
+import TreeNode from "./TreeNode.svelte";
+import TreeItem from "./TreeItem.svelte";
+const inputId = uuid();
+let nodeIdCounter = 0;
+const getDefaultNodeId = (node) => {
+  if (node.nodeId) {
+    return node.nodeId;
+  } else {
+    nodeIdCounter++;
+    return `node-${nodeIdCounter}`;
+  }
+};
+export let composed = false;
+export let disabled = false;
+export let getNodeId = getDefaultNodeId;
+export let nodes = void 0;
+export let selectedNodeId = void 0;
+export let expandedNodeIds = [];
+const selectedNodeIdStore = writable(selectedNodeId);
+const expandedNodeIdStore = writable(expandedNodeIds);
+const selectedNodeEventHandlersStore = writable();
+setContext(treeContextKey, {
+  expandedNodeIds: expandedNodeIdStore,
+  getNodeId,
+  selectedNodeId: selectedNodeIdStore,
+  selectedNodeEventHandlers: selectedNodeEventHandlersStore
+});
+setContext(treeNodeContextKey, { parentNodeId: void 0, depth: 0 });
+const dispatch = createEventDispatcher();
+const raiseExpandCollapse = (expandedNodeIds2) => {
+  dispatch("expandCollapse", { expandedNodeIds: expandedNodeIds2 });
+};
+const raiseSelect = (selectedNodeId2) => {
+  dispatch("select", { selectedNodeId: selectedNodeId2 });
+};
+$: {
+  selectedNodeIdStore.set(selectedNodeId);
+}
+$: {
+  selectedNodeId = $selectedNodeIdStore;
+  raiseSelect($selectedNodeIdStore);
+}
+$: {
+  expandedNodeIdStore.set(expandedNodeIds);
+}
+$: {
+  expandedNodeIds = $expandedNodeIdStore;
+  raiseExpandCollapse($expandedNodeIdStore);
+}
+const getAllNodeIds = (node, nodeIds) => {
+  nodeIds.push(getNodeId(node));
+  node.children?.forEach((child) => getAllNodeIds(child, nodeIds));
+};
+const setToggleNodeIdsToAll = () => {
+  const nodeIds = [];
+  nodes?.forEach((node) => getAllNodeIds(node, nodeIds));
+  expandedNodeIds = nodeIds;
+};
+export const collapseAll = () => {
+  expandedNodeIds = [];
+};
+export const expandAll = () => {
+  setToggleNodeIdsToAll();
+};
+const onKeydown = (event) => {
+  return $selectedNodeEventHandlersStore?.onKeydown?.(event);
+};
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<div
+  class="sterling-tree"
+  class:disabled
+  class:composed
+  tabindex={!disabled ? 0 : undefined}
+  on:keydown={onKeydown}
+>
+  {#if $$slots.label}
+    <Label {disabled} for={inputId}>
+      <slot name="label" />
+    </Label>
+  {/if}
+  <div class="tree" role="tree">
+    {#if nodes}
+      {#each nodes as node}
+        <TreeNode {disabled} {node} nodeId={getNodeId(node)}>
+          <!-- 
+          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 node
+              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 nodeLabel slot for the TreeItem default slot. -->
+                  <slot
+                    name="nodeLabel"
+                    {disabled}
+                    {expanded}
+                    {hasChildren}
+                    {depth}
+                    {node}
+                    {nodeId}
+                    {selected}>{nodeId}</slot
+                  >
+                </svelte:fragment>
+              </TreeItem>
+            </slot>
+          </svelte:fragment>
+        </TreeNode>
+      {/each}
+    {/if}
+    <slot />
+  </div>
+</div>
+
+<style>
+  .sterling-tree {
+    background-color: var(--Common__background-color);
+    border-color: var(--Common__border-color);
+    border-radius: var(--Common__border-radius);
+    border-style: var(--Common__border-style);
+    border-width: var(--Common__border-width);
+    box-sizing: border-box;
+    color: var(--Common__color);
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .sterling-tree:hover {
+    border-color: var(--Common__border-color--hover);
+    color: var(--Common__color--hover);
+  }
+
+  .sterling-tree:focus-visible {
+    border-color: var(--Common__border-color--focus);
+    color: var(--Common__color--focus);
+    outline-color: var(--Common__outline-color);
+    outline-offset: var(--Common__outline-offset);
+    outline-style: var(--Common__outline-style);
+    outline-width: var(--Common__outline-width);
+  }
+
+  .sterling-tree.disabled {
+    background-color: var(--Common__background-color--disabled);
+    border-color: var(---Common__border-color--disabled);
+    color: var(--Common__color--disabled);
+    cursor: not-allowed;
+  }
+
+  .sterling-tree.composed,
+  .sterling-tree:hover.composed,
+  .sterling-tree:focus-visible.composed,
+  .sterling-tree.disabled.composed {
+    background: none;
+    border: none;
+    outline: none;
+  }
+
+  .sterling-tree > :global(label) {
+    font-size: 0.7em;
+    margin: 0.5em 0.7em;
+  }
+
+  .sterling-tree > :global(label):empty {
+    margin: 0;
+  }
+
+  .tree {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    grid-row: 2 / span 1;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    outline: none;
+    position: relative;
+  }
+</style>

package/containers/Tree.svelte.d.ts

@@ -0,0 +1,50 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TreeNodeData } from './Tree.types';
+declare class __sveltets_Render<T> {
+    props(): {
+        composed?: boolean | undefined;
+        disabled?: boolean | undefined;
+        getNodeId?: ((node: TreeNodeData<T>) => string) | undefined;
+        nodes?: TreeNodeData<T>[] | undefined;
+        selectedNodeId?: string | undefined;
+        expandedNodeIds?: string[] | undefined;
+        collapseAll?: (() => void) | undefined;
+        expandAll?: (() => void) | undefined;
+    };
+    events(): {
+        expandCollapse: CustomEvent<any>;
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        label: {};
+        item: {
+            disabled: any;
+            expanded: any;
+            hasChildren: any;
+            depth: any;
+            node: any;
+            nodeId: any;
+            selected: any;
+        };
+        nodeLabel: {
+            disabled: any;
+            expanded: any;
+            hasChildren: any;
+            depth: any;
+            node: any;
+            nodeId: any;
+            selected: any;
+        };
+        default: {};
+    };
+}
+export type TreeProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type TreeEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type TreeSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Tree<T> extends SvelteComponentTyped<TreeProps<T>, TreeEvents<T>, TreeSlots<T>> {
+    get collapseAll(): () => void;
+    get expandAll(): () => void;
+}
+export {};

package/containers/Tree.types.d.ts

@@ -0,0 +1,47 @@
+import type { Writable } from 'svelte/store';
+export type TreeNodeData<T> = T & {
+    nodeId?: string;
+    children?: TreeNodeData<T>[];
+};
+/**
+ * The set of event handlers forwarded from Tree
+ */
+export type TreeForwardedEventHandlers = {
+    onKeydown: svelte.JSX.KeyboardEventHandler<Element>;
+};
+/**
+ * Context for a Tree and its TreeNodes
+ */
+export type TreeContext<T> = {
+    /**
+     * Gets the ID for the tree node.
+     */
+    getNodeId: (node: TreeNodeData<T>) => string;
+    /**
+     * The IDs of the expanded ttree nodes.
+     */
+    expandedNodeIds: Writable<string[]>;
+    /**
+     * The ID of the selected tree node.
+     */
+    selectedNodeId: Writable<string | undefined>;
+    /**
+     * The selected tree node's event handlers.
+     * The Tree will forward events to these handlers.
+     */
+    selectedNodeEventHandlers: Writable<TreeForwardedEventHandlers>;
+};
+/**
+ * The context for a TreeNode
+ */
+export type TreeNodeContext = {
+    /**
+     * The ID of the parent node.
+     */
+    parentNodeId?: string;
+    /**
+     * How many levels deep this node is in the tree hierarchy.
+     * A top level item's depth is zero.
+     */
+    depth: number;
+};

package/containers/Tree.types.js

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