@sveltia/ui 0.7.4 → 0.8.0

package/package/components/dialog/prompt-dialog.svelte

@@ -0,0 +1,78 @@
+<!--
+  @component
+  A modal prompt dialog. It shows the OK and Cancel buttons as well as a textbox, just like
+  `window.prompt()`.
+  @see https://w3c.github.io/aria/#alertdialog
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
+  @see https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt
+-->
+<script>
+  import TextInput from '../text-field/text-input.svelte';
+  import Dialog from './dialog.svelte';
+
+  /**
+   * The `class` attribute on the `<dialog>` element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+  /**
+   * Whether to open the dialog.
+   * @type {boolean}
+   */
+  export let open = false;
+  /**
+   * Text label displayed on the header. Required.
+   * @type {string}
+   */
+  export let title;
+  /**
+   * Text label displayed on the OK button.
+   * @type {string}
+   */
+  export let okLabel = '';
+  /**
+   * Text label displayed on the Cancel button.
+   * @type {string}
+   */
+  export let cancelLabel = '';
+  /**
+   * Value entered on the textbox.
+   * @type {string}
+   */
+  export let value = '';
+  /**
+   * Extra attributes for the `<TextInput>`
+   * @type {object}
+   */
+  export let textboxAttrs = {};
+</script>
+
+<Dialog
+  role="alertdialog"
+  class={className}
+  bind:open
+  {title}
+  {okLabel}
+  {cancelLabel}
+  {...$$restProps}
+  on:opening
+  on:open
+  on:ok
+  on:cancel
+  on:closing
+  on:close
+>
+  <slot />
+  <div class="input-outer">
+    {#if $$slots.input}
+      <slot name="input" />
+    {:else}
+      <TextInput bind:value autofocus {...textboxAttrs} on:input on:keydown on:keyup on:keypress />
+    {/if}
+  </div>
+</Dialog>
+
+<style>.input-outer {
+  margin: 12px 0 0;
+}</style>

package/package/components/dialog/prompt-dialog.svelte.d.ts

@@ -0,0 +1,72 @@
+/** @typedef {typeof __propDef.props}  PromptDialogProps */
+/** @typedef {typeof __propDef.events}  PromptDialogEvents */
+/** @typedef {typeof __propDef.slots}  PromptDialogSlots */
+/**
+ * A modal prompt dialog. It shows the OK and Cancel buttons as well as a textbox, just like
+ * `window.prompt()`.
+ * @see https://w3c.github.io/aria/#alertdialog
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt
+ */
+export default class PromptDialog extends SvelteComponent<{
+    [x: string]: any;
+    title: string;
+    class?: string;
+    value?: string;
+    open?: boolean;
+    okLabel?: string;
+    cancelLabel?: string;
+    textboxAttrs?: object;
+}, {
+    opening: CustomEvent<any>;
+    open: CustomEvent<any>;
+    ok: CustomEvent<any>;
+    cancel: CustomEvent<any>;
+    closing: CustomEvent<any>;
+    close: CustomEvent<any>;
+    input: Event;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    input: {};
+}> {
+}
+export type PromptDialogProps = typeof __propDef.props;
+export type PromptDialogEvents = typeof __propDef.events;
+export type PromptDialogSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        title: string;
+        class?: string;
+        value?: string;
+        open?: boolean;
+        okLabel?: string;
+        cancelLabel?: string;
+        textboxAttrs?: object;
+    };
+    events: {
+        opening: CustomEvent<any>;
+        open: CustomEvent<any>;
+        ok: CustomEvent<any>;
+        cancel: CustomEvent<any>;
+        closing: CustomEvent<any>;
+        close: CustomEvent<any>;
+        input: Event;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        keypress: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        input: {};
+    };
+};
+export {};

package/package/components/disclosure/disclosure.svelte

@@ -42,16 +42,17 @@
 </script>
 
 <div
+  role="group"
   {id}
   class="sui disclosure {className}"
-  role="group"
   hidden={hidden || undefined}
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-labelledby="{id}-header"
+  aria-roledescription="disclosure"
   {...$$restProps}
 >
-  <div class="inner" inert={disabled}>
+  <div role="none" class="inner" inert={disabled}>
     <Button
       class="header"
       id="{id}-header"
@@ -74,7 +75,6 @@
 <style>.disclosure :global(button) {
   display: flex;
   width: 100%;
-  justify-content: space-between;
 }
 .disclosure :global(button .icon) {
   transition: all 200ms;

package/package/components/divider/divider.svelte

@@ -23,8 +23,8 @@
 </script>
 
 <div
-  class="sui divider {className}"
   role="separator"
+  class="sui divider {className}"
   hidden={hidden || undefined}
   aria-hidden={hidden}
   aria-orientation={orientation}

package/package/components/divider/spacer.svelte

@@ -9,11 +9,6 @@
    */
   let className = '';
   export { className as class };
-  /**
-   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
-   * @type {boolean | undefined}
-   */
-  export let hidden = undefined;
   /**
    * Whether to make the spacer flexible.
    * @type {boolean}
@@ -21,13 +16,7 @@
   export let flex = false;
 </script>
 
-<div
-  class="sui spacer {className}"
-  class:flex
-  hidden={hidden || undefined}
-  aria-hidden={hidden}
-  {...$$restProps}
-/>
+<div role="none" class="sui spacer {className}" class:flex {...$$restProps} />
 
 <style>.spacer.flex {
   flex: auto;

package/package/components/divider/spacer.svelte.d.ts

@@ -5,7 +5,6 @@
 export default class Spacer extends SvelteComponent<{
     [x: string]: any;
     class?: string;
-    hidden?: boolean;
     flex?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -19,7 +18,6 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        hidden?: boolean | undefined;
         flex?: boolean;
     };
     events: {

package/package/components/drawer/drawer.svelte

@@ -5,332 +5,242 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 -->
 <script>
-  import { createEventDispatcher, onMount } from 'svelte';
   import { _ } from 'svelte-i18n';
+  import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
   import Spacer from '../divider/spacer.svelte';
   import Icon from '../icon/icon.svelte';
+  import Modal from '../util/modal.svelte';
 
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the content element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
   /**
    * Whether to open the drawer.
+   * @type {boolean}
    */
   export let open = false;
-
   /**
    * Title text displayed on the header.
+   * @type {string}
    */
   export let title = '';
-
   /**
    * Position of the drawer.
-   * @type {('top'|'right'|'bottom'|'left')}
+   * @type {'top' | 'right' | 'bottom' | 'left'}
    */
   export let position = 'right';
-
   /**
    * Width or height of the drawer.
-   * @type {('small'|'medium'|'large'|'x-large')}
+   * @type {'small' | 'medium' | 'large' | 'x-large'}
    */
   export let size = 'small';
-
   /**
    * Whether to show the Close button.
-   * @type {('inside'|'outside'|false)}
+   * @type {'inside' | 'outside' | false}
    */
   export let showClose = 'outside';
-
   /**
-   * Whether to close the drawer when the backdrop (outside of the drawer) is clicked.
+   * Whether to close the modal when the backdrop (outside of the modal) is clicked.
+   * @type {boolean}
    */
-  export let closeOnBackdropClick = false;
-
+  export let lightDismiss = false;
   /**
-   * Whether to keep the content when the dialog is not displayed.
+   * Whether to keep the content in the DOM tree when the modal is not displayed.
+   * @type {boolean}
    */
   export let keepContent = false;
 
-  const dispatch = createEventDispatcher();
-  /** @type {?HTMLDialogElement} */
-  let dialog;
-  /** @type {?HTMLFormElement} */
-  let form;
-  let showDialog = false;
-  let showContent = false;
-
-  $: orientation = position === 'right' || position === 'left' ? 'vertical' : 'horizontal';
-
   /**
-   *
-   */
-  const openDialog = async () => {
-    (document.querySelector('.sui.app-shell') ?? document.body).appendChild(dialog);
-    showContent = true;
-    dialog.showModal();
-
-    window.requestAnimationFrame(() => {
-      showDialog = true;
-    });
-  };
-
-  /**
-   *
+   * The ID of the drawer.
+   * @type {string}
    */
-  const closeDialog = async () => {
-    showDialog = false;
-
-    if (dialog.returnValue === 'ok') {
-      dispatch('ok');
-    }
-
-    if (dialog.returnValue === 'cancel') {
-      dispatch('cancel');
-    }
-
-    dispatch('close', dialog.returnValue);
-
-    await new Promise((resolve) => {
-      form.addEventListener('transitionend', () => resolve(), { once: true });
-    });
-
-    showContent = false;
-    dialog?.close();
-    dialog?.remove();
-  };
-
+  const id = getRandomId('drawer');
   /**
-   *
+   * A reference to the modal component.
+   * @type {Modal}
    */
-  const toggleDialog = () => {
-    if (dialog) {
-      if (open) {
-        openDialog();
-      } else {
-        closeDialog();
-      }
-    }
-  };
+  let modal;
 
-  $: {
-    void open;
-    toggleDialog();
-  }
-
-  onMount(() => {
-    dialog.remove();
-
-    // onUnmount
-    return () => {
-      dialog?.close();
-      dialog?.remove();
-    };
-  });
+  $: orientation = position === 'right' || position === 'left' ? 'vertical' : 'horizontal';
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<dialog
-  bind:this={dialog}
-  class="sui dialog {className} {size} {position} {orientation}"
-  class:open={showDialog}
+<Modal
+  {id}
+  class="drawer"
+  bind:open
+  showBackdrop
+  {lightDismiss}
+  {keepContent}
   {...$$restProps}
-  on:click={({ target }) => {
-    if (closeOnBackdropClick && /** @type {HTMLElement?} */ (target)?.matches('dialog')) {
-      dialog.returnValue = 'cancel';
-      open = false;
-    }
-  }}
-  on:cancel|preventDefault={() => {
-    // Cancelled with the Escape key
-    open = false;
-  }}
+  bind:this={modal}
+  on:opening
+  on:open
+  on:ok
+  on:cancel
+  on:closing
+  on:close
 >
-  <form method="dialog" bind:this={form} on:submit|preventDefault>
-    <div class="extra-control">
+  <div role="none" class="content {className} {size} {position} {orientation}">
+    <div role="none" class="extra-control">
       {#if showClose === 'outside'}
         <Button
           variant="ghost"
           iconic
           class="close"
+          aria-label={$_('_sui.close')}
+          aria-controls={id}
           on:click={() => {
-            dialog.returnValue = 'close';
-            open = false;
+            modal.close('close');
           }}
         >
-          <Icon slot="start-icon" name="close" label={$_('_sui.close')} />
+          <Icon slot="start-icon" name="close" />
         </Button>
       {/if}
     </div>
-    {#if keepContent || showContent}
-      {#if title || showClose === 'inside' || $$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 === 'inside'}
-              <Button
-                variant="ghost"
-                iconic
-                class="close"
-                on:click={() => {
-                  dialog.returnValue = 'close';
-                  open = false;
-                }}
-              >
-                <Icon slot="start-icon" name="close" label={$_('_sui.close')} />
-              </Button>
-            {/if}
+    {#if title || showClose === 'inside' || $$slots.header || $$slots['header-extra']}
+      <div role="none" class="header">
+        {#if $$slots.header}
+          <slot name="header" />
+        {:else}
+          <div role="none" class="title">
+            {title}
+          </div>
+          <Spacer flex={true} />
+          {#if $$slots['header-extra']}
+            <slot name="header-extra" />
           {/if}
-        </div>
-      {/if}
-      <div class="main">
-        <slot />
+          {#if showClose === 'inside'}
+            <Button
+              variant="ghost"
+              iconic
+              class="close"
+              aria-label={$_('_sui.close')}
+              aria-controls={id}
+              on:click={() => {
+                modal.close('close');
+              }}
+            >
+              <Icon slot="start-icon" name="close" />
+            </Button>
+          {/if}
+        {/if}
       </div>
-      {#if $$slots.footer}
-        <div class="footer">
-          <slot name="footer" />
-        </div>
-      {/if}
     {/if}
-  </form>
-</dialog>
+    <div role="none" class="main">
+      <slot />
+    </div>
+    {#if $$slots.footer}
+      <div role="none" class="footer">
+        <slot name="footer" />
+      </div>
+    {/if}
+  </div>
+</Modal>
 
-<style>dialog {
-  overflow: hidden;
-  outline: 0;
-  background-color: var(--sui-popup-backdrop-color);
-}
-dialog.open form {
-  opacity: 1;
-  transform: translateX(0%);
-  transition-duration: 100ms;
-}
-dialog:not(.open) {
-  pointer-events: none !important;
-}
-dialog:not(.open) form {
-  opacity: 0;
-  transform: translateX(105%);
-  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 {
+<style>.content {
   position: absolute;
   display: flex;
   flex-direction: column;
   border-radius: 4px;
-  max-width: 100vw;
-  max-height: 100vh;
+  max-width: 100dvw;
+  max-height: 100dvh;
   background-color: var(--sui-secondary-background-color-translucent);
+  box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   -webkit-backdrop-filter: blur(16px);
   backdrop-filter: blur(16px);
-  box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
-  will-change: opacity, transform;
-  transition-property: opacity, transform;
+  transition-property: transform;
 }
-dialog form .extra-control {
+.content .extra-control {
   position: absolute;
 }
-dialog form .extra-control :global(button.close) {
+.content .extra-control :global(button.close) {
   margin: 8px;
 }
-dialog.right form {
+:global(dialog.open) .content {
+  transition-duration: 150ms;
+  transform: translateX(0%);
+}
+:global(dialog:not(.open)) .content {
+  transition-duration: 300ms;
+}
+.content.right {
   inset: 0 0 0 auto;
 }
-dialog.right form .extra-control {
+.content.right .extra-control {
   inset: 0 100% auto auto;
 }
-dialog.right:not(.open) form {
+:global(dialog:not(.open)) .content.right {
   transform: translateX(105%);
 }
-dialog.left form {
+.content.left {
   inset: 0 auto 0 0;
 }
-dialog.left form .extra-control {
+.content.left .extra-control {
   inset: 0 auto auto 100%;
 }
-dialog.left:not(.open) form {
+:global(dialog:not(.open)) .content.left {
   transform: translateX(-105%);
 }
-dialog.vertical {
+.content.vertical {
   height: 100%;
-  max-width: 100vw;
+  max-width: 100dvw;
 }
-dialog.vertical.open form {
-  max-width: calc(100vw - 56px);
+:global(dialog.open) .content.vertical {
+  max-width: calc(100dvw - 56px);
   transform: translateX(0%);
 }
-dialog.vertical.small form {
+.content.vertical.small {
   width: 400px;
 }
-dialog.vertical.medium form {
+.content.vertical.medium {
   width: 600px;
 }
-dialog.vertical.large form {
+.content.vertical.large {
   width: 800px;
 }
-dialog.vertical.x-large form {
+.content.vertical.x-large {
   width: 1000px;
 }
-dialog.top form {
+.content.top {
   inset: 0 0 auto 0;
 }
-dialog.top form .extra-control {
+.content.top .extra-control {
   inset: 100% 0 auto auto;
 }
-dialog.top:not(.open) form {
+:global(dialog:not(.open)) .content.top {
   transform: translateY(-105%);
 }
-dialog.bottom form {
+.content.bottom {
   inset: auto 0 0 0;
 }
-dialog.bottom form .extra-control {
+.content.bottom .extra-control {
   inset: auto 0 100% auto;
 }
-dialog.bottom:not(.open) form {
+:global(dialog:not(.open)) .content.bottom {
   transform: translateY(105%);
 }
-dialog.horizontal {
+.content.horizontal {
   width: 100%;
-  max-height: 100vh;
+  max-height: 100dvh;
 }
-dialog.horizontal.open form {
-  max-height: calc(100vh - 56px);
+:global(dialog.open) .content.horizontal {
+  max-height: calc(100dvh - 56px);
   transform: translateY(0%);
 }
-dialog.horizontal.small form {
+.content.horizontal.small {
   height: 400px;
 }
-dialog.horizontal.medium form {
+.content.horizontal.medium {
   height: 600px;
 }
-dialog.horizontal.large form {
+.content.horizontal.large {
   height: 800px;
 }
-dialog.horizontal.x-large form {
+.content.horizontal.x-large {
   height: 1000px;
 }