@sveltia/ui 0.9.0 → 0.10.0

package/package/components/util/modal.svelte

@@ -45,14 +45,18 @@
   export let keepContent = false;
   /**
    * A reference to the `<dialog>` element.
-   * @type {HTMLDialogElement}
+   * @type {HTMLDialogElement | undefined}
    */
   export let dialog = undefined;
   /**
    * Close the modal.
-   * @param {string} returnValue Return value to be used for `<dialog>`.
+   * @param {string} returnValue - Return value to be used for `<dialog>`.
    */
   export const close = (returnValue) => {
+    if (!dialog) {
+      return;
+    }
+
     dialog.returnValue = returnValue;
     open = false;
   };
@@ -69,7 +73,8 @@
   const waitForTransition = async () =>
     new Promise((resolve) => {
       /**
-       * @param {TransitionEvent} event `transition` event.
+       * Transition event listener.
+       * @param {TransitionEvent} event - `transition` event.
        */
       const listener = (event) => {
         if (event.target === dialog) {
@@ -78,13 +83,17 @@
         }
       };
 
-      dialog.addEventListener('transitionend', listener);
+      dialog?.addEventListener('transitionend', listener);
     });
 
   /**
    * Show the modal.
    */
   const openDialog = async () => {
+    if (!dialog) {
+      return;
+    }
+
     dispatch('opening');
     (document.querySelector('.sui.app-shell') ?? document.body).appendChild(dialog);
     showContent = true;
@@ -102,6 +111,10 @@
    * Hide the modal.
    */
   const closeDialog = async () => {
+    if (!dialog) {
+      return;
+    }
+
     dispatch('closing');
     setActiveClass = false;
     setOpenClass = false;
@@ -110,12 +123,12 @@
     dialog.close();
     dialog.remove();
 
-    if (['ok', 'cancel'].includes(dialog?.returnValue)) {
+    if (['ok', 'cancel'].includes(dialog.returnValue)) {
       dispatch(dialog?.returnValue);
     }
 
-    dispatch('close', dialog?.returnValue);
-    dialog.returnValue = undefined;
+    dispatch('close', dialog.returnValue);
+    dialog.returnValue = '';
   };
 
   /**
@@ -138,7 +151,7 @@
   }
 
   onMount(() => {
-    dialog.remove();
+    dialog?.remove();
 
     // onUnmount
     return () => {
@@ -157,7 +170,11 @@
   {...$$restProps}
   bind:this={dialog}
   on:click={({ target }) => {
-    if (lightDismiss && /** @type {HTMLElement?} */ (target)?.matches('dialog')) {
+    if (
+      dialog &&
+      lightDismiss &&
+      /** @type {HTMLElement | undefined} */ (target)?.matches('dialog')
+    ) {
       dialog.returnValue = 'cancel';
       open = false;
     }

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

@@ -4,15 +4,15 @@
 /** 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;
+    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>;
@@ -26,29 +26,29 @@ export default class Modal extends SvelteComponent<{
 }> {
     get close(): (returnValue: string) => void;
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: string | undefined);
+    get class(): string | undefined;
     /**accessor*/
-    set role(arg: "dialog" | "none" | "alertdialog");
-    get role(): "dialog" | "none" | "alertdialog";
+    set role(arg: "dialog" | "none" | "alertdialog" | undefined);
+    get role(): "dialog" | "none" | "alertdialog" | undefined;
     /**accessor*/
-    set open(arg: boolean);
-    get open(): boolean;
+    set open(arg: boolean | undefined);
+    get open(): boolean | undefined;
     /**accessor*/
-    set showBackdrop(arg: boolean);
-    get showBackdrop(): boolean;
+    set showBackdrop(arg: boolean | undefined);
+    get showBackdrop(): boolean | undefined;
     /**accessor*/
-    set lightDismiss(arg: boolean);
-    get lightDismiss(): boolean;
+    set lightDismiss(arg: boolean | undefined);
+    get lightDismiss(): boolean | undefined;
     /**accessor*/
-    set escapeDismiss(arg: boolean);
-    get escapeDismiss(): boolean;
+    set escapeDismiss(arg: boolean | undefined);
+    get escapeDismiss(): boolean | undefined;
     /**accessor*/
-    set keepContent(arg: boolean);
-    get keepContent(): boolean;
+    set keepContent(arg: boolean | undefined);
+    get keepContent(): boolean | undefined;
     /**accessor*/
-    set dialog(arg: HTMLDialogElement);
-    get dialog(): HTMLDialogElement;
+    set dialog(arg: HTMLDialogElement | undefined);
+    get dialog(): HTMLDialogElement | undefined;
 }
 export type ModalProps = typeof __propDef.props;
 export type ModalEvents = typeof __propDef.events;
@@ -57,15 +57,15 @@ 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;
+        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;
     };
     events: {
         opening: CustomEvent<any>;

package/package/components/util/popup.svelte

@@ -22,14 +22,19 @@
    * @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}
+   * @type {HTMLElement | undefined}
    */
   export let anchor;
   /**
    * A reference to the content element.
-   * @type {HTMLElement}
+   * @type {HTMLElement | undefined}
    */
   export let content = undefined;
   /**
@@ -39,7 +44,7 @@
   export let position = 'bottom-left';
   /**
    * The base element of {@link position}. If omitted, this will be {@link anchor}.
-   * @type {HTMLElement}
+   * @type {HTMLElement | undefined}
    */
   export let positionBaseElement = undefined;
   /**
@@ -62,7 +67,7 @@
   /**
    * The type of the content displayed in the popup, defined with the `aria-haspopup` attribute on
    * the anchor element.
-   * @type {string}
+   * @type {string | undefined}
    * @see https://w3c.github.io/aria/#aria-haspopup
    */
   let contentType;
@@ -80,7 +85,7 @@
   $: {
     if (anchor && modal?.dialog) {
       ({ open, style } = activatePopup(anchor, modal.dialog, position, positionBaseElement));
-      contentType = anchor.getAttribute('aria-haspopup');
+      contentType = anchor.getAttribute('aria-haspopup') ?? undefined;
     }
   }
 
@@ -95,7 +100,7 @@
   role="none"
   class="popup"
   bind:open={$open}
-  showBackdrop={touch}
+  showBackdrop={showBackdrop ?? touch}
   lightDismiss={true}
   keepContent={true}
   bind:this={modal}
@@ -109,6 +114,10 @@
   on:open={async () => {
     await sleep(100);
 
+    if (!content) {
+      return;
+    }
+
     const target = /** @type {HTMLElement} */ (
       content.querySelector('[tabindex]:not([aria-disabled="true"])')
     );
@@ -147,17 +156,30 @@
   backdrop-filter: blur(16px);
   transition-property: opacity, transform;
 }
-.content.listbox, .content.menu {
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--sui-secondary-border-color);
-  border-radius: 4px;
+.content.menu {
+  border-width: var(--sui-menu-border-width, 1px);
+  border-style: var(--sui-menu-border-style, solid);
+  border-color: var(--sui-menu-border-width, var(--sui-secondary-border-color));
+  border-radius: var(--sui-menu-border-radius, 4px);
+  padding: var(--sui-menu-padding, 4px);
 }
-.content.listbox :global(.sui.listbox),
-.content.listbox :global(.sui.menu), .content.menu :global(.sui.listbox),
 .content.menu :global(.sui.menu) {
   border-width: 0;
   border-radius: 0;
+  padding: 0;
+  background-color: transparent;
+}
+.content.listbox {
+  border-width: var(--sui-listbox-border-width, 1px);
+  border-style: var(--sui-listbox-border-style, solid);
+  border-color: var(--sui-listbox-border-width, var(--sui-secondary-border-color));
+  border-radius: var(--sui-listbox-border-radius, 4px);
+  padding: var(--sui-listbox-padding, 4px);
+}
+.content.listbox :global(.sui.listbox) {
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
   background-color: transparent;
 }
 .content.touch {

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

@@ -4,13 +4,14 @@
 /** Generic popup helper. */
 export default class Popup extends SvelteComponent<{
     [x: string]: any;
-    anchor: HTMLElement;
-    class?: string;
-    position?: PopupPosition;
-    open?: import("svelte/store").Writable<boolean>;
-    content?: HTMLElement;
-    positionBaseElement?: HTMLElement;
-    touchOptimized?: boolean;
+    anchor: HTMLElement | undefined;
+    class?: string | undefined;
+    position?: PopupPosition | undefined;
+    open?: import("svelte/store").Writable<boolean> | undefined;
+    showBackdrop?: boolean | undefined;
+    content?: HTMLElement | undefined;
+    positionBaseElement?: HTMLElement | undefined;
+    touchOptimized?: boolean | undefined;
 }, {
     opening: CustomEvent<any>;
     open: CustomEvent<any>;
@@ -24,26 +25,29 @@ export default class Popup extends SvelteComponent<{
     default: {};
 }> {
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: string | undefined);
+    get class(): string | undefined;
     /**accessor*/
-    set open(arg: import("svelte/store").Writable<boolean>);
-    get open(): import("svelte/store").Writable<boolean>;
+    set open(arg: import("svelte/store").Writable<boolean> | undefined);
+    get open(): import("svelte/store").Writable<boolean> | undefined;
     /**accessor*/
-    set anchor(arg: HTMLElement);
-    get anchor(): HTMLElement;
+    set showBackdrop(arg: boolean | undefined);
+    get showBackdrop(): boolean | undefined;
     /**accessor*/
-    set content(arg: HTMLElement);
-    get content(): HTMLElement;
+    set anchor(arg: HTMLElement | undefined);
+    get anchor(): HTMLElement | undefined;
     /**accessor*/
-    set position(arg: PopupPosition);
-    get position(): PopupPosition;
+    set content(arg: HTMLElement | undefined);
+    get content(): HTMLElement | undefined;
     /**accessor*/
-    set positionBaseElement(arg: HTMLElement);
-    get positionBaseElement(): HTMLElement;
+    set position(arg: PopupPosition | undefined);
+    get position(): PopupPosition | undefined;
     /**accessor*/
-    set touchOptimized(arg: boolean);
-    get touchOptimized(): boolean;
+    set positionBaseElement(arg: HTMLElement | undefined);
+    get positionBaseElement(): HTMLElement | undefined;
+    /**accessor*/
+    set touchOptimized(arg: boolean | undefined);
+    get touchOptimized(): boolean | undefined;
 }
 export type PopupProps = typeof __propDef.props;
 export type PopupEvents = typeof __propDef.events;
@@ -52,13 +56,14 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        anchor: HTMLElement;
-        class?: string;
-        position?: PopupPosition;
-        open?: import('svelte/store').Writable<boolean>;
-        content?: HTMLElement;
-        positionBaseElement?: HTMLElement;
-        touchOptimized?: boolean;
+        anchor: HTMLElement | undefined;
+        class?: string | undefined;
+        position?: 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>;

package/package/components/util/portal.svelte

@@ -13,15 +13,17 @@
 
   export { className as class };
 
-  /** @type {HTMLElement} */
+  /** @type {HTMLElement | undefined} */
   let ref;
 
   onMount(() => {
-    document.body.appendChild(ref);
+    if (ref) {
+      document.body.appendChild(ref);
+    }
   });
 
   onDestroy(() => {
-    ref.remove();
+    ref?.remove();
   });
 </script>
 

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

@@ -4,7 +4,7 @@
 /** @see https://github.com/sveltejs/svelte/issues/3088 */
 export default class Portal extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
+    class?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -18,7 +18,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/index.d.ts

@@ -1,7 +1,7 @@
 export function initLocales({ fallbackLocale, initialLocale }?: {
-    fallbackLocale?: string;
-    initialLocale?: string;
-}): void;
+    fallbackLocale?: string | undefined;
+    initialLocale?: string | undefined;
+} | undefined): void;
 export { default as Alert } from "./components/alert/alert.svelte";
 export { default as Button } from "./components/button/button.svelte";
 export { default as SelectButtonGroup } from "./components/button/select-button-group.svelte";
@@ -50,8 +50,10 @@ export { default as TableHead } from "./components/table/table-head.svelte";
 export { default as TableRowHeader } from "./components/table/table-row-header.svelte";
 export { default as TableRow } from "./components/table/table-row.svelte";
 export { default as Table } from "./components/table/table.svelte";
+export { default as TabBox } from "./components/tabs/tab-box.svelte";
 export { default as TabList } from "./components/tabs/tab-list.svelte";
 export { default as TabPanel } from "./components/tabs/tab-panel.svelte";
+export { default as TabPanels } from "./components/tabs/tab-panels.svelte";
 export { default as Tab } from "./components/tabs/tab.svelte";
 export { default as MarkdownEditor } from "./components/text-field/markdown-editor.svelte";
 export { default as NumberInput } from "./components/text-field/number-input.svelte";

package/package/index.js

@@ -2,9 +2,9 @@ import { addMessages, init } from 'svelte-i18n';
 
 /**
  * Load strings and initialize the locales.
- * @param {object} [init] Initialize options.
- * @param {string} [init.fallbackLocale] Fallback locale.
- * @param {string} [init.initialLocale] Initial locale.
+ * @param {object} [init] - Initialize options.
+ * @param {string} [init.fallbackLocale] - Fallback locale.
+ * @param {string} [init.initialLocale] - Initial locale.
  * @see https://github.com/kaisermann/svelte-i18n/blob/main/docs/Getting%20Started.md
  * @see https://vitejs.dev/guide/features.html#glob-import
  */
@@ -13,7 +13,7 @@ export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}
   const modules = import.meta.glob('./locales/*.js', { eager: true });
 
   Object.entries(modules).forEach(([path, { strings }]) => {
-    const [, locale] = path.match(/([a-zA-Z-]+)\.js/);
+    const [, locale] = /** @type {string[]} */ (path.match(/([a-zA-Z-]+)\.js/));
 
     // Add `_sui` suffix to avoid collision with app localization
     addMessages(locale, /** @type {any} */ ({ _sui: strings }));
@@ -75,8 +75,10 @@ export { default as TableHead } from './components/table/table-head.svelte';
 export { default as TableRowHeader } from './components/table/table-row-header.svelte';
 export { default as TableRow } from './components/table/table-row.svelte';
 export { default as Table } from './components/table/table.svelte';
+export { default as TabBox } from './components/tabs/tab-box.svelte';
 export { default as TabList } from './components/tabs/tab-list.svelte';
 export { default as TabPanel } from './components/tabs/tab-panel.svelte';
+export { default as TabPanels } from './components/tabs/tab-panels.svelte';
 export { default as Tab } from './components/tabs/tab.svelte';
 export { default as MarkdownEditor } from './components/text-field/markdown-editor.svelte';
 export { default as NumberInput } from './components/text-field/number-input.svelte';

package/package/services/events.d.ts

@@ -1,3 +1,3 @@
 export function isMac(): boolean;
 export function matchShortcuts(event: KeyboardEvent, shortcuts: string): boolean;
-export function activateKeyShortcuts(element: (HTMLInputElement | HTMLButtonElement), shortcuts?: string): import('svelte/action').ActionReturn;
+export function activateKeyShortcuts(element: (HTMLInputElement | HTMLButtonElement), shortcuts?: string | undefined): import('svelte/action').ActionReturn;

package/package/services/events.js

@@ -8,8 +8,8 @@ export const isMac = () =>
 
 /**
  * Whether the event matches the given keyboard shortcuts.
- * @param {KeyboardEvent} event `keydown` or `keypress` event.
- * @param {string} shortcuts Keyboard shortcuts like `A` or `Ctrl+S`.
+ * @param {KeyboardEvent} event - `keydown` or `keypress` event.
+ * @param {string} shortcuts - Keyboard shortcuts like `A` or `Ctrl+S`.
  * @returns {boolean} Result.
  * @see https://w3c.github.io/aria/#aria-keyshortcuts
  */
@@ -47,10 +47,10 @@ export const matchShortcuts = (event, shortcuts) => {
 
 /**
  * Activate keyboard shortcuts.
- * @param {(HTMLInputElement | HTMLButtonElement)} element Element.
- * @param {string} [shortcuts] Keyboard shortcuts like `A` or `Accel+S` to focus and click the text
- * field or button. Multiple shortcuts can be defined space-separated. The `Accel` modifier will be
- * replaced with `Ctrl` on Windows/Linux and `Command` on macOS.
+ * @param {(HTMLInputElement | HTMLButtonElement)} element - Element.
+ * @param {string} [shortcuts] - Keyboard shortcuts like `A` or `Accel+S` to focus and click the
+ * text field or button. Multiple shortcuts can be defined space-separated. The `Accel` modifier
+ * will be replaced with `Ctrl` on Windows/Linux and `Command` on macOS.
  * @returns {import('svelte/action').ActionReturn} Actions.
  */
 export const activateKeyShortcuts = (element, shortcuts = '') => {
@@ -59,10 +59,13 @@ export const activateKeyShortcuts = (element, shortcuts = '') => {
 
   /**
    * Handle the event.
-   * @param {KeyboardEvent} event `keydown` event.
+   * @param {KeyboardEvent} event - `keydown` event.
    */
   const handler = (event) => {
-    if (!!element.offsetParent && matchShortcuts(event, platformKeyShortcuts)) {
+    if (
+      !!element.offsetParent &&
+      matchShortcuts(event, /** @type {string} */ (platformKeyShortcuts))
+    ) {
       event.preventDefault();
 
       if (!element.disabled) {