@geoffcox/sterling-svelte 0.0.16 → 0.0.18

package/containers/Tree.svelte

@@ -1,222 +0,0 @@
-<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

@@ -1,50 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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/TreeNode.svelte

@@ -1,266 +0,0 @@
-<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 = () => {
-  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

@@ -1,43 +0,0 @@
-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/Label.svelte

@@ -1,27 +0,0 @@
-<script>export let disabled = false;
-</script>
-
-<label class="sterling-label" class:disabled {...$$restProps}>
-  <slot />
-</label>
-
-<!-- 
-    @component 
-    A styled HTML label element
--->
-<style>
-  label {
-    transition: opacity 250ms;
-    font: inherit;
-  }
-
-  label.disabled {
-    opacity: 0.5;
-  }
-
-  @media (prefers-reduced-motion) {
-    label {
-      transition: none;
-    }
-  }
-</style>

package/display/Label.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type LabelProps = typeof __propDef.props;
-export type LabelEvents = typeof __propDef.events;
-export type LabelSlots = typeof __propDef.slots;
-/** A styled HTML label element */
-export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
-}
-export {};

package/display/Progress.types.d.ts

@@ -1 +0,0 @@
-export type ProgressColorful = 'none' | 'auto' | 'progress' | 'success' | 'warning' | 'error';