poe-svelte-ui-lib 1.31.5 → 1.31.7

package/dist/Table/README.md

@@ -20,8 +20,8 @@
 | `dataBuffer.stashData`   | `boolean`                                     | `false`               | Включить буферизацию данных                                                                                                                                                                                              |
 | `dataBuffer.bufferSize`  | `number`                                      | `10`                  | Размер буфера данных                                                                                                                                                                                                     |
 | `dataBuffer.visibleRows` | `number`                                      | `5`                   | Количество видимых строк при ограничении высоты                                                                                                                                                                          |
-| `dataBuffer.clearButton` | `boolean`                                     | `false`               | Показывать кнопку очистки буфера                                                                                                                                                                                         |
-| `dataBuffer.clearClass`  | `string`                                      | `""`                  | CSS-класс для кнопки очистки                                                                                                                                                                                             |
+| `dataBuffer.clearButton` | `boolean`                                     | `false`               | Кнопка очистки буфера с подсказкой — в собственной узкой колонке справа (шапка и строки), заголовки столбцов не перекрывает                                                                                              |
+| `dataBuffer.clearClass`  | `string`                                      | `""`                  | Дополнительные классы кнопки очистки (размер, цвета) — позиционировать не нужно                                                                                                                                          |
 | `dataBuffer.logger`      | `boolean`                                     | `false`               | Режим журнала (добавление новых строк в начало)                                                                                                                                                                          |
 | `outline`                | `boolean`                                     | `false`               | Показывать обводку строк и столбцов                                                                                                                                                                                      |
 | `cursor`                 | `string \| null`                              | `null`                | Курсор пагинации для бесконечной прокрутки: передаётся в `getData` при достижении конца списка; при `null` загрузка новых данных отключена                                                                               |

package/dist/Table/Table.svelte

@@ -37,6 +37,11 @@
   let selectSlideDuration: number = $state(250)
   let copiedCell: { x: number; y: number } | null = $state(null)
   let tooltip = $state({ show: false, text: "", x: 0, y: 0 })
+  /* Шаблон колонок общий для шапки и строк; кнопка очистки — отдельная узкая колонка, чтобы не перекрывать заголовки */
+  const ACTIONS_COLUMN = "2.5rem"
+  let gridTemplate = $derived(
+    [...(header || []).filter((c) => c.width !== "0%").map((c) => c.width || "minmax(0, 1fr)"), ...(dataBuffer.clearButton ? [ACTIONS_COLUMN] : [])].join(" "),
+  )
   let isScrollable: boolean = $derived(container ? (container as HTMLElement).scrollHeight > (container as HTMLElement).clientHeight : false)
   let tableHeight = $state(0)
   let modalData: { isOpen: boolean; rawData?: string; formattedData?: string } = $state({ isOpen: false, rawData: "", formattedData: "" })
@@ -247,10 +252,7 @@
       class="grid border-b border-(--hairline-color) bg-(--container-color) text-[11px] font-bold tracking-[0.06em] text-(--muted-color) uppercase {isScrollable
         ? 'border-r-8 border-r-(--container-color)'
         : ''}"
-      style={`grid-template-columns: ${(header || [])
-        .filter((c) => c.width !== "0%")
-        .map((c) => c.width || "minmax(0, 1fr)")
-        .join(" ")};`}
+      style={`grid-template-columns: ${gridTemplate};`}
     >
       {#each header as column, index (column)}
         {#if column.width !== "0%"}
@@ -277,18 +279,16 @@
           </div>
         {/if}
       {/each}
+      {#if dataBuffer.clearButton}
+        <div class="flex items-center justify-center tracking-normal normal-case">
+          <Button
+            componentClass={twMerge("size-7 p-1.5 text-(--muted-color) hover:text-(--red-color)", dataBuffer.clearClass)}
+            content={{ icon: ButtonClear, info: { text: $T("common.table.clear"), side: "left" } }}
+            onClick={clearBuffer}
+          />
+        </div>
+      {/if}
     </div>
-    {#if dataBuffer.clearButton}
-      <button
-        class={twMerge(
-          "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",
-          dataBuffer.clearClass,
-        )}
-        onclick={clearBuffer}
-      >
-        <ButtonClear />
-      </button>
-    {/if}
 
     {#if bodyArray.length > 0 || buffer.length > 0}
       {@const rows = dataBuffer.stashData ? buffer.slice(-(dataBuffer.bufferSize ?? 10)) : bodyArray.filter((row: any) => Object.entries(row).length != 0)}
@@ -298,10 +298,7 @@
           {#each rows as row, i (row.__rowId ?? row)}
             <div
               class="grid border-t border-(--hairline-color) transition-colors duration-150 hover:bg-(--accent-soft)"
-              style={`grid-template-columns: ${(header || [])
-                .filter((c) => c.width !== "0%")
-                .map((c) => c.width || "minmax(0, 1fr)")
-                .join(" ")};`}
+              style={`grid-template-columns: ${gridTemplate};`}
             >
               {#each header as column, j (column)}
                 {#if column.width !== "0%"}
@@ -431,9 +428,10 @@
                             : typeof row[text.key] == "object"
                               ? JSON.stringify(row[text.key])
                               : row[text.key]}
-                        <div class="flex items-center">
+                        <!-- w-full + min-w-0: при justify-items-start ячейка иначе берёт ширину по содержимому и truncate не даёт «…» -->
+                        <div class="flex w-full min-w-0 items-center">
                           <div
-                            class="w-full max-w-full wrap-break-word {text?.truncated ? 'truncate' : ' whitespace-normal'}"
+                            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}
                             onmouseleave={() => (text?.tooltip ? (tooltip.show = false) : undefined)}
                             onmousemove={text?.tooltip
@@ -447,7 +445,7 @@
                           >
                             {#if text?.modal}
                               <button
-                                class="w-fit cursor-pointer text-left"
+                                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)
@@ -492,6 +490,7 @@
                   </div>
                 {/if}
               {/each}
+              {#if dataBuffer.clearButton}<div></div>{/if}
             </div>
           {/each}
         </div>

package/dist/locales/translations.js

@@ -1,5 +1,6 @@
 const translations = {
     "common.select_tag": ["Сделайте выбор", "Make a choice", "请选择"],
+    "common.table.clear": ["Очистить таблицу", "Clear table", "清空表格"],
     "debug.baud_rate_data": ["Данные", "Data", "数据"],
     "library.for_constructor": ["Для конструктора", "For constructor", "用于构造器"],
     "library.overview": ["Обзор", "Overview", "概览"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.31.5",
+  "version": "1.31.7",
   "license": "MIT",
   "type": "module",
   "scripts": {