@sveltia/ui 0.2.3 → 0.2.4

package/package/components/helpers/group.js

@@ -1,6 +1,3 @@
-/* eslint-disable no-plusplus */
-/* eslint-disable no-param-reassign */
-
 import { sleep } from '../util/misc';
 import { getRandomId } from './util';
 
@@ -43,7 +40,7 @@ const config = {
 class Group {
   /**
    *
-   * @param {HTMLElement} parent
+   * @param {HTMLElement} parent Parent element.
    * @todo Check for added elements probably with `MutationObserver`.
    */
   constructor(parent) {
@@ -73,9 +70,9 @@ class Group {
 
       element.id ||= `${this.id}-item-${index}`;
       element.tabIndex ||= isSelected || (!hasSelected && index === 0) ? 0 : -1;
-      element.setAttribute(this.childSelectedAttr, isSelected);
+      element.setAttribute(this.childSelectedAttr, String(isSelected));
       controls?.setAttribute('aria-labelledby', element.id);
-      controls?.setAttribute('aria-hidden', !isSelected);
+      controls?.setAttribute('aria-hidden', String(!isSelected));
     });
 
     parent.addEventListener('click', (event) => {
@@ -96,6 +93,7 @@ class Group {
 
   /** @type {HTMLElement[]} */
   get allMembers() {
+    // @ts-ignore
     return [...this.parent.querySelectorAll(this.selector)];
   }
 
@@ -106,10 +104,11 @@ class Group {
 
   /**
    *
-   * @param {KeyboardEvent}
+   * @param {MouseEvent} event `click` event.
    */
   onClick(event) {
-    const { target } = event;
+    // eslint-disable-next-line prefer-destructuring
+    const target = /** @type {HTMLButtonElement} */ (event.target);
 
     if (!target.matches(this.selector)) {
       return;
@@ -129,13 +128,13 @@ class Group {
           (element.matches('[role="row"], [role="option"], [role="tab"]') && !this.multi)) &&
         element.closest(this.parentGroupSelector) === targetParentGroup
       ) {
-        element.setAttribute(this.childSelectedAttr, isTarget);
+        element.setAttribute(this.childSelectedAttr, String(isTarget));
       }
 
       const controls = element.getAttribute('aria-controls');
 
       if (controls) {
-        document.getElementById(controls)?.setAttribute('aria-hidden', !isTarget);
+        document.getElementById(controls)?.setAttribute('aria-hidden', String(!isTarget));
       }
     });
 
@@ -151,10 +150,12 @@ class Group {
 
   /**
    *
-   * @param {KeyboardEvent}
+   * @param {KeyboardEvent} event `keydown` event.
    */
   onKeyDown(event) {
-    const { target, key, ctrlKey, metaKey, shiftKey, altKey } = event;
+    // eslint-disable-next-line prefer-destructuring
+    const target = /** @type {HTMLElement} */ (event.target);
+    const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
 
     if (target.matches(this.selector) && !ctrlKey && !metaKey && !shiftKey && !altKey) {
       if ([' ', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
@@ -236,11 +237,15 @@ class Group {
 }
 
 /**
- *
+ * Activate a new group.
+ * @param {...any} args Arguments.
  */
-export const activateGroup = async (...args) => {
-  // Wait a bit before the relevant components, including the `aria-controls` target are mounted
-  await sleep(100);
-
-  return new Group(...args);
+export const activateGroup = (...args) => {
+  (async () => {
+    // Wait a bit before the relevant components, including the `aria-controls` target are mounted
+    await sleep(100);
+
+    // @ts-ignore
+    return new Group(...args);
+  })();
 };

package/package/components/helpers/popup.d.ts

@@ -1,7 +1,6 @@
 export function activatePopup(...args: any[]): Popup;
-export type PopupPosition = ('top-left' | 'top-right' | 'right-top' | 'right-bottom' | 'bottom-left' | 'bottom-right' | 'left-top' | 'left-bottom');
 /**
- * @typedef {('top-left'|'top-right'|'right-top'|'right-bottom'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom')} PopupPosition
+ *
  */
 declare class Popup {
     /**

package/package/components/helpers/popup.js

@@ -1,13 +1,11 @@
-/* eslint-disable max-len */
 /* eslint-disable no-nested-ternary */
 
 import { get, writable } from 'svelte/store';
 import { getRandomId } from './util';
 
 /**
- * @typedef {('top-left'|'top-right'|'right-top'|'right-bottom'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom')} PopupPosition
+ *
  */
-
 class Popup {
   open = writable(false);
 
@@ -30,7 +28,7 @@ class Popup {
       if (position.startsWith('bottom-')) {
         if (contentHeight > bottomMargin) {
           if (topMargin > bottomMargin) {
-            position = position.replace('bottom-', 'top-');
+            position = /** @type {PopupPosition} */ (position.replace('bottom-', 'top-'));
             height = topMargin;
           } else {
             height = bottomMargin;
@@ -62,7 +60,7 @@ class Popup {
         ? `${Math.round(intersectionRect.left)}px`
         : 'auto';
 
-      const anchorPopup = this.anchorElement.closest('.popup');
+      const anchorPopup = /** @type {HTMLElement} */ (this.anchorElement.closest('.popup'));
 
       const style = {
         inset: [top, right, bottom, left].join(' '),
@@ -139,7 +137,7 @@ class Popup {
         this.anchorElement.focus();
       }
 
-      this.anchorElement.setAttribute('aria-expanded', open);
+      this.anchorElement.setAttribute('aria-expanded', String(open));
     });
   }
 
@@ -160,6 +158,9 @@ class Popup {
 }
 
 /**
- *
+ * Activate a new popup.
+ * @param {...any} args Arguments.
+ * @returns {Popup} New popup.
  */
+// @ts-ignore
 export const activatePopup = (...args) => new Popup(...args);

package/package/components/helpers/util.js

@@ -1,3 +1,9 @@
+/**
+ * Get a random ID that can be used for elements.
+ * @param {string} [prefix] Prefix to be added to the ID, e.g. `popup`.
+ * @param {number} [length] Number of characters to be used in the ID.
+ * @returns {string} Generated ID.
+ */
 export const getRandomId = (prefix = '', length = 7) =>
   [
     prefix,

package/package/components/util/app-shell.svelte

@@ -11,6 +11,9 @@
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     const { dataset } = document.documentElement;
 
+    /**
+     *
+     */
     const applyTheme = () => {
       if (dataset.autoTheming !== 'false') {
         dataset.theme = mediaQuery.matches ? 'dark' : 'light';
@@ -19,6 +22,9 @@
 
     applyTheme();
 
+    /**
+     *
+     */
     mediaQuery.onchange = () => {
       applyTheme();
     };
@@ -31,7 +37,7 @@
   on:drop|preventDefault
   on:contextmenu={(event) => {
     // Disable the native context menu
-    if (!event.target?.matches('input[type="text"], textarea')) {
+    if (!(/** @type {HTMLElement} */ (event.target)?.matches('input[type="text"], textarea'))) {
       event.preventDefault();
     }
   }}

package/package/components/util/misc.js

@@ -1,6 +1,5 @@
 /**
  * Check if the given input is a simple object.
- *
  * @param {*} input Input, probably an object.
  * @returns {boolean} Result.
  */
@@ -10,7 +9,6 @@ export const isObject = (input) =>
 /**
  * Return a simple `Promise` to resolve in the given time, making it easier to wait for a bit in the
  * code, particularly while making sequential HTTP requests.
- *
  * @param {number} [ms] Milliseconds to wait.
  * @returns {Promise} Nothing.
  */

package/package/components/util/popup.svelte

@@ -9,18 +9,18 @@
   import { writable } from 'svelte/store';
   import { activatePopup } from '../helpers/popup';
 
-  /** @type {(HTMLElement|undefined)} */
+  /** @type {HTMLElement?} */
   export let anchor = undefined;
 
   /**
    * Reference to the popup element.
-   * @type {(HTMLElement|undefined)}
+   * @type {HTMLDialogElement?}
    */
   export let dialog = undefined;
 
   /**
    * Reference to the content element.
-   * @type {(HTMLElement|undefined)}
+   * @type {HTMLElement?}
    */
   export let content = undefined;
 
@@ -50,6 +50,9 @@
     }
   }
 
+  /**
+   *
+   */
   const openDialog = () => {
     (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
     showContent = true;
@@ -59,11 +62,14 @@
       showDialog = true;
 
       window.requestAnimationFrame(() => {
-        (dialog.querySelector('[tabindex]') || dialog).focus();
+        /** @type {HTMLElement} */ (dialog.querySelector('[tabindex]') || dialog).focus();
       });
     });
   };
 
+  /**
+   *
+   */
   const closeDialog = async () => {
     showDialog = false;
 
@@ -76,6 +82,9 @@
     dialog?.remove();
   };
 
+  /**
+   *
+   */
   const toggleDialog = () => {
     if (dialog) {
       if ($open) {
@@ -87,6 +96,7 @@
   };
 
   // Call the function only when the `$open` prop is changed
+  // @ts-ignore
   $: toggleDialog($open);
 
   onMount(() => {

package/package/components/util/popup.svelte.d.ts

@@ -4,8 +4,8 @@
 /** Generic popup helper. */
 export default class Popup extends SvelteComponentTyped<{
     [x: string]: any;
-    dialog?: HTMLElement;
-    position?: any;
+    dialog?: HTMLDialogElement;
+    position?: PopupPosition;
     anchor?: HTMLElement;
     content?: HTMLElement;
     open?: import("svelte/store").Writable<boolean>;
@@ -18,14 +18,14 @@ export default class Popup extends SvelteComponentTyped<{
     set anchor(arg: HTMLElement);
     get anchor(): HTMLElement;
     /**accessor*/
-    set dialog(arg: HTMLElement);
-    get dialog(): HTMLElement;
+    set dialog(arg: HTMLDialogElement);
+    get dialog(): HTMLDialogElement;
     /**accessor*/
     set content(arg: HTMLElement);
     get content(): HTMLElement;
     /**accessor*/
-    set position(arg: any);
-    get position(): any;
+    set position(arg: PopupPosition);
+    get position(): PopupPosition;
     /**accessor*/
     set open(arg: import("svelte/store").Writable<boolean>);
     get open(): import("svelte/store").Writable<boolean>;
@@ -37,10 +37,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        dialog?: (HTMLElement | undefined);
-        position?: any;
-        anchor?: (HTMLElement | undefined);
-        content?: (HTMLElement | undefined);
+        dialog?: HTMLDialogElement | null;
+        position?: PopupPosition;
+        anchor?: HTMLElement | null;
+        content?: HTMLElement | null;
         open?: import("svelte/store").Writable<boolean>;
     };
     events: {

package/package/components/util/portal.svelte

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

package/package/index.d.ts

@@ -1,4 +1,7 @@
-export function initLocales({ fallbackLocale, initialLocale }?: object): void;
+export function initLocales({ fallbackLocale, initialLocale }?: {
+    fallbackLocale?: string;
+    initialLocale?: string;
+}): void;
 export { default as Calendar } from "./components/composite/calendar.svelte";
 export { default as CheckboxGroup } from "./components/composite/checkbox-group.svelte";
 export { default as Combobox } from "./components/composite/combobox.svelte";

package/package/index.js

@@ -3,10 +3,13 @@ import { addMessages, init } from 'svelte-i18n';
 /**
  * Load strings and initialize the locales.
  * @param {object} [init] Initialize options.
+ * @param {string} [init.fallbackLocale] Fallback locale.
+ * @param {string} [init.initialLocale] Initial locale.
  * @see https://github.com/kaisermann/svelte-i18n/blob/main/docs/Getting%20Started.md
  * @see https://vitejs.dev/guide/features.html#glob-import
  */
 export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}) => {
+  /** @type {{ [key: string]: { strings: object }}} */
   const modules = import.meta.glob('./locales/*.js', { eager: true });
 
   Object.entries(modules).forEach(([path, { strings }]) => {
@@ -24,45 +27,87 @@ export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}
 
 initLocales();
 
+// @ts-ignore
 export { default as Calendar } from './components/composite/calendar.svelte';
+// @ts-ignore
 export { default as CheckboxGroup } from './components/composite/checkbox-group.svelte';
+// @ts-ignore
 export { default as Combobox } from './components/composite/combobox.svelte';
+// @ts-ignore
 export { default as Disclosure } from './components/composite/disclosure.svelte';
+// @ts-ignore
 export { default as Grid } from './components/composite/grid.svelte';
+// @ts-ignore
 export { default as Listbox } from './components/composite/listbox.svelte';
+// @ts-ignore
 export { default as MenuItemGroup } from './components/composite/menu-item-group.svelte';
+// @ts-ignore
 export { default as Menu } from './components/composite/menu.svelte';
+// @ts-ignore
 export { default as RadioButtonGroup } from './components/composite/radio-button-group.svelte';
+// @ts-ignore
 export { default as SelectButtonGroup } from './components/composite/select-button-group.svelte';
+// @ts-ignore
 export { default as Select } from './components/composite/select.svelte';
+// @ts-ignore
 export { default as TabList } from './components/composite/tab-list.svelte';
+// @ts-ignore
 export { default as Button } from './components/core/button.svelte';
+// @ts-ignore
 export { default as Checkbox } from './components/core/checkbox.svelte';
+// @ts-ignore
 export { default as Dialog } from './components/core/dialog.svelte';
+// @ts-ignore
 export { default as Drawer } from './components/core/drawer.svelte';
+// @ts-ignore
 export { default as GridCell } from './components/core/grid-cell.svelte';
+// @ts-ignore
 export { default as Group } from './components/core/group.svelte';
+// @ts-ignore
 export { default as Icon } from './components/core/icon.svelte';
+// @ts-ignore
 export { default as MenuButton } from './components/core/menu-button.svelte';
+// @ts-ignore
 export { default as MenuItemCheckbox } from './components/core/menu-item-checkbox.svelte';
+// @ts-ignore
 export { default as MenuItemRadio } from './components/core/menu-item-radio.svelte';
+// @ts-ignore
 export { default as MenuItem } from './components/core/menu-item.svelte';
+// @ts-ignore
 export { default as NumberInput } from './components/core/number-input.svelte';
+// @ts-ignore
 export { default as Option } from './components/core/option.svelte';
+// @ts-ignore
 export { default as PasswordInput } from './components/core/password-input.svelte';
+// @ts-ignore
 export { default as RadioButton } from './components/core/radio-button.svelte';
+// @ts-ignore
 export { default as RowGroup } from './components/core/row-group.svelte';
+// @ts-ignore
 export { default as Row } from './components/core/row.svelte';
+// @ts-ignore
 export { default as SearchBar } from './components/core/search-bar.svelte';
+// @ts-ignore
 export { default as SelectButton } from './components/core/select-button.svelte';
+// @ts-ignore
 export { default as Separator } from './components/core/separator.svelte';
+// @ts-ignore
 export { default as Slider } from './components/core/slider.svelte';
+// @ts-ignore
 export { default as Spacer } from './components/core/spacer.svelte';
+// @ts-ignore
 export { default as Switch } from './components/core/switch.svelte';
+// @ts-ignore
 export { default as TabPanel } from './components/core/tab-panel.svelte';
+// @ts-ignore
 export { default as Tab } from './components/core/tab.svelte';
+// @ts-ignore
 export { default as TextArea } from './components/core/text-area.svelte';
+// @ts-ignore
 export { default as TextInput } from './components/core/text-input.svelte';
+// @ts-ignore
 export { default as Toolbar } from './components/core/toolbar.svelte';
+// @ts-ignore
 export { default as MarkdownEditor } from './components/editor/markdown.svelte';
+// @ts-ignore
 export { default as AppShell } from './components/util/app-shell.svelte';

package/package/typedef.d.ts

@@ -0,0 +1 @@
+type PopupPosition = ('top-left' | 'top-right' | 'right-top' | 'right-bottom' | 'bottom-left' | 'bottom-right' | 'left-top' | 'left-bottom');

package/package/typedef.js

@@ -0,0 +1,4 @@
+/**
+ * @typedef {('top-left' | 'top-right' | 'right-top' | 'right-bottom' | 'bottom-left' |
+ * 'bottom-right'|'left-top'|'left-bottom')} PopupPosition
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -12,11 +12,10 @@
     "build:watch": "svelte-kit sync && svelte-package -o package --watch",
     "preview": "vite preview",
     "prepublishOnly": "npm run build",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
     "format": "prettier --plugin-search-dir . --write .",
     "lint": "npm-run-all lint:*",
     "lint:cspell": "cspell --no-progress",
+    "lint:svelte": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
     "lint:prettier": "prettier --check --plugin-search-dir=. .",
     "lint:eslint": "eslint .",
     "lint:stylelint": "stylelint '**/*.{css,scss,svelte}'",
@@ -27,34 +26,33 @@
     "svelte": "^3.55.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.5",
-    "@babel/eslint-parser": "^7.21.3",
     "@playwright/test": "^1.33.0",
     "@sveltejs/adapter-auto": "2.0.1",
-    "@sveltejs/kit": "1.15.9",
+    "@sveltejs/kit": "1.16.2",
     "@sveltejs/package": "^2.0.2",
     "cspell": "^6.31.1",
-    "eslint": "^8.39.0",
+    "eslint": "^8.40.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "eslint-plugin-jsdoc": "^44.0.0",
+    "eslint-plugin-svelte": "^2.27.4",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.23",
     "postcss-html": "^1.5.0",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.0",
     "sass": "^1.62.1",
-    "stylelint": "^15.6.0",
+    "stylelint": "^15.6.1",
     "stylelint-config-recommended-scss": "^11.0.0",
     "stylelint-scss": "^5.0.0",
-    "svelte-check": "^3.2.0",
+    "svelte-check": "^3.3.2",
     "svelte-i18n": "^3.6.0",
     "svelte-migrate": "^1.1.3",
     "svelte-preprocess": "^5.0.3",
     "tslib": "^2.5.0",
-    "vite": "^4.3.3",
-    "vitest": "^0.30.1"
+    "vite": "^4.3.5",
+    "vitest": "^0.31.0"
   },
   "exports": {
     "./package.json": "./package.json",