poe-svelte-ui-lib 1.2.21 → 1.2.23

package/dist/Slider/SliderProps.svelte

@@ -138,8 +138,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/Switch/Switch.svelte

@@ -5,39 +5,42 @@
 
   let {
     id = crypto.randomUUID(),
-    disabled = false,
     wrapperClass = '',
     label = { name: '', class: '', captionLeft: '', captionRight: '' },
     height = '2rem',
     type = 'horizontal',
+    options = [],
+    bitMode = false,
     value = $bindable(),
     onChange = () => {},
   }: ISwitchProps = $props()
 
-  const options = [1, 2]
-  let checked = $derived(value === options[1])
+  let localOptions = $derived(bitMode ? options : options.slice(0, 1))
 
-  let knobTransform = $derived(
-    checked
-      ? `${type === 'horizontal' ? `translateX(calc(${height}))` : `translateY(calc(-${height}/2))`}`
-      : `${type === 'horizontal' ? 'translateX(0)' : `translateY(calc(${height}/2))`}`,
+  let checkedOptions: boolean[] = $derived(
+    (() => {
+      if (bitMode) {
+        return localOptions.map((option) => ((value ?? 0) & (1 << (option?.value ?? 0))) == Math.pow(2, option.value ?? 0))
+      } else {
+        return [value == 1]
+      }
+    })(),
   )
+  let ID = $derived(`${id}-${crypto.randomUUID().slice(0, 6)}`)
 
   $effect(() => {
-    if (value === undefined || value === null) value = options[0]
+    if (value === undefined || value === null) value = 0
   })
 
-  const handleToggle = () => {
-    if (disabled) return
-    const newValue = checked ? options[1] : options[0]
+  const handleToggle = (index: number) => {
+    if (localOptions[index].disabled) return
+    value = (value ?? 0) ^ (1 << (localOptions[index].value ?? 0))
 
-    value = newValue
-
-    onChange(newValue)
+    onChange(value)
   }
 
   const handleCaptionClick = (newValue: number) => {
-    if (disabled || value === newValue) return
+    if (localOptions[0].disabled || value === newValue) return
     value = newValue
     onChange(newValue)
   }
@@ -50,67 +53,82 @@
 </script>
 
 {#if type !== 'checkbox'}
-  <div class={twMerge(`bg-blue relative flex w-full flex-col items-center justify-center`, wrapperClass)}>
+  <div class={twMerge(`relative flex w-full flex-col items-center justify-center`, wrapperClass)}>
     {#if label.name}
       <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
     {/if}
+    <div class="flex w-full flex-wrap justify-center gap-5">
+      {#each localOptions as option, index}
+        <div class={twMerge(`bg-blue flex flex-col`, option.class)}>
+          {#if option.name}
+            <span>{option.name}</span>
+          {/if}
+
+          <div class="relative flex w-full grow items-center justify-center bg-transparent">
+            {#if type === 'horizontal' && label.captionLeft}
+              <button
+                class="mr-2 {option.disabled ? 'opacity-60' : 'cursor-pointer'}"
+                style="width: {maxCaptionWidth}; text-align: end;"
+                onclick={() => handleCaptionClick(0)}>{label.captionLeft}</button
+              >
+            {/if}
 
-    <div class="relative flex w-full grow items-center justify-center bg-transparent">
-      {#if type === 'horizontal'}
-        <button
-          class="mr-2 {disabled ? 'opacity-60' : 'cursor-pointer'}"
-          style="width: {maxCaptionWidth}; text-align: end;"
-          onclick={() => handleCaptionClick(1)}>{label.captionLeft}</button
-        >
-      {/if}
+            <label
+              class="relative flex items-center justify-between rounded-full shadow-md
+      {checkedOptions[index] ? 'border-(--bg-color)' : 'border-(--bg-color)'}
+      {option.disabled ? 'opacity-60' : ''}"
+            >
+              <input
+                id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
+                type="checkbox"
+                class="absolute left-1/2 h-full w-full -translate-x-1/2 cursor-pointer appearance-none rounded-md"
+                checked={checkedOptions[index]}
+                disabled={option.disabled}
+                onchange={() => handleToggle(index)}
+              />
+              <span
+                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 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
+                  ]
+                    ? `${type === 'horizontal' ? `translateX(calc(${height}))` : `translateY(calc(-${height}/2))`}`
+                    : `${type === 'horizontal' ? 'translateX(0)' : `translateY(calc(${height}/2))`}`};"
+                ></span>
+              </span>
+            </label>
 
-      <label
-        class="relative flex items-center justify-between rounded-full border
-      {checked ? 'border-(--bg-color)' : 'border-(--gray-color)'}
-      {disabled ? 'opacity-60' : ''}"
-      >
-        <input
-          {id}
-          type="checkbox"
-          class="absolute left-1/2 h-full w-full -translate-x-1/2 cursor-pointer appearance-none rounded-md"
-          bind:checked
-          {disabled}
-          onchange={handleToggle}
-        />
-        <span
-          class="relative flex items-center rounded-full transition-all duration-250
-        {checked ? 'bg-(--bg-color)' : 'bg-(--gray-color)'}
-        {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
-          {disabled ? 'opacity-60' : 'cursor-pointer'}"
-            style="width: {`calc(${height} * 0.8)`}; height: {`calc(${height} * 0.8)`}; margin: 0 {`calc(${height} * 0.1)`}; transform: {knobTransform};"
-          ></span>
-        </span>
-      </label>
-      {#if type === 'horizontal'}
-        <button
-          class="ml-2 {disabled ? 'opacity-60' : 'cursor-pointer'}"
-          style="width: {maxCaptionWidth}; text-align: start;"
-          onclick={() => handleCaptionClick(2)}>{label.captionRight}</button
-        >
-      {/if}
+            {#if type === 'horizontal' && label.captionRight}
+              <button
+                class="ml-2 {option.disabled ? 'opacity-60' : 'cursor-pointer'}"
+                style="width: {maxCaptionWidth}; text-align: start;"
+                onclick={() => handleCaptionClick(1)}>{label.captionRight}</button
+              >
+            {/if}
+          </div>
+        </div>
+      {/each}
     </div>
   </div>
 {:else}
   <div class={twMerge('bg-blue m-1 flex items-center justify-center gap-2', wrapperClass)}>
     <input
-      {id}
+      id={ID}
       type="checkbox"
-      bind:checked
-      {disabled}
+      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: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
@@ -118,9 +136,9 @@
       checked:after:content-[''] hover:shadow-md
       disabled:cursor-not-allowed disabled:opacity-70
     "
-      onchange={handleToggle}
+      onchange={() => handleToggle(0)}
     />
-    <label for={id} class={twMerge("{disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'} ml-1 select-none", label.class)}>
+    <label for={ID} class={twMerge("{disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'} ml-1 select-none", label.class)}>
       {label.name}
     </label>
   </div>

package/dist/Switch/SwitchProps.svelte

@@ -5,6 +5,8 @@
   import * as UI from '..'
   import { optionsStore } from '../options'
   import { twMerge } from 'tailwind-merge'
+  import ButtonDelete from '../libIcons/ButtonDelete.svelte'
+  import ButtonAdd from '../libIcons/ButtonAdd.svelte'
 
   const {
     component,
@@ -47,41 +49,162 @@
           updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
         }}
       />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
-      <UI.Input
-        label={{ name: $t('constructor.props.caption.left') }}
-        value={component.properties.label.captionLeft}
-        onUpdate={(value) => updateProperty('label.captionLeft', value as string, component, onPropertyChange)}
-      />
-      <UI.Input
-        label={{ name: $t('constructor.props.caption.right') }}
-        value={component.properties.label.captionRight}
-        onUpdate={(value) => updateProperty('label.captionRight', value as string, component, onPropertyChange)}
-      />
-      <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)}
+      <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">
+        <UI.Input
+          label={{ name: $t('constructor.props.caption.left') }}
+          value={component.properties.label.captionLeft}
+          onUpdate={(value) => updateProperty('label.captionLeft', value as string, component, onPropertyChange)}
+        />
+        <UI.Input
+          label={{ name: $t('constructor.props.caption.right') }}
+          value={component.properties.label.captionRight}
+          onUpdate={(value) => updateProperty('label.captionRight', value as string, component, onPropertyChange)}
+        />
+
+        <UI.Switch
+          wrapperClass="bg-blue"
+          label={{ name: $t('constructor.props.disabled') }}
+          value={component.properties.options[0].disabled}
+          options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+          onChange={(value) => {
+            const options = [...(component.properties?.options || [])]
+            options[0]['disabled'] = value
+            updateProperty('options', options, component, onPropertyChange)
+          }}
+        />
+      </div>
+    {/if}
     <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
-        wrapperClass="!h-14"
-        label={{ name: $t('constructor.props.colors') }}
-        type="buttons"
-        options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== 'bg-max' && option.value !== 'bg-gray')}
-        value={initialColor}
-        onUpdate={(option) => updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)}
+      {#if !component.properties.bitMode}
+        <UI.Select
+          wrapperClass="!h-14"
+          label={{ name: $t('constructor.props.colors') }}
+          type="buttons"
+          options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== 'bg-max' && option.value !== 'bg-gray')}
+          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
+            updateProperty('options', options, component, onPropertyChange)
+          }}
+        />
+      {/if}
+      <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)
+          if (!component.properties.bitMode) updateProperty('value', 1, component, onPropertyChange)
+          if (component.properties.bitMode) updateProperty('type', 'vertical', component, onPropertyChange)
+        }}
       />
     </div>
   </div>
+  {#if component.properties.bitMode}
+    <hr class="border-gray-400" />
+
+    <!-- Настройки опций -->
+    <div class="space-y-4">
+      <div class="m-0 flex items-center justify-center gap-2">
+        <h4>{$t('constructor.props.bits.title')}</h4>
+        <UI.Button
+          wrapperClass="w-8"
+          content={{ icon: ButtonAdd }}
+          onClick={() => {
+            const newOption: ISelectOption = {
+              id: crypto.randomUUID(),
+              name: ``,
+              value: component.properties?.options.length,
+              class: 'bg-blue',
+            }
+            const options = [...(component.properties?.options || []), newOption]
+            updateProperty('options', options, component, onPropertyChange)
+          }}
+        />
+      </div>
+
+      {#each component.properties.options || [] as option, index (option.id)}
+        <div class="m-0 flex items-end justify-around gap-2 border-gray-400">
+          <UI.Input
+            label={{ name: $t('constructor.props.optionname') }}
+            wrapperClass="!w-3/10"
+            value={option.name}
+            onUpdate={(value) => {
+              const options = [...(component.properties?.options || [])]
+              options[index]['name'] = value
+              updateProperty('options', options, component, onPropertyChange)
+            }}
+          />
+          <UI.Input
+            label={{ name: $t('constructor.props.optionposition') }}
+            wrapperClass="!w-3/10"
+            value={option.value}
+            type="number"
+            number={{ minNum: 0, maxNum: 31, step: 1 }}
+            onUpdate={(value) => {
+              const options = [...(component.properties?.options || [])]
+              options[index]['value'] = value
+              updateProperty('options', options, component, onPropertyChange)
+            }}
+          />
+          <UI.Select
+            wrapperClass="w-80 h-14.5"
+            label={{ name: $t('constructor.props.colors') }}
+            type="buttons"
+            options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== 'bg-max' && option.value !== 'bg-gray')}
+            value={$optionsStore.COLOR_OPTIONS.find((c) =>
+              (c.value as string).includes(option.class.split(' ').find((cls: string) => cls.startsWith('bg-'))),
+            )}
+            onUpdate={(option) => {
+              const options = [...(component.properties?.options || [])]
+              options[index]['class'] = option.value
+              updateProperty('options', options, component, onPropertyChange)
+            }}
+          />
+          <UI.Switch
+            wrapperClass=" w-1/10 bg-blue"
+            label={{ name: $t('constructor.props.disabled') }}
+            value={option.disabled}
+            options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+            onChange={(value) => {
+              const options = [...(component.properties?.options || [])]
+              options[index]['disabled'] = value
+              updateProperty('options', options, component, onPropertyChange)
+            }}
+          />
+          <UI.Button
+            wrapperClass="w-8"
+            content={{ icon: ButtonDelete }}
+            onClick={() => {
+              const options = [...(component.properties?.options || [])]
+              options.splice(index, 1)
+              updateProperty('options', options, component, onPropertyChange)
+            }}
+          />
+        </div>
+      {/each}
+    </div>
+  {/if}
 {:else}
   <div class="relative flex flex-row items-start justify-center">
     <!-- Сообщение для отправки в ws по нажатию кнопки -->
@@ -101,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 || [])]
@@ -128,6 +251,14 @@
         value={component.properties.label.captionRight}
         onUpdate={(value) => updateProperty('label.captionRight', value as string, component, onPropertyChange)}
       />
+      <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)}
+      />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Input
@@ -139,15 +270,101 @@
         label={{ name: $t('constructor.props.value') }}
         value={component.properties.value}
         type="number"
-        number={{ minNum: 1, maxNum: 2, step: 1 }}
+        number={{ minNum: 0, maxNum: component.properties.bitMode ? Math.pow(2, 32) : 1, step: 1 }}
         onUpdate={(value) => updateProperty('value', value as number, component, onPropertyChange)}
       />
       <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)}
+      />
+      <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)
+          if (!component.properties.bitMode) updateProperty('value', 1, component, onPropertyChange)
+          if (component.properties.bitMode) updateProperty('type', 'vertical', component, onPropertyChange)
+        }}
       />
     </div>
   </div>
+  {#if component.properties.bitMode}
+    <hr class="border-gray-400" />
+
+    <!-- Настройки опций -->
+    <div class="space-y-4">
+      <div class="m-0 flex items-center justify-center gap-2">
+        <h4>{$t('constructor.props.bits.title')}</h4>
+        <UI.Button
+          wrapperClass="w-8"
+          content={{ icon: ButtonAdd }}
+          onClick={() => {
+            const newOption: ISelectOption = {
+              id: crypto.randomUUID(),
+              name: `Option ${component.properties?.options.length + 1}`,
+              value: component.properties?.options.length,
+              class: 'bg-blue',
+            }
+            const options = [...(component.properties?.options || []), newOption]
+            updateProperty('options', options, component, onPropertyChange)
+          }}
+        />
+      </div>
+
+      {#each component.properties.options || [] as option, index (option.id)}
+        <div class="m-0 flex items-end justify-around gap-2 border-gray-400">
+          <UI.Input
+            label={{ name: $t('constructor.props.optionname') }}
+            wrapperClass="!w-3/10"
+            value={option.name}
+            onUpdate={(value) => {
+              const options = [...(component.properties?.options || [])]
+              options[index]['name'] = value
+              updateProperty('options', options, component, onPropertyChange)
+            }}
+          />
+          <UI.Input
+            label={{ name: $t('constructor.props.optionvalue') }}
+            wrapperClass="!w-3/10"
+            value={option.value}
+            type="number"
+            number={{ minNum: 0, maxNum: 31, step: 1 }}
+            onUpdate={(value) => {
+              const options = [...(component.properties?.options || [])]
+              options[index]['value'] = value
+              updateProperty('options', options, component, onPropertyChange)
+            }}
+          />
+          <UI.Select
+            wrapperClass="w-80 h-14.5"
+            label={{ name: $t('constructor.props.colors') }}
+            type="buttons"
+            options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== 'bg-max' && option.value !== 'bg-gray')}
+            value={$optionsStore.COLOR_OPTIONS.find((c) =>
+              (c.value as string).includes(option.class.split(' ').find((cls: string) => cls.startsWith('bg-'))),
+            )}
+            onUpdate={(option) => {
+              const options = [...(component.properties?.options || [])]
+              options[index]['class'] = option.value
+              updateProperty('options', options, component, onPropertyChange)
+            }}
+          />
+          <UI.Button
+            wrapperClass="w-8"
+            content={{ icon: ButtonDelete }}
+            onClick={() => {
+              const options = [...(component.properties?.options || [])]
+              options.splice(index, 1)
+              updateProperty('options', options, component, onPropertyChange)
+            }}
+          />
+        </div>
+      {/each}
+    </div>
+  {/if}
 {/if}

package/dist/Table/Table.svelte

@@ -155,7 +155,7 @@
   })
 </script>
 
-<div {id} class={twMerge(`bg-blue flex h-full w-full flex-col overflow-hidden`, wrapperClass)}>
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`bg-blue flex h-full w-full flex-col overflow-hidden`, wrapperClass)}>
   {#if label.name}
     <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}

package/dist/Table/TableProps.svelte

@@ -97,8 +97,9 @@
       />
       <UI.Switch
         label={{ name: $t('constructor.props.outline') }}
-        value={component.properties.outline ? 2 : 1}
-        onChange={(value) => updateProperty('outline', value === 2, component, onPropertyChange)}
+        value={component.properties.outline}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('outline', value, component, onPropertyChange)}
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
@@ -168,14 +169,16 @@
         <UI.Switch
           wrapperClass="w-2/10"
           label={{ name: $t('constructor.props.table.columns.sortable') }}
-          value={column.sortable ? 2 : 1}
-          onChange={(value) => updateTableHeader(columnIndex, 'sortable', value === 2)}
+          options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+          value={column.sortable}
+          onChange={(value) => updateTableHeader(columnIndex, 'sortable', value)}
         />
         <UI.Switch
           wrapperClass="w-2/10"
           label={{ name: $t('constructor.props.copy') }}
-          value={column.overflow?.copy ? 2 : 1}
-          onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value === 2 })}
+          options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+          value={column.overflow?.copy}
+          onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value })}
         />
         <UI.Button
           wrapperClass="w-8"
@@ -302,8 +305,9 @@
       />
       <UI.Switch
         label={{ name: $t('constructor.props.outline') }}
-        value={component.properties.outline ? 2 : 1}
-        onChange={(value) => updateProperty('outline', value === 2, component, onPropertyChange)}
+        value={component.properties.outline}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('outline', value, component, onPropertyChange)}
       />
     </div>
   </div>
@@ -370,14 +374,16 @@
               <UI.Switch
                 label={{ name: $t('constructor.props.table.columns.sortable'), class: 'px-0' }}
                 wrapperClass="w-30"
-                value={column.sortable ? 2 : 1}
-                onChange={(value) => updateTableHeader(columnIndex, 'sortable', value === 2)}
+                options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+                value={column.sortable}
+                onChange={(value) => updateTableHeader(columnIndex, 'sortable', value)}
               />
               <UI.Switch
                 label={{ name: $t('constructor.props.copy'), class: 'px-0' }}
                 wrapperClass="w-30"
-                value={column.overflow?.copy ? 2 : 1}
-                onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value === 2, truncated: column.overflow?.truncated })}
+                options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+                value={column.overflow?.copy}
+                onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value, truncated: column.overflow?.truncated })}
               />
               <UI.Button
                 wrapperClass="w-8"
@@ -414,8 +420,9 @@
               <UI.Switch
                 wrapperClass="w-2/10"
                 label={{ name: $t('constructor.props.table.columns.truncated') }}
-                value={column.overflow?.truncated ? 2 : 1}
-                onChange={(value) => updateTableHeader(columnIndex, 'overflow', { truncated: value === 2, copy: column.overflow?.copy })}
+                options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+                value={column.overflow?.truncated}
+                onChange={(value) => updateTableHeader(columnIndex, 'overflow', { truncated: value, copy: column.overflow?.copy })}
               />
               <div class="relative mt-6 flex w-full gap-2">
                 <UI.Button

package/dist/Tabs/Tabs.svelte

@@ -26,7 +26,7 @@
   let currentTabIndex: number = $state(activeTab)
 </script>
 
-<div {id} class="w-full rounded-2xl bg-(--back-color)">
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="w-full rounded-2xl bg-(--back-color)">
   <!-- Вкладки -->
   <div
     class="{twMerge('bg-blue sticky top-0 z-50 flex h-fit items-center overflow-x-auto rounded-t-2xl px-1', wrapperClass)}