@geoffcox/sterling-svelte 0.0.15 → 0.0.17

package/containers/TabList.svelte

@@ -1,126 +0,0 @@
-<script>import { createEventDispatcher, setContext } from "svelte";
-import Tab from "./Tab.svelte";
-import { writable } from "svelte/store";
-import { tabListContextKey } from "./Tabs.constants";
-export let disabled = false;
-export let tabs = [];
-export let vertical = false;
-export let selectedTabId = void 0;
-export let selectionFollowsFocus = false;
-export let selectedTab = void 0;
-const selectedTabIdStore = writable(selectedTabId);
-const selectionFollowsFocusStore = writable(selectionFollowsFocus);
-const verticalStore = writable(vertical);
-const disabledStore = writable(disabled);
-setContext(tabListContextKey, {
-  disabled: disabledStore,
-  selectedTabId: selectedTabIdStore,
-  selectionFollowsFocus: selectionFollowsFocusStore,
-  vertical: verticalStore
-});
-const dispatch = createEventDispatcher();
-const raiseSelected = (tabId, tab) => {
-  dispatch("select", { tabId, tab });
-};
-$:
-  disabledStore.set(disabled);
-$:
-  selectedTabIdStore.set(selectedTabId);
-$: {
-  selectedTabId = $selectedTabIdStore;
-  selectedTab = tabs.find((tab) => tab.tabId === selectedTabId);
-  raiseSelected(selectedTabId, selectedTab);
-}
-$:
-  selectionFollowsFocusStore.set(selectionFollowsFocus);
-$:
-  verticalStore.set(vertical);
-</script>
-
-<!--
-  @component
-  A list of items where a single item can be selected.
-    -->
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<div
-  class="sterling-tab-list"
-  role="tablist"
-  class:vertical
-  class:disabled
-  on:blur
-  on:click
-  on:copy
-  on:cut
-  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:scroll
-  on:wheel
-  on:paste
-  {...$$restProps}
->
-  {#each tabs as tab (tab.tabId)}
-    <Tab data={tab}>
-      <svelte:fragment let:data let:disabled let:selected let:tabId let:text>
-        <slot name="tabContent" {data} {disabled} {selected} {tabId} {text}>
-          <div class="text">
-            {text}
-          </div>
-        </slot>
-      </svelte:fragment>
-    </Tab>
-  {/each}
-  <slot />
-</div>
-
-<style>
-  .sterling-tab-list {
-    box-sizing: border-box;
-    display: grid;
-    margin: 0;
-    padding: calc(2 * var(--Common__outline-width));
-  }
-
-  .sterling-tab-list:not(.vertical) {
-    column-gap: 0.5em;
-    grid-auto-flow: column;
-    grid-template-columns: repeat(auto-fill, auto);
-    grid-template-rows: 1fr;
-    overflow-x: scroll;
-    overflow-y: hidden;
-  }
-
-  .sterling-tab-list.vertical {
-    grid-auto-flow: row;
-    grid-template-rows: auto;
-    grid-template-columns: 1fr;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    row-gap: 0.5em;
-  }
-
-  .sterling-tab-list:hover {
-    color: var(--Common__color--hover);
-  }
-
-  .sterling-tab-list.vertical .text {
-    padding-top: 0.25em;
-  }
-
-  @media (prefers-reduced-motion) {
-    .sterling-tab-list {
-      transition: none;
-    }
-  }
-</style>

package/containers/Tabs.types.d.ts

@@ -1,12 +0,0 @@
-import type { Readable, Writable } from 'svelte/store';
-export type TabData<T> = T & {
-    tabId: string;
-    text?: string;
-    disabled?: boolean;
-};
-export type TabListContext<T> = {
-    disabled: Readable<boolean>;
-    selectedTabId: Writable<string | undefined>;
-    selectionFollowsFocus: Readable<boolean>;
-    vertical: Readable<boolean>;
-};

package/containers/Tree.constants.d.ts

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

package/containers/Tree.constants.js

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

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;
-};