poe-svelte-ui-lib 1.4.8 → 1.5.0

package/dist/Table/Table.svelte

@@ -10,9 +10,12 @@
     id = crypto.randomUUID(),
     wrapperClass = '',
     label = { name: '', class: '' },
-    body = [],
+    body = $bindable(),
     header = [],
     footer = '',
+    stashData = false,
+    type = 'table',
+    rowsAmmount = 10,
     outline = false,
     cursor = null,
     loader,
@@ -22,6 +25,8 @@
     onClick,
   }: ITableProps<any> = $props()
 
+  let dataBuffer: any[] = $state([])
+
   /* Сортировка */
   let sortState: {
     key: string | null
@@ -33,6 +38,13 @@
 
   let isAutoscroll = $state(false)
 
+  const logTypeOptions = [
+    { id: crypto.randomUUID(), name: 'Error', value: 'error', color: 'bg-(--red-color)' },
+    { id: crypto.randomUUID(), name: 'Warning', value: 'warning', color: 'bg-(--yellow-color)' },
+    { id: crypto.randomUUID(), name: 'Info', value: 'info', color: 'bg-(--gray-color)' },
+  ]
+  let logType = $state(['error', 'info'])
+
   /* Сортировка столбцов */
   const sortRows = (key: string) => {
     if (sortState.key === key) {
@@ -87,8 +99,9 @@
       container.scrollTop = container.scrollHeight
     }
   }
+
   $effect(() => {
-    if (body.length > 0) {
+    if (autoscroll && dataBuffer && dataBuffer.length > 0) {
       scrollToBottom()
     }
   })
@@ -141,12 +154,78 @@
     return !!src
   }
 
+  $effect(() => {
+    if (body && type == 'logger') {
+      dataBuffer = [
+        ...dataBuffer,
+        {
+          type: Object.entries(body)[0][1] as string,
+          color: `<div class='size-6 rounded-full ${logTypeOptions.find((o) => o.value == body.logLevel)?.color}'></div>`,
+          data: Object.entries(body)[1][1] as string,
+        },
+      ]
+
+      if (dataBuffer.length > rowsAmmount * 5) {
+        dataBuffer = dataBuffer.slice(-(rowsAmmount * 5))
+      }
+
+      body = null
+    }
+  })
+
+  $effect(() => {
+    if (body && stashData && type == 'table') {
+      dataBuffer = [...dataBuffer, body]
+      if (dataBuffer.length > rowsAmmount) {
+        dataBuffer = dataBuffer.slice(-rowsAmmount)
+      }
+
+      body = null
+    }
+  })
+
+  $effect(() => {
+    const currentType = type
+    if (type === 'logger') {
+      header = [
+        {
+          key: 'color',
+          label: { name: 'Type' },
+          width: '3rem',
+        } as ITableHeader<any>,
+        {
+          key: 'data',
+          label: { name: 'Data' },
+          width: 'calc(100% - 3rem)',
+        } as ITableHeader<any>,
+      ]
+    }
+    return () => {
+      dataBuffer = []
+    }
+  })
+
   onMount(() => {
     if (autoscroll) {
       container?.addEventListener('scroll', handleAutoScroll)
       scrollToBottom()
     }
 
+    if (type === 'logger') {
+      header = [
+        {
+          key: 'color',
+          label: { name: 'Type' },
+          width: '3rem',
+        } as ITableHeader<any>,
+        {
+          key: 'data',
+          label: { name: 'Data' },
+          width: 'calc(100% - 3rem)',
+        } as ITableHeader<any>,
+      ]
+    }
+
     return () => {
       if (autoscroll) {
         container?.removeEventListener('scroll', handleAutoScroll)
@@ -155,13 +234,51 @@
   })
 </script>
 
-<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`bg-blue flex h-full w-full flex-col overflow-hidden`, wrapperClass)}>
+<div
+  id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
+  class={twMerge(`bg-blue flex h-full w-full gap-2 items-center flex-col overflow-hidden`, wrapperClass)}
+>
   {#if label.name}
     <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
+  {#if type == 'logger'}
+    <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="flex w-[50%] justify-center rounded-full">
+      {#each logTypeOptions as option, index}
+        <button
+          id={crypto.randomUUID()}
+          class={twMerge(`m-0 inline-block min-w-0 flex-1 cursor-pointer items-center px-2 py-1 font-semibold shadow-sm transition-all duration-300
+            select-none hover:shadow-md
+            ${
+              logType.includes(option.value) && logType !== null
+                ? 'z-10 py-1 shadow-[0_0_10px_var(--shadow-color)] hover:shadow-[0_0_15px_var(--shadow-color)]'
+                : ''
+            }  
+            ${logTypeOptions.length > 0 && index === 0 ? 'rounded-l-2xl' : ''} ${
+              index === logTypeOptions.length - 1 ? 'rounded-r-2xl' : ''
+            } ${option.color}`)}
+          onclick={() => {
+            if (logType.includes(option.value)) {
+              logType = logType.filter((type) => type !== option.value)
+            } else {
+              logType.push(option.value)
+            }
+          }}
+        >
+          <span class="flex flex-row items-center justify-center gap-4">
+            {#if option}
+              <div class="flex-1">
+                {option.name}
+              </div>
+            {/if}
+          </span>
+        </button>
+      {/each}
+    </div>
+  {/if}
+
   <div
-    class="flex h-full flex-col overflow-hidden rounded-xl border shadow-sm transition duration-200 hover:shadow-md {outline
+    class="flex h-full w-full flex-col overflow-hidden rounded-xl border shadow-sm transition duration-200 hover:shadow-md {outline
       ? ' border-(--border-color)'
       : 'border-transparent'} "
   >
@@ -193,126 +310,129 @@
       {/each}
     </div>
 
-    <!-- Table Body с прокруткой -->
-    <div class="flex-1 overflow-y-auto bg-(--container-color)/50" bind:this={container} onscroll={handleScroll}>
-      <div class="grid min-w-0" style={`grid-template-columns: ${header.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};`}>
-        {#each body as row, index (row)}
-          {#each header as column, j (column)}
-            <div
-              class="relative flex w-full min-w-0 items-center px-2 py-1 wrap-break-word
+    {#if body || dataBuffer}
+      {@const rows = type == 'logger' ? dataBuffer.filter((str) => logType.includes(str.type)).slice(-rowsAmmount) : stashData ? dataBuffer : body}
+      <!-- Table Body с прокруткой -->
+      <div class="flex-1 overflow-y-auto bg-(--container-color)/50" bind:this={container} onscroll={handleScroll}>
+        <div class="grid min-w-0" style={`grid-template-columns: ${header.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};`}>
+          {#each rows as row, index (row)}
+            {#each header as column, j (column)}
+              <div
+                class="relative flex w-full min-w-0 items-center px-2 py-1 wrap-break-word
               {index % 2 ? 'bg-(--back-color)/40' : 'bg-[#edeef3] dark:bg-[#1f2a3a]'}
               {column.align === 'center'
-                ? 'flex justify-center text-center'
-                : column.align === 'right'
-                  ? 'flex justify-end text-right'
-                  : 'flex justify-start text-left'}
+                  ? 'flex justify-center text-center'
+                  : column.align === 'right'
+                    ? 'flex justify-end text-right'
+                    : 'flex justify-start text-left'}
               border-t
               {j !== 0 ? ' border-l ' : ''}
               {outline ? 'border-(--border-color)' : 'border-transparent'}  "
-            >
-              {#if column.buttons}
-                <div class="flex w-full flex-col gap-1">
-                  {#each column.buttons as button (button)}
-                    <button
-                      class="{twMerge(`cursor-pointer rounded-full 
+              >
+                {#if column.buttons}
+                  <div class="flex w-full flex-col gap-1">
+                    {#each column.buttons as button (button)}
+                      <button
+                        class="{twMerge(`cursor-pointer rounded-full 
                            px-4 py-1 font-semibold shadow-sm transition-shadow duration-200 outline-none select-none hover:shadow-md
                           ${typeof button.class === 'function' ? button.class(row) : button.class}`)} bg-(--bg-color)"
-                      onclick={() => buttonClick(row, button)}
-                    >
-                      {typeof button.name === 'function' ? button.name(row) : button.name}
-                    </button>
-                  {/each}
-                </div>
-              {:else if column.image?.src || column.image?.defaultIcon}
-                <div
-                  class="flex items-center justify-center"
-                  style={`width: ${column.image.width || '5rem'}; height: ${column.image.height || '5rem'};`}
-                >
-                  {#if hasImage(column, row)}
-                    <img
-                      src={typeof column.image?.src === 'function' ? column.image.src(row) : column.image?.src || ''}
-                      alt={column.image.alt ?? 'Image'}
-                      class={twMerge(`h-full w-full object-cover ${column.image.class || ''}`)}
-                      loading="lazy"
-                    />
-                  {:else if column.image.defaultIcon}
-                    {#if typeof column.image.defaultIcon === 'string'}
-                      {@html column.image.defaultIcon}
+                        onclick={() => buttonClick(row, button)}
+                      >
+                        {typeof button.name === 'function' ? button.name(row) : button.name}
+                      </button>
+                    {/each}
+                  </div>
+                {:else if column.image?.src || column.image?.defaultIcon}
+                  <div
+                    class="flex items-center justify-center"
+                    style={`width: ${column.image.width || '5rem'}; height: ${column.image.height || '5rem'};`}
+                  >
+                    {#if hasImage(column, row)}
+                      <img
+                        src={typeof column.image?.src === 'function' ? column.image.src(row) : column.image?.src || ''}
+                        alt={column.image.alt ?? 'Image'}
+                        class={twMerge(`h-full w-full object-cover ${column.image.class || ''}`)}
+                        loading="lazy"
+                      />
+                    {:else if column.image.defaultIcon}
+                      {#if typeof column.image.defaultIcon === 'string'}
+                        {@html column.image.defaultIcon}
+                      {:else}
+                        <column.image.defaultIcon />
+                      {/if}
+                    {/if}
+                  </div>
+                {:else}
+                  <div
+                    class=" w-full max-w-full wrap-break-word {column.overflow?.truncated ? 'truncate' : ' whitespace-normal'}"
+                    onmouseenter={column.overflow?.truncated ? (e) => showTooltip(e, row[column.key], column.overflow?.formatting) : undefined}
+                    onmouseleave={column.overflow?.truncated ? hideTooltip : undefined}
+                    onmousemove={column.overflow?.truncated
+                      ? (e) => {
+                          tooltip.x = e.clientX
+                          tooltip.y = e.clientY
+                        }
+                      : undefined}
+                    role="columnheader"
+                    tabindex={null}
+                  >
+                    {#if column.overflow?.modal}
+                      <button
+                        class="w-full cursor-pointer overflow-hidden text-left text-ellipsis whitespace-nowrap"
+                        onclick={(e) => {
+                          e.stopPropagation()
+                          showModal(row[column.key], column.overflow?.formatting)
+                        }}
+                      >
+                        {@html row[column.key]}
+                      </button>
                     {:else}
-                      <column.image.defaultIcon />
+                      {@html row[column.key]}
                     {/if}
-                  {/if}
-                </div>
-              {:else}
-                <div
-                  class=" w-full max-w-full wrap-break-word {column.overflow?.truncated ? 'truncate' : ' whitespace-normal'}"
-                  onmouseenter={column.overflow?.truncated ? (e) => showTooltip(e, row[column.key], column.overflow?.formatting) : undefined}
-                  onmouseleave={column.overflow?.truncated ? hideTooltip : undefined}
-                  onmousemove={column.overflow?.truncated
-                    ? (e) => {
-                        tooltip.x = e.clientX
-                        tooltip.y = e.clientY
-                      }
-                    : undefined}
-                  role="columnheader"
-                  tabindex={null}
-                >
-                  {#if column.overflow?.modal}
+                  </div>
+                  <!-- {#if column.overflow?.truncated}
+                  <div class="whitespace-nowrap">{row[column.key].slice(-5)}</div>
+                {/if} -->
+
+                  {#if column.overflow?.copy}
                     <button
-                      class="w-full cursor-pointer overflow-hidden text-left text-ellipsis whitespace-nowrap"
+                      class="mx-2 flex cursor-pointer border-none bg-transparent text-2xl"
                       onclick={(e) => {
-                        e.stopPropagation()
-                        showModal(row[column.key], column.overflow?.formatting)
+                        e.preventDefault()
+                        navigator.clipboard.writeText(row[column.key])
+                        copiedCell = { x: column.key as string, y: index }
+                        setTimeout(() => (copiedCell = { x: '', y: -1 }), 1000)
                       }}
+                      aria-label="Копировать текст"
                     >
-                      {@html row[column.key]}
+                      <div class=" size-5 text-sm [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full">
+                        {#if copiedCell.y === index && copiedCell.x === column.key}
+                          <div
+                            class="absolute top-1/2 right-3.5 -translate-y-1/2 transform rounded-md bg-(--green-color) px-1.5 py-1 shadow-lg"
+                            transition:fade={{ duration: 200 }}
+                          >
+                            ✓
+                          </div>
+                        {:else}
+                          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                            <g fill="none" stroke="currentColor" stroke-width="1.5">
+                              <path
+                                d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"
+                              />
+                              <path d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3" />
+                            </g>
+                          </svg>
+                        {/if}
+                      </div>
                     </button>
-                  {:else}
-                    {@html row[column.key]}
                   {/if}
-                </div>
-                <!-- {#if column.overflow?.truncated}
-                  <div class="whitespace-nowrap">{row[column.key].slice(-5)}</div>
-                {/if} -->
-
-                {#if column.overflow?.copy}
-                  <button
-                    class="mx-2 flex cursor-pointer border-none bg-transparent text-2xl"
-                    onclick={(e) => {
-                      e.preventDefault()
-                      navigator.clipboard.writeText(row[column.key])
-                      copiedCell = { x: column.key as string, y: index }
-                      setTimeout(() => (copiedCell = { x: '', y: -1 }), 1000)
-                    }}
-                    aria-label="Копировать текст"
-                  >
-                    <div class=" size-5 text-sm [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full">
-                      {#if copiedCell.y === index && copiedCell.x === column.key}
-                        <div
-                          class="absolute top-1/2 right-3.5 -translate-y-1/2 transform rounded-md bg-(--green-color) px-1.5 py-1 shadow-lg"
-                          transition:fade={{ duration: 200 }}
-                        >
-                          ✓
-                        </div>
-                      {:else}
-                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                          <g fill="none" stroke="currentColor" stroke-width="1.5">
-                            <path
-                              d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"
-                            />
-                            <path d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3" />
-                          </g>
-                        </svg>
-                      {/if}
-                    </div>
-                  </button>
                 {/if}
-              {/if}
-            </div>
+              </div>
+            {/each}
           {/each}
-        {/each}
+        </div>
       </div>
-    </div>
+    {/if}
 
     {#if tooltip.show}
       <div

package/dist/Table/Table.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ITableProps } from '../types';
-declare const Table: import("svelte").Component<ITableProps<any>, {}, "modalData">;
+declare const Table: import("svelte").Component<ITableProps<any>, {}, "body" | "modalData">;
 type Table = ReturnType<typeof Table>;
 export default Table;

package/dist/Table/TableProps.svelte

@@ -24,7 +24,7 @@
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
-  let defaultIcon = $derived({ isModalOpen: false, columnIndex: 0, column: component.properties.header[0] })
+  let defaultIcon = $derived({ isModalOpen: false, columnIndex: 0, column: component.properties.header ? component.properties.header[0] : '' })
 
   const initialColor = $derived(
     $optionsStore.COLOR_OPTIONS.find((c) =>
@@ -95,6 +95,16 @@
         value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
         onUpdate={(option) => onPropertyChange({ access: option.value })}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.table.type') }}
+        type="buttons"
+        options={$optionsStore.TABLE_TYPE_OPTIONS}
+        value={$optionsStore.TABLE_TYPE_OPTIONS.find((o) => o.value === component.properties.type)}
+        onUpdate={(option) => {
+          updateProperty('type', option.value as string, component, onPropertyChange)
+          if (option.value === 'logger') updateProperty('stashData', true, component, onPropertyChange)
+        }}
+      />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Select
@@ -111,6 +121,14 @@
         options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
         onChange={(value) => updateProperty('outline', value, component, onPropertyChange)}
       />
+      <UI.Switch
+        label={{ name: $t('constructor.props.table.stashData') }}
+        value={component.properties.stashData}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '', disabled: component.properties.type === 'logger' }]}
+        onChange={(value) => {
+          updateProperty('stashData', value, component, onPropertyChange)
+        }}
+      />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Input
@@ -125,6 +143,12 @@
         options={$optionsStore.TEXT_ALIGN_OPTIONS}
         onUpdate={(option) => updateProperty('label.class', twMerge(component.properties.label.class, option.value), component, onPropertyChange)}
       />
+      <UI.Input
+        label={{ name: $t('constructor.props.table.buffersize') }}
+        type="number"
+        value={component.properties.rowsAmmount}
+        onUpdate={(value) => updateProperty('rowsAmmount', value as string, component, onPropertyChange)}
+      />
     </div>
   </div>
 

package/dist/locales/translations.js

@@ -132,6 +132,9 @@ const translations = {
         'constructor.props.joystick.axes.info': 'Поле для ввода названий осей, разделенных пробелами (2 или 3 названия)',
         'constructor.props.file.select': 'Выберите файл',
         'constructor.props.file.notselected': 'Файл не выбран',
+        'constructor.props.table.type': 'Тип таблицы',
+        'constructor.props.table.type.table': 'Статическая таблица',
+        'constructor.props.table.type.logger': 'Таблица для логов',
         'constructor.props.table.columns': 'Колонки таблицы',
         'constructor.props.table.columns.key': 'Ключ',
         'constructor.props.table.columns.label': 'Название колонки',
@@ -148,6 +151,8 @@ const translations = {
         'constructor.props.table.addaction': 'Добавить кнопку',
         'constructor.props.table.keys': 'Перечень ключей',
         'constructor.props.table.keys.info': 'Ключи таблицы, значения которых будут возвращаться',
+        'constructor.props.table.stashData': 'Накопление данных',
+        'constructor.props.table.buffersize': 'Размер буфера',
         'constructor.props.icon.access': 'Доступ',
         'constructor.props.icon.common': 'Общее',
         'constructor.props.icon.scenarios': 'Сценарии',

package/dist/options.d.ts

@@ -115,6 +115,11 @@ export declare const optionsStore: import("svelte/store").Readable<{
         value: string;
         name: string;
     }[];
+    TABLE_TYPE_OPTIONS: {
+        id: string;
+        value: string;
+        name: string;
+    }[];
     AUTOCOMPLETE_CONSTRUCTOR_OPTIONS: {
         id: string;
         value: string;

package/dist/options.js

@@ -124,6 +124,10 @@ export const optionsStore = derived(t, ($t) => {
             { id: id(), value: 'square', name: $t('constructor.props.type.square') },
             { id: id(), value: 'circle', name: $t('constructor.props.type.circle') },
         ],
+        TABLE_TYPE_OPTIONS: [
+            { id: id(), value: 'table', name: $t('constructor.props.table.type.table') },
+            { id: id(), value: 'logger', name: $t('constructor.props.table.type.logger') },
+        ],
         AUTOCOMPLETE_CONSTRUCTOR_OPTIONS: [
             { id: id(), value: 'on', name: $t('constructor.props.autocomplete.on') },
             { id: id(), value: 'off', name: $t('constructor.props.autocomplete.off') },

package/dist/types.d.ts

@@ -262,9 +262,12 @@ export interface ITableProps<T extends object> {
         name?: string;
         class?: string;
     };
-    header: ITableHeader<T>[];
-    body: T[];
+    header?: ITableHeader<T>[];
+    body: T[] | T | null;
     footer?: string;
+    type?: 'table' | 'logger';
+    stashData?: boolean;
+    rowsAmmount?: number;
     outline?: boolean;
     cursor?: string | null;
     loader?: Writable<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.4.8",
+  "version": "1.5.0",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -49,7 +49,7 @@
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.10.1",
     "publint": "^0.3.15",
-    "svelte": "^5.45.4",
+    "svelte": "^5.45.5",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.2.6",
     "vite-plugin-compression": "^0.5.1"