@sveltia/ui 0.16.0 → 0.17.0

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

@@ -1,39 +1,53 @@
 export default Group;
-type Group = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    hidden?: boolean | undefined;
-}, {
-    default: {};
-}>, {
+type Group = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /**
  * A generic group layout.
  * @see https://w3c.github.io/aria/#group
  */
-declare const Group: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const Group: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
-    disabled?: boolean | undefined;
+    /**
+     * - Whether to hide the widget.
+     */
     hidden?: boolean | undefined;
-}, {
-    default: {};
-}>, {
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to hide the widget.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/package/components/util/modal.svelte

@@ -2,53 +2,36 @@
   @component
   A generic modal top-layer helper based on the HTML `<dialog>` element.
 -->
-<svelte:options accessors={true} />
-
 <script>
   import { sleep } from '@sveltia/utils/misc';
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { mount, onMount, unmount } from 'svelte';
+  import Placeholder from './placeholder.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 | undefined}
+   * @type {import('../../typedefs').ModalProps & Record<string, any>}
    */
-  export let dialog = undefined;
+  let {
+    /* eslint-disable prefer-const */
+    open = $bindable(false),
+    dialog = $bindable(),
+    class: className,
+    role = 'dialog',
+    showBackdrop = false,
+    lightDismiss = false,
+    escapeDismiss = true,
+    keepContent = false,
+    children,
+    extraContent,
+    onOpening,
+    onOpen,
+    onClosing,
+    onOk,
+    onCancel,
+    onClose,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+
   /**
    * Close the modal.
    * @param {string} returnValue - Return value to be used for `<dialog>`.
@@ -62,10 +45,9 @@
     open = false;
   };
 
-  const dispatch = createEventDispatcher();
-  let setOpenClass = false;
-  let setActiveClass = false;
-  let showContent = false;
+  let setOpenClass = $state(false);
+  let setActiveClass = $state(false);
+  let showContent = $state(false);
 
   /**
    * Resolve once the transition is complete.
@@ -91,15 +73,14 @@
    * Show the modal.
    */
   const openDialog = async () => {
-    if (!dialog) {
+    if (!dialog || dialog?.open) {
       return;
     }
 
-    dispatch('opening');
-    (document.querySelector('.sui.app-shell') ?? document.body).appendChild(dialog);
+    onOpening?.(new CustomEvent('Opening'));
     showContent = true;
     dialog.showModal();
-    dispatch('open');
+    onOpen?.(new CustomEvent('Open'));
     await sleep(100);
     setOpenClass = true;
     await waitForTransition();
@@ -110,90 +91,93 @@
    * Hide the modal.
    */
   const closeDialog = async () => {
-    if (!dialog) {
+    if (!dialog || !dialog.open) {
       return;
     }
 
-    dispatch('closing');
+    onClosing?.(new CustomEvent('Closing'));
     setActiveClass = false;
     setOpenClass = false;
     await waitForTransition();
     showContent = false;
     dialog.close();
-    dialog.remove();
 
-    if (['ok', 'cancel'].includes(dialog.returnValue)) {
-      dispatch(dialog?.returnValue);
+    if (dialog.returnValue === 'ok') {
+      onOk?.(new CustomEvent('Ok'));
+      onClose?.(new CustomEvent('Close', { detail: { returnValue: 'ok' } }));
+    }
+
+    if (dialog.returnValue === 'cancel') {
+      onCancel?.(new CustomEvent('Cancel'));
+      onClose?.(new CustomEvent('Close', { detail: { returnValue: 'cancel' } }));
     }
 
-    dispatch('close', dialog.returnValue);
     dialog.returnValue = '';
   };
 
-  /**
-   * Toggle the modal.
-   */
-  const toggleDialog = () => {
-    if (dialog) {
-      if (open) {
-        openDialog();
-      } else {
-        closeDialog();
-      }
+  $effect(() => {
+    if (open) {
+      openDialog();
+    } else {
+      closeDialog();
     }
-  };
-
-  $: {
-    void open;
-    toggleDialog();
-  }
+  });
 
   onMount(() => {
-    dialog?.remove();
+    const placeholder = mount(Placeholder, {
+      target: document.querySelector('.sui.app-shell') ?? document.body,
+      // eslint-disable-next-line no-use-before-define
+      props: { children: dialogSnippet },
+    });
 
     // onUnmount
     return () => {
       dialog?.close();
-      dialog?.remove();
+      unmount(placeholder);
     };
   });
 </script>
 
-<dialog
-  {role}
-  class="sui modal {className}"
-  class:backdrop={showBackdrop}
-  class:open={setOpenClass}
-  class:active={setActiveClass}
-  {...$$restProps}
-  bind:this={dialog}
-  on:click={({ target }) => {
-    if (
-      dialog &&
-      lightDismiss &&
-      /** @type {HTMLElement | undefined} */ (target)?.matches('dialog')
-    ) {
-      dialog.returnValue = 'cancel';
-      open = false;
-    }
-  }}
-  on:cancel|preventDefault={() => {
-    // Escape key is pressed
-    if (dialog && escapeDismiss) {
-      dialog.returnValue = 'cancel';
-      open = false;
-    }
-  }}
->
-  <slot name="extra-content" />
-  {#if showContent || keepContent}
-    <slot />
-  {/if}
-</dialog>
+{#snippet dialogSnippet()}
+  <dialog
+    bind:this={dialog}
+    {...restProps}
+    {role}
+    class="sui modal {className}"
+    class:backdrop={showBackdrop}
+    class:open={setOpenClass}
+    class:active={setActiveClass}
+    onclick={({ target }) => {
+      if (
+        dialog &&
+        lightDismiss &&
+        /** @type {HTMLElement | undefined} */ (target)?.matches('dialog')
+      ) {
+        dialog.returnValue = 'cancel';
+        open = false;
+      }
+    }}
+    oncancel={(event) => {
+      event.preventDefault();
+
+      // Escape key is pressed
+      if (dialog && escapeDismiss) {
+        dialog.returnValue = 'cancel';
+        open = false;
+      }
+    }}
+  >
+    {@render extraContent?.()}
+    {#if showContent || keepContent}
+      {@render children?.()}
+    {/if}
+  </dialog>
+{/snippet}
 
 <style>dialog {
   position: fixed;
   inset: 0;
+  z-index: 9999999;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -1,82 +1,17 @@
 export default Modal;
-type Modal = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    close?: ((returnValue: string) => void) | undefined;
-    dialog?: HTMLDialogElement | undefined;
-    role?: "dialog" | "none" | "alertdialog" | undefined;
-    open?: boolean | undefined;
-    showBackdrop?: boolean | undefined;
-    lightDismiss?: boolean | undefined;
-    escapeDismiss?: boolean | undefined;
-    keepContent?: boolean | undefined;
-}, {
-    'extra-content': {};
-    default: {};
-}>, {
-    opening: CustomEvent<any>;
-    open: CustomEvent<any>;
-    closing: CustomEvent<any>;
-    close: CustomEvent<any>;
-} & {
+type Modal = SvelteComponent<ModalProps & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'extra-content': {};
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "dialog" | "open" | undefined;
 } & {
-    class: string;
-    role: "dialog" | "none" | "alertdialog";
-    open: boolean;
-    showBackdrop: boolean;
-    lightDismiss: boolean;
-    escapeDismiss: boolean;
-    keepContent: boolean;
-    dialog: HTMLDialogElement | undefined;
     close: (returnValue: string) => void;
 };
 /** A generic modal top-layer helper based on the HTML `<dialog>` element. */
-declare const Modal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    close?: ((returnValue: string) => void) | undefined;
-    dialog?: HTMLDialogElement | undefined;
-    role?: "dialog" | "none" | "alertdialog" | undefined;
-    open?: boolean | undefined;
-    showBackdrop?: boolean | undefined;
-    lightDismiss?: boolean | undefined;
-    escapeDismiss?: boolean | undefined;
-    keepContent?: boolean | undefined;
-}, {
-    'extra-content': {};
-    default: {};
-}>, {
-    opening: CustomEvent<any>;
-    open: CustomEvent<any>;
-    closing: CustomEvent<any>;
-    close: CustomEvent<any>;
-} & {
+declare const Modal: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ModalProps & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'extra-content': {};
-    default: {};
-}, {
-    class: string;
-    role: "dialog" | "none" | "alertdialog";
-    open: boolean;
-    showBackdrop: boolean;
-    lightDismiss: boolean;
-    escapeDismiss: boolean;
-    keepContent: boolean;
-    dialog: HTMLDialogElement | undefined;
+}, {}, {
     close: (returnValue: string) => void;
-}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
+}, "dialog" | "open">;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/package/components/util/placeholder.svelte

@@ -0,0 +1,21 @@
+<!--
+  @component
+  @see https://github.com/sveltejs/svelte/issues/3088
+-->
+<script>
+  /**
+   * @typedef {object} Props
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
+   */
+
+  /**
+   * @type {Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    children,
+    /* eslint-enable prefer-const */
+  } = $props();
+</script>
+
+{@render children?.()}

package/package/components/util/{portal.svelte.d.ts → placeholder.svelte.d.ts}

@@ -1,32 +1,24 @@
-export default Portal;
-type Portal = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-}, {
-    default: {};
-}>, {
+export default Placeholder;
+type Placeholder = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
 /** @see https://github.com/sveltejs/svelte/issues/3088 */
-declare const Portal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-}, {
-    default: {};
-}>, {
+declare const Placeholder: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;