poe-svelte-ui-lib 1.2.22 → 1.2.24

package/dist/Button/Button.svelte

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

package/dist/Button/ButtonProps.svelte

@@ -99,6 +99,13 @@
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.icon.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.properties.access)}
+        onUpdate={(option) => updateProperty('acces', option.value as string, component, onPropertyChange)}
+      />
       <UI.Input
         label={{ name: $t('constructor.props.name') }}
         value={component.properties.content.name}

package/dist/ColorPicker/ColorPicker.svelte

@@ -5,6 +5,7 @@
 
   let {
     id = crypto.randomUUID(),
+
     wrapperClass = '',
     label = { name: '', class: '' },
     value = [0, 0, 0],

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -49,6 +49,15 @@
         }}
       />
     </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.icon.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.properties.access)}
+        onUpdate={(option) => updateProperty('acces', option.value as string, component, onPropertyChange)}
+      />
+    </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Input
         label={{ name: $t('constructor.props.label') }}

package/dist/Input/Input.svelte

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

package/dist/Input/InputProps.svelte

@@ -100,6 +100,13 @@
           updateProperty('eventHandler.Variables', value.value as string)
         }}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.icon.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.properties.access)}
+        onUpdate={(option) => updateProperty('acces', option.value as string)}
+      />
       <UI.Select
         label={{ name: $t('constructor.props.type') }}
         options={$optionsStore.INPUT_TYPE_OPTIONS}

package/dist/Joystick/Joystick.svelte

@@ -4,6 +4,7 @@
 
   let {
     id = crypto.randomUUID(),
+
     wrapperClass = '',
     label = { name: '', class: '' },
     value = $bindable([0, 0, 0]),
@@ -27,7 +28,7 @@
           return
         }
 
-        value[2] += sensitivity
+        value[2] = roundToClean(value[2] + sensitivity)
         onUpdate(value)
       },
     },
@@ -40,14 +41,14 @@
           value[2] = limits[2].maxNum
           onUpdate(value)
         } else {
-          value[2] += sensitivity
+          value[2] = roundToClean(value[2] + sensitivity)
           onUpdate(value)
         }
         if (value[1] - sensitivity <= limits[1].minNum) {
           value[1] = limits[1].minNum
           onUpdate(value)
         } else {
-          value[1] -= sensitivity
+          value[1] = roundToClean(value[1] - sensitivity)
           onUpdate(value)
         }
       },
@@ -62,7 +63,7 @@
           onUpdate(value)
           return
         }
-        value[1] -= sensitivity
+        value[1] = roundToClean(value[1] - sensitivity)
         onUpdate(value)
       },
     },
@@ -75,14 +76,14 @@
           value[2] = limits[2].minNum
           onUpdate(value)
         } else {
-          value[2] -= sensitivity
+          value[2] = roundToClean(value[2] - sensitivity)
           onUpdate(value)
         }
         if (value[1] - sensitivity <= limits[1].minNum) {
           value[1] = limits[1].minNum
           onUpdate(value)
         } else {
-          value[1] -= sensitivity
+          value[1] = roundToClean(value[1] - sensitivity)
           onUpdate(value)
         }
       },
@@ -97,7 +98,7 @@
           onUpdate(value)
           return
         }
-        value[2] -= sensitivity
+        value[2] = roundToClean(value[2] - sensitivity)
         onUpdate(value)
       },
     },
@@ -110,14 +111,14 @@
           value[1] = limits[1].maxNum
           onUpdate(value)
         } else {
-          value[1] += sensitivity
+          value[1] = roundToClean(value[1] + sensitivity)
           onUpdate(value)
         }
         if (value[2] - sensitivity <= limits[2].minNum) {
           value[2] = limits[2].minNum
           onUpdate(value)
         } else {
-          value[2] -= sensitivity
+          value[2] = roundToClean(value[2] - sensitivity)
           onUpdate(value)
         }
       },
@@ -132,7 +133,7 @@
           onUpdate(value)
           return
         }
-        value[1] += sensitivity
+        value[1] = roundToClean(value[1] + sensitivity)
         onUpdate(value)
       },
     },
@@ -145,14 +146,14 @@
           value[1] = limits[1].maxNum
           onUpdate(value)
         } else {
-          value[1] += sensitivity
+          value[1] = roundToClean(value[1] + sensitivity)
           onUpdate(value)
         }
         if (value[2] + sensitivity >= limits[2].maxNum) {
           value[2] = limits[2].maxNum
           onUpdate(value)
         } else {
-          value[2] += sensitivity
+          value[2] = roundToClean(value[2] + sensitivity)
           onUpdate(value)
         }
       },
@@ -164,6 +165,18 @@
 
   let clipPos = Math.cos(Math.PI / directions.length) * 100
   let angle = 360 / directions.length
+
+  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 id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`bg-red relative flex w-full flex-col items-center`, wrapperClass)}>
@@ -331,7 +344,7 @@
               [&::-webkit-inner-spin-button]:hidden
               [&::-webkit-outer-spin-button]:hidden`}
           style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
-          value={sensitivity == 0.01 ? value[num].toFixed(2) : sensitivity == 0.1 ? value[num].toFixed(1) : value[num].toFixed(0)}
+          value={value[num]}
           id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
           readonly
         />
@@ -339,3 +352,4 @@
     </div>
   </div>
 </div>
+<!-- sensitivity == 0.01 ? value[num].toFixed(2) : sensitivity == 0.1 ? value[num].toFixed(1) : value[num].toFixed(0) -->

package/dist/Select/Select.svelte

@@ -14,11 +14,14 @@
 
   let {
     id = crypto.randomUUID(),
+
     wrapperClass = '',
     disabled = false,
     label = { name: '', class: '' },
     type = 'select',
     value = $bindable(),
+    bitMode = false,
+    range = { start: 0, end: 31 },
     options = [],
     onUpdate,
   }: ISelectProps<T> = $props()

package/dist/Select/SelectProps.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getContext } from 'svelte'
+  import { getContext, onMount } from 'svelte'
   import { t } from '../locales/i18n'
   import { type UIComponent, type ISelectProps, type ISelectOption, updateProperty } from '../types'
   import * as UI from '..'
@@ -46,11 +46,24 @@
 
   let currentType = $derived($optionsStore.SELECT_TYPE_OPTIONS.find((t) => t.value === component.properties.type))
 
-  const initialColor = $derived(
-    $optionsStore.COLOR_OPTIONS.find((c) =>
-      (c.value as string).includes(component.properties.wrapperClass?.split(' ').find((cls: string) => cls.startsWith('bg-'))),
-    ),
-  )
+  const generateBitOptions = (start: number, end: number) => {
+    const bitsNeeded = end - start + 1
+    const count = Math.pow(2, bitsNeeded)
+
+    const options: ISelectOption<number>[] = []
+
+    for (let i = 0; i < count; i++) {
+      const binary = i.toString(2).padStart(bitsNeeded, '0')
+
+      options.push({
+        id: crypto.randomUUID(),
+        value: parseInt(binary, 2) << start,
+        name: binary,
+        class: 'bg-max',
+      })
+    }
+    updateProperty('options', options, component, onPropertyChange)
+  }
 
   const initialAlign = $derived(
     $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
@@ -103,6 +116,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) => {
@@ -116,6 +130,32 @@
           updateProperty('options', options, component, onPropertyChange)
         }}
       />
+      {#if component.properties.bitMode}
+        <div class="flex w-full gap-4">
+          <UI.Input
+            label={{ name: $t('constructor.props.range.start') }}
+            value={component.properties.range.start}
+            onUpdate={(value) => {
+              updateProperty('range.start', value as number, component, onPropertyChange)
+              generateBitOptions(component.properties.range.start, component.properties.range.end)
+            }}
+            number={{ minNum: 0, maxNum: 31, step: 1 }}
+            help={{ info: $t('constructor.props.range.start.help') }}
+            type="number"
+          />
+          <UI.Input
+            label={{ name: $t('constructor.props.range.end') }}
+            value={component.properties.range.end}
+            onUpdate={(value) => {
+              updateProperty('range.end', value as number, component, onPropertyChange)
+              generateBitOptions(component.properties.range.start, component.properties.range.end)
+            }}
+            number={{ minNum: 0, maxNum: 31, step: 1 }}
+            help={{ info: $t('constructor.props.range.end.help') }}
+            type="number"
+          />
+        </div>
+      {/if}
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Input
@@ -130,6 +170,24 @@
         options={$optionsStore.TEXT_ALIGN_OPTIONS}
         onUpdate={(option) => updateProperty('label.class', twMerge(component.properties.label.class, option.value), 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)
+        }}
+      />
     </div>
   </div>
 
@@ -232,9 +290,9 @@
       <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)}
+        value={component.properties.disabled}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('disabled', value, component, onPropertyChange)}
       />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">

package/dist/Switch/Switch.svelte

@@ -74,8 +74,8 @@
             {/if}
 
             <label
-              class="relative flex items-center justify-between rounded-full border
-      {checkedOptions[index] ? 'border-(--bg-color)' : 'border-(--gray-color)'}
+              class="relative flex items-center justify-between rounded-full shadow-md
+      {checkedOptions[index] ? 'border-(--bg-color)' : 'border-(--bg-color)'}
       {option.disabled ? 'opacity-60' : ''}"
             >
               <input
@@ -87,13 +87,14 @@
                 onchange={() => handleToggle(index)}
               />
               <span
-                class="relative flex items-center rounded-full transition-all duration-250
-        {checkedOptions[index] ? 'bg-(--bg-color)' : 'bg-(--gray-color)'}
+                class="relative flex items-center rounded-full border-(--bg-color) transition-all duration-250
+        {checkedOptions[index] ? 'bg-(--bg-color)' : 'bg-(--back-color)'}
         {option.disabled ? '' : 'cursor-pointer'}"
                 style="{type === 'horizontal' ? 'width' : 'height'}: {`calc(${height} * 2)`}; {type === 'horizontal' ? 'height' : 'width'}: {height};"
               >
                 <span
-                  class="absolute rounded-full bg-(--back-color) transition-all duration-250
+                  class="absolute rounded-full transition-all duration-250
+                  {checkedOptions[index] ? 'bg-(--back-color)' : 'bg-(--bg-color)'}
           {option.disabled ? 'opacity-60' : 'cursor-pointer'}"
                   style="width: {`calc(${height} * 0.8)`}; height: {`calc(${height} * 0.8)`}; margin: 0 {`calc(${height} * 0.1)`}; transform: {checkedOptions[
                     index
@@ -121,13 +122,13 @@
     <input
       id={ID}
       type="checkbox"
-      bind:checked={checkedOptions[0]}
+      checked={checkedOptions[0]}
       disabled={localOptions[0].disabled}
       class="
       relative size-8 cursor-pointer appearance-none rounded-2xl border border-(--bg-color)
       bg-white transition duration-300 after:origin-bottom-left after:opacity-0
       checked:border-(--bg-color)
-      checked:bg-(--bg-color) checked:after:absolute checked:after:-top-px checked:after:left-[5.5px]
+      checked:bg-(--bg-color) checked:after:absolute checked:after:-top-px checked:after:left-[5px]
       checked:after:h-[13.5px] checked:after:w-[7.5px] checked:after:rotate-43
       checked:after:border-2 checked:after:border-t-0
       checked:after:border-l-0 checked:after:border-solid

package/dist/Switch/SwitchProps.svelte

@@ -49,16 +49,15 @@
           updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
         }}
       />
-      {#if !component.properties.bitMode}
-        <UI.Select
-          wrapperClass="!h-14"
-          label={{ name: $t('constructor.props.type') }}
-          type="buttons"
-          options={$optionsStore.SWITCH_OPTIONS}
-          value={$optionsStore.SWITCH_OPTIONS.find((option) => option.value == component.properties.type)}
-          onUpdate={(option) => updateProperty('type', option.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)}
+        onUpdate={(option) => updateProperty('type', option.value as string, component, onPropertyChange)}
+      />
     </div>
     {#if !component.properties.bitMode}
       <div class="flex w-1/3 flex-col px-2">
@@ -98,7 +97,9 @@
           label={{ name: $t('constructor.props.colors') }}
           type="buttons"
           options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== 'bg-max' && option.value !== 'bg-gray')}
-          value={initialColor}
+          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
@@ -113,7 +114,8 @@
         options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
         onChange={(value) => {
           updateProperty('bitMode', value, component, onPropertyChange)
-          updateProperty('value', 1, component, onPropertyChange)
+          if (!component.properties.bitMode) updateProperty('value', 1, component, onPropertyChange)
+          if (component.properties.bitMode) updateProperty('type', 'vertical', component, onPropertyChange)
         }}
       />
     </div>
@@ -131,7 +133,7 @@
           onClick={() => {
             const newOption: ISelectOption = {
               id: crypto.randomUUID(),
-              name: `Option ${component.properties?.options.length + 1}`,
+              name: ``,
               value: component.properties?.options.length,
               class: 'bg-blue',
             }
@@ -154,7 +156,7 @@
             }}
           />
           <UI.Input
-            label={{ name: $t('constructor.props.optionvalue') }}
+            label={{ name: $t('constructor.props.optionposition') }}
             wrapperClass="!w-3/10"
             value={option.value}
             type="number"
@@ -222,7 +224,7 @@
         label={{ name: $t('constructor.props.colors') }}
         type="buttons"
         options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== 'bg-max' && option.value !== 'bg-gray')}
-        value={initialColor}
+        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 || [])]
@@ -285,7 +287,8 @@
         options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
         onChange={(value) => {
           updateProperty('bitMode', value, component, onPropertyChange)
-          updateProperty('value', 1, component, onPropertyChange)
+          if (!component.properties.bitMode) updateProperty('value', 1, component, onPropertyChange)
+          if (component.properties.bitMode) updateProperty('type', 'vertical', component, onPropertyChange)
         }}
       />
     </div>

package/dist/locales/translations.js

@@ -40,6 +40,9 @@ const translations = {
         'constructor.props.type.horizontal': 'Горизонтально',
         'constructor.props.type.vertical': 'Вертикально',
         'constructor.props.type.checkbox': 'Галочка',
+        'constructor.props.type.full': 'Полный',
+        'constructor.props.type.viewOnly': 'Только просмотр',
+        'constructor.props.type.hidden': 'Скрыто',
         /* Общие для редактора свойств */
         'constructor.props.id': 'Идентификатор',
         'constructor.props.label': 'Текст надписи',
@@ -112,10 +115,15 @@ const translations = {
         'constructor.props.units': 'Единица измерения',
         'constructor.props.optionclass': 'Стили кнопки',
         'constructor.props.optionvalue': 'Значение',
+        'constructor.props.optionposition': 'Позиция',
         'constructor.props.optionname': 'Текст',
         'constructor.props.copy': 'Копирование',
         'constructor.props.size.height': 'Высота сетки',
         'constructor.props.size.width': 'Ширина сетки',
+        'constructor.props.range.start': 'Начальный бит ',
+        'constructor.props.range.end': 'Последний бит',
+        'constructor.props.range.start.help': 'Позиция начального бита диапазона ',
+        'constructor.props.range.end.help': 'Позиция последнего бита диапазона',
         'constructor.props.icon.text.position': 'Положение иконки',
         'constructor.props.equal': 'Равные',
         'constructor.props.bitmode': 'Битовый режим',

package/dist/options.d.ts

@@ -14,6 +14,11 @@ export declare const optionsStore: import("svelte/store").Readable<{
         value: string;
         name: string;
     }[];
+    ACCESS_OPTION: {
+        id: string;
+        value: string;
+        name: string;
+    }[];
     INPUT_TYPE_OPTIONS: {
         id: string;
         value: string;

package/dist/options.js

@@ -22,6 +22,11 @@ export const optionsStore = derived(t, ($t) => {
             { id: id(), value: 'Save', name: $t('constructor.props.action.save') },
             { id: id(), value: '', name: $t('constructor.props.action.custom') },
         ],
+        ACCESS_OPTION: [
+            { id: id(), value: 'full', name: $t('constructor.props.type.full') },
+            { id: id(), value: 'viewOnly', name: $t('constructor.props.type.viewOnly') },
+            { id: id(), value: 'hidden', name: $t('constructor.props.type.hidden') },
+        ],
         INPUT_TYPE_OPTIONS: [
             { id: id(), value: 'text', name: $t('constructor.props.type.text') },
             { id: id(), value: 'password', name: $t('constructor.props.type.password') },

package/dist/types.d.ts

@@ -107,6 +107,10 @@ export interface ISelectProps<T = unknown> {
     value?: ISelectOption<T> | null;
     options?: ISelectOption<T>[];
     bitMode?: boolean;
+    range?: {
+        start: number;
+        end: number;
+    };
     eventHandler?: IUIComponentHandler;
     onUpdate?: (value: ISelectOption<T>) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.2.22",
+  "version": "1.2.24",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -48,7 +48,7 @@
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.10.1",
     "publint": "^0.3.15",
-    "svelte": "^5.43.8",
+    "svelte": "^5.43.10",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.2.2",
     "vite-plugin-compression": "^0.5.1"