@sveltia/ui 0.15.16 → 0.17.0

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

@@ -1,44 +1,122 @@
-/** @typedef {typeof __propDef.props}  TextEditorProps */
-/** @typedef {typeof __propDef.events}  TextEditorEvents */
-/** @typedef {typeof __propDef.slots}  TextEditorSlots */
+export default TextEditor;
+type TextEditor = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "value" | undefined;
+};
 /** A rich text editor based on Lexical. */
-export default class TextEditor extends SvelteComponent<{
-    [x: string]: any;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    required?: boolean | undefined;
+declare const TextEditor: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - 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>;
-}, {}> {
-}
-export type TextEditorProps = typeof __propDef.props;
-export type TextEditorEvents = typeof __propDef.events;
-export type TextEditorSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [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?: import("../../typedefs").TextEditorMode[] | undefined;
-        buttons?: (import("../../typedefs").TextEditorBlockType | import("../../typedefs").TextEditorInlineType)[] | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: 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;
 };
-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/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,27 +1,53 @@
-/** @typedef {typeof __propDef.props}  EditorToolbarProps */
-/** @typedef {typeof __propDef.events}  EditorToolbarEvents */
-/** @typedef {typeof __propDef.slots}  EditorToolbarSlots */
-export default class EditorToolbar extends SvelteComponent<{
+export default EditorToolbar;
+type EditorToolbar = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$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>;
-}, {}> {
-}
-export type EditorToolbarProps = typeof __propDef.props;
-export type EditorToolbarEvents = typeof __propDef.events;
-export type EditorToolbarSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        disabled?: boolean | undefined;
-        readonly?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+}, {}, {}, "">;
+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;
 };
-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/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,25 +1,33 @@
-/** @typedef {typeof __propDef.props}  FormatTextButtonProps */
-/** @typedef {typeof __propDef.events}  FormatTextButtonEvents */
-/** @typedef {typeof __propDef.slots}  FormatTextButtonSlots */
-export default class FormatTextButton extends SvelteComponent<{
+export default FormatTextButton;
+type FormatTextButton = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "" | undefined;
+};
+declare const FormatTextButton: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - Button type.
+     */
     type: import("../../../typedefs").TextEditorFormatType;
-}, {
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type FormatTextButtonProps = typeof __propDef.props;
-export type FormatTextButtonEvents = typeof __propDef.events;
-export type FormatTextButtonSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        type: import("../../../typedefs").TextEditorFormatType;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - Button type.
+     */
+    type: import("../../../typedefs").TextEditorFormatType;
 };
-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/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,25 +1,22 @@
-/** @typedef {typeof __propDef.props}  InsertLinkButtonProps */
-/** @typedef {typeof __propDef.events}  InsertLinkButtonEvents */
-/** @typedef {typeof __propDef.slots}  InsertLinkButtonSlots */
-export default class InsertLinkButton extends SvelteComponent<{
-    [x: string]: never;
-}, {
+export default InsertLinkButton;
+type InsertLinkButton = SvelteComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type InsertLinkButtonProps = typeof __propDef.props;
-export type InsertLinkButtonEvents = typeof __propDef.events;
-export type InsertLinkButtonSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+}, {}> & {
+    $$bindings?: "" | undefined;
 };
-export {};
+declare const InsertLinkButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/package/components/text-editor/toolbar/toggle-block-menu-item.svelte

@@ -12,13 +12,22 @@
   import { getContext } from 'svelte';
   import { _ } from 'svelte-i18n';
   import { availableButtons } from '..';
+  import Icon from '../../icon/icon.svelte';
   import MenuItemCheckbox from '../../menu/menu-item-checkbox.svelte';
 
   /**
-   * Button type.
-   * @type {import('../../../typedefs').TextEditorBlockType}
+   * @typedef {object} Props
+   * @property {import('../../../typedefs').TextEditorBlockType} 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.
@@ -29,7 +38,7 @@
   /**
    * Whether the current selection matches the button {@link type}.
    */
-  $: selectionTypeMatches = $selectionBlockType === type;
+  const selectionTypeMatches = $derived($selectionBlockType === type);
 
   /**
    * Change the current selection’s type to {@link type}.
@@ -76,13 +85,16 @@
 
 {#key selectionTypeMatches}
   <MenuItemCheckbox
-    iconName={availableButtons[type].icon}
     label={$_(`_sui.text_editor.${availableButtons[type].labelKey}`)}
     checked={selectionTypeMatches}
-    on:click={() => {
+    onclick={() => {
       if (!selectionTypeMatches) {
         changeBlockType();
       }
     }}
-  />
+  >
+    {#snippet startIcon()}
+      <Icon name={availableButtons[type].icon} />
+    {/snippet}
+  </MenuItemCheckbox>
 {/key}