@sveltia/ui 0.2.0 → 0.2.1

package/package/components/core/toolbar.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  ToolbarProps */
+/** @typedef {typeof __propDef.events}  ToolbarEvents */
+/** @typedef {typeof __propDef.slots}  ToolbarSlots */
+/**
+ * @see https://w3c.github.io/aria/#toolbar
+ * @see https://w3c.github.io/aria-practices/#toolbar
+ */
+export default class Toolbar extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    orientation?: "horizontal" | "vertical";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ToolbarProps = typeof __propDef.props;
+export type ToolbarEvents = typeof __propDef.events;
+export type ToolbarSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        orientation?: ('horizontal' | 'vertical');
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/editor/markdown.svelte

@@ -0,0 +1,78 @@
+<script>
+  import { _ } from 'svelte-i18n';
+  import Button from '../core/button.svelte';
+  import Icon from '../core/icon.svelte';
+  import Separator from '../core/separator.svelte';
+  import TextArea from '../core/text-area.svelte';
+  import Toolbar from '../core/toolbar.svelte';
+
+  /** @type {(String|undefined)} */
+  export let value = undefined;
+
+  export let disabled = false;
+
+  const defaultButtons = [
+    { name: 'bold', label: $_('sui.markdown_editor.bold'), icon: 'format_bold' },
+    { name: 'italic', label: $_('sui.markdown_editor.italic'), icon: 'format_italic' },
+    { name: 'code', label: $_('sui.markdown_editor.code'), icon: 'code' },
+    { name: 'link', label: $_('sui.markdown_editor.link'), icon: 'link' },
+    { separator: true },
+    {
+      name: 'heading-one',
+      label: $_('sui.markdown_editor.heading_x', { values: { level: 1 } }),
+      icon: 'format_h1',
+    },
+    {
+      name: 'heading-two',
+      label: $_('sui.markdown_editor.heading_x', { values: { level: 2 } }),
+      icon: 'format_h2',
+    },
+    { name: 'quote', label: $_('sui.markdown_editor.quote'), icon: 'format_quote' },
+    { separator: true },
+    {
+      name: 'bulleted-list',
+      label: $_('sui.markdown_editor.bulleted_list'),
+      icon: 'format_list_bulleted',
+    },
+    {
+      name: 'numbered-list',
+      label: $_('sui.markdown_editor.numbered_list'),
+      icon: 'format_list_numbered',
+    },
+  ];
+</script>
+
+<div>
+  <Toolbar aria-label={$_('sui.markdown_editor.markdown_editor')}>
+    {#each defaultButtons as { label, icon, separator }}
+      {#if separator}
+        <Separator />
+      {:else}
+        <Button {disabled}>
+          <Icon slot="start-icon" name={icon} {label} />
+        </Button>
+      {/if}
+    {/each}
+  </Toolbar>
+  <TextArea autoResize={true} {disabled} bind:value />
+</div>
+
+<style>div {
+  display: contents;
+}
+div :global([role="toolbar"]) {
+  display: flex;
+  gap: 8px;
+  border-radius: 4px 4px 0 0;
+  padding: 8px;
+  background-color: var(--tertiary-background-color);
+}
+div :global([role="toolbar"]) :global(button) {
+  flex: none;
+}
+div :global([role="toolbar"]) + :global(div) {
+  width: 100%;
+}
+div :global([role="toolbar"]) + :global(div) :global(textarea) {
+  border-radius: 0 0 4px 4px !important;
+}</style>

package/package/components/editor/markdown.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  MarkdownProps */
+/** @typedef {typeof __propDef.events}  MarkdownEvents */
+/** @typedef {typeof __propDef.slots}  MarkdownSlots */
+export default class Markdown extends SvelteComponentTyped<{
+    disabled?: boolean;
+    value?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MarkdownProps = typeof __propDef.props;
+export type MarkdownEvents = typeof __propDef.events;
+export type MarkdownSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        disabled?: boolean;
+        value?: (string | undefined);
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/helpers/group.d.ts

@@ -0,0 +1,37 @@
+export function activateGroup(...args: any[]): Promise<Group>;
+/**
+ * Implement keyboard and mouse interactions for a grouping composite widget.
+ */
+declare class Group {
+    /**
+     *
+     * @param {HTMLElement} parent
+     * @todo Check for added elements probably with `MutationObserver`.
+     */
+    constructor(parent: HTMLElement);
+    parent: HTMLElement;
+    role: string;
+    grid: boolean;
+    multi: boolean;
+    id: string;
+    parentGroupSelector: string;
+    orientation: any;
+    childSelectedAttr: any;
+    /** @type {string} */
+    get selector(): string;
+    /** @type {HTMLElement[]} */
+    get allMembers(): HTMLElement[];
+    /** @type {HTMLElement[]} */
+    get activeMembers(): HTMLElement[];
+    /**
+     *
+     * @param {KeyboardEvent}
+     */
+    onClick(event: any): void;
+    /**
+     *
+     * @param {KeyboardEvent}
+     */
+    onKeyDown(event: any): void;
+}
+export {};

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,165 @@
+/* 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 contentHeight = this.popupElement.querySelector('.content').scrollHeight;
+      const topMargin = intersectionRect.top - 8;
+      const bottomMargin = rootBounds.height - intersectionRect.bottom - 8;
+      let { position } = this;
+      let height;
+
+      // Alter the position if the space is limited
+      // @todo Handle more overflow cases
+      if (position.startsWith('bottom-')) {
+        if (contentHeight > bottomMargin) {
+          if (topMargin > bottomMargin) {
+            position = position.replace('bottom-', 'top-');
+            height = topMargin;
+          } else {
+            height = bottomMargin;
+          }
+        }
+      }
+
+      const top = position.startsWith('bottom-')
+        ? `${Math.round(intersectionRect.bottom)}px`
+        : position.endsWith('-top')
+        ? `${Math.round(intersectionRect.top)}px`
+        : 'auto';
+
+      const right = position.startsWith('left-')
+        ? `${Math.round(rootBounds.width - intersectionRect.left)}px`
+        : position.endsWith('-right')
+        ? `${Math.round(rootBounds.width - intersectionRect.right)}px`
+        : 'auto';
+
+      const bottom = position.startsWith('top-')
+        ? `${Math.round(rootBounds.height - intersectionRect.top)}px`
+        : position.endsWith('-bottom')
+        ? `${Math.round(rootBounds.height - intersectionRect.bottom)}px`
+        : 'auto';
+
+      const left = position.startsWith('right-')
+        ? `${Math.round(intersectionRect.right)}px`
+        : position.endsWith('-left')
+        ? `${Math.round(intersectionRect.left)}px`
+        : 'auto';
+
+      const anchorPopup = this.anchorElement.closest('.popup');
+
+      const style = {
+        inset: [top, right, bottom, left].join(' '),
+        zIndex: anchorPopup ? Number(anchorPopup.style.zIndex) + 1 : 1000,
+        width: `${Math.round(intersectionRect.width)}px`,
+        height: height ? `${Math.round(height)}px` : 'auto',
+      };
+
+      if (JSON.stringify(style) !== JSON.stringify(get(this.style))) {
+        this.style.set(style);
+      }
+    });
+  });
+
+  /**
+   *
+   * @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.anchorElement.addEventListener('keydown', (event) => {
+      const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
+
+      if (!ctrlKey && !metaKey && !shiftKey && !altKey) {
+        if (key === ' ' || key === 'Enter') {
+          event.stopPropagation();
+          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 if (this.anchorElement.getAttribute('aria-expanded') === 'true') {
+        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('-');