poe-svelte-ui-lib 1.10.0 → 1.10.2

package/dist/Graph/GraphProps.svelte

@@ -45,9 +45,10 @@
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <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="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
+      {@render GraphIsTest()}
     </div>
   </div>
 {:else}

package/dist/Input/Input.svelte

@@ -72,7 +72,16 @@
     const rounded2 = Number(num.toFixed(2))
     if (Math.abs(rounded2 - num) < 1e-10) return rounded2
 
-    return rounded2
+    const rounded3 = Number(num.toFixed(3))
+    if (Math.abs(rounded3 - num) < 1e-10) return rounded3
+
+    const rounded4 = Number(num.toFixed(4))
+    if (Math.abs(rounded4 - num) < 1e-10) return rounded4
+
+    const rounded5 = Number(num.toFixed(5))
+    if (Math.abs(rounded5 - num) < 1e-10) return rounded5
+
+    return rounded5
   }
 </script>
 
@@ -129,8 +138,7 @@
         rows={textareaRows}
         {placeholder}
         {readonly}
-        oninput={(e) => handleInputChange((e.currentTarget as HTMLTextAreaElement).value)}
-      ></textarea>
+        oninput={(e) => handleInputChange((e.currentTarget as HTMLTextAreaElement).value)}></textarea>
     {/if}
 
     {#if type === "password" && !disabled}

package/dist/Input/InputProps.svelte

@@ -361,6 +361,7 @@
 {#snippet InputValue()}
   <UI.Input
     label={{ name: $T("constructor.props.defaultvalue") }}
+    help={{ regExp: component.properties.type === "number" ? /^\d*\.?\d+$/ : /^.*$/ }}
     value={component.properties.value}
     onUpdate={(value) => updateProperty("value", value as string)}
   />

package/dist/Joystick/Joystick.svelte

@@ -202,7 +202,8 @@
         </div>
       </div>
 
-      <div class="absolute top-4 w-55 flex items-center justify-end">
+      <!-- Копка 0 -->
+      <div class="absolute {label.name ? 'top-4' : 'top-0'} w-55 flex items-center justify-end">
         <button
           class="flex shadow-sm hover:shadow-md transition duration-200 justify-center cursor-pointer items-center bg-(--back-color) rounded-full size-10 p-0.5
            font-semibold text-2xl [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
@@ -212,26 +213,6 @@
         >
           0
         </button>
-        <!-- {#each [0, 1] as i}
-          <button
-            class="flex shadow-sm hover:shadow-md transition duration-200 justify-center cursor-pointer items-center bg-(--back-color) rounded-full size-10 p-0.5
-            {i ? 'font-semibold text-2xl' : ''} [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
-            style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
-            title=""
-            onclick={() => (i ? (value = [0, 0, 0, 0]) : {})}
-          >
-            {#if i}
-              0
-            {:else}
-              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
-                ><path
-                  fill="currentColor"
-                  d="M6 19h3v-5q0-.425.288-.712T10 13h4q.425 0 .713.288T15 14v5h3v-9l-6-4.5L6 10zm-2 0v-9q0-.475.213-.9t.587-.7l6-4.5q.525-.4 1.2-.4t1.2.4l6 4.5q.375.275.588.7T20 10v9q0 .825-.588 1.413T18 21h-4q-.425 0-.712-.288T13 20v-5h-2v5q0 .425-.288.713T10 21H6q-.825 0-1.412-.587T4 19m8-6.75"
-                /></svg
-              >
-            {/if}
-          </button>
-        {/each} -->
       </div>
 
       <!-- Боковые кнопки (ось roll) -->

package/dist/TextField/TextField.svelte

@@ -2,7 +2,13 @@
   import { twMerge } from "tailwind-merge"
   import type { ITextFieldProps } from "../types"
 
-  let { id = crypto.randomUUID(), wrapperClass = "", background = false, content = { name: "", class: "", size: "base" } }: ITextFieldProps = $props()
+  let {
+    id = crypto.randomUUID(),
+    wrapperClass = "",
+    background = false,
+    underline = false,
+    content = { name: "", class: "", size: "base" },
+  }: ITextFieldProps = $props()
 
   const textSize = {
     small: "text-sm",
@@ -15,7 +21,10 @@
 
 <div
   id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
-  class={twMerge(`relative flex w-full flex-col items-center  ${background ? "rounded-2xl bg-(--back-color) px-6 py-2" : ""}`, wrapperClass)}
+  class={twMerge(
+    `relative flex w-full flex-col items-center ${background ? "rounded-2xl bg-(--back-color) px-6 py-2" : ""} ${underline ? "underline" : ""}`,
+    wrapperClass,
+  )}
 >
   <p class={twMerge(`w-full text-center ${textSize[content.size ?? "base"]}`, content.class)}>
     {content.name}

package/dist/TextField/TextFieldProps.svelte

@@ -70,6 +70,7 @@
     value={$optionsStore.TEXTFIELD_SETTINGS_OPTIONS.filter((opt) => {
       if (component.properties.content.class.includes(`${opt.value}`) && !component.properties.content.class.includes(`not-${opt.value}`)) return opt
       if (opt.value == "background" && component.properties.background) return opt
+      if (opt.value == "underline" && component.properties.underline) return opt
     })}
     options={$optionsStore.TEXTFIELD_SETTINGS_OPTIONS}
     onUpdate={(value) => {
@@ -77,31 +78,36 @@
         if (!opt?.value) return false
         return (
           (component.properties.content.class.includes(`${opt.value}`) && !component.properties.content.class.includes(`not-${opt.value}`)) ||
-          (opt.value == "background" && component.properties.background)
+          (opt.value == "background" && component.properties.background) ||
+          (opt.value == "underline" && component.properties.underline)
         )
       }).map((opt) => opt.value)
       if (Array.isArray(value)) {
         value.forEach((opt) => {
           opt?.value === "background"
             ? updateProperty("background", true, component, onPropertyChange)
-            : updateProperty(
-                "content.class",
-                twMerge(`${component.properties.content.class} ${opt.value === "bold" ? "font-bold" : "italic"}`),
-                component,
-                onPropertyChange,
-              )
+            : opt?.value === "underline"
+              ? updateProperty("underline", true, component, onPropertyChange)
+              : updateProperty(
+                  "content.class",
+                  twMerge(`${component.properties.content.class} ${opt.value === "bold" ? "font-bold" : "italic"}`),
+                  component,
+                  onPropertyChange,
+                )
         })
 
         currentActiveValues.forEach((activeValue) => {
           if (!value.some((opt) => opt?.value === activeValue)) {
             activeValue === "background"
               ? updateProperty("background", false, component, onPropertyChange)
-              : updateProperty(
-                  "content.class",
-                  twMerge(`${component.properties.content.class} ${activeValue === "bold" ? "font-normal" : "not-italic"}`),
-                  component,
-                  onPropertyChange,
-                )
+              : activeValue === "underline"
+                ? updateProperty("underline", false, component, onPropertyChange)
+                : updateProperty(
+                    "content.class",
+                    twMerge(`${component.properties.content.class} ${activeValue === "bold" ? "font-normal" : "not-italic"}`),
+                    component,
+                    onPropertyChange,
+                  )
           }
         })
       }

package/dist/VideoViewer/VideoViewer.svelte

@@ -135,7 +135,7 @@
     </div>
   </div>
 
-  {#if showSelect}
+  {#if sources.length > 1 && showSelect}
     {@const deviceOptions = sources.map((dev) => {
       return { id: dev.deviceId, name: dev.label, value: dev.deviceId }
     })}

package/dist/index.d.ts

@@ -32,6 +32,7 @@ export { default as TabsProps } from "./Tabs/TabsProps.svelte";
 export { default as TextField } from "./TextField/TextField.svelte";
 export { default as TextFieldProps } from "./TextField/TextFieldProps.svelte";
 export { default as VideoViewer } from "./VideoViewer/VideoViewer.svelte";
+export { default as VideoViewerProps } from "./VideoViewer/VideoViewerProps.svelte";
 export { default as Widget } from "./Widget/Widget.svelte";
 export { default as WidgetProps } from "./Widget/WidgetProps.svelte";
 export * from "./locales/i18n";

package/dist/index.js

@@ -33,7 +33,7 @@ export { default as TabsProps } from "./Tabs/TabsProps.svelte";
 export { default as TextField } from "./TextField/TextField.svelte";
 export { default as TextFieldProps } from "./TextField/TextFieldProps.svelte";
 export { default as VideoViewer } from "./VideoViewer/VideoViewer.svelte";
-// export { default as VideoViewerProps } from "./VideoViewer/VideoViewerProps.svelte"
+export { default as VideoViewerProps } from "./VideoViewer/VideoViewerProps.svelte";
 export { default as Widget } from "./Widget/Widget.svelte";
 export { default as WidgetProps } from "./Widget/WidgetProps.svelte";
 export * from "./locales/i18n";

package/dist/locales/translations.js

@@ -154,6 +154,7 @@ const translations = {
         "constructor.props.bold": "Жирный",
         "constructor.props.italic": "Курсив",
         "constructor.props.background": "Фон",
+        "constructor.props.underline": "Линия",
         "constructor.props.optionclass": "Стили опции",
         "constructor.props.optionvalue": "Значение",
         "constructor.props.optionposition": "Позиция",

package/dist/options.js

@@ -55,6 +55,7 @@ export const optionsStore = derived(T, ($T) => {
         TEXTFIELD_SETTINGS_OPTIONS: [
             { id: id(), value: "bold", name: $T("constructor.props.bold") },
             { id: id(), value: "italic", name: $T("constructor.props.italic") },
+            { id: id(), value: "underline", name: $T("constructor.props.underline") },
             { id: id(), value: "background", name: $T("constructor.props.background") },
         ],
         COLOR_OPTIONS: [

package/dist/types.d.ts

@@ -405,6 +405,7 @@ export interface ITextFieldProps {
     id?: string;
     wrapperClass?: string;
     background?: boolean;
+    underline?: boolean;
     content?: {
         name?: string;
         class?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "license": "MIT",
   "type": "module",
   "scripts": {