@sveltia/ui 0.7.5 → 0.8.0

package/package/components/util/modal.svelte

@@ -0,0 +1,220 @@
+<!--
+  @component
+  A generic modal top-layer helper based on the HTML `<dialog>` element.
+-->
+<svelte:options accessors={true} />
+
+<script>
+  import { createEventDispatcher, onMount } from 'svelte';
+
+  /**
+   * The `class` attribute on the `<dialog>` element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+  /**
+   * The `role` attribute on the `<dialog>` element.
+   * @type {'dialog' | 'alertdialog' | 'none'}
+   */
+  export let role = 'dialog';
+  /**
+   * Whether to show the modal.
+   * @type {boolean}
+   */
+  export let open = false;
+  /**
+   * Whether to show the backdrop.
+   * @type {boolean}
+   */
+  export let showBackdrop = false;
+  /**
+   * Whether to close the modal when the backdrop (outside of the modal) is clicked.
+   * @type {boolean}
+   */
+  export let lightDismiss = false;
+  /**
+   * Whether to close the modal when the Escape key is pressed.
+   * @type {boolean}
+   */
+  export let escapeDismiss = true;
+  /**
+   * Whether to keep the content in the DOM tree when the modal is not displayed.
+   * @type {boolean}
+   */
+  export let keepContent = false;
+  /**
+   * A reference to the `<dialog>` element.
+   * @type {HTMLDialogElement}
+   */
+  export let dialog = undefined;
+  /**
+   * Close the modal.
+   * @param {string} returnValue Return value to be used for `<dialog>`.
+   */
+  export const close = (returnValue) => {
+    dialog.returnValue = returnValue;
+    open = false;
+  };
+
+  const dispatch = createEventDispatcher();
+  let setOpenClass = false;
+  let setActiveClass = false;
+  let showContent = false;
+
+  /**
+   * Resolve once the transition is complete.
+   * @returns {Promise<void>} Nothing.
+   */
+  const waitForTransition = async () =>
+    new Promise((resolve) => {
+      /**
+       * @param {TransitionEvent} event `transition` event.
+       */
+      const listener = (event) => {
+        if (event.target === dialog) {
+          dialog.removeEventListener('transitionend', listener);
+          resolve();
+        }
+      };
+
+      dialog.addEventListener('transitionend', listener);
+    });
+
+  /**
+   * Show the modal.
+   */
+  const openDialog = async () => {
+    dispatch('opening');
+    (document.querySelector('.sui.app-shell') ?? document.body).appendChild(dialog);
+    showContent = true;
+    dialog.showModal();
+
+    window.requestAnimationFrame(async () => {
+      dispatch('open');
+      setOpenClass = true;
+      await waitForTransition();
+      setActiveClass = true;
+    });
+  };
+
+  /**
+   * Hide the modal.
+   */
+  const closeDialog = async () => {
+    dispatch('closing');
+    setActiveClass = false;
+    setOpenClass = false;
+    await waitForTransition();
+    showContent = false;
+    dialog.close();
+    dialog.remove();
+
+    if (['ok', 'cancel'].includes(dialog?.returnValue)) {
+      dispatch(dialog?.returnValue);
+    }
+
+    dispatch('close', dialog?.returnValue);
+    dialog.returnValue = undefined;
+  };
+
+  /**
+   * Toggle the modal.
+   */
+  const toggleDialog = () => {
+    if (dialog) {
+      if (open) {
+        openDialog();
+      } else {
+        closeDialog();
+      }
+    }
+  };
+
+  $: {
+    void open;
+    void dialog;
+    toggleDialog();
+  }
+
+  onMount(() => {
+    dialog.remove();
+
+    // onUnmount
+    return () => {
+      dialog?.close();
+      dialog?.remove();
+    };
+  });
+</script>
+
+<dialog
+  {role}
+  class="sui modal {className}"
+  class:backdrop={showBackdrop}
+  class:open={setOpenClass}
+  class:active={setActiveClass}
+  {...$$restProps}
+  bind:this={dialog}
+  on:click={({ target }) => {
+    if (lightDismiss && /** @type {HTMLElement?} */ (target)?.matches('dialog')) {
+      dialog.returnValue = 'cancel';
+      open = false;
+    }
+  }}
+  on:cancel|preventDefault={() => {
+    // Escape key is pressed
+    if (escapeDismiss) {
+      open = false;
+    }
+  }}
+>
+  <slot name="always-show" />
+  {#if showContent || keepContent}
+    <slot />
+  {/if}
+</dialog>
+
+<style>dialog {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  outline: 0;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: 100dvw;
+  max-width: 100dvw;
+  height: 100dvh;
+  max-height: 100dvh;
+  color: var(--sui-primary-foreground-color);
+  background: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: none;
+  pointer-events: all;
+  cursor: default;
+}
+dialog::backdrop {
+  background: transparent;
+}
+dialog.backdrop {
+  background-color: var(--sui-popup-backdrop-color);
+}
+dialog.open {
+  transition-duration: 200ms;
+  opacity: 1;
+}
+dialog:not(.open) {
+  transition-duration: 400ms;
+  opacity: 0;
+}
+dialog:not(.active) {
+  pointer-events: none !important;
+}
+dialog:not(.active) :global(*) {
+  pointer-events: none !important;
+}</style>

package/package/components/util/modal.svelte.d.ts

@@ -0,0 +1,83 @@
+/** @typedef {typeof __propDef.props}  ModalProps */
+/** @typedef {typeof __propDef.events}  ModalEvents */
+/** @typedef {typeof __propDef.slots}  ModalSlots */
+/** A generic modal top-layer helper based on the HTML `<dialog>` element. */
+export default class Modal extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
+    close?: (returnValue: string) => void;
+    dialog?: HTMLDialogElement;
+    role?: "dialog" | "none" | "alertdialog";
+    open?: boolean;
+    showBackdrop?: boolean;
+    lightDismiss?: boolean;
+    escapeDismiss?: boolean;
+    keepContent?: boolean;
+}, {
+    opening: CustomEvent<any>;
+    open: CustomEvent<any>;
+    closing: CustomEvent<any>;
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'always-show': {};
+    default: {};
+}> {
+    get close(): (returnValue: string) => void;
+    /**accessor*/
+    set class(arg: string);
+    get class(): string;
+    /**accessor*/
+    set role(arg: "dialog" | "none" | "alertdialog");
+    get role(): "dialog" | "none" | "alertdialog";
+    /**accessor*/
+    set open(arg: boolean);
+    get open(): boolean;
+    /**accessor*/
+    set showBackdrop(arg: boolean);
+    get showBackdrop(): boolean;
+    /**accessor*/
+    set lightDismiss(arg: boolean);
+    get lightDismiss(): boolean;
+    /**accessor*/
+    set escapeDismiss(arg: boolean);
+    get escapeDismiss(): boolean;
+    /**accessor*/
+    set keepContent(arg: boolean);
+    get keepContent(): boolean;
+    /**accessor*/
+    set dialog(arg: HTMLDialogElement);
+    get dialog(): HTMLDialogElement;
+}
+export type ModalProps = typeof __propDef.props;
+export type ModalEvents = typeof __propDef.events;
+export type ModalSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        close?: (returnValue: string) => void;
+        dialog?: HTMLDialogElement;
+        role?: 'dialog' | 'alertdialog' | 'none';
+        open?: boolean;
+        showBackdrop?: boolean;
+        lightDismiss?: boolean;
+        escapeDismiss?: boolean;
+        keepContent?: boolean;
+    };
+    events: {
+        opening: CustomEvent<any>;
+        open: CustomEvent<any>;
+        closing: CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'always-show': {};
+        default: {};
+    };
+};
+export {};

package/package/components/util/popup.svelte

@@ -9,40 +9,34 @@
   import { writable } from 'svelte/store';
   import { activatePopup } from '../../services/popup';
   import { sleep } from '../../services/util';
+  import Modal from './modal.svelte';
 
   /**
-   * The `class` attribute on the `<button>` element.
+   * The `class` attribute on the content element.
    * @type {string}
    */
   let className = '';
   export { className as class };
-
-  /** @type {HTMLElement | undefined} */
-  export let anchor = undefined;
-
   /**
-   * Reference to the popup element.
-   * @type {HTMLDialogElement | undefined}
+   * Whether to open the popup.
+   * @type {import('svelte/store').Writable<boolean>}
    */
-  export let dialog = undefined;
-
+  export let open = writable(false);
+  /**
+   * A reference to the anchor element that opens the popup. Typically a `<button>`.
+   * @type {HTMLElement}
+   */
+  export let anchor;
   /**
-   * Reference to the content element.
-   * @type {HTMLElement | undefined}
+   * A reference to the content element.
+   * @type {HTMLElement}
    */
   export let content = undefined;
-
   /**
-   * Where to show the dropdown menu.
+   * Where to show the popup.
    * @type {PopupPosition}
    */
   export let position = 'bottom-left';
-
-  /**
-   * Whether to keep the content when the dialog is not displayed.
-   */
-  export let keepContent = false;
-
   /**
    * Whether to show the popup at the center of the screen on mobile/tablet and ignore the defined
    * dropdown `position`.
@@ -50,14 +44,27 @@
    */
   export let touchOptimized = false;
 
-  export let open = writable(false);
-
-  let showDialog = false;
-  let showContent = false;
+  /**
+   * A reference to the modal component.
+   * @type {Modal}
+   */
+  let modal;
+  /**
+   * Whether the touch is enabled on the user device.
+   * @type {boolean}
+   */
   let touchEnabled = false;
-  /** @type {string | undefined} */
+  /**
+   * The type of the content displayed in the popup, defined with the `aria-haspopup` attribute on
+   * the anchor element.
+   * @type {string}
+   * @see https://w3c.github.io/aria/#aria-haspopup
+   */
   let contentType;
-
+  /**
+   * Style to be applied to the content.
+   * @type {import('svelte/store').Writable<any>}
+   */
   let style = writable({
     inset: undefined,
     zIndex: undefined,
@@ -66,156 +73,103 @@
   });
 
   $: {
-    if (anchor && dialog) {
-      ({ open, style } = activatePopup(anchor, dialog, position));
+    if (anchor && modal?.dialog) {
+      ({ open, style } = activatePopup(anchor, modal.dialog, position));
       contentType = anchor.getAttribute('aria-haspopup');
     }
   }
 
-  /**
-   *
-   */
-  const openDialog = () => {
-    (document.querySelector('.sui.app-shell') ?? document.body).appendChild(dialog);
-    showContent = true;
-    dialog.showModal();
-
-    window.requestAnimationFrame(async () => {
-      showDialog = true;
-      await sleep(100);
-
-      const target = /** @type {HTMLElement} */ (
-        content.querySelector('[tabindex]:not([aria-disabled="true"])')
-      );
-
-      if (target) {
-        target.focus();
-      } else {
-        content.tabIndex = -1;
-        content.focus();
-      }
-    });
-  };
-
-  /**
-   *
-   */
-  const closeDialog = async () => {
-    showDialog = false;
-
-    await new Promise((resolve) => {
-      content.addEventListener('transitionend', () => resolve(), { once: true });
-    });
-
-    showContent = false;
-    dialog?.close();
-    dialog?.remove();
-  };
-
-  /**
-   *
-   */
-  const toggleDialog = () => {
-    if (dialog) {
-      if ($open) {
-        openDialog();
-      } else {
-        closeDialog();
-      }
-    }
-  };
-
-  $: {
-    void $open;
-    toggleDialog();
-  }
+  $: touch = touchOptimized && touchEnabled;
 
   onMount(() => {
-    dialog.remove();
-
     touchEnabled = window.matchMedia('(pointer: coarse)').matches;
-
-    // onUnmount
-    return () => {
-      dialog?.close();
-      dialog?.remove();
-    };
   });
 </script>
 
-<dialog
-  class="sui popup {className}"
+<Modal
   role="none"
-  bind:this={dialog}
-  class:touch={touchOptimized && touchEnabled}
-  class:open={showDialog}
+  class="popup"
+  bind:open={$open}
+  showBackdrop={touch}
+  lightDismiss={true}
+  keepContent={true}
+  bind:this={modal}
   {...$$restProps}
+  on:opening
+  on:open
+  on:ok
+  on:cancel
+  on:closing
+  on:close
+  on:open={async () => {
+    await sleep(100);
+
+    const target = /** @type {HTMLElement} */ (
+      content.querySelector('[tabindex]:not([aria-disabled="true"])')
+    );
+
+    if (target) {
+      target.focus();
+    } else {
+      content.tabIndex = -1;
+      content.focus();
+    }
+  }}
 >
   <div
-    bind:this={content}
-    class="content {contentType}"
+    role="none"
+    class="content {className} {contentType}"
+    class:touch
     style:inset={$style.inset}
     style:z-index={$style.zIndex}
     style:min-width={$style.width}
     style:max-height={$style.height}
     style:visibility={$style.inset ? undefined : 'hidden'}
+    bind:this={content}
   >
-    {#if keepContent || showContent}
-      <slot />
-    {/if}
+    <slot />
   </div>
-</dialog>
+</Modal>
 
-<style>.popup.touch {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--sui-popup-backdrop-color);
-}
-.popup.touch .content {
+<style>.content.touch {
   position: static;
   border-width: 0 !important;
   border-radius: 4px !important;
   padding: 8px;
   min-width: 320px !important;
-  max-width: calc(100vw - 32px) !important;
-  max-height: calc(100vh - 32px) !important;
+  max-width: calc(100dvw - 32px) !important;
+  max-height: calc(100dvh - 32px) !important;
 }
-.popup.touch.open .content {
+:global(dialog.open) .content.touch {
   transform: scale(100%) !important;
 }
-.popup.touch:not(.open) .content {
+:global(dialog:not(.open)) .content.touch {
   transform: scale(90%);
 }
-.popup.touch.combobox :global(.sui.listbox) {
+.content.touch.combobox :global(.sui.listbox) {
   gap: 4px;
   padding: 8px 4px !important;
 }
-.popup.open .content {
+:global(dialog.open) .content {
+  transition-duration: 150ms;
   opacity: 1;
   transform: translateY(2px);
-  transition-duration: 100ms;
-}
-.popup:not(.open) {
-  pointer-events: none;
 }
-.popup:not(.open) .content {
+:global(dialog:not(.open)) .content {
+  transition-duration: 300ms;
   opacity: 0;
   transform: translateY(-8px);
-  pointer-events: none;
-  transition-duration: 200ms;
 }
 
 .content {
-  position: fixed;
+  position: absolute;
   overflow-y: auto;
   outline-width: 0 !important;
   color: var(--sui-primary-foreground-color);
   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;
+  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px);
   transition-property: opacity, transform;
 }
 .content.listbox, .content.menu {

package/package/components/util/popup.svelte.d.ts

@@ -4,15 +4,20 @@
 /** Generic popup helper. */
 export default class Popup extends SvelteComponent<{
     [x: string]: any;
+    anchor: HTMLElement;
     class?: string;
-    dialog?: HTMLDialogElement;
     position?: PopupPosition;
-    anchor?: HTMLElement;
+    open?: import("svelte/store").Writable<boolean>;
     content?: HTMLElement;
-    keepContent?: boolean;
     touchOptimized?: boolean;
-    open?: import("svelte/store").Writable<boolean>;
 }, {
+    opening: CustomEvent<any>;
+    open: CustomEvent<any>;
+    ok: CustomEvent<any>;
+    cancel: CustomEvent<any>;
+    closing: CustomEvent<any>;
+    close: CustomEvent<any>;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
@@ -21,26 +26,20 @@ export default class Popup extends SvelteComponent<{
     set class(arg: string);
     get class(): string;
     /**accessor*/
+    set open(arg: import("svelte/store").Writable<boolean>);
+    get open(): import("svelte/store").Writable<boolean>;
+    /**accessor*/
     set anchor(arg: HTMLElement);
     get anchor(): HTMLElement;
     /**accessor*/
-    set dialog(arg: HTMLDialogElement);
-    get dialog(): HTMLDialogElement;
-    /**accessor*/
     set content(arg: HTMLElement);
     get content(): HTMLElement;
     /**accessor*/
     set position(arg: PopupPosition);
     get position(): PopupPosition;
     /**accessor*/
-    set keepContent(arg: boolean);
-    get keepContent(): boolean;
-    /**accessor*/
     set touchOptimized(arg: boolean);
     get touchOptimized(): boolean;
-    /**accessor*/
-    set open(arg: import("svelte/store").Writable<boolean>);
-    get open(): import("svelte/store").Writable<boolean>;
 }
 export type PopupProps = typeof __propDef.props;
 export type PopupEvents = typeof __propDef.events;
@@ -49,16 +48,21 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        anchor: HTMLElement;
         class?: string;
-        dialog?: HTMLDialogElement | undefined;
         position?: PopupPosition;
-        anchor?: HTMLElement | undefined;
-        content?: HTMLElement | undefined;
-        keepContent?: boolean;
+        open?: import('svelte/store').Writable<boolean>;
+        content?: HTMLElement;
         touchOptimized?: boolean;
-        open?: import("svelte/store").Writable<boolean>;
     };
     events: {
+        opening: CustomEvent<any>;
+        open: CustomEvent<any>;
+        ok: CustomEvent<any>;
+        cancel: CustomEvent<any>;
+        closing: CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/package/components/util/portal.svelte

@@ -25,7 +25,7 @@
   });
 </script>
 
-<div class="sui portal {className}" {...$$restProps} bind:this={ref}>
+<div role="none" class="sui portal {className}" {...$$restProps} bind:this={ref}>
   <slot />
 </div>