poe-svelte-ui-lib 1.2.24 → 1.2.26

package/dist/Slider/Slider.svelte

@@ -1,10 +1,8 @@
 <!-- $lib/ElementsUI/Slider.svelte -->
 <script lang="ts">
   import type { ISliderProps } from '../types'
-  import IconGripVerticalLeft from '../libIcons/IconGripVerticalLeft.svelte'
-  import IconGripVerticalRight from '../libIcons/IconGripVerticalRight.svelte'
-  import IconGripVerticalDual from '../libIcons/IconGripVerticalDual.svelte'
   import { twMerge } from 'tailwind-merge'
+  import { onDestroy, onMount } from 'svelte'
 
   let {
     id = crypto.randomUUID(),
@@ -27,11 +25,6 @@
   let lowerValue = $derived(isRange && Array.isArray(value) ? value[0] : number.minNum)
   let upperValue = $derived(isRange && Array.isArray(value) ? value[1] : number.maxNum)
 
-  /* Расчет позиций */
-  const singlePosition = $derived(((singleValue - number.minNum) / (number.maxNum - number.minNum)) * 100)
-  const lowerPosition = $derived(((lowerValue - number.minNum) / (number.maxNum - number.minNum)) * 100)
-  const upperPosition = $derived(((upperValue - number.minNum) / (number.maxNum - number.minNum)) * 100)
-
   $effect(() => {
     if (value === undefined || value === null) {
       if (type === 'single' && !value) value = number.minNum
@@ -44,8 +37,10 @@
     if (isRange && target !== 'single') {
       if (target === 'lower') {
         lowerValue = Math.max(number.minNum, Math.min(lowerValue + stepValue, upperValue))
+        lowerValue = lowerValue == upperValue ? upperValue - number.step : lowerValue
       } else {
         upperValue = Math.min(number.maxNum, Math.max(upperValue + stepValue, lowerValue))
+        upperValue = upperValue == lowerValue ? upperValue + number.step : upperValue
       }
       onUpdate([lowerValue, upperValue])
     } else {
@@ -80,19 +75,65 @@
 
       if (activeThumb === 'lower') {
         lowerValue = Math.max(number.minNum, Math.min(clickValue, upperValue))
+        lowerValue = lowerValue == upperValue ? upperValue - number.step : lowerValue
       } else {
         upperValue = Math.min(number.maxNum, Math.max(clickValue, lowerValue))
+        upperValue = upperValue == lowerValue ? upperValue + number.step : upperValue
       }
-
       onUpdate([lowerValue, upperValue])
     } else {
       singleValue = Math.max(number.minNum, Math.min(clickValue, number.maxNum))
       onUpdate(singleValue)
     }
   }
+
+  let rangeRefLower: HTMLElement | null = $state(null)
+  let rangeRefUpper: HTMLElement | null = $state(null)
+  let shadowWidth = $state()
+
+  const updateShadowWidth = () => {
+    let thumbCenterLower
+    let thumbCenterUpper
+
+    if (rangeRefLower) {
+      const rect = rangeRefLower.getBoundingClientRect()
+      const percent = (lowerValue - number.minNum) / (number.maxNum - number.minNum)
+      thumbCenterLower = rect.left + rect.width * percent
+    }
+
+    if (rangeRefUpper) {
+      const rect = rangeRefUpper.getBoundingClientRect()
+      const percent = (upperValue - number.minNum) / (number.maxNum - number.minNum)
+      thumbCenterUpper = rect.left + rect.width * percent
+    }
+
+    if (thumbCenterUpper && thumbCenterLower) {
+      shadowWidth = (thumbCenterUpper - thumbCenterLower) / 3.5
+    }
+  }
+
+  $effect(() => {
+    lowerValue
+    upperValue
+    updateShadowWidth()
+  })
+
+  onMount(() => {
+    if (window.visualViewport) {
+      const handleResize = () => {
+        updateShadowWidth()
+      }
+
+      window.visualViewport.addEventListener('resize', handleResize)
+
+      onDestroy(() => {
+        if (window.visualViewport) window.visualViewport.removeEventListener('resize', handleResize)
+      })
+    }
+  })
 </script>
 
-<div class={twMerge(`relative flex w-full flex-col items-center `, wrapperClass)}>
+<div class={twMerge(`bg-blue 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}
@@ -100,22 +141,24 @@
   <!-- Слайдер -->
   <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' : ''}"
+    class="relative flex h-9 w-full justify-center rounded-full {disabled ? 'cursor-not-allowed opacity-50' : ''}"
   >
     {#if isRange}
+      {@const userAgent = navigator.userAgent}
       <!-- Трек и активная зона -->
       <div
-        class={`absolute h-full w-full rounded-full bg-(--gray-color) ${disabled ? '' : 'cursor-pointer'}`}
+        class={`absolute z-10 h-full w-full rounded-full bg-transparent ${disabled ? '' : 'cursor-pointer'}`}
         role="button"
         tabindex={null}
         onkeydown={null}
-        onclick={disabled ? undefined : handleTrackClick}
-      >
-        <div class="absolute h-full rounded-full bg-(--bg-color)" style={`left: ${lowerPosition}%; right: ${100 - upperPosition}%;`}></div>
-      </div>
+        onclick={(e) => {
+          disabled ? undefined : handleTrackClick(e)
+        }}
+      ></div>
 
       <!-- Ползунки -->
       <input
+        bind:this={rangeRefLower}
         type="range"
         min={number.minNum}
         max={number.maxNum}
@@ -126,20 +169,47 @@
           : (e) => {
               const newValue = Math.min(Number((e.target as HTMLInputElement).value), upperValue)
               lowerValue = newValue
-              activeThumb = 'lower'
+              lowerValue = newValue == upperValue ? upperValue - number.step : newValue
             }}
-        onmouseup={disabled ? undefined : () => onUpdate([lowerValue, upperValue])}
+        onmouseup={(e) => {
+          handleTrackClick(e)
+          disabled ? undefined : () => onUpdate([lowerValue, upperValue])
+        }}
         {disabled}
-        class={`absolute h-full w-full appearance-none bg-transparent ${activeThumb === 'lower' ? 'z-30' : 'z-20'}`}
+        class={twMerge(
+          `slider-bg absolute h-8 w-full appearance-none overflow-hidden rounded-full accent-(--back-color) 
+              [&::-webkit-slider-runnable-track]:rounded-full 
+              [&::-webkit-slider-runnable-track]:bg-(--gray-color)
+              [&::-webkit-slider-thumb]:relative 
+              [&::-webkit-slider-thumb]:z-100 
+              [&::-webkit-slider-thumb]:ml-[-0.4rem] 
+              [&::-webkit-slider-thumb]:h-4
+              [&::-webkit-slider-thumb]:w-4
+              [&::-webkit-slider-thumb]:cursor-pointer
+              [&::-webkit-slider-thumb]:rounded-full
+            [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
+            ${
+              userAgent.includes('iOS') || userAgent.includes('iPhone') || userAgent.includes('iPad')
+                ? 'pl-3.5 [&::-webkit-slider-thumb]:ring-[6.5px]'
+                : 'pl-3 [&::-webkit-slider-thumb]:ring-[5px]'
+            }
+            [&::-moz-range-thumb]:relative 
+            [&::-moz-range-thumb]:ml-[-0.4rem]
+            [&::-moz-range-thumb]:size-4 
+            [&::-moz-range-thumb]:cursor-pointer 
+            [&::-moz-range-thumb]:rounded-full
+            [&::-moz-range-thumb]:shadow-[var(--focus-shadow),] 
+            [&::-moz-range-thumb]:ring-[6px] 
+            [&::-moz-range-track]:rounded-full
+            [&::-moz-range-track]:bg-(--gray-color)
+             `,
+          `[&::-moz-range-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem] 
+              [&::-webkit-slider-thumb]:shadow-[calc(${shadowWidth}px+0.5rem)_0_0_${shadowWidth}px]`,
+        )}
       />
-      <div
-        class="pointer-events-none absolute z-40 rounded-full bg-(--field-color)"
-        style={`left: calc(${lowerPosition}% + 0rem); top: 50%; transform: translateY(-50%)`}
-      >
-        <IconGripVerticalLeft />
-      </div>
 
       <input
+        bind:this={rangeRefUpper}
         type="range"
         min={number.minNum}
         max={number.maxNum}
@@ -150,59 +220,90 @@
           : (e) => {
               const newValue = Math.max(Number((e.target as HTMLInputElement).value), lowerValue)
               upperValue = newValue
-              activeThumb = 'upper'
+              upperValue = newValue == lowerValue ? newValue + number.step : upperValue
             }}
-        onmouseup={disabled ? undefined : () => onUpdate([lowerValue, upperValue])}
+        onmouseup={(e) => {
+          handleTrackClick(e)
+          disabled ? undefined : () => onUpdate([lowerValue, upperValue])
+        }}
         {disabled}
-        class={`absolute h-full w-full appearance-none bg-transparent ${activeThumb === 'upper' ? 'z-30' : 'z-20'}`}
+        class={twMerge(
+          `slider-bg absolute h-8 w-full appearance-none overflow-hidden rounded-full accent-(--back-color) 
+              [&::-webkit-slider-runnable-track]:rounded-full
+              [&::-webkit-slider-thumb]:relative 
+              [&::-webkit-slider-thumb]:z-100
+              [&::-webkit-slider-thumb]:ml-[-0.4rem] 
+              [&::-webkit-slider-thumb]:h-4
+              [&::-webkit-slider-thumb]:w-4
+              [&::-webkit-slider-thumb]:cursor-pointer
+              [&::-webkit-slider-thumb]:rounded-full
+            [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
+            ${
+              userAgent.includes('iOS') || userAgent.includes('iPhone') || userAgent.includes('iPad')
+                ? 'pl-3.5 [&::-webkit-slider-thumb]:ring-[6.5px]'
+                : 'pl-3 [&::-webkit-slider-thumb]:ring-[5px]'
+            }
+            [&::-moz-range-thumb]:relative 
+            [&::-moz-range-thumb]:ml-[-0.4rem]
+            [&::-moz-range-thumb]:size-4 
+            [&::-moz-range-thumb]:cursor-pointer 
+            [&::-moz-range-thumb]:rounded-full
+            [&::-moz-range-thumb]:shadow-[var(--focus-shadow),] 
+            [&::-moz-range-thumb]:ring-[6px] 
+            [&::-moz-range-track]:rounded-full
+            [&::-moz-range-track]:bg-(--gray-color)
+             `,
+          `[&::-moz-range-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem] 
+            ${shadowWidth ? '' : ''}  [&::-webkit-slider-thumb]:shadow-[calc(${shadowWidth}px*-1-0.5rem)_0_0_${shadowWidth}px]`,
+        )}
       />
-      <div
-        class="pointer-events-none absolute z-40 rounded-full bg-(--field-color)"
-        style={`left: calc(${upperPosition}% - 2rem); top: 50%; transform: translateY(-50%)`}
-      >
-        <IconGripVerticalRight />
-      </div>
     {:else}
+      {@const userAgent = navigator.userAgent}
       <!-- Одиночный слайдер -->
-      <div
-        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 z-10 h-full {singlePosition === 100 ? ' rounded-full' : 'rounded-l-full'}"
-          style={`width: ${singlePosition}%; background-color: var(--bg-color)`}
-        ></div>
-      </div>
+      <div class="absolute h-full w-full">
+        <input
+          type="range"
+          class={twMerge(
+            `slider-bg  h-8 w-full appearance-none overflow-hidden rounded-full accent-(--back-color) 
+              [&::-webkit-slider-runnable-track]:rounded-full
+              [&::-webkit-slider-runnable-track]:bg-(--gray-color)
+              [&::-webkit-slider-thumb]:relative 
 
-      <input
-        type="range"
-        min={number.minNum}
-        max={number.maxNum}
-        step={number.step}
-        bind:value={singleValue}
-        oninput={disabled
-          ? undefined
-          : (e) => {
-              singleValue = Number((e.target as HTMLInputElement).value)
-            }}
-        onmouseup={disabled ? undefined : () => onUpdate(singleValue)}
-        {disabled}
-        class="absolute z-20 h-full w-full appearance-none"
-      />
-      <div
-        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 />
+              [&::-webkit-slider-thumb]:ml-[-0.4rem] 
+              [&::-webkit-slider-thumb]:h-4
+              [&::-webkit-slider-thumb]:w-4
+              [&::-webkit-slider-thumb]:cursor-pointer
+              [&::-webkit-slider-thumb]:rounded-full
+            [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
+            ${
+              userAgent.includes('iOS') || userAgent.includes('iPhone') || userAgent.includes('iPad')
+                ? 'pl-3.5 [&::-webkit-slider-thumb]:ring-[6.5px]'
+                : 'pl-3 [&::-webkit-slider-thumb]:ring-[5px]'
+            }
+            [&::-moz-range-thumb]:relative 
+            [&::-moz-range-thumb]:ml-[-0.4rem]
+            [&::-moz-range-thumb]:size-4 
+            [&::-moz-range-thumb]:cursor-pointer 
+            [&::-moz-range-thumb]:rounded-full
+            [&::-moz-range-thumb]:shadow-[var(--focus-shadow),] 
+            [&::-moz-range-thumb]:ring-[6px] 
+            [&::-moz-range-track]:rounded-full
+            [&::-moz-range-track]:bg-(--gray-color)
+             `,
+            `[&::-moz-range-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem] 
+              [&::-webkit-slider-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem]`,
+          )}
+          min={number.minNum}
+          max={number.maxNum}
+          step={number.step}
+          bind:value={singleValue}
+        />
       </div>
     {/if}
   </div>
 
   <!-- Кнопки управления -->
-  <div class={`mt-2 flex w-full ${isRange ? 'justify-between' : 'justify-center'} gap-2`}>
+  <div class={`mt-3 flex w-full ${isRange ? 'justify-between' : 'justify-center'} gap-2`}>
     {#if isRange}
       {#each ['lower', 'upper'] as type (type)}
         <div
@@ -246,64 +347,3 @@
     {/if}
   </div>
 </div>
-
-<style>
-  input[type='range'] {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
-    padding: 0;
-    pointer-events: none;
-    outline: none;
-  }
-
-  /* Webkit thumb */
-  input[type='range']::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    background: transparent;
-    cursor: pointer;
-    pointer-events: auto;
-    border: none;
-  }
-
-  /* Firefox thumb */
-  input[type='range']::-moz-range-thumb {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    background: transparent;
-    cursor: pointer;
-    pointer-events: auto;
-    border: none;
-  }
-
-  /* Webkit track */
-  input[type='range']::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 100%;
-    background: transparent;
-    border-radius: 0;
-    border: none;
-  }
-
-  /* Firefox track */
-  input[type='range']::-moz-range-track {
-    width: 100%;
-    height: 100%;
-    background: transparent;
-    border-radius: 0;
-    border: none;
-  }
-
-  input[type='range']:disabled::-webkit-slider-thumb {
-    cursor: not-allowed;
-  }
-
-  input[type='range']:disabled::-moz-range-thumb {
-    cursor: not-allowed;
-  }
-</style>

package/dist/Slider/SliderProps.svelte

@@ -12,7 +12,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<ISliderProps> }
-    onPropertyChange: (value: string | object, name?: string) => void
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
     forConstructor?: boolean
   }>()
 
@@ -40,8 +40,9 @@
         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)
+          onPropertyChange(null, value.name?.split('—')[1].trim(), null)
         }}
       />
       <UI.Select
@@ -53,6 +54,13 @@
           updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
         }}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Select
@@ -144,6 +152,13 @@
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
       <UI.Input
         label={{ name: $t('constructor.props.label') }}
         value={component.properties.label.name}

package/dist/Slider/SliderProps.svelte.d.ts

@@ -3,7 +3,7 @@ type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<ISliderProps>;
     };
-    onPropertyChange: (value: string | object, name?: string) => void;
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void;
     forConstructor?: boolean;
 };
 declare const SliderProps: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/Switch/Switch.svelte

@@ -57,7 +57,7 @@
     {#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">
+    <div class="flex w-full flex-wrap items-end justify-around gap-5">
       {#each localOptions as option, index}
         <div class={twMerge(`bg-blue flex flex-col`, option.class)}>
           {#if option.name}

package/dist/Switch/SwitchProps.svelte

@@ -14,7 +14,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<ISwitchProps> }
-    onPropertyChange: (value: string | object, name?: string) => void
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
     forConstructor?: boolean
   }>()
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
@@ -36,8 +36,9 @@
         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)
+          onPropertyChange(null, value.name?.split('—')[1].trim(), null)
         }}
       />
       <UI.Select
@@ -49,6 +50,16 @@
           updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
         }}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
+    </div>
+
+    <div class="flex w-1/3 flex-col px-2">
       <UI.Select
         wrapperClass="!h-14"
         label={{ name: $t('constructor.props.type') }}
@@ -58,9 +69,7 @@
         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">
+      {#if !component.properties.bitMode}
         <UI.Input
           label={{ name: $t('constructor.props.caption.left') }}
           value={component.properties.label.captionLeft}
@@ -83,8 +92,9 @@
             updateProperty('options', options, component, onPropertyChange)
           }}
         />
-      </div>
-    {/if}
+      {/if}
+    </div>
+
     <div class="flex w-1/3 flex-col px-2">
       <UI.Input
         label={{ name: $t('constructor.props.label') }}
@@ -133,7 +143,7 @@
           onClick={() => {
             const newOption: ISelectOption = {
               id: crypto.randomUUID(),
-              name: ``,
+              name: component.properties?.options.length,
               value: component.properties?.options.length,
               class: 'bg-blue',
             }
@@ -149,6 +159,7 @@
             label={{ name: $t('constructor.props.optionname') }}
             wrapperClass="!w-3/10"
             value={option.name}
+            maxlength={4}
             onUpdate={(value) => {
               const options = [...(component.properties?.options || [])]
               options[index]['name'] = value
@@ -214,6 +225,13 @@
         value={component.properties.id}
         onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
       <UI.Input
         label={{ name: $t('constructor.props.wrapperclass') }}
         value={component.properties.wrapperClass}

package/dist/Switch/SwitchProps.svelte.d.ts

@@ -3,7 +3,7 @@ type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<ISwitchProps>;
     };
-    onPropertyChange: (value: string | object, name?: string) => void;
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void;
     forConstructor?: boolean;
 };
 declare const SwitchProps: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/Table/Table.svelte

@@ -166,13 +166,13 @@
       {#each header as column, index (column)}
         <div
           class={twMerge(
-            `justify-center border-l ${outline && index !== 0 ? ' border-(--border-color)' : 'border-transparent'} ${
+            `items-center justify-center border-l ${outline && index !== 0 ? ' border-(--border-color)' : 'border-transparent'} ${
               column.align?.header === 'center'
                 ? 'flex justify-center text-center'
                 : column.align?.header === 'right'
                   ? 'flex justify-end text-right'
                   : 'flex justify-start text-left'
-            } bg-(--bg-color) p-2 text-left`,
+            } gap-1 bg-(--bg-color) p-2 text-left`,
             column.label?.class,
           )}
         >

package/dist/Table/TableProps.svelte

@@ -17,7 +17,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<ITableProps<object>> }
-    onPropertyChange: (value: string | object, name?: string) => void
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
     forConstructor?: boolean
   }>()
 
@@ -81,10 +81,18 @@
         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)
+          onPropertyChange(null, value.name?.split('—')[1].trim(), null)
         }}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Select
@@ -145,6 +153,7 @@
       <div class="mr-2 flex items-end justify-around gap-6">
         <UI.Input
           label={{ name: $t('constructor.props.table.columns.key') }}
+          wrapperClass="w-170"
           value={column.key}
           help={{ regExp: /^[0-9a-zA-Z_-]{0,16}$/ }}
           onUpdate={(value) => {
@@ -161,21 +170,30 @@
         />
         <UI.Input
           label={{ name: $t('constructor.props.table.columns.width') }}
-          wrapperClass="w-120"
+          wrapperClass="w-150"
           type="number"
           value={Number(column.width.replace('%', ''))}
           onUpdate={(value) => updateTableHeader(columnIndex, 'width', `${value}%`)}
         />
+        <UI.Select
+          label={{ name: $t('constructor.props.align.content') }}
+          type="buttons"
+          value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align?.content) || 'left')}
+          options={$optionsStore.ALIGN_OPTIONS}
+          onUpdate={(option) => {
+            updateTableHeader(columnIndex, 'align', { header: option.value, content: option.value })
+          }}
+        />
         <UI.Switch
-          wrapperClass="w-2/10"
-          label={{ name: $t('constructor.props.table.columns.sortable') }}
+          wrapperClass="w-30"
+          label={{ name: $t('constructor.props.table.columns.sortable'), class: 'px-0' }}
           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') }}
+          wrapperClass="w-30"
+          label={{ name: $t('constructor.props.copy'), class: 'px-0' }}
           options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
           value={column.overflow?.copy}
           onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value })}
@@ -263,6 +281,7 @@
         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}
@@ -285,6 +304,13 @@
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
       <UI.Input
         label={{ name: $t('constructor.props.label') }}
         value={component.properties.label.name}

package/dist/Table/TableProps.svelte.d.ts

@@ -3,7 +3,7 @@ type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<ITableProps<object>>;
     };
-    onPropertyChange: (value: string | object, name?: string) => void;
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void;
     forConstructor?: boolean;
 };
 declare const TableProps: import("svelte").Component<$$ComponentProps, {}, "">;