poe-svelte-ui-lib 1.48.0 → 1.50.0

package/dist/Dragging.README.md

@@ -72,3 +72,7 @@
 - При единственном элементе в `array` (`array.length == 1`) ручка визуально приглушена (`opacity-50`) и перетаскивание не запускается
 - Работает только с `MouseEvent` — нет отдельной поддержки touch/pointer-событий и клавиатурной перестановки (ручка фокусируема как `role="button"`, но `onkeydown` не обрабатывается — известное ограничение доступности)
 - `container`/`elementIndex`/`array` обязательны — компонент не проверяет их наличие и упадёт при обращении к `array.length` в классе, если `array` не передан
+
+## Вид перетаскивания
+
+Один на библиотеку и приложения — `dragStyle.ts` (`applyDragGhost`, `clearDragGhost`, `createDropPlaceholder`, экспортируются из пакета): перетаскиваемый элемент — фон с заметным оттенком акцента (30%), рамка акцентом и тень, курсор «захват»; место вставки — заливка мягким акцентом (`--accent-soft`) со штриховой рамкой акцентом. Тот же вид — у перетаскивания компонентов на холсте конструктора DevCloud.

package/dist/Dragging.svelte

@@ -2,6 +2,7 @@
   import { tick } from "svelte"
   import MoveVerticalIcon from "./libIcons/MoveVerticalIcon.svelte"
   import { twMerge } from "tailwind-merge"
+  import { applyDragGhost, clearDragGhost, createDropPlaceholder } from "./dragStyle"
 
   let dragState = $state({
     isDragging: false,
@@ -38,7 +39,8 @@
 
   /* Перетаскивание с MouseEvent */
   const startDrag = async (e: MouseEvent) => {
-    const movedElement = document.querySelector(
+    /* Строка ищется только внутри своего списка — id вида item-N есть и у других списков на странице */
+    const movedElement = container.querySelector(
       containerIndex == null ? `#${elementsId}-${elementIndex}` : `#${elementsId}-${elementIndex}-${containerIndex}`,
     ) as HTMLElement
 
@@ -47,24 +49,19 @@
     const element = movedElement.cloneNode(true) as HTMLElement
     const rect = movedElement.getBoundingClientRect()
 
-    /* Создаем визуальный эффект перетаскивания */
+    /* Визуальный эффект перетаскивания — общий для библиотеки и приложений (dragStyle.ts) */
     element.id = "drag-element"
     element.style.position = "fixed"
     element.style.zIndex = "9999"
     element.style.minHeight = `${rect.height}px`
     element.style.pointerEvents = "none"
     element.style.width = `${rect.width}px`
-    element.style.background = "var(--field-color)"
-    element.style.padding = "0.25rem"
-    element.style.borderRadius = "1rem"
+    element.style.left = `${rect.left}px`
     element.style.top = `${rect.top}px`
+    applyDragGhost(element)
     movedElement.parentNode?.appendChild(element)
 
-    const placeholder = document.createElement("div")
-    placeholder.style.minHeight = `${rect.height}px`
-    placeholder.style.width = "100%"
-    placeholder.style.border = "2px dashed var(--blue-color)"
-    placeholder.style.borderRadius = "1rem"
+    const placeholder = createDropPlaceholder(rect.height)
     element.parentNode?.insertBefore(placeholder, movedElement)
 
     const [movedItem] = array.splice(elementIndex, 1)
@@ -126,6 +123,7 @@
 
     if (dragState.placeholderElement) dragState.placeholderElement.remove()
     if (dragState.ghostElement) dragState.ghostElement.remove()
+    clearDragGhost()
 
     dragState = {
       isDragging: false,

package/dist/Tabs/README.md

@@ -38,6 +38,7 @@
 | `size.height`      | `number`                                                                                                                                               | `6`                                                                                | Количество строк в сетке содержимого                                                                                                                                                                                                                          |
 | `activeTab`        | `number`                                                                                                                                               | `0`                                                                                | Индекс активной вкладки; `$bindable` — `bind:activeTab` получает выбор по клику, изменение снаружи переключает вкладку                                                                                                                                        |
 | `items`            | `{ name?: string; icon?: ConstructorOfATypedSvelteComponent \| string; class?: string; children?: Snippet; onClick?: () => {}; disabled?: boolean }[]` | `[{ name: "tab 1", icon: "", class: "" }, { name: "tab 2", icon: "", class: "" }]` | Массив элементов вкладок                                                                                                                                                                                                                                      |
+| `items[].id`       | `string`                                                                                                                                               | `undefined`                                                                        | Стабильный id вкладки: окно свойств выдаёт его каждой вкладке, конструктор по нему переносит содержимое при перестановке/удалении вкладок (в GUI содержимое привязано к номеру вкладки — последний символ id дочернего компонента)                            |
 | `items[].name`     | `string`                                                                                                                                               | `undefined`                                                                        | Название (заголовок) вкладки                                                                                                                                                                                                                                  |
 | `items[].icon`     | `ConstructorOfATypedSvelteComponent \| string`                                                                                                         | `undefined`                                                                        | Иконка вкладки (SVG строка или Svelte-компонент)                                                                                                                                                                                                              |
 | `items[].class`    | `string`                                                                                                                                               | `undefined`                                                                        | CSS-классы для стилизации вкладки; `flex-row`/`flex-col`/`flex-row-reverse`/`flex-col-reverse` — позиция иконки относительно текста; `flex-1` — вкладка растягивается на равную долю ширины (учитывает отступы между кнопками), `w-auto` — ширина по контенту |
@@ -127,6 +128,8 @@
 
 ## Конструктор свойств (TabsProps.svelte)
 
+Окно «Вкладки» — список вкладок: у каждой строки заголовок «Вкладка N · название на текущем языке» (или «без названия»), иконка, «Отключить», перетаскивание за ручку слева и удаление; названия правятся в «Тексты и переводы». Новая вкладка создаётся без названия.
+
 ### Описание
 
 Компонент `TabsProps.svelte` предоставляет визуальный интерфейс для редактирования свойств компонента вкладок. Поддерживает два режима отображения: для конструктора и для редактирования.

package/dist/Tabs/TabsProps.svelte

@@ -11,6 +11,8 @@
   import CommonSnippets from "../CommonSnippets.svelte"
   import PropsGroup from "../PropsGroup.svelte"
   import PropsListModal from "../PropsListModal.svelte"
+  import { Language } from "../locales/i18n"
+  import { localizeText } from "../locales/localize"
 
   const {
     component,
@@ -24,6 +26,18 @@
 
   let itemsContainer: HTMLDivElement | null = $state(null)
 
+  /* У каждой вкладки — стабильный id: по нему конструктор переносит её содержимое при перестановке и удалении вкладок */
+  $effect(() => {
+    const items = component.properties.items ?? []
+    if (items.every((item: { id?: string }) => item.id)) return
+    updateProperty(
+      "items",
+      items.map((item: { id?: string }) => (item.id ? item : { ...item, id: crypto.randomUUID() })),
+      component,
+      onPropertyChange,
+    )
+  })
+
   const initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.wrapperClass))
 
   const initialPosition = $derived.by(() => {
@@ -91,8 +105,9 @@
               wrapperClass="w-8"
               content={{ icon: ButtonAdd }}
               onClick={() => {
-                const newItem: { name: string; icon: string; class: string } = {
-                  name: `Tab ${component.properties?.items.length + 1}`,
+                const newItem: { id: string; name: string; icon: string; class: string } = {
+                  id: crypto.randomUUID(),
+                  name: "",
                   class: `text-${initialColor?.value.slice(3)}-500 ${initialPosition?.value}`,
                   icon: "",
                 }
@@ -122,6 +137,11 @@
                 }}
               />
               <div class="flex flex-wrap items-end gap-2">
+                <!-- Какая это вкладка: номер и название на текущем языке (название правится в «Тексты и переводы») -->
+                <div class="flex w-full items-baseline gap-2 text-[13px]">
+                  <span class="font-semibold">{$T("constructor.props.tabs.item", { n: index + 1 })}</span>
+                  <span class="truncate text-(--muted-color)">{localizeText(tab.name, $Language) || $T("constructor.props.tabs.untitled")}</span>
+                </div>
                 <div class="relative min-w-32">
                   <CommonSnippets
                     snippet="IconsLib"

package/dist/dragStyle.d.ts

@@ -0,0 +1,3 @@
+export declare const applyDragGhost: (element: HTMLElement) => void;
+export declare const clearDragGhost: (element?: HTMLElement | null) => void;
+export declare const createDropPlaceholder: (height: number) => HTMLElement;

package/dist/dragStyle.js

@@ -0,0 +1,35 @@
+/* $lib/dragStyle.ts — единый вид перетаскивания для библиотеки и приложений (списки Dragging, холст конструктора DevCloud):
+   перетаскиваемый элемент — фон с заметным оттенком акцента, рамка акцентом и тень; место вставки — заливка мягким акцентом со штриховой рамкой */
+const GHOST_STYLE = {
+    background: "color-mix(in srgb, var(--accent-color) 30%, var(--back-color))",
+    outline: "2px solid var(--accent-color)",
+    outlineOffset: "-2px",
+    boxShadow: "var(--elevation-3)",
+    borderRadius: "12px",
+    opacity: "1",
+};
+/* Оформить перетаскиваемый элемент; курсор «захват» — на всё время перетаскивания */
+export const applyDragGhost = (element) => {
+    Object.assign(element.style, GHOST_STYLE);
+    document.body.style.cursor = "grabbing";
+};
+/* Снять оформление перетаскивания с элемента (если он остаётся на странице) и вернуть курсор */
+export const clearDragGhost = (element) => {
+    if (element)
+        for (const key of Object.keys(GHOST_STYLE))
+            element.style[key] = "";
+    document.body.style.cursor = "";
+};
+/* Место вставки: заливка мягким акцентом и штриховая рамка акцентом */
+export const createDropPlaceholder = (height) => {
+    const placeholder = document.createElement("div");
+    Object.assign(placeholder.style, {
+        minHeight: `${height}px`,
+        width: "100%",
+        background: "var(--accent-soft)",
+        border: "2px dashed var(--accent-color)",
+        borderRadius: "12px",
+        boxSizing: "border-box",
+    });
+    return placeholder;
+};

package/dist/index.d.ts

@@ -54,5 +54,6 @@ export * from "./locales/i18n";
 export * from "./locales/languages";
 export * from "./locales/localize";
 export { widgetAccentStyle } from "./widgetAccent";
+export { applyDragGhost, clearDragGhost, createDropPlaceholder } from "./dragStyle";
 export * from "./ModalStackStore";
 export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type IOption, type ISwitchProps, type IDividerProps, type ISliderProps, type ITextFieldProps, type IProgressBarProps, type IWidgetProps, type IWidgetWiFiProps, type IWidgetWiFiConfig, type IWidgetDeviceInfoProps, type IWidgetDeviceInfoConfig, type IWidgetFileSystemProps, type IWidgetFileSystemInfo, type IWidgetFileSystemFile, type IWidgetFileSystemUpload, type IWidgetStackInfoProps, type IWidgetStackInfo, type IWidgetStackInfoHeap, type IWidgetStackInfoTask, type IWidgetRGBStripProps, type IWidgetRGBStripConfig, type IWidgetPFDProps, type IWidgetPFDData, type IWidgetPFDLimits, type IWidgetMapProps, type IWidgetMapData, type IGraphProps, type IGraphDataObject, type IGraphHistoryPoint, type IGraphHistorySeries, type ITableHeader, type ITableText, type ITableSelect, type ITableButton, type ITableProgressBar, type ITableImage, type ITableContent, type ITableProps, type ITabsProps, type IJoystickProps, type IFileAttachProps, type ICarouselProps, type IReceivingDataObject, type IVideoViewerProps, type IPeriodChartProps, type IPeriodChartLevel, } from "./types";

package/dist/index.js

@@ -55,5 +55,6 @@ export * from "./locales/i18n";
 export * from "./locales/languages";
 export * from "./locales/localize";
 export { widgetAccentStyle } from "./widgetAccent";
+export { applyDragGhost, clearDragGhost, createDropPlaceholder } from "./dragStyle";
 export * from "./ModalStackStore";
 export {} from "./types";

package/dist/locales/translations.js

@@ -304,7 +304,9 @@ const translations = {
     "constructor.props.options.title": { ru: "Опции компонента", en: "Component options", zh: "组件选项" },
     "constructor.props.progressbar.title": { ru: "Полосы прогресса", en: "Progress bars", zh: "进度条" },
     "constructor.props.bits.title": { ru: "Биты", en: "Bits", zh: "位" },
-    "constructor.props.tabs.title": { ru: "Вкладки меню", en: "Menu tabs", zh: "菜单标签" },
+    "constructor.props.tabs.title": { ru: "Вкладки", en: "Tabs", zh: "标签页" },
+    "constructor.props.tabs.item": { ru: "Вкладка {n}", en: "Tab {n}", zh: "标签页 {n}" },
+    "constructor.props.tabs.untitled": { ru: "без названия", en: "untitled", zh: "未命名" },
     "constructor.props.periodchart.title": { ru: "Уровни детализации", en: "Detail levels", zh: "详细级别" },
     "constructor.props.periodchart.data": { ru: "Данные (через пробел)", en: "Data (comma-separated)", zh: "数据（逗号分隔）" },
     "constructor.props.periodchart.labels": { ru: "Подписи столбиков (через пробел)", en: "Bar labels (comma-separated)", zh: "柱标签（逗号分隔）" },

package/dist/types.d.ts

@@ -396,6 +396,7 @@ export interface ITabsProps {
     };
     activeTab?: number;
     items: {
+        id?: string;
         name?: string;
         icon?: ConstructorOfATypedSvelteComponent | string;
         class?: string;

package/package.json

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