@sveltia/ui 0.15.16 → 0.17.0

package/package/components/checkbox/checkbox.svelte.d.ts

@@ -1,65 +1,93 @@
-/** @typedef {typeof __propDef.props}  CheckboxProps */
-/** @typedef {typeof __propDef.events}  CheckboxEvents */
-/** @typedef {typeof __propDef.slots}  CheckboxSlots */
+export default Checkbox;
+type Checkbox = SvelteComponent<ButtonProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "checked" | undefined;
+};
 /**
  * The equivalent of the HTML `<input type="checkbox">` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
  * @see https://w3c.github.io/aria/#checkbox
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
  */
-export default class Checkbox extends SvelteComponent<{
-    [x: string]: any;
+declare const Checkbox: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ButtonProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
     class?: string | undefined;
-    name?: string | undefined;
-    disabled?: 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;
-    label?: string | undefined;
+    /**
+     * - Whether to check the widget. An alias of the
+     * `aria-checked` attribute.
+     */
     checked?: boolean | "mixed" | undefined;
-    required?: boolean | undefined;
-    value?: string | undefined;
-    hidden?: boolean | undefined;
-    readonly?: boolean | undefined;
-}, {
-    change: CustomEvent<any>;
-} & {
+    /**
+     * - Text label displayed next to the checkbox.
+     */
+    label?: string | undefined;
+    /**
+     * - `aria-label` attribute.
+     */
+    "aria-label"?: string | undefined;
+    /**
+     * - Check icon slot content.
+     */
+    checkIcon?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    'check-icon': {
-        slot: string;
+}, {}, {}, "checked">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | 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;
+    /**
+     * - Whether to check the widget. An alias of the
+     * `aria-checked` attribute.
+     */
+    checked?: boolean | "mixed" | undefined;
+    /**
+     * - Text label displayed next to the checkbox.
+     */
+    label?: string | undefined;
+    /**
+     * - `aria-label` attribute.
+     */
+    "aria-label"?: string | undefined;
+    /**
+     * - Check icon slot content.
+     */
+    checkIcon?: 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;
     };
-    default: {};
-}> {
+    z_$$bindings?: Bindings;
 }
-export type CheckboxProps = typeof __propDef.props;
-export type CheckboxEvents = typeof __propDef.events;
-export type CheckboxSlots = 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;
-        label?: string | undefined;
-        checked?: boolean | "mixed" | undefined;
-        required?: boolean | undefined;
-        value?: string | undefined;
-        hidden?: boolean | undefined;
-        readonly?: boolean | undefined;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'check-icon': {
-            slot: string;
-        };
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/package/components/dialog/alert-dialog.svelte

@@ -9,42 +9,15 @@
   import Dialog from './dialog.svelte';
 
   /**
-   * The `class` attribute on the `<dialog>` element.
-   * @type {string}
+   * @type {import('../../typedefs').ModalProps & import('../../typedefs').DialogProps &
+   * Record<string, any>}
    */
-  let className = '';
-  export { className as class };
-  /**
-   * Whether to open the dialog.
-   * @type {boolean}
-   */
-  export let open = false;
-  /**
-   * Text label displayed on the header. Required.
-   * @type {string}
-   */
-  export let title;
-  /**
-   * Text label displayed on the OK button.
-   * @type {string}
-   */
-  export let okLabel = '';
+  let {
+    /* eslint-disable prefer-const */
+    open = $bindable(false),
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
-<Dialog
-  role="alertdialog"
-  class={className}
-  bind:open
-  {title}
-  {okLabel}
-  showCancel={false}
-  {...$$restProps}
-  on:opening
-  on:open
-  on:ok
-  on:cancel
-  on:closing
-  on:close
->
-  <slot />
-</Dialog>
+<Dialog {...restProps} bind:open role="alertdialog" showCancel={false}></Dialog>

package/package/components/dialog/alert-dialog.svelte.d.ts

@@ -1,57 +1,28 @@
-/** @typedef {typeof __propDef.props}  AlertDialogProps */
-/** @typedef {typeof __propDef.events}  AlertDialogEvents */
-/** @typedef {typeof __propDef.slots}  AlertDialogSlots */
+export default AlertDialog;
+type AlertDialog = SvelteComponent<ModalProps & DialogProps & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "open" | undefined;
+};
 /**
  * A modal alert dialog. It only shows the OK button, just like `window.alert()`.
  * @see https://w3c.github.io/aria/#alertdialog
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/alert
  */
-export default class AlertDialog extends SvelteComponent<{
-    [x: string]: any;
-    title: string;
-    class?: string | undefined;
-    open?: boolean | undefined;
-    okLabel?: string | undefined;
-}, {
-    opening: CustomEvent<any>;
-    open: CustomEvent<any>;
-    ok: CustomEvent<any>;
-    cancel: CustomEvent<any>;
-    closing: CustomEvent<any>;
-    close: CustomEvent<any>;
-} & {
+declare const AlertDialog: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ModalProps & import("../../typedefs").DialogProps & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type AlertDialogProps = typeof __propDef.props;
-export type AlertDialogEvents = typeof __propDef.events;
-export type AlertDialogSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        title: string;
-        class?: string | undefined;
-        open?: boolean | undefined;
-        okLabel?: string | undefined;
-    };
-    events: {
-        opening: CustomEvent<any>;
-        open: CustomEvent<any>;
-        ok: CustomEvent<any>;
-        cancel: CustomEvent<any>;
-        closing: CustomEvent<any>;
-        close: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+}, {}, {}, "open">;
+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;
     };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+    z_$$bindings?: Bindings;
+}

package/package/components/dialog/confirmation-dialog.svelte

@@ -9,47 +9,15 @@
   import Dialog from './dialog.svelte';
 
   /**
-   * The `class` attribute on the `<dialog>` element.
-   * @type {string}
+   * @type {import('../../typedefs').ModalProps & import('../../typedefs').DialogProps &
+   * Record<string, any>}
    */
-  let className = '';
-  export { className as class };
-  /**
-   * Whether to open the dialog.
-   * @type {boolean}
-   */
-  export let open = false;
-  /**
-   * Text label displayed on the header. Required.
-   * @type {string}
-   */
-  export let title;
-  /**
-   * Text label displayed on the OK button.
-   * @type {string}
-   */
-  export let okLabel = '';
-  /**
-   * Text label displayed on the Cancel button.
-   * @type {string}
-   */
-  export let cancelLabel = '';
+  let {
+    /* eslint-disable prefer-const */
+    open = $bindable(false),
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 </script>
 
-<Dialog
-  role="alertdialog"
-  class={className}
-  bind:open
-  {title}
-  {okLabel}
-  {cancelLabel}
-  {...$$restProps}
-  on:opening
-  on:open
-  on:ok
-  on:cancel
-  on:closing
-  on:close
->
-  <slot />
-</Dialog>
+<Dialog {...restProps} bind:open role="alertdialog"></Dialog>

package/package/components/dialog/confirmation-dialog.svelte.d.ts

@@ -1,59 +1,28 @@
-/** @typedef {typeof __propDef.props}  ConfirmationDialogProps */
-/** @typedef {typeof __propDef.events}  ConfirmationDialogEvents */
-/** @typedef {typeof __propDef.slots}  ConfirmationDialogSlots */
+export default ConfirmationDialog;
+type ConfirmationDialog = SvelteComponent<ModalProps & DialogProps & Record<string, any>, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "open" | undefined;
+};
 /**
  * A modal confirmation dialog. It shows the OK and Cancel buttons, just like `window.confirm()`.
  * @see https://w3c.github.io/aria/#alertdialog
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm
  */
-export default class ConfirmationDialog extends SvelteComponent<{
-    [x: string]: any;
-    title: string;
-    class?: string | undefined;
-    open?: boolean | undefined;
-    okLabel?: string | undefined;
-    cancelLabel?: string | undefined;
-}, {
-    opening: CustomEvent<any>;
-    open: CustomEvent<any>;
-    ok: CustomEvent<any>;
-    cancel: CustomEvent<any>;
-    closing: CustomEvent<any>;
-    close: CustomEvent<any>;
-} & {
+declare const ConfirmationDialog: $$__sveltets_2_IsomorphicComponent<import("../../typedefs").ModalProps & import("../../typedefs").DialogProps & Record<string, any>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type ConfirmationDialogProps = typeof __propDef.props;
-export type ConfirmationDialogEvents = typeof __propDef.events;
-export type ConfirmationDialogSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        title: string;
-        class?: string | undefined;
-        open?: boolean | undefined;
-        okLabel?: string | undefined;
-        cancelLabel?: string | undefined;
-    };
-    events: {
-        opening: CustomEvent<any>;
-        open: CustomEvent<any>;
-        ok: CustomEvent<any>;
-        cancel: CustomEvent<any>;
-        closing: CustomEvent<any>;
-        close: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+}, {}, {}, "open">;
+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;
     };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+    z_$$bindings?: Bindings;
+}

package/package/components/dialog/dialog.svelte

@@ -13,71 +13,34 @@
   import Modal from '../util/modal.svelte';
 
   /**
-   * The `class` attribute on the content element.
-   * @type {string}
-   */
-  let className = '';
-  export { className as class };
-  /**
-   * The `role` attribute on the `<dialog>` element.
-   * @type {'dialog' | 'alertdialog'}
-   */
-  export let role = 'dialog';
-  /**
-   * Width of the dialog.
-   * @type {('small' | 'medium' | 'large' | 'x-large')}
-   */
-  export let size = 'medium';
-  /**
-   * Whether to open the dialog.
-   * @type {boolean}
-   */
-  export let open = false;
-  /**
-   * Text label displayed on the header. Required.
-   * @type {string}
-   */
-  export let title;
-  /**
-   * Whether to show the Close button on the header.
-   * @type {boolean}
-   */
-  export let showClose = false;
-  /**
-   * Whether to show the OK button on the footer.
-   * @type {boolean}
-   */
-  export let showOk = true;
-  /**
-   * Text label displayed on the OK button.
-   * @type {string}
-   */
-  export let okLabel = '';
-  /**
-   * Whether to disable the OK button.
-   * @type {boolean}
-   */
-  export let okDisabled = false;
-  /**
-   * Whether to show the Cancel button on the footer.
-   * @type {boolean}
-   */
-  export let showCancel = true;
-  /**
-   * Text label displayed on the Cancel button.
-   * @type {string}
-   */
-  export let cancelLabel = '';
-  /**
-   * Whether to disable the Cancel button.
-   * @type {boolean}
-   */
-  export let cancelDisabled = false;
-  /**
-   * Whether to close the modal when the backdrop (outside of the modal) is clicked.
-   * @type {boolean}
-   */
-  export let lightDismiss = false;
+   * @type {import('../../typedefs').ModalProps & import('../../typedefs').DialogProps &
+   * Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    open = $bindable(false),
+    value = $bindable(''),
+    title,
+    role = 'dialog',
+    size = 'medium',
+    class: className,
+    showClose = false,
+    showOk = true,
+    showCancel = true,
+    okLabel = '',
+    okDisabled = false,
+    cancelLabel = '',
+    cancelDisabled = false,
+    children,
+    header,
+    headerExtra,
+    footer,
+    footerExtra,
+    closeIcon,
+    input: _input,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
 
   /**
    * The ID of the drawer.
@@ -86,91 +49,83 @@
   const id = generateElementId('dialog');
   /**
    * A reference to the modal component.
-   * @type {Modal}
+   * @type {Modal | undefined}
    */
-  let modal;
+  let modal = $state();
   /**
    * @type {HTMLElement | undefined}
    */
-  let content;
+  let content = $state();
 
-  $: {
+  $effect(() => {
     if (open && content) {
       /** @type {HTMLElement} */ (content.querySelector('input, button.primary'))?.focus();
     }
-  }
+  });
 </script>
 
 <Modal
+  bind:this={modal}
+  {...restProps}
   {role}
   {id}
   class="dialog"
-  aria-label={$$slots.header ? undefined : title}
-  aria-labelledby={$$slots.header ? title : `${id}-title`}
+  aria-label={header ? undefined : title}
+  aria-labelledby={header ? title : `${id}-title`}
   aria-describedby="{id}-body"
   bind:open
   showBackdrop
-  {lightDismiss}
-  {...$$restProps}
-  bind:this={modal}
-  on:opening
-  on:open
-  on:ok
-  on:cancel
-  on:closing
-  on:close
 >
-  <slot name="extra-content" slot="extra-content" />
-  <div role="none" class="content {className} {size}" bind:this={content}>
-    {#if title || showClose || $$slots.header || $$slots['header-extra']}
+  <div bind:this={content} role="none" class="content {className} {size}">
+    {#if title || showClose || header || headerExtra}
       <div role="none" class="header">
-        {#if $$slots.header}
-          <slot name="header" />
+        {#if header}
+          {@render header()}
         {:else}
           <div role="none" id="{id}-title" class="title">
             {title}
           </div>
           <Spacer flex={true} />
-          {#if $$slots['header-extra']}
-            <slot name="header-extra" />
-          {/if}
+          {@render headerExtra?.()}
           {#if showClose}
             <Button
               variant="ghost"
               iconic
               aria-label={$_('_sui.close')}
               aria-controls={id}
-              on:click={() => {
-                modal.close('close');
+              onclick={() => {
+                modal?.close('close');
               }}
             >
-              <slot name="close-icon" slot="start-icon">
-                <Icon name="close" />
-              </slot>
+              {#snippet startIcon()}
+                {#if closeIcon}
+                  {@render closeIcon()}
+                {:else}
+                  <Icon name="close" />
+                {/if}
+              {/snippet}
             </Button>
           {/if}
         {/if}
       </div>
     {/if}
     <div role="none" id="{id}-body" class="body">
-      <slot />
+      {@render children?.()}
     </div>
-    {#if showOk || showCancel || $$slots.footer || $$slots['footer-extra']}
+    {#if showOk || showCancel || footer || footerExtra}
       <div role="none" class="footer">
-        {#if $$slots.footer}
-          <slot name="footer" />
+        {#if footer}
+          {@render footer?.()}
         {:else}
-          {#if $$slots['footer-extra']}
-            <slot name="footer-extra" />
-          {/if}
+          {@render footerExtra?.()}
           <Spacer flex={true} />
           {#if showOk}
             <Button
               variant="primary"
               label={okLabel || $_('_sui.ok')}
               disabled={okDisabled}
-              on:click={() => {
-                modal.close('ok');
+              onclick={() => {
+                modal?.close('ok');
               }}
             />
           {/if}
@@ -179,8 +134,8 @@
               variant="secondary"
               label={cancelLabel || $_('_sui.cancel')}
               disabled={cancelDisabled}
-              on:click={() => {
-                modal.close('cancel');
+              onclick={() => {
+                modal?.close('cancel');
               }}
             />
           {/if}