@sveltia/ui 0.1.4 → 0.2.0

package/package/components/core/text-input.svelte

@@ -1,145 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#textbox
--->
-<svelte:options accessors={true} />
-
-<script>
-  import { getRandomId } from '../helpers/util';
-
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  let className = '';
-
-  export { className as class };
-
-  /** @type {(HTMLInputElement|undefined)} */
-  export let element = undefined;
-
-  /** @type {('textbox'|'searchbox'|'combobox'|'spinbutton')} */
-  export let role = 'textbox';
-
-  /**
-   * Whether the textbox is editable.
-   */
-  export let readOnly = false;
-
-  export let disabled = false;
-
-  export let name = '';
-
-  /** @type {(String|undefined)} */
-  export let value = undefined;
-
-  const id = getRandomId('input');
-  let ariaLabel = '';
-
-  $: {
-    // Replace `aria-label` with a visible label if `<input placeholder>` is not defined
-    if ('aria-label' in $$restProps && !('placeholder' in $$restProps)) {
-      ariaLabel = $$restProps['aria-label'];
-      delete $$restProps['aria-label'];
-      $$restProps['aria-labelledby'] = `${id}-label`;
-    }
-  }
-</script>
-
-<div class="sui text-input {className}">
-  <input
-    type="text"
-    {role}
-    name={name || undefined}
-    {readOnly}
-    aria-readonly={readOnly ? true : undefined}
-    {disabled}
-    aria-disabled={disabled ? true : undefined}
-    {...$$restProps}
-    bind:this={element}
-    bind:value
-    on:input
-    on:keydown
-    on:keyup
-    on:keypress
-    on:change
-  />
-  {#if ariaLabel}
-    <span id="{id}-label" class="label" class:hidden={!!value}>
-      {ariaLabel}
-    </span>
-  {/if}
-</div>
-
-<style>.text-input {
-  position: relative;
-  width: 100%;
-  display: inline-flex;
-  align-items: center;
-}
-
-input {
-  z-index: 1;
-  display: inline-block;
-  flex: auto;
-  border-width: 1px;
-  border-color: var(--control-border-color);
-  border-radius: var(--input--medium--border-radius);
-  padding: 0 8px;
-  min-width: 0;
-  height: var(--input--medium--height);
-  background-color: var(--control-background-color);
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: 30px;
-  transition: all 200ms;
-}
-input:focus {
-  border-color: var(--primary-accent-color);
-}
-input:read-only {
-  color: var(--ternary-foreground-color);
-  border-color: var(--control-border-color) !important;
-}
-input:disabled {
-  background-color: var(--disabled-background-color);
-  opacity: 0.4;
-  cursor: default;
-}
-input[aria-invalid=true] {
-  border-color: deeppink;
-}
-input ~ :global(button) {
-  flex: none;
-  margin-left: -1px;
-  border-width: 1px;
-  border-color: var(--control-border-color);
-  height: var(--input--medium--height);
-  aspect-ratio: 1/1;
-}
-input ~ :global(button):last-child {
-  border-radius: 0 4px 4px 0;
-}
-input ~ :global(button) :global(.icon) {
-  font-size: 20px;
-}
-
-.label {
-  position: absolute;
-  inset: 0 8px;
-  z-index: 2;
-  display: flex;
-  justify-content: var(--input-label-align, flex-start);
-  align-items: center;
-  color: var(--primary-foreground-color);
-  opacity: 0.5;
-  pointer-events: none;
-}
-.label.hidden {
-  opacity: 0;
-}
-
-input:focus + .label {
-  opacity: 0;
-}</style>

package/package/components/core/text-input.svelte.d.ts

@@ -1,53 +0,0 @@
-/** @typedef {typeof __propDef.props}  TextInputProps */
-/** @typedef {typeof __propDef.events}  TextInputEvents */
-/** @typedef {typeof __propDef.slots}  TextInputSlots */
-/** @see https://w3c.github.io/aria/#textbox */
-export default class TextInput {
-    /**accessor*/
-    set class(arg: any);
-    get class(): any;
-    /**accessor*/
-    set element(arg: any);
-    get element(): any;
-    /**accessor*/
-    set role(arg: any);
-    get role(): any;
-    /**accessor*/
-    set readOnly(arg: any);
-    get readOnly(): any;
-    /**accessor*/
-    set disabled(arg: any);
-    get disabled(): any;
-    /**accessor*/
-    set name(arg: any);
-    get name(): any;
-    /**accessor*/
-    set value(arg: any);
-    get value(): any;
-}
-export type TextInputProps = typeof __propDef.props;
-export type TextInputEvents = typeof __propDef.events;
-export type TextInputSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-        element?: (HTMLInputElement | undefined);
-        role?: ('textbox' | 'searchbox' | 'combobox' | 'spinbutton');
-        disabled?: boolean;
-        name?: string;
-        value?: (string | undefined);
-        readOnly?: boolean;
-    };
-    events: {
-        input: Event;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        keypress: KeyboardEvent;
-        change: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/package/components/core/toolbar.svelte

@@ -1,74 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#toolbar
-  @see https://w3c.github.io/aria-practices/#toolbar
--->
-<script>
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  // eslint-disable-next-line padding-line-between-statements
-  let className = '';
-
-  export { className as class };
-
-  /**
-   * Define the `aria-orientation` property on the toolbar element.
-   * @type {('horizontal'|'vertical')}
-   */
-  export let orientation = 'horizontal';
-</script>
-
-<div
-  class="sui toolbar {orientation} {className}"
-  role="toolbar"
-  aria-orientation={orientation}
-  {...$$restProps}
->
-  <slot />
-</div>
-
-<style>[role=toolbar] {
-  --toolbar-size: 40px;
-  flex: none !important;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px;
-}
-[role=toolbar].primary {
-  --toolbar-size: 48px;
-  background-color: var(--secondary-background-color);
-}
-[role=toolbar].secondary {
-  background-color: var(--ternary-background-color);
-}
-[role=toolbar][aria-orientation=horizontal] {
-  height: var(--toolbar-size);
-}
-[role=toolbar][aria-orientation=vertical] {
-  flex-direction: column;
-  width: var(--toolbar-size);
-}
-[role=toolbar]:not(:last-child) {
-  border-width: 0 0 1px;
-  border-color: var(--primary-border-color);
-}
-[role=toolbar] :global(button[role="button"][aria-pressed="true"]),
-[role=toolbar] :global(button[role="button"][aria-checked="true"]) {
-  background-color: var(--highlight-background-color);
-}
-[role=toolbar] :global(h2) {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0;
-  padding: 0 8px;
-  font-size: 16px;
-}
-[role=toolbar] :global(h2) :global(span) {
-  font-size: 12px;
-  font-weight: normal;
-  opacity: 0.8;
-}</style>

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

@@ -1,26 +0,0 @@
-/** @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 {
-}
-export type ToolbarProps = typeof __propDef.props;
-export type ToolbarEvents = typeof __propDef.events;
-export type ToolbarSlots = typeof __propDef.slots;
-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

@@ -1,78 +0,0 @@
-<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(--ternary-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

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

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

@@ -1,37 +0,0 @@
-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

@@ -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 {};