@sveltia/ui 0.1.5 → 0.2.0

package/package/components/core/dialog.svelte

@@ -1,274 +0,0 @@
-<!--
-  @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 Icon from './icon.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 showDialog = false;
-  let showContent = false;
-  let closeDialogTimer = 0;
-
-  $: {
-    if (dialog) {
-      if (open) {
-        window.clearTimeout(closeDialogTimer);
-        (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
-        showContent = true;
-
-        if (modal) {
-          dialog.showModal();
-        } else {
-          dialog.show();
-        }
-
-        window.requestAnimationFrame(() => {
-          showDialog = true;
-        });
-      } else {
-        showDialog = false;
-
-        closeDialogTimer = window.setTimeout(() => {
-          showContent = false;
-          dialog?.close();
-          dialog?.remove();
-        }, 500);
-
-        if (dialog.returnValue === 'ok') {
-          dispatch('ok');
-        }
-
-        if (dialog.returnValue === 'cancel') {
-          dispatch('cancel');
-        }
-
-        dispatch('close', dialog.returnValue);
-      }
-    }
-  }
-
-  onMount(() => {
-    dialog.remove();
-
-    // onUnmount
-    return () => {
-      dialog?.close();
-      dialog?.remove();
-    };
-  });
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<dialog
-  bind:this={dialog}
-  class="sui dialog {className} {size}"
-  class:open={showDialog}
-  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"
-                on:click={() => {
-                  dialog.returnValue = 'close';
-                  open = false;
-                }}
-              >
-                <Icon slot="start-icon" name="close" label={$_('sui._.close')} />
-              </Button>
-            {/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);
-}
-dialog.open form {
-  opacity: 1;
-  transform: scale(100%);
-  transition-duration: 100ms;
-}
-dialog:not(.open) {
-  pointer-events: none !important;
-}
-dialog:not(.open) form {
-  opacity: 0;
-  transform: scale(90%);
-  pointer-events: none;
-  transition-duration: 200ms;
-}
-dialog:not(.open) :global(*) {
-  pointer-events: none !important;
-}
-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-translucent);
-  backdrop-filter: blur(16px);
-  box-shadow: 0 8px 16px var(--popup-shadow-color);
-  will-change: opacity, transform;
-  transition-property: opacity, transform;
-}
-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

@@ -1,45 +0,0 @@
-/** @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 {
-}
-export type DialogProps = typeof __propDef.props;
-export type DialogEvents = typeof __propDef.events;
-export type DialogSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        title?: string;
-        open?: boolean;
-        class?: string;
-        size?: ('small' | 'medium' | 'large');
-        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

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

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

package/package/components/core/group.svelte

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

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

package/package/components/core/icon.svelte

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

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

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

@@ -1,57 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria-practices/#menubutton
--->
-<script>
-  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 popupPosition = 'bottom-left';
-
-  /** @type {?Button} */
-  let buttonComponent;
-  /** @type {?Popup} */
-  let popupComponent;
-</script>
-
-<Button
-  class="sui menu-button {className}"
-  aria-haspopup="menu"
-  {...$$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 = [
-        ...popupComponent.dialog.querySelectorAll('[role^="menuitem"]:not([aria-disabled="true"])'),
-      ];
-
-      if (members.length) {
-        (key === 'ArrowUp' ? members.pop() : members.shift()).focus();
-      }
-    }
-  }}
->
-  <slot name="start-icon" slot="start-icon" />
-  <slot />
-  <slot name="end-icon" slot="end-icon" />
-</Button>
-
-<Popup anchor={buttonComponent?.element} position={popupPosition} bind:this={popupComponent}>
-  <slot name="popup" />
-</Popup>

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

@@ -1,30 +0,0 @@
-/** @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 {
-}
-export type MenuButtonProps = typeof __propDef.props;
-export type MenuButtonEvents = typeof __propDef.events;
-export type MenuButtonSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-        popupPosition?: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'start-icon': {
-            slot: string;
-        };
-        default: {};
-        'end-icon': {
-            slot: string;
-        };
-        popup: {};
-    };
-};
-export {};

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

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

@@ -1,24 +0,0 @@
-/** @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 {
-}
-export type MenuItemCheckboxProps = typeof __propDef.props;
-export type MenuItemCheckboxEvents = typeof __propDef.events;
-export type MenuItemCheckboxSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-    };
-    events: {
-        click: any;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

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

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

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

@@ -1,24 +0,0 @@
-/** @typedef {typeof __propDef.props}  MenuItemRadioProps */
-/** @typedef {typeof __propDef.events}  MenuItemRadioEvents */
-/** @typedef {typeof __propDef.slots}  MenuItemRadioSlots */
-/** @see https://w3c.github.io/aria/#menuitemradio */
-export default class MenuItemRadio {
-}
-export type MenuItemRadioProps = typeof __propDef.props;
-export type MenuItemRadioEvents = typeof __propDef.events;
-export type MenuItemRadioSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-    };
-    events: {
-        click: any;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};