poe-svelte-ui-lib 1.2.32 → 1.3.1

package/dist/Button/Button.svelte

@@ -85,10 +85,10 @@
       if (content.info?.text) showInfo = false
     }}
   >
-    <span class=" flex flex-row items-center justify-center gap-2">
+    <div class=" flex flex-row items-center justify-center gap-2">
       {#if content?.icon}
         <span
-          class={`flex items-center justify-center overflow-visible 
+          class={` ${content.name ? 'absolute left-3' : ''}  flex items-center justify-center overflow-visible 
             ${content.name ? 'h-8 w-8' : `${svgSize()}`} [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
         >
           {#if typeof content?.icon === 'string'}
@@ -110,7 +110,7 @@
           {/if}
         </div>
       {/if}
-    </span>
+    </div>
   </button>
 
   {#if showInfo && content.info?.side === 'top'}

package/dist/FileAttach/FileAttach.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { t } from '../locales/i18n'
   import type { IFileAttachProps } from '../types'
   import { twMerge } from 'tailwind-merge'
 
@@ -17,6 +18,7 @@
   let ID = `${id}-${crypto.randomUUID().slice(0, 6)}`
   let selectedFile = $state<File | null>(null)
   let previewUrl = $derived(currentImage ? (currentImage.startsWith('data:') ? currentImage : `data:image/png;base64,${currentImage}`) : null)
+  let fileName = $state('')
 
   const handleFileChange = (event: Event) => {
     const input = event.target as HTMLInputElement
@@ -27,6 +29,7 @@
 
     const file = input.files[0]
     selectedFile = file
+    fileName = file.name
 
     if (file.type.startsWith('image/')) previewUrl = URL.createObjectURL(file)
 
@@ -74,13 +77,22 @@
       <input
         id={ID}
         type="file"
-        class={`h-8.5 w-full rounded-2xl bg-(--back-color) font-semibold shadow-sm transition duration-250 hover:shadow-md
-          ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} invalid:shadow-[0_0_6px(--red-color) file:h-full file:w-1/3 
-          file:cursor-pointer file:border-none file:bg-(--blue-color) invalid:border-red-400`}
+        class="absolute left-0 z-1 h-8.5 w-full opacity-0 {disabled ? 'cursor-not-allowed' : 'cursor-pointer'}"
         {accept}
         {disabled}
         onchange={handleFileChange}
       />
+      <div
+        class="flex h-8.5 w-full overflow-hidden rounded-2xl font-semibold shadow-sm transition duration-250 hover:shadow-md
+             "
+      >
+        <div class="flex w-1/3 items-center justify-center bg-(--blue-color) {disabled ? 'opacity-50' : ''}">
+          {$t('constructor.props.file.select')}
+        </div>
+        <div class="flex w-2/3 items-center justify-start bg-(--back-color) px-2 {disabled ? 'opacity-50' : ''}">
+          {fileName || $t('constructor.props.file.notselected')}
+        </div>
+      </div>
     </label>
   {/if}
 </div>

package/dist/Input/Input.svelte

@@ -92,7 +92,7 @@
         class={twMerge(
           `h-full w-full resize-y rounded-2xl border border-(--border-color) px-2 py-1 text-center font-mono outline-none focus:border-blue-400
             ${isValid ? 'border-(--border-color)' : 'border-red-400 shadow-[0_0_6px_var(--red-color)]'}
-            ${disabled ? 'opacity-50' : 'hover:shadow-md'} 
+            ${disabled ? 'cursor-not-allowed opacity-50' : 'hover:shadow-md'} 
             ${readonly ? '' : 'hover:shadow-md'}
             ${help?.info ? 'pl-8' : ''}
             ${help.copyButton ? 'pr-8' : ''}`,
@@ -137,9 +137,9 @@
       </button>
     {/if}
 
-    {#if help.copyButton && (type === 'text' || type === 'text-area')}
+    {#if help.copyButton && (type === 'text' || type === 'text-area') && !disabled}
       <button
-        class="absolute right-3 flex cursor-pointer border-none bg-transparent {type === 'text-area' ? 'top-2' : ''}"
+        class="absolute right-3 flex border-none bg-transparent {type === 'text-area' ? 'top-2' : ''} cursor-pointer"
         onclick={(e) => {
           e.preventDefault()
           navigator.clipboard.writeText(value as string)

package/dist/Joystick/Joystick.svelte

@@ -8,9 +8,9 @@
     label = { name: '', class: '' },
     value = $bindable([0, 0, 0, 0]),
     axes = [
-      { name: 'Roll', minNum: -100, maxNum: 100 },
-      { name: 'Pitch', minNum: -100, maxNum: 100 },
-      { name: 'Yaw', minNum: -100, maxNum: 100 },
+      { name: 'Roll', minNum: -360, maxNum: 360 },
+      { name: 'Pitch', minNum: -360, maxNum: 360 },
+      { name: 'Yaw', minNum: -360, maxNum: 360 },
     ],
     buttonIcon,
     onUpdate = () => {},
@@ -22,13 +22,7 @@
       angle: 30.5,
       content: true,
       onClick: () => {
-        if (value[2] + sensitivity >= axes[2].maxNum) {
-          value[2] = axes[2].maxNum
-          onUpdate(value)
-          return
-        }
-
-        value[2] = roundToClean(value[2] + sensitivity)
+        updateValue(2, +sensitivity)
         onUpdate(value)
       },
     },
@@ -37,20 +31,9 @@
       angle: 58,
       content: false,
       onClick: () => {
-        if (value[2] + sensitivity >= axes[2].maxNum) {
-          value[2] = axes[2].maxNum
-          onUpdate(value)
-        } else {
-          value[2] = roundToClean(value[2] + sensitivity)
-          onUpdate(value)
-        }
-        if (value[1] - sensitivity <= axes[1].minNum) {
-          value[1] = axes[1].minNum
-          onUpdate(value)
-        } else {
-          value[1] = roundToClean(value[1] - sensitivity)
-          onUpdate(value)
-        }
+        updateValue(2, +sensitivity)
+        updateValue(1, -sensitivity)
+        onUpdate(value)
       },
     },
     {
@@ -58,12 +41,7 @@
       angle: 122,
       content: true,
       onClick: () => {
-        if (value[1] - sensitivity <= axes[1].minNum) {
-          value[1] = axes[1].minNum
-          onUpdate(value)
-          return
-        }
-        value[1] = roundToClean(value[1] - sensitivity)
+        updateValue(1, -sensitivity)
         onUpdate(value)
       },
     },
@@ -72,20 +50,9 @@
       angle: 149.5,
       content: false,
       onClick: () => {
-        if (value[2] - sensitivity <= axes[2].minNum) {
-          value[2] = axes[2].minNum
-          onUpdate(value)
-        } else {
-          value[2] = roundToClean(value[2] - sensitivity)
-          onUpdate(value)
-        }
-        if (value[1] - sensitivity <= axes[1].minNum) {
-          value[1] = axes[1].minNum
-          onUpdate(value)
-        } else {
-          value[1] = roundToClean(value[1] - sensitivity)
-          onUpdate(value)
-        }
+        updateValue(2, -sensitivity)
+        updateValue(1, -sensitivity)
+        onUpdate(value)
       },
     },
     {
@@ -93,12 +60,7 @@
       angle: 212,
       content: true,
       onClick: () => {
-        if (value[2] - sensitivity <= axes[2].minNum) {
-          value[2] = axes[2].minNum
-          onUpdate(value)
-          return
-        }
-        value[2] = roundToClean(value[2] - sensitivity)
+        updateValue(2, -sensitivity)
         onUpdate(value)
       },
     },
@@ -107,20 +69,9 @@
       angle: 239,
       content: false,
       onClick: () => {
-        if (value[1] + sensitivity >= axes[1].maxNum) {
-          value[1] = axes[1].maxNum
-          onUpdate(value)
-        } else {
-          value[1] = roundToClean(value[1] + sensitivity)
-          onUpdate(value)
-        }
-        if (value[2] - sensitivity <= axes[2].minNum) {
-          value[2] = axes[2].minNum
-          onUpdate(value)
-        } else {
-          value[2] = roundToClean(value[2] - sensitivity)
-          onUpdate(value)
-        }
+        updateValue(1, +sensitivity)
+        updateValue(2, -sensitivity)
+        onUpdate(value)
       },
     },
     {
@@ -128,12 +79,7 @@
       angle: 301,
       content: true,
       onClick: () => {
-        if (value[1] + sensitivity >= axes[1].maxNum) {
-          value[1] = axes[1].maxNum
-          onUpdate(value)
-          return
-        }
-        value[1] = roundToClean(value[1] + sensitivity)
+        updateValue(1, +sensitivity)
         onUpdate(value)
       },
     },
@@ -142,24 +88,21 @@
       angle: 328,
       content: false,
       onClick: () => {
-        if (value[1] + sensitivity >= axes[1].maxNum) {
-          value[1] = axes[1].maxNum
-          onUpdate(value)
-        } else {
-          value[1] = roundToClean(value[1] + sensitivity)
-          onUpdate(value)
-        }
-        if (value[2] + sensitivity >= axes[2].maxNum) {
-          value[2] = axes[2].maxNum
-          onUpdate(value)
-        } else {
-          value[2] = roundToClean(value[2] + sensitivity)
-          onUpdate(value)
-        }
+        updateValue(1, +sensitivity)
+        updateValue(2, +sensitivity)
+        onUpdate(value)
       },
     },
   ]
 
+  const updateValue = (index: number, delta: number) => {
+    const axis = axes[axes.length == 2 ? index - 1 : index]
+    const min = axis.minNum ?? -360
+    const max = axis.maxNum ?? 360
+
+    value[index] = Math.min(max, Math.max(min, roundToClean(value[index] + delta)))
+  }
+
   const sensitivityOptions = [0.01, 0.1, 1.0, 10, 100]
   let sensitivity = $state(1.0)
 
@@ -179,13 +122,15 @@
   }
 </script>
 
-<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`bg-red relative flex w-full flex-col items-center`, wrapperClass)}>
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`bg-blue relative container flex w-full flex-col items-center`, wrapperClass)}>
   {#if label.name}
     <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
-  <div class=" flex w-1/2 items-center justify-center">
-    <div class="relative z-10 flex size-40 items-center justify-center rounded-full bg-(--bg-color) shadow-[0_0_20px_rgb(0_0_0_/0.25)]">
+  <div class="flex w-1/2 items-center justify-center">
+    <div
+      class="relative z-10 flex size-40 min-h-40 min-w-40 items-center justify-center rounded-full bg-(--bg-color) shadow-[0_0_20px_rgb(0_0_0_/0.25)]"
+    >
       <!-- Основные кнопки (оси pitch и yaw) -->
       <div class="absolute h-full w-full overflow-hidden rounded-full">
         {#each directions as direction, index}
@@ -251,11 +196,11 @@
         style="background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)"
       >
         <button
-          class="h-full cursor-pointer rounded-l-full px-3.5"
+          class="h-full rotate-270 cursor-pointer rounded-l-full px-3.5"
           title=""
           onclick={() => {
-            if (value[0] - sensitivity <= axes[0].minNum) {
-              value[0] = axes[0].minNum
+            if (value[0] - sensitivity <= (axes[0].minNum ?? -360)) {
+              value[0] = axes[0].minNum ?? -360
               onUpdate(value)
               return
             }
@@ -274,11 +219,11 @@
           ></button
         >
         <button
-          class="h-full cursor-pointer rounded-r-full px-3.5"
+          class="h-full rotate-90 cursor-pointer rounded-r-full px-3.5"
           title=""
           onclick={() => {
-            if (value[0] + sensitivity >= axes[0].maxNum) {
-              value[0] = axes[0].maxNum
+            if (value[0] + sensitivity >= (axes[0].maxNum ?? 360)) {
+              value[0] = axes[0].maxNum ?? 360
               onUpdate(value)
               return
             }
@@ -300,8 +245,9 @@
     {/if}
   </div>
 
-  <div class="flex items-center md:absolute md:left-[calc(50%+120px)]">
-    <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="flex h-full flex-col justify-center rounded-full p-10">
+  <!-- Нижняя панель -->
+  <div class="mt-3 flex w-80 flex-col gap-1">
+    <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="flex w-full justify-center rounded-full">
       {#each sensitivityOptions as option, index}
         <button
           id={crypto.randomUUID()}
@@ -312,8 +258,8 @@
                 ? 'z-10 py-1 shadow-[0_0_10px_var(--shadow-color)] hover:shadow-[0_0_15px_var(--shadow-color)]'
                 : ''
             }  
-            ${sensitivityOptions.length > 0 && index === 0 ? 'rounded-t-2xl' : ''} ${
-              index === sensitivityOptions.length - 1 ? 'rounded-b-2xl' : ''
+            ${sensitivityOptions.length > 0 && index === 0 ? 'rounded-l-2xl' : ''} ${
+              index === sensitivityOptions.length - 1 ? 'rounded-r-2xl' : ''
             } bg-(--back-color)`)}
           onclick={() => {
             sensitivity = option
@@ -330,19 +276,21 @@
       {/each}
     </div>
 
-    <div>
+    <div class="flex justify-around">
       {#each axes as axe, index}
-        <h5 class="w-full px-4 text-center">{axe.name}</h5>
-        <input
-          class={`w-20 rounded-2xl border border-(--border-color) px-4 py-1 text-center transition-all duration-300 outline-none
+        <div>
+          <h5 class=" px-4 text-center">{axe.name}</h5>
+          <input
+            class={`w-20 rounded-2xl border border-(--border-color) px-4 py-1 text-center transition-all duration-300 outline-none
               hover:shadow-md 
               [&::-webkit-inner-spin-button]:hidden
               [&::-webkit-outer-spin-button]:hidden`}
-          style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
-          value={value[axes.length == 3 ? index : index + 1]}
-          id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
-          readonly
-        />
+            style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
+            value={value[axes.length == 3 ? index : index + 1]}
+            id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
+            readonly
+          />
+        </div>
       {/each}
     </div>
   </div>

package/dist/Joystick/JoystickProps.svelte

@@ -202,7 +202,6 @@
                   component,
                   onPropertyChange,
                 )
-                console.log(component.properties.axes)
               }
             }}
           />
@@ -336,7 +335,6 @@
                   component,
                   onPropertyChange,
                 )
-                console.log(component.properties.axes)
               }
             }}
           />

package/dist/ProgressBar/ProgressBar.svelte

@@ -8,7 +8,7 @@
     wrapperClass = '',
     label = { name: '', class: '' },
     value = $bindable(0),
-    type = 'vertical',
+    type = 'horizontal',
     number = {
       minNum: 0,
       maxNum: 100,
@@ -62,7 +62,7 @@
   {/if}
 
   {#if type == 'vertical'}
-    <div class="flex h-full w-fit min-w-16 flex-col items-center gap-2 rounded-full bg-(--bg-color) px-2">
+    <div class="flex h-full w-fit min-w-16 flex-col items-center gap-2 rounded-full bg-(--bg-color) p-2">
       <div class="relative my-auto h-[80%] w-[70%] rounded-full bg-(--back-color)/40">
         <div class="absolute bottom-0 left-0 flex w-full rounded-full bg-(--field-color)" style="height: {progressPercent()}%;"></div>
       </div>

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -44,6 +44,15 @@
           onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: value.value as string } })
         }}
       />
+      <UI.Select
+        wrapperClass="!h-14"
+        label={{ name: $t('constructor.props.type') }}
+        disabled={component.properties.bitMode}
+        type="buttons"
+        options={$optionsStore.SWITCH_OPTIONS.filter((o) => o.value !== 'checkbox')}
+        value={$optionsStore.SWITCH_OPTIONS.find((option) => option.value == component.properties.type)}
+        onUpdate={(option) => updateProperty('type', option.value as string, component, onPropertyChange)}
+      />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Input
@@ -117,6 +126,15 @@
         value={component.properties.id}
         onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
       />
+      <UI.Select
+        wrapperClass="!h-14"
+        label={{ name: $t('constructor.props.type') }}
+        disabled={component.properties.bitMode}
+        type="buttons"
+        options={$optionsStore.SWITCH_OPTIONS.filter((o) => o.value !== 'checkbox')}
+        value={$optionsStore.SWITCH_OPTIONS.find((option) => option.value == component.properties.type)}
+        onUpdate={(option) => updateProperty('type', option.value as string, component, onPropertyChange)}
+      />
       <UI.Input
         label={{ name: $t('constructor.props.wrapperclass') }}
         value={component.properties.wrapperClass}

package/dist/Select/Select.svelte

@@ -19,8 +19,6 @@
     label = { name: '', class: '' },
     type = 'select',
     value = $bindable(),
-    bitMode = false,
-    range = { start: 0, end: 31 },
     options = [],
     onUpdate,
   }: ISelectProps<T> = $props()

package/dist/index.d.ts

@@ -31,4 +31,4 @@ export { default as TextField } from './TextField/TextField.svelte';
 export { default as TextFieldProps } from './TextField/TextFieldProps.svelte';
 export * from './locales/i18n';
 export * from './locales/translations';
-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 IMapProps, type IProgressBarProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, type ITabsProps, type IJoystickProps, type IFileAttachProps, } from './types';
+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 IMapProps, type IProgressBarProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, type ITabsProps, type IJoystickProps, type IFileAttachProps, type IDeviceGNSS, } from './types';

package/dist/locales/FlagEn.svelte

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"
+  ><clipPath id="svgIDa"><circle cx="256" cy="256" r="256" /></clipPath><g clip-path="url(#svgIDa)"
+    ><path
+      fill="#eee"
+      d="m0 0l8 16l-8 15v16l32 65l-32 64v32l32 48l-32 48v32l32 64l-32 65v47l16-8l15 8h16l65-32l64 32h32l48-32l48 32h32l64-32l65 32h47l-8-15l8-16v-16l-32-65l32-64v-32l-32-48l32-48v-32l-32-64l32-65V0l-15 8l-16-8h-16l-65 32l-64-32h-32l-48 32l-48-32h-32l-64 32L47 0H0z"
+    /><path
+      fill="#0052b4"
+      d="m47 0l129 129V0Zm289 0v129L465 0ZM0 47v129h129Zm512 0L383 176h129ZM0 336v129l129-129Zm383 0l129 129V336Zm-47 47v129h129zm-160 0L47 512h129Z"
+    /><path fill="#d80027" d="M208 0v208H0v96h208v208h96V304h208v-96H304V0h-96z" /><path
+      fill="#d80027"
+      d="m336 336l176 176v-31L367 336Zm0-160L512 0h-31L336 145Zm-160 0L0 0v31l145 145zm0 160L0 512h31l145-145Z"
+    /></g
+  ></svg
+>

package/dist/locales/FlagEn.svelte.d.ts

@@ -0,0 +1,26 @@
+export default FlagEn;
+type FlagEn = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const FlagEn: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/locales/FlagRu.svelte

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"
+  ><mask id="circleFlagsRu0"><circle cx="256" cy="256" r="256" fill="#fff" /></mask><g mask="url(#circleFlagsRu0)"
+    ><path fill="#0052b4" d="M512 170v172l-256 32L0 342V170l256-32z" /><path fill="#eee" d="M512 0v170H0V0Z" /><path
+      fill="#d80027"
+      d="M512 342v170H0V342Z"
+    /></g
+  ></svg
+>

package/dist/locales/FlagRu.svelte.d.ts

@@ -0,0 +1,26 @@
+export default FlagRu;
+type FlagRu = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const FlagRu: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/locales/FlagZh.svelte

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"
+  ><mask id="circleFlagsCn0"><circle cx="256" cy="256" r="256" fill="#fff" /></mask><g mask="url(#circleFlagsCn0)"
+    ><path fill="#d80027" d="M0 0h512v512H0z" /><path
+      fill="#ffda44"
+      d="m140.1 155.8l22.1 68h71.5l-57.8 42.1l22.1 68l-57.9-42l-57.9 42l22.2-68l-57.9-42.1H118zm163.4 240.7l-16.9-20.8l-25 9.7l14.5-22.5l-16.9-20.9l25.9 6.9l14.6-22.5l1.4 26.8l26 6.9l-25.1 9.6zm33.6-61l8-25.6l-21.9-15.5l26.8-.4l7.9-25.6l8.7 25.4l26.8-.3l-21.5 16l8.6 25.4l-21.9-15.5zm45.3-147.6L370.6 212l19.2 18.7l-26.5-3.8l-11.8 24l-4.6-26.4l-26.6-3.8l23.8-12.5l-4.6-26.5l19.2 18.7zm-78.2-73l-2 26.7l24.9 10.1l-26.1 6.4l-1.9 26.8l-14.1-22.8l-26.1 6.4l17.3-20.5l-14.2-22.7l24.9 10.1z"
+    /></g
+  ></svg
+>

package/dist/locales/FlagZh.svelte.d.ts

@@ -0,0 +1,26 @@
+export default FlagZh;
+type FlagZh = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const FlagZh: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/locales/i18n.d.ts

@@ -1,10 +1,10 @@
 import { type Readable } from 'svelte/store';
-export declare const getInitLanguage: () => string;
 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;
+    component: import("svelte/legacy").LegacyComponentType;
 }[];
 export declare const t: Readable<(key: string) => string>;

package/dist/locales/i18n.js

@@ -1,19 +1,19 @@
 import { derived } from 'svelte/store';
 import { writable } from 'svelte/store';
 import translations from './translations';
+import FlagZh from './FlagZh.svelte';
+import FlagRu from './FlagRu.svelte';
+import FlagEn from './FlagEn.svelte';
 /* Язык по умолчанию */
 let initialLanguage = 'ru';
-export const getInitLanguage = () => {
-    /* Проверяем, доступен ли 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';
-        }
+/* Проверяем, доступен ли 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';
     }
-    return initialLanguage;
-};
+}
 /* Создаем хранилище с начальным значением языка */
 export const Language = writable(initialLanguage);
 /* Функция для изменения языка */
@@ -25,9 +25,9 @@ export function setLanguage(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' },
+    { id: 'app-language-ru', name: 'Русский', value: 'ru', component: FlagRu },
+    { id: 'app-language-en', name: 'English', value: 'en', component: FlagEn },
+    { id: 'app-language-zh', name: '中国人', value: 'zh', component: FlagZh },
 ];
 /* Функция для перевода для текущего языка */
 function translate(locale, key) {

package/dist/locales/translations.js

@@ -130,6 +130,8 @@ const translations = {
         'constructor.props.map.timeout': 'Таймаут маркеров:',
         'constructor.props.joystick.axes': 'Названия осей',
         'constructor.props.joystick.axes.info': 'Поле для ввода названий осей, разделенных пробелами (2 или 3 названия)',
+        'constructor.props.file.select': 'Выберите файл',
+        'constructor.props.file.notselected': 'Файл не выбран',
         'constructor.props.table.columns': 'Колонки таблицы',
         'constructor.props.table.columns.key': 'Ключ',
         'constructor.props.table.columns.label': 'Название колонки',

package/dist/types.d.ts

@@ -247,6 +247,7 @@ export interface ITableHeader<T extends object> {
     buttons?: {
         name: string | ((row: T) => string);
         class?: string | ((row: T) => string);
+        eventHandler?: IUIComponentHandler;
         onClick?: (row: T) => void;
     }[];
     image?: {
@@ -308,8 +309,8 @@ export interface IJoystickProps {
     value?: number[];
     axes?: {
         name: string;
-        minNum: number;
-        maxNum: number;
+        minNum?: number;
+        maxNum?: number;
     }[];
     buttonIcon?: string;
     onUpdate?: (value: number[]) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.2.32",
+  "version": "1.3.1",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -49,7 +49,7 @@
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.10.1",
     "publint": "^0.3.15",
-    "svelte": "^5.44.0",
+    "svelte": "^5.44.1",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.2.4",
     "vite-plugin-compression": "^0.5.1"