poe-svelte-ui-lib 1.2.24 → 1.2.26

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
   }>()
 
@@ -46,8 +46,15 @@
 </script>
 
 {#if forConstructor}
-  <div class="flex items-center justify-center gap-8">
+  <div class="flex items-start justify-center gap-8">
     <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.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}
@@ -130,13 +137,20 @@
     </div>
   </div>
 {:else}
-  <div class="flex items-center justify-center gap-8">
+  <div class="flex items-start justify-center gap-8">
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Input
         label={{ name: $t('constructor.props.id') }}
         value={component.properties.id}
         onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.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.Select
         label={{ name: $t('constructor.props.type') }}
         type="buttons"
@@ -168,7 +182,7 @@
         onChange={(value) => updateProperty('isOpen', value, component, onPropertyChange)}
       />
     </div>
-    <div class="flex w-1/3 flex-col items-center px-2">
+    <div class="flex w-1/3 flex-col px-2">
       <UI.Input
         label={{ name: $t('constructor.props.wrapperclass') }}
         value={component.properties.wrapperClass}

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
   }>()
 
@@ -76,7 +76,8 @@
         help={{ info: $t('constructor.props.argument.info'), autocomplete: 'on', regExp: /^[a-zA-Z0-9\-_]{0,32}$/ }}
         onUpdate={(value) => updateProperty('eventHandler.Argument', value as string, component, onPropertyChange)}
       />
-
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
       {#if (component.properties.eventHandler.Argument !== 'Save' && component.properties.eventHandler.Argument !== 'NoSave') || Header.value === 'SET'}
         <UI.Input
           label={{ name: $t('constructor.props.value') }}
@@ -97,15 +98,15 @@
           updateProperty('eventHandler.Variables', parts, component, onPropertyChange)
         }}
       />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
       <UI.Select
-        label={{ name: $t('constructor.props.icon.access') }}
+        label={{ name: $t('constructor.props.access') }}
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
-        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.properties.access)}
-        onUpdate={(option) => updateProperty('acces', option.value as string, component, onPropertyChange)}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
       />
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Input
         label={{ name: $t('constructor.props.name') }}
         value={component.properties.content.name}
@@ -139,6 +140,13 @@
         value={component.properties.id}
         onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.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.wrapperclass') }}
         value={component.properties.wrapperClass}

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
   }>()
 
@@ -35,8 +35,9 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('—')[1].trim())
+          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)
         }}
       />
       <UI.Select
@@ -51,11 +52,11 @@
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Select
-        label={{ name: $t('constructor.props.icon.access') }}
+        label={{ name: $t('constructor.props.access') }}
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
-        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.properties.access)}
-        onUpdate={(option) => updateProperty('acces', option.value as string, component, onPropertyChange)}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
@@ -82,10 +83,12 @@
         value={component.properties.id}
         onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
       />
-      <UI.Input
-        label={{ name: $t('constructor.props.wrapperclass') }}
-        value={component.properties.wrapperClass}
-        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
@@ -101,6 +104,11 @@
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      />
       <UI.TextField content={{ name: $t('constructor.props.defaultcolor'), class: 'font-bold' }} />
       <div class="flex items-center gap-3">
         <UI.TextField wrapperClass="w-4" content={{ name: 'R', class: 'font-bold' }} />

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/FileAttach.svelte

@@ -25,6 +25,7 @@
     onChange = () => {},
   }: IFileInputProps = $props()
 
+  let ID = `${id}-${crypto.randomUUID().slice(0, 6)}`
   let selectedFile = $state<File | null>(null)
   let previewUrl = $derived(currentImage ? (currentImage.startsWith('data:') ? currentImage : `data:image/png;base64,${currentImage}`) : null)
 
@@ -44,7 +45,7 @@
   }
 
   const triggerFileInput = () => {
-    const input = document.getElementById(id)
+    const input = document.getElementById(ID)
     input?.click()
   }
 </script>
@@ -77,19 +78,12 @@
           <span class="text-sm text-gray-500">Image</span>
         {/if}
       </button>
-      <input
-        id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
-        type="file"
-        class="absolute -z-10 h-0 w-0 overflow-hidden opacity-0"
-        {accept}
-        {disabled}
-        onchange={handleFileChange}
-      />
+      <input id={ID} type="file" class="absolute -z-10 h-0 w-0 overflow-hidden opacity-0" {accept} {disabled} onchange={handleFileChange} />
     </div>
   {:else}
     <label class="relative inline-block w-full">
       <input
-        id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
+        id={ID}
         type="file"
         class={`h-8.5 w-full rounded-2xl bg-(--back-color) font-semibold shadow-sm transition duration-250 hover:shadow-md
           ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} invalid:shadow-[0_0_6px(--red-color) file:h-full file:w-1/3 

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
   }>()
 
@@ -27,8 +27,9 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('—')[1].trim())
+          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)
         }}
       />
     </div>

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
   }>()
 
@@ -101,11 +101,11 @@
         }}
       />
       <UI.Select
-        label={{ name: $t('constructor.props.icon.access') }}
+        label={{ name: $t('constructor.props.access') }}
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
-        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.properties.access)}
-        onUpdate={(option) => updateProperty('acces', option.value as string)}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
       />
       <UI.Select
         label={{ name: $t('constructor.props.type') }}
@@ -247,6 +247,13 @@
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.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.value') }}
         value={component.properties.value}

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/Joystick/Joystick.svelte

@@ -305,7 +305,7 @@
     </div>
   </div>
 
-  <div class="absolute right-10 flex items-center">
+  <div class="right-10 flex items-center md:absolute">
     <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="flex h-full flex-col justify-center rounded-full p-10">
       {#each sensitivityOptions as option, index}
         <button

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
   }>()
 
@@ -105,6 +105,13 @@
       />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.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.Select
         label={{ name: $t('constructor.props.type') }}
         type="buttons"
@@ -131,30 +138,17 @@
         }}
       />
       {#if component.properties.bitMode}
-        <div class="flex w-full gap-4">
-          <UI.Input
-            label={{ name: $t('constructor.props.range.start') }}
-            value={component.properties.range.start}
-            onUpdate={(value) => {
-              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') }}
-            type="number"
-          />
-          <UI.Input
-            label={{ name: $t('constructor.props.range.end') }}
-            value={component.properties.range.end}
-            onUpdate={(value) => {
-              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') }}
-            type="number"
-          />
-        </div>
+        <UI.Slider
+          label={{ name: $t('constructor.props.range') }}
+          type="range"
+          number={{ minNum: 0, maxNum: 31, step: 1 }}
+          value={[component.properties.range.start, component.properties.range.end]}
+          onUpdate={(value) => {
+            updateProperty('range.start', value[0] as [number, number], component, onPropertyChange)
+            updateProperty('range.end', value as number[][1] as number, component, onPropertyChange)
+            generateBitOptions(component.properties.range.start, component.properties.range.end)
+          }}
+        />
       {/if}
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
@@ -229,6 +223,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 || [])]
@@ -270,6 +265,13 @@
         value={component.properties.id}
         onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.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.wrapperclass') }}
         value={component.properties.wrapperClass}

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