poe-svelte-ui-lib 1.2.28 → 1.2.30

package/dist/Joystick/Joystick.svelte

@@ -6,6 +6,7 @@
     id = crypto.randomUUID(),
     wrapperClass = '',
     label = { name: '', class: '' },
+    axesName = ['Roll', 'Pitch', 'Yaw'],
     value = $bindable([0, 0, 0]),
     limits = [
       { minNum: -100, maxNum: 100 },
@@ -13,6 +14,7 @@
       { minNum: -100, maxNum: 100 },
     ],
     onUpdate = () => {},
+    onClick = () => {},
   }: IJoystickProps = $props()
 
   const directions = [
@@ -180,7 +182,7 @@
 
 <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`bg-red relative flex w-full flex-col items-center`, wrapperClass)}>
   {#if label.name}
-    <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{label.name}</h5>
+    <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
   <div class=" flex w-1/2 items-center justify-center">
@@ -230,7 +232,7 @@
           </span>
         {/each}
       </div>
-      <!-- Кнопка домой -->
+      <!-- Кнопка по центру -->
       <div
         class="z-20 flex size-20 items-center justify-center rounded-full bg-(--bg-color) shadow-[0_0_15px_rgb(0_0_0_/0.25)] transition hover:scale-103"
       >
@@ -238,8 +240,7 @@
           class="flex size-18 cursor-pointer items-center justify-center rounded-full bg-(--bg-color)"
           title=""
           onclick={() => {
-            value = [0, 0, 0]
-            onUpdate(value)
+            onClick(value)
           }}
           ><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
             ><path
@@ -251,57 +252,59 @@
       </div>
     </div>
     <!-- Боковые кнопки (ось roll) -->
-    <div
-      class="absolute flex h-15 w-65 items-center justify-between rounded-full shadow-[0_0_15px_rgb(0_0_0_/0.25)]"
-      style="background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)"
-    >
-      <button
-        class="h-full cursor-pointer rounded-l-full px-3.5"
-        title=""
-        onclick={() => {
-          if (value[0] - sensitivity <= limits[0].minNum) {
-            value[0] = limits[0].minNum
-            onUpdate(value)
-            return
-          }
-          value[0] -= sensitivity
-          onUpdate(value)
-        }}
-        onmouseenter={(e) => (e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)')}
-        onmouseleave={(e) => (e.currentTarget.style.backgroundColor = 'background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)')}
-        ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-          ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
-            ><path
-              stroke-miterlimit="10"
-              d="M6.395 7.705A7.9 7.9 0 0 1 12 5.382a7.93 7.93 0 0 1 7.929 7.929A7.94 7.94 0 0 1 12 21.25a7.94 7.94 0 0 1-7.929-7.94"
-            /><path stroke-linejoin="round" d="m7.12 2.75l-.95 3.858a1.33 1.33 0 0 0 .97 1.609l3.869.948" /></g
-          ></svg
-        ></button
+    {#if axesName.length == 3}
+      <div
+        class="absolute flex h-15 w-65 items-center justify-between rounded-full shadow-[0_0_15px_rgb(0_0_0_/0.25)]"
+        style="background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)"
       >
-      <button
-        class="h-full cursor-pointer rounded-r-full px-3.5"
-        title=""
-        onclick={() => {
-          if (value[0] + sensitivity >= limits[0].maxNum) {
-            value[0] = limits[0].maxNum
+        <button
+          class="h-full cursor-pointer rounded-l-full px-3.5"
+          title=""
+          onclick={() => {
+            if (value[0] - sensitivity <= limits[0].minNum) {
+              value[0] = limits[0].minNum
+              onUpdate(value)
+              return
+            }
+            value[0] -= sensitivity
             onUpdate(value)
-            return
-          }
-          value[0] += sensitivity
-          onUpdate(value)
-        }}
-        onmouseenter={(e) => (e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)')}
-        onmouseleave={(e) => (e.currentTarget.style.backgroundColor = 'vabackground: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)')}
-        ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-          ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
-            ><path
-              stroke-miterlimit="10"
-              d="M17.605 7.705A7.9 7.9 0 0 0 12 5.382a7.93 7.93 0 0 0-7.929 7.929A7.94 7.94 0 0 0 12 21.25a7.94 7.94 0 0 0 7.929-7.94"
-            /><path stroke-linejoin="round" d="m16.88 2.75l.95 3.858a1.33 1.33 0 0 1-.97 1.609l-3.869.948" /></g
-          ></svg
-        ></button
-      >
-    </div>
+          }}
+          onmouseenter={(e) => (e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)')}
+          onmouseleave={(e) => (e.currentTarget.style.backgroundColor = 'background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)')}
+          ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+            ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
+              ><path
+                stroke-miterlimit="10"
+                d="M6.395 7.705A7.9 7.9 0 0 1 12 5.382a7.93 7.93 0 0 1 7.929 7.929A7.94 7.94 0 0 1 12 21.25a7.94 7.94 0 0 1-7.929-7.94"
+              /><path stroke-linejoin="round" d="m7.12 2.75l-.95 3.858a1.33 1.33 0 0 0 .97 1.609l3.869.948" /></g
+            ></svg
+          ></button
+        >
+        <button
+          class="h-full cursor-pointer rounded-r-full px-3.5"
+          title=""
+          onclick={() => {
+            if (value[0] + sensitivity >= limits[0].maxNum) {
+              value[0] = limits[0].maxNum
+              onUpdate(value)
+              return
+            }
+            value[0] += sensitivity
+            onUpdate(value)
+          }}
+          onmouseenter={(e) => (e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)')}
+          onmouseleave={(e) => (e.currentTarget.style.backgroundColor = 'vabackground: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)')}
+          ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+            ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
+              ><path
+                stroke-miterlimit="10"
+                d="M17.605 7.705A7.9 7.9 0 0 0 12 5.382a7.93 7.93 0 0 0-7.929 7.929A7.94 7.94 0 0 0 12 21.25a7.94 7.94 0 0 0 7.929-7.94"
+              /><path stroke-linejoin="round" d="m16.88 2.75l.95 3.858a1.33 1.33 0 0 1-.97 1.609l-3.869.948" /></g
+            ></svg
+          ></button
+        >
+      </div>
+    {/if}
   </div>
 
   <div class="right-10 flex items-center md:absolute">
@@ -335,15 +338,15 @@
     </div>
 
     <div>
-      {#each [0, 1, 2] as num}
-        <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{num == 0 ? 'Roll' : num == 1 ? 'Pitch' : 'Yaw'}</h5>
+      {#each axesName as axe, index}
+        <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{axe}</h5>
         <input
           class={`w-20 rounded-2xl border border-(--border-color) px-4 py-1 text-center transition-all duration-300 outline-none
               hover:shadow-md 
               [&::-webkit-inner-spin-button]:hidden
               [&::-webkit-outer-spin-button]:hidden`}
           style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
-          value={value[num]}
+          value={value[index]}
           id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
           readonly
         />

package/dist/Joystick/JoystickProps.svelte

@@ -0,0 +1,215 @@
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import { t } from '../locales/i18n'
+  import { type UIComponent, type IGraphProps, updateProperty, type ISelectOption, type IUIComponentHandler } from '../types'
+  import * as UI from '..'
+  import Modal from '../Modal.svelte'
+  import { ICONS } from '../icons'
+  import Button from '../Button/Button.svelte'
+  import CrossIcon from '../libIcons/CrossIcon.svelte'
+  import { optionsStore } from '../options'
+  import { twMerge } from 'tailwind-merge'
+
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
+    component: UIComponent & { properties: Partial<IGraphProps> }
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
+    forConstructor?: boolean
+  }>()
+
+  let showIconLib = $state(false)
+
+  let Header: ISelectOption = $derived(
+    $optionsStore.HEADER_OPTIONS.find((h) => h.value === component.eventHandler.Header) ?? {
+      id: '',
+      name: '',
+      value: '',
+      class: '!w-1/4',
+    },
+  )
+
+  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}
+  <div class="relative flex flex-row items-start justify-center">
+    <!-- Сообщение для отправки в ws по нажатию кнопки -->
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.header') }}
+        type="buttons"
+        value={Header}
+        options={$optionsStore.HEADER_OPTIONS}
+        onUpdate={(option) => {
+          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.eventHandler.Argument) ??
+            $optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === '')}
+          options={$optionsStore.FULL_ARGUMENT_OPTION}
+          onUpdate={(option) => {
+            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.eventHandler.Argument}
+        maxlength={32}
+        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) => onPropertyChange({ eventHandler: { Argument: value as string } })}
+      />
+      {#if (component.eventHandler.Argument !== 'Save' && component.eventHandler.Argument !== 'NoSave') || Header.value === 'SET'}
+        <UI.Input
+          label={{ name: $t('constructor.props.value') }}
+          value={component.eventHandler.Value}
+          help={{ info: $t('constructor.props.value.info') }}
+          maxlength={500}
+          onUpdate={(value) => onPropertyChange({ eventHandler: { Value: value as string } })}
+        />
+      {/if}
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange({ access: option.value })}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      />
+      <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 class="flex w-1/3 flex-col px-2">
+      <div class="mt-6 flex gap-2">
+        <UI.Button content={{ name: $t('constructor.props.markerIcon') }} 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-(--border-color) p-3">
+                    <div class="absolute -top-3.5 bg-(--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('markerIcon', icon as string, component, onPropertyChange)
+                          }}
+                        >
+                          {@html icon}
+                        </button>{/each}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/snippet}
+          </Modal>
+        {/if}
+        {#if component.properties.markerIcon}
+          <Button
+            wrapperClass="w-8.5 "
+            componentClass="p-0.5 bg-red"
+            content={{ icon: CrossIcon }}
+            onClick={() => {
+              updateProperty('markerIcon', '', component, onPropertyChange)
+            }}
+          />
+        {/if}
+      </div>
+    </div>
+  </div>
+{:else}
+  <div class="relative mb-2 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)}
+      />
+    </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.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 class="flex w-1/3 flex-col px-2">
+      <div class="mt-6 flex gap-2">
+        <UI.Button content={{ name: $t('constructor.props.markerIcon') }} 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-(--border-color) p-3">
+                    <div class="absolute -top-3.5 bg-(--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('markerIcon', icon as string, component, onPropertyChange)
+                          }}
+                        >
+                          {@html icon}
+                        </button>{/each}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/snippet}
+          </Modal>
+        {/if}
+        {#if component.properties.markerIcon}
+          <Button
+            wrapperClass="w-8.5 "
+            componentClass="p-0.5 bg-red"
+            content={{ icon: CrossIcon }}
+            onClick={() => {
+              updateProperty('markerIcon', '', component, onPropertyChange)
+            }}
+          />
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/Joystick/JoystickProps.svelte.d.ts

@@ -1,26 +1,16 @@
-export default JoystickProps;
-type JoystickProps = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const JoystickProps: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-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;
+import { type UIComponent, type IGraphProps, type IUIComponentHandler } from '../types';
+type $$ComponentProps = {
+    component: UIComponent & {
+        properties: Partial<IGraphProps>;
     };
-    z_$$bindings?: Bindings;
-}
+    onPropertyChange: (updates: Partial<{
+        properties?: string | object;
+        name?: string;
+        access?: string;
+        eventHandler?: IUIComponentHandler;
+    }>) => void;
+    forConstructor?: boolean;
+};
+declare const JoystickProps: import("svelte").Component<$$ComponentProps, {}, "">;
+type JoystickProps = ReturnType<typeof JoystickProps>;
+export default JoystickProps;

package/dist/Map/Map.svelte

@@ -173,7 +173,7 @@
             </button>
             {#if isCopied}
               <div
-                class="absolute top-1/2 right-0 -translate-y-1/2 transform rounded-md bg-(--green-color) px-2 py-1 text-sm shadow-lg"
+                class="absolute top-1/2 right-0 -translate-y-1/2 transform rounded-md bg-(--green-color) px-1.5 py-1 text-sm shadow-lg"
                 transition:fade={{ duration: 200 }}
               >
                 ✓

package/dist/Map/MapProps.svelte

@@ -1,12 +1,14 @@
 <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 Modal from '../Modal.svelte'
   import { ICONS } from '../icons'
   import Button from '../Button/Button.svelte'
   import CrossIcon from '../libIcons/CrossIcon.svelte'
+  import { optionsStore } from '../options'
+  import { twMerge } from 'tailwind-merge'
 
   const {
     component,
@@ -14,7 +16,7 @@
     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
   }>()
 
@@ -22,6 +24,12 @@
 
   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}
@@ -34,8 +42,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 } })
         }}
       />
     </div>
@@ -45,10 +52,12 @@
         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)}
+      <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 class="flex w-1/3 flex-col px-2">

package/dist/Map/MapProps.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 MapProps: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from 'svelte'
   import { t } from '../locales/i18n'
-  import { type UIComponent, type IProgressBarProps, updateProperty } from '../types'
+  import { type UIComponent, type IProgressBarProps, 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<IProgressBarProps> }
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
   }>()
 
@@ -40,8 +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, value.name?.split('—')[1].trim())
-          updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
+          updateProperty('id', value.value as string, component, onPropertyChange)
+          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: value.value as string } })
         }}
       />
     </div>

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

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

package/dist/Select/Select.svelte

@@ -14,7 +14,6 @@
 
   let {
     id = crypto.randomUUID(),
-
     wrapperClass = '',
     disabled = false,
     label = { name: '', class: '' },