poe-svelte-ui-lib 1.5.18 → 1.6.0

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -36,7 +36,7 @@
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
           updateProperty('id', value.value as string, component, onPropertyChange)
-          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: value.value as string } })
+          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: [value.value as string] } })
         }}
       />
       <UI.Select

package/dist/Graph/GraphProps.svelte

@@ -36,7 +36,7 @@
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
           updateProperty('id', value.value as string, component, onPropertyChange)
-          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: value.value as string } })
+          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: [value.value as string] } })
         }}
       />
     </div>

package/dist/Input/Input.svelte

@@ -52,6 +52,24 @@
       onUpdate?.(value as string)
     }
   }
+
+  $effect(() => {
+    if (type === 'number' && typeof value == 'number') {
+      value = roundToClean(value)
+    }
+  })
+
+  const roundToClean = (num: number): number => {
+    if (Number.isInteger(num)) return num
+
+    const rounded1 = Number(num.toFixed(1))
+    if (Math.abs(rounded1 - num) < 1e-10) return rounded1
+
+    const rounded2 = Number(num.toFixed(2))
+    if (Math.abs(rounded2 - num) < 1e-10) return rounded2
+
+    return rounded2
+  }
 </script>
 
 <div class={twMerge(`bg-max ${type === 'text-area' ? 'h-full' : ''} relative flex w-full flex-col px-1 items-center`, wrapperClass)}>

package/dist/Input/InputProps.svelte

@@ -97,7 +97,7 @@
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
           updateProperty('id', value.value as string)
-          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: value.value as string } })
+          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: [value.value as string] } })
         }}
       />
       <UI.Select

package/dist/Joystick/Joystick.svelte

@@ -20,7 +20,7 @@
     {
       id: 'right',
       angle: 30.5,
-      content: true,
+      mainButton: true,
       onClick: () => {
         updateValue(2, +sensitivity)
         onUpdate(value)
@@ -29,7 +29,7 @@
     {
       id: 'bottom-right',
       angle: 58,
-      content: false,
+      mainButton: false,
       onClick: () => {
         updateValue(2, +sensitivity)
         updateValue(1, -sensitivity)
@@ -39,7 +39,7 @@
     {
       id: 'bottom',
       angle: 122,
-      content: true,
+      mainButton: true,
       onClick: () => {
         updateValue(1, -sensitivity)
         onUpdate(value)
@@ -48,7 +48,7 @@
     {
       id: 'bottom-left',
       angle: 149.5,
-      content: false,
+      mainButton: false,
       onClick: () => {
         updateValue(2, -sensitivity)
         updateValue(1, -sensitivity)
@@ -58,7 +58,7 @@
     {
       id: 'left',
       angle: 212,
-      content: true,
+      mainButton: true,
       onClick: () => {
         updateValue(2, -sensitivity)
         onUpdate(value)
@@ -67,7 +67,7 @@
     {
       id: 'top-left',
       angle: 239,
-      content: false,
+      mainButton: false,
       onClick: () => {
         updateValue(1, +sensitivity)
         updateValue(2, -sensitivity)
@@ -77,7 +77,7 @@
     {
       id: 'top',
       angle: 301,
-      content: true,
+      mainButton: true,
       onClick: () => {
         updateValue(1, +sensitivity)
         onUpdate(value)
@@ -86,7 +86,7 @@
     {
       id: 'top-right',
       angle: 328,
-      content: false,
+      mainButton: false,
       onClick: () => {
         updateValue(1, +sensitivity)
         updateValue(2, +sensitivity)
@@ -140,17 +140,23 @@
             title=""
           >
             <span
-              class="relative flex w-full origin-left items-center justify-center pl-[60%] h-[{direction.content
-                ? 2 * 5 * Math.sin((Math.PI * 65) / 360)
-                : 2 * 5 * Math.sin((Math.PI * 25) / 360)}rem] pointer-events-auto
-            {direction.content ? 'bg-(--bg-color)' : ''}
+              class="relative flex w-full origin-left items-center justify-center pl-[60%] pointer-events-auto
+            {direction.mainButton ? 'bg-(--bg-color)' : ''}
             "
-              style="transform: rotate({angle * index}deg); clip-path: polygon(100% 0, {clipPos}% 0, 0 50%, {clipPos}% 100%, 100% 100%)"
+              style=" height: {direction.mainButton
+                ? 2 * 5 * Math.sin((Math.PI * 65) / 360)
+                : 2 * 5 * Math.sin((Math.PI * 25) / 360)}rem; transform: rotate({angle *
+                index}deg); clip-path: polygon(100% 0, {clipPos}% 0, 0 50%, {clipPos}% 100%, 100% 100%)
+              "
               role="application"
               onmouseenter={(e) => (e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 20%)')}
               onmouseleave={(e) => (e.currentTarget.style.backgroundColor = 'var(--bg-color)')}
             >
-              <svg xmlns="http://www.w3.org/2000/svg" width={direction.content ? 32 : 16} height={direction.content ? 32 : 16} viewBox="0 0 24 24"
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={direction.mainButton ? 32 : 16}
+                height={direction.mainButton ? 32 : 16}
+                viewBox="0 0 24 24"
                 ><path
                   fill="currentColor"
                   d="M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z"

package/dist/Joystick/JoystickProps.svelte

@@ -22,14 +22,8 @@
 
   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) =>
@@ -50,45 +44,25 @@
       <!-- Сообщение для отправки в ws по нажатию кнопки -->
       <div class="flex w-1/3 flex-col items-center px-2">
         <UI.Select
-          label={{ name: $t('constructor.props.header') }}
+          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)
+            onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: [value.value as string] } })
+          }}
+        />
+        <UI.Select
+          label={{ name: $t('constructor.props.action') }}
           type="buttons"
-          value={Header}
-          options={$optionsStore.HEADER_OPTIONS}
+          value={$optionsStore.SHORT_ARGUMENT_OPTION.find((h) => h.value === component.eventHandler.Argument)}
+          options={$optionsStore.SHORT_ARGUMENT_OPTION}
           onUpdate={(option) => {
-            Header = { ...option }
-            onPropertyChange({ eventHandler: { Header: Header.value as string } })
+            updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
+
+            onPropertyChange({ eventHandler: { Argument: option.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

package/dist/Map/MapProps.svelte

@@ -42,7 +42,7 @@
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
           updateProperty('id', value.value as string, component, onPropertyChange)
-          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: value.value as string } })
+          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: [value.value as string] } })
         }}
       />
     </div>

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -41,7 +41,7 @@
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
           updateProperty('id', value.value as string, component, onPropertyChange)
-          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: value.value as string } })
+          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: [value.value as string] } })
         }}
       />
       <UI.Select

package/dist/Select/SelectProps.svelte

@@ -81,7 +81,7 @@
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
           updateProperty('id', value.value as string, component, onPropertyChange)
-          onPropertyChange({ eventHandler: { Variables: value.value as string } })
+          onPropertyChange({ eventHandler: { Variables: [value.value as string] } })
         }}
       />
       <UI.Select

package/dist/Slider/SliderProps.svelte

@@ -41,7 +41,7 @@
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
           updateProperty('id', value.value as string, component, onPropertyChange)
-          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: value.value as string } })
+          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: [value.value as string] } })
         }}
       />
       <UI.Select

package/dist/Switch/SwitchProps.svelte

@@ -37,7 +37,7 @@
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
           updateProperty('id', value.value as string, component, onPropertyChange)
-          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: value.value as string } })
+          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: [value.value as string] } })
         }}
       />
       <UI.Select

package/dist/Table/TableProps.svelte

@@ -101,7 +101,7 @@
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
           updateProperty('id', value.value as string, component, onPropertyChange)
-          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: value.value as string } })
+          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: [value.value as string] } })
         }}
       />
       <UI.Select

package/dist/TextField/TextFieldProps.svelte

@@ -43,7 +43,7 @@
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
           updateProperty('id', value.value as string, component, onPropertyChange)
-          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: value.value as string } })
+          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: [value.value as string] } })
         }}
       />
       <UI.Input

package/package.json

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