@sveltia/ui 0.16.0 → 0.17.1

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,102 @@
 export default Popup;
-type Popup = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    anchor: HTMLElement | undefined;
+type Popup = SvelteComponent<ModalProps & Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "open" | "content" | undefined;
+};
+/** Generic popup helper. */
+declare const Popup: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ModalProps & {
+    /**
+     * - The `class` attribute on the content element.
+     */
     class?: string | undefined;
-    position?: PopupPosition | undefined;
-    open?: 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;
-}, {
-    'extra-content': {
-        slot: string;
-    };
-    default: {};
-}>, {
-    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;
-    };
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-} & {
-    class: string;
-    open: Writable<boolean>;
-    showBackdrop: boolean;
-    anchor: HTMLElement | undefined;
-    content: HTMLElement | undefined;
-    position: PopupPosition;
-    positionBaseElement: HTMLElement | undefined;
-    touchOptimized: boolean;
-};
-/** Generic popup helper. */
-declare const Popup: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    anchor: HTMLElement | undefined;
+}, {}, {}, "open" | "content">;
+type Props = {
+    /**
+     * - 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;
-}, {
-    'extra-content': {
-        slot: string;
-    };
-    default: {};
-}>, {
-    opening: CustomEvent<any>;
-    open: CustomEvent<any>;
-    ok: CustomEvent<any>;
-    cancel: CustomEvent<any>;
-    closing: CustomEvent<any>;
-    close: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    'extra-content': {
-        slot: string;
-    };
-    default: {};
-}, {
-    class: string;
-    open: import("svelte/store").Writable<boolean>;
-    showBackdrop: boolean;
-    anchor: HTMLElement | undefined;
-    content: HTMLElement | undefined;
-    position: import("../../typedefs").PopupPosition;
-    positionBaseElement: HTMLElement | undefined;
-    touchOptimized: boolean;
-}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: 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;
+};
 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/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);
 

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

@@ -2,6 +2,7 @@
 
 import { generateElementId } from '@sveltia/utils/element';
 import { sleep } from '@sveltia/utils/misc';
+import { on } from 'svelte/events';
 import { get, writable } from 'svelte/store';
 
 /**
@@ -124,13 +125,13 @@ class Popup {
     this.anchorElement.setAttribute('aria-controls', this.id);
     this.popupElement.setAttribute('id', this.id);
 
-    this.anchorElement.addEventListener('click', () => {
+    on(anchorElement, 'click', () => {
       if (!this.isDisabled && !this.isReadOnly) {
         this.open.set(!get(this.open));
       }
     });
 
-    this.anchorElement.addEventListener('keydown', (event) => {
+    on(anchorElement, 'keydown', (event) => {
       const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
       const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
 
@@ -141,7 +142,7 @@ class Popup {
       }
     });
 
-    this.anchorElement.addEventListener('transitionstart', () => {
+    on(anchorElement, 'transitionstart', () => {
       if (this.anchorElement.closest('.hiding, .hidden, [hidden]')) {
         this.hideImmediately();
       }
@@ -154,7 +155,7 @@ class Popup {
     }).observe(this.anchorElement);
 
     // Close the popup when the backdrop, a menu item or an option is clicked
-    this.popupElement.addEventListener('click', (event) => {
+    on(this.popupElement, 'click', (event) => {
       event.stopPropagation();
 
       // eslint-disable-next-line prefer-destructuring
@@ -168,7 +169,7 @@ class Popup {
       }
     });
 
-    this.popupElement.addEventListener('keydown', (event) => {
+    on(this.popupElement, 'keydown', (event) => {
       const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
       const hasModifier = shiftKey || altKey || ctrlKey || metaKey;