vue-popup-plus 1.3.0 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/vue-popup-plus.js +23 -23
- package/dist/vue-popup-plus.umd.cjs +2 -2
- package/package.json +1 -1
package/dist/vue-popup-plus.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode(".popup-mask[data-v-53a2b502]{position:fixed;inset:0;background-color:var(--popup-color-mask)}.popup-mask.is-blur[data-v-53a2b502]{-webkit-backdrop-filter:blur(15px) saturate(180%);backdrop-filter:blur(15px) saturate(180%)}.popup-view-wrapper[data-v-13c586d7]{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;pointer-events:none}.popup-view-wrapper .popup-view[data-v-13c586d7]{position:relative;margin:auto;pointer-events:auto}.vue-popup-plus-animation{animation-timing-function:linear;animation-duration:var(--v9a56ef92)}.vue-popup-plus-animation-enter-fade{animation-name:vue-popup-plus-animation-enter-fade}.vue-popup-plus-animation-leave-fade{animation-name:vue-popup-plus-animation-leave-fade}.vue-popup-plus-animation-enter-scale-enlarge{animation-name:vue-popup-plus-animation-enter-scale-enlarge}.vue-popup-plus-animation-leave-scale-enlarge{animation-name:vue-popup-plus-animation-leave-scale-enlarge}.vue-popup-plus-animation-enter-scale-shrink{animation-name:vue-popup-plus-animation-enter-scale-shrink}.vue-popup-plus-animation-leave-scale-shrink{animation-name:vue-popup-plus-animation-leave-scale-shrink}.vue-popup-plus-animation-enter-fly-top{animation-name:vue-popup-plus-animation-enter-fly-top}.vue-popup-plus-animation-leave-fly-top{animation-name:vue-popup-plus-animation-leave-fly-top}.vue-popup-plus-animation-enter-fly-left{animation-name:vue-popup-plus-animation-enter-fly-left}.vue-popup-plus-animation-leave-fly-left{animation-name:vue-popup-plus-animation-leave-fly-left}.vue-popup-plus-animation-enter-fly-right{animation-name:vue-popup-plus-animation-enter-fly-right}.vue-popup-plus-animation-leave-fly-right{animation-name:vue-popup-plus-animation-leave-fly-right}.vue-popup-plus-animation-enter-fly-bottom{animation-name:vue-popup-plus-animation-enter-fly-bottom}.vue-popup-plus-animation-leave-fly-bottom{animation-name:vue-popup-plus-animation-leave-fly-bottom}@-moz-keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@-webkit-keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@-o-keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@-moz-keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@-webkit-keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@-o-keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@-moz-keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@-o-keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@-moz-keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@-webkit-keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@-o-keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@-moz-keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@-webkit-keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@-o-keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@-moz-keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@-webkit-keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@-o-keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@-o-keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@-o-keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@-o-keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}@-o-keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}@keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}:root{--popup-color-mask: rgba(
|
|
2
|
-
import { defineComponent as P, inject as v, createElementBlock as N, openBlock as
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode(".popup-mask[data-v-53a2b502]{position:fixed;inset:0;background-color:var(--popup-color-mask)}.popup-mask.is-blur[data-v-53a2b502]{-webkit-backdrop-filter:blur(15px) saturate(180%);backdrop-filter:blur(15px) saturate(180%)}.popup-view-wrapper[data-v-13c586d7]{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;pointer-events:none}.popup-view-wrapper .popup-view[data-v-13c586d7]{position:relative;margin:auto;pointer-events:auto}.vue-popup-plus-animation{animation-timing-function:linear;animation-duration:var(--v9a56ef92)}.vue-popup-plus-animation-enter-fade{animation-name:vue-popup-plus-animation-enter-fade}.vue-popup-plus-animation-leave-fade{animation-name:vue-popup-plus-animation-leave-fade}.vue-popup-plus-animation-enter-scale-enlarge{animation-name:vue-popup-plus-animation-enter-scale-enlarge}.vue-popup-plus-animation-leave-scale-enlarge{animation-name:vue-popup-plus-animation-leave-scale-enlarge}.vue-popup-plus-animation-enter-scale-shrink{animation-name:vue-popup-plus-animation-enter-scale-shrink}.vue-popup-plus-animation-leave-scale-shrink{animation-name:vue-popup-plus-animation-leave-scale-shrink}.vue-popup-plus-animation-enter-fly-top{animation-name:vue-popup-plus-animation-enter-fly-top}.vue-popup-plus-animation-leave-fly-top{animation-name:vue-popup-plus-animation-leave-fly-top}.vue-popup-plus-animation-enter-fly-left{animation-name:vue-popup-plus-animation-enter-fly-left}.vue-popup-plus-animation-leave-fly-left{animation-name:vue-popup-plus-animation-leave-fly-left}.vue-popup-plus-animation-enter-fly-right{animation-name:vue-popup-plus-animation-enter-fly-right}.vue-popup-plus-animation-leave-fly-right{animation-name:vue-popup-plus-animation-leave-fly-right}.vue-popup-plus-animation-enter-fly-bottom{animation-name:vue-popup-plus-animation-enter-fly-bottom}.vue-popup-plus-animation-leave-fly-bottom{animation-name:vue-popup-plus-animation-leave-fly-bottom}@-moz-keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@-webkit-keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@-o-keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@-moz-keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@-webkit-keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@-o-keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@-moz-keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@-o-keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@-moz-keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@-webkit-keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@-o-keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@-moz-keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@-webkit-keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@-o-keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@-moz-keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@-webkit-keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@-o-keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@-o-keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@-o-keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@-o-keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}@-o-keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}@keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}:root{--popup-color-mask: rgba(175,175,175,.3);--popup-color-mask-dark-lite: rgba(158,158,158,.3);--popup-color-mask-dark: rgba(131,131,131,.3);--popup-color-mask-dark-most: rgba(70,70,70,.3);--popup-color-mask-light-lite: rgba(183,183,183,.3);--popup-color-mask-light: rgba(195,195,195,.3);--popup-color-mask-light-most: rgba(223,223,223,.3)}.dark{--popup-color-mask: rgba(75,75,75,.3);--popup-color-mask-dark-lite: rgba(68,68,68,.3);--popup-color-mask-dark: rgba(56,56,56,.3);--popup-color-mask-dark-most: rgba(30,30,30,.3);--popup-color-mask-light-lite: rgba(93,93,93,.3);--popup-color-mask-light: rgba(120,120,120,.3);--popup-color-mask-light-most: rgba(183,183,183,.3)}")),document.head.appendChild(a)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
|
+
import { defineComponent as P, inject as v, createElementBlock as N, openBlock as d, normalizeStyle as g, normalizeClass as V, unref as p, ref as m, computed as r, defineAsyncComponent as W, provide as E, onMounted as b, onUpdated as B, nextTick as H, createElementVNode as U, createBlock as A, resolveDynamicComponent as L, mergeProps as F, useCssVars as z, Transition as X, withCtx as S, renderSlot as j, createCommentVNode as D, Fragment as G, createVNode as w, createApp as J, render as O, toRefs as q, reactive as K } from "vue";
|
|
3
3
|
const I = "vue-popup-plus", y = {
|
|
4
4
|
INSTANCE_ID: Symbol(`${I}-instance-id`),
|
|
5
5
|
COMPUTED_VIEW_STYLE: Symbol(`${I}-computed-view-style`)
|
|
@@ -19,7 +19,7 @@ const Z = /* @__PURE__ */ P({
|
|
|
19
19
|
function t() {
|
|
20
20
|
o.maskClickClose && fe().destroy(e);
|
|
21
21
|
}
|
|
22
|
-
return (i, s) => (
|
|
22
|
+
return (i, s) => (d(), N("div", {
|
|
23
23
|
class: V(["popup-mask", { "is-blur": p(o).maskBlur.value }]),
|
|
24
24
|
style: g({ zIndex: p(o).zIndex.value }),
|
|
25
25
|
onClick: t
|
|
@@ -34,7 +34,7 @@ const Z = /* @__PURE__ */ P({
|
|
|
34
34
|
name: "PopupView",
|
|
35
35
|
__name: "PopupView",
|
|
36
36
|
setup(n) {
|
|
37
|
-
const e =
|
|
37
|
+
const e = m(), o = v(y.INSTANCE_ID), t = v(T.INSTANCE_STORE), i = m(0), s = m(0), u = r(() => typeof t.component == "function" ? W(t.component) : t.component), h = r(() => t.viewTranslateOverflow.value ? t.viewTranslateX.value : t.viewTranslateX.value > 0 ? Math.min(
|
|
38
38
|
t.viewTranslateX.value,
|
|
39
39
|
(window.innerWidth - i.value) / 2
|
|
40
40
|
) : Math.max(
|
|
@@ -53,12 +53,12 @@ const Z = /* @__PURE__ */ P({
|
|
|
53
53
|
height: c(t.height.value),
|
|
54
54
|
maxHeight: c(t.maxHeight.value),
|
|
55
55
|
minHeight: c(t.minHeight.value),
|
|
56
|
-
transform: `translate(${
|
|
56
|
+
transform: `translate(${h.value}px, ${_.value}px)`
|
|
57
57
|
})), R = r(() => ({
|
|
58
58
|
width: i.value,
|
|
59
59
|
height: s.value,
|
|
60
60
|
zIndex: t.zIndex.value,
|
|
61
|
-
translateX:
|
|
61
|
+
translateX: h.value,
|
|
62
62
|
translateY: _.value
|
|
63
63
|
}));
|
|
64
64
|
E(y.COMPUTED_VIEW_STYLE, R), b(() => {
|
|
@@ -74,7 +74,7 @@ const Z = /* @__PURE__ */ P({
|
|
|
74
74
|
function c(a) {
|
|
75
75
|
return typeof a == "number" ? `${a}px` : a;
|
|
76
76
|
}
|
|
77
|
-
return (a, _e) => (
|
|
77
|
+
return (a, _e) => (d(), N("div", {
|
|
78
78
|
class: "popup-view-wrapper",
|
|
79
79
|
style: g({ zIndex: p(t).zIndex.value })
|
|
80
80
|
}, [
|
|
@@ -84,7 +84,7 @@ const Z = /* @__PURE__ */ P({
|
|
|
84
84
|
ref_key: "popupViewRef",
|
|
85
85
|
ref: e
|
|
86
86
|
}, [
|
|
87
|
-
(
|
|
87
|
+
(d(), A(L(u.value), F({
|
|
88
88
|
key: `${p(o).name}-component`
|
|
89
89
|
}, p(t).componentProps), null, 16))
|
|
90
90
|
], 4)
|
|
@@ -101,14 +101,14 @@ const Z = /* @__PURE__ */ P({
|
|
|
101
101
|
z((u) => ({
|
|
102
102
|
v9a56ef92: s.value
|
|
103
103
|
}));
|
|
104
|
-
const e = v(T.INSTANCE_STORE), o =
|
|
104
|
+
const e = v(T.INSTANCE_STORE), o = m(!1), t = r(
|
|
105
105
|
() => `vue-popup-plus-animation vue-popup-plus-animation-enter-${n.type}`
|
|
106
106
|
), i = r(
|
|
107
107
|
() => `vue-popup-plus-animation vue-popup-plus-animation-leave-${n.type}`
|
|
108
108
|
), s = r(() => `${n.duration}ms`);
|
|
109
109
|
return b(() => {
|
|
110
110
|
o.value = !0;
|
|
111
|
-
}), (u,
|
|
111
|
+
}), (u, h) => (d(), A(X, {
|
|
112
112
|
"enter-active-class": t.value,
|
|
113
113
|
"leave-active-class": i.value
|
|
114
114
|
}, {
|
|
@@ -128,8 +128,8 @@ const Z = /* @__PURE__ */ P({
|
|
|
128
128
|
store: {}
|
|
129
129
|
},
|
|
130
130
|
setup(n) {
|
|
131
|
-
return E(y.INSTANCE_ID, n.store.id), E(T.INSTANCE_STORE, n.store), (e, o) => (
|
|
132
|
-
n.store.mask ? (
|
|
131
|
+
return E(y.INSTANCE_ID, n.store.id), E(T.INSTANCE_STORE, n.store), (e, o) => (d(), N(G, null, [
|
|
132
|
+
n.store.mask ? (d(), A($, {
|
|
133
133
|
key: 0,
|
|
134
134
|
duration: n.store.animationDuration.value,
|
|
135
135
|
type: n.store.maskAnimation.value
|
|
@@ -141,7 +141,7 @@ const Z = /* @__PURE__ */ P({
|
|
|
141
141
|
}, 8, ["duration", "type"])) : D("", !0),
|
|
142
142
|
w($, {
|
|
143
143
|
duration: n.store.animationDuration.value,
|
|
144
|
-
type: n.store.
|
|
144
|
+
type: n.store.viewAnimation.value
|
|
145
145
|
}, {
|
|
146
146
|
default: S(() => [
|
|
147
147
|
w(ne)
|
|
@@ -157,7 +157,7 @@ const Z = /* @__PURE__ */ P({
|
|
|
157
157
|
onUnmounted: i,
|
|
158
158
|
appendTo: s,
|
|
159
159
|
mask: u,
|
|
160
|
-
maskClickClose:
|
|
160
|
+
maskClickClose: h,
|
|
161
161
|
disableScroll: _,
|
|
162
162
|
...x
|
|
163
163
|
}) => ({
|
|
@@ -165,13 +165,13 @@ const Z = /* @__PURE__ */ P({
|
|
|
165
165
|
parentElement: ie(s),
|
|
166
166
|
appendTo: s,
|
|
167
167
|
mask: u,
|
|
168
|
-
maskClickClose:
|
|
168
|
+
maskClickClose: h,
|
|
169
169
|
disableScroll: _,
|
|
170
170
|
component: e,
|
|
171
171
|
componentProps: o,
|
|
172
172
|
onMounted: t,
|
|
173
173
|
onUnmounted: i,
|
|
174
|
-
isBeforeUnmount:
|
|
174
|
+
isBeforeUnmount: m(!1),
|
|
175
175
|
...q(K(x))
|
|
176
176
|
});
|
|
177
177
|
function ie(n) {
|
|
@@ -312,7 +312,7 @@ const pe = {
|
|
|
312
312
|
maskBlur: !0,
|
|
313
313
|
animationDuration: 100
|
|
314
314
|
};
|
|
315
|
-
class
|
|
315
|
+
class de {
|
|
316
316
|
_core;
|
|
317
317
|
constructor(e) {
|
|
318
318
|
this._core = e;
|
|
@@ -346,10 +346,10 @@ class me {
|
|
|
346
346
|
}
|
|
347
347
|
}
|
|
348
348
|
let Y = null;
|
|
349
|
-
function
|
|
349
|
+
function he(n) {
|
|
350
350
|
return new ve(n);
|
|
351
351
|
}
|
|
352
|
-
function
|
|
352
|
+
function me() {
|
|
353
353
|
return Y;
|
|
354
354
|
}
|
|
355
355
|
class ve {
|
|
@@ -375,7 +375,7 @@ class ve {
|
|
|
375
375
|
autoDisableScroll: t = !0,
|
|
376
376
|
debugMode: i = !1
|
|
377
377
|
} = {}) {
|
|
378
|
-
this.#n = { zIndex: e, prototypeName: o, autoDisableScroll: t, debugMode: i }, this.#e = new
|
|
378
|
+
this.#n = { zIndex: e, prototypeName: o, autoDisableScroll: t, debugMode: i }, this.#e = new de(this), Y = this;
|
|
379
379
|
}
|
|
380
380
|
addInstance(e) {
|
|
381
381
|
this.#i[e.id.name] = e, this.config.autoDisableScroll && e.store.disableScroll && this.#a();
|
|
@@ -404,12 +404,12 @@ class ve {
|
|
|
404
404
|
this.config.autoDisableScroll && (document.body.style.overflow = this.#o);
|
|
405
405
|
}
|
|
406
406
|
}
|
|
407
|
-
const ye = "1.3.
|
|
407
|
+
const ye = "1.3.2";
|
|
408
408
|
function Pe(n) {
|
|
409
|
-
return
|
|
409
|
+
return he(n).controller;
|
|
410
410
|
}
|
|
411
411
|
function fe() {
|
|
412
|
-
const n =
|
|
412
|
+
const n = me();
|
|
413
413
|
if (!n)
|
|
414
414
|
throw new f(
|
|
415
415
|
"调用 usePopup 前请先调用 createPopup 创建弹出层插件实例"
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode(".popup-mask[data-v-53a2b502]{position:fixed;inset:0;background-color:var(--popup-color-mask)}.popup-mask.is-blur[data-v-53a2b502]{-webkit-backdrop-filter:blur(15px) saturate(180%);backdrop-filter:blur(15px) saturate(180%)}.popup-view-wrapper[data-v-13c586d7]{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;pointer-events:none}.popup-view-wrapper .popup-view[data-v-13c586d7]{position:relative;margin:auto;pointer-events:auto}.vue-popup-plus-animation{animation-timing-function:linear;animation-duration:var(--v9a56ef92)}.vue-popup-plus-animation-enter-fade{animation-name:vue-popup-plus-animation-enter-fade}.vue-popup-plus-animation-leave-fade{animation-name:vue-popup-plus-animation-leave-fade}.vue-popup-plus-animation-enter-scale-enlarge{animation-name:vue-popup-plus-animation-enter-scale-enlarge}.vue-popup-plus-animation-leave-scale-enlarge{animation-name:vue-popup-plus-animation-leave-scale-enlarge}.vue-popup-plus-animation-enter-scale-shrink{animation-name:vue-popup-plus-animation-enter-scale-shrink}.vue-popup-plus-animation-leave-scale-shrink{animation-name:vue-popup-plus-animation-leave-scale-shrink}.vue-popup-plus-animation-enter-fly-top{animation-name:vue-popup-plus-animation-enter-fly-top}.vue-popup-plus-animation-leave-fly-top{animation-name:vue-popup-plus-animation-leave-fly-top}.vue-popup-plus-animation-enter-fly-left{animation-name:vue-popup-plus-animation-enter-fly-left}.vue-popup-plus-animation-leave-fly-left{animation-name:vue-popup-plus-animation-leave-fly-left}.vue-popup-plus-animation-enter-fly-right{animation-name:vue-popup-plus-animation-enter-fly-right}.vue-popup-plus-animation-leave-fly-right{animation-name:vue-popup-plus-animation-leave-fly-right}.vue-popup-plus-animation-enter-fly-bottom{animation-name:vue-popup-plus-animation-enter-fly-bottom}.vue-popup-plus-animation-leave-fly-bottom{animation-name:vue-popup-plus-animation-leave-fly-bottom}@-moz-keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@-webkit-keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@-o-keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@-moz-keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@-webkit-keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@-o-keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@-moz-keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@-o-keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@-moz-keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@-webkit-keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@-o-keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@-moz-keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@-webkit-keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@-o-keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@-moz-keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@-webkit-keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@-o-keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@-o-keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@-o-keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@-o-keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}@-o-keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}@keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}:root{--popup-color-mask: rgba(
|
|
2
|
-
(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.VuePopupPlus={},r.Vue))})(this,(function(r,e){"use strict";const w="vue-popup-plus",p={INSTANCE_ID:Symbol(`${w}-instance-id`),COMPUTED_VIEW_STYLE:Symbol(`${w}-computed-view-style`)},f={INSTANCE_STORE:Symbol(`${w}-instance-store`)};function E(o=0){return new Promise(t=>{window.setTimeout(t,o)})}const N=e.defineComponent({name:"PopupMask",__name:"PopupMask",setup(o){const t=e.inject(p.INSTANCE_ID),i=e.inject(f.INSTANCE_STORE);function n(){i.maskClickClose&&T().destroy(t)}return(s,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["popup-mask",{"is-blur":e.unref(i).maskBlur.value}]),style:e.normalizeStyle({zIndex:e.unref(i).zIndex.value}),onClick:n},null,6))}}),
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode(".popup-mask[data-v-53a2b502]{position:fixed;inset:0;background-color:var(--popup-color-mask)}.popup-mask.is-blur[data-v-53a2b502]{-webkit-backdrop-filter:blur(15px) saturate(180%);backdrop-filter:blur(15px) saturate(180%)}.popup-view-wrapper[data-v-13c586d7]{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;pointer-events:none}.popup-view-wrapper .popup-view[data-v-13c586d7]{position:relative;margin:auto;pointer-events:auto}.vue-popup-plus-animation{animation-timing-function:linear;animation-duration:var(--v9a56ef92)}.vue-popup-plus-animation-enter-fade{animation-name:vue-popup-plus-animation-enter-fade}.vue-popup-plus-animation-leave-fade{animation-name:vue-popup-plus-animation-leave-fade}.vue-popup-plus-animation-enter-scale-enlarge{animation-name:vue-popup-plus-animation-enter-scale-enlarge}.vue-popup-plus-animation-leave-scale-enlarge{animation-name:vue-popup-plus-animation-leave-scale-enlarge}.vue-popup-plus-animation-enter-scale-shrink{animation-name:vue-popup-plus-animation-enter-scale-shrink}.vue-popup-plus-animation-leave-scale-shrink{animation-name:vue-popup-plus-animation-leave-scale-shrink}.vue-popup-plus-animation-enter-fly-top{animation-name:vue-popup-plus-animation-enter-fly-top}.vue-popup-plus-animation-leave-fly-top{animation-name:vue-popup-plus-animation-leave-fly-top}.vue-popup-plus-animation-enter-fly-left{animation-name:vue-popup-plus-animation-enter-fly-left}.vue-popup-plus-animation-leave-fly-left{animation-name:vue-popup-plus-animation-leave-fly-left}.vue-popup-plus-animation-enter-fly-right{animation-name:vue-popup-plus-animation-enter-fly-right}.vue-popup-plus-animation-leave-fly-right{animation-name:vue-popup-plus-animation-leave-fly-right}.vue-popup-plus-animation-enter-fly-bottom{animation-name:vue-popup-plus-animation-enter-fly-bottom}.vue-popup-plus-animation-leave-fly-bottom{animation-name:vue-popup-plus-animation-leave-fly-bottom}@-moz-keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@-webkit-keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@-o-keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@keyframes vue-popup-plus-animation-enter-fade{0%{opacity:0}to{opacity:1}}@-moz-keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@-webkit-keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@-o-keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@keyframes vue-popup-plus-animation-leave-fade{0%{opacity:1}to{opacity:0}}@-moz-keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@-o-keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes vue-popup-plus-animation-enter-scale-enlarge{0%{transform:scale(0)}to{transform:scale(1)}}@-moz-keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@-webkit-keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@-o-keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes vue-popup-plus-animation-leave-scale-enlarge{0%{transform:scale(1)}to{transform:scale(0)}}@-moz-keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@-webkit-keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@-o-keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@keyframes vue-popup-plus-animation-enter-scale-shrink{0%{transform:scale(5)}to{transform:scale(1)}}@-moz-keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@-webkit-keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@-o-keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@keyframes vue-popup-plus-animation-leave-scale-shrink{0%{transform:scale(1)}to{transform:scale(5)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@keyframes vue-popup-plus-animation-enter-fly-top{0%{transform:translateY(-100vh)}to{transform:translateY(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@-o-keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@keyframes vue-popup-plus-animation-leave-fly-top{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@keyframes vue-popup-plus-animation-enter-fly-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@-o-keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@keyframes vue-popup-plus-animation-leave-fly-left{0%{transform:translate(0)}to{transform:translate(-100vw)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@keyframes vue-popup-plus-animation-enter-fly-right{0%{transform:translate(100vw)}to{transform:translate(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@-o-keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@keyframes vue-popup-plus-animation-leave-fly-right{0%{transform:translate(0)}to{transform:translate(100vw)}}@-moz-keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@-webkit-keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@-o-keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes vue-popup-plus-animation-enter-fly-bottom{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@-moz-keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}@-webkit-keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}@-o-keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}@keyframes vue-popup-plus-animation-leave-fly-bottom{0%{transform:translateY(0)}to{transform:translateY(100vh)}}:root{--popup-color-mask: rgba(175,175,175,.3);--popup-color-mask-dark-lite: rgba(158,158,158,.3);--popup-color-mask-dark: rgba(131,131,131,.3);--popup-color-mask-dark-most: rgba(70,70,70,.3);--popup-color-mask-light-lite: rgba(183,183,183,.3);--popup-color-mask-light: rgba(195,195,195,.3);--popup-color-mask-light-most: rgba(223,223,223,.3)}.dark{--popup-color-mask: rgba(75,75,75,.3);--popup-color-mask-dark-lite: rgba(68,68,68,.3);--popup-color-mask-dark: rgba(56,56,56,.3);--popup-color-mask-dark-most: rgba(30,30,30,.3);--popup-color-mask-light-lite: rgba(93,93,93,.3);--popup-color-mask-light: rgba(120,120,120,.3);--popup-color-mask-light-most: rgba(183,183,183,.3)}")),document.head.appendChild(a)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
|
+
(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.VuePopupPlus={},r.Vue))})(this,(function(r,e){"use strict";const w="vue-popup-plus",p={INSTANCE_ID:Symbol(`${w}-instance-id`),COMPUTED_VIEW_STYLE:Symbol(`${w}-computed-view-style`)},f={INSTANCE_STORE:Symbol(`${w}-instance-store`)};function E(o=0){return new Promise(t=>{window.setTimeout(t,o)})}const N=e.defineComponent({name:"PopupMask",__name:"PopupMask",setup(o){const t=e.inject(p.INSTANCE_ID),i=e.inject(f.INSTANCE_STORE);function n(){i.maskClickClose&&T().destroy(t)}return(s,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["popup-mask",{"is-blur":e.unref(i).maskBlur.value}]),style:e.normalizeStyle({zIndex:e.unref(i).zIndex.value}),onClick:n},null,6))}}),v=(o,t)=>{const i=o.__vccOpts||o;for(const[n,s]of t)i[n]=s;return i},I=v(N,[["__scopeId","data-v-53a2b502"]]),x=v(e.defineComponent({name:"PopupView",__name:"PopupView",setup(o){const t=e.ref(),i=e.inject(p.INSTANCE_ID),n=e.inject(f.INSTANCE_STORE),s=e.ref(0),a=e.ref(0),u=e.computed(()=>typeof n.component=="function"?e.defineAsyncComponent(n.component):n.component),h=e.computed(()=>n.viewTranslateOverflow.value?n.viewTranslateX.value:n.viewTranslateX.value>0?Math.min(n.viewTranslateX.value,(window.innerWidth-s.value)/2):Math.max(n.viewTranslateX.value,-(window.innerWidth-s.value)/2)),_=e.computed(()=>n.viewTranslateOverflow.value?n.viewTranslateY.value:n.viewTranslateY.value>0?Math.min(n.viewTranslateY.value,(window.innerHeight-a.value)/2):Math.max(n.viewTranslateY.value,-(window.innerHeight-a.value)/2)),P=e.computed(()=>({width:d(n.width.value),maxWidth:d(n.maxWidth.value),minWidth:d(n.minWidth.value),height:d(n.height.value),maxHeight:d(n.maxHeight.value),minHeight:d(n.minHeight.value),transform:`translate(${h.value}px, ${_.value}px)`})),j=e.computed(()=>({width:s.value,height:a.value,zIndex:n.zIndex.value,translateX:h.value,translateY:_.value}));e.provide(p.COMPUTED_VIEW_STYLE,j),e.onMounted(()=>{window.setTimeout(S,n.animationDuration.value)}),e.onUpdated(()=>{S()});async function S(){await e.nextTick();const c=t.value?.getBoundingClientRect();c&&(s.value=c.width,a.value=c.height)}function d(c){return typeof c=="number"?`${c}px`:c}return(c,X)=>(e.openBlock(),e.createElementBlock("div",{class:"popup-view-wrapper",style:e.normalizeStyle({zIndex:e.unref(n).zIndex.value})},[e.createElementVNode("div",{class:"popup-view",style:e.normalizeStyle(P.value),ref_key:"popupViewRef",ref:t},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(u.value),e.mergeProps({key:`${e.unref(i).name}-component`},e.unref(n).componentProps),null,16))],4)],4))}}),[["__scopeId","data-v-13c586d7"]]),y=e.defineComponent({name:"PopupAnimation",__name:"PopupAnimation",props:{type:{},duration:{}},setup(o){e.useCssVars(u=>({v9a56ef92:a.value}));const t=e.inject(f.INSTANCE_STORE),i=e.ref(!1),n=e.computed(()=>`vue-popup-plus-animation vue-popup-plus-animation-enter-${o.type}`),s=e.computed(()=>`vue-popup-plus-animation vue-popup-plus-animation-leave-${o.type}`),a=e.computed(()=>`${o.duration}ms`);return e.onMounted(()=>{i.value=!0}),(u,h)=>(e.openBlock(),e.createBlock(e.Transition,{"enter-active-class":n.value,"leave-active-class":s.value},{default:e.withCtx(()=>[i.value&&!e.unref(t).isBeforeUnmount.value?e.renderSlot(u.$slots,"default",{key:0,style:e.normalizeStyle({animationDuration:`${o.duration}ms`})}):e.createCommentVNode("",!0)]),_:3},8,["enter-active-class","leave-active-class"]))}}),g=e.defineComponent({name:"Popup",__name:"Popup",props:{store:{}},setup(o){return e.provide(p.INSTANCE_ID,o.store.id),e.provide(f.INSTANCE_STORE,o.store),(t,i)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[o.store.mask?(e.openBlock(),e.createBlock(y,{key:0,duration:o.store.animationDuration.value,type:o.store.maskAnimation.value},{default:e.withCtx(()=>[e.createVNode(I)]),_:1},8,["duration","type"])):e.createCommentVNode("",!0),e.createVNode(y,{duration:o.store.animationDuration.value,type:o.store.viewAnimation.value},{default:e.withCtx(()=>[e.createVNode(x)]),_:1},8,["duration","type"])],64))}}),k=(o,{component:t,componentProps:i,onMounted:n,onUnmounted:s,appendTo:a,mask:u,maskClickClose:h,disableScroll:_,...P})=>({id:o,parentElement:A(a),appendTo:a,mask:u,maskClickClose:h,disableScroll:_,component:t,componentProps:i,onMounted:n,onUnmounted:s,isBeforeUnmount:e.ref(!1),...e.toRefs(e.reactive(P))});function A(o){return typeof o=="string"&&(o=document.querySelector(o)||document.body),o}class O{#t;get seed(){return this.#t}get name(){return`vue-popup-plus-instance-${this.seed}`}constructor(t){this.#t=t}}class b{#t;#i;#e;#n;#s;#o;get id(){return this.#i}get store(){return this.#e}get renderType(){return this.#t.config.debugMode?"app":"vnode"}constructor(t,i){this.#t=t,this.#i=new O(t.seed),this.#e=k(this.#i,i),this.renderType==="app"?(this.#n=e.createApp(g,{store:this.#e}),this.#n._context.components=this.#t.app._context.components,this.#n._context.provides=this.#t.app._context.provides,this.#n._context.config=this.#t.app._context.config,this.#n._context.directives=this.#t.app._context.directives,this.#n._context.mixins=this.#t.app._context.mixins):(this.#s=e.createVNode(g,{store:this.#e}),this.#s.appContext=this.#t.app._context,this.#s.appContext.components.Popup=g)}mount(){return this.#o=document.createElement("div"),this.renderType==="app"?this.#n.mount(this.#o):e.render(this.#s,this.#o),this.#e.parentElement.appendChild(this.#o),this.#e.onMounted(),this.id}async unmount(t){this.#e.isBeforeUnmount.value=!0,await E(this.#e.animationDuration.value),this.renderType==="app"?this.#n.unmount():(e.render(null,this.#o),this.#e.parentElement.removeChild(this.#o)),this.#e.onUnmounted(t)}update(t){for(const i in t){const n=i,s=t[n]===void 0?this.#e[n].value:t[n];this.#e[n].value=s}}}class m extends Error{constructor(t){super(t)}toString(){return`vue-popup-plus error: ${this.message}`}}class ${NONE="none";FADE="fade";SCALE_ENLARGE="scale-enlarge";SCALE_SHRINK="scale-shrink";FLY_TOP="fly-top";FLY_LEFT="fly-left";FLY_RIGHT="fly-right";FLY_BOTTOM="fly-bottom";constructor(){}}const l=new $,M=o=>o,B=o=>new Proxy(o,{set(t,i,n){throw new m(`${i} 是只读属性，不能被覆盖`)},get(t,i){return i==="customProperties"?D(o):i==="customAnimations"?V():o[i]}});function D(o){return new Proxy({},{set:(t,i,n)=>{if(i in o)throw new m(`定义插件扩展属性 ${i} 时失败，${i} 是只读属性，不能被覆盖`);return o.__proto__[i]=n,!0},get:(t,i)=>{if(i in o)return o.__proto__[i]}})}function V(o){return new Proxy({},{set:(t,i,n)=>{if(i in l)throw new m(`定义插件扩展动画类型 ${i} 时失败，${i} 是只读属性，不能被覆盖`);return l.__proto__[i]=n,!0},get:(t,i)=>{if(i in l)return l.__proto__[i]}})}const U={appendTo:document.body,mask:!0,maskClickClose:!1,disableScroll:!0,componentProps:{},onMounted:()=>{},onUnmounted:()=>{},width:"auto",maxWidth:"auto",minWidth:"auto",height:"auto",maxHeight:"auto",minHeight:"auto",viewTranslateX:0,viewTranslateY:0,viewTranslateOverflow:!1,viewAnimation:l.FADE,maskAnimation:l.FADE,maskBlur:!0,animationDuration:100};class Y{_core;constructor(t){this._core=t}install(t){t.config.globalProperties[this._core.config.prototypeName]=this,this._core.app=t}use(t){if(!this._core.addPlugin(t))throw new m(`使用插件 ${t.name} 失败，已存在同名插件 ${t.name}`);t.install(B(this),this._core.config)}render({zIndex:t,...i}){t=t??this._core.config.zIndex++;const n=new b(this._core,{...U,...i,zIndex:t});return this._core.addInstance(n),n.mount(),n.id}update(t,i){const n=this._core.getInstance(t);n&&n.update(i)}async destroy(t,i){const n=this._core.getInstance(t);n&&(await n.unmount(i),this._core.removeInstance(n))}}let C=null;function R(o){return new H(o)}function W(){return C}class H{app;#t=1;#i={};#e;#n;#s={};#o="";get seed(){return this.#t++}get config(){return this.#n}get controller(){return this.#e}constructor({zIndex:t=1e3,prototypeName:i="$popup",autoDisableScroll:n=!0,debugMode:s=!1}={}){this.#n={zIndex:t,prototypeName:i,autoDisableScroll:n,debugMode:s},this.#e=new Y(this),C=this}addInstance(t){this.#i[t.id.name]=t,this.config.autoDisableScroll&&t.store.disableScroll&&this.#r()}getInstance(t){return this.#i[t.name]}removeInstance(t){delete this.#i[t.id.name],Object.values(this.#i).filter(i=>i.store.disableScroll).length===0&&this.#a()}addPlugin(t){return this.getPlugin(t.name)?!1:(this.#s[t.name]=t,!0)}getPlugin(t){return this.#s[t]}removePlugin(t){delete this.#s[t]}#r(){document.body.style.overflow!=="hidden"&&(this.#o=document.body.style.overflow,document.body.style.overflow="hidden")}#a(){this.config.autoDisableScroll&&(document.body.style.overflow=this.#o)}}const z="1.3.2";function L(o){return R(o).controller}function T(){const o=W();if(!o)throw new m("调用 usePopup 前请先调用 createPopup 创建弹出层插件实例");return o.controller}r.POPUP_ANIMATIONS=l,r.POPUP_COMPONENT_INJECTS=p,r.createPopup=L,r.definePlugin=M,r.usePopup=T,r.version=z,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
|