poe-svelte-ui-lib 1.5.14 → 1.5.16

package/dist/Button/Button.svelte

@@ -21,6 +21,33 @@
 
   let showInfo = $state(false)
 
+  let tooltipConfig = $derived({
+    top: {
+      pos: 'bottom-full left-1/2 mb-2',
+      tr: 'translateX(-50%)',
+      arr: 'top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-45',
+      off: 'y:-15',
+    },
+    bottom: {
+      pos: 'top-full left-1/2 mt-2',
+      tr: 'translateX(-50%)',
+      arr: 'bottom-full left-1/2 -translate-x-1/2 translate-y-1/2 rotate-45',
+      off: 'y:15',
+    },
+    left: {
+      pos: 'top-1/2 right-full mr-2',
+      tr: 'translateY(-50%)',
+      arr: 'top-1/2 -right-2 -translate-x-1/2 -translate-y-1/2 rotate-45',
+      off: 'x:15',
+    },
+    right: {
+      pos: 'top-1/2 left-full ml-2',
+      tr: 'translateY(-50%)',
+      arr: 'top-1/2 -left-2 translate-x-1/2 -translate-y-1/2 rotate-45 ',
+      off: 'x:-15',
+    },
+  })
+
   const svgSize = $derived(() => {
     const widthClass = twMerge(
       wrapperClass.split(' ').find((cls: string) => cls.startsWith('w-')),
@@ -113,41 +140,15 @@
     </div>
   </button>
 
-  {#if showInfo && content.info?.side === 'top'}
-    <div
-      transition:fly={{ y: -15, duration: 300 }}
-      class="absolute bottom-full left-1/2 z-50 mb-2 w-max max-w-xs rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
-      style="transform: translateX(-50%);"
-    >
-      {content.info?.text}
-      <div class="absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 transform bg-(--container-color)"></div>
-    </div>
-  {:else if showInfo && content.info?.side === 'bottom'}
-    <div
-      transition:fly={{ y: 15, duration: 300 }}
-      class="absolute top-full left-1/2 z-50 mt-2 w-max max-w-xs rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
-      style="transform: translateX(-50%);"
-    >
-      {content.info?.text}
-      <div class="absolute bottom-full left-1/2 h-2 w-2 -translate-x-1/2 translate-y-1/2 rotate-45 transform bg-(--container-color)"></div>
-    </div>
-  {:else if showInfo && content.info?.side === 'left'}
-    <div
-      transition:fly={{ x: 15, duration: 300 }}
-      class="absolute top-1/2 right-full z-50 mr-2 w-max max-w-xs rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
-      style="transform: translateY(-50%);"
-    >
-      {content.info?.text}
-      <div class="absolute top-1/2 -right-2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 transform bg-(--container-color)"></div>
-    </div>
-  {:else if showInfo && content.info?.side === 'right'}
+  {#if showInfo && content.info?.side && tooltipConfig[content.info?.side]}
+    {@const config = tooltipConfig[content.info?.side]}
     <div
-      transition:fly={{ x: -15, duration: 300 }}
-      class="absolute top-1/2 left-full z-50 ml-2 w-max max-w-xs rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
-      style="transform: translateY(-50%);"
+      transition:fly={{ [config.off.split(':')[0]]: parseInt(config.off.split(':')[1]), duration: 300 }}
+      class={`absolute z-50 w-max max-w-xs rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg ${config.pos}`}
+      style={`transform: ${config.tr};`}
     >
       {content.info?.text}
-      <div class="absolute top-1/2 -left-2 h-2 w-2 translate-x-1/2 -translate-y-1/2 -rotate-45 transform bg-(--container-color)"></div>
+      <div class={`absolute ${config.arr} h-2 w-2 transform bg-(--container-color)`}></div>
     </div>
   {/if}
 </div>

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)
@@ -311,7 +324,10 @@
     </div>
     {#if dataBuffer.clearButton}
       <button
-        class={twMerge('absolute right-2 bg-(--back-color) rounded-full p-1 cursor-pointer', dataBuffer.clearClass)}
+        class={twMerge(
+          'absolute right-2 bg-(--back-color) rounded-full p-1 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full',
+          dataBuffer.clearClass,
+        )}
         onclick={() => (buffer = [])}
       >
         <ButtonClear />
@@ -326,7 +342,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 +475,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,7 +117,6 @@
         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('dataBuffer.stashData', true, component, onPropertyChange)
             updateProperty('dataBuffer.clearButton', true, component, onPropertyChange)
@@ -116,7 +134,9 @@
               } 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 = [
               {
@@ -146,7 +166,9 @@
               } as ITableHeader<any>,
             ]
             updateProperty('header', headers, component, onPropertyChange)
+            updateTableBody(true, false)
           }
+          updateProperty('type', option.value as string, component, onPropertyChange)
         }}
       />
     </div>
@@ -165,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
@@ -717,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.14",
+  "version": "1.5.16",
   "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"