poe-svelte-ui-lib 1.2.29 → 1.2.30

package/dist/Accordion/AccordionProps.svelte

@@ -1,7 +1,7 @@
 <!-- $lib/ElementsUI/AccordionProps.svelte -->
 <script lang="ts">
   import { t } from '../locales/i18n'
-  import { updateProperty, type IAccordionProps, type UIComponent } from '../types'
+  import { updateProperty, type IAccordionProps, type IUIComponentHandler, type UIComponent } from '../types'
   import * as UI from '..'
   import { optionsStore } from '../options'
   import { ICONS } from '../icons'
@@ -15,7 +15,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<IAccordionProps> }
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
   }>()
 
@@ -53,7 +53,7 @@
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
         value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
-        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+        onUpdate={(option) => onPropertyChange({ access: option.value })}
       />
       <UI.Input
         label={{ name: $t('constructor.props.label') }}
@@ -149,7 +149,7 @@
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
         value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
-        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+        onUpdate={(option) => onPropertyChange({ access: option.value })}
       />
       <UI.Select
         label={{ name: $t('constructor.props.type') }}

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

@@ -1,9 +1,14 @@
-import { type IAccordionProps, type UIComponent } from '../types';
+import { type IAccordionProps, type IUIComponentHandler, type UIComponent } from '../types';
 type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<IAccordionProps>;
     };
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void;
+    onPropertyChange: (updates: Partial<{
+        properties?: string | object;
+        name?: string;
+        access?: string;
+        eventHandler?: IUIComponentHandler;
+    }>) => void;
     forConstructor?: boolean;
 };
 declare const AccordionProps: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/Button/Button.svelte

@@ -7,7 +7,6 @@
 
   let {
     id = crypto.randomUUID(),
-
     wrapperClass = '',
     componentClass = '',
     disabled = false,

package/dist/Button/ButtonProps.svelte

@@ -1,7 +1,7 @@
 <!-- $lib/ElementsUI/ButtonProps.svelte -->
 <script lang="ts">
   import { Language, t } from '../locales/i18n'
-  import { type UIComponent, type IButtonProps, type ISelectOption, updateProperty } from '../types'
+  import { type UIComponent, type IButtonProps, type ISelectOption, updateProperty, type IUIComponentHandler } from '../types'
   import * as UI from '..'
   import { optionsStore } from '../options'
   import { twMerge } from 'tailwind-merge'
@@ -12,14 +12,14 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<IButtonProps> }
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
   }>()
 
-  let hasValue: boolean = $derived(component.properties.eventHandler.Value)
+  let hasValue: boolean = $derived(component.eventHandler.Value)
 
   let Header: ISelectOption = $derived(
-    $optionsStore.HEADER_OPTIONS.find((h) => h.value === component.properties.eventHandler.Header) ?? {
+    $optionsStore.HEADER_OPTIONS.find((h) => h.value === component.eventHandler.Header) ?? {
       id: '',
       name: '',
       value: '',
@@ -50,52 +50,51 @@
         value={Header}
         options={$optionsStore.HEADER_OPTIONS}
         onUpdate={(option) => {
-          Header = option
-          updateProperty('eventHandler.Header', Header.value as string, component, onPropertyChange)
+          Header = { ...option }
+          onPropertyChange({ eventHandler: { Header: Header.value as string } })
         }}
       />
       {#if Header.value === 'SET'}
         <UI.Select
           label={{ name: $t('constructor.props.argument') }}
           type="buttons"
-          value={$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === component.properties.eventHandler.Argument) ??
+          value={$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === component.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)
+            onPropertyChange({ eventHandler: { Argument: option.value as string } })
           }}
         />
       {/if}
       <UI.Input
         label={{ name: Header.value !== 'SET' ? $t('constructor.props.argument') : '' }}
         wrapperClass="{Header.value === 'SET' ? 'mt-1' : ''} "
-        value={component.properties.eventHandler.Argument}
+        value={component.eventHandler.Argument}
         maxlength={32}
-        disabled={Header.value === 'SET' &&
-          (component.properties.eventHandler.Argument == 'Save' || component.properties.eventHandler.Argument == 'NoSave')}
+        disabled={Header.value === 'SET' && (component.eventHandler.Argument == 'Save' || component.eventHandler.Argument == 'NoSave')}
         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)}
+        onUpdate={(value) => onPropertyChange({ eventHandler: { Argument: value as string } })}
       />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
-      {#if (component.properties.eventHandler.Argument !== 'Save' && component.properties.eventHandler.Argument !== 'NoSave') || Header.value === 'SET'}
+      {#if (component.eventHandler.Argument !== 'Save' && component.eventHandler.Argument !== 'NoSave') || Header.value === 'SET'}
         <UI.Input
           label={{ name: $t('constructor.props.value') }}
-          value={component.properties.eventHandler.Value}
+          value={component.eventHandler.Value}
           help={{ info: $t('constructor.props.value.info') }}
           maxlength={500}
-          onUpdate={(value) => updateProperty('eventHandler.Value', value as string, component, onPropertyChange)}
+          onUpdate={(value) => onPropertyChange({ eventHandler: { Value: value as string } })}
         />
       {/if}
       <UI.Input
         label={{ name: $t('constructor.props.variables') }}
         disabled={hasValue}
-        value={component.properties.eventHandler.Variables.join(' ')}
+        value={component.eventHandler.Variables.join(' ')}
         help={{ info: $t('constructor.props.variables.info'), autocomplete: 'on', regExp: /^[a-zA-Z0-9\-_ ":{}]{0,500}$/ }}
         maxlength={500}
         onUpdate={(value) => {
           const parts = (value as string).trim().split(/\s+/)
-          updateProperty('eventHandler.Variables', parts, component, onPropertyChange)
+          onPropertyChange({ eventHandler: { Variables: parts } })
         }}
       />
       <UI.Select
@@ -103,7 +102,7 @@
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
         value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
-        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+        onUpdate={(option) => onPropertyChange({ access: option.value })}
       />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
@@ -145,7 +144,7 @@
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
         value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
-        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+        onUpdate={(option) => onPropertyChange({ access: option.value })}
       />
       <UI.Input
         label={{ name: $t('constructor.props.wrapperclass') }}

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

@@ -1,9 +1,14 @@
-import { type UIComponent, type IButtonProps } from '../types';
+import { type UIComponent, type IButtonProps, type IUIComponentHandler } from '../types';
 type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<IButtonProps>;
     };
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void;
+    onPropertyChange: (updates: Partial<{
+        properties?: string | object;
+        name?: string;
+        access?: string;
+        eventHandler?: IUIComponentHandler;
+    }>) => void;
     forConstructor?: boolean;
 };
 declare const ButtonProps: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -1,7 +1,7 @@
 <!-- $lib/ElementsUI/ButtonProps.svelte -->
 <script lang="ts">
   import { t } from '../locales/i18n'
-  import { type UIComponent, type IColorPickerProps, updateProperty } from '../types'
+  import { type UIComponent, type IColorPickerProps, updateProperty, type IUIComponentHandler } from '../types'
   import * as UI from '..'
   import { getContext } from 'svelte'
   import { optionsStore } from '../options'
@@ -12,7 +12,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<IColorPickerProps> }
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
   }>()
 
@@ -36,17 +36,16 @@
         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)
-          onPropertyChange(null, value.name?.split('—')[1].trim(), null)
+          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: value.value as string } })
         }}
       />
       <UI.Select
         label={{ name: $t('constructor.props.action') }}
         type="buttons"
-        value={$optionsStore.SHORT_ARGUMENT_OPTION.find((h) => h.value === component.properties.eventHandler.Argument)}
+        value={$optionsStore.SHORT_ARGUMENT_OPTION.find((h) => h.value === component.eventHandler.Argument)}
         options={$optionsStore.SHORT_ARGUMENT_OPTION}
         onUpdate={(option) => {
-          updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
+          onPropertyChange({ eventHandler: { Argument: option.value as string } })
         }}
       />
     </div>
@@ -56,7 +55,7 @@
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
         value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
-        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+        onUpdate={(option) => onPropertyChange({ access: option.value })}
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
@@ -88,7 +87,7 @@
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
         value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
-        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+        onUpdate={(option) => onPropertyChange({ access: option.value })}
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">

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

@@ -1,9 +1,14 @@
-import { type UIComponent, type IColorPickerProps } from '../types';
+import { type UIComponent, type IColorPickerProps, type IUIComponentHandler } from '../types';
 type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<IColorPickerProps>;
     };
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void;
+    onPropertyChange: (updates: Partial<{
+        properties?: string | object;
+        name?: string;
+        access?: string;
+        eventHandler?: IUIComponentHandler;
+    }>) => void;
     forConstructor?: boolean;
 };
 declare const ColorPickerProps: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/FileAttach/FileAttachProps.svelte

@@ -1,7 +1,7 @@
 <!-- $lib/ElementsUI/ButtonProps.svelte -->
 <script lang="ts">
   import { t } from '../locales/i18n'
-  import { type UIComponent, updateProperty } from '../types'
+  import { type IUIComponentHandler, type UIComponent, updateProperty } from '../types'
   import * as UI from '..'
   import { optionsStore } from '../options'
   import type { IFileInputProps } from './FileAttach.svelte'
@@ -12,7 +12,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<IFileInputProps> }
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
   }>()
 </script>

package/dist/FileAttach/FileAttachProps.svelte.d.ts

@@ -1,10 +1,15 @@
-import { type UIComponent } from '../types';
+import { type IUIComponentHandler, type UIComponent } from '../types';
 import type { IFileInputProps } from './FileAttach.svelte';
 type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<IFileInputProps>;
     };
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void;
+    onPropertyChange: (updates: Partial<{
+        properties?: string | object;
+        name?: string;
+        access?: string;
+        eventHandler?: IUIComponentHandler;
+    }>) => void;
     forConstructor?: boolean;
 };
 declare const FileAttachProps: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/Graph/GraphProps.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import { getContext } from 'svelte'
   import { t } from '../locales/i18n'
-  import { type UIComponent, type IGraphProps, updateProperty } from '../types'
+  import { type UIComponent, type IGraphProps, updateProperty, type IUIComponentHandler } from '../types'
   import * as UI from '..'
+  import { optionsStore } from '../options'
+  import { twMerge } from 'tailwind-merge'
 
   const {
     component,
@@ -10,12 +12,18 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<IGraphProps> }
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
   }>()
 
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
+
+  const initialAlign = $derived(
+    $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
+      (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
+    ),
+  )
 </script>
 
 {#if forConstructor}
@@ -28,13 +36,26 @@
         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)
-          onPropertyChange(null, value.name?.split('—')[1].trim(), null)
+          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: value.value as string } })
         }}
       />
     </div>
-    <div class="flex w-1/3 flex-col px-2"></div>
-    <div class="flex w-1/3 flex-col px-2"></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)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.align') }}
+        type="buttons"
+        value={initialAlign}
+        options={$optionsStore.TEXT_ALIGN_OPTIONS}
+        onUpdate={(option) => updateProperty('label.class', twMerge(component.properties.label.class, option.value), component, onPropertyChange)}
+      />
+    </div>
   </div>
 {:else}
   <div class="relative mb-2 flex flex-row items-start justify-center">
@@ -74,46 +95,4 @@
       />
     </div>
   </div>
-  <!-- <hr class="border-gray-400" />
-  <div class="space-y-4">
-    <div class="m-0 flex items-center justify-center gap-2">
-      <h4>{$t('constructor.props.graphdata.title')}</h4>
-      <UI.Button wrapperClass="w-8" content={{ icon: ButtonAdd }} />
-    </div>
-
-    {#each component.properties.streamingData.data || [] as option, index (option.name)}
-      <div class="m-0 flex items-end justify-around gap-2 border-gray-400">
-        <UI.Input
-          label={{ name: $t('constructor.props.optionname') }}
-          wrapperClass="!w-3/10"
-          value={option.name}
-          onUpdate={(value) => {
-            const options = [...(component.properties?.streamingData.data || [])]
-            options[index]['name'] = value as string
-            updateProperty('streamingData.data', options, component, onPropertyChange)
-          }}
-        />
-        <UI.Input
-          label={{ name: $t('constructor.props.optionvalue') }}
-          wrapperClass="!w-3/10"
-          type="number"
-          value={option.value}
-          onUpdate={(value) => {
-            const options = [...(component.properties?.streamingData.data || [])]
-            options[index]['value'] = value as number
-            updateProperty('streamingData.data', options, component, onPropertyChange)
-          }}
-        />
-        <UI.Button
-          wrapperClass="w-8"
-          content={{ icon: ButtonDelete }}
-          onClick={() => {
-            const options = [...(component.properties?.streamingData.data || [])]
-            options.splice(index, 1)
-            updateProperty('streamingData.data', options, component, onPropertyChange)
-          }}
-        />
-      </div>
-    {/each}
-  </div> -->
 {/if}

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

@@ -1,9 +1,14 @@
-import { type UIComponent, type IGraphProps } from '../types';
+import { type UIComponent, type IGraphProps, type IUIComponentHandler } from '../types';
 type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<IGraphProps>;
     };
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void;
+    onPropertyChange: (updates: Partial<{
+        properties?: string | object;
+        name?: string;
+        access?: string;
+        eventHandler?: IUIComponentHandler;
+    }>) => void;
     forConstructor?: boolean;
 };
 declare const GraphProps: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/Input/Input.svelte

@@ -1,12 +1,11 @@
 <!-- $lib/ElementsUI/Input.svelte -->
 <script lang="ts">
-  import { fly } from 'svelte/transition'
+  import { fade, fly } from 'svelte/transition'
   import type { IInputProps } from '../types'
   import { twMerge } from 'tailwind-merge'
 
   let {
     id = crypto.randomUUID(),
-
     wrapperClass = '',
     label = { name: '', class: '' },
     disabled = false,
@@ -140,8 +139,7 @@
 
     {#if help.copyButton && (type === 'text' || type === 'text-area')}
       <button
-        type="button"
-        class="absolute right-2 flex cursor-pointer border-none bg-transparent {type === 'text-area' ? 'top-2' : ''}"
+        class="absolute right-3 flex cursor-pointer border-none bg-transparent {type === 'text-area' ? 'top-2' : ''}"
         onclick={(e) => {
           e.preventDefault()
           navigator.clipboard.writeText(value as string)
@@ -150,24 +148,26 @@
         }}
         aria-label="Копировать текст"
       >
-        <svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" 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>
-      </button>
-
-      {#if isCopied}
-        <div
-          class="absolute top-1/2 right-10 -translate-y-1/2 transform rounded-md bg-(--green-color) px-2 py-1 text-sm shadow-lg"
-          transition:fly={{ x: 10, duration: 200 }}
-        >
-          ✓
+        <div class=" size-5 text-sm [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full">
+          {#if isCopied}
+            <div
+              class="right-1..5 absolute top-1/2 -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>
-      {/if}
+      </button>
     {/if}
 
     {#if type === 'number' && !readonly && !disabled}

package/dist/Input/InputProps.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from 'svelte'
   import { t } from '../locales/i18n'
-  import type { IInputProps, UIComponent, ISelectOption } from '../types'
+  import type { IInputProps, UIComponent, ISelectOption, IUIComponentHandler } from '../types'
   import * as UI from '..'
   import { optionsStore } from '../options'
   import { twMerge } from 'tailwind-merge'
@@ -12,7 +12,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<IInputProps> }
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
   }>()
 
@@ -68,7 +68,7 @@
     }
 
     obj[parts[parts.length - 1]] = value
-    onPropertyChange(newProperties, name)
+    onPropertyChange({ properties: newProperties, name })
   }
 
   const handleOptionColorChange = (color: string) => {
@@ -97,7 +97,7 @@
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
           updateProperty('id', value.value as string, value.name?.split('—')[1].trim())
-          updateProperty('eventHandler.Variables', value.value as string)
+          onPropertyChange({ eventHandler: { Variables: value.value as string } })
         }}
       />
       <UI.Select
@@ -105,7 +105,7 @@
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
         value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
-        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+        onUpdate={(option) => onPropertyChange({ access: option.value })}
       />
       <UI.Select
         label={{ name: $t('constructor.props.type') }}
@@ -128,10 +128,7 @@
           maxlength={150}
           help={{ info: $t('constructor.props.regexp.info') }}
           componentClass={isValidRegExp === false ? '!border-2 !border-red-400' : ''}
-          onUpdate={(value) => {
-            console.log(value)
-            updateProperty('help.regExp', value as string)
-          }}
+          onUpdate={(value) => updateProperty('help.regExp', value as string)}
         />
       {:else if component.properties.type === 'number' && !component.properties.readonly && !component.properties.disabled}
         <UI.Input
@@ -173,10 +170,7 @@
         label={{ name: $t('constructor.props.readonly') }}
         value={component.properties.readonly}
         options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
-        onChange={(value) => {
-          updateProperty('readonly', value)
-          console.log(component.properties)
-        }}
+        onChange={(value) => updateProperty('readonly', value)}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.copy') }}
@@ -258,7 +252,7 @@
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
         value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
-        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+        onUpdate={(option) => onPropertyChange({ access: option.value })}
       />
       <UI.Input
         label={{ name: $t('constructor.props.value') }}

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

@@ -1,9 +1,14 @@
-import type { IInputProps, UIComponent } from '../types';
+import type { IInputProps, UIComponent, IUIComponentHandler } from '../types';
 type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<IInputProps>;
     };
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void;
+    onPropertyChange: (updates: Partial<{
+        properties?: string | object;
+        name?: string;
+        access?: string;
+        eventHandler?: IUIComponentHandler;
+    }>) => void;
     forConstructor?: boolean;
 };
 declare const InputProps: import("svelte").Component<$$ComponentProps, {}, "">;