@sveltia/ui 0.11.0 → 0.12.0

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

@@ -9,10 +9,10 @@
 export default class MenuItemRadio extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    disabled?: boolean | undefined;
     label?: string | undefined;
-    checked?: boolean | undefined;
     hidden?: boolean | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
     iconName?: string | undefined;
     iconLabel?: string | undefined;
 }, {
@@ -33,10 +33,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        disabled?: boolean | undefined;
         label?: string | undefined;
-        checked?: boolean | undefined;
         hidden?: boolean | undefined;
+        disabled?: boolean | undefined;
+        checked?: boolean | undefined;
         iconName?: string | undefined;
         iconLabel?: string | undefined;
     };

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

@@ -7,8 +7,8 @@
   import { writable } from 'svelte/store';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
-  import Popup from '../util/popup.svelte';
   import Menu from './menu.svelte';
+  import Popup from '../util/popup.svelte';
 
   /**
    * The `class` attribute on the wrapper element.

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

@@ -8,10 +8,10 @@
 export default class MenuItem extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    disabled?: boolean | undefined;
-    label?: string | undefined;
     role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
+    label?: string | undefined;
     hidden?: boolean | undefined;
+    disabled?: boolean | undefined;
     iconName?: string | undefined;
     iconLabel?: string | undefined;
 }, {
@@ -42,10 +42,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        disabled?: boolean | undefined;
-        label?: string | undefined;
         role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
+        label?: string | undefined;
         hidden?: boolean | undefined;
+        disabled?: boolean | undefined;
         iconName?: string | undefined;
         iconLabel?: string | undefined;
     };

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

@@ -9,8 +9,8 @@
 export default class Menu extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    disabled?: boolean | undefined;
     hidden?: boolean | undefined;
+    disabled?: boolean | undefined;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -27,8 +27,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/radio/radio-group.svelte.d.ts

@@ -9,12 +9,12 @@
 export default class RadioGroup extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    disabled?: boolean | undefined;
     invalid?: boolean | undefined;
-    required?: boolean | undefined;
     hidden?: boolean | undefined;
+    disabled?: boolean | undefined;
     readonly?: boolean | undefined;
     orientation?: "vertical" | "horizontal" | undefined;
+    required?: boolean | undefined;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -31,12 +31,12 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        disabled?: boolean | undefined;
         invalid?: boolean | undefined;
-        required?: boolean | undefined;
         hidden?: boolean | undefined;
+        disabled?: boolean | undefined;
         readonly?: boolean | undefined;
         orientation?: "vertical" | "horizontal" | undefined;
+        required?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/radio/radio.svelte

@@ -6,8 +6,8 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
 -->
 <script>
-  import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
+  import { getRandomId } from '../../services/util';
 
   /**
    * The `class` attribute on the wrapper element.

package/package/components/radio/radio.svelte.d.ts

@@ -11,11 +11,11 @@ export default class Radio extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
-    disabled?: boolean | undefined;
     label?: string | undefined;
-    checked?: boolean | undefined;
-    value?: string | undefined;
     hidden?: boolean | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    checked?: boolean | undefined;
 }, {
     focus: FocusEvent;
     blur: FocusEvent;
@@ -36,11 +36,11 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
-        disabled?: boolean | undefined;
         label?: string | undefined;
-        checked?: boolean | undefined;
-        value?: string | undefined;
         hidden?: boolean | undefined;
+        disabled?: boolean | undefined;
+        value?: string | undefined;
+        checked?: boolean | undefined;
     };
     events: {
         focus: FocusEvent;

package/package/components/select/combobox.svelte

@@ -9,13 +9,13 @@
   import { createEventDispatcher } from 'svelte';
   import { _ } from 'svelte-i18n';
   import { writable } from 'svelte/store';
-  import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import Listbox from '../listbox/listbox.svelte';
   import SearchBar from '../text-field/search-bar.svelte';
   import TextInput from '../text-field/text-input.svelte';
   import Popup from '../util/popup.svelte';
+  import { getRandomId } from '../../services/util';
 
   /**
    * The `class` attribute on the wrapper element.
@@ -115,7 +115,7 @@
 
   $: {
     if (popupComponent?.content) {
-      window.requestAnimationFrame(() => {
+      globalThis.requestAnimationFrame(() => {
         const selected = popupComponent?.content?.querySelector(selectedSelector);
 
         if (selected) {

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

@@ -10,13 +10,13 @@
 export default class Combobox extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    disabled?: boolean | undefined;
     invalid?: boolean | undefined;
-    required?: boolean | undefined;
-    value?: string | number | undefined;
     position?: PopupPosition | undefined;
     hidden?: boolean | undefined;
+    disabled?: boolean | undefined;
+    value?: string | number | undefined;
     readonly?: boolean | undefined;
+    required?: boolean | undefined;
     editable?: boolean | undefined;
 }, {
     change: CustomEvent<any>;
@@ -37,13 +37,13 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        disabled?: boolean | undefined;
         invalid?: boolean | undefined;
-        required?: boolean | undefined;
-        value?: (string | number | undefined);
         position?: PopupPosition | undefined;
         hidden?: boolean | undefined;
+        disabled?: boolean | undefined;
+        value?: (string | number | undefined);
         readonly?: boolean | undefined;
+        required?: boolean | undefined;
         editable?: boolean | undefined;
     };
     events: {

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

@@ -10,12 +10,12 @@
 export default class Select extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    disabled?: boolean | undefined;
     invalid?: boolean | undefined;
-    required?: boolean | undefined;
-    value?: string | number | undefined;
     hidden?: boolean | undefined;
+    disabled?: boolean | undefined;
+    value?: string | number | undefined;
     readonly?: boolean | undefined;
+    required?: boolean | undefined;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -32,12 +32,12 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        disabled?: boolean | undefined;
         invalid?: boolean | undefined;
-        required?: boolean | undefined;
-        value?: (string | number | undefined);
         hidden?: boolean | undefined;
+        disabled?: boolean | undefined;
+        value?: (string | number | undefined);
         readonly?: boolean | undefined;
+        required?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/slider/slider.svelte

@@ -172,6 +172,8 @@
       return;
     }
 
+    event.stopPropagation();
+
     moveThumb(startX + (screenX - startScreenX));
   };
 
@@ -186,6 +188,13 @@
       return;
     }
 
+    event.stopPropagation();
+
+    // Handle a click on the bars
+    if (/** @type {HTMLElement} */ (event.target).matches('.base-bar, .slider-bar')) {
+      moveThumb(/** @type {any} */ (event).layerX);
+    }
+
     // Reset everything
     dragging = false;
     startX = 0;
@@ -211,6 +220,8 @@
       return;
     }
 
+    event.stopPropagation();
+
     dragging = true;
     startX = clientX - /** @type {HTMLElement} */ (base).getBoundingClientRect().x;
     startScreenX = screenX;
@@ -222,18 +233,6 @@
     document.addEventListener('pointercancel', onPointerUp);
   };
 
-  /**
-   * Handle the `click` event fired on the slider.
-   * @param {MouseEvent} event - `click` event.
-   */
-  const onClick = (event) => {
-    if (disabled || readonly || multiThumb || dragging) {
-      return;
-    }
-
-    moveThumb(/** @type {any} */ (event).layerX);
-  };
-
   /**
    * Update the thumb position and fire the `change` event when the value is changed.
    */
@@ -271,7 +270,7 @@
 
   onMount(() => {
     const observer = new ResizeObserver(() => init());
-    const query = window.matchMedia('(pointer: coarse)');
+    const query = globalThis.matchMedia('(pointer: coarse)');
 
     observer.observe(/** @type {HTMLElement} */ (base));
     query.addEventListener('change', init);
@@ -303,14 +302,8 @@
   class:readonly
   hidden={hidden || undefined}
   {...$$restProps}
-  on:click|preventDefault|stopPropagation
 >
-  <div
-    role="none"
-    class="base"
-    bind:this={base}
-    on:click|preventDefault|stopPropagation={(event) => onClick(event)}
-  >
+  <div role="none" class="base" bind:this={base} on:pointerdown={(event) => onPointerDown(event)}>
     <div role="none" class="base-bar" />
     <div
       class="slider-bar"

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

@@ -12,20 +12,19 @@
 export default class Slider extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    disabled?: boolean | undefined;
     invalid?: boolean | undefined;
-    max?: number | undefined;
-    min?: number | undefined;
-    step?: number | undefined;
-    value?: number | undefined;
     hidden?: boolean | undefined;
+    disabled?: boolean | undefined;
+    value?: number | undefined;
     readonly?: boolean | undefined;
     values?: [number, number] | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
     sliderLabel?: string | undefined;
     sliderLabels?: [string, string] | undefined;
+    step?: number | undefined;
     optionLabels?: string[] | number[] | undefined;
 }, {
-    click: MouseEvent;
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
@@ -39,21 +38,20 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        disabled?: boolean | undefined;
         invalid?: boolean | undefined;
-        max?: number | undefined;
-        min?: number | undefined;
-        step?: number | undefined;
-        value?: number | undefined;
         hidden?: boolean | undefined;
+        disabled?: boolean | undefined;
+        value?: number | undefined;
         readonly?: boolean | undefined;
         values?: [number, number] | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
         sliderLabel?: string | undefined;
         sliderLabels?: [string, string] | undefined;
+        step?: number | undefined;
         optionLabels?: string[] | number[] | undefined;
     };
     events: {
-        click: MouseEvent;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

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

@@ -9,13 +9,13 @@
 export default class Switch extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
     label?: string | undefined;
-    checked?: boolean | "mixed" | undefined;
-    required?: boolean | undefined;
+    invalid?: boolean | undefined;
     hidden?: boolean | undefined;
+    disabled?: boolean | undefined;
     readonly?: boolean | undefined;
+    required?: boolean | undefined;
+    checked?: boolean | "mixed" | undefined;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -32,13 +32,13 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        disabled?: boolean | undefined;
-        invalid?: boolean | undefined;
         label?: string | undefined;
-        checked?: boolean | "mixed" | undefined;
-        required?: boolean | undefined;
+        invalid?: boolean | undefined;
         hidden?: boolean | undefined;
+        disabled?: boolean | undefined;
         readonly?: boolean | undefined;
+        required?: boolean | undefined;
+        checked?: boolean | "mixed" | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/tabs/tab-list.svelte

@@ -51,7 +51,7 @@
    * Update the indicator position.
    */
   const updateIndicator = () => {
-    window.requestAnimationFrame(() => {
+    globalThis.requestAnimationFrame(() => {
       const selected = /** @type {HTMLElement | null} */ (
         wrapper?.querySelector('[role="tab"][aria-selected="true"]')
       );

package/package/components/tabs/tab-list.svelte.d.ts

@@ -10,8 +10,8 @@ export default class TabList extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
-    disabled?: boolean | undefined;
     hidden?: boolean | undefined;
+    disabled?: boolean | undefined;
     orientation?: "vertical" | "horizontal" | undefined;
 }, {
     change: CustomEvent<any>;
@@ -30,8 +30,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
-        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
+        disabled?: boolean | undefined;
         orientation?: "vertical" | "horizontal" | undefined;
     };
     events: {

package/package/components/tabs/tab.svelte.d.ts

@@ -9,8 +9,8 @@
 export default class Tab extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    disabled?: boolean | undefined;
     hidden?: boolean | undefined;
+    disabled?: boolean | undefined;
     selected?: boolean | undefined;
 }, {
     focus: FocusEvent;
@@ -37,8 +37,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
+        disabled?: boolean | undefined;
         selected?: boolean | undefined;
     };
     events: {

package/package/components/text-editor/core.d.ts

@@ -0,0 +1,2 @@
+export function initEditor(): import('lexical').LexicalEditor;
+export function convertMarkdown(editor: import('lexical').LexicalEditor, value: string): Promise<void>;

package/package/components/text-editor/core.js

@@ -0,0 +1,206 @@
+import { CodeHighlightNode, CodeNode } from '@lexical/code';
+import { createEmptyHistoryState, registerHistory } from '@lexical/history';
+import {
+  LinkNode,
+  TOGGLE_LINK_COMMAND,
+  $isLinkNode as isLinkNode,
+  toggleLink,
+} from '@lexical/link';
+import {
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  ListItemNode,
+  ListNode,
+  insertList,
+  $isListItemNode as isListItemNode,
+  $isListNode as isListNode,
+} from '@lexical/list';
+import {
+  TRANSFORMERS,
+  $convertFromMarkdownString as convertFromMarkdownString,
+  $convertToMarkdownString as convertToMarkdownString,
+} from '@lexical/markdown';
+import {
+  HeadingNode,
+  QuoteNode,
+  $isHeadingNode as isHeadingNode,
+  $isQuoteNode as isQuoteNode,
+  registerRichText,
+} from '@lexical/rich-text';
+import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
+import { $getNearestNodeOfType as getNearestNodeOfType } from '@lexical/utils';
+import {
+  COMMAND_PRIORITY_NORMAL,
+  ElementNode,
+  createEditor,
+  $getSelection as getSelection,
+  $isRangeSelection as isRangeSelection,
+} from 'lexical';
+import { blockButtonTypes, textFormatButtonTypes } from './';
+
+/**
+ * Lexical editor configuration.
+ * @type {import('lexical').CreateEditorArgs}
+ */
+const editorConfig = {
+  namespace: 'editor',
+  nodes: [
+    HeadingNode,
+    QuoteNode,
+    LinkNode,
+    ListNode,
+    ListItemNode,
+    CodeNode,
+    CodeHighlightNode,
+    TableNode,
+    TableCellNode,
+    TableRowNode,
+  ],
+  theme: {
+    text: {
+      /**
+       * Enable bold+italic styling.
+       * @see https://github.com/facebook/lexical/discussions/4381
+       */
+      italic: 'italic',
+    },
+  },
+};
+
+/**
+ * Listen to changes on the editor.
+ * @param {import('lexical').LexicalEditor} editor - Editor instance.
+ */
+const onEditorUpdate = (editor) => {
+  const selection = getSelection();
+
+  if (!isRangeSelection(selection)) {
+    return;
+  }
+
+  const anchor = selection.anchor.getNode();
+  /** @type {ElementNode | null} */
+  let parent = null;
+  /** @type {TextEditorInlineType[]} */
+  const selectionInlineTypes = textFormatButtonTypes.filter((type) => selection.hasFormat(type));
+
+  if (anchor.getType() !== 'root') {
+    parent = anchor instanceof ElementNode ? anchor : getNearestNodeOfType(anchor, ElementNode);
+
+    if (isLinkNode(parent)) {
+      selectionInlineTypes.push('link');
+      parent = getNearestNodeOfType(parent, ElementNode);
+    }
+
+    if (isListItemNode(parent)) {
+      parent = getNearestNodeOfType(parent, ListNode);
+    }
+  }
+
+  const selectionBlockType = /** @type {TextEditorBlockType} */ (
+    (() => {
+      if (!parent) {
+        return 'paragraph';
+      }
+
+      if (isHeadingNode(parent)) {
+        return `heading-${parent.getTag().match(/\d/)?.[0]}`;
+      }
+
+      if (isListNode(parent)) {
+        return parent.getListType() === 'bullet' ? 'bulleted-list' : 'numbered-list';
+      }
+
+      if (isQuoteNode(parent)) {
+        return 'blockquote';
+      }
+
+      const type = parent.getType();
+
+      if (blockButtonTypes.includes(/** @type {any} */ (type))) {
+        return type;
+      }
+
+      return 'paragraph';
+    })()
+  );
+
+  editor.getRootElement()?.dispatchEvent(
+    new CustomEvent('Update', {
+      detail: {
+        value: convertToMarkdownString(TRANSFORMERS),
+        selectionBlockType,
+        selectionInlineTypes,
+      },
+    }),
+  );
+};
+
+/**
+ * Initialize the Lexical editor.
+ * @returns {import('lexical').LexicalEditor} Editor instance.
+ */
+export const initEditor = () => {
+  const editor = createEditor(editorConfig);
+
+  registerRichText(editor);
+  registerHistory(editor, createEmptyHistoryState(), 1000);
+
+  editor.registerCommand(
+    TOGGLE_LINK_COMMAND,
+    (payload) => {
+      toggleLink(typeof payload === 'string' ? payload : null);
+      return true;
+    },
+    COMMAND_PRIORITY_NORMAL,
+  );
+
+  editor.registerCommand(
+    INSERT_UNORDERED_LIST_COMMAND,
+    () => {
+      insertList(editor, 'bullet');
+      return true;
+    },
+    COMMAND_PRIORITY_NORMAL,
+  );
+
+  editor.registerCommand(
+    INSERT_ORDERED_LIST_COMMAND,
+    () => {
+      insertList(editor, 'number');
+      return true;
+    },
+    COMMAND_PRIORITY_NORMAL,
+  );
+
+  editor.registerUpdateListener(({ editorState }) => {
+    if (editor?.isComposing()) {
+      return;
+    }
+
+    editorState.read(() => {
+      onEditorUpdate(editor);
+    });
+  });
+
+  return editor;
+};
+
+/**
+ * Convert Markdown to Lexical nodes.
+ * @param {import('lexical').LexicalEditor} editor - Editor instance.
+ * @param {string} value - Current Markdown value.
+ * @returns {Promise<void>} Nothing.
+ * @throws {Error} Failed to convert the value to Lexical nodes.
+ */
+export const convertMarkdown = async (editor, value) =>
+  new Promise((resolve, reject) => {
+    editor.update(() => {
+      try {
+        convertFromMarkdownString(value, TRANSFORMERS);
+        resolve(void 0);
+      } catch {
+        reject(new Error('Failed to convert Markdown'));
+      }
+    });
+  });