poe-svelte-ui-lib 1.1.13 → 1.1.15

package/dist/Accordion/AccordionProps.svelte

@@ -116,14 +116,16 @@
           bind:currentImage
           onChange={handleImageUpload}
         />
-        <Button
-          wrapperClass="w-8.5 mt-6"
-          componentClass="p-0.5 bg-red"
-          content={{ icon: CrossIcon }}
-          onClick={() => {
-            updateProperty('image', '', component, onPropertyChange)
-          }}
-        />
+        {#if currentImage}
+          <Button
+            wrapperClass="w-8.5 mt-6"
+            componentClass="p-0.5 bg-red"
+            content={{ icon: CrossIcon }}
+            onClick={() => {
+              updateProperty('image', '', component, onPropertyChange)
+            }}
+          />
+        {/if}
       </div>
     </div>
   </div>
@@ -166,6 +168,11 @@
       />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      />
       <div class="relative mt-5 flex w-full gap-2">
         <UI.Button content={{ name: 'Иконка заголовка' }} onClick={() => (showIconLib = true)} />
         {#if showIconLib}
@@ -203,11 +210,7 @@
           />
         {/if}
       </div>
-      <UI.Input
-        label={{ name: $t('constructor.props.wrapperclass') }}
-        value={component.properties.wrapperClass}
-        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
-      />
+
       <UI.Input
         label={{ name: $t('constructor.props.label') }}
         value={component.properties.label.name}
@@ -228,14 +231,16 @@
           bind:currentImage
           onChange={handleImageUpload}
         />
-        <Button
-          wrapperClass="w-8.5 mt-6"
-          componentClass="p-0.5 bg-red"
-          content={{ icon: CrossIcon }}
-          onClick={() => {
-            updateProperty('image', '', component, onPropertyChange)
-          }}
-        />
+        {#if currentImage}
+          <Button
+            wrapperClass="w-8.5 mt-6"
+            componentClass="p-0.5 bg-red"
+            content={{ icon: CrossIcon }}
+            onClick={() => {
+              updateProperty('image', '', component, onPropertyChange)
+            }}
+          />
+        {/if}
       </div>
     </div>
   </div>

package/dist/Button/ButtonProps.svelte

@@ -65,16 +65,18 @@
             updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
           }}
         />
-
-        <UI.Input
-          wrapperClass="{Header.value === 'SET' ? 'mt-1' : ''} "
-          value={component.properties.eventHandler.Argument}
-          maxlength={32}
-          disabled={component.properties.eventHandler.Argument == 'Save' || component.properties.eventHandler.Argument == 'NoSave'}
-          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)}
-        />
       {/if}
+      <UI.Input
+        label={{ name: Header.value !== 'SET' ? $t('constructor.props.argument') : '' }}
+        wrapperClass="{Header.value === 'SET' ? 'mt-1' : ''} "
+        value={component.properties.eventHandler.Argument}
+        maxlength={32}
+        disabled={Header.value === 'SET' &&
+          (component.properties.eventHandler.Argument == 'Save' || component.properties.eventHandler.Argument == 'NoSave')}
+        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)}
+      />
+
       {#if (component.properties.eventHandler.Argument !== 'Save' && component.properties.eventHandler.Argument !== 'NoSave') || Header.value !== 'SET'}
         <UI.Input
           label={{ name: $t('constructor.props.value') }}

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -93,16 +93,32 @@
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.TextField content={{ name: $t('constructor.props.defaultcolor'), class: 'font-bold' }} />
-      <UI.Input
-        label={{ name: $t('constructor.props.label') }}
-        value={component.properties.label.name}
-        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
-      />
-      <UI.Input
-        label={{ name: $t('constructor.props.label.class') }}
-        value={component.properties.label.class}
-        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
-      />
+      <div class="flex items-center gap-3">
+        <UI.TextField wrapperClass="w-4" content={{ name: 'R', class: 'font-bold' }} />
+        <UI.Input
+          value={component.properties.value[0]}
+          type="number"
+          number={{ minNum: 0, maxNum: 255, step: 1 }}
+          onUpdate={(value) =>
+            updateProperty('value', [value as number, component.properties.value[1], component.properties.value[2]], component, onPropertyChange)}
+        />
+        <UI.TextField wrapperClass="w-4" content={{ name: 'G', class: 'font-bold' }} />
+        <UI.Input
+          value={component.properties.value[1]}
+          type="number"
+          number={{ minNum: 0, maxNum: 255, step: 1 }}
+          onUpdate={(value) =>
+            updateProperty('value', [component.properties.value[0], value as number, component.properties.value[2]], component, onPropertyChange)}
+        />
+        <UI.TextField wrapperClass="w-4" content={{ name: 'B', class: 'font-bold' }} />
+        <UI.Input
+          value={component.properties.value[2]}
+          type="number"
+          number={{ minNum: 0, maxNum: 255, step: 1 }}
+          onUpdate={(value) =>
+            updateProperty('value', [component.properties.value[0], component.properties.value[1], value as number], component, onPropertyChange)}
+        />
+      </div>
     </div>
   </div>
 {/if}

package/dist/ComponentExample.svelte

@@ -2,6 +2,7 @@
   import * as UI from './'
   import type { Snippet } from 'svelte'
   import CopyButton from './libIcons/CopyButton.svelte'
+  import { fade, fly, slide } from 'svelte/transition'
 
   let { component, componentProps, codeText }: { component: Snippet; componentProps: Snippet; codeText: string } = $props()
 
@@ -13,7 +14,7 @@
     {@render component()}
   </div>
   <div class=" border-t border-gray-500"></div>
-  <div class="h-fit">
+  <div class="h-fit" transition:fade={{ duration: 200 }}>
     {@render componentProps()}
     <div class="relative mt-3">
       <UI.Button

package/dist/{FileAttach.svelte → FileAttach/FileAttach.svelte}

@@ -21,7 +21,7 @@
     accept = '*/*',
     imageSize = { height: '10rem', width: '10rem', fitMode: 'cover', form: 'square' },
     disabled = false,
-    currentImage = $bindable(null),
+    currentImage = $bindable(''),
     onChange = () => {},
   }: IFileInputProps = $props()
 
@@ -41,6 +41,7 @@
     if (file.type.startsWith('image/')) previewUrl = URL.createObjectURL(file)
 
     onChange(event, file)
+    // console.log('!!! curr:', currentImage, 'prev:', previewUrl)
   }
 
   const triggerFileInput = () => {

package/dist/FileAttach/FileAttachProps.svelte

@@ -0,0 +1,91 @@
+<!-- $lib/ElementsUI/ButtonProps.svelte -->
+<script lang="ts">
+  import { t } from '../locales/i18n'
+  import { type UIComponent, updateProperty } from '../types'
+  import * as UI from '..'
+  import { optionsStore } from '../options'
+  import type { IFileInputProps } from './FileAttach.svelte'
+
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
+    component: UIComponent & { properties: Partial<IFileInputProps> }
+    onPropertyChange: (value: string | object, name?: string) => void
+    forConstructor?: boolean
+  }>()
+</script>
+
+{#if !forConstructor}
+  <div class="relative flex flex-row items-start justify-center">
+    <!-- Сообщение для отправки в ws по нажатию кнопки -->
+    <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.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label.class') }}
+        value={component.properties.label.class}
+        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.file.accept') }}
+        value={component.properties.accept}
+        onUpdate={(value) => updateProperty('accept', value as string, component, onPropertyChange)}
+      />
+      <UI.Select
+        label={{ name: $t('constructor.props.type') }}
+        type="buttons"
+        value={$optionsStore.FILE_ATTACH_TYPE_OPTIONS.find((c) => (c.value as string).includes(component.properties.type))}
+        options={$optionsStore.FILE_ATTACH_TYPE_OPTIONS}
+        onUpdate={(option) => updateProperty('type', option.value as string, component, onPropertyChange)}
+      />
+
+      {#if component.properties.type === 'image'}
+        <div class="flex gap-4">
+          <UI.Input
+            label={{ name: $t('constructor.props.imageSize.height') }}
+            value={component.properties.imageSize.height}
+            onUpdate={(value) => updateProperty('imageSize.height', value as string, component, onPropertyChange)}
+          />
+          <UI.Input
+            label={{ name: $t('constructor.props.imageSize.width') }}
+            value={component.properties.imageSize.width}
+            onUpdate={(value) => updateProperty('imageSize.width', value as string, component, onPropertyChange)}
+          />
+        </div>
+        <div class="flex gap-4">
+          <UI.Select
+            label={{ name: $t('constructor.props.fitmode') }}
+            type="buttons"
+            value={$optionsStore.FITMODE_OPTIONS.find((c) => (c.value as string).includes(component.properties.imageSize.fitMode))}
+            options={$optionsStore.FITMODE_OPTIONS}
+            onUpdate={(option) => updateProperty('imageSize.fitMode', option.value as string, component, onPropertyChange)}
+          />
+          <UI.Select
+            label={{ name: $t('constructor.props.form') }}
+            type="buttons"
+            value={$optionsStore.FORM_OPTIONS.find((c) => (c.value as string).includes(component.properties.imageSize.form))}
+            options={$optionsStore.FORM_OPTIONS}
+            onUpdate={(option) => updateProperty('imageSize.form', option.value as string, component, onPropertyChange)}
+          />
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,12 @@
+import { type UIComponent } from '../types';
+import type { IFileInputProps } from './FileAttach.svelte';
+type $$ComponentProps = {
+    component: UIComponent & {
+        properties: Partial<IFileInputProps>;
+    };
+    onPropertyChange: (value: string | object, name?: string) => void;
+    forConstructor?: boolean;
+};
+declare const FileAttachProps: import("svelte").Component<$$ComponentProps, {}, "">;
+type FileAttachProps = ReturnType<typeof FileAttachProps>;
+export default FileAttachProps;

package/dist/Graph/GraphProps.svelte

@@ -3,6 +3,8 @@
   import { t } from '../locales/i18n'
   import { type UIComponent, type IGraphProps, updateProperty } from '../types'
   import * as UI from '..'
+  import ButtonAdd from '../libIcons/ButtonAdd.svelte'
+  import ButtonDelete from '../libIcons/ButtonDelete.svelte'
 
   const {
     component,
@@ -14,11 +16,13 @@
     forConstructor?: boolean
   }>()
 
+  console.log(component.properties.streamingData)
+
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 </script>
 
-{#if component && component.properties}
+{#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
     <!-- Сообщение для отправки в ws по нажатию кнопки -->
     <div class="flex w-1/3 flex-col items-center px-2">
@@ -35,4 +39,83 @@
     <div class="flex w-1/3 flex-col px-2"></div>
     <div class="flex w-1/3 flex-col px-2"></div>
   </div>
+{:else}
+  <div class="relative mb-2 flex flex-row items-start justify-center">
+    <!-- Сообщение для отправки в ws по нажатию кнопки -->
+    <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.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label.class') }}
+        value={component.properties.label.class}
+        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
+      />
+    </div>
+
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Switch
+        wrapperClass="bg-blue"
+        label={{ name: $t('constructor.props.istest') }}
+        value={component.properties.isTest ? 2 : 1}
+        onChange={(value) => updateProperty('isTest', value === 2, component, onPropertyChange)}
+      />
+    </div>
+  </div>
+  <!-- <hr class="border-gray-400" />
+  <div class="space-y-4">
+    <div class="m-0 flex items-center justify-center gap-2">
+      <h4>{$t('constructor.props.graphdata.title')}</h4>
+      <UI.Button wrapperClass="w-8" content={{ icon: ButtonAdd }} />
+    </div>
+
+    {#each component.properties.streamingData.data || [] as option, index (option.name)}
+      <div class="m-0 flex items-end justify-around gap-2 border-gray-400">
+        <UI.Input
+          label={{ name: $t('constructor.props.optionname') }}
+          wrapperClass="!w-3/10"
+          value={option.name}
+          onUpdate={(value) => {
+            const options = [...(component.properties?.streamingData.data || [])]
+            options[index]['name'] = value as string
+            updateProperty('streamingData.data', options, component, onPropertyChange)
+          }}
+        />
+        <UI.Input
+          label={{ name: $t('constructor.props.optionvalue') }}
+          wrapperClass="!w-3/10"
+          type="number"
+          value={option.value}
+          onUpdate={(value) => {
+            const options = [...(component.properties?.streamingData.data || [])]
+            options[index]['value'] = value as number
+            updateProperty('streamingData.data', options, component, onPropertyChange)
+          }}
+        />
+        <UI.Button
+          wrapperClass="w-8"
+          content={{ icon: ButtonDelete }}
+          onClick={() => {
+            const options = [...(component.properties?.streamingData.data || [])]
+            options.splice(index, 1)
+            updateProperty('streamingData.data', options, component, onPropertyChange)
+          }}
+        />
+      </div>
+    {/each}
+  </div> -->
 {/if}

package/dist/Modal.svelte

@@ -34,7 +34,7 @@
 </script>
 
 {#if isOpen}
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" transition:fade={{ duration: 200 }}>
+  <div class="fixed inset-0 z-60 flex items-center justify-center bg-black/50" transition:fade={{ duration: 200 }}>
     <div
       class={twMerge(`flex w-300 flex-col overflow-hidden rounded-2xl bg-[var(--back-color)] text-center`, wrapperClass)}
       transition:scale={{ duration: 250, start: 0.8 }}

package/dist/Table/Table.svelte

@@ -4,8 +4,6 @@
   import type { ITableHeader, ITableProps } from '../types'
   import { fly } from 'svelte/transition'
   import { twMerge } from 'tailwind-merge'
-  import { Button, Modal } from '..'
-  import { t } from '../locales/i18n'
 
   let {
     id = crypto.randomUUID(),
@@ -17,11 +15,10 @@
     cursor = null,
     loader,
     getData = () => {},
+    modalData = $bindable(),
     onClick,
   }: ITableProps<any> = $props()
 
-  let modalData = $state({ isOpen: false, rawData: '', formattedData: '' })
-
   /* Сортировка */
   let sortState: {
     key: string | null
@@ -100,6 +97,7 @@
       rawData: text,
       formattedData: formatting ? formatting(text) : (text ?? ''),
     }
+    // console.log(modalData)
   }
 
   const showTooltip = (event: MouseEvent, text: string, formatting?: (text: string) => string) => {
@@ -274,19 +272,3 @@
     {/if}
   </div>
 </div>
-
-<Modal isOpen={modalData.isOpen} title={$t('debug.baud_rate_data')}>
-  {#snippet main()}
-    {@html modalData.formattedData}
-  {/snippet}
-  {#snippet footer()}
-    <Button
-      content={{ name: 'Copy' }}
-      wrapperClass="w-20 bg-pink"
-      onClick={() => {
-        navigator.clipboard.writeText(modalData.rawData)
-        modalData.isOpen = false
-      }}
-    />
-  {/snippet}
-</Modal>

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

@@ -1,4 +1,4 @@
 import type { ITableProps } from '../types';
-declare const Table: import("svelte").Component<ITableProps<any>, {}, "">;
+declare const Table: import("svelte").Component<ITableProps<any>, {}, "modalData">;
 type Table = ReturnType<typeof Table>;
 export default Table;

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { default as Button } from './Button/Button.svelte';
 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.svelte';
+export { default as FileAttach } from './FileAttach/FileAttach.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

@@ -5,7 +5,7 @@ export { default as Button } from './Button/Button.svelte';
 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.svelte';
+export { default as FileAttach } from './FileAttach/FileAttach.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

@@ -31,6 +31,12 @@ const translations = {
         'constructor.props.type.selectput': 'Список+ввод',
         'constructor.props.valuetype.text': 'Строка',
         'constructor.props.valuetype.number': 'Число',
+        'constructor.props.type.file': 'Файл',
+        'constructor.props.type.image': 'Изображение',
+        'constructor.props.type.cover': 'Урезанный',
+        'constructor.props.type.contain': 'Полный',
+        'constructor.props.type.square': 'Квадрат',
+        'constructor.props.type.circle': 'Круг',
         /* Общие для редактора свойств */
         'constructor.props.id': 'Идентификатор',
         'constructor.props.label': 'Текст надписи',
@@ -40,6 +46,11 @@ const translations = {
         'constructor.props.svgicon': 'SVG-иконка (строка)',
         'constructor.props.open': 'Разворачивание',
         'constructor.props.defaultcolor': 'Первоначальный цвет',
+        'constructor.props.file.accept': 'Допустимые файлы',
+        'constructor.props.imageSize.height': 'Высота',
+        'constructor.props.imageSize.width': 'Ширина',
+        'constructor.props.fitmode': 'Вид',
+        'constructor.props.form': 'Форма',
         'constructor.props.type': 'Тип',
         'constructor.props.size': 'Размер',
         'constructor.props.header': 'Заголовок пакета',
@@ -68,8 +79,10 @@ const translations = {
         'constructor.props.info': 'Подсказка',
         'constructor.props.disabled': 'Отключить',
         'constructor.props.readonly': 'Только для чтения',
+        'constructor.props.istest': 'Тестовые данные',
         'constructor.props.variable': 'Имя переменной',
         'constructor.props.widthMode': 'Ширина кнопок',
+        'constructor.props.graphdata.title': 'Начальные данные',
         'constructor.props.options.title': 'Опции компонента',
         'constructor.props.valuetype': 'Тип значения',
         'constructor.props.action': 'Действие при переключении',

package/dist/options.d.ts

@@ -70,4 +70,19 @@ export declare const optionsStore: import("svelte/store").Readable<{
         value: boolean;
         name: string;
     }[];
+    FILE_ATTACH_TYPE_OPTIONS: {
+        id: string;
+        value: string;
+        name: string;
+    }[];
+    FITMODE_OPTIONS: {
+        id: string;
+        value: string;
+        name: string;
+    }[];
+    FORM_OPTIONS: {
+        id: string;
+        value: string;
+        name: string;
+    }[];
 }>;

package/dist/options.js

@@ -80,5 +80,17 @@ export const optionsStore = derived(t, ($t) => {
             { id: id(), value: false, name: $t('constructor.props.type.main') },
             { id: id(), value: true, name: $t('constructor.props.type.sub') },
         ],
+        FILE_ATTACH_TYPE_OPTIONS: [
+            { id: id(), value: 'file', name: $t('constructor.props.type.file') },
+            { id: id(), value: 'image', name: $t('constructor.props.type.image') },
+        ],
+        FITMODE_OPTIONS: [
+            { id: id(), value: 'cover', name: $t('constructor.props.type.cover') },
+            { id: id(), value: 'contain', name: $t('constructor.props.type.contain') },
+        ],
+        FORM_OPTIONS: [
+            { id: id(), value: 'square', name: $t('constructor.props.type.square') },
+            { id: id(), value: 'circle', name: $t('constructor.props.type.circle') },
+        ],
     };
 });

package/dist/types.d.ts

@@ -1,14 +1,15 @@
 import type { Component, 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) => void, name?: string) => void;
 export interface UIComponent {
     id: string;
     name?: string;
-    type: 'Button' | 'Accordion' | 'Input' | 'Select' | 'Switch' | 'ColorPicker' | 'Slider' | 'TextField' | 'ProgressBar' | 'Graph' | 'Table';
-    component: Component<IButtonProps> | Component<IInputProps> | Component<ISelectProps> | Component<ISwitchProps> | Component<IColorPickerProps> | Component<ISliderProps> | Component<ITextFieldProps> | Component<IProgressBarProps> | Component<IGraphProps> | Component<ITableProps<object>> | null;
-    properties: IAccordionProps | IButtonProps | IInputProps | ISelectProps | ISwitchProps | IColorPickerProps | ISliderProps | ITextFieldProps | IProgressBarProps | IGraphProps | ITableProps<object>;
+    type: 'Button' | 'Accordion' | 'Input' | 'Select' | 'Switch' | 'ColorPicker' | 'Slider' | 'TextField' | 'ProgressBar' | 'Graph' | 'Table' | 'FileAttach';
+    component: Component<IButtonProps> | Component<IInputProps> | Component<ISelectProps> | Component<ISwitchProps> | Component<IColorPickerProps> | Component<ISliderProps> | Component<ITextFieldProps> | Component<IProgressBarProps> | Component<IGraphProps> | Component<ITableProps<object>> | Component<IFileInputProps> | null;
+    properties: IAccordionProps | IButtonProps | IInputProps | ISelectProps | ISwitchProps | IColorPickerProps | ISliderProps | ITextFieldProps | IProgressBarProps | IGraphProps | ITableProps<object> | IFileInputProps;
     position: Position;
     parentId: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -33,24 +33,24 @@
   },
   "dependencies": {
     "@sveltejs/adapter-static": "^3.0.10",
-    "@tailwindcss/vite": "^4.1.14",
+    "@tailwindcss/vite": "^4.1.15",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
-    "prettier-plugin-tailwindcss": "^0.7.0",
+    "prettier-plugin-tailwindcss": "^0.7.1",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.14",
+    "tailwindcss": "^4.1.15",
     "tsx": "^4.20.6",
     "typescript": "^5.9.3"
   },
   "devDependencies": {
-    "@sveltejs/kit": "^2.47.0",
+    "@sveltejs/kit": "^2.47.2",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@types/node": "^24.8.1",
-    "publint": "^0.3.14",
-    "svelte": "^5.40.2",
+    "@types/node": "^24.9.1",
+    "publint": "^0.3.15",
+    "svelte": "^5.41.1",
     "svelte-preprocess": "^6.0.3",
-    "vite": "^7.1.10",
+    "vite": "^7.1.11",
     "vite-plugin-compression": "^0.5.1"
   }
 }