poe-svelte-ui-lib 1.9.6 → 1.9.8

package/dist/Accordion/AccordionProps.svelte

@@ -95,10 +95,10 @@
   <div class="flex items-start justify-center gap-8">
     <div class="flex w-1/3 flex-col px-2">
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
-      <CommonSnippets snippet="Label" {component} {onPropertyChange} />
-      <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
     </div>
     <div class="flex w-1/3 flex-col px-2">
+      <CommonSnippets snippet="Label" {component} {onPropertyChange} />
+      <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
       <CommonSnippets
         snippet="IconsLib"
         initialValue={{
@@ -120,12 +120,12 @@
     <div class="flex w-1/3 flex-col px-2">
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
-
+      <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
       {@render AccordionSize()}
-      {@render AccordionIsOpen()}
     </div>
     <div class="flex w-1/3 flex-col px-2">
-      <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
+      <CommonSnippets snippet="Label" {component} {onPropertyChange} />
+      <CommonSnippets snippet="LabelClass" initialValue={initialAlign} {component} {onPropertyChange} />
       <CommonSnippets
         snippet="IconsLib"
         initialValue={{
@@ -137,8 +137,7 @@
         {component}
         {onPropertyChange}
       />
-      <CommonSnippets snippet="Label" {component} {onPropertyChange} />
-      <CommonSnippets snippet="LabelClass" initialValue={initialAlign} {component} {onPropertyChange} />
+      {@render AccordionIsOpen()}
     </div>
     <div class="flex w-1/3 flex-col items-center gap-2 px-2">
       {@render AccordionBackgroundImage()}

package/dist/Button/ButtonProps.svelte

@@ -152,27 +152,6 @@
     </div>
     <div class="flex w-1/3 flex-col px-2">
       {@render ButtonVariables()}
-      <CommonSnippets
-        snippet="IconsLib"
-        initialValue={{
-          name: $t("constructor.props.buttonIcon"),
-          icon: component.properties.content.icon,
-          updateProperty: (icon: string) => {
-            updateProperty("content.icon", icon as string, component, onPropertyChange)
-            if (component.properties.content.icon && !component.properties.content.name?.trim())
-              updateProperty("componentClass", twMerge((component.properties as UI.IButtonProps).componentClass, "w-fit"), component, onPropertyChange)
-            else if (!component.properties.content.icon && !component.properties.content.name?.trim())
-              updateProperty("componentClass", twMerge((component.properties as UI.IButtonProps).componentClass, "w-full"), component, onPropertyChange)
-          },
-          icons: { array: ICONS },
-        }}
-        {component}
-        {onPropertyChange}
-      />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
-      {@render ButtonName()}
-      {@render ButtonHeight()}
       <CommonSnippets
         snippet="Colors"
         initialValue={{
@@ -201,6 +180,27 @@
         {onPropertyChange}
       />
     </div>
+    <div class="flex w-1/3 flex-col px-2">
+      {@render ButtonName()}
+      <CommonSnippets
+        snippet="IconsLib"
+        initialValue={{
+          name: $t("constructor.props.buttonIcon"),
+          icon: component.properties.content.icon,
+          updateProperty: (icon: string) => {
+            updateProperty("content.icon", icon as string, component, onPropertyChange)
+            if (component.properties.content.icon && !component.properties.content.name?.trim())
+              updateProperty("componentClass", twMerge((component.properties as UI.IButtonProps).componentClass, "w-fit"), component, onPropertyChange)
+            else if (!component.properties.content.icon && !component.properties.content.name?.trim())
+              updateProperty("componentClass", twMerge((component.properties as UI.IButtonProps).componentClass, "w-full"), component, onPropertyChange)
+          },
+          icons: { array: ICONS },
+        }}
+        {component}
+        {onPropertyChange}
+      />
+      {@render ButtonHeight()}
+    </div>
   </div>
 {:else}
   <div class="relative flex flex-row items-start justify-center">

package/dist/CommonSnippets.svelte

@@ -212,14 +212,14 @@
   <div class="flex">
     <UI.Input
       label={{ name: $t("constructor.props.min") }}
-      value={initialValue.number.minNum}
+      value={initialValue.number?.minNum}
       type="number"
       readonly={initialValue.bitMode}
       onUpdate={(value) => initialValue.updateProperty(value as number, "number.minNum")}
     />
     <UI.Input
       label={{ name: $t("constructor.props.max") }}
-      value={initialValue.number.maxNum}
+      value={initialValue.number?.maxNum}
       type="number"
       readonly={initialValue.bitMode}
       onUpdate={(value) => initialValue.updateProperty(value as number, "number.maxNum")}
@@ -227,7 +227,7 @@
     {#if component.type !== "ProgressBar"}
       <UI.Input
         label={{ name: $t("constructor.props.step") }}
-        value={initialValue.number.step}
+        value={initialValue.number?.step}
         type="number"
         readonly={initialValue.bitMode}
         onUpdate={(value) => initialValue.updateProperty(value as number, "number.step")}

package/dist/Input/InputProps.svelte

@@ -5,6 +5,7 @@
   import * as UI from ".."
   import { optionsStore } from "../options"
   import { twMerge } from "tailwind-merge"
+  import Library from "../libIcons/Library.svelte"
 
   const {
     component,
@@ -17,6 +18,7 @@
   }>()
 
   let isValidRegExp = $state(true)
+  let showRegExpLibrary = $state(false)
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
@@ -146,14 +148,41 @@
       value={component.properties.maxlength}
       onUpdate={(value) => updateProperty("maxlength", value as string)}
     />
-    <UI.Input
-      label={{ name: $t("constructor.props.regexp") }}
-      value={component.properties.help.regExp}
-      maxlength={150}
-      help={{ info: $t("constructor.props.regexp.info") }}
-      componentClass={isValidRegExp === false ? "!border-2 !border-red-400" : ""}
-      onUpdate={(value) => updateProperty("help.regExp", value as string)}
-    />
+    <div class="flex items-end">
+      <UI.Input
+        label={{ name: $t("constructor.props.regexp") }}
+        value={component.properties.help.regExp}
+        maxlength={150}
+        componentClass={isValidRegExp === false ? "!border-2 !border-red-400" : ""}
+        onUpdate={(value) => updateProperty("help.regExp", value as string)}
+      />
+      <UI.Button
+        wrapperClass="w-8"
+        content={{ icon: Library, info: { text: $t("constructor.props.regexp.library.info"), side: "top" } }}
+        onClick={() => {
+          showRegExpLibrary = !showRegExpLibrary
+        }}
+      />
+      {#if showRegExpLibrary}
+        <UI.Modal bind:isOpen={showRegExpLibrary} wrapperClass="w-200 h-[80%]">
+          {#snippet main()}
+            {#each $optionsStore.INPUT_REGEXP_OPTIONS as regexp}
+              <div
+                class="flex flex-col items-start justify-start m-1.5 rounded-xl border-2 border-(--border-color) p-3 cursor-pointer hover:bg-(--gray-color)/30 transition duration-150"
+                role="button"
+                tabindex={null}
+                onkeydown={null}
+                onclick={() => (component.properties.help.regExp = regexp.value)}
+              >
+                <h5>{regexp.name}</h5>
+                <span>{regexp.value}</span>
+              </div>
+            {/each}
+          {/snippet}
+        </UI.Modal>
+      {/if}
+    </div>
+
     {#if component.properties.type === "text-area"}
       <UI.Input
         label={{ name: $t("constructor.props.textarea.rows") }}
@@ -210,7 +239,7 @@
 
 {#snippet InputSettings()}
   <UI.Select
-    label={{ name: $t("constructor.props.type") }}
+    wrapperClass="mt-5"
     options={$optionsStore.INPUT_SETTING_OPTIONS.map((o) =>
       (component.properties.type === "password" || component.properties.type === "number") && o.value == "help.copyButton" ? { ...o, disabled: true } : o,
     )}
@@ -334,8 +363,8 @@
 {#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
     <div class="flex w-1/3 flex-col px-2">
-      {@render InputVariable()}
       {@render InputAccess()}
+      {@render InputVariable()}
       {@render InputType()}
     </div>
     <div class="flex w-1/3 flex-col px-2">

package/dist/Joystick/Joystick.svelte

@@ -126,7 +126,7 @@
 
 <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`bg-blue relative flex w-full flex-col items-center`, wrapperClass)}>
   {#if label.name}
-    <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name} {value}</h5>
+    <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
   {#if !readonly}
@@ -209,7 +209,7 @@
         </div>
       </div>
       <!-- Боковые кнопки (ось roll) -->
-      {#if axes.length == 3}
+      {#if axes[1].name !== ""}
         <div
           class="absolute flex h-15 w-65 items-center justify-between rounded-full shadow-[0_0_15px_rgb(0_0_0_/0.25)]"
           style="background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)"
@@ -300,21 +300,23 @@
       </div>
     {/if}
 
-    <div class="flex justify-around">
+    <div class="flex justify-around items-end gap-2">
       {#each axes as axe, index}
-        <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
+        {#if axe.name !== "" || index !== 1}
+          <div>
+            <h5 class="px-2 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 == 2 && index == 1 ? index + 1 : index]}
-            id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
-            readonly
-          />
-        </div>
+              style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
+              value={value[index]}
+              id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
+              readonly
+            />
+          </div>
+        {/if}
       {/each}
     </div>
   </div>

package/dist/Joystick/JoystickProps.svelte

@@ -33,56 +33,43 @@
   )
 </script>
 
-{#snippet JoystickAxesNames()}
-  <UI.Input
-    label={{ name: $t("constructor.props.joystick.axes") }}
-    value={component.properties.axes.map((axe: any) => axe.name).join(" ")}
-    help={{ info: $t("constructor.props.joystick.axes.info"), regExp: /^[\p{L}0-9\-_":{}]+ +[\p{L}0-9\-_":{}]+(?: +[\p{L}0-9\-_":{}]+)?$/u }}
-    maxlength={100}
-    onUpdate={(value) => {
-      const stringValue = value as string
-      const spaceCount = (stringValue.match(/\s/g) || []).length
-      if (spaceCount > 2) {
-        return
-      }
-      const parts = stringValue.trim().split(/\s+/)
-      updateProperty(
-        "axes",
-        parts.map((a: any, index: number) => {
-          let axeIndex = parts.length == 2 && component.properties.axes.length === 3 ? index + 1 : index
-          return {
-            name: a,
-            minNum: component.properties.axes[axeIndex] ? component.properties.axes[axeIndex].minNum : -100,
-            maxNum: component.properties.axes[axeIndex] ? component.properties.axes[axeIndex].maxNum : 100,
-          }
-        }),
-        component,
-        onPropertyChange,
-      )
-    }}
-  />
-{/snippet}
-
 {#snippet JoystickAxesMinMax()}
   <div class="mt-2 flex w-full justify-around gap-2">
     {#each component.properties.axes as axe, index}
-      <div class="flex items-start gap-2">
-        <h5 class="mt-1">{axe.name}</h5>
+      {@const axesOptions = [
+        { name: $t("constructor.props.joystick.pitch.axe"), info: "", regExp: /^[\p{L}0-9\-_"':{}]+$/u },
+        { name: $t("constructor.props.joystick.roll.axe"), info: $t("constructor.props.joystick.axes.info"), regExp: /^[\p{L}0-9\-_"':{}]*$/u },
+        { name: $t("constructor.props.joystick.yaw.axe"), info: "", regExp: /^[\p{L}0-9\-_"':{}]+$/u },
+      ]}
+      <div class="flex flex-col gap-1">
+        <UI.Input
+          label={{ name: axesOptions[index].name }}
+          value={component.properties.axes[index].name}
+          help={{ info: axesOptions[index].info, regExp: axesOptions[index].regExp }}
+          maxlength={20}
+          onUpdate={(value) => {
+            updateProperty(
+              "axes",
+              component.properties.axes.map((a: any, i: number) => (i === index ? { ...a, name: value } : a)),
+              component,
+              onPropertyChange,
+            )
+          }}
+        />
+
         <UI.Slider
           type="range"
           number={{ minNum: -360, maxNum: 360, step: 10 }}
+          disabled={index == 1 && axe.name == ""}
           value={[component.properties.axes[index].minNum, component.properties.axes[index].maxNum]}
           onUpdate={(value) => {
-            if (Array.isArray(value)) {
-              const axes = component.properties.axes
-
+            if (Array.isArray(value))
               updateProperty(
                 "axes",
-                axes.map((a: any, i: number) => (i === index ? { ...a, minNum: value[0], maxNum: value[1] } : a)),
+                component.properties.axes.map((a: any, i: number) => (i === index ? { ...a, minNum: value[0], maxNum: value[1] } : a)),
                 component,
                 onPropertyChange,
               )
-            }
           }}
         />
       </div>
@@ -104,9 +91,9 @@
   <div>
     <div class="relative flex flex-row items-start justify-center">
       <div class="flex w-1/3 flex-col px-2">
+        <CommonSnippets snippet="Access" {component} {onPropertyChange} />
         <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
         <CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
-        <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       </div>
       <div class="flex w-1/3 flex-col px-2">
         <CommonSnippets snippet="Label" {component} {onPropertyChange} />
@@ -125,7 +112,6 @@
           {component}
           {onPropertyChange}
         />
-        {@render JoystickAxesNames()}
         <CommonSnippets snippet="Colors" initialValue={{ color: initialColor }} {component} {onPropertyChange} />
       </div>
     </div>
@@ -156,7 +142,6 @@
           {component}
           {onPropertyChange}
         />
-        {@render JoystickAxesNames()}
         <CommonSnippets snippet="Colors" initialValue={{ color: initialColor }} {component} {onPropertyChange} />
       </div>
     </div>

package/dist/Map/MapProps.svelte

@@ -1,13 +1,8 @@
 <script lang="ts">
   import { t } from "../locales/i18n"
   import { type UIComponent, type IGraphProps, updateProperty, type IUIComponentHandler } from "../types"
-  import * as UI from ".."
-  import Modal from "../Modal.svelte"
   import { ICONS } from "../icons"
-  import Button from "../Button/Button.svelte"
-  import CrossIcon from "../libIcons/CrossIcon.svelte"
   import { optionsStore } from "../options"
-  import { twMerge } from "tailwind-merge"
   import { getContext } from "svelte"
   import CommonSnippets from "../CommonSnippets.svelte"
 
@@ -21,8 +16,6 @@
     forConstructor?: boolean
   }>()
 
-  let showIconLib = $state(false)
-
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
@@ -36,6 +29,7 @@
 {#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
     <div class="flex w-1/3 flex-col px-2">
+      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
     </div>
     <div class="flex w-1/3 flex-col px-2">
@@ -59,6 +53,7 @@
 {:else}
   <div class="relative mb-2 flex flex-row items-start justify-center">
     <div class="flex w-1/3 flex-col px-2">
+      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
     </div>
     <div class="flex w-1/3 flex-col px-2">

package/dist/Modal.svelte

@@ -24,6 +24,8 @@
     onCancel?: () => void
   } = $props()
 
+  let modalWrapper: HTMLDivElement | null = $state(null)
+
   const handleKeyDown = (event: KeyboardEvent) => {
     if (event.key === "Escape") {
       isOpen = false
@@ -31,15 +33,27 @@
     }
   }
 
+  const handleClickOutside = (event: MouseEvent) => {
+    if (modalWrapper && !modalWrapper.contains(event.target as Node)) {
+      isOpen = false
+      onCancel()
+    }
+  }
+
   onMount(() => {
     document.addEventListener("keydown", handleKeyDown)
-    return () => document.removeEventListener("keydown", handleKeyDown)
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown)
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
   })
 </script>
 
 {#if isOpen}
   <div class="fixed inset-0 z-100 flex items-center justify-center bg-black/50" transition:fade={{ duration: 200, delay: 1 }}>
     <div
+      bind:this={modalWrapper}
       class={twMerge(`flex w-300 flex-col overflow-hidden rounded-2xl bg-(--back-color) text-center`, wrapperClass)}
       style="width: {width};"
       transition:scale={{ duration: 250, start: 0.8 }}

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -155,6 +155,7 @@
 {#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
     <div class="flex w-1/3 flex-col px-2">
+      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
       {@render ProgressBarType()}
     </div>
@@ -184,6 +185,7 @@
 {:else}
   <div class="relative flex flex-row items-start justify-center">
     <div class="flex w-1/3 flex-col px-2">
+      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
       {@render ProgressBarType()}
     </div>

package/dist/Select/SelectProps.svelte

@@ -252,11 +252,11 @@
 {#if forConstructor}
   <div class="relative mb-4 flex flex-row items-start justify-center">
     <div class="flex w-1/3 flex-col px-2">
+      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
       {@render SelectArgument()}
     </div>
     <div class="flex w-1/3 flex-col px-2">
-      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       {@render SelectType()}
       {@render SelectValueType()}
     </div>

package/dist/Slider/Slider.svelte

@@ -113,6 +113,7 @@
               [&::-webkit-slider-thumb]:relative
               [&::-webkit-slider-thumb]:size-4
               [&::-webkit-slider-thumb]:cursor-pointer
+              ${disabled ? "[&::-webkit-slider-thumb]:cursor-not-allowed" : ""}
               [&::-webkit-slider-thumb]:rounded-full
               [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
             ${
@@ -124,6 +125,7 @@
             [&::-moz-range-thumb]:ml-[-0.4rem]
             [&::-moz-range-thumb]:size-4 
             [&::-moz-range-thumb]:cursor-pointer 
+            ${disabled ? "[&::-moz-range-thumb]:cursor-not-allowed" : ""}
             [&::-moz-range-thumb]:rounded-full
             [&::-moz-range-thumb]:shadow-[var(--focus-shadow),] 
             [&::-moz-range-thumb]:ring-[6px] 
@@ -160,6 +162,7 @@
               [&::-webkit-slider-thumb]:relative
               [&::-webkit-slider-thumb]:size-4
               [&::-webkit-slider-thumb]:cursor-pointer
+              ${disabled ? "[&::-webkit-slider-thumb]:cursor-not-allowed" : ""}
               [&::-webkit-slider-thumb]:rounded-full
               [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
             ${
@@ -171,6 +174,7 @@
             [&::-moz-range-thumb]:ml-[-0.4rem]
             [&::-moz-range-thumb]:size-4 
             [&::-moz-range-thumb]:cursor-pointer 
+            ${disabled ? "[&::-moz-range-thumb]:cursor-not-allowed" : ""}
             [&::-moz-range-thumb]:rounded-full
             [&::-moz-range-thumb]:shadow-[var(--focus-shadow),] 
             [&::-moz-range-thumb]:ring-[6px] 
@@ -193,6 +197,7 @@
           max={number.maxNum}
           step={number.step}
           bind:value={singleValue}
+          {disabled}
           oninput={() => onUpdate(singleValue)}
           class={twMerge(
             `h-8 w-full appearance-none overflow-hidden rounded-full accent-(--back-color) 
@@ -205,6 +210,7 @@
               [&::-webkit-slider-thumb]:h-4
               [&::-webkit-slider-thumb]:w-4
               [&::-webkit-slider-thumb]:cursor-pointer
+              ${disabled ? "[&::-webkit-slider-thumb]:cursor-not-allowed" : ""}
               [&::-webkit-slider-thumb]:rounded-full
             [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
             ${
@@ -216,6 +222,7 @@
             [&::-moz-range-thumb]:ml-[-0.4rem]
             [&::-moz-range-thumb]:size-4 
             [&::-moz-range-thumb]:cursor-pointer 
+            ${disabled ? "[&::-moz-range-thumb]:cursor-not-allowed" : ""}
             [&::-moz-range-thumb]:rounded-full
             [&::-moz-range-thumb]:shadow-[var(--focus-shadow),] 
             [&::-moz-range-thumb]:ring-[6px] 

package/dist/Slider/SliderProps.svelte

@@ -56,21 +56,21 @@
 {#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
     <div class="flex w-1/3 flex-col px-2">
+      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
       <CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
-      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       {@render SliderType()}
       <CommonSnippets
         snippet="MinMaxStep"
-        initialValue="{{
+        initialValue={{
           number: component.properties.number,
           bitMode: component.properties.bitMode,
           updateProperty: (value: number, property: string) => {
             updateProperty(property, Number(value), component, onPropertyChange)
           },
-        }}}"
+        }}
         {component}
         {onPropertyChange}
       />

package/dist/Switch/SwitchProps.svelte

@@ -36,16 +36,18 @@
 {/snippet}
 
 {#snippet SwitchCaptions()}
-  <UI.Input
-    label={{ name: $t("constructor.props.caption.left") }}
-    value={component.properties.label.captionLeft}
-    onUpdate={(value) => updateProperty("label.captionLeft", value as string, component, onPropertyChange)}
-  />
-  <UI.Input
-    label={{ name: $t("constructor.props.caption.right") }}
-    value={component.properties.label.captionRight}
-    onUpdate={(value) => updateProperty("label.captionRight", value as string, component, onPropertyChange)}
-  />
+  {#if component.properties.type == "horizontal"}
+    <UI.Input
+      label={{ name: $t("constructor.props.caption.left") }}
+      value={component.properties.label.captionLeft}
+      onUpdate={(value) => updateProperty("label.captionLeft", value as string, component, onPropertyChange)}
+    />
+    <UI.Input
+      label={{ name: $t("constructor.props.caption.right") }}
+      value={component.properties.label.captionRight}
+      onUpdate={(value) => updateProperty("label.captionRight", value as string, component, onPropertyChange)}
+    />
+  {/if}
 {/snippet}
 
 {#snippet SwitchDisabled()}
@@ -62,15 +64,6 @@
   />
 {/snippet}
 
-{#snippet SwitchColors()}
-  <UI.Select
-    wrapperClass="!h-14"
-    label={{ name: $t("constructor.props.colors") }}
-    type="buttons"
-    options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max" && option.value !== "bg-gray")}
-  />
-{/snippet}
-
 {#snippet SwitchBitmode()}
   <UI.Switch
     wrapperClass="bg-blue"
@@ -193,9 +186,9 @@
 {#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
     <div class="flex w-1/3 flex-col px-2">
+      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
       <CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
-      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
     </div>
 
     <div class="flex w-1/3 flex-col px-2">
@@ -258,11 +251,10 @@
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
-
+      {@render SwitchType()}
       {#if !component.properties.bitMode}
         {@render SwitchCaptions()}
       {/if}
-      {@render SwitchType()}
     </div>
     <div class="flex w-1/3 flex-col px-2">
       {@render SwitchHeight()}

package/dist/Table/TableProps.svelte

@@ -230,9 +230,9 @@
         <div class="flex flex-col gap-2" bind:this={settingsContainer[columnIndex]}>
           {#if typeof column.content !== "function"}
             {#each column.content as content, index}
-              {#if content.type == "text"}
-                {@const text = content.data}
-                <div id={`item-${index}-${columnIndex}`} class="relative bg-(--container-color)/50 rounded-2xl p-2">
+              <div id={`item-${index}-${columnIndex}`} class="relative bg-(--container-color)/50 rounded-2xl p-2">
+                {#if content.type == "text"}
+                  {@const text = content.data}
                   <div class="flex gap-2 mx-auto items-end" style="width: {forConstructor ? '65%' : '90%'}; ">
                     <UI.Input
                       wrapperClass="w-1/4"
@@ -245,7 +245,6 @@
                           "content",
                           column.content.map((textItem: any, i: number) => (i == index ? { ...textItem, data: { ...textItem.data, key: value } } : textItem)),
                         )
-                        // updateTableBody()
                       }}
                     />
                     <UI.Select
@@ -259,35 +258,8 @@
                       onUpdate={(value) => changeColumnSettings(value, columnIndex, index)}
                     />
                   </div>
-
-                  <Dragging
-                    wrapperClass="absolute left-2 bottom-2"
-                    container={settingsContainer[columnIndex]}
-                    array={column.content}
-                    elementIndex={index}
-                    containerIndex={columnIndex}
-                    onUpdate={(updatedArray, index) => {
-                      if (index === columnIndex) {
-                        const headers = [...component.properties.header]
-                        headers[columnIndex].content = updatedArray
-                        updateProperty("header", headers, component, onPropertyChange)
-                      }
-                    }}
-                  />
-
-                  <UI.Button
-                    wrapperClass="absolute right-2 bottom-2 w-8"
-                    content={{ icon: ButtonDelete }}
-                    onClick={() => {
-                      const headers = [...(component.properties.header || [])]
-                      ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
-                      updateProperty("header", headers, component, onPropertyChange)
-                    }}
-                  />
-                </div>
-              {:else if content.type == "select"}
-                {@const select = content.data}
-                <div id={`item-${index}-${columnIndex}`} class="relative bg-(--container-color)/50 rounded-2xl p-2">
+                {:else if content.type == "select"}
+                  {@const select = content.data}
                   <div class="flex w-1/3 mx-auto gap-2">
                     <UI.Input
                       wrapperClass="w-1/2"
@@ -316,35 +288,8 @@
                       }}
                     />
                   </div>
-
-                  <Dragging
-                    wrapperClass="absolute left-2 bottom-2"
-                    container={settingsContainer[columnIndex]}
-                    array={column.content}
-                    elementIndex={index}
-                    containerIndex={columnIndex}
-                    onUpdate={(updatedArray, index) => {
-                      if (index === columnIndex) {
-                        const headers = [...component.properties.header]
-                        headers[columnIndex].content = updatedArray
-                        updateProperty("header", headers, component, onPropertyChange)
-                      }
-                    }}
-                  />
-
-                  <UI.Button
-                    wrapperClass="absolute right-2 bottom-2 w-8"
-                    content={{ icon: ButtonDelete }}
-                    onClick={() => {
-                      const headers = [...(component.properties.header || [])]
-                      ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
-                      updateProperty("header", headers, component, onPropertyChange)
-                    }}
-                  />
-                </div>
-              {:else if content.type == "button"}
-                {@const button = content.data}
-                <div id={`item-${index}-${columnIndex}`} class="relative w-full bg-(--container-color)/50 rounded-2xl p-2">
+                {:else if content.type == "button"}
+                  {@const button = content.data}
                   <div class="flex w-[95%] mx-auto items-end justify-between gap-2">
                     <UI.Input
                       label={{ name: $t("constructor.props.name") }}
@@ -415,34 +360,8 @@
                       }}
                     />
                   </div>
-
-                  <UI.Button
-                    wrapperClass="absolute right-2 bottom-2 w-8"
-                    content={{ icon: ButtonDelete }}
-                    onClick={() => {
-                      const headers = [...(component.properties.header || [])]
-                      ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
-                      updateProperty("header", headers, component, onPropertyChange)
-                    }}
-                  />
-                  <Dragging
-                    wrapperClass="absolute left-2 bottom-2"
-                    container={settingsContainer[columnIndex]}
-                    array={column.content}
-                    elementIndex={index}
-                    containerIndex={columnIndex}
-                    onUpdate={(updatedArray, index) => {
-                      if (index === columnIndex) {
-                        const headers = [...component.properties.header]
-                        headers[columnIndex].content = updatedArray
-                        updateProperty("header", headers, component, onPropertyChange)
-                      }
-                    }}
-                  />
-                </div>
-              {:else if content.type == "progressBar"}
-                {@const progressBar = content.data}
-                <div id={`item-${index}-${columnIndex}`} class="relative bg-(--container-color)/50 rounded-2xl p-2">
+                {:else if content.type == "progressBar"}
+                  {@const progressBar = content.data}
                   <div class="w-3/5 flex mx-auto items-end gap-2">
                     <UI.Input
                       label={{ name: $t("constructor.props.table.progressBar.key") }}
@@ -477,34 +396,8 @@
                       onUpdate={(value) => updateContentProperty(columnIndex, index, "units", value as string)}
                     />
                   </div>
-
-                  <Dragging
-                    wrapperClass="absolute left-2 bottom-2"
-                    container={settingsContainer[columnIndex]}
-                    array={column.content}
-                    elementIndex={index}
-                    containerIndex={columnIndex}
-                    onUpdate={(updatedArray, index) => {
-                      if (index === columnIndex) {
-                        const headers = [...component.properties.header]
-                        headers[columnIndex].content = updatedArray
-                        updateProperty("header", headers, component, onPropertyChange)
-                      }
-                    }}
-                  />
-                  <UI.Button
-                    wrapperClass="absolute right-2 bottom-2 w-8"
-                    content={{ icon: ButtonDelete }}
-                    onClick={() => {
-                      const headers = [...(component.properties.header || [])]
-                      ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
-                      updateProperty("header", headers, component, onPropertyChange)
-                    }}
-                  />
-                </div>
-              {:else if !forConstructor && content.type == "image"}
-                {@const image = content.data}
-                <div id={`item-${index}-${columnIndex}`} class="relative bg-(--container-color)/50 rounded-2xl p-2">
+                {:else if !forConstructor && content.type == "image"}
+                  {@const image = content.data}
                   <div class="flex items-end gap-2 w-[80%] mx-auto">
                     <CommonSnippets
                       snippet="IconsLib"
@@ -544,35 +437,36 @@
                       onUpdate={(value) => updateContentProperty(columnIndex, index, "height", `${value ?? 0}rem`)}
                     />
                   </div>
-                  <Dragging
-                    wrapperClass="absolute left-2 bottom-2"
-                    container={settingsContainer[columnIndex]}
-                    array={column.content}
-                    elementIndex={index}
-                    containerIndex={columnIndex}
-                    onUpdate={(updatedArray, index) => {
-                      if (index === columnIndex) {
-                        const headers = [...component.properties.header]
-                        headers[columnIndex].content = updatedArray
-                        updateProperty("header", headers, component, onPropertyChange)
-                      }
-                    }}
-                  />
-                  <UI.Button
-                    wrapperClass="absolute right-2 bottom-2 w-8"
-                    content={{ icon: ButtonDelete }}
-                    onClick={() => {
-                      const headers = [...(component.properties.header || [])]
-                      ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
+                {/if}
+                <Dragging
+                  wrapperClass="absolute left-2 bottom-2"
+                  container={settingsContainer[columnIndex]}
+                  array={column.content}
+                  elementIndex={index}
+                  containerIndex={columnIndex}
+                  onUpdate={(updatedArray, index) => {
+                    if (index === columnIndex) {
+                      const headers = [...component.properties.header]
+                      headers[columnIndex].content = updatedArray
                       updateProperty("header", headers, component, onPropertyChange)
-                    }}
-                  />
-                </div>
-              {/if}
+                    }
+                  }}
+                />
+
+                <UI.Button
+                  wrapperClass="absolute right-2 bottom-2 w-8"
+                  content={{ icon: ButtonDelete }}
+                  onClick={() => {
+                    const headers = [...(component.properties.header || [])]
+                    ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
+                    updateProperty("header", headers, component, onPropertyChange)
+                  }}
+                />
+              </div>
             {/each}
           {/if}
-          <div id={`item-${column.content.length}-${columnIndex}`} class="min-h-2"></div>
         </div>
+        <div id={`item-${column.content.length}-${columnIndex}`} class="min-h-2"></div>
       </div>
     {/each}
     <div id={`column-${component.properties.header.length}`} class="min-h-4"></div>
@@ -625,8 +519,8 @@
 {#if forConstructor}
   <div class="relative flex flex-row items-start justify-center pb-4">
     <div class="flex w-1/3 flex-col px-2">
-      <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
+      <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
       {@render TableStashData()}
       {#if component.properties.dataBuffer.stashData}
         <div class="flex items-end">

package/dist/Widget/Widget.svelte

@@ -4,6 +4,7 @@
 
   let {
     id = crypto.randomUUID(),
+    wrapperClass,
     label = { name: "", class: "" },
     readonly = false,
     settings = { label: "", number: { minNum: 0, maxNum: 1000, step: 1 } },
@@ -101,14 +102,14 @@
   }
 </script>
 
-<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="w-full h-full p-1">
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge("w-full h-full p-1", wrapperClass)}>
   <div
     class={`h-full grid grid-rows-[4fr_9fr_5fr] rounded-xl bg-(--container-color)
      transition-shadow duration-250 p-1
      shadow-[0_0_3px_rgb(0_0_0_/0.25)] hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]`}
   >
-    <div class="grid gap-2 overflow-hidden items-center" style="grid-template-columns:{icons.array ? '3.5rem' : ''} 1fr;">
-      {#if icons.array}
+    <div class="grid gap-2 overflow-hidden items-center" style="grid-template-columns:{icons.array && icons.array.length !== 0 ? '3.5rem' : ''} 1fr;">
+      {#if icons.array && icons.array.length !== 0}
         <div class="size-14 p-0.5 [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full {icons.class}">
           {@html currentImage}
         </div>
@@ -127,7 +128,7 @@
         <span class="text-5xl">{currentValue === 0 ? (settings.switch?.captionLeft ?? "Off") : (settings.switch?.captionRight ?? "On")}</span>
       {/if}
     </div>
-    <div class="px-2">
+    <div class="flex flex-col items-center justify-center px-2">
       {#if settings.label}
         <h5>{settings.label}</h5>
       {/if}

package/dist/Widget/WidgetProps.svelte

@@ -161,9 +161,9 @@
 {#if forConstructor}
   <div class="flex mb-4 items-start justify-center gap-8">
     <div class="flex w-1/3 flex-col px-2">
+      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
       <CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
-      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />

package/dist/libIcons/Library.svelte

@@ -0,0 +1,8 @@
+<script lang="ts"></script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"
+  ><path
+    fill="currentColor"
+    d="M1 3.25C1 2.56 1.56 2 2.249 2h.5c.69 0 1.248.56 1.248 1.25v9.495c0 .69-.559 1.25-1.248 1.25h-.5A1.25 1.25 0 0 1 1 12.744zM2.249 3a.25.25 0 0 0-.25.25v9.495c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25V3.249a.25.25 0 0 0-.25-.25zm2.748.25c0-.69.559-1.25 1.249-1.25h.5c.689 0 1.248.56 1.248 1.25v9.495c0 .69-.56 1.25-1.249 1.25h-.5a1.25 1.25 0 0 1-1.248-1.25zM6.246 3a.25.25 0 0 0-.25.25v9.495c0 .138.112.25.25.25h.5a.25.25 0 0 0 .249-.25V3.249a.25.25 0 0 0-.25-.25zm5.726 1.777a1.25 1.25 0 0 0-1.57-.713l-.583.204a1.25 1.25 0 0 0-.746 1.645l2.937 7.304c.249.62.94.933 1.571.713l.582-.204a1.25 1.25 0 0 0 .746-1.646zm-1.24.23a.25.25 0 0 1 .313.143l2.937 7.303a.25.25 0 0 1-.149.33l-.582.203a.25.25 0 0 1-.314-.142L10 5.54a.25.25 0 0 1 .149-.329z"
+  /></svg
+>

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

package/dist/locales/translations.js

@@ -98,7 +98,19 @@ const translations = {
         "constructor.props.autocomplete": "Автозаполнение",
         "constructor.props.maxlength": "Максимальная длина",
         "constructor.props.regexp": "Выражение валидации",
-        "constructor.props.regexp.info": "Введите RegExp без /.../ (например: ^\\d+$)",
+        "constructor.props.regexp.library.info": "Библиотека выражений",
+        "constructor.props.regexp.latin10": "Строка латинских символов с максимальной длиной 10",
+        "constructor.props.regexp.kiril10": "Строка букв русского алфавита с максимальной длиной 10",
+        "constructor.props.regexp.ipv4": "IPv4",
+        "constructor.props.regexp.ipv6": "IPv6",
+        "constructor.props.regexp.date": "Дата в формате ДД.ММ.ГГГГ",
+        "constructor.props.regexp.time": "Время (24-часовой формат)",
+        "constructor.props.regexp.email": "Электронная почта",
+        "constructor.props.regexp.url": "URL",
+        "constructor.props.regexp.numbers": "Целые числа и числа с плавающей точкой (разделитель точка)",
+        "constructor.props.regexp.colorhex": "Цвет HEX",
+        "constructor.props.regexp.devid": "ID устройства",
+        "constructor.props.regexp.serialnum": "Серийный номер устройства",
         "constructor.props.min": "Мин.",
         "constructor.props.max": "Макс.",
         "constructor.props.units": "Единица измерения",
@@ -142,8 +154,10 @@ const translations = {
         "constructor.props.multiselect": "Мультивыбор",
         "constructor.props.access": "Доступ (не для владельца)",
         "constructor.props.map.timeout": "Таймаут маркеров:",
-        "constructor.props.joystick.axes": "Названия осей",
-        "constructor.props.joystick.axes.info": "Поле для ввода названий осей, разделенных пробелами (2 или 3 названия)",
+        "constructor.props.joystick.pitch.axe": "Ocь ⮃",
+        "constructor.props.joystick.roll.axe": "Ось ↶ ↷",
+        "constructor.props.joystick.yaw.axe": "Ось ⮂",
+        "constructor.props.joystick.axes.info": "Если поле пустое - ось не видна",
         "constructor.props.joystick.homebutton": "Центральная кнопка сброса",
         "constructor.props.file.select": "Выберите файл",
         "constructor.props.file.notselected": "Файл не выбран",

package/dist/options.d.ts

@@ -155,6 +155,11 @@ export declare const optionsStore: import("svelte/store").Readable<{
         value: string;
         name: string;
     }[];
+    INPUT_REGEXP_OPTIONS: {
+        id: string;
+        value: string;
+        name: string;
+    }[];
     AUTOCOMPLETE_CONSTRUCTOR_OPTIONS: {
         id: string;
         value: string;

package/dist/options.js

@@ -199,6 +199,24 @@ export const optionsStore = derived(t, ($t) => {
             { id: id(), value: "slider", name: $t("constructor.props.slider") },
             { id: id(), value: "switch", name: $t("constructor.props.switch") },
         ],
+        INPUT_REGEXP_OPTIONS: [
+            { id: id(), value: "/^[0-9a-z]{0,10}$/", name: $t("constructor.props.regexp.latin10") },
+            { id: id(), value: "/^[а-яА-яЁё]{0,10}$/", name: $t("constructor.props.regexp.kiril10") },
+            {
+                id: id(),
+                value: "/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/",
+                name: $t("constructor.props.regexp.ipv4"),
+            },
+            { id: id(), value: "/((^|:)([0-9a-fA-F]{0,4})){1,8}$/", name: $t("constructor.props.regexp.ipv6") },
+            { id: id(), value: "/(0[1-9]|[12][0-9]|3[01])[.](0[1-9]|1[012])[.](19|20)\\d\\d/", name: $t("constructor.props.regexp.date") },
+            { id: id(), value: "/^([01]?[0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/", name: $t("constructor.props.regexp.time") },
+            { id: id(), value: "/^[a-zA-Z0-9.!#$%&'*+/=?^_{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)\\*$/", name: $t("constructor.props.regexp.email") },
+            { id: id(), value: "/(https?):((//)|(\\\\))+[\\w\\d:#@%/$()~_?\\+-=\\\\\\.&]*/", name: $t("constructor.props.regexp.url") },
+            { id: id(), value: "/^-?\\d+(\\.\\d+)?$/", name: $t("constructor.props.regexp.numbers") },
+            { id: id(), value: "/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/", name: $t("constructor.props.regexp.colorhex") },
+            { id: id(), value: "/^[0-9A-F]{0,4}$/", name: $t("constructor.props.regexp.devid") },
+            { id: id(), value: "/^[0-9a-fA-F]{4}-[0-9a-fA-F]{24}[:][0-9a-fA-F]{2}$|^$/", name: $t("constructor.props.regexp.serialnum") },
+        ],
         AUTOCOMPLETE_CONSTRUCTOR_OPTIONS: [
             { id: id(), value: "on", name: $t("constructor.props.autocomplete.on") },
             { id: id(), value: "off", name: $t("constructor.props.autocomplete.off") },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.9.6",
+  "version": "1.9.8",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -37,21 +37,21 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.56.1",
+    "@sveltejs/kit": "^2.57.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/vite": "^4.2.2",
     "@types/maplibre-gl": "^1.14.0",
-    "@types/node": "^25.5.2",
-    "prettier": "^3.8.1",
+    "@types/node": "^25.6.0",
+    "prettier": "^3.8.2",
     "prettier-plugin-svelte": "^3.5.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "publint": "^0.3.18",
-    "svelte": "^5.55.1",
+    "svelte": "^5.55.2",
     "tailwindcss": "^4.2.2",
     "tsx": "^4.21.0",
     "typescript": "^6.0.2",
-    "vite": "^8.0.5",
+    "vite": "^8.0.8",
     "vite-plugin-compression": "^0.5.1"
   }
 }