@geoffcox/sterling-svelte 0.0.15 → 0.0.17

package/containers/TreeNode.svelte

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

@@ -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/surfaces/CloseX.svelte

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...$$restProps}>
-	<path
-		d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
-	/>
-</svg>

package/surfaces/CloseX.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  CloseXProps */
-/** @typedef {typeof __propDef.events}  CloseXEvents */
-/** @typedef {typeof __propDef.slots}  CloseXSlots */
-export default class CloseX extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type CloseXProps = typeof __propDef.props;
-export type CloseXEvents = typeof __propDef.events;
-export type CloseXSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};