@sveltia/ui 0.11.1 → 0.12.1

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

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;
+    disabled?: boolean | undefined;
     hidden?: 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;
+        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         orientation?: "vertical" | "horizontal" | undefined;
+        required?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/radio/radio.svelte

@@ -6,7 +6,7 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
 -->
 <script>
-  import { getRandomId } from '../../services/util';
+  import { generateElementId } from '@sveltia/utils/element';
   import Button from '../button/button.svelte';
 
   /**
@@ -46,7 +46,7 @@
    */
   export let label = undefined;
 
-  const id = getRandomId('checkbox');
+  const id = generateElementId('checkbox');
 
   /**
    * Reference to the `Button` component.

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;
+    disabled?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | 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;
+        disabled?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
+        checked?: boolean | undefined;
     };
     events: {
         focus: FocusEvent;

package/package/components/select/combobox.svelte

@@ -6,10 +6,10 @@
   @todo Add DOM API compatibility.
 -->
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   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';
@@ -64,7 +64,7 @@
   export let position = 'bottom-left';
 
   const dispatch = createEventDispatcher();
-  const id = getRandomId('combobox');
+  const id = generateElementId('combobox');
   const selectedSelector = '[role="option"][aria-selected="true"]';
   /** @type {HTMLElement} */
   let comboboxElement;
@@ -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;
+    disabled?: boolean | undefined;
     value?: string | number | undefined;
     position?: PopupPosition | undefined;
     hidden?: boolean | 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;
+        disabled?: boolean | undefined;
         value?: (string | number | undefined);
         position?: PopupPosition | undefined;
         hidden?: boolean | 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;
+    disabled?: boolean | undefined;
     value?: string | number | undefined;
     hidden?: boolean | 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;
+        disabled?: boolean | undefined;
         value?: (string | number | undefined);
         hidden?: boolean | undefined;
         readonly?: boolean | undefined;
+        required?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/slider/slider.svelte

@@ -270,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);

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

@@ -12,17 +12,17 @@
 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;
+    disabled?: boolean | undefined;
     value?: number | undefined;
     hidden?: boolean | 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;
 }, {
     change: CustomEvent<any>;
@@ -38,17 +38,17 @@ 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;
+        disabled?: boolean | undefined;
         value?: number | undefined;
         hidden?: boolean | 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: {

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;
+    disabled?: boolean | undefined;
     hidden?: 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;
+        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean | undefined;
+        required?: boolean | undefined;
+        checked?: boolean | "mixed" | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/table/table-body.svelte

@@ -5,7 +5,7 @@
   @see https://w3c.github.io/aria/#rowgroup
 -->
 <script>
-  import { getRandomId } from '../../services/util';
+  import { generateElementId } from '@sveltia/utils/element';
 
   /**
    * The `class` attribute on the wrapper element.
@@ -20,7 +20,7 @@
    */
   export let label = '';
 
-  const id = getRandomId('tbody');
+  const id = generateElementId('tbody');
 </script>
 
 <div

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/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'));
+      }
+    });
+  });

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

@@ -0,0 +1,23 @@
+/**
+ * List of available buttons.
+ * @type {{ [key: string]: { labelKey: string, icon: string, inline: boolean } }}
+ */
+export const availableButtons: {
+    [key: string]: {
+        labelKey: string;
+        icon: string;
+        inline: boolean;
+    };
+};
+/**
+ * @type {TextEditorFormatType[]}
+ */
+export const textFormatButtonTypes: TextEditorFormatType[];
+/**
+ * @type {TextEditorInlineType[]}
+ */
+export const inlineButtonTypes: TextEditorInlineType[];
+/**
+ * @type {TextEditorBlockType[]}
+ */
+export const blockButtonTypes: TextEditorBlockType[];

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

@@ -0,0 +1,102 @@
+/**
+ * List of available buttons.
+ * @type {{ [key: string]: { labelKey: string, icon: string, inline: boolean } }}
+ */
+export const availableButtons = {
+  bold: {
+    labelKey: 'bold',
+    icon: 'format_bold',
+    inline: true,
+  },
+  italic: {
+    labelKey: 'italic',
+    icon: 'format_italic',
+    inline: true,
+  },
+  code: {
+    labelKey: 'code',
+    icon: 'code',
+    inline: true,
+  },
+  link: {
+    labelKey: 'link',
+    icon: 'link',
+    inline: true,
+  },
+  paragraph: {
+    labelKey: 'paragraph',
+    icon: 'format_paragraph',
+    inline: false,
+  },
+  'heading-1': {
+    labelKey: 'heading_1',
+    icon: 'format_h1',
+    inline: false,
+  },
+  'heading-2': {
+    labelKey: 'heading_2',
+    icon: 'format_h2',
+    inline: false,
+  },
+  'heading-3': {
+    labelKey: 'heading_3',
+    icon: 'format_h3',
+    inline: false,
+  },
+  'heading-4': {
+    labelKey: 'heading_4',
+    icon: 'format_h4',
+    inline: false,
+  },
+  'heading-5': {
+    labelKey: 'heading_5',
+    icon: 'format_h5',
+    inline: false,
+  },
+  'heading-6': {
+    labelKey: 'heading_6',
+    icon: 'format_h6',
+    inline: false,
+  },
+  'bulleted-list': {
+    labelKey: 'bulleted_list',
+    icon: 'format_list_bulleted',
+    inline: false,
+  },
+  'numbered-list': {
+    labelKey: 'numbered_list',
+    icon: 'format_list_numbered',
+    inline: false,
+  },
+  blockquote: {
+    labelKey: 'blockquote',
+    icon: 'format_quote',
+    inline: false,
+  },
+};
+
+/**
+ * @type {TextEditorFormatType[]}
+ */
+export const textFormatButtonTypes = ['bold', 'italic', 'code'];
+
+/**
+ * @type {TextEditorInlineType[]}
+ */
+export const inlineButtonTypes = [...textFormatButtonTypes, 'link'];
+
+/**
+ * @type {TextEditorBlockType[]}
+ */
+export const blockButtonTypes = [
+  'paragraph',
+  'heading-1',
+  'heading-2',
+  'heading-3',
+  'heading-4',
+  'heading-5',
+  'heading-6',
+  'bulleted-list',
+  'numbered-list',
+  'blockquote',
+];