poe-svelte-ui-lib 1.1.6 → 1.1.8

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -11,16 +11,8 @@
     onPropertyChange: (value: string | object, name?: string) => void
   }>()
 
-  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) =>

package/dist/Graph/GraphProps.svelte

@@ -7,19 +7,11 @@
 
   const { component, onPropertyChange } = $props<{
     component: UIComponent & { properties: Partial<IGraphProps> }
-    onPropertyChange: (value: string | object) => void
+    onPropertyChange: (value: string | object, name?: string) => void
   }>()
 
-  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 +23,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

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

package/dist/Input/InputProps.svelte

@@ -9,20 +9,12 @@
 
   const { component, onPropertyChange } = $props<{
     component: UIComponent & { properties: Partial<IInputProps> }
-    onPropertyChange: (value: string | object) => void
+    onPropertyChange: (value: string | object, name?: string) => void
   }>()
 
   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 +29,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 +64,7 @@
     }
 
     obj[parts[parts.length - 1]] = value
-    onPropertyChange(newProperties)
+    onPropertyChange(newProperties, name)
   }
 
   const handleOptionColorChange = (color: string) => {
@@ -99,11 +91,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

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

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -9,19 +9,11 @@
 
   const { component, onPropertyChange } = $props<{
     component: UIComponent & { properties: Partial<IProgressBarProps> }
-    onPropertyChange: (value: string | object) => void
+    onPropertyChange: (value: string | object, name?: string) => void
   }>()
 
-  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 +36,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

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

package/dist/Select/SelectProps.svelte

@@ -11,19 +11,11 @@
 
   const { component, onPropertyChange } = $props<{
     component: UIComponent & { properties: Partial<ISelectProps> }
-    onPropertyChange: (path: string, value: string | object) => void
+    onPropertyChange: (value: string | object, name?: string) => void
   }>()
 
-  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 +59,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)
         }}
       />
 

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

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

package/dist/Slider/SliderProps.svelte

@@ -9,19 +9,11 @@
 
   const { component, onPropertyChange } = $props<{
     component: UIComponent & { properties: Partial<ISliderProps> }
-    onPropertyChange: (value: string | object) => void
+    onPropertyChange: (value: string | object, name?: string) => void
   }>()
 
-  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 +36,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

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

package/dist/Switch/SwitchProps.svelte

@@ -9,19 +9,12 @@
 
   const { component, onPropertyChange } = $props<{
     component: UIComponent & { properties: Partial<ISwitchProps> }
-    onPropertyChange: (value: string | object) => void
+    onPropertyChange: (value: string | object, name?: string) => void
   }>()
 
-  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) =>
       (c.value as string).includes(component.properties.wrapperClass?.split(' ').find((cls: string) => cls.startsWith('bg-'))),
@@ -38,7 +31,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

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

package/dist/Table/TableProps.svelte

@@ -11,19 +11,11 @@
 
   const { component, onPropertyChange } = $props<{
     component: UIComponent & { properties: Partial<ITableProps<object>> }
-    onPropertyChange: (value: string | object) => void
+    onPropertyChange: (value: string | object, name?: string) => void
   }>()
 
-  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 +66,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

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

package/dist/TextField/TextFieldProps.svelte

@@ -9,19 +9,12 @@
 
   const { component, onPropertyChange } = $props<{
     component: UIComponent & { properties: Partial<ITextFieldProps> }
-    onPropertyChange: (value: string | object) => void
+    onPropertyChange: (value: string | object, name?: string) => void
   }>()
 
-  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 : [])
+
   let currentType = $derived($optionsStore.TEXTFIELD_SIZE_OPTIONS.find((t) => t.value === component.properties.content.size))
 
   const initialAlign = $derived(
@@ -46,7 +39,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

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

package/package.json

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