poe-svelte-ui-lib 1.1.7 → 1.1.10

package/dist/Accordion/Accordion.svelte

@@ -11,7 +11,7 @@
     size = { width: 1, height: 1 },
     label = { name: '', class: 'text-left', icon: null },
     children,
-    image,
+    image = '',
   }: IAccordionProps = $props()
 
   const toggle = () => (isOpen = !isOpen)
@@ -20,8 +20,8 @@
 <div
   {id}
   class={twMerge(
-    `${outline ? 'border-none' : 'rounded-xl hover:shadow-md'} w-full
-    border border-[var(--border-color)] bg-[var(--container-color)] p-0 transition-shadow duration-250`,
+    `w-full border border-[var(--border-color)] bg-[var(--container-color)] p-0 transition-shadow duration-250 
+    ${outline ? 'border-[var(--bg-color)]' : 'rounded-xl hover:shadow-md'}`,
     wrapperClass,
   )}
   transition:slide={{ duration: 250 }}
@@ -32,13 +32,14 @@
     onclick={toggle}
   >
     <div class="flex w-full items-center">
-      {#if label?.icon}
-        <span
-          class={`flex h-7 w-7 shrink-0 items-center justify-center overflow-visible [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
-        >
+      <span
+        class={`flex h-7 w-7 shrink-0 items-center justify-center overflow-visible [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
+      >
+        {#if label?.icon}
           {@html label.icon}
-        </span>
-      {/if}
+        {/if}
+      </span>
+
       <span class="{twMerge('m-0 w-full cursor-pointer px-3 text-left font-semibold', label.class)} text-lg">
         {label?.name}
       </span>

package/dist/Accordion/AccordionProps.svelte

@@ -9,9 +9,14 @@
   import Button from '../Button/Button.svelte'
   import CrossIcon from '../libIcons/CrossIcon.svelte'
 
-  const { component, onPropertyChange } = $props<{
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
     component: UIComponent & { properties: Partial<IAccordionProps> }
     onPropertyChange: (value: string | object) => void
+    forConstructor?: boolean
   }>()
 
   let showIconLib = $state(false)
@@ -37,17 +42,16 @@
     reader.readAsDataURL(file)
   }
 
-  let currentImage = $derived(component.properties.image)
+  let currentImage = $derived(component.properties.image ?? '')
 </script>
 
-{#if component && component.properties}
+{#if forConstructor}
   <div class="flex items-center justify-center gap-8">
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Input
         label={{ name: $t('constructor.props.label') }}
         value={component.properties.label.name}
         onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
-        type="text"
       />
       <UI.Select
         label={{ name: $t('constructor.props.align') }}
@@ -57,7 +61,80 @@
         onUpdate={(option) => updateProperty('label.class', option.value as string, component, onPropertyChange)}
       />
     </div>
-    <div class="flex w-1/3 flex-col items-center gap-6 px-2">
+    <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)} />
+        {#if showIconLib}
+          <Modal bind:isOpen={showIconLib} wrapperClass="w-130">
+            {#snippet main()}
+              <div class="grid grid-cols-3">
+                {#each ICONS as category}
+                  <div class="relative m-1.5 rounded-xl border-2 border-[var(--border-color)] p-3">
+                    <div class="absolute -top-3.5 bg-[var(--back-color)] px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
+                    <div class="grid grid-cols-3 place-items-center gap-2">
+                      {#each category[1] as icon}
+                        <button
+                          class="h-8 w-8 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
+                          onclick={() => {
+                            updateProperty('label.icon', icon as string, component, onPropertyChange)
+                          }}
+                        >
+                          {@html icon}
+                        </button>{/each}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/snippet}
+          </Modal>
+        {/if}
+        {#if component.properties.label.icon}
+          <Button
+            wrapperClass="w-8.5 "
+            componentClass="p-0.5 bg-red"
+            content={{ icon: CrossIcon }}
+            onClick={() => {
+              updateProperty('label.icon', '', component, onPropertyChange)
+            }}
+          />
+        {/if}
+      </div>
+      <UI.Select
+        label={{ name: $t('constructor.props.type') }}
+        type="buttons"
+        value={initialType}
+        options={$optionsStore.ACCORDION_TYPE_OPTIONS}
+        onUpdate={(item) => updateProperty('outline', item.value as boolean, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col items-center gap-2 px-2">
+      <div class="flex">
+        <UI.FileAttach
+          type="image"
+          label={{ name: $t('constructor.props.image') }}
+          accept="image/png, image/jpeg, image/webp"
+          bind:currentImage
+          onChange={handleImageUpload}
+        />
+        <Button
+          wrapperClass="w-8.5 mt-6"
+          componentClass="p-0.5 bg-red"
+          content={{ icon: CrossIcon }}
+          onClick={() => {
+            updateProperty('image', '', component, onPropertyChange)
+          }}
+        />
+      </div>
+    </div>
+  </div>
+{:else}
+  <div class="flex items-center justify-center gap-8">
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.id') }}
+        value={component.properties.id}
+        onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
+      />
       <UI.Select
         label={{ name: $t('constructor.props.type') }}
         type="buttons"
@@ -65,15 +142,39 @@
         options={$optionsStore.ACCORDION_TYPE_OPTIONS}
         onUpdate={(item) => updateProperty('outline', item.value as boolean, component, onPropertyChange)}
       />
-      <div class="relative flex w-full gap-2">
+      <div class="flex w-full gap-4">
+        <UI.Input
+          label={{ name: $t('constructor.props.size.height') }}
+          value={component.properties.size.height}
+          onUpdate={(value) => updateProperty('size.height', value as number, component, onPropertyChange)}
+          number={{ minNum: 1, maxNum: 1000, step: 1 }}
+          type="number"
+        />
+        <UI.Input
+          label={{ name: $t('constructor.props.size.width') }}
+          value={component.properties.size.width}
+          onUpdate={(value) => updateProperty('size.width', value as number, component, onPropertyChange)}
+          number={{ minNum: 1, maxNum: 1000, step: 1 }}
+          type="number"
+        />
+      </div>
+
+      <UI.Switch
+        label={{ name: $t('constructor.props.open') }}
+        value={component.properties.isOpen ? 2 : 1}
+        onChange={(value) => updateProperty('isOpen', value === 2, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <div class="relative mt-5 flex w-full gap-2">
         <UI.Button content={{ name: 'Иконка заголовка' }} onClick={() => (showIconLib = true)} />
         {#if showIconLib}
-          <Modal bind:isOpen={showIconLib} wrapperClass="w-150">
+          <Modal bind:isOpen={showIconLib} wrapperClass="w-130">
             {#snippet main()}
               <div class="grid grid-cols-3">
                 {#each ICONS as category}
                   <div class="relative m-1.5 rounded-xl border-2 border-[var(--border-color)] p-3">
-                    <div class="absolute -top-3.5 bg-[var(--back-color)] px-1">{category[0]}</div>
+                    <div class="absolute -top-3.5 bg-[var(--back-color)] px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
                     <div class="grid grid-cols-3 place-items-center gap-2">
                       {#each category[1] as icon}
                         <button
@@ -102,20 +203,40 @@
           />
         {/if}
       </div>
-    </div>
-    <div class="flex w-1/3 flex-col items-center gap-2 px-2">
-      <UI.FileAttach
-        type="image"
-        label={{ name: $t('constructor.props.image') }}
-        accept="image/png, image/jpeg, image/webp"
-        bind:currentImage
-        onChange={handleImageUpload}
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
       />
-      <UI.Button
-        content={{ name: $t('constructor.props.removeimage') }}
-        wrapperClass="!w-auto"
-        onClick={() => updateProperty('image', '', component, onPropertyChange)}
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label.class') }}
+        value={component.properties.label.class}
+        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
       />
     </div>
+    <div class="flex w-1/3 flex-col items-center gap-2 px-2">
+      <div class="flex">
+        <UI.FileAttach
+          type="image"
+          label={{ name: $t('constructor.props.image') }}
+          accept="image/png, image/jpeg, image/webp"
+          bind:currentImage
+          onChange={handleImageUpload}
+        />
+        <Button
+          wrapperClass="w-8.5 mt-6"
+          componentClass="p-0.5 bg-red"
+          content={{ icon: CrossIcon }}
+          onClick={() => {
+            updateProperty('image', '', component, onPropertyChange)
+          }}
+        />
+      </div>
+    </div>
   </div>
 {/if}

package/dist/Accordion/AccordionProps.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
         properties: Partial<IAccordionProps>;
     };
     onPropertyChange: (value: string | object) => void;
+    forConstructor?: boolean;
 };
 declare const AccordionProps: import("svelte").Component<$$ComponentProps, {}, "">;
 type AccordionProps = ReturnType<typeof AccordionProps>;

package/dist/Button/Button.svelte

@@ -91,7 +91,9 @@
             class={`flex items-center justify-center overflow-visible 
             ${content.name ? 'h-8 w-8' : `${svgSize()}`} [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
           >
-            {#if content?.icon}
+            {#if typeof content?.icon === 'string'}
+              {@html content.icon}
+            {:else}
               {@const IconComponent = content?.icon}
               <IconComponent />
             {/if}

package/dist/Button/ButtonProps.svelte

@@ -6,9 +6,14 @@
   import { optionsStore } from '../options'
   import { twMerge } from 'tailwind-merge'
 
-  const { component, onPropertyChange } = $props<{
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
     component: UIComponent & { properties: Partial<IButtonProps> }
     onPropertyChange: (value: string | object) => void
+    forConstructor?: boolean
   }>()
 
   let hasValue: boolean = $derived(component.properties.eventHandler.Value)
@@ -35,7 +40,7 @@
   )
 </script>
 
-{#if component && component.properties}
+{#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
     <!-- Сообщение для отправки в ws по нажатию кнопки -->
     <div class="flex w-1/3 flex-col items-center px-2">
@@ -116,4 +121,70 @@
       />
     </div>
   </div>
+{:else}
+  <div class="relative flex flex-row items-start justify-center">
+    <!-- Сообщение для отправки в ws по нажатию кнопки -->
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.id') }}
+        value={component.properties.id}
+        onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', 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 px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.name') }}
+        value={component.properties.content.name}
+        onUpdate={(value) => updateProperty('content.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.info') }}
+        value={component.properties.content.info}
+        onUpdate={(value) => updateProperty('content.info', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.svgicon') }}
+        type="text-area"
+        maxlength={100000}
+        value={component.properties.content.icon}
+        onUpdate={(value) => updateProperty('content.icon', value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.componentclass') }}
+        value={component.properties.componentClass}
+        onUpdate={(value) => updateProperty('componentClass', value as string, component, onPropertyChange)}
+      />
+      <UI.Select
+        label={{ name: $t('constructor.props.height') }}
+        type="buttons"
+        options={$optionsStore.HEIGHT_OPTIONS}
+        value={initialHeight}
+        onUpdate={(option) =>
+          updateProperty('componentClass', twMerge(component.properties.componentClass, option.value), component, onPropertyChange)}
+      />
+      <UI.Select
+        wrapperClass="h-14"
+        label={{ name: $t('constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.COLOR_OPTIONS}
+        value={initialColor}
+        onUpdate={(option) =>
+          updateProperty('componentClass', twMerge(component.properties.componentClass, option.value), component, onPropertyChange)}
+      />
+    </div>
+  </div>
 {/if}

package/dist/Button/ButtonProps.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
         properties: Partial<IButtonProps>;
     };
     onPropertyChange: (value: string | object) => void;
+    forConstructor?: boolean;
 };
 declare const ButtonProps: import("svelte").Component<$$ComponentProps, {}, "">;
 type ButtonProps = ReturnType<typeof ButtonProps>;

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -6,9 +6,14 @@
   import { getContext } from 'svelte'
   import { optionsStore } from '../options'
 
-  const { component, onPropertyChange } = $props<{
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
     component: UIComponent & { properties: Partial<IColorPickerProps> }
-    onPropertyChange: (value: string | object, name?: string) => void
+    onPropertyChange: (value: string | object) => void
+    forConstructor?: boolean
   }>()
 
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
@@ -21,7 +26,7 @@
   )
 </script>
 
-{#if component && component.properties}
+{#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
     <!-- Сообщение для отправки в ws по нажатию кнопки -->
     <div class="flex w-1/3 flex-col items-center px-2">
@@ -48,7 +53,6 @@
       <UI.Input
         label={{ name: $t('constructor.props.label') }}
         value={component.properties.label.name}
-        type="text"
         onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
       />
       <UI.Select
@@ -60,4 +64,45 @@
       />
     </div>
   </div>
+{:else}
+  <div class="relative flex flex-row items-start justify-center">
+    <!-- Сообщение для отправки в ws по нажатию кнопки -->
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.id') }}
+        value={component.properties.id}
+        onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label.class') }}
+        value={component.properties.label.class}
+        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.TextField content={{ name: $t('constructor.props.defaultcolor'), class: 'font-bold' }} />
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label.class') }}
+        value={component.properties.label.class}
+        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
+      />
+    </div>
+  </div>
 {/if}

package/dist/ColorPicker/ColorPickerProps.svelte.d.ts

@@ -3,7 +3,8 @@ type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<IColorPickerProps>;
     };
-    onPropertyChange: (value: string | object, name?: string) => void;
+    onPropertyChange: (value: string | object) => void;
+    forConstructor?: boolean;
 };
 declare const ColorPickerProps: import("svelte").Component<$$ComponentProps, {}, "">;
 type ColorPickerProps = ReturnType<typeof ColorPickerProps>;

package/dist/ComponentExample.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import * as UI from './'
+  import type { Snippet } from 'svelte'
+  import CopyButton from './libIcons/CopyButton.svelte'
+
+  let { component, componentProps, codeText }: { component: Snippet; componentProps: Snippet; codeText: string } = $props()
+
+  let isCopied = $state(false)
+</script>
+
+<div class="flex h-[calc(100vh-9rem)] flex-col">
+  <div class="flex-1 overflow-y-auto">
+    {@render component()}
+  </div>
+  <div class=" border-t border-gray-500"></div>
+  <div class="h-fit">
+    {@render componentProps()}
+    <div class="relative mt-3">
+      <UI.Button
+        wrapperClass="absolute top-3 right-5 w-6"
+        content={{ icon: isCopied ? '<div class="rounded-md bg-[var(--green-color)] shadow-lg px-1">✓</div>' : CopyButton }}
+        onClick={() => {
+          isCopied = true
+          setTimeout(() => (isCopied = false), 1000)
+          navigator.clipboard.writeText(codeText)
+        }}
+      />
+      <pre class="overflow-x-auto">{codeText}
+  </pre>
+    </div>
+  </div>
+</div>

package/dist/ComponentExample.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    component: Snippet;
+    componentProps: Snippet;
+    codeText: string;
+};
+declare const ComponentExample: import("svelte").Component<$$ComponentProps, {}, "">;
+type ComponentExample = ReturnType<typeof ComponentExample>;
+export default ComponentExample;

package/dist/Graph/GraphProps.svelte

@@ -1,25 +1,21 @@
-<!-- $lib/ElementsUI/SwitchProps.svelte -->
 <script lang="ts">
   import { getContext } from 'svelte'
   import { t } from '../locales/i18n'
   import { type UIComponent, type IGraphProps, updateProperty } from '../types'
   import * as UI from '..'
 
-  const { component, onPropertyChange } = $props<{
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
     component: UIComponent & { properties: Partial<IGraphProps> }
     onPropertyChange: (value: string | object) => void
+    forConstructor?: boolean
   }>()
 
-  const DeviceVariables = getContext<string[]>('DeviceVariables')
-  let VARIABLE_OPTIONS = $derived(
-    DeviceVariables && Array.isArray(DeviceVariables)
-      ? DeviceVariables.map((variable) => ({
-          id: variable,
-          value: variable,
-          name: variable,
-        }))
-      : [],
-  )
+  const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
+  let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 </script>
 
 {#if component && component.properties}
@@ -31,7 +27,8 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange)
+          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('|')[1].trim())
+          updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
         }}
       />
     </div>

package/dist/Graph/GraphProps.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
         properties: Partial<IGraphProps>;
     };
     onPropertyChange: (value: string | object) => void;
+    forConstructor?: boolean;
 };
 declare const GraphProps: import("svelte").Component<$$ComponentProps, {}, "">;
 type GraphProps = ReturnType<typeof GraphProps>;

package/dist/Input/Input.svelte

@@ -1,6 +1,5 @@
 <!-- $lib/ElementsUI/Input.svelte -->
 <script lang="ts">
-  import { onMount } from 'svelte'
   import { fly } from 'svelte/transition'
   import type { IInputProps } from '../types'
   import { twMerge } from 'tailwind-merge'
@@ -17,7 +16,7 @@
     componentClass = '',
     maxlength = 100,
     textareaRows = 3,
-    number = { minNum: -1000000, maxNum: Infinity, step: 1 },
+    number = { minNum: -1000000, maxNum: 1000000, step: 1 },
     help = { info: '', autocomplete: 'off', copyButton: false, regExp: '^[\\s\\S]*$' },
     onUpdate = () => {},
   }: IInputProps = $props()

package/dist/Input/InputProps.svelte

@@ -1,4 +1,3 @@
-<!-- $lib/ElementsUI/InputProps.svelte -->
 <script lang="ts">
   import { getContext } from 'svelte'
   import { t } from '../locales/i18n'
@@ -7,22 +6,19 @@
   import { optionsStore } from '../options'
   import { twMerge } from 'tailwind-merge'
 
-  const { component, onPropertyChange } = $props<{
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
     component: UIComponent & { properties: Partial<IInputProps> }
     onPropertyChange: (value: string | object) => void
+    forConstructor?: boolean
   }>()
 
   let isValidRegExp = $state(true)
-  const DeviceVariables = getContext<string[]>('DeviceVariables')
-  let VARIABLE_OPTIONS = $derived(
-    DeviceVariables && Array.isArray(DeviceVariables)
-      ? DeviceVariables.map((variable) => ({
-          id: variable,
-          value: variable,
-          name: variable,
-        }))
-      : [],
-  )
+  const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
+  let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
   const initialColor = $derived(
     $optionsStore.COLOR_OPTIONS.find((c) =>
@@ -37,7 +33,7 @@
   )
 
   /* Обновление свойства */
-  const updateProperty = (path: string, value: string | object | boolean | number | RegExp) => {
+  const updateProperty = (path: string, value: string | object | boolean | number | RegExp, name?: string) => {
     const newProperties = JSON.parse(JSON.stringify(component.properties))
     if (path === 'regExp') {
       try {
@@ -72,7 +68,7 @@
     }
 
     obj[parts[parts.length - 1]] = value
-    onPropertyChange(newProperties)
+    onPropertyChange(newProperties, name)
   }
 
   const handleOptionColorChange = (color: string) => {
@@ -99,11 +95,9 @@
         label={{ name: $t('constructor.props.variable') }}
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
-        onUpdate={(selectedOption) => {
-          if (selectedOption && selectedOption.name) {
-            updateProperty('id', selectedOption.value as string)
-            updateProperty('eventHandler.Variables', selectedOption.value as string)
-          }
+        onUpdate={(value) => {
+          updateProperty('id', value.value as string, value.name?.split('|')[1].trim())
+          updateProperty('eventHandler.Variables', value.value as string)
         }}
       />
       <UI.Select

package/dist/Input/InputProps.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
         properties: Partial<IInputProps>;
     };
     onPropertyChange: (value: string | object) => void;
+    forConstructor?: boolean;
 };
 declare const InputProps: import("svelte").Component<$$ComponentProps, {}, "">;
 type InputProps = ReturnType<typeof InputProps>;

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -1,4 +1,3 @@
-<!-- $lib/ElementsUI/SwitchProps.svelte -->
 <script lang="ts">
   import { getContext } from 'svelte'
   import { t } from '../locales/i18n'
@@ -7,21 +6,18 @@
   import { optionsStore } from '../options'
   import { twMerge } from 'tailwind-merge'
 
-  const { component, onPropertyChange } = $props<{
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
     component: UIComponent & { properties: Partial<IProgressBarProps> }
     onPropertyChange: (value: string | object) => void
+    forConstructor?: boolean
   }>()
 
-  const DeviceVariables = getContext<string[]>('DeviceVariables')
-  let VARIABLE_OPTIONS = $derived(
-    DeviceVariables && Array.isArray(DeviceVariables)
-      ? DeviceVariables.map((variable) => ({
-          id: variable,
-          value: variable,
-          name: variable,
-        }))
-      : [],
-  )
+  const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
+  let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
   const initialAlign = $derived(
     $optionsStore.ALIGN_OPTIONS.find((a) =>
@@ -44,7 +40,8 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange)
+          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('|')[1].trim())
+          updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
         }}
       />
     </div>

package/dist/ProgressBar/ProgressBarProps.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
         properties: Partial<IProgressBarProps>;
     };
     onPropertyChange: (value: string | object) => void;
+    forConstructor?: boolean;
 };
 declare const ProgressBarProps: import("svelte").Component<$$ComponentProps, {}, "">;
 type ProgressBarProps = ReturnType<typeof ProgressBarProps>;

package/dist/Select/Select.svelte

@@ -71,7 +71,6 @@
       isDropdownOpen = filteredOptions.length > 0
 
       const selectedFromList = options.some((option) => option.name?.toString() === searchValue)
-      console.log(selectedFromList)
 
       if (!selectedFromList) {
         const newOption: ISelectOption<T> = {
@@ -134,14 +133,14 @@
       </div>
     {/if}
   {:else if type === 'buttons'}
-    <div {id} class="flex h-full w-full flex-row justify-center">
+    <div {id} class="flex h-full w-full flex-row justify-center rounded-full border border-[var(--bg-color)]">
       {#each options as option, index (option.id)}
         <button
           id={option.id}
           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 shadow-[0_0_10px_var(--shadow-color)] hover:shadow-[0_0_15px_var(--shadow-color)]' : ''}  
+            ${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' : ''}`,
             option.class,
           )} bg-[var(--bg-color)]"

package/dist/Select/SelectProps.svelte

@@ -1,4 +1,3 @@
-<!-- $lib/ElementsUI/SelectProps.svelte -->
 <script lang="ts">
   import { getContext } from 'svelte'
   import { t } from '../locales/i18n'
@@ -9,21 +8,18 @@
   import { optionsStore } from '../options.js'
   import { twMerge } from 'tailwind-merge'
 
-  const { component, onPropertyChange } = $props<{
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
     component: UIComponent & { properties: Partial<ISelectProps> }
-    onPropertyChange: (path: string, value: string | object) => void
+    onPropertyChange: (value: string | object) => void
+    forConstructor?: boolean
   }>()
 
-  const DeviceVariables = getContext<string[]>('DeviceVariables')
-  let VARIABLE_OPTIONS = $derived(
-    DeviceVariables && Array.isArray(DeviceVariables)
-      ? DeviceVariables.map((variable) => ({
-          id: variable,
-          value: variable,
-          name: variable,
-        }))
-      : [],
-  )
+  const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
+  let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
   type ValueTypeOption = {
     id: string
@@ -67,13 +63,12 @@
   <div class="relative mb-4 flex flex-row items-start justify-center">
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Select
-        label={{ name: $t('constructor.props.argument') }}
-        type="buttons"
-        value={$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === component.properties.eventHandler.Argument) ??
-          $optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === '')}
-        options={$optionsStore.FULL_ARGUMENT_OPTION}
-        onUpdate={(option) => {
-          updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
+        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, value.name?.split('|')[1].trim())
+          updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
         }}
       />
 
@@ -133,7 +128,6 @@
             o['class'] = option.value
           })
           updateProperty('options', options, component, onPropertyChange)
-          console.log(component.properties.wrapperClass, component.properties.options)
         }}
       />
     </div>

package/dist/Select/SelectProps.svelte.d.ts

@@ -3,7 +3,8 @@ type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<ISelectProps>;
     };
-    onPropertyChange: (path: string, value: string | object) => void;
+    onPropertyChange: (value: string | object) => void;
+    forConstructor?: boolean;
 };
 declare const SelectProps: import("svelte").Component<$$ComponentProps, {}, "">;
 type SelectProps = ReturnType<typeof SelectProps>;

package/dist/Slider/SliderProps.svelte

@@ -1,4 +1,3 @@
-<!-- $lib/ElementsUI/SwitchProps.svelte -->
 <script lang="ts">
   import { getContext } from 'svelte'
   import { t } from '../locales/i18n'
@@ -7,21 +6,18 @@
   import { optionsStore } from '../options'
   import { twMerge } from 'tailwind-merge'
 
-  const { component, onPropertyChange } = $props<{
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
     component: UIComponent & { properties: Partial<ISliderProps> }
     onPropertyChange: (value: string | object) => void
+    forConstructor?: boolean
   }>()
 
-  const DeviceVariables = getContext<string[]>('DeviceVariables')
-  let VARIABLE_OPTIONS = $derived(
-    DeviceVariables && Array.isArray(DeviceVariables)
-      ? DeviceVariables.map((variable) => ({
-          id: variable,
-          value: variable,
-          name: variable,
-        }))
-      : [],
-  )
+  const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
+  let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
   const initialAlign = $derived(
     $optionsStore.ALIGN_OPTIONS.find((a) =>
@@ -44,7 +40,7 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange)
+          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('|')[1].trim())
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
         }}
       />

package/dist/Slider/SliderProps.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
         properties: Partial<ISliderProps>;
     };
     onPropertyChange: (value: string | object) => void;
+    forConstructor?: boolean;
 };
 declare const SliderProps: import("svelte").Component<$$ComponentProps, {}, "">;
 type SliderProps = ReturnType<typeof SliderProps>;

package/dist/Switch/SwitchProps.svelte

@@ -1,4 +1,3 @@
-<!-- $lib/ElementsUI/SwitchProps.svelte -->
 <script lang="ts">
   import { getContext } from 'svelte'
   import { t } from '../locales/i18n'
@@ -7,21 +6,18 @@
   import { optionsStore } from '../options'
   import { twMerge } from 'tailwind-merge'
 
-  const { component, onPropertyChange } = $props<{
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
     component: UIComponent & { properties: Partial<ISwitchProps> }
     onPropertyChange: (value: string | object) => void
+    forConstructor?: boolean
   }>()
+  const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
+  let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
-  const DeviceVariables = getContext<string[]>('DeviceVariables')
-  let VARIABLE_OPTIONS = $derived(
-    DeviceVariables && Array.isArray(DeviceVariables)
-      ? DeviceVariables.map((variable) => ({
-          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-'))),
@@ -38,7 +34,7 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange)
+          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('|')[1].trim())
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
         }}
       />

package/dist/Switch/SwitchProps.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
         properties: Partial<ISwitchProps>;
     };
     onPropertyChange: (value: string | object) => void;
+    forConstructor?: boolean;
 };
 declare const SwitchProps: import("svelte").Component<$$ComponentProps, {}, "">;
 type SwitchProps = ReturnType<typeof SwitchProps>;

package/dist/Table/Table.svelte

@@ -2,9 +2,9 @@
 <script lang="ts">
   import { get } from 'svelte/store'
   import type { ITableHeader, ITableProps } from '../types'
-  import { fade, fly, slide } from 'svelte/transition'
+  import { fly } from 'svelte/transition'
   import { twMerge } from 'tailwind-merge'
-  import { Button, Modal, Slider } from '..'
+  import { Button, Modal } from '..'
   import { t } from '../locales/i18n'
 
   let {

package/dist/Table/TableProps.svelte

@@ -1,4 +1,3 @@
-<!-- $lib/ElementsUI/TableProps.svelte -->
 <script lang="ts">
   import { getContext } from 'svelte'
   import { t } from '../locales/i18n'
@@ -9,21 +8,18 @@
   import { optionsStore } from '../options'
   import { twMerge } from 'tailwind-merge'
 
-  const { component, onPropertyChange } = $props<{
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
     component: UIComponent & { properties: Partial<ITableProps<object>> }
     onPropertyChange: (value: string | object) => void
+    forConstructor?: boolean
   }>()
 
-  const DeviceVariables = getContext<string[]>('DeviceVariables')
-  let VARIABLE_OPTIONS = $derived(
-    DeviceVariables && Array.isArray(DeviceVariables)
-      ? DeviceVariables.map((variable) => ({
-          id: variable,
-          value: variable,
-          name: variable,
-        }))
-      : [],
-  )
+  const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
+  let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
   const initialColor = $derived(
     $optionsStore.COLOR_OPTIONS.find((c) =>
@@ -74,17 +70,15 @@
 
 {#if component && component.properties}
   <div class="relative flex flex-row items-start justify-center">
-    <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)
-          updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
-        }}
-      />
-    </div>
+    <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, value.name?.split('|')[1].trim())
+        updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
+      }}
+    />
     <div class="flex w-1/3 flex-col px-2">
       <UI.Select
         wrapperClass="!h-14"

package/dist/Table/TableProps.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
         properties: Partial<ITableProps<object>>;
     };
     onPropertyChange: (value: string | object) => void;
+    forConstructor?: boolean;
 };
 declare const TableProps: import("svelte").Component<$$ComponentProps, {}, "">;
 type TableProps = ReturnType<typeof TableProps>;

package/dist/TextField/TextFieldProps.svelte

@@ -1,4 +1,3 @@
-<!-- $lib/ElementsUI/GridAccordionProps.svelte -->
 <script lang="ts">
   import { t } from '../locales/i18n'
   import { updateProperty, type ITextFieldProps, type UIComponent } from '../types'
@@ -7,21 +6,18 @@
   import { getContext } from 'svelte'
   import { twMerge } from 'tailwind-merge'
 
-  const { component, onPropertyChange } = $props<{
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
     component: UIComponent & { properties: Partial<ITextFieldProps> }
     onPropertyChange: (value: string | object) => void
+    forConstructor?: boolean
   }>()
+  const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
+  let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
-  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(
@@ -46,7 +42,7 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange)
+          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('|')[1].trim())
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
         }}
       />

package/dist/TextField/TextFieldProps.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
         properties: Partial<ITextFieldProps>;
     };
     onPropertyChange: (value: string | object) => void;
+    forConstructor?: boolean;
 };
 declare const TextFieldProps: import("svelte").Component<$$ComponentProps, {}, "">;
 type TextFieldProps = ReturnType<typeof TextFieldProps>;

package/dist/libIcons/CopyButton.svelte

@@ -0,0 +1,10 @@
+<script lang="ts"></script>
+
+<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>

package/dist/libIcons/CopyButton.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CopyButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CopyButton = InstanceType<typeof CopyButton>;
+export default CopyButton;

package/dist/locales/translations.js

@@ -32,7 +32,14 @@ const translations = {
         'constructor.props.valuetype.text': 'Строка',
         'constructor.props.valuetype.number': 'Число',
         /* Общие для редактора свойств */
+        'constructor.props.id': 'Идентификатор',
         'constructor.props.label': 'Текст надписи',
+        'constructor.props.label.class': 'Стили надписи',
+        'constructor.props.wrapperclass': 'Стили обёртки',
+        'constructor.props.componentclass': 'Стили компонента',
+        'constructor.props.svgicon': 'SVG-иконка (строка)',
+        'constructor.props.open': 'Разворачивание',
+        'constructor.props.defaultcolor': 'Первоначальный цвет',
         'constructor.props.type': 'Тип',
         'constructor.props.size': 'Размер',
         'constructor.props.header': 'Заголовок пакета',
@@ -78,6 +85,8 @@ const translations = {
         'constructor.props.optionvalue': 'Значение',
         'constructor.props.optionname': 'Текст',
         'constructor.props.copy': 'Копирование',
+        'constructor.props.size.height': 'Высота сетки',
+        'constructor.props.size.width': 'Ширина сетки',
         'constructor.props.table.columns': 'Колонки таблицы',
         'constructor.props.table.columns.key': 'Имя ключа',
         'constructor.props.table.columns.label': 'Название',
@@ -88,6 +97,15 @@ const translations = {
         'constructor.props.table.addaction': 'Добавить кнопку',
         'constructor.props.table.keys': 'Перечень ключей',
         'constructor.props.table.keys.info': 'Ключи таблицы, значения которых будут возвращаться',
+        'constructor.props.icon.access': 'Доступ',
+        'constructor.props.icon.common': 'Общее',
+        'constructor.props.icon.control': 'Управление',
+        'constructor.props.icon.electronic': 'Электроника',
+        'constructor.props.icon.image': 'Изображение',
+        'constructor.props.icon.info': 'Информация',
+        'constructor.props.icon.network': 'Сеть',
+        'constructor.props.icon.power': 'Питание',
+        'constructor.props.icon.settings': 'Настройки',
     },
     en: {},
     zh: {},

package/dist/types.d.ts

@@ -32,7 +32,7 @@ export interface IButtonProps {
     content?: {
         name?: string;
         info?: string;
-        icon?: ConstructorOfATypedSvelteComponent | null;
+        icon?: ConstructorOfATypedSvelteComponent | string | null;
     };
     keyBind?: {
         key?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.1.7",
+  "version": "1.1.10",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -43,12 +43,12 @@
     "typescript": "^5.9.3"
   },
   "devDependencies": {
-    "@sveltejs/kit": "^2.46.5",
+    "@sveltejs/kit": "^2.47.0",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@types/node": "^24.7.2",
+    "@types/node": "^24.8.1",
     "publint": "^0.3.14",
-    "svelte": "^5.40.0",
+    "svelte": "^5.40.2",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.1.10",
     "vite-plugin-compression": "^0.5.1"