@geoffcox/sterling-svelte 0.0.15 → 0.0.17

package/MenuBar.svelte

@@ -0,0 +1,97 @@
+<script>import { createEventDispatcher, setContext } from "svelte";
+import { menuBarContextKey, menuItemContextKey } from "./Menus.constants";
+import { writable } from "svelte/store";
+const dispatch = createEventDispatcher();
+const raiseClose = (value) => {
+  dispatch("close", { value });
+};
+const raiseOpen = (value) => {
+  dispatch("open", { value });
+};
+const raiseSelect = (value) => {
+  dispatch("select", { value });
+};
+const children = writable([]);
+const openPreviousChild = (currentValue) => {
+  const index = $children?.findIndex((menuItem) => menuItem.value === currentValue);
+  if (index !== -1) {
+    const focusIndex = index === 0 ? $children.length - 1 : index - 1;
+    $children[focusIndex].focus();
+    $children[focusIndex].open();
+  }
+};
+const openNextChild = (currentValue) => {
+  const index = $children?.findIndex((menuItem) => menuItem.value === currentValue);
+  if (index !== -1) {
+    const focusIndex = (index + 1) % $children.length;
+    $children[focusIndex].focus();
+    $children[focusIndex].open();
+  }
+};
+const focusChild = (value) => {
+  const focusIndex = $children?.findIndex((menuItem) => menuItem.value === value);
+  if (focusIndex !== -1) {
+    $children[focusIndex].focus();
+  }
+};
+setContext(menuItemContextKey, {
+  register: (menuItem) => {
+    children.set([...$children, menuItem]);
+  },
+  unregister: (menuItem) => {
+    children.set($children.filter((x) => x.value !== menuItem.value));
+  },
+  closeMenu: (recursive) => {
+  },
+  focusPrevious: openPreviousChild,
+  focusNext: openNextChild,
+  onClose: raiseClose,
+  onOpen: raiseOpen,
+  onSelect: raiseSelect
+});
+setContext(menuBarContextKey, {
+  openPreviousMenu: openPreviousChild,
+  openNextMenu: openNextChild
+});
+</script>
+
+<div
+  class="sterling-menu-bar"
+  role="menubar"
+  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}
+>
+  <slot />
+</div>
+
+<style>
+  .sterling-menu-bar {
+    background-color: transparent;
+    align-items: center;
+    align-content: stretch;
+    display: flex;
+    gap: 1em;
+    justify-content: flex-start;
+    justify-items: flex-start;
+  }
+</style>

package/MenuBar.svelte.d.ts

@@ -0,0 +1,43 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    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;
+        close: CustomEvent<any>;
+        open: CustomEvent<any>;
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type MenuBarProps = typeof __propDef.props;
+export type MenuBarEvents = typeof __propDef.events;
+export type MenuBarSlots = typeof __propDef.slots;
+export default class MenuBar extends SvelteComponentTyped<MenuBarProps, MenuBarEvents, MenuBarSlots> {
+}
+export {};

package/MenuButton.svelte

@@ -0,0 +1,102 @@
+<script>import { v4 as uuid } from "uuid";
+import { createEventDispatcher, getContext, setContext } from "svelte";
+import { writable } from "svelte/store";
+import Button from "./Button.svelte";
+import Menu from "./Menu.svelte";
+import { menuItemContextKey } from "./Menus.constants";
+import { focusFirstChild, focusNextChild, focusPreviousChild } from "./Menus.utils";
+export let open = false;
+export let shape = "rounded";
+export let value;
+export let variant = "regular";
+const instanceId = uuid();
+let reference;
+$:
+  menuId = `${value}-menu-${instanceId}`;
+$:
+  hasChildren = $$slots.items;
+const children = writable([]);
+const dispatch = createEventDispatcher();
+const raiseClose = (value2) => {
+  dispatch("close", { value: value2 });
+};
+const raiseOpen = (value2) => {
+  dispatch("open", { value: value2 });
+};
+const raiseSelect = (value2) => {
+  dispatch("select", { value: value2 });
+};
+const onClick = () => {
+  open = !open;
+  if (open) {
+    setTimeout(() => focusFirstChild($children), 10);
+  }
+};
+setContext(menuItemContextKey, {
+  rootValue: value,
+  depth: 1,
+  register: (menuItem) => {
+    children.set([...$children, menuItem]);
+  },
+  unregister: (menuItem) => {
+    children.set($children.filter((x) => x.value !== menuItem.value));
+  },
+  closeMenu: (recursive) => {
+    open = false;
+  },
+  focusPrevious: (currentValue) => focusPreviousChild($children, currentValue),
+  focusNext: (currentValue) => focusNextChild($children, currentValue),
+  onOpen: raiseOpen,
+  onClose: raiseClose,
+  onSelect: raiseSelect
+});
+</script>
+
+<!--
+      @component
+      A Button that displays a context menu when clicked.
+  -->
+<Button
+  aria-controls={menuId}
+  aria-expanded={open}
+  aria-haspopup={hasChildren}
+  aria-owns={menuId}
+  data-value={value}
+  data-root-value={value}
+  {variant}
+  {shape}
+  on:blur
+  on:click
+  on:click={onClick}
+  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}
+>
+  <div bind:this={reference}>
+    <slot />
+    <Menu id={menuId} {reference} {open}>
+      <slot name="items" />
+    </Menu>
+  </div>
+</Button>

package/MenuButton.svelte.d.ts

@@ -0,0 +1,54 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ButtonShape, ButtonVariant } from './Button.types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        open?: boolean | undefined;
+        shape?: ButtonShape | undefined;
+        value: string;
+        variant?: ButtonVariant | undefined;
+    };
+    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;
+        close: CustomEvent<any>;
+        open: CustomEvent<any>;
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        items: {};
+    };
+};
+export type MenuButtonProps = typeof __propDef.props;
+export type MenuButtonEvents = typeof __propDef.events;
+export type MenuButtonSlots = typeof __propDef.slots;
+/** A Button that displays a context menu when clicked. */
+export default class MenuButton extends SvelteComponentTyped<MenuButtonProps, MenuButtonEvents, MenuButtonSlots> {
+}
+export {};

package/MenuItem.svelte

@@ -0,0 +1,338 @@
+<script>import { createKeyborg } from "keyborg";
+import { v4 as uuid } from "uuid";
+import { getContext, onMount, setContext } from "svelte";
+import { writable } from "svelte/store";
+import { clickOutside } from "./actions/clickOutside";
+import { afterUpdate, createEventDispatcher } from "svelte/internal";
+import MenuItemDisplay from "./MenuItemDisplay.svelte";
+import { menuBarContextKey, menuItemContextKey } from "./Menus.constants";
+import Menu from "./Menu.svelte";
+import {
+  focusFirstChild,
+  focusLastChild,
+  focusNextChild,
+  focusPreviousChild
+} from "./Menus.utils";
+export let checked = false;
+export let composed = false;
+export let disabled = false;
+export let open = false;
+export let value;
+export let role = "menuitem";
+export let text = void 0;
+const {
+  rootValue = value,
+  depth = 0,
+  register = void 0,
+  unregister = void 0,
+  closeMenu = void 0,
+  focusPrevious = void 0,
+  focusNext = void 0,
+  onOpen = void 0,
+  onClose = void 0,
+  onSelect = void 0
+} = getContext(menuItemContextKey) || {};
+const { openPreviousMenu = void 0, openNextMenu = void 0 } = getContext(menuBarContextKey) || {};
+const instanceId = uuid();
+$:
+  displayId = `${value}-display-${instanceId}`;
+$:
+  menuId = `${value}-menu-${instanceId}`;
+let menuItemRef;
+const children = writable([]);
+let mounted = false;
+let prevOpen = open;
+$:
+  hasChildren = $$slots.default;
+const dispatch = createEventDispatcher();
+const raiseClose = (value2) => {
+  dispatch("close", { value: value2 });
+  onClose?.(value2);
+};
+const raiseOpen = (value2) => {
+  dispatch("open", { value: value2 });
+  onOpen?.(value2);
+};
+$: {
+  if (hasChildren && open !== prevOpen) {
+    open ? raiseOpen(value) : raiseClose(value);
+  }
+  prevOpen = open;
+}
+const raiseSelect = (value2) => {
+  dispatch("select", { value: value2 });
+  onSelect?.(value2);
+};
+let keyborg = createKeyborg(window);
+let usingKeyboard = keyborg.isNavigatingWithKeyboard();
+const keyborgHandler = (value2) => {
+  usingKeyboard = value2;
+};
+const autoFocusFirstChild = (open2, insideMenu) => {
+  if (open2 && insideMenu) {
+    setTimeout(() => focusFirstChild($children), 10);
+  }
+};
+$:
+  autoFocusFirstChild(open, depth > 0);
+onMount(() => {
+  mounted = true;
+  keyborg.subscribe(keyborgHandler);
+  const menuItemSelf = {
+    value,
+    open: () => {
+      open = true;
+    },
+    close: () => {
+      open = false;
+    },
+    focus: () => {
+      menuItemRef?.focus();
+    }
+  };
+  register?.(menuItemSelf);
+  return () => {
+    keyborg.unsubscribe(keyborgHandler);
+    unregister?.(menuItemSelf);
+  };
+});
+afterUpdate(() => {
+  prevOpen = open;
+});
+const onKeyDown = (event) => {
+  if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
+    switch (event.key) {
+      case "ArrowDown":
+        if (depth === 0 && hasChildren) {
+          open = true;
+          setTimeout(() => focusFirstChild($children), 10);
+          event.preventDefault();
+          return false;
+        } else if (depth > 0) {
+          focusNext?.(value);
+          event.preventDefault();
+          return false;
+        }
+        break;
+      case "ArrowLeft":
+        if (depth < 2) {
+          open = false;
+          closeMenu?.(true);
+          openPreviousMenu?.(rootValue);
+        } else {
+          closeMenu?.();
+        }
+        event.preventDefault();
+        return false;
+      case "ArrowRight":
+        if (depth > 0 && hasChildren) {
+          open = true;
+          setTimeout(focusFirstChild, 10);
+        } else {
+          open = false;
+          closeMenu?.(true);
+          openNextMenu?.(rootValue);
+        }
+        event.preventDefault();
+        return false;
+      case "ArrowUp":
+        if (depth === 0 && hasChildren) {
+          open = true;
+          setTimeout(() => focusLastChild($children), 10);
+          event.preventDefault();
+          return false;
+        } else if (depth > 0) {
+          focusPrevious?.(value);
+          event.preventDefault();
+          return false;
+        }
+      case "Escape":
+        open = false;
+        closeMenu?.(true);
+        event.preventDefault();
+        return false;
+    }
+  }
+};
+const onMouseEnter = (event) => {
+  setTimeout(() => {
+    menuItemRef?.focus();
+  }, 10);
+};
+const onMenuItemClick = (event) => {
+  if (!disabled) {
+    if (hasChildren) {
+      open = !open;
+      event.preventDefault();
+      event.stopPropagation();
+      return false;
+    } else {
+      raiseSelect(value);
+      closeMenu?.(true);
+    }
+  }
+};
+const onClickOutside = (event) => {
+  const {
+    detail: { mouseEvent }
+  } = event;
+  let element = mouseEvent.target;
+  while (element) {
+    if (element.getAttribute("data-root-value") === rootValue) {
+      return;
+    }
+    element = element.parentElement;
+  }
+  closeMenu?.(true);
+};
+setContext(menuItemContextKey, {
+  rootValue,
+  depth: depth + 1,
+  register: (menuItem) => {
+    children.set([...$children, menuItem]);
+  },
+  unregister: (menuItem) => {
+    children.set($children.filter((x) => x.value !== menuItem.value));
+  },
+  closeMenu: (recursive) => {
+    open = false;
+    if (recursive) {
+      closeMenu?.(recursive);
+    }
+    if (!recursive || depth === 0) {
+      menuItemRef?.focus();
+    }
+  },
+  focusPrevious: (currentValue) => focusPreviousChild($children, currentValue),
+  focusNext: (currentValue) => focusNextChild($children, currentValue),
+  onOpen: raiseOpen,
+  onClose: raiseClose,
+  onSelect: raiseSelect
+});
+</script>
+
+<button
+  aria-controls={menuId}
+  aria-disabled={disabled}
+  aria-expanded={open}
+  aria-haspopup={hasChildren}
+  aria-owns={menuId}
+  bind:this={menuItemRef}
+  class="sterling-menu-item"
+  class:composed
+  class:disabled
+  class:using-keyboard={usingKeyboard}
+  data-value={value}
+  data-root-value={rootValue}
+  {role}
+  tabindex={0}
+  type="button"
+  use:clickOutside
+  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
+  on:click={onMenuItemClick}
+  on:click_outside={onClickOutside}
+  on:keydown={onKeyDown}
+  on:mouseenter={onMouseEnter}
+  {...$$restProps}
+>
+  <div class="item" id={displayId}>
+    <slot name="item" {checked} {disabled} {hasChildren} {depth} {value} {open} {role} {text}>
+      <MenuItemDisplay {checked} hasChildren={depth > 0 && hasChildren} menuItemRole={role}
+        >{text}</MenuItemDisplay
+      >
+    </slot>
+  </div>
+  {#if menuItemRef && open && $$slots.default}
+    <Menu id={menuId} {open} reference={menuItemRef}>
+      <slot />
+    </Menu>
+  {/if}
+</button>
+
+<style>
+  .sterling-menu-item {
+    background-color: transparent;
+    border-color: transparent;
+    border-radius: var(--stsv-Button__border-radius);
+    border-style: none;
+    border-width: 0;
+    box-sizing: border-box;
+    color: var(--stsv-Common__color);
+    cursor: pointer;
+    font: inherit;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    outline: none;
+    overflow: hidden;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .sterling-menu-item:hover {
+    background-color: var(--stsv-Button__background-color--hover);
+    color: var(--stsv-Button__color--hover);
+  }
+
+  .sterling-menu-item:focus {
+    outline: none;
+  }
+
+  .sterling-menu-item.using-keyboard:focus {
+    border-color: var(--stsv-Button__border-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-menu-item:focus {
+    background-color: var(--stsv-Input__background-color--selected);
+  }
+
+  .sterling-menu-item.disabled {
+    color: var(--stsv-Common__color--disabled);
+  }
+
+  .sterling-menu-item.composed,
+  .sterling-menu-item.composed:focus,
+  .sterling-menu-item.composed:hover {
+    border-width: 0;
+    border-color: transparent;
+    outline: none;
+    background-color: transparent;
+  }
+
+  @media (prefers-reduced-motion) {
+    .sterling-menu-item {
+      transition: none;
+    }
+  }
+</style>

package/MenuItem.svelte.d.ts

@@ -0,0 +1,61 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        checked?: boolean | undefined;
+        composed?: boolean | undefined;
+        disabled?: boolean | undefined;
+        open?: boolean | undefined;
+        value: string;
+        role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
+        text?: string | undefined;
+    };
+    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: {
+        item: {
+            checked: boolean;
+            disabled: boolean;
+            hasChildren: boolean;
+            depth: number;
+            value: string;
+            open: boolean;
+            role: "menuitem" | "menuitemcheckbox" | "menuitemradio";
+            text: string | undefined;
+        };
+        default: {};
+    };
+};
+export type MenuItemProps = typeof __propDef.props;
+export type MenuItemEvents = typeof __propDef.events;
+export type MenuItemSlots = typeof __propDef.slots;
+export default class MenuItem extends SvelteComponentTyped<MenuItemProps, MenuItemEvents, MenuItemSlots> {
+}
+export {};