@sveltia/ui 0.2.2 → 0.2.4

package/package/components/core/icon.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 

package/package/components/core/menu-button.svelte

@@ -8,7 +8,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
@@ -42,7 +42,7 @@
       ];
 
       if (members.length) {
-        (key === 'ArrowUp' ? members.pop() : members.shift()).focus();
+        /** @type {HTMLElement} */ (key === 'ArrowUp' ? members.pop() : members.shift()).focus();
       }
     }
   }}

package/package/components/core/menu-button.svelte.d.ts

@@ -5,7 +5,7 @@
 export default class MenuButton extends SvelteComponentTyped<{
     [x: string]: any;
     class?: string;
-    popupPosition?: any;
+    popupPosition?: PopupPosition;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -27,7 +27,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        popupPosition?: any;
+        popupPosition?: PopupPosition;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/core/menu-item-checkbox.svelte

@@ -7,7 +7,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 

package/package/components/core/menu-item-radio.svelte

@@ -7,7 +7,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 

package/package/components/core/number-input.svelte

@@ -10,13 +10,13 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {(String|undefined)} */
+  /** @type {string?} */
   export let value = undefined;
 
   export let disabled = false;
@@ -26,6 +26,9 @@
 
   let component;
 
+  /**
+   *
+   */
   const decrease = () => {
     if (typeof min === 'number' && Number(value || 0) === min) {
       return;
@@ -34,6 +37,9 @@
     value = String(Number(value || 0) - step);
   };
 
+  /**
+   *
+   */
   const increase = () => {
     if (typeof min === 'number' && Number(value || 0) === max) {
       return;

package/package/components/core/number-input.svelte.d.ts

@@ -26,7 +26,7 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         disabled?: boolean;
-        value?: (string | undefined);
+        value?: string | null;
         min?: any;
         max?: any;
         step?: number;

package/package/components/core/option.svelte

@@ -8,7 +8,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 

package/package/components/core/password-input.svelte

@@ -10,13 +10,13 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {(String|undefined)} */
+  /** @type {string?} */
   export let value = undefined;
 
   /**

package/package/components/core/password-input.svelte.d.ts

@@ -22,7 +22,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        value?: (string | undefined);
+        value?: string | null;
     };
     events: {
         input: Event;

package/package/components/core/radio-button.svelte

@@ -10,19 +10,19 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {String} */
+  /** @type {string} */
   export let name = '';
 
-  /** @type {(String|undefined)} */
+  /** @type {string?} */
   export let value = undefined;
 
-  /** @type {Boolean} */
+  /** @type {boolean} */
   export let selected = false;
 
   const id = getRandomId('checkbox');
@@ -38,7 +38,7 @@
 <span
   class="sui radio-button {className}"
   on:click={(event) => {
-    if (!event.target.matches('button')) {
+    if (!(/** @type {HTMLElement} */ (event.target).matches('button'))) {
       buttonComponent.element.click();
     }
   }}

package/package/components/core/radio-button.svelte.d.ts

@@ -24,7 +24,7 @@ declare const __propDef: {
     props: {
         class?: string;
         name?: string;
-        value?: (string | undefined);
+        value?: string | null;
         selected?: boolean;
     };
     events: {

package/package/components/core/row-group.svelte

@@ -1,9 +1,8 @@
 <script>
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
-  // eslint-disable-next-line padding-line-between-statements
   let className = 'tbody';
 
   export { className as class };

package/package/components/core/row.svelte

@@ -1,9 +1,8 @@
 <script>
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
-  // eslint-disable-next-line padding-line-between-statements
   let className = '';
 
   export { className as class };

package/package/components/core/search-bar.svelte

@@ -12,13 +12,13 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {_SvelteComponent} */
+  /** @type {import('svelte').SvelteComponent} */
   let input;
 
   export let value = '';

package/package/components/core/select-button.svelte

@@ -9,7 +9,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 

package/package/components/core/separator.svelte

@@ -3,11 +3,12 @@
   @see https://w3c.github.io/aria/#separator
 -->
 <script>
+  /** @type {('horizontal' | 'vertical')} */
   export let orientation = 'horizontal';
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 

package/package/components/core/separator.svelte.d.ts

@@ -4,7 +4,7 @@
 /** @see https://w3c.github.io/aria/#separator */
 export default class Separator extends SvelteComponentTyped<{
     class?: string;
-    orientation?: string;
+    orientation?: "horizontal" | "vertical";
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -16,7 +16,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;
-        orientation?: string;
+        orientation?: ('horizontal' | 'vertical');
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/core/slider.svelte

@@ -10,7 +10,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
@@ -28,7 +28,7 @@
   $: multiThumb = !!values;
 
   const dispatch = createEventDispatcher();
-  /** @type {(HTMLElement|undefined)} */
+  /** @type {HTMLElement?} */
   let base = undefined;
   let barWidth = 0;
   let positionList = [];
@@ -39,6 +39,10 @@
   let dragging = false;
   let targetValueIndex = 0;
 
+  /**
+   *
+   * @param {number} diff
+   */
   const dragSlider = (diff) => {
     if (diff >= 0 && diff <= barWidth) {
       const fromIndex = positionList.findLastIndex((s) => s <= diff);
@@ -70,6 +74,11 @@
     }
   };
 
+  /**
+   *
+   * @param {KeyboardEvent} event `keydown` event.
+   * @param {number} [valueIndex]
+   */
   const onKeyDown = (event, valueIndex = 0) => {
     const { key, shiftKey, altKey, ctrlKey, metaKey } = event;
 
@@ -118,6 +127,11 @@
     }
   };
 
+  /**
+   *
+   * @param {MouseEvent} event `mousedown` event.
+   * @param {number} [valueIndex]
+   */
   const onMouseDown = (event, valueIndex = 0) => {
     const { clientX, screenX } = event;
 
@@ -127,15 +141,23 @@
     targetValueIndex = valueIndex;
   };
 
+  /**
+   *
+   * @param {MouseEvent} event `mousemove` event.
+   */
   const onMouseMove = (event) => {
     if (dragging) {
       dragSlider(startX + (event.screenX - startScreenX));
     }
   };
 
+  /**
+   *
+   * @param {MouseEvent} event `click` event.
+   */
   const onClick = (event) => {
     if (!multiThumb && !dragging) {
-      dragSlider(event.layerX);
+      dragSlider(/** @type {any} */ (event).layerX);
     }
 
     if (dragging) {

package/package/components/core/spacer.svelte

@@ -1,13 +1,13 @@
 <script>
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {Boolean} */
+  /** @type {boolean} */
   export let flex = false;
 </script>
 

package/package/components/core/switch.svelte

@@ -6,7 +6,7 @@
 <script>
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 

package/package/components/core/tab-panel.svelte

@@ -6,9 +6,8 @@
 <script>
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
-  // eslint-disable-next-line padding-line-between-statements
   let className = '';
 
   export { className as class };

package/package/components/core/tab.svelte

@@ -8,7 +8,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 

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

@@ -5,56 +5,90 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { onMount, tick } from 'svelte';
+
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
-  // eslint-disable-next-line padding-line-between-statements
   let className = '';
 
   export { className as class };
 
-  /** @type {(HTMLTextAreaElement|undefined)} */
+  /** @type {HTMLTextAreaElement?} */
   export let element = undefined;
 
   export let name = '';
 
-  /** @type {(String|undefined)} */
+  /** @type {string?} */
   export let value = undefined;
 
   export let autoResize = false;
 
-  /** @type {(String|undefined)} */
+  /** @type {string?} */
   let height;
+  /** @type {HTMLElement?} */
+  let outer = undefined;
+  let resizing = false;
+  let lastWidth = 0;
 
-  const resizeTextarea = () => {
+  /**
+   * Resize the `<textarea>` based on the filled text content.
+   */
+  const resizeTextarea = async () => {
+    resizing = true;
     height = 'auto';
 
-    window.requestAnimationFrame(() => {
-      height = value && element?.scrollHeight ? `${element.scrollHeight + 4}px` : undefined;
-    });
+    await tick();
+
+    height = value && element?.scrollHeight ? `${element.scrollHeight + 4}px` : undefined;
+    resizing = false;
   };
 
+  /**
+   * Call {@link resizeTextarea} whenever the text content is updated.
+   */
   $: {
-    if (value && autoResize) {
-      resizeTextarea();
+    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}">
+<div class="sui text-area {className}" bind:this={outer}>
   <textarea
     name={name || undefined}
     {...$$restProps}
     style:height
+    class:resizing
     bind:this={element}
+    bind:value
     on:click
     on:input
     on:keypress
-    on:input={() => {
-      value = element.value;
-    }}>{value}</textarea
-  >
+  />
 </div>
 
 <style>.text-area {
@@ -80,6 +114,9 @@ textarea {
   resize: vertical;
   transition: all 200ms;
 }
+textarea.resizing {
+  transition-duration: 0ms;
+}
 textarea:focus {
   border-color: var(--primary-accent-color);
 }

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

@@ -40,9 +40,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        element?: (HTMLTextAreaElement | undefined);
+        element?: HTMLTextAreaElement | null;
         name?: string;
-        value?: (string | undefined);
+        value?: string | null;
         autoResize?: boolean;
     };
     events: {

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

@@ -9,13 +9,13 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {(HTMLInputElement|undefined)} */
+  /** @type {HTMLInputElement?} */
   export let element = undefined;
 
   /** @type {('textbox'|'searchbox'|'combobox'|'spinbutton')} */
@@ -30,7 +30,7 @@
 
   export let name = '';
 
-  /** @type {(String|undefined)} */
+  /** @type {(string | number | undefined)} */
   export let value = undefined;
 
   const id = getRandomId('input');
@@ -52,7 +52,7 @@
     {role}
     name={name || undefined}
     tabindex={disabled ? -1 : 0}
-    {readOnly}
+    readOnly={readOnly ? true : undefined}
     aria-readonly={readOnly ? true : undefined}
     {disabled}
     aria-disabled={disabled ? true : undefined}

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

@@ -9,7 +9,7 @@ export default class TextInput extends SvelteComponentTyped<{
     role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
     disabled?: boolean;
     name?: string;
-    value?: string;
+    value?: string | number;
     readOnly?: boolean;
 }, {
     input: Event;
@@ -39,8 +39,8 @@ export default class TextInput extends SvelteComponentTyped<{
     set name(arg: string);
     get name(): string;
     /**accessor*/
-    set value(arg: string);
-    get value(): string;
+    set value(arg: string | number);
+    get value(): string | number;
 }
 export type TextInputProps = typeof __propDef.props;
 export type TextInputEvents = typeof __propDef.events;
@@ -50,11 +50,11 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        element?: (HTMLInputElement | undefined);
+        element?: HTMLInputElement | null;
         role?: ('textbox' | 'searchbox' | 'combobox' | 'spinbutton');
         disabled?: boolean;
         name?: string;
-        value?: (string | undefined);
+        value?: (string | number | undefined);
         readOnly?: boolean;
     };
     events: {

package/package/components/core/toolbar.svelte

@@ -6,9 +6,8 @@
 <script>
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
-  // eslint-disable-next-line padding-line-between-statements
   let className = '';
 
   export { className as class };

package/package/components/editor/markdown.svelte

@@ -6,7 +6,7 @@
   import TextArea from '../core/text-area.svelte';
   import Toolbar from '../core/toolbar.svelte';
 
-  /** @type {(String|undefined)} */
+  /** @type {string?} */
   export let value = undefined;
 
   export let disabled = false;

package/package/components/editor/markdown.svelte.d.ts

@@ -15,7 +15,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         disabled?: boolean;
-        value?: (string | undefined);
+        value?: string | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/helpers/group.d.ts

@@ -1,37 +1 @@
-export function activateGroup(...args: any[]): Promise<Group>;
-/**
- * Implement keyboard and mouse interactions for a grouping composite widget.
- */
-declare class Group {
-    /**
-     *
-     * @param {HTMLElement} parent
-     * @todo Check for added elements probably with `MutationObserver`.
-     */
-    constructor(parent: HTMLElement);
-    parent: HTMLElement;
-    role: string;
-    grid: boolean;
-    multi: boolean;
-    id: string;
-    parentGroupSelector: string;
-    orientation: any;
-    childSelectedAttr: any;
-    /** @type {string} */
-    get selector(): string;
-    /** @type {HTMLElement[]} */
-    get allMembers(): HTMLElement[];
-    /** @type {HTMLElement[]} */
-    get activeMembers(): HTMLElement[];
-    /**
-     *
-     * @param {KeyboardEvent}
-     */
-    onClick(event: any): void;
-    /**
-     *
-     * @param {KeyboardEvent}
-     */
-    onKeyDown(event: any): void;
-}
-export {};
+export function activateGroup(...args: any[]): void;