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