poe-svelte-ui-lib 1.31.5 → 1.31.6
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/Table/README.md +2 -2
- package/dist/Table/Table.svelte +17 -19
- package/dist/locales/translations.js +1 -0
- package/package.json +1 -1
package/dist/Table/README.md
CHANGED
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
| `dataBuffer.stashData` | `boolean` | `false` | Включить буферизацию данных |
|
|
21
21
|
| `dataBuffer.bufferSize` | `number` | `10` | Размер буфера данных |
|
|
22
22
|
| `dataBuffer.visibleRows` | `number` | `5` | Количество видимых строк при ограничении высоты |
|
|
23
|
-
| `dataBuffer.clearButton` | `boolean` | `false` |
|
|
24
|
-
| `dataBuffer.clearClass` | `string` | `""` |
|
|
23
|
+
| `dataBuffer.clearButton` | `boolean` | `false` | Кнопка очистки буфера с подсказкой — в собственной узкой колонке справа (шапка и строки), заголовки столбцов не перекрывает |
|
|
24
|
+
| `dataBuffer.clearClass` | `string` | `""` | Дополнительные классы кнопки очистки (размер, цвета) — позиционировать не нужно |
|
|
25
25
|
| `dataBuffer.logger` | `boolean` | `false` | Режим журнала (добавление новых строк в начало) |
|
|
26
26
|
| `outline` | `boolean` | `false` | Показывать обводку строк и столбцов |
|
|
27
27
|
| `cursor` | `string \| null` | `null` | Курсор пагинации для бесконечной прокрутки: передаётся в `getData` при достижении конца списка; при `null` загрузка новых данных отключена |
|
package/dist/Table/Table.svelte
CHANGED
|
@@ -37,6 +37,11 @@
|
|
|
37
37
|
let selectSlideDuration: number = $state(250)
|
|
38
38
|
let copiedCell: { x: number; y: number } | null = $state(null)
|
|
39
39
|
let tooltip = $state({ show: false, text: "", x: 0, y: 0 })
|
|
40
|
+
/* Шаблон колонок общий для шапки и строк; кнопка очистки — отдельная узкая колонка, чтобы не перекрывать заголовки */
|
|
41
|
+
const ACTIONS_COLUMN = "2.5rem"
|
|
42
|
+
let gridTemplate = $derived(
|
|
43
|
+
[...(header || []).filter((c) => c.width !== "0%").map((c) => c.width || "minmax(0, 1fr)"), ...(dataBuffer.clearButton ? [ACTIONS_COLUMN] : [])].join(" "),
|
|
44
|
+
)
|
|
40
45
|
let isScrollable: boolean = $derived(container ? (container as HTMLElement).scrollHeight > (container as HTMLElement).clientHeight : false)
|
|
41
46
|
let tableHeight = $state(0)
|
|
42
47
|
let modalData: { isOpen: boolean; rawData?: string; formattedData?: string } = $state({ isOpen: false, rawData: "", formattedData: "" })
|
|
@@ -247,10 +252,7 @@
|
|
|
247
252
|
class="grid border-b border-(--hairline-color) bg-(--container-color) text-[11px] font-bold tracking-[0.06em] text-(--muted-color) uppercase {isScrollable
|
|
248
253
|
? 'border-r-8 border-r-(--container-color)'
|
|
249
254
|
: ''}"
|
|
250
|
-
style={`grid-template-columns: ${
|
|
251
|
-
.filter((c) => c.width !== "0%")
|
|
252
|
-
.map((c) => c.width || "minmax(0, 1fr)")
|
|
253
|
-
.join(" ")};`}
|
|
255
|
+
style={`grid-template-columns: ${gridTemplate};`}
|
|
254
256
|
>
|
|
255
257
|
{#each header as column, index (column)}
|
|
256
258
|
{#if column.width !== "0%"}
|
|
@@ -277,18 +279,16 @@
|
|
|
277
279
|
</div>
|
|
278
280
|
{/if}
|
|
279
281
|
{/each}
|
|
282
|
+
{#if dataBuffer.clearButton}
|
|
283
|
+
<div class="flex items-center justify-center tracking-normal normal-case">
|
|
284
|
+
<Button
|
|
285
|
+
componentClass={twMerge("size-7 p-1.5 text-(--muted-color) hover:text-(--red-color)", dataBuffer.clearClass)}
|
|
286
|
+
content={{ icon: ButtonClear, info: { text: $T("common.table.clear"), side: "left" } }}
|
|
287
|
+
onClick={clearBuffer}
|
|
288
|
+
/>
|
|
289
|
+
</div>
|
|
290
|
+
{/if}
|
|
280
291
|
</div>
|
|
281
|
-
{#if dataBuffer.clearButton}
|
|
282
|
-
<button
|
|
283
|
-
class={twMerge(
|
|
284
|
-
"absolute top-1 right-2 flex size-7 cursor-pointer items-center justify-center rounded-lg bg-(--back-color) p-1.5 text-(--muted-color) transition-colors duration-150 hover:bg-(--container-color) hover:text-(--font-color) [&_svg]:h-full [&_svg]:w-full",
|
|
285
|
-
dataBuffer.clearClass,
|
|
286
|
-
)}
|
|
287
|
-
onclick={clearBuffer}
|
|
288
|
-
>
|
|
289
|
-
<ButtonClear />
|
|
290
|
-
</button>
|
|
291
|
-
{/if}
|
|
292
292
|
|
|
293
293
|
{#if bodyArray.length > 0 || buffer.length > 0}
|
|
294
294
|
{@const rows = dataBuffer.stashData ? buffer.slice(-(dataBuffer.bufferSize ?? 10)) : bodyArray.filter((row: any) => Object.entries(row).length != 0)}
|
|
@@ -298,10 +298,7 @@
|
|
|
298
298
|
{#each rows as row, i (row.__rowId ?? row)}
|
|
299
299
|
<div
|
|
300
300
|
class="grid border-t border-(--hairline-color) transition-colors duration-150 hover:bg-(--accent-soft)"
|
|
301
|
-
style={`grid-template-columns: ${
|
|
302
|
-
.filter((c) => c.width !== "0%")
|
|
303
|
-
.map((c) => c.width || "minmax(0, 1fr)")
|
|
304
|
-
.join(" ")};`}
|
|
301
|
+
style={`grid-template-columns: ${gridTemplate};`}
|
|
305
302
|
>
|
|
306
303
|
{#each header as column, j (column)}
|
|
307
304
|
{#if column.width !== "0%"}
|
|
@@ -492,6 +489,7 @@
|
|
|
492
489
|
</div>
|
|
493
490
|
{/if}
|
|
494
491
|
{/each}
|
|
492
|
+
{#if dataBuffer.clearButton}<div></div>{/if}
|
|
495
493
|
</div>
|
|
496
494
|
{/each}
|
|
497
495
|
</div>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
const translations = {
|
|
2
2
|
"common.select_tag": ["Сделайте выбор", "Make a choice", "请选择"],
|
|
3
|
+
"common.table.clear": ["Очистить таблицу", "Clear table", "清空表格"],
|
|
3
4
|
"debug.baud_rate_data": ["Данные", "Data", "数据"],
|
|
4
5
|
"library.for_constructor": ["Для конструктора", "For constructor", "用于构造器"],
|
|
5
6
|
"library.overview": ["Обзор", "Overview", "概览"],
|