@geoffcox/sterling-svelte 0.0.14 → 0.0.16

package/containers/Tab.svelte

@@ -0,0 +1,327 @@
+<script>import { getContext } from "svelte";
+import { tabListContextKey } from "./Tabs.constants";
+export let data = void 0;
+export let disabled = false;
+export let tabId = void 0;
+export let text = void 0;
+export let selected = false;
+let tabRef;
+const {
+  disabled: tabListDisabled,
+  selectedTabId,
+  selectionFollowsFocus,
+  vertical
+} = getContext(tabListContextKey);
+$:
+  _tabId = tabId || data?.tabId;
+$:
+  _text = text || data?.text || _tabId;
+$:
+  _disabled = $tabListDisabled || disabled || data?.disabled === true;
+$: {
+  if (!_tabId) {
+    throw new Error("Both tabId and data.tabId are missing");
+  }
+}
+$: {
+  selected = $selectedTabId === _tabId;
+}
+$: {
+  if (selected) {
+    selectedTabId.set(_tabId);
+    tabRef?.focus();
+  }
+}
+const getFirstActiveTab = () => {
+  let foundTab = tabRef.parentElement?.firstElementChild;
+  while (foundTab) {
+    if (!foundTab.disabled && foundTab.getAttribute("data-tab-id")) {
+      break;
+    }
+    foundTab = foundTab.nextElementSibling;
+  }
+  return foundTab;
+};
+const getLastActiveTab = () => {
+  let foundTab = tabRef.parentElement?.lastElementChild;
+  while (foundTab) {
+    if (!foundTab.disabled && foundTab.getAttribute("data-tab-id")) {
+      break;
+    }
+    foundTab = foundTab.previousElementSibling;
+  }
+  return foundTab;
+};
+const getPreviousActiveTab = () => {
+  let foundTab = tabRef?.previousElementSibling;
+  while (foundTab) {
+    if (!foundTab.disabled && foundTab.getAttribute("data-tab-id")) {
+      break;
+    }
+    foundTab = foundTab.previousElementSibling;
+  }
+  return foundTab;
+};
+const getNextActiveTab = () => {
+  let foundTab = tabRef?.nextElementSibling;
+  while (foundTab) {
+    if (!foundTab.disabled && foundTab.getAttribute("data-tab-id")) {
+      break;
+    }
+    foundTab = foundTab.nextElementSibling;
+  }
+  return foundTab;
+};
+const focusFirstTab = () => {
+  if (!_disabled) {
+    let foundTab = getFirstActiveTab();
+    if (foundTab) {
+      foundTab.focus();
+      return true;
+    }
+  }
+  return false;
+};
+const focusLastTab = () => {
+  if (!_disabled) {
+    let foundTab = getLastActiveTab();
+    if (foundTab) {
+      foundTab.focus();
+      return true;
+    }
+  }
+  return false;
+};
+const focusPreviousTab = () => {
+  if (!_disabled) {
+    let foundTab = getPreviousActiveTab();
+    if (foundTab) {
+      foundTab.focus();
+      return true;
+    }
+  }
+  return false;
+};
+const focusNextTab = () => {
+  if (!_disabled) {
+    let foundTab = getNextActiveTab();
+    if (foundTab) {
+      foundTab.focus();
+      return true;
+    }
+  }
+  return false;
+};
+const onClick = (event) => {
+  if (!_disabled) {
+    selectedTabId.set(_tabId);
+  }
+};
+const onFocus = (event) => {
+  if (!_disabled && $selectionFollowsFocus) {
+    selectedTabId.set(_tabId);
+  }
+};
+const onKeydown = (event) => {
+  if (!_disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
+    switch (event.key) {
+      case "Home":
+        if (focusFirstTab()) {
+          event.preventDefault();
+          return false;
+        }
+        break;
+      case "End":
+        if (focusLastTab()) {
+          event.preventDefault();
+          return false;
+        }
+        break;
+      case "ArrowLeft":
+        if (!$vertical && focusPreviousTab()) {
+          event.preventDefault();
+          return false;
+        }
+        break;
+      case "ArrowRight":
+        if (!$vertical && focusNextTab()) {
+          event.preventDefault();
+          return false;
+        }
+        break;
+      case "ArrowUp":
+        if ($vertical && focusPreviousTab()) {
+          event.preventDefault();
+          return false;
+        }
+        break;
+      case "ArrowDown":
+        if ($vertical && focusNextTab()) {
+          event.preventDefault();
+          return false;
+        }
+        break;
+      default:
+        break;
+    }
+  }
+};
+</script>
+
+<button
+  bind:this={tabRef}
+  class="sterling-tab"
+  disabled={_disabled}
+  class:selected
+  class:vertical={$vertical}
+  data-tab-id={_tabId}
+  role="tab"
+  tabindex={selected ? 0 : -1}
+  type="button"
+  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={onClick}
+  on:focus={onFocus}
+  on:keydown={onKeydown}
+>
+  <div class="content">
+    <slot {data} disabled={_disabled} {selected} tabId={_tabId} text={_text}>
+      <div class="text">
+        {_text || _tabId}
+      </div>
+    </slot>
+  </div>
+  <div class="indicator" />
+</button>
+
+<style>
+  .sterling-tab {
+    align-content: center;
+    align-items: center;
+    background-color: var(--Common__background-color);
+    border-color: transparent;
+    border-radius: var(--Button__border-radius);
+    border-style: var(--Common__border-style);
+    border-width: 0;
+    box-sizing: border-box;
+    color: var(--Common__color);
+    cursor: pointer;
+    display: grid;
+    font: inherit;
+    overflow: hidden;
+    padding: 0.5em 1em 0.25em 1em;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+    white-space: nowrap;
+  }
+
+  .sterling-tab:not(.vertical) {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1em;
+    justify-content: center;
+    justify-items: center;
+    row-gap: 0.15em;
+  }
+
+  .sterling-tab.vertical {
+    grid-template-columns: auto 1em;
+    grid-template-rows: 1fr;
+    align-content: center;
+    align-items: center;
+    justify-content: flex-end;
+    justify-items: flex-end;
+    column-gap: 0.15em;
+  }
+
+  .sterling-tab:hover {
+    background-color: var(--Common__background-color--hover);
+    color: var(--Common__color--hover);
+  }
+
+  .sterling-tab:active {
+    background-color: var(--Common__background-color--active);
+    color: var(--Common__color--active);
+  }
+
+  .sterling-tab:focus-visible {
+    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-tab:disabled {
+    color: var(--Common__color--disabled);
+    cursor: not-allowed;
+  }
+
+  .content {
+    padding: 0 0.2em;
+  }
+
+  .sterling-tab.vertical .content .text {
+    padding-top: 0.25em;
+  }
+
+  .indicator {
+    background-color: transparent;
+    border-radius: 10000px;
+    transition: background-color 250ms;
+  }
+
+  .sterling-tab:not(.vertical) .indicator {
+    justify-self: stretch;
+    height: 0.4em;
+  }
+
+  .sterling-tab.vertical .indicator {
+    align-self: stretch;
+    width: 0.4em;
+  }
+
+  .sterling-tab:hover .indicator {
+    background-color: var(--Display__color--faint);
+  }
+
+  .sterling-tab:active .indicator {
+    background-color: var(--Button__border-color--hover);
+  }
+
+  .sterling-tab:disabled .indicator,
+  .sterling-tab:disabled:hover .indicator,
+  .sterling-tab:disabled:active .indicator {
+    background-color: transparent;
+  }
+
+  .sterling-tab.selected .indicator {
+    background-color: var(--Input__color);
+  }
+
+  .sterling-tab.selected:disabled .indicator {
+    background-color: var(--Input__color--disabled);
+  }
+</style>

package/containers/Tab.svelte.d.ts

@@ -0,0 +1,55 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TabData } from './Tabs.types';
+declare class __sveltets_Render<T> {
+    props(): {
+        data?: TabData<T> | undefined;
+        disabled?: boolean | undefined;
+        tabId?: string | undefined;
+        text?: string | undefined;
+        selected?: boolean | 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(): {
+        default: {
+            data: TabData<T> | undefined;
+            disabled: boolean;
+            selected: boolean;
+            tabId: string | undefined;
+            text: string | undefined;
+        };
+    };
+}
+export type TabProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type TabEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type TabSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Tab<T> extends SvelteComponentTyped<TabProps<T>, TabEvents<T>, TabSlots<T>> {
+}
+export {};

package/containers/TabList.svelte

@@ -0,0 +1,126 @@
+<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/TabList.svelte.d.ts

@@ -0,0 +1,56 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TabData } from './Tabs.types';
+declare class __sveltets_Render<T> {
+    props(): {
+        [x: string]: any;
+        disabled?: boolean | undefined;
+        tabs?: TabData<T>[] | undefined;
+        vertical?: boolean | undefined;
+        selectedTabId?: string | undefined;
+        selectionFollowsFocus?: boolean | undefined;
+        selectedTab?: TabData<T> | 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(): {
+        tabContent: {
+            data: any;
+            disabled: boolean;
+            selected: any;
+            tabId: any;
+            text: any;
+        };
+        default: {};
+    };
+}
+export type TabListProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type TabListEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type TabListSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+/** A list of items where a single item can be selected. */
+export default class TabList<T> extends SvelteComponentTyped<TabListProps<T>, TabListEvents<T>, TabListSlots<T>> {
+}
+export {};

package/containers/Tabs.constants.d.ts

@@ -0,0 +1 @@
+export declare const tabListContextKey = "sterlingTabList";

package/containers/Tabs.constants.js

@@ -0,0 +1 @@
+export const tabListContextKey = 'sterlingTabList';

package/containers/Tabs.types.d.ts

@@ -0,0 +1,12 @@
+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/Tabs.types.js

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

package/containers/TreeNode.svelte

@@ -104,7 +104,6 @@ const selectPreviousNode = () => {
   }
 };
 const onItemClick = () => {
-  console.log("onItemClick");
   toggleExpanded();
   selectNode();
 };

package/forwardEvents.d.ts

@@ -0,0 +1,12 @@
+export declare const forwardEvents: (node: HTMLElement, params: {
+    target: HTMLElement;
+    events?: string[];
+    customEvents?: string[];
+}) => {
+    update: (params: {
+        target: HTMLElement;
+        events?: string[];
+        customEvents?: [];
+    }) => void;
+    destroy(): void;
+};

package/forwardEvents.js

@@ -0,0 +1,34 @@
+import { custom_event } from 'svelte/internal';
+export const forwardEvents = (node, params) => {
+    const addListeners = (node, target, events, customEvents) => {
+        let forward = (event) => {
+            console.log('forward', node, target, event);
+            target.dispatchEvent(event);
+        };
+        let forwardCustom = (event) => {
+            console.log('custom forward', node, target, event);
+            const customEvent = event;
+            target.dispatchEvent(custom_event(customEvent.type, customEvent.detail, {
+                bubbles: customEvent.bubbles,
+                cancelable: customEvent.cancelable
+            }));
+        };
+        events?.forEach((e) => node.addEventListener(e, forward));
+        customEvents?.forEach((e) => node.addEventListener(e, forwardCustom));
+        return () => {
+            events?.forEach((e) => node.removeEventListener(e, forward));
+            customEvents?.forEach((e) => node.removeEventListener(e, forwardCustom));
+        };
+    };
+    let unsubscribe = addListeners(node, params.target, params.events, params.customEvents);
+    const update = (params) => {
+        unsubscribe();
+        unsubscribe = addListeners(node, params.target, params.events, params.customEvents);
+    };
+    return {
+        update,
+        destroy() {
+            unsubscribe();
+        }
+    };
+};

package/index.d.ts

@@ -6,24 +6,34 @@ export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
 export { neutrals } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
+export { clickOutside } from './clickOutside';
+export { menuBarContextKey, menuItemContextKey } from './containers/Menus.constants';
 export type { ButtonVariant, ButtonShape } from './buttons/Button.types';
+export type { MenuItemRegistration, MenuBarContext, MenuItemContext } from './containers/Menus.types';
 export type { ProgressColorful } from './display/Progress.types';
 export type { TextAreaResize } from './inputs/TextArea.types';
+export type { TabData } from './containers/Tabs.types';
 export type { TreeNodeData } from './containers/Tree.types';
-export { clickOutside } from './clickOutside';
 import Button from './buttons/Button.svelte';
 import Checkbox from './inputs/Checkbox.svelte';
 import Dialog from './surfaces/Dialog.svelte';
 import Input from './inputs/Input.svelte';
 import Label from './display/Label.svelte';
 import List from './containers/List.svelte';
+import Menu from './containers/Menu.svelte';
+import MenuBar from './containers/MenuBar.svelte';
+import MenuButton from './buttons/MenuButton.svelte';
+import MenuItem from './containers/MenuItem.svelte';
+import MenuSeparator from './containers/MenuSeparator.svelte';
 import Progress from './display/Progress.svelte';
 import Radio from './inputs/Radio.svelte';
 import Select from './inputs/Select.svelte';
 import Slider from './inputs/Slider.svelte';
 import Switch from './inputs/Switch.svelte';
+import Tab from './containers/Tab.svelte';
+import TabList from './containers/TabList.svelte';
 import TextArea from './inputs/TextArea.svelte';
 import Tree from './containers/Tree.svelte';
 import TreeChevron from './containers/TreeChevron.svelte';
 import TreeItem from './containers/TreeItem.svelte';
-export { Button, Checkbox, Dialog, Input, Label, List, Progress, Radio, Select, Slider, Switch, TextArea, Tree, TreeChevron, TreeItem };
+export { Button, Checkbox, Dialog, Input, Label, List, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tree, TreeChevron, TreeItem };