@sveltia/ui 0.1.0

package/package/components/core/dialog.svelte

@@ -0,0 +1,258 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#dialog
+  @see https://w3c.github.io/aria-practices/#dialog_modal
+-->
+<script>
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { _ } from 'svelte-i18n';
+  import Button from './button.svelte';
+  import Spacer from './spacer.svelte';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  export let open = false;
+
+  export let title = '';
+
+  /**
+   * Width of the dialog.
+   * @type {('small'|'medium'|'large')}
+   */
+  export let size = 'medium';
+
+  export let modal = true;
+
+  export let showCancel = true;
+
+  export let showOk = true;
+
+  export let showClose = false;
+
+  export let okLabel = '';
+
+  export let okDisabled = false;
+
+  export let cancelLabel = '';
+
+  export let cancelDisabled = false;
+
+  export let closeOnBackdropClick = false;
+
+  const dispatch = createEventDispatcher();
+  /** @type {?HTMLDialogElement} */
+  let dialog;
+  let showContent = false;
+  let showContentTimer = 0;
+
+  $: {
+    if (dialog) {
+      if (open) {
+        window.clearTimeout(showContentTimer);
+        showContent = true;
+
+        if (modal) {
+          dialog.showModal();
+        } else {
+          dialog.show();
+        }
+      } else {
+        dialog.close();
+
+        showContentTimer = window.setTimeout(() => {
+          showContent = false;
+        }, 500);
+
+        if (dialog.returnValue === 'ok') {
+          dispatch('ok');
+        }
+
+        if (dialog.returnValue === 'cancel') {
+          dispatch('cancel');
+        }
+
+        dispatch('close', dialog.returnValue);
+      }
+    }
+  }
+
+  onMount(() => {
+    // Avoid nested dialogs
+    (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
+  });
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<dialog
+  bind:this={dialog}
+  class="sui dialog {className} {size}"
+  on:click={({ target }) => {
+    if (closeOnBackdropClick && target?.matches('dialog')) {
+      dialog.returnValue = 'cancel';
+      open = false;
+    }
+  }}
+  on:cancel={() => {
+    // Cancelled with the Escape key
+    open = false;
+  }}
+>
+  <form method="dialog" on:submit|preventDefault>
+    {#if showContent}
+      {#if title || showClose || $$slots.header || $$slots['header-extra']}
+        <div class="header">
+          {#if $$slots.header}
+            <slot name="header" />
+          {:else}
+            <div class="title">
+              {title}
+            </div>
+            <Spacer flex={true} />
+            {#if $$slots['header-extra']}
+              <slot name="header-extra" />
+            {/if}
+            {#if showClose}
+              <Button
+                class="ternary iconic"
+                iconName="close"
+                iconLabel={$_('sui._.close')}
+                on:click={() => {
+                  dialog.returnValue = 'close';
+                  open = false;
+                }}
+              />
+            {/if}
+          {/if}
+        </div>
+      {/if}
+      <div class="main">
+        <slot />
+      </div>
+      {#if showOk || showCancel || $$slots.footer || $$slots['footer-extra']}
+        <div class="footer">
+          {#if $$slots.footer}
+            <slot name="footer" />
+          {:else}
+            {#if $$slots['footer-extra']}
+              <slot name="footer-extra" />
+            {/if}
+            <Spacer flex={true} />
+            {#if showOk}
+              <Button
+                class="primary"
+                label={okLabel || $_('sui._.ok')}
+                disabled={okDisabled}
+                on:click={() => {
+                  dialog.returnValue = 'ok';
+                  open = false;
+                }}
+              />
+            {/if}
+            {#if showCancel}
+              <Button
+                class="secondary"
+                label={cancelLabel || $_('sui._.cancel')}
+                disabled={cancelDisabled}
+                on:click={() => {
+                  dialog.returnValue = 'cancel';
+                  open = false;
+                }}
+              />
+            {/if}
+          {/if}
+        </div>
+      {/if}
+    {/if}
+  </form>
+</dialog>
+
+<style>dialog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--popup-backdrop-color);
+  backdrop-filter: blur(8px);
+  transition: all 200ms;
+}
+dialog:not([open]) {
+  opacity: 0;
+  pointer-events: none !important;
+}
+dialog:not([open]) form {
+  transform: scale(90%);
+}
+dialog:not([open]) :global(*) {
+  pointer-events: none !important;
+}
+dialog[open] {
+  opacity: 1;
+}
+dialog[open] form {
+  transform: scale(100%);
+}
+dialog :global(a),
+dialog :global(input),
+dialog :global(textarea),
+dialog :global(button),
+dialog :global([tabindex="0"]) {
+  pointer-events: all;
+}
+dialog form {
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  background-color: var(--secondary-background-color);
+  box-shadow: 0 8px 16px var(--popup-shadow-color);
+  transition: all 200ms;
+}
+dialog.small form {
+  width: 400px;
+  max-height: 400px;
+}
+dialog.medium form {
+  width: 600px;
+  max-height: 600px;
+}
+dialog.large form {
+  width: 800px;
+  max-height: 800px;
+}
+dialog.x-large form {
+  width: 1000px;
+  max-height: 1000px;
+}
+
+.header,
+.footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.header {
+  box-sizing: content-box;
+  margin: 0 16px;
+  border-width: 0 0 1px;
+  border-color: var(--secondary-border-color);
+  padding: 16px 8px;
+  height: 32px;
+}
+.header .title {
+  font-size: 16px;
+}
+
+.footer {
+  margin: 0 24px 24px;
+}
+
+.main {
+  overflow: auto;
+  margin: 24px 24px;
+  white-space: normal;
+}</style>

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

@@ -0,0 +1,73 @@
+/** @typedef {typeof __propDef.props}  DialogProps */
+/** @typedef {typeof __propDef.events}  DialogEvents */
+/** @typedef {typeof __propDef.slots}  DialogSlots */
+/**
+ * @see https://w3c.github.io/aria/#dialog
+ * @see https://w3c.github.io/aria-practices/#dialog_modal
+ */
+export default class Dialog extends SvelteComponentTyped<{
+    class?: string;
+    size?: "small" | "medium" | "large";
+    title?: string;
+    open?: boolean;
+    modal?: boolean;
+    showCancel?: boolean;
+    showOk?: boolean;
+    showClose?: boolean;
+    okLabel?: string;
+    okDisabled?: boolean;
+    cancelLabel?: string;
+    cancelDisabled?: boolean;
+    closeOnBackdropClick?: boolean;
+}, {
+    submit: SubmitEvent;
+    ok: CustomEvent<any>;
+    cancel: CustomEvent<any>;
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    'header-extra': {};
+    default: {};
+    footer: {};
+    'footer-extra': {};
+}> {
+}
+export type DialogProps = typeof __propDef.props;
+export type DialogEvents = typeof __propDef.events;
+export type DialogSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        size?: ('small' | 'medium' | 'large');
+        title?: string;
+        open?: boolean;
+        modal?: boolean;
+        showCancel?: boolean;
+        showOk?: boolean;
+        showClose?: boolean;
+        okLabel?: string;
+        okDisabled?: boolean;
+        cancelLabel?: string;
+        cancelDisabled?: boolean;
+        closeOnBackdropClick?: boolean;
+    };
+    events: {
+        submit: SubmitEvent;
+        ok: CustomEvent<any>;
+        cancel: CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        'header-extra': {};
+        default: {};
+        footer: {};
+        'footer-extra': {};
+    };
+};
+export {};

package/package/components/core/grid-cell.svelte

@@ -0,0 +1,14 @@
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  // eslint-disable-next-line padding-line-between-statements
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="gridcell" class="sui grid-cell {className}" {...$$restProps}>
+  <slot />
+</div>

package/package/components/core/grid-cell.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  GridCellProps */
+/** @typedef {typeof __propDef.events}  GridCellEvents */
+/** @typedef {typeof __propDef.slots}  GridCellSlots */
+export default class GridCell extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridCellProps = typeof __propDef.props;
+export type GridCellEvents = typeof __propDef.events;
+export type GridCellSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/core/group.svelte

@@ -0,0 +1,31 @@
+<script>
+  import { getRandomId } from '../helpers/util';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  export let title = '';
+
+  export let ariaLabel = '';
+
+  const id = getRandomId('group');
+</script>
+
+<div
+  class="sui group {className}"
+  role="group"
+  {id}
+  aria-label={ariaLabel || undefined}
+  aria-labelledby={title ? '{id}-title' : undefined}
+  {...$$restProps}
+>
+  {#if title}
+    <div class="title" id="{id}-title">{title}</div>
+  {/if}
+  <slot />
+</div>

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

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  GroupProps */
+/** @typedef {typeof __propDef.events}  GroupEvents */
+/** @typedef {typeof __propDef.slots}  GroupSlots */
+export default class Group extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    title?: string;
+    ariaLabel?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GroupProps = typeof __propDef.props;
+export type GroupEvents = typeof __propDef.events;
+export type GroupSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        title?: string;
+        ariaLabel?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/core/icon.svelte

@@ -0,0 +1,21 @@
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  export let name = '';
+
+  export let label = '';
+</script>
+
+<span
+  class="sui icon material-symbols-outlined {className}"
+  aria-label={label || undefined}
+  aria-hidden={label ? undefined : true}
+>
+  {name}
+</span>

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  IconProps */
+/** @typedef {typeof __propDef.events}  IconEvents */
+/** @typedef {typeof __propDef.slots}  IconSlots */
+export default class Icon extends SvelteComponentTyped<{
+    class?: string;
+    name?: string;
+    label?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IconProps = typeof __propDef.props;
+export type IconEvents = typeof __propDef.events;
+export type IconSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        name?: string;
+        label?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/core/menu-button.svelte

@@ -0,0 +1,65 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria-practices/#menubutton
+-->
+<script>
+  import Menu from '../composite/menu.svelte';
+  import Popup from '../util/popup.svelte';
+  import Button from './button.svelte';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /**
+   * Where to show the dropdown menu.
+   * @type {PopupPosition}
+   */
+  export let position = 'bottom-left';
+
+  /**
+   * Whether to show an arrow icon next to the label, if `iconName` is not given. The default is
+   * `true`.
+   */
+  export let showArrow = true;
+
+  /** @type {?Button} */
+  let buttonComponent;
+  /** @type {?Menu} */
+  let menuComponent;
+</script>
+
+<Button
+  class="sui menu-button {className}"
+  aria-haspopup="menu"
+  iconName={$$props.iconName || (showArrow ? 'arrow_drop_down' : undefined)}
+  iconPosition="end"
+  {...$$restProps}
+  bind:this={buttonComponent}
+  on:keydown={(event) => {
+    const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
+
+    if (['ArrowUp', 'ArrowDown'].includes(key) && !ctrlKey && !metaKey && !shiftKey && !altKey) {
+      event.preventDefault();
+
+      const members = [
+        ...menuComponent.element.querySelectorAll('[role^="menuitem"]:not([aria-disabled="true"])'),
+      ];
+
+      if (members.length) {
+        (key === 'ArrowUp' ? members.pop() : members.shift()).focus();
+      }
+    }
+  }}
+>
+  <slot name="button" />
+</Button>
+<Popup anchor={buttonComponent?.element} {position}>
+  <Menu bind:this={menuComponent}>
+    <slot />
+  </Menu>
+</Popup>

package/package/components/core/menu-button.svelte.d.ts

@@ -0,0 +1,36 @@
+/** @typedef {typeof __propDef.props}  MenuButtonProps */
+/** @typedef {typeof __propDef.events}  MenuButtonEvents */
+/** @typedef {typeof __propDef.slots}  MenuButtonSlots */
+/** @see https://w3c.github.io/aria-practices/#menubutton */
+export default class MenuButton extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    position?: any;
+    showArrow?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    button: {};
+    default: {};
+}> {
+}
+export type MenuButtonProps = typeof __propDef.props;
+export type MenuButtonEvents = typeof __propDef.events;
+export type MenuButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        position?: any;
+        showArrow?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        button: {};
+        default: {};
+    };
+};
+export {};

package/package/components/core/menu-item-checkbox.svelte

@@ -0,0 +1,24 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#menuitemcheckbox
+-->
+<script>
+  import MenuItem from './menu-item.svelte';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<MenuItem
+  class="sui menu-item-checkbox {className}"
+  role="menuitemcheckbox"
+  {...$$restProps}
+  on:click
+>
+  <slot />
+</MenuItem>

package/package/components/core/menu-item-checkbox.svelte.d.ts

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  MenuItemCheckboxProps */
+/** @typedef {typeof __propDef.events}  MenuItemCheckboxEvents */
+/** @typedef {typeof __propDef.slots}  MenuItemCheckboxSlots */
+/** @see https://w3c.github.io/aria/#menuitemcheckbox */
+export default class MenuItemCheckbox extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type MenuItemCheckboxProps = typeof __propDef.props;
+export type MenuItemCheckboxEvents = typeof __propDef.events;
+export type MenuItemCheckboxSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/core/menu-item-radio.svelte

@@ -0,0 +1,19 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#menuitemradio
+-->
+<script>
+  import MenuItem from './menu-item.svelte';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<MenuItem class="sui menu-item-radio {className}" role="menuitemradio" {...$$restProps} on:click>
+  <slot />
+</MenuItem>