poe-svelte-ui-lib 1.0.4 → 1.0.6

package/dist/Accordion/Accordion.svelte

@@ -17,16 +17,30 @@
   transition:slide={{ duration: 250 }}
 >
   <button
-    class="flex w-full cursor-pointer items-center justify-between transition-shadow duration-250 sm:p-4 sm:px-6
+    class="flex p-4 w-full cursor-pointer items-center justify-between transition-shadow duration-250
     {props.type === 'sub' ? 'border-b border-[var(--border-color)]' : ''}"
     onclick={toggle}
   >
-    <span class="toggle m-0 cursor-pointer text-lg font-semibold {props.label?.class}">
-      {props.label?.name}
-    </span>
+    <div class="flex items-center w-full">
+      <span class={`flex items-center justify-center w-8 h-8 shrink-0 overflow-visible [&_svg]:w-full [&_svg]:h-full [&_svg]:max-w-full [&_svg]:max-h-full`}>
+        {#if props.icon?.svg}
+          {@html props.icon.svg}
+        {:else if props.icon?.component}
+          {@const IconComponent = props.icon?.component}
+          <IconComponent />
+        {/if}
+      </span>
+      <h4
+        class="{props.label?.class}
+        {props.label?.align === 'center' ? 'text-center flex-1' : props.label?.align === 'right' ? 'text-right flex-1 mr-2' : 'text-left flex-1 ml-2'}"
+      >
+        {props.label?.name}
+      </h4>
+    </div>
+
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      class="arrow h-[1.1rem] w-[1.1rem] transition-transform duration-250"
+      class="h-[1.1rem] w-[1.1rem] transition-transform duration-250"
       style="transform: rotate({isOpen ? 180 : 0}deg)"
       viewBox="0 0 24 24"
     >
@@ -35,7 +49,7 @@
         stroke="currentColor"
         stroke-linecap="round"
         stroke-linejoin="round"
-        stroke-width="1.5"
+        stroke-width="2"
         d="M18 12.5s-4.419 6-6 6s-6-6-6-6m12-7s-4.419 6-6 6s-6-6-6-6"
         color="currentColor"
       />
@@ -44,8 +58,9 @@
 
   {#if isOpen}
     <div
-      class="flex w-full flex-wrap items-start justify-around p-4 sm:p-3 {props.type === 'sub' ? '' : 'border-t border-[var(--border-color)]'}"
+      class="flex w-full flex-wrap items-start justify-around p-2 {props.type === 'sub' ? '' : 'border-t border-[var(--border-color)]'}"
       transition:slide={{ duration: 250 }}
+      style={props.image ? `background-image: url('${props.image}'); background-size: cover;` : ''}
     >
       {@render props.children?.()}
     </div>

package/dist/Graph/Graph.svelte

@@ -34,7 +34,6 @@
     { id: 'RefreshOption-1000', name: '1000', value: 1000, class: '' },
     { id: 'RefreshOption-5000', name: '5000', value: 5000, class: '' },
   ]
-  // const REFRESH_OPTIONS = [10, 25, 50, 100, 250, 500, 1000, 5000]
   const SCALE_OPTIONS: ISelectOption[] = [
     { id: 'ScaleOption-50', name: '50', value: 50, class: '' },
     { id: 'ScaleOption-100', name: '100', value: 100, class: '' },
@@ -42,7 +41,6 @@
     { id: 'ScaleOption-1000', name: '1000', value: 1000, class: '' },
     { id: 'ScaleOption-2000', name: '2000', value: 2000, class: '' },
   ]
-  // const SCALE_OPTIONS = [50, 100, 500, 1000, 2000]
   let selectedRefreshRate = $state(0)
   let selectedScale = $state(100)
   const maxDataPoints = $derived(selectedRefreshRate == 0 ? 20 : 100)
@@ -246,7 +244,7 @@
       <Select
         label={{ name: 'Scale' }}
         options={SCALE_OPTIONS}
-        value={REFRESH_OPTIONS.find((o) => o.value == selectedScale)}
+        value={SCALE_OPTIONS.find((o) => o.value == selectedScale)}
         onUpdate={(value) => (selectedScale = value.value as number)}
       />
 

package/dist/Input/Input.svelte

@@ -173,7 +173,7 @@
           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}

package/dist/Select/Select.svelte

@@ -18,6 +18,7 @@
     type = 'select',
     value = $bindable(),
     options = [],
+    placeholder= '---', 
     onUpdate,
   }: ISelectProps<T> = $props()
 
@@ -101,7 +102,7 @@
       aria-expanded={isDropdownOpen}
       {disabled}
     >
-      {value?.name || ''}
+      {value?.name || placeholder}
     </button>
 
     {#if isDropdownOpen}

package/dist/Slider/Slider.svelte

@@ -1,6 +1,9 @@
 <!-- $lib/ElementsUI/Slider.svelte -->
 <script lang="ts">
   import type { ISliderProps } from '../types'
+  import IconGripVerticalLeft from '../libIcons/IconGripVerticalLeft.svelte'
+  import IconGripVerticalRight from '../libIcons/IconGripVerticalRight.svelte'
+  import IconGripVerticalDual from '../libIcons/IconGripVerticalDual.svelte'
 
   let {
     id = { name: '', value: crypto.randomUUID() },
@@ -94,17 +97,17 @@
   {/if}
 
   <!-- Слайдер -->
-  <div class="relative flex h-2 w-full justify-center {disabled ? 'opacity-50' : ''}" id={id.value}>
+  <div class="relative flex h-8 rounded-full w-full justify-center {disabled ? 'opacity-50 cursor-not-allowed' : ''}" id={id.value}>
     {#if isRange}
       <!-- Трек и активная зона -->
       <div
-        class={`absolute h-full w-full rounded bg-gray-400 ${disabled ? '' : 'cursor-pointer'}`}
+        class={`absolute h-full w-full rounded-full bg-[var(--gray-color)] ${disabled ? '' : 'cursor-pointer'}`}
         role="button"
         tabindex={null}
         onkeydown={null}
         onclick={disabled ? undefined : handleTrackClick}
       >
-        <div class="absolute h-full rounded" style={`left: ${lowerPosition}%; right: ${100 - upperPosition}%; background-color: var(--bg-color)`}></div>
+        <div class="absolute h-full rounded-full bg-[var(--bg-color)]" style={`left: ${lowerPosition}%; right: ${100 - upperPosition}%;`}></div>
       </div>
 
       <!-- Ползунки -->
@@ -125,6 +128,12 @@
         {disabled}
         class={`absolute h-full w-full appearance-none bg-transparent ${activeThumb === 'lower' ? 'z-30' : 'z-20'}`}
       />
+      <div
+        class="absolute z-40 pointer-events-none rounded-full bg-[var(--field-color)]"
+        style={`left: calc(${lowerPosition}% + 0rem); top: 50%; transform: translateY(-50%)`}
+      >
+        <IconGripVerticalLeft />
+      </div>
 
       <input
         type="range"
@@ -143,16 +152,25 @@
         {disabled}
         class={`absolute h-full w-full appearance-none bg-transparent ${activeThumb === 'upper' ? 'z-30' : 'z-20'}`}
       />
+      <div
+        class="absolute z-40 pointer-events-none rounded-full bg-[var(--field-color)]"
+        style={`left: calc(${upperPosition}% - 2rem); top: 50%; transform: translateY(-50%)`}
+      >
+        <IconGripVerticalRight />
+      </div>
     {:else}
       <!-- Одиночный слайдер -->
       <div
-        class={`absolute h-full w-full rounded bg-gray-400 ${disabled ? '' : 'cursor-pointer'}`}
+        class={`absolute h-full w-full rounded-full bg-[var(--gray-color)] ${disabled ? '' : 'cursor-pointer'}`}
         role="button"
         tabindex={null}
         onkeydown={null}
         onclick={disabled ? undefined : handleTrackClick}
       >
-        <div class="absolute h-full rounded" style={`width: ${singlePosition}%; background-color: var(--bg-color)`}></div>
+        <div
+          class="absolute h-full {singlePosition === 100 ? 'rounded-full z-10' : 'rounded-l-full z-10'}"
+          style={`width: ${singlePosition}%; background-color: var(--bg-color)`}
+        ></div>
       </div>
 
       <input
@@ -168,8 +186,14 @@
             }}
         onmouseup={disabled ? undefined : () => onUpdate(singleValue)}
         {disabled}
-        class="absolute z-30 h-full w-full appearance-none bg-transparent"
+        class="absolute z-20 h-full w-full appearance-none bg-transparent"
       />
+      <div
+        class="absolute z-30 pointer-events-none rounded-full bg-[var(--field-color)]"
+        style={`left: clamp(1rem, ${singlePosition}%, calc(100% - 1rem)); top: 50%; transform: translate(-50%, -50%)`}
+      >
+        <IconGripVerticalDual />
+      </div>
     {/if}
   </div>
 
@@ -220,41 +244,56 @@
     margin: 0;
     padding: 0;
     pointer-events: none;
+    outline: none;
   }
 
-  input[type='range']:disabled::-webkit-slider-thumb {
-    cursor: auto;
-  }
-
+  /* Webkit thumb */
   input[type='range']::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
-    width: 1rem;
-    height: 1rem;
+    width: 2rem;
+    height: 2rem;
     border-radius: 50%;
-    background: var(--border-color);
+    background: transparent;
     cursor: pointer;
     pointer-events: auto;
-    transition: all 0.2s ease;
-  }
-
-  input[type='range']:disabled::-webkit-slider-thumb {
-    background: var(--gray-color);
+    border: none;
   }
 
+  /* Firefox thumb */
   input[type='range']::-moz-range-thumb {
-    width: 1rem;
-    height: 1rem;
+    width: 2rem;
+    height: 2rem;
     border-radius: 50%;
-    background: var(--border-color);
+    background: transparent;
     cursor: pointer;
     pointer-events: auto;
     border: none;
-    transition: all 0.2s ease;
+  }
+
+  /* Webkit track */
+  input[type='range']::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    border-radius: 0;
+    border: none;
+  }
+
+  /* Firefox track */
+  input[type='range']::-moz-range-track {
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    border-radius: 0;
+    border: none;
+  }
+
+  input[type='range']:disabled::-webkit-slider-thumb {
+    cursor: not-allowed;
   }
 
   input[type='range']:disabled::-moz-range-thumb {
-    background: var(--gray-color);
     cursor: not-allowed;
   }
 </style>

package/dist/Switch/Switch.svelte

@@ -15,7 +15,7 @@
   const options = [1, 2]
   let checked = $derived(value === options[1])
 
-  let knobTransform = $derived(checked ? `translateX(calc(${height} * 0.9))` : 'translateX(0)')
+  let knobTransform = $derived(checked ? `translateX(calc(${height}))` : 'translateX(0)')
 
   $effect(() => {
     if (value === undefined || value === null) value = options[0]
@@ -66,14 +66,15 @@
         onchange={handleToggle}
       />
       <span
-        class="relative flex items-center rounded-full transition-all duration-250 {checked ? '!bg-[var(--bg-color)]' : '!bg-[var(--gray-color)]'} {disabled
-          ? ''
-          : 'cursor-pointer'}"
+        class="relative flex items-center rounded-full transition-all duration-250
+        {checked ? '!bg-[var(--bg-color)]' : '!bg-[var(--gray-color)]'}
+        {disabled ? '' : 'cursor-pointer'}"
         style="width: {`calc(${height} * 2)`}; height: {height};"
       >
         <span
-          class="absolute rounded-full bg-[var(--back-color)] transition-all duration-250 {disabled ? 'opacity-60' : 'cursor-pointer'}"
-          style="width: {`calc(${height} * 0.8)`}; height: {`calc(${height} * 0.8)`}; margin: 0 {`calc(${height} * 0.1)`}; transform: {knobTransform};"
+          class="absolute rounded-full bg-[var(--back-color)] transition-all duration-250
+          {disabled ? 'opacity-60' : 'cursor-pointer'}"
+          style="width: {`calc(${height} * 0.75)`}; height: {`calc(${height} * 0.75)`}; margin: 0 {`calc(${height} * 0.1)`}; transform: {knobTransform};"
         ></span>
       </span>
     </label>

package/dist/Table/Table.svelte

@@ -8,12 +8,12 @@
     id = { value: crypto.randomUUID(), name: '' },
     wrapperClass = 'bg-blue',
     label = { name: '', class: '' },
-    tableBody = [],
-    tableHeader = [],
+    body = [],
+    header = [],
+    footer = '',
     cursor = null,
     loader,
     getData = () => {},
-    info = '',
     modalData = $bindable({ isOpen: false, rawData: '', formattedData: '' }),
     onClick,
   }: ITableProps<any> = $props()
@@ -36,7 +36,7 @@
       sortState.direction = 'asc'
     }
 
-    tableBody = [...tableBody].sort((a, b) => {
+    body = [...body].sort((a, b) => {
       const aValue = a[key]
       const bValue = b[key]
       if (typeof aValue === 'number' && typeof bValue === 'number') {
@@ -126,8 +126,8 @@
 
   <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: ${tableHeader.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};`}>
-      {#each tableHeader as column (column)}
+    <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>
@@ -146,9 +146,9 @@
 
     <!-- Table Body с прокруткой -->
     <div class="flex-1 overflow-y-auto bg-[var(--conteiner-color)]/50" bind:this={container} onscroll={handleScroll}>
-      <div class="grid min-w-0" style={`grid-template-columns: ${tableHeader.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};`}>
-        {#each tableBody as row, index (row)}
-          {#each tableHeader as column (column)}
+      <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' : ''}
@@ -218,7 +218,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,24 +227,19 @@
                     }}
                     aria-label="Копировать текст"
                   >
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" 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"
-                        />
-                        <path d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3" />
-                      </g>
-                    </svg>
+                    {#if copiedCell.y === index && copiedCell.x === column.key}
+                      ✅
+                    {:else}
+                      <svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" 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"
+                          />
+                          <path d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3" />
+                        </g>
+                      </svg>
+                    {/if}
                   </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,9 +261,9 @@
     {/if}
 
     <!-- Нижнее поле для сводной информации -->
-    {#if info != ''}
+    {#if footer != ''}
       <div class="flex h-8 items-center justify-center bg-[var(--bg-color)]">
-        <h5>{info}</h5>
+        <h5>{footer}</h5>
       </div>
     {/if}
   </div>

package/dist/TextField/TextField.svelte

@@ -1,22 +1,20 @@
 <script lang="ts">
   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 = '', label = { name: '', bold: false, italic: false, color: '' }, type = 'small' }: ITextFieldProps = $props()
 
   const textSize = {
+    xsmall: 'text-sm',
     small: 'text-base',
-    medium: 'text-xl',
+    medium: 'text-lg',
+    large: 'text-xl',
     xlarge: 'text-2xl',
-  }
+    xxlarge: 'text-3xl',
+    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="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>

package/dist/TextField/TextFieldProps.svelte

@@ -0,0 +1,92 @@
+<!-- $lib/ElementsUI/GridAccordionProps.svelte -->
+<script lang="ts">
+  import { t } from '../locales/i18n'
+  import type { ITextFieldProps, 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.type))
+
+  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 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)
+  }
+</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.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string)}
+        type="text"
+      />
+      <UI.Select
+        label={{ name: $t('constructor.props.type') }}
+        type="buttons"
+        value={currentType}
+        options={$optionsStore.TEXTFIELD_SIZE_OPTIONS}
+        onUpdate={(item) => updateProperty('type', item.value as string)}
+      />
+    </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)}
+      />
+    </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)}
+      />
+      <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)}
+      />
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,10 @@
+import type { ITextFieldProps, 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

@@ -10,6 +10,7 @@ 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 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

@@ -11,6 +11,7 @@ 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 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/IconGripVerticalDual.svelte

@@ -0,0 +1,12 @@
+<!-- appIcons/IconGripVerticalDual.svelte -->
+<script lang="ts"></script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 24 24">
+  <g stroke="currentColor" stroke-linecap="round" stroke-width="1.5" fill="none">
+    <line x1="4" y1="11" x2="4" y2="13" />
+    <line x1="8" y1="9" x2="8" y2="15" />
+    <line x1="12" y1="6" x2="12" y2="18" />
+    <line x1="16" y1="9" x2="16" y2="15" />
+    <line x1="20" y1="11" x2="20" y2="13" />
+  </g>
+</svg>

package/dist/libIcons/IconGripVerticalDual.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 IconGripVerticalDual: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IconGripVerticalDual = InstanceType<typeof IconGripVerticalDual>;
+export default IconGripVerticalDual;

package/dist/libIcons/IconGripVerticalLeft.svelte

@@ -0,0 +1,9 @@
+<script lang="ts"></script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 24 24">
+  <g stroke="currentColor" stroke-linecap="round" stroke-width="1.5" fill="none">
+    <line x1="8" y1="11" x2="8" y2="13" />
+    <line x1="12" y1="9" x2="12" y2="15" />
+    <line x1="16" y1="6" x2="16" y2="18" />
+  </g>
+</svg>

package/dist/libIcons/IconGripVerticalLeft.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 IconGripVerticalLeft: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IconGripVerticalLeft = InstanceType<typeof IconGripVerticalLeft>;
+export default IconGripVerticalLeft;

package/dist/libIcons/IconGripVerticalRight.svelte

@@ -0,0 +1,9 @@
+<script lang="ts"></script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 24 24">
+  <g stroke="currentColor" stroke-linecap="round" stroke-width="1.5" fill="none">
+    <line x1="8" y1="6" x2="8" y2="18" />
+    <line x1="12" y1="9" x2="12" y2="15" />
+    <line x1="16" y1="11" x2="16" y2="13" />
+  </g>
+</svg>

package/dist/libIcons/IconGripVerticalRight.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 IconGripVerticalRight: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IconGripVerticalRight = InstanceType<typeof IconGripVerticalRight>;
+export default IconGripVerticalRight;

package/dist/locales/i18n.d.ts

@@ -0,0 +1,9 @@
+import { type Readable } from 'svelte/store';
+export declare const Language: import("svelte/store").Writable<string>;
+export declare function setLanguage(newLang: string): void;
+export declare const LOCALES: {
+    id: string;
+    name: string;
+    value: string;
+}[];
+export declare const t: Readable<(key: string) => string>;

package/dist/locales/i18n.js

@@ -0,0 +1,33 @@
+import { derived } from 'svelte/store';
+import { writable } from 'svelte/store';
+import translations from './translations';
+/* Язык по умолчанию */
+let initialLanguage = 'ru';
+/* Проверяем, доступен ли localStorage */
+if (typeof window !== 'undefined') {
+    initialLanguage = localStorage.getItem('AppLanguage') || navigator.language?.split('-')[0]?.toLowerCase() || 'ru';
+    const supported = ['ru', 'en', 'zh'];
+    if (!supported.includes(initialLanguage)) {
+        initialLanguage = 'ru';
+    }
+}
+/* Создаем хранилище с начальным значением языка */
+export const Language = writable(initialLanguage);
+/* Функция для изменения языка */
+export function setLanguage(newLang) {
+    if (typeof window !== 'undefined') {
+        localStorage.setItem('AppLanguage', newLang);
+    }
+    Language.set(newLang);
+}
+/* Поддерживаемые языки (код, название языка, флаг) */
+export const LOCALES = [
+    { id: 'app-language-ru', name: 'РУС', value: 'ru' },
+    { id: 'app-language-en', name: 'ENG', value: 'en' },
+    { id: 'app-language-zh', name: '中文', value: 'zh' },
+];
+/* Функция для перевода для текущего языка */
+function translate(locale, key) {
+    return translations[locale]?.[key] || key;
+}
+export const t = derived(Language, ($lang) => (key) => translate($lang, key));

package/dist/locales/translations.d.ts

@@ -0,0 +1,7 @@
+interface Translations {
+    [language: string]: {
+        [key: string]: string;
+    };
+}
+declare const translations: Translations;
+export default translations;

package/dist/locales/translations.js

@@ -0,0 +1,18 @@
+const translations = {
+    ru: {
+        'constructor.props.label': 'Текст надписи',
+        'constructor.props.type': 'Тип',
+        'constructor.props.align': 'Выравнивание',
+        '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': 'Справа',
+    },
+    en: {},
+    zh: {},
+};
+export default translations;

package/dist/options.d.ts

@@ -8,47 +8,47 @@ export declare const optionsStore: import("svelte/store").Readable<{
     SHORT_ARGUMENT_OPTION: {
         id: string;
         value: string;
-        name: any;
+        name: string;
         class: string;
     }[];
     FULL_ARGUMENT_OPTION: {
         id: string;
         value: string;
-        name: any;
+        name: string;
         class: string;
     }[];
     INPUT_TYPE_OPTIONS: {
         id: string;
         value: string;
-        name: any;
+        name: string;
     }[];
     SELECT_TYPE_OPTIONS: {
         id: string;
         value: string;
-        name: any;
+        name: string;
         class: string;
     }[];
     SELECT_VALUE_TYPE_OPTIONS: ({
         id: string;
         value: "text";
-        name: any;
+        name: string;
         class: string;
     } | {
         id: string;
         value: "number";
-        name: any;
+        name: string;
         class: string;
     })[];
     SLIDER_TYPE_OPTIONS: {
         id: string;
         value: string;
-        name: any;
+        name: string;
         class: string;
     }[];
     TEXTFIELD_SIZE_OPTIONS: {
         id: string;
         value: string;
-        name: any;
+        name: string;
         class: string;
     }[];
     COLOR_OPTIONS: {
@@ -60,19 +60,19 @@ export declare const optionsStore: import("svelte/store").Readable<{
     ALIGN_OPTIONS: {
         id: string;
         value: string;
-        name: any;
+        name: string;
         class: string;
     }[];
     HEIGHT_OPTIONS: {
         id: string;
         value: string;
-        name: any;
+        name: string;
         class: string;
     }[];
     ACCORDION_TYPE_OPTIONS: {
         id: string;
         value: string;
-        name: any;
+        name: string;
         class: string;
     }[];
 }>;

package/dist/types.d.ts

@@ -49,13 +49,18 @@ export interface IButtonProps {
     onClick?: () => void;
 }
 export interface IAccordionProps {
-    id?: {
+    id: {
         value?: string;
         name?: string;
     };
     label?: {
         name?: string;
         class?: string;
+        align?: 'left' | 'center' | 'right';
+    };
+    icon?: {
+        svg?: string;
+        component?: ConstructorOfATypedSvelteComponent | null;
     };
     isOpen: boolean;
     componentClass?: string;
@@ -110,6 +115,7 @@ export interface ISelectProps<T = unknown> {
     type?: 'select' | 'buttons' | 'input';
     value?: ISelectOption<T> | null;
     options?: ISelectOption<T>[];
+    placeholder?: string;
     eventHandler?: IUIComponentHandler;
     onUpdate?: (value: ISelectOption<T>) => void;
 }
@@ -178,18 +184,15 @@ export interface ISliderProps {
     onUpdate?: (value: number | [number, number]) => void;
 }
 export interface ITextFieldProps {
-    id?: {
-        name?: string;
-        value?: string;
-    };
+    id?: string;
     wrapperClass?: string;
     label?: {
         name?: string;
-        class?: string;
+        bold?: boolean;
+        italic?: boolean;
+        color?: string;
     };
-    type?: 'small' | 'medium' | 'xlarge';
-    bold?: boolean;
-    italic?: boolean;
+    type?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'huge' | 'massive';
 }
 export interface IProgressBarProps {
     id?: {
@@ -269,9 +272,9 @@ export interface ITableProps<T extends object> {
         name?: string;
         class?: string;
     };
-    tableHeader: ITableHeader<T>[];
-    tableBody: T[];
-    info?: string;
+    header: ITableHeader<T>[];
+    body: T[];
+    footer?: string;
     cursor?: string | null;
     loader?: Writable<boolean>;
     getData?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -37,12 +37,13 @@
     "typescript": "^5.9.3"
   },
   "devDependencies": {
-    "@sveltejs/kit": "^2.43.7",
+    "@sveltejs/kit": "^2.44.0",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "publint": "^0.3.13",
-    "svelte": "^5.39.8",
+    "publint": "^0.3.14",
+    "svelte": "^5.39.9",
     "svelte-preprocess": "^6.0.3",
-    "vite": "^7.1.9"
+    "vite": "^7.1.9",
+    "vite-plugin-compression": "^0.5.1"
   }
 }