poe-svelte-ui-lib 1.5.9 → 1.5.11

package/dist/Table/Table.svelte

@@ -5,6 +5,7 @@
   import { fade, fly } from 'svelte/transition'
   import { twMerge } from 'tailwind-merge'
   import { onMount } from 'svelte'
+  import ButtonClear from '../libIcons/ButtonClear.svelte'
 
   let {
     id = crypto.randomUUID(),
@@ -13,9 +14,8 @@
     body = $bindable(),
     header = [],
     footer = '',
-    stashData = false,
+    dataBuffer = { stashData: false, rowsAmmount: 10, clearButton: true, clearClass: '' },
     type = 'table',
-    rowsAmmount = 10,
     outline = false,
     cursor = null,
     loader,
@@ -25,7 +25,7 @@
     onClick,
   }: ITableProps<any> = $props()
 
-  let dataBuffer: any[] = $state([])
+  let buffer: any[] = $state([])
 
   /* Сортировка */
   let sortState: {
@@ -101,7 +101,7 @@
   }
 
   $effect(() => {
-    if (autoscroll && dataBuffer && dataBuffer.length > 0) {
+    if (autoscroll && buffer && buffer.length > 0) {
       scrollToBottom()
     }
   })
@@ -156,8 +156,8 @@
 
   $effect(() => {
     if (body && type == 'logger') {
-      dataBuffer = [
-        ...dataBuffer,
+      buffer = [
+        ...buffer,
         {
           type: Object.entries(body)[0][1] as string,
           color: `<div class='size-6 rounded-full ${logTypeOptions.find((o) => o.value == body.logLevel)?.color}'></div>`,
@@ -165,8 +165,8 @@
         },
       ]
 
-      if (dataBuffer.length > rowsAmmount * 5) {
-        dataBuffer = dataBuffer.slice(-(rowsAmmount * 5))
+      if (dataBuffer && buffer.length > (dataBuffer.rowsAmmount ?? 10)) {
+        buffer = buffer.slice(-(dataBuffer.rowsAmmount ?? 10))
       }
 
       body = null
@@ -174,10 +174,10 @@
   })
 
   $effect(() => {
-    if (body && stashData && type == 'table') {
-      dataBuffer = [...dataBuffer, body]
-      if (dataBuffer.length > rowsAmmount) {
-        dataBuffer = dataBuffer.slice(-rowsAmmount)
+    if (body && dataBuffer.stashData && type == 'table') {
+      buffer = [...buffer, body]
+      if (buffer.length > (dataBuffer.rowsAmmount ?? 10)) {
+        buffer = buffer.slice(-(dataBuffer.rowsAmmount ?? 10))
       }
 
       body = null
@@ -201,7 +201,7 @@
       ]
     }
     return () => {
-      dataBuffer = []
+      buffer = []
     }
   })
 
@@ -236,7 +236,7 @@
 
 <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)}
+  class={twMerge(`bg-blue flex h-full w-full items-center ${type == 'logger' ? 'gap-2' : ''} flex-col overflow-hidden`, wrapperClass)}
 >
   {#if label.name}
     <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
@@ -278,7 +278,7 @@
   {/if}
 
   <div
-    class="flex h-full w-full flex-col overflow-hidden rounded-xl border shadow-sm transition duration-200 hover:shadow-md {outline
+    class="relative 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'} "
   >
@@ -309,14 +309,22 @@
         </div>
       {/each}
     </div>
+    {#if dataBuffer.clearButton}
+      <button
+        class={twMerge('absolute right-2 bg-(--back-color) rounded-full p-1 cursor-pointer', dataBuffer.clearClass)}
+        onclick={() => (buffer = [])}
+      >
+        <ButtonClear />
+      </button>
+    {/if}
 
-    {#if body || dataBuffer}
-      {@const isSliced = dataBuffer.length - rowsAmmount > 0 ? dataBuffer.length - (rowsAmmount % 2) !== 0 : false}
+    {#if body || buffer}
+      {@const isSliced = buffer.length - (dataBuffer.rowsAmmount ?? 10) > 0 ? buffer.length - ((dataBuffer.rowsAmmount ?? 10) % 2) !== 0 : false}
       {@const rows =
         type == 'logger'
-          ? dataBuffer.filter((str) => logType.includes(str.type)).slice(-rowsAmmount)
-          : stashData
-            ? dataBuffer.slice(-rowsAmmount)
+          ? buffer.filter((str) => logType.includes(str.type)).slice(-(dataBuffer.rowsAmmount ?? 10))
+          : dataBuffer.stashData
+            ? buffer.slice(-(dataBuffer.rowsAmmount ?? 10))
             : body}
 
       <!-- Table Body с прокруткой -->

package/dist/Table/TableProps.svelte

@@ -99,7 +99,7 @@
         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)
+          if (option.value === 'logger') updateProperty('dataBuffer.stashData', true, component, onPropertyChange)
         }}
       />
     </div>
@@ -120,10 +120,10 @@
       />
       <UI.Switch
         label={{ name: $t('constructor.props.table.stashData') }}
-        value={component.properties.stashData}
+        value={component.properties.dataBuffer.stashData}
         options={[{ id: crypto.randomUUID(), value: 0, class: '', disabled: component.properties.type === 'logger' }]}
         onChange={(value) => {
-          updateProperty('stashData', value, component, onPropertyChange)
+          updateProperty('dataBuffer.stashData', value, component, onPropertyChange)
         }}
       />
     </div>
@@ -144,8 +144,8 @@
         <UI.Input
           label={{ name: $t('constructor.props.table.buffersize') }}
           type="number"
-          value={component.properties.rowsAmmount}
-          onUpdate={(value) => updateProperty('rowsAmmount', value as string, component, onPropertyChange)}
+          value={component.properties.dataBuffer.rowsAmmount}
+          onUpdate={(value) => updateProperty('dataBuffer.rowsAmmount', value as string, component, onPropertyChange)}
         />
       {/if}
     </div>
@@ -373,23 +373,38 @@
         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)
+          if (option.value === 'logger') updateProperty('dataBuffer.stashData', true, component, onPropertyChange)
+          if (option.value === 'table') updateProperty('dataBuffer.clearButton', false, 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)
-        }}
-      />
-      {#if component.properties.stashData}
-        <UI.Input
+      <div class="flex">
+        <UI.Switch
+          label={{ name: $t('constructor.props.table.stashData') }}
+          value={component.properties.dataBuffer.stashData}
+          options={[{ id: crypto.randomUUID(), value: 0, class: '', disabled: component.properties.type === 'logger' }]}
+          onChange={(value) => {
+            updateProperty('dataBuffer.stashData', value, component, onPropertyChange)
+          }}
+        />
+        {#if component.properties.type === 'logger'}
+          <UI.Switch
+            label={{ name: $t('constructor.props.table.clearButton') }}
+            value={component.properties.dataBuffer.clearButton}
+            options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+            onChange={(value) => {
+              updateProperty('dataBuffer.clearButton', value, component, onPropertyChange)
+            }}
+          />
+        {/if}
+      </div>
+
+      {#if component.properties.dataBuffer.stashData}
+        <UI.Select
           label={{ name: $t('constructor.props.table.buffersize') }}
-          type="number"
-          value={component.properties.rowsAmmount}
-          onUpdate={(value) => updateProperty('rowsAmmount', value as string, component, onPropertyChange)}
+          type="buttons"
+          options={$optionsStore.BUFFER_SIFE_OPTIONS}
+          value={$optionsStore.BUFFER_SIFE_OPTIONS.find((o) => o.value === component.properties.dataBuffer.rowsAmmount)}
+          onUpdate={(value) => updateProperty('dataBuffer.rowsAmmount', value.value as number, component, onPropertyChange)}
         />
       {/if}
     </div>

package/dist/libIcons/ButtonClear.svelte

@@ -0,0 +1,12 @@
+<script lang="ts"></script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24"
+  ><g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.5"
+    ><path
+      stroke-linecap="round"
+      d="m12 13l3 2m-3-2c-4.48 2.746-7.118 1.78-9 .85c0 2.08.681 3.82 1.696 5.15M12 13l3-4.586M15 15c-.219 2.037-1.573 6.185-4.844 7c-1.815 0-3.988-1.07-5.46-3M15 15l2.598-5m0 0l3.278-6.31a1.166 1.166 0 0 0-.524-1.567a1.174 1.174 0 0 0-1.544.47L15 8.414M17.598 10L15 8.414M4.696 19c1.038.167 3.584.2 5.46-1"
+    /><path
+      d="m6 4l.221.597c.29.784.435 1.176.72 1.461c.286.286.678.431 1.462.72L9 7l-.597.221c-.784.29-1.176.435-1.461.72c-.286.286-.431.678-.72 1.462L6 10l-.221-.597c-.29-.784-.435-1.176-.72-1.461c-.286-.286-.678-.431-1.462-.72L3 7l.597-.221c.784-.29 1.176-.435 1.461-.72c.286-.286.431-.678.72-1.462z"
+    /></g
+  ></svg
+>

package/dist/libIcons/ButtonClear.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ButtonClear: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ButtonClear = InstanceType<typeof ButtonClear>;
+export default ButtonClear;

package/dist/locales/translations.js

@@ -153,6 +153,7 @@ const translations = {
         'constructor.props.table.keys.info': 'Ключи таблицы, значения которых будут возвращаться',
         'constructor.props.table.stashData': 'Накопление данных',
         'constructor.props.table.buffersize': 'Размер буфера',
+        'constructor.props.table.clearButton': 'Кнопка очистки',
         'constructor.props.icon.access': 'Доступ',
         'constructor.props.icon.common': 'Общее',
         'constructor.props.icon.scenarios': 'Сценарии',

package/dist/options.d.ts

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

package/dist/options.js

@@ -128,6 +128,13 @@ export const optionsStore = derived(t, ($t) => {
             { id: id(), value: 'table', name: $t('constructor.props.table.type.table') },
             { id: id(), value: 'logger', name: $t('constructor.props.table.type.logger') },
         ],
+        BUFFER_SIFE_OPTIONS: [
+            { id: crypto.randomUUID(), value: 10, name: '10' },
+            { id: crypto.randomUUID(), value: 50, name: '50' },
+            { id: crypto.randomUUID(), value: 100, name: '100' },
+            { id: crypto.randomUUID(), value: 500, name: '500' },
+            { id: crypto.randomUUID(), value: 1000, name: '1000' },
+        ],
         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

@@ -267,8 +267,12 @@ export interface ITableProps<T extends object> {
     body: T[] | T | null;
     footer?: string;
     type?: 'table' | 'logger';
-    stashData?: boolean;
-    rowsAmmount?: number;
+    dataBuffer?: {
+        stashData?: boolean;
+        rowsAmmount?: number;
+        clearButton?: boolean;
+        clearClass?: string;
+    };
     outline?: boolean;
     cursor?: string | null;
     loader?: Writable<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.5.9",
+  "version": "1.5.11",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -32,13 +32,13 @@
     "svelte": "^5.0.0"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.1.17",
-    "prettier": "^3.6.2",
+    "@tailwindcss/vite": "^4.1.18",
+    "prettier": "^3.7.4",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "svelte-maplibre-gl": "^1.0.2",
     "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^4.1.17",
+    "tailwindcss": "^4.1.18",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3"
   },
@@ -47,9 +47,9 @@
     "@sveltejs/kit": "^2.49.2",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@types/node": "^24.10.2",
+    "@types/node": "^25.0.1",
     "publint": "^0.3.16",
-    "svelte": "^5.45.8",
+    "svelte": "^5.45.10",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.2.7",
     "vite-plugin-compression": "^0.5.1"