poe-svelte-ui-lib 1.5.13 → 1.5.15

package/dist/Button/ButtonProps.svelte

@@ -102,7 +102,6 @@
           const parts = (value as string).trim().split(/\s+/)
 
           onPropertyChange({ eventHandler: { Variables: parts } })
-          console.log(component.eventHandler)
         }}
       />
       <UI.Select

package/dist/Table/Table.svelte

@@ -14,7 +14,7 @@
     body = $bindable(),
     header = [],
     footer = '',
-    dataBuffer = { stashData: false, rowsAmmount: 10, clearButton: true, clearClass: '' },
+    dataBuffer = { stashData: false, rowsAmmount: 10, clearButton: false, clearClass: '' },
     type = 'table',
     outline = false,
     cursor = null,
@@ -155,15 +155,49 @@
   }
 
   $effect(() => {
-    if (body && type == 'logger') {
-      buffer = [
-        ...buffer,
+    const currentType = type
+    if (currentType === 'logger') {
+      header = [
+        {
+          key: 'color',
+          label: { name: 'Type' },
+          width: '3rem',
+        } as ITableHeader<any>,
         {
-          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,
-        },
+          key: 'data',
+          label: { name: 'Data' },
+          width: 'calc(100% - 3rem)',
+        } as ITableHeader<any>,
       ]
+    }
+    return () => {
+      buffer = []
+    }
+  })
+
+  $effect(() => {
+    if (body && type == 'logger') {
+      if (Array.isArray(body)) {
+        for (let i = 0; i < body.length; i++) {
+          buffer = [
+            ...buffer,
+            {
+              type: Object.entries(body[i])[0][1] as string,
+              color: `<div class='size-6 rounded-full ${logTypeOptions.find((o) => o.value == Object.entries(body[i])[0][1])?.color}'></div>`,
+              data: Object.entries(body[i])[1][1] as string,
+            },
+          ]
+        }
+      } else {
+        buffer = [
+          ...buffer,
+          {
+            type: Object.entries(body)[0][1] as string,
+            color: `<div class='size-6 rounded-full ${logTypeOptions.find((o) => o.value == Object.entries(body)[0][1])?.color}'></div>`,
+            data: Object.entries(body)[1][1] as string,
+          },
+        ]
+      }
 
       if (dataBuffer && buffer.length > (dataBuffer.rowsAmmount ?? 10)) {
         buffer = buffer.slice(-(dataBuffer.rowsAmmount ?? 10))
@@ -184,27 +218,6 @@
     }
   })
 
-  $effect(() => {
-    const currentType = type
-    if (currentType === '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 () => {
-      buffer = []
-    }
-  })
-
   onMount(() => {
     if (autoscroll) {
       container?.addEventListener('scroll', handleAutoScroll)
@@ -326,7 +339,6 @@
           : dataBuffer.stashData
             ? buffer.slice(-(dataBuffer.rowsAmmount ?? 10))
             : 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(' ')};`}>
@@ -460,7 +472,6 @@
         {@html tooltip.text}
       </div>
     {/if}
-
     <!-- Нижнее поле для сводной информации -->
     {#if footer}
       <div class="flex h-8 items-center justify-center bg-(--bg-color)">

package/dist/Table/TableProps.svelte

@@ -44,15 +44,34 @@
     updateProperty('header', headers, component, onPropertyChange)
   }
 
-  const updateTableBody = () => {
-    const newBody = component.properties.body.map((row: object) => {
-      const newRow: Partial<object> = {}
-      component.properties.header.forEach((col: ITableHeader<any>) => {
-        const key = col.key as keyof object
-        newRow[key] = row[key] ?? `Value of ${key}`
+  const updateTableBody = (typeChange?: boolean, loggerType?: boolean) => {
+    let newBody
+
+    if (typeChange) {
+      newBody = []
+      if (loggerType) {
+        newBody.push({ loglevel: 'error', payload: 'error log' })
+        newBody.push({ loglevel: 'warning', payload: 'warning log' })
+        newBody.push({ loglevel: 'info', payload: 'info log' })
+      } else {
+        const newRow: { [key: string]: any } = {}
+        component.properties.header.forEach((col: ITableHeader<any>) => {
+          const key = col.key as string
+          newRow[key] = `Value of ${key}`
+        })
+        newBody.push(newRow)
+        newBody.push(newRow)
+      }
+    } else {
+      newBody = component.properties.body.map((row: object) => {
+        const newRow: Partial<object> = {}
+        component.properties.header.forEach((col: ITableHeader<any>) => {
+          const key = col.key as keyof object
+          newRow[key] = row[key] ?? `Value of ${key}`
+        })
+        return newRow
       })
-      return newRow
-    })
+    }
     updateProperty('body', newBody, component, onPropertyChange)
   }
 
@@ -98,10 +117,58 @@
         options={$optionsStore.TABLE_TYPE_OPTIONS}
         value={$optionsStore.TABLE_TYPE_OPTIONS.find((o) => o.value === component.properties.type)}
         onUpdate={(option) => {
+          if (option.value === 'logger') {
+            updateProperty('dataBuffer.stashData', true, component, onPropertyChange)
+            updateProperty('dataBuffer.clearButton', true, component, onPropertyChange)
+
+            const headers = [
+              {
+                key: 'color',
+                label: { name: 'Type' },
+                width: '3rem',
+              } as ITableHeader<any>,
+              {
+                key: 'data',
+                label: { name: 'Data' },
+                width: 'calc(100% - 3rem)',
+              } as ITableHeader<any>,
+            ]
+            updateProperty('header', headers, component, onPropertyChange)
+            updateTableBody(true, true)
+          } else {
+            updateProperty('dataBuffer.stashData', false, component, onPropertyChange)
+            updateProperty('dataBuffer.clearButton', false, component, onPropertyChange)
+            const headers = [
+              {
+                key: 'id',
+                label: { name: 'ID' },
+                width: '40%',
+                sortable: true,
+                image: {
+                  width: '0rem',
+                  height: '0rem',
+                },
+                align: 'left',
+              } as ITableHeader<any>,
+              {
+                key: 'device',
+                label: { name: 'Device' },
+                width: '60%',
+                sortable: false,
+                image: {
+                  width: '0rem',
+                  height: '0rem',
+                },
+                align: 'left',
+                overflow: {
+                  truncated: true,
+                },
+              } as ITableHeader<any>,
+            ]
+            updateProperty('header', headers, component, onPropertyChange)
+            updateTableBody(true, false)
+          }
           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>
@@ -120,14 +187,6 @@
         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.dataBuffer.stashData}
-        options={[{ id: crypto.randomUUID(), value: 0, class: '', disabled: component.properties.type === 'logger' }]}
-        onChange={(value) => {
-          updateProperty('dataBuffer.stashData', value, component, onPropertyChange)
-        }}
-      />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Input
@@ -143,11 +202,12 @@
         onUpdate={(option) => updateProperty('label.class', twMerge(component.properties.label.class, option.value), component, onPropertyChange)}
       />
       {#if component.properties.dataBuffer.stashData}
-        <UI.Input
+        <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>
@@ -376,8 +436,54 @@
         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('dataBuffer.stashData', true, component, onPropertyChange)
-          if (option.value === 'table') updateProperty('dataBuffer.clearButton', false, component, onPropertyChange)
+          if (option.value === 'logger') {
+            updateProperty('dataBuffer.stashData', true, component, onPropertyChange)
+            updateProperty('dataBuffer.clearButton', true, component, onPropertyChange)
+
+            const headers = [
+              {
+                key: 'color',
+                label: { name: 'Type' },
+                width: '3rem',
+              } as ITableHeader<any>,
+              {
+                key: 'data',
+                label: { name: 'Data' },
+                width: 'calc(100% - 3rem)',
+              } as ITableHeader<any>,
+            ]
+            updateProperty('header', headers, component, onPropertyChange)
+          } else {
+            updateProperty('dataBuffer.clearButton', false, component, onPropertyChange)
+            const headers = [
+              {
+                key: 'id',
+                label: { name: 'ID' },
+                width: '40%',
+                sortable: true,
+                image: {
+                  width: '0rem',
+                  height: '0rem',
+                },
+                align: 'left',
+              } as ITableHeader<any>,
+              {
+                key: 'device',
+                label: { name: 'Device' },
+                width: '60%',
+                sortable: false,
+                image: {
+                  width: '0rem',
+                  height: '0rem',
+                },
+                align: 'left',
+                overflow: {
+                  truncated: true,
+                },
+              } as ITableHeader<any>,
+            ]
+            updateProperty('header', headers, component, onPropertyChange)
+          }
         }}
       />
       <div class="flex">
@@ -625,7 +731,6 @@
                     onUpdate={(value) => {
                       const handler = { ...button.eventHandler }
                       handler.Variables = (value as string).trim().split(/\s+/)
-                      console.log(handler)
                       updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
                     }}
                   />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.5.13",
+  "version": "1.5.15",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -8,7 +8,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "prepack": "svelte-kit sync && svelte-package && publint",
-    "CheckUpdate": "npx npm-check-updates -u && npm install && npm install prettier@3.6.2",
+    "CheckUpdate": "npx npm-check-updates -u && npm install",
     "UpdateIconsLib": "tsx src/lib/IconsCatalog/iconsLib.ts"
   },
   "svelte": "./dist/index.js",
@@ -33,8 +33,8 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.18",
-    "prettier": "^3.6.2",
-    "prettier-plugin-svelte": "^3.4.0",
+    "prettier": "^3.7.4",
+    "prettier-plugin-svelte": "^3.4.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "svelte-maplibre-gl": "^1.0.2",
     "tailwind-merge": "^3.4.0",
@@ -47,9 +47,9 @@
     "@sveltejs/kit": "^2.49.2",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@types/node": "^25.0.1",
+    "@types/node": "^25.0.2",
     "publint": "^0.3.16",
-    "svelte": "^5.45.10",
+    "svelte": "^5.46.0",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.2.7",
     "vite-plugin-compression": "^0.5.1"