@sveltia/ui 0.15.16 → 0.17.0

package/package/services/{popup.js → popup.svelte.js}

@@ -2,6 +2,7 @@
 
 import { generateElementId } from '@sveltia/utils/element';
 import { sleep } from '@sveltia/utils/misc';
+import { on } from 'svelte/events';
 import { get, writable } from 'svelte/store';
 
 /**
@@ -124,13 +125,13 @@ class Popup {
     this.anchorElement.setAttribute('aria-controls', this.id);
     this.popupElement.setAttribute('id', this.id);
 
-    this.anchorElement.addEventListener('click', () => {
+    on(anchorElement, 'click', () => {
       if (!this.isDisabled && !this.isReadOnly) {
         this.open.set(!get(this.open));
       }
     });
 
-    this.anchorElement.addEventListener('keydown', (event) => {
+    on(anchorElement, 'keydown', (event) => {
       const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
       const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
 
@@ -141,7 +142,7 @@ class Popup {
       }
     });
 
-    this.anchorElement.addEventListener('transitionstart', () => {
+    on(anchorElement, 'transitionstart', () => {
       if (this.anchorElement.closest('.hiding, .hidden, [hidden]')) {
         this.hideImmediately();
       }
@@ -154,7 +155,7 @@ class Popup {
     }).observe(this.anchorElement);
 
     // Close the popup when the backdrop, a menu item or an option is clicked
-    this.popupElement.addEventListener('click', (event) => {
+    on(this.popupElement, 'click', (event) => {
       event.stopPropagation();
 
       // eslint-disable-next-line prefer-destructuring
@@ -168,7 +169,7 @@ class Popup {
       }
     });
 
-    this.popupElement.addEventListener('keydown', (event) => {
+    on(this.popupElement, 'keydown', (event) => {
       const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
       const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
 

package/package/typedefs.d.ts

@@ -1,3 +1,548 @@
+export type ButtonProps = {
+    /**
+     * - Reference to the `<button>` element.
+     */
+    element?: HTMLButtonElement | undefined;
+    /**
+     * - The `class` attribute on the `<button>` element.
+     */
+    class?: string | undefined;
+    /**
+     * - The `type` attribute on the `<button>`
+     * element.
+     */
+    type?: "reset" | "submit" | "button" | undefined;
+    /**
+     * - The `role` attribute on the `<button>` element.
+     */
+    role?: string | undefined;
+    /**
+     * - The `name` attribute on the `<button>` element.
+     */
+    name?: string | undefined;
+    /**
+     * - The `value` attribute on the `<button>` element.
+     */
+    value?: string | undefined;
+    /**
+     * - Whether to hide the widget. An alias of the `aria-hidden`
+     * attribute.
+     */
+    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 used in certain roles, including `checkbox`, `listbox`, `slider` and
+     * `textbox`.
+     */
+    readonly?: boolean | undefined;
+    /**
+     * - Whether to mark the widget pressed. An
+     * alias of the `aria-pressed` attribute.
+     */
+    pressed?: boolean | "mixed" | undefined;
+    /**
+     * - Keyboard shortcuts. An alias of the
+     * `aria-keyshortcuts` attribute. Accepts the special `Accel` key, which will be replaced with
+     * `Control` or `Meta` depending on the user’s operating system.
+     */
+    keyShortcuts?: string | undefined;
+    /**
+     * - Text label displayed on the button.
+     */
+    label?: string | undefined;
+    /**
+     * - The
+     * style variant of the button.
+     */
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "link" | undefined;
+    /**
+     * - The size of the button.
+     */
+    size?: "small" | "medium" | "large" | undefined;
+    /**
+     * - Whether to only show an icon on the button and trim the padding.
+     */
+    iconic?: boolean | undefined;
+    /**
+     * - Whether to make the button rounded.
+     */
+    pill?: boolean | undefined;
+    /**
+     * - Make the button width flexible.
+     */
+    flex?: boolean | undefined;
+    /**
+     * - Where to show the dropdown menu.
+     */
+    popupPosition?: PopupPosition | undefined;
+    /**
+     * - Whether to show the backdrop for the popup.
+     */
+    showPopupBackdrop?: boolean | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Start icon slot content.
+     */
+    startIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - End icon slot content.
+     */
+    endIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Popup slot content.
+     */
+    popup?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `Select` event handler.
+     */
+    onSelect?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `Toggle` event handler.
+     */
+    onToggle?: ((event: CustomEvent) => void) | undefined;
+};
+export type ModalProps = {
+    /**
+     * - The `class` attribute on the content element.
+     */
+    class?: string | undefined;
+    /**
+     * - The `role` attribute on the `<dialog>`
+     * element.
+     */
+    role?: "dialog" | "alertdialog" | "none" | undefined;
+    /**
+     * - Whether to show the modal.
+     */
+    open?: boolean | undefined;
+    /**
+     * - Whether to show the backdrop.
+     */
+    showBackdrop?: boolean | undefined;
+    /**
+     * - Whether to close the modal when the backdrop (outside of
+     * the modal) is clicked.
+     */
+    lightDismiss?: boolean | undefined;
+    /**
+     * - Whether to close the modal when the Escape key is pressed.
+     */
+    escapeDismiss?: boolean | undefined;
+    /**
+     * - Whether to keep the content in the DOM tree when the modal is
+     * not displayed.
+     */
+    keepContent?: boolean | undefined;
+    /**
+     * - A reference to the `<dialog>` element.
+     */
+    dialog?: HTMLDialogElement | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Extra slot content.
+     */
+    extraContent?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Opening` event handler.
+     */
+    onOpening?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `Open` event handler.
+     */
+    onOpen?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `Ok` event handler.
+     */
+    onOk?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `Cancel` event handler.
+     */
+    onCancel?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `Closing` event handler.
+     */
+    onClosing?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `Close` event handler.
+     */
+    onClose?: ((event: CustomEvent) => void) | undefined;
+};
+export type DialogProps = {
+    /**
+     * - Text label displayed on the header. Required.
+     */
+    title?: string | undefined;
+    /**
+     * - The `role` attribute on the `<dialog>` element.
+     */
+    role?: "dialog" | "alertdialog" | undefined;
+    /**
+     * - Width of the dialog.
+     */
+    size?: "small" | "medium" | "large" | "x-large" | undefined;
+    /**
+     * - The `class` attribute on the `<dialog>` element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to open the dialog.
+     */
+    open?: boolean | undefined;
+    /**
+     * - Whether to show the Close button on the header.
+     */
+    showClose?: boolean | undefined;
+    /**
+     * - Whether to show the OK button on the footer.
+     */
+    showOk?: boolean | undefined;
+    /**
+     * - Whether to show the Cancel button on the footer.
+     */
+    showCancel?: boolean | undefined;
+    /**
+     * - Text label displayed on the OK button.
+     */
+    okLabel?: string | undefined;
+    /**
+     * - Whether to disable the OK button.
+     */
+    okDisabled?: boolean | undefined;
+    /**
+     * - Text label displayed on the Cancel button.
+     */
+    cancelLabel?: string | undefined;
+    /**
+     * - Whether to disable the Cancel button.
+     */
+    cancelDisabled?: boolean | undefined;
+    /**
+     * - Whether to close the modal when the backdrop (outside of the
+     * modal) is clicked.
+     */
+    lightDismiss?: boolean | undefined;
+    /**
+     * - Value entered on the textbox.
+     */
+    value?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Header slot content.
+     */
+    header?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Header extra slot content.
+     */
+    headerExtra?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Footer slot content.
+     */
+    footer?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Footer extra slot content.
+     */
+    footerExtra?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Close icon slot content.
+     */
+    closeIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Extra content slot content.
+     */
+    extraContent?: import("svelte").Snippet<[]> | undefined;
+};
+export type MenuItemProps = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - The `role` attribute on
+     * the `<button>` element.
+     */
+    role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
+    /**
+     * - Whether to hide the widget. An alias of the `aria-hidden`
+     * attribute.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Whether to check the widget. An alias of the `aria-checked`
+     * attribute.
+     */
+    checked?: boolean | undefined;
+    /**
+     * - Text label displayed on the item.
+     */
+    label?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Start icon slot content.
+     */
+    startIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - End icon slot content.
+     */
+    endIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Chevron icon slot content.
+     */
+    chevronIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Items slot content.
+     */
+    items?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `Select` event handler.
+     */
+    onSelect?: ((event: CustomEvent) => void) | undefined;
+};
+export type ComboboxProps = {
+    /**
+     * - 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;
+    /**
+     * - Selected option’s value.
+     */
+    value?: string | undefined;
+    /**
+     * - Whether to make the `combobox` editable.
+     */
+    editable?: boolean | undefined;
+    /**
+     * - Where to show the dropdown menu.
+     */
+    position?: PopupPosition | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Chevron icon slot content.
+     */
+    chevronIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+};
+export type TextInputProps = {
+    /**
+     * - Input value.
+     */
+    value?: string | undefined;
+    /**
+     * - Reference to the `<input>` element.
+     */
+    element?: HTMLInputElement | undefined;
+    /**
+     * - The `role` attribute on
+     * the `<input>` element.
+     */
+    role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
+    /**
+     * - Keyboard shortcuts. An alias of the
+     * `aria-keyshortcuts` attribute. Accepts the special `Accel` key, which will be replaced with
+     * `Control` or `Meta` depending on the user’s operating system.
+     */
+    keyShortcuts?: string | undefined;
+    /**
+     * - The `name` attribute on the `<input>` element.
+     */
+    name?: string | undefined;
+    /**
+     * - Whether to display `aria-label` over the `<input>`
+     * element if it’s empty, just like how the HTML `placeholder` attribute works.
+     */
+    showInlineLabel?: boolean | undefined;
+    /**
+     * - The
+     * `inputmode` attribute on the `<input>`.
+     */
+    inputmode?: "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url" | undefined;
+    /**
+     * - Make the text input container flexible.
+     */
+    flex?: 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;
+    /**
+     * - `aria-label` attribute.
+     */
+    "aria-label"?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+};
+export type KeyboardEventHandlers = {
+    /**
+     * - `keydown` event handler.
+     */
+    onkeydown?: ((event: KeyboardEvent) => void) | undefined;
+    /**
+     * - `keyup` event handler.
+     */
+    onkeyup?: ((event: KeyboardEvent) => void) | undefined;
+    /**
+     * - `keypress` event handler.
+     */
+    onkeypress?: ((event: KeyboardEvent) => void) | undefined;
+};
+export type MouseEventHandlers = {
+    /**
+     * - `mousedown` event handler.
+     */
+    onmousedown?: ((event: MouseEvent) => void) | undefined;
+    /**
+     * - `mouseup` event handler.
+     */
+    onmouseup?: ((event: MouseEvent) => void) | undefined;
+    /**
+     * - `click` event handler.
+     */
+    onclick?: ((event: MouseEvent) => void) | undefined;
+    /**
+     * - `dblclick` event handler.
+     */
+    ondblclick?: ((event: MouseEvent) => void) | undefined;
+};
+export type FocusEventHandlers = {
+    /**
+     * - `focus` event handler.
+     */
+    onfocus?: ((event: FocusEvent) => void) | undefined;
+    /**
+     * - `blur` event handler.
+     */
+    onblur?: ((event: FocusEvent) => void) | undefined;
+};
+export type DragEventHandlers = {
+    /**
+     * - `dragstart` event handler.
+     */
+    ondragstart?: ((event: DragEvent) => void) | undefined;
+    /**
+     * - `drag` event handler.
+     */
+    ondrag?: ((event: DragEvent) => void) | undefined;
+    /**
+     * - `dragenter` event handler.
+     */
+    ondragenter?: ((event: DragEvent) => void) | undefined;
+    /**
+     * - `dragleave` event handler.
+     */
+    ondragleave?: ((event: DragEvent) => void) | undefined;
+    /**
+     * - `dragover` event handler.
+     */
+    ondragover?: ((event: DragEvent) => void) | undefined;
+    /**
+     * - `drop` event handler.
+     */
+    ondrop?: ((event: DragEvent) => void) | undefined;
+    /**
+     * - `dragend` event handler.
+     */
+    ondragend?: ((event: DragEvent) => void) | undefined;
+};
+export type CommonEventHandlers = KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers;
+export type InputEventHandlers = {
+    /**
+     * - `input` event handler.
+     */
+    oninput?: ((event: Event) => void) | undefined;
+    /**
+     * - `beforeinput` event handler.
+     */
+    onbeforeinput?: ((event: Event) => void) | undefined;
+};
 export type PopupPosition = ("top-left" | "top-right" | "right-top" | "right-bottom" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom");
 export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 export type TextEditorBlockType = "paragraph" | "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" | "heading-6" | "bulleted-list" | "numbered-list" | "blockquote";