poe-svelte-ui-lib 1.0.2 → 1.0.5

package/README.md

@@ -0,0 +1 @@
+Набор компонентов на Svelte в режиме рун

package/dist/Accordion/Accordion.svelte

@@ -21,7 +21,11 @@
     {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}">
+    <span class="toggle m-0 cursor-pointer text-lg flex items-center gap-2 font-semibold {props.label?.class}">
+      {#if props.icon?.component}
+        {@const IconComponent = props.icon?.component}
+        <IconComponent {...props.icon?.properties} />
+      {/if}
       {props.label?.name}
     </span>
     <svg

package/dist/Button/Button.svelte

@@ -1,39 +1,9 @@
 <!-- $lib/ElementsUI/Button.svelte -->
 <script lang="ts">
   import { onMount } from 'svelte'
-  // import { type IButtonProps } from '../types'
+  import type { IButtonProps } from '../types'
   import { fly } from 'svelte/transition'
 
-  interface IUIComponentHandler {
-    Header?: string
-    Argument?: string
-    Value?: string
-    Variables?: string[]
-  }
-
-  interface IButtonProps {
-    id?: { value?: string; name?: string }
-    wrapperClass?: string
-    label?: { name?: string; class?: string }
-    componentClass?: string
-    name?: string
-    icon?: {
-      component?: ConstructorOfATypedSvelteComponent | null
-      properties?: Record<string, unknown>
-    }
-    info?: string
-    keyBind?: {
-      key?: string
-      ctrlKey?: boolean
-      shiftKey?: boolean
-      altKey?: boolean
-      metaKey?: boolean /* Поддержка Meta (Cmd на Mac) */
-    }
-    disabled?: boolean
-    eventHandler?: IUIComponentHandler
-    onClick?: () => void
-  }
-
   let {
     id = { value: crypto.randomUUID(), name: '' },
     wrapperClass = 'bg-blue',
@@ -94,7 +64,7 @@
       id={id.value}
       class={`
         relative m-0 inline-block w-full items-center rounded-2xl border border-[var(--bg-color)] bg-[var(--bg-color)]
-        px-2 py-1 font-semibold transition duration-200 select-none
+        px-2 py-1 font-semibold shadow-sm transition duration-200 select-none
         ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:shadow-md active:scale-97'}
         ${componentClass}
       `}
@@ -129,15 +99,12 @@
     {#if showInfo}
       <div
         transition:fly={{ y: -15, duration: 300 }}
-        class="absolute bottom-full left-1/2 z-50 mb-2 w-max max-w-xs rounded-md px-3 py-1 text-sm shadow-lg"
-        style="background: color-mix(in srgb, var(--yellow-color) 30%, var(--back-color)); transform: translateX(-50%);"
+        class="absolute bottom-full left-1/2 z-50 mb-2 w-max max-w-xs rounded-md bg-[var(--conteiner-color)] px-3 py-1 text-sm shadow-lg"
+        style="transform: translateX(-50%);"
       >
         {info}
         <!-- Треугольная стрелка -->
-        <div
-          class="absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 transform"
-          style="background: color-mix(in srgb, var(--yellow-color) 30%, var(--back-color));"
-        ></div>
+        <div class="absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 transform bg-[var(--conteiner-color)]"></div>
       </div>
     {/if}
   </div>

package/dist/Button/Button.svelte.d.ts

@@ -1,37 +1,4 @@
-interface IUIComponentHandler {
-    Header?: string;
-    Argument?: string;
-    Value?: string;
-    Variables?: string[];
-}
-interface IButtonProps {
-    id?: {
-        value?: string;
-        name?: string;
-    };
-    wrapperClass?: string;
-    label?: {
-        name?: string;
-        class?: string;
-    };
-    componentClass?: string;
-    name?: string;
-    icon?: {
-        component?: ConstructorOfATypedSvelteComponent | null;
-        properties?: Record<string, unknown>;
-    };
-    info?: string;
-    keyBind?: {
-        key?: string;
-        ctrlKey?: boolean;
-        shiftKey?: boolean;
-        altKey?: boolean;
-        metaKey?: boolean;
-    };
-    disabled?: boolean;
-    eventHandler?: IUIComponentHandler;
-    onClick?: () => void;
-}
+import type { IButtonProps } from '../types';
 declare const Button: import("svelte").Component<IButtonProps, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/ColorPicker/ColorPicker.svelte

@@ -1,6 +1,5 @@
 <!-- $lib/ElementsUI/ColorPicker.svelte -->
 <script lang="ts">
-  import { t } from '../locales/i18n'
   import type { IColorPickerProps } from '../types'
 
   let {
@@ -175,9 +174,8 @@
       </div>
 
       <!-- Яркость белого цвета -->
-      <p class="h-4 px-4 text-start font-bold">{$t('component.colorpicker.whitehue')}</p>
       <div
-        class="white-slider relative h-4 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
+        class="white-slider mt-4 relative h-4 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
         role="slider"
         aria-valuenow={null}
         tabindex={null}

package/dist/FileAttach/FileAttach.svelte

@@ -65,7 +65,7 @@
     <div class="relative">
       <button
         class="flex items-center justify-center overflow-hidden {imageSize.form === 'circle' ? 'rounded-full' : 'rounded-2xl'} 
-        border border-[var(--border-color)] bg-[var(--back-color)] transition duration-250 hover:shadow-lg
+        bg-[var(--back-color)] shadow-sm transition duration-250 hover:shadow-md
         {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}"
         style={`height: ${imageSize.height}; width: ${imageSize.width}`}
         onclick={triggerFileInput}
@@ -87,11 +87,11 @@
       <input {id} type="file" class="absolute -z-10 h-0 w-0 overflow-hidden opacity-0" {accept} {disabled} onchange={handleFileChange} />
     </div>
   {:else}
-    <label class="relative inline-block w-full font-normal">
+    <label class="relative inline-block w-full">
       <input
         {id}
         type="file"
-        class={`h-9 w-full rounded-2xl border border-[var(--border-color)] bg-[var(--back-color)] transition duration-250 hover:shadow-lg
+        class={`h-8.5 w-full rounded-2xl bg-[var(--back-color)] font-semibold shadow-sm transition duration-250 hover:shadow-md
           ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} file:h-full file:w-1/3 file:cursor-pointer 
           file:border-none file:bg-[var(--blue-color)] invalid:border-red-400 invalid:shadow-[0_0_6px_var(--red-color)]`}
         {accept}

package/dist/Input/Input.svelte

@@ -3,7 +3,6 @@
   import { onMount } from 'svelte'
   import { fly } from 'svelte/transition'
   import type { IInputProps } from '../types'
-  import { t } from '../locales/i18n'
 
   let {
     id = { name: '', value: crypto.randomUUID() },
@@ -127,19 +126,22 @@
         aria-label={showPassword ? 'Скрыть пароль' : 'Показать пароль'}
       >
         {#if showPassword}
-          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24">
-            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-              <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0" />
-              <path d="M21 12q-3.6 6-9 6t-9-6q3.6-6 9-6t9 6" />
-            </g>
-          </svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"
+            ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+              ><path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0" /><path
+                d="M2 12c1.6-4.097 5.336-7 10-7s8.4 2.903 10 7c-1.6 4.097-5.336 7-10 7s-8.4-2.903-10-7"
+              /></g
+            ></svg
+          >
         {:else}
-          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24">
-            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-              <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
-              <path d="M16.681 16.673A8.7 8.7 0 0 1 12 18q-5.4 0-9-6q1.908-3.18 4.32-4.674m2.86-1.146A9 9 0 0 1 12 6q5.4 0 9 6q-1 1.665-2.138 2.87M3 3l18 18" />
-            </g>
-          </svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"
+            ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+              ><path
+                stroke-linejoin="round"
+                d="M10.73 5.073A11 11 0 0 1 12 5c4.664 0 8.4 2.903 10 7a11.6 11.6 0 0 1-1.555 2.788M6.52 6.519C4.48 7.764 2.9 9.693 2 12c1.6 4.097 5.336 7 10 7a10.44 10.44 0 0 0 5.48-1.52m-7.6-7.6a3 3 0 1 0 4.243 4.243"
+              /><path d="m4 4l16 16" /></g
+            ></svg
+          >
         {/if}
       </button>
     {/if}
@@ -171,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 }}
         >
-          {$t('component.input.copy')}
+          ✓
         </div>
       {/if}
     {/if}
@@ -217,12 +219,11 @@
         onclick={() => (showInfo = !showInfo)}
         aria-label={showInfo ? 'Скрыть инфо' : 'Показать инфо'}
       >
-        <svg xmlns="http://www.w3.org/2000/svg" height="1.5rem" width="1.5rem" viewBox="0 0 24 24">
-          <path
-            fill="currentColor"
-            d="M12 16.5q.214 0 .357-.144T12.5 16v-4.5q0-.213-.144-.356T11.999 11t-.356.144t-.143.356V16q0 .213.144.356t.357.144M12 9.577q.262 0 .439-.177t.176-.438t-.177-.439T12 8.346t-.438.177t-.177.439t.177.438t.438.177M12.003 21q-1.867 0-3.51-.708q-1.643-.709-2.859-1.924t-1.925-2.856T3 12.003t.709-3.51Q4.417 6.85 5.63 5.634t2.857-1.925T11.997 3t3.51.709q1.643.708 2.859 1.922t1.925 2.857t.709 3.509t-.708 3.51t-1.924 2.859t-2.856 1.925t-3.509.709M12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"
-          />
-        </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"
+          ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+            ><circle cx="12" cy="12" r="10" stroke-width="1.3" /><path stroke-width="1.5" d="M12 16v-4.5" /><path stroke-width="1.8" d="M12 8.012v-.01" /></g
+          ></svg
+        >
       </button>
 
       {#if showInfo}

package/dist/Select/Select.svelte

@@ -3,7 +3,6 @@
   import { slide } from 'svelte/transition'
   import { onMount } from 'svelte'
   import type { ISelectOption, ISelectProps } from '../types'
-  import { t } from '../locales/i18n'
 
   let isDropdownOpen = $state(false)
   let dropdownElement: HTMLDivElement
@@ -19,6 +18,7 @@
     type = 'select',
     value = $bindable(),
     options = [],
+    placeholder= '---', 
     onUpdate,
   }: ISelectProps<T> = $props()
 
@@ -102,7 +102,7 @@
       aria-expanded={isDropdownOpen}
       {disabled}
     >
-      {value?.name || $t('common.select_tag')}
+      {value?.name || placeholder}
     </button>
 
     {#if isDropdownOpen}
@@ -131,10 +131,9 @@
       {#each options as option, index (option.id)}
         <button
           id={option.id}
-          class="m-0 inline-block min-w-0 flex-1 items-center border
-      border-[var(--border-color)] bg-[var(--bg-color)] px-2 py-1 font-semibold transition-all duration-200 select-none
-      {option.disabled || disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-lg'}
-      {option.value === value?.value && value !== null ? 'z-10 text-blue-600 ring-2 ring-[var(--blue-color)]' : ''}   
+           class="m-0 inline-block min-w-0 flex-1 items-center bg-[var(--bg-color)] px-2 py-1 font-semibold shadow-sm transition-all duration-200 select-none
+      {option.disabled || disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-md'}
+      {option.value === value?.value && value !== null ? 'z-10 !border-[var(--blue-color)] text-cyan-500 ring-3 ring-[var(--blue-color)]' : ''}  
       {option.class} {options.length > 0 && index === 0 ? 'rounded-l-2xl' : ''} {index === options.length - 1 ? 'rounded-r-2xl' : ''}"
           onclick={(e) => selectOption(option, e)}
           disabled={option.disabled}

package/dist/Slider/Slider.svelte

@@ -94,7 +94,7 @@
   {/if}
 
   <!-- Слайдер -->
-  <div class="relative flex h-2 w-full justify-center {disabled ? 'opacity-50' : ''}" id={id.value}>
+  <div class="relative flex h-2 w-full justify-center {disabled ? 'opacity-50 cursor-not-allowed' : ''}" id={id.value}>
     {#if isRange}
       <!-- Трек и активная зона -->
       <div

package/dist/Switch/Switch.svelte

@@ -43,12 +43,12 @@
   )
 </script>
 
-<div class="bg-blue relative flex w-full flex-col items-center justify-center {wrapperClass}">
+<div class="relative flex w-full flex-col items-center justify-center {wrapperClass}">
   {#if label.name}
     <h5 class={`w-full px-4 text-center ${label.class}`}>{label.name}</h5>
   {/if}
 
-  <div class="relative flex w-full grow items-center justify-center !bg-transparent" id={id.value}>
+  <div class="relative flex w-full grow items-center justify-center !bg-transparent">
     <button class="mr-2 {disabled ? 'opacity-60' : 'cursor-pointer'}" style="width: {maxCaptionWidth}; text-align: end;" onclick={() => handleCaptionClick(1)}
       >{label.captionLeft}</button
     >
@@ -58,6 +58,7 @@
       {disabled ? 'opacity-60' : ''}"
     >
       <input
+        id={id.value}
         type="checkbox"
         class="absolute left-1/2 h-full w-full -translate-x-1/2 cursor-pointer appearance-none rounded-md"
         bind:checked

package/dist/Table/Table.svelte

@@ -1,6 +1,5 @@
 <!-- $lib/ElementsUI/Table.svelte -->
 <script lang="ts">
-  import { t } from '../locales/i18n'
   import { get } from 'svelte/store'
   import type { ITableHeader, ITableProps } from '../types'
   import { fly } from 'svelte/transition'
@@ -9,12 +8,12 @@
     id = { value: crypto.randomUUID(), name: '' },
     wrapperClass = 'bg-blue',
     label = { name: '', class: '' },
-    tableBody = [],
-    tableHeader = [],
+    body = [],
+    header = [],
+    footer = '',
     cursor = null,
     loader,
     getData = () => {},
-    showInfo = true,
     modalData = $bindable({ isOpen: false, rawData: '', formattedData: '' }),
     onClick,
   }: ITableProps<any> = $props()
@@ -37,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') {
@@ -127,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>
@@ -147,12 +146,12 @@
 
     <!-- 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(--field-color)]' : ''}
+              {index % 2 ? '!bg-[var(--back-color)]/40' : ''}
               {column.cellClass}
               {column.align === 'center'
                 ? 'flex justify-center text-center'
@@ -243,7 +242,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 }}
                     >
-                      {$t('component.input.copy')}
+                      ✓
                     </div>
                   {/if}
                 {/if}
@@ -267,9 +266,9 @@
     {/if}
 
     <!-- Нижнее поле для сводной информации -->
-    {#if showInfo}
+    {#if footer != ''}
       <div class="flex h-8 items-center justify-center bg-[var(--bg-color)]">
-        <h5>{$t('catalog.nums')} {tableBody.length}</h5>
+        <h5>{footer}</h5>
       </div>
     {/if}
   </div>

package/dist/index.d.ts

@@ -1,26 +1,15 @@
 export { default as Accordion } from './Accordion/Accordion.svelte';
-export { default as AccordionProps } from './Accordion/AccordionProps.svelte';
 export { default as Button } from './Button/Button.svelte';
-export { default as ButtonProps } from './Button/ButtonProps.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
-export { default as ColorPickerProps } from './ColorPicker/ColorPickerProps.svelte';
 export { default as FileAttach } from './FileAttach/FileAttach.svelte';
 export { default as Graph } from './Graph/Graph.svelte';
-export { default as GraphProps } from './Graph/GraphProps.svelte';
 export { default as Input } from './Input/Input.svelte';
-export { default as InputProps } from './Input/InputProps.svelte';
 export { default as ProgressBar } from './ProgressBar/ProgressBar.svelte';
-export { default as ProgressBarProps } from './ProgressBar/ProgressBarProps.svelte';
 export { default as Select } from './Select/Select.svelte';
-export { default as SelectProps } from './Select/SelectProps.svelte';
 export { default as Slider } from './Slider/Slider.svelte';
-export { default as SliderProps } from './Slider/SliderProps.svelte';
 export { default as Switch } from './Switch/Switch.svelte';
-export { default as SwitchProps } from './Switch/SwitchProps.svelte';
 export { default as Table } from './Table/Table.svelte';
-export { default as TableProps } from './Table/TableProps.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

@@ -1,27 +1,16 @@
 /* Реэкспорт всех UI компонентов для удобного импорта */
 export { default as Accordion } from './Accordion/Accordion.svelte';
-export { default as AccordionProps } from './Accordion/AccordionProps.svelte';
 export { default as Button } from './Button/Button.svelte';
-export { default as ButtonProps } from './Button/ButtonProps.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
-export { default as ColorPickerProps } from './ColorPicker/ColorPickerProps.svelte';
 export { default as FileAttach } from './FileAttach/FileAttach.svelte';
 export { default as Graph } from './Graph/Graph.svelte';
-export { default as GraphProps } from './Graph/GraphProps.svelte';
 export { default as Input } from './Input/Input.svelte';
-export { default as InputProps } from './Input/InputProps.svelte';
 export { default as ProgressBar } from './ProgressBar/ProgressBar.svelte';
-export { default as ProgressBarProps } from './ProgressBar/ProgressBarProps.svelte';
 export { default as Select } from './Select/Select.svelte';
-export { default as SelectProps } from './Select/SelectProps.svelte';
 export { default as Slider } from './Slider/Slider.svelte';
-export { default as SliderProps } from './Slider/SliderProps.svelte';
 export { default as Switch } from './Switch/Switch.svelte';
-export { default as SwitchProps } from './Switch/SwitchProps.svelte';
 export { default as Table } from './Table/Table.svelte';
-export { default as TableProps } from './Table/TableProps.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/options.d.ts

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

package/dist/options.js

@@ -13,37 +13,37 @@ export const optionsStore = derived(t, ($t) => {
             { id: id(), name: 'ER!', value: 'ER!', class: '!w-1/4' },
         ],
         SHORT_ARGUMENT_OPTION: [
-            { id: id(), value: 'NoSave', name: $t('service.constructor.props.action.update'), class: '!w-1/3' },
-            { id: id(), value: 'Save', name: $t('service.constructor.props.action.save'), class: '!w-1/3' },
-            { id: id(), value: 'NoSend', name: $t('service.constructor.props.action.nosend'), class: '!w-1/3' },
+            { id: id(), value: 'NoSave', name: $t('constructor.props.action.update'), class: '!w-1/3' },
+            { id: id(), value: 'Save', name: $t('constructor.props.action.save'), class: '!w-1/3' },
+            { id: id(), value: 'NoSend', name: $t('constructor.props.action.nosend'), class: '!w-1/3' },
         ],
         FULL_ARGUMENT_OPTION: [
-            { id: id(), value: 'NoSave', name: $t('service.constructor.props.action.update'), class: '!w-1/3' },
-            { id: id(), value: 'Save', name: $t('service.constructor.props.action.save'), class: '!w-1/3' },
-            { id: id(), value: '', name: $t('service.constructor.props.action.custom'), class: '!w-1/3' },
+            { id: id(), value: 'NoSave', name: $t('constructor.props.action.update'), class: '!w-1/3' },
+            { id: id(), value: 'Save', name: $t('constructor.props.action.save'), class: '!w-1/3' },
+            { id: id(), value: '', name: $t('constructor.props.action.custom'), class: '!w-1/3' },
         ],
         INPUT_TYPE_OPTIONS: [
-            { id: id(), value: 'text', name: $t('service.constructor.props.type.text') },
-            { id: id(), value: 'password', name: $t('service.constructor.props.type.password') },
-            { id: id(), value: 'number', name: $t('service.constructor.props.type.number') },
-            { id: id(), value: 'text-area', name: $t('service.constructor.props.type.textarea') },
+            { id: id(), value: 'text', name: $t('constructor.props.type.text') },
+            { id: id(), value: 'password', name: $t('constructor.props.type.password') },
+            { id: id(), value: 'number', name: $t('constructor.props.type.number') },
+            { id: id(), value: 'text-area', name: $t('constructor.props.type.textarea') },
         ],
         SELECT_TYPE_OPTIONS: [
-            { id: id(), value: 'select', name: $t('service.constructor.props.type.select'), class: '!w-1/2' },
-            { id: id(), value: 'buttons', name: $t('service.constructor.props.type.buttons'), class: '!w-1/2' },
+            { id: id(), value: 'select', name: $t('constructor.props.type.select'), class: '!w-1/2' },
+            { id: id(), value: 'buttons', name: $t('constructor.props.type.buttons'), class: '!w-1/2' },
         ],
         SELECT_VALUE_TYPE_OPTIONS: [
-            { id: id(), value: 'text', name: $t('service.constructor.props.valuetype.text'), class: '!w-1/2' },
-            { id: id(), value: 'number', name: $t('service.constructor.props.valuetype.number'), class: '!w-1/2' },
+            { id: id(), value: 'text', name: $t('constructor.props.valuetype.text'), class: '!w-1/2' },
+            { id: id(), value: 'number', name: $t('constructor.props.valuetype.number'), class: '!w-1/2' },
         ],
         SLIDER_TYPE_OPTIONS: [
-            { id: id(), value: 'single', name: $t('service.constructor.props.type.single'), class: '!w-1/2' },
-            { id: id(), value: 'range', name: $t('service.constructor.props.type.range'), class: '!w-1/2' },
+            { id: id(), value: 'single', name: $t('constructor.props.type.single'), class: '!w-1/2' },
+            { id: id(), value: 'range', name: $t('constructor.props.type.range'), class: '!w-1/2' },
         ],
         TEXTFIELD_SIZE_OPTIONS: [
-            { id: id(), value: 'small', name: $t('service.constructor.props.type.small'), class: '!w-1/3' },
-            { id: id(), value: 'medium', name: $t('service.constructor.props.type.medium'), class: '!w-1/3' },
-            { id: id(), value: 'xlarge', name: $t('service.constructor.props.type.xlarge'), class: '!w-1/3' },
+            { id: id(), value: 'small', name: $t('constructor.props.type.small'), class: '!w-1/3' },
+            { id: id(), value: 'medium', name: $t('constructor.props.type.medium'), class: '!w-1/3' },
+            { id: id(), value: 'xlarge', name: $t('constructor.props.type.xlarge'), class: '!w-1/3' },
         ],
         COLOR_OPTIONS: [
             { id: id(), name: '', value: 'bg-gray', class: '!w-1/6 bg-gray' },
@@ -54,18 +54,18 @@ export const optionsStore = derived(t, ($t) => {
             { id: id(), name: '', value: 'bg-blue', class: '!w-1/6 bg-blue' },
         ],
         ALIGN_OPTIONS: [
-            { id: id(), value: 'text-left', name: $t('service.constructor.props.align.left'), class: '!w-1/3' },
-            { id: id(), value: 'text-center', name: $t('service.constructor.props.align.center'), class: '!w-1/3' },
-            { id: id(), value: 'text-right', name: $t('service.constructor.props.align.right'), class: '!w-1/3' },
+            { id: id(), value: 'text-left', name: $t('constructor.props.align.left'), class: '!w-1/3' },
+            { id: id(), value: 'text-center', name: $t('constructor.props.align.center'), class: '!w-1/3' },
+            { id: id(), value: 'text-right', name: $t('constructor.props.align.right'), class: '!w-1/3' },
         ],
         HEIGHT_OPTIONS: [
-            { id: id(), value: 'py-1', name: $t('service.constructor.props.height.small'), class: '!w-1/3' },
-            { id: id(), value: 'py-2', name: $t('service.constructor.props.height.medium'), class: '!w-1/3' },
-            { id: id(), value: 'py-3', name: $t('service.constructor.props.height.large'), class: '!w-1/3' },
+            { id: id(), value: 'py-1', name: $t('constructor.props.height.small'), class: '!w-1/3' },
+            { id: id(), value: 'py-2', name: $t('constructor.props.height.medium'), class: '!w-1/3' },
+            { id: id(), value: 'py-3', name: $t('constructor.props.height.large'), class: '!w-1/3' },
         ],
         ACCORDION_TYPE_OPTIONS: [
-            { id: id(), value: 'main', name: $t('service.constructor.props.type.main'), class: '!w-1/2' },
-            { id: id(), value: 'sub', name: $t('service.constructor.props.type.sub'), class: '!w-1/2' },
+            { id: id(), value: 'main', name: $t('constructor.props.type.main'), class: '!w-1/2' },
+            { id: id(), value: 'sub', name: $t('constructor.props.type.sub'), class: '!w-1/2' },
         ],
     };
 });