poe-svelte-ui-lib 1.2.29 → 1.2.30

package/dist/Select/SelectProps.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext, onMount } from 'svelte'
   import { t } from '../locales/i18n'
-  import { type UIComponent, type ISelectProps, type ISelectOption, updateProperty } from '../types'
+  import { type UIComponent, type ISelectProps, type ISelectOption, updateProperty, type IUIComponentHandler } from '../types'
   import * as UI from '..'
   import ButtonDelete from '../libIcons/ButtonDelete.svelte'
   import ButtonAdd from '../libIcons/ButtonAdd.svelte'
@@ -14,7 +14,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<ISelectProps> }
-    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,7 +36,7 @@
   )
 
   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: '',
@@ -81,27 +81,27 @@
         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({ eventHandler: { Variables: value.value as string } })
         }}
       />
       <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 } })
         }}
       />
 
       <UI.Input
         wrapperClass="{Header.value === 'SET' ? 'mt-1' : ''} "
-        value={component.properties.eventHandler.Argument}
+        value={component.eventHandler.Argument}
         maxlength={32}
-        disabled={component.properties.eventHandler.Argument == 'Save' || component.properties.eventHandler.Argument == 'NoSave'}
+        disabled={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">
@@ -110,7 +110,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') }}
@@ -273,7 +273,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') }}
@@ -297,7 +297,9 @@
         label={{ name: $t('constructor.props.disabled') }}
         value={component.properties.disabled}
         options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
-        onChange={(value) => updateProperty('disabled', value, component, onPropertyChange)}
+        onChange={(value) => {
+          updateProperty('disabled', value, component, onPropertyChange)
+        }}
       />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
@@ -312,6 +314,7 @@
         wrapperClass="h-14"
         label={{ name: $t('constructor.props.valuetype') }}
         type="buttons"
+        disabled={component.properties.bitMode}
         options={$optionsStore.SELECT_VALUE_TYPE_OPTIONS}
         value={currentValueType}
         onUpdate={(value) => {
@@ -325,6 +328,41 @@
           updateProperty('options', options, component, onPropertyChange)
         }}
       />
+
+      <UI.Switch
+        wrapperClass="bg-blue"
+        label={{ name: $t('constructor.props.bitmode') }}
+        value={component.properties.bitMode}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => {
+          updateProperty('bitMode', value, component, onPropertyChange)
+          currentValueType = $optionsStore.SELECT_VALUE_TYPE_OPTIONS[1] as ValueTypeOption
+          const options = [...(component.properties?.options || [])]
+          const newType = $optionsStore.SELECT_VALUE_TYPE_OPTIONS[1].value
+          options.forEach((option) => {
+            if (newType === 'number') option.value = option.value !== undefined ? Number(option.value) : 0
+            else option.value = option.value !== undefined ? String(option.value) : ''
+          })
+          updateProperty('options', options, component, onPropertyChange)
+          if (value) generateBitOptions(component.properties.range.start, component.properties.range.end)
+        }}
+      />
+      {#if component.properties.bitMode}
+        <UI.Slider
+          label={{ name: $t('constructor.props.range') }}
+          type="range"
+          number={{ minNum: 0, maxNum: 31, step: 1 }}
+          value={[component.properties.range.start, component.properties.range.end]}
+          onUpdate={(value) => {
+            if (Array.isArray(value)) {
+              if (value[1] - value[0] > 6) value = [value[0], value[0] + 6]
+              updateProperty('range.start', value[0] as number, component, onPropertyChange)
+              updateProperty('range.end', value[1] as number, component, onPropertyChange)
+              generateBitOptions(component.properties.range.start, component.properties.range.end)
+            }
+          }}
+        />
+      {/if}
     </div>
   </div>
 
@@ -366,6 +404,7 @@
           label={{ name: $t('constructor.props.optionvalue') }}
           wrapperClass="!w-3/10"
           value={option.value}
+          readonly={component.properties.bitMode}
           type={currentValueType.value}
           onUpdate={(value) => {
             const options = [...(component.properties?.options || [])]

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

@@ -1,9 +1,14 @@
-import { type UIComponent, type ISelectProps } from '../types';
+import { type UIComponent, type ISelectProps, type IUIComponentHandler } from '../types';
 type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<ISelectProps>;
     };
-    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 SelectProps: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/Slider/Slider.svelte

@@ -105,7 +105,7 @@
           onmousedown={() => (activeRound = 'ceil')}
           {disabled}
           class={twMerge(
-            `slider-bg basis-[calc(${(centerNum / number.maxNum) * 100}%+2rem+5px)] h-8 w-full appearance-none overflow-hidden 
+            `basis-[calc(${(centerNum / number.maxNum) * 100}%+2rem+5px)] h-8 w-full appearance-none overflow-hidden 
               accent-(--back-color) 
               [&::-webkit-slider-runnable-track]:rounded-l-full
               [&::-webkit-slider-runnable-track]:bg-(--gray-color)
@@ -196,7 +196,7 @@
           bind:value={singleValue}
           oninput={() => onUpdate(singleValue)}
           class={twMerge(
-            ` h-8 w-full appearance-none overflow-hidden rounded-full accent-(--back-color) 
+            `h-8 w-full appearance-none overflow-hidden rounded-full accent-(--back-color) 
               [&::-webkit-slider-runnable-track]:rounded-full
               [&::-webkit-slider-runnable-track]:bg-(--gray-color)
               [&::-webkit-slider-thumb]:relative 
@@ -225,6 +225,7 @@
             `[&::-moz-range-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem] 
               [&::-webkit-slider-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem]`,
           )}
+          style="color: var(--bg-color);"
         />
       </div>
     {/if}

package/dist/Slider/SliderProps.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from 'svelte'
   import { t } from '../locales/i18n'
-  import { type UIComponent, type ISliderProps, updateProperty } from '../types'
+  import { type UIComponent, type ISliderProps, updateProperty, type 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<ISliderProps> }
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
   }>()
 
@@ -41,17 +41,18 @@
         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 } })
         }}
       />
       <UI.Select
@@ -59,7 +60,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">
@@ -157,7 +158,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') }}

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

@@ -1,9 +1,14 @@
-import { type UIComponent, type ISliderProps } from '../types';
+import { type UIComponent, type ISliderProps, type IUIComponentHandler } from '../types';
 type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<ISliderProps>;
     };
-    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 SliderProps: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/Switch/Switch.svelte

@@ -60,7 +60,7 @@
     <div class="flex w-full flex-wrap items-end justify-around gap-5">
       {#each localOptions as option, index}
         <div class={twMerge(`bg-blue flex flex-col`, option.class)}>
-          {#if option.name}
+          {#if option.name && bitMode}
             <span>{option.name}</span>
           {/if}
 

package/dist/Switch/SwitchProps.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from 'svelte'
   import { t } from '../locales/i18n'
-  import { type UIComponent, type ISwitchProps, updateProperty, type ISelectOption } from '../types'
+  import { type UIComponent, type ISwitchProps, updateProperty, type ISelectOption, type IUIComponentHandler } from '../types'
   import * as UI from '..'
   import { optionsStore } from '../options'
   import { twMerge } from 'tailwind-merge'
@@ -14,7 +14,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<ISwitchProps> }
-    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')
@@ -37,17 +37,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 } })
         }}
       />
       <UI.Select
@@ -55,7 +54,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>
 
@@ -230,28 +229,29 @@
         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') }}
         value={component.properties.wrapperClass}
         onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
       />
-      <UI.Select
-        wrapperClass=" h-14"
-        label={{ name: $t('constructor.props.colors') }}
-        type="buttons"
-        options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== 'bg-max' && option.value !== 'bg-gray')}
-        value={component.properties.options[0].class.split(' ').find((cls: string) => cls.startsWith('bg-'))}
-        onUpdate={(option) => {
-          updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)
-          const options = [...(component.properties?.options || [])]
-          options.forEach((o) => {
-            o['class'] = option.value
-          })
-          updateProperty('options', options, component, onPropertyChange)
-        }}
-      />
+      {#if !component.properties.bitMode}
+        <UI.Select
+          wrapperClass="!h-14"
+          label={{ name: $t('constructor.props.colors') }}
+          type="buttons"
+          options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== 'bg-max' && option.value !== 'bg-gray')}
+          value={$optionsStore.COLOR_OPTIONS.find((c) =>
+            (c.value as string).includes(component.properties.options[0].class.split(' ').find((cls: string) => cls.startsWith('bg-'))),
+          )}
+          onUpdate={(option) => {
+            const options = [...(component.properties?.options || [])]
+            options[0]['class'] = option.value
+            updateProperty('options', options, component, onPropertyChange)
+          }}
+        />
+      {/if}
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Input
@@ -259,19 +259,22 @@
         value={component.properties.label.name}
         onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
       />
-      <UI.Input
-        label={{ name: $t('constructor.props.caption.left') }}
-        value={component.properties.label.captionLeft}
-        onUpdate={(value) => updateProperty('label.captionLeft', value as string, component, onPropertyChange)}
-      />
-      <UI.Input
-        label={{ name: $t('constructor.props.caption.right') }}
-        value={component.properties.label.captionRight}
-        onUpdate={(value) => updateProperty('label.captionRight', value as string, component, onPropertyChange)}
-      />
+      {#if !component.properties.bitMode}
+        <UI.Input
+          label={{ name: $t('constructor.props.caption.left') }}
+          value={component.properties.label.captionLeft}
+          onUpdate={(value) => updateProperty('label.captionLeft', value as string, component, onPropertyChange)}
+        />
+        <UI.Input
+          label={{ name: $t('constructor.props.caption.right') }}
+          value={component.properties.label.captionRight}
+          onUpdate={(value) => updateProperty('label.captionRight', value as string, component, onPropertyChange)}
+        />
+      {/if}
       <UI.Select
         wrapperClass="!h-14"
         label={{ name: $t('constructor.props.type') }}
+        disabled={component.properties.bitMode}
         type="buttons"
         options={$optionsStore.SWITCH_OPTIONS}
         value={$optionsStore.SWITCH_OPTIONS.find((option) => option.value == component.properties.type)}
@@ -291,13 +294,19 @@
         number={{ minNum: 0, maxNum: component.properties.bitMode ? Math.pow(2, 32) : 1, step: 1 }}
         onUpdate={(value) => updateProperty('value', value as number, component, onPropertyChange)}
       />
-      <UI.Switch
-        wrapperClass="bg-blue"
-        label={{ name: $t('constructor.props.disabled') }}
-        value={component.properties.disabled}
-        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
-        onChange={(value) => updateProperty('disabled', value, component, onPropertyChange)}
-      />
+      {#if !component.properties.bitMode}
+        <UI.Switch
+          wrapperClass="bg-blue"
+          label={{ name: $t('constructor.props.disabled') }}
+          value={component.properties.options[0].disabled}
+          options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+          onChange={(value) => {
+            const options = [...(component.properties?.options || [])]
+            options[0]['disabled'] = value
+            updateProperty('options', options, component, onPropertyChange)
+          }}
+        />
+      {/if}
       <UI.Switch
         wrapperClass="bg-blue"
         label={{ name: $t('constructor.props.bitmode') }}

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

@@ -1,9 +1,14 @@
-import { type UIComponent, type ISwitchProps } from '../types';
+import { type UIComponent, type ISwitchProps, type IUIComponentHandler } from '../types';
 type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<ISwitchProps>;
     };
-    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 SwitchProps: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/Table/Table.svelte

@@ -2,7 +2,7 @@
 <script lang="ts">
   import { get } from 'svelte/store'
   import type { ITableHeader, ITableProps } from '../types'
-  import { fly } from 'svelte/transition'
+  import { fade, fly } from 'svelte/transition'
   import { twMerge } from 'tailwind-merge'
   import { onMount } from 'svelte'
 
@@ -284,7 +284,12 @@
                   >
                     <div class=" size-5 text-sm [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full">
                       {#if copiedCell.y === index && copiedCell.x === column.key}
-                        <div class="rounded-md bg-(--green-color) shadow-lg">✓</div>
+                        <div
+                          class="absolute top-1/2 right-3.5 -translate-y-1/2 transform rounded-md bg-(--green-color) px-1.5 py-1 shadow-lg"
+                          transition:fade={{ duration: 200 }}
+                        >
+                          ✓
+                        </div>
                       {:else}
                         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                           <g fill="none" stroke="currentColor" stroke-width="1.5">

package/dist/Table/TableProps.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from 'svelte'
   import { t } from '../locales/i18n'
-  import { type UIComponent, type ITableProps, type ITableHeader, updateProperty } from '../types'
+  import { type UIComponent, type ITableProps, type ITableHeader, updateProperty, type IUIComponentHandler } from '../types'
   import * as UI from '..'
   import ButtonDelete from '../libIcons/ButtonDelete.svelte'
   import ButtonAdd from '../libIcons/ButtonAdd.svelte'
@@ -17,7 +17,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<ITableProps<object>> }
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
   }>()
 
@@ -57,11 +57,14 @@
   }
 
   const updateButtonProperty = (columnIndex: number, buttonIndex: number, field: string, value: any) => {
-    const headers = [...component.properties.header]
-    const buttons = [...headers[columnIndex].buttons]
-    buttons[buttonIndex] = { ...buttons[buttonIndex], [field]: value }
-    headers[columnIndex].buttons = buttons
-    updateProperty('header', headers, component, onPropertyChange)
+    if (field === 'eventHandler') {
+    } else {
+      const headers = [...component.properties.header]
+      const buttons = [...headers[columnIndex].buttons]
+      buttons[buttonIndex] = { ...buttons[buttonIndex], [field]: value }
+      headers[columnIndex].buttons = buttons
+      updateProperty('header', headers, component, onPropertyChange)
+    }
   }
 
   const removeButtonFromColumn = (columnIndex: number, buttonIndex: number) => {
@@ -82,8 +85,7 @@
         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
@@ -91,7 +93,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">
@@ -144,6 +146,9 @@
           }
           const headers = [...(component.properties.header || []), newColumn]
           updateProperty('header', headers, component, onPropertyChange)
+          headers.forEach((h) => {
+            updateTableHeader(headers.indexOf(h), 'width', `${(100 / headers.length).toFixed(2)}%`)
+          })
           updateTableBody()
         }}
       />
@@ -219,6 +224,9 @@
             const headers = [...(component.properties.header || [])]
             headers.splice(columnIndex, 1)
             updateProperty('header', headers, component, onPropertyChange)
+            headers.forEach((h) => {
+              updateTableHeader(headers.indexOf(h), 'width', `${(100 / headers.length).toFixed(2)}%`)
+            })
           }}
         />
       </div>
@@ -266,7 +274,13 @@
                   updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
                 }}
               />
-              <UI.Button wrapperClass="w-8" content={{ icon: ButtonDelete }} onClick={() => removeButtonFromColumn(columnIndex, buttonIndex)} />
+              <UI.Button
+                wrapperClass="w-8"
+                content={{ icon: ButtonDelete }}
+                onClick={() => {
+                  removeButtonFromColumn(columnIndex, buttonIndex)
+                }}
+              />
             </div>
           {/each}
         </div>
@@ -309,7 +323,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') }}
@@ -357,6 +371,9 @@
           }
           const headers = [...(component.properties.header || []), newColumn]
           updateProperty('header', headers, component, onPropertyChange)
+          headers.forEach((h) => {
+            updateTableHeader(headers.indexOf(h), 'width', `${(100 / headers.length).toFixed(2)}%`)
+          })
           updateTableBody()
         }}
       />
@@ -432,6 +449,9 @@
                   const headers = [...(component.properties.header || [])]
                   headers.splice(columnIndex, 1)
                   updateProperty('header', headers, component, onPropertyChange)
+                  headers.forEach((h) => {
+                    updateTableHeader(headers.indexOf(h), 'width', `${(100 / headers.length).toFixed(2)}%`)
+                  })
                 }}
               />
             </div>

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

@@ -1,9 +1,14 @@
-import { type UIComponent, type ITableProps } from '../types';
+import { type UIComponent, type ITableProps, type IUIComponentHandler } from '../types';
 type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<ITableProps<object>>;
     };
-    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 TableProps: import("svelte").Component<$$ComponentProps, {}, "">;