@sveltia/ui 0.15.16 → 0.17.0

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

@@ -5,7 +5,6 @@
   @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
   @see https://w3c.github.io/aria/#search
 -->
-<svelte:options accessors={true} />
 
 <script>
   import { generateElementId } from '@sveltia/utils/element';
@@ -15,61 +14,44 @@
   import TextInput from './text-input.svelte';
 
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {import('svelte').Snippet} [searchIcon] - Search icon slot content.
+   * @property {import('svelte').Snippet} [closeIcon] - Close 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,
+    searchIcon,
+    closeIcon,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   const id = generateElementId('searchbox');
   /**
-   * Reference to the `TextInput` component.
-   * @type {TextInput | undefined}
+   * Reference to the `<input>` element.
+   * @type {HTMLInputElement | undefined}
    */
-  let inputComponent;
-
-  $: input = inputComponent?.element;
+  let inputElement = $state();
 
   /**
    * Move focus to the `<input>` element.
    */
   export const focus = () => {
-    input?.focus();
+    inputElement?.focus();
   };
 </script>
 
@@ -79,15 +61,19 @@
   class:flex
   class:disabled
   class:readonly
-  hidden={hidden || undefined}
+  {hidden}
   aria-hidden={hidden}
 >
   <span role="none">
-    <slot name="search-icon">
+    {#if searchIcon}
+      {@render searchIcon()}
+    {:else}
       <Icon name="search" />
-    </slot>
+    {/if}
   </span>
   <TextInput
+    bind:element={inputElement}
+    {...restProps}
     role="searchbox"
     {id}
     bind:value
@@ -98,32 +84,29 @@
     {required}
     {invalid}
     inputmode="search"
-    {...$$restProps}
-    bind:this={inputComponent}
-    on:keydown
-    on:keyup
-    on:keypress
-    on:input
-    on:change
   />
   {#if value}
     <Button
       iconic
       aria-label={$_('_sui.clear')}
       aria-controls={id}
-      on:click={() => {
+      onclick={() => {
         value = '';
-        input?.focus();
+        inputElement?.focus();
         globalThis.requestIdleCallback(() => {
-          input?.dispatchEvent(new KeyboardEvent('input'));
-          input?.dispatchEvent(new KeyboardEvent('keypress'));
-          input?.dispatchEvent(new KeyboardEvent('change'));
+          inputElement?.dispatchEvent(new KeyboardEvent('input'));
+          inputElement?.dispatchEvent(new KeyboardEvent('keypress'));
+          inputElement?.dispatchEvent(new KeyboardEvent('change'));
         });
       }}
     >
-      <slot name="close-button" slot="start-icon">
-        <Icon name="close" />
-      </slot>
+      {#snippet startIcon()}
+        {#if closeIcon}
+          {@render closeIcon()}
+        {:else}
+          <Icon name="close" />
+        {/if}
+      {/snippet}
     </Button>
   {/if}
 </div>

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

@@ -1,96 +1,51 @@
-/** @typedef {typeof __propDef.props}  SearchBarProps */
-/** @typedef {typeof __propDef.events}  SearchBarEvents */
-/** @typedef {typeof __propDef.slots}  SearchBarSlots */
+export default SearchBar;
+type SearchBar = SvelteComponent<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "value" | undefined;
+} & {
+    focus: () => void;
+};
 /**
  * The equivalent of the HTML `<input type="search">` element. It comes with a magnifier icon and
  * clear button.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
  * @see https://w3c.github.io/aria/#search
  */
-export default class SearchBar extends SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    disabled?: boolean | undefined;
-    focus?: (() => void) | 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 SearchBar: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & import("../../typedefs").InputEventHandlers & {
+    /**
+     * - Search icon slot content.
+     */
+    searchIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Close icon slot content.
+     */
+    closeIcon?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'search-icon': {};
-    'close-button': {
-        slot: string;
+}, {}, {
+    focus: () => void;
+}, "value">;
+type Props = {
+    /**
+     * - Search icon slot content.
+     */
+    searchIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Close icon slot content.
+     */
+    closeIcon?: 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;
     };
-}> {
-    get focus(): () => void;
-    /**accessor*/
-    set class(_: string | undefined);
-    get class(): string | undefined;
-    /**accessor*/
-    set flex(_: boolean | undefined);
-    get flex(): boolean | undefined;
-    /**accessor*/
-    set hidden(_: boolean | undefined);
-    get hidden(): boolean | undefined;
-    /**accessor*/
-    set disabled(_: boolean | undefined);
-    get disabled(): boolean | undefined;
-    /**accessor*/
-    set readonly(_: boolean | undefined);
-    get readonly(): boolean | undefined;
-    /**accessor*/
-    set required(_: boolean | undefined);
-    get required(): boolean | undefined;
-    /**accessor*/
-    set invalid(_: boolean | undefined);
-    get invalid(): boolean | undefined;
-    /**accessor*/
-    set value(_: string | undefined);
-    get value(): string | undefined;
+    z_$$bindings?: Bindings;
 }
-export type SearchBarProps = typeof __propDef.props;
-export type SearchBarEvents = typeof __propDef.events;
-export type SearchBarSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        disabled?: boolean | undefined;
-        focus?: (() => void) | 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: {
-        'search-icon': {};
-        'close-button': {
-            slot: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

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

@@ -7,56 +7,45 @@
 -->
 <script>
   /**
-   * The `class` attribute on the wrapper element.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {string | undefined} [value] - Input value.
+   * @property {boolean} [flex] - Make the text input container flexible.
+   * @property {string | undefined} [name] - The `name` attribute on the `<textarea>` element.
+   * @property {boolean} [autoResize] - Whether to automatically resize the `<textarea>` based on
+   * the content.
+   * @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.
    */
-  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;
-  /**
-   * The `name` attribute on the `<textarea>` element.
-   * @type {string | undefined}
-   */
-  export let name = undefined;
-  /**
-   * Input value.
-   * @type {string | undefined}
-   */
-  export let value = undefined;
+
   /**
-   * Whether to automatically resize the `<textarea>` based on the content.
-   * @type {boolean}
+   * @type {import('../../typedefs').CommonEventHandlers & import('../../typedefs').InputEventHandlers
+   * & Props & Record<string, any>}
    */
-  export let autoResize = false;
+  let {
+    /* eslint-disable prefer-const */
+    value = $bindable(''),
+    flex = false,
+    name = undefined,
+    autoResize = false,
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
 <div
@@ -65,9 +54,10 @@
   class:flex
   class:disabled
   class:readonly
-  hidden={hidden || undefined}
+  {hidden}
 >
   <textarea
+    {...restProps}
     {name}
     bind:value
     disabled={disabled || undefined}
@@ -77,13 +67,7 @@
     aria-readonly={readonly}
     aria-required={required}
     aria-invalid={invalid}
-    {...$$restProps}
     class:auto-resize={autoResize}
-    on:keydown
-    on:keyup
-    on:keypress
-    on:input
-    on:change
   ></textarea>
   {#if autoResize}
     <div class="clone" aria-hidden="true">{value ?? ''}</div>

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

@@ -1,63 +1,129 @@
-/** @typedef {typeof __propDef.props}  TextAreaProps */
-/** @typedef {typeof __propDef.events}  TextAreaEvents */
-/** @typedef {typeof __propDef.slots}  TextAreaSlots */
+export default TextArea;
+type TextArea = SvelteComponent<KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "value" | undefined;
+};
 /**
  * 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
  * @see https://w3c.github.io/aria/#textbox
  * @see https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
  */
-export default class TextArea extends SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
+declare const TextArea: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & import("../../typedefs").InputEventHandlers & {
+    /**
+     * - 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;
-    invalid?: 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;
-    hidden?: boolean | undefined;
-    readonly?: boolean | 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;
-}, {
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    input: Event;
-    change: Event;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TextAreaProps = typeof __propDef.props;
-export type TextAreaEvents = typeof __propDef.events;
-export type TextAreaSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        name?: string | undefined;
-        disabled?: boolean | undefined;
-        invalid?: boolean | undefined;
-        required?: boolean | undefined;
-        value?: string | undefined;
-        hidden?: boolean | undefined;
-        readonly?: boolean | undefined;
-        flex?: boolean | undefined;
-        autoResize?: boolean | undefined;
-    };
-    events: {
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        keypress: KeyboardEvent;
-        input: Event;
-        change: Event;
-    } & {
-        [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;
+}