@sveltia/ui 0.7.5 → 0.8.1

package/package/components/dialog/dialog.svelte

@@ -5,289 +5,232 @@
   @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 };
-
-  export let open = false;
-
-  export let title = '';
-
+  /**
+   * The `role` attribute on the `<dialog>` element.
+   * @type {'dialog' | 'alertdialog'}
+   */
+  export let role = 'dialog';
   /**
    * Width of the dialog.
    * @type {('small' | 'medium' | 'large' | 'x-large')}
    */
   export let size = 'medium';
-
-  export let modal = true;
-
-  export let showCancel = true;
-
-  export let showOk = true;
-
+  /**
+   * Whether to open the dialog.
+   * @type {boolean}
+   */
+  export let open = false;
+  /**
+   * Text label displayed on the header. Required.
+   * @type {string}
+   */
+  export let title;
+  /**
+   * Whether to show the Close button on the header.
+   * @type {boolean}
+   */
   export let showClose = false;
-
+  /**
+   * Whether to show the OK button on the footer.
+   * @type {boolean}
+   */
+  export let showOk = true;
+  /**
+   * Text label displayed on the OK button.
+   * @type {string}
+   */
   export let okLabel = '';
-
+  /**
+   * Whether to disable the OK button.
+   * @type {boolean}
+   */
   export let okDisabled = false;
-
+  /**
+   * Whether to show the Cancel button on the footer.
+   * @type {boolean}
+   */
+  export let showCancel = true;
+  /**
+   * Text label displayed on the Cancel button.
+   * @type {string}
+   */
   export let cancelLabel = '';
-
+  /**
+   * Whether to disable the Cancel button.
+   * @type {boolean}
+   */
   export let cancelDisabled = false;
-
-  export let closeOnBackdropClick = false;
-
-  const dispatch = createEventDispatcher();
-  /** @type {?HTMLDialogElement} */
-  let dialog;
-  /** @type {?HTMLFormElement} */
-  let form;
-  let showDialog = false;
-  let showContent = false;
-
   /**
-   *
+   * Whether to close the modal when the backdrop (outside of the modal) is clicked.
+   * @type {boolean}
    */
-  const openDialog = async () => {
-    (document.querySelector('.sui.app-shell') ?? document.body).appendChild(dialog);
-    showContent = true;
-
-    if (modal) {
-      dialog.showModal();
-    } else {
-      dialog.show();
-    }
-
-    window.requestAnimationFrame(() => {
-      showDialog = true;
-    });
-  };
+  export let lightDismiss = false;
 
   /**
-   *
+   * The ID of the drawer.
+   * @type {string}
    */
-  const closeDialog = async () => {
-    showDialog = false;
-
-    await new Promise((resolve) => {
-      form.addEventListener('transitionend', () => resolve(), { once: true });
-    });
-
-    showContent = false;
-    dialog?.close();
-    dialog?.remove();
-
-    if (['ok', 'cancel'].includes(dialog?.returnValue)) {
-      dispatch(dialog?.returnValue);
-    }
-
-    dispatch('close', dialog?.returnValue);
-  };
-
+  const id = getRandomId('dialog');
   /**
-   *
+   * a reference to the modal component.
+   * @type {Modal}
    */
-  const toggleDialog = () => {
-    if (dialog) {
-      if (open) {
-        openDialog();
-      } else {
-        closeDialog();
-      }
-    }
-  };
-
-  $: {
-    void open;
-    toggleDialog();
-  }
-
-  onMount(() => {
-    dialog.remove();
-
-    // onUnmount
-    return () => {
-      dialog?.close();
-      dialog?.remove();
-    };
-  });
+  let modal;
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<dialog
-  bind:this={dialog}
-  class="sui dialog {className} {size}"
-  class:open={showDialog}
-  aria-label={title}
+<Modal
+  {role}
+  {id}
+  class="dialog"
+  aria-label={$$slots.header ? undefined : title}
+  aria-labelledby={$$slots.header ? title : `${id}-title`}
+  aria-describedby="{id}-body"
+  bind:open
+  showBackdrop
+  {lightDismiss}
   {...$$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>
-    {#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
-                variant="ghost"
-                iconic
-                on:click={() => {
-                  dialog.returnValue = 'close';
-                  open = false;
-                }}
-              >
-                <Icon slot="start-icon" name="close" label={$_('_sui.close')} />
-              </Button>
-            {/if}
+  <div role="none" class="content {className} {size}">
+    {#if title || showClose || $$slots.header || $$slots['header-extra']}
+      <div role="none" class="header">
+        {#if $$slots.header}
+          <slot name="header" />
+        {:else}
+          <div role="none" id="{id}-title" class="title">
+            {title}
+          </div>
+          <Spacer flex={true} />
+          {#if $$slots['header-extra']}
+            <slot name="header-extra" />
+          {/if}
+          {#if showClose}
+            <Button
+              variant="ghost"
+              iconic
+              aria-label={$_('_sui.close')}
+              aria-controls={id}
+              on:click={() => {
+                modal.close('close');
+              }}
+            >
+              <Icon slot="start-icon" name="close" />
+            </Button>
           {/if}
-        </div>
-      {/if}
-      <div class="main">
-        <slot />
+        {/if}
       </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
-                variant="primary"
-                label={okLabel || $_('_sui.ok')}
-                disabled={okDisabled}
-                on:click={() => {
-                  dialog.returnValue = 'ok';
-                  open = false;
-                }}
-              />
-            {/if}
-            {#if showCancel}
-              <Button
-                variant="secondary"
-                label={cancelLabel || $_('_sui.cancel')}
-                disabled={cancelDisabled}
-                on:click={() => {
-                  dialog.returnValue = 'cancel';
-                  open = false;
-                }}
-              />
-            {/if}
+    {/if}
+    <div role="none" id="{id}-body" class="body">
+      <slot />
+    </div>
+    {#if showOk || showCancel || $$slots.footer || $$slots['footer-extra']}
+      <div role="none" class="footer">
+        {#if $$slots.footer}
+          <slot name="footer" />
+        {:else}
+          {#if $$slots['footer-extra']}
+            <slot name="footer-extra" />
+          {/if}
+          <Spacer flex={true} />
+          {#if showOk}
+            <Button
+              variant="primary"
+              label={okLabel || $_('_sui.ok')}
+              disabled={okDisabled}
+              on:click={() => {
+                modal.close('ok');
+              }}
+            />
+          {/if}
+          {#if showCancel}
+            <Button
+              variant="secondary"
+              label={cancelLabel || $_('_sui.cancel')}
+              disabled={cancelDisabled}
+              on:click={() => {
+                modal.close('cancel');
+              }}
+            />
           {/if}
-        </div>
-      {/if}
+        {/if}
+      </div>
     {/if}
-  </form>
-</dialog>
+  </div>
+</Modal>
 
-<style>dialog {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  outline: 0;
-  background-color: var(--sui-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[aria-disabled="false"]),
-dialog :global(textarea[aria-disabled="false"]),
-dialog :global(button[aria-disabled="false"]),
-dialog :global([tabindex="0"]) {
-  pointer-events: all;
-}
-dialog form {
+<style>.content {
+  position: relative;
   display: flex;
   flex-direction: column;
   border-radius: 4px;
-  max-width: calc(100vw - 32px);
+  max-width: calc(100dvw - 32px);
   background-color: var(--sui-secondary-background-color-translucent);
-  -webkit-backdrop-filter: blur(32px);
-  backdrop-filter: blur(32px);
   box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
-  will-change: opacity, transform;
-  transition-property: opacity, transform;
+  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px);
+  transition-property: transform;
+}
+:global(dialog.open) .content {
+  transition-duration: 150ms;
+  transform: scale(100%);
+}
+:global(dialog:not(.open)) .content {
+  transition-duration: 300ms;
+  transform: scale(90%);
 }
-dialog.small form {
+.content.small {
   width: 400px;
   max-height: 400px;
 }
 @media (max-height: 400px) {
-  dialog.small form {
-    max-height: calc(100vh - 32px);
+  .content.small {
+    max-height: calc(100dvh - 32px);
   }
 }
-dialog.medium form {
+.content.medium {
   width: 600px;
   max-height: 600px;
 }
 @media (max-height: 600px) {
-  dialog.medium form {
-    max-height: calc(100vh - 32px);
+  .content.medium {
+    max-height: calc(100dvh - 32px);
   }
 }
-dialog.large form {
+.content.large {
   width: 800px;
   max-height: 800px;
 }
 @media (max-height: 800px) {
-  dialog.large form {
-    max-height: calc(100vh - 32px);
+  .content.large {
+    max-height: calc(100dvh - 32px);
   }
 }
-dialog.x-large form {
+.content.x-large {
   width: 1000px;
   max-height: 1000px;
 }
 @media (max-height: 1000px) {
-  dialog.x-large form {
-    max-height: calc(100vh - 32px);
+  .content.x-large {
+    max-height: calc(100dvh - 32px);
   }
 }
 
@@ -295,7 +238,7 @@ dialog.x-large form {
 .footer {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
 }
 
 .header {
@@ -314,8 +257,9 @@ dialog.x-large form {
   margin: 0 24px 24px;
 }
 
-.main {
+.body {
   overflow: auto;
   margin: 24px 24px;
   white-space: normal;
+  line-height: var(--sui-line-height-compact);
 }</style>

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

@@ -8,21 +8,25 @@
  */
 export default class Dialog extends SvelteComponent<{
     [x: string]: any;
+    title: string;
     class?: string;
-    title?: string;
     size?: "small" | "medium" | "large" | "x-large";
+    role?: "dialog" | "alertdialog";
     open?: boolean;
-    modal?: boolean;
-    showCancel?: boolean;
-    showOk?: boolean;
+    lightDismiss?: boolean;
     showClose?: boolean;
+    showOk?: boolean;
     okLabel?: string;
     okDisabled?: boolean;
+    showCancel?: boolean;
     cancelLabel?: string;
     cancelDisabled?: boolean;
-    closeOnBackdropClick?: boolean;
 }, {
-    submit: SubmitEvent;
+    opening: CustomEvent<any>;
+    open: CustomEvent<any>;
+    ok: CustomEvent<any>;
+    cancel: CustomEvent<any>;
+    closing: CustomEvent<any>;
     close: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
@@ -41,22 +45,26 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        title: string;
         class?: string;
-        title?: string;
         size?: ('small' | 'medium' | 'large' | 'x-large');
+        role?: 'dialog' | 'alertdialog';
         open?: boolean;
-        modal?: boolean;
-        showCancel?: boolean;
-        showOk?: boolean;
+        lightDismiss?: boolean;
         showClose?: boolean;
+        showOk?: boolean;
         okLabel?: string;
         okDisabled?: boolean;
+        showCancel?: boolean;
         cancelLabel?: string;
         cancelDisabled?: boolean;
-        closeOnBackdropClick?: boolean;
     };
     events: {
-        submit: SubmitEvent;
+        opening: CustomEvent<any>;
+        open: CustomEvent<any>;
+        ok: CustomEvent<any>;
+        cancel: CustomEvent<any>;
+        closing: CustomEvent<any>;
         close: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +1,87 @@
+<!--
+  @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
+        flex
+        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 {};