poe-svelte-ui-lib 1.47.0 → 1.49.0

package/README.md

@@ -110,7 +110,7 @@ npm install poe-svelte-ui-lib
 
 **README компонента** (`src/lib/<Компонент>/README.md`, вкладка «Инфо» витрины) — развёрнутая документация для разработчика. Первые разделы повторяют описание (i) и не должны ему противоречить, дальше идут разработческие: `## Назначение` (плюс заметка о размерах) → `## Пакет данных` (плюс `### Протокол устройства` / пример кода прошивки) → `## Ключи` (таблица «Ключ / Описание», те же формулировки, что в (i)) → `## Особенности` (поведение, ограничения) → `## Пропсы` (таблица «Название / Тип / По умолчанию / Описание», колбэки — `### Колбэки`) → `## Примеры` (Svelte) → `## Конструктор свойств (<Компонент>Props.svelte)` → `## Внутреннее устройство`.
 
-**Языки — единственный источник в библиотеке.** Список языков — `LANGUAGES` в `locales/languages.ts`: код, название и флаг (SVG-строка), без Svelte — годится и для серверного кода. **Новый язык — одна запись в `LANGUAGES`**: переключатели языка во всех приложениях (`LOCALES`), колонки окна «Тексты и переводы», многоязычные тексты GUI и словари подхватывают его сами; пока перевода нет — показывается текст языка по умолчанию (`DEFAULT_LANGUAGE`, `ru`). Словари (`Translations`) — строки-объекты по кодам `{ ru: "…", en: "…", zh: "…" }`: обязателен только язык по умолчанию, порядок не важен; недостающие переводы показывает `findMissingTranslations(словарь)`. `locales/i18n.ts` — текущий язык `Language`/`setLanguage` (неизвестный код не применяется, выбор сохраняется в `localStorage` `AppLanguage`), `restoreLanguage()` (сохранённый или язык браузера; стартовое значение всегда язык по умолчанию — серверный рендер совпадает с гидратацией, поэтому SSR-приложения вызывают его в `onMount` корневого layout, SPA — при старте), `LOCALES` (с флагом `flag`) и механизм перевода `createTranslator(словарь)`. Приложения (DevCloud, WebApp, терминал) свой список языков, хранилище и функцию перевода не держат: берут их из библиотеки и строят свой `$T` из своего словаря — `export const T = createTranslator(translations)`. Одно `setLanguage` переключает и компоненты библиотеки, и приложение. Многоязычные тексты GUI распознаются по виду ключей (коды языков), поэтому данные с языком, убранным из списка, не ломаются.
+**Языки — единственный источник в библиотеке.** Список языков — `LANGUAGES` в `locales/languages.ts`: код, название и флаг (SVG-строка), без Svelte — годится и для серверного кода. **Новый язык — одна запись в `LANGUAGES`**: переключатели языка во всех приложениях (`LOCALES`), колонки окна «Тексты и переводы», многоязычные тексты GUI и словари подхватывают его сами; пока перевода нет — показывается текст языка по умолчанию (`DEFAULT_LANGUAGE`, `ru`). Словари (`Translations`) — строки-объекты по кодам `{ ru: "…", en: "…", zh: "…" }`: обязателен только язык по умолчанию, порядок не важен; недостающие переводы показывает `findMissingTranslations(словарь)`. `locales/i18n.ts` — текущий язык `Language`/`setLanguage` (неизвестный код не применяется, выбор сохраняется в `localStorage` `AppLanguage`), `restoreLanguage()` (сохранённый или язык браузера; стартовое значение всегда язык по умолчанию — серверный рендер совпадает с гидратацией, поэтому SSR-приложения вызывают его в `onMount` корневого layout, SPA — при старте), `LOCALES` (с флагом `flag`) и механизм перевода `createTranslator(словарь)`. Код вне компонентов берёт текущий язык через `getLanguage()` (например, для заголовка `Accept-Language`), ключ хранилища и язык по умолчанию в приложениях не повторяются; серверный код переводит функцией `translate(словарь, язык, ключ)` на язык запроса, разобранный `resolveLanguage(Accept-Language)`. Приложения (DevCloud, WebApp, терминал) свой список языков, хранилище и функцию перевода не держат: берут их из библиотеки и строят свой `$T` из своего словаря — `export const T = createTranslator(translations)`. Одно `setLanguage` переключает и компоненты библиотеки, и приложение. Многоязычные тексты GUI распознаются по виду ключей (коды языков), поэтому данные с языком, убранным из списка, не ломаются.
 
 **Языки (ru/en/zh) — два слоя:**
 

package/dist/Dragging.svelte

@@ -38,7 +38,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
 

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/locales/i18n.d.ts

@@ -1,6 +1,7 @@
 import { type Readable } from "svelte/store";
 import { type LanguageCode, type Translations } from "./languages";
 export declare const Language: import("svelte/store").Writable<string>;
+export declare const getLanguage: () => LanguageCode;
 export declare function restoreLanguage(): void;
 export declare function setLanguage(newLang: string): void;
 export declare const LOCALES: {
@@ -11,5 +12,6 @@ export declare const LOCALES: {
 }[];
 export type TranslateParams = Record<string, string | number>;
 export type Translator = (key: string, params?: TranslateParams) => string;
+export declare const translate: (dictionary: Translations, locale: string, key: string, params?: TranslateParams) => string;
 export declare const createTranslator: (dictionary: Translations) => Readable<Translator>;
 export declare const T: Readable<Translator>;

package/dist/locales/i18n.js

@@ -1,6 +1,6 @@
-import { derived, writable } from "svelte/store";
+import { derived, get, writable } from "svelte/store";
 import translations from "./translations";
-import { DEFAULT_LANGUAGE, LANGUAGES, isLanguageCode } from "./languages";
+import { DEFAULT_LANGUAGE, LANGUAGES, isLanguageCode, resolveLanguage } from "./languages";
 /* Язык и механизм перевода — общие для библиотеки и приложений: приложение берёт отсюда Language/setLanguage/LOCALES и строит свой $T
    из своего словаря через createTranslator (см. README «Языки»); переключение языка одним setLanguage меняет и компоненты, и приложение */
 /*
@@ -8,6 +8,8 @@ import { DEFAULT_LANGUAGE, LANGUAGES, isLanguageCode } from "./languages";
   гидратации); сохранённый выбор применяет restoreLanguage(): в SSR-приложениях — в onMount корневого layout, в SPA — при старте
 */
 export const Language = writable(DEFAULT_LANGUAGE);
+/* Текущий язык — для заголовков запросов (Accept-Language) и прочего кода вне компонентов */
+export const getLanguage = () => resolveLanguage(get(Language));
 /* Сохранённый язык → язык браузера; неизвестный код не применяется */
 export function restoreLanguage() {
     if (typeof window === "undefined")
@@ -44,8 +46,8 @@ export const LOCALES = LANGUAGES.map((language) => ({
     value: language.value,
     flag: language.flag,
 }));
-/* Перевод по словарю: текущий язык → язык по умолчанию → сам ключ */
-const translate = (dictionary, locale, key, params) => {
+/* Перевод по словарю на заданный язык: язык → язык по умолчанию → сам ключ; без хранилища — для серверного кода (язык запроса) */
+export const translate = (dictionary, locale, key, params) => {
     const row = dictionary[key];
     const text = (row && (row[locale] || row[DEFAULT_LANGUAGE])) || key;
     return params ? text.replace(/\{(\w+)\}/g, (match, name) => (name in params ? String(params[name]) : match)) : text;

package/dist/locales/languages.d.ts

@@ -17,6 +17,7 @@ export declare const LANGUAGE_CODES: LanguageCode[];
 export type Translation = Record<typeof DEFAULT_LANGUAGE, string> & Partial<Record<LanguageCode, string>>;
 export type Translations = Record<string, Translation>;
 export declare const isLanguageCode: (value: unknown) => value is LanguageCode;
+export declare const resolveLanguage: (value: string | null | undefined) => LanguageCode;
 export declare const findMissingTranslations: (dictionary: Translations) => {
     key: string;
     languages: LanguageCode[];

package/dist/locales/languages.js

@@ -26,6 +26,11 @@ export const DEFAULT_LANGUAGE = "ru";
 /* Коды в порядке LANGUAGES — порядок показа в переключателях и колонках переводов */
 export const LANGUAGE_CODES = LANGUAGES.map((language) => language.value);
 export const isLanguageCode = (value) => LANGUAGE_CODES.includes(value);
+/* Код языка из произвольного значения (код, заголовок Accept-Language «en-US,en;q=0.9», язык браузера); неизвестный — язык по умолчанию */
+export const resolveLanguage = (value) => {
+    const code = value?.split(/[,;]/)[0]?.trim().split("-")[0]?.toLowerCase();
+    return isLanguageCode(code) ? code : DEFAULT_LANGUAGE;
+};
 /* Ключи словаря без перевода на какой-либо язык — для проверки полноты словаря при добавлении языка */
 export const findMissingTranslations = (dictionary) => Object.entries(dictionary)
     .map(([key, row]) => ({ key, languages: LANGUAGE_CODES.filter((code) => !row[code]) }))

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.47.0",
+  "version": "1.49.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oleg-Perevyshin/ElementsUI.git"