poe-svelte-ui-lib 1.9.6 → 1.9.7

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(true)
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
@@ -146,14 +148,42 @@
       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}
+        help={{ info: $t("constructor.props.regexp.info") }}
+        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") }}

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>
@@ -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/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/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/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.7",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -37,7 +37,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.56.1",
+    "@sveltejs/kit": "^2.57.0",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/vite": "^4.2.2",
@@ -47,11 +47,11 @@
     "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"
   }
 }