poe-svelte-ui-lib 1.31.4 → 1.31.6

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: "" })
@@ -79,6 +84,8 @@
 
   const handleScroll = () => {
     if (!container) return
+    /* Контейнер рендерится только при наличии строк, поэтому слушатель — в разметке, а не addEventListener в onMount */
+    if (autoscroll) handleAutoScroll()
     const { scrollTop, clientHeight, scrollHeight } = container
     if (scrollTop + clientHeight >= scrollHeight - 50 && cursor !== null && loader && !loader()) {
       getData()
@@ -212,10 +219,7 @@
   })
 
   onMount(() => {
-    if (autoscroll) {
-      container?.addEventListener("scroll", handleAutoScroll)
-      scrollToBottom()
-    }
+    if (autoscroll) scrollToBottom()
 
     const handlePageScroll = () => {
       isDropdownOpen = null
@@ -231,7 +235,6 @@
     isScrollable = container ? container.scrollHeight > container.clientHeight : false
 
     return () => {
-      container?.removeEventListener("scroll", handleAutoScroll)
       window.removeEventListener("scroll", handlePageScroll, true)
       window.removeEventListener("resize", handlePageScroll, true)
     }
@@ -249,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%"}
@@ -279,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)}
@@ -300,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%"}
@@ -494,6 +489,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.4",
+  "version": "1.31.6",
   "license": "MIT",
   "type": "module",
   "scripts": {