poe-svelte-ui-lib 1.5.10 → 1.5.12

package/dist/Table/Table.svelte

@@ -14,7 +14,7 @@
     body = $bindable(),
     header = [],
     footer = '',
-    dataBuffer = { stashData: false, rowsAmmount: 10, cleanButton: true, cleanClass: '' },
+    dataBuffer = { stashData: false, rowsAmmount: 10, clearButton: true, clearClass: '' },
     type = 'table',
     outline = false,
     cursor = null,
@@ -165,8 +165,8 @@
         },
       ]
 
-      if (dataBuffer && buffer.length > (dataBuffer.rowsAmmount ?? 10) * 5) {
-        buffer = buffer.slice(-((dataBuffer.rowsAmmount ?? 10) * 5))
+      if (dataBuffer && buffer.length > (dataBuffer.rowsAmmount ?? 10)) {
+        buffer = buffer.slice(-(dataBuffer.rowsAmmount ?? 10))
       }
 
       body = null
@@ -309,9 +309,9 @@
         </div>
       {/each}
     </div>
-    {#if dataBuffer.cleanButton}
+    {#if dataBuffer.clearButton}
       <button
-        class={twMerge('absolute right-2 bg-(--back-color) rounded-full p-1 cursor-pointer', dataBuffer.cleanClass)}
+        class={twMerge('absolute right-2 bg-(--back-color) rounded-full p-1 cursor-pointer', dataBuffer.clearClass)}
         onclick={() => (buffer = [])}
       >
         <ButtonClear />

package/dist/Table/TableProps.svelte

@@ -100,6 +100,8 @@
         onUpdate={(option) => {
           updateProperty('type', option.value as string, component, onPropertyChange)
           if (option.value === 'logger') updateProperty('dataBuffer.stashData', true, component, onPropertyChange)
+          if (option.value === 'logger') updateProperty('dataBuffer.clearButton', true, component, onPropertyChange)
+          if (option.value === 'table') updateProperty('dataBuffer.clearButton', false, component, onPropertyChange)
         }}
       />
     </div>
@@ -150,160 +152,161 @@
       {/if}
     </div>
   </div>
+  {#if component.properties.type === 'table'}
+    <hr class="border-(--border-color)" />
 
-  <hr class="border-(--border-color)" />
-
-  <!-- Настройки столбцов таблицы -->
-  <div>
-    <div class=" flex items-center justify-center gap-2">
-      <h4>{$t('constructor.props.table.columns')}</h4>
-      <UI.Button
-        wrapperClass="w-8"
-        content={{ icon: ButtonAdd }}
-        onClick={() => {
-          const newColumn: ITableHeader<any> = {
-            key: `column${(component.properties.header?.length || 0) + 1}`,
-            label: { name: `Column ${(component.properties.header?.length || 0) + 1}`, class: '' },
-            width: '10%',
-            sortable: false,
-          }
-          const headers = [...(component.properties.header || []), newColumn]
-          updateProperty('header', headers, component, onPropertyChange)
-          headers.forEach((h) => {
-            updateTableHeader(headers.indexOf(h), 'width', `${(100 / headers.length).toFixed(2)}%`)
-          })
-          updateTableBody()
-        }}
-      />
-    </div>
-
-    {#each component.properties.header as column, columnIndex (columnIndex)}
-      <div class="mr-2 grid grid-cols-[minmax(5rem,10rem)_1fr_minmax(5rem,10rem)_minmax(10rem,21rem)_6rem_6rem_2rem_2rem] items-end gap-6">
-        <UI.Input
-          label={{ name: $t('constructor.props.table.columns.key') }}
-          value={column.key}
-          help={{ regExp: /^[0-9a-zA-Z_-]{0,16}$/ }}
-          onUpdate={(value) => {
-            updateTableHeader(columnIndex, 'key', value)
-            updateTableBody()
-          }}
-        />
-        <UI.Input
-          label={{ name: $t('constructor.props.table.columns.label') }}
-          value={column.label.name}
-          onUpdate={(value) => {
-            updateTableHeader(columnIndex, 'label', { ['name']: value })
-          }}
-        />
-        <UI.Input
-          label={{ name: $t('constructor.props.table.columns.width') }}
-          type="number"
-          value={Number(column.width.replace('%', ''))}
-          onUpdate={(value) => updateTableHeader(columnIndex, 'width', `${value}%`)}
-        />
-        <UI.Select
-          label={{ name: $t('constructor.props.align.content') }}
-          type="buttons"
-          value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align))}
-          options={$optionsStore.ALIGN_OPTIONS}
-          onUpdate={(option) => updateTableHeader(columnIndex, 'align', option.value)}
-        />
-        <UI.Switch
-          label={{ name: $t('constructor.props.table.columns.sortable'), class: 'px-0' }}
-          options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
-          value={column.sortable}
-          onChange={(value) => updateTableHeader(columnIndex, 'sortable', value)}
-        />
-        <UI.Switch
-          label={{ name: $t('constructor.props.copy'), class: 'px-0' }}
-          options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
-          value={column.overflow?.copy}
-          onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value })}
-        />
+    <!-- Настройки столбцов таблицы -->
+    <div>
+      <div class=" flex items-center justify-center gap-2">
+        <h4>{$t('constructor.props.table.columns')}</h4>
         <UI.Button
           wrapperClass="w-8"
-          content={{ icon: ButtonAdd, info: { text: $t('constructor.props.table.addaction'), side: 'top' } }}
+          content={{ icon: ButtonAdd }}
           onClick={() => {
-            const newButton = {
-              name: `button${(component.properties.header[columnIndex].buttons ? component.properties.header[columnIndex].buttons.length : 0) + 1}`,
-              class: 'bg-blue',
-              eventHandler: { Header: 'SET', Argument: 'Save', Variables: [] },
-              onClick: () => {},
+            const newColumn: ITableHeader<any> = {
+              key: `column${(component.properties.header?.length || 0) + 1}`,
+              label: { name: `Column ${(component.properties.header?.length || 0) + 1}`, class: '' },
+              width: '10%',
+              sortable: false,
             }
-            const buttons = [...(component.properties.header[columnIndex].buttons || []), newButton]
-            updateTableHeader(columnIndex, 'buttons', buttons)
-          }}
-        />
-        <UI.Button
-          wrapperClass="w-8"
-          content={{ icon: ButtonDelete }}
-          onClick={() => {
-            const headers = [...(component.properties.header || [])]
-            headers.splice(columnIndex, 1)
+            const headers = [...(component.properties.header || []), newColumn]
             updateProperty('header', headers, component, onPropertyChange)
             headers.forEach((h) => {
               updateTableHeader(headers.indexOf(h), 'width', `${(100 / headers.length).toFixed(2)}%`)
             })
+            updateTableBody()
           }}
         />
       </div>
-      {#if column.buttons && column.buttons.length > 0}
-        <div class="mb-5 rounded-lg py-1">
-          {#each column.buttons as button, buttonIndex (buttonIndex)}
-            <div class="ml-14 flex items-end justify-around gap-2">
-              <UI.Input
-                label={{ name: $t('constructor.props.name') }}
-                wrapperClass="!w-3/10"
-                value={button.name}
-                onUpdate={(value) => updateButtonProperty(columnIndex, buttonIndex, 'name', value)}
-              />
-              <UI.Select
-                wrapperClass="!w-2/10"
-                label={{ name: $t('constructor.props.header') }}
-                type="buttons"
-                value={$optionsStore.HEADER_OPTIONS.find((h) => h.value === button.eventHandler?.Header)}
-                options={$optionsStore.HEADER_OPTIONS}
-                onUpdate={(option) => {
-                  const handler = button.eventHandler
-                  handler.Header = option.value as string
-                  updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
-                }}
-              />
-              <UI.Input
-                wrapperClass="!w-2/10"
-                label={{ name: $t('constructor.props.argument') }}
-                value={button.eventHandler?.Argument}
-                onUpdate={(value) => {
-                  const handler = button.eventHandler
-                  handler.Argument = value as string
-                  updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
-                }}
-              />
-              <UI.Input
-                wrapperClass="!w-2/10"
-                label={{ name: $t('constructor.props.table.keys') }}
-                value={button.eventHandler?.Variables.join(' ')}
-                maxlength={500}
-                help={{ info: $t('constructor.props.table.keys.info'), regExp: /^[a-zA-Z0-9\-_ ]{0,500}$/ }}
-                onUpdate={(value) => {
-                  const handler = { ...button.eventHandler }
-                  handler.Variables = (value as string).trim().split(/\s+/)
-                  updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
-                }}
-              />
-              <UI.Button
-                wrapperClass="w-8"
-                content={{ icon: ButtonDelete }}
-                onClick={() => {
-                  removeButtonFromColumn(columnIndex, buttonIndex)
-                }}
-              />
-            </div>
-          {/each}
+
+      {#each component.properties.header as column, columnIndex (columnIndex)}
+        <div class="mr-2 grid grid-cols-[minmax(5rem,10rem)_1fr_minmax(5rem,10rem)_minmax(10rem,21rem)_6rem_6rem_2rem_2rem] items-end gap-6">
+          <UI.Input
+            label={{ name: $t('constructor.props.table.columns.key') }}
+            value={column.key}
+            help={{ regExp: /^[0-9a-zA-Z_-]{0,16}$/ }}
+            onUpdate={(value) => {
+              updateTableHeader(columnIndex, 'key', value)
+              updateTableBody()
+            }}
+          />
+          <UI.Input
+            label={{ name: $t('constructor.props.table.columns.label') }}
+            value={column.label.name}
+            onUpdate={(value) => {
+              updateTableHeader(columnIndex, 'label', { ['name']: value })
+            }}
+          />
+          <UI.Input
+            label={{ name: $t('constructor.props.table.columns.width') }}
+            type="number"
+            value={Number(column.width.replace('%', ''))}
+            onUpdate={(value) => updateTableHeader(columnIndex, 'width', `${value}%`)}
+          />
+          <UI.Select
+            label={{ name: $t('constructor.props.align.content') }}
+            type="buttons"
+            value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align))}
+            options={$optionsStore.ALIGN_OPTIONS}
+            onUpdate={(option) => updateTableHeader(columnIndex, 'align', option.value)}
+          />
+          <UI.Switch
+            label={{ name: $t('constructor.props.table.columns.sortable'), class: 'px-0' }}
+            options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+            value={column.sortable}
+            onChange={(value) => updateTableHeader(columnIndex, 'sortable', value)}
+          />
+          <UI.Switch
+            label={{ name: $t('constructor.props.copy'), class: 'px-0' }}
+            options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+            value={column.overflow?.copy}
+            onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value })}
+          />
+          <UI.Button
+            wrapperClass="w-8"
+            content={{ icon: ButtonAdd, info: { text: $t('constructor.props.table.addaction'), side: 'top' } }}
+            onClick={() => {
+              const newButton = {
+                name: `button${(component.properties.header[columnIndex].buttons ? component.properties.header[columnIndex].buttons.length : 0) + 1}`,
+                class: 'bg-blue',
+                eventHandler: { Header: 'SET', Argument: 'Save', Variables: [] },
+                onClick: () => {},
+              }
+              const buttons = [...(component.properties.header[columnIndex].buttons || []), newButton]
+              updateTableHeader(columnIndex, 'buttons', buttons)
+            }}
+          />
+          <UI.Button
+            wrapperClass="w-8"
+            content={{ icon: ButtonDelete }}
+            onClick={() => {
+              const headers = [...(component.properties.header || [])]
+              headers.splice(columnIndex, 1)
+              updateProperty('header', headers, component, onPropertyChange)
+              headers.forEach((h) => {
+                updateTableHeader(headers.indexOf(h), 'width', `${(100 / headers.length).toFixed(2)}%`)
+              })
+            }}
+          />
         </div>
-      {/if}
-    {/each}
-  </div>
+        {#if column.buttons && column.buttons.length > 0}
+          <div class="mb-5 rounded-lg py-1">
+            {#each column.buttons as button, buttonIndex (buttonIndex)}
+              <div class="ml-14 flex items-end justify-around gap-2">
+                <UI.Input
+                  label={{ name: $t('constructor.props.name') }}
+                  wrapperClass="!w-3/10"
+                  value={button.name}
+                  onUpdate={(value) => updateButtonProperty(columnIndex, buttonIndex, 'name', value)}
+                />
+                <UI.Select
+                  wrapperClass="!w-2/10"
+                  label={{ name: $t('constructor.props.header') }}
+                  type="buttons"
+                  value={$optionsStore.HEADER_OPTIONS.find((h) => h.value === button.eventHandler?.Header)}
+                  options={$optionsStore.HEADER_OPTIONS}
+                  onUpdate={(option) => {
+                    const handler = button.eventHandler
+                    handler.Header = option.value as string
+                    updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
+                  }}
+                />
+                <UI.Input
+                  wrapperClass="!w-2/10"
+                  label={{ name: $t('constructor.props.argument') }}
+                  value={button.eventHandler?.Argument}
+                  onUpdate={(value) => {
+                    const handler = button.eventHandler
+                    handler.Argument = value as string
+                    updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
+                  }}
+                />
+                <UI.Input
+                  wrapperClass="!w-2/10"
+                  label={{ name: $t('constructor.props.table.keys') }}
+                  value={button.eventHandler?.Variables.join(' ')}
+                  maxlength={500}
+                  help={{ info: $t('constructor.props.table.keys.info'), regExp: /^[a-zA-Z0-9\-_ ]{0,500}$/ }}
+                  onUpdate={(value) => {
+                    const handler = { ...button.eventHandler }
+                    handler.Variables = (value as string).trim().split(/\s+/)
+                    updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
+                  }}
+                />
+                <UI.Button
+                  wrapperClass="w-8"
+                  content={{ icon: ButtonDelete }}
+                  onClick={() => {
+                    removeButtonFromColumn(columnIndex, buttonIndex)
+                  }}
+                />
+              </div>
+            {/each}
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {/if}
 {:else}
   <div class="relative flex flex-row items-start justify-center pb-4">
     <div class="flex w-1/3 flex-col px-2">
@@ -374,22 +377,37 @@
         onUpdate={(option) => {
           updateProperty('type', option.value as string, 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.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.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.dataBuffer.rowsAmmount}
-          onUpdate={(value) => updateProperty('dataBuffer.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/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

@@ -270,8 +270,8 @@ export interface ITableProps<T extends object> {
     dataBuffer?: {
         stashData?: boolean;
         rowsAmmount?: number;
-        cleanButton?: boolean;
-        cleanClass?: string;
+        clearButton?: boolean;
+        clearClass?: string;
     };
     outline?: boolean;
     cursor?: string | null;

package/package.json

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