@geoffcox/sterling-svelte 0.0.15 → 0.0.17

package/List.svelte

@@ -0,0 +1,324 @@
+<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 { listContextKey } from "./List.constants";
+export let composed = false;
+export let disabled = false;
+export let horizontal = false;
+export let selectedValue = void 0;
+const listId = `list-${uuid()}`;
+let listRef;
+let lastSelectedItemRef;
+const disabledStore = writable(disabled);
+const horizontalStore = writable(horizontal);
+const selectedValueStore = writable(selectedValue);
+$: {
+  disabledStore.set(disabled);
+}
+$: {
+  horizontalStore.set(horizontal);
+}
+$: {
+  selectedValueStore.set(selectedValue);
+}
+$: {
+  selectedValue = $selectedValueStore;
+}
+const dispatch = createEventDispatcher();
+const raiseSelect = (value) => {
+  dispatch("select", { value });
+};
+$: {
+  raiseSelect(selectedValue);
+}
+let keyborg = createKeyborg(window);
+let usingKeyboard = keyborg.isNavigatingWithKeyboard();
+const keyborgHandler = (value) => {
+  usingKeyboard = value;
+};
+export const focus = () => {
+  listRef?.focus();
+};
+export const scrollToSelectedItem = () => {
+  const element = getSelectedItemElement();
+  element?.scrollIntoView({ block: "nearest", inline: "nearest" });
+};
+const isElementListItem = (candidate) => {
+  return candidate && candidate.getAttribute("data-value") !== null && candidate.getAttribute("data-value") !== void 0 && candidate.getAttribute("role") === "listitem";
+};
+const getSelectedItemElement = () => {
+  if (isElementListItem(lastSelectedItemRef) && lastSelectedItemRef?.getAttribute("data-value") === selectedValue && lastSelectedItemRef?.closest('[role="list"]') === listRef) {
+    return lastSelectedItemRef;
+  } else {
+    return listRef?.querySelector("[data-value][aria-selected=true]");
+  }
+};
+const selectItem = (value, element) => {
+  selectedValueStore.set(value);
+  lastSelectedItemRef = element;
+  element.scrollIntoView({ block: "nearest", inline: "nearest" });
+};
+export const selectFirstItem = () => {
+  let candidate = listRef?.firstElementChild;
+  while (candidate && !isElementListItem(candidate)) {
+    candidate = candidate.nextElementSibling;
+  }
+  let candidateValue = candidate?.getAttribute("data-value");
+  if (candidateValue && candidate) {
+    selectItem(candidateValue, candidate);
+    return true;
+  }
+  return false;
+};
+export const selectPreviousItem = () => {
+  let selectedItem = getSelectedItemElement();
+  let candidate = selectedItem?.previousElementSibling;
+  while (candidate && !isElementListItem(candidate)) {
+    candidate = candidate.previousElementSibling;
+  }
+  let candidateValue = candidate?.getAttribute("data-value");
+  if (candidateValue && candidate) {
+    selectItem(candidateValue, candidate);
+    return true;
+  }
+  return false;
+};
+export const selectNextItem = () => {
+  let selectedItem = getSelectedItemElement();
+  let candidate = selectedItem?.nextElementSibling;
+  while (candidate && !isElementListItem(candidate)) {
+    candidate = candidate.nextElementSibling;
+  }
+  let candidateValue = candidate?.getAttribute("data-value");
+  if (candidateValue && candidate) {
+    selectItem(candidateValue, candidate);
+    return true;
+  }
+  return false;
+};
+export const selectLastItem = () => {
+  let candidate = listRef?.lastElementChild;
+  while (candidate && !isElementListItem(candidate)) {
+    candidate = candidate.previousElementSibling;
+  }
+  let candidateValue = candidate?.getAttribute("data-value");
+  if (candidateValue && candidate) {
+    selectItem(candidateValue, candidate);
+    return true;
+  }
+  return false;
+};
+onMount(() => {
+  keyborg.subscribe(keyborgHandler);
+  return () => {
+    keyborg.unsubscribe(keyborgHandler);
+  };
+});
+const onClick = (event) => {
+  if (!disabled) {
+    let candidate = event.target;
+    let candidateValue = candidate?.getAttribute("data-value");
+    if (candidateValue === void 0 || candidateValue === null) {
+      candidate = candidate?.closest("[data-value]");
+      candidateValue = candidate?.getAttribute("data-value");
+    }
+    if (candidateValue && candidate) {
+      selectItem(candidateValue, candidate);
+    }
+  }
+};
+const onKeydown = (event) => {
+  if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
+    switch (event.key) {
+      case "Home":
+        selectFirstItem();
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      case "End":
+        selectLastItem();
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      case "ArrowLeft":
+        if (horizontal) {
+          selectedValue !== void 0 ? selectPreviousItem() : selectLastItem();
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      case "ArrowRight":
+        if (horizontal) {
+          selectedValue !== void 0 ? selectNextItem() : selectFirstItem();
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      case "ArrowUp":
+        if (!horizontal) {
+          selectedValue !== void 0 ? selectPreviousItem() : selectLastItem();
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      case "ArrowDown":
+        if (!horizontal) {
+          selectedValue !== void 0 ? selectNextItem() : selectFirstItem();
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+    }
+  }
+};
+setContext(listContextKey, {
+  disabled: disabledStore,
+  selectedValue: selectedValueStore,
+  horizontal: horizontalStore
+});
+</script>
+
+<!--
+@component
+A list of items where a single item can be selected.
+  -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<div
+  class="sterling-list"
+  class:horizontal
+  class:disabled
+  class:composed
+  class:using-keyboard={usingKeyboard}
+>
+  {#if $$slots.label}
+    <Label {disabled} for={listId}>
+      <slot name="label" {composed} {disabled} {horizontal} {selectedValue} />
+    </Label>
+  {/if}
+  <div
+    aria-activedescendant={selectedValue}
+    aria-orientation={horizontal ? 'horizontal' : 'vertical'}
+    bind:this={listRef}
+    class="list"
+    class:disabled
+    class:horizontal
+    id={listId}
+    role="list"
+    tabindex={0}
+    on:blur
+    on:click
+    on:click={onClick}
+    on:copy
+    on:cut
+    on:dblclick
+    on:focus
+    on:focusin
+    on:focusout
+    on:keydown
+    on:keydown={onKeydown}
+    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}
+  >
+    <slot {composed} {disabled} {horizontal} {selectedValue} />
+  </div>
+</div>
+
+<style>
+  .sterling-list {
+    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;
+    padding: 0;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .sterling-list.horizontal {
+    height: unset;
+    width: 100%;
+  }
+
+  .sterling-list:hover {
+    border-color: var(--stsv-Common__border-color--hover);
+    color: var(--stsv-Common__color--hover);
+  }
+
+  .sterling-list.using-keyboard:focus-within {
+    border-color: var(--stsv-Common__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-list.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-list.composed,
+  .sterling-list:hover.composed,
+  .sterling-list:focus-visible.composed,
+  .sterling-list.disabled.composed {
+    background: none;
+    border: none;
+    outline: none;
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    grid-row: 2 / span 1;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    outline: none;
+    position: relative;
+  }
+
+  .list.horizontal {
+    flex-direction: row;
+    overflow-x: scroll;
+    overflow-y: hidden;
+  }
+
+  .sterling-list > :global(label) {
+    font-size: 0.7em;
+    margin: 0.5em 0.7em;
+  }
+
+  .sterling-list > :global(label):empty {
+    margin: 0;
+  }
+
+  @media (prefers-reduced-motion) {
+    .sterling-list {
+      transition: none;
+    }
+  }
+</style>

package/List.svelte.d.ts

@@ -0,0 +1,69 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        composed?: boolean | undefined;
+        disabled?: boolean | undefined;
+        horizontal?: boolean | undefined;
+        selectedValue?: string | undefined;
+        focus?: (() => void) | undefined;
+        scrollToSelectedItem?: (() => void) | undefined;
+        selectFirstItem?: (() => boolean) | undefined;
+        selectPreviousItem?: (() => boolean) | undefined;
+        selectNextItem?: (() => boolean) | undefined;
+        selectLastItem?: (() => boolean) | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        copy: ClipboardEvent;
+        cut: ClipboardEvent;
+        dblclick: MouseEvent;
+        focus: FocusEvent;
+        focusin: FocusEvent;
+        focusout: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mousedown: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mousemove: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
+        mouseup: MouseEvent;
+        scroll: Event;
+        wheel: WheelEvent;
+        paste: ClipboardEvent;
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label: {
+            composed: boolean;
+            disabled: boolean;
+            horizontal: boolean;
+            selectedValue: string | undefined;
+        };
+        default: {
+            composed: boolean;
+            disabled: boolean;
+            horizontal: boolean;
+            selectedValue: string | undefined;
+        };
+    };
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+/** A list of items where a single item can be selected. */
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+    get focus(): () => void;
+    get scrollToSelectedItem(): () => void;
+    get selectFirstItem(): () => boolean;
+    get selectPreviousItem(): () => boolean;
+    get selectNextItem(): () => boolean;
+    get selectLastItem(): () => boolean;
+}
+export {};

package/List.types.d.ts

@@ -0,0 +1,6 @@
+import type { Readable, Writable } from 'svelte/store';
+export type ListContext = {
+    disabled: Readable<boolean>;
+    selectedValue: Writable<string | undefined>;
+    horizontal: Readable<boolean>;
+};

package/ListItem.svelte

@@ -0,0 +1,90 @@
+<script>import { getContext } from "svelte";
+import { v4 as uuid } from "uuid";
+import { listContextKey } from "./List.constants";
+export let disabled = false;
+export let value;
+const {
+  disabled: listDisabled,
+  selectedValue,
+  horizontal
+} = getContext(listContextKey);
+let itemRef;
+$:
+  _disabled = disabled || $listDisabled;
+$:
+  selected = $selectedValue === value;
+</script>
+
+<div
+  aria-selected={selected}
+  bind:this={itemRef}
+  class="sterling-list-item"
+  class:disabled={_disabled}
+  class:selected
+  data-value={value}
+  role="listitem"
+  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}
+>
+  <slot {disabled} {horizontal} {selected} {value}>{value}</slot>
+</div>
+
+<style>
+  .sterling-list-item {
+    background-color: transparent;
+    box-sizing: border-box;
+    color: var(--stsv-Input__color);
+    cursor: pointer;
+    margin: 0;
+    padding: 0.5em;
+    outline: none;
+    text-overflow: ellipsis;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+    white-space: nowrap;
+  }
+
+  .sterling-list-item:not(.disabled):hover {
+    background-color: var(--stsv-Button__background-color--hover);
+    color: var(--stsv-Button__color--hover);
+  }
+
+  .sterling-list-item.selected {
+    background-color: var(--stsv-Input__background-color--selected);
+    color: var(--stsv-Input__color--selected);
+  }
+
+  .sterling-list-item.disabled {
+    color: var(--stsv-Common__color--disabled);
+    cursor: not-allowed;
+  }
+
+  @media (prefers-reduced-motion) {
+    .sterling-list-item {
+      transition: none;
+    }
+  }
+</style>

package/ListItem.svelte.d.ts

@@ -0,0 +1,51 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        disabled?: boolean | undefined;
+        value: string;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        dblclick: MouseEvent;
+        focus: FocusEvent;
+        focusin: FocusEvent;
+        focusout: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mousedown: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mousemove: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
+        mouseup: MouseEvent;
+        pointercancel: PointerEvent;
+        pointerdown: PointerEvent;
+        pointerenter: PointerEvent;
+        pointerleave: PointerEvent;
+        pointermove: PointerEvent;
+        pointerover: PointerEvent;
+        pointerout: PointerEvent;
+        pointerup: PointerEvent;
+        wheel: WheelEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            disabled: boolean;
+            horizontal: import("svelte/store").Readable<boolean>;
+            selected: boolean;
+            value: string;
+        };
+    };
+};
+export type ListItemProps = typeof __propDef.props;
+export type ListItemEvents = typeof __propDef.events;
+export type ListItemSlots = typeof __propDef.slots;
+export default class ListItem extends SvelteComponentTyped<ListItemProps, ListItemEvents, ListItemSlots> {
+}
+export {};

package/Menu.svelte

@@ -0,0 +1,115 @@
+<script>import { getContext, onMount } from "svelte";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { portal } from "./actions/portal";
+import { menuItemContextKey } from "./Menus.constants";
+export let reference;
+export let open = false;
+let menuRef;
+let menuPosition = { x: 0, y: 0 };
+const { rootValue, depth = 0 } = getContext(menuItemContextKey) || {};
+const ensurePortalHost = () => {
+  let host = document.querySelector("#SterlingMenuPortal");
+  if (!host) {
+    host = document.createElement("div");
+    host.id = "SterlingMenuPortal";
+    host.style.overflow = "visible";
+    document.body.append(host);
+  }
+  return host;
+};
+const portalTarget = ensurePortalHost();
+let bodyHeight = 0;
+const resizeObserver = new ResizeObserver((entries) => {
+  bodyHeight = entries[0].target.clientHeight;
+});
+const menuPlacement = depth > 1 ? "right-start" : "bottom-start";
+const middleware = [
+  offset({ mainAxis: -2 }),
+  flip(),
+  shift({ padding: 0, mainAxis: true, crossAxis: true })
+];
+const computeMenuPosition = async () => {
+  if (reference && menuRef) {
+    menuPosition = await computePosition(reference, menuRef, {
+      placement: menuPlacement,
+      middleware
+    });
+  } else {
+    menuPosition = { x: 0, y: 0 };
+  }
+};
+let cleanupAutoUpdate = () => {
+};
+const autoUpdateMenuPosition = () => {
+  cleanupAutoUpdate();
+  if (reference && menuRef) {
+    cleanupAutoUpdate = autoUpdate(reference, menuRef, computeMenuPosition);
+  }
+};
+$:
+  menuRef, reference, autoUpdateMenuPosition();
+$:
+  open, bodyHeight, computeMenuPosition();
+onMount(() => {
+  resizeObserver.observe(document.body);
+  return () => {
+    resizeObserver.unobserve(document.body);
+  };
+});
+</script>
+
+{#if open}
+  <div
+    class="sterling-menu-portal"
+    data-root-value={rootValue}
+    use:portal={{ target: portalTarget }}
+  >
+    <div
+      bind:this={menuRef}
+      class="sterling-menu"
+      role="menu"
+      class:open
+      {...$$restProps}
+      style="left:{menuPosition.x}px; top:{menuPosition.y}px"
+    >
+      <slot />
+    </div>
+  </div>
+{/if}
+
+<style>
+  .sterling-menu-portal {
+    position: relative;
+    overflow: visible;
+    background: rgba(255, 0, 0, 0.1);
+  }
+
+  .sterling-menu {
+    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;
+    position: absolute;
+    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
+    overflow: hidden;
+    width: max-content;
+    height: fit-content;
+    z-index: 1;
+    top: 0;
+    left: 0;
+
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    row-gap: calc(2 * var(--stsv-Common__outline-width));
+    padding: 0.25em;
+  }
+
+  .sterling-menu.open {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+  }
+</style>

package/Menu.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        reference: HTMLElement;
+        open?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type MenuProps = typeof __propDef.props;
+export type MenuEvents = typeof __propDef.events;
+export type MenuSlots = typeof __propDef.slots;
+export default class Menu extends SvelteComponentTyped<MenuProps, MenuEvents, MenuSlots> {
+}
+export {};