poe-svelte-ui-lib 1.1.14 → 1.1.16

package/dist/Select/Select.svelte

@@ -95,7 +95,7 @@
       {id}
       value={value?.value ? String(value.value) : ''}
       class={twMerge(
-        `w-full rounded-2xl border border-[var(--border-color)] p-1 text-center duration-250
+        `w-full rounded-2xl border border-(--border-color) p-1 text-center duration-250
         ${disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-lg'}`,
         value?.class,
       )}
@@ -110,7 +110,7 @@
 
     {#if isDropdownOpen}
       <div
-        class="absolute top-full left-1/2 z-50 -translate-x-1/2 rounded-b-2xl border border-t-0 border-[var(--border-color)]"
+        class="absolute top-full left-1/2 z-50 -translate-x-1/2 rounded-b-2xl border border-t-0 border-(--border-color)"
         style="width: calc(100% - 1.8rem);"
         transition:slide={{ duration: 250 }}
       >
@@ -119,7 +119,7 @@
             id={option.id}
             value={option?.value ? String(option.value) : ''}
             class={twMerge(
-              `flex h-full w-full cursor-pointer items-center justify-center p-1 duration-250 hover:!bg-[var(--field-color)]
+              `flex h-full w-full cursor-pointer items-center justify-center p-1 duration-250 hover:bg-(--field-color)
               ${index === options.length - 1 ? 'rounded-b-2xl' : ''} `,
               option.class,
             )}
@@ -133,7 +133,7 @@
       </div>
     {/if}
   {:else if type === 'buttons'}
-    <div {id} class="flex h-full w-full flex-row justify-center rounded-full border border-[var(--bg-color)]">
+    <div {id} 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}
@@ -143,7 +143,7 @@
             ${option.value === value?.value && value !== null ? 'z-10 py-1 shadow-[0_0_10px_var(--shadow-color)] hover:shadow-[0_0_15px_var(--shadow-color)]' : ''}  
             ${options.length > 0 && index === 0 ? 'rounded-l-2xl' : ''} ${index === options.length - 1 ? 'rounded-r-2xl' : ''}`,
             option.class,
-          )} bg-[var(--bg-color)]"
+          )} bg-(--bg-color)"
           onclick={(e) => selectOption(option, e)}
           disabled={option.disabled}
         >
@@ -163,7 +163,7 @@
       class="w-full appearance-none rounded-2xl border px-4 py-1 text-center transition-shadow
           outline-none hover:shadow-md focus:border-blue-400
           [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
-          {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text'} border-[var(--border-color)]"
+          {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}
       {disabled}
@@ -178,7 +178,7 @@
 
     {#if isDropdownOpen}
       <div
-        class="absolute top-full left-1/2 z-50 -translate-x-1/2 rounded-b-2xl border border-t-0 border-[var(--border-color)]"
+        class="absolute top-full left-1/2 z-50 -translate-x-1/2 rounded-b-2xl border border-t-0 border-(--border-color)"
         style="width: calc(100% - 1.8rem);"
         transition:slide={{ duration: 250 }}
       >
@@ -187,7 +187,7 @@
             id={option.id}
             value={option?.value ? String(option.value) : ''}
             class={twMerge(
-              `flex h-full w-full cursor-pointer items-center justify-center p-1 duration-250 hover:!bg-[var(--field-color)]
+              `flex h-full w-full cursor-pointer items-center justify-center p-1 duration-250 hover:bg-(--field-color)
               ${index === filteredOptions.length - 1 ? 'rounded-b-2xl' : ''} `,
               option.class,
             )}

package/dist/Select/SelectProps.svelte

@@ -59,7 +59,7 @@
   )
 </script>
 
-{#if component && component.properties}
+{#if forConstructor}
   <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
@@ -67,10 +67,20 @@
         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('id', value.value as string, component, onPropertyChange)
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
         }}
       />
+      <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)
+        }}
+      />
 
       <UI.Input
         wrapperClass="{Header.value === 'SET' ? 'mt-1' : ''} "
@@ -80,15 +90,7 @@
         help={{ info: $t('constructor.props.argument.info'), autocomplete: 'on', regExp: /^[a-zA-Z0-9\-_]{0,32}$/ }}
         onUpdate={(value) => updateProperty('eventHandler.Argument', value as string, component, onPropertyChange)}
       />
-      <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)
-        }}
-      />
+
       <UI.Select
         label={{ name: $t('constructor.props.type') }}
         type="buttons"
@@ -149,6 +151,151 @@
 
   <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.options.title')}</h4>
+      <UI.Button
+        wrapperClass="w-8"
+        content={{ icon: ButtonAdd }}
+        onClick={() => {
+          const newOption: ISelectOption = {
+            id: crypto.randomUUID(),
+            name: 'New Button',
+            class: 'bg-max',
+          }
+          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={currentValueType.value}
+          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}
+          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>
+{:else}
+  <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.Input
+        label={{ name: $t('constructor.props.id') }}
+        value={component.properties.id}
+        onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      />
+      <UI.Select
+        wrapperClass=" h-14"
+        label={{ name: $t('constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.COLOR_OPTIONS}
+        value={initialColor}
+        onUpdate={(option) => {
+          updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)
+          const options = [...(component.properties?.options || [])]
+          options.forEach((o) => {
+            o['class'] = option.value
+          })
+          updateProperty('options', options, component, onPropertyChange)
+        }}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col items-center 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.Input
+        label={{ name: $t('constructor.props.label.class') }}
+        value={component.properties.label.class}
+        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.type') }}
+        type="buttons"
+        value={currentType}
+        options={$optionsStore.SELECT_TYPE_OPTIONS}
+        onUpdate={(item) => updateProperty('type', item.value as string, component, onPropertyChange)}
+      />
+      <UI.Select
+        wrapperClass="h-14"
+        label={{ name: $t('constructor.props.valuetype') }}
+        type="buttons"
+        options={$optionsStore.SELECT_VALUE_TYPE_OPTIONS}
+        value={currentValueType}
+        onUpdate={(value) => {
+          currentValueType = value as ValueTypeOption
+          const options = [...(component.properties?.options || [])]
+          const newType = value.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)
+        }}
+      />
+      <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)}
+      />
+    </div>
+  </div>
+
+  <hr class="border-gray-400" />
+
   <!-- Настройки опций -->
   <div class="space-y-4">
     <div class="m-0 flex items-center justify-center gap-2">

package/dist/Slider/Slider.svelte

@@ -102,13 +102,13 @@
     {#if isRange}
       <!-- Трек и активная зона -->
       <div
-        class={`absolute h-full w-full rounded-full bg-[var(--gray-color)] ${disabled ? '' : 'cursor-pointer'}`}
+        class={`absolute h-full w-full rounded-full bg-(--gray-color) ${disabled ? '' : 'cursor-pointer'}`}
         role="button"
         tabindex={null}
         onkeydown={null}
         onclick={disabled ? undefined : handleTrackClick}
       >
-        <div class="absolute h-full rounded-full bg-[var(--bg-color)]" style={`left: ${lowerPosition}%; right: ${100 - upperPosition}%;`}></div>
+        <div class="absolute h-full rounded-full bg-(--bg-color)" style={`left: ${lowerPosition}%; right: ${100 - upperPosition}%;`}></div>
       </div>
 
       <!-- Ползунки -->
@@ -130,7 +130,7 @@
         class={`absolute h-full w-full appearance-none bg-transparent ${activeThumb === 'lower' ? 'z-30' : 'z-20'}`}
       />
       <div
-        class="pointer-events-none absolute z-40 rounded-full bg-[var(--field-color)]"
+        class="pointer-events-none absolute z-40 rounded-full bg-(--field-color)"
         style={`left: calc(${lowerPosition}% + 0rem); top: 50%; transform: translateY(-50%)`}
       >
         <IconGripVerticalLeft />
@@ -154,7 +154,7 @@
         class={`absolute h-full w-full appearance-none bg-transparent ${activeThumb === 'upper' ? 'z-30' : 'z-20'}`}
       />
       <div
-        class="pointer-events-none absolute z-40 rounded-full bg-[var(--field-color)]"
+        class="pointer-events-none absolute z-40 rounded-full bg-(--field-color)"
         style={`left: calc(${upperPosition}% - 2rem); top: 50%; transform: translateY(-50%)`}
       >
         <IconGripVerticalRight />
@@ -162,7 +162,7 @@
     {:else}
       <!-- Одиночный слайдер -->
       <div
-        class={`absolute h-full w-full rounded-full bg-[var(--gray-color)] ${disabled ? '' : 'cursor-pointer'}`}
+        class={`absolute h-full w-full rounded-full bg-(--gray-color) ${disabled ? '' : 'cursor-pointer'}`}
         role="button"
         tabindex={null}
         onkeydown={null}
@@ -190,7 +190,7 @@
         class="absolute z-20 h-full w-full appearance-none"
       />
       <div
-        class="pointer-events-none absolute z-30 rounded-full bg-[var(--field-color)]"
+        class="pointer-events-none absolute z-30 rounded-full bg-(--field-color)"
         style={`left: clamp(1rem, ${singlePosition}%, calc(100% - 1rem)); top: 50%; transform: translate(-50%, -50%)`}
       >
         <IconGripVerticalDual />

package/dist/Slider/SliderProps.svelte

@@ -32,7 +32,7 @@
   )
 </script>
 
-{#if component && component.properties}
+{#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Select
@@ -107,4 +107,87 @@
       />
     </div>
   </div>
+{:else}
+  <div class="relative flex flex-row items-start justify-center">
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.id') }}
+        value={component.properties.id}
+        onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      />
+      <UI.Select
+        wrapperClass=" h-14"
+        label={{ name: $t('constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.COLOR_OPTIONS}
+        value={initialColor}
+        onUpdate={(option) => {
+          updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)
+          const options = [...(component.properties?.options || [])]
+          options.forEach((o) => {
+            o['class'] = option.value
+          })
+          updateProperty('options', options, 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)}
+      />
+    </div>
+    <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.Input
+        label={{ name: $t('constructor.props.label.class') }}
+        value={component.properties.label.class}
+        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.value') }}
+        value={component.properties.value}
+        onUpdate={(value) => updateProperty('value', value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.type') }}
+        type="buttons"
+        value={$optionsStore.SLIDER_TYPE_OPTIONS.find((opt) => opt.value === (component.properties.type || 'single'))}
+        options={$optionsStore.SLIDER_TYPE_OPTIONS}
+        onUpdate={(type) => {
+          updateProperty('value', type.value === 'single' ? 5 : [2, 7], component, onPropertyChange)
+          updateProperty('type', type.value as string, component, onPropertyChange)
+        }}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.minnum') }}
+        value={component.properties.number.minNum as number}
+        type="number"
+        onUpdate={(value) => updateProperty('number.minNum', Number(value), component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.maxnum') }}
+        value={component.properties.number.maxNum as number}
+        type="number"
+        onUpdate={(value) => updateProperty('number.maxNum', Number(value), component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.step') }}
+        value={component.properties.number.step as number}
+        type="number"
+        onUpdate={(value) => updateProperty('number.step', Number(value), component, onPropertyChange)}
+      />
+    </div>
+  </div>
 {/if}

package/dist/Switch/Switch.svelte

@@ -49,15 +49,15 @@
     <h5 class={`w-full px-4 text-center`}>{label.name}</h5>
   {/if}
 
-  <div class="relative flex w-full grow items-center justify-center !bg-transparent">
+  <div class="relative flex w-full grow items-center justify-center bg-transparent">
     <button
       class="mr-2 {disabled ? 'opacity-60' : 'cursor-pointer'}"
       style="width: {maxCaptionWidth}; text-align: end;"
       onclick={() => handleCaptionClick(1)}>{label.captionLeft}</button
     >
     <label
-      class="relative flex items-center justify-between rounded-full border-1
-      {checked ? '!border-[var(--bg-color)]' : '!border-[var(--gray-color)]'}
+      class="relative flex items-center justify-between rounded-full border
+      {checked ? 'border-(--bg-color)' : 'border-(--gray-color)'}
       {disabled ? 'opacity-60' : ''}"
     >
       <input
@@ -70,12 +70,12 @@
       />
       <span
         class="relative flex items-center rounded-full transition-all duration-250
-        {checked ? '!bg-[var(--bg-color)]' : '!bg-[var(--gray-color)]'}
+        {checked ? 'bg-(--bg-color)' : 'bg-(--gray-color)'}
         {disabled ? '' : 'cursor-pointer'}"
         style="width: {`calc(${height} * 2)`}; height: {height};"
       >
         <span
-          class="absolute rounded-full bg-[var(--back-color)] transition-all duration-250
+          class="absolute rounded-full bg-(--back-color) transition-all duration-250
           {disabled ? 'opacity-60' : 'cursor-pointer'}"
           style="width: {`calc(${height} * 0.75)`}; height: {`calc(${height} * 0.75)`}; margin: 0 {`calc(${height} * 0.1)`}; transform: {knobTransform};"
         ></span>

package/dist/Switch/SwitchProps.svelte

@@ -25,7 +25,7 @@
   )
 </script>
 
-{#if component && component.properties}
+{#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
     <!-- Сообщение для отправки в ws по нажатию кнопки -->
     <div class="flex w-1/3 flex-col items-center px-2">
@@ -52,13 +52,11 @@
       <UI.Input
         label={{ name: $t('constructor.props.caption.left') }}
         value={component.properties.label.captionLeft}
-        type="text"
         onUpdate={(value) => updateProperty('label.captionLeft', value as string, component, onPropertyChange)}
       />
       <UI.Input
         label={{ name: $t('constructor.props.caption.right') }}
         value={component.properties.label.captionRight}
-        type="text"
         onUpdate={(value) => updateProperty('label.captionRight', value as string, component, onPropertyChange)}
       />
       <UI.Switch
@@ -72,7 +70,6 @@
       <UI.Input
         label={{ name: $t('constructor.props.label') }}
         value={component.properties.label.name}
-        type="text"
         onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
       />
       <UI.Select
@@ -85,4 +82,72 @@
       />
     </div>
   </div>
+{:else}
+  <div class="relative flex flex-row items-start justify-center">
+    <!-- Сообщение для отправки в ws по нажатию кнопки -->
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.id') }}
+        value={component.properties.id}
+        onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      />
+      <UI.Select
+        wrapperClass=" h-14"
+        label={{ name: $t('constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.COLOR_OPTIONS}
+        value={initialColor}
+        onUpdate={(option) => {
+          updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)
+          const options = [...(component.properties?.options || [])]
+          options.forEach((o) => {
+            o['class'] = option.value
+          })
+          updateProperty('options', options, component, onPropertyChange)
+        }}
+      />
+    </div>
+    <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.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)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.height') }}
+        value={component.properties.height}
+        onUpdate={(value) => updateProperty('height', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.value') }}
+        value={component.properties.value}
+        type="number"
+        number={{ minNum: 1, maxNum: 2, 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)}
+      />
+    </div>
+  </div>
 {/if}

package/dist/Table/Table.svelte

@@ -4,8 +4,6 @@
   import type { ITableHeader, ITableProps } from '../types'
   import { fly } from 'svelte/transition'
   import { twMerge } from 'tailwind-merge'
-  import { Button, Modal } from '..'
-  import { t } from '../locales/i18n'
 
   let {
     id = crypto.randomUUID(),
@@ -17,11 +15,10 @@
     cursor = null,
     loader,
     getData = () => {},
+    modalData = $bindable(),
     onClick,
   }: ITableProps<any> = $props()
 
-  let modalData = $state({ isOpen: false, rawData: '', formattedData: '' })
-
   /* Сортировка */
   let sortState: {
     key: string | null
@@ -100,6 +97,7 @@
       rawData: text,
       formattedData: formatting ? formatting(text) : (text ?? ''),
     }
+    // console.log(modalData)
   }
 
   const showTooltip = (event: MouseEvent, text: string, formatting?: (text: string) => string) => {
@@ -128,11 +126,11 @@
     <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
-  <div class="flex h-full flex-col overflow-hidden rounded-xl border-[var(--border-color)]">
+  <div class="flex h-full flex-col overflow-hidden rounded-xl border-(--border-color)">
     <!-- Table Header -->
     <div class="grid font-semibold" style={`grid-template-columns: ${header.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};`}>
       {#each header as column (column)}
-        <div class={twMerge(`justify-center bg-[var(--bg-color)] p-2 text-left`, column.label?.class)}>
+        <div class={twMerge(`justify-center bg-(--bg-color) p-2 text-left`, column.label?.class)}>
           <span>{column.label?.name}</span>
           {#if column.sortable}
             <button
@@ -147,13 +145,13 @@
     </div>
 
     <!-- Table Body с прокруткой -->
-    <div class="flex-1 overflow-y-auto bg-[var(--container-color)]/50" bind:this={container} onscroll={handleScroll}>
+    <div class="flex-1 overflow-y-auto bg-(--container-color)/50" bind:this={container} onscroll={handleScroll}>
       <div class="grid min-w-0" style={`grid-template-columns: ${header.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};`}>
         {#each body as row, index (row)}
           {#each header as column (column)}
             <div
-              class="relative flex w-full min-w-0 items-center px-2 py-1 break-words
-              {index % 2 ? '!bg-[var(--back-color)]/40' : ''}
+              class="relative flex w-full min-w-0 items-center px-2 py-1 wrap-break-word
+              {index % 2 ? 'bg-(--back-color)/40' : 'bg-[#edeef3] dark:bg-[#1f2a3a]'}
               {column.align === 'center'
                 ? 'flex justify-center text-center'
                 : column.align === 'right'
@@ -166,7 +164,7 @@
                     <button
                       class="{twMerge(`cursor-pointer rounded-full
                            px-4 py-1 font-medium transition-shadow outline-none select-none hover:shadow-md
-                          ${typeof button.class === 'function' ? button.class(row) : button.class}`)} bg-[var(--bg-color)]"
+                          ${typeof button.class === 'function' ? button.class(row) : button.class}`)} bg-(--bg-color)"
                       onclick={() => buttonClick(row, button)}
                     >
                       {typeof button.name === 'function' ? button.name(row) : button.name}
@@ -191,7 +189,7 @@
                 </div>
               {:else}
                 <div
-                  class="w-full max-w-full break-words {column.overflow?.truncated
+                  class="w-full max-w-full wrap-break-word {column.overflow?.truncated
                     ? 'overflow-hidden text-ellipsis whitespace-nowrap'
                     : 'whitespace-normal'}"
                   onmouseenter={column.overflow?.truncated ? (e) => showTooltip(e, row[column.key], column.overflow?.formatting) : undefined}
@@ -233,7 +231,7 @@
                   >
                     <div class=" size-5 text-sm [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full">
                       {#if copiedCell.y === index && copiedCell.x === column.key}
-                        <div class="rounded-md bg-[var(--green-color)] shadow-lg">✓</div>
+                        <div class="rounded-md bg-(--green-color) shadow-lg">✓</div>
                       {:else}
                         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                           <g fill="none" stroke="currentColor" stroke-width="1.5">
@@ -268,25 +266,9 @@
 
     <!-- Нижнее поле для сводной информации -->
     {#if footer}
-      <div class="flex h-8 items-center justify-center bg-[var(--bg-color)]">
+      <div class="flex h-8 items-center justify-center bg-(--bg-color)">
         <h5>{footer}</h5>
       </div>
     {/if}
   </div>
 </div>
-
-<Modal isOpen={modalData.isOpen} title={$t('debug.baud_rate_data')}>
-  {#snippet main()}
-    {@html modalData.formattedData}
-  {/snippet}
-  {#snippet footer()}
-    <Button
-      content={{ name: 'Copy' }}
-      wrapperClass="w-20 bg-pink"
-      onClick={() => {
-        navigator.clipboard.writeText(modalData.rawData)
-        modalData.isOpen = false
-      }}
-    />
-  {/snippet}
-</Modal>