poe-svelte-ui-lib 1.1.15 → 1.1.16

package/dist/Table/TableProps.svelte

@@ -68,17 +68,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"
@@ -105,7 +107,183 @@
     </div>
   </div>
 
-  <hr class="border-[var(--border-color)]" />
+  <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="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.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>
+      {#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>

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

@@ -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
@@ -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.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',
+            `${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',
+            `${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/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': 'Действие при переключении',
@@ -119,6 +122,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

@@ -85,4 +85,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

@@ -92,5 +92,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "license": "MIT",
   "type": "module",
   "scripts": {