poe-svelte-ui-lib 1.0.5 → 1.0.7

package/dist/Table/Table.svelte

@@ -3,10 +3,13 @@
   import { get } from 'svelte/store'
   import type { ITableHeader, ITableProps } from '../types'
   import { fly } from 'svelte/transition'
+  import { twMerge } from 'tailwind-merge'
+  import { Button, Modal } from '..'
+  import { t } from '../locales/i18n'
 
   let {
-    id = { value: crypto.randomUUID(), name: '' },
-    wrapperClass = 'bg-blue',
+    id = crypto.randomUUID(),
+    wrapperClass = '',
     label = { name: '', class: '' },
     body = [],
     header = [],
@@ -14,10 +17,11 @@
     cursor = null,
     loader,
     getData = () => {},
-    modalData = $bindable({ isOpen: false, rawData: '', formattedData: '' }),
     onClick,
   }: ITableProps<any> = $props()
 
+  let modalData = $state({ isOpen: false, rawData: '', formattedData: '' })
+
   /* Сортировка */
   let sortState: {
     key: string | null
@@ -119,40 +123,37 @@
   }
 </script>
 
-<div id={id.value} class={`flex h-full w-full flex-col overflow-hidden ${wrapperClass}`}>
+<div {id} class={twMerge(`bg-blue flex h-full w-full flex-col overflow-hidden`, wrapperClass)}>
   {#if label.name}
-    <h5 class={`w-full px-4 text-center ${label.class}`}>{label.name}</h5>
+    <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-[var(--border-color)]">
     <!-- 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="justify-center bg-[var(--bg-color)] p-2 text-center">
-          <div class="flex items-center justify-start gap-2">
-            <span>{column.label}</span>
-            {#if column.sortable}
-              <button
-                class="cursor-pointer font-bold transition-transform duration-75 hover:scale-110 active:scale-95"
-                onclick={() => sortRows(column.key as string)}
-              >
-                ↑↓
-              </button>
-            {/if}
-          </div>
+        <div class={twMerge(`justify-center bg-[var(--bg-color)] p-2 text-left`, column.label?.class)}>
+          <span>{column.label?.name}</span>
+          {#if column.sortable}
+            <button
+              class="inline-block cursor-pointer font-bold transition-transform duration-75 hover:scale-110 active:scale-95"
+              onclick={() => sortRows(column.key as string)}
+            >
+              ↑↓
+            </button>
+          {/if}
         </div>
       {/each}
     </div>
 
     <!-- Table Body с прокруткой -->
-    <div class="flex-1 overflow-y-auto bg-[var(--conteiner-color)]/50" bind:this={container} onscroll={handleScroll}>
+    <div class="flex-1 overflow-y-auto bg-[var(--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)}
             <div
               class="relative flex w-full min-w-0 items-center px-2 py-1 break-words
               {index % 2 ? '!bg-[var(--back-color)]/40' : ''}
-              {column.cellClass}
               {column.align === 'center'
                 ? 'flex justify-center text-center'
                 : column.align === 'right'
@@ -163,11 +164,9 @@
                 <div class="flex w-full flex-col gap-1">
                   {#each column.buttons as button (button)}
                     <button
-                      class="
-                          cursor-pointer rounded-full !bg-[var(--bg-color)] px-4 py-1 font-medium
-                          transition-shadow outline-none select-none hover:shadow-md
-                          {typeof button.class === 'function' ? button.class(row) : button.class}
-                          "
+                      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-[var(--bg-color)]"
                       onclick={() => buttonClick(row, button)}
                     >
                       {typeof button.name === 'function' ? button.name(row) : button.name}
@@ -175,12 +174,15 @@
                   {/each}
                 </div>
               {:else if column.image}
-                <div class="flex items-center justify-center" style={`width: ${column.image.width || '5rem'}; height: ${column.image.height || '5rem'};`}>
+                <div
+                  class="flex items-center justify-center"
+                  style={`width: ${column.image.width || '5rem'}; height: ${column.image.height || '5rem'};`}
+                >
                   {#if hasImage(column, row)}
                     <img
                       src={typeof column.image?.src === 'function' ? column.image.src(row) : column.image?.src || ''}
                       alt={column.image.alt ?? 'Image'}
-                      class="h-full w-full object-cover {column.image.class || ''}"
+                      class={twMerge(`h-full w-full object-cover ${column.image.class || ''}`)}
                       loading="lazy"
                     />
                   {:else if column.image.defaultIcon}
@@ -189,7 +191,9 @@
                 </div>
               {:else}
                 <div
-                  class="w-full max-w-full break-words {column.overflow?.truncated ? 'overflow-hidden text-ellipsis whitespace-nowrap' : 'whitespace-normal'}"
+                  class="w-full max-w-full break-words {column.overflow?.truncated
+                    ? 'overflow-hidden text-ellipsis whitespace-nowrap'
+                    : '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
@@ -218,7 +222,7 @@
 
                 {#if column.overflow?.copy}
                   <button
-                    class="right-2 flex cursor-pointer border-none bg-transparent"
+                    class="m-2 flex cursor-pointer border-none bg-transparent text-2xl"
                     onclick={(e) => {
                       e.preventDefault()
                       navigator.clipboard.writeText(row[column.key])
@@ -227,7 +231,15 @@
                     }}
                     aria-label="Копировать текст"
                   >
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" viewBox="0 0 24 24">
+                    {#if copiedCell.y === index && copiedCell.x === column.key}
+                      <div
+                        class="absolute top-1/2 right-10 -translate-y-1/2 transform rounded-md bg-[var(--green-color)] px-2 py-1 text-sm shadow-lg"
+                        transition:fly={{ x: 10, duration: 200 }}
+                      >
+                        ✓
+                      </div>
+                    {/if}
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                       <g fill="none" stroke="currentColor" stroke-width="1.5">
                         <path
                           d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"
@@ -236,15 +248,6 @@
                       </g>
                     </svg>
                   </button>
-
-                  {#if copiedCell.y === index && copiedCell.x === column.key}
-                    <div
-                      class="absolute top-1/2 right-10 -translate-y-1/2 transform rounded-md bg-[var(--green-color)] px-2 py-1 text-sm shadow-lg"
-                      transition:fly={{ x: 10, duration: 200 }}
-                    >
-                      ✓
-                    </div>
-                  {/if}
                 {/if}
               {/if}
             </div>
@@ -266,10 +269,26 @@
     {/if}
 
     <!-- Нижнее поле для сводной информации -->
-    {#if footer != ''}
+    {#if footer}
       <div class="flex h-8 items-center justify-center bg-[var(--bg-color)]">
         <h5>{footer}</h5>
       </div>
     {/if}
   </div>
 </div>
+
+<Modal isOpen={modalData.isOpen} title={$t('debug.baud_rate_data')}>
+  {#snippet main()}
+    {@html modalData.formattedData}
+  {/snippet}
+  {#snippet footer()}
+    <Button
+      content={{ name: 'Copy' }}
+      wrapperClass="w-20 bg-pink"
+      onClick={() => {
+        navigator.clipboard.writeText(modalData.rawData)
+        modalData.isOpen = false
+      }}
+    />
+  {/snippet}
+</Modal>

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

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

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,22 +1,26 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge'
   import type { ITextFieldProps } from '../types'
 
-  let {
-    id = { value: crypto.randomUUID(), name: '' },
-    wrapperClass = '',
-    label = { name: '', class: '' },
-    type = 'small',
-    bold = false,
-    italic = false,
-  }: ITextFieldProps = $props()
+  let { id = crypto.randomUUID(), wrapperClass = '', background = false, content = { name: '', class: '', size: 'base' } }: ITextFieldProps = $props()
 
   const textSize = {
-    small: 'text-base',
-    medium: 'text-xl',
-    xlarge: 'text-2xl',
-  }
+    small: 'text-sm',
+    base: 'text-base',
+    large: 'text-2xl',
+    huge: 'text-4xl',
+    massive: 'text-5xl',
+  } as const
 </script>
 
-<div id={id.value} class="relative flex w-full flex-col items-center {wrapperClass}">
-  <p class="w-full text-center {label.class} {textSize[type]} {bold ? 'font-bold' : ''} {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

@@ -0,0 +1,92 @@
+<!-- $lib/ElementsUI/GridAccordionProps.svelte -->
+<script lang="ts">
+  import { t } from '../locales/i18n'
+  import { updateProperty, type ITextFieldProps, type UIComponent } from '../types'
+  import * as UI from '../index'
+  import { optionsStore } from '../options'
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<ITextFieldProps> }
+    onPropertyChange: (value: string | object) => void
+  }>()
+
+  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.content?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
+    ),
+  )
+  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}
+  <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.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)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.align') }}
+        type="buttons"
+        value={initialAlign}
+        options={$optionsStore.ALIGN_OPTIONS}
+        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
+        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/TextField/TextFieldProps.svelte.d.ts

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

package/dist/index.d.ts

@@ -1,15 +1,15 @@
 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';
 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 Loader } from './Loader.svelte';
-export { default as MessageModal } from './MessageModal.svelte';
+export { default as TextFieldProps } from './TextField/TextFieldProps.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,15 +2,15 @@
 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';
 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 Loader } from './Loader.svelte';
-export { default as MessageModal } from './MessageModal.svelte';
+export { default as TextFieldProps } from './TextField/TextFieldProps.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"