@sveltia/ui 0.6.1 → 0.6.3

package/package/components/button/button.svelte

@@ -7,6 +7,7 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { activateKeyShortcuts } from '../util/events';
   import Popup from '../util/popup.svelte';
 
   /**
@@ -71,6 +72,12 @@
    */
   export let popupPosition = 'bottom-left';
 
+  /**
+   * Keyboard shortcuts.
+   * @type {string}
+   */
+  export let keyShortcuts = '';
+
   /** @type {?Popup} */
   let popupComponent;
 </script>
@@ -95,6 +102,7 @@
   on:keydown
   on:keyup
   on:keypress
+  use:activateKeyShortcuts={keyShortcuts}
   bind:this={element}
 >
   <slot name="start-icon" />

package/package/components/button/button.svelte.d.ts

@@ -12,12 +12,13 @@ export default class Button extends SvelteComponent<{
     label?: string;
     type?: "reset" | "submit" | "button";
     disabled?: boolean;
+    size?: "small" | "medium" | "large";
     element?: HTMLButtonElement;
     role?: string;
-    size?: "small" | "medium" | "large";
     hidden?: boolean;
     pressed?: boolean | "true" | "false" | "mixed";
     popupPosition?: PopupPosition;
+    keyShortcuts?: string;
 }, {
     mouseenter: MouseEvent;
     mouseleave: MouseEvent;
@@ -67,6 +68,9 @@ export default class Button extends SvelteComponent<{
     /**accessor*/
     set popupPosition(arg: PopupPosition);
     get popupPosition(): PopupPosition;
+    /**accessor*/
+    set keyShortcuts(arg: string);
+    get keyShortcuts(): string;
 }
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
@@ -79,12 +83,13 @@ declare const __propDef: {
         label?: string;
         type?: ('button' | 'submit' | 'reset');
         disabled?: boolean;
+        size?: ('small' | 'medium' | 'large');
         element?: HTMLButtonElement | null;
         role?: string;
-        size?: ('small' | 'medium' | 'large');
         hidden?: boolean;
         pressed?: (boolean | 'false' | 'mixed' | 'true' | undefined);
         popupPosition?: PopupPosition;
+        keyShortcuts?: string;
     };
     events: {
         mouseenter: MouseEvent;

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

@@ -12,10 +12,10 @@ export default class Checkbox extends SvelteComponent<{
     class?: string;
     name?: string;
     label?: string;
-    disabled?: boolean;
-    value?: string;
     checked?: string | boolean;
+    disabled?: boolean;
     indeterminate?: boolean;
+    value?: string;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -34,10 +34,10 @@ declare const __propDef: {
         class?: string;
         name?: string;
         label?: string | null;
-        disabled?: boolean;
-        value?: string | null;
         checked?: (boolean | string | undefined);
+        disabled?: boolean;
         indeterminate?: boolean;
+        value?: string | null;
     };
     events: {
         change: CustomEvent<any>;

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

@@ -10,8 +10,8 @@ export default class Dialog extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     title?: string;
-    open?: boolean;
     size?: "small" | "medium" | "large" | "x-large";
+    open?: boolean;
     modal?: boolean;
     showCancel?: boolean;
     showOk?: boolean;
@@ -45,8 +45,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         title?: string;
-        open?: boolean;
         size?: ('small' | 'medium' | 'large' | 'x-large');
+        open?: boolean;
         modal?: boolean;
         showCancel?: boolean;
         showOk?: boolean;

package/package/components/drawer/drawer.svelte.d.ts

@@ -11,8 +11,8 @@ export default class Drawer extends SvelteComponent<{
     class?: string;
     title?: string;
     position?: "top" | "right" | "bottom" | "left";
-    open?: boolean;
     size?: "small" | "medium" | "large" | "x-large";
+    open?: boolean;
     showClose?: false | "inside" | "outside";
     closeOnBackdropClick?: boolean;
 }, {
@@ -39,8 +39,8 @@ declare const __propDef: {
         class?: string;
         title?: string;
         position?: ('top' | 'right' | 'bottom' | 'left');
-        open?: boolean;
         size?: ('small' | 'medium' | 'large' | 'x-large');
+        open?: boolean;
         showClose?: ('inside' | 'outside' | false);
         closeOnBackdropClick?: boolean;
     };

package/package/components/listbox/listbox.svelte.d.ts

@@ -10,8 +10,8 @@
 export default class Listbox extends SvelteComponent<{
     [x: string]: any;
     class?: string;
-    element?: HTMLElement;
     multiple?: boolean;
+    element?: HTMLElement;
 }, {
     click: MouseEvent;
     select: Event;
@@ -38,8 +38,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        element?: HTMLElement | null;
         multiple?: boolean;
+        element?: HTMLElement | null;
     };
     events: {
         click: MouseEvent;

package/package/components/menu/menu-item.svelte.d.ts

@@ -9,8 +9,8 @@ export default class MenuItem extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     label?: string;
-    role?: "menuitem" | "menuitemcheckbox" | "menuitemradio";
     checked?: boolean;
+    role?: "menuitem" | "menuitemcheckbox" | "menuitemradio";
     iconName?: string;
     iconLabel?: string;
 }, {
@@ -30,8 +30,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         label?: string;
-        role?: ('menuitem' | 'menuitemcheckbox' | 'menuitemradio');
         checked?: boolean;
+        role?: ('menuitem' | 'menuitemcheckbox' | 'menuitemradio');
         iconName?: string;
         iconLabel?: string;
     };

package/package/components/select/combobox.svelte.d.ts

@@ -12,8 +12,8 @@ export default class Combobox extends SvelteComponent<{
     label?: string;
     position?: PopupPosition;
     disabled?: boolean;
-    value?: string | number;
     readOnly?: boolean;
+    value?: string | number;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -36,8 +36,8 @@ declare const __propDef: {
         label?: string;
         position?: PopupPosition;
         disabled?: boolean;
-        value?: (string | number | undefined);
         readOnly?: boolean;
+        value?: (string | number | undefined);
     };
     events: {
         change: CustomEvent<any>;

package/package/components/slider/slider.svelte.d.ts

@@ -12,13 +12,13 @@
 export default class Slider extends SvelteComponent<{
     [x: string]: any;
     class?: string;
+    max?: number;
+    min?: number;
+    step?: number;
     value?: number;
     sliderLabel?: string;
     values?: [number, number];
     sliderLabels?: [string, string];
-    min?: number;
-    max?: number;
-    step?: number;
     optionLabels?: string[] | number[];
 }, {
     click: MouseEvent;
@@ -35,13 +35,13 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
+        max?: number;
+        min?: number;
+        step?: number;
         value?: number;
         sliderLabel?: string;
         values?: [number, number];
         sliderLabels?: [string, string];
-        min?: number;
-        max?: number;
-        step?: number;
         optionLabels?: (string[] | number[]);
     };
     events: {

package/package/components/switch/switch.svelte.d.ts

@@ -10,8 +10,8 @@ export default class Switch extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     label?: string;
-    disabled?: boolean;
     checked?: boolean;
+    disabled?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -27,8 +27,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         label?: string;
-        disabled?: boolean;
         checked?: boolean;
+        disabled?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -10,10 +10,10 @@ export default class NumberInput extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     disabled?: boolean;
-    value?: string;
-    min?: any;
     max?: any;
+    min?: any;
     step?: number;
+    value?: string;
 }, {
     keypress: KeyboardEvent;
     input: Event;
@@ -30,10 +30,10 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         disabled?: boolean;
-        value?: string | null;
-        min?: any;
         max?: any;
+        min?: any;
         step?: number;
+        value?: string | null;
     };
     events: {
         keypress: KeyboardEvent;

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

@@ -1,14 +1,13 @@
 <!--
   @component
-  A multi-line text field. The equivalent of the HTML `<textarea>` element.
+  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/
 -->
 <svelte:options accessors={true} />
 
 <script>
-  import { onMount, tick } from 'svelte';
-
   /**
    * CSS class name on the button.
    * @type {string}
@@ -26,80 +25,32 @@
   export let value = undefined;
 
   export let autoResize = false;
-
-  /** @type {string?} */
-  let height;
-  /** @type {HTMLElement?} */
-  let outer = undefined;
-  let resizing = false;
-  let lastWidth = 0;
-
-  /**
-   * Resize the `<textarea>` based on the filled text content.
-   */
-  const resizeTextarea = async () => {
-    resizing = true;
-    height = 'auto';
-
-    await tick();
-
-    height = value && element?.scrollHeight ? `${element.scrollHeight + 4}px` : undefined;
-    resizing = false;
-  };
-
-  /**
-   * Call {@link resizeTextarea} whenever the text content is updated.
-   */
-  $: {
-    if (autoResize) {
-      // @ts-ignore
-      resizeTextarea(value);
-    }
-  }
-
-  /**
-   * Call {@link resizeTextarea} whenever it’s horizontally resized.
-   */
-  onMount(() => {
-    const observer = new ResizeObserver(([{ contentRect }]) => {
-      const { width } = contentRect;
-
-      if (autoResize && lastWidth !== width) {
-        lastWidth = width;
-        resizeTextarea();
-      }
-    });
-
-    observer.observe(outer);
-
-    // onUnmount
-    return () => {
-      observer.disconnect();
-    };
-  });
 </script>
 
-<div class="sui text-area {className}" bind:this={outer}>
+<div class="sui text-area {className}">
   <textarea
     name={name || undefined}
     {...$$restProps}
-    style:height
-    class:resizing
+    class:auto-resize={autoResize}
     bind:this={element}
     bind:value
     on:click
     on:input
     on:keypress
   />
+  {#if autoResize}
+    <div class="clone" aria-hidden="true">{value}</div>
+  {/if}
 </div>
 
 <style>.text-area {
+  display: inline-grid;
   width: 100%;
-  display: inline-flex;
-  align-items: center;
 }
 
-textarea {
+textarea,
+.clone {
+  grid-area: 1/1/2/2;
   display: block;
   margin: 0;
   border-width: 1px;
@@ -113,17 +64,32 @@ textarea {
   font-family: var(--sui-textbox-font-family);
   font-size: var(--sui-textbox-font-size);
   line-height: var(--sui-textbox-multiline-line-height);
-  resize: vertical;
   transition: all 200ms;
 }
-textarea.resizing {
+textarea.resizing,
+.clone.resizing {
   transition-duration: 0ms;
 }
-textarea:focus {
+textarea:focus,
+.clone:focus {
   border-color: var(--sui-primary-accent-color);
 }
-textarea:disabled {
+textarea:disabled,
+.clone:disabled {
   background-color: var(--sui-disabled-background-color);
   opacity: 0.4;
   cursor: default;
+}
+
+textarea {
+  resize: vertical;
+}
+textarea.auto-resize {
+  overflow: hidden;
+  resize: none;
+}
+
+.clone {
+  visibility: hidden;
+  white-space: pre-wrap;
 }</style>

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

@@ -2,9 +2,10 @@
 /** @typedef {typeof __propDef.events}  TextAreaEvents */
 /** @typedef {typeof __propDef.slots}  TextAreaSlots */
 /**
- * A multi-line text field. The equivalent of the HTML `<textarea>` element.
+ * 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;

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

@@ -7,6 +7,7 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { activateKeyShortcuts } from '../util/events';
   import { getRandomId } from '../util/util';
 
   /**
@@ -35,6 +36,12 @@
   /** @type {(string | number | undefined)} */
   export let value = undefined;
 
+  /**
+   * Keyboard shortcuts.
+   * @type {string}
+   */
+  export let keyShortcuts = '';
+
   const id = getRandomId('input');
   let ariaLabel = '';
 
@@ -66,6 +73,7 @@
     on:keyup
     on:keypress
     on:change
+    use:activateKeyShortcuts={keyShortcuts}
   />
   {#if ariaLabel}
     <span id="{id}-label" class="label" class:hidden={!!value}>

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

@@ -11,10 +11,11 @@ export default class TextInput extends SvelteComponent<{
     class?: string;
     name?: string;
     disabled?: boolean;
+    readOnly?: boolean;
     value?: string | number;
     element?: HTMLInputElement;
     role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
-    readOnly?: boolean;
+    keyShortcuts?: string;
 }, {
     input: Event;
     keydown: KeyboardEvent;
@@ -45,6 +46,9 @@ export default class TextInput extends SvelteComponent<{
     /**accessor*/
     set value(arg: string | number);
     get value(): string | number;
+    /**accessor*/
+    set keyShortcuts(arg: string);
+    get keyShortcuts(): string;
 }
 export type TextInputProps = typeof __propDef.props;
 export type TextInputEvents = typeof __propDef.events;
@@ -56,10 +60,11 @@ declare const __propDef: {
         class?: string;
         name?: string;
         disabled?: boolean;
+        readOnly?: boolean;
         value?: (string | number | undefined);
         element?: HTMLInputElement | null;
         role?: ('textbox' | 'searchbox' | 'combobox' | 'spinbutton');
-        readOnly?: boolean;
+        keyShortcuts?: string;
     };
     events: {
         input: Event;

package/package/components/util/events.d.ts

@@ -0,0 +1,3 @@
+export function isMac(): boolean;
+export function matchShortcuts(event: KeyboardEvent, shortcuts: string): boolean;
+export function activateKeyShortcuts(element: (HTMLInputElement | HTMLButtonElement), shortcuts: string): import('svelte/action').ActionReturn;

package/package/components/util/events.js

@@ -0,0 +1,110 @@
+/**
+ * Check if the user agent is macOS.
+ * @returns {boolean} Result.
+ */
+export const isMac = () =>
+  /** @type {any} */ (navigator).userAgentData?.platform === 'macOS' ||
+  navigator.platform.startsWith('Mac');
+
+/**
+ * Whether the event matches the given keyboard shortcuts.
+ * @param {KeyboardEvent} event `keydown` or `keypress` event.
+ * @param {string} shortcuts Keyboard shortcuts like `A` or `Ctrl+S`.
+ * @returns {boolean} Result.
+ * @see https://w3c.github.io/aria/#aria-keyshortcuts
+ */
+export const matchShortcuts = (event, shortcuts) => {
+  const { ctrlKey, metaKey, altKey, shiftKey, key } = event;
+
+  return shortcuts.split(/\s+/).some((shortcut) => {
+    const keys = shortcut.split('+');
+
+    // Check if required modifier keys are pressed
+    if (
+      (keys.includes('Ctrl') && !ctrlKey) ||
+      (keys.includes('Meta') && !metaKey) ||
+      (keys.includes('Alt') && !altKey) ||
+      (keys.includes('Shift') && !shiftKey)
+    ) {
+      return false;
+    }
+
+    // Check if unnecessary modifier keys are not pressed
+    if (
+      (!keys.includes('Ctrl') && ctrlKey) ||
+      (!keys.includes('Meta') && metaKey) ||
+      (!keys.includes('Alt') && altKey) ||
+      (!keys.includes('Shift') && shiftKey)
+    ) {
+      return false;
+    }
+
+    return keys
+      .filter((_key) => !['Ctrl', 'Meta', 'Alt', 'Shift'].includes(_key))
+      .every((_key) => _key.toUpperCase() === key.toUpperCase());
+  });
+};
+
+/**
+ * Activate keyboard shortcuts.
+ * @param {(HTMLInputElement | HTMLButtonElement)} element Element.
+ * @param {string} shortcuts Keyboard shortcuts like `A` or `Accel+S` to focus and click the text
+ * field or button. Multiple shortcuts can be defined space-separated. The `Accel` modifier will be
+ * replaced with `Ctrl` on Windows/Linux and `Command` on macOS.
+ * @returns {import('svelte/action').ActionReturn} Actions.
+ */
+export const activateKeyShortcuts = (element, shortcuts) => {
+  let platformKeyShortcuts;
+
+  /**
+   * Handle the event.
+   * @param {KeyboardEvent} event `keydown` event.
+   */
+  const handler = (event) => {
+    if (!!element.offsetParent && matchShortcuts(event, platformKeyShortcuts)) {
+      event.preventDefault();
+
+      if (!element.disabled) {
+        element.focus();
+        element.click();
+      }
+    }
+  };
+
+  /**
+   * Remove the event listener.
+   */
+  const removeListener = () => {
+    window.removeEventListener('keydown', handler);
+    element.removeAttribute('aria-keyshortcuts');
+  };
+
+  /**
+   * Add the event listener.
+   */
+  const addListener = () => {
+    platformKeyShortcuts = shortcuts
+      ? shortcuts.replace(/\bAccel\b/g, isMac() ? 'Meta' : 'Ctrl')
+      : undefined;
+
+    if (platformKeyShortcuts) {
+      window.addEventListener('keydown', handler);
+      element.setAttribute('aria-keyshortcuts', platformKeyShortcuts);
+    }
+  };
+
+  addListener();
+
+  return {
+    // eslint-disable-next-line jsdoc/require-jsdoc, no-shadow, no-unused-vars
+    update(shortcuts) {
+      removeListener();
+      addListener();
+    },
+
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    destroy() {
+      removeListener();
+    },
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -291,6 +291,10 @@
       "svelte": "./package/components/util/app-shell.svelte",
       "default": "./package/components/util/app-shell.svelte"
     },
+    "./components/util/events": {
+      "types": "./package/components/util/events.d.ts",
+      "default": "./package/components/util/events.js"
+    },
     "./components/util/group": {
       "types": "./package/components/util/group.d.ts",
       "default": "./package/components/util/group.js"
@@ -485,6 +489,9 @@
       "components/util/app-shell.svelte": [
         "./package/components/util/app-shell.svelte.d.ts"
       ],
+      "components/util/events": [
+        "./package/components/util/events.d.ts"
+      ],
       "components/util/group": [
         "./package/components/util/group.d.ts"
       ],