poe-svelte-ui-lib 1.1.20 → 1.1.21

package/dist/ProgressBar/ProgressBar.svelte

@@ -47,9 +47,10 @@
   {/if}
 
   <div class="flex w-full flex-col items-center">
-    <div class="relative h-2 w-full rounded bg-gray-400">
-      <div class="absolute top-0 left-0 h-full rounded bg-(--bg-color)" style="width: {progressPercent()}%;"></div>
+    <div class="relative h-7 w-full rounded-full bg-gray-400">
+      <div class="absolute top-0 left-0 flex h-full rounded-full bg-(--bg-color)" style="width: {progressPercent()}%;">
+        <span class="m-auto font-semibold">{numericValue?.toFixed(2)}{number.units}</span>
+      </div>
     </div>
-    <span class="ml-2 font-semibold">{numericValue?.toFixed(2)}{number.units}</span>
   </div>
 </div>

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -144,6 +144,8 @@
       />
       <UI.Input
         label={{ name: $t('constructor.props.value') }}
+        type="number"
+        number={{ minNum: component.properties.number.minNum, maxNum: component.properties.number.maxNum, step: 1 }}
         value={component.properties.value}
         onUpdate={(value) => updateProperty('value', value as string, component, onPropertyChange)}
       />

package/dist/Select/SelectProps.svelte

@@ -90,7 +90,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">
       <UI.Select
         label={{ name: $t('constructor.props.type') }}
         type="buttons"
@@ -98,8 +99,6 @@
         options={$optionsStore.SELECT_TYPE_OPTIONS}
         onUpdate={(item) => updateProperty('type', item.value as string, component, onPropertyChange)}
       />
-    </div>
-    <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Select
         wrapperClass="h-14"
         label={{ name: $t('constructor.props.valuetype') }}
@@ -117,21 +116,6 @@
           updateProperty('options', options, 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 items-center px-2">
       <UI.Input
@@ -161,7 +145,8 @@
         onClick={() => {
           const newOption: ISelectOption = {
             id: crypto.randomUUID(),
-            name: 'New Button',
+            name: `Option ${component.properties?.options.length + 1}`,
+            value: component.properties?.options.length + 1,
             class: 'bg-max',
           }
           const options = [...(component.properties?.options || []), newOption]
@@ -232,21 +217,6 @@
         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 items-center px-2">
       <UI.Input
@@ -259,6 +229,12 @@
         value={component.properties.label.class}
         onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
       />
+      <UI.Switch
+        wrapperClass="bg-blue"
+        label={{ name: $t('constructor.props.disabled') }}
+        value={component.properties.disabled ? 2 : 1}
+        onChange={(value) => updateProperty('disabled', value === 2, component, onPropertyChange)}
+      />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Select
@@ -285,12 +261,6 @@
           updateProperty('options', options, component, onPropertyChange)
         }}
       />
-      <UI.Switch
-        wrapperClass="bg-blue"
-        label={{ name: $t('constructor.props.disabled') }}
-        value={component.properties.disabled ? 2 : 1}
-        onChange={(value) => updateProperty('disabled', value === 2, component, onPropertyChange)}
-      />
     </div>
   </div>
 
@@ -306,7 +276,8 @@
         onClick={() => {
           const newOption: ISelectOption = {
             id: crypto.randomUUID(),
-            name: 'New Button',
+            name: `Option ${component.properties?.options.length + 1}`,
+            value: component.properties?.options.length + 1,
             class: 'bg-max',
           }
           const options = [...(component.properties?.options || []), newOption]

package/dist/Switch/Switch.svelte

@@ -7,7 +7,7 @@
     id = crypto.randomUUID(),
     disabled = false,
     wrapperClass = '',
-    label = { name: '', captionLeft: '', captionRight: '' },
+    label = { name: '', class: '', captionLeft: '', captionRight: '' },
     height = '2rem',
     value = $bindable(),
     onChange = () => {},
@@ -46,7 +46,7 @@
 
 <div class={twMerge(`bg-blue relative flex w-full flex-col items-center justify-center`, wrapperClass)}>
   {#if label.name}
-    <h5 class={`w-full px-4 text-center`}>{label.name}</h5>
+    <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
   <div class="relative flex w-full grow items-center justify-center bg-transparent">

package/dist/Table/Table.svelte

@@ -12,6 +12,7 @@
     body = [],
     header = [],
     footer = '',
+    outline = false,
     cursor = null,
     loader,
     getData = () => {},
@@ -126,11 +127,22 @@
     <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
-  <div class="flex h-full flex-col overflow-hidden rounded-xl border-(--border-color)">
+  <div class="flex h-full flex-col overflow-hidden rounded-xl border {outline ? ' border-(--border-color)' : 'border-transparent'} ">
     <!-- Table Header -->
     <div class="grid font-semibold" style={`grid-template-columns: ${header.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};`}>
-      {#each header as column (column)}
-        <div class={twMerge(`justify-center bg-(--bg-color) p-2 text-left`, column.label?.class)}>
+      {#each header as column, index (column)}
+        <div
+          class={twMerge(
+            `justify-center border-l ${outline && index !== 0 ? ' border-(--border-color)' : 'border-transparent'} ${
+              column.align?.header === 'center'
+                ? 'flex justify-center text-center'
+                : column.align?.header === 'right'
+                  ? 'flex justify-end text-right'
+                  : 'flex justify-start text-left'
+            } bg-(--bg-color) p-2 text-left`,
+            column.label?.class,
+          )}
+        >
           <span>{column.label?.name}</span>
           {#if column.sortable}
             <button
@@ -148,21 +160,24 @@
     <div class="flex-1 overflow-y-auto bg-(--container-color)/50" bind:this={container} onscroll={handleScroll}>
       <div class="grid min-w-0" style={`grid-template-columns: ${header.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};`}>
         {#each body as row, index (row)}
-          {#each header as column (column)}
+          {#each header as column, j (column)}
             <div
               class="relative flex w-full min-w-0 items-center px-2 py-1 wrap-break-word
               {index % 2 ? 'bg-(--back-color)/40' : 'bg-[#edeef3] dark:bg-[#1f2a3a]'}
-              {column.align === 'center'
+              {column.align?.content === 'center'
                 ? 'flex justify-center text-center'
-                : column.align === 'right'
+                : column.align?.content === 'right'
                   ? 'flex justify-end text-right'
-                  : 'flex justify-start text-left'}"
+                  : 'flex justify-start text-left'}
+              border-t
+              {j !== 0 ? ' border-l ' : ''}
+              {outline ? 'border-(--border-color)' : 'border-transparent'}  "
             >
               {#if column.buttons}
                 <div class="flex w-full flex-col gap-1">
                   {#each column.buttons as button (button)}
                     <button
-                      class="{twMerge(`cursor-pointer rounded-full
+                      class="{twMerge(`cursor-pointer rounded-full 
                            px-4 py-1 font-medium transition-shadow outline-none select-none hover:shadow-md
                           ${typeof button.class === 'function' ? button.class(row) : button.class}`)} bg-(--bg-color)"
                       onclick={() => buttonClick(row, button)}
@@ -191,7 +206,7 @@
                 <div
                   class="w-full max-w-full wrap-break-word {column.overflow?.truncated
                     ? 'overflow-hidden text-ellipsis whitespace-nowrap'
-                    : 'whitespace-normal'}"
+                    : 'whitespace-normal '}"
                   onmouseenter={column.overflow?.truncated ? (e) => showTooltip(e, row[column.key], column.overflow?.formatting) : undefined}
                   onmouseleave={column.overflow?.truncated ? hideTooltip : undefined}
                   onmousemove={column.overflow?.truncated

package/dist/Table/TableProps.svelte

@@ -103,6 +103,11 @@
         value={initialColor}
         onUpdate={(option) => updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)}
       />
+      <UI.Switch
+        label={{ name: $t('constructor.props.outline') }}
+        value={component.properties.outline ? 2 : 1}
+        onChange={(value) => updateProperty('outline', value === 2, component, onPropertyChange)}
+      />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Input
@@ -163,6 +168,7 @@
         />
         <UI.Input
           label={{ name: $t('constructor.props.table.columns.width') }}
+          wrapperClass="w-120"
           type="number"
           value={Number(column.width.replace('%', ''))}
           onUpdate={(value) => updateTableHeader(columnIndex, 'width', `${value}%`)}
@@ -181,7 +187,7 @@
         />
         <UI.Button
           wrapperClass="w-8"
-          content={{ icon: ButtonAdd, info: $t('constructor.props.table.addaction') }}
+          content={{ icon: ButtonAdd, info: { text: $t('constructor.props.table.addaction'), side: 'top' } }}
           onClick={() => {
             const newButton = {
               name: `button${(component.properties.header[columnIndex].buttons ? component.properties.header[columnIndex].buttons.length : 0) + 1}`,
@@ -204,9 +210,9 @@
         />
       </div>
       {#if column.buttons && column.buttons.length > 0}
-        <div class="mb-5 rounded-lg p-1">
+        <div class="mb-5 rounded-lg py-1">
           {#each column.buttons as button, buttonIndex (buttonIndex)}
-            <div class="mx-14 flex items-end justify-around gap-2">
+            <div class="ml-14 flex items-end justify-around gap-2">
               <UI.Input
                 label={{ name: $t('constructor.props.name') }}
                 wrapperClass="!w-3/10"
@@ -294,11 +300,19 @@
         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.footer') }}
         value={component.properties.footer}
         onUpdate={(value) => updateProperty('footer', value as string, component, onPropertyChange)}
       />
+      <UI.Switch
+        label={{ name: $t('constructor.props.outline') }}
+        value={component.properties.outline ? 2 : 1}
+        onChange={(value) => updateProperty('outline', value === 2, component, onPropertyChange)}
+      />
     </div>
   </div>
 
@@ -330,6 +344,7 @@
         <div class="mr-2 flex items-end justify-around gap-6">
           <UI.Input
             label={{ name: $t('constructor.props.table.columns.key') }}
+            wrapperClass="w-150"
             value={column.key}
             help={{ regExp: /^[0-9a-zA-Z_-]{0,16}$/ }}
             onUpdate={(value) => {
@@ -345,26 +360,34 @@
             }}
           />
           <UI.Input
-            label={{ name: $t('constructor.props.table.columns.width') }}
+            label={{ name: $t('constructor.props.table.columns.width'), class: 'px-0' }}
+            wrapperClass="w-150"
             type="number"
             value={Number(column.width.replace('%', ''))}
             onUpdate={(value) => updateTableHeader(columnIndex, 'width', `${value}%`)}
           />
+          <UI.Select
+            label={{ name: $t('constructor.props.align.header') }}
+            type="buttons"
+            value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align?.header) || 'left')}
+            options={$optionsStore.ALIGN_OPTIONS}
+            onUpdate={(option) => updateTableHeader(columnIndex, 'align', { header: option.value, content: column.align?.content })}
+          />
           <UI.Switch
-            wrapperClass="w-2/10"
-            label={{ name: $t('constructor.props.table.columns.sortable') }}
+            label={{ name: $t('constructor.props.table.columns.sortable'), class: 'px-0' }}
+            wrapperClass="w-30"
             value={column.sortable ? 2 : 1}
             onChange={(value) => updateTableHeader(columnIndex, 'sortable', value === 2)}
           />
           <UI.Switch
-            wrapperClass="w-2/10"
-            label={{ name: $t('constructor.props.copy') }}
+            label={{ name: $t('constructor.props.copy'), class: 'px-0' }}
+            wrapperClass="w-30"
             value={column.overflow?.copy ? 2 : 1}
-            onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value === 2 })}
+            onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value === 2, truncated: column.overflow?.truncated })}
           />
           <UI.Button
             wrapperClass="w-8"
-            content={{ icon: ButtonAdd, info: $t('constructor.props.table.addaction') }}
+            content={{ icon: ButtonAdd, info: { text: $t('constructor.props.table.addaction'), side: 'top' } }}
             onClick={() => {
               const newButton = {
                 name: `button${(component.properties.header[columnIndex].buttons ? component.properties.header[columnIndex].buttons.length : 0) + 1}`,
@@ -388,30 +411,24 @@
         </div>
         <div class="mr-2 flex items-end justify-around gap-6">
           <UI.Select
-            label={{ name: $t('constructor.props.align') }}
+            label={{ name: $t('constructor.props.align.content') }}
             type="buttons"
-            value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align) || 'left')}
+            value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align?.content) || 'left')}
             options={$optionsStore.ALIGN_OPTIONS}
-            onUpdate={(option) => updateTableHeader(columnIndex, 'align', option.value)}
+            onUpdate={(option) => updateTableHeader(columnIndex, 'align', { header: column.align?.header, content: 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 })
-            }}
+            onChange={(value) => updateTableHeader(columnIndex, 'overflow', { truncated: value === 2, copy: column.overflow?.copy })}
           />
+
           <UI.Input
             label={{ name: $t('constructor.props.table.columns.class') }}
             value={column.image?.class}
             onUpdate={(value) => {
-              updateTableHeader(columnIndex, 'image', { ['class']: value })
+              updateTableHeader(columnIndex, 'image', { class: value, width: column.image?.width, height: column.image?.height })
             }}
           />
           <UI.Input
@@ -419,7 +436,7 @@
             wrapperClass="w-150"
             value={column.image?.width}
             onUpdate={(value) => {
-              updateTableHeader(columnIndex, 'image', { ['width']: value })
+              updateTableHeader(columnIndex, 'image', { class: column.image?.class, width: value, height: column.image?.height })
             }}
           />
           <UI.Input
@@ -427,7 +444,7 @@
             wrapperClass="w-150"
             value={column.image?.height}
             onUpdate={(value) => {
-              updateTableHeader(columnIndex, 'image', { ['height']: value })
+              updateTableHeader(columnIndex, 'image', { class: column.image?.class, width: column.image?.width, height: value })
             }}
           />
         </div>

package/dist/locales/translations.js

@@ -62,12 +62,15 @@ const translations = {
         'constructor.props.value': 'Значение',
         'constructor.props.value.info': 'Поле для ввода Value пакета в формате JSON',
         'constructor.props.align': 'Выравнивание',
+        'constructor.props.align.header': 'Выравнивание заголовка',
+        'constructor.props.align.content': 'Выравнивание контента',
         'constructor.props.image': 'Фоновое изображение',
         'constructor.props.labelicon': 'Иконка заголовка',
         'constructor.props.removeimage': 'Удалить изображение',
         'constructor.props.name': 'Текст',
         'constructor.props.height': 'Высота',
         'constructor.props.colors': 'Цвет фона',
+        'constructor.props.outline': 'Границы таблицы',
         'constructor.props.textcolors': 'Цвет текста',
         'constructor.props.textarea.rows': 'Количество строк',
         'constructor.props.autocomplete': 'Автозаполнение',
@@ -109,9 +112,9 @@ const translations = {
         'constructor.props.size.height': 'Высота сетки',
         'constructor.props.size.width': 'Ширина сетки',
         'constructor.props.table.columns': 'Колонки таблицы',
-        'constructor.props.table.columns.key': 'Имя ключа',
-        'constructor.props.table.columns.label': 'Название',
-        'constructor.props.table.columns.width': 'Ширина',
+        'constructor.props.table.columns.key': 'Ключ',
+        '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': 'Альтернативное название иконок',
@@ -134,19 +137,61 @@ const translations = {
         'constructor.props.icon.settings': 'Настройки',
         'constructor.props.autocomplete.on': 'Включено',
         'constructor.props.autocomplete.off': 'Выключено',
+        'constructor.props.autocomplete.name': 'Полное имя',
+        'constructor.props.autocomplete.honorific-prefix': 'Обращение (г-н, г-жа, др.)',
         'constructor.props.autocomplete.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',
+        'constructor.props.autocomplete.additional-name': 'Отчество',
+        'constructor.props.autocomplete.family-name': 'Фамилия',
+        'constructor.props.autocomplete.honorific-suffix': 'Постфикс (мл., ст.)',
+        'constructor.props.autocomplete.nickname': 'Псевдоним',
+        'constructor.props.autocomplete.username': 'Имя пользователя',
+        'constructor.props.autocomplete.new-password': 'Новый пароль',
+        'constructor.props.autocomplete.current-password': 'Текущий пароль',
+        'constructor.props.autocomplete.one-time-code': 'Одноразовый код',
+        'constructor.props.autocomplete.organization-title': 'Должность',
+        'constructor.props.autocomplete.organization': 'Организация',
+        'constructor.props.autocomplete.street-address': 'Адрес, начиная с улицы',
+        'constructor.props.autocomplete.address-line1': 'Адресная строка 1',
+        'constructor.props.autocomplete.address-line2': 'Адресная строка 2',
+        'constructor.props.autocomplete.address-line3': 'Адресная строка 3',
+        'constructor.props.autocomplete.address-level4': 'Уровень адреса 4',
+        'constructor.props.autocomplete.address-level3': 'Уровень адреса 3',
+        'constructor.props.autocomplete.address-level2': 'Населённый пункт',
+        'constructor.props.autocomplete.address-level1': 'Область, регион или штат',
+        'constructor.props.autocomplete.country': 'Код страны',
+        'constructor.props.autocomplete.country-name': 'Страна',
+        'constructor.props.autocomplete.postal-code': 'Почтовый индекс',
+        'constructor.props.autocomplete.cc-name': 'Имя владельца карты',
+        'constructor.props.autocomplete.cc-given-name': 'Имя владельца карты',
+        'constructor.props.autocomplete.cc-additional-name': 'Отчество владельца карты',
+        'constructor.props.autocomplete.cc-family-name': 'Фамилия владельца карты',
+        'constructor.props.autocomplete.cc-number': 'Номер карты',
+        'constructor.props.autocomplete.cc-exp': 'Срок действия',
+        'constructor.props.autocomplete.cc-exp-month': 'Месяц срока действия',
+        'constructor.props.autocomplete.cc-exp-year': 'Год срока действия',
+        'constructor.props.autocomplete.cc-csc': 'Код безопасности',
+        'constructor.props.autocomplete.cc-type': 'Тип карты',
+        'constructor.props.autocomplete.transaction-currency': 'Валюта транзакции',
+        'constructor.props.autocomplete.transaction-amount': 'Сумма транзакции',
+        'constructor.props.autocomplete.language': 'Язык',
+        'constructor.props.autocomplete.bday': 'Дата рождения',
+        'constructor.props.autocomplete.bday-day': 'День рождения',
+        'constructor.props.autocomplete.bday-month': 'Месяц рождения',
+        'constructor.props.autocomplete.bday-year': 'Год рождения',
+        'constructor.props.autocomplete.sex': 'Пол',
+        'constructor.props.autocomplete.url': 'URL-адрес',
+        'constructor.props.autocomplete.photo': 'Фото',
+        'constructor.props.autocomplete.email': 'Адрес электронной почты',
+        'constructor.props.autocomplete.tel': 'Полный номер телефона',
+        'constructor.props.autocomplete.tel-country-code': 'Код страны телефона',
+        'constructor.props.autocomplete.tel-national': 'Национальный номер телефона',
+        'constructor.props.autocomplete.tel-area-code': 'Код региона/области',
+        'constructor.props.autocomplete.tel-local': 'Местный номер',
+        'constructor.props.autocomplete.tel-local-prefix': 'Префикс местного номера',
+        'constructor.props.autocomplete.tel-local-suffix': 'Суффикс местного номера',
+        'constructor.props.autocomplete.tel-extension': 'Добавочный номер',
+        'constructor.props.autocomplete.impp': 'Мессенджер',
+        'constructor.props.autocomplete.fax': 'Номер факса',
     },
     en: {},
     zh: {},

package/dist/options.js

@@ -108,34 +108,86 @@ export const optionsStore = derived(t, ($t) => {
             { 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: 'nickname', name: $t('constructor.props.autocomplete.nickname') },
             { 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: 'organization-title', name: $t('constructor.props.autocomplete.organization-title') },
             { 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') },
+            { id: id(), value: 'email', name: $t('constructor.props.autocomplete.email') },
+            { id: id(), value: 'tel', name: $t('constructor.props.autocomplete.tel') },
         ],
         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: 'name', name: $t('constructor.props.autocomplete.name') },
+            { id: id(), value: 'honorific-prefix', name: $t('constructor.props.autocomplete.honorific-prefix') },
             { id: id(), value: 'given-name', name: $t('constructor.props.autocomplete.given-name') },
+            { id: id(), value: 'additional-name', name: $t('constructor.props.autocomplete.additional-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: 'honorific-suffix', name: $t('constructor.props.autocomplete.honorific-suffix') },
+            { id: id(), value: 'nickname', name: $t('constructor.props.autocomplete.nickname') },
+            // Пользовательская информация
             { 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: 'one-time-code', name: $t('constructor.props.autocomplete.one-time-code') },
+            // Организация
+            { id: id(), value: 'organization-title', name: $t('constructor.props.autocomplete.organization-title') },
+            { id: id(), value: 'organization', name: $t('constructor.props.autocomplete.organization') },
+            // Адрес
             { id: id(), value: 'street-address', name: $t('constructor.props.autocomplete.street-address') },
+            { id: id(), value: 'address-line1', name: $t('constructor.props.autocomplete.address-line1') },
+            { id: id(), value: 'address-line2', name: $t('constructor.props.autocomplete.address-line2') },
+            { id: id(), value: 'address-line3', name: $t('constructor.props.autocomplete.address-line3') },
+            { id: id(), value: 'address-level4', name: $t('constructor.props.autocomplete.address-level4') },
+            { id: id(), value: 'address-level3', name: $t('constructor.props.autocomplete.address-level3') },
+            { id: id(), value: 'address-level2', name: $t('constructor.props.autocomplete.address-level2') },
+            { id: id(), value: 'address-level1', name: $t('constructor.props.autocomplete.address-level1') },
+            { id: id(), value: 'country', name: $t('constructor.props.autocomplete.country') },
+            { id: id(), value: 'country-name', name: $t('constructor.props.autocomplete.country-name') },
             { id: id(), value: 'postal-code', name: $t('constructor.props.autocomplete.postal-code') },
+            // Контактная информация
+            { id: id(), value: 'cc-name', name: $t('constructor.props.autocomplete.cc-name') },
+            { id: id(), value: 'cc-given-name', name: $t('constructor.props.autocomplete.cc-given-name') },
+            { id: id(), value: 'cc-additional-name', name: $t('constructor.props.autocomplete.cc-additional-name') },
+            { id: id(), value: 'cc-family-name', name: $t('constructor.props.autocomplete.cc-family-name') },
+            { id: id(), value: 'cc-number', name: $t('constructor.props.autocomplete.cc-number') },
+            { id: id(), value: 'cc-exp', name: $t('constructor.props.autocomplete.cc-exp') },
+            { id: id(), value: 'cc-exp-month', name: $t('constructor.props.autocomplete.cc-exp-month') },
+            { id: id(), value: 'cc-exp-year', name: $t('constructor.props.autocomplete.cc-exp-year') },
+            { id: id(), value: 'cc-csc', name: $t('constructor.props.autocomplete.cc-csc') },
+            { id: id(), value: 'cc-type', name: $t('constructor.props.autocomplete.cc-type') },
+            // Контакт
+            { id: id(), value: 'transaction-currency', name: $t('constructor.props.autocomplete.transaction-currency') },
+            { id: id(), value: 'transaction-amount', name: $t('constructor.props.autocomplete.transaction-amount') },
+            { id: id(), value: 'language', name: $t('constructor.props.autocomplete.language') },
+            { id: id(), value: 'bday', name: $t('constructor.props.autocomplete.bday') },
+            { id: id(), value: 'bday-day', name: $t('constructor.props.autocomplete.bday-day') },
+            { id: id(), value: 'bday-month', name: $t('constructor.props.autocomplete.bday-month') },
+            { id: id(), value: 'bday-year', name: $t('constructor.props.autocomplete.bday-year') },
+            // Связь
+            { id: id(), value: 'sex', name: $t('constructor.props.autocomplete.sex') },
+            { id: id(), value: 'url', name: $t('constructor.props.autocomplete.url') },
+            { id: id(), value: 'photo', name: $t('constructor.props.autocomplete.photo') },
+            // Email и телефон
+            { id: id(), value: 'email', name: $t('constructor.props.autocomplete.email') },
+            { id: id(), value: 'tel', name: $t('constructor.props.autocomplete.tel') },
+            { id: id(), value: 'tel-country-code', name: $t('constructor.props.autocomplete.tel-country-code') },
+            { id: id(), value: 'tel-national', name: $t('constructor.props.autocomplete.tel-national') },
+            { id: id(), value: 'tel-area-code', name: $t('constructor.props.autocomplete.tel-area-code') },
+            { id: id(), value: 'tel-local', name: $t('constructor.props.autocomplete.tel-local') },
+            { id: id(), value: 'tel-local-prefix', name: $t('constructor.props.autocomplete.tel-local-prefix') },
+            { id: id(), value: 'tel-local-suffix', name: $t('constructor.props.autocomplete.tel-local-suffix') },
+            { id: id(), value: 'tel-extension', name: $t('constructor.props.autocomplete.tel-extension') },
+            { id: id(), value: 'impp', name: $t('constructor.props.autocomplete.impp') },
+            { id: id(), value: 'fax', name: $t('constructor.props.autocomplete.fax') },
         ],
     };
 });

package/dist/types.d.ts

@@ -89,7 +89,7 @@ export interface IInputProps {
         info?: string;
         copyButton?: boolean;
         regExp?: string | RegExp;
-        autocomplete?: 'on' | 'off' | 'given-name' | 'family-name' | 'name' | 'email' | 'username' | 'new-password' | 'current-password' | 'tel' | 'country-name' | 'address-level1' | 'address-level2' | 'street-address' | 'postal-code' | null;
+        autocomplete?: 'on' | 'off' | 'given-name' | 'family-name' | 'nickname' | 'username' | 'new-password' | 'current-password' | 'organization-title' | 'country-name' | 'address-level1' | 'address-level2' | 'street-address' | 'postal-code' | 'email' | 'tel' | null;
     };
     eventHandler?: IUIComponentHandler;
     onUpdate?: (value: string | number) => void;
@@ -123,6 +123,7 @@ export interface ISwitchProps {
     disabled?: boolean;
     label?: {
         name?: string;
+        class?: string;
         captionLeft?: string;
         captionRight?: string;
     };
@@ -209,7 +210,10 @@ export interface ITableHeader<T extends object> {
     key: keyof T;
     sortable?: boolean;
     width?: string;
-    align?: 'left' | 'center' | 'right';
+    align?: {
+        header?: 'left' | 'center' | 'right';
+        content?: 'left' | 'center' | 'right';
+    };
     overflow?: {
         truncated?: boolean;
         formatting?: (text: string) => string;
@@ -241,6 +245,7 @@ export interface ITableProps<T extends object> {
     header: ITableHeader<T>[];
     body: T[];
     footer?: string;
+    outline?: boolean;
     cursor?: string | null;
     loader?: Writable<boolean>;
     getData?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.1.20",
+  "version": "1.1.21",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -9,7 +9,7 @@
     "preview": "vite preview",
     "prepack": "svelte-kit sync && svelte-package && publint",
     "CheckUpdate": "npx npm-check-updates -u && npm install",
-    "FiLeS": "tsx src/lib/Accordion/IconsLib/iconsLib.ts"
+    "UpdateIconsLib": "tsx src/lib/Accordion/IconsLib/iconsLib.ts"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -43,12 +43,12 @@
     "typescript": "^5.9.3"
   },
   "devDependencies": {
-    "@sveltejs/kit": "^2.47.3",
+    "@sveltejs/kit": "^2.48.0",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.9.1",
     "publint": "^0.3.15",
-    "svelte": "^5.41.3",
+    "svelte": "^5.42.2",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.1.12",
     "vite-plugin-compression": "^0.5.1"