@geoffcox/sterling-svelte 0.0.16 → 0.0.18

package/Tooltip.svelte

@@ -0,0 +1,182 @@
+<script>import { portal } from "./actions/portal";
+import { arrow, autoUpdate, computePosition, flip, offset } from "@floating-ui/dom";
+import { onMount } from "svelte";
+import { fade } from "svelte/transition";
+export let autoShow = void 0;
+export let hoverDelayMilliseconds = 1e3;
+export let open = false;
+export let placement = "top";
+export let portalTarget = void 0;
+let anchorRef;
+let tooltipRef;
+let arrowRef;
+let position = void 0;
+$:
+  reference = $$slots.default ? anchorRef?.previousElementSibling : void 0;
+const computeTooltipPosition = async () => {
+  if (reference && tooltipRef && arrowRef) {
+    const floatingOffset = Math.sqrt(2 * arrowRef.offsetWidth ** 2) / 2;
+    const middleware = [
+      offset(floatingOffset),
+      flip({ fallbackPlacements: ["top", "bottom", "right", "left"] }),
+      arrow({
+        element: arrowRef
+      })
+    ];
+    console.log(placement);
+    position = await computePosition(reference, tooltipRef, {
+      placement,
+      middleware
+    });
+  } else {
+    position = void 0;
+  }
+};
+let cleanupAutoUpdate = () => {
+};
+const autoUpdateTooltipPosition = () => {
+  cleanupAutoUpdate();
+  cleanupAutoUpdate = () => {
+  };
+  if (reference && tooltipRef) {
+    cleanupAutoUpdate = autoUpdate(reference, tooltipRef, computeTooltipPosition);
+  }
+};
+$:
+  reference, tooltipRef, autoUpdateTooltipPosition();
+$:
+  open, placement, computeTooltipPosition();
+$:
+  tipStyle = position ? `left:${position.x}px; top:${position.y}px;` : "";
+const getArrowPlacementStyle = (position2) => {
+  if (position2?.placement) {
+    switch (position2.placement) {
+      case "top":
+      case "top-start":
+      case "top-end":
+        return `bottom: -${arrowRef.offsetWidth}px;transform:translate(0, -50%) rotate(135deg);`;
+      case "right":
+      case "right-start":
+      case "right-end":
+        return `left: -${arrowRef.offsetWidth}px;transform:translate(50%, 0) rotate(225deg);`;
+      case "bottom":
+      case "bottom-start":
+      case "bottom-end":
+        return `top: -${arrowRef.offsetWidth}px;transform:translate(0, 50%) rotate(-45deg);`;
+      case "left":
+      case "left-start":
+      case "left-end":
+        return `right: -${arrowRef.offsetWidth}px;transform:translate(-50%, 0) rotate(45deg);`;
+    }
+  }
+  return "";
+};
+const getArrowOffsetStyle = (position2) => {
+  const arrow2 = position2?.middlewareData?.arrow;
+  if (arrow2) {
+    if (arrow2.x !== null && arrow2.x !== void 0) {
+      return `left: ${arrow2.x}px;`;
+    } else if (arrow2.y !== null && arrow2.y !== void 0) {
+      return `top: ${arrow2.y}px;`;
+    }
+  }
+  return "";
+};
+$:
+  arrowStyle = getArrowPlacementStyle(position) + getArrowOffsetStyle(position);
+const show = () => open = true;
+const hide = () => open = false;
+const toggle = () => open = !open;
+const delayShow = () => {
+  hoverDelayMilliseconds === 0 ? show() : setTimeout(() => {
+    show();
+  }, hoverDelayMilliseconds);
+};
+let cleanupAutoShowUpdate = () => {
+};
+const autoShowUpdate = () => {
+  cleanupAutoShowUpdate();
+  cleanupAutoShowUpdate = () => {
+  };
+  const element = reference;
+  if (element) {
+    switch (autoShow) {
+      case "click":
+        element.addEventListener("click", toggle);
+        cleanupAutoShowUpdate = () => element.removeEventListener("click", toggle);
+        break;
+      case "hover":
+        element.addEventListener("mouseenter", delayShow);
+        element.addEventListener("mouseleave", hide);
+        cleanupAutoShowUpdate = () => {
+          element.removeEventListener("mouseenter", delayShow);
+          element.removeEventListener("mouseleave", hide);
+        };
+    }
+  }
+};
+$:
+  reference, autoShow, autoShowUpdate();
+let mounted = false;
+onMount(() => {
+  mounted = true;
+  portalTarget = portalTarget || document.body;
+  autoUpdateTooltipPosition();
+  computeTooltipPosition();
+  autoShowUpdate();
+});
+</script>
+
+<slot />
+<div class="sterling-tooltip-anchor" bind:this={anchorRef} />
+
+{#if open}
+  <div
+    class="sterling-tooltip-portal"
+    use:portal={{ target: document.body }}
+    transition:fade={{ duration: 250 }}
+  >
+    <div bind:this={tooltipRef} class="sterling-tooltip" style={tipStyle}>
+      <div class="arrow" bind:this={arrowRef} style={arrowStyle} />
+      <slot name="tip" />
+    </div>
+  </div>
+{/if}
+
+<style>
+  .sterling-tooltip-anchor {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+
+  .sterling-tooltip-portal {
+    position: relative;
+    overflow: visible;
+  }
+
+  .sterling-tooltip {
+    background-color: var(--stsv-Common__background-color);
+    border-color: var(--stsv-Common__border-color);
+    border-radius: var(--stsv-Common__border-radius);
+    border-style: var(--stsv-Common__border-style);
+    border-width: var(--stsv-Common__border-width);
+    color: var(--stsv-Common__color);
+    position: absolute;
+    overflow: visible;
+    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
+    z-index: 4;
+  }
+
+  .arrow {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background-color: var(--stsv-Common__background-color);
+    border-color: var(--stsv-Common__border-color);
+    border-radius: var(--stsv-Common__border-radius);
+    border-style: var(--stsv-Common__border-style);
+    border-width: var(--stsv-Common__border-width);
+    clip-path: polygon(0% 1%, 100% 1%, 100% 100%, 0% 1%);
+  }
+</style>

package/Tooltip.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TooltipAutoShow } from './Tooltip.types';
+declare const __propDef: {
+    props: {
+        autoShow?: TooltipAutoShow | undefined;
+        hoverDelayMilliseconds?: number | undefined;
+        open?: boolean | undefined;
+        placement?: import("@floating-ui/core").Placement | undefined;
+        portalTarget?: HTMLElement | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        tip: {};
+    };
+};
+export type TooltipProps = typeof __propDef.props;
+export type TooltipEvents = typeof __propDef.events;
+export type TooltipSlots = typeof __propDef.slots;
+export default class Tooltip extends SvelteComponentTyped<TooltipProps, TooltipEvents, TooltipSlots> {
+}
+export {};

package/Tooltip.types.d.ts

@@ -0,0 +1,3 @@
+import type { Placement } from '@floating-ui/dom';
+export type TooltipAutoShow = 'hover' | 'click';
+export type TooltipPlacement = Placement;

package/Tooltip.types.js

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

package/Tree.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const treeContextKey = "sterlingTree";
+export declare const treeItemContextKey = "sterlingTreeItem";

package/Tree.constants.js

@@ -0,0 +1,2 @@
+export const treeContextKey = 'sterlingTree';
+export const treeItemContextKey = 'sterlingTreeItem';

package/Tree.svelte

@@ -0,0 +1,114 @@
+<script>import { createKeyborg } from "keyborg";
+import { createEventDispatcher, onMount, setContext } from "svelte";
+import { writable } from "svelte/store";
+import { treeContextKey } from "./Tree.constants";
+export let composed = false;
+export let disabled = false;
+export let selectedValue = void 0;
+export let expandedValues = [];
+const selectedValueStore = writable(selectedValue);
+const expandedValuesStore = writable(expandedValues);
+const disabledStore = writable(disabled);
+setContext(treeContextKey, {
+  expandedValues: expandedValuesStore,
+  selectedValue: selectedValueStore,
+  disabled: disabledStore
+});
+const dispatch = createEventDispatcher();
+const raiseExpandCollapse = (expandedValues2) => {
+  dispatch("expandCollapse", { expandedValues: expandedValues2 });
+};
+const raiseSelect = (selectedValue2) => {
+  dispatch("select", { selectedValue: selectedValue2 });
+};
+let keyborg = createKeyborg(window);
+let usingKeyboard = keyborg.isNavigatingWithKeyboard();
+const keyborgHandler = (value) => {
+  usingKeyboard = value;
+};
+$: {
+  selectedValueStore.set(selectedValue);
+}
+$: {
+  selectedValue = $selectedValueStore;
+  raiseSelect($selectedValueStore);
+}
+$: {
+  expandedValuesStore.set(expandedValues);
+}
+$: {
+  expandedValues = $expandedValuesStore;
+  raiseExpandCollapse($expandedValuesStore);
+}
+$: {
+  disabledStore.set(disabled);
+}
+onMount(() => {
+  keyborg.subscribe(keyborgHandler);
+  return () => {
+    keyborg.unsubscribe(keyborgHandler);
+  };
+});
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<div
+  aria-disabled={disabled}
+  class="sterling-tree"
+  class:composed
+  class:disabled
+  class:using-keyboard={usingKeyboard}
+  role="tree"
+>
+  <slot />
+</div>
+
+<style>
+  .sterling-tree {
+    background-color: var(--stsv-Common__background-color);
+    border-color: var(--stsv-Common__border-color);
+    border-radius: var(--stsv-Common__border-radius);
+    border-style: var(--stsv-Common__border-style);
+    border-width: var(--stsv-Common__border-width);
+    box-sizing: border-box;
+    color: var(--stsv-Common__color);
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    margin: 0;
+    position: relative;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .sterling-tree:hover {
+    border-color: var(--stsv-Common__border-color--hover);
+    color: var(--stsv-Common__color--hover);
+  }
+
+  .sterling-tree.using-keyboard:focus-within {
+    border-color: var(--stsv-Button__border-color--focus);
+    color: var(--stsv-Common__color--focus);
+    outline-color: var(--stsv-Common__outline-color);
+    outline-offset: var(--stsv-Common__outline-offset);
+    outline-style: var(--stsv-Common__outline-style);
+    outline-width: var(--stsv-Common__outline-width);
+  }
+
+  .sterling-tree.disabled {
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv--Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
+    cursor: not-allowed;
+  }
+
+  .sterling-tree.composed,
+  .sterling-tree.composed:hover,
+  .sterling-tree.composed.using-keyboard:focus-visible,
+  .sterling-tree.composed.disabled {
+    border: none;
+    outline: none;
+  }
+</style>

package/Tree.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        composed?: boolean | undefined;
+        disabled?: boolean | undefined;
+        selectedValue?: string | undefined;
+        expandedValues?: string[] | undefined;
+    };
+    events: {
+        expandCollapse: CustomEvent<any>;
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TreeProps = typeof __propDef.props;
+export type TreeEvents = typeof __propDef.events;
+export type TreeSlots = typeof __propDef.slots;
+export default class Tree extends SvelteComponentTyped<TreeProps, TreeEvents, TreeSlots> {
+}
+export {};

package/Tree.types.d.ts

@@ -0,0 +1,28 @@
+import type { Readable, Writable } from 'svelte/store';
+/**
+ * Context for a Tree and its tree items.
+ */
+export type TreeContext = {
+    /**
+     * The IDs of the expanded ttree tree items.
+     */
+    expandedValues: Writable<string[]>;
+    /**
+     * The ID of the selected tree tree item.
+     */
+    selectedValue: Writable<string | undefined>;
+    /** If the tree is disabled */
+    disabled: Readable<boolean>;
+};
+/**
+ * The context for a tree item.
+ */
+export type TreeItemContext = {
+    /**
+     * How many levels deep this tree item is in the tree hierarchy.
+     * A top level item's depth is zero.
+     */
+    depth: number;
+    /** If the tree item is disabled */
+    disabled: Readable<boolean>;
+};

package/Tree.types.js

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

package/{containers/TreeChevron.svelte → TreeChevron.svelte}

@@ -1,7 +1,7 @@
 <script>import { onMount } from "svelte";
 export let expanded = false;
 export let hasChildren = false;
-let lastValue = expanded;
+let previousExpanded = expanded;
 let mounted = false;
 onMount(() => {
   setTimeout(() => {
@@ -10,10 +10,10 @@ onMount(() => {
 });
 let animate = false;
 $: {
-  if (expanded !== lastValue && mounted) {
+  if (expanded !== previousExpanded && mounted) {
     animate = true;
   }
-  lastValue = expanded;
+  previousExpanded = expanded;
 }
 </script>
 

package/TreeItem.svelte

@@ -0,0 +1,276 @@
+<script>import { getContext, setContext } from "svelte";
+import { slide } from "svelte/transition";
+import { treeContextKey, treeItemContextKey } from "./Tree.constants";
+import TreeItemDisplay from "./TreeItemDisplay.svelte";
+import { writable } from "svelte/store";
+export let disabled = false;
+export let value;
+const {
+  expandedValues,
+  selectedValue,
+  disabled: treeDisabled
+} = getContext(treeContextKey);
+const { depth = 0, disabled: parentDisabled } = getContext(treeItemContextKey) || {};
+let treeItemRef;
+$:
+  hasChildren = $$slots.default;
+$:
+  expanded = $expandedValues.includes(value);
+$:
+  selected = $selectedValue === value;
+$:
+  _disabled = disabled || $parentDisabled || $treeDisabled;
+const disabledStore = writable(_disabled);
+$: {
+  disabledStore.set(_disabled);
+}
+const collapseItem = (index) => {
+  if (!disabled) {
+    index = index ?? $expandedValues.findIndex((id) => id === value);
+    if (index !== -1) {
+      expandedValues.set([
+        ...$expandedValues.slice(0, index),
+        ...$expandedValues.slice(index + 1)
+      ]);
+      return true;
+    }
+  }
+  return false;
+};
+const expandItem = (index) => {
+  if (!disabled) {
+    index = index ?? $expandedValues.findIndex((id) => id === value);
+    if (index === -1) {
+      expandedValues.set([...$expandedValues, value]);
+      return true;
+    }
+  }
+  return false;
+};
+const toggleExpanded = () => {
+  if (!disabled) {
+    const index = $expandedValues.findIndex((id) => id === value);
+    return index !== -1 ? collapseItem(index) : expandItem(index);
+  }
+  return false;
+};
+const focusItem = (treeItemElement) => {
+  if (!_disabled) {
+    const item = treeItemElement.querySelector(".item");
+    item?.focus();
+  }
+};
+const selectItemById = (value2) => {
+  if (!_disabled) {
+    selectedValue.set(value2);
+  }
+};
+export const selectItem = () => {
+  if (!_disabled) {
+    selectItemById(value);
+  }
+};
+const selectParentItem = () => {
+  if (!_disabled) {
+    let candidate = treeItemRef.parentElement?.closest('[role="treeitem"][data-value]');
+    let candidateValue = candidate?.getAttribute("data-value");
+    if (candidateValue && candidate) {
+      selectItemById(candidateValue);
+      focusItem(candidate);
+      return true;
+    }
+  }
+  return false;
+};
+const selectNextItem = () => {
+  if (!_disabled) {
+    let candidateValue = void 0;
+    let candidate = treeItemRef.querySelector('[role="treeitem"][data-value]');
+    candidateValue = candidate?.getAttribute("data-value");
+    if (!candidateValue) {
+      candidate = treeItemRef.nextElementSibling;
+      while (candidate && candidate.getAttribute("data-value") === null) {
+        candidate = candidate.nextElementSibling;
+      }
+      candidateValue = candidate?.getAttribute("data-value");
+    }
+    if (!candidateValue) {
+      let ancestor = treeItemRef.parentElement?.closest(
+        '[role="treeitem"][data-value]'
+      );
+      while (ancestor && !candidateValue) {
+        candidate = ancestor?.nextElementSibling;
+        candidateValue = candidate?.getAttribute("data-value");
+        ancestor = ancestor.parentElement?.closest('[role="treeitem"][data-value]');
+      }
+    }
+    if (candidateValue && candidate) {
+      selectItemById(candidateValue);
+      focusItem(candidate);
+      return true;
+    }
+  }
+  return false;
+};
+const selectPreviousItem = () => {
+  if (!_disabled) {
+    let candidate = void 0;
+    let candidateValue = void 0;
+    const previousSibling = treeItemRef?.previousElementSibling;
+    if (previousSibling) {
+      const decendants = previousSibling.querySelectorAll('[role="treeitem"][data-value]');
+      if (decendants) {
+        candidate = decendants[decendants.length - 1];
+        candidateValue = candidate?.getAttribute("data-value");
+      }
+      if (!candidateValue) {
+        candidate = previousSibling;
+        candidateValue = candidate?.getAttribute("data-value");
+      }
+    }
+    if (!candidateValue) {
+      candidate = treeItemRef.parentElement?.closest('[role="treeitem"][data-value]');
+      candidateValue = candidate?.getAttribute("data-value");
+    }
+    if (candidateValue && candidate) {
+      selectItemById(candidateValue);
+      focusItem(candidate);
+      return true;
+    }
+  }
+  return false;
+};
+const onClick = () => {
+  if (!_disabled) {
+    toggleExpanded();
+    selectItem();
+  }
+};
+const onKeydown = (event) => {
+  if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
+    switch (event.key) {
+      case "Enter":
+      case " ":
+        if (toggleExpanded()) {
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        }
+        break;
+      case "ArrowRight":
+        if (hasChildren) {
+          if (expanded) {
+            if (selectNextItem()) {
+              event.preventDefault();
+              event.stopPropagation();
+              return false;
+            }
+          } else if (expandItem()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return false;
+          }
+        }
+        break;
+      case "ArrowLeft":
+        if (hasChildren && expanded) {
+          if (collapseItem()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return false;
+          }
+        } else if (selectParentItem()) {
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        }
+        break;
+      case "ArrowUp":
+        if (selectPreviousItem()) {
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        }
+        break;
+      case "ArrowDown":
+        if (selectNextItem()) {
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        }
+        break;
+    }
+  }
+};
+setContext(treeItemContextKey, { depth: depth + 1, disabled: disabledStore });
+</script>
+
+<!--
+@component
+A item in a Tree displaying the item and children.
+  -->
+<div
+  aria-selected={selected ? true : undefined}
+  aria-expanded={expanded}
+  bind:this={treeItemRef}
+  class="sterling-tree-item"
+  class:disabled={_disabled}
+  data-value={value}
+  role="treeitem"
+  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}
+>
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <div
+    class="item"
+    class:selected
+    tabindex={selected ? 0 : -1}
+    on:click={onClick}
+    on:keydown={onKeydown}
+  >
+    <slot name="item" {depth} disabled={_disabled} {expanded} {hasChildren} {selected} {value}>
+      <TreeItemDisplay {depth} disabled={_disabled} {expanded} {hasChildren} {selected} {value}>
+        <svelte:fragment let:depth let:disabled let:expanded let:hasChildren let:selected let:value>
+          <slot name="label" {depth} {disabled} {expanded} {hasChildren} {selected} {value}
+            >{value}</slot
+          >
+        </svelte:fragment>
+      </TreeItemDisplay>
+    </slot>
+  </div>
+  {#if expanded && hasChildren}
+    <div class="children" transition:slide={{ duration: 200 }} role="group">
+      <slot />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .item {
+    outline: none;
+  }
+</style>