@sveltia/ui 0.1.0

package/package/components/helpers/group.js

@@ -0,0 +1,246 @@
+/* eslint-disable no-plusplus */
+/* eslint-disable no-param-reassign */
+
+import { sleep } from '../util/misc';
+import { getRandomId } from './util';
+
+const config = {
+  grid: {
+    orientation: 'vertical',
+    childRoles: ['row'],
+    childSelectedAttr: 'aria-selected',
+  },
+  listbox: {
+    orientation: 'vertical',
+    childRoles: ['option'],
+    childSelectedAttr: 'aria-selected',
+  },
+  menu: {
+    orientation: 'vertical',
+    childRoles: ['menuitem', 'menuitemcheckbox', 'menuitemradio'],
+    childSelectedAttr: 'aria-checked',
+  },
+  menubar: {
+    orientation: 'horizontal',
+    childRoles: ['menuitem', 'menuitemcheckbox', 'menuitemradio'],
+    childSelectedAttr: 'aria-checked',
+  },
+  radiogroup: {
+    orientation: 'horizontal',
+    childRoles: ['radio'],
+    childSelectedAttr: 'aria-checked',
+  },
+  tablist: {
+    orientation: 'horizontal',
+    childRoles: ['tab'],
+    childSelectedAttr: 'aria-selected',
+  },
+};
+
+/**
+ * Implement keyboard and mouse interactions for a grouping composite widget.
+ */
+class Group {
+  /**
+   *
+   * @param {HTMLElement} parent
+   * @todo Check for added elements probably with `MutationObserver`.
+   */
+  constructor(parent) {
+    this.parent = parent;
+    this.role = parent.getAttribute('role');
+    this.grid = this.role === 'listbox' && parent.matches('.grid');
+    this.multi = this.parent.getAttribute('aria-multiselectable') === 'true';
+    this.id = getRandomId(this.role);
+    this.parentGroupSelector = `[role="group"], [role="${this.role}"]`;
+
+    const { orientation, childSelectedAttr } = config[this.role];
+
+    this.orientation = this.grid
+      ? 'horizontal'
+      : this.parent.getAttribute('aria-orientation') || orientation;
+    this.childSelectedAttr = childSelectedAttr;
+
+    const { allMembers } = this;
+
+    const hasSelected = allMembers.some((element) =>
+      element.matches(`[${childSelectedAttr}="true"]`),
+    );
+
+    allMembers.forEach((element, index) => {
+      const isSelected = element.matches(`[${childSelectedAttr}="true"]`);
+      const controls = document.querySelector(`#${element.getAttribute('aria-controls')}`);
+
+      element.id ||= `${this.id}-item-${index}`;
+      element.tabIndex ||= isSelected || (!hasSelected && index === 0) ? 0 : -1;
+      element.setAttribute(this.childSelectedAttr, isSelected);
+      controls?.setAttribute('aria-labelledby', element.id);
+      controls?.setAttribute('aria-hidden', !isSelected);
+    });
+
+    parent.addEventListener('click', (event) => {
+      this.onClick(event);
+    });
+
+    parent.addEventListener('keydown', (event) => {
+      this.onKeyDown(event);
+    });
+  }
+
+  /** @type {string} */
+  get selector() {
+    const roles = config[this.role].childRoles;
+
+    return roles ? roles.map((role) => `[role="${role}"]`).join(',') : '';
+  }
+
+  /** @type {HTMLElement[]} */
+  get allMembers() {
+    return [...this.parent.querySelectorAll(this.selector)];
+  }
+
+  /** @type {HTMLElement[]} */
+  get activeMembers() {
+    return this.allMembers.filter((element) => !element.matches('[aria-disabled="true"]'));
+  }
+
+  /**
+   *
+   * @param {KeyboardEvent}
+   */
+  onClick(event) {
+    const { target } = event;
+
+    if (!target.matches(this.selector)) {
+      return;
+    }
+
+    const targetParentGroup = target.closest(this.parentGroupSelector);
+
+    this.allMembers.forEach((element) => {
+      const isTarget = element === target;
+
+      element.tabIndex = element === target ? 0 : -1;
+
+      // Groups can be nested, e.g. `menu` > `group` > `menuitem`, so check if the parent is the
+      // same as the target’s parent
+      if (
+        (element.matches('[role="radio"], [role="menuitemradio"]') ||
+          (element.matches('[role="row"], [role="option"], [role="tab"]') && !this.multi)) &&
+        element.closest(this.parentGroupSelector) === targetParentGroup
+      ) {
+        element.setAttribute(this.childSelectedAttr, isTarget);
+      }
+
+      const controls = element.getAttribute('aria-controls');
+
+      if (controls) {
+        document.getElementById(controls)?.setAttribute('aria-hidden', !isTarget);
+      }
+    });
+
+    this.parent.dispatchEvent(
+      new CustomEvent('select', {
+        detail: {
+          value: target.value,
+          name: target.name,
+        },
+      }),
+    );
+  }
+
+  /**
+   *
+   * @param {KeyboardEvent}
+   */
+  onKeyDown(event) {
+    const { target, key, ctrlKey, metaKey, shiftKey, altKey } = event;
+
+    if (target.matches(this.selector) && !ctrlKey && !metaKey && !shiftKey && !altKey) {
+      if ([' ', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
+        event.preventDefault();
+      }
+
+      if (key === ' ' || (key === 'Enter' && !target.matches('button'))) {
+        event.preventDefault();
+        target.click();
+
+        return;
+      }
+
+      const { allMembers, activeMembers } = this;
+      let index;
+      let newTarget;
+
+      if (this.grid) {
+        const colCount = Math.floor(this.parent.clientWidth / target.clientWidth);
+
+        index = allMembers.indexOf(target);
+
+        if (key === 'ArrowUp' && index > 0) {
+          newTarget = allMembers[index - colCount];
+        }
+
+        if (key === 'ArrowDown' && index < allMembers.length - 1) {
+          newTarget = allMembers[index + colCount];
+        }
+
+        if (key === 'ArrowLeft' && index > 0) {
+          newTarget = allMembers[index - 1];
+        }
+
+        if (key === 'ArrowRight' && index < allMembers.length - 1) {
+          newTarget = allMembers[index + 1];
+        }
+
+        if (newTarget?.getAttribute('aria-disabled') === 'true') {
+          newTarget = undefined;
+        }
+      } else {
+        index = activeMembers.indexOf(target);
+
+        if (key === (this.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp')) {
+          if (index > 0) {
+            // Previous member
+            newTarget = activeMembers[index - 1];
+          }
+
+          if (index === 0) {
+            // Last member
+            newTarget = activeMembers[activeMembers.length - 1];
+          }
+        }
+
+        if (key === (this.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown')) {
+          if (index < activeMembers.length - 1) {
+            // Next member
+            newTarget = activeMembers[index + 1];
+          }
+
+          if (index === activeMembers.length - 1) {
+            // First member
+            [newTarget] = activeMembers;
+          }
+        }
+      }
+
+      if (newTarget && newTarget !== target) {
+        activeMembers.forEach((element) => {
+          element.tabIndex = element === newTarget ? 0 : -1;
+        });
+
+        newTarget.focus();
+      }
+    }
+  }
+}
+
+/**
+ *
+ */
+export const activateGroup = async (...args) => {
+  // Wait a bit before the relevant components, including the `aria-controls` target are mounted
+  await sleep(100);
+
+  return new Group(...args);
+};

package/package/components/helpers/popup.d.ts

@@ -0,0 +1,31 @@
+export function activatePopup(...args: any[]): Popup;
+export type PopupPosition = ('top-left' | 'top-right' | 'right-top' | 'right-bottom' | 'bottom-left' | 'bottom-right' | 'left-top' | 'left-bottom');
+/**
+ * @typedef {('top-left'|'top-right'|'right-top'|'right-bottom'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom')} PopupPosition
+ */
+declare class Popup {
+    /**
+     *
+     * @param {HTMLElement} anchorElement
+     * @param {HTMLElement} popupElement
+     * @param {PopupPosition} position
+     */
+    constructor(anchorElement: HTMLElement, popupElement: HTMLElement, position: PopupPosition);
+    open: import("svelte/store").Writable<boolean>;
+    style: import("svelte/store").Writable<{
+        inset: any;
+        zIndex: any;
+        width: any;
+        height: any;
+    }>;
+    observer: IntersectionObserver;
+    anchorElement: HTMLElement;
+    popupElement: HTMLElement;
+    position: PopupPosition;
+    id: string;
+    /**
+     * Continue checking the position in case the window or parent element resizes.
+     */
+    checkPosition(): void;
+}
+export {};

package/package/components/helpers/popup.js

@@ -0,0 +1,134 @@
+/* eslint-disable max-len */
+/* eslint-disable no-nested-ternary */
+
+import { get, writable } from 'svelte/store';
+import { getRandomId } from './util';
+
+/**
+ * @typedef {('top-left'|'top-right'|'right-top'|'right-bottom'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom')} PopupPosition
+ */
+
+class Popup {
+  open = writable(false);
+
+  style = writable({ inset: undefined, zIndex: undefined, width: undefined, height: undefined });
+
+  observer = new IntersectionObserver((entries) => {
+    entries.forEach(({ intersectionRect, rootBounds }) => {
+      if (!intersectionRect || !rootBounds) {
+        return;
+      }
+
+      const top = this.position.startsWith('bottom-')
+        ? `${Math.round(intersectionRect.bottom)}px`
+        : this.position.endsWith('-top')
+        ? `${Math.round(intersectionRect.top)}px`
+        : 'auto';
+
+      const right = this.position.startsWith('left-')
+        ? `${Math.round(rootBounds.width - intersectionRect.left)}px`
+        : this.position.endsWith('-right')
+        ? `${Math.round(rootBounds.width - intersectionRect.right)}px`
+        : 'auto';
+
+      const bottom = this.position.startsWith('top-')
+        ? `${Math.round(rootBounds.height - intersectionRect.top)}px`
+        : this.position.endsWith('-bottom')
+        ? `${Math.round(rootBounds.height - intersectionRect.bottom)}px`
+        : 'auto';
+
+      const left = this.position.startsWith('right-')
+        ? `${Math.round(intersectionRect.right)}px`
+        : this.position.endsWith('-left')
+        ? `${Math.round(intersectionRect.left)}px`
+        : 'auto';
+
+      const width = `${Math.round(intersectionRect.width)}px`;
+      const height = `${Math.round(rootBounds.height - intersectionRect.bottom - 8)}px`;
+      const anchorPopup = this.anchorElement.closest('.popup');
+
+      // @todo fix the final position
+      this.style.set({
+        inset: [top, right, bottom, left].join(' '),
+        zIndex: anchorPopup ? Number(anchorPopup.style.zIndex) + 1 : 1000,
+        width,
+        height,
+      });
+    });
+  });
+
+  /**
+   *
+   * @param {HTMLElement} anchorElement
+   * @param {HTMLElement} popupElement
+   * @param {PopupPosition} position
+   */
+  constructor(anchorElement, popupElement, position) {
+    this.anchorElement = anchorElement;
+    this.popupElement = popupElement; // = backdrop
+    this.position = position;
+    this.id = getRandomId('popup');
+
+    this.anchorElement.setAttribute('aria-controls', this.id);
+    this.popupElement.setAttribute('id', this.id);
+
+    this.anchorElement.addEventListener('click', () => {
+      if (!this.anchorElement.matches('[aria-disabled="true"]')) {
+        this.open.set(!get(this.open));
+      }
+    });
+
+    this.popupElement.addEventListener('click', (event) => {
+      if (get(this.open) && event.target !== this.anchorElement) {
+        this.open.set(false);
+      }
+    });
+
+    [this.anchorElement, this.popupElement].forEach((element) => {
+      element.addEventListener('keydown', (event) => {
+        const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
+
+        if (
+          get(this.open) &&
+          ['Escape'].includes(key) &&
+          !ctrlKey &&
+          !metaKey &&
+          !shiftKey &&
+          !altKey
+        ) {
+          this.open.set(false);
+        }
+      });
+    });
+
+    this.open.subscribe((open) => {
+      if (open) {
+        this.checkPosition();
+      } else {
+        this.anchorElement.focus();
+      }
+
+      this.anchorElement.setAttribute('aria-expanded', open);
+    });
+  }
+
+  /**
+   * Continue checking the position in case the window or parent element resizes.
+   */
+  checkPosition() {
+    this.observer.observe(this.anchorElement);
+
+    window.requestAnimationFrame(() => {
+      this.observer.unobserve(this.anchorElement);
+
+      if (get(this.open)) {
+        this.checkPosition();
+      }
+    });
+  }
+}
+
+/**
+ *
+ */
+export const activatePopup = (...args) => new Popup(...args);

package/package/components/helpers/util.d.ts

@@ -0,0 +1 @@
+export function getRandomId(prefix?: string, length?: number): string;

package/package/components/helpers/util.js

@@ -0,0 +1,8 @@
+export const getRandomId = (prefix = '', length = 7) =>
+  [
+    prefix,
+    new Array(length)
+      .fill()
+      .map(() => '0123456789abcdef'[Math.floor(Math.random() * 12)])
+      .join(''),
+  ].join('-');

package/package/components/util/app-shell.svelte

@@ -0,0 +1,282 @@
+<!--
+  @component
+  Provide an application’s shell that makes the web app more like a native app. It also handles the
+  dark/light mode switching. This component has to be placed directly under `<body>` (or
+  `<div style="display:contents">` in a SvelteKit app).
+-->
+<script>
+  import { onMount } from 'svelte';
+
+  onMount(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const { dataset } = document.documentElement;
+
+    const applyTheme = () => {
+      if (dataset.autoTheming !== 'false') {
+        dataset.theme = mediaQuery.matches ? 'dark' : 'light';
+      }
+    };
+
+    applyTheme();
+
+    mediaQuery.onchange = () => {
+      applyTheme();
+    };
+  });
+</script>
+
+<div
+  class="sui app-shell"
+  on:dragover|preventDefault
+  on:drop|preventDefault
+  on:contextmenu={(event) => {
+    // Disable the native context menu
+    if (!event.target?.matches('input[type="text"], textarea')) {
+      event.preventDefault();
+    }
+  }}
+>
+  <slot />
+</div>
+
+<style global>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
+:global(:root) {
+  --hue: 210;
+  --highlight-foreground-color: hsl(var(--foreground-color-1-hsl));
+  --primary-foreground-color: hsl(var(--foreground-color-2-hsl));
+  --secondary-foreground-color: hsl(var(--foreground-color-3-hsl));
+  --ternary-foreground-color: hsl(var(--foreground-color-3-hsl));
+  --disabled-foreground-color: hsl(var(--foreground-color-4-hsl));
+  --danger-foreground-color: hsl(var(--danger-color));
+  --highlight-background-color: hsl(var(--background-color-5-hsl));
+  --content-background-color: hsl(var(--background-color-1-hsl));
+  --primary-background-color: hsl(var(--background-color-2-hsl));
+  --secondary-background-color: hsl(var(--background-color-3-hsl));
+  --ternary-background-color: hsl(var(--background-color-4-hsl));
+  --control-background-color: hsl(var(--background-color-1-hsl));
+  --disabled-background-color: hsl(var(--background-color-4-hsl));
+  --danger-background-color: hsl(var(--danger-color));
+  --primary-border-color: hsl(var(--border-color-1-hsl));
+  --secondary-border-color: hsl(var(--border-color-2-hsl));
+  --control-border-color: hsl(var(--border-color-2-hsl));
+  --popup-shadow-color: hsl(var(--shadow-color) / 20%);
+  --popup-backdrop-color: hsl(var(--shadow-color) / 10%);
+  --default-font-family: "Merriweather Sans", sans-serif;
+  --default-font-size: 13px;
+  --default-font-weight-regular: 300;
+  --default-font-weight-bold: 600;
+  --monospace-font-family: "Noto Sans Mono", monospace;
+  --monospace-font-size: 13px;
+  --control--small--border-width: 1px;
+  --control--small--border-radius: 2px;
+  --control--small--height: 24px;
+  --control--medium--border-width: 1px;
+  --control--medium--border-radius: 4px;
+  --control--medium--height: 32px;
+  --control--large--border-width: 1px;
+  --control--large--border-radius: 8px;
+  --control--large--height: 40px;
+  --button--small--border-radius: var(--control--small--border-radius);
+  --button--small--height: var(--control--small--height);
+  --button--medium--border-radius: var(--control--medium--border-radius);
+  --button--medium--height: var(--control--medium--height);
+  --button--large--border-radius: var(--control--large--border-radius);
+  --button--large--height: var(--control--large--height);
+  --option--small--border-radius: var(--control--small--border-radius);
+  --option--small--height: var(--control--small--height);
+  --option--medium--border-radius: var(--control--medium--border-radius);
+  --option--medium--height: var(--control--medium--height);
+  --option--large--border-radius: var(--control--large--border-radius);
+  --option--large--height: var(--control--large--height);
+  --input--small--border-radius: var(--control--small--border-radius);
+  --input--small--height: var(--control--small--height);
+  --input--medium--border-radius: var(--control--medium--border-radius);
+  --input--medium--height: var(--control--medium--height);
+  --input--large--border-radius: var(--control--large--border-radius);
+  --input--large--height: var(--control--large--height);
+  --tab--small--height: var(--control--small--height);
+  --tab--medium--height: var(--control--medium--height);
+  --tab--large--height: var(--control--large--height);
+}
+
+:global(:root[data-theme=light]) {
+  --foreground-color-1-hsl: var(--hue) 5% 0%;
+  --foreground-color-2-hsl: var(--hue) 5% 20%;
+  --foreground-color-3-hsl: var(--hue) 5% 40%;
+  --foreground-color-4-hsl: var(--hue) 5% 60%;
+  --border-color-1-hsl: var(--hue) 5% 75%;
+  --border-color-2-hsl: var(--hue) 5% 80%;
+  --background-color-1-hsl: var(--hue) 5% 100%;
+  --background-color-2-hsl: var(--hue) 5% 98%;
+  --background-color-3-hsl: var(--hue) 5% 96%;
+  --background-color-4-hsl: var(--hue) 5% 94%;
+  --background-color-5-hsl: var(--hue) 5% 90%;
+  --shadow-color: var(--hue) 10% 0%;
+  --primary-accent-color: hsl(var(--hue) 80% 45%);
+  --primary-accent-color-lighter: hsl(var(--hue) 80% 40%);
+  --primary-accent-color-darker: hsl(var(--hue) 80% 50%);
+  --primary-accent-color-foreground: hsl(var(--hue) 10% 100%);
+  --danger-color: 0 68% 42%;
+}
+
+:global(:root[data-theme=dark]) {
+  --foreground-color-1-hsl: var(--hue) 10% 100%;
+  --foreground-color-2-hsl: var(--hue) 10% 80%;
+  --foreground-color-3-hsl: var(--hue) 10% 60%;
+  --foreground-color-4-hsl: var(--hue) 10% 40%;
+  --border-color-1-hsl: var(--hue) 10% 25%;
+  --border-color-2-hsl: var(--hue) 10% 20%;
+  --background-color-1-hsl: var(--hue) 10% 8%;
+  --background-color-2-hsl: var(--hue) 10% 10%;
+  --background-color-3-hsl: var(--hue) 10% 12%;
+  --background-color-4-hsl: var(--hue) 10% 14%;
+  --background-color-5-hsl: var(--hue) 10% 18%;
+  --shadow-color: var(--hue) 10% 0%;
+  --primary-accent-color: hsl(var(--hue) 100% 45%);
+  --primary-accent-color-lighter: hsl(var(--hue) 100% 50%);
+  --primary-accent-color-darker: hsl(var(--hue) 100% 40%);
+  --primary-accent-color-foreground: hsl(var(--hue) 10% 100%);
+  --danger-color: 0 68% 42%;
+}
+
+:global(.material-symbols-outlined) {
+  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
+}
+
+:global(*) {
+  scroll-behavior: smooth;
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+}
+
+:global(:focus) {
+  z-index: 1;
+  outline-width: 0;
+}
+
+:global(:focus-visible) {
+  outline-offset: -2px;
+  outline-width: 2px !important;
+  outline-style: solid;
+  outline-color: hsl(var(--hue), 100%, 50%, 25%);
+}
+
+:global(h1),
+:global(h2),
+:global(h3),
+:global(h4),
+:global(h5),
+:global(h6) {
+  margin: 0;
+  font-weight: var(--default-font-weight-bold);
+}
+
+:global(strong) {
+  font-weight: var(--default-font-weight-bold);
+}
+
+:global(a) {
+  color: var(--primary-accent-color-lighter);
+  text-decoration: none;
+}
+
+:global(img),
+:global(svg),
+:global(iframe) {
+  vertical-align: top;
+}
+
+:global(button),
+:global(input),
+:global(textarea),
+:global(select),
+:global(option) {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+
+:global(p),
+:global(li) {
+  line-height: 1.75;
+}
+
+:global([role=grid]) {
+  display: table;
+  width: 100%;
+}
+:global([role=grid]) :global(.colgroup) {
+  display: table-column-group;
+}
+:global([role=grid]) :global(.colgroup) :global(.col) {
+  display: table-column;
+}
+
+:global(code),
+:global(pre) {
+  font-family: var(--monospace-font-family);
+}
+
+:global(pre) {
+  line-height: 1.5;
+  -webkit-user-select: text;
+  user-select: text;
+}
+
+:global(dialog) {
+  position: fixed;
+  inset: 0;
+  outline: 0;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+  color: inherit;
+  background: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: none;
+  cursor: default;
+}
+:global(dialog::backdrop) {
+  background: transparent;
+}
+
+:global(.thead[role=rowgroup]) {
+  display: table-header-group;
+}
+
+:global(.tbody[role=rowgroup]) {
+  display: table-row-group;
+}
+
+:global([role=row]) {
+  display: table-row;
+}
+
+:global([role=columnheader]),
+:global([role=gridcell]) {
+  display: table-cell;
+}
+
+:global(.app-shell) {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  color: var(--primary-foreground-color);
+  background-color: var(--primary-background-color);
+  font-family: var(--default-font-family);
+  font-size: var(--default-font-size);
+  font-weight: var(--default-font-weight-regular);
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: none;
+  cursor: default;
+}</style>