@sveltia/ui 0.19.3 → 0.20.1

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

@@ -1,7 +1,17 @@
 export default FormatTextButton;
+type FormatTextButton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 declare const FormatTextButton: import("svelte").Component<{
     /**
      * - Button type.
      */
     type: import("../../../typedefs").TextEditorFormatType;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - Button type.
+     */
+    type: import("../../../typedefs").TextEditorFormatType;
+};

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

@@ -2,14 +2,17 @@
   import { LinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
   import { $getNearestNodeOfType as getNearestNodeOfType } from '@lexical/utils';
   import { generateElementId } from '@sveltia/utils/element';
-  import { isURL } from '@sveltia/utils/string';
   import {
     COMMAND_PRIORITY_NORMAL,
     KEY_DOWN_COMMAND,
+    $createRangeSelection as createRangeSelection,
+    $createTextNode as createTextNode,
     $getPreviousSelection as getPreviousSelection,
     $getSelection as getSelection,
     $getTextContent as getTextContent,
+    $insertNodes as insertNodes,
     $isRangeSelection as isRangeSelection,
+    $setSelection as setSelection,
   } from 'lexical';
   import { getContext } from 'svelte';
   import { _ } from 'svelte-i18n';
@@ -19,6 +22,7 @@
   import Dialog from '../../dialog/dialog.svelte';
   import Icon from '../../icon/icon.svelte';
   import TextInput from '../../text-field/text-input.svelte';
+  import { focusEditor } from '../core';
 
   const id = generateElementId('insert-link');
 
@@ -47,7 +51,7 @@
     $editor.getEditorState().read(() => {
       const textContent = getTextContent().trim();
 
-      anchorURL = isURL(textContent) ? textContent : '';
+      anchorURL = textContent;
       hasAnchor = !!textContent;
       dialogMode = 'create';
       openDialog = true;
@@ -105,7 +109,7 @@
    * @param {KeyboardEvent} event - `keydown` event.
    */
   const onInputKeyDown = (event) => {
-    if (matchShortcuts(event, 'Enter') && isURL(anchorURL)) {
+    if (matchShortcuts(event, 'Enter') && anchorURL) {
       openDialog = false;
     }
   };
@@ -117,27 +121,33 @@
    */
   const onDialogClose = async (event) => {
     if (event.detail !== 'cancel' && dialogMode !== 'remove') {
-      if (!hasAnchor) {
-        anchorText = anchorText.trim();
-        anchorText ||= anchorURL;
+      await new Promise((resolve) => {
+        $editor.update(async () => {
+          let selection = getSelection() ?? getPreviousSelection()?.clone();
 
-        await new Promise((resolve) => {
-          $editor.update(() => {
-            const selection = getSelection() ?? getPreviousSelection()?.clone();
+          if (!isRangeSelection(selection)) {
+            selection = createRangeSelection();
+          }
 
-            if (isRangeSelection(selection)) {
-              const { anchor, focus } = selection;
+          if (!hasAnchor) {
+            anchorText = anchorText.trim();
+            anchorText ||= anchorURL;
 
-              selection.insertText(anchorText);
-              anchor.offset -= anchorText.length;
-              focus.offset = anchor.offset + anchorText.length;
+            const { anchor, focus } = /** @type {import('lexical').RangeSelection} */ (selection);
+            const node = createTextNode(anchorText);
+            const key = node.getKey();
 
-              resolve(void 0);
-            }
-          });
+            insertNodes([node]);
+            anchor.set(key, anchorText.length, 'text');
+            focus.set(key, 0, 'text');
+          }
+
+          setSelection(selection);
+          resolve(undefined);
         });
-      }
+      });
 
+      await focusEditor($editor);
       $editor.dispatchCommand(TOGGLE_LINK_COMMAND, anchorURL);
     }
 
@@ -191,18 +201,29 @@
     : $_('_sui.text_editor.update_link')}
   bind:open={openDialog}
   bind:value={anchorURL}
-  okDisabled={!isURL(anchorURL)}
+  okDisabled={!anchorURL}
   okLabel={dialogMode === 'create' ? $_('_sui.insert') : $_('_sui.update')}
   onClose={(event) => {
     onDialogClose(event);
   }}
 >
+  <div role="none">
+    <label for="{id}-url">{$_('_sui.text_editor.url')}</label>
+    <TextInput
+      id="{id}-url"
+      bind:value={anchorURL}
+      flex
+      aria-label="URL"
+      onkeydown={(event) => {
+        onInputKeyDown(event);
+      }}
+    />
+  </div>
   {#if !hasAnchor}
     <div role="none">
       <label for="{id}-text">{$_('_sui.text_editor.text')}</label>
       <TextInput
         id="{id}-text"
-        autofocus
         bind:value={anchorText}
         flex
         onkeydown={(event) => {
@@ -211,19 +232,6 @@
       />
     </div>
   {/if}
-  <div role="none">
-    <label for="{id}-url">{$_('_sui.text_editor.url')}</label>
-    <TextInput
-      id="{id}-url"
-      autofocus={hasAnchor || undefined}
-      bind:value={anchorURL}
-      flex
-      aria-label="URL"
-      onkeydown={(event) => {
-        onInputKeyDown(event);
-      }}
-    />
-  </div>
   {#snippet footerExtra()}
     {#if dialogMode !== 'create'}
       <Button

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

@@ -1,2 +1,6 @@
 export default InsertLinkButton;
+type InsertLinkButton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
 declare const InsertLinkButton: import("svelte").Component<Record<string, never>, {}, "">;

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

@@ -14,6 +14,7 @@
   import { availableButtons } from '..';
   import Icon from '../../icon/icon.svelte';
   import MenuItemCheckbox from '../../menu/menu-item-checkbox.svelte';
+  import { focusEditor } from '../core';
 
   /**
    * @typedef {object} Props
@@ -43,7 +44,9 @@
   /**
    * Change the current selection’s type to {@link type}.
    */
-  const changeBlockType = () => {
+  const changeBlockType = async () => {
+    await focusEditor($editor);
+
     const [, headingLevel] = type.match(/^heading-(\d)$/) ?? [];
 
     if (headingLevel) {
@@ -75,11 +78,6 @@
         setBlocksType(getSelection(), () => createQuoteNode());
       });
     }
-
-    // Move focus back to the editor
-    window.setTimeout(() => {
-      $editor.focus();
-    }, 500);
   };
 </script>
 

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

@@ -1,7 +1,17 @@
 export default ToggleBlockMenuItem;
+type ToggleBlockMenuItem = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 declare const ToggleBlockMenuItem: import("svelte").Component<{
     /**
      * - Button type.
      */
     type: import("../../../typedefs").TextEditorBlockType;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - Button type.
+     */
+    type: import("../../../typedefs").TextEditorBlockType;
+};

package/package/components/text-field/number-input.svelte.d.ts

@@ -1,4 +1,8 @@
 export default NumberInput;
+type NumberInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>>): void;
+};
 /**
  * The equivalent of the HTML `<input type="number">` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
@@ -27,3 +31,26 @@ declare const NumberInput: import("svelte").Component<import("../../typedefs").T
      */
     decreaseIcon?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "invalid" | "value">;
+type Props = {
+    /**
+     * - Minimum allowed value.
+     */
+    min?: number | undefined;
+    /**
+     * - Maximum allowed value.
+     */
+    max?: number | undefined;
+    /**
+     * - Value to be added or removed when using the up/down arrow key or
+     * button.
+     */
+    step?: number | undefined;
+    /**
+     * - Increase icon slot content.
+     */
+    increaseIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Decrease icon slot content.
+     */
+    decreaseIcon?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/text-field/password-input.svelte.d.ts

@@ -1,4 +1,8 @@
 export default PasswordInput;
+type PasswordInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>>): void;
+};
 /**
  * The equivalent of the HTML `<input type="password">` element, but it comes with the Show/Hide
  * button.
@@ -11,3 +15,9 @@ declare const PasswordInput: import("svelte").Component<import("../../typedefs")
      */
     visibilityIcon?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "value">;
+type Props = {
+    /**
+     * - Visibility icon slot content.
+     */
+    visibilityIcon?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/text-field/search-bar.svelte.d.ts

@@ -1,4 +1,10 @@
 export default SearchBar;
+type SearchBar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>>): void;
+} & {
+    focus: () => void;
+};
 /**
  * The equivalent of the HTML `<input type="search">` element. It comes with a magnifier icon and
  * clear button.
@@ -17,3 +23,13 @@ declare const SearchBar: import("svelte").Component<import("../../typedefs").Tex
 } & Record<string, any>, {
     focus: () => void;
 }, "value">;
+type Props = {
+    /**
+     * - Search icon slot content.
+     */
+    searchIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Close icon slot content.
+     */
+    closeIcon?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/text-field/text-area.svelte.d.ts

@@ -1,4 +1,8 @@
 export default TextArea;
+type TextArea = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>>): void;
+};
 /**
  * A multi-line text field based on the HTML `<textarea>` element, providing the auto-resize support.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
@@ -56,3 +60,54 @@ declare const TextArea: import("svelte").Component<import("../../typedefs").Keyb
      */
     children?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "value">;
+type Props = {
+    /**
+     * - Input value.
+     */
+    value?: string | undefined;
+    /**
+     * - Make the text input container flexible.
+     */
+    flex?: boolean | undefined;
+    /**
+     * - The `name` attribute on the `<textarea>` element.
+     */
+    name?: string | undefined;
+    /**
+     * - Whether to automatically resize the `<textarea>` based on
+     * the content.
+     */
+    autoResize?: boolean | 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;
+};

package/package/components/text-field/text-input.svelte.d.ts

@@ -1,4 +1,8 @@
 export default TextInput;
+type TextInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Record<string, any>>): void;
+};
 /**
  * A generic, single-line text field. The equivalent of the HTML `<input type="text">` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text

package/package/components/toast/toast.svelte.d.ts

@@ -1,4 +1,8 @@
 export default Toast;
+type Toast = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * Toast/snackbar notification. Use the Popover API if possible to acquire a non-modal top layer.
  * @see https://w3c.github.io/aria/#alert
@@ -28,3 +32,27 @@ declare const Toast: import("svelte").Component<{
      */
     children?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "show">;
+type Props = {
+    /**
+     * - The toast ID. If updated, the timer that hides
+     * the toast will be reset, meaning the same toast can be displayed for a longer period of time.
+     */
+    id?: string | number | undefined;
+    /**
+     * - Whether to show the toast.
+     */
+    show?: boolean | undefined;
+    /**
+     * - Duration to automatically hide the toast. Use `0` to hide it
+     * manually from the consumer.
+     */
+    duration?: number | undefined;
+    /**
+     * - Position of the toast.
+     */
+    position?: import("../../typedefs").ToastPosition | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/toolbar/toolbar.svelte.d.ts

@@ -1,4 +1,8 @@
 export default Toolbar;
+type Toolbar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * A toolbar layout that can contain `<Button>`, `<Select>` and other widgets.
  * @see https://w3c.github.io/aria/#toolbar
@@ -32,3 +36,31 @@ declare const Toolbar: import("svelte").Component<{
      */
     children?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - 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;
+    /**
+     * - Orientation of the widget. An alias of
+     * the `aria-orientation` attribute.
+     */
+    orientation?: "vertical" | "horizontal" | undefined;
+    /**
+     * - The style variant of the toolbar.
+     */
+    variant?: "primary" | "secondary" | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};