poe-svelte-ui-lib 1.2.28 → 1.2.30

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/types.d.ts

@@ -3,7 +3,27 @@ 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: IFileInputProps | IAccordionProps | IButtonProps | IInputProps | ISelectProps<unknown> | ISwitchProps | IColorPickerProps | ISliderProps | ITextFieldProps | IProgressBarProps | IGraphProps | ITableProps<object> | ITabsProps | 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;
@@ -12,6 +32,7 @@ export interface UIComponent {
     properties: IAccordionProps | IButtonProps | IInputProps | ISelectProps | ISwitchProps | IColorPickerProps | ISliderProps | ITextFieldProps | IProgressBarProps | IGraphProps | ITableProps<object> | ITabsProps | IFileInputProps | IJoystickProps | IMapProps;
     position: Position;
     parentId: string;
+    eventHandler?: IUIComponentHandler;
 }
 export interface Position {
     row: number;
@@ -45,7 +66,6 @@ export interface IButtonProps {
         altKey?: boolean;
         metaKey?: boolean;
     };
-    eventHandler?: IUIComponentHandler;
     onClick?: () => void;
 }
 export interface IAccordionProps {
@@ -92,7 +112,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 +131,6 @@ export interface ISelectProps<T = unknown> {
         start: number;
         end: number;
     };
-    eventHandler?: IUIComponentHandler;
     onUpdate?: (value: ISelectOption<T>) => void;
 }
 export interface ISelectOption<T = unknown> {
@@ -137,7 +155,6 @@ export interface ISwitchProps {
     bitMode?: boolean;
     type?: 'horizontal' | 'vertical' | 'checkbox';
     value?: number;
-    eventHandler?: IUIComponentHandler;
     onChange?: (value: number) => void;
 }
 export interface IColorPickerProps {
@@ -148,7 +165,6 @@ export interface IColorPickerProps {
         class?: string;
     };
     value?: number[];
-    eventHandler?: IUIComponentHandler;
     onChange?: (value: number[]) => void;
 }
 export interface ISliderProps {
@@ -166,7 +182,6 @@ export interface ISliderProps {
         step: number;
     };
     disabled?: boolean;
-    eventHandler?: IUIComponentHandler;
     onUpdate?: (value: number | [number, number]) => void;
 }
 export interface ITextFieldProps {
@@ -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?: {
@@ -291,12 +305,14 @@ export interface IJoystickProps {
         name?: string;
         class?: string;
     };
+    axesName?: [string, string, string?];
     value?: number[];
     limits?: {
         minNum: number;
         maxNum: number;
     }[];
     onUpdate?: (value: number[]) => void;
+    onClick?: (value: number[]) => void;
 }
 export interface IDeviceGNSS {
     NavLat: number;

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.28",
+  "version": "1.2.30",
   "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"