poe-svelte-ui-lib 1.2.23 → 1.2.25

package/dist/Accordion/AccordionProps.svelte

@@ -15,7 +15,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<IAccordionProps> }
-    onPropertyChange: (value: string | object, name?: string) => void
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
     forConstructor?: boolean
   }>()
 
@@ -48,6 +48,13 @@
 {#if forConstructor}
   <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.icon.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/Accordion/AccordionProps.svelte.d.ts

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

package/dist/Button/ButtonProps.svelte

@@ -12,7 +12,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<IButtonProps> }
-    onPropertyChange: (value: string | object, name?: string) => void
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
     forConstructor?: boolean
   }>()
 

package/dist/Button/ButtonProps.svelte.d.ts

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

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -12,7 +12,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<IColorPickerProps> }
-    onPropertyChange: (value: string | object, name?: string) => void
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
     forConstructor?: boolean
   }>()
 

package/dist/ColorPicker/ColorPickerProps.svelte.d.ts

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

package/dist/FileAttach/FileAttachProps.svelte

@@ -12,7 +12,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<IFileInputProps> }
-    onPropertyChange: (value: string | object, name?: string) => void
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
     forConstructor?: boolean
   }>()
 </script>

package/dist/FileAttach/FileAttachProps.svelte.d.ts

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

package/dist/Graph/GraphProps.svelte

@@ -10,7 +10,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<IGraphProps> }
-    onPropertyChange: (value: string | object, name?: string) => void
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
     forConstructor?: boolean
   }>()
 

package/dist/Graph/GraphProps.svelte.d.ts

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

package/dist/Input/InputProps.svelte

@@ -12,7 +12,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<IInputProps> }
-    onPropertyChange: (value: string | object, name?: string) => void
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
     forConstructor?: boolean
   }>()
 

package/dist/Input/InputProps.svelte.d.ts

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

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -12,7 +12,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<IProgressBarProps> }
-    onPropertyChange: (value: string | object, name?: string) => void
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
     forConstructor?: boolean
   }>()
 

package/dist/ProgressBar/ProgressBarProps.svelte.d.ts

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

package/dist/Select/Select.svelte

@@ -21,6 +21,7 @@
     type = 'select',
     value = $bindable(),
     bitMode = false,
+    range = { start: 0, end: 31 },
     options = [],
     onUpdate,
   }: ISelectProps<T> = $props()

package/dist/Select/SelectProps.svelte

@@ -14,7 +14,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<ISelectProps> }
-    onPropertyChange: (value: string | object, name?: string) => void
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
     forConstructor?: boolean
   }>()
 
@@ -46,10 +46,8 @@
 
   let currentType = $derived($optionsStore.SELECT_TYPE_OPTIONS.find((t) => t.value === component.properties.type))
 
-  let range = $state({ start: 0, end: 0 })
-
-  const generateBitOptions = () => {
-    const bitsNeeded = range.end - range.start + 1
+  const generateBitOptions = (start: number, end: number) => {
+    const bitsNeeded = end - start + 1
     const count = Math.pow(2, bitsNeeded)
 
     const options: ISelectOption<number>[] = []
@@ -59,7 +57,7 @@
 
       options.push({
         id: crypto.randomUUID(),
-        value: parseInt(binary, 2) << range.start,
+        value: parseInt(binary, 2) << start,
         name: binary,
         class: 'bg-max',
       })
@@ -136,10 +134,10 @@
         <div class="flex w-full gap-4">
           <UI.Input
             label={{ name: $t('constructor.props.range.start') }}
-            value={range.start}
+            value={component.properties.range.start}
             onUpdate={(value) => {
-              range.start = value as number
-              generateBitOptions()
+              updateProperty('range.start', value as number, component, onPropertyChange)
+              generateBitOptions(component.properties.range.start, component.properties.range.end)
             }}
             number={{ minNum: 0, maxNum: 31, step: 1 }}
             help={{ info: $t('constructor.props.range.start.help') }}
@@ -147,10 +145,10 @@
           />
           <UI.Input
             label={{ name: $t('constructor.props.range.end') }}
-            value={range.end}
+            value={component.properties.range.end}
             onUpdate={(value) => {
-              range.end = value as number
-              generateBitOptions()
+              updateProperty('range.end', value as number, component, onPropertyChange)
+              generateBitOptions(component.properties.range.start, component.properties.range.end)
             }}
             number={{ minNum: 0, maxNum: 31, step: 1 }}
             help={{ info: $t('constructor.props.range.end.help') }}
@@ -187,7 +185,7 @@
             else option.value = option.value !== undefined ? String(option.value) : ''
           })
           updateProperty('options', options, component, onPropertyChange)
-          if (value) generateBitOptions()
+          if (value) generateBitOptions(component.properties.range.start, component.properties.range.end)
         }}
       />
     </div>
@@ -231,6 +229,7 @@
           label={{ name: $t('constructor.props.optionvalue') }}
           wrapperClass="!w-3/10"
           value={option.value}
+          readonly={component.properties.bitMode}
           type={currentValueType.value}
           onUpdate={(value) => {
             const options = [...(component.properties?.options || [])]

package/dist/Select/SelectProps.svelte.d.ts

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

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
   }>()
 

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')
@@ -133,7 +133,7 @@
           onClick={() => {
             const newOption: ISelectOption = {
               id: crypto.randomUUID(),
-              name: ``,
+              name: component.properties?.options.length,
               value: component.properties?.options.length,
               class: 'bg-blue',
             }
@@ -149,6 +149,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

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/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
   }>()
 

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, {}, "">;

package/dist/Tabs/TabsProps.svelte

@@ -17,7 +17,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<ITabsProps> }
-    onPropertyChange: (value: string | object, name?: string) => void
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
     forConstructor?: boolean
   }>()
 

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

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

package/dist/TextField/TextFieldProps.svelte

@@ -12,7 +12,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<ITextFieldProps> }
-    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')

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

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

package/dist/types.d.ts

@@ -3,10 +3,11 @@ 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) => void, name?: string) => void;
+}, onPropertyChange: (value?: string | object, name?: string, access?: string) => void) => void;
 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';
     properties: IAccordionProps | IButtonProps | IInputProps | ISelectProps | ISwitchProps | IColorPickerProps | ISliderProps | ITextFieldProps | IProgressBarProps | IGraphProps | ITableProps<object> | ITabsProps | IFileInputProps | IJoystickProps;
     position: Position;
@@ -107,6 +108,10 @@ export interface ISelectProps<T = unknown> {
     value?: ISelectOption<T> | null;
     options?: ISelectOption<T>[];
     bitMode?: boolean;
+    range?: {
+        start: number;
+        end: number;
+    };
     eventHandler?: IUIComponentHandler;
     onUpdate?: (value: ISelectOption<T>) => void;
 }

package/dist/types.js

@@ -1,4 +1,4 @@
-export const updateProperty = (path, value, component, onPropertyChange, name) => {
+export const updateProperty = (path, value, component, onPropertyChange) => {
     const newProperties = JSON.parse(JSON.stringify(component.properties));
     const parts = path.split('.');
     let obj = newProperties;
@@ -9,5 +9,5 @@ export const updateProperty = (path, value, component, onPropertyChange, name) =
         obj = obj[part];
     }
     obj[parts[parts.length - 1]] = value;
-    onPropertyChange(newProperties, name);
+    onPropertyChange(newProperties);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.2.23",
+  "version": "1.2.25",
   "license": "MIT",
   "type": "module",
   "scripts": {