poe-svelte-ui-lib 1.2.21 → 1.2.23

package/dist/Tabs/TabsProps.svelte

@@ -52,9 +52,9 @@
   const initialWidth = $derived(() => {
     let width = component.properties.items.find((item: ISelectOption) => item.class?.split(' ').find((cls: string) => cls.startsWith('w-')))
     if (!width) {
-      return 1
-    } else if (width.class.includes('w-auto')) return 1
-    else return 2
+      return 0
+    } else if (width.class.includes('w-auto')) return 0
+    else return 1
   })
 </script>
 
@@ -107,10 +107,11 @@
           captionRight: $t('constructor.props.equal'),
         }}
         value={initialWidth()}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
         onChange={(value) => {
           component.properties.items.forEach((_item: any, index: number) => {
             const items = [...(component.properties?.items || [])]
-            items[index]['class'] = twMerge(items[index].class, value === 2 ? `w-[${(1 / items.length) * 100}%]` : 'w-auto')
+            items[index]['class'] = twMerge(items[index].class, value ? `w-[${(1 / items.length) * 100}%]` : 'w-auto')
             updateProperty('items', items, component, onPropertyChange)
           })
         }}
@@ -132,7 +133,7 @@
           }
           const items = [...(component.properties?.items || []), newItem]
           items.forEach((_item: any, index: number) => {
-            items[index]['class'] = twMerge(items[index].class, initialWidth() === 2 ? `w-[${(1 / items.length) * 100}%]` : 'w-auto')
+            items[index]['class'] = twMerge(items[index].class, initialWidth() ? `w-[${(1 / items.length) * 100}%]` : 'w-auto')
             updateProperty('items', items, component, onPropertyChange)
           })
         }}
@@ -176,7 +177,7 @@
               const items = [...(component.properties?.items || [])]
               items.splice(index, 1)
               items.forEach((_item: any, index: number) => {
-                items[index]['class'] = twMerge(items[index].class, initialWidth() === 2 ? `w-[${(1 / items.length) * 100}%]` : 'w-auto')
+                items[index]['class'] = twMerge(items[index].class, initialWidth() ? `w-[${(1 / items.length) * 100}%]` : 'w-auto')
                 updateProperty('items', items, component, onPropertyChange)
               })
               updateProperty('items', items, component, onPropertyChange)
@@ -289,6 +290,7 @@
           captionRight: $t('constructor.props.equal'),
         }}
         value={initialWidth()}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
         onChange={(value) => {
           if (value === 2) {
             component.properties.items.forEach((_item: any, index: number) => {
@@ -319,7 +321,7 @@
           let tabWidth = Math.max(...Array.from(document.body.querySelectorAll('.tab')).map((item) => (item as HTMLElement).offsetWidth))
           const newItem: { name: string; icon: string; class: string } = {
             name: `Tab ${component.properties?.items.length + 1}`,
-            class: `w-${initialWidth() === 2 ? `[${tabWidth}px]` : 'auto'} text-${initialColor?.value.slice(3)}-500 ${initialPosition?.value}`,
+            class: `w-${initialWidth() ? `[${tabWidth}px]` : 'auto'} text-${initialColor?.value.slice(3)}-500 ${initialPosition?.value}`,
             icon: '',
           }
           const items = [...(component.properties?.items || []), newItem]

package/dist/TextField/TextField.svelte

@@ -13,7 +13,10 @@
   } as const
 </script>
 
-<div {id} class={twMerge(`relative flex w-full flex-col items-center ${background ? 'rounded-2xl bg-(--back-color) px-6 py-2' : ''}`, wrapperClass)}>
+<div
+  id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
+  class={twMerge(`relative flex w-full flex-col items-center ${background ? 'rounded-2xl bg-(--back-color) px-6 py-2' : ''}`, wrapperClass)}
+>
   <p class={twMerge(`w-full text-center ${textSize[content.size ?? 'base']}`, content.class)}>
     {content.name}
   </p>

package/dist/TextField/TextFieldProps.svelte

@@ -79,30 +79,28 @@
     <div class="flex w-1/3 flex-col px-2">
       <UI.Switch
         label={{ name: $t('constructor.props.bold') }}
-        value={initialBold ? 2 : 1}
+        value={initialBold}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
         onChange={(value) =>
           updateProperty(
             'content.class',
-            `${component.properties.content.class} ${value === 2 ? 'font-bold' : 'font-normal'}`,
+            `${component.properties.content.class} ${value ? 'font-bold' : 'font-normal'}`,
             component,
             onPropertyChange,
           )}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.italic') }}
-        value={initialItalic ? 2 : 1}
+        value={initialItalic}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
         onChange={(value) =>
-          updateProperty(
-            'content.class',
-            `${component.properties.content.class} ${value === 2 ? 'italic' : 'not-italic'}`,
-            component,
-            onPropertyChange,
-          )}
+          updateProperty('content.class', `${component.properties.content.class} ${value ? 'italic' : 'not-italic'}`, component, onPropertyChange)}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.background') }}
-        value={component.properties.background ? 2 : 1}
-        onChange={(value) => updateProperty('background', value === 2, component, onPropertyChange)}
+        value={component.properties.background}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('background', value, component, onPropertyChange)}
       />
     </div>
   </div>
@@ -152,30 +150,33 @@
     <div class="flex w-1/3 flex-col px-2">
       <UI.Switch
         label={{ name: $t('constructor.props.bold') }}
-        value={initialBold ? 2 : 1}
+        value={initialBold}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
         onChange={(value) =>
           updateProperty(
             'content.class',
-            twMerge(`${component.properties.content.class} ${value === 2 ? 'font-bold' : 'font-normal'}`),
+            twMerge(`${component.properties.content.class} ${value ? 'font-bold' : 'font-normal'}`),
             component,
             onPropertyChange,
           )}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.italic') }}
-        value={initialItalic ? 2 : 1}
+        value={initialItalic}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
         onChange={(value) =>
           updateProperty(
             'content.class',
-            twMerge(`${component.properties.content.class} ${value === 2 ? 'italic' : 'not-italic'}`),
+            twMerge(`${component.properties.content.class} ${value ? 'italic' : 'not-italic'}`),
             component,
             onPropertyChange,
           )}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.background') }}
-        value={component.properties.background ? 2 : 1}
-        onChange={(value) => updateProperty('background', value === 2, component, onPropertyChange)}
+        value={component.properties.background}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('background', value, component, onPropertyChange)}
       />
     </div>
   </div>

package/dist/locales/translations.js

@@ -37,6 +37,12 @@ const translations = {
         'constructor.props.type.contain': 'Полный',
         'constructor.props.type.square': 'Квадрат',
         'constructor.props.type.circle': 'Круг',
+        'constructor.props.type.horizontal': 'Горизонтально',
+        'constructor.props.type.vertical': 'Вертикально',
+        'constructor.props.type.checkbox': 'Галочка',
+        'constructor.props.type.full': 'Полный',
+        'constructor.props.type.viewOnly': 'Только просмотр',
+        'constructor.props.type.hidden': 'Скрыто',
         /* Общие для редактора свойств */
         'constructor.props.id': 'Идентификатор',
         'constructor.props.label': 'Текст надписи',
@@ -95,6 +101,7 @@ const translations = {
         'constructor.props.widthMode': 'Ширина кнопок',
         'constructor.props.graphdata.title': 'Начальные данные ',
         'constructor.props.options.title': 'Опции компонента',
+        'constructor.props.bits.title': 'Биты',
         'constructor.props.tabs.title': 'Вкладки меню',
         'constructor.props.valuetype': 'Тип значения',
         'constructor.props.action': 'Действие при переключении',
@@ -108,12 +115,18 @@ const translations = {
         'constructor.props.units': 'Единица измерения',
         'constructor.props.optionclass': 'Стили кнопки',
         'constructor.props.optionvalue': 'Значение',
+        'constructor.props.optionposition': 'Позиция',
         'constructor.props.optionname': 'Текст',
         'constructor.props.copy': 'Копирование',
         'constructor.props.size.height': 'Высота сетки',
         'constructor.props.size.width': 'Ширина сетки',
+        'constructor.props.range.start': 'Начальный бит ',
+        'constructor.props.range.end': 'Последний бит',
+        'constructor.props.range.start.help': 'Позиция начального бита диапазона ',
+        'constructor.props.range.end.help': 'Позиция последнего бита диапазона',
         'constructor.props.icon.text.position': 'Положение иконки',
         'constructor.props.equal': 'Равные',
+        'constructor.props.bitmode': 'Битовый режим',
         'constructor.props.table.columns': 'Колонки таблицы',
         'constructor.props.table.columns.key': 'Ключ',
         'constructor.props.table.columns.label': 'Название колонки',

package/dist/options.d.ts

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

package/dist/options.js

@@ -22,6 +22,11 @@ export const optionsStore = derived(t, ($t) => {
             { id: id(), value: 'Save', name: $t('constructor.props.action.save') },
             { id: id(), value: '', name: $t('constructor.props.action.custom') },
         ],
+        ACCESS_OPTION: [
+            { id: id(), value: 'full', name: $t('constructor.props.type.full') },
+            { id: id(), value: 'viewOnly', name: $t('constructor.props.type.viewOnly') },
+            { id: id(), value: 'hidden', name: $t('constructor.props.type.hidden') },
+        ],
         INPUT_TYPE_OPTIONS: [
             { id: id(), value: 'text', name: $t('constructor.props.type.text') },
             { id: id(), value: 'password', name: $t('constructor.props.type.password') },
@@ -104,6 +109,11 @@ export const optionsStore = derived(t, ($t) => {
             { id: id(), value: 'cover', name: $t('constructor.props.type.cover') },
             { id: id(), value: 'contain', name: $t('constructor.props.type.contain') },
         ],
+        SWITCH_OPTIONS: [
+            { id: id(), value: 'horizontal', name: $t('constructor.props.type.horizontal') },
+            { id: id(), value: 'vertical', name: $t('constructor.props.type.vertical') },
+            { id: id(), value: 'checkbox', name: $t('constructor.props.type.checkbox') },
+        ],
         INFO_SIDE_OPTIONS: [
             { id: id(), value: 'top', name: $t('constructor.props.info.top') },
             { id: id(), value: 'bottom', name: $t('constructor.props.info.bottom') },

package/dist/types.d.ts

@@ -106,6 +106,7 @@ export interface ISelectProps<T = unknown> {
     type?: 'select' | 'buttons' | 'input';
     value?: ISelectOption<T> | null;
     options?: ISelectOption<T>[];
+    bitMode?: boolean;
     eventHandler?: IUIComponentHandler;
     onUpdate?: (value: ISelectOption<T>) => void;
 }
@@ -127,6 +128,8 @@ export interface ISwitchProps {
         captionLeft?: string;
         captionRight?: string;
     };
+    options?: ISelectOption<number>[];
+    bitMode?: boolean;
     type?: 'horizontal' | 'vertical' | 'checkbox';
     value?: number;
     eventHandler?: IUIComponentHandler;

package/package.json

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