poe-svelte-ui-lib 1.9.18 → 1.9.19

package/dist/Modal.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-  import { onMount, type Snippet } from "svelte"
+  import { browser } from "$app/environment"
+  import { type Snippet } from "svelte"
   import { fade, scale } from "svelte/transition"
   import { twMerge } from "tailwind-merge"
   import CrossIcon from "./libIcons/CrossIcon.svelte"
+  import { ModalStack } from "./ModalStackStore"
 
   let {
     isOpen = $bindable(false),
@@ -24,48 +26,77 @@
     onCancel?: () => void
   } = $props()
 
-  let modalWrapper: HTMLDivElement | null = $state(null)
+  let modalId = $state(crypto.randomUUID())
 
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.key === "Escape") {
-      isOpen = false
-      onCancel()
+  let zIndex = $derived.by(() => {
+    const stack = $ModalStack
+    const indexInStack = stack.indexOf(modalId)
+    return indexInStack !== -1 ? 100 + indexInStack : 100
+  })
+
+  let isTopmost = $derived($ModalStack.at(-1) === modalId)
+
+  $effect(() => {
+    if (!browser) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isTopmost) {
+        isOpen = false
+        onCancel()
+      }
     }
-  }
 
-  const handleClickOutside = (event: MouseEvent) => {
-    if (modalWrapper && !modalWrapper.contains(event.target as Node)) {
-      isOpen = false
-      onCancel()
+    if (isOpen) {
+      ModalStack.open(modalId)
+      document.addEventListener("keydown", handleKeyDown)
     }
-  }
 
-  onMount(() => {
-    document.addEventListener("keydown", handleKeyDown)
-    document.addEventListener("mousedown", handleClickOutside)
     return () => {
       document.removeEventListener("keydown", handleKeyDown)
-      document.removeEventListener("mousedown", handleClickOutside)
+      ModalStack.close(modalId)
+    }
+  })
+
+  $effect(() => {
+    if (!browser || !isOpen) return
+
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as HTMLElement
+      if (isTopmost && !target.closest("[data-modal]")) {
+        isOpen = false
+        onCancel()
+      }
     }
+
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => 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
+    class="fixed inset-0 flex items-center justify-center bg-black/50"
+    data-modal-backdrop
+    transition:fade={{ duration: 200 }}
+    style="z-index: {zIndex - 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};"
+      data-modal
+      class={twMerge("flex w-300 flex-col overflow-hidden rounded-2xl bg-(--back-color) text-center", wrapperClass)}
+      style="width: {width}; z-index: {zIndex};"
       transition:scale={{ duration: 250, start: 0.8 }}
     >
       <div class="flex items-end justify-between bg-(--field-color) px-6 py-3">
         <h4>{title}</h4>
-        <button class="h-6 w-6 cursor-pointer" onclick={onCancel}> <CrossIcon /> </button>
+        <button class="h-6 w-6 cursor-pointer" onclick={onCancel}>
+          <CrossIcon />
+        </button>
       </div>
 
       <div class={twMerge("flex h-full w-full flex-col overflow-auto p-2", mainClass)}>
         {@render main?.()}
       </div>
+
       {#if footer}
         <div class="flex flex-row-reverse justify-between bg-(--field-color) p-1.5">
           {@render footer?.()}

package/dist/ModalStackStore.d.ts

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,19 @@
+import { writable, get } from "svelte/store";
+const ModalStore = writable([]);
+export const ModalStack = {
+    subscribe: ModalStore.subscribe,
+    open: (id) => {
+        ModalStore.update((state) => [...state, id]);
+    },
+    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/Slider/Slider.svelte

@@ -17,7 +17,7 @@
   const isRange = $derived(type === "range" || (Array.isArray(value) && value.length === 2))
 
   const maxDigits = $derived(String(number.maxNum ?? 10).length)
-  const valueWidth = $derived(`${maxDigits + 1}ch`) /* +1 на запас */
+  const valueWidth = $derived(`${maxDigits + 1}ch`)
 
   /* Инициализация значений с проверкой типа */
   let singleValue = $derived(!isRange && typeof value === "number" ? value : number.minNum)

package/dist/index.d.ts

@@ -35,4 +35,5 @@ export { default as Widget } from "./Widget/Widget.svelte";
 export { default as WidgetProps } from "./Widget/WidgetProps.svelte";
 export * from "./locales/i18n";
 export * from "./locales/translations";
+export * from "./ModalStackStore";
 export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type IOption, type ISwitchProps, type IColorPickerProps, type ISliderProps, type ITextFieldProps, type IMapProps, type IProgressBarProps, type IWidgetProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, type ITabsProps, type IJoystickProps, type IFileAttachProps, type IDeviceGNSS, type ICarouselProps, type IReceivingDataObject, } from "./types";

package/dist/index.js

@@ -36,4 +36,5 @@ export { default as Widget } from "./Widget/Widget.svelte";
 export { default as WidgetProps } from "./Widget/WidgetProps.svelte";
 export * from "./locales/i18n";
 export * from "./locales/translations";
+export * from "./ModalStackStore";
 export {} from "./types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.9.18",
+  "version": "1.9.19",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -33,27 +33,27 @@
     "svelte": "^5.0.0"
   },
   "dependencies": {
-    "tailwind-merge": "^3.5.0"
+    "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.59.1",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^7.1.1",
-    "@tailwindcss/vite": "^4.2.4",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@tailwindcss/vite": "^4.3.0",
     "@types/maplibre-gl": "^1.14.0",
-    "@types/node": "^25.6.0",
+    "@types/node": "^25.7.0",
     "dompurify": "^3.4.2",
     "marked": "^18.0.3",
     "prettier": "^3.8.3",
-    "prettier-plugin-svelte": "^3.5.1",
+    "prettier-plugin-svelte": "^3.5.2",
     "prettier-plugin-tailwindcss": "^0.8.0",
-    "publint": "^0.3.19",
+    "publint": "^0.3.21",
     "svelte": "^5.55.5",
-    "tailwindcss": "^4.2.4",
+    "tailwindcss": "^4.3.0",
     "tsx": "^4.21.0",
     "typescript": "^6.0.3",
-    "vite": "^8.0.10",
+    "vite": "^8.0.12",
     "vite-plugin-compression": "^0.5.1"
   }
 }