@sveltia/ui 0.1.5 → 0.2.0

package/package/components/helpers/group.js

@@ -1,246 +0,0 @@
-/* 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

@@ -1,26 +0,0 @@
-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: any;
-    style: 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

@@ -1,154 +0,0 @@
-/* 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.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

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

package/package/components/helpers/util.js

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