@sveltia/ui 0.16.0 → 0.17.0

package/package/components/text-editor/text-editor.svelte

@@ -4,7 +4,7 @@
 -->
 <script>
   import { generateElementId } from '@sveltia/utils/element';
-  import { onMount, setContext } from 'svelte';
+  import { onMount, setContext, untrack } from 'svelte';
   import { _ } from 'svelte-i18n';
   import { writable } from 'svelte/store';
   import { blockButtonTypes, inlineButtonTypes } from '.';
@@ -16,51 +16,43 @@
   import EditorToolbar from './toolbar/editor-toolbar.svelte';
 
   /**
-   * Make the text input container flexible.
-   * @type {boolean}
+   * @typedef {object} Props
+   * @property {string | undefined} [value] - Input value.
+   * @property {boolean} [flex] - Make the text input container flexible.
+   * @property {import('../../typedefs').TextEditorMode[]} [modes] - Enabled modes.
+   * @property {(import('../../typedefs').TextEditorBlockType |
+   * import('../../typedefs').TextEditorInlineType)[]} [buttons] - Enabled buttons.
+   * @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 {boolean} [readonly] - Whether to make the widget read-only. An alias of the
+   * `aria-readonly` attribute.
+   * @property {boolean} [required] - Whether to mark the widget required. An alias of the
+   * `aria-required` attribute.
+   * @property {boolean} [invalid] - Whether to mark the widget invalid. An alias of the
+   * `aria-invalid` attribute.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
    */
-  export let flex = false;
-  /**
-   * 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}
-   */
-  export let disabled = false;
-  /**
-   * Whether to disable the widget. An alias of `aria-readonly` attribute.
-   * @type {boolean}
-   */
-  export let readonly = false;
-  /**
-   * Whether to mark the widget required. An alias of the `aria-required` attribute.
-   * @type {boolean}
-   */
-  export let required = false;
-  /**
-   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
-   * @type {boolean}
-   */
-  export let invalid = false;
-  /**
-   * Input value.
-   * @type {string | undefined}
-   */
-  export let value = undefined;
-  /**
-   * Enabled modes.
-   * @type {import('../../typedefs').TextEditorMode[]}
-   */
-  export let modes = ['rich-text', 'plain-text'];
+
   /**
-   * Enabled buttons.
-   * @type {(import('../../typedefs').TextEditorBlockType |
-   * import('../../typedefs').TextEditorInlineType)[]}
+   * @type {Props & Record<string, any>}
    */
-  export let buttons = [...inlineButtonTypes, ...blockButtonTypes];
+  let {
+    /* eslint-disable prefer-const */
+    value = $bindable(''),
+    flex = false,
+    modes = ['rich-text', 'plain-text'],
+    buttons = [...inlineButtonTypes, ...blockButtonTypes],
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   /** @type {import('svelte/store').Writable<import('lexical').LexicalEditor | undefined>} */
   const editor = writable();
@@ -69,8 +61,8 @@
   const editorId = writable(generateElementId('editor'));
   const useRichText = writable(modes[0] === 'rich-text');
   const hasConverterError = writable(false);
-  let inputValue = '';
-  let showConverterError = false;
+  let inputValue = $state('');
+  let showConverterError = $state(false);
 
   /**
    * Convert the Markdown {@link inputValue} to Lexical nodes. Disable the rich text mode and
@@ -94,54 +86,46 @@
     }
   };
 
-  /**
-   * Update {@link inputValue} based on {@link value}.
-   */
-  const setInputValue = () => {
+  $effect(() => {
+    if (!$editor) {
+      return;
+    }
+
     const newValue = value;
 
     // Avoid a cycle dependency & infinite loop
-    if (inputValue !== newValue) {
-      inputValue = newValue ?? '';
+    untrack(() => {
+      if (inputValue !== newValue) {
+        inputValue = newValue ?? '';
 
-      if ($useRichText) {
-        convertMarkdown();
+        if ($useRichText) {
+          convertMarkdown();
+        }
       }
+    });
+  });
+
+  $effect(() => {
+    if (!$editor) {
+      return;
     }
-  };
 
-  /**
-   * Update {@link value} based on {@link inputValue}.
-   */
-  const setCurrentValue = () => {
     const newValue = inputValue;
 
     // Avoid a cycle dependency & infinite loop
-    if (value !== newValue) {
-      value = newValue;
-    }
-  };
-
-  $: {
-    if ($editor) {
-      void value;
-      setInputValue();
-    }
-  }
-
-  $: {
-    if ($editor) {
-      void inputValue;
-      setCurrentValue();
-    }
-  }
+    untrack(() => {
+      if (value !== newValue) {
+        value = newValue;
+      }
+    });
+  });
 
-  $: {
+  $effect(() => {
     if ($hasConverterError) {
       $useRichText = false;
       showConverterError = true;
     }
-  }
+  });
 
   // The editor has to be initialized in the browser
   onMount(() => {
@@ -164,7 +148,7 @@
   );
 </script>
 
-<div role="none" class="sui text-editor" hidden={hidden || undefined} {...$$restProps}>
+<div {...restProps} role="none" class="sui text-editor" {hidden}>
   <EditorToolbar {disabled} {readonly} />
   <LexicalRoot
     bind:value={inputValue}

package/package/components/text-editor/text-editor.svelte.d.ts

@@ -1,35 +1,112 @@
 export default TextEditor;
-type TextEditor = SvelteComponent<{
-    [x: string]: any;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    required?: boolean | undefined;
-    value?: string | undefined;
-    hidden?: boolean | undefined;
-    readonly?: boolean | undefined;
-    flex?: boolean | undefined;
-    modes?: TextEditorMode[] | undefined;
-    buttons?: (TextEditorBlockType | TextEditorInlineType)[] | undefined;
-}, {
+type TextEditor = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
+    $$bindings?: "value" | undefined;
 };
 /** A rich text editor based on Lexical. */
 declare const TextEditor: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    required?: boolean | undefined;
+    /**
+     * - Input value.
+     */
     value?: string | undefined;
+    /**
+     * - Make the text input container flexible.
+     */
+    flex?: boolean | undefined;
+    /**
+     * - Enabled modes.
+     */
+    modes?: import("../../typedefs").TextEditorMode[] | undefined;
+    /**
+     * - Enabled buttons.
+     */
+    buttons?: (import("../../typedefs").TextEditorBlockType | import("../../typedefs").TextEditorInlineType)[] | undefined;
+    /**
+     * - 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;
+    /**
+     * - Whether to make the widget read-only. An alias of the
+     * `aria-readonly` attribute.
+     */
     readonly?: boolean | undefined;
+    /**
+     * - Whether to mark the widget required. An alias of the
+     * `aria-required` attribute.
+     */
+    required?: boolean | undefined;
+    /**
+     * - Whether to mark the widget invalid. An alias of the
+     * `aria-invalid` attribute.
+     */
+    invalid?: boolean | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type Props = {
+    /**
+     * - Input value.
+     */
+    value?: string | undefined;
+    /**
+     * - Make the text input container flexible.
+     */
     flex?: boolean | undefined;
+    /**
+     * - Enabled modes.
+     */
     modes?: import("../../typedefs").TextEditorMode[] | undefined;
+    /**
+     * - Enabled buttons.
+     */
     buttons?: (import("../../typedefs").TextEditorBlockType | import("../../typedefs").TextEditorInlineType)[] | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+    /**
+     * - 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;
+    /**
+     * - Whether to make the widget read-only. An alias of the
+     * `aria-readonly` attribute.
+     */
+    readonly?: boolean | undefined;
+    /**
+     * - Whether to mark the widget required. An alias of the
+     * `aria-required` attribute.
+     */
+    required?: boolean | undefined;
+    /**
+     * - Whether to mark the widget invalid. An alias of the
+     * `aria-invalid` attribute.
+     */
+    invalid?: 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/text-editor/toolbar/editor-toolbar.svelte

@@ -16,15 +16,23 @@
   import ToggleBlockMenuItem from './toggle-block-menu-item.svelte';
 
   /**
-   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
-   * @type {boolean}
+   * @typedef {object} Props
+   * @property {boolean} [hidden] - Whether to hide the widget.
+   * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`
+   * attribute.
+   * @property {boolean} [readonly] - Whether to make the widget read-only. An alias of the
+   * `aria-readonly` attribute.
    */
-  export let disabled = false;
+
   /**
-   * Whether to disable the widget. An alias of `aria-readonly` attribute.
-   * @type {boolean}
+   * @type {Props & Record<string, any>}
    */
-  export let readonly = false;
+  let {
+    /* eslint-disable prefer-const */
+    disabled = false,
+    readonly = false,
+    /* eslint-enable prefer-const */
+  } = $props();
 
   /**
    * Text editor state.
@@ -44,17 +52,21 @@
    * Enabled block level buttons.
    * @type {import('../../../typedefs').TextEditorBlockType[]}
    */
-  $: blockLevelButtons = unique([
-    'paragraph', // Always needed
-    ...enabledButtons.filter((type) => blockButtonTypes.includes(/** @type {any} */ (type))),
-  ]);
+  const blockLevelButtons = $derived(
+    unique([
+      'paragraph', // Always needed
+      ...enabledButtons.filter((type) => blockButtonTypes.includes(/** @type {any} */ (type))),
+    ]),
+  );
 
   /**
    * Enabled inline level buttons.
    * @type {import('../../../typedefs').TextEditorInlineType[]}
    */
-  $: inlineLevelButtons = unique(
-    enabledButtons.filter((type) => inlineButtonTypes.includes(/** @type {any} */ (type))),
+  const inlineLevelButtons = $derived(
+    unique([
+      ...enabledButtons.filter((type) => inlineButtonTypes.includes(/** @type {any} */ (type))),
+    ]),
   );
 </script>
 
@@ -65,16 +77,19 @@
       aria-label={$_('_sui.text_editor.show_text_style_options')}
       aria-controls="{$editorId}-lexical-root"
     >
-      <Icon
-        slot="start-icon"
-        name={availableButtons[$selectionBlockType]?.icon ?? 'format_paragraph'}
-      />
-      <Icon slot="end-icon" name="arrow_drop_down" class="small-arrow" />
-      <Menu slot="popup" aria-label={$_('_sui.text_editor.text_style_options')}>
-        {#each blockLevelButtons as type (type)}
-          <ToggleBlockMenuItem {type} />
-        {/each}
-      </Menu>
+      {#snippet startIcon()}
+        <Icon name={availableButtons[$selectionBlockType]?.icon ?? 'format_paragraph'} />
+      {/snippet}
+      {#snippet endIcon()}
+        <Icon name="arrow_drop_down" class="small-arrow" />
+      {/snippet}
+      {#snippet popup()}
+        <Menu aria-label={$_('_sui.text_editor.text_style_options')}>
+          {#each blockLevelButtons as type (type)}
+            <ToggleBlockMenuItem {type} />
+          {/each}
+        </Menu>
+      {/snippet}
     </MenuButton>
     {#if inlineLevelButtons.length}
       <Divider orientation="vertical" />
@@ -95,7 +110,7 @@
         disabled={$hasConverterError}
         pressed={!$useRichText}
         aria-label={$_('_sui.text_editor.edit_in_markdown')}
-        on:click={() => {
+        onclick={() => {
           $useRichText = !$useRichText;
 
           if ($useRichText) {
@@ -103,7 +118,9 @@
           }
         }}
       >
-        <Icon slot="start-icon" name="markdown" />
+        {#snippet startIcon()}
+          <Icon name="markdown" />
+        {/snippet}
       </Button>
     {/if}
   </Toolbar>

package/package/components/text-editor/toolbar/editor-toolbar.svelte.d.ts

@@ -1,18 +1,43 @@
 export default EditorToolbar;
-type EditorToolbar = SvelteComponent<{
-    disabled?: boolean | undefined;
-    readonly?: boolean | undefined;
-}, {
+type EditorToolbar = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
+    $$bindings?: "" | undefined;
 };
 declare const EditorToolbar: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - Whether to hide the widget.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
     disabled?: boolean | undefined;
+    /**
+     * - Whether to make the widget read-only. An alias of the
+     * `aria-readonly` attribute.
+     */
     readonly?: boolean | undefined;
-}, {
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - Whether to hide the widget.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Whether to make the widget read-only. An alias of the
+     * `aria-readonly` attribute.
+     */
+    readonly?: boolean | 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/text-editor/toolbar/format-text-button.svelte

@@ -7,10 +7,18 @@
   import Icon from '../../icon/icon.svelte';
 
   /**
-   * Button type.
-   * @type {import('../../../typedefs').TextEditorFormatType}
+   * @typedef {object} Props
+   * @property {import('../../../typedefs').TextEditorFormatType} type - Button type.
    */
-  export let type;
+
+  /**
+   * @type {Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    type,
+    /* eslint-enable prefer-const */
+  } = $props();
 
   /**
    * Text editor state.
@@ -25,9 +33,11 @@
   aria-controls="{$editorId}-lexical-root"
   disabled={!$useRichText}
   pressed={$selectionInlineTypes.includes(type)}
-  on:click={() => {
+  onclick={() => {
     $editor.dispatchCommand(FORMAT_TEXT_COMMAND, type);
   }}
 >
-  <Icon slot="start-icon" name={availableButtons[type].icon} />
+  {#snippet startIcon()}
+    <Icon name={availableButtons[type].icon} />
+  {/snippet}
 </Button>

package/package/components/text-editor/toolbar/format-text-button.svelte.d.ts

@@ -1,16 +1,23 @@
 export default FormatTextButton;
-type FormatTextButton = SvelteComponent<{
-    type: TextEditorFormatType;
-}, {
+type FormatTextButton = SvelteComponent<Props & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
+    $$bindings?: "" | undefined;
 };
 declare const FormatTextButton: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - Button type.
+     */
     type: import("../../../typedefs").TextEditorFormatType;
-}, {
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - Button type.
+     */
+    type: import("../../../typedefs").TextEditorFormatType;
+};
 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/text-editor/toolbar/insert-link-button.svelte

@@ -14,7 +14,7 @@
   import { getContext } from 'svelte';
   import { _ } from 'svelte-i18n';
   import { availableButtons } from '..';
-  import { isMac, matchShortcuts } from '../../../services/events';
+  import { isMac, matchShortcuts } from '../../../services/events.svelte';
   import Button from '../../button/button.svelte';
   import Dialog from '../../dialog/dialog.svelte';
   import Icon from '../../icon/icon.svelte';
@@ -33,12 +33,12 @@
    */
   const { editor, editorId, selectionInlineTypes, useRichText } = getContext('state');
 
-  let openDialog = false;
+  let openDialog = $state(false);
   /** @type {'create' | 'update' | 'remove'} */
-  let dialogMode = 'create';
-  let hasAnchor = false;
-  let anchorURL = '';
-  let anchorText = '';
+  let dialogMode = $state('create');
+  let hasAnchor = $state(false);
+  let anchorURL = $state('');
+  let anchorText = $state('');
 
   /**
    * Create a new link by showing a dialog to accept a URL and optionally text.
@@ -163,11 +163,11 @@
     );
   };
 
-  $: {
+  $effect(() => {
     if ($editor) {
       _registerCommand();
     }
-  }
+  });
 </script>
 
 <Button
@@ -176,11 +176,13 @@
   aria-controls="{$editorId}-lexical-root"
   disabled={!$useRichText}
   pressed={$selectionInlineTypes.includes(type)}
-  on:click={() => {
+  onclick={() => {
     onButtonClick();
   }}
 >
-  <Icon slot="start-icon" name={availableButtons[type].icon} />
+  {#snippet startIcon()}
+    <Icon name={availableButtons[type].icon} />
+  {/snippet}
 </Button>
 
 <Dialog
@@ -191,7 +193,7 @@
   bind:value={anchorURL}
   okDisabled={!isURL(anchorURL)}
   okLabel={dialogMode === 'create' ? $_('_sui.insert') : $_('_sui.update')}
-  on:close={(event) => {
+  onClose={(event) => {
     onDialogClose(event);
   }}
 >
@@ -203,7 +205,7 @@
         autofocus
         bind:value={anchorText}
         flex
-        on:keydown={(event) => {
+        onkeydown={(event) => {
           onInputKeyDown(event);
         }}
       />
@@ -217,22 +219,22 @@
       bind:value={anchorURL}
       flex
       aria-label="URL"
-      on:keydown={(event) => {
+      onkeydown={(event) => {
         onInputKeyDown(event);
       }}
     />
   </div>
-  <svelte:fragment slot="footer-extra">
+  {#snippet footerExtra()}
     {#if dialogMode !== 'create'}
       <Button
         variant="secondary"
         label={$_('_sui.remove')}
-        on:click={() => {
+        onclick={() => {
           removeLink();
           dialogMode = 'remove';
           openDialog = false;
         }}
       />
     {/if}
-  </svelte:fragment>
+  {/snippet}
 </Dialog>

package/package/components/text-editor/toolbar/insert-link-button.svelte.d.ts

@@ -1,16 +1,12 @@
 export default InsertLinkButton;
-type InsertLinkButton = SvelteComponent<{
-    [x: string]: never;
-}, {
+type InsertLinkButton = SvelteComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
+    $$bindings?: "" | undefined;
 };
-declare const InsertLinkButton: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
+declare const InsertLinkButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 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;