poe-svelte-ui-lib 1.9.20 → 1.9.22

package/dist/CommonSnippets.svelte

@@ -33,6 +33,7 @@
     | "EventHandlerArgument"
     | "IconsLib"
     | "Readonly"
+    | "BitModeInfo"
     | "MinMaxStep"
     | ""
 
@@ -203,6 +204,18 @@
   />
 {/snippet}
 
+{#snippet BitModeInfo()}
+  {#if (component.properties as UI.IInputProps).type === "bitMode" || (component.properties as UI.ISelectProps).bitMode || (component.properties as UI.ISwitchProps).bitMode}
+    <UI.TextField
+      wrapperClass="mt-5 shadow-(--border-shadow-color) bg-(--blue-color)/20"
+      content={{
+        name: "Выберите битовый диапазон в рамках глобальной переменной для данного компонента.",
+      }}
+      background
+    />
+  {/if}
+{/snippet}
+
 {#snippet MinMaxStep(initialValue: {
   number: { minNum: number; maxNum: number; step?: number }
   bitMode?: boolean
@@ -301,6 +314,8 @@
   {@render EventHandlerArgument()}
 {:else if snippet === "Readonly"}
   {@render Readonly()}
+{:else if snippet === "BitModeInfo"}
+  {@render BitModeInfo()}
 {:else if snippet === "IconsLib"}
   {@render IconsLib(initialValue)}
 {:else if snippet === "MinMaxStep"}

package/dist/CommonSnippets.svelte.d.ts

@@ -1,5 +1,5 @@
 import * as UI from "./";
-type snippetNames = "Variable" | "Access" | "Colors" | "Label" | "LabelAlign" | "LabelClass" | "Identificator" | "WrapperClass" | "Disabled" | "EventHandlerArgument" | "IconsLib" | "Readonly" | "MinMaxStep" | "";
+type snippetNames = "Variable" | "Access" | "Colors" | "Label" | "LabelAlign" | "LabelClass" | "Identificator" | "WrapperClass" | "Disabled" | "EventHandlerArgument" | "IconsLib" | "Readonly" | "BitModeInfo" | "MinMaxStep" | "";
 type $$ComponentProps = {
     snippet: snippetNames;
     component: UI.UIComponent;

package/dist/Input/InputProps.svelte

@@ -6,6 +6,7 @@
   import { optionsStore } from "../options"
   import { twMerge } from "tailwind-merge"
   import Library from "../libIcons/Library.svelte"
+  import CommonSnippets from "../CommonSnippets.svelte"
 
   const {
     component,
@@ -381,6 +382,7 @@
       {@render InputPlaceholder()}
       {@render InputInfo()}
       {@render InputSettings()}
+      <CommonSnippets snippet="BitModeInfo" {component} {onPropertyChange} />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       {@render InputLabel()}
@@ -403,6 +405,7 @@
       {@render InputAccess()}
       {@render InputValue()}
       {@render InputType()}
+      <CommonSnippets snippet="BitModeInfo" {component} {onPropertyChange} />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       {@render InputPlaceholder()}

package/dist/Modal.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { browser } from "$app/environment"
   import { type Snippet } from "svelte"
   import { fade, scale } from "svelte/transition"
   import { twMerge } from "tailwind-merge"
@@ -36,29 +35,22 @@
 
   let isTopmost = $derived($ModalStack.at(-1) === modalId)
 
+  // Открытие/закрытие модалки + Escape
   $effect(() => {
-    if (!browser) return
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && isTopmost) {
-        isOpen = false
-        onCancel()
-      }
-    }
-
     if (isOpen) {
       ModalStack.open(modalId)
-      document.addEventListener("keydown", handleKeyDown)
-    }
-
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown)
+    } else {
       ModalStack.close(modalId)
     }
   })
 
   $effect(() => {
-    if (!browser || !isOpen) return
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isTopmost) {
+        isOpen = false
+        onCancel()
+      }
+    }
 
     const handleClickOutside = (e: MouseEvent) => {
       const target = e.target as HTMLElement
@@ -68,8 +60,15 @@
       }
     }
 
+    if (!isOpen) return
+
+    document.addEventListener("keydown", handleKeyDown)
     document.addEventListener("mousedown", handleClickOutside)
-    return () => document.removeEventListener("mousedown", handleClickOutside)
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown)
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
   })
 </script>
 

package/dist/ModalStackStore.d.ts

@@ -2,6 +2,4 @@ export declare const ModalStack: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<string[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
     open: (id: string) => void;
     close: (id: string) => void;
-    getTopmost: () => string;
-    isInStack: (id: string) => boolean;
 };

package/dist/ModalStackStore.js

@@ -1,4 +1,4 @@
-import { writable, get } from "svelte/store";
+import { writable } from "svelte/store";
 const ModalStore = writable([]);
 export const ModalStack = {
     subscribe: ModalStore.subscribe,
@@ -8,12 +8,4 @@ export const ModalStack = {
     close: (id) => {
         ModalStore.update((state) => state.filter((item) => item !== id));
     },
-    getTopmost: () => {
-        const state = get(ModalStore);
-        return state[state.length - 1];
-    },
-    isInStack: (id) => {
-        const state = get(ModalStore);
-        return state.includes(id);
-    },
 };

package/dist/Select/SelectProps.svelte

@@ -6,7 +6,6 @@
   import ButtonDelete from "../libIcons/ButtonDelete.svelte"
   import ButtonAdd from "../libIcons/ButtonAdd.svelte"
   import { optionsStore } from "../options.js"
-  import { twMerge } from "tailwind-merge"
   import CommonSnippets from "../CommonSnippets.svelte"
 
   const {
@@ -265,6 +264,7 @@
     <div class="flex w-1/3 flex-col px-2">
       {@render SelectType()}
       {@render SelectValueType()}
+      <CommonSnippets snippet="BitModeInfo" {component} {onPropertyChange} />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
@@ -284,6 +284,7 @@
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
       <CommonSnippets snippet="LabelClass" {component} {onPropertyChange} />
       <CommonSnippets snippet="Disabled" {component} {onPropertyChange} />
+      <CommonSnippets snippet="BitModeInfo" {component} {onPropertyChange} />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
       {@render SelectType()}

package/dist/Table/Table.svelte

@@ -266,7 +266,7 @@
               column.label?.class,
             )}
           >
-            <span>{column.label?.name}</span>
+            <span>{$t(column.label?.name ?? "")}</span>
 
             {#if typeof column.content !== "function" && (column.content as ITableContent<any>[])?.some((c) => c.type === "text" && c.data.sortable)}
               <button
@@ -348,7 +348,7 @@
                               {/if}
                             </span>
                           {/if}
-                          {typeof button.name === "function" ? button.name(row) : button.name}
+                          {typeof button.name === "function" ? $t(button.name(row)) : $t(button.name ?? "")}
                         </button>
                       {:else if content.type === "select"}
                         {@const select = content.data}

package/dist/TextField/TextField.svelte

@@ -15,7 +15,7 @@
 
 <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-max px-6 py-2" : ""}`, wrapperClass)}
 >
   <p class={twMerge(`w-full text-center ${textSize[content.size ?? "base"]}`, content.class)}>
     {content.name}

package/package.json

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