@geoffcox/sterling-svelte 0.0.16 → 0.0.17

package/{inputs/TextArea.svelte → TextArea.svelte}

@@ -1,5 +1,5 @@
 <script>import { v4 as uuid } from "uuid";
-import Label from "../display/Label.svelte";
+import Label from "./Label.svelte";
 export let value;
 export let resize = "none";
 export let disabled = false;
@@ -64,13 +64,13 @@ $:
 
 <style>
   .sterling-text-area {
-    background-color: var(--Input__background-color);
-    border-color: var(--Input__border-color);
-    border-radius: var(--Input__border-radius);
-    border-style: var(--Input__border-style);
-    border-width: var(--Input__border-width);
+    background-color: var(--stsv-Input__background-color);
+    border-color: var(--stsv-Input__border-color);
+    border-radius: var(--stsv-Input__border-radius);
+    border-style: var(--stsv-Input__border-style);
+    border-width: var(--stsv-Input__border-width);
     box-sizing: border-box;
-    color: var(--Input__color);
+    color: var(--stsv-Input__color);
     overflow: hidden;
     width: 100%;
     height: 100%;
@@ -83,25 +83,25 @@ $:
   }
 
   .sterling-text-area:hover {
-    background-color: var(--Input__background-color--hover);
-    border-color: var(--Input__border-color--hover);
-    color: var(--Input__color--hover);
+    background-color: var(--stsv-Input__background-color--hover);
+    border-color: var(--stsv-Input__border-color--hover);
+    color: var(--stsv-Input__color--hover);
   }
 
   .sterling-text-area:focus-wthin {
-    background-color: var(--Input__background-color--focus);
-    border-color: var(--Input__border-color--focus);
-    color: var(--Input__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);
+    background-color: var(--stsv-Input__background-color--focus);
+    border-color: var(--stsv-Input__border-color--focus);
+    color: var(--stsv-Input__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-text-area:disabled {
-    background-color: var(--Input__background-color--disabled);
-    border-color: var(---Input__border-color--disabled);
-    color: var(--Input__color--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;
   }
 
@@ -128,12 +128,12 @@ $:
   }
 
   textarea::placeholder {
-    color: var(--Display__color--faint);
+    color: var(--stsv-Display__color--faint);
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
   textarea:disabled::placeholder {
-    color: var(--Display__color--disabled);
+    color: var(--stsv-Display__color--disabled);
   }
 
   .sterling-text-area > :global(label) {

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,142 @@
+<script>import { createKeyborg } from "keyborg";
+import { createEventDispatcher, onMount, setContext } from "svelte";
+import { writable } from "svelte/store";
+import { v4 as uuid } from "uuid";
+import Label from "./Label.svelte";
+import { treeContextKey } from "./Tree.constants";
+const inputId = uuid();
+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:disabled
+  class:composed
+  class:using-keyboard={usingKeyboard}
+>
+  {#if $$slots.label}
+    <Label {disabled} for={inputId}>
+      <slot name="label" />
+    </Label>
+  {/if}
+  <div class="tree" role="tree">
+    <slot />
+  </div>
+</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: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+    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: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/Tree.svelte.d.ts

@@ -0,0 +1,25 @@
+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: {
+        label: {};
+        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>