@sveltia/ui 0.15.16 → 0.17.0

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

@@ -1,25 +1,33 @@
-/** @typedef {typeof __propDef.props}  ToggleBlockMenuItemProps */
-/** @typedef {typeof __propDef.events}  ToggleBlockMenuItemEvents */
-/** @typedef {typeof __propDef.slots}  ToggleBlockMenuItemSlots */
-export default class ToggleBlockMenuItem extends SvelteComponent<{
+export default ToggleBlockMenuItem;
+type ToggleBlockMenuItem = SvelteComponent<Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "" | undefined;
+};
+declare const ToggleBlockMenuItem: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - Button type.
+     */
     type: import("../../../typedefs").TextEditorBlockType;
-}, {
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ToggleBlockMenuItemProps = typeof __propDef.props;
-export type ToggleBlockMenuItemEvents = typeof __propDef.events;
-export type ToggleBlockMenuItemSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        type: import("../../../typedefs").TextEditorBlockType;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+}, {}, {}, "">;
+type Props = {
+    /**
+     * - Button type.
+     */
+    type: import("../../../typedefs").TextEditorBlockType;
 };
-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-field/number-input.svelte

@@ -12,77 +12,56 @@
   import TextInput from './text-input.svelte';
 
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {number | undefined} [min] - Minimum allowed value.
+   * @property {number | undefined} [max] - Maximum allowed value.
+   * @property {number} [step] - Value to be added or removed when using the up/down arrow key or
+   * button.
+   * @property {import('svelte').Snippet} [increaseIcon] - Increase icon slot content.
+   * @property {import('svelte').Snippet} [decreaseIcon] - Decrease icon slot content.
    */
-  let className = '';
-  export { className as class };
-  /**
-   * Make the text input container flexible.
-   * @type {boolean}
-   */
-  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;
-  /**
-   * Minimum allowed value.
-   * @type {number | undefined}
-   */
-  export let min = undefined;
-  /**
-   * Maximum allowed value.
-   * @type {number | undefined}
-   */
-  export let max = undefined;
+
   /**
-   * Value to be added or removed when using the up/down arrow key or button.
+   * @type {import('../../typedefs').TextInputProps & import('../../typedefs').CommonEventHandlers &
+   * import('../../typedefs').InputEventHandlers & Props & Record<string, any>}
    */
-  export let step = 1;
+  let {
+    /* eslint-disable prefer-const */
+    value = $bindable(),
+    invalid = $bindable(false),
+    flex = false,
+    min = undefined,
+    max = undefined,
+    step = 1,
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    children,
+    increaseIcon,
+    decreaseIcon,
+    onChange,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   const id = generateElementId('input');
-  let edited = false;
-
-  $: maximumFractionDigits = String(step).split('.')[1]?.length || 0;
-  $: isMin = typeof min === 'number' && Number(value || 0) <= min;
-  $: isMax = typeof max === 'number' && Number(value || 0) >= max;
+  let edited = $state(false);
 
-  $: invalid =
-    (required && edited && (value === undefined || value === '')) ||
-    (value !== undefined &&
-      value !== '' &&
-      (Number.isNaN(Number(value)) ||
-        (typeof min === 'number' && Number(value || 0) < min) ||
-        (typeof max === 'number' && Number(value || 0) > max)));
+  const maximumFractionDigits = $derived(String(step).split('.')[1]?.length || 0);
+  const isMin = $derived(typeof min === 'number' && Number(value || 0) <= min);
+  const isMax = $derived(typeof max === 'number' && Number(value || 0) >= max);
 
-  let component;
+  $effect(() => {
+    invalid =
+      (required && edited && (value === undefined || value === '')) ||
+      (value !== undefined &&
+        value !== '' &&
+        (Number.isNaN(Number(value)) ||
+          (typeof min === 'number' && Number(value || 0) < min) ||
+          (typeof max === 'number' && Number(value || 0) > max)));
+  });
 
   /**
    * Decrease the number.
@@ -113,7 +92,7 @@
   class:flex
   class:disabled
   class:readonly
-  hidden={hidden || undefined}
+  {hidden}
 >
   <div role="none" class="buttons">
     <Button
@@ -121,29 +100,38 @@
       disabled={disabled || readonly || Number.isNaN(Number(value)) || isMax}
       aria-label={$_('_sui.number_input.increase')}
       aria-controls={id}
-      on:click={() => {
+      onclick={() => {
         increase();
       }}
     >
-      <slot name="increase-icon" slot="start-icon">
-        <Icon name="expand_less" />
-      </slot>
+      {#snippet startIcon()}
+        {#if increaseIcon}
+          {@render increaseIcon()}
+        {:else}
+          <Icon name="expand_less" />
+        {/if}
+      {/snippet}
     </Button>
     <Button
       iconic
       disabled={disabled || readonly || Number.isNaN(Number(value)) || isMin}
       aria-label={$_('_sui.number_input.decrease')}
       aria-controls={id}
-      on:click={() => {
+      onclick={() => {
         decrease();
       }}
     >
-      <slot name="decrease-icon" slot="start-icon">
-        <Icon name="expand_more" />
-      </slot>
+      {#snippet startIcon()}
+        {#if decreaseIcon}
+          {@render decreaseIcon()}
+        {:else}
+          <Icon name="expand_more" />
+        {/if}
+      {/snippet}
     </Button>
   </div>
   <TextInput
+    {...restProps}
     role="spinbutton"
     {id}
     bind:value
@@ -158,9 +146,7 @@
     aria-valuemin={min}
     aria-valuemax={max}
     inputmode={maximumFractionDigits > 0 ? 'decimal' : 'numeric'}
-    {...$$restProps}
-    bind:this={component}
-    on:keydown={(event) => {
+    onkeydown={(event) => {
       const { key, ctrlKey, metaKey, altKey, shiftKey } = event;
       const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
 
@@ -178,11 +164,7 @@
         edited = true;
       }
     }}
-    on:keydown
-    on:keyup
-    on:keypress
-    on:input
-    on:change
+    {onChange}
   />
 </div>
 

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

@@ -1,78 +1,72 @@
-/** @typedef {typeof __propDef.props}  NumberInputProps */
-/** @typedef {typeof __propDef.events}  NumberInputEvents */
-/** @typedef {typeof __propDef.slots}  NumberInputSlots */
+export default NumberInput;
+type NumberInput = SvelteComponent<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "invalid" | "value" | undefined;
+};
 /**
  * The equivalent of the HTML `<input type="number">` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
  * @see https://w3c.github.io/aria/#textbox
  */
-export default class NumberInput extends SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    max?: number | undefined;
+declare const NumberInput: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & import("../../typedefs").InputEventHandlers & {
+    /**
+     * - Minimum allowed value.
+     */
     min?: number | undefined;
-    required?: boolean | 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;
-    value?: string | undefined;
-    hidden?: boolean | undefined;
-    readonly?: boolean | undefined;
-    flex?: boolean | undefined;
-}, {
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    input: Event;
-    change: Event;
-} & {
+    /**
+     * - Increase icon slot content.
+     */
+    increaseIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Decrease icon slot content.
+     */
+    decreaseIcon?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'increase-icon': {
-        slot: string;
-    };
-    'decrease-icon': {
-        slot: string;
+}, {}, {}, "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;
+};
+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;
 }
-export type NumberInputProps = typeof __propDef.props;
-export type NumberInputEvents = typeof __propDef.events;
-export type NumberInputSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        disabled?: boolean | undefined;
-        invalid?: boolean | undefined;
-        max?: number | undefined;
-        min?: number | undefined;
-        required?: boolean | undefined;
-        step?: number | undefined;
-        value?: string | undefined;
-        hidden?: boolean | undefined;
-        readonly?: boolean | undefined;
-        flex?: boolean | undefined;
-    };
-    events: {
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        keypress: KeyboardEvent;
-        input: Event;
-        change: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'increase-icon': {
-            slot: string;
-        };
-        'decrease-icon': {
-            slot: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

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

@@ -13,60 +13,42 @@
   import TextInput from './text-input.svelte';
 
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {import('svelte').Snippet} [visibilityIcon] - Visibility icon slot content.
    */
-  let className = '';
-  export { className as class };
-  /**
-   * Make the text input container flexible.
-   * @type {boolean}
-   */
-  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}
+   * @type {import('../../typedefs').TextInputProps & import('../../typedefs').CommonEventHandlers &
+   * import('../../typedefs').InputEventHandlers & Props & Record<string, any>}
    */
-  export let value = undefined;
+  let {
+    /* eslint-disable prefer-const */
+    value = $bindable(),
+    flex = false,
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    children,
+    visibilityIcon,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   const id = generateElementId('input');
 
   /**
-   * @type {TextInput}
+   * Reference to the `<input>` element.
+   * @type {HTMLInputElement | undefined}
    */
-  let inputComponent;
-  let passwordVisible = false;
+  let inputElement = $state();
+  let passwordVisible = $state(false);
 
-  $: {
-    if (inputComponent) {
-      inputComponent.element?.setAttribute('type', passwordVisible ? 'text' : 'password');
-    }
-  }
+  $effect(() => {
+    inputElement?.setAttribute('type', passwordVisible ? 'text' : 'password');
+  });
 </script>
 
 <div
@@ -75,9 +57,11 @@
   class:flex
   class:disabled
   class:readonly
-  hidden={hidden || undefined}
+  {hidden}
 >
   <TextInput
+    bind:element={inputElement}
+    {...restProps}
     {id}
     bind:value
     type="password"
@@ -88,13 +72,6 @@
     {readonly}
     {required}
     {invalid}
-    {...$$restProps}
-    bind:this={inputComponent}
-    on:keydown
-    on:keyup
-    on:keypress
-    on:input
-    on:change
   />
   <Button
     iconic
@@ -104,13 +81,17 @@
       passwordVisible ? '_sui.password_input.hide_password' : '_sui.password_input.show_password',
     )}
     aria-controls={id}
-    on:click={() => {
+    onclick={() => {
       passwordVisible = !passwordVisible;
     }}
   >
-    <slot name="visibility-icon" slot="start-icon">
-      <Icon name={passwordVisible ? 'visibility_off' : 'visibility'} />
-    </slot>
+    {#snippet startIcon()}
+      {#if visibilityIcon}
+        {@render visibilityIcon()}
+      {:else}
+        <Icon name={passwordVisible ? 'visibility_off' : 'visibility'} />
+      {/if}
+    {/snippet}
   </Button>
 </div>
 

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

@@ -1,67 +1,39 @@
-/** @typedef {typeof __propDef.props}  PasswordInputProps */
-/** @typedef {typeof __propDef.events}  PasswordInputEvents */
-/** @typedef {typeof __propDef.slots}  PasswordInputSlots */
+export default PasswordInput;
+type PasswordInput = SvelteComponent<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "value" | undefined;
+};
 /**
  * The equivalent of the HTML `<input type="password">` element, but it comes with the Show/Hide
  * button.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
  * @see https://w3c.github.io/aria/#textbox
  */
-export default class PasswordInput extends SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    required?: boolean | undefined;
-    value?: string | undefined;
-    hidden?: boolean | undefined;
-    readonly?: boolean | undefined;
-    flex?: boolean | undefined;
-}, {
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    input: Event;
-    change: Event;
-} & {
+declare const PasswordInput: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & import("../../typedefs").InputEventHandlers & {
+    /**
+     * - Visibility icon slot content.
+     */
+    visibilityIcon?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'visibility-icon': {
-        slot: string;
+}, {}, {}, "value">;
+type Props = {
+    /**
+     * - Visibility icon slot content.
+     */
+    visibilityIcon?: 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-}> {
+    z_$$bindings?: Bindings;
 }
-export type PasswordInputProps = typeof __propDef.props;
-export type PasswordInputEvents = typeof __propDef.events;
-export type PasswordInputSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        disabled?: boolean | undefined;
-        invalid?: boolean | undefined;
-        required?: boolean | undefined;
-        value?: string | undefined;
-        hidden?: boolean | undefined;
-        readonly?: boolean | undefined;
-        flex?: boolean | undefined;
-    };
-    events: {
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        keypress: KeyboardEvent;
-        input: Event;
-        change: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'visibility-icon': {
-            slot: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};