poe-svelte-ui-lib 1.1.15 → 1.1.17

package/dist/Table/TableProps.svelte

@@ -28,7 +28,7 @@
   )
 
   const initialAlign = $derived(
-    $optionsStore.ALIGN_OPTIONS.find((a) =>
+    $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
       (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
     ),
   )
@@ -51,6 +51,19 @@
     updateProperty('body', newBody, component, onPropertyChange)
   }
 
+  const handleImageUpload = (columnIndex: number, event: Event) => {
+    const target = event.target as HTMLInputElement
+    const file = target.files?.[0]
+    if (!file) return
+
+    const reader = new FileReader()
+    reader.onload = () => {
+      const base64WithPrefix = reader.result as string
+      updateTableHeader(columnIndex, 'image', { ['src']: base64WithPrefix })
+    }
+    reader.readAsDataURL(file)
+  }
+
   const updateButtonProperty = (columnIndex: number, buttonIndex: number, field: string, value: any) => {
     const headers = [...component.properties.header]
     const buttons = [...headers[columnIndex].buttons]
@@ -68,17 +81,19 @@
   }
 </script>
 
-{#if component && component.properties}
+{#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
-    <UI.Select
-      label={{ name: $t('constructor.props.variable') }}
-      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('eventHandler.Variables', value.value as string, component, onPropertyChange)
-      }}
-    />
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.variable') }}
+        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('eventHandler.Variables', value.value as string, component, onPropertyChange)
+        }}
+      />
+    </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Select
         wrapperClass="!h-14"
@@ -99,13 +114,13 @@
         label={{ name: $t('constructor.props.align') }}
         type="buttons"
         value={initialAlign}
-        options={$optionsStore.ALIGN_OPTIONS}
+        options={$optionsStore.TEXT_ALIGN_OPTIONS}
         onUpdate={(option) => updateProperty('label.class', twMerge(component.properties.label.class, option.value), component, onPropertyChange)}
       />
     </div>
   </div>
 
-  <hr class="border-[var(--border-color)]" />
+  <hr class="border-(--border-color)" />
 
   <!-- Настройки столбцов таблицы -->
   <div>
@@ -158,6 +173,12 @@
           value={column.sortable ? 2 : 1}
           onChange={(value) => updateTableHeader(columnIndex, 'sortable', value === 2)}
         />
+        <UI.Switch
+          wrapperClass="w-2/10"
+          label={{ name: $t('constructor.props.copy') }}
+          value={column.overflow?.copy ? 2 : 1}
+          onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value === 2 })}
+        />
         <UI.Button
           wrapperClass="w-8"
           content={{ icon: ButtonAdd, info: $t('constructor.props.table.addaction') }}
@@ -182,6 +203,236 @@
           }}
         />
       </div>
+      {#if column.buttons && column.buttons.length > 0}
+        <div class="mb-5 rounded-lg p-1">
+          {#each column.buttons as button, buttonIndex (buttonIndex)}
+            <div class="mx-14 flex items-end justify-around gap-2">
+              <UI.Input
+                label={{ name: $t('constructor.props.name') }}
+                wrapperClass="!w-3/10"
+                value={button.name}
+                onUpdate={(value) => updateButtonProperty(columnIndex, buttonIndex, 'name', value)}
+              />
+              <UI.Select
+                wrapperClass="!w-2/10"
+                label={{ name: $t('constructor.props.header') }}
+                type="buttons"
+                value={$optionsStore.HEADER_OPTIONS.find((h) => h.value === button.eventHandler?.Header)}
+                options={$optionsStore.HEADER_OPTIONS}
+                onUpdate={(option) => {
+                  const handler = button.eventHandler
+                  handler.Header = option.value as string
+                  updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
+                }}
+              />
+              <UI.Input
+                wrapperClass="!w-2/10"
+                label={{ name: $t('constructor.props.argument') }}
+                value={button.eventHandler?.Argument}
+                onUpdate={(value) => {
+                  const handler = button.eventHandler
+                  handler.Argument = value as string
+                  updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
+                }}
+              />
+              <UI.Input
+                wrapperClass="!w-2/10"
+                label={{ name: $t('constructor.props.table.keys') }}
+                value={button.eventHandler?.Variables.join(' ')}
+                maxlength={500}
+                help={{ info: $t('constructor.props.table.keys.info'), regExp: /^[a-zA-Z0-9\-_ ]{0,500}$/ }}
+                onUpdate={(value) => {
+                  const handler = { ...button.eventHandler }
+                  handler.Variables = (value as string).trim().split(/\s+/)
+                  updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
+                }}
+              />
+              <UI.Button wrapperClass="w-8" content={{ icon: ButtonDelete }} onClick={() => removeButtonFromColumn(columnIndex, buttonIndex)} />
+            </div>
+          {/each}
+        </div>
+      {/if}
+    {/each}
+  </div>
+{:else}
+  <div class="relative flex flex-row items-start justify-center">
+    <div class="flex w-1/3 flex-col 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.Select
+        wrapperClass=" h-14"
+        label={{ name: $t('constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.COLOR_OPTIONS}
+        value={initialColor}
+        onUpdate={(option) => {
+          updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)
+          const options = [...(component.properties?.options || [])]
+          options.forEach((o) => {
+            o['class'] = option.value
+          })
+          updateProperty('options', options, 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)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.footer') }}
+        value={component.properties.footer}
+        onUpdate={(value) => updateProperty('footer', value as string, component, onPropertyChange)}
+      />
+    </div>
+  </div>
+
+  <hr class="border-(--border-color)" />
+
+  <!-- Настройки столбцов таблицы -->
+  <div>
+    <div class=" flex items-center justify-center gap-2">
+      <h4>{$t('constructor.props.table.columns')}</h4>
+      <UI.Button
+        wrapperClass="w-8"
+        content={{ icon: ButtonAdd }}
+        onClick={() => {
+          const newColumn: ITableHeader<any> = {
+            key: `column${(component.properties.header?.length || 0) + 1}`,
+            label: { name: `Column ${(component.properties.header?.length || 0) + 1}`, class: '' },
+            width: '10%',
+            sortable: false,
+          }
+          const headers = [...(component.properties.header || []), newColumn]
+          updateProperty('header', headers, component, onPropertyChange)
+          updateTableBody()
+        }}
+      />
+    </div>
+
+    {#each component.properties.header as column, columnIndex (columnIndex)}
+      <div class="mb-5">
+        <div class="mr-2 flex items-end justify-around gap-6">
+          <UI.Input
+            label={{ name: $t('constructor.props.table.columns.key') }}
+            value={column.key}
+            help={{ regExp: /^[0-9a-zA-Z_-]{0,16}$/ }}
+            onUpdate={(value) => {
+              updateTableHeader(columnIndex, 'key', value)
+              updateTableBody()
+            }}
+          />
+          <UI.Input
+            label={{ name: $t('constructor.props.table.columns.label') }}
+            value={column.label.name}
+            onUpdate={(value) => {
+              updateTableHeader(columnIndex, 'label', { ['name']: value })
+            }}
+          />
+          <UI.Input
+            label={{ name: $t('constructor.props.table.columns.width') }}
+            type="number"
+            value={Number(column.width.replace('%', ''))}
+            onUpdate={(value) => updateTableHeader(columnIndex, 'width', `${value}%`)}
+          />
+          <UI.Switch
+            wrapperClass="w-2/10"
+            label={{ name: $t('constructor.props.table.columns.sortable') }}
+            value={column.sortable ? 2 : 1}
+            onChange={(value) => updateTableHeader(columnIndex, 'sortable', value === 2)}
+          />
+          <UI.Switch
+            wrapperClass="w-2/10"
+            label={{ name: $t('constructor.props.copy') }}
+            value={column.overflow?.copy ? 2 : 1}
+            onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value === 2 })}
+          />
+          <UI.Button
+            wrapperClass="w-8"
+            content={{ icon: ButtonAdd, info: $t('constructor.props.table.addaction') }}
+            onClick={() => {
+              const newButton = {
+                name: `button${(component.properties.header[columnIndex].buttons ? component.properties.header[columnIndex].buttons.length : 0) + 1}`,
+                class: 'bg-blue',
+                eventHandler: { Header: 'SET', Argument: 'Save', Variables: [] },
+                onClick: () => {},
+              }
+              const buttons = [...(component.properties.header[columnIndex].buttons || []), newButton]
+              updateTableHeader(columnIndex, 'buttons', buttons)
+            }}
+          />
+          <UI.Button
+            wrapperClass="w-8"
+            content={{ icon: ButtonDelete }}
+            onClick={() => {
+              const headers = [...(component.properties.header || [])]
+              headers.splice(columnIndex, 1)
+              updateProperty('header', headers, component, onPropertyChange)
+            }}
+          />
+        </div>
+        <div class="mr-2 flex items-end justify-around gap-6">
+          <UI.Select
+            label={{ name: $t('constructor.props.align') }}
+            type="buttons"
+            value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align) || 'left')}
+            options={$optionsStore.ALIGN_OPTIONS}
+            onUpdate={(option) => updateTableHeader(columnIndex, 'align', option.value)}
+          />
+          <UI.Switch
+            wrapperClass="w-2/10"
+            label={{ name: $t('constructor.props.table.columns.truncated') }}
+            value={column.overflow?.truncated ? 2 : 1}
+            onChange={(value) => updateTableHeader(columnIndex, 'overflow', { ['truncated']: value === 2 })}
+          />
+          <UI.Input
+            label={{ name: $t('constructor.props.table.columns.alt') }}
+            value={column.image?.alt}
+            onUpdate={(value) => {
+              updateTableHeader(columnIndex, 'image', { ['alt']: value })
+            }}
+          />
+          <UI.Input
+            label={{ name: $t('constructor.props.table.columns.class') }}
+            value={column.image?.class}
+            onUpdate={(value) => {
+              updateTableHeader(columnIndex, 'image', { ['class']: value })
+            }}
+          />
+          <UI.Input
+            label={{ name: $t('constructor.props.table.columns.image.width'), class: 'px-0' }}
+            wrapperClass="w-150"
+            value={column.image?.width}
+            onUpdate={(value) => {
+              updateTableHeader(columnIndex, 'image', { ['width']: value })
+            }}
+          />
+          <UI.Input
+            label={{ name: $t('constructor.props.table.columns.image.height'), class: 'px-0' }}
+            wrapperClass="w-150"
+            value={column.image?.height}
+            onUpdate={(value) => {
+              updateTableHeader(columnIndex, 'image', { ['height']: value })
+            }}
+          />
+        </div>
+      </div>
+
       {#if column.buttons && column.buttons.length > 0}
         <div class="mb-5 rounded-lg p-1">
           {#each column.buttons as button, buttonIndex (buttonIndex)}

package/dist/TextField/TextField.svelte

@@ -15,10 +15,7 @@
 
 <div
   {id}
-  class="{twMerge(
-    `relative flex w-full flex-col items-center ${background ? 'rounded-2xl bg-[var(--container-color)] px-6 py-2' : ''}`,
-    wrapperClass,
-  )} "
+  class={twMerge(`relative flex w-full flex-col items-center ${background ? 'rounded-2xl bg-(--container-color) px-6 py-2' : ''}`, wrapperClass)}
 >
   <p class={twMerge(`w-full text-center ${textSize[content.size ?? 'base']}`, content.class)}>
     {content.name}

package/dist/TextField/TextFieldProps.svelte

@@ -21,7 +21,7 @@
   let currentType = $derived($optionsStore.TEXTFIELD_SIZE_OPTIONS.find((t) => t.value === component.properties.content.size))
 
   const initialAlign = $derived(
-    $optionsStore.ALIGN_OPTIONS.find((a) =>
+    $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
       (a.value as string).includes(component.properties.content?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
     ),
   )
@@ -34,7 +34,7 @@
   const initialItalic = $derived(component.properties.content?.class?.split(' ').find((cls: string) => cls.startsWith('italic')))
 </script>
 
-{#if component && component.properties}
+{#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
     <div class="flex w-1/3 flex-col px-2">
       <UI.Select
@@ -64,7 +64,7 @@
         label={{ name: $t('constructor.props.align') }}
         type="buttons"
         value={initialAlign}
-        options={$optionsStore.ALIGN_OPTIONS}
+        options={$optionsStore.TEXT_ALIGN_OPTIONS}
         onUpdate={(option) => updateProperty('content.class', twMerge(component.properties.content.class, option.value), component, onPropertyChange)}
       />
       <UI.Select
@@ -106,4 +106,83 @@
       />
     </div>
   </div>
+{:else}
+  <div class="relative flex flex-row items-start justify-center">
+    <div class="flex w-1/3 flex-col 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.Select
+        wrapperClass="!h-14"
+        label={{ name: $t('constructor.props.textcolors') }}
+        type="buttons"
+        options={$optionsStore.TEXT_COLOR_OPTIONS}
+        value={initialColor}
+        onUpdate={(option) => updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.content.name}
+        onUpdate={(value) => updateProperty('content.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Select
+        label={{ name: $t('constructor.props.size') }}
+        type="buttons"
+        value={currentType}
+        options={$optionsStore.TEXTFIELD_SIZE_OPTIONS}
+        onUpdate={(item) => updateProperty('content.size', item.value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.componentclass') }}
+        value={component.properties.content.class}
+        onUpdate={(value) => updateProperty('content.class', value as string, component, onPropertyChange)}
+      />
+      <UI.Select
+        label={{ name: $t('constructor.props.align') }}
+        type="buttons"
+        value={initialAlign}
+        options={$optionsStore.TEXT_ALIGN_OPTIONS}
+        onUpdate={(option) => updateProperty('content.class', twMerge(component.properties.content.class, option.value), component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Switch
+        label={{ name: $t('constructor.props.bold') }}
+        value={initialBold ? 2 : 1}
+        onChange={(value) =>
+          updateProperty(
+            'content.class',
+            twMerge(`${component.properties.content.class} ${value === 2 ? 'font-bold' : 'font-normal'}`),
+            component,
+            onPropertyChange,
+          )}
+      />
+      <UI.Switch
+        label={{ name: $t('constructor.props.italic') }}
+        value={initialItalic ? 2 : 1}
+        onChange={(value) =>
+          updateProperty(
+            'content.class',
+            twMerge(`${component.properties.content.class} ${value === 2 ? 'italic' : 'not-italic'}`),
+            component,
+            onPropertyChange,
+          )}
+      />
+      <UI.Switch
+        label={{ name: $t('constructor.props.background') }}
+        value={component.properties.background ? 2 : 1}
+        onChange={(value) => updateProperty('background', value === 2, component, onPropertyChange)}
+      />
+    </div>
+  </div>
 {/if}

package/dist/index.d.ts

@@ -22,4 +22,6 @@ export { default as Table } from './Table/Table.svelte';
 export { default as TableProps } from './Table/TableProps.svelte';
 export { default as TextField } from './TextField/TextField.svelte';
 export { default as TextFieldProps } from './TextField/TextFieldProps.svelte';
+export * from './locales/i18n';
+export * from './locales/translations';
 export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type ISelectOption, type ISwitchProps, type IColorPickerProps, type ISliderProps, type ITextFieldProps, type IProgressBarProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, } from './types';

package/dist/index.js

@@ -23,4 +23,6 @@ export { default as Table } from './Table/Table.svelte';
 export { default as TableProps } from './Table/TableProps.svelte';
 export { default as TextField } from './TextField/TextField.svelte';
 export { default as TextFieldProps } from './TextField/TextFieldProps.svelte';
+export * from './locales/i18n';
+export * from './locales/translations';
 export {} from './types';

package/dist/locales/translations.js

@@ -53,6 +53,7 @@ const translations = {
         'constructor.props.form': 'Форма',
         'constructor.props.type': 'Тип',
         'constructor.props.size': 'Размер',
+        'constructor.props.footer': 'Нижняя панель',
         'constructor.props.header': 'Заголовок пакета',
         'constructor.props.argument': 'Аргумент',
         'constructor.props.argument.info': 'Пользовательский аргумент (a-z, A-Z, 0-9, -_!)',
@@ -68,6 +69,8 @@ const translations = {
         'constructor.props.height': 'Высота',
         'constructor.props.colors': 'Цвет фона',
         'constructor.props.textcolors': 'Цвет текста',
+        'constructor.props.textarea.rows': 'Количество строк',
+        'constructor.props.autocomplete': 'Автозаполнение',
         'constructor.props.maxlenght': 'Максимальная длина',
         'constructor.props.regexp': 'Выражение валидации',
         'constructor.props.regexp.info': 'Введите RegExp без /.../ (например: ^\\d+$)',
@@ -82,7 +85,7 @@ const translations = {
         'constructor.props.istest': 'Тестовые данные',
         'constructor.props.variable': 'Имя переменной',
         'constructor.props.widthMode': 'Ширина кнопок',
-        'constructor.props.graphdata.title': 'Начальные данные',
+        'constructor.props.graphdata.title': 'Начальные данные ',
         'constructor.props.options.title': 'Опции компонента',
         'constructor.props.valuetype': 'Тип значения',
         'constructor.props.action': 'Действие при переключении',
@@ -105,6 +108,11 @@ const translations = {
         'constructor.props.table.columns.label': 'Название',
         'constructor.props.table.columns.width': 'Ширина',
         'constructor.props.table.columns.sortable': 'Сортировка',
+        'constructor.props.table.columns.truncated': 'Скрыть',
+        'constructor.props.table.columns.alt': 'Альтернативное название иконок',
+        'constructor.props.table.columns.class': 'Стили иконки',
+        'constructor.props.table.columns.image.width': 'Ширина иконки',
+        'constructor.props.table.columns.image.height': 'Высота иконки',
         'constructor.props.table.deletecolumn': 'Удалить колонку',
         'constructor.props.table.deletebutton': 'Удалить кнопку',
         'constructor.props.table.addaction': 'Добавить кнопку',
@@ -119,6 +127,21 @@ const translations = {
         'constructor.props.icon.network': 'Сеть',
         'constructor.props.icon.power': 'Питание',
         'constructor.props.icon.settings': 'Настройки',
+        'constructor.props.autocomplete.on': 'on',
+        'constructor.props.autocomplete.off': 'off',
+        'constructor.props.autocomplete.given-name': 'given-name',
+        'constructor.props.autocomplete.family-name': 'family-name',
+        'constructor.props.autocomplete.name': 'name',
+        'constructor.props.autocomplete.email': 'email',
+        'constructor.props.autocomplete.username': 'username',
+        'constructor.props.autocomplete.new-password': 'new-password',
+        'constructor.props.autocomplete.current-password': 'current-password',
+        'constructor.props.autocomplete.tel': 'tel',
+        'constructor.props.autocomplete.country-name': 'country-name',
+        'constructor.props.autocomplete.address-level1': 'address-level1',
+        'constructor.props.autocomplete.address-level2': 'address-level2',
+        'constructor.props.autocomplete.street-address': 'street-address',
+        'constructor.props.autocomplete.postal-code': 'postal-code',
     },
     en: {},
     zh: {},

package/dist/options.d.ts

@@ -55,6 +55,11 @@ export declare const optionsStore: import("svelte/store").Readable<{
         value: string;
         class: string;
     }[];
+    TEXT_ALIGN_OPTIONS: {
+        id: string;
+        value: string;
+        name: string;
+    }[];
     ALIGN_OPTIONS: {
         id: string;
         value: string;
@@ -85,4 +90,9 @@ export declare const optionsStore: import("svelte/store").Readable<{
         value: string;
         name: string;
     }[];
+    AUTOCOMPLETE_OPTIONS: {
+        id: string;
+        value: string;
+        name: string;
+    }[];
 }>;

package/dist/options.js

@@ -66,11 +66,16 @@ export const optionsStore = derived(t, ($t) => {
             { id: id(), name: '', value: 'text-purple-500 dark:text-purple-400', class: 'bg-purple-500 dark:bg-purple-400' },
             { id: id(), name: '', value: 'text-gray-500 dark:text-gray-400', class: 'bg-gray-500 dark:bg-gray-400' },
         ],
-        ALIGN_OPTIONS: [
+        TEXT_ALIGN_OPTIONS: [
             { id: id(), value: 'text-left', name: $t('constructor.props.align.left') },
             { id: id(), value: 'text-center', name: $t('constructor.props.align.center') },
             { id: id(), value: 'text-right', name: $t('constructor.props.align.right') },
         ],
+        ALIGN_OPTIONS: [
+            { id: id(), value: 'left', name: $t('constructor.props.align.left') },
+            { id: id(), value: 'center', name: $t('constructor.props.align.center') },
+            { id: id(), value: 'right', name: $t('constructor.props.align.right') },
+        ],
         HEIGHT_OPTIONS: [
             { id: id(), value: 'py-1', name: $t('constructor.props.height.small') },
             { id: id(), value: 'py-2', name: $t('constructor.props.height.medium') },
@@ -92,5 +97,22 @@ export const optionsStore = derived(t, ($t) => {
             { id: id(), value: 'square', name: $t('constructor.props.type.square') },
             { id: id(), value: 'circle', name: $t('constructor.props.type.circle') },
         ],
+        AUTOCOMPLETE_OPTIONS: [
+            { id: id(), value: 'on', name: $t('constructor.props.autocomplete.on') },
+            { id: id(), value: 'off', name: $t('constructor.props.autocomplete.off') },
+            { id: id(), value: 'given-name', name: $t('constructor.props.autocomplete.given-name') },
+            { id: id(), value: 'family-name', name: $t('constructor.props.autocomplete.family-name') },
+            { id: id(), value: 'name', name: $t('constructor.props.autocomplete.name') },
+            { id: id(), value: 'email', name: $t('constructor.props.autocomplete.email') },
+            { id: id(), value: 'username', name: $t('constructor.props.autocomplete.username') },
+            { id: id(), value: 'new-password', name: $t('constructor.props.autocomplete.new-password') },
+            { id: id(), value: 'current-password', name: $t('constructor.props.autocomplete.current-password') },
+            { id: id(), value: 'tel', name: $t('constructor.props.autocomplete.tel') },
+            { id: id(), value: 'country-name', name: $t('constructor.props.autocomplete.country-name') },
+            { id: id(), value: 'address-level1', name: $t('constructor.props.autocomplete.address-level1') },
+            { id: id(), value: 'address-level2', name: $t('constructor.props.autocomplete.address-level2') },
+            { id: id(), value: 'street-address', name: $t('constructor.props.autocomplete.street-address') },
+            { id: id(), value: 'postal-code', name: $t('constructor.props.autocomplete.postal-code') },
+        ],
     };
 });

package/dist/types.d.ts

@@ -32,7 +32,10 @@ export interface IButtonProps {
     disabled?: boolean;
     content?: {
         name?: string;
-        info?: string;
+        info?: {
+            text: string;
+            side: 'top' | 'bottom' | 'left' | 'right';
+        };
         icon?: ConstructorOfATypedSvelteComponent | string | null;
     };
     keyBind?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.1.15",
+  "version": "1.1.17",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -43,12 +43,12 @@
     "typescript": "^5.9.3"
   },
   "devDependencies": {
-    "@sveltejs/kit": "^2.47.2",
+    "@sveltejs/kit": "^2.47.3",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.9.1",
     "publint": "^0.3.15",
-    "svelte": "^5.41.1",
+    "svelte": "^5.41.2",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.1.11",
     "vite-plugin-compression": "^0.5.1"