vue-popup-plus 1.3.3 → 1.4.0
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.d.ts +288 -151
- package/dist/vue-popup-plus.js +166 -148
- package/dist/vue-popup-plus.umd.cjs +2 -2
- package/package.json +1 -1
package/dist/vue-popup-plus.js
CHANGED
|
@@ -1,138 +1,138 @@
|
|
|
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-
|
|
2
|
-
import { defineComponent as P, inject as v, createElementBlock as N, openBlock as d, normalizeStyle as g, normalizeClass 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-14a39a91]{display:flex;justify-content:center;align-items:center;position:fixed;inset:0;pointer-events:none}.popup-view-wrapper .popup-view[data-v-14a39a91]{position:relative;margin:auto;overflow: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-reduce{animation-name:vue-popup-plus-animation-enter-scale-reduce}.vue-popup-plus-animation-leave-scale-reduce{animation-name:vue-popup-plus-animation-leave-scale-reduce}.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-reduce{0%{transform:scale(5)}to{transform:scale(1)}}@-webkit-keyframes vue-popup-plus-animation-enter-scale-reduce{0%{transform:scale(5)}to{transform:scale(1)}}@-o-keyframes vue-popup-plus-animation-enter-scale-reduce{0%{transform:scale(5)}to{transform:scale(1)}}@keyframes vue-popup-plus-animation-enter-scale-reduce{0%{transform:scale(5)}to{transform:scale(1)}}@-moz-keyframes vue-popup-plus-animation-leave-scale-reduce{0%{transform:scale(1)}to{transform:scale(5)}}@-webkit-keyframes vue-popup-plus-animation-leave-scale-reduce{0%{transform:scale(1)}to{transform:scale(5)}}@-o-keyframes vue-popup-plus-animation-leave-scale-reduce{0%{transform:scale(1)}to{transform:scale(5)}}@keyframes vue-popup-plus-animation-leave-scale-reduce{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(125,125,125,.3);--popup-color-mask-dark-lite: rgba(112,112,112,.3);--popup-color-mask-dark: rgba(94,94,94,.3);--popup-color-mask-dark-most: rgba(50,50,50,.3);--popup-color-mask-light-lite: rgba(138,138,138,.3);--popup-color-mask-light: rgba(157,157,157,.3);--popup-color-mask-light-most: rgba(203,203,203,.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 U, unref as p, ref as h, computed as a, defineAsyncComponent as V, provide as x, onMounted as b, onUpdated as W, nextTick as B, createElementVNode as H, 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`)
|
|
6
|
-
},
|
|
6
|
+
}, E = {
|
|
7
7
|
INSTANCE_STORE: Symbol(`${I}-instance-store`)
|
|
8
8
|
};
|
|
9
|
-
function Q(
|
|
9
|
+
function Q(o = 0) {
|
|
10
10
|
return new Promise((e) => {
|
|
11
|
-
window.setTimeout(e,
|
|
11
|
+
window.setTimeout(e, o);
|
|
12
12
|
});
|
|
13
13
|
}
|
|
14
14
|
const Z = /* @__PURE__ */ P({
|
|
15
15
|
name: "PopupMask",
|
|
16
16
|
__name: "PopupMask",
|
|
17
|
-
setup(
|
|
18
|
-
const e = v(y.INSTANCE_ID),
|
|
17
|
+
setup(o) {
|
|
18
|
+
const e = v(y.INSTANCE_ID), n = v(E.INSTANCE_STORE);
|
|
19
19
|
function t() {
|
|
20
|
-
|
|
20
|
+
n.maskClickClose && _e().destroy(e);
|
|
21
21
|
}
|
|
22
|
-
return (i,
|
|
23
|
-
class:
|
|
24
|
-
style: g({ zIndex: p(
|
|
22
|
+
return (i, r) => (d(), N("div", {
|
|
23
|
+
class: U(["popup-mask", { "is-blur": p(n).maskBlur.value }]),
|
|
24
|
+
style: g({ zIndex: p(n).zIndex.value }),
|
|
25
25
|
onClick: t
|
|
26
26
|
}, null, 6));
|
|
27
27
|
}
|
|
28
|
-
}), M = (
|
|
29
|
-
const
|
|
28
|
+
}), M = (o, e) => {
|
|
29
|
+
const n = o.__vccOpts || o;
|
|
30
30
|
for (const [t, i] of e)
|
|
31
|
-
|
|
32
|
-
return
|
|
31
|
+
n[t] = i;
|
|
32
|
+
return n;
|
|
33
33
|
}, ee = /* @__PURE__ */ M(Z, [["__scopeId", "data-v-53a2b502"]]), te = /* @__PURE__ */ P({
|
|
34
34
|
name: "PopupView",
|
|
35
35
|
__name: "PopupView",
|
|
36
|
-
setup(
|
|
37
|
-
const e =
|
|
36
|
+
setup(o) {
|
|
37
|
+
const e = h(), n = v(y.INSTANCE_ID), t = v(E.INSTANCE_STORE), i = h(0), r = h(0), u = a(() => typeof t.component == "function" ? V(t.component) : t.component), m = a(() => 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(
|
|
41
41
|
t.viewTranslateX.value,
|
|
42
42
|
-(window.innerWidth - i.value) / 2
|
|
43
|
-
)), _ =
|
|
43
|
+
)), _ = a(() => t.viewTranslateOverflow.value ? t.viewTranslateY.value : t.viewTranslateY.value > 0 ? Math.min(
|
|
44
44
|
t.viewTranslateY.value,
|
|
45
|
-
(window.innerHeight -
|
|
45
|
+
(window.innerHeight - r.value) / 2
|
|
46
46
|
) : Math.max(
|
|
47
47
|
t.viewTranslateY.value,
|
|
48
|
-
-(window.innerHeight -
|
|
49
|
-
)),
|
|
48
|
+
-(window.innerHeight - r.value) / 2
|
|
49
|
+
)), C = a(() => ({
|
|
50
50
|
width: c(t.width.value),
|
|
51
51
|
maxWidth: c(t.maxWidth.value),
|
|
52
52
|
minWidth: c(t.minWidth.value),
|
|
53
53
|
height: c(t.height.value),
|
|
54
54
|
maxHeight: c(t.maxHeight.value),
|
|
55
55
|
minHeight: c(t.minHeight.value),
|
|
56
|
-
transform: `translate(${
|
|
57
|
-
})), R =
|
|
56
|
+
transform: `translate(${m.value}px, ${_.value}px)`
|
|
57
|
+
})), R = a(() => ({
|
|
58
58
|
width: i.value,
|
|
59
|
-
height:
|
|
59
|
+
height: r.value,
|
|
60
60
|
zIndex: t.zIndex.value,
|
|
61
|
-
translateX:
|
|
61
|
+
translateX: m.value,
|
|
62
62
|
translateY: _.value
|
|
63
63
|
}));
|
|
64
|
-
|
|
64
|
+
x(y.COMPUTED_VIEW_STYLE, R), b(() => {
|
|
65
65
|
window.setTimeout(k, t.animationDuration.value);
|
|
66
|
-
}),
|
|
66
|
+
}), W(() => {
|
|
67
67
|
k();
|
|
68
68
|
});
|
|
69
69
|
async function k() {
|
|
70
|
-
await
|
|
71
|
-
const
|
|
72
|
-
|
|
70
|
+
await B();
|
|
71
|
+
const s = e.value?.getBoundingClientRect();
|
|
72
|
+
s && (i.value = s.width, r.value = s.height);
|
|
73
73
|
}
|
|
74
|
-
function c(
|
|
75
|
-
return typeof
|
|
74
|
+
function c(s) {
|
|
75
|
+
return typeof s == "number" ? `${s}px` : s;
|
|
76
76
|
}
|
|
77
|
-
return (
|
|
77
|
+
return (s, we) => (d(), N("div", {
|
|
78
78
|
class: "popup-view-wrapper",
|
|
79
79
|
style: g({ zIndex: p(t).zIndex.value })
|
|
80
80
|
}, [
|
|
81
|
-
|
|
81
|
+
H("div", {
|
|
82
82
|
class: "popup-view",
|
|
83
|
-
style: g(
|
|
83
|
+
style: g(C.value),
|
|
84
84
|
ref_key: "popupViewRef",
|
|
85
85
|
ref: e
|
|
86
86
|
}, [
|
|
87
87
|
(d(), A(L(u.value), F({
|
|
88
|
-
key: `${p(
|
|
88
|
+
key: `${p(n).name}-component`
|
|
89
89
|
}, p(t).componentProps), null, 16))
|
|
90
90
|
], 4)
|
|
91
91
|
], 4));
|
|
92
92
|
}
|
|
93
|
-
}), ne = /* @__PURE__ */ M(te, [["__scopeId", "data-v-
|
|
93
|
+
}), ne = /* @__PURE__ */ M(te, [["__scopeId", "data-v-14a39a91"]]), $ = /* @__PURE__ */ P({
|
|
94
94
|
name: "PopupAnimation",
|
|
95
95
|
__name: "PopupAnimation",
|
|
96
96
|
props: {
|
|
97
97
|
type: {},
|
|
98
98
|
duration: {}
|
|
99
99
|
},
|
|
100
|
-
setup(
|
|
100
|
+
setup(o) {
|
|
101
101
|
z((u) => ({
|
|
102
|
-
v9a56ef92:
|
|
102
|
+
v9a56ef92: r.value
|
|
103
103
|
}));
|
|
104
|
-
const e = v(
|
|
105
|
-
() => `vue-popup-plus-animation vue-popup-plus-animation-enter-${
|
|
106
|
-
), i =
|
|
107
|
-
() => `vue-popup-plus-animation vue-popup-plus-animation-leave-${
|
|
108
|
-
),
|
|
104
|
+
const e = v(E.INSTANCE_STORE), n = h(!1), t = a(
|
|
105
|
+
() => `vue-popup-plus-animation vue-popup-plus-animation-enter-${o.type}`
|
|
106
|
+
), i = a(
|
|
107
|
+
() => `vue-popup-plus-animation vue-popup-plus-animation-leave-${o.type}`
|
|
108
|
+
), r = a(() => `${o.duration}ms`);
|
|
109
109
|
return b(() => {
|
|
110
|
-
|
|
111
|
-
}), (u,
|
|
110
|
+
n.value = !0;
|
|
111
|
+
}), (u, m) => (d(), A(X, {
|
|
112
112
|
"enter-active-class": t.value,
|
|
113
113
|
"leave-active-class": i.value
|
|
114
114
|
}, {
|
|
115
115
|
default: S(() => [
|
|
116
|
-
|
|
116
|
+
n.value && !p(e).isBeforeUnmount.value ? j(u.$slots, "default", {
|
|
117
117
|
key: 0,
|
|
118
|
-
style: g({ animationDuration: `${
|
|
118
|
+
style: g({ animationDuration: `${o.duration}ms` })
|
|
119
119
|
}) : D("", !0)
|
|
120
120
|
]),
|
|
121
121
|
_: 3
|
|
122
122
|
}, 8, ["enter-active-class", "leave-active-class"]));
|
|
123
123
|
}
|
|
124
|
-
}),
|
|
124
|
+
}), T = /* @__PURE__ */ P({
|
|
125
125
|
name: "Popup",
|
|
126
126
|
__name: "Popup",
|
|
127
127
|
props: {
|
|
128
128
|
store: {}
|
|
129
129
|
},
|
|
130
|
-
setup(
|
|
131
|
-
return
|
|
132
|
-
|
|
130
|
+
setup(o) {
|
|
131
|
+
return x(y.INSTANCE_ID, o.store.id), x(E.INSTANCE_STORE, o.store), (e, n) => (d(), N(G, null, [
|
|
132
|
+
o.store.mask ? (d(), A($, {
|
|
133
133
|
key: 0,
|
|
134
|
-
duration:
|
|
135
|
-
type:
|
|
134
|
+
duration: o.store.animationDuration.value,
|
|
135
|
+
type: o.store.maskAnimation.value
|
|
136
136
|
}, {
|
|
137
137
|
default: S(() => [
|
|
138
138
|
w(ee)
|
|
@@ -140,8 +140,8 @@ const Z = /* @__PURE__ */ P({
|
|
|
140
140
|
_: 1
|
|
141
141
|
}, 8, ["duration", "type"])) : D("", !0),
|
|
142
142
|
w($, {
|
|
143
|
-
duration:
|
|
144
|
-
type:
|
|
143
|
+
duration: o.store.animationDuration.value,
|
|
144
|
+
type: o.store.viewAnimation.value
|
|
145
145
|
}, {
|
|
146
146
|
default: S(() => [
|
|
147
147
|
w(ne)
|
|
@@ -150,34 +150,34 @@ const Z = /* @__PURE__ */ P({
|
|
|
150
150
|
}, 8, ["duration", "type"])
|
|
151
151
|
], 64));
|
|
152
152
|
}
|
|
153
|
-
}), oe = (
|
|
153
|
+
}), oe = (o, {
|
|
154
154
|
component: e,
|
|
155
|
-
componentProps:
|
|
155
|
+
componentProps: n,
|
|
156
156
|
onMounted: t,
|
|
157
157
|
onUnmounted: i,
|
|
158
|
-
appendTo:
|
|
158
|
+
appendTo: r,
|
|
159
159
|
mask: u,
|
|
160
|
-
maskClickClose:
|
|
160
|
+
maskClickClose: m,
|
|
161
161
|
disableScroll: _,
|
|
162
|
-
...
|
|
162
|
+
...C
|
|
163
163
|
}) => ({
|
|
164
|
-
id:
|
|
165
|
-
parentElement: ie(
|
|
166
|
-
appendTo:
|
|
164
|
+
id: o,
|
|
165
|
+
parentElement: ie(r),
|
|
166
|
+
appendTo: r,
|
|
167
167
|
mask: u,
|
|
168
|
-
maskClickClose:
|
|
168
|
+
maskClickClose: m,
|
|
169
169
|
disableScroll: _,
|
|
170
170
|
component: e,
|
|
171
|
-
componentProps:
|
|
171
|
+
componentProps: n,
|
|
172
172
|
onMounted: t,
|
|
173
173
|
onUnmounted: i,
|
|
174
|
-
isBeforeUnmount:
|
|
175
|
-
...q(K(
|
|
174
|
+
isBeforeUnmount: h(!1),
|
|
175
|
+
...q(K(C))
|
|
176
176
|
});
|
|
177
|
-
function ie(
|
|
178
|
-
return typeof
|
|
177
|
+
function ie(o) {
|
|
178
|
+
return typeof o == "string" && (o = document.querySelector(o) || document.body), o;
|
|
179
179
|
}
|
|
180
|
-
class
|
|
180
|
+
class re {
|
|
181
181
|
#t;
|
|
182
182
|
get seed() {
|
|
183
183
|
return this.#t;
|
|
@@ -189,12 +189,12 @@ class se {
|
|
|
189
189
|
this.#t = e;
|
|
190
190
|
}
|
|
191
191
|
}
|
|
192
|
-
class
|
|
192
|
+
class se {
|
|
193
193
|
#t;
|
|
194
194
|
#i;
|
|
195
195
|
#e;
|
|
196
196
|
#n;
|
|
197
|
-
#
|
|
197
|
+
#r;
|
|
198
198
|
#o;
|
|
199
199
|
get id() {
|
|
200
200
|
return this.#i;
|
|
@@ -205,18 +205,18 @@ class ae {
|
|
|
205
205
|
get renderType() {
|
|
206
206
|
return this.#t.config.debugMode ? "app" : "vnode";
|
|
207
207
|
}
|
|
208
|
-
constructor(e,
|
|
209
|
-
this.#t = e, this.#i = new
|
|
208
|
+
constructor(e, n) {
|
|
209
|
+
this.#t = e, this.#i = new re(e.seed), this.#e = oe(this.#i, n), this.renderType === "app" ? (this.#n = J(T, { 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.#r = w(T, { store: this.#e }), this.#r.appContext = this.#t.app._context, this.#r.appContext.components.Popup = T);
|
|
210
210
|
}
|
|
211
211
|
mount() {
|
|
212
|
-
return this.#o = document.createElement("div"), this.renderType === "app" ? this.#n.mount(this.#o) : O(this.#
|
|
212
|
+
return this.#o = document.createElement("div"), this.renderType === "app" ? this.#n.mount(this.#o) : O(this.#r, this.#o), this.#e.parentElement.appendChild(this.#o), this.#e.onMounted(), this.id;
|
|
213
213
|
}
|
|
214
214
|
async unmount(e) {
|
|
215
|
-
this.#e.isBeforeUnmount.value = !0, await Q(this.#e.animationDuration.value), this.renderType === "app" ? this.#n.unmount() :
|
|
215
|
+
this.#e.isBeforeUnmount.value = !0, await Q(this.#e.animationDuration.value), this.renderType === "app" ? this.#n.unmount() : O(null, this.#o), this.#e.parentElement.removeChild(this.#o), this.#e.onUnmounted(e);
|
|
216
216
|
}
|
|
217
217
|
update(e) {
|
|
218
|
-
for (const
|
|
219
|
-
const t =
|
|
218
|
+
for (const n in e) {
|
|
219
|
+
const t = n, i = e[t] === void 0 ? this.#e[t].value : e[t];
|
|
220
220
|
this.#e[t].value = i;
|
|
221
221
|
}
|
|
222
222
|
}
|
|
@@ -229,66 +229,82 @@ class f extends Error {
|
|
|
229
229
|
return `vue-popup-plus error: ${this.message}`;
|
|
230
230
|
}
|
|
231
231
|
}
|
|
232
|
-
class
|
|
233
|
-
NONE
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
232
|
+
class ae {
|
|
233
|
+
get NONE() {
|
|
234
|
+
return "none";
|
|
235
|
+
}
|
|
236
|
+
get FADE() {
|
|
237
|
+
return "fade";
|
|
238
|
+
}
|
|
239
|
+
get SCALE_ENLARGE() {
|
|
240
|
+
return "scale-enlarge";
|
|
241
|
+
}
|
|
242
|
+
get SCALE_REDUCE() {
|
|
243
|
+
return "scale-reduce";
|
|
244
|
+
}
|
|
245
|
+
get FLY_TOP() {
|
|
246
|
+
return "fly-top";
|
|
247
|
+
}
|
|
248
|
+
get FLY_LEFT() {
|
|
249
|
+
return "fly-left";
|
|
250
|
+
}
|
|
251
|
+
get FLY_RIGHT() {
|
|
252
|
+
return "fly-right";
|
|
253
|
+
}
|
|
254
|
+
get FLY_BOTTOM() {
|
|
255
|
+
return "fly-bottom";
|
|
256
|
+
}
|
|
241
257
|
constructor() {
|
|
242
258
|
}
|
|
243
259
|
}
|
|
244
|
-
const l = new
|
|
245
|
-
|
|
260
|
+
const l = new ae(), ye = (o) => o, ue = (o) => new Proxy(
|
|
261
|
+
o,
|
|
246
262
|
{
|
|
247
|
-
set(e,
|
|
248
|
-
throw new f(`${
|
|
263
|
+
set(e, n, t) {
|
|
264
|
+
throw new f(`${n} 是只读属性，不能被覆盖`);
|
|
249
265
|
},
|
|
250
|
-
get(e,
|
|
251
|
-
return
|
|
266
|
+
get(e, n) {
|
|
267
|
+
return n === "customProperties" ? ce(o) : n === "customAnimations" ? le() : o[n];
|
|
252
268
|
}
|
|
253
269
|
}
|
|
254
270
|
);
|
|
255
|
-
function ce(
|
|
271
|
+
function ce(o) {
|
|
256
272
|
return new Proxy(
|
|
257
273
|
{},
|
|
258
274
|
{
|
|
259
|
-
set: (e,
|
|
260
|
-
if (
|
|
275
|
+
set: (e, n, t) => {
|
|
276
|
+
if (n in o)
|
|
261
277
|
throw new f(
|
|
262
|
-
`定义插件扩展属性 ${
|
|
278
|
+
`定义插件扩展属性 ${n} 时失败，${n} 是只读属性，不能被覆盖`
|
|
263
279
|
);
|
|
264
|
-
return
|
|
280
|
+
return o.__proto__[n] = t, !0;
|
|
265
281
|
},
|
|
266
|
-
get: (e,
|
|
267
|
-
if (
|
|
268
|
-
return
|
|
282
|
+
get: (e, n) => {
|
|
283
|
+
if (n in o)
|
|
284
|
+
return o.__proto__[n];
|
|
269
285
|
}
|
|
270
286
|
}
|
|
271
287
|
);
|
|
272
288
|
}
|
|
273
|
-
function le(
|
|
289
|
+
function le(o) {
|
|
274
290
|
return new Proxy(
|
|
275
291
|
{},
|
|
276
292
|
{
|
|
277
|
-
set: (e,
|
|
278
|
-
if (
|
|
293
|
+
set: (e, n, t) => {
|
|
294
|
+
if (n in l)
|
|
279
295
|
throw new f(
|
|
280
|
-
`定义插件扩展动画类型 ${
|
|
296
|
+
`定义插件扩展动画类型 ${n} 时失败，${n} 是只读属性，不能被覆盖`
|
|
281
297
|
);
|
|
282
|
-
return l.__proto__[
|
|
298
|
+
return l.__proto__[n] = t, !0;
|
|
283
299
|
},
|
|
284
|
-
get: (e,
|
|
285
|
-
if (
|
|
286
|
-
return l.__proto__[
|
|
300
|
+
get: (e, n) => {
|
|
301
|
+
if (n in l)
|
|
302
|
+
return l.__proto__[n];
|
|
287
303
|
}
|
|
288
304
|
}
|
|
289
305
|
);
|
|
290
306
|
}
|
|
291
|
-
const pe = {
|
|
307
|
+
const pe = "1.4.0", de = {
|
|
292
308
|
appendTo: document.body,
|
|
293
309
|
mask: !0,
|
|
294
310
|
maskClickClose: !1,
|
|
@@ -312,53 +328,56 @@ const pe = {
|
|
|
312
328
|
maskBlur: !0,
|
|
313
329
|
animationDuration: 100
|
|
314
330
|
};
|
|
315
|
-
class
|
|
331
|
+
class me {
|
|
316
332
|
_core;
|
|
333
|
+
get version() {
|
|
334
|
+
return pe;
|
|
335
|
+
}
|
|
317
336
|
constructor(e) {
|
|
318
337
|
this._core = e;
|
|
319
338
|
}
|
|
320
339
|
install(e) {
|
|
321
340
|
e.config.globalProperties[this._core.config.prototypeName] = this, this._core.app = e;
|
|
322
341
|
}
|
|
323
|
-
use(e) {
|
|
342
|
+
use(e, n) {
|
|
324
343
|
if (!this._core.addPlugin(e))
|
|
325
344
|
throw new f(
|
|
326
345
|
`使用插件 ${e.name} 失败，已存在同名插件 ${e.name}`
|
|
327
346
|
);
|
|
328
|
-
e.install(ue(this), this._core.config);
|
|
347
|
+
e.install(ue(this), this._core.config, n);
|
|
329
348
|
}
|
|
330
|
-
render({ zIndex: e, ...
|
|
349
|
+
render({ zIndex: e, ...n }) {
|
|
331
350
|
e = e ?? this._core.config.zIndex++;
|
|
332
|
-
const t = new
|
|
333
|
-
...
|
|
334
|
-
...
|
|
351
|
+
const t = new se(this._core, {
|
|
352
|
+
...de,
|
|
353
|
+
...n,
|
|
335
354
|
zIndex: e
|
|
336
355
|
});
|
|
337
356
|
return this._core.addInstance(t), t.mount(), t.id;
|
|
338
357
|
}
|
|
339
|
-
update(e,
|
|
358
|
+
update(e, n) {
|
|
340
359
|
const t = this._core.getInstance(e);
|
|
341
|
-
t && t.update(
|
|
360
|
+
t && t.update(n);
|
|
342
361
|
}
|
|
343
|
-
async destroy(e,
|
|
362
|
+
async destroy(e, n) {
|
|
344
363
|
const t = this._core.getInstance(e);
|
|
345
|
-
t && (await t.unmount(
|
|
364
|
+
t && (await t.unmount(n), this._core.removeInstance(t));
|
|
346
365
|
}
|
|
347
366
|
}
|
|
348
367
|
let Y = null;
|
|
349
|
-
function he(
|
|
350
|
-
return new
|
|
368
|
+
function he(o) {
|
|
369
|
+
return new fe(o);
|
|
351
370
|
}
|
|
352
|
-
function
|
|
371
|
+
function ve() {
|
|
353
372
|
return Y;
|
|
354
373
|
}
|
|
355
|
-
class
|
|
374
|
+
class fe {
|
|
356
375
|
app;
|
|
357
376
|
#t = 1;
|
|
358
377
|
#i = {};
|
|
359
378
|
#e;
|
|
360
379
|
#n;
|
|
361
|
-
#
|
|
380
|
+
#r = {};
|
|
362
381
|
#o = "";
|
|
363
382
|
get seed() {
|
|
364
383
|
return this.#t++;
|
|
@@ -371,56 +390,55 @@ class ve {
|
|
|
371
390
|
}
|
|
372
391
|
constructor({
|
|
373
392
|
zIndex: e = 1e3,
|
|
374
|
-
prototypeName:
|
|
393
|
+
prototypeName: n = "$popup",
|
|
375
394
|
autoDisableScroll: t = !0,
|
|
376
395
|
debugMode: i = !1
|
|
377
396
|
} = {}) {
|
|
378
|
-
this.#n = { zIndex: e, prototypeName:
|
|
397
|
+
this.#n = { zIndex: e, prototypeName: n, autoDisableScroll: t, debugMode: i }, this.#e = new me(this), Y = this;
|
|
379
398
|
}
|
|
380
399
|
addInstance(e) {
|
|
381
|
-
this.#i[e.id.name] = e, this.config.autoDisableScroll && e.store.disableScroll && this.#
|
|
400
|
+
this.#i[e.id.name] = e, this.config.autoDisableScroll && e.store.disableScroll && this.#s();
|
|
382
401
|
}
|
|
383
402
|
getInstance(e) {
|
|
384
403
|
return this.#i[e.name];
|
|
385
404
|
}
|
|
386
405
|
removeInstance(e) {
|
|
387
406
|
delete this.#i[e.id.name], Object.values(this.#i).filter(
|
|
388
|
-
(
|
|
389
|
-
).length === 0 && this.#
|
|
407
|
+
(n) => n.store.disableScroll
|
|
408
|
+
).length === 0 && this.#a();
|
|
390
409
|
}
|
|
391
410
|
addPlugin(e) {
|
|
392
|
-
return this.getPlugin(e.name) ? !1 : (this.#
|
|
411
|
+
return this.getPlugin(e.name) ? !1 : (this.#r[e.name] = e, !0);
|
|
393
412
|
}
|
|
394
413
|
getPlugin(e) {
|
|
395
|
-
return this.#
|
|
414
|
+
return this.#r[e];
|
|
396
415
|
}
|
|
397
416
|
removePlugin(e) {
|
|
398
|
-
delete this.#
|
|
417
|
+
delete this.#r[e];
|
|
399
418
|
}
|
|
400
|
-
#
|
|
419
|
+
#s() {
|
|
401
420
|
document.body.style.overflow !== "hidden" && (this.#o = document.body.style.overflow, document.body.style.overflow = "hidden");
|
|
402
421
|
}
|
|
403
|
-
#
|
|
422
|
+
#a() {
|
|
404
423
|
this.config.autoDisableScroll && (document.body.style.overflow = this.#o);
|
|
405
424
|
}
|
|
406
425
|
}
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
return he(n).controller;
|
|
426
|
+
function Pe(o) {
|
|
427
|
+
return he(o).controller;
|
|
410
428
|
}
|
|
411
|
-
function
|
|
412
|
-
const
|
|
413
|
-
if (!
|
|
429
|
+
function _e() {
|
|
430
|
+
const o = ve();
|
|
431
|
+
if (!o)
|
|
414
432
|
throw new f(
|
|
415
|
-
"调用 usePopup 前请先调用 createPopup
|
|
433
|
+
"调用 usePopup 前请先调用 createPopup 创建弹出层控制器实例"
|
|
416
434
|
);
|
|
417
|
-
return
|
|
435
|
+
return o.controller;
|
|
418
436
|
}
|
|
419
437
|
export {
|
|
420
438
|
l as POPUP_ANIMATIONS,
|
|
421
439
|
y as POPUP_COMPONENT_INJECTS,
|
|
422
440
|
Pe as createPopup,
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
441
|
+
ye as definePlugin,
|
|
442
|
+
_e as usePopup,
|
|
443
|
+
pe as version
|
|
426
444
|
};
|