@sveltia/ui 0.15.16 → 0.17.0

package/package/components/toolbar/toolbar.svelte.d.ts

@@ -1,44 +1,82 @@
-/** @typedef {typeof __propDef.props}  ToolbarProps */
-/** @typedef {typeof __propDef.events}  ToolbarEvents */
-/** @typedef {typeof __propDef.slots}  ToolbarSlots */
+export default Toolbar;
+type Toolbar = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "" | undefined;
+};
 /**
  * A toolbar layout that can contain `<Button>`, `<Select>` and other widgets.
  * @see https://w3c.github.io/aria/#toolbar
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
  */
-export default class Toolbar extends SvelteComponent<{
-    [x: string]: any;
+declare const Toolbar: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
-    disabled?: boolean | undefined;
+    /**
+     * - Whether to hide the widget.
+     */
     hidden?: boolean | undefined;
-    variant?: "primary" | "secondary" | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Orientation of the widget. An alias of
+     * the `aria-orientation` attribute.
+     */
     orientation?: "vertical" | "horizontal" | undefined;
-}, {
+    /**
+     * - The style variant of the toolbar.
+     */
+    variant?: "primary" | "secondary" | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type ToolbarProps = typeof __propDef.props;
-export type ToolbarEvents = typeof __propDef.events;
-export type ToolbarSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        disabled?: boolean | undefined;
-        hidden?: boolean | undefined;
-        variant?: "primary" | "secondary" | undefined;
-        orientation?: "vertical" | "horizontal" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
+}, {}, {}, "">;
+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;
+    /**
+     * - Orientation of the widget. An alias of
+     * the `aria-orientation` attribute.
+     */
+    orientation?: "vertical" | "horizontal" | undefined;
+    /**
+     * - The style variant of the toolbar.
+     */
+    variant?: "primary" | "secondary" | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
 };
-export {};
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/package/components/util/app-shell.svelte

@@ -8,10 +8,22 @@
   import { onMount } from 'svelte';
 
   /**
-   * Orientation of the app shell’s children.
-   * @type {'horizontal' | 'vertical' | undefined}
+   * @typedef {object} Props
+   * @property {'horizontal' | 'vertical' | undefined} [orientation] - Orientation of the app
+   * shell’s children..
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
    */
-  export let orientation = undefined;
+
+  /**
+   * @type {Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    orientation = 'horizontal',
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   const stylesheets = [
     // https://fonts.google.com/share?selection.family=Merriweather%20Sans:ital,wght@0,300;0,600;1,300%7CNoto%20Sans%20Mono
@@ -22,7 +34,7 @@
   ];
 
   /** @type {HTMLElement | undefined} */
-  let fontLoader;
+  let fontLoader = $state();
 
   onMount(() => {
     const mediaQuery = globalThis.matchMedia('(prefers-color-scheme: dark)');
@@ -62,18 +74,18 @@
 </svelte:head>
 
 <!-- Preload fonts, including the icons -->
-<div class="font-loader" aria-hidden="true" bind:this={fontLoader} style:opacity="0">
+<div bind:this={fontLoader} class="font-loader" aria-hidden="true" style:opacity="0">
   Loading <strong>Sveltia</strong> <em>UI</em>
   <span role="none" class="material-symbols-outlined">favorite</span>
 </div>
 
 <div
+  {...restProps}
   role="none"
   class="sui app-shell {orientation ?? ''}"
-  {...$$restProps}
-  on:dragover|preventDefault
-  on:drop|preventDefault
-  on:contextmenu={(event) => {
+  ondragover={(event) => event.preventDefault()}
+  ondrop={(event) => event.preventDefault()}
+  oncontextmenu={(event) => {
     // Enable the native context menu only in the developer mode or on text fields
     if (
       !document.documentElement.matches('[data-env="dev"]') &&
@@ -83,7 +95,7 @@
     }
   }}
 >
-  <slot />
+  {@render children?.()}
 </div>
 
 <style global>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300;1,600&family=Noto+Sans+Mono&display=swap");

package/package/components/util/app-shell.svelte.d.ts

@@ -1,42 +1,48 @@
-/** @typedef {typeof __propDef.props}  AppShellProps */
-/** @typedef {typeof __propDef.events}  AppShellEvents */
-/** @typedef {typeof __propDef.slots}  AppShellSlots */
+export default AppShell;
+type AppShell = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "" | undefined;
+};
 /**
  * Provide an application’s shell that makes the web app more like a native app. It also handles the
  * dark/light mode switching. This component has to be placed directly under `<body>` (or
  * `<div style="display:contents">` in a SvelteKit app).
  */
-export default class AppShell extends SvelteComponent<{
-    [x: string]: any;
+declare const AppShell: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - Orientation of the app
+     * shell’s children..
+     */
     orientation?: "horizontal" | "vertical" | undefined;
-}, {
-    dragover: DragEvent;
-    drop: DragEvent;
-} & {
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type AppShellProps = typeof __propDef.props;
-export type AppShellEvents = typeof __propDef.events;
-export type AppShellSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        orientation?: "horizontal" | "vertical" | undefined;
-    };
-    events: {
-        dragover: DragEvent;
-        drop: DragEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - Orientation of the app
+     * shell’s children..
+     */
+    orientation?: "horizontal" | "vertical" | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
 };
-export {};
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/package/components/util/group.svelte

@@ -5,33 +5,38 @@
 -->
 <script>
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {string} [class] - The `class` attribute on the wrapper element.
+   * @property {boolean} [hidden] - Whether to hide the widget.
+   * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`
+   * attribute.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
    */
-  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 disable the widget. An alias of the `aria-disabled` attribute.
-   * @type {boolean}
+   * @type {Props & Record<string, any>}
    */
-  export let disabled = false;
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    hidden = false,
+    disabled = false,
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <div
+  {...restProps}
   role="group"
   class="sui group {className}"
-  hidden={hidden || undefined}
+  {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
-  {...$$restProps}
 >
   <div role="none" class="inner" inert={disabled}>
-    <slot />
+    {@render children?.()}
   </div>
 </div>
 

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

@@ -1,39 +1,63 @@
-/** @typedef {typeof __propDef.props}  GroupProps */
-/** @typedef {typeof __propDef.events}  GroupEvents */
-/** @typedef {typeof __propDef.slots}  GroupSlots */
+export default Group;
+type Group = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "" | undefined;
+};
 /**
  * A generic group layout.
  * @see https://w3c.github.io/aria/#group
  */
-export default class Group extends SvelteComponent<{
-    [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;
-}, {
+    /**
+     * - 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: {};
-}> {
-}
-export type GroupProps = typeof __propDef.props;
-export type GroupEvents = typeof __propDef.events;
-export type GroupSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        disabled?: boolean | undefined;
-        hidden?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
+}, {}, {}, "">;
+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;
 };
-export {};
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$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;