poe-svelte-ui-lib 1.89.0 → 1.91.0

package/README.md

@@ -24,7 +24,7 @@
 
 **Компоненты.** Каждый привязывается к одной переменной устройства: `Input`, `Select`, `Switch`, `Slider`, `Button`, `Joystick`, `ProgressBar`, `Graph`, `PeriodChart`, `Table`, `FileAttach`, `VideoViewer`, `TextField`, `Widget`.
 
-**Раскладка.** `Accordion`, `Tabs`, `Divider`, `Carousel`, `Modal`.
+**Раскладка.** `Accordion`, `Tabs`, `Divider`, `Carousel`, `Modal`. У `Accordion` есть необязательный слот `actions` - кнопки справа в заголовке, нажатие на них блок не сворачивает.
 
 **Ядро протоколов** (`poe-svelte-ui-lib/protocols`). Кодирование и разбор пакетов для всех каналов связи с устройством. Работает без Svelte, в том числе под Node.
 
@@ -117,6 +117,8 @@ npm install poe-svelte-ui-lib
 
 Классы ролей (`.bg-red`, `.bg-max` и другие) и классы темы (`.light`, `.dark`) остаются вне слоя. Они как раз должны перебивать утилиты.
 
+Текст ячейки `Table` выводится как текст, теги в данных устройства не работают. Если ячейке нужна разметка (цвет, ссылка), у колонки ставят `html: true`, а данные в ней экранируют сами функцией `escapeHtml`. `formatting` возвращает HTML для окна и подсказки и тоже сам экранирует текст.
+
 Шапку `Table` можно перекрасить переменной `--table-header-color`. По умолчанию она `--accent-soft`, смарт-виджеты задают её сами от своего цвета.
 
 Посмотреть всю тему разом можно на вкладке «Тема» на главной витрины. Там палитра, все компоненты с демо-данными, типографика и Markdown.

package/dist/Accordion/Accordion.svelte

@@ -13,6 +13,7 @@
     size = { width: 1, height: 1 },
     label = { name: "", class: "text-left", icon: null },
     children,
+    actions,
     image = "",
   }: IAccordionProps = $props()
 
@@ -27,35 +28,41 @@
 >
   <div class="overflow-hidden rounded-[14px] border border-(--hairline-color) bg-(--back-color)">
     <!-- Фон заголовка - мягкий оттенок мастер-цвета (светлый в светлой теме, тёмный в тёмной), текст - мастер-цвет с цветом шрифта 60/40, раскрытое содержимое остаётся на чистом фоне (--back-color). -->
-    <button
-      class="flex w-full cursor-pointer items-center justify-between gap-3 bg-(--accent-soft) px-4 py-3 text-left text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] transition-colors duration-150 hover:bg-[color-mix(in_srgb,var(--accent-color)_12%,var(--accent-soft))]"
-      onclick={toggle}
-    >
-      <div class="flex min-w-0 flex-1 items-center gap-3">
-        {#if label?.icon}
-          <span
-            class="flex h-[18px] w-[18px] shrink-0 items-center justify-center text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] [&_svg]:h-full [&_svg]:w-full"
-          >
-            {#if typeof label?.icon === "string"}
-              {@html label.icon}
-            {:else}
-              {@const IconComponent = label?.icon}
-              <IconComponent />
-            {/if}
-          </span>
-        {/if}
-        <span class={twMerge(`min-w-0 truncate text-[14px] font-semibold`, label.class)}>{label?.name}</span>
-      </div>
-
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-[14px] w-[14px] shrink-0 text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] transition-transform duration-200"
-        style="transform: rotate({isOpen ? 180 : 0}deg)"
-        viewBox="0 0 24 24"
+    <!-- Заголовок: кнопка сворачивания на всю ширину и необязательные кнопки справа (actions) - вне неё, чтобы не сворачивать блок -->
+    <div class="flex w-full items-center bg-(--accent-soft)">
+      <button
+        class="flex min-w-0 flex-1 cursor-pointer items-center justify-between gap-3 px-4 py-3 text-left text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] transition-colors duration-150 hover:bg-[color-mix(in_srgb,var(--accent-color)_12%,var(--accent-soft))]"
+        onclick={toggle}
       >
-        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 9l6 6 6-6" />
-      </svg>
-    </button>
+        <div class="flex min-w-0 flex-1 items-center gap-3">
+          {#if label?.icon}
+            <span
+              class="flex h-[18px] w-[18px] shrink-0 items-center justify-center text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] [&_svg]:h-full [&_svg]:w-full"
+            >
+              {#if typeof label?.icon === "string"}
+                {@html label.icon}
+              {:else}
+                {@const IconComponent = label?.icon}
+                <IconComponent />
+              {/if}
+            </span>
+          {/if}
+          <span class={twMerge(`min-w-0 truncate text-[14px] font-semibold`, label.class)}>{label?.name}</span>
+        </div>
+
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-[14px] w-[14px] shrink-0 text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] transition-transform duration-200"
+          style="transform: rotate({isOpen ? 180 : 0}deg)"
+          viewBox="0 0 24 24"
+        >
+          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 9l6 6 6-6" />
+        </svg>
+      </button>
+      {#if actions}
+        <div class="flex shrink-0 items-center gap-1 pr-3">{@render actions()}</div>
+      {/if}
+    </div>
 
     {#if isOpen}
       <div

package/dist/Table/Table.svelte

@@ -8,6 +8,7 @@
   import { T } from "../locales/i18n"
   import { Button, Modal } from ".."
   import CopiedChip from "../CopiedChip.svelte"
+  import { escapeHtml, htmlToText } from "../html"
 
   let {
     id = crypto.randomUUID(),
@@ -150,18 +151,21 @@
     }, 250)
   }
 
+  /* Текст ячейки: из HTML-ячейки берётся видимый текст, formatting получает его и возвращает HTML */
+  const cellText = (value: unknown, html?: boolean) => (html ? htmlToText(String(value ?? "")) : String(value ?? ""))
+
   const showModal = async (text: string, formatting?: (text: string) => string) => {
     modalData = {
       isOpen: true,
       rawData: text,
-      formattedData: formatting ? formatting(text) : (text ?? ""),
+      formattedData: formatting ? formatting(text) : escapeHtml(text),
     }
   }
 
   const showTooltip = (event: MouseEvent, text: string, formatting?: (text: string) => string) => {
     tooltip = {
       show: true,
-      text: formatting ? formatting(text) : (text ?? ""),
+      text: formatting ? htmlToText(formatting(text)) : text,
       x: event.clientX,
       y: event.clientY,
     }
@@ -442,7 +446,7 @@
                         <div class="flex w-full min-w-0 items-center">
                           <div
                             class="w-full max-w-full min-w-0 wrap-break-word {text?.truncated ? 'truncate' : ' whitespace-normal'}"
-                            onmouseenter={text?.tooltip ? (e) => showTooltip(e, row[text?.key ?? ""], text?.formatting) : undefined}
+                            onmouseenter={text?.tooltip ? (e) => showTooltip(e, cellText(row[text?.key ?? ""], text?.html), text?.formatting) : undefined}
                             onmouseleave={() => (text?.tooltip ? (tooltip.show = false) : undefined)}
                             onmousemove={text?.tooltip
                               ? (e) => {
@@ -458,13 +462,15 @@
                                 class="cursor-pointer text-left {text?.truncated ? 'block w-full max-w-full truncate' : 'w-fit'}"
                                 onclick={(e) => {
                                   e.stopPropagation()
-                                  showModal(data.replace(/<[^>]*>/g, ""), text?.formatting)
+                                  showModal(cellText(data, text?.html), text?.formatting)
                                 }}
                               >
-                                {@html data}
+                                {#if text?.html}{@html data}{:else}{data}{/if}
                               </button>
-                            {:else}
+                            {:else if text?.html}
                               {@html data}
+                            {:else}
+                              {data}
                             {/if}
                           </div>
 
@@ -473,7 +479,7 @@
                               class="ml-1.5 flex size-5 shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent text-(--faint-color) transition-colors duration-150 hover:bg-(--container-color) hover:text-(--font-color)"
                               onclick={(e) => {
                                 e.preventDefault()
-                                navigator.clipboard.writeText(row[text?.key ?? ""].replace(/<[^>]*>/g, ""))
+                                navigator.clipboard.writeText(cellText(row[text?.key ?? ""], text?.html))
                                 copiedCell = { x: j, y: i }
                                 setTimeout(() => (copiedCell = null), 1000)
                               }}
@@ -514,7 +520,7 @@
         transition:fly={{ y: 8, duration: 200 }}
         role="tooltip"
       >
-        {@html tooltip.text.replace(/<[^>]*>/g, "")}
+        {tooltip.text}
       </div>
     {/if}
     <!-- Нижнее поле для сводной информации -->

package/dist/Table/xPoeDebugColumns.js

@@ -8,7 +8,7 @@ export const xPoeDebugTableColumns = [
     { label: { name: "ARG" }, content: [{ type: "text", data: { key: "argument" } }], width: tableMonoWidth(16, 3), align: "left" },
     {
         label: { name: "VALUE" },
-        content: [{ type: "text", data: { key: "value", truncated: true, formatting: formatXPoeDebugModal, copy: true, modal: true } }],
+        content: [{ type: "text", data: { key: "value", html: true, truncated: true, formatting: formatXPoeDebugModal, copy: true, modal: true } }],
         width: "1fr",
         align: "left",
     },

package/dist/WidgetStackInfo/WidgetStackInfo.svelte

@@ -78,8 +78,6 @@
   }
   const percentColor = (p: number) => (p >= 90 ? "var(--red-color)" : p >= 75 ? "var(--orange-color)" : "var(--muted-color)")
 
-  /* Имена задач приходят с устройства, а Table выводит ячейки через {@html} - экранируем */
-  const escapeHtml = (text: string) => text.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`)
   let STATES = $derived(["running", "ready", "blocked", "suspended", "deleted"].map((state) => $T(`widget.stack.state.${state}`)))
   const stackColor = (bytes: number) => (bytes < warnBytes ? "var(--red-color)" : bytes < warnBytes * 2 ? "var(--orange-color)" : "")
 
@@ -97,7 +95,7 @@
       const color = stackColor(t.FreeMin)
       const cpu = t.CPU === undefined ? "" : t.CPU.toFixed(1)
       return {
-        Name: escapeHtml(t.Name),
+        Name: t.Name,
         StateText: STATES[t.State] ?? "-",
         Prio: t.Prio,
         CoreText: t.Core === undefined ? "" : t.Core < 0 ? $T("widget.stack.core_any") : String(t.Core),
@@ -124,13 +122,13 @@
       ? [
           {
             label: { name: $T("widget.stack.cpu") },
-            content: [{ type: "text", data: { key: "CpuText" } }],
+            content: [{ type: "text", data: { key: "CpuText", html: true } }],
             width: "5.5rem",
             align: "right",
           } as ITableHeader<TaskRow>,
         ]
       : []),
-    { label: { name: $T("widget.stack.free_min") }, content: [{ type: "text", data: { key: "FreeMinText" } }], width: "6rem", align: "right" },
+    { label: { name: $T("widget.stack.free_min") }, content: [{ type: "text", data: { key: "FreeMinText", html: true } }], width: "6rem", align: "right" },
   ])
 </script>
 

package/dist/html.d.ts

@@ -0,0 +1,2 @@
+export declare const escapeHtml: (value: unknown) => string;
+export declare const htmlToText: (html: string) => string;

package/dist/html.js

@@ -0,0 +1,10 @@
+/* $lib/html.ts */
+const HTML_ESCAPES = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
+/* Текст для вставки в HTML: спецсимволы заменяются сущностями */
+export const escapeHtml = (value) => String(value ?? "").replace(/[&<>"']/g, (char) => HTML_ESCAPES[char]);
+/* Видимый текст HTML-строки: DOMParser создаёт неактивный документ, скрипты и обработчики в нём не запускаются */
+export const htmlToText = (html) => {
+    if (typeof DOMParser === "undefined")
+        return html.replace(/<[^>]*>?/g, "");
+    return new DOMParser().parseFromString(html, "text/html").body.textContent ?? "";
+};

package/dist/index.d.ts

@@ -60,6 +60,7 @@ export * from "./locales/i18n";
 export * from "./locales/languages";
 export * from "./locales/localize";
 export { widgetAccentStyle } from "./widgetAccent";
+export { escapeHtml, htmlToText } from "./html";
 export { hintsSetting, hint, type HintParams } from "./hints";
 export { applyDragGhost, clearDragGhost, createDropPlaceholder } from "./dragStyle";
 export * from "./ModalStackStore";

package/dist/index.js

@@ -61,6 +61,7 @@ export * from "./locales/i18n";
 export * from "./locales/languages";
 export * from "./locales/localize";
 export { widgetAccentStyle } from "./widgetAccent";
+export { escapeHtml, htmlToText } from "./html";
 export { hintsSetting, hint } from "./hints";
 export { applyDragGhost, clearDragGhost, createDropPlaceholder } from "./dragStyle";
 export * from "./ModalStackStore";

package/dist/protocols/xPoeDebugView.js

@@ -207,7 +207,7 @@ export function formatXPoeDebugModal(text) {
     const hexIndex = text.lastIndexOf(separator);
     const hex = hexIndex < 0 ? "" : text.slice(hexIndex + separator.length);
     const pretty = hex ? formatXPoeDebugPrettyHtml(hex) : null;
-    const decoded = pretty === null ? (hexIndex < 0 ? text : text.slice(0, hexIndex)) : pretty;
+    const decoded = pretty === null ? escapeHtml(hexIndex < 0 ? text : text.slice(0, hexIndex)) : pretty;
     const modalStyle = "display:flex;flex-direction:column;gap:.75rem;max-height:80vh;min-width:0;overflow-y:auto;overflow-x:hidden";
     const sectionStyle = "min-width:0;padding:.25rem 0 .75rem";
     const headingStyle = "display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:0 0 .5rem;font-weight:600";
@@ -215,5 +215,5 @@ export function formatXPoeDebugModal(text) {
     const buttonClass = "flex size-7 cursor-pointer items-center justify-center rounded-lg border-none bg-transparent text-(--faint-color) transition-colors duration-150 hover:bg-(--container-color) hover:text-(--font-color)";
     const textStyle = "display:block;min-width:0;max-width:100%;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;font:inherit";
     const pane = (title, target, value) => `<section style="${sectionStyle}"><div style="${headingStyle}"><span>${title}</span><button type="button" class="${buttonClass}" data-xpoe-copy="${target}" aria-label="Копировать ${title}" style="${buttonStyle}">${COPY_ICON}</button></div><pre style="${textStyle}">${value}</pre></section>`;
-    return `<div data-xpoe-debug-modal style="${modalStyle}">${pane("Value", "value", decoded)}${hexIndex < 0 ? "" : pane("HEX", "hex", hex)}</div>`;
+    return `<div data-xpoe-debug-modal style="${modalStyle}">${pane("Value", "value", decoded)}${hexIndex < 0 ? "" : pane("HEX", "hex", escapeHtml(hex))}</div>`;
 }

package/dist/types.d.ts

@@ -70,6 +70,7 @@ export interface IAccordionProps {
         icon?: ConstructorOfATypedSvelteComponent | string | null;
     };
     children?: Snippet;
+    actions?: Snippet;
     image?: string;
 }
 export interface IButtonProps {
@@ -316,6 +317,7 @@ export interface ITableText<T extends object> {
     sortable?: boolean;
     truncated?: boolean;
     tooltip?: boolean;
+    html?: boolean;
     formatting?: (text: string) => string;
     copy?: boolean;
     modal?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.89.0",
+  "version": "1.91.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oleg-Perevyshin/ElementsUI.git"