poe-svelte-ui-lib 1.0.9 → 1.0.11

package/dist/Button/Button.svelte

@@ -58,9 +58,9 @@
       {id}
       class="{twMerge(
         `relative m-0 inline-block w-full items-center rounded-2xl 
-        px-2 py-1 font-semibold shadow-sm transition duration-200 select-none
-        ${content.icon && !content.name ? 'bg-transparent' : 'border border-[var(--bg-color)] '}
-        ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:shadow-md active:scale-97'} `,
+        px-2 py-1 font-semibold  transition duration-200 select-none
+        ${content.icon && !content.name ? 'bg-transparent p-0' : 'border border-[var(--bg-color)] '}
+        ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer  active:scale-97'} `,
         componentClass,
       )} bg-[var(--bg-color)]"
       onclick={handleClick}
@@ -73,15 +73,19 @@
         if (content.info) showInfo = false
       }}
     >
-      <span class="flex flex-row items-center justify-center gap-2">
-        <span
-          class={`flex h-8 w-8 shrink-0 items-center justify-center overflow-visible [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
-        >
-          {#if content?.icon}
-            {@const IconComponent = content?.icon}
-            <IconComponent />
-          {/if}
-        </span>
+      <span class=" flex flex-row items-center justify-center gap-2">
+        {#if content?.icon}
+          <span
+            class={`flex items-center justify-center overflow-visible 
+            ${content.name ? 'h-8 w-8' : `${componentClass}`} [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
+          >
+            {#if content?.icon}
+              {@const IconComponent = content?.icon}
+              <IconComponent />
+            {/if}
+          </span>
+        {/if}
+
         {#if content.name}
           <div class="flex-1">
             {content.name}

package/dist/ColorPicker/ColorPicker.svelte

@@ -131,7 +131,7 @@
 
 <div {id} class={twMerge(`relative flex w-full flex-col items-center`, wrapperClass)}>
   {#if label.name}
-    <h5 class={twMerge(`mb-2 w-full px-4 text-center`, label.class)}>{label.name}</h5>
+    <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
   <div class="flex w-full flex-row items-center gap-2">
@@ -201,18 +201,12 @@
 
     <!-- Превью цвета -->
 
-    <div class="flex w-24 flex-col items-center">
+    <div class="flex w-25 flex-col items-center">
       <div
         class={`flex size-15 flex-col justify-center gap-1 rounded-full px-2 font-mono text-sm shadow-md select-none ${textColor()}`}
         style={`background: rgb(${previewBaseColor().join(',')})`}
       ></div>
       <div class="w-full text-center font-semibold">{hex()}</div>
     </div>
-    <!-- <div>
-      <div class="flex flex-col items-center">
-        <span class="w-full flex-shrink-0">{mode === 'white' ? 'White' : 'RGB'}</span>
-        <div class="пфз-1 w-full text-center tracking-wide">{hex()}</div>
-      </div>
-    </div> -->
   </div>
 </div>

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -11,13 +11,13 @@
     onPropertyChange: (value: string | object) => void
   }>()
 
-  const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
+  const DeviceVariables = getContext<string[]>('DeviceVariables')
   let VARIABLE_OPTIONS = $derived(
     DeviceVariables && Array.isArray(DeviceVariables)
       ? DeviceVariables.map((variable) => ({
-          id: variable.name,
-          value: variable.value,
-          name: `${variable.value} | ${variable.name}`,
+          id: variable,
+          value: variable,
+          name: variable,
         }))
       : [],
   )
@@ -36,7 +36,7 @@
       <UI.Select
         label={{ name: $t('constructor.props.variable') }}
         options={VARIABLE_OPTIONS}
-        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
           updateProperty('id', value.value as string, component, onPropertyChange)
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)

package/dist/Graph/Graph.svelte

@@ -117,7 +117,6 @@
         }
       }, 10)
     }
-    console.log(streamingData.data)
     return () => clearInterval(intervalId)
   })
 

package/dist/Graph/GraphProps.svelte

@@ -10,13 +10,13 @@
     onPropertyChange: (value: string | object) => void
   }>()
 
-  const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
+  const DeviceVariables = getContext<string[]>('DeviceVariables')
   let VARIABLE_OPTIONS = $derived(
     DeviceVariables && Array.isArray(DeviceVariables)
       ? DeviceVariables.map((variable) => ({
-          id: variable.name,
-          value: variable.value,
-          name: `${variable.value} | ${variable.name}`,
+          id: variable,
+          value: variable,
+          name: variable,
         }))
       : [],
   )
@@ -29,7 +29,7 @@
       <UI.Select
         label={{ name: $t('constructor.props.variable') }}
         options={VARIABLE_OPTIONS}
-        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
           updateProperty('id', value.value as string, component, onPropertyChange)
         }}

package/dist/Input/InputProps.svelte

@@ -12,13 +12,13 @@
   }>()
 
   let isValidRegExp = $state(true)
-  const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
-  let VARIABLE_OPTIONS: ISelectOption<string>[] = $derived(
+  const DeviceVariables = getContext<string[]>('DeviceVariables')
+  let VARIABLE_OPTIONS = $derived(
     DeviceVariables && Array.isArray(DeviceVariables)
       ? DeviceVariables.map((variable) => ({
-          id: variable.name,
-          value: variable.value,
-          name: `${variable.value} | ${variable.name}`,
+          id: variable,
+          value: variable,
+          name: variable,
         }))
       : [],
   )
@@ -97,7 +97,7 @@
       <UI.Select
         label={{ name: $t('constructor.props.variable') }}
         options={VARIABLE_OPTIONS}
-        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(selectedOption) => {
           if (selectedOption && selectedOption.name) {
             updateProperty('id', selectedOption.value as string)

package/dist/ProgressBar/ProgressBar.svelte

@@ -33,17 +33,21 @@
     })(),
   )
 
-  let progressPercent = $derived((((value as number) - min) / (max - min)) * 100)
+  const progressPercent = $derived(() => {
+    if (value) {
+      return (((Math.min(Math.max(value, min), max) - min) / (max - min)) * 100) as number
+    }
+  })
 </script>
 
 <div {id} class={twMerge(`relative flex w-full flex-col items-center`, wrapperClass)}>
   {#if label.name}
-    <h5 class={twMerge(`mb-1 w-full px-4 text-center`, label.class)}>{label.name}</h5>
+    <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-[var(--bg-color)]" style="width: {progressPercent}%;"></div>
+      <div class="absolute top-0 left-0 h-full rounded bg-[var(--bg-color)]" style="width: {progressPercent()}%;"></div>
     </div>
     <span class="ml-2 font-semibold">{numericValue?.toFixed(2)}{number.units}</span>
   </div>

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -11,13 +11,13 @@
     onPropertyChange: (value: string | object) => void
   }>()
 
-  const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
+  const DeviceVariables = getContext<string[]>('DeviceVariables')
   let VARIABLE_OPTIONS = $derived(
     DeviceVariables && Array.isArray(DeviceVariables)
       ? DeviceVariables.map((variable) => ({
-          id: variable.name,
-          value: variable.value,
-          name: `${variable.value} | ${variable.name}`,
+          id: variable,
+          value: variable,
+          name: variable,
         }))
       : [],
   )
@@ -41,7 +41,7 @@
       <UI.Select
         label={{ name: $t('constructor.props.variable') }}
         options={VARIABLE_OPTIONS}
-        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
           updateProperty('id', value.value as string, component, onPropertyChange)
         }}

package/dist/Select/Select.svelte

@@ -141,7 +141,7 @@
           class="{twMerge(
             `m-0 inline-block min-w-0 flex-1 items-center px-2 py-1 font-semibold shadow-sm transition-all duration-300 select-none
             ${option.disabled || disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-md'}
-            ${option.value === value?.value && value !== null ? 'z-10 py-0 text-[1.1rem] shadow-[0_0_10px_var(--shadow-color)] hover:shadow-[0_0_15px_var(--shadow-color)]' : ''}  
+            ${option.value === value?.value && value !== null ? 'z-10 py-0 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' : ''}`,
             option.class,
           )} bg-[var(--bg-color)]"

package/dist/Select/SelectProps.svelte

@@ -13,13 +13,13 @@
     onPropertyChange: (path: string, value: string | object) => void
   }>()
 
-  const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
+  const DeviceVariables = getContext<string[]>('DeviceVariables')
   let VARIABLE_OPTIONS = $derived(
     DeviceVariables && Array.isArray(DeviceVariables)
       ? DeviceVariables.map((variable) => ({
-          id: variable.name,
-          value: variable.value,
-          name: `${variable.value} | ${variable.name}`,
+          id: variable,
+          value: variable,
+          name: variable,
         }))
       : [],
   )
@@ -86,7 +86,7 @@
       <UI.Select
         label={{ name: $t('constructor.props.variable') }}
         options={VARIABLE_OPTIONS}
-        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
           updateProperty('id', value.value as string, component, onPropertyChange)
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)

package/dist/Slider/Slider.svelte

@@ -92,7 +92,7 @@
   }
 </script>
 
-<div class={twMerge(`relative flex w-full flex-col items-center gap-2`, wrapperClass)}>
+<div class={twMerge(`relative flex w-full flex-col items-center `, wrapperClass)}>
   {#if label.name}
     <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
@@ -199,7 +199,7 @@
   </div>
 
   <!-- Кнопки управления -->
-  <div class={`flex w-full ${isRange ? 'justify-between' : 'justify-center'} gap-2`}>
+  <div class={`mt-3 flex w-full ${isRange ? 'justify-between' : 'justify-center'} gap-2`}>
     {#if isRange}
       {#each ['lower', 'upper'] as type (type)}
         <div

package/dist/Slider/SliderProps.svelte

@@ -11,13 +11,13 @@
     onPropertyChange: (value: string | object) => void
   }>()
 
-  const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
+  const DeviceVariables = getContext<string[]>('DeviceVariables')
   let VARIABLE_OPTIONS = $derived(
     DeviceVariables && Array.isArray(DeviceVariables)
       ? DeviceVariables.map((variable) => ({
-          id: variable.name,
-          value: variable.value,
-          name: `${variable.value} | ${variable.name}`,
+          id: variable,
+          value: variable,
+          name: variable,
         }))
       : [],
   )
@@ -41,7 +41,7 @@
       <UI.Select
         label={{ name: $t('constructor.props.variable') }}
         options={VARIABLE_OPTIONS}
-        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
           updateProperty('id', value.value as string, component, onPropertyChange)
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)

package/dist/Switch/SwitchProps.svelte

@@ -5,35 +5,27 @@
   import { type UIComponent, type ISwitchProps, updateProperty, type ISelectOption } from '../types'
   import * as UI from '..'
   import { optionsStore } from '../options'
-  import { twMerge } from 'tailwind-merge'
 
   const { component, onPropertyChange } = $props<{
     component: UIComponent & { properties: Partial<ISwitchProps> }
     onPropertyChange: (value: string | object) => void
   }>()
 
-  const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
+  const DeviceVariables = getContext<string[]>('DeviceVariables')
   let VARIABLE_OPTIONS = $derived(
     DeviceVariables && Array.isArray(DeviceVariables)
       ? DeviceVariables.map((variable) => ({
-          id: variable.name,
-          value: variable.value,
-          name: `${variable.value} | ${variable.name}`,
+          id: variable,
+          value: variable,
+          name: variable,
         }))
       : [],
   )
-
   const initialColor = $derived(
     $optionsStore.COLOR_OPTIONS.find((c) =>
       (c.value as string).includes(component.properties.wrapperClass?.split(' ').find((cls: string) => cls.startsWith('bg-'))),
     ),
   )
-
-  const initialAlign = $derived(
-    $optionsStore.ALIGN_OPTIONS.find((a) =>
-      (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
-    ),
-  )
 </script>
 
 {#if component && component.properties}
@@ -43,7 +35,7 @@
       <UI.Select
         label={{ name: $t('constructor.props.variable') }}
         options={VARIABLE_OPTIONS}
-        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
           updateProperty('id', value.value as string, component, onPropertyChange)
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)

package/dist/Table/Table.svelte

@@ -4,7 +4,7 @@
   import type { ITableHeader, ITableProps } from '../types'
   import { fade, fly, slide } from 'svelte/transition'
   import { twMerge } from 'tailwind-merge'
-  import { Button, Modal } from '..'
+  import { Button, Modal, Slider } from '..'
   import { t } from '../locales/i18n'
 
   let {

package/dist/Table/TableProps.svelte

@@ -13,13 +13,13 @@
     onPropertyChange: (value: string | object) => void
   }>()
 
-  const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
+  const DeviceVariables = getContext<string[]>('DeviceVariables')
   let VARIABLE_OPTIONS = $derived(
     DeviceVariables && Array.isArray(DeviceVariables)
       ? DeviceVariables.map((variable) => ({
-          id: variable.name,
-          value: variable.value,
-          name: `${variable.value} | ${variable.name}`,
+          id: variable,
+          value: variable,
+          name: variable,
         }))
       : [],
   )
@@ -65,7 +65,7 @@
       <UI.Select
         label={{ name: $t('constructor.props.variable') }}
         options={VARIABLE_OPTIONS}
-        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
           updateProperty('id', value.value as string, component, onPropertyChange)
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
@@ -154,7 +154,7 @@
           componentClass="bg-transparent h-10 w-10 border-none !shadow-none hover:shadow-none"
           onClick={() => {
             const newButton = {
-              name: `button${(component.properties.header[columnIndex].buttons.length || 0) + 1}`,
+              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: () => {},

package/dist/TextField/TextFieldProps.svelte

@@ -4,12 +4,23 @@
   import { updateProperty, type ITextFieldProps, type UIComponent } from '../types'
   import * as UI from '../index'
   import { optionsStore } from '../options'
+  import { getContext } from 'svelte'
 
   const { component, onPropertyChange } = $props<{
     component: UIComponent & { properties: Partial<ITextFieldProps> }
     onPropertyChange: (value: string | object) => void
   }>()
 
+  const DeviceVariables = getContext<string[]>('DeviceVariables')
+  let VARIABLE_OPTIONS = $derived(
+    DeviceVariables && Array.isArray(DeviceVariables)
+      ? DeviceVariables.map((variable) => ({
+          id: variable,
+          value: variable,
+          name: variable,
+        }))
+      : [],
+  )
   let currentType = $derived($optionsStore.TEXTFIELD_SIZE_OPTIONS.find((t) => t.value === component.properties.content.size))
 
   const initialAlign = $derived(
@@ -29,6 +40,15 @@
 {#if component && component.properties}
   <div class="relative flex flex-row items-start justify-center">
     <div class="flex w-1/3 flex-col 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)
+          updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
+        }}
+      />
       <UI.Input
         label={{ name: $t('constructor.props.label') }}
         value={component.properties.content.name}

package/dist/options.js

@@ -54,7 +54,8 @@ export const optionsStore = derived(t, ($t) => {
             { id: id(), name: '', value: 'bg-red', class: 'bg-red' },
             { id: id(), name: '', value: 'bg-yellow', class: 'bg-yellow' },
             { id: id(), name: '', value: 'bg-green', class: 'bg-green' },
-            { id: id(), name: '', value: 'bg-blue', class: 'bg-blue' },
+            { id: id(), name: '', value: 'bg-cyan', class: 'bg-cyan' },
+            { id: id(), name: '', value: 'bg-purple', class: 'bg-purple' },
         ],
         TEXT_COLOR_OPTIONS: [
             { id: id(), name: '', value: 'text-[#333] dark:text-[#e2e3e7]', class: 'bg-[var(--shadow-color)] dark:bg-[#e2e3e7] ' },

package/package.json

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