vue-infinity-stack 0.0.13 → 0.0.15

package/dist/VueInfinityStack.vue.d.ts

@@ -39,7 +39,7 @@ declare const _sfc_main: import("vue").DefineComponent<import("vue").ExtractProp
         default: string;
     };
     getContainer: {
-        type: __PropType<string | (() => HTMLElement) | undefined>;
+        type: __PropType<string | undefined>;
         required: false;
         default: string;
     };
@@ -93,7 +93,7 @@ declare const _sfc_main: import("vue").DefineComponent<import("vue").ExtractProp
         default: string;
     };
     getContainer: {
-        type: __PropType<string | (() => HTMLElement) | undefined>;
+        type: __PropType<string | undefined>;
         required: false;
         default: string;
     };
@@ -118,7 +118,7 @@ declare const _sfc_main: import("vue").DefineComponent<import("vue").ExtractProp
     storeName: string | undefined;
     extra: Record<string, any> | undefined;
     storeType: "localStorage" | "sessionStorage" | undefined;
-    getContainer: string | (() => HTMLElement) | undefined;
+    getContainer: string | undefined;
     isAsync: boolean | undefined;
     ishasAnimation: (() => void) | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/vue-infinity-stack.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as k, ref as a, watch as T, nextTick as E, onMounted as O, onBeforeUnmount as L, openBlock as z, createElementBlock as J, normalizeStyle as M, renderSlot as V, createCommentVNode as _ } from "vue";
-const B = ["id"], P = /* @__PURE__ */ k({
+import { defineComponent as T, ref as s, watch as k, nextTick as E, onMounted as O, onBeforeUnmount as L, openBlock as V, createBlock as z, Teleport as J, createElementVNode as M, normalizeStyle as B, renderSlot as _, createCommentVNode as P } from "vue";
+const H = ["id"], R = /* @__PURE__ */ T({
   __name: "VueInfinityStack",
   props: {
     uuid: { default: "" },
@@ -10,29 +10,29 @@ const B = ["id"], P = /* @__PURE__ */ k({
     storeName: { default: "historyState" },
     extra: { default: () => ({}) },
     storeType: { default: "localStorage" },
-    getContainer: { type: [Function, String], default: "" },
+    getContainer: { default: "body" },
     isAsync: { type: Boolean, default: !1 },
     ishasAnimation: { type: Function, default: () => {
     } }
   },
   emits: ["update:visible", "onOpen", "onClose"],
-  setup(f, { expose: I, emit: x }) {
-    const o = f, l = x, s = a(null), m = a(!0), p = a(!1), d = a(!1), r = a(`popuplayer_${C()}`), y = a(1e3);
+  setup(f, { expose: I, emit: b }) {
+    const i = f, u = b, l = s(null), m = s(!0), d = s(!1), p = s(!1), a = s(`popuplayer_${x()}`), y = s(1e3);
     let c = null;
-    function C() {
+    function x() {
       return Array.from(
         { length: 8 },
         (e, t) => ((1 + Math.random()) * 65536 | 0).toString(16).substring(1)
       ).join("");
     }
-    function u() {
-      const e = o.storeName || "historyState", t = window[o.storeType || "localStorage"], n = t.getItem(e) ? JSON.parse(t.getItem(e)) : [];
+    function r() {
+      const e = i.storeName || "historyState", t = window[i.storeType || "localStorage"], n = t.getItem(e) ? JSON.parse(t.getItem(e)) : [];
       return {
         reset() {
           (!t.getItem(e) || n.length) && t.setItem(e, JSON.stringify([]));
         },
-        update(i) {
-          t.setItem(e, JSON.stringify([...n, i]));
+        update(o) {
+          t.setItem(e, JSON.stringify([...n, o]));
         },
         getCur() {
           return n;
@@ -40,86 +40,87 @@ const B = ["id"], P = /* @__PURE__ */ k({
         pop() {
           n.pop(), t.setItem(e, JSON.stringify(n));
         },
-        push(i) {
-          t.setItem(e, JSON.stringify([...n, i]));
+        push(o) {
+          t.setItem(e, JSON.stringify([...n, o]));
         }
       };
     }
     function v(e) {
-      var h;
-      const t = ((h = e.state) == null ? void 0 : h.id) || "", n = u().getCur(), i = n.length;
-      if (i && t !== n[i - 1] && n[i - 1] === r.value) {
-        l("onClose", { isPopstate: !0 }, o.extra || {}), l("update:visible", !1), u().pop(), d.value = !0;
+      var g;
+      const t = ((g = e.state) == null ? void 0 : g.id) || "", n = r().getCur(), o = n.length;
+      if (o && t !== n[o - 1] && n[o - 1] === a.value) {
+        u("onClose", { isPopstate: !0 }, i.extra || {}), u("update:visible", !1), r().pop(), p.value = !0;
         const S = document.activeElement;
         S instanceof HTMLElement && S.blur();
       }
     }
-    T(() => o.visible, (e) => {
-      c && clearTimeout(c), e ? p.value = !0 : c = setTimeout(() => {
-        p.value = !1, typeof o.ishasAnimation == "function" && (m.value = !0);
+    k(() => i.visible, (e) => {
+      c && clearTimeout(c), e ? d.value = !0 : c = setTimeout(() => {
+        d.value = !1, typeof i.ishasAnimation == "function" && (m.value = !0);
       }, 300), E(() => {
-        e ? b() : w(), window[e ? "addEventListener" : "removeEventListener"]("popstate", v);
+        e ? w() : C(), window[e ? "addEventListener" : "removeEventListener"]("popstate", v);
       });
     });
-    function b() {
-      window.history.pushState({ id: r.value }, ""), u().push(r.value), setTimeout(() => {
-        l("onOpen", r.value, o.extra || {});
+    function w() {
+      window.history.pushState({ id: a.value }, ""), r().push(a.value), setTimeout(() => {
+        u("onOpen", a.value, i.extra || {});
       }, 200);
     }
-    function w() {
-      if (d.value) {
-        d.value = !1;
+    function C() {
+      if (p.value) {
+        p.value = !1;
         return;
       }
-      l("onClose", { isPopstate: !1 }, o.extra || {}), u().pop(), history.back();
+      u("onClose", { isPopstate: !1 }, i.extra || {}), r().pop(), history.back();
     }
-    function A() {
+    function N() {
       return Math.max(
         ...Array.from(document.querySelectorAll("*")).map(
           (e) => parseInt(window.getComputedStyle(e).zIndex) || 1
         )
       );
     }
-    function N(e, t, n) {
-      for (let i = e + 1; i <= t; i++)
+    function A(e, t, n) {
+      for (let o = e + 1; o <= t; o++)
         setTimeout(() => {
-          n == null || n(i);
-        }, i * 30);
+          n == null || n(o);
+        }, o * 30);
     }
     O(() => {
-      let e = null;
-      typeof o.getContainer == "function" ? e = o.getContainer() : o.getContainer && (e = document.querySelector(o.getContainer)), e == null || e.appendChild(s.value), o.autoIndex && (y.value = A()), !o.isAsync && g();
+      i.autoIndex && (y.value = N()), !i.isAsync && h();
     });
-    function g() {
-      const e = u().getCur(), t = (e == null ? void 0 : e.length) || 0;
+    function h() {
+      const e = r().getCur(), t = (e == null ? void 0 : e.length) || 0;
       t && history.go(-t);
     }
     return L(() => {
       var e;
-      window.removeEventListener("popstate", v), (e = s.value) != null && e.parentNode && s.value.parentNode.removeChild(s.value);
+      window.removeEventListener("popstate", v), (e = l.value) != null && e.parentNode && l.value.parentNode.removeChild(l.value);
     }), I({
-      asyncHandler: g,
-      backLvBy: N
-    }), (e, t) => (z(), J("div", {
-      style: M([{ position: "fixed", top: "0", left: "0", bottom: "0", right: "0", width: "100%", "backface-visibility": "hidden", "background-color": "#fff" }, {
-        zIndex: e.autoIndex ? y.value : e.zIndex,
-        transform: e.visible ? "translateX(0)" : "translateX(100%)",
-        transition: e.isAnimation && m.value ? "transform 0.3s" : "none"
-      }]),
-      ref_key: "popupRef",
-      ref: s,
-      class: "popup-layer",
-      id: e.uuid || r.value
-    }, [
-      p.value ? V(e.$slots, "default", { key: 0 }) : _("", !0)
-    ], 12, B));
+      asyncHandler: h,
+      backLvBy: A
+    }), (e, t) => (V(), z(J, { to: e.getContainer }, [
+      M("div", {
+        style: B([{ position: "fixed", top: "0", left: "0", bottom: "0", right: "0", width: "100%", "backface-visibility": "hidden", "background-color": "#fff" }, {
+          zIndex: e.autoIndex ? y.value : e.zIndex,
+          transform: e.visible ? "translateX(0)" : "translateX(100%)",
+          transition: e.isAnimation && m.value ? "transform 0.3s" : "none"
+        }]),
+        ref_key: "popupRef",
+        ref: l,
+        class: "popup-layer",
+        id: e.uuid || a.value
+      }, [
+        d.value ? _(e.$slots, "default", { key: 0 }) : P("", !0)
+      ], 12, H)
+    ], 8, ["to"]));
   }
-}), H = {
+}), $ = {
   install(f) {
-    f.component("VueInfinityStack", P);
+    f.component("VueInfinityStack", R);
   }
 };
 export {
-  P as VueInfinityStack,
-  H as default
+  R as VueInfinityStack,
+  $ as default
 };

package/dist/vue-infinity-stack.umd.js

@@ -1 +1 @@
-(function(a,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis<"u"?globalThis:a||self,t(a.VueInfinityStack={},a.Vue))})(this,function(a,t){"use strict";const x=["id"],y=t.defineComponent({__name:"VueInfinityStack",props:{uuid:{default:""},visible:{type:Boolean},isAnimation:{type:Boolean,default:!0},zIndex:{default:1e3},autoIndex:{type:Boolean},storeName:{default:"historyState"},extra:{default:()=>({})},storeType:{default:"localStorage"},getContainer:{type:[Function,String],default:""},isAsync:{type:Boolean,default:!1},ishasAnimation:{type:Function,default:()=>{}}},emits:["update:visible","onOpen","onClose"],setup(d,{expose:w,emit:T}){const i=d,f=T,r=t.ref(null),g=t.ref(!0),p=t.ref(!1),c=t.ref(!1),u=t.ref(`popuplayer_${A()}`),h=t.ref(1e3);let m=null;function A(){return Array.from({length:8},(e,n)=>((1+Math.random())*65536|0).toString(16).substring(1)).join("")}function l(){const e=i.storeName||"historyState",n=window[i.storeType||"localStorage"],o=n.getItem(e)?JSON.parse(n.getItem(e)):[];return{reset(){(!n.getItem(e)||o.length)&&n.setItem(e,JSON.stringify([]))},update(s){n.setItem(e,JSON.stringify([...o,s]))},getCur(){return o},pop(){o.pop(),n.setItem(e,JSON.stringify(o))},push(s){n.setItem(e,JSON.stringify([...o,s]))}}}function S(e){var I;const n=((I=e.state)==null?void 0:I.id)||"",o=l().getCur(),s=o.length;if(s&&n!==o[s-1]&&o[s-1]===u.value){f("onClose",{isPopstate:!0},i.extra||{}),f("update:visible",!1),l().pop(),c.value=!0;const b=document.activeElement;b instanceof HTMLElement&&b.blur()}}t.watch(()=>i.visible,e=>{m&&clearTimeout(m),e?p.value=!0:m=setTimeout(()=>{p.value=!1,typeof i.ishasAnimation=="function"&&(g.value=!0)},300),t.nextTick(()=>{e?N():k(),window[e?"addEventListener":"removeEventListener"]("popstate",S)})});function N(){window.history.pushState({id:u.value},""),l().push(u.value),setTimeout(()=>{f("onOpen",u.value,i.extra||{})},200)}function k(){if(c.value){c.value=!1;return}f("onClose",{isPopstate:!1},i.extra||{}),l().pop(),history.back()}function O(){return Math.max(...Array.from(document.querySelectorAll("*")).map(e=>parseInt(window.getComputedStyle(e).zIndex)||1))}function E(e,n,o){for(let s=e+1;s<=n;s++)setTimeout(()=>{o==null||o(s)},s*30)}t.onMounted(()=>{let e=null;typeof i.getContainer=="function"?e=i.getContainer():i.getContainer&&(e=document.querySelector(i.getContainer)),e==null||e.appendChild(r.value),i.autoIndex&&(h.value=O()),!i.isAsync&&v()});function v(){const e=l().getCur(),n=(e==null?void 0:e.length)||0;n&&history.go(-n)}return t.onBeforeUnmount(()=>{var e;window.removeEventListener("popstate",S),(e=r.value)!=null&&e.parentNode&&r.value.parentNode.removeChild(r.value)}),w({asyncHandler:v,backLvBy:E}),(e,n)=>(t.openBlock(),t.createElementBlock("div",{style:t.normalizeStyle([{position:"fixed",top:"0",left:"0",bottom:"0",right:"0",width:"100%","backface-visibility":"hidden","background-color":"#fff"},{zIndex:e.autoIndex?h.value:e.zIndex,transform:e.visible?"translateX(0)":"translateX(100%)",transition:e.isAnimation&&g.value?"transform 0.3s":"none"}]),ref_key:"popupRef",ref:r,class:"popup-layer",id:e.uuid||u.value},[p.value?t.renderSlot(e.$slots,"default",{key:0}):t.createCommentVNode("",!0)],12,x))}}),C={install(d){d.component("VueInfinityStack",y)}};a.VueInfinityStack=y,a.default=C,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(a,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis<"u"?globalThis:a||self,t(a.VueInfinityStack={},a.Vue))})(this,function(a,t){"use strict";const x=["id"],y=t.defineComponent({__name:"VueInfinityStack",props:{uuid:{default:""},visible:{type:Boolean},isAnimation:{type:Boolean,default:!0},zIndex:{default:1e3},autoIndex:{type:Boolean},storeName:{default:"historyState"},extra:{default:()=>({})},storeType:{default:"localStorage"},getContainer:{default:"body"},isAsync:{type:Boolean,default:!1},ishasAnimation:{type:Function,default:()=>{}}},emits:["update:visible","onOpen","onClose"],setup(d,{expose:C,emit:T}){const s=d,l=T,f=t.ref(null),h=t.ref(!0),p=t.ref(!1),c=t.ref(!1),r=t.ref(`popuplayer_${N()}`),g=t.ref(1e3);let m=null;function N(){return Array.from({length:8},(e,n)=>((1+Math.random())*65536|0).toString(16).substring(1)).join("")}function u(){const e=s.storeName||"historyState",n=window[s.storeType||"localStorage"],o=n.getItem(e)?JSON.parse(n.getItem(e)):[];return{reset(){(!n.getItem(e)||o.length)&&n.setItem(e,JSON.stringify([]))},update(i){n.setItem(e,JSON.stringify([...o,i]))},getCur(){return o},pop(){o.pop(),n.setItem(e,JSON.stringify(o))},push(i){n.setItem(e,JSON.stringify([...o,i]))}}}function S(e){var v;const n=((v=e.state)==null?void 0:v.id)||"",o=u().getCur(),i=o.length;if(i&&n!==o[i-1]&&o[i-1]===r.value){l("onClose",{isPopstate:!0},s.extra||{}),l("update:visible",!1),u().pop(),c.value=!0;const b=document.activeElement;b instanceof HTMLElement&&b.blur()}}t.watch(()=>s.visible,e=>{m&&clearTimeout(m),e?p.value=!0:m=setTimeout(()=>{p.value=!1,typeof s.ishasAnimation=="function"&&(h.value=!0)},300),t.nextTick(()=>{e?A():k(),window[e?"addEventListener":"removeEventListener"]("popstate",S)})});function A(){window.history.pushState({id:r.value},""),u().push(r.value),setTimeout(()=>{l("onOpen",r.value,s.extra||{})},200)}function k(){if(c.value){c.value=!1;return}l("onClose",{isPopstate:!1},s.extra||{}),u().pop(),history.back()}function O(){return Math.max(...Array.from(document.querySelectorAll("*")).map(e=>parseInt(window.getComputedStyle(e).zIndex)||1))}function V(e,n,o){for(let i=e+1;i<=n;i++)setTimeout(()=>{o==null||o(i)},i*30)}t.onMounted(()=>{s.autoIndex&&(g.value=O()),!s.isAsync&&I()});function I(){const e=u().getCur(),n=(e==null?void 0:e.length)||0;n&&history.go(-n)}return t.onBeforeUnmount(()=>{var e;window.removeEventListener("popstate",S),(e=f.value)!=null&&e.parentNode&&f.value.parentNode.removeChild(f.value)}),C({asyncHandler:I,backLvBy:V}),(e,n)=>(t.openBlock(),t.createBlock(t.Teleport,{to:e.getContainer},[t.createElementVNode("div",{style:t.normalizeStyle([{position:"fixed",top:"0",left:"0",bottom:"0",right:"0",width:"100%","backface-visibility":"hidden","background-color":"#fff"},{zIndex:e.autoIndex?g.value:e.zIndex,transform:e.visible?"translateX(0)":"translateX(100%)",transition:e.isAnimation&&h.value?"transform 0.3s":"none"}]),ref_key:"popupRef",ref:f,class:"popup-layer",id:e.uuid||r.value},[p.value?t.renderSlot(e.$slots,"default",{key:0}):t.createCommentVNode("",!0)],12,x)],8,["to"]))}}),w={install(d){d.component("VueInfinityStack",y)}};a.VueInfinityStack=y,a.default=w,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-infinity-stack",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "VueInfinityStack is a modern infinite stacking overlay solution designed exclusively for Vue 3, empowering simple yet elegant management of complex overlays. Whether handling simple dialogs, intricate multi-step wizards, or deeply nested user interfaces, VueInfinityStack delivers seamless and reliable management capabilities.",
   "main": "dist/vue-infinity-stack.umd.js",
   "module": "dist/vue-infinity-stack.es.js",