poe-svelte-ui-lib 1.1.20 → 1.1.22

package/dist/Accordion/AccordionProps.svelte

@@ -4,7 +4,7 @@
   import { updateProperty, type IAccordionProps, type UIComponent } from '../types'
   import * as UI from '..'
   import { optionsStore } from '../options'
-  import { ICONS } from './icons'
+  import { ICONS } from '../icons'
   import Modal from '../Modal.svelte'
   import Button from '../Button/Button.svelte'
   import CrossIcon from '../libIcons/CrossIcon.svelte'
@@ -63,7 +63,7 @@
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
       <div class="relative mt-6 flex w-full gap-2">
-        <UI.Button content={{ name: 'Иконка заголовка' }} onClick={() => (showIconLib = true)} />
+        <UI.Button content={{ name: $t('constructor.props.labelicon') }} onClick={() => (showIconLib = true)} />
         {#if showIconLib}
           <Modal bind:isOpen={showIconLib} wrapperClass="w-130">
             {#snippet main()}
@@ -174,7 +174,7 @@
         onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
       />
       <div class="relative mt-5 flex w-full gap-2">
-        <UI.Button content={{ name: 'Иконка заголовка' }} onClick={() => (showIconLib = true)} />
+        <UI.Button content={{ name: $t('constructor.props.labelicon') }} onClick={() => (showIconLib = true)} />
         {#if showIconLib}
           <Modal bind:isOpen={showIconLib} wrapperClass="w-130">
             {#snippet main()}

package/dist/FileAttach/FileAttach.svelte

@@ -41,7 +41,6 @@
     if (file.type.startsWith('image/')) previewUrl = URL.createObjectURL(file)
 
     onChange(event, file)
-    // console.log('!!! curr:', currentImage, 'prev:', previewUrl)
   }
 
   const triggerFileInput = () => {

package/dist/Graph/GraphProps.svelte

@@ -14,8 +14,6 @@
     forConstructor?: boolean
   }>()
 
-  console.log(component.properties.streamingData)
-
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 </script>

package/dist/{Accordion/IconsLib → IconsLib}/common.edit.svg

@@ -1,10 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
-  ><path
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
+>
+  <path
     fill="none"
     stroke="currentColor"
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="1.5"
     d="M14.44 5.78L4.198 16.02a2 2 0 0 0-.565 1.125l-.553 3.774l3.775-.553A2 2 0 0 0 7.98 19.8L18.22 9.56m-3.78-3.78l2.229-2.23a1.6 1.6 0 0 1 2.263 0l1.518 1.518a1.6 1.6 0 0 1 0 2.263l-2.23 2.23M14.44 5.78l3.78 3.78"
-  /></svg
->
+  />
+</svg>

package/dist/{Accordion/IconsLib → IconsLib}/iconsLib.js

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import { join } from 'path';
 const scanAllIcons = async () => {
-    const dirPath = 'src/lib/Accordion/IconsLib';
+    const dirPath = 'src/lib/IconsLib';
     const files = fs.readdirSync(dirPath);
     const categories = {};
     files
@@ -31,7 +31,7 @@ ${Object.entries(categories)
 ]
 
 `;
-    fs.writeFileSync('src/lib/Accordion/icons.ts', content);
+    fs.writeFileSync('src/lib/icons.ts', content);
     console.log('icons.ts создан:', Object.keys(categories));
 };
 scanAllIcons();

package/dist/{Accordion/IconsLib → IconsLib}/settings.debug.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"
 >
   <path
     fill="currentColor"

package/dist/{Accordion/IconsLib → IconsLib}/settings.save.svg

@@ -1,6 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
-  ><path
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
+>
+  <path
     fill="currentColor"
     d="M3 5.75A2.75 2.75 0 0 1 5.75 3h9.965a3.25 3.25 0 0 1 2.298.952l2.035 2.035c.61.61.952 1.437.952 2.299v9.964A2.75 2.75 0 0 1 18.25 21H5.75A2.75 2.75 0 0 1 3 18.25zM5.75 4.5c-.69 0-1.25.56-1.25 1.25v12.5c0 .69.56 1.25 1.25 1.25H6v-5.25A2.25 2.25 0 0 1 8.25 12h7.5A2.25 2.25 0 0 1 18 14.25v5.25h.25c.69 0 1.25-.56 1.25-1.25V8.286c0-.465-.184-.91-.513-1.238l-2.035-2.035a1.75 1.75 0 0 0-.952-.49V7.25a2.25 2.25 0 0 1-2.25 2.25h-4.5A2.25 2.25 0 0 1 7 7.25V4.5zm10.75 15v-5.25a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0-.75.75v5.25zm-8-15v2.75c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75V4.5z"
-  /></svg
->
+  />
+</svg>

package/dist/Input/Input.svelte

@@ -223,7 +223,7 @@
       {#if showInfo}
         <div
           transition:fly={{ x: -15, duration: 250 }}
-          class="absolute top-1/2 left-10 z-50 w-auto -translate-y-1/2 rounded bg-(--container-color) px-2 py-1 shadow-lg"
+          class="absolute top-5 left-10 z-50 w-auto -translate-y-1/2 rounded bg-(--container-color) px-2 py-1 shadow-lg"
         >
           {help?.info}
         </div>

package/dist/ProgressBar/ProgressBar.svelte

@@ -24,7 +24,6 @@
         return Math.max(min, Math.min(max, value))
       } else if (typeof value === 'string') {
         const parsedValue = parseFloat(value)
-        console.log(value)
         if (!isNaN(parsedValue)) {
           return Math.max(min, Math.min(max, parsedValue))
         }
@@ -46,10 +45,10 @@
     <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
-  <div class="flex w-full flex-col items-center">
-    <div class="relative h-2 w-full rounded bg-gray-400">
-      <div class="absolute top-0 left-0 h-full rounded bg-(--bg-color)" style="width: {progressPercent()}%;"></div>
+  <div class="flex h-7 w-full items-center gap-2 rounded-full bg-(--bg-color) px-2">
+    <span class="m-auto font-semibold">{numericValue?.toFixed(2)}{number.units}</span>
+    <div class="relative my-auto h-3.5 w-[85%] rounded-full bg-(--back-color)/40">
+      <div class="absolute top-0 left-0 flex h-full rounded-full bg-(--field-color)" style="width: {progressPercent()}%;"></div>
     </div>
-    <span class="ml-2 font-semibold">{numericValue?.toFixed(2)}{number.units}</span>
   </div>
 </div>

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -144,6 +144,8 @@
       />
       <UI.Input
         label={{ name: $t('constructor.props.value') }}
+        type="number"
+        number={{ minNum: component.properties.number.minNum, maxNum: component.properties.number.maxNum, step: 1 }}
         value={component.properties.value}
         onUpdate={(value) => updateProperty('value', value as string, component, onPropertyChange)}
       />

package/dist/Select/SelectProps.svelte

@@ -90,7 +90,8 @@
         help={{ info: $t('constructor.props.argument.info'), autocomplete: 'on', regExp: /^[a-zA-Z0-9\-_]{0,32}$/ }}
         onUpdate={(value) => updateProperty('eventHandler.Argument', value as string, component, onPropertyChange)}
       />
-
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Select
         label={{ name: $t('constructor.props.type') }}
         type="buttons"
@@ -98,8 +99,6 @@
         options={$optionsStore.SELECT_TYPE_OPTIONS}
         onUpdate={(item) => updateProperty('type', item.value as string, component, onPropertyChange)}
       />
-    </div>
-    <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Select
         wrapperClass="h-14"
         label={{ name: $t('constructor.props.valuetype') }}
@@ -117,21 +116,6 @@
           updateProperty('options', options, component, onPropertyChange)
         }}
       />
-      <UI.Select
-        wrapperClass=" h-14"
-        label={{ name: $t('constructor.props.colors') }}
-        type="buttons"
-        options={$optionsStore.COLOR_OPTIONS}
-        value={initialColor}
-        onUpdate={(option) => {
-          updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)
-          const options = [...(component.properties?.options || [])]
-          options.forEach((o) => {
-            o['class'] = option.value
-          })
-          updateProperty('options', options, component, onPropertyChange)
-        }}
-      />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Input
@@ -161,7 +145,8 @@
         onClick={() => {
           const newOption: ISelectOption = {
             id: crypto.randomUUID(),
-            name: 'New Button',
+            name: `Option ${component.properties?.options.length + 1}`,
+            value: component.properties?.options.length + 1,
             class: 'bg-max',
           }
           const options = [...(component.properties?.options || []), newOption]
@@ -232,21 +217,6 @@
         value={component.properties.wrapperClass}
         onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
       />
-      <UI.Select
-        wrapperClass=" h-14"
-        label={{ name: $t('constructor.props.colors') }}
-        type="buttons"
-        options={$optionsStore.COLOR_OPTIONS}
-        value={initialColor}
-        onUpdate={(option) => {
-          updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)
-          const options = [...(component.properties?.options || [])]
-          options.forEach((o) => {
-            o['class'] = option.value
-          })
-          updateProperty('options', options, component, onPropertyChange)
-        }}
-      />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Input
@@ -259,6 +229,12 @@
         value={component.properties.label.class}
         onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
       />
+      <UI.Switch
+        wrapperClass="bg-blue"
+        label={{ name: $t('constructor.props.disabled') }}
+        value={component.properties.disabled ? 2 : 1}
+        onChange={(value) => updateProperty('disabled', value === 2, component, onPropertyChange)}
+      />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Select
@@ -285,12 +261,6 @@
           updateProperty('options', options, component, onPropertyChange)
         }}
       />
-      <UI.Switch
-        wrapperClass="bg-blue"
-        label={{ name: $t('constructor.props.disabled') }}
-        value={component.properties.disabled ? 2 : 1}
-        onChange={(value) => updateProperty('disabled', value === 2, component, onPropertyChange)}
-      />
     </div>
   </div>
 
@@ -306,7 +276,8 @@
         onClick={() => {
           const newOption: ISelectOption = {
             id: crypto.randomUUID(),
-            name: 'New Button',
+            name: `Option ${component.properties?.options.length + 1}`,
+            value: component.properties?.options.length + 1,
             class: 'bg-max',
           }
           const options = [...(component.properties?.options || []), newOption]

package/dist/Switch/Switch.svelte

@@ -7,7 +7,7 @@
     id = crypto.randomUUID(),
     disabled = false,
     wrapperClass = '',
-    label = { name: '', captionLeft: '', captionRight: '' },
+    label = { name: '', class: '', captionLeft: '', captionRight: '' },
     height = '2rem',
     value = $bindable(),
     onChange = () => {},
@@ -46,7 +46,7 @@
 
 <div class={twMerge(`bg-blue relative flex w-full flex-col items-center justify-center`, wrapperClass)}>
   {#if label.name}
-    <h5 class={`w-full px-4 text-center`}>{label.name}</h5>
+    <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
   <div class="relative flex w-full grow items-center justify-center bg-transparent">

package/dist/Table/Table.svelte

@@ -12,6 +12,7 @@
     body = [],
     header = [],
     footer = '',
+    outline = false,
     cursor = null,
     loader,
     getData = () => {},
@@ -97,7 +98,6 @@
       rawData: text,
       formattedData: formatting ? formatting(text) : (text ?? ''),
     }
-    // console.log(modalData)
   }
 
   const showTooltip = (event: MouseEvent, text: string, formatting?: (text: string) => string) => {
@@ -126,11 +126,22 @@
     <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
-  <div class="flex h-full flex-col overflow-hidden rounded-xl border-(--border-color)">
+  <div class="flex h-full flex-col overflow-hidden rounded-xl border {outline ? ' border-(--border-color)' : 'border-transparent'} ">
     <!-- Table Header -->
     <div class="grid font-semibold" style={`grid-template-columns: ${header.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};`}>
-      {#each header as column (column)}
-        <div class={twMerge(`justify-center bg-(--bg-color) p-2 text-left`, column.label?.class)}>
+      {#each header as column, index (column)}
+        <div
+          class={twMerge(
+            `justify-center border-l ${outline && index !== 0 ? ' border-(--border-color)' : 'border-transparent'} ${
+              column.align?.header === 'center'
+                ? 'flex justify-center text-center'
+                : column.align?.header === 'right'
+                  ? 'flex justify-end text-right'
+                  : 'flex justify-start text-left'
+            } bg-(--bg-color) p-2 text-left`,
+            column.label?.class,
+          )}
+        >
           <span>{column.label?.name}</span>
           {#if column.sortable}
             <button
@@ -148,21 +159,24 @@
     <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 (column)}
+          {#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 === 'center'
+              {column.align?.content === 'center'
                 ? 'flex justify-center text-center'
-                : column.align === 'right'
+                : column.align?.content === 'right'
                   ? 'flex justify-end text-right'
-                  : 'flex justify-start text-left'}"
+                  : '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
+                      class="{twMerge(`cursor-pointer rounded-full 
                            px-4 py-1 font-medium transition-shadow outline-none select-none hover:shadow-md
                           ${typeof button.class === 'function' ? button.class(row) : button.class}`)} bg-(--bg-color)"
                       onclick={() => buttonClick(row, button)}
@@ -171,7 +185,7 @@
                     </button>
                   {/each}
                 </div>
-              {:else if column.image}
+              {: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'};`}
@@ -184,14 +198,16 @@
                       loading="lazy"
                     />
                   {:else if column.image.defaultIcon}
-                    <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
-                    ? 'overflow-hidden text-ellipsis whitespace-nowrap'
-                    : 'whitespace-normal'}"
+                  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
@@ -217,6 +233,9 @@
                     {@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