@vue/runtime-dom 3.6.0-beta.4 → 3.6.0-beta.6
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/runtime-dom.cjs.js +1327 -1723
- package/dist/runtime-dom.cjs.prod.js +1238 -1580
- package/dist/runtime-dom.d.ts +1281 -1284
- package/dist/runtime-dom.esm-browser.js +8724 -12207
- package/dist/runtime-dom.esm-browser.prod.js +7 -6
- package/dist/runtime-dom.esm-bundler.js +1399 -1796
- package/dist/runtime-dom.global.js +9970 -13350
- package/dist/runtime-dom.global.prod.js +7 -6
- package/package.json +4 -4
|
@@ -1,22 +1,20 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @vue/runtime-dom v3.6.0-beta.
|
|
3
|
-
* (c) 2018-present Yuxi (Evan) You and Vue contributors
|
|
4
|
-
* @license MIT
|
|
5
|
-
**/
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
import { extend, isObject, isArray, toNumber, NOOP, normalizeCssVarValue, isString, hyphenate, capitalize, isSpecialBooleanAttr, includeBooleanAttr, isSymbol, canSetValueDirectly, isFunction, isOn, isModelListener, camelize as camelize$1, isNativeOn, shouldSetAsAttr, isPlainObject, hasOwn, EMPTY_OBJ, looseEqual, looseToNumber, looseIndexOf, isSet, invokeArrayFns, isHTMLTag, isSVGTag, isMathMLTag } from '@vue/shared';
|
|
2
|
+
* @vue/runtime-dom v3.6.0-beta.6
|
|
3
|
+
* (c) 2018-present Yuxi (Evan) You and Vue contributors
|
|
4
|
+
* @license MIT
|
|
5
|
+
**/
|
|
6
|
+
import { BaseTransition, BaseTransitionPropsValidators, Fragment, Static, Text, assertNumber, callWithAsyncErrorHandling, camelize, createHydrationRenderer, createRenderer, createVNode, defineComponent, getCurrentInstance, getTransitionRawChildren, h, isRuntimeOnly, nextTick, onBeforeUpdate, onMounted, onUnmounted, onUpdated, queuePostFlushCb, resolveTransitionHooks, setIsHydratingEnabled, setTransitionHooks, toRaw, unref, useInstanceOption, useTransitionState, warn, watch } from "@vue/runtime-core";
|
|
7
|
+
import { EMPTY_OBJ, NOOP, camelize as camelize$1, canSetValueDirectly, capitalize, extend, hasOwn, hyphenate, includeBooleanAttr, invokeArrayFns, isArray, isFunction, isHTMLTag, isMathMLTag, isModelListener, isNativeOn, isObject, isOn, isPlainObject, isSVGTag, isSet, isSpecialBooleanAttr, isString, isSymbol, looseEqual, looseIndexOf, looseToNumber, normalizeCssVarValue, shouldSetAsAttr, toNumber } from "@vue/shared";
|
|
9
8
|
|
|
9
|
+
export * from "@vue/runtime-core"
|
|
10
|
+
|
|
11
|
+
//#region packages/runtime-dom/src/nodeOps.ts
|
|
10
12
|
let policy = void 0;
|
|
11
13
|
const tt = typeof window !== "undefined" && window.trustedTypes;
|
|
12
|
-
if (tt) {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
});
|
|
17
|
-
} catch (e) {
|
|
18
|
-
!!(process.env.NODE_ENV !== "production") && warn(`Error creating trusted types policy: ${e}`);
|
|
19
|
-
}
|
|
14
|
+
if (tt) try {
|
|
15
|
+
policy = /* @__PURE__ */ tt.createPolicy("vue", { createHTML: (val) => val });
|
|
16
|
+
} catch (e) {
|
|
17
|
+
process.env.NODE_ENV !== "production" && warn(`Error creating trusted types policy: ${e}`);
|
|
20
18
|
}
|
|
21
19
|
const unsafeToTrustedHTML = policy ? (val) => policy.createHTML(val) : (val) => val;
|
|
22
20
|
const svgNS = "http://www.w3.org/2000/svg";
|
|
@@ -24,1990 +22,1595 @@ const mathmlNS = "http://www.w3.org/1998/Math/MathML";
|
|
|
24
22
|
const doc = typeof document !== "undefined" ? document : null;
|
|
25
23
|
const templateContainer = doc && /* @__PURE__ */ doc.createElement("template");
|
|
26
24
|
const nodeOps = {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
);
|
|
72
|
-
const template = templateContainer.content;
|
|
73
|
-
if (namespace === "svg" || namespace === "mathml") {
|
|
74
|
-
const wrapper = template.firstChild;
|
|
75
|
-
while (wrapper.firstChild) {
|
|
76
|
-
template.appendChild(wrapper.firstChild);
|
|
77
|
-
}
|
|
78
|
-
template.removeChild(wrapper);
|
|
79
|
-
}
|
|
80
|
-
parent.insertBefore(template, anchor);
|
|
81
|
-
}
|
|
82
|
-
return [
|
|
83
|
-
// first
|
|
84
|
-
before ? before.nextSibling : parent.firstChild,
|
|
85
|
-
// last
|
|
86
|
-
anchor ? anchor.previousSibling : parent.lastChild
|
|
87
|
-
];
|
|
88
|
-
}
|
|
25
|
+
insert: (child, parent, anchor) => {
|
|
26
|
+
parent.insertBefore(child, anchor || null);
|
|
27
|
+
},
|
|
28
|
+
remove: (child) => {
|
|
29
|
+
const parent = child.parentNode;
|
|
30
|
+
if (parent) parent.removeChild(child);
|
|
31
|
+
},
|
|
32
|
+
createElement: (tag, namespace, is, props) => {
|
|
33
|
+
const el = namespace === "svg" ? doc.createElementNS(svgNS, tag) : namespace === "mathml" ? doc.createElementNS(mathmlNS, tag) : is ? doc.createElement(tag, { is }) : doc.createElement(tag);
|
|
34
|
+
if (tag === "select" && props && props.multiple != null) el.setAttribute("multiple", props.multiple);
|
|
35
|
+
return el;
|
|
36
|
+
},
|
|
37
|
+
createText: (text) => doc.createTextNode(text),
|
|
38
|
+
createComment: (text) => doc.createComment(text),
|
|
39
|
+
setText: (node, text) => {
|
|
40
|
+
node.nodeValue = text;
|
|
41
|
+
},
|
|
42
|
+
setElementText: (el, text) => {
|
|
43
|
+
el.textContent = text;
|
|
44
|
+
},
|
|
45
|
+
parentNode: (node) => node.parentNode,
|
|
46
|
+
nextSibling: (node) => node.nextSibling,
|
|
47
|
+
querySelector: (selector) => doc.querySelector(selector),
|
|
48
|
+
setScopeId(el, id) {
|
|
49
|
+
el.setAttribute(id, "");
|
|
50
|
+
},
|
|
51
|
+
insertStaticContent(content, parent, anchor, namespace, start, end) {
|
|
52
|
+
const before = anchor ? anchor.previousSibling : parent.lastChild;
|
|
53
|
+
if (start && (start === end || start.nextSibling)) while (true) {
|
|
54
|
+
parent.insertBefore(start.cloneNode(true), anchor);
|
|
55
|
+
if (start === end || !(start = start.nextSibling)) break;
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
templateContainer.innerHTML = unsafeToTrustedHTML(namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content);
|
|
59
|
+
const template = templateContainer.content;
|
|
60
|
+
if (namespace === "svg" || namespace === "mathml") {
|
|
61
|
+
const wrapper = template.firstChild;
|
|
62
|
+
while (wrapper.firstChild) template.appendChild(wrapper.firstChild);
|
|
63
|
+
template.removeChild(wrapper);
|
|
64
|
+
}
|
|
65
|
+
parent.insertBefore(template, anchor);
|
|
66
|
+
}
|
|
67
|
+
return [before ? before.nextSibling : parent.firstChild, anchor ? anchor.previousSibling : parent.lastChild];
|
|
68
|
+
}
|
|
89
69
|
};
|
|
90
70
|
|
|
71
|
+
//#endregion
|
|
72
|
+
//#region packages/runtime-dom/src/components/Transition.ts
|
|
91
73
|
const TRANSITION = "transition";
|
|
92
74
|
const ANIMATION = "animation";
|
|
93
|
-
const vtcKey =
|
|
75
|
+
const vtcKey = Symbol("_vtc");
|
|
94
76
|
const DOMTransitionPropsValidators = {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
77
|
+
name: String,
|
|
78
|
+
type: String,
|
|
79
|
+
css: {
|
|
80
|
+
type: Boolean,
|
|
81
|
+
default: true
|
|
82
|
+
},
|
|
83
|
+
duration: [
|
|
84
|
+
String,
|
|
85
|
+
Number,
|
|
86
|
+
Object
|
|
87
|
+
],
|
|
88
|
+
enterFromClass: String,
|
|
89
|
+
enterActiveClass: String,
|
|
90
|
+
enterToClass: String,
|
|
91
|
+
appearFromClass: String,
|
|
92
|
+
appearActiveClass: String,
|
|
93
|
+
appearToClass: String,
|
|
94
|
+
leaveFromClass: String,
|
|
95
|
+
leaveActiveClass: String,
|
|
96
|
+
leaveToClass: String
|
|
111
97
|
};
|
|
112
|
-
const TransitionPropsValidators = /* @__PURE__ */ extend(
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
98
|
+
const TransitionPropsValidators = /* @__PURE__ */ extend({}, BaseTransitionPropsValidators, DOMTransitionPropsValidators);
|
|
99
|
+
/**
|
|
100
|
+
* Wrap logic that attaches extra properties to Transition in a function
|
|
101
|
+
* so that it can be annotated as pure
|
|
102
|
+
*/
|
|
117
103
|
const decorate$1 = (t) => {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
104
|
+
t.displayName = "Transition";
|
|
105
|
+
t.props = TransitionPropsValidators;
|
|
106
|
+
return t;
|
|
121
107
|
};
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
108
|
+
/**
|
|
109
|
+
* DOM Transition is a higher-order-component based on the platform-agnostic
|
|
110
|
+
* base Transition component, with DOM-specific logic.
|
|
111
|
+
*/
|
|
112
|
+
const Transition = /* @__PURE__ */ decorate$1((props, { slots }) => h(BaseTransition, resolveTransitionProps(props), slots));
|
|
113
|
+
/**
|
|
114
|
+
* #3227 Incoming hooks may be merged into arrays when wrapping Transition
|
|
115
|
+
* with custom HOCs.
|
|
116
|
+
*/
|
|
125
117
|
const callHook = (hook, args = []) => {
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
} else if (hook) {
|
|
129
|
-
hook(...args);
|
|
130
|
-
}
|
|
118
|
+
if (isArray(hook)) hook.forEach((h) => h(...args));
|
|
119
|
+
else if (hook) hook(...args);
|
|
131
120
|
};
|
|
121
|
+
/**
|
|
122
|
+
* Check if a hook expects a callback (2nd arg), which means the user
|
|
123
|
+
* intends to explicitly control the end of the transition.
|
|
124
|
+
*/
|
|
132
125
|
const hasExplicitCallback = (hook) => {
|
|
133
|
-
|
|
126
|
+
return hook ? isArray(hook) ? hook.some((h) => h.length > 1) : hook.length > 1 : false;
|
|
134
127
|
};
|
|
135
128
|
function resolveTransitionProps(rawProps) {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
const resolve = () => finishLeave(el, done);
|
|
215
|
-
addTransitionClass(el, leaveFromClass);
|
|
216
|
-
if (!el._enterCancelled) {
|
|
217
|
-
forceReflow(el);
|
|
218
|
-
addTransitionClass(el, leaveActiveClass);
|
|
219
|
-
} else {
|
|
220
|
-
addTransitionClass(el, leaveActiveClass);
|
|
221
|
-
forceReflow(el);
|
|
222
|
-
}
|
|
223
|
-
nextFrame(() => {
|
|
224
|
-
if (!el._isLeaving) {
|
|
225
|
-
return;
|
|
226
|
-
}
|
|
227
|
-
removeTransitionClass(el, leaveFromClass);
|
|
228
|
-
addTransitionClass(el, leaveToClass);
|
|
229
|
-
if (!hasExplicitCallback(onLeave)) {
|
|
230
|
-
whenTransitionEnds(el, type, leaveDuration, resolve);
|
|
231
|
-
}
|
|
232
|
-
});
|
|
233
|
-
callHook(onLeave, [el, resolve]);
|
|
234
|
-
},
|
|
235
|
-
onEnterCancelled(el) {
|
|
236
|
-
finishEnter(el, false, void 0, true);
|
|
237
|
-
callHook(onEnterCancelled, [el]);
|
|
238
|
-
},
|
|
239
|
-
onAppearCancelled(el) {
|
|
240
|
-
finishEnter(el, true, void 0, true);
|
|
241
|
-
callHook(onAppearCancelled, [el]);
|
|
242
|
-
},
|
|
243
|
-
onLeaveCancelled(el) {
|
|
244
|
-
finishLeave(el);
|
|
245
|
-
callHook(onLeaveCancelled, [el]);
|
|
246
|
-
}
|
|
247
|
-
});
|
|
129
|
+
const baseProps = {};
|
|
130
|
+
for (const key in rawProps) if (!(key in DOMTransitionPropsValidators)) baseProps[key] = rawProps[key];
|
|
131
|
+
if (rawProps.css === false) return baseProps;
|
|
132
|
+
const { name = "v", type, duration, enterFromClass = `${name}-enter-from`, enterActiveClass = `${name}-enter-active`, enterToClass = `${name}-enter-to`, appearFromClass = enterFromClass, appearActiveClass = enterActiveClass, appearToClass = enterToClass, leaveFromClass = `${name}-leave-from`, leaveActiveClass = `${name}-leave-active`, leaveToClass = `${name}-leave-to` } = rawProps;
|
|
133
|
+
const durations = normalizeDuration(duration);
|
|
134
|
+
const enterDuration = durations && durations[0];
|
|
135
|
+
const leaveDuration = durations && durations[1];
|
|
136
|
+
const { onBeforeEnter, onEnter, onEnterCancelled, onLeave, onLeaveCancelled, onBeforeAppear = onBeforeEnter, onAppear = onEnter, onAppearCancelled = onEnterCancelled } = baseProps;
|
|
137
|
+
const finishEnter = (el, isAppear, done, isCancelled) => {
|
|
138
|
+
el._enterCancelled = isCancelled;
|
|
139
|
+
removeTransitionClass(el, isAppear ? appearToClass : enterToClass);
|
|
140
|
+
removeTransitionClass(el, isAppear ? appearActiveClass : enterActiveClass);
|
|
141
|
+
done && done();
|
|
142
|
+
};
|
|
143
|
+
const finishLeave = (el, done) => {
|
|
144
|
+
el._isLeaving = false;
|
|
145
|
+
removeTransitionClass(el, leaveFromClass);
|
|
146
|
+
removeTransitionClass(el, leaveToClass);
|
|
147
|
+
removeTransitionClass(el, leaveActiveClass);
|
|
148
|
+
done && done();
|
|
149
|
+
};
|
|
150
|
+
const makeEnterHook = (isAppear) => {
|
|
151
|
+
return (el, done) => {
|
|
152
|
+
const hook = isAppear ? onAppear : onEnter;
|
|
153
|
+
const resolve = () => finishEnter(el, isAppear, done);
|
|
154
|
+
callHook(hook, [el, resolve]);
|
|
155
|
+
nextFrame(() => {
|
|
156
|
+
removeTransitionClass(el, isAppear ? appearFromClass : enterFromClass);
|
|
157
|
+
addTransitionClass(el, isAppear ? appearToClass : enterToClass);
|
|
158
|
+
if (!hasExplicitCallback(hook)) whenTransitionEnds(el, type, enterDuration, resolve);
|
|
159
|
+
});
|
|
160
|
+
};
|
|
161
|
+
};
|
|
162
|
+
return extend(baseProps, {
|
|
163
|
+
onBeforeEnter(el) {
|
|
164
|
+
callHook(onBeforeEnter, [el]);
|
|
165
|
+
addTransitionClass(el, enterFromClass);
|
|
166
|
+
addTransitionClass(el, enterActiveClass);
|
|
167
|
+
},
|
|
168
|
+
onBeforeAppear(el) {
|
|
169
|
+
callHook(onBeforeAppear, [el]);
|
|
170
|
+
addTransitionClass(el, appearFromClass);
|
|
171
|
+
addTransitionClass(el, appearActiveClass);
|
|
172
|
+
},
|
|
173
|
+
onEnter: makeEnterHook(false),
|
|
174
|
+
onAppear: makeEnterHook(true),
|
|
175
|
+
onLeave(el, done) {
|
|
176
|
+
el._isLeaving = true;
|
|
177
|
+
const resolve = () => finishLeave(el, done);
|
|
178
|
+
addTransitionClass(el, leaveFromClass);
|
|
179
|
+
if (!el._enterCancelled) {
|
|
180
|
+
forceReflow(el);
|
|
181
|
+
addTransitionClass(el, leaveActiveClass);
|
|
182
|
+
} else {
|
|
183
|
+
addTransitionClass(el, leaveActiveClass);
|
|
184
|
+
forceReflow(el);
|
|
185
|
+
}
|
|
186
|
+
nextFrame(() => {
|
|
187
|
+
if (!el._isLeaving) return;
|
|
188
|
+
removeTransitionClass(el, leaveFromClass);
|
|
189
|
+
addTransitionClass(el, leaveToClass);
|
|
190
|
+
if (!hasExplicitCallback(onLeave)) whenTransitionEnds(el, type, leaveDuration, resolve);
|
|
191
|
+
});
|
|
192
|
+
callHook(onLeave, [el, resolve]);
|
|
193
|
+
},
|
|
194
|
+
onEnterCancelled(el) {
|
|
195
|
+
finishEnter(el, false, void 0, true);
|
|
196
|
+
callHook(onEnterCancelled, [el]);
|
|
197
|
+
},
|
|
198
|
+
onAppearCancelled(el) {
|
|
199
|
+
finishEnter(el, true, void 0, true);
|
|
200
|
+
callHook(onAppearCancelled, [el]);
|
|
201
|
+
},
|
|
202
|
+
onLeaveCancelled(el) {
|
|
203
|
+
finishLeave(el);
|
|
204
|
+
callHook(onLeaveCancelled, [el]);
|
|
205
|
+
}
|
|
206
|
+
});
|
|
248
207
|
}
|
|
249
208
|
function normalizeDuration(duration) {
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
return [n, n];
|
|
257
|
-
}
|
|
209
|
+
if (duration == null) return null;
|
|
210
|
+
else if (isObject(duration)) return [NumberOf(duration.enter), NumberOf(duration.leave)];
|
|
211
|
+
else {
|
|
212
|
+
const n = NumberOf(duration);
|
|
213
|
+
return [n, n];
|
|
214
|
+
}
|
|
258
215
|
}
|
|
259
216
|
function NumberOf(val) {
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
}
|
|
264
|
-
return res;
|
|
217
|
+
const res = toNumber(val);
|
|
218
|
+
if (!!(process.env.NODE_ENV !== "production")) assertNumber(res, "<transition> explicit duration");
|
|
219
|
+
return res;
|
|
265
220
|
}
|
|
266
221
|
function addTransitionClass(el, cls) {
|
|
267
|
-
|
|
268
|
-
|
|
222
|
+
cls.split(/\s+/).forEach((c) => c && el.classList.add(c));
|
|
223
|
+
(el[vtcKey] || (el[vtcKey] = /* @__PURE__ */ new Set())).add(cls);
|
|
269
224
|
}
|
|
270
225
|
function removeTransitionClass(el, cls) {
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
}
|
|
278
|
-
}
|
|
226
|
+
cls.split(/\s+/).forEach((c) => c && el.classList.remove(c));
|
|
227
|
+
const _vtc = el[vtcKey];
|
|
228
|
+
if (_vtc) {
|
|
229
|
+
_vtc.delete(cls);
|
|
230
|
+
if (!_vtc.size) el[vtcKey] = void 0;
|
|
231
|
+
}
|
|
279
232
|
}
|
|
280
233
|
function nextFrame(cb) {
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
234
|
+
requestAnimationFrame(() => {
|
|
235
|
+
requestAnimationFrame(cb);
|
|
236
|
+
});
|
|
284
237
|
}
|
|
285
238
|
let endId = 0;
|
|
286
239
|
function whenTransitionEnds(el, expectedType, explicitTimeout, resolve) {
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
if (e.target === el && ++ended >= propCount) {
|
|
308
|
-
end();
|
|
309
|
-
}
|
|
310
|
-
};
|
|
311
|
-
setTimeout(() => {
|
|
312
|
-
if (ended < propCount) {
|
|
313
|
-
end();
|
|
314
|
-
}
|
|
315
|
-
}, timeout + 1);
|
|
316
|
-
el.addEventListener(endEvent, onEnd);
|
|
240
|
+
const id = el._endId = ++endId;
|
|
241
|
+
const resolveIfNotStale = () => {
|
|
242
|
+
if (id === el._endId) resolve();
|
|
243
|
+
};
|
|
244
|
+
if (explicitTimeout != null) return setTimeout(resolveIfNotStale, explicitTimeout);
|
|
245
|
+
const { type, timeout, propCount } = getTransitionInfo(el, expectedType);
|
|
246
|
+
if (!type) return resolve();
|
|
247
|
+
const endEvent = type + "end";
|
|
248
|
+
let ended = 0;
|
|
249
|
+
const end = () => {
|
|
250
|
+
el.removeEventListener(endEvent, onEnd);
|
|
251
|
+
resolveIfNotStale();
|
|
252
|
+
};
|
|
253
|
+
const onEnd = (e) => {
|
|
254
|
+
if (e.target === el && ++ended >= propCount) end();
|
|
255
|
+
};
|
|
256
|
+
setTimeout(() => {
|
|
257
|
+
if (ended < propCount) end();
|
|
258
|
+
}, timeout + 1);
|
|
259
|
+
el.addEventListener(endEvent, onEnd);
|
|
317
260
|
}
|
|
318
261
|
function getTransitionInfo(el, expectedType) {
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
hasTransform
|
|
355
|
-
};
|
|
262
|
+
const styles = window.getComputedStyle(el);
|
|
263
|
+
const getStyleProperties = (key) => (styles[key] || "").split(", ");
|
|
264
|
+
const transitionDelays = getStyleProperties(`${TRANSITION}Delay`);
|
|
265
|
+
const transitionDurations = getStyleProperties(`${TRANSITION}Duration`);
|
|
266
|
+
const transitionTimeout = getTimeout(transitionDelays, transitionDurations);
|
|
267
|
+
const animationDelays = getStyleProperties(`${ANIMATION}Delay`);
|
|
268
|
+
const animationDurations = getStyleProperties(`${ANIMATION}Duration`);
|
|
269
|
+
const animationTimeout = getTimeout(animationDelays, animationDurations);
|
|
270
|
+
let type = null;
|
|
271
|
+
let timeout = 0;
|
|
272
|
+
let propCount = 0;
|
|
273
|
+
if (expectedType === TRANSITION) {
|
|
274
|
+
if (transitionTimeout > 0) {
|
|
275
|
+
type = TRANSITION;
|
|
276
|
+
timeout = transitionTimeout;
|
|
277
|
+
propCount = transitionDurations.length;
|
|
278
|
+
}
|
|
279
|
+
} else if (expectedType === ANIMATION) {
|
|
280
|
+
if (animationTimeout > 0) {
|
|
281
|
+
type = ANIMATION;
|
|
282
|
+
timeout = animationTimeout;
|
|
283
|
+
propCount = animationDurations.length;
|
|
284
|
+
}
|
|
285
|
+
} else {
|
|
286
|
+
timeout = Math.max(transitionTimeout, animationTimeout);
|
|
287
|
+
type = timeout > 0 ? transitionTimeout > animationTimeout ? TRANSITION : ANIMATION : null;
|
|
288
|
+
propCount = type ? type === TRANSITION ? transitionDurations.length : animationDurations.length : 0;
|
|
289
|
+
}
|
|
290
|
+
const hasTransform = type === TRANSITION && /\b(?:transform|all)(?:,|$)/.test(getStyleProperties(`${TRANSITION}Property`).toString());
|
|
291
|
+
return {
|
|
292
|
+
type,
|
|
293
|
+
timeout,
|
|
294
|
+
propCount,
|
|
295
|
+
hasTransform
|
|
296
|
+
};
|
|
356
297
|
}
|
|
357
298
|
function getTimeout(delays, durations) {
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
}
|
|
361
|
-
return Math.max(...durations.map((d, i) => toMs(d) + toMs(delays[i])));
|
|
299
|
+
while (delays.length < durations.length) delays = delays.concat(delays);
|
|
300
|
+
return Math.max(...durations.map((d, i) => toMs(d) + toMs(delays[i])));
|
|
362
301
|
}
|
|
363
302
|
function toMs(s) {
|
|
364
|
-
|
|
365
|
-
|
|
303
|
+
if (s === "auto") return 0;
|
|
304
|
+
return Number(s.slice(0, -1).replace(",", ".")) * 1e3;
|
|
366
305
|
}
|
|
367
306
|
function forceReflow(el) {
|
|
368
|
-
|
|
369
|
-
return targetDocument.body.offsetHeight;
|
|
307
|
+
return (el ? el.ownerDocument : document).body.offsetHeight;
|
|
370
308
|
}
|
|
371
309
|
|
|
310
|
+
//#endregion
|
|
311
|
+
//#region packages/runtime-dom/src/modules/class.ts
|
|
372
312
|
function patchClass(el, value, isSVG) {
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
el.removeAttribute("class");
|
|
379
|
-
} else if (isSVG) {
|
|
380
|
-
el.setAttribute("class", value);
|
|
381
|
-
} else {
|
|
382
|
-
el.className = value;
|
|
383
|
-
}
|
|
313
|
+
const transitionClasses = el[vtcKey];
|
|
314
|
+
if (transitionClasses) value = (value ? [value, ...transitionClasses] : [...transitionClasses]).join(" ");
|
|
315
|
+
if (value == null) el.removeAttribute("class");
|
|
316
|
+
else if (isSVG) el.setAttribute("class", value);
|
|
317
|
+
else el.className = value;
|
|
384
318
|
}
|
|
385
319
|
|
|
386
|
-
|
|
387
|
-
|
|
320
|
+
//#endregion
|
|
321
|
+
//#region packages/runtime-dom/src/directives/vShow.ts
|
|
322
|
+
const vShowOriginalDisplay = Symbol("_vod");
|
|
323
|
+
const vShowHidden = Symbol("_vsh");
|
|
388
324
|
const vShow = {
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
transition.leave(el, () => {
|
|
413
|
-
setDisplay(el, false);
|
|
414
|
-
});
|
|
415
|
-
}
|
|
416
|
-
} else {
|
|
417
|
-
setDisplay(el, value);
|
|
418
|
-
}
|
|
419
|
-
},
|
|
420
|
-
beforeUnmount(el, { value }) {
|
|
421
|
-
setDisplay(el, value);
|
|
422
|
-
}
|
|
325
|
+
name: "show",
|
|
326
|
+
beforeMount(el, { value }, { transition }) {
|
|
327
|
+
el[vShowOriginalDisplay] = el.style.display === "none" ? "" : el.style.display;
|
|
328
|
+
if (transition && value) transition.beforeEnter(el);
|
|
329
|
+
else setDisplay(el, value);
|
|
330
|
+
},
|
|
331
|
+
mounted(el, { value }, { transition }) {
|
|
332
|
+
if (transition && value) transition.enter(el);
|
|
333
|
+
},
|
|
334
|
+
updated(el, { value, oldValue }, { transition }) {
|
|
335
|
+
if (!value === !oldValue) return;
|
|
336
|
+
if (transition) if (value) {
|
|
337
|
+
transition.beforeEnter(el);
|
|
338
|
+
setDisplay(el, true);
|
|
339
|
+
transition.enter(el);
|
|
340
|
+
} else transition.leave(el, () => {
|
|
341
|
+
setDisplay(el, false);
|
|
342
|
+
});
|
|
343
|
+
else setDisplay(el, value);
|
|
344
|
+
},
|
|
345
|
+
beforeUnmount(el, { value }) {
|
|
346
|
+
setDisplay(el, value);
|
|
347
|
+
}
|
|
423
348
|
};
|
|
424
349
|
function setDisplay(el, value) {
|
|
425
|
-
|
|
426
|
-
|
|
350
|
+
el.style.display = value ? el[vShowOriginalDisplay] : "none";
|
|
351
|
+
el[vShowHidden] = !value;
|
|
427
352
|
}
|
|
428
353
|
function initVShowForSSR() {
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
}
|
|
433
|
-
};
|
|
354
|
+
vShow.getSSRProps = ({ value }) => {
|
|
355
|
+
if (!value) return { style: { display: "none" } };
|
|
356
|
+
};
|
|
434
357
|
}
|
|
435
358
|
|
|
436
|
-
|
|
359
|
+
//#endregion
|
|
360
|
+
//#region packages/runtime-dom/src/helpers/useCssVars.ts
|
|
361
|
+
const CSS_VAR_TEXT = Symbol(!!(process.env.NODE_ENV !== "production") ? "CSS_VAR_TEXT" : "");
|
|
362
|
+
/**
|
|
363
|
+
* Runtime helper for SFC's CSS variable injection feature.
|
|
364
|
+
* @private
|
|
365
|
+
*/
|
|
437
366
|
function useCssVars(getter) {
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
}
|
|
446
|
-
};
|
|
447
|
-
baseUseCssVars(
|
|
448
|
-
instance,
|
|
449
|
-
() => instance.subTree.el.parentNode,
|
|
450
|
-
getVars,
|
|
451
|
-
setVars
|
|
452
|
-
);
|
|
367
|
+
const instance = getCurrentInstance();
|
|
368
|
+
const getVars = () => getter(instance.proxy);
|
|
369
|
+
const setVars = (vars) => {
|
|
370
|
+
if (instance.ce) setVarsOnNode(instance.ce, vars);
|
|
371
|
+
else setVarsOnVNode(instance.subTree, vars);
|
|
372
|
+
};
|
|
373
|
+
baseUseCssVars(instance, () => instance.subTree.el.parentNode, getVars, setVars);
|
|
453
374
|
}
|
|
454
375
|
function setVarsOnVNode(vnode, vars) {
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
while (el) {
|
|
474
|
-
setVarsOnNode(el, vars);
|
|
475
|
-
if (el === anchor) break;
|
|
476
|
-
el = el.nextSibling;
|
|
477
|
-
}
|
|
478
|
-
}
|
|
376
|
+
if (vnode.shapeFlag & 128) {
|
|
377
|
+
const suspense = vnode.suspense;
|
|
378
|
+
vnode = suspense.activeBranch;
|
|
379
|
+
if (suspense.pendingBranch && !suspense.isHydrating) suspense.effects.push(() => {
|
|
380
|
+
setVarsOnVNode(suspense.activeBranch, vars);
|
|
381
|
+
});
|
|
382
|
+
}
|
|
383
|
+
while (vnode.component) vnode = vnode.component.subTree;
|
|
384
|
+
if (vnode.shapeFlag & 1 && vnode.el) setVarsOnNode(vnode.el, vars);
|
|
385
|
+
else if (vnode.type === Fragment) vnode.children.forEach((c) => setVarsOnVNode(c, vars));
|
|
386
|
+
else if (vnode.type === Static) {
|
|
387
|
+
let { el, anchor } = vnode;
|
|
388
|
+
while (el) {
|
|
389
|
+
setVarsOnNode(el, vars);
|
|
390
|
+
if (el === anchor) break;
|
|
391
|
+
el = el.nextSibling;
|
|
392
|
+
}
|
|
393
|
+
}
|
|
479
394
|
}
|
|
395
|
+
/**
|
|
396
|
+
* @internal
|
|
397
|
+
* shared between vdom and vapor
|
|
398
|
+
*/
|
|
480
399
|
function baseUseCssVars(instance, getParentNode, getVars, setVars) {
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
{ flush: "post" }
|
|
509
|
-
);
|
|
510
|
-
const ob = new MutationObserver(() => applyCssVars());
|
|
511
|
-
ob.observe(getParentNode(), { childList: true });
|
|
512
|
-
onUnmounted(() => ob.disconnect());
|
|
513
|
-
});
|
|
400
|
+
/* v8 ignore start */
|
|
401
|
+
if (!instance) {
|
|
402
|
+
process.env.NODE_ENV !== "production" && warn(`useCssVars is called without current active component instance.`);
|
|
403
|
+
return;
|
|
404
|
+
}
|
|
405
|
+
/* v8 ignore stop */
|
|
406
|
+
if (!!(process.env.NODE_ENV !== "production")) instance.getCssVars = getVars;
|
|
407
|
+
const updateTeleports = instance.ut = (vars = getVars()) => {
|
|
408
|
+
Array.from(document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)).forEach((node) => setVarsOnNode(node, vars));
|
|
409
|
+
};
|
|
410
|
+
const applyCssVars = (vars = getVars()) => {
|
|
411
|
+
setVars(vars);
|
|
412
|
+
updateTeleports(vars);
|
|
413
|
+
};
|
|
414
|
+
onBeforeUpdate(() => {
|
|
415
|
+
queuePostFlushCb(applyCssVars);
|
|
416
|
+
});
|
|
417
|
+
onMounted(() => {
|
|
418
|
+
watch(() => {
|
|
419
|
+
const vars = getVars();
|
|
420
|
+
extend({}, vars);
|
|
421
|
+
applyCssVars(vars);
|
|
422
|
+
}, NOOP, { flush: "post" });
|
|
423
|
+
const ob = new MutationObserver(() => applyCssVars());
|
|
424
|
+
ob.observe(getParentNode(), { childList: true });
|
|
425
|
+
onUnmounted(() => ob.disconnect());
|
|
426
|
+
});
|
|
514
427
|
}
|
|
428
|
+
/**
|
|
429
|
+
* @internal
|
|
430
|
+
* shared between vdom and vapor
|
|
431
|
+
*/
|
|
515
432
|
function setVarsOnNode(el, vars) {
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
433
|
+
if (el.nodeType === 1) {
|
|
434
|
+
const style = el.style;
|
|
435
|
+
let cssText = "";
|
|
436
|
+
for (const key in vars) {
|
|
437
|
+
const value = normalizeCssVarValue(vars[key]);
|
|
438
|
+
style.setProperty(`--${key}`, value);
|
|
439
|
+
cssText += `--${key}: ${value};`;
|
|
440
|
+
}
|
|
441
|
+
style[CSS_VAR_TEXT] = cssText;
|
|
442
|
+
}
|
|
526
443
|
}
|
|
527
444
|
|
|
445
|
+
//#endregion
|
|
446
|
+
//#region packages/runtime-dom/src/modules/style.ts
|
|
528
447
|
const displayRE = /(?:^|;)\s*display\s*:/;
|
|
529
448
|
function patchStyle(el, prev, next) {
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
} else {
|
|
557
|
-
if (isCssString) {
|
|
558
|
-
if (prev !== next) {
|
|
559
|
-
const cssVarText = style[CSS_VAR_TEXT];
|
|
560
|
-
if (cssVarText) {
|
|
561
|
-
next += ";" + cssVarText;
|
|
562
|
-
}
|
|
563
|
-
style.cssText = next;
|
|
564
|
-
hasControlledDisplay = displayRE.test(next);
|
|
565
|
-
}
|
|
566
|
-
} else if (prev) {
|
|
567
|
-
el.removeAttribute("style");
|
|
568
|
-
}
|
|
569
|
-
}
|
|
570
|
-
if (vShowOriginalDisplay in el) {
|
|
571
|
-
el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : "";
|
|
572
|
-
if (el[vShowHidden]) {
|
|
573
|
-
style.display = "none";
|
|
574
|
-
}
|
|
575
|
-
}
|
|
449
|
+
const style = el.style;
|
|
450
|
+
const isCssString = isString(next);
|
|
451
|
+
let hasControlledDisplay = false;
|
|
452
|
+
if (next && !isCssString) {
|
|
453
|
+
if (prev) if (!isString(prev)) {
|
|
454
|
+
for (const key in prev) if (next[key] == null) setStyle(style, key, "");
|
|
455
|
+
} else for (const prevStyle of prev.split(";")) {
|
|
456
|
+
const key = prevStyle.slice(0, prevStyle.indexOf(":")).trim();
|
|
457
|
+
if (next[key] == null) setStyle(style, key, "");
|
|
458
|
+
}
|
|
459
|
+
for (const key in next) {
|
|
460
|
+
if (key === "display") hasControlledDisplay = true;
|
|
461
|
+
setStyle(style, key, next[key]);
|
|
462
|
+
}
|
|
463
|
+
} else if (isCssString) {
|
|
464
|
+
if (prev !== next) {
|
|
465
|
+
const cssVarText = style[CSS_VAR_TEXT];
|
|
466
|
+
if (cssVarText) next += ";" + cssVarText;
|
|
467
|
+
style.cssText = next;
|
|
468
|
+
hasControlledDisplay = displayRE.test(next);
|
|
469
|
+
}
|
|
470
|
+
} else if (prev) el.removeAttribute("style");
|
|
471
|
+
if (vShowOriginalDisplay in el) {
|
|
472
|
+
el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : "";
|
|
473
|
+
if (el[vShowHidden]) style.display = "none";
|
|
474
|
+
}
|
|
576
475
|
}
|
|
577
476
|
const semicolonRE = /[^\\];\s*$/;
|
|
578
477
|
const importantRE = /\s*!important$/;
|
|
579
478
|
function setStyle(style, name, rawVal) {
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
} else {
|
|
594
|
-
const prefixed = autoPrefix(style, name);
|
|
595
|
-
if (importantRE.test(val)) {
|
|
596
|
-
style.setProperty(
|
|
597
|
-
hyphenate(prefixed),
|
|
598
|
-
val.replace(importantRE, ""),
|
|
599
|
-
"important"
|
|
600
|
-
);
|
|
601
|
-
} else {
|
|
602
|
-
style[prefixed] = val;
|
|
603
|
-
}
|
|
604
|
-
}
|
|
605
|
-
}
|
|
479
|
+
if (isArray(rawVal)) rawVal.forEach((v) => setStyle(style, name, v));
|
|
480
|
+
else {
|
|
481
|
+
const val = rawVal == null ? "" : String(rawVal);
|
|
482
|
+
if (!!(process.env.NODE_ENV !== "production")) {
|
|
483
|
+
if (semicolonRE.test(val)) warn(`Unexpected semicolon at the end of '${name}' style value: '${val}'`);
|
|
484
|
+
}
|
|
485
|
+
if (name.startsWith("--")) style.setProperty(name, val);
|
|
486
|
+
else {
|
|
487
|
+
const prefixed = autoPrefix(style, name);
|
|
488
|
+
if (importantRE.test(val)) style.setProperty(hyphenate(prefixed), val.replace(importantRE, ""), "important");
|
|
489
|
+
else style[prefixed] = val;
|
|
490
|
+
}
|
|
491
|
+
}
|
|
606
492
|
}
|
|
607
|
-
const prefixes = [
|
|
493
|
+
const prefixes = [
|
|
494
|
+
"Webkit",
|
|
495
|
+
"Moz",
|
|
496
|
+
"ms"
|
|
497
|
+
];
|
|
608
498
|
const prefixCache = {};
|
|
609
499
|
function autoPrefix(style, rawName) {
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
const prefixed = prefixes[i] + name;
|
|
621
|
-
if (prefixed in style) {
|
|
622
|
-
return prefixCache[rawName] = prefixed;
|
|
623
|
-
}
|
|
624
|
-
}
|
|
625
|
-
return rawName;
|
|
500
|
+
const cached = prefixCache[rawName];
|
|
501
|
+
if (cached) return cached;
|
|
502
|
+
let name = camelize(rawName);
|
|
503
|
+
if (name !== "filter" && name in style) return prefixCache[rawName] = name;
|
|
504
|
+
name = capitalize(name);
|
|
505
|
+
for (let i = 0; i < prefixes.length; i++) {
|
|
506
|
+
const prefixed = prefixes[i] + name;
|
|
507
|
+
if (prefixed in style) return prefixCache[rawName] = prefixed;
|
|
508
|
+
}
|
|
509
|
+
return rawName;
|
|
626
510
|
}
|
|
627
511
|
|
|
512
|
+
//#endregion
|
|
513
|
+
//#region packages/runtime-dom/src/modules/attrs.ts
|
|
628
514
|
const xlinkNS = "http://www.w3.org/1999/xlink";
|
|
629
515
|
function patchAttr(el, key, value, isSVG, instance, isBoolean = isSpecialBooleanAttr(key)) {
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
el.setAttributeNS(xlinkNS, key, value);
|
|
635
|
-
}
|
|
636
|
-
} else {
|
|
637
|
-
if (value == null || isBoolean && !includeBooleanAttr(value)) {
|
|
638
|
-
el.removeAttribute(key);
|
|
639
|
-
} else {
|
|
640
|
-
el.setAttribute(
|
|
641
|
-
key,
|
|
642
|
-
isBoolean ? "" : isSymbol(value) ? String(value) : value
|
|
643
|
-
);
|
|
644
|
-
}
|
|
645
|
-
}
|
|
516
|
+
if (isSVG && key.startsWith("xlink:")) if (value == null) el.removeAttributeNS(xlinkNS, key.slice(6, key.length));
|
|
517
|
+
else el.setAttributeNS(xlinkNS, key, value);
|
|
518
|
+
else if (value == null || isBoolean && !includeBooleanAttr(value)) el.removeAttribute(key);
|
|
519
|
+
else el.setAttribute(key, isBoolean ? "" : isSymbol(value) ? String(value) : value);
|
|
646
520
|
}
|
|
647
521
|
|
|
522
|
+
//#endregion
|
|
523
|
+
//#region packages/runtime-dom/src/modules/props.ts
|
|
648
524
|
function patchDOMProp(el, key, value, parentComponent, attrName) {
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
} else if (type === "number") {
|
|
681
|
-
value = 0;
|
|
682
|
-
needRemove = true;
|
|
683
|
-
}
|
|
684
|
-
}
|
|
685
|
-
try {
|
|
686
|
-
el[key] = value;
|
|
687
|
-
} catch (e) {
|
|
688
|
-
if (!!(process.env.NODE_ENV !== "production") && !needRemove) {
|
|
689
|
-
warn(
|
|
690
|
-
`Failed setting prop "${key}" on <${tag.toLowerCase()}>: value ${value} is invalid.`,
|
|
691
|
-
e
|
|
692
|
-
);
|
|
693
|
-
}
|
|
694
|
-
}
|
|
695
|
-
needRemove && el.removeAttribute(attrName || key);
|
|
525
|
+
if (key === "innerHTML" || key === "textContent") {
|
|
526
|
+
if (value != null) el[key] = key === "innerHTML" ? unsafeToTrustedHTML(value) : value;
|
|
527
|
+
return;
|
|
528
|
+
}
|
|
529
|
+
const tag = el.tagName;
|
|
530
|
+
if (key === "value" && canSetValueDirectly(tag)) {
|
|
531
|
+
const oldValue = tag === "OPTION" ? el.getAttribute("value") || "" : el.value;
|
|
532
|
+
const newValue = value == null ? el.type === "checkbox" ? "on" : "" : String(value);
|
|
533
|
+
if (oldValue !== newValue || !("_value" in el)) el.value = newValue;
|
|
534
|
+
if (value == null) el.removeAttribute(key);
|
|
535
|
+
el._value = value;
|
|
536
|
+
return;
|
|
537
|
+
}
|
|
538
|
+
let needRemove = false;
|
|
539
|
+
if (value === "" || value == null) {
|
|
540
|
+
const type = typeof el[key];
|
|
541
|
+
if (type === "boolean") value = includeBooleanAttr(value);
|
|
542
|
+
else if (value == null && type === "string") {
|
|
543
|
+
value = "";
|
|
544
|
+
needRemove = true;
|
|
545
|
+
} else if (type === "number") {
|
|
546
|
+
value = 0;
|
|
547
|
+
needRemove = true;
|
|
548
|
+
}
|
|
549
|
+
}
|
|
550
|
+
try {
|
|
551
|
+
el[key] = value;
|
|
552
|
+
} catch (e) {
|
|
553
|
+
if (!!(process.env.NODE_ENV !== "production") && !needRemove) warn(`Failed setting prop "${key}" on <${tag.toLowerCase()}>: value ${value} is invalid.`, e);
|
|
554
|
+
}
|
|
555
|
+
needRemove && el.removeAttribute(attrName || key);
|
|
696
556
|
}
|
|
697
557
|
|
|
558
|
+
//#endregion
|
|
559
|
+
//#region packages/runtime-dom/src/modules/events.ts
|
|
698
560
|
function addEventListener(el, event, handler, options) {
|
|
699
|
-
|
|
561
|
+
el.addEventListener(event, handler, options);
|
|
700
562
|
}
|
|
701
563
|
function removeEventListener(el, event, handler, options) {
|
|
702
|
-
|
|
564
|
+
el.removeEventListener(event, handler, options);
|
|
703
565
|
}
|
|
704
|
-
const veiKey =
|
|
566
|
+
const veiKey = Symbol("_vei");
|
|
705
567
|
function patchEvent(el, rawName, prevValue, nextValue, instance = null) {
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
addEventListener(el, name, invoker, options);
|
|
718
|
-
} else if (existingInvoker) {
|
|
719
|
-
removeEventListener(el, name, existingInvoker, options);
|
|
720
|
-
invokers[rawName] = void 0;
|
|
721
|
-
}
|
|
722
|
-
}
|
|
568
|
+
const invokers = el[veiKey] || (el[veiKey] = {});
|
|
569
|
+
const existingInvoker = invokers[rawName];
|
|
570
|
+
if (nextValue && existingInvoker) existingInvoker.value = !!(process.env.NODE_ENV !== "production") ? sanitizeEventValue(nextValue, rawName) : nextValue;
|
|
571
|
+
else {
|
|
572
|
+
const [name, options] = parseName(rawName);
|
|
573
|
+
if (nextValue) addEventListener(el, name, invokers[rawName] = createInvoker(!!(process.env.NODE_ENV !== "production") ? sanitizeEventValue(nextValue, rawName) : nextValue, instance), options);
|
|
574
|
+
else if (existingInvoker) {
|
|
575
|
+
removeEventListener(el, name, existingInvoker, options);
|
|
576
|
+
invokers[rawName] = void 0;
|
|
577
|
+
}
|
|
578
|
+
}
|
|
723
579
|
}
|
|
724
580
|
const optionsModifierRE = /(?:Once|Passive|Capture)$/;
|
|
725
581
|
function parseName(name) {
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
return [event, options];
|
|
582
|
+
let options;
|
|
583
|
+
if (optionsModifierRE.test(name)) {
|
|
584
|
+
options = {};
|
|
585
|
+
let m;
|
|
586
|
+
while (m = name.match(optionsModifierRE)) {
|
|
587
|
+
name = name.slice(0, name.length - m[0].length);
|
|
588
|
+
options[m[0].toLowerCase()] = true;
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
return [name[2] === ":" ? name.slice(3) : hyphenate(name.slice(2)), options];
|
|
737
592
|
}
|
|
738
593
|
let cachedNow = 0;
|
|
739
594
|
const p = /* @__PURE__ */ Promise.resolve();
|
|
740
595
|
const getNow = () => cachedNow || (p.then(() => cachedNow = 0), cachedNow = Date.now());
|
|
741
596
|
function createInvoker(initialValue, instance) {
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
instance,
|
|
751
|
-
5,
|
|
752
|
-
[e]
|
|
753
|
-
);
|
|
754
|
-
};
|
|
755
|
-
invoker.value = initialValue;
|
|
756
|
-
invoker.attached = getNow();
|
|
757
|
-
return invoker;
|
|
597
|
+
const invoker = (e) => {
|
|
598
|
+
if (!e._vts) e._vts = Date.now();
|
|
599
|
+
else if (e._vts <= invoker.attached) return;
|
|
600
|
+
callWithAsyncErrorHandling(patchStopImmediatePropagation(e, invoker.value), instance, 5, [e]);
|
|
601
|
+
};
|
|
602
|
+
invoker.value = initialValue;
|
|
603
|
+
invoker.attached = getNow();
|
|
604
|
+
return invoker;
|
|
758
605
|
}
|
|
759
606
|
function sanitizeEventValue(value, propName) {
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
warn(
|
|
764
|
-
`Wrong type passed as event handler to ${propName} - did you forget @ or : in front of your prop?
|
|
765
|
-
Expected function or array of functions, received type ${typeof value}.`
|
|
766
|
-
);
|
|
767
|
-
return NOOP;
|
|
607
|
+
if (isFunction(value) || isArray(value)) return value;
|
|
608
|
+
warn(`Wrong type passed as event handler to ${propName} - did you forget @ or : in front of your prop?\nExpected function or array of functions, received type ${typeof value}.`);
|
|
609
|
+
return NOOP;
|
|
768
610
|
}
|
|
769
611
|
function patchStopImmediatePropagation(e, value) {
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
);
|
|
779
|
-
} else {
|
|
780
|
-
return value;
|
|
781
|
-
}
|
|
612
|
+
if (isArray(value)) {
|
|
613
|
+
const originalStop = e.stopImmediatePropagation;
|
|
614
|
+
e.stopImmediatePropagation = () => {
|
|
615
|
+
originalStop.call(e);
|
|
616
|
+
e._stopped = true;
|
|
617
|
+
};
|
|
618
|
+
return value.map((fn) => (e) => !e._stopped && fn && fn(e));
|
|
619
|
+
} else return value;
|
|
782
620
|
}
|
|
783
621
|
|
|
622
|
+
//#endregion
|
|
623
|
+
//#region packages/runtime-dom/src/patchProp.ts
|
|
784
624
|
const patchProp = (el, key, prevValue, nextValue, namespace, parentComponent) => {
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
} else if (
|
|
800
|
-
// #11081 force set props for possible async custom element
|
|
801
|
-
el._isVueCE && (/[A-Z]/.test(key) || !isString(nextValue))
|
|
802
|
-
) {
|
|
803
|
-
patchDOMProp(el, camelize$1(key), nextValue, parentComponent, key);
|
|
804
|
-
} else {
|
|
805
|
-
if (key === "true-value") {
|
|
806
|
-
el._trueValue = nextValue;
|
|
807
|
-
} else if (key === "false-value") {
|
|
808
|
-
el._falseValue = nextValue;
|
|
809
|
-
}
|
|
810
|
-
patchAttr(el, key, nextValue, isSVG);
|
|
811
|
-
}
|
|
625
|
+
const isSVG = namespace === "svg";
|
|
626
|
+
if (key === "class") patchClass(el, nextValue, isSVG);
|
|
627
|
+
else if (key === "style") patchStyle(el, prevValue, nextValue);
|
|
628
|
+
else if (isOn(key)) {
|
|
629
|
+
if (!isModelListener(key)) patchEvent(el, key, prevValue, nextValue, parentComponent);
|
|
630
|
+
} else if (key[0] === "." ? (key = key.slice(1), true) : key[0] === "^" ? (key = key.slice(1), false) : shouldSetAsProp(el, key, nextValue, isSVG)) {
|
|
631
|
+
patchDOMProp(el, key, nextValue, parentComponent);
|
|
632
|
+
if (!el.tagName.includes("-") && (key === "value" || key === "checked" || key === "selected")) patchAttr(el, key, nextValue, isSVG, parentComponent, key !== "value");
|
|
633
|
+
} else if (el._isVueCE && (/[A-Z]/.test(key) || !isString(nextValue))) patchDOMProp(el, camelize$1(key), nextValue, parentComponent, key);
|
|
634
|
+
else {
|
|
635
|
+
if (key === "true-value") el._trueValue = nextValue;
|
|
636
|
+
else if (key === "false-value") el._falseValue = nextValue;
|
|
637
|
+
patchAttr(el, key, nextValue, isSVG, parentComponent);
|
|
638
|
+
}
|
|
812
639
|
};
|
|
813
640
|
function shouldSetAsProp(el, key, value, isSVG) {
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
}
|
|
823
|
-
if (shouldSetAsAttr(el.tagName, key)) {
|
|
824
|
-
return false;
|
|
825
|
-
}
|
|
826
|
-
if (isNativeOn(key) && isString(value)) {
|
|
827
|
-
return false;
|
|
828
|
-
}
|
|
829
|
-
return key in el;
|
|
641
|
+
if (isSVG) {
|
|
642
|
+
if (key === "innerHTML" || key === "textContent") return true;
|
|
643
|
+
if (key in el && isNativeOn(key) && isFunction(value)) return true;
|
|
644
|
+
return false;
|
|
645
|
+
}
|
|
646
|
+
if (shouldSetAsAttr(el.tagName, key)) return false;
|
|
647
|
+
if (isNativeOn(key) && isString(value)) return false;
|
|
648
|
+
return key in el;
|
|
830
649
|
}
|
|
831
650
|
|
|
651
|
+
//#endregion
|
|
652
|
+
//#region packages/runtime-dom/src/apiCustomElement.ts
|
|
832
653
|
const REMOVAL = {};
|
|
833
|
-
|
|
654
|
+
/* @__NO_SIDE_EFFECTS__ */
|
|
834
655
|
function defineCustomElement(options, extraOptions, _createApp) {
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
656
|
+
let Comp = defineComponent(options, extraOptions);
|
|
657
|
+
if (isPlainObject(Comp)) Comp = extend({}, Comp, extraOptions);
|
|
658
|
+
class VueCustomElement extends VueElement {
|
|
659
|
+
constructor(initialProps) {
|
|
660
|
+
super(Comp, initialProps, _createApp);
|
|
661
|
+
}
|
|
662
|
+
}
|
|
663
|
+
VueCustomElement.def = Comp;
|
|
664
|
+
return VueCustomElement;
|
|
844
665
|
}
|
|
845
|
-
const defineSSRCustomElement = (
|
|
846
|
-
|
|
666
|
+
const defineSSRCustomElement = ((options, extraOptions) => {
|
|
667
|
+
return /* @__PURE__ */ defineCustomElement(options, extraOptions, createSSRApp);
|
|
847
668
|
});
|
|
848
|
-
const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {
|
|
669
|
+
const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {};
|
|
670
|
+
var VueElementBase = class VueElementBase extends BaseClass {
|
|
671
|
+
constructor(def, props = {}, createAppFn) {
|
|
672
|
+
super();
|
|
673
|
+
this._isVueCE = true;
|
|
674
|
+
this._instance = null;
|
|
675
|
+
this._app = null;
|
|
676
|
+
this._connected = false;
|
|
677
|
+
this._resolved = false;
|
|
678
|
+
this._numberProps = null;
|
|
679
|
+
this._styleChildren = /* @__PURE__ */ new WeakSet();
|
|
680
|
+
this._patching = false;
|
|
681
|
+
this._dirty = false;
|
|
682
|
+
this._ob = null;
|
|
683
|
+
this._def = def;
|
|
684
|
+
this._props = props;
|
|
685
|
+
this._createApp = createAppFn;
|
|
686
|
+
this._nonce = def.nonce;
|
|
687
|
+
if (this._needsHydration()) this._root = this.shadowRoot;
|
|
688
|
+
else if (def.shadowRoot !== false) {
|
|
689
|
+
this.attachShadow(extend({}, def.shadowRootOptions, { mode: "open" }));
|
|
690
|
+
this._root = this.shadowRoot;
|
|
691
|
+
} else this._root = this;
|
|
692
|
+
}
|
|
693
|
+
connectedCallback() {
|
|
694
|
+
if (!this.isConnected) return;
|
|
695
|
+
if (!this.shadowRoot && !this._resolved) this._parseSlots();
|
|
696
|
+
this._connected = true;
|
|
697
|
+
let parent = this;
|
|
698
|
+
while (parent = parent && (parent.parentNode || parent.host)) if (parent instanceof VueElementBase) {
|
|
699
|
+
this._parent = parent;
|
|
700
|
+
break;
|
|
701
|
+
}
|
|
702
|
+
if (!this._instance) if (this._resolved) this._mountComponent(this._def);
|
|
703
|
+
else if (parent && parent._pendingResolve) this._pendingResolve = parent._pendingResolve.then(() => {
|
|
704
|
+
this._pendingResolve = void 0;
|
|
705
|
+
this._resolveDef();
|
|
706
|
+
});
|
|
707
|
+
else this._resolveDef();
|
|
708
|
+
}
|
|
709
|
+
disconnectedCallback() {
|
|
710
|
+
this._connected = false;
|
|
711
|
+
nextTick(() => {
|
|
712
|
+
if (!this._connected) {
|
|
713
|
+
if (this._ob) {
|
|
714
|
+
this._ob.disconnect();
|
|
715
|
+
this._ob = null;
|
|
716
|
+
}
|
|
717
|
+
this._unmount();
|
|
718
|
+
if (this._teleportTargets) {
|
|
719
|
+
this._teleportTargets.clear();
|
|
720
|
+
this._teleportTargets = void 0;
|
|
721
|
+
}
|
|
722
|
+
}
|
|
723
|
+
});
|
|
724
|
+
}
|
|
725
|
+
_setParent(parent = this._parent) {
|
|
726
|
+
if (parent && this._instance) {
|
|
727
|
+
this._instance.parent = parent._instance;
|
|
728
|
+
this._inheritParentContext(parent);
|
|
729
|
+
}
|
|
730
|
+
}
|
|
731
|
+
_inheritParentContext(parent = this._parent) {
|
|
732
|
+
if (parent && this._app) Object.setPrototypeOf(this._app._context.provides, parent._instance.provides);
|
|
733
|
+
}
|
|
734
|
+
_processMutations(mutations) {
|
|
735
|
+
for (const m of mutations) this._setAttr(m.attributeName);
|
|
736
|
+
}
|
|
737
|
+
/**
|
|
738
|
+
* resolve inner component definition (handle possible async component)
|
|
739
|
+
*/
|
|
740
|
+
_resolveDef() {
|
|
741
|
+
if (this._pendingResolve) return;
|
|
742
|
+
for (let i = 0; i < this.attributes.length; i++) this._setAttr(this.attributes[i].name);
|
|
743
|
+
this._ob = new MutationObserver(this._processMutations.bind(this));
|
|
744
|
+
this._ob.observe(this, { attributes: true });
|
|
745
|
+
const resolve = (def) => {
|
|
746
|
+
this._resolved = true;
|
|
747
|
+
this._pendingResolve = void 0;
|
|
748
|
+
const { props, styles } = def;
|
|
749
|
+
let numberProps;
|
|
750
|
+
if (props && !isArray(props)) for (const key in props) {
|
|
751
|
+
const opt = props[key];
|
|
752
|
+
if (opt === Number || opt && opt.type === Number) {
|
|
753
|
+
if (key in this._props) this._props[key] = toNumber(this._props[key]);
|
|
754
|
+
(numberProps || (numberProps = Object.create(null)))[camelize$1(key)] = true;
|
|
755
|
+
}
|
|
756
|
+
}
|
|
757
|
+
this._numberProps = numberProps;
|
|
758
|
+
this._resolveProps(def);
|
|
759
|
+
if (this.shadowRoot) this._applyStyles(styles);
|
|
760
|
+
else if (!!(process.env.NODE_ENV !== "production") && styles) warn("Custom element style injection is not supported when using shadowRoot: false");
|
|
761
|
+
this._mountComponent(def);
|
|
762
|
+
};
|
|
763
|
+
const asyncDef = this._def.__asyncLoader;
|
|
764
|
+
if (asyncDef) {
|
|
765
|
+
const { configureApp } = this._def;
|
|
766
|
+
this._pendingResolve = asyncDef().then((def) => {
|
|
767
|
+
def.configureApp = configureApp;
|
|
768
|
+
this._def = def;
|
|
769
|
+
resolve(def);
|
|
770
|
+
});
|
|
771
|
+
} else resolve(this._def);
|
|
772
|
+
}
|
|
773
|
+
_mountComponent(def) {
|
|
774
|
+
this._mount(def);
|
|
775
|
+
this._processExposed();
|
|
776
|
+
}
|
|
777
|
+
_processExposed() {
|
|
778
|
+
const exposed = this._instance && this._instance.exposed;
|
|
779
|
+
if (!exposed) return;
|
|
780
|
+
for (const key in exposed) if (!hasOwn(this, key)) Object.defineProperty(this, key, { get: () => unref(exposed[key]) });
|
|
781
|
+
else if (!!(process.env.NODE_ENV !== "production")) warn(`Exposed property "${key}" already exists on custom element.`);
|
|
782
|
+
}
|
|
783
|
+
_processInstance() {
|
|
784
|
+
this._instance.ce = this;
|
|
785
|
+
this._instance.isCE = true;
|
|
786
|
+
if (!!(process.env.NODE_ENV !== "production")) this._instance.ceReload = (newStyles) => {
|
|
787
|
+
if (this._styles) {
|
|
788
|
+
this._styles.forEach((s) => this._root.removeChild(s));
|
|
789
|
+
this._styles.length = 0;
|
|
790
|
+
}
|
|
791
|
+
this._applyStyles(newStyles);
|
|
792
|
+
if (!this._instance.vapor) this._instance = null;
|
|
793
|
+
this._update();
|
|
794
|
+
};
|
|
795
|
+
const dispatch = (event, args) => {
|
|
796
|
+
this.dispatchEvent(new CustomEvent(event, isPlainObject(args[0]) ? extend({ detail: args }, args[0]) : { detail: args }));
|
|
797
|
+
};
|
|
798
|
+
this._instance.emit = (event, ...args) => {
|
|
799
|
+
dispatch(event, args);
|
|
800
|
+
if (hyphenate(event) !== event) dispatch(hyphenate(event), args);
|
|
801
|
+
};
|
|
802
|
+
this._setParent();
|
|
803
|
+
}
|
|
804
|
+
_resolveProps(def) {
|
|
805
|
+
const { props } = def;
|
|
806
|
+
const declaredPropKeys = isArray(props) ? props : Object.keys(props || {});
|
|
807
|
+
for (const key of Object.keys(this)) if (key[0] !== "_" && declaredPropKeys.includes(key)) this._setProp(key, this[key]);
|
|
808
|
+
for (const key of declaredPropKeys.map(camelize$1)) Object.defineProperty(this, key, {
|
|
809
|
+
get() {
|
|
810
|
+
return this._getProp(key);
|
|
811
|
+
},
|
|
812
|
+
set(val) {
|
|
813
|
+
this._setProp(key, val, true, !this._patching);
|
|
814
|
+
}
|
|
815
|
+
});
|
|
816
|
+
}
|
|
817
|
+
_setAttr(key) {
|
|
818
|
+
if (key.startsWith("data-v-")) return;
|
|
819
|
+
const has = this.hasAttribute(key);
|
|
820
|
+
let value = has ? this.getAttribute(key) : REMOVAL;
|
|
821
|
+
const camelKey = camelize$1(key);
|
|
822
|
+
if (has && this._numberProps && this._numberProps[camelKey]) value = toNumber(value);
|
|
823
|
+
this._setProp(camelKey, value, false, true);
|
|
824
|
+
}
|
|
825
|
+
/**
|
|
826
|
+
* @internal
|
|
827
|
+
*/
|
|
828
|
+
_getProp(key) {
|
|
829
|
+
return this._props[key];
|
|
830
|
+
}
|
|
831
|
+
/**
|
|
832
|
+
* @internal
|
|
833
|
+
*/
|
|
834
|
+
_setProp(key, val, shouldReflect = true, shouldUpdate = false) {
|
|
835
|
+
if (val !== this._props[key]) {
|
|
836
|
+
this._dirty = true;
|
|
837
|
+
if (val === REMOVAL) delete this._props[key];
|
|
838
|
+
else {
|
|
839
|
+
this._props[key] = val;
|
|
840
|
+
if (key === "key" && this._app && this._app._ceVNode) this._app._ceVNode.key = val;
|
|
841
|
+
}
|
|
842
|
+
if (shouldUpdate && this._instance) this._update();
|
|
843
|
+
if (shouldReflect) {
|
|
844
|
+
const ob = this._ob;
|
|
845
|
+
if (ob) {
|
|
846
|
+
this._processMutations(ob.takeRecords());
|
|
847
|
+
ob.disconnect();
|
|
848
|
+
}
|
|
849
|
+
if (val === true) this.setAttribute(hyphenate(key), "");
|
|
850
|
+
else if (typeof val === "string" || typeof val === "number") this.setAttribute(hyphenate(key), val + "");
|
|
851
|
+
else if (!val) this.removeAttribute(hyphenate(key));
|
|
852
|
+
ob && ob.observe(this, { attributes: true });
|
|
853
|
+
}
|
|
854
|
+
}
|
|
855
|
+
}
|
|
856
|
+
_applyStyles(styles, owner) {
|
|
857
|
+
if (!styles) return;
|
|
858
|
+
if (owner) {
|
|
859
|
+
if (owner === this._def || this._styleChildren.has(owner)) return;
|
|
860
|
+
this._styleChildren.add(owner);
|
|
861
|
+
}
|
|
862
|
+
const nonce = this._nonce;
|
|
863
|
+
for (let i = styles.length - 1; i >= 0; i--) {
|
|
864
|
+
const s = document.createElement("style");
|
|
865
|
+
if (nonce) s.setAttribute("nonce", nonce);
|
|
866
|
+
s.textContent = styles[i];
|
|
867
|
+
this.shadowRoot.prepend(s);
|
|
868
|
+
if (!!(process.env.NODE_ENV !== "production")) if (owner) {
|
|
869
|
+
if (owner.__hmrId) {
|
|
870
|
+
if (!this._childStyles) this._childStyles = /* @__PURE__ */ new Map();
|
|
871
|
+
let entry = this._childStyles.get(owner.__hmrId);
|
|
872
|
+
if (!entry) this._childStyles.set(owner.__hmrId, entry = []);
|
|
873
|
+
entry.push(s);
|
|
874
|
+
}
|
|
875
|
+
} else (this._styles || (this._styles = [])).push(s);
|
|
876
|
+
}
|
|
877
|
+
}
|
|
878
|
+
/**
|
|
879
|
+
* Only called when shadowRoot is false
|
|
880
|
+
*/
|
|
881
|
+
_parseSlots() {
|
|
882
|
+
const slots = this._slots = {};
|
|
883
|
+
let n;
|
|
884
|
+
while (n = this.firstChild) {
|
|
885
|
+
const slotName = n.nodeType === 1 && n.getAttribute("slot") || "default";
|
|
886
|
+
(slots[slotName] || (slots[slotName] = [])).push(n);
|
|
887
|
+
this.removeChild(n);
|
|
888
|
+
}
|
|
889
|
+
}
|
|
890
|
+
/**
|
|
891
|
+
* Only called when shadowRoot is false
|
|
892
|
+
*/
|
|
893
|
+
_renderSlots() {
|
|
894
|
+
const outlets = this._getSlots();
|
|
895
|
+
const scopeId = this._instance.type.__scopeId;
|
|
896
|
+
const slotReplacements = /* @__PURE__ */ new Map();
|
|
897
|
+
for (let i = 0; i < outlets.length; i++) {
|
|
898
|
+
const o = outlets[i];
|
|
899
|
+
const slotName = o.getAttribute("name") || "default";
|
|
900
|
+
const content = this._slots[slotName];
|
|
901
|
+
const parent = o.parentNode;
|
|
902
|
+
const replacementNodes = [];
|
|
903
|
+
if (content) for (const n of content) {
|
|
904
|
+
if (scopeId && n.nodeType === 1) {
|
|
905
|
+
const id = scopeId + "-s";
|
|
906
|
+
const walker = document.createTreeWalker(n, 1);
|
|
907
|
+
n.setAttribute(id, "");
|
|
908
|
+
let child;
|
|
909
|
+
while (child = walker.nextNode()) child.setAttribute(id, "");
|
|
910
|
+
}
|
|
911
|
+
parent.insertBefore(n, o);
|
|
912
|
+
replacementNodes.push(n);
|
|
913
|
+
}
|
|
914
|
+
else while (o.firstChild) {
|
|
915
|
+
const child = o.firstChild;
|
|
916
|
+
parent.insertBefore(child, o);
|
|
917
|
+
replacementNodes.push(child);
|
|
918
|
+
}
|
|
919
|
+
parent.removeChild(o);
|
|
920
|
+
slotReplacements.set(o, replacementNodes);
|
|
921
|
+
}
|
|
922
|
+
this._updateSlotNodes(slotReplacements);
|
|
923
|
+
}
|
|
924
|
+
/**
|
|
925
|
+
* @internal
|
|
926
|
+
*/
|
|
927
|
+
_getSlots() {
|
|
928
|
+
const roots = [this];
|
|
929
|
+
if (this._teleportTargets) roots.push(...this._teleportTargets);
|
|
930
|
+
const slots = /* @__PURE__ */ new Set();
|
|
931
|
+
for (const root of roots) {
|
|
932
|
+
const found = root.querySelectorAll("slot");
|
|
933
|
+
for (let i = 0; i < found.length; i++) slots.add(found[i]);
|
|
934
|
+
}
|
|
935
|
+
return Array.from(slots);
|
|
936
|
+
}
|
|
937
|
+
/**
|
|
938
|
+
* @internal
|
|
939
|
+
*/
|
|
940
|
+
_injectChildStyle(comp) {
|
|
941
|
+
this._applyStyles(comp.styles, comp);
|
|
942
|
+
}
|
|
943
|
+
/**
|
|
944
|
+
* @internal
|
|
945
|
+
*/
|
|
946
|
+
_beginPatch() {
|
|
947
|
+
this._patching = true;
|
|
948
|
+
this._dirty = false;
|
|
949
|
+
}
|
|
950
|
+
/**
|
|
951
|
+
* @internal
|
|
952
|
+
*/
|
|
953
|
+
_endPatch() {
|
|
954
|
+
this._patching = false;
|
|
955
|
+
if (this._dirty && this._instance) this._update();
|
|
956
|
+
}
|
|
957
|
+
/**
|
|
958
|
+
* @internal
|
|
959
|
+
*/
|
|
960
|
+
_hasShadowRoot() {
|
|
961
|
+
return this._def.shadowRoot !== false;
|
|
962
|
+
}
|
|
963
|
+
/**
|
|
964
|
+
* @internal
|
|
965
|
+
*/
|
|
966
|
+
_removeChildStyle(comp) {
|
|
967
|
+
if (!!(process.env.NODE_ENV !== "production")) {
|
|
968
|
+
this._styleChildren.delete(comp);
|
|
969
|
+
if (this._childStyles && comp.__hmrId) {
|
|
970
|
+
const oldStyles = this._childStyles.get(comp.__hmrId);
|
|
971
|
+
if (oldStyles) {
|
|
972
|
+
oldStyles.forEach((s) => this._root.removeChild(s));
|
|
973
|
+
oldStyles.length = 0;
|
|
974
|
+
}
|
|
975
|
+
}
|
|
976
|
+
}
|
|
977
|
+
}
|
|
978
|
+
};
|
|
979
|
+
var VueElement = class extends VueElementBase {
|
|
980
|
+
constructor(def, props = {}, createAppFn = createApp) {
|
|
981
|
+
super(def, props, createAppFn);
|
|
982
|
+
}
|
|
983
|
+
_needsHydration() {
|
|
984
|
+
if (this.shadowRoot && this._createApp !== createApp) return true;
|
|
985
|
+
else if (!!(process.env.NODE_ENV !== "production") && this.shadowRoot) warn("Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use `defineSSRCustomElement`.");
|
|
986
|
+
return false;
|
|
987
|
+
}
|
|
988
|
+
_mount(def) {
|
|
989
|
+
if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) && !def.name) def.name = "VueElement";
|
|
990
|
+
this._app = this._createApp(def);
|
|
991
|
+
this._inheritParentContext();
|
|
992
|
+
if (def.configureApp) def.configureApp(this._app);
|
|
993
|
+
this._app._ceVNode = this._createVNode();
|
|
994
|
+
this._app.mount(this._root);
|
|
995
|
+
}
|
|
996
|
+
_update() {
|
|
997
|
+
if (!this._app) return;
|
|
998
|
+
const vnode = this._createVNode();
|
|
999
|
+
vnode.appContext = this._app._context;
|
|
1000
|
+
render(vnode, this._root);
|
|
1001
|
+
}
|
|
1002
|
+
_unmount() {
|
|
1003
|
+
if (this._app) this._app.unmount();
|
|
1004
|
+
if (this._instance && this._instance.ce) this._instance.ce = void 0;
|
|
1005
|
+
this._app = this._instance = null;
|
|
1006
|
+
}
|
|
1007
|
+
/**
|
|
1008
|
+
* Only called when shadowRoot is false
|
|
1009
|
+
*/
|
|
1010
|
+
_updateSlotNodes(replacements) {}
|
|
1011
|
+
_createVNode() {
|
|
1012
|
+
const baseProps = {};
|
|
1013
|
+
if (!this.shadowRoot) baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
|
|
1014
|
+
const vnode = createVNode(this._def, extend(baseProps, this._props));
|
|
1015
|
+
if (!this._instance) vnode.ce = (instance) => {
|
|
1016
|
+
this._instance = instance;
|
|
1017
|
+
this._processInstance();
|
|
1018
|
+
};
|
|
1019
|
+
return vnode;
|
|
1020
|
+
}
|
|
849
1021
|
};
|
|
850
|
-
class VueElementBase extends BaseClass {
|
|
851
|
-
constructor(def, props = {}, createAppFn) {
|
|
852
|
-
super();
|
|
853
|
-
this._isVueCE = true;
|
|
854
|
-
/**
|
|
855
|
-
* @internal
|
|
856
|
-
*/
|
|
857
|
-
this._instance = null;
|
|
858
|
-
/**
|
|
859
|
-
* @internal
|
|
860
|
-
*/
|
|
861
|
-
this._app = null;
|
|
862
|
-
this._connected = false;
|
|
863
|
-
this._resolved = false;
|
|
864
|
-
this._numberProps = null;
|
|
865
|
-
this._styleChildren = /* @__PURE__ */ new WeakSet();
|
|
866
|
-
this._patching = false;
|
|
867
|
-
this._dirty = false;
|
|
868
|
-
this._ob = null;
|
|
869
|
-
this._def = def;
|
|
870
|
-
this._props = props;
|
|
871
|
-
this._createApp = createAppFn;
|
|
872
|
-
this._nonce = def.nonce;
|
|
873
|
-
if (this._needsHydration()) {
|
|
874
|
-
this._root = this.shadowRoot;
|
|
875
|
-
} else {
|
|
876
|
-
if (def.shadowRoot !== false) {
|
|
877
|
-
this.attachShadow(
|
|
878
|
-
extend({}, def.shadowRootOptions, {
|
|
879
|
-
mode: "open"
|
|
880
|
-
})
|
|
881
|
-
);
|
|
882
|
-
this._root = this.shadowRoot;
|
|
883
|
-
} else {
|
|
884
|
-
this._root = this;
|
|
885
|
-
}
|
|
886
|
-
}
|
|
887
|
-
}
|
|
888
|
-
connectedCallback() {
|
|
889
|
-
if (!this.isConnected) return;
|
|
890
|
-
if (!this.shadowRoot && !this._resolved) {
|
|
891
|
-
this._parseSlots();
|
|
892
|
-
}
|
|
893
|
-
this._connected = true;
|
|
894
|
-
let parent = this;
|
|
895
|
-
while (parent = parent && (parent.parentNode || parent.host)) {
|
|
896
|
-
if (parent instanceof VueElementBase) {
|
|
897
|
-
this._parent = parent;
|
|
898
|
-
break;
|
|
899
|
-
}
|
|
900
|
-
}
|
|
901
|
-
if (!this._instance) {
|
|
902
|
-
if (this._resolved) {
|
|
903
|
-
this._mountComponent(this._def);
|
|
904
|
-
} else {
|
|
905
|
-
if (parent && parent._pendingResolve) {
|
|
906
|
-
this._pendingResolve = parent._pendingResolve.then(() => {
|
|
907
|
-
this._pendingResolve = void 0;
|
|
908
|
-
this._resolveDef();
|
|
909
|
-
});
|
|
910
|
-
} else {
|
|
911
|
-
this._resolveDef();
|
|
912
|
-
}
|
|
913
|
-
}
|
|
914
|
-
}
|
|
915
|
-
}
|
|
916
|
-
disconnectedCallback() {
|
|
917
|
-
this._connected = false;
|
|
918
|
-
nextTick(() => {
|
|
919
|
-
if (!this._connected) {
|
|
920
|
-
if (this._ob) {
|
|
921
|
-
this._ob.disconnect();
|
|
922
|
-
this._ob = null;
|
|
923
|
-
}
|
|
924
|
-
this._unmount();
|
|
925
|
-
if (this._teleportTargets) {
|
|
926
|
-
this._teleportTargets.clear();
|
|
927
|
-
this._teleportTargets = void 0;
|
|
928
|
-
}
|
|
929
|
-
}
|
|
930
|
-
});
|
|
931
|
-
}
|
|
932
|
-
_setParent(parent = this._parent) {
|
|
933
|
-
if (parent && this._instance) {
|
|
934
|
-
this._instance.parent = parent._instance;
|
|
935
|
-
this._inheritParentContext(parent);
|
|
936
|
-
}
|
|
937
|
-
}
|
|
938
|
-
_inheritParentContext(parent = this._parent) {
|
|
939
|
-
if (parent && this._app) {
|
|
940
|
-
Object.setPrototypeOf(
|
|
941
|
-
this._app._context.provides,
|
|
942
|
-
parent._instance.provides
|
|
943
|
-
);
|
|
944
|
-
}
|
|
945
|
-
}
|
|
946
|
-
_processMutations(mutations) {
|
|
947
|
-
for (const m of mutations) {
|
|
948
|
-
this._setAttr(m.attributeName);
|
|
949
|
-
}
|
|
950
|
-
}
|
|
951
|
-
/**
|
|
952
|
-
* resolve inner component definition (handle possible async component)
|
|
953
|
-
*/
|
|
954
|
-
_resolveDef() {
|
|
955
|
-
if (this._pendingResolve) {
|
|
956
|
-
return;
|
|
957
|
-
}
|
|
958
|
-
for (let i = 0; i < this.attributes.length; i++) {
|
|
959
|
-
this._setAttr(this.attributes[i].name);
|
|
960
|
-
}
|
|
961
|
-
this._ob = new MutationObserver(this._processMutations.bind(this));
|
|
962
|
-
this._ob.observe(this, { attributes: true });
|
|
963
|
-
const resolve = (def) => {
|
|
964
|
-
this._resolved = true;
|
|
965
|
-
this._pendingResolve = void 0;
|
|
966
|
-
const { props, styles } = def;
|
|
967
|
-
let numberProps;
|
|
968
|
-
if (props && !isArray(props)) {
|
|
969
|
-
for (const key in props) {
|
|
970
|
-
const opt = props[key];
|
|
971
|
-
if (opt === Number || opt && opt.type === Number) {
|
|
972
|
-
if (key in this._props) {
|
|
973
|
-
this._props[key] = toNumber(this._props[key]);
|
|
974
|
-
}
|
|
975
|
-
(numberProps || (numberProps = /* @__PURE__ */ Object.create(null)))[camelize$1(key)] = true;
|
|
976
|
-
}
|
|
977
|
-
}
|
|
978
|
-
}
|
|
979
|
-
this._numberProps = numberProps;
|
|
980
|
-
this._resolveProps(def);
|
|
981
|
-
if (this.shadowRoot) {
|
|
982
|
-
this._applyStyles(styles);
|
|
983
|
-
} else if (!!(process.env.NODE_ENV !== "production") && styles) {
|
|
984
|
-
warn(
|
|
985
|
-
"Custom element style injection is not supported when using shadowRoot: false"
|
|
986
|
-
);
|
|
987
|
-
}
|
|
988
|
-
this._mountComponent(def);
|
|
989
|
-
};
|
|
990
|
-
const asyncDef = this._def.__asyncLoader;
|
|
991
|
-
if (asyncDef) {
|
|
992
|
-
const { configureApp } = this._def;
|
|
993
|
-
this._pendingResolve = asyncDef().then((def) => {
|
|
994
|
-
def.configureApp = configureApp;
|
|
995
|
-
this._def = def;
|
|
996
|
-
resolve(def);
|
|
997
|
-
});
|
|
998
|
-
} else {
|
|
999
|
-
resolve(this._def);
|
|
1000
|
-
}
|
|
1001
|
-
}
|
|
1002
|
-
_mountComponent(def) {
|
|
1003
|
-
this._mount(def);
|
|
1004
|
-
this._processExposed();
|
|
1005
|
-
}
|
|
1006
|
-
_processExposed() {
|
|
1007
|
-
const exposed = this._instance && this._instance.exposed;
|
|
1008
|
-
if (!exposed) return;
|
|
1009
|
-
for (const key in exposed) {
|
|
1010
|
-
if (!hasOwn(this, key)) {
|
|
1011
|
-
Object.defineProperty(this, key, {
|
|
1012
|
-
// unwrap ref to be consistent with public instance behavior
|
|
1013
|
-
get: () => unref(exposed[key])
|
|
1014
|
-
});
|
|
1015
|
-
} else if (!!(process.env.NODE_ENV !== "production")) {
|
|
1016
|
-
warn(`Exposed property "${key}" already exists on custom element.`);
|
|
1017
|
-
}
|
|
1018
|
-
}
|
|
1019
|
-
}
|
|
1020
|
-
_processInstance() {
|
|
1021
|
-
this._instance.ce = this;
|
|
1022
|
-
this._instance.isCE = true;
|
|
1023
|
-
if (!!(process.env.NODE_ENV !== "production")) {
|
|
1024
|
-
this._instance.ceReload = (newStyles) => {
|
|
1025
|
-
if (this._styles) {
|
|
1026
|
-
this._styles.forEach((s) => this._root.removeChild(s));
|
|
1027
|
-
this._styles.length = 0;
|
|
1028
|
-
}
|
|
1029
|
-
this._applyStyles(newStyles);
|
|
1030
|
-
if (!this._instance.vapor) {
|
|
1031
|
-
this._instance = null;
|
|
1032
|
-
}
|
|
1033
|
-
this._update();
|
|
1034
|
-
};
|
|
1035
|
-
}
|
|
1036
|
-
const dispatch = (event, args) => {
|
|
1037
|
-
this.dispatchEvent(
|
|
1038
|
-
new CustomEvent(
|
|
1039
|
-
event,
|
|
1040
|
-
isPlainObject(args[0]) ? extend({ detail: args }, args[0]) : { detail: args }
|
|
1041
|
-
)
|
|
1042
|
-
);
|
|
1043
|
-
};
|
|
1044
|
-
this._instance.emit = (event, ...args) => {
|
|
1045
|
-
dispatch(event, args);
|
|
1046
|
-
if (hyphenate(event) !== event) {
|
|
1047
|
-
dispatch(hyphenate(event), args);
|
|
1048
|
-
}
|
|
1049
|
-
};
|
|
1050
|
-
this._setParent();
|
|
1051
|
-
}
|
|
1052
|
-
_resolveProps(def) {
|
|
1053
|
-
const { props } = def;
|
|
1054
|
-
const declaredPropKeys = isArray(props) ? props : Object.keys(props || {});
|
|
1055
|
-
for (const key of Object.keys(this)) {
|
|
1056
|
-
if (key[0] !== "_" && declaredPropKeys.includes(key)) {
|
|
1057
|
-
this._setProp(key, this[key]);
|
|
1058
|
-
}
|
|
1059
|
-
}
|
|
1060
|
-
for (const key of declaredPropKeys.map(camelize$1)) {
|
|
1061
|
-
Object.defineProperty(this, key, {
|
|
1062
|
-
get() {
|
|
1063
|
-
return this._getProp(key);
|
|
1064
|
-
},
|
|
1065
|
-
set(val) {
|
|
1066
|
-
this._setProp(key, val, true, !this._patching);
|
|
1067
|
-
}
|
|
1068
|
-
});
|
|
1069
|
-
}
|
|
1070
|
-
}
|
|
1071
|
-
_setAttr(key) {
|
|
1072
|
-
if (key.startsWith("data-v-")) return;
|
|
1073
|
-
const has = this.hasAttribute(key);
|
|
1074
|
-
let value = has ? this.getAttribute(key) : REMOVAL;
|
|
1075
|
-
const camelKey = camelize$1(key);
|
|
1076
|
-
if (has && this._numberProps && this._numberProps[camelKey]) {
|
|
1077
|
-
value = toNumber(value);
|
|
1078
|
-
}
|
|
1079
|
-
this._setProp(camelKey, value, false, true);
|
|
1080
|
-
}
|
|
1081
|
-
/**
|
|
1082
|
-
* @internal
|
|
1083
|
-
*/
|
|
1084
|
-
_getProp(key) {
|
|
1085
|
-
return this._props[key];
|
|
1086
|
-
}
|
|
1087
|
-
/**
|
|
1088
|
-
* @internal
|
|
1089
|
-
*/
|
|
1090
|
-
_setProp(key, val, shouldReflect = true, shouldUpdate = false) {
|
|
1091
|
-
if (val !== this._props[key]) {
|
|
1092
|
-
this._dirty = true;
|
|
1093
|
-
if (val === REMOVAL) {
|
|
1094
|
-
delete this._props[key];
|
|
1095
|
-
} else {
|
|
1096
|
-
this._props[key] = val;
|
|
1097
|
-
if (key === "key" && this._app && this._app._ceVNode) {
|
|
1098
|
-
this._app._ceVNode.key = val;
|
|
1099
|
-
}
|
|
1100
|
-
}
|
|
1101
|
-
if (shouldUpdate && this._instance) {
|
|
1102
|
-
this._update();
|
|
1103
|
-
}
|
|
1104
|
-
if (shouldReflect) {
|
|
1105
|
-
const ob = this._ob;
|
|
1106
|
-
if (ob) {
|
|
1107
|
-
this._processMutations(ob.takeRecords());
|
|
1108
|
-
ob.disconnect();
|
|
1109
|
-
}
|
|
1110
|
-
if (val === true) {
|
|
1111
|
-
this.setAttribute(hyphenate(key), "");
|
|
1112
|
-
} else if (typeof val === "string" || typeof val === "number") {
|
|
1113
|
-
this.setAttribute(hyphenate(key), val + "");
|
|
1114
|
-
} else if (!val) {
|
|
1115
|
-
this.removeAttribute(hyphenate(key));
|
|
1116
|
-
}
|
|
1117
|
-
ob && ob.observe(this, { attributes: true });
|
|
1118
|
-
}
|
|
1119
|
-
}
|
|
1120
|
-
}
|
|
1121
|
-
_applyStyles(styles, owner) {
|
|
1122
|
-
if (!styles) return;
|
|
1123
|
-
if (owner) {
|
|
1124
|
-
if (owner === this._def || this._styleChildren.has(owner)) {
|
|
1125
|
-
return;
|
|
1126
|
-
}
|
|
1127
|
-
this._styleChildren.add(owner);
|
|
1128
|
-
}
|
|
1129
|
-
const nonce = this._nonce;
|
|
1130
|
-
for (let i = styles.length - 1; i >= 0; i--) {
|
|
1131
|
-
const s = document.createElement("style");
|
|
1132
|
-
if (nonce) s.setAttribute("nonce", nonce);
|
|
1133
|
-
s.textContent = styles[i];
|
|
1134
|
-
this.shadowRoot.prepend(s);
|
|
1135
|
-
if (!!(process.env.NODE_ENV !== "production")) {
|
|
1136
|
-
if (owner) {
|
|
1137
|
-
if (owner.__hmrId) {
|
|
1138
|
-
if (!this._childStyles) this._childStyles = /* @__PURE__ */ new Map();
|
|
1139
|
-
let entry = this._childStyles.get(owner.__hmrId);
|
|
1140
|
-
if (!entry) {
|
|
1141
|
-
this._childStyles.set(owner.__hmrId, entry = []);
|
|
1142
|
-
}
|
|
1143
|
-
entry.push(s);
|
|
1144
|
-
}
|
|
1145
|
-
} else {
|
|
1146
|
-
(this._styles || (this._styles = [])).push(s);
|
|
1147
|
-
}
|
|
1148
|
-
}
|
|
1149
|
-
}
|
|
1150
|
-
}
|
|
1151
|
-
/**
|
|
1152
|
-
* Only called when shadowRoot is false
|
|
1153
|
-
*/
|
|
1154
|
-
_parseSlots() {
|
|
1155
|
-
const slots = this._slots = {};
|
|
1156
|
-
let n;
|
|
1157
|
-
while (n = this.firstChild) {
|
|
1158
|
-
const slotName = n.nodeType === 1 && n.getAttribute("slot") || "default";
|
|
1159
|
-
(slots[slotName] || (slots[slotName] = [])).push(n);
|
|
1160
|
-
this.removeChild(n);
|
|
1161
|
-
}
|
|
1162
|
-
}
|
|
1163
|
-
/**
|
|
1164
|
-
* Only called when shadowRoot is false
|
|
1165
|
-
*/
|
|
1166
|
-
_renderSlots() {
|
|
1167
|
-
const outlets = this._getSlots();
|
|
1168
|
-
const scopeId = this._instance.type.__scopeId;
|
|
1169
|
-
const slotReplacements = /* @__PURE__ */ new Map();
|
|
1170
|
-
for (let i = 0; i < outlets.length; i++) {
|
|
1171
|
-
const o = outlets[i];
|
|
1172
|
-
const slotName = o.getAttribute("name") || "default";
|
|
1173
|
-
const content = this._slots[slotName];
|
|
1174
|
-
const parent = o.parentNode;
|
|
1175
|
-
const replacementNodes = [];
|
|
1176
|
-
if (content) {
|
|
1177
|
-
for (const n of content) {
|
|
1178
|
-
if (scopeId && n.nodeType === 1) {
|
|
1179
|
-
const id = scopeId + "-s";
|
|
1180
|
-
const walker = document.createTreeWalker(n, 1);
|
|
1181
|
-
n.setAttribute(id, "");
|
|
1182
|
-
let child;
|
|
1183
|
-
while (child = walker.nextNode()) {
|
|
1184
|
-
child.setAttribute(id, "");
|
|
1185
|
-
}
|
|
1186
|
-
}
|
|
1187
|
-
parent.insertBefore(n, o);
|
|
1188
|
-
replacementNodes.push(n);
|
|
1189
|
-
}
|
|
1190
|
-
} else {
|
|
1191
|
-
while (o.firstChild) {
|
|
1192
|
-
const child = o.firstChild;
|
|
1193
|
-
parent.insertBefore(child, o);
|
|
1194
|
-
replacementNodes.push(child);
|
|
1195
|
-
}
|
|
1196
|
-
}
|
|
1197
|
-
parent.removeChild(o);
|
|
1198
|
-
slotReplacements.set(o, replacementNodes);
|
|
1199
|
-
}
|
|
1200
|
-
this._updateSlotNodes(slotReplacements);
|
|
1201
|
-
}
|
|
1202
|
-
/**
|
|
1203
|
-
* @internal
|
|
1204
|
-
*/
|
|
1205
|
-
_getSlots() {
|
|
1206
|
-
const roots = [this];
|
|
1207
|
-
if (this._teleportTargets) {
|
|
1208
|
-
roots.push(...this._teleportTargets);
|
|
1209
|
-
}
|
|
1210
|
-
const slots = /* @__PURE__ */ new Set();
|
|
1211
|
-
for (const root of roots) {
|
|
1212
|
-
const found = root.querySelectorAll("slot");
|
|
1213
|
-
for (let i = 0; i < found.length; i++) {
|
|
1214
|
-
slots.add(found[i]);
|
|
1215
|
-
}
|
|
1216
|
-
}
|
|
1217
|
-
return Array.from(slots);
|
|
1218
|
-
}
|
|
1219
|
-
/**
|
|
1220
|
-
* @internal
|
|
1221
|
-
*/
|
|
1222
|
-
_injectChildStyle(comp) {
|
|
1223
|
-
this._applyStyles(comp.styles, comp);
|
|
1224
|
-
}
|
|
1225
|
-
/**
|
|
1226
|
-
* @internal
|
|
1227
|
-
*/
|
|
1228
|
-
_beginPatch() {
|
|
1229
|
-
this._patching = true;
|
|
1230
|
-
this._dirty = false;
|
|
1231
|
-
}
|
|
1232
|
-
/**
|
|
1233
|
-
* @internal
|
|
1234
|
-
*/
|
|
1235
|
-
_endPatch() {
|
|
1236
|
-
this._patching = false;
|
|
1237
|
-
if (this._dirty && this._instance) {
|
|
1238
|
-
this._update();
|
|
1239
|
-
}
|
|
1240
|
-
}
|
|
1241
|
-
/**
|
|
1242
|
-
* @internal
|
|
1243
|
-
*/
|
|
1244
|
-
_hasShadowRoot() {
|
|
1245
|
-
return this._def.shadowRoot !== false;
|
|
1246
|
-
}
|
|
1247
|
-
/**
|
|
1248
|
-
* @internal
|
|
1249
|
-
*/
|
|
1250
|
-
_removeChildStyle(comp) {
|
|
1251
|
-
if (!!(process.env.NODE_ENV !== "production")) {
|
|
1252
|
-
this._styleChildren.delete(comp);
|
|
1253
|
-
if (this._childStyles && comp.__hmrId) {
|
|
1254
|
-
const oldStyles = this._childStyles.get(comp.__hmrId);
|
|
1255
|
-
if (oldStyles) {
|
|
1256
|
-
oldStyles.forEach((s) => this._root.removeChild(s));
|
|
1257
|
-
oldStyles.length = 0;
|
|
1258
|
-
}
|
|
1259
|
-
}
|
|
1260
|
-
}
|
|
1261
|
-
}
|
|
1262
|
-
}
|
|
1263
|
-
class VueElement extends VueElementBase {
|
|
1264
|
-
constructor(def, props = {}, createAppFn = createApp) {
|
|
1265
|
-
super(def, props, createAppFn);
|
|
1266
|
-
}
|
|
1267
|
-
_needsHydration() {
|
|
1268
|
-
if (this.shadowRoot && this._createApp !== createApp) {
|
|
1269
|
-
return true;
|
|
1270
|
-
} else {
|
|
1271
|
-
if (!!(process.env.NODE_ENV !== "production") && this.shadowRoot) {
|
|
1272
|
-
warn(
|
|
1273
|
-
`Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineSSRCustomElement\`.`
|
|
1274
|
-
);
|
|
1275
|
-
}
|
|
1276
|
-
}
|
|
1277
|
-
return false;
|
|
1278
|
-
}
|
|
1279
|
-
_mount(def) {
|
|
1280
|
-
if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) && !def.name) {
|
|
1281
|
-
def.name = "VueElement";
|
|
1282
|
-
}
|
|
1283
|
-
this._app = this._createApp(def);
|
|
1284
|
-
this._inheritParentContext();
|
|
1285
|
-
if (def.configureApp) {
|
|
1286
|
-
def.configureApp(this._app);
|
|
1287
|
-
}
|
|
1288
|
-
this._app._ceVNode = this._createVNode();
|
|
1289
|
-
this._app.mount(this._root);
|
|
1290
|
-
}
|
|
1291
|
-
_update() {
|
|
1292
|
-
if (!this._app) return;
|
|
1293
|
-
const vnode = this._createVNode();
|
|
1294
|
-
vnode.appContext = this._app._context;
|
|
1295
|
-
render(vnode, this._root);
|
|
1296
|
-
}
|
|
1297
|
-
_unmount() {
|
|
1298
|
-
if (this._app) {
|
|
1299
|
-
this._app.unmount();
|
|
1300
|
-
}
|
|
1301
|
-
if (this._instance && this._instance.ce) {
|
|
1302
|
-
this._instance.ce = void 0;
|
|
1303
|
-
}
|
|
1304
|
-
this._app = this._instance = null;
|
|
1305
|
-
}
|
|
1306
|
-
/**
|
|
1307
|
-
* Only called when shadowRoot is false
|
|
1308
|
-
*/
|
|
1309
|
-
_updateSlotNodes(replacements) {
|
|
1310
|
-
}
|
|
1311
|
-
_createVNode() {
|
|
1312
|
-
const baseProps = {};
|
|
1313
|
-
if (!this.shadowRoot) {
|
|
1314
|
-
baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
|
|
1315
|
-
}
|
|
1316
|
-
const vnode = createVNode(this._def, extend(baseProps, this._props));
|
|
1317
|
-
if (!this._instance) {
|
|
1318
|
-
vnode.ce = (instance) => {
|
|
1319
|
-
this._instance = instance;
|
|
1320
|
-
this._processInstance();
|
|
1321
|
-
};
|
|
1322
|
-
}
|
|
1323
|
-
return vnode;
|
|
1324
|
-
}
|
|
1325
|
-
}
|
|
1326
1022
|
function useHost(caller) {
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
warn(
|
|
1334
|
-
`${caller || "useHost"} called without an active component instance.`
|
|
1335
|
-
);
|
|
1336
|
-
} else {
|
|
1337
|
-
warn(
|
|
1338
|
-
`${caller || "useHost"} can only be used in components defined via defineCustomElement.`
|
|
1339
|
-
);
|
|
1340
|
-
}
|
|
1341
|
-
}
|
|
1342
|
-
return null;
|
|
1023
|
+
const { hasInstance, value } = useInstanceOption("ce", true);
|
|
1024
|
+
const el = value;
|
|
1025
|
+
if (el) return el;
|
|
1026
|
+
else if (!!(process.env.NODE_ENV !== "production")) if (!hasInstance) warn(`${caller || "useHost"} called without an active component instance.`);
|
|
1027
|
+
else warn(`${caller || "useHost"} can only be used in components defined via defineCustomElement.`);
|
|
1028
|
+
return null;
|
|
1343
1029
|
}
|
|
1030
|
+
/**
|
|
1031
|
+
* Retrieve the shadowRoot of the current custom element. Only usable in setup()
|
|
1032
|
+
* of a `defineCustomElement` component.
|
|
1033
|
+
*/
|
|
1344
1034
|
function useShadowRoot() {
|
|
1345
|
-
|
|
1346
|
-
|
|
1035
|
+
const el = !!(process.env.NODE_ENV !== "production") ? useHost("useShadowRoot") : useHost();
|
|
1036
|
+
return el && el.shadowRoot;
|
|
1347
1037
|
}
|
|
1348
1038
|
|
|
1039
|
+
//#endregion
|
|
1040
|
+
//#region packages/runtime-dom/src/helpers/useCssModule.ts
|
|
1349
1041
|
function useCssModule(name = "$style") {
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1042
|
+
{
|
|
1043
|
+
const { hasInstance, value: type } = useInstanceOption("type", true);
|
|
1044
|
+
if (!hasInstance) {
|
|
1045
|
+
process.env.NODE_ENV !== "production" && warn(`useCssModule must be called inside setup()`);
|
|
1046
|
+
return EMPTY_OBJ;
|
|
1047
|
+
}
|
|
1048
|
+
const modules = type.__cssModules;
|
|
1049
|
+
if (!modules) {
|
|
1050
|
+
process.env.NODE_ENV !== "production" && warn(`Current instance does not have CSS modules injected.`);
|
|
1051
|
+
return EMPTY_OBJ;
|
|
1052
|
+
}
|
|
1053
|
+
const mod = modules[name];
|
|
1054
|
+
if (!mod) {
|
|
1055
|
+
process.env.NODE_ENV !== "production" && warn(`Current instance does not have CSS module named "${name}".`);
|
|
1056
|
+
return EMPTY_OBJ;
|
|
1057
|
+
}
|
|
1058
|
+
return mod;
|
|
1059
|
+
}
|
|
1368
1060
|
}
|
|
1369
1061
|
|
|
1062
|
+
//#endregion
|
|
1063
|
+
//#region packages/runtime-dom/src/components/TransitionGroup.ts
|
|
1370
1064
|
const positionMap = /* @__PURE__ */ new WeakMap();
|
|
1371
1065
|
const newPositionMap = /* @__PURE__ */ new WeakMap();
|
|
1372
|
-
const moveCbKey =
|
|
1373
|
-
const enterCbKey =
|
|
1066
|
+
const moveCbKey = Symbol("_moveCb");
|
|
1067
|
+
const enterCbKey = Symbol("_enterCb");
|
|
1068
|
+
/**
|
|
1069
|
+
* Wrap logic that modifies TransitionGroup properties in a function
|
|
1070
|
+
* so that it can be annotated as pure
|
|
1071
|
+
*/
|
|
1374
1072
|
const decorate = (t) => {
|
|
1375
|
-
|
|
1376
|
-
|
|
1073
|
+
delete t.props.mode;
|
|
1074
|
+
return t;
|
|
1377
1075
|
};
|
|
1378
1076
|
const TransitionGroupImpl = /* @__PURE__ */ decorate({
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
instance
|
|
1429
|
-
)
|
|
1430
|
-
);
|
|
1431
|
-
positionMap.set(child, {
|
|
1432
|
-
left: child.el.offsetLeft,
|
|
1433
|
-
top: child.el.offsetTop
|
|
1434
|
-
});
|
|
1435
|
-
}
|
|
1436
|
-
}
|
|
1437
|
-
}
|
|
1438
|
-
children = slots.default ? getTransitionRawChildren(slots.default()) : [];
|
|
1439
|
-
for (let i = 0; i < children.length; i++) {
|
|
1440
|
-
const child = children[i];
|
|
1441
|
-
if (child.key != null) {
|
|
1442
|
-
setTransitionHooks(
|
|
1443
|
-
child,
|
|
1444
|
-
resolveTransitionHooks(child, cssTransitionProps, state, instance)
|
|
1445
|
-
);
|
|
1446
|
-
} else if (!!(process.env.NODE_ENV !== "production") && child.type !== Text) {
|
|
1447
|
-
warn(`<TransitionGroup> children must be keyed.`);
|
|
1448
|
-
}
|
|
1449
|
-
}
|
|
1450
|
-
return createVNode(tag, null, children);
|
|
1451
|
-
};
|
|
1452
|
-
}
|
|
1077
|
+
name: "TransitionGroup",
|
|
1078
|
+
props: /* @__PURE__ */ extend({}, TransitionPropsValidators, {
|
|
1079
|
+
tag: String,
|
|
1080
|
+
moveClass: String
|
|
1081
|
+
}),
|
|
1082
|
+
setup(props, { slots }) {
|
|
1083
|
+
const instance = getCurrentInstance();
|
|
1084
|
+
const state = useTransitionState();
|
|
1085
|
+
let prevChildren;
|
|
1086
|
+
let children;
|
|
1087
|
+
onUpdated(() => {
|
|
1088
|
+
if (!prevChildren.length) return;
|
|
1089
|
+
const moveClass = props.moveClass || `${props.name || "v"}-move`;
|
|
1090
|
+
if (!hasCSSTransform(prevChildren[0].el, instance.vnode.el, moveClass)) {
|
|
1091
|
+
prevChildren = [];
|
|
1092
|
+
return;
|
|
1093
|
+
}
|
|
1094
|
+
prevChildren.forEach((vnode) => callPendingCbs(vnode.el));
|
|
1095
|
+
prevChildren.forEach(recordPosition);
|
|
1096
|
+
const movedChildren = prevChildren.filter(applyTranslation);
|
|
1097
|
+
forceReflow(instance.vnode.el);
|
|
1098
|
+
movedChildren.forEach((c) => {
|
|
1099
|
+
const el = c.el;
|
|
1100
|
+
handleMovedChildren(el, moveClass);
|
|
1101
|
+
});
|
|
1102
|
+
prevChildren = [];
|
|
1103
|
+
});
|
|
1104
|
+
return () => {
|
|
1105
|
+
const rawProps = toRaw(props);
|
|
1106
|
+
const cssTransitionProps = resolveTransitionProps(rawProps);
|
|
1107
|
+
let tag = rawProps.tag || Fragment;
|
|
1108
|
+
prevChildren = [];
|
|
1109
|
+
if (children) for (let i = 0; i < children.length; i++) {
|
|
1110
|
+
const child = children[i];
|
|
1111
|
+
if (child.el && child.el instanceof Element) {
|
|
1112
|
+
prevChildren.push(child);
|
|
1113
|
+
setTransitionHooks(child, resolveTransitionHooks(child, cssTransitionProps, state, instance));
|
|
1114
|
+
positionMap.set(child, getPosition(child.el));
|
|
1115
|
+
}
|
|
1116
|
+
}
|
|
1117
|
+
children = slots.default ? getTransitionRawChildren(slots.default()) : [];
|
|
1118
|
+
for (let i = 0; i < children.length; i++) {
|
|
1119
|
+
const child = children[i];
|
|
1120
|
+
if (child.key != null) setTransitionHooks(child, resolveTransitionHooks(child, cssTransitionProps, state, instance));
|
|
1121
|
+
else if (!!(process.env.NODE_ENV !== "production") && child.type !== Text) warn(`<TransitionGroup> children must be keyed.`);
|
|
1122
|
+
}
|
|
1123
|
+
return createVNode(tag, null, children);
|
|
1124
|
+
};
|
|
1125
|
+
}
|
|
1453
1126
|
});
|
|
1454
1127
|
const TransitionGroup = TransitionGroupImpl;
|
|
1455
1128
|
function callPendingCbs(el) {
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
}
|
|
1459
|
-
if (el[enterCbKey]) {
|
|
1460
|
-
el[enterCbKey]();
|
|
1461
|
-
}
|
|
1129
|
+
if (el[moveCbKey]) el[moveCbKey]();
|
|
1130
|
+
if (el[enterCbKey]) el[enterCbKey]();
|
|
1462
1131
|
}
|
|
1463
1132
|
function recordPosition(c) {
|
|
1464
|
-
|
|
1465
|
-
left: c.el.offsetLeft,
|
|
1466
|
-
top: c.el.offsetTop
|
|
1467
|
-
});
|
|
1133
|
+
newPositionMap.set(c, getPosition(c.el));
|
|
1468
1134
|
}
|
|
1469
1135
|
function applyTranslation(c) {
|
|
1470
|
-
|
|
1471
|
-
positionMap.get(c),
|
|
1472
|
-
newPositionMap.get(c),
|
|
1473
|
-
c.el
|
|
1474
|
-
)) {
|
|
1475
|
-
return c;
|
|
1476
|
-
}
|
|
1136
|
+
if (baseApplyTranslation(positionMap.get(c), newPositionMap.get(c), c.el)) return c;
|
|
1477
1137
|
}
|
|
1478
1138
|
function baseApplyTranslation(oldPos, newPos, el) {
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1139
|
+
const dx = oldPos.left - newPos.left;
|
|
1140
|
+
const dy = oldPos.top - newPos.top;
|
|
1141
|
+
if (dx || dy) {
|
|
1142
|
+
const s = el.style;
|
|
1143
|
+
const rect = el.getBoundingClientRect();
|
|
1144
|
+
let scaleX = 1;
|
|
1145
|
+
let scaleY = 1;
|
|
1146
|
+
if (el.offsetWidth) scaleX = rect.width / el.offsetWidth;
|
|
1147
|
+
if (el.offsetHeight) scaleY = rect.height / el.offsetHeight;
|
|
1148
|
+
if (!Number.isFinite(scaleX) || scaleX === 0) scaleX = 1;
|
|
1149
|
+
if (!Number.isFinite(scaleY) || scaleY === 0) scaleY = 1;
|
|
1150
|
+
if (Math.abs(scaleX - 1) < .01) scaleX = 1;
|
|
1151
|
+
if (Math.abs(scaleY - 1) < .01) scaleY = 1;
|
|
1152
|
+
s.transform = s.webkitTransform = `translate(${dx / scaleX}px,${dy / scaleY}px)`;
|
|
1153
|
+
s.transitionDuration = "0s";
|
|
1154
|
+
return true;
|
|
1155
|
+
}
|
|
1156
|
+
return false;
|
|
1157
|
+
}
|
|
1158
|
+
function getPosition(el) {
|
|
1159
|
+
const rect = el.getBoundingClientRect();
|
|
1160
|
+
return {
|
|
1161
|
+
left: rect.left,
|
|
1162
|
+
top: rect.top
|
|
1163
|
+
};
|
|
1488
1164
|
}
|
|
1489
1165
|
function hasCSSTransform(el, root, moveClass) {
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
container.removeChild(clone);
|
|
1503
|
-
return hasTransform;
|
|
1166
|
+
const clone = el.cloneNode();
|
|
1167
|
+
const _vtc = el[vtcKey];
|
|
1168
|
+
if (_vtc) _vtc.forEach((cls) => {
|
|
1169
|
+
cls.split(/\s+/).forEach((c) => c && clone.classList.remove(c));
|
|
1170
|
+
});
|
|
1171
|
+
moveClass.split(/\s+/).forEach((c) => c && clone.classList.add(c));
|
|
1172
|
+
clone.style.display = "none";
|
|
1173
|
+
const container = root.nodeType === 1 ? root : root.parentNode;
|
|
1174
|
+
container.appendChild(clone);
|
|
1175
|
+
const { hasTransform } = getTransitionInfo(clone);
|
|
1176
|
+
container.removeChild(clone);
|
|
1177
|
+
return hasTransform;
|
|
1504
1178
|
}
|
|
1505
1179
|
const handleMovedChildren = (el, moveClass) => {
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
};
|
|
1519
|
-
el.addEventListener("transitionend", cb);
|
|
1180
|
+
const style = el.style;
|
|
1181
|
+
addTransitionClass(el, moveClass);
|
|
1182
|
+
style.transform = style.webkitTransform = style.transitionDuration = "";
|
|
1183
|
+
const cb = el[moveCbKey] = (e) => {
|
|
1184
|
+
if (e && e.target !== el) return;
|
|
1185
|
+
if (!e || e.propertyName.endsWith("transform")) {
|
|
1186
|
+
el.removeEventListener("transitionend", cb);
|
|
1187
|
+
el[moveCbKey] = null;
|
|
1188
|
+
removeTransitionClass(el, moveClass);
|
|
1189
|
+
}
|
|
1190
|
+
};
|
|
1191
|
+
el.addEventListener("transitionend", cb);
|
|
1520
1192
|
};
|
|
1521
1193
|
|
|
1194
|
+
//#endregion
|
|
1195
|
+
//#region packages/runtime-dom/src/directives/vModel.ts
|
|
1522
1196
|
const getModelAssigner = (vnode) => {
|
|
1523
|
-
|
|
1524
|
-
|
|
1197
|
+
const fn = vnode.props["onUpdate:modelValue"] || false;
|
|
1198
|
+
return isArray(fn) ? (value) => invokeArrayFns(fn, value) : fn;
|
|
1525
1199
|
};
|
|
1526
1200
|
function onCompositionStart(e) {
|
|
1527
|
-
|
|
1201
|
+
e.target.composing = true;
|
|
1528
1202
|
}
|
|
1529
1203
|
function onCompositionEnd(e) {
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1204
|
+
const target = e.target;
|
|
1205
|
+
if (target.composing) {
|
|
1206
|
+
target.composing = false;
|
|
1207
|
+
target.dispatchEvent(new Event("input"));
|
|
1208
|
+
}
|
|
1535
1209
|
}
|
|
1536
|
-
const assignKey =
|
|
1210
|
+
const assignKey = Symbol("_assign");
|
|
1537
1211
|
const vModelText = {
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
el.value = value == null ? "" : value;
|
|
1550
|
-
},
|
|
1551
|
-
beforeUpdate(el, { value, oldValue, modifiers: { lazy, trim, number } }, vnode) {
|
|
1552
|
-
el[assignKey] = getModelAssigner(vnode);
|
|
1553
|
-
vModelTextUpdate(el, oldValue, value, trim, number, lazy);
|
|
1554
|
-
}
|
|
1212
|
+
created(el, { modifiers: { lazy, trim, number } }, vnode) {
|
|
1213
|
+
el[assignKey] = getModelAssigner(vnode);
|
|
1214
|
+
vModelTextInit(el, trim, number || !!(vnode.props && vnode.props.type === "number"), lazy);
|
|
1215
|
+
},
|
|
1216
|
+
mounted(el, { value }) {
|
|
1217
|
+
el.value = value == null ? "" : value;
|
|
1218
|
+
},
|
|
1219
|
+
beforeUpdate(el, { value, oldValue, modifiers: { lazy, trim, number } }, vnode) {
|
|
1220
|
+
el[assignKey] = getModelAssigner(vnode);
|
|
1221
|
+
vModelTextUpdate(el, oldValue, value, trim, number, lazy);
|
|
1222
|
+
}
|
|
1555
1223
|
};
|
|
1556
1224
|
function castValue(value, trim, number) {
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1225
|
+
if (trim) value = value.trim();
|
|
1226
|
+
if (number) value = looseToNumber(value);
|
|
1227
|
+
return value;
|
|
1560
1228
|
}
|
|
1229
|
+
/**
|
|
1230
|
+
* @internal
|
|
1231
|
+
*/
|
|
1561
1232
|
const vModelTextInit = (el, trim, number, lazy, set) => {
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
addEventListener(el, "compositionstart", onCompositionStart);
|
|
1575
|
-
addEventListener(el, "compositionend", onCompositionEnd);
|
|
1576
|
-
addEventListener(el, "change", onCompositionEnd);
|
|
1577
|
-
}
|
|
1233
|
+
addEventListener(el, lazy ? "change" : "input", (e) => {
|
|
1234
|
+
if (e.target.composing) return;
|
|
1235
|
+
(set || el[assignKey])(castValue(el.value, trim, number || el.type === "number"));
|
|
1236
|
+
});
|
|
1237
|
+
if (trim || number) addEventListener(el, "change", () => {
|
|
1238
|
+
el.value = castValue(el.value, trim, number || el.type === "number");
|
|
1239
|
+
});
|
|
1240
|
+
if (!lazy) {
|
|
1241
|
+
addEventListener(el, "compositionstart", onCompositionStart);
|
|
1242
|
+
addEventListener(el, "compositionend", onCompositionEnd);
|
|
1243
|
+
addEventListener(el, "change", onCompositionEnd);
|
|
1244
|
+
}
|
|
1578
1245
|
};
|
|
1246
|
+
/**
|
|
1247
|
+
* @internal
|
|
1248
|
+
*/
|
|
1579
1249
|
const vModelTextUpdate = (el, oldValue, value, trim, number, lazy) => {
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
}
|
|
1590
|
-
if (trim && el.value.trim() === newValue) {
|
|
1591
|
-
return;
|
|
1592
|
-
}
|
|
1593
|
-
}
|
|
1594
|
-
el.value = newValue;
|
|
1250
|
+
if (el.composing) return;
|
|
1251
|
+
const elValue = (number || el.type === "number") && !/^0\d/.test(el.value) ? looseToNumber(el.value) : el.value;
|
|
1252
|
+
const newValue = value == null ? "" : value;
|
|
1253
|
+
if (elValue === newValue) return;
|
|
1254
|
+
if (document.activeElement === el && el.type !== "range") {
|
|
1255
|
+
if (lazy && value === oldValue) return;
|
|
1256
|
+
if (trim && el.value.trim() === newValue) return;
|
|
1257
|
+
}
|
|
1258
|
+
el.value = newValue;
|
|
1595
1259
|
};
|
|
1596
1260
|
const vModelCheckbox = {
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
vnode.props.value
|
|
1610
|
-
);
|
|
1611
|
-
},
|
|
1612
|
-
beforeUpdate(el, binding, vnode) {
|
|
1613
|
-
el[assignKey] = getModelAssigner(vnode);
|
|
1614
|
-
vModelCheckboxUpdate(
|
|
1615
|
-
el,
|
|
1616
|
-
binding.oldValue,
|
|
1617
|
-
binding.value,
|
|
1618
|
-
vnode.props.value
|
|
1619
|
-
);
|
|
1620
|
-
}
|
|
1261
|
+
deep: true,
|
|
1262
|
+
created(el, _, vnode) {
|
|
1263
|
+
el[assignKey] = getModelAssigner(vnode);
|
|
1264
|
+
vModelCheckboxInit(el);
|
|
1265
|
+
},
|
|
1266
|
+
mounted(el, binding, vnode) {
|
|
1267
|
+
vModelCheckboxUpdate(el, binding.oldValue, binding.value, vnode.props.value);
|
|
1268
|
+
},
|
|
1269
|
+
beforeUpdate(el, binding, vnode) {
|
|
1270
|
+
el[assignKey] = getModelAssigner(vnode);
|
|
1271
|
+
vModelCheckboxUpdate(el, binding.oldValue, binding.value, vnode.props.value);
|
|
1272
|
+
}
|
|
1621
1273
|
};
|
|
1274
|
+
/**
|
|
1275
|
+
* @internal
|
|
1276
|
+
*/
|
|
1622
1277
|
const vModelCheckboxInit = (el, set) => {
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
}
|
|
1645
|
-
assign(cloned);
|
|
1646
|
-
} else {
|
|
1647
|
-
assign(getCheckboxValue(el, checked));
|
|
1648
|
-
}
|
|
1649
|
-
});
|
|
1278
|
+
addEventListener(el, "change", () => {
|
|
1279
|
+
const assign = set || el[assignKey];
|
|
1280
|
+
const modelValue = el._modelValue;
|
|
1281
|
+
const elementValue = getValue(el);
|
|
1282
|
+
const checked = el.checked;
|
|
1283
|
+
if (isArray(modelValue)) {
|
|
1284
|
+
const index = looseIndexOf(modelValue, elementValue);
|
|
1285
|
+
const found = index !== -1;
|
|
1286
|
+
if (checked && !found) assign(modelValue.concat(elementValue));
|
|
1287
|
+
else if (!checked && found) {
|
|
1288
|
+
const filtered = [...modelValue];
|
|
1289
|
+
filtered.splice(index, 1);
|
|
1290
|
+
assign(filtered);
|
|
1291
|
+
}
|
|
1292
|
+
} else if (isSet(modelValue)) {
|
|
1293
|
+
const cloned = new Set(modelValue);
|
|
1294
|
+
if (checked) cloned.add(elementValue);
|
|
1295
|
+
else cloned.delete(elementValue);
|
|
1296
|
+
assign(cloned);
|
|
1297
|
+
} else assign(getCheckboxValue(el, checked));
|
|
1298
|
+
});
|
|
1650
1299
|
};
|
|
1300
|
+
/**
|
|
1301
|
+
* @internal
|
|
1302
|
+
*/
|
|
1651
1303
|
const vModelCheckboxUpdate = (el, oldValue, value, rawValue = getValue(el)) => {
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
}
|
|
1662
|
-
if (el.checked !== checked) {
|
|
1663
|
-
el.checked = checked;
|
|
1664
|
-
}
|
|
1304
|
+
el._modelValue = value;
|
|
1305
|
+
let checked;
|
|
1306
|
+
if (isArray(value)) checked = looseIndexOf(value, rawValue) > -1;
|
|
1307
|
+
else if (isSet(value)) checked = value.has(rawValue);
|
|
1308
|
+
else {
|
|
1309
|
+
if (value === oldValue) return;
|
|
1310
|
+
checked = looseEqual(value, getCheckboxValue(el, true));
|
|
1311
|
+
}
|
|
1312
|
+
if (el.checked !== checked) el.checked = checked;
|
|
1665
1313
|
};
|
|
1666
1314
|
const vModelRadio = {
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
}
|
|
1679
|
-
}
|
|
1315
|
+
created(el, { value }, vnode) {
|
|
1316
|
+
el.checked = looseEqual(value, vnode.props.value);
|
|
1317
|
+
el[assignKey] = getModelAssigner(vnode);
|
|
1318
|
+
addEventListener(el, "change", () => {
|
|
1319
|
+
el[assignKey](getValue(el));
|
|
1320
|
+
});
|
|
1321
|
+
},
|
|
1322
|
+
beforeUpdate(el, { value, oldValue }, vnode) {
|
|
1323
|
+
el[assignKey] = getModelAssigner(vnode);
|
|
1324
|
+
if (value !== oldValue) el.checked = looseEqual(value, vnode.props.value);
|
|
1325
|
+
}
|
|
1680
1326
|
};
|
|
1681
1327
|
const vModelSelect = {
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
updated(el, { value }) {
|
|
1697
|
-
vModelSetSelected(el, value);
|
|
1698
|
-
}
|
|
1328
|
+
deep: true,
|
|
1329
|
+
created(el, { value, modifiers: { number } }, vnode) {
|
|
1330
|
+
vModelSelectInit(el, value, number);
|
|
1331
|
+
el[assignKey] = getModelAssigner(vnode);
|
|
1332
|
+
},
|
|
1333
|
+
mounted(el, { value }) {
|
|
1334
|
+
vModelSetSelected(el, value);
|
|
1335
|
+
},
|
|
1336
|
+
beforeUpdate(el, _binding, vnode) {
|
|
1337
|
+
el[assignKey] = getModelAssigner(vnode);
|
|
1338
|
+
},
|
|
1339
|
+
updated(el, { value }) {
|
|
1340
|
+
vModelSetSelected(el, value);
|
|
1341
|
+
}
|
|
1699
1342
|
};
|
|
1343
|
+
/**
|
|
1344
|
+
* @internal
|
|
1345
|
+
*/
|
|
1700
1346
|
const vModelSelectInit = (el, value, number, set) => {
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
nextTick(() => {
|
|
1711
|
-
el._assigning = false;
|
|
1712
|
-
});
|
|
1713
|
-
});
|
|
1347
|
+
const isSetModel = isSet(value);
|
|
1348
|
+
addEventListener(el, "change", () => {
|
|
1349
|
+
const selectedVal = Array.prototype.filter.call(el.options, (o) => o.selected).map((o) => number ? looseToNumber(getValue(o)) : getValue(o));
|
|
1350
|
+
(set || el[assignKey])(el.multiple ? isSetModel ? new Set(selectedVal) : selectedVal : selectedVal[0]);
|
|
1351
|
+
el._assigning = true;
|
|
1352
|
+
nextTick(() => {
|
|
1353
|
+
el._assigning = false;
|
|
1354
|
+
});
|
|
1355
|
+
});
|
|
1714
1356
|
};
|
|
1357
|
+
/**
|
|
1358
|
+
* @internal
|
|
1359
|
+
*/
|
|
1715
1360
|
const vModelSetSelected = (el, value) => {
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
option.selected = value.has(optionValue);
|
|
1738
|
-
}
|
|
1739
|
-
} else if (looseEqual(getValue(option), value)) {
|
|
1740
|
-
if (el.selectedIndex !== i) el.selectedIndex = i;
|
|
1741
|
-
return;
|
|
1742
|
-
}
|
|
1743
|
-
}
|
|
1744
|
-
if (!isMultiple && el.selectedIndex !== -1) {
|
|
1745
|
-
el.selectedIndex = -1;
|
|
1746
|
-
}
|
|
1361
|
+
if (el._assigning) return;
|
|
1362
|
+
const isMultiple = el.multiple;
|
|
1363
|
+
const isArrayValue = isArray(value);
|
|
1364
|
+
if (isMultiple && !isArrayValue && !isSet(value)) {
|
|
1365
|
+
process.env.NODE_ENV !== "production" && warn(`<select multiple v-model> expects an Array or Set value for its binding, but got ${Object.prototype.toString.call(value).slice(8, -1)}.`);
|
|
1366
|
+
return;
|
|
1367
|
+
}
|
|
1368
|
+
for (let i = 0, l = el.options.length; i < l; i++) {
|
|
1369
|
+
const option = el.options[i];
|
|
1370
|
+
const optionValue = getValue(option);
|
|
1371
|
+
if (isMultiple) if (isArrayValue) {
|
|
1372
|
+
const optionType = typeof optionValue;
|
|
1373
|
+
if (optionType === "string" || optionType === "number") option.selected = value.some((v) => String(v) === String(optionValue));
|
|
1374
|
+
else option.selected = looseIndexOf(value, optionValue) > -1;
|
|
1375
|
+
} else option.selected = value.has(optionValue);
|
|
1376
|
+
else if (looseEqual(getValue(option), value)) {
|
|
1377
|
+
if (el.selectedIndex !== i) el.selectedIndex = i;
|
|
1378
|
+
return;
|
|
1379
|
+
}
|
|
1380
|
+
}
|
|
1381
|
+
if (!isMultiple && el.selectedIndex !== -1) el.selectedIndex = -1;
|
|
1747
1382
|
};
|
|
1383
|
+
/**
|
|
1384
|
+
* @internal retrieve raw value set via :value bindings
|
|
1385
|
+
*/
|
|
1748
1386
|
function getValue(el) {
|
|
1749
|
-
|
|
1387
|
+
return "_value" in el ? el._value : el.value;
|
|
1750
1388
|
}
|
|
1751
1389
|
function getCheckboxValue(el, checked) {
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
if (el.hasAttribute(attr)) {
|
|
1758
|
-
return el.getAttribute(attr);
|
|
1759
|
-
}
|
|
1760
|
-
return checked;
|
|
1390
|
+
const key = checked ? "_trueValue" : "_falseValue";
|
|
1391
|
+
if (key in el) return el[key];
|
|
1392
|
+
const attr = checked ? "true-value" : "false-value";
|
|
1393
|
+
if (el.hasAttribute(attr)) return el.getAttribute(attr);
|
|
1394
|
+
return checked;
|
|
1761
1395
|
}
|
|
1762
1396
|
const vModelDynamic = {
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1397
|
+
created(el, binding, vnode) {
|
|
1398
|
+
callModelHook(el, binding, vnode, null, "created");
|
|
1399
|
+
},
|
|
1400
|
+
mounted(el, binding, vnode) {
|
|
1401
|
+
callModelHook(el, binding, vnode, null, "mounted");
|
|
1402
|
+
},
|
|
1403
|
+
beforeUpdate(el, binding, vnode, prevVNode) {
|
|
1404
|
+
callModelHook(el, binding, vnode, prevVNode, "beforeUpdate");
|
|
1405
|
+
},
|
|
1406
|
+
updated(el, binding, vnode, prevVNode) {
|
|
1407
|
+
callModelHook(el, binding, vnode, prevVNode, "updated");
|
|
1408
|
+
}
|
|
1775
1409
|
};
|
|
1776
1410
|
function resolveDynamicModel(tagName, type) {
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
case "radio":
|
|
1787
|
-
return vModelRadio;
|
|
1788
|
-
default:
|
|
1789
|
-
return vModelText;
|
|
1790
|
-
}
|
|
1791
|
-
}
|
|
1411
|
+
switch (tagName) {
|
|
1412
|
+
case "SELECT": return vModelSelect;
|
|
1413
|
+
case "TEXTAREA": return vModelText;
|
|
1414
|
+
default: switch (type) {
|
|
1415
|
+
case "checkbox": return vModelCheckbox;
|
|
1416
|
+
case "radio": return vModelRadio;
|
|
1417
|
+
default: return vModelText;
|
|
1418
|
+
}
|
|
1419
|
+
}
|
|
1792
1420
|
}
|
|
1793
1421
|
function callModelHook(el, binding, vnode, prevVNode, hook) {
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
vnode.props && vnode.props.type
|
|
1797
|
-
);
|
|
1798
|
-
const fn = modelToUse[hook];
|
|
1799
|
-
fn && fn(el, binding, vnode, prevVNode);
|
|
1422
|
+
const fn = resolveDynamicModel(el.tagName, vnode.props && vnode.props.type)[hook];
|
|
1423
|
+
fn && fn(el, binding, vnode, prevVNode);
|
|
1800
1424
|
}
|
|
1801
1425
|
function initVModelForSSR() {
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
return { checked: true };
|
|
1819
|
-
}
|
|
1820
|
-
};
|
|
1821
|
-
vModelDynamic.getSSRProps = (binding, vnode) => {
|
|
1822
|
-
if (typeof vnode.type !== "string") {
|
|
1823
|
-
return;
|
|
1824
|
-
}
|
|
1825
|
-
const modelToUse = resolveDynamicModel(
|
|
1826
|
-
// resolveDynamicModel expects an uppercase tag name, but vnode.type is lowercase
|
|
1827
|
-
vnode.type.toUpperCase(),
|
|
1828
|
-
vnode.props && vnode.props.type
|
|
1829
|
-
);
|
|
1830
|
-
if (modelToUse.getSSRProps) {
|
|
1831
|
-
return modelToUse.getSSRProps(binding, vnode);
|
|
1832
|
-
}
|
|
1833
|
-
};
|
|
1426
|
+
vModelText.getSSRProps = ({ value }) => ({ value });
|
|
1427
|
+
vModelRadio.getSSRProps = ({ value }, vnode) => {
|
|
1428
|
+
if (vnode.props && looseEqual(vnode.props.value, value)) return { checked: true };
|
|
1429
|
+
};
|
|
1430
|
+
vModelCheckbox.getSSRProps = ({ value }, vnode) => {
|
|
1431
|
+
if (isArray(value)) {
|
|
1432
|
+
if (vnode.props && looseIndexOf(value, vnode.props.value) > -1) return { checked: true };
|
|
1433
|
+
} else if (isSet(value)) {
|
|
1434
|
+
if (vnode.props && value.has(vnode.props.value)) return { checked: true };
|
|
1435
|
+
} else if (value) return { checked: true };
|
|
1436
|
+
};
|
|
1437
|
+
vModelDynamic.getSSRProps = (binding, vnode) => {
|
|
1438
|
+
if (typeof vnode.type !== "string") return;
|
|
1439
|
+
const modelToUse = resolveDynamicModel(vnode.type.toUpperCase(), vnode.props && vnode.props.type);
|
|
1440
|
+
if (modelToUse.getSSRProps) return modelToUse.getSSRProps(binding, vnode);
|
|
1441
|
+
};
|
|
1834
1442
|
}
|
|
1835
1443
|
|
|
1836
|
-
|
|
1444
|
+
//#endregion
|
|
1445
|
+
//#region packages/runtime-dom/src/directives/vOn.ts
|
|
1446
|
+
const systemModifiers = [
|
|
1447
|
+
"ctrl",
|
|
1448
|
+
"shift",
|
|
1449
|
+
"alt",
|
|
1450
|
+
"meta"
|
|
1451
|
+
];
|
|
1837
1452
|
const modifierGuards = {
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1453
|
+
stop: (e) => e.stopPropagation(),
|
|
1454
|
+
prevent: (e) => e.preventDefault(),
|
|
1455
|
+
self: (e) => e.target !== e.currentTarget,
|
|
1456
|
+
ctrl: (e) => !e.ctrlKey,
|
|
1457
|
+
shift: (e) => !e.shiftKey,
|
|
1458
|
+
alt: (e) => !e.altKey,
|
|
1459
|
+
meta: (e) => !e.metaKey,
|
|
1460
|
+
left: (e) => "button" in e && e.button !== 0,
|
|
1461
|
+
middle: (e) => "button" in e && e.button !== 1,
|
|
1462
|
+
right: (e) => "button" in e && e.button !== 2,
|
|
1463
|
+
exact: (e, modifiers) => systemModifiers.some((m) => e[`${m}Key`] && !modifiers.includes(m))
|
|
1849
1464
|
};
|
|
1465
|
+
/**
|
|
1466
|
+
* @private
|
|
1467
|
+
*/
|
|
1850
1468
|
const withModifiers = (fn, modifiers) => {
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1469
|
+
if (!fn) return fn;
|
|
1470
|
+
const cache = fn._withMods || (fn._withMods = {});
|
|
1471
|
+
const cacheKey = modifiers.join(".");
|
|
1472
|
+
return cache[cacheKey] || (cache[cacheKey] = ((event, ...args) => {
|
|
1473
|
+
for (let i = 0; i < modifiers.length; i++) {
|
|
1474
|
+
const guard = modifierGuards[modifiers[i]];
|
|
1475
|
+
if (guard && guard(event, modifiers)) return;
|
|
1476
|
+
}
|
|
1477
|
+
return fn(event, ...args);
|
|
1478
|
+
}));
|
|
1860
1479
|
};
|
|
1861
1480
|
const keyNames = {
|
|
1862
|
-
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1481
|
+
esc: "escape",
|
|
1482
|
+
space: " ",
|
|
1483
|
+
up: "arrow-up",
|
|
1484
|
+
left: "arrow-left",
|
|
1485
|
+
right: "arrow-right",
|
|
1486
|
+
down: "arrow-down",
|
|
1487
|
+
delete: "backspace"
|
|
1869
1488
|
};
|
|
1489
|
+
/**
|
|
1490
|
+
* @private
|
|
1491
|
+
*/
|
|
1870
1492
|
const withKeys = (fn, modifiers) => {
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
if (modifiers.some(
|
|
1879
|
-
(k) => k === eventKey || keyNames[k] === eventKey
|
|
1880
|
-
)) {
|
|
1881
|
-
return fn(event);
|
|
1882
|
-
}
|
|
1883
|
-
}));
|
|
1493
|
+
const cache = fn._withKeys || (fn._withKeys = {});
|
|
1494
|
+
const cacheKey = modifiers.join(".");
|
|
1495
|
+
return cache[cacheKey] || (cache[cacheKey] = ((event) => {
|
|
1496
|
+
if (!("key" in event)) return;
|
|
1497
|
+
const eventKey = hyphenate(event.key);
|
|
1498
|
+
if (modifiers.some((k) => k === eventKey || keyNames[k] === eventKey)) return fn(event);
|
|
1499
|
+
}));
|
|
1884
1500
|
};
|
|
1885
1501
|
|
|
1502
|
+
//#endregion
|
|
1503
|
+
//#region packages/runtime-dom/src/index.ts
|
|
1886
1504
|
const rendererOptions = /* @__PURE__ */ extend({ patchProp }, nodeOps);
|
|
1887
1505
|
let renderer;
|
|
1888
1506
|
let enabledHydration = false;
|
|
1889
1507
|
function ensureRenderer() {
|
|
1890
|
-
|
|
1508
|
+
return renderer || (renderer = createRenderer(rendererOptions));
|
|
1891
1509
|
}
|
|
1892
1510
|
function ensureHydrationRenderer() {
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1511
|
+
renderer = enabledHydration ? renderer : createHydrationRenderer(rendererOptions);
|
|
1512
|
+
enabledHydration = true;
|
|
1513
|
+
return renderer;
|
|
1896
1514
|
}
|
|
1897
1515
|
const render = ((...args) => {
|
|
1898
|
-
|
|
1516
|
+
ensureRenderer().render(...args);
|
|
1899
1517
|
});
|
|
1900
1518
|
const hydrate = ((...args) => {
|
|
1901
|
-
|
|
1519
|
+
ensureHydrationRenderer().hydrate(...args);
|
|
1902
1520
|
});
|
|
1903
1521
|
const createApp = ((...args) => {
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
}
|
|
1925
|
-
return proxy;
|
|
1926
|
-
};
|
|
1927
|
-
return app;
|
|
1522
|
+
const app = ensureRenderer().createApp(...args);
|
|
1523
|
+
if (!!(process.env.NODE_ENV !== "production")) {
|
|
1524
|
+
injectNativeTagCheck(app);
|
|
1525
|
+
injectCompilerOptionsCheck(app);
|
|
1526
|
+
}
|
|
1527
|
+
const { mount } = app;
|
|
1528
|
+
app.mount = (containerOrSelector) => {
|
|
1529
|
+
const container = normalizeContainer(containerOrSelector);
|
|
1530
|
+
if (!container) return;
|
|
1531
|
+
const component = app._component;
|
|
1532
|
+
if (!isFunction(component) && !component.render && !component.template) component.template = container.innerHTML;
|
|
1533
|
+
if (container.nodeType === 1) container.textContent = "";
|
|
1534
|
+
const proxy = mount(container, false, resolveRootNamespace(container));
|
|
1535
|
+
if (container instanceof Element) {
|
|
1536
|
+
container.removeAttribute("v-cloak");
|
|
1537
|
+
container.setAttribute("data-v-app", "");
|
|
1538
|
+
}
|
|
1539
|
+
return proxy;
|
|
1540
|
+
};
|
|
1541
|
+
return app;
|
|
1928
1542
|
});
|
|
1929
1543
|
const createSSRApp = ((...args) => {
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
return app;
|
|
1544
|
+
setIsHydratingEnabled(true);
|
|
1545
|
+
const app = ensureHydrationRenderer().createApp(...args);
|
|
1546
|
+
if (!!(process.env.NODE_ENV !== "production")) {
|
|
1547
|
+
injectNativeTagCheck(app);
|
|
1548
|
+
injectCompilerOptionsCheck(app);
|
|
1549
|
+
}
|
|
1550
|
+
const { mount } = app;
|
|
1551
|
+
app.mount = (containerOrSelector) => {
|
|
1552
|
+
const container = normalizeContainer(containerOrSelector);
|
|
1553
|
+
if (container) return mount(container, true, resolveRootNamespace(container));
|
|
1554
|
+
};
|
|
1555
|
+
return app;
|
|
1943
1556
|
});
|
|
1944
1557
|
function resolveRootNamespace(container) {
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
}
|
|
1948
|
-
if (typeof MathMLElement === "function" && container instanceof MathMLElement) {
|
|
1949
|
-
return "mathml";
|
|
1950
|
-
}
|
|
1558
|
+
if (container instanceof SVGElement) return "svg";
|
|
1559
|
+
if (typeof MathMLElement === "function" && container instanceof MathMLElement) return "mathml";
|
|
1951
1560
|
}
|
|
1952
1561
|
function injectNativeTagCheck(app) {
|
|
1953
|
-
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1562
|
+
Object.defineProperty(app.config, "isNativeTag", {
|
|
1563
|
+
value: (tag) => isHTMLTag(tag) || isSVGTag(tag) || isMathMLTag(tag),
|
|
1564
|
+
writable: false
|
|
1565
|
+
});
|
|
1957
1566
|
}
|
|
1958
1567
|
function injectCompilerOptionsCheck(app) {
|
|
1959
|
-
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
|
|
1980
|
-
|
|
1981
|
-
set() {
|
|
1982
|
-
warn(msg);
|
|
1983
|
-
}
|
|
1984
|
-
});
|
|
1985
|
-
}
|
|
1568
|
+
if (isRuntimeOnly()) {
|
|
1569
|
+
const isCustomElement = app.config.isCustomElement;
|
|
1570
|
+
Object.defineProperty(app.config, "isCustomElement", {
|
|
1571
|
+
get() {
|
|
1572
|
+
return isCustomElement;
|
|
1573
|
+
},
|
|
1574
|
+
set() {
|
|
1575
|
+
warn("The `isCustomElement` config option is deprecated. Use `compilerOptions.isCustomElement` instead.");
|
|
1576
|
+
}
|
|
1577
|
+
});
|
|
1578
|
+
const compilerOptions = app.config.compilerOptions;
|
|
1579
|
+
const msg = "The `compilerOptions` config option is only respected when using a build of Vue.js that includes the runtime compiler (aka \"full build\"). Since you are using the runtime-only build, `compilerOptions` must be passed to `@vue/compiler-dom` in the build setup instead.\n- For vue-loader: pass it via vue-loader's `compilerOptions` loader option.\n- For vue-cli: see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader\n- For vite: pass it via @vitejs/plugin-vue options. See https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#example-for-passing-options-to-vuecompiler-sfc";
|
|
1580
|
+
Object.defineProperty(app.config, "compilerOptions", {
|
|
1581
|
+
get() {
|
|
1582
|
+
warn(msg);
|
|
1583
|
+
return compilerOptions;
|
|
1584
|
+
},
|
|
1585
|
+
set() {
|
|
1586
|
+
warn(msg);
|
|
1587
|
+
}
|
|
1588
|
+
});
|
|
1589
|
+
}
|
|
1986
1590
|
}
|
|
1591
|
+
/**
|
|
1592
|
+
* @internal
|
|
1593
|
+
*/
|
|
1987
1594
|
function normalizeContainer(container) {
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
return res;
|
|
1996
|
-
}
|
|
1997
|
-
if (!!(process.env.NODE_ENV !== "production") && window.ShadowRoot && container instanceof window.ShadowRoot && container.mode === "closed") {
|
|
1998
|
-
warn(
|
|
1999
|
-
`mounting on a ShadowRoot with \`{mode: "closed"}\` may lead to unpredictable bugs`
|
|
2000
|
-
);
|
|
2001
|
-
}
|
|
2002
|
-
return container;
|
|
1595
|
+
if (isString(container)) {
|
|
1596
|
+
const res = document.querySelector(container);
|
|
1597
|
+
if (!!(process.env.NODE_ENV !== "production") && !res) warn(`Failed to mount app: mount target selector "${container}" returned null.`);
|
|
1598
|
+
return res;
|
|
1599
|
+
}
|
|
1600
|
+
if (!!(process.env.NODE_ENV !== "production") && window.ShadowRoot && container instanceof window.ShadowRoot && container.mode === "closed") warn(`mounting on a ShadowRoot with \`{mode: "closed"}\` may lead to unpredictable bugs`);
|
|
1601
|
+
return container;
|
|
2003
1602
|
}
|
|
2004
1603
|
let ssrDirectiveInitialized = false;
|
|
1604
|
+
/**
|
|
1605
|
+
* @internal
|
|
1606
|
+
*/
|
|
2005
1607
|
const initDirectivesForSSR = () => {
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
}
|
|
1608
|
+
if (!ssrDirectiveInitialized) {
|
|
1609
|
+
ssrDirectiveInitialized = true;
|
|
1610
|
+
initVModelForSSR();
|
|
1611
|
+
initVShowForSSR();
|
|
1612
|
+
}
|
|
1613
|
+
};
|
|
2012
1614
|
|
|
2013
|
-
|
|
1615
|
+
//#endregion
|
|
1616
|
+
export { Transition, TransitionGroup, TransitionPropsValidators, VueElement, VueElementBase, baseApplyTranslation, baseUseCssVars, callPendingCbs, createApp, createSSRApp, defineCustomElement, defineSSRCustomElement, ensureHydrationRenderer, ensureRenderer, forceReflow, handleMovedChildren, hasCSSTransform, hydrate, initDirectivesForSSR, nodeOps, normalizeContainer, patchProp, patchStyle, render, resolveTransitionProps, setVarsOnNode, shouldSetAsProp, svgNS, unsafeToTrustedHTML, useCssModule, useCssVars, useHost, useShadowRoot, vModelCheckbox, vModelCheckboxInit, vModelCheckboxUpdate, vModelDynamic, getValue as vModelGetValue, vModelRadio, vModelSelect, vModelSelectInit, vModelSetSelected, vModelText, vModelTextInit, vModelTextUpdate, vShow, vShowHidden, vShowOriginalDisplay, withKeys, withModifiers, xlinkNS };
|