poe-svelte-ui-lib 1.4.7 → 1.5.0

package/dist/FileAttach/FileAttach.svelte

@@ -15,7 +15,7 @@
     onChange = () => {},
   }: IFileAttachProps = $props()
 
-  let ID = `${id}-${crypto.randomUUID().slice(0, 6)}`
+  let ID = $derived(`${id}-${crypto.randomUUID().slice(0, 6)}`)
   let selectedFile = $state<File | null>(null)
   let previewUrl = $derived(currentImage ? (currentImage.startsWith('data:') ? currentImage : `data:image/png;base64,${currentImage}`) : null)
   let fileName = $state('')

package/dist/FileAttach/FileAttachProps.svelte

@@ -31,15 +31,6 @@
   <div class="relative flex flex-row items-start justify-center">
     <!-- Сообщение для отправки в ws по нажатию кнопки -->
     <div class="flex w-1/3 flex-col items-center px-2">
-      <UI.Select
-        label={{ name: $t('constructor.props.variable') }}
-        options={VARIABLE_OPTIONS}
-        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
-        onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange)
-          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: value.value as string } })
-        }}
-      />
       <UI.Select
         label={{ name: $t('constructor.props.access') }}
         type="buttons"

package/dist/Input/Input.svelte

@@ -66,7 +66,7 @@
         class={twMerge(
           `w-full rounded-2xl border px-4 py-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition duration-200
               outline-none focus:shadow-[0_0_6px_var(--blue-color)] focus:border-(--blue-color) [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
-              ${isValid ? 'border-(--bg-color)' : 'border-red-400 shadow-[0_0_6px_var(--red-color)] focus:border-red-400'}
+              ${isValid ? 'border-(--bg-color)' : 'border-red-400 shadow-[0_0_6px_var(--red-color)] focus:shadow-[0_0_6px_var(--red-color)] focus:border-red-400'}
               ${disabled ? 'opacity-50' : 'hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'} 
               ${readonly ? '' : 'hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}
               ${help?.info ? 'pl-8' : ''} 
@@ -92,7 +92,7 @@
         class={twMerge(
           `h-full w-full resize-y rounded-2xl border border-(--border-color) px-2 py-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition
           duration-200 outline-none focus:border-blue-400
-            ${isValid ? 'border-(--bg-color)' : 'border-red-400 shadow-[0_0_6px_var(--red-color)]'}
+            ${isValid ? 'border-(--bg-color)' : 'border-red-400 shadow-[0_0_6px_var(--red-color)] focus:shadow-[0_0_6px_var(--red-color)] focus:border-red-400'}
             ${disabled ? 'cursor-not-allowed opacity-50' : 'hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'} 
             ${readonly ? '' : 'hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}
             ${help?.info ? 'pl-8' : ''}

package/dist/Input/InputProps.svelte

@@ -112,7 +112,11 @@
         options={$optionsStore.INPUT_TYPE_OPTIONS}
         type="buttons"
         value={$optionsStore.INPUT_TYPE_OPTIONS.find((opt) => opt.value === (component.properties.type || 'text'))}
-        onUpdate={(selectedOption) => updateProperty('type', selectedOption.value as string)}
+        onUpdate={(selectedOption) => {
+          updateProperty('type', selectedOption.value as string)
+          if (selectedOption.value === 'text-area') updateProperty('componentClass', twMerge(component.properties.componentClass, 'font-mono'))
+          else updateProperty('componentClass', twMerge(component.properties.componentClass, 'font-[Montserrat]'))
+        }}
       />
       {#if component.properties.type === 'text' || component.properties.type === 'password' || component.properties.type === 'text-area'}
         <UI.Input
@@ -235,7 +239,7 @@
       <UI.Input
         label={{ name: $t('constructor.props.componentclass') }}
         value={component.properties.componentClass}
-        onUpdate={(value) => updateProperty('componentClass', value as string)}
+        onUpdate={(value) => updateProperty('componentClass', twMerge(component.properties.componentClass, value as string))}
       />
       <UI.Select
         wrapperClass="h-14"

package/dist/Select/Select.svelte

@@ -99,7 +99,7 @@
       id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
       value={value?.value ? String(value.value) : ''}
       class={twMerge(
-        `w-full rounded-2xl border border-(--bg-color) p-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition-shadow duration-200
+        `w-full rounded-2xl border border-(--bg-color) p-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition duration-200
         ${disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}`,
         value?.class,
       )}
@@ -143,7 +143,7 @@
         <button
           id={option.id}
           class="{twMerge(
-            `m-0 inline-block min-w-0 flex-1 items-center px-2 py-1 font-semibold shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition-all duration-300 select-none border border-(--bg-color)
+            `m-0 inline-block min-w-0 flex-1 items-center px-2 py-1 font-semibold shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition duration-300 select-none border border-(--bg-color)
             ${option.disabled || disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}
             ${option.value === value?.value && value !== null ? 'z-10 py-1 shadow-[0_0_10px_var(--shadow-color)] hover:shadow-[0_0_15px_var(--shadow-color)]' : ''}  
             ${options.length > 0 && index === 0 ? 'rounded-l-2xl' : ''} ${index === options.length - 1 ? 'rounded-r-2xl' : ''}`,
@@ -166,7 +166,7 @@
     <input
       bind:value={searchValue}
       class="w-full appearance-none rounded-2xl border px-4 py-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)]
-          transition-shadow duration-200 outline-none focus:shadow-[0_0_6px_var(--blue-color)]
+          transition duration-200 outline-none focus:shadow-[0_0_6px_var(--blue-color)]
           [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
           {disabled
         ? 'cursor-not-allowed opacity-50'

package/dist/Slider/Slider.svelte

@@ -17,8 +17,8 @@
 
   const isRange = $derived(type === 'range' || (Array.isArray(value) && value.length === 2))
 
-  const maxDigits = String(number.maxNum ?? 100).length
-  const valueWidth = `${maxDigits + 1}ch` /* +1 на запас */
+  const maxDigits = $derived(String(number.maxNum ?? 100).length)
+  const valueWidth = $derived(`${maxDigits + 1}ch`) /* +1 на запас */
 
   /* Инициализация значений с проверкой типа */
   let singleValue = $derived(!isRange && typeof value === 'number' ? value : number.minNum)

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'} "
   >
@@ -171,9 +288,9 @@
         <div
           class={twMerge(
             `items-center justify-center border-l ${outline && index !== 0 ? ' border-(--border-color)' : 'border-transparent'} ${
-              column.align?.header === 'center'
+              column.align === 'center'
                 ? 'flex justify-center text-center'
-                : column.align?.header === 'right'
+                : column.align === 'right'
                   ? 'flex justify-end text-right'
                   : 'flex justify-start text-left'
             } gap-1 bg-(--bg-color) p-2 text-left`,
@@ -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?.content === 'center'
-                ? 'flex justify-center text-center'
-                : column.align?.content === 'right'
-                  ? 'flex justify-end text-right'
-                  : 'flex justify-start text-left'}
+              {column.align === 'center'
+                  ? '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 = $state({ 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) =>
@@ -77,7 +77,7 @@
 </script>
 
 {#if forConstructor}
-  <div class="relative flex flex-row items-start justify-center">
+  <div class="relative flex flex-row items-start justify-center pb-4">
     <div class="flex w-1/3 flex-col px-2">
       <UI.Select
         label={{ name: $t('constructor.props.variable') }}
@@ -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>
 
@@ -183,11 +207,9 @@
         <UI.Select
           label={{ name: $t('constructor.props.align.content') }}
           type="buttons"
-          value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align?.content) || 'left')}
+          value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align))}
           options={$optionsStore.ALIGN_OPTIONS}
-          onUpdate={(option) => {
-            updateTableHeader(columnIndex, 'align', { header: option.value, content: option.value })
-          }}
+          onUpdate={(option) => updateTableHeader(columnIndex, 'align', option.value)}
         />
         <UI.Switch
           wrapperClass="w-30"
@@ -288,7 +310,7 @@
     {/each}
   </div>
 {:else}
-  <div class="relative flex flex-row items-start justify-center">
+  <div class="relative flex flex-row items-start justify-center pb-4">
     <div class="flex w-1/3 flex-col px-2">
       <UI.Input
         label={{ name: $t('constructor.props.id') }}
@@ -407,13 +429,6 @@
                 value={Number(column.width.replace('%', ''))}
                 onUpdate={(value) => updateTableHeader(columnIndex, 'width', `${value}%`)}
               />
-              <UI.Select
-                label={{ name: $t('constructor.props.align.header') }}
-                type="buttons"
-                value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align?.header) || 'left')}
-                options={$optionsStore.ALIGN_OPTIONS}
-                onUpdate={(option) => updateTableHeader(columnIndex, 'align', { header: option.value, content: column.align?.content })}
-              />
               <UI.Switch
                 label={{ name: $t('constructor.props.table.columns.sortable'), class: 'px-0' }}
                 wrapperClass="w-30"
@@ -459,9 +474,9 @@
               <UI.Select
                 label={{ name: $t('constructor.props.align.content') }}
                 type="buttons"
-                value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align?.content) || 'left')}
+                value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align))}
                 options={$optionsStore.ALIGN_OPTIONS}
-                onUpdate={(option) => updateTableHeader(columnIndex, 'align', { header: column.align?.header, content: option.value })}
+                onUpdate={(option) => updateTableHeader(columnIndex, 'align', option.value)}
               />
               <UI.Switch
                 wrapperClass="w-2/10"

package/dist/Tabs/Tabs.svelte

@@ -23,7 +23,7 @@
 
   const isCol = $derived(!!items.find((item) => item.class?.startsWith('flex-col')))
 
-  let currentTabIndex: number = $state(activeTab)
+  let currentTabIndex: number = $derived(activeTab)
 </script>
 
 <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="w-full rounded-2xl bg-(--back-color)">

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

@@ -34,10 +34,10 @@ export interface UIComponent {
     eventHandler?: IUIComponentHandler;
 }
 export interface Position {
-    row: number;
-    col: number;
-    width: number;
-    height: number;
+    row?: number;
+    col?: number;
+    width?: number;
+    height?: number;
 }
 export interface IUIComponentHandler {
     Header?: string;
@@ -233,10 +233,7 @@ export interface ITableHeader<T extends object> {
     key: keyof T;
     sortable?: boolean;
     width?: string;
-    align?: {
-        header?: 'left' | 'center' | 'right';
-        content?: 'left' | 'center' | 'right';
-    };
+    align?: 'left' | 'center' | 'right';
     overflow?: {
         truncated?: boolean;
         formatting?: (text: string) => string;
@@ -265,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.7",
+  "version": "1.5.0",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -44,12 +44,12 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.49.0",
+    "@sveltejs/kit": "^2.49.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.10.1",
     "publint": "^0.3.15",
-    "svelte": "^5.45.3",
+    "svelte": "^5.45.5",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.2.6",
     "vite-plugin-compression": "^0.5.1"