poe-svelte-ui-lib 1.0.6 → 1.0.7

package/dist/Table/TableProps.svelte

@@ -0,0 +1,233 @@
+<!-- $lib/ElementsUI/TableProps.svelte -->
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import { t } from '../locales/i18n'
+  import { type UIComponent, type ITableProps, type ITableHeader, updateProperty } from '../types'
+  import * as UI from '..'
+  import ButtonDelete from '../libIcons/ButtonDelete.svelte'
+  import ButtonAdd from '../libIcons/ButtonAdd.svelte'
+  import { optionsStore } from '../options'
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<ITableProps<object>> }
+    onPropertyChange: (value: string | object) => void
+  }>()
+
+  const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
+  let VARIABLE_OPTIONS = $derived(
+    DeviceVariables && Array.isArray(DeviceVariables)
+      ? DeviceVariables.map((variable) => ({
+          id: variable.name,
+          value: variable.value,
+          name: `${variable.value} | ${variable.name}`,
+        }))
+      : [],
+  )
+
+  const initialColor = $derived(
+    $optionsStore.COLOR_OPTIONS.find((c) =>
+      (c.value as string).includes(component.properties.wrapperClass?.split(' ').find((cls: string) => cls.startsWith('bg-'))),
+    ),
+  )
+
+  const initialAlign = $derived(
+    $optionsStore.ALIGN_OPTIONS.find((a) =>
+      (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
+    ),
+  )
+
+  const updateTableHeader = (index: number, field: string, value: any) => {
+    const headers = [...component.properties.header]
+    headers[index] = { ...headers[index], [field]: value }
+    updateProperty('header', headers, component, onPropertyChange)
+  }
+
+  const updateButtonProperty = (columnIndex: number, buttonIndex: number, field: string, value: any) => {
+    const headers = [...component.properties.header]
+    const buttons = [...headers[columnIndex].buttons]
+    buttons[buttonIndex] = { ...buttons[buttonIndex], [field]: value }
+    headers[columnIndex].buttons = buttons
+    updateProperty('header', headers, component, onPropertyChange)
+  }
+
+  const removeButtonFromColumn = (columnIndex: number, buttonIndex: number) => {
+    const headers = [...component.properties.header]
+    const buttons = [...headers[columnIndex].buttons]
+    buttons.splice(buttonIndex, 1)
+    headers[columnIndex].buttons = buttons.length ? buttons : undefined
+    updateProperty('header', headers, component, onPropertyChange)
+  }
+</script>
+
+{#if component && component.properties}
+  <div class="relative flex flex-row items-start justify-center">
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.variable') }}
+        options={VARIABLE_OPTIONS}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
+        onUpdate={(value) => {
+          updateProperty('id', value.value as string, component, onPropertyChange)
+          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"
+        label={{ name: $t('constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.COLOR_OPTIONS}
+        value={initialColor}
+        onUpdate={(option) => updateProperty('wrapperClass', `${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.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Select
+        label={{ name: $t('constructor.props.align') }}
+        type="buttons"
+        value={initialAlign}
+        options={$optionsStore.ALIGN_OPTIONS}
+        onUpdate={(option) => updateProperty('label.class', `${component.properties.label.class} ${option.value}`, component, onPropertyChange)}
+      />
+    </div>
+  </div>
+
+  <hr class="border-[var(--border-color)]" />
+
+  <!-- Настройки столбцов таблицы -->
+  <div class="space-y-4">
+    <div class="m-0 flex items-center justify-center gap-2">
+      <h4>{$t('constructor.props.table.columns')}</h4>
+      <UI.Button
+        wrapperClass="!w-10"
+        content={{ icon: ButtonAdd }}
+        componentClass="bg-transparent h-10 border-none !shadow-none hover:shadow-none"
+        onClick={() => {
+          const newColumn: ITableHeader<any> = {
+            key: `column${(component.properties.header?.length || 0) + 1}`,
+            label: { name: `Column ${(component.properties.header?.length || 0) + 1}`, class: '' },
+            width: '100px',
+            sortable: false,
+          }
+          const headers = [...(component.properties.header || []), newColumn]
+          updateProperty('header', headers, component, onPropertyChange)
+        }}
+      />
+    </div>
+
+    {#each component.properties.header as column, columnIndex (columnIndex)}
+      <div class="m-0 flex items-end justify-around gap-2">
+        <UI.Input
+          label={{ name: $t('constructor.props.table.columns.key') }}
+          wrapperClass="!w-2/10"
+          value={column.key}
+          help={{ regExp: /^[0-9a-zA-Z_-]{0,16}$/ }}
+          onUpdate={(value) => updateTableHeader(columnIndex, 'key', value)}
+        />
+        <UI.Input
+          label={{ name: $t('constructor.props.table.columns.label') }}
+          wrapperClass="!w-2/10"
+          value={column.label.name}
+          onUpdate={(value) => updateTableHeader(columnIndex, 'label.name', value)}
+        />
+        <UI.Input
+          label={{ name: $t('constructor.props.table.columns.width') }}
+          wrapperClass="!w-2/10"
+          value={column.width}
+          onUpdate={(value) => updateTableHeader(columnIndex, 'width', value)}
+        />
+        <UI.Switch
+          wrapperClass="!w-1/10 bg-blue"
+          label={{ name: $t('constructor.props.table.columns.sortable') }}
+          value={column.sortable ? 2 : 1}
+          onChange={(value) => updateTableHeader(columnIndex, 'sortable', value === 2)}
+        />
+        <UI.Button
+          wrapperClass="w-10"
+          content={{ icon: ButtonAdd, info: $t('constructor.props.table.addaction') }}
+          componentClass="bg-transparent h-10 w-10 border-none !shadow-none hover:shadow-none"
+          onClick={() => {
+            const newButton = {
+              name: `button${(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-10"
+          content={{ icon: ButtonDelete, info: $t('constructor.props.table.deletecolumn') }}
+          componentClass=" bg-transparent h-10 w-10 border-none !shadow-none hover:shadow-none"
+          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-10 m"
+                content={{ icon: ButtonDelete }}
+                componentClass="bg-transparent h-10 w-10 border-none !shadow-none hover:shadow-none"
+                onClick={() => removeButtonFromColumn(columnIndex, buttonIndex)}
+              />
+            </div>
+          {/each}
+        </div>
+      {/if}
+    {/each}
+  </div>
+{/if}

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

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

package/dist/TextField/TextField.svelte

@@ -1,20 +1,26 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge'
   import type { ITextFieldProps } from '../types'
 
-  let { id = crypto.randomUUID(), wrapperClass = '', label = { name: '', bold: false, italic: false, color: '' }, type = 'small' }: ITextFieldProps = $props()
+  let { id = crypto.randomUUID(), wrapperClass = '', background = false, content = { name: '', class: '', size: 'base' } }: ITextFieldProps = $props()
 
   const textSize = {
-    xsmall: 'text-sm',
-    small: 'text-base',
-    medium: 'text-lg',
-    large: 'text-xl',
-    xlarge: 'text-2xl',
-    xxlarge: 'text-3xl',
+    small: 'text-sm',
+    base: 'text-base',
+    large: 'text-2xl',
     huge: 'text-4xl',
     massive: 'text-5xl',
   } as const
 </script>
 
-<div {id} class="relative flex w-full flex-col items-center {wrapperClass}">
-  <p class="w-full text-center {label.color} {textSize[type]} {label.bold ? 'font-bold' : ''} {label.italic ? 'italic' : ''}">{label.name}</p>
+<div
+  {id}
+  class="{twMerge(
+    `relative flex w-full flex-col items-center ${background ? 'rounded-2xl bg-[var(--container-color)] px-6 py-2' : ''}`,
+    wrapperClass,
+  )} "
+>
+  <p class={twMerge(`w-full text-center ${textSize[content.size ?? 'base']}`, content.class)}>
+    {content.name}
+  </p>
 </div>

package/dist/TextField/TextFieldProps.svelte

@@ -1,7 +1,7 @@
 <!-- $lib/ElementsUI/GridAccordionProps.svelte -->
 <script lang="ts">
   import { t } from '../locales/i18n'
-  import type { ITextFieldProps, UIComponent } from '../types'
+  import { updateProperty, type ITextFieldProps, type UIComponent } from '../types'
   import * as UI from '../index'
   import { optionsStore } from '../options'
 
@@ -10,41 +10,20 @@
     onPropertyChange: (value: string | object) => void
   }>()
 
-  let currentType = $derived($optionsStore.TEXTFIELD_SIZE_OPTIONS.find((t) => t.value === component.properties.type))
+  let currentType = $derived($optionsStore.TEXTFIELD_SIZE_OPTIONS.find((t) => t.value === component.properties.content.size))
 
   const initialAlign = $derived(
     $optionsStore.ALIGN_OPTIONS.find((a) =>
-      (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
+      (a.value as string).includes(component.properties.content?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
     ),
   )
-
-  const handleLabelAlign = (align: string) => {
-    let labelClass = component.properties.label.class || ''
-    labelClass = labelClass
-      .split(' ')
-      .filter((cls: string) => !cls.startsWith('text-'))
-      .join(' ')
-    if (align) {
-      labelClass += ` ${align}`
-    }
-    updateProperty('label.class', labelClass)
-  }
-
-  /* Обновление свойства */
-  const updateProperty = (path: string, value: string | object | boolean) => {
-    const newProperties = JSON.parse(JSON.stringify(component.properties))
-    const parts = path.split('.')
-    let obj = newProperties
-
-    for (let i = 0; i < parts.length - 1; i++) {
-      const part = parts[i]
-      if (!obj[part]) obj[part] = {}
-      obj = obj[part]
-    }
-
-    obj[parts[parts.length - 1]] = value
-    onPropertyChange(newProperties)
-  }
+  const initialColor = $derived(
+    $optionsStore.TEXT_COLOR_OPTIONS.find((c) =>
+      (c.value as string).includes(component.properties.wrapperClass?.split(' ').find((cls: string) => cls.startsWith('text-'))),
+    ),
+  )
+  const initialBold = $derived(component.properties.content?.class?.split(' ').find((cls: string) => cls.startsWith('font-bold')))
+  const initialItalic = $derived(component.properties.content?.class?.split(' ').find((cls: string) => cls.startsWith('italic')))
 </script>
 
 {#if component && component.properties}
@@ -52,40 +31,61 @@
     <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)}
-        type="text"
+        value={component.properties.content.name}
+        onUpdate={(value) => updateProperty('content.name', value as string, component, onPropertyChange)}
       />
       <UI.Select
-        label={{ name: $t('constructor.props.type') }}
+        label={{ name: $t('constructor.props.size') }}
         type="buttons"
         value={currentType}
         options={$optionsStore.TEXTFIELD_SIZE_OPTIONS}
-        onUpdate={(item) => updateProperty('type', item.value as string)}
+        onUpdate={(item) => updateProperty('content.size', item.value as string, component, onPropertyChange)}
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Select
-        wrapperClass="w-full"
         label={{ name: $t('constructor.props.align') }}
         type="buttons"
         value={initialAlign}
         options={$optionsStore.ALIGN_OPTIONS}
-        onUpdate={(option) => handleLabelAlign(option.value as string)}
+        onUpdate={(option) => updateProperty('content.class', `${component.properties.content.class} ${option.value}`, component, onPropertyChange)}
+      />
+      <UI.Select
+        wrapperClass="!h-14"
+        label={{ name: $t('constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.TEXT_COLOR_OPTIONS}
+        value={initialColor}
+        onUpdate={(option) => updateProperty('wrapperClass', `${component.properties.wrapperClass} ${option.value}`, component, onPropertyChange)}
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Switch
-        wrapperClass="w-full bg-blue"
         label={{ name: $t('constructor.props.bold') }}
-        value={component.properties.bold ? 2 : 1}
-        onChange={(value) => updateProperty('bold', value === 2)}
+        value={initialBold ? 2 : 1}
+        onChange={(value) =>
+          updateProperty(
+            'content.class',
+            `${component.properties.content.class} ${value === 2 ? 'font-bold' : 'font-normal'}`,
+            component,
+            onPropertyChange,
+          )}
       />
       <UI.Switch
-        wrapperClass="w-full bg-blue"
         label={{ name: $t('constructor.props.italic') }}
-        value={component.properties.italic ? 2 : 1}
-        onChange={(value) => updateProperty('italic', value === 2)}
+        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>

package/dist/TextField/TextFieldProps.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ITextFieldProps, UIComponent } from '../types';
+import { type ITextFieldProps, type UIComponent } from '../types';
 type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<ITextFieldProps>;

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 export { default as Accordion } from './Accordion/Accordion.svelte';
 export { default as Button } from './Button/Button.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
-export { default as FileAttach } from './FileAttach/FileAttach.svelte';
+export { default as FileAttach } from './FileAttach.svelte';
 export { default as Graph } from './Graph/Graph.svelte';
 export { default as Input } from './Input/Input.svelte';
+export { default as Modal } from './Modal.svelte';
 export { default as ProgressBar } from './ProgressBar/ProgressBar.svelte';
 export { default as Select } from './Select/Select.svelte';
 export { default as Slider } from './Slider/Slider.svelte';
@@ -11,6 +12,4 @@ export { default as Switch } from './Switch/Switch.svelte';
 export { default as Table } from './Table/Table.svelte';
 export { default as TextField } from './TextField/TextField.svelte';
 export { default as TextFieldProps } from './TextField/TextFieldProps.svelte';
-export { default as Loader } from './Loader.svelte';
-export { default as MessageModal } from './MessageModal.svelte';
 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

@@ -2,9 +2,10 @@
 export { default as Accordion } from './Accordion/Accordion.svelte';
 export { default as Button } from './Button/Button.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
-export { default as FileAttach } from './FileAttach/FileAttach.svelte';
+export { default as FileAttach } from './FileAttach.svelte';
 export { default as Graph } from './Graph/Graph.svelte';
 export { default as Input } from './Input/Input.svelte';
+export { default as Modal } from './Modal.svelte';
 export { default as ProgressBar } from './ProgressBar/ProgressBar.svelte';
 export { default as Select } from './Select/Select.svelte';
 export { default as Slider } from './Slider/Slider.svelte';
@@ -12,6 +13,4 @@ export { default as Switch } from './Switch/Switch.svelte';
 export { default as Table } from './Table/Table.svelte';
 export { default as TextField } from './TextField/TextField.svelte';
 export { default as TextFieldProps } from './TextField/TextFieldProps.svelte';
-export { default as Loader } from './Loader.svelte';
-export { default as MessageModal } from './MessageModal.svelte';
 export {} from './types';

package/dist/libIcons/ButtonAdd.svelte

@@ -1,7 +1,10 @@
 <script lang="ts"></script>
 
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
-  ><path fill="currentColor" d="M12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25z" /><path
+<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"
+  ><path
+    fill="currentColor"
+    d="M12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25z"
+  /><path
     fill="currentColor"
     fill-rule="evenodd"
     d="M12.057 1.25h-.114c-2.309 0-4.118 0-5.53.19c-1.444.194-2.584.6-3.479 1.494c-.895.895-1.3 2.035-1.494 3.48c-.19 1.411-.19 3.22-.19 5.529v.114c0 2.309 0 4.118.19 5.53c.194 1.444.6 2.584 1.494 3.479c.895.895 2.035 1.3 3.48 1.494c1.411.19 3.22.19 5.529.19h.114c2.309 0 4.118 0 5.53-.19c1.444-.194 2.584-.6 3.479-1.494c.895-.895 1.3-2.035 1.494-3.48c.19-1.411.19-3.22.19-5.529v-.114c0-2.309 0-4.118-.19-5.53c-.194-1.444-.6-2.584-1.494-3.479c-.895-.895-2.035-1.3-3.48-1.494c-1.411-.19-3.22-.19-5.529-.19M3.995 3.995c.57-.57 1.34-.897 2.619-1.069c1.3-.174 3.008-.176 5.386-.176s4.086.002 5.386.176c1.279.172 2.05.5 2.62 1.069c.569.57.896 1.34 1.068 2.619c.174 1.3.176 3.008.176 5.386s-.002 4.086-.176 5.386c-.172 1.279-.5 2.05-1.069 2.62c-.57.569-1.34.896-2.619 1.068c-1.3.174-3.008.176-5.386.176s-4.086-.002-5.386-.176c-1.279-.172-2.05-.5-2.62-1.069c-.569-.57-.896-1.34-1.068-2.619c-.174-1.3-.176-3.008-.176-5.386s.002-4.086.176-5.386c.172-1.279.5-2.05 1.069-2.62"

package/dist/libIcons/ButtonDelete.svelte

@@ -1,6 +1,6 @@
 <script lang="ts"></script>
 
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
+<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"
   ><path
     fill="none"
     stroke="currentColor"

package/dist/libIcons/CrossIcon.svelte

@@ -0,0 +1,9 @@
+<script lang="ts"></script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"
+  ><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"
+    ><path d="M5.47 5.47a.75.75 0 0 1 1.06 0l12 12a.75.75 0 1 1-1.06 1.06l-12-12a.75.75 0 0 1 0-1.06" /><path
+      d="M18.53 5.47a.75.75 0 0 1 0 1.06l-12 12a.75.75 0 0 1-1.06-1.06l12-12a.75.75 0 0 1 1.06 0"
+    /></g
+  ></svg
+>

package/dist/libIcons/CrossIcon.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CrossIcon: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CrossIcon = InstanceType<typeof CrossIcon>;
+export default CrossIcon;

package/dist/locales/translations.js

@@ -1,16 +1,91 @@
 const translations = {
     ru: {
+        'common.select_tag': 'Сделайте выбор',
+        'debug.baud_rate_data': 'Данные',
+        /* Опции рeдактора свойств */
+        'constructor.props.action.update': 'Обновить',
+        'constructor.props.action.save': 'Сохранить',
+        'constructor.props.action.nosend': 'Без отправки',
+        'constructor.props.action.custom': 'Свой аргумент',
+        'constructor.props.height.small': 'Авто',
+        'constructor.props.height.medium': 'Средняя',
+        'constructor.props.height.large': 'Большая',
+        'constructor.props.align.left': 'Слева',
+        'constructor.props.align.center': 'По центру',
+        'constructor.props.align.right': 'Справа',
+        'constructor.props.type.main': 'Основной',
+        'constructor.props.type.sub': 'Вложенный',
+        'constructor.props.type.text': 'Текст',
+        'constructor.props.type.password': 'Пароль',
+        'constructor.props.type.number': 'Число',
+        'constructor.props.type.textarea': 'Область ',
+        'constructor.props.type.single': 'Простой',
+        'constructor.props.type.range': 'Диапазон',
+        'constructor.props.type.small': 'XS',
+        'constructor.props.type.base': 'S',
+        'constructor.props.type.large': 'M',
+        'constructor.props.type.huge': 'L',
+        'constructor.props.type.massive': 'XL',
+        'constructor.props.type.select': 'Список',
+        'constructor.props.type.buttons': 'Группа кнопок',
+        'constructor.props.type.selectput': 'Список+ввод',
+        'constructor.props.valuetype.text': 'Строка',
+        'constructor.props.valuetype.number': 'Число',
+        /* Общие для редактора свойств */
         'constructor.props.label': 'Текст надписи',
         'constructor.props.type': 'Тип',
+        'constructor.props.size': 'Размер',
+        'constructor.props.header': 'Заголовок пакета',
+        'constructor.props.argument': 'Аргумент',
+        'constructor.props.argument.info': 'Пользовтельский аргумент (a-z, A-Z, 0-9, -_!)',
+        'constructor.props.variables': 'Перечень переменных',
+        'constructor.props.variables.info': 'Поле для ввода имён переменных, разделенных пробелами',
+        'constructor.props.value': 'Значение',
+        'constructor.props.value.info': 'Поле для ввода Value пакета',
         'constructor.props.align': 'Выравнивание',
+        'constructor.props.image': 'Фоновое изображение',
+        'constructor.props.removeimage': 'Удалить изображение',
+        'constructor.props.name': 'Текст',
+        'constructor.props.height': 'Высота',
+        'constructor.props.colors': 'Цвет фона',
+        'constructor.props.maxlenght': 'Максимальная длина',
+        'constructor.props.regexp': 'Выражение валидации',
+        'constructor.props.regexp.info': 'Введите RegExp без /.../ (например: ^\\d+$)',
+        'constructor.props.minnum': 'Минимальное значение',
+        'constructor.props.maxnum': 'Максимальное значение',
+        'constructor.props.step': 'Шаг',
+        'constructor.props.rows': 'Количество строк',
+        'constructor.props.placeholder': 'Заполнитель',
+        'constructor.props.info': 'Подсказка',
+        'constructor.props.disabled': 'Отключить',
+        'constructor.props.readonly': 'Только для чтения',
+        'constructor.props.variable': 'Имя переменной',
+        'constructor.props.widthMode': 'Ширина кнопок',
+        'constructor.props.options.title': 'Опции компонента',
+        'constructor.props.valuetype': 'Тип значения',
+        'constructor.props.action': 'Действие при переключении',
+        'constructor.props.caption.left': 'Надпись слева',
+        'constructor.props.caption.right': 'Надпись справа',
         'constructor.props.bold': 'Жирный',
         'constructor.props.italic': 'Курсив',
-        'constructor.props.type.small': 'Малый',
-        'constructor.props.type.medium': 'Обычный',
-        'constructor.props.type.xlarge': 'Большой',
-        'constructor.props.align.left': 'Слева',
-        'constructor.props.align.center': 'По центру',
-        'constructor.props.align.right': 'Справа',
+        'constructor.props.background': 'Фон',
+        'constructor.props.min': 'Минимальное значение',
+        'constructor.props.max': 'Максимальное значение',
+        'constructor.props.units': 'Единица измерения',
+        'constructor.props.optionclass': 'Стили кнопки',
+        'constructor.props.optionvalue': 'Значение',
+        'constructor.props.optionname': 'Текст',
+        'constructor.props.copy': 'Копирование',
+        'constructor.props.table.columns': 'Колонки таблицы',
+        'constructor.props.table.columns.key': 'Имя ключа',
+        'constructor.props.table.columns.label': 'Название',
+        'constructor.props.table.columns.width': 'Ширина',
+        'constructor.props.table.columns.sortable': 'Сортировка',
+        'constructor.props.table.deletecolumn': 'Удалить колонку',
+        'constructor.props.table.deletebutton': 'Удалить кнопку',
+        'constructor.props.table.addaction': 'Добавить кнопку',
+        'constructor.props.table.keys': 'Перечень ключей',
+        'constructor.props.table.keys.info': 'Ключи таблицы, значения которых будут возвращаться',
     },
     en: {},
     zh: {},