poe-svelte-ui-lib 1.2.29 → 1.2.31

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

@@ -1,9 +1,14 @@
-import { type UIComponent, type ITableProps } from '../types';
+import { type UIComponent, type ITableProps, type IUIComponentHandler } from '../types';
 type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<ITableProps<object>>;
     };
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void;
+    onPropertyChange: (updates: Partial<{
+        properties?: string | object;
+        name?: string;
+        access?: string;
+        eventHandler?: IUIComponentHandler;
+    }>) => void;
     forConstructor?: boolean;
 };
 declare const TableProps: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/Tabs/TabsProps.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { t } from '../locales/i18n'
-  import { updateProperty, type ISelectOption, type ITabsProps, type UIComponent } from '../types'
+  import { updateProperty, type ISelectOption, type ITabsProps, type IUIComponentHandler, type UIComponent } from '../types'
   import * as UI from '..'
   import { optionsStore } from '../options'
   import { ICONS } from '../icons'
@@ -17,7 +17,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<ITabsProps> }
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
   }>()
 
@@ -62,13 +62,12 @@
   <div class="flex items-center justify-center gap-8">
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Select
-        label={{ name: $t('constructor.props.align') }}
+        label={{ name: $t('constructor.props.access') }}
         type="buttons"
-        value={initialAlign}
-        options={$optionsStore.JUSTIFY_ALIGN_OPTIONS}
-        onUpdate={(option) => updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)}
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange({ access: option.value })}
       />
-
       <UI.Select
         wrapperClass="h-14"
         label={{ name: $t('constructor.props.colors') }}
@@ -245,11 +244,11 @@
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Select
-        label={{ name: $t('constructor.props.align') }}
+        label={{ name: $t('constructor.props.access') }}
         type="buttons"
-        value={initialAlign}
-        options={$optionsStore.JUSTIFY_ALIGN_OPTIONS}
-        onUpdate={(option) => updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)}
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange({ access: option.value })}
       />
 
       <UI.Select

package/dist/Tabs/TabsProps.svelte.d.ts

@@ -1,9 +1,14 @@
-import { type ITabsProps, type UIComponent } from '../types';
+import { type ITabsProps, type IUIComponentHandler, type UIComponent } from '../types';
 type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<ITabsProps>;
     };
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void;
+    onPropertyChange: (updates: Partial<{
+        properties?: string | object;
+        name?: string;
+        access?: string;
+        eventHandler?: IUIComponentHandler;
+    }>) => void;
     forConstructor?: boolean;
 };
 declare const TabsProps: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/TextField/TextFieldProps.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { t } from '../locales/i18n'
-  import { updateProperty, type ITextFieldProps, type UIComponent } from '../types'
+  import { updateProperty, type ITextFieldProps, type IUIComponentHandler, type UIComponent } from '../types'
   import * as UI from '../index'
   import { optionsStore } from '../options'
   import { getContext } from 'svelte'
@@ -12,7 +12,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<ITextFieldProps> }
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
   }>()
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
@@ -43,8 +43,7 @@
         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)
-          onPropertyChange(null, value.name?.split('—')[1].trim(), null)
+          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: value.value as string } })
         }}
       />
       <UI.Input
@@ -78,7 +77,6 @@
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
-      <!-- <p>{component.properties.content?.class?.split(' ').includes((cls: string) => cls.startsWith('font-bold'))}</p> -->
       <UI.Switch
         label={{ name: $t('constructor.props.bold') }}
         value={initialBold}

package/dist/TextField/TextFieldProps.svelte.d.ts

@@ -1,9 +1,14 @@
-import { type ITextFieldProps, type UIComponent } from '../types';
+import { type ITextFieldProps, type IUIComponentHandler, type UIComponent } from '../types';
 type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<ITextFieldProps>;
     };
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void;
+    onPropertyChange: (updates: Partial<{
+        properties?: string | object;
+        name?: string;
+        access?: string;
+        eventHandler?: IUIComponentHandler;
+    }>) => void;
     forConstructor?: boolean;
 };
 declare const TextFieldProps: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export { default as ButtonProps } from './Button/ButtonProps.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as ColorPickerProps } from './ColorPicker/ColorPickerProps.svelte';
 export { default as FileAttach } from './FileAttach/FileAttach.svelte';
+export { default as FileAttachProps } from './FileAttach/FileAttachProps.svelte';
 export { default as Graph } from './Graph/Graph.svelte';
 export { default as GraphProps } from './Graph/GraphProps.svelte';
 export { default as Input } from './Input/Input.svelte';

package/dist/index.js

@@ -6,6 +6,7 @@ export { default as ButtonProps } from './Button/ButtonProps.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as ColorPickerProps } from './ColorPicker/ColorPickerProps.svelte';
 export { default as FileAttach } from './FileAttach/FileAttach.svelte';
+export { default as FileAttachProps } from './FileAttach/FileAttachProps.svelte';
 export { default as Graph } from './Graph/Graph.svelte';
 export { default as GraphProps } from './Graph/GraphProps.svelte';
 export { default as Input } from './Input/Input.svelte';

package/dist/locales/translations.js

@@ -73,6 +73,7 @@ const translations = {
         'constructor.props.image': 'Фоновое изображение',
         'constructor.props.labelicon': 'Иконка заголовка',
         'constructor.props.markerIcon': 'Иконка маркера',
+        'constructor.props.buttonIcon': 'Иконка кнопки',
         'constructor.props.removeimage': 'Удалить изображение',
         'constructor.props.name': 'Текст',
         'constructor.props.height': 'Высота',
@@ -127,6 +128,8 @@ const translations = {
         'constructor.props.bitmode': 'Битовый режим',
         'constructor.props.access': 'Доступ (не для владельца)',
         'constructor.props.map.timeout': 'Таймаут маркеров:',
+        'constructor.props.joystick.axes': 'Названия осей',
+        'constructor.props.joystick.axes.info': 'Поле для ввода названий осей, разделенных пробелами (2 или 3 названия)',
         'constructor.props.table.columns': 'Колонки таблицы',
         'constructor.props.table.columns.key': 'Ключ',
         'constructor.props.table.columns.label': 'Название колонки',

package/dist/types.d.ts

@@ -1,17 +1,37 @@
 import type { Snippet } from 'svelte';
 import type { Writable } from 'svelte/store';
-import type { IFileInputProps } from './FileAttach/FileAttach.svelte';
 export declare const updateProperty: (path: string, value: string | number | boolean | object | string[], component: UIComponent & {
     properties: Partial<UIComponent["properties"]>;
-}, onPropertyChange: (value?: string | object, name?: string, access?: string) => void) => void;
+}, onPropertyChange: (updates: Partial<{
+    properties?: string | object;
+    name?: string;
+    access?: string;
+    eventHandler?: IUIComponentHandler;
+}>) => void) => void;
+export declare const updateComponent: (component: UIComponent, updates: Partial<{
+    name: string;
+    access: "full" | "viewOnly" | "hidden";
+    properties: Partial<UIComponent["properties"]>;
+    eventHandler: IUIComponentHandler;
+}>) => {
+    access: "full" | "viewOnly" | "hidden" | undefined;
+    name: string | undefined;
+    properties: IAccordionProps | IButtonProps | IInputProps | ISelectProps<unknown> | ISwitchProps | IColorPickerProps | ISliderProps | ITextFieldProps | IProgressBarProps | IGraphProps | ITableProps<object> | ITabsProps | IFileAttachProps | IJoystickProps | IMapProps;
+    eventHandler: IUIComponentHandler | undefined;
+    id: string;
+    type: "Button" | "Accordion" | "Input" | "Select" | "Switch" | "ColorPicker" | "Slider" | "TextField" | "Joystick" | "ProgressBar" | "Graph" | "Table" | "Tabs" | "FileAttach" | "Map";
+    position: Position;
+    parentId: string;
+};
 export interface UIComponent {
     id: string;
     name?: string;
     access?: 'full' | 'viewOnly' | 'hidden';
     type: 'Button' | 'Accordion' | 'Input' | 'Select' | 'Switch' | 'ColorPicker' | 'Slider' | 'TextField' | 'Joystick' | 'ProgressBar' | 'Graph' | 'Table' | 'Tabs' | 'FileAttach' | 'Map';
-    properties: IAccordionProps | IButtonProps | IInputProps | ISelectProps | ISwitchProps | IColorPickerProps | ISliderProps | ITextFieldProps | IProgressBarProps | IGraphProps | ITableProps<object> | ITabsProps | IFileInputProps | IJoystickProps | IMapProps;
+    properties: IAccordionProps | IButtonProps | IInputProps | ISelectProps | ISwitchProps | IColorPickerProps | ISliderProps | ITextFieldProps | IProgressBarProps | IGraphProps | ITableProps<object> | ITabsProps | IFileAttachProps | IJoystickProps | IMapProps;
     position: Position;
     parentId: string;
+    eventHandler?: IUIComponentHandler;
 }
 export interface Position {
     row: number;
@@ -45,7 +65,6 @@ export interface IButtonProps {
         altKey?: boolean;
         metaKey?: boolean;
     };
-    eventHandler?: IUIComponentHandler;
     onClick?: () => void;
 }
 export interface IAccordionProps {
@@ -92,7 +111,6 @@ export interface IInputProps {
         regExp?: string | RegExp;
         autocomplete?: 'on' | 'off' | 'given-name' | 'family-name' | 'nickname' | 'username' | 'new-password' | 'current-password' | 'organization-title' | 'country-name' | 'address-level1' | 'address-level2' | 'street-address' | 'postal-code' | 'email' | 'tel' | null;
     };
-    eventHandler?: IUIComponentHandler;
     onUpdate?: (value: string | number) => void;
 }
 export interface ISelectProps<T = unknown> {
@@ -112,7 +130,6 @@ export interface ISelectProps<T = unknown> {
         start: number;
         end: number;
     };
-    eventHandler?: IUIComponentHandler;
     onUpdate?: (value: ISelectOption<T>) => void;
 }
 export interface ISelectOption<T = unknown> {
@@ -137,7 +154,6 @@ export interface ISwitchProps {
     bitMode?: boolean;
     type?: 'horizontal' | 'vertical' | 'checkbox';
     value?: number;
-    eventHandler?: IUIComponentHandler;
     onChange?: (value: number) => void;
 }
 export interface IColorPickerProps {
@@ -148,7 +164,6 @@ export interface IColorPickerProps {
         class?: string;
     };
     value?: number[];
-    eventHandler?: IUIComponentHandler;
     onChange?: (value: number[]) => void;
 }
 export interface ISliderProps {
@@ -166,7 +181,6 @@ export interface ISliderProps {
         step: number;
     };
     disabled?: boolean;
-    eventHandler?: IUIComponentHandler;
     onUpdate?: (value: number | [number, number]) => void;
 }
 export interface ITextFieldProps {
@@ -191,6 +205,7 @@ export interface IProgressBarProps {
         maxNum?: number;
         units?: string;
     };
+    type?: 'horizontal' | 'vertical';
     wrapperClass?: string;
 }
 export interface IGraphDataObject {
@@ -232,7 +247,6 @@ export interface ITableHeader<T extends object> {
     buttons?: {
         name: string | ((row: T) => string);
         class?: string | ((row: T) => string);
-        eventHandler?: IUIComponentHandler;
         onClick?: (row: T) => void;
     }[];
     image?: {
@@ -292,10 +306,12 @@ export interface IJoystickProps {
         class?: string;
     };
     value?: number[];
-    limits?: {
+    axes?: {
+        name: string;
         minNum: number;
         maxNum: number;
     }[];
+    buttonIcon?: string;
     onUpdate?: (value: number[]) => void;
 }
 export interface IDeviceGNSS {
@@ -316,3 +332,22 @@ export interface IMapProps {
     data: IDeviceGNSS | null;
     markerIcon?: string;
 }
+export interface IFileAttachProps {
+    id?: string;
+    wrapperClass?: string;
+    label?: {
+        name?: string;
+        class?: string;
+    };
+    type?: 'file' | 'image';
+    accept?: string;
+    imageSize?: {
+        height?: string;
+        width?: string;
+        fitMode?: 'cover' | 'contain';
+        form?: 'square' | 'circle';
+    };
+    disabled?: boolean;
+    currentImage?: string | null;
+    onChange?: (event: Event, file: File | null) => void;
+}

package/dist/types.js

@@ -9,5 +9,14 @@ export const updateProperty = (path, value, component, onPropertyChange) => {
         obj = obj[part];
     }
     obj[parts[parts.length - 1]] = value;
-    onPropertyChange(newProperties);
+    onPropertyChange({ properties: newProperties });
+};
+export const updateComponent = (component, updates) => {
+    return {
+        ...component,
+        access: updates.access ?? component.access,
+        name: updates.name ?? component.name,
+        properties: updates.properties ? { ...component.properties, ...updates.properties } : component.properties,
+        eventHandler: updates.eventHandler ? { ...component.eventHandler, ...updates.eventHandler } : component.eventHandler,
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.2.29",
+  "version": "1.2.31",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -49,7 +49,7 @@
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.10.1",
     "publint": "^0.3.15",
-    "svelte": "^5.43.14",
+    "svelte": "^5.44.0",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.2.4",
     "vite-plugin-compression": "^0.5.1"