poe-svelte-ui-lib 1.48.0 → 1.49.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Dragging.svelte +2 -1
- package/dist/Tabs/README.md +3 -0
- package/dist/Tabs/TabsProps.svelte +22 -2
- package/dist/locales/translations.js +3 -1
- package/dist/types.d.ts +1 -0
- package/package.json +1 -1
package/dist/Dragging.svelte
CHANGED
|
@@ -38,7 +38,8 @@
|
|
|
38
38
|
|
|
39
39
|
/* Перетаскивание с MouseEvent */
|
|
40
40
|
const startDrag = async (e: MouseEvent) => {
|
|
41
|
-
|
|
41
|
+
/* Строка ищется только внутри своего списка — id вида item-N есть и у других списков на странице */
|
|
42
|
+
const movedElement = container.querySelector(
|
|
42
43
|
containerIndex == null ? `#${elementsId}-${elementIndex}` : `#${elementsId}-${elementIndex}-${containerIndex}`,
|
|
43
44
|
) as HTMLElement
|
|
44
45
|
|
package/dist/Tabs/README.md
CHANGED
|
@@ -38,6 +38,7 @@
|
|
|
38
38
|
| `size.height` | `number` | `6` | Количество строк в сетке содержимого |
|
|
39
39
|
| `activeTab` | `number` | `0` | Индекс активной вкладки; `$bindable` — `bind:activeTab` получает выбор по клику, изменение снаружи переключает вкладку |
|
|
40
40
|
| `items` | `{ name?: string; icon?: ConstructorOfATypedSvelteComponent \| string; class?: string; children?: Snippet; onClick?: () => {}; disabled?: boolean }[]` | `[{ name: "tab 1", icon: "", class: "" }, { name: "tab 2", icon: "", class: "" }]` | Массив элементов вкладок |
|
|
41
|
+
| `items[].id` | `string` | `undefined` | Стабильный id вкладки: окно свойств выдаёт его каждой вкладке, конструктор по нему переносит содержимое при перестановке/удалении вкладок (в GUI содержимое привязано к номеру вкладки — последний символ id дочернего компонента) |
|
|
41
42
|
| `items[].name` | `string` | `undefined` | Название (заголовок) вкладки |
|
|
42
43
|
| `items[].icon` | `ConstructorOfATypedSvelteComponent \| string` | `undefined` | Иконка вкладки (SVG строка или Svelte-компонент) |
|
|
43
44
|
| `items[].class` | `string` | `undefined` | CSS-классы для стилизации вкладки; `flex-row`/`flex-col`/`flex-row-reverse`/`flex-col-reverse` — позиция иконки относительно текста; `flex-1` — вкладка растягивается на равную долю ширины (учитывает отступы между кнопками), `w-auto` — ширина по контенту |
|
|
@@ -127,6 +128,8 @@
|
|
|
127
128
|
|
|
128
129
|
## Конструктор свойств (TabsProps.svelte)
|
|
129
130
|
|
|
131
|
+
Окно «Вкладки» — список вкладок: у каждой строки заголовок «Вкладка N · название на текущем языке» (или «без названия»), иконка, «Отключить», перетаскивание за ручку слева и удаление; названия правятся в «Тексты и переводы». Новая вкладка создаётся без названия.
|
|
132
|
+
|
|
130
133
|
### Описание
|
|
131
134
|
|
|
132
135
|
Компонент `TabsProps.svelte` предоставляет визуальный интерфейс для редактирования свойств компонента вкладок. Поддерживает два режима отображения: для конструктора и для редактирования.
|
|
@@ -11,6 +11,8 @@
|
|
|
11
11
|
import CommonSnippets from "../CommonSnippets.svelte"
|
|
12
12
|
import PropsGroup from "../PropsGroup.svelte"
|
|
13
13
|
import PropsListModal from "../PropsListModal.svelte"
|
|
14
|
+
import { Language } from "../locales/i18n"
|
|
15
|
+
import { localizeText } from "../locales/localize"
|
|
14
16
|
|
|
15
17
|
const {
|
|
16
18
|
component,
|
|
@@ -24,6 +26,18 @@
|
|
|
24
26
|
|
|
25
27
|
let itemsContainer: HTMLDivElement | null = $state(null)
|
|
26
28
|
|
|
29
|
+
/* У каждой вкладки — стабильный id: по нему конструктор переносит её содержимое при перестановке и удалении вкладок */
|
|
30
|
+
$effect(() => {
|
|
31
|
+
const items = component.properties.items ?? []
|
|
32
|
+
if (items.every((item: { id?: string }) => item.id)) return
|
|
33
|
+
updateProperty(
|
|
34
|
+
"items",
|
|
35
|
+
items.map((item: { id?: string }) => (item.id ? item : { ...item, id: crypto.randomUUID() })),
|
|
36
|
+
component,
|
|
37
|
+
onPropertyChange,
|
|
38
|
+
)
|
|
39
|
+
})
|
|
40
|
+
|
|
27
41
|
const initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.wrapperClass))
|
|
28
42
|
|
|
29
43
|
const initialPosition = $derived.by(() => {
|
|
@@ -91,8 +105,9 @@
|
|
|
91
105
|
wrapperClass="w-8"
|
|
92
106
|
content={{ icon: ButtonAdd }}
|
|
93
107
|
onClick={() => {
|
|
94
|
-
const newItem: { name: string; icon: string; class: string } = {
|
|
95
|
-
|
|
108
|
+
const newItem: { id: string; name: string; icon: string; class: string } = {
|
|
109
|
+
id: crypto.randomUUID(),
|
|
110
|
+
name: "",
|
|
96
111
|
class: `text-${initialColor?.value.slice(3)}-500 ${initialPosition?.value}`,
|
|
97
112
|
icon: "",
|
|
98
113
|
}
|
|
@@ -122,6 +137,11 @@
|
|
|
122
137
|
}}
|
|
123
138
|
/>
|
|
124
139
|
<div class="flex flex-wrap items-end gap-2">
|
|
140
|
+
<!-- Какая это вкладка: номер и название на текущем языке (название правится в «Тексты и переводы») -->
|
|
141
|
+
<div class="flex w-full items-baseline gap-2 text-[13px]">
|
|
142
|
+
<span class="font-semibold">{$T("constructor.props.tabs.item", { n: index + 1 })}</span>
|
|
143
|
+
<span class="truncate text-(--muted-color)">{localizeText(tab.name, $Language) || $T("constructor.props.tabs.untitled")}</span>
|
|
144
|
+
</div>
|
|
125
145
|
<div class="relative min-w-32">
|
|
126
146
|
<CommonSnippets
|
|
127
147
|
snippet="IconsLib"
|
|
@@ -304,7 +304,9 @@ const translations = {
|
|
|
304
304
|
"constructor.props.options.title": { ru: "Опции компонента", en: "Component options", zh: "组件选项" },
|
|
305
305
|
"constructor.props.progressbar.title": { ru: "Полосы прогресса", en: "Progress bars", zh: "进度条" },
|
|
306
306
|
"constructor.props.bits.title": { ru: "Биты", en: "Bits", zh: "位" },
|
|
307
|
-
"constructor.props.tabs.title": { ru: "Вкладки
|
|
307
|
+
"constructor.props.tabs.title": { ru: "Вкладки", en: "Tabs", zh: "标签页" },
|
|
308
|
+
"constructor.props.tabs.item": { ru: "Вкладка {n}", en: "Tab {n}", zh: "标签页 {n}" },
|
|
309
|
+
"constructor.props.tabs.untitled": { ru: "без названия", en: "untitled", zh: "未命名" },
|
|
308
310
|
"constructor.props.periodchart.title": { ru: "Уровни детализации", en: "Detail levels", zh: "详细级别" },
|
|
309
311
|
"constructor.props.periodchart.data": { ru: "Данные (через пробел)", en: "Data (comma-separated)", zh: "数据（逗号分隔）" },
|
|
310
312
|
"constructor.props.periodchart.labels": { ru: "Подписи столбиков (через пробел)", en: "Bar labels (comma-separated)", zh: "柱标签（逗号分隔）" },
|
package/dist/types.d.ts
CHANGED