@sveltia/ui 0.36.1 → 0.37.0

package/dist/components/util/popup.svelte

@@ -5,13 +5,11 @@
 <script>
   import { sleep } from '@sveltia/utils/misc';
   import { onMount } from 'svelte';
-  import { writable } from 'svelte/store';
   import { activatePopup } from '../../services/popup.svelte.js';
   import Modal from './modal.svelte';
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { Writable } from 'svelte/store';
    * @import { ModalProps, PopupPosition } from '../../typedefs';
    */
 
@@ -78,23 +76,11 @@
    */
   let contentType = $state();
   /**
-   * Style to be applied to the content.
-   * @type {Writable<Record<string, any>>}
+   * @type {{ style: { inset: string | undefined, zIndex: number | undefined, minWidth: string |
+   * undefined, maxWidth: string | undefined, height: string | undefined }, open: boolean,
+   * checkPosition: () => void } | undefined}
    */
-  let style = $state(
-    writable({
-      inset: undefined,
-      zIndex: undefined,
-      width: undefined,
-      height: undefined,
-    }),
-  );
-
-  /**
-   * @type {{ style: Writable<Record<string, any>>, open: Writable<boolean>, checkPosition:
-   * () => void } | undefined}
-   */
-  let popupInstance = undefined;
+  let popupInstance = $state();
   let hoveredTimeout = 0;
 
   /**
@@ -103,15 +89,16 @@
   const init = () => {
     popupInstance = activatePopup(anchor, dialogElement, position, positionBaseElement);
 
-    style = popupInstance.style;
-    popupInstance.open.subscribe((_open) => {
-      open = _open;
-    });
-
     contentType = anchor?.getAttribute('aria-haspopup') ?? undefined;
     initialized = true;
   };
 
+  $effect(() => {
+    if (popupInstance) {
+      open = popupInstance.open;
+    }
+  });
+
   $effect(() => {
     if (parentDialogElement && !dialogElement && content) {
       dialogElement = parentDialogElement;
@@ -145,12 +132,12 @@
     role="none"
     class="content {className} {contentType}"
     class:touch
-    style:inset={$style.inset}
-    style:z-index={$style.zIndex}
-    style:min-width={$style.minWidth}
-    style:max-width={$style.maxWidth}
-    style:max-height={$style.height}
-    style:visibility={$style.inset ? undefined : 'hidden'}
+    style:inset={popupInstance?.style.inset}
+    style:z-index={popupInstance?.style.zIndex}
+    style:min-width={popupInstance?.style.minWidth}
+    style:max-width={popupInstance?.style.maxWidth}
+    style:max-height={popupInstance?.style.height}
+    style:visibility={popupInstance?.style.inset ? undefined : 'hidden'}
     onmouseenter={() => {
       hovered = true;
 

package/dist/services/popup.svelte.d.ts

@@ -1,6 +1,5 @@
 export function activatePopup(...args: any[]): Popup;
 /**
- * @import { Writable } from 'svelte/store';
  * @import { PopupPosition } from '../typedefs';
  */
 /**
@@ -16,23 +15,23 @@ declare class Popup {
      * will be the `anchorElement`.
      */
     constructor(anchorElement: HTMLButtonElement, popupElement: HTMLDialogElement, position: PopupPosition, positionBaseElement?: HTMLElement | undefined);
-    open: Writable<boolean>;
     /**
-     * @type {Writable<{
-     * inset: string | undefined,
-     * zIndex: number | undefined,
-     * minWidth: string | undefined,
-     * maxWidth: string | undefined,
-     * height: string | undefined,
-     * }>}
+     * Open or close the popup, running side effects synchronously.
+     * @param {boolean} value `true` to open, `false` to close.
      */
-    style: Writable<{
+    set open(value: boolean);
+    /**
+     * Whether the popup is open.
+     * @returns {boolean} `true` if the popup is open.
+     */
+    get open(): boolean;
+    style: {
         inset: string | undefined;
         zIndex: number | undefined;
         minWidth: string | undefined;
         maxWidth: string | undefined;
         height: string | undefined;
-    }>;
+    };
     observer: IntersectionObserver;
     anchorElement: HTMLButtonElement;
     popupElement: HTMLDialogElement;
@@ -58,7 +57,7 @@ declare class Popup {
      * Hide the popup immediately (when the anchor is being hidden).
      */
     hideImmediately(): Promise<void>;
+    #private;
 }
-import type { Writable } from 'svelte/store';
 import type { PopupPosition } from '../typedefs';
 export {};

package/dist/services/popup.svelte.js

@@ -1,10 +1,7 @@
 import { generateElementId } from '@sveltia/utils/element';
 import { sleep } from '@sveltia/utils/misc';
 import { on } from 'svelte/events';
-import { get, writable } from 'svelte/store';
-
 /**
- * @import { Writable } from 'svelte/store';
  * @import { PopupPosition } from '../typedefs';
  */
 
@@ -12,24 +9,46 @@ import { get, writable } from 'svelte/store';
  * Implement the popup handler.
  */
 class Popup {
-  open = writable(false);
+  #open = $state(false);
 
   /**
-   * @type {Writable<{
-   * inset: string | undefined,
-   * zIndex: number | undefined,
-   * minWidth: string | undefined,
-   * maxWidth: string | undefined,
-   * height: string | undefined,
-   * }>}
+   * Whether the popup is open.
+   * @returns {boolean} `true` if the popup is open.
    */
-  style = writable({
-    inset: undefined,
-    zIndex: undefined,
-    minWidth: undefined,
-    maxWidth: undefined,
-    height: undefined,
-  });
+  get open() {
+    return this.#open;
+  }
+
+  /**
+   * Open or close the popup, running side effects synchronously.
+   * @param {boolean} value `true` to open, `false` to close.
+   */
+  set open(value) {
+    this.#open = value;
+
+    if (value) {
+      this.checkPosition();
+    } else if (this.anchorElement.getAttribute('aria-expanded') === 'true') {
+      this.anchorElement.focus();
+      this.anchorElement.removeAttribute('aria-controls');
+    }
+
+    this.anchorElement.setAttribute('aria-expanded', String(value));
+  }
+
+  style = $state(
+    /**
+     * @type {{ inset: string | undefined, zIndex: number | undefined, minWidth: string | undefined,
+     * maxWidth: string | undefined, height: string | undefined }}
+     */
+    ({
+      inset: undefined,
+      zIndex: undefined,
+      minWidth: undefined,
+      maxWidth: undefined,
+      height: undefined,
+    }),
+  );
 
   observer = new IntersectionObserver((entries) => {
     entries.forEach(({ intersectionRect, rootBounds }) => {
@@ -120,16 +139,14 @@ class Popup {
         height: height ? `${Math.round(height)}px` : 'auto',
       };
 
-      const current = get(this.style);
-
       if (
-        style.inset !== current.inset ||
-        style.zIndex !== current.zIndex ||
-        style.minWidth !== current.minWidth ||
-        style.maxWidth !== current.maxWidth ||
-        style.height !== current.height
+        style.inset !== this.style.inset ||
+        style.zIndex !== this.style.zIndex ||
+        style.minWidth !== this.style.minWidth ||
+        style.maxWidth !== this.style.maxWidth ||
+        style.height !== this.style.height
       ) {
-        this.style.set(style);
+        this.style = style;
       }
     });
   });
@@ -151,10 +168,11 @@ class Popup {
 
     this.anchorElement.setAttribute('aria-controls', this.id);
     this.popupElement.setAttribute('id', this.id);
+    this.anchorElement.setAttribute('aria-expanded', 'false');
 
     on(anchorElement, 'click', () => {
       if (!this.isDisabled && !this.isReadOnly) {
-        this.open.set(!get(this.open));
+        this.open = !this.open;
       }
     });
 
@@ -165,7 +183,7 @@ class Popup {
       if (!this.isDisabled && !this.isReadOnly && ['Enter', ' '].includes(key) && !hasModifier) {
         event.preventDefault();
         event.stopPropagation();
-        this.open.set(!get(this.open));
+        this.open = !this.open;
       }
     });
 
@@ -176,7 +194,7 @@ class Popup {
     });
 
     new IntersectionObserver(([entry]) => {
-      if (!entry.isIntersecting && get(this.open)) {
+      if (!entry.isIntersecting && this.open) {
         this.hideImmediately();
       }
     }).observe(this.anchorElement);
@@ -189,10 +207,10 @@ class Popup {
       const target = /** @type {HTMLElement} */ (event.target);
 
       if (
-        get(this.open) &&
+        this.open &&
         (target === this.popupElement || target.matches('[role^="menuitem"], [role="option"]'))
       ) {
-        this.open.set(false);
+        this.open = false;
       }
     });
 
@@ -203,21 +221,10 @@ class Popup {
       if (key === 'Escape' && !hasModifier) {
         event.preventDefault();
         event.stopPropagation();
-        this.open.set(false);
+        this.open = false;
       }
     });
 
-    this.open.subscribe((open) => {
-      if (open) {
-        this.checkPosition();
-      } else if (this.anchorElement.getAttribute('aria-expanded') === 'true') {
-        this.anchorElement.focus();
-        this.anchorElement.removeAttribute('aria-controls');
-      }
-
-      this.anchorElement.setAttribute('aria-expanded', String(open));
-    });
-
     // Update the popup width when the base element is resized
     new ResizeObserver(() => {
       cancelAnimationFrame(this._rafId);
@@ -254,7 +261,7 @@ class Popup {
    */
   async hideImmediately() {
     this.popupElement.hidden = true;
-    this.open.set(false);
+    this.open = false;
     await sleep(50);
     this.popupElement.hidden = false;
   }

package/package.json

@@ -1,12 +1,37 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.36.1",
-  "license": "MIT",
-  "type": "module",
+  "version": "0.37.0",
+  "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
-    "url": "github:sveltia/sveltia-ui"
+    "url": "git+https://github.com/sveltia/sveltia-ui.git"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Kohei Yoshino",
+    "url": "https://github.com/kyoshino"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
   },
+  "svelte": "./dist/index.js",
+  "typesVersions": {
+    ">4.0": {
+      "index": [
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*"
+  ],
   "dependencies": {
     "@lexical/code": "^0.42.0",
     "@lexical/code-prism": "^0.42.0",
@@ -20,15 +45,12 @@
     "@lexical/selection": "^0.42.0",
     "@lexical/table": "^0.42.0",
     "@lexical/utils": "^0.42.0",
-    "@sveltia/i18n": "^0.1.3",
+    "@sveltia/i18n": "^1.0.1",
     "@sveltia/utils": "^0.10.0",
     "lexical": "^0.42.0",
     "prismjs": "^1.30.0",
     "yaml": "^2.8.3"
   },
-  "peerDependencies": {
-    "svelte": "^5.0.0"
-  },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^7.0.1",
     "@sveltejs/kit": "^2.56.1",
@@ -37,10 +59,11 @@
     "@vitest/coverage-v8": "^4.1.2",
     "cspell": "^9.8.0",
     "eslint": "^9.39.4",
-    "eslint-config-airbnb-extended": "^3.0.1",
+    "eslint-config-airbnb-extended": "^3.1.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsdoc": "^62.9.0",
+    "eslint-plugin-package-json": "^0.91.1",
     "eslint-plugin-svelte": "^3.17.0",
     "globals": "^17.4.0",
     "happy-dom": "^20.8.9",
@@ -57,45 +80,30 @@
     "svelte-check": "^4.4.6",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "vite": "^8.0.3",
+    "vite": "^8.0.5",
     "vitest": "^4.1.2"
   },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js",
-      "default": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "svelte": "./dist/index.js",
-  "typesVersions": {
-    ">4.0": {
-      "index": [
-        "./dist/index.d.ts"
-      ]
-    }
+  "peerDependencies": {
+    "svelte": "^5.0.0"
   },
   "publishConfig": {
     "access": "public",
     "provenance": true
   },
   "scripts": {
-    "dev": "vite dev",
     "build": "svelte-kit sync && svelte-package",
     "build:watch": "svelte-kit sync && svelte-package --watch",
-    "preview": "vite preview",
-    "format": "prettier --write .",
     "check": "pnpm run '/^check:.*/'",
     "check:audit": "pnpm audit",
     "check:cspell": "cspell --no-progress",
-    "check:svelte": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
-    "check:prettier": "prettier --check .",
     "check:eslint": "eslint .",
     "check:oxlint": "oxlint .",
+    "check:prettier": "prettier --check .",
     "check:stylelint": "stylelint '**/*.{css,scss,svelte}'",
+    "check:svelte": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+    "dev": "vite dev",
+    "format": "prettier --write .",
+    "preview": "vite preview",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest"

package/dist/components/text-editor/constants.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/text-editor/constants.test.js

@@ -1,98 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import {
-  AVAILABLE_BUTTONS,
-  BLOCK_BUTTON_TYPES,
-  IMAGE_COMPONENT_IDS,
-  INLINE_BUTTON_TYPES,
-  TEXT_FORMAT_BUTTON_TYPES,
-} from './constants.js';
-
-describe('AVAILABLE_BUTTONS', () => {
-  it('should contain all expected button keys', () => {
-    const expectedKeys = [
-      'bold',
-      'italic',
-      'strikethrough',
-      'code',
-      'link',
-      'paragraph',
-      'heading-1',
-      'heading-2',
-      'heading-3',
-      'heading-4',
-      'heading-5',
-      'heading-6',
-      'bulleted-list',
-      'numbered-list',
-      'blockquote',
-      'code-block',
-    ];
-
-    expectedKeys.forEach((key) => {
-      expect(AVAILABLE_BUTTONS).toHaveProperty(key);
-    });
-  });
-
-  it('should mark inline buttons correctly', () => {
-    expect(AVAILABLE_BUTTONS.bold.inline).toBe(true);
-    expect(AVAILABLE_BUTTONS.italic.inline).toBe(true);
-    expect(AVAILABLE_BUTTONS.link.inline).toBe(true);
-    expect(AVAILABLE_BUTTONS.paragraph.inline).toBe(false);
-    expect(AVAILABLE_BUTTONS['heading-1'].inline).toBe(false);
-  });
-
-  it('should have a labelKey and icon for each button', () => {
-    Object.values(AVAILABLE_BUTTONS).forEach(({ labelKey, icon }) => {
-      expect(typeof labelKey).toBe('string');
-      expect(labelKey.length).toBeGreaterThan(0);
-      expect(typeof icon).toBe('string');
-      expect(icon.length).toBeGreaterThan(0);
-    });
-  });
-});
-
-describe('TEXT_FORMAT_BUTTON_TYPES', () => {
-  it('should include bold, italic, strikethrough, code', () => {
-    expect(TEXT_FORMAT_BUTTON_TYPES).toEqual(['bold', 'italic', 'strikethrough', 'code']);
-  });
-});
-
-describe('INLINE_BUTTON_TYPES', () => {
-  it('should include all text format types plus link', () => {
-    expect(INLINE_BUTTON_TYPES).toContain('bold');
-    expect(INLINE_BUTTON_TYPES).toContain('italic');
-    expect(INLINE_BUTTON_TYPES).toContain('strikethrough');
-    expect(INLINE_BUTTON_TYPES).toContain('code');
-    expect(INLINE_BUTTON_TYPES).toContain('link');
-  });
-
-  it('should be a superset of TEXT_FORMAT_BUTTON_TYPES', () => {
-    TEXT_FORMAT_BUTTON_TYPES.forEach((type) => {
-      expect(INLINE_BUTTON_TYPES).toContain(type);
-    });
-  });
-});
-
-describe('BLOCK_BUTTON_TYPES', () => {
-  it('should include paragraph and all heading levels', () => {
-    expect(BLOCK_BUTTON_TYPES).toContain('paragraph');
-
-    for (let i = 1; i <= 6; i += 1) {
-      expect(BLOCK_BUTTON_TYPES).toContain(`heading-${i}`);
-    }
-  });
-
-  it('should include list, blockquote, and code-block types', () => {
-    expect(BLOCK_BUTTON_TYPES).toContain('bulleted-list');
-    expect(BLOCK_BUTTON_TYPES).toContain('numbered-list');
-    expect(BLOCK_BUTTON_TYPES).toContain('blockquote');
-    expect(BLOCK_BUTTON_TYPES).toContain('code-block');
-  });
-});
-
-describe('IMAGE_COMPONENT_IDS', () => {
-  it('should include image and linked-image', () => {
-    expect(IMAGE_COMPONENT_IDS).toContain('image');
-    expect(IMAGE_COMPONENT_IDS).toContain('linked-image');
-  });
-});

package/dist/components/text-editor/markdown.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/text-editor/markdown.test.js

@@ -1,84 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { increaseListIndentation, splitMultilineFormatting } from './markdown.js';
-
-describe('splitMultilineFormatting', () => {
-  it('should split italic formatting across lines', () => {
-    expect(splitMultilineFormatting('  _foo\nbar_  ')).toBe('  _foo_\n_bar_  ');
-  });
-
-  it('should split bold formatting across lines', () => {
-    expect(splitMultilineFormatting('  **foo\nbar**  ')).toBe('  **foo**\n**bar**  ');
-  });
-
-  it('should split strikethrough formatting across lines', () => {
-    expect(splitMultilineFormatting('  ~~foo\nbar~~  ')).toBe('  ~~foo~~\n~~bar~~  ');
-  });
-
-  it('should split code formatting across lines', () => {
-    expect(splitMultilineFormatting('  `foo\nbar`  ')).toBe('  `foo`\n`bar`  ');
-  });
-
-  it('should handle multiple formatting types', () => {
-    expect(
-      splitMultilineFormatting('  _italic\ntext_   **bold\ntext**  ~~strike\nthrough~~  '),
-    ).toBe('  _italic_\n_text_   **bold**\n**text**  ~~strike~~\n~~through~~  ');
-  });
-
-  it('should not affect properly formatted single-line text', () => {
-    expect(splitMultilineFormatting('_italic_ **bold** ~~strike~~ `code`')).toBe(
-      '_italic_ **bold** ~~strike~~ `code`',
-    );
-  });
-
-  it('should only split when surrounded by whitespace', () => {
-    expect(splitMultilineFormatting('_foo\nbar_')).toBe('_foo\nbar_');
-  });
-
-  it('should handle formatting at different indentation levels', () => {
-    expect(splitMultilineFormatting('    _foo\nbar_    ')).toBe('    _foo_\n_bar_    ');
-  });
-});
-
-describe('increaseListIndentation', () => {
-  it('should double indentation for bullet lists', () => {
-    expect(increaseListIndentation('  - item')).toBe('    - item');
-  });
-
-  it('should double indentation for numbered lists', () => {
-    expect(increaseListIndentation('  1. item')).toBe('    1. item');
-  });
-
-  it('should handle different list markers', () => {
-    expect(increaseListIndentation('  - a\n  + b\n  * c')).toBe('    - a\n    + b\n    * c');
-  });
-
-  it('should double different indentation levels', () => {
-    expect(increaseListIndentation('  - level 1\n    - level 2')).toBe(
-      '    - level 1\n        - level 2',
-    );
-  });
-
-  it('should not affect non-list content', () => {
-    expect(increaseListIndentation('regular text')).toBe('regular text');
-  });
-
-  it('should not affect lists without preceding spaces', () => {
-    expect(increaseListIndentation('- item')).toBe('- item');
-  });
-
-  it('should handle mixed content', () => {
-    expect(increaseListIndentation('paragraph\n  - item\nmore text')).toBe(
-      'paragraph\n    - item\nmore text',
-    );
-  });
-
-  it('should handle lists with various indentation levels', () => {
-    expect(increaseListIndentation('  - a\n      - b\n          - c')).toBe(
-      '    - a\n            - b\n                    - c',
-    );
-  });
-
-  it('should return unchanged string if no matching lists', () => {
-    expect(increaseListIndentation('paragraph with - no list')).toBe('paragraph with - no list');
-  });
-});

package/dist/components/text-editor/store.svelte.test.d.ts

@@ -1 +0,0 @@
-export {};