poe-svelte-ui-lib 1.2.21 → 1.2.23

package/dist/Accordion/Accordion.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <div
-  {id}
+  id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
   class={twMerge(
     `${outline ? 'border-none' : 'rounded-xl hover:shadow-md'} w-full
     border border-(--border-color) bg-(--container-color) p-0 transition-shadow duration-250`,

package/dist/Accordion/AccordionProps.svelte

@@ -163,8 +163,9 @@
 
       <UI.Switch
         label={{ name: $t('constructor.props.open') }}
-        value={component.properties.isOpen ? 2 : 1}
-        onChange={(value) => updateProperty('isOpen', value === 2, component, onPropertyChange)}
+        value={component.properties.isOpen}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('isOpen', value, component, onPropertyChange)}
       />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">

package/dist/Button/Button.svelte

@@ -7,6 +7,7 @@
 
   let {
     id = crypto.randomUUID(),
+
     wrapperClass = '',
     componentClass = '',
     disabled = false,
@@ -67,7 +68,7 @@
 
 <div class={twMerge(`relative flex w-full flex-col items-center `, wrapperClass)}>
   <button
-    {id}
+    id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
     class="{twMerge(
       `relative m-0 inline-block w-full items-center rounded-2xl 
         px-2 py-1 font-semibold  transition duration-200 select-none

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}
@@ -141,8 +148,9 @@
       <UI.Switch
         wrapperClass="bg-blue"
         label={{ name: $t('constructor.props.disabled') }}
-        value={component.properties.disabled ? 2 : 1}
-        onChange={(value) => updateProperty('disabled', value === 2, 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 px-2">

package/dist/ColorPicker/ColorPicker.svelte

@@ -5,6 +5,7 @@
 
   let {
     id = crypto.randomUUID(),
+
     wrapperClass = '',
     label = { name: '', class: '' },
     value = [0, 0, 0],
@@ -129,7 +130,7 @@
   })
 </script>
 
-<div {id} class={twMerge(`relative flex w-full flex-col items-center`, wrapperClass)}>
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`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>
   {/if}

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/FileAttach/FileAttach.svelte

@@ -77,12 +77,19 @@
           <span class="text-sm text-gray-500">Image</span>
         {/if}
       </button>
-      <input {id} type="file" class="absolute -z-10 h-0 w-0 overflow-hidden opacity-0" {accept} {disabled} onchange={handleFileChange} />
+      <input
+        id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
+        type="file"
+        class="absolute -z-10 h-0 w-0 overflow-hidden opacity-0"
+        {accept}
+        {disabled}
+        onchange={handleFileChange}
+      />
     </div>
   {:else}
     <label class="relative inline-block w-full">
       <input
-        {id}
+        id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
         type="file"
         class={`h-8.5 w-full rounded-2xl bg-(--back-color) font-semibold shadow-sm transition duration-250 hover:shadow-md
           ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} invalid:shadow-[0_0_6px(--red-color) file:h-full file:w-1/3 

package/dist/Graph/Graph.svelte

@@ -218,7 +218,7 @@
   }
 </script>
 
-<div {id} class={`relative flex w-full flex-col items-center justify-center ${wrapperClass}`}>
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={`relative flex w-full flex-col items-center justify-center ${wrapperClass}`}>
   {#if label.name}
     <h5 class={`w-full px-4 text-center ${label.class}`}>{label.name}</h5>
   {/if}

package/dist/Graph/GraphProps.svelte

@@ -67,8 +67,9 @@
       <UI.Switch
         wrapperClass="bg-blue"
         label={{ name: $t('constructor.props.istest') }}
-        value={component.properties.isTest ? 2 : 1}
-        onChange={(value) => updateProperty('isTest', value === 2, component, onPropertyChange)}
+        value={component.properties.isTest}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('isTest', value, component, onPropertyChange)}
       />
     </div>
   </div>

package/dist/Input/Input.svelte

@@ -6,6 +6,7 @@
 
   let {
     id = crypto.randomUUID(),
+
     wrapperClass = '',
     label = { name: '', class: '' },
     disabled = false,
@@ -74,7 +75,7 @@
           componentClass,
         )}
         style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
-        {id}
+        id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
         {placeholder}
         {disabled}
         autocomplete={help?.autocomplete}
@@ -99,7 +100,7 @@
           componentClass,
         )}
         style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
-        {id}
+        id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
         {disabled}
         {maxlength}
         rows={textareaRows}

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}
@@ -161,13 +168,15 @@
       />
       <UI.Switch
         label={{ name: $t('constructor.props.readonly') }}
-        value={component.properties.readonly ? 2 : 1}
-        onChange={(value) => updateProperty('readonly', value === 2)}
+        value={component.properties.readonly}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('readonly', value)}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.copy') }}
-        value={component.properties.help.copyButton ? 2 : 1}
-        onChange={(value) => updateProperty('help.copyButton', value === 2)}
+        value={component.properties.help.copyButton}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('help.copyButton', value)}
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
@@ -320,18 +329,21 @@
 
       <UI.Switch
         label={{ name: $t('constructor.props.readonly') }}
-        value={component.properties.readonly ? 2 : 1}
-        onChange={(value) => updateProperty('readonly', value === 2)}
+        value={component.properties.readonly}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('readonly', value)}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.copy') }}
-        value={component.properties.help.copyButton ? 2 : 1}
-        onChange={(value) => updateProperty('help.copyButton', value === 2)}
+        value={component.properties.help.copyButton}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('help.copyButton', value)}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.disabled') }}
-        value={component.properties.disabled ? 2 : 1}
-        onChange={(value) => updateProperty('disabled', value === 2)}
+        value={component.properties.disabled}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('disabled', value)}
       />
     </div>
   </div>

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,15 +165,28 @@
 
   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} class={twMerge(`bg-blue relative flex w-full flex-col items-center`, wrapperClass)}>
+<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>
   {/if}
 
-  <div class=" flex items-center justify-center">
+  <div class=" flex w-1/2 items-center justify-center">
     <div class="relative z-10 flex size-40 items-center justify-center rounded-full bg-(--bg-color) shadow-[0_0_20px_rgb(0_0_0_/0.25)]">
+      <!-- Основные кнопки (оси pitch и yaw) -->
       <div class="absolute h-full w-full overflow-hidden rounded-full">
         {#each directions as direction, index}
           <button
@@ -205,6 +219,7 @@
           </button>
         {/each}
       </div>
+      <!-- Линии для разделения на сектора -->
       <div class="pointer-events-none absolute h-full w-full overflow-hidden rounded-full">
         {#each directions as direction, index}
           <span
@@ -216,6 +231,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"
       >
@@ -235,6 +251,7 @@
         >
       </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%)"
@@ -288,40 +305,51 @@
     </div>
   </div>
 
-  <p>{value[0]}</p>
-  <p>{value[1]}</p>
-  <p>{value[2]}</p>
-
-  <div {id} class="flex h-full w-full flex-row justify-center rounded-full p-10">
-    {#each sensitivityOptions as option, index}
-      <button
-        id={crypto.randomUUID()}
-        class={twMerge(`m-0 inline-block min-w-0 flex-1 cursor-pointer items-center px-2 py-1 font-semibold shadow-sm transition-all duration-300
+  <div class="absolute right-10 flex items-center">
+    <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="flex h-full flex-col justify-center rounded-full p-10">
+      {#each sensitivityOptions as option, index}
+        <button
+          id={crypto.randomUUID()}
+          class={twMerge(`m-0 inline-block min-w-0 flex-1 cursor-pointer items-center px-2 py-1 font-semibold shadow-sm transition-all duration-300
             select-none hover:shadow-md
             ${
               option === sensitivity && sensitivity !== null
                 ? 'z-10 py-1 shadow-[0_0_10px_var(--shadow-color)] hover:shadow-[0_0_15px_var(--shadow-color)]'
                 : ''
             }  
-            ${sensitivityOptions.length > 0 && index === 0 ? 'rounded-l-2xl' : ''} ${
-              index === sensitivityOptions.length - 1 ? 'rounded-r-2xl' : ''
+            ${sensitivityOptions.length > 0 && index === 0 ? 'rounded-t-2xl' : ''} ${
+              index === sensitivityOptions.length - 1 ? 'rounded-b-2xl' : ''
             } bg-(--back-color)`)}
-        onclick={() => {
-          sensitivity = option
-        }}
-      >
-        <span class="flex flex-row items-center justify-center gap-4">
-          {#if option}
-            <div class="flex-1">
-              {option}
-            </div>
-          {/if}
-        </span>
-      </button>
-    {/each}
+          onclick={() => {
+            sensitivity = option
+          }}
+        >
+          <span class="flex flex-row items-center justify-center gap-4">
+            {#if option}
+              <div class="flex-1">
+                {option}
+              </div>
+            {/if}
+          </span>
+        </button>
+      {/each}
+    </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>
+        <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]}
+          id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
+          readonly
+        />
+      {/each}
+    </div>
   </div>
-  <!-- {direction.content ? 2 * 6.25 * Math.sin((Math.PI * 65) / 360) : 2 * 6.25 * Math.sin((Math.PI * 25) / 360)} -->
-  <!-- angle / 2 + angle * index -->
-  <!--             ? 'shadow-[0_-2px_5px_rgb(254_202_202)] '
-            : 'shadow-[0_2px_5px_rgb(254_202_202)]'}" -->
 </div>
+<!-- sensitivity == 0.01 ? value[num].toFixed(2) : sensitivity == 0.1 ? value[num].toFixed(1) : value[num].toFixed(0) -->

package/dist/ProgressBar/ProgressBar.svelte

@@ -40,7 +40,7 @@
   })
 </script>
 
-<div {id} class={twMerge(`relative flex w-full flex-col items-center`, wrapperClass)}>
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`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>
   {/if}

package/dist/Select/Select.svelte

@@ -14,11 +14,13 @@
 
   let {
     id = crypto.randomUUID(),
+
     wrapperClass = '',
     disabled = false,
     label = { name: '', class: '' },
     type = 'select',
     value = $bindable(),
+    bitMode = false,
     options = [],
     onUpdate,
   }: ISelectProps<T> = $props()
@@ -92,7 +94,7 @@
   {/if}
   {#if type === 'select'}
     <button
-      {id}
+      id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
       value={value?.value ? String(value.value) : ''}
       class={twMerge(
         `w-full rounded-2xl border border-(--border-color) p-1 text-center duration-250
@@ -133,7 +135,7 @@
       </div>
     {/if}
   {:else if type === 'buttons'}
-    <div {id} class="flex h-full w-full flex-row justify-center rounded-full border border-(--bg-color)">
+    <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="flex h-full w-full flex-row justify-center rounded-full border border-(--bg-color)">
       {#each options as option, index (option.id)}
         <button
           id={option.id}
@@ -165,7 +167,7 @@
           [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
           {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text'} border-(--border-color)"
       style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
-      {id}
+      id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
       {disabled}
       oninput={(e) => handleSearch((e.currentTarget as HTMLInputElement).value)}
       onclick={(e) => {

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,26 @@
 
   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-'))),
-    ),
-  )
+  let range = $state({ start: 0, end: 0 })
+
+  const generateBitOptions = () => {
+    const bitsNeeded = range.end - range.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) << range.start,
+        name: binary,
+        class: 'bg-max',
+      })
+    }
+    updateProperty('options', options, component, onPropertyChange)
+  }
 
   const initialAlign = $derived(
     $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
@@ -103,6 +118,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 +132,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={range.start}
+            onUpdate={(value) => {
+              range.start = value as number
+              generateBitOptions()
+            }}
+            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={range.end}
+            onUpdate={(value) => {
+              range.end = value as number
+              generateBitOptions()
+            }}
+            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 +172,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()
+        }}
+      />
     </div>
   </div>
 
@@ -232,8 +292,9 @@
       <UI.Switch
         wrapperClass="bg-blue"
         label={{ name: $t('constructor.props.disabled') }}
-        value={component.properties.disabled ? 2 : 1}
-        onChange={(value) => updateProperty('disabled', value === 2, 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/Slider/Slider.svelte

@@ -98,7 +98,10 @@
   {/if}
 
   <!-- Слайдер -->
-  <div {id} class="relative flex h-7 w-full justify-center rounded-full {disabled ? 'cursor-not-allowed opacity-50' : ''}">
+  <div
+    id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
+    class="relative flex h-7 w-full justify-center rounded-full {disabled ? 'cursor-not-allowed opacity-50' : ''}"
+  >
     {#if isRange}
       <!-- Трек и активная зона -->
       <div