@sveltia/ui 0.15.16 → 0.17.0

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

@@ -1,85 +1,27 @@
-/** @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 | 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;
-}, {
-    opening: CustomEvent<any>;
-    open: CustomEvent<any>;
-    closing: CustomEvent<any>;
-    close: CustomEvent<any>;
+export default Modal;
+type Modal = SvelteComponent<ModalProps & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "dialog" | "open" | undefined;
 } & {
+    close: (returnValue: string) => void;
+};
+/** A generic modal top-layer helper based on the HTML `<dialog>` element. */
+declare const Modal: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ModalProps & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'extra-content': {};
-    default: {};
-}> {
-    get close(): (returnValue: string) => void;
-    /**accessor*/
-    set class(_: string | undefined);
-    get class(): string | undefined;
-    /**accessor*/
-    set role(_: "dialog" | "none" | "alertdialog" | undefined);
-    get role(): "dialog" | "none" | "alertdialog" | undefined;
-    /**accessor*/
-    set open(_: boolean | undefined);
-    get open(): boolean | undefined;
-    /**accessor*/
-    set showBackdrop(_: boolean | undefined);
-    get showBackdrop(): boolean | undefined;
-    /**accessor*/
-    set lightDismiss(_: boolean | undefined);
-    get lightDismiss(): boolean | undefined;
-    /**accessor*/
-    set escapeDismiss(_: boolean | undefined);
-    get escapeDismiss(): boolean | undefined;
-    /**accessor*/
-    set keepContent(_: boolean | undefined);
-    get keepContent(): boolean | undefined;
-    /**accessor*/
-    set dialog(_: HTMLDialogElement | undefined);
-    get dialog(): HTMLDialogElement | undefined;
-}
-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 | 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;
+}, {}, {
+    close: (returnValue: string) => void;
+}, "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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        opening: CustomEvent<any>;
-        open: CustomEvent<any>;
-        closing: CustomEvent<any>;
-        close: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'extra-content': {};
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+    z_$$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/placeholder.svelte.d.ts

@@ -0,0 +1,34 @@
+export default Placeholder;
+type Placeholder = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "" | undefined;
+};
+/** @see https://github.com/sveltejs/svelte/issues/3088 */
+declare const Placeholder: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
+    [evt: string]: CustomEvent<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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/package/components/util/popup.svelte

@@ -2,75 +2,70 @@
   @component
   Generic popup helper.
 -->
-<svelte:options accessors={true} />
-
 <script>
   import { sleep } from '@sveltia/utils/misc';
   import { onMount } from 'svelte';
   import { writable } from 'svelte/store';
-  import { activatePopup } from '../../services/popup';
+  import { activatePopup } from '../../services/popup.svelte.js';
   import Modal from './modal.svelte';
 
   /**
-   * The `class` attribute on the content element.
-   * @type {string}
-   */
-  let className = '';
-  export { className as class };
-  /**
-   * Whether to open the popup.
-   * @type {import('svelte/store').Writable<boolean>}
-   */
-  export let open = writable(false);
-  /**
-   * Whether to show the backdrop.
-   * @type {boolean}
-   */
-  export let showBackdrop = false;
-  /**
-   * A reference to the anchor element that opens the popup. Typically a `<button>`.
-   * @type {HTMLElement | undefined}
-   */
-  export let anchor;
-  /**
-   * A reference to the content element.
-   * @type {HTMLElement | undefined}
-   */
-  export let content = undefined;
-  /**
-   * Where to show the popup.
-   * @type {import('../../typedefs').PopupPosition}
+   * @typedef {object} Props
+   * @property {string} [class] - The `class` attribute on the content element.
+   * @property {boolean} [open] - Whether to open the popup.
+   * @property {HTMLElement} anchor - A reference to the anchor element that opens the popup.
+   * Typically a `<button>`.
+   * @property {HTMLElement | undefined} [content] - A reference to the content element.
+   * @property {import('../../typedefs').PopupPosition} [position] - Where to show the popup.
+   * @property {HTMLElement | undefined} [positionBaseElement] - The base element of
+   * {@link position}. If omitted, this will be {@link anchor}.
+   * @property {boolean} [touchOptimized] - Whether to show the popup at the center of the screen on
+   * mobile/tablet and ignore the defined dropdown `position`.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
+   * @property {import('svelte').Snippet} [extraContent] - Extra slot content.
+   * @property {(event: CustomEvent) => void} [onOpen] - Custom `Open` event handler.
    */
-  export let position = 'bottom-left';
+
   /**
-   * The base element of {@link position}. If omitted, this will be {@link anchor}.
-   * @type {HTMLElement | undefined}
+   * @type {import('../../typedefs').ModalProps & Props & Record<string, any>}
    */
-  export let positionBaseElement = undefined;
+  let {
+    /* eslint-disable prefer-const */
+    open = $bindable(false),
+    content = $bindable(undefined),
+    class: className,
+    showBackdrop = false,
+    anchor,
+    position = 'bottom-left',
+    positionBaseElement = undefined,
+    touchOptimized = false,
+    children,
+    onOpen,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+
   /**
-   * Whether to show the popup at the center of the screen on mobile/tablet and ignore the defined
-   * dropdown `position`.
    * @type {boolean}
    */
-  export let touchOptimized = false;
-
+  let initialized = $state(false);
   /**
-   * A reference to the modal component.
-   * @type {Modal}
+   * A reference to the `<dialog>` element.
+   * @type {HTMLDialogElement | undefined}
    */
-  let modal;
+  let dialogElement = $state();
   /**
    * Whether the touch is enabled on the user device.
    * @type {boolean}
    */
-  let touchEnabled = false;
+  let touchEnabled = $state(false);
   /**
    * The type of the content displayed in the popup, defined with the `aria-haspopup` attribute on
    * the anchor element.
    * @type {string | undefined}
    * @see https://w3c.github.io/aria/#aria-haspopup
    */
-  let contentType;
+  let contentType = $state();
   /**
    * Style to be applied to the content.
    * @type {import('svelte/store').Writable<any>}
@@ -86,17 +81,30 @@
    * Initialize the popup.
    */
   const init = () => {
-    ({ open, style } = activatePopup(anchor, modal.dialog, position, positionBaseElement));
+    let openStore = writable(false);
+
+    ({ style, open: openStore } = activatePopup(
+      anchor,
+      dialogElement,
+      position,
+      positionBaseElement,
+    ));
+
+    openStore.subscribe((_open) => {
+      open = _open;
+    });
+
     contentType = anchor?.getAttribute('aria-haspopup') ?? undefined;
+    initialized = true;
   };
 
-  $: {
-    if (anchor && modal?.dialog) {
+  $effect(() => {
+    if (anchor && dialogElement && !initialized) {
       init();
     }
-  }
+  });
 
-  $: touch = touchOptimized && touchEnabled;
+  const touch = $derived(touchOptimized && touchEnabled);
 
   onMount(() => {
     touchEnabled = globalThis.matchMedia('(pointer: coarse)').matches;
@@ -104,21 +112,17 @@
 </script>
 
 <Modal
+  {...restProps}
+  bind:dialog={dialogElement}
   role="none"
   class="popup"
-  bind:open={$open}
+  bind:open
   showBackdrop={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 () => {
+  onOpen={async (event) => {
+    onOpen?.(event);
+
     await sleep(100);
 
     if (!content) {
@@ -137,8 +141,8 @@
     }
   }}
 >
-  <slot name="extra-content" slot="extra-content" />
   <div
+    bind:this={content}
     role="none"
     class="content {className} {contentType}"
     class:touch
@@ -148,9 +152,8 @@
     style:max-width={$style.maxWidth}
     style:max-height={$style.height}
     style:visibility={$style.inset ? undefined : 'hidden'}
-    bind:this={content}
   >
-    <slot />
+    {@render children?.()}
   </div>
 </Modal>
 

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

@@ -1,90 +1,112 @@
-/** @typedef {typeof __propDef.props}  PopupProps */
-/** @typedef {typeof __propDef.events}  PopupEvents */
-/** @typedef {typeof __propDef.slots}  PopupSlots */
+export default Popup;
+type Popup = SvelteComponent<ModalProps & Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "open" | "content" | undefined;
+};
 /** Generic popup helper. */
-export default class Popup extends SvelteComponent<{
-    [x: string]: any;
-    anchor: HTMLElement | undefined;
+declare const Popup: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ModalProps & {
+    /**
+     * - The `class` attribute on the content element.
+     */
     class?: string | undefined;
-    position?: import("../../typedefs").PopupPosition | undefined;
-    open?: import("svelte/store").Writable<boolean> | undefined;
-    showBackdrop?: boolean | undefined;
+    /**
+     * - Whether to open the popup.
+     */
+    open?: boolean | undefined;
+    /**
+     * - A reference to the anchor element that opens the popup.
+     * Typically a `<button>`.
+     */
+    anchor: HTMLElement;
+    /**
+     * - A reference to the content element.
+     */
     content?: HTMLElement | undefined;
+    /**
+     * - Where to show the popup.
+     */
+    position?: import("../../typedefs").PopupPosition | undefined;
+    /**
+     * - The base element of
+     * {@link position}. If omitted, this will be {@link anchor}.
+     */
     positionBaseElement?: HTMLElement | undefined;
+    /**
+     * - Whether to show the popup at the center of the screen on
+     * mobile/tablet and ignore the defined dropdown `position`.
+     */
     touchOptimized?: boolean | undefined;
-}, {
-    opening: CustomEvent<any>;
-    open: CustomEvent<any>;
-    ok: CustomEvent<any>;
-    cancel: CustomEvent<any>;
-    closing: CustomEvent<any>;
-    close: CustomEvent<any>;
-} & {
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Extra slot content.
+     */
+    extraContent?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Open` event handler.
+     */
+    onOpen?: ((event: CustomEvent) => void) | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'extra-content': {
-        slot: string;
+}, {}, {}, "open" | "content">;
+type Props = {
+    /**
+     * - The `class` attribute on the content element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to open the popup.
+     */
+    open?: boolean | undefined;
+    /**
+     * - A reference to the anchor element that opens the popup.
+     * Typically a `<button>`.
+     */
+    anchor: HTMLElement;
+    /**
+     * - A reference to the content element.
+     */
+    content?: HTMLElement | undefined;
+    /**
+     * - Where to show the popup.
+     */
+    position?: import("../../typedefs").PopupPosition | undefined;
+    /**
+     * - The base element of
+     * {@link position}. If omitted, this will be {@link anchor}.
+     */
+    positionBaseElement?: HTMLElement | undefined;
+    /**
+     * - Whether to show the popup at the center of the screen on
+     * mobile/tablet and ignore the defined dropdown `position`.
+     */
+    touchOptimized?: boolean | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Extra slot content.
+     */
+    extraContent?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Open` event handler.
+     */
+    onOpen?: ((event: CustomEvent) => void) | 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    default: {};
-}> {
-    /**accessor*/
-    set class(_: string | undefined);
-    get class(): string | undefined;
-    /**accessor*/
-    set open(_: import("svelte/store").Writable<boolean> | undefined);
-    get open(): import("svelte/store").Writable<boolean> | undefined;
-    /**accessor*/
-    set showBackdrop(_: boolean | undefined);
-    get showBackdrop(): boolean | undefined;
-    /**accessor*/
-    set anchor(_: HTMLElement | undefined);
-    get anchor(): HTMLElement | undefined;
-    /**accessor*/
-    set content(_: HTMLElement | undefined);
-    get content(): HTMLElement | undefined;
-    /**accessor*/
-    set position(_: import("../../typedefs").PopupPosition | undefined);
-    get position(): import("../../typedefs").PopupPosition | undefined;
-    /**accessor*/
-    set positionBaseElement(_: HTMLElement | undefined);
-    get positionBaseElement(): HTMLElement | undefined;
-    /**accessor*/
-    set touchOptimized(_: boolean | undefined);
-    get touchOptimized(): boolean | undefined;
+    z_$$bindings?: Bindings;
 }
-export type PopupProps = typeof __propDef.props;
-export type PopupEvents = typeof __propDef.events;
-export type PopupSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        anchor: HTMLElement | undefined;
-        class?: string | undefined;
-        position?: import("../../typedefs").PopupPosition | undefined;
-        open?: import("svelte/store").Writable<boolean> | undefined;
-        showBackdrop?: boolean | undefined;
-        content?: HTMLElement | undefined;
-        positionBaseElement?: HTMLElement | undefined;
-        touchOptimized?: boolean | undefined;
-    };
-    events: {
-        opening: CustomEvent<any>;
-        open: CustomEvent<any>;
-        ok: CustomEvent<any>;
-        cancel: CustomEvent<any>;
-        closing: CustomEvent<any>;
-        close: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'extra-content': {
-            slot: string;
-        };
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/package/services/{group.js → group.svelte.js}

@@ -67,7 +67,7 @@ class Group {
    * @todo Check for added elements probably with `MutationObserver`.
    */
   constructor(parent, { clickToSelect = true } = {}) {
-    parent.dispatchEvent(new CustomEvent('initializing'));
+    parent.dispatchEvent(new CustomEvent('Initializing'));
 
     this.parent = parent;
     this.role = /** @type {string} */ (parent.getAttribute('role'));
@@ -148,7 +148,7 @@ class Group {
       this.onKeyDown(event);
     });
 
-    parent.dispatchEvent(new CustomEvent('initialized'));
+    parent.dispatchEvent(new CustomEvent('Initialized'));
   }
 
   /**
@@ -252,11 +252,11 @@ class Group {
       if (multiSelect && isTarget && (selectByClick || selectByKeydown)) {
         element.setAttribute(this.childSelectedAttr, String(!isSelected));
         element.dispatchEvent(
-          new CustomEvent('change', { detail: { [this.childSelectedProp]: !isSelected } }),
+          new CustomEvent('Change', { detail: { [this.childSelectedProp]: !isSelected } }),
         );
 
         if (!isSelected) {
-          element.dispatchEvent(new CustomEvent('select'));
+          element.dispatchEvent(new CustomEvent('Select'));
         }
       }
 
@@ -267,11 +267,11 @@ class Group {
       ) {
         element.setAttribute(this.childSelectedAttr, String(isTarget));
         element.dispatchEvent(
-          new CustomEvent('change', { detail: { [this.childSelectedProp]: isTarget } }),
+          new CustomEvent('Change', { detail: { [this.childSelectedProp]: isTarget } }),
         );
 
         if (isTarget) {
-          element.dispatchEvent(new CustomEvent('select'));
+          element.dispatchEvent(new CustomEvent('Select'));
         }
       }
 
@@ -282,14 +282,14 @@ class Group {
 
           if (isTarget) {
             element.focus();
-            element.dispatchEvent(new CustomEvent('focus'));
+            element.dispatchEvent(new CustomEvent('Focus'));
           }
         });
       } else {
         element.classList.toggle('focused', isTarget);
 
         if (isTarget) {
-          element.dispatchEvent(new CustomEvent('focus'));
+          element.dispatchEvent(new CustomEvent('Focus'));
         }
       }
 
@@ -326,7 +326,7 @@ class Group {
     });
 
     this.parent.dispatchEvent(
-      new CustomEvent('change', {
+      new CustomEvent('Change', {
         detail: {
           value: /** @type {any} */ (newTarget).value,
           name: /** @type {any} */ (newTarget).name,
@@ -481,14 +481,14 @@ class Group {
 
         const hidden = !_terms.every((term) => searchValue.includes(term));
 
-        member.dispatchEvent(new CustomEvent('toggle', { detail: { hidden } }));
+        member.dispatchEvent(new CustomEvent('Toggle', { detail: { hidden } }));
 
         return hidden;
       })
       .filter((hidden) => !hidden).length;
 
     this.parent.dispatchEvent(
-      new CustomEvent('filter', { detail: { matched, total: this.allMembers.length } }),
+      new CustomEvent('Filter', { detail: { matched, total: this.allMembers.length } }),
     );
   }
 }
@@ -499,7 +499,6 @@ class Group {
  * @param {object} [params] - Action params.
  * @returns {import('svelte/action').ActionReturn} Action.
  */
-// eslint-disable-next-line no-unused-vars
 export const activateGroup = (parent, params) => {
   const group = new Group(parent, params);