poe-svelte-ui-lib 1.2.24 → 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/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
   }>()
 
@@ -229,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;

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.24",
+  "version": "1.2.25",
   "license": "MIT",
   "type": "module",
   "scripts": {