@sveltia/ui 0.24.1 → 0.25.0

package/dist/components/alert/infobar.svelte

@@ -0,0 +1,100 @@
+<script>
+  import { _ } from 'svelte-i18n';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
+
+  /**
+   * @typedef {object} Props
+   * @property {boolean} [show] - Whether to show the toast.
+   * @property {boolean} [dismissible] - Whether to show the close button.
+   * @property {'error' | 'warning' | 'info' | 'success'} [status] - Information status.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
+   * @property {import('svelte').Snippet} [icon] - Icon slot content.
+   */
+
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    show = $bindable(true),
+    dismissible = true,
+    status = 'info',
+    children = undefined,
+    icon = undefined,
+    /* eslint-enable prefer-const */
+  } = $props();
+</script>
+
+{#if show}
+  <div role="none" class="infobar {status}">
+    <div role="alert" class="message">
+      {#if icon}
+        {@render icon()}
+      {:else}
+        <Icon name={status === 'success' ? 'check_circle' : status} />
+      {/if}
+      {@render children?.()}
+    </div>
+    {#if dismissible}
+      <div role="none">
+        <Button
+          iconic
+          size="small"
+          variant="ghost"
+          aria-label={$_('dismiss')}
+          onclick={() => {
+            show = false;
+          }}
+        >
+          <Icon name="close" />
+        </Button>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>.infobar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--sui-infobar-gap, 8px);
+  border-width: var(--sui-infobar-border-width, 0 0 1px);
+  border-style: var(--sui-infobar-border-style, solid);
+  padding: var(--sui-infobar-padding, 0);
+  min-height: var(--sui-infobar-min-height, 32px);
+  font-size: var(--sui-infobar-font-size, var(--sui-font-size-small));
+}
+.infobar.info {
+  border-color: var(--sui-info-border-color);
+  color: var(--sui-info-foreground-color);
+  background-color: var(--sui-info-background-color);
+}
+.infobar.warning {
+  border-color: var(--sui-warning-border-color);
+  color: var(--sui-warning-foreground-color);
+  background-color: var(--sui-warning-background-color);
+}
+.infobar.error {
+  border-color: var(--sui-error-border-color);
+  color: var(--sui-error-foreground-color);
+  background-color: var(--sui-error-background-color);
+}
+.infobar.success {
+  border-color: var(--sui-success-border-color);
+  color: var(--sui-success-foreground-color);
+  background-color: var(--sui-success-background-color);
+}
+
+.message {
+  flex: auto;
+  display: flex;
+  align-items: center;
+  justify-content: var(--sui-infobar-message-justify-content, left);
+  gap: var(--sui-infobar-message-gap, 6px);
+  padding: var(--sui-infobar-message-padding, 0 8px);
+}
+.message :global(button) {
+  font-size: inherit !important;
+}
+.message :global(.icon) {
+  font-size: 16px; /* !hardcoded */
+}</style>

package/dist/components/alert/infobar.svelte.d.ts

@@ -0,0 +1,49 @@
+export default Infobar;
+type Infobar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Infobar: import("svelte").Component<{
+    /**
+     * - Whether to show the toast.
+     */
+    show?: boolean | undefined;
+    /**
+     * - Whether to show the close button.
+     */
+    dismissible?: boolean | undefined;
+    /**
+     * - Information status.
+     */
+    status?: "error" | "warning" | "info" | "success" | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Icon slot content.
+     */
+    icon?: import("svelte").Snippet<[]> | undefined;
+}, {}, "show">;
+type Props = {
+    /**
+     * - Whether to show the toast.
+     */
+    show?: boolean | undefined;
+    /**
+     * - Whether to show the close button.
+     */
+    dismissible?: boolean | undefined;
+    /**
+     * - Information status.
+     */
+    status?: "error" | "warning" | "info" | "success" | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Icon slot content.
+     */
+    icon?: import("svelte").Snippet<[]> | undefined;
+};

package/dist/components/slider/slider.svelte

@@ -43,7 +43,7 @@
     min = 0,
     max = 100,
     sliderLabel = '',
-    values = undefined,
+    values = $bindable(undefined),
     sliderLabels = undefined,
     step = 1,
     optionLabels = [],

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

@@ -83,7 +83,7 @@ declare const Slider: import("svelte").Component<{
         values?: number[];
         value?: number;
     }) => void) | undefined;
-} & Record<string, any>, {}, "value">;
+} & Record<string, any>, {}, "value" | "values">;
 type Props = {
     /**
      * - Current value.

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

@@ -52,8 +52,9 @@ import {
 } from 'lexical';
 import prismComponents from 'prismjs/components';
 import { blockButtonTypes, textFormatButtonTypes } from '.';
+import { TABLE } from './transformers/table';
 
-const allTransformers = [...TRANSFORMERS];
+const allTransformers = [...TRANSFORMERS, TABLE];
 
 /**
  * Lexical editor configuration.

package/dist/components/text-editor/lexical-root.svelte

@@ -195,6 +195,12 @@
 .lexical-root :global([data-lexical-text=true]) {
   cursor: text;
 }
+.lexical-root :global(th) > :global(p),
+.lexical-root :global(td) > :global(p) {
+  margin: 0;
+  white-space: normal;
+  word-break: normal;
+}
 
 :root[data-theme=light] .lexical-root :global(.token.comment),
 :root[data-theme=light] .lexical-root :global(.token.prolog),

package/dist/components/text-editor/transformers/table.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @type {import('@lexical/markdown').ElementTransformer}
+ */
+export const TABLE: import("@lexical/markdown").ElementTransformer;

package/dist/components/text-editor/transformers/table.js

@@ -0,0 +1,209 @@
+// Adopted from https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/MarkdownTransformers/index.ts
+
+/* eslint-disable jsdoc/require-jsdoc */
+/* eslint-disable jsdoc/require-returns-description */
+/* eslint-disable jsdoc/require-param-description */
+
+import {
+  TRANSFORMERS,
+  $convertFromMarkdownString as convertFromMarkdownString,
+  $convertToMarkdownString as convertToMarkdownString,
+} from '@lexical/markdown';
+import {
+  TableCellHeaderStates,
+  TableCellNode,
+  TableNode,
+  TableRowNode,
+  $createTableCellNode as createTableCellNode,
+  $createTableNode as createTableNode,
+  $createTableRowNode as createTableRowNode,
+  $isTableCellNode as isTableCellNode,
+  $isTableNode as isTableNode,
+  $isTableRowNode as isTableRowNode,
+} from '@lexical/table';
+import { $isParagraphNode as isParagraphNode, $isTextNode as isTextNode } from 'lexical';
+
+const TABLE_ROW_REG_EXP = /^(?:\|)(.+)(?:\|)\s?$/;
+const TABLE_ROW_DIVIDER_REG_EXP = /^(\| ?:?-*:? ?)+\|\s?$/;
+
+/**
+ * Returns the number of columns in the table.
+ * @param {TableNode} table
+ * @returns {number}
+ */
+function getTableColumnsSize(table) {
+  const row = table.getFirstChild();
+
+  return isTableRowNode(row) ? row.getChildrenSize() : 0;
+}
+
+/**
+ * Creates a table cell with the given text content.
+ * @param {string} textContent
+ * @returns {TableCellNode}
+ */
+const createTableCell = (textContent) => {
+  textContent = textContent.replace(/\\n/g, '\n');
+
+  const cell = createTableCellNode(TableCellHeaderStates.NO_STATUS);
+
+  convertFromMarkdownString(textContent, TRANSFORMERS, cell);
+
+  return cell;
+};
+
+/**
+ * Maps the given text content to an array of table cells.
+ * @param {string} textContent
+ * @returns {TableCellNode[] | null}
+ */
+const mapToTableCells = (textContent) => {
+  const [, match] = textContent.match(TABLE_ROW_REG_EXP) ?? [];
+
+  if (!match) {
+    return null;
+  }
+
+  return match.split('|').map((text) => createTableCell(text));
+};
+
+/**
+ * @type {import('@lexical/markdown').ElementTransformer}
+ */
+export const TABLE = {
+  dependencies: [TableNode, TableRowNode, TableCellNode],
+  export: (node) => {
+    if (!isTableNode(node)) {
+      return null;
+    }
+
+    /** @type {string[]} */
+    const output = [];
+
+    node.getChildren().forEach((row) => {
+      /** @type {string[]} */
+      const rowOutput = [];
+
+      if (!isTableRowNode(row)) {
+        return;
+      }
+
+      let isHeaderRow = false;
+
+      row.getChildren().forEach((cell) => {
+        // It’s TableCellNode so it’s just to make flow happy
+        if (isTableCellNode(cell)) {
+          rowOutput.push(convertToMarkdownString(TRANSFORMERS, cell).replace(/\n/g, '\\n').trim());
+
+          if (cell.__headerState === TableCellHeaderStates.ROW) {
+            isHeaderRow = true;
+          }
+        }
+      });
+
+      output.push(`| ${rowOutput.join(' | ')} |`);
+
+      if (isHeaderRow) {
+        output.push(`| ${rowOutput.map(() => '---').join(' | ')} |`);
+      }
+    });
+
+    return output.join('\n');
+  },
+  regExp: TABLE_ROW_REG_EXP,
+  replace: (parentNode, _children, [textContent]) => {
+    // Header row
+    if (TABLE_ROW_DIVIDER_REG_EXP.test(textContent)) {
+      const table = parentNode.getPreviousSibling();
+
+      if (!table || !isTableNode(table)) {
+        return;
+      }
+
+      const rows = table.getChildren();
+      const lastRow = rows[rows.length - 1];
+
+      if (!lastRow || !isTableRowNode(lastRow)) {
+        return;
+      }
+
+      // Add header state to row cells
+      lastRow.getChildren().forEach((cell) => {
+        if (!isTableCellNode(cell)) {
+          return;
+        }
+
+        cell.setHeaderStyles(TableCellHeaderStates.ROW, TableCellHeaderStates.ROW);
+      });
+
+      // Remove line
+      parentNode.remove();
+
+      return;
+    }
+
+    const matchCells = mapToTableCells(textContent);
+
+    if (!matchCells) {
+      return;
+    }
+
+    const rows = [matchCells];
+    let sibling = parentNode.getPreviousSibling();
+    let maxCells = matchCells.length;
+
+    while (sibling) {
+      if (!isParagraphNode(sibling)) {
+        break;
+      }
+
+      if (sibling.getChildrenSize() !== 1) {
+        break;
+      }
+
+      const firstChild = sibling.getFirstChild();
+
+      if (!isTextNode(firstChild)) {
+        break;
+      }
+
+      const cells = mapToTableCells(firstChild.getTextContent());
+
+      if (!cells) {
+        break;
+      }
+
+      maxCells = Math.max(maxCells, cells.length);
+      rows.unshift(cells);
+
+      const previousSibling = sibling.getPreviousSibling();
+
+      sibling.remove();
+      sibling = previousSibling;
+    }
+
+    const table = createTableNode();
+
+    rows.forEach((cells) => {
+      const tableRow = createTableRowNode();
+
+      table.append(tableRow);
+
+      for (let i = 0; i < maxCells; i += 1) {
+        tableRow.append(i < cells.length ? cells[i] : createTableCell(''));
+      }
+    });
+
+    const previousSibling = parentNode.getPreviousSibling();
+
+    if (isTableNode(previousSibling) && getTableColumnsSize(previousSibling) === maxCells) {
+      previousSibling.append(...table.getChildren());
+      parentNode.remove();
+    } else {
+      parentNode.replace(table);
+    }
+
+    table.selectEnd();
+  },
+  type: 'element',
+};

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export function initLocales({ fallbackLocale, initialLocale }?: {
     initialLocale?: string | undefined;
 } | undefined): void;
 export { default as Alert } from "./components/alert/alert.svelte";
+export { default as Infobar } from "./components/alert/infobar.svelte";
 export { default as ButtonGroup } from "./components/button/button-group.svelte";
 export { default as Button } from "./components/button/button.svelte";
 export { default as SelectButtonGroup } from "./components/button/select-button-group.svelte";

package/dist/index.js

@@ -28,6 +28,7 @@ export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}
 initLocales();
 
 export { default as Alert } from './components/alert/alert.svelte';
+export { default as Infobar } from './components/alert/infobar.svelte';
 export { default as ButtonGroup } from './components/button/button-group.svelte';
 export { default as Button } from './components/button/button.svelte';
 export { default as SelectButtonGroup } from './components/button/select-button-group.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.24.1",
+  "version": "0.25.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -28,19 +28,19 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "@lexical/code": "^0.24.0",
-    "@lexical/dragon": "^0.24.0",
-    "@lexical/history": "^0.24.0",
-    "@lexical/link": "^0.24.0",
-    "@lexical/list": "^0.24.0",
-    "@lexical/markdown": "^0.24.0",
-    "@lexical/rich-text": "^0.24.0",
-    "@lexical/selection": "^0.24.0",
-    "@lexical/table": "^0.24.0",
-    "@lexical/utils": "^0.24.0",
+    "@lexical/code": "^0.25.0",
+    "@lexical/dragon": "^0.25.0",
+    "@lexical/history": "^0.25.0",
+    "@lexical/link": "^0.25.0",
+    "@lexical/list": "^0.25.0",
+    "@lexical/markdown": "^0.25.0",
+    "@lexical/rich-text": "^0.25.0",
+    "@lexical/selection": "^0.25.0",
+    "@lexical/table": "^0.25.0",
+    "@lexical/utils": "^0.25.0",
     "@sveltia/utils": "^0.6.3",
-    "prismjs": "^1.29.0",
-    "lexical": "^0.24.0"
+    "lexical": "^0.25.0",
+    "prismjs": "^1.29.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
@@ -51,27 +51,27 @@
     "@sveltejs/kit": "^2.17.2",
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "5.0.3",
-    "cspell": "^8.17.3",
+    "cspell": "^8.17.5",
     "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsdoc": "^50.6.3",
     "eslint-plugin-svelte": "^2.46.1",
-    "postcss": "^8.5.2",
+    "postcss": "^8.5.3",
     "postcss-html": "^1.8.0",
-    "prettier": "^3.5.1",
+    "prettier": "^3.5.2",
     "prettier-plugin-svelte": "^3.3.3",
     "sass": "^1.85.0",
     "stylelint": "^16.14.1",
     "stylelint-config-recommended-scss": "^14.1.0",
-    "stylelint-scss": "^6.11.0",
+    "stylelint-scss": "^6.11.1",
     "svelte": "5.20.2",
     "svelte-check": "^4.1.4",
     "svelte-i18n": "^4.0.1",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "vite": "^6.1.0",
+    "vite": "^6.1.1",
     "vitest": "^3.0.6"
   },
   "exports": {
@@ -94,7 +94,8 @@
   },
   "pnpm": {
     "overrides": {
-      "cookie@<0.7.0": ">=0.7.0"
+      "cookie@<0.7.0": ">=0.7.0",
+      "esbuild@<=0.24.2": ">=0.25.0"
     }
   }
 }