@vue/runtime-dom 3.6.0-alpha.2 → 3.6.0-alpha.4
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 +280 -174
- package/dist/runtime-dom.cjs.prod.js +258 -152
- package/dist/runtime-dom.d.ts +709 -670
- package/dist/runtime-dom.esm-browser.js +989 -621
- package/dist/runtime-dom.esm-browser.prod.js +4 -3
- package/dist/runtime-dom.esm-bundler.js +280 -177
- package/dist/runtime-dom.global.js +989 -617
- package/dist/runtime-dom.global.prod.js +4 -3
- package/package.json +4 -4
package/dist/runtime-dom.cjs.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @vue/runtime-dom v3.6.0-alpha.
|
|
2
|
+
* @vue/runtime-dom v3.6.0-alpha.4
|
|
3
3
|
* (c) 2018-present Yuxi (Evan) You and Vue contributors
|
|
4
4
|
* @license MIT
|
|
5
5
|
**/
|
|
@@ -217,11 +217,11 @@ function resolveTransitionProps(rawProps) {
|
|
|
217
217
|
const resolve = () => finishLeave(el, done);
|
|
218
218
|
addTransitionClass(el, leaveFromClass);
|
|
219
219
|
if (!el._enterCancelled) {
|
|
220
|
-
forceReflow();
|
|
220
|
+
forceReflow(el);
|
|
221
221
|
addTransitionClass(el, leaveActiveClass);
|
|
222
222
|
} else {
|
|
223
223
|
addTransitionClass(el, leaveActiveClass);
|
|
224
|
-
forceReflow();
|
|
224
|
+
forceReflow(el);
|
|
225
225
|
}
|
|
226
226
|
nextFrame(() => {
|
|
227
227
|
if (!el._isLeaving) {
|
|
@@ -347,7 +347,7 @@ function getTransitionInfo(el, expectedType) {
|
|
|
347
347
|
type = timeout > 0 ? transitionTimeout > animationTimeout ? TRANSITION : ANIMATION : null;
|
|
348
348
|
propCount = type ? type === TRANSITION ? transitionDurations.length : animationDurations.length : 0;
|
|
349
349
|
}
|
|
350
|
-
const hasTransform = type === TRANSITION && /\b(transform|all)(
|
|
350
|
+
const hasTransform = type === TRANSITION && /\b(?:transform|all)(?:,|$)/.test(
|
|
351
351
|
getStyleProperties(`${TRANSITION}Property`).toString()
|
|
352
352
|
);
|
|
353
353
|
return {
|
|
@@ -367,8 +367,9 @@ function toMs(s) {
|
|
|
367
367
|
if (s === "auto") return 0;
|
|
368
368
|
return Number(s.slice(0, -1).replace(",", ".")) * 1e3;
|
|
369
369
|
}
|
|
370
|
-
function forceReflow() {
|
|
371
|
-
|
|
370
|
+
function forceReflow(el) {
|
|
371
|
+
const targetDocument = el ? el.ownerDocument : document;
|
|
372
|
+
return targetDocument.body.offsetHeight;
|
|
372
373
|
}
|
|
373
374
|
|
|
374
375
|
function patchClass(el, value, isSVG) {
|
|
@@ -388,6 +389,8 @@ function patchClass(el, value, isSVG) {
|
|
|
388
389
|
const vShowOriginalDisplay = Symbol("_vod");
|
|
389
390
|
const vShowHidden = Symbol("_vsh");
|
|
390
391
|
const vShow = {
|
|
392
|
+
// used for prop mismatch check during hydration
|
|
393
|
+
name: "show",
|
|
391
394
|
beforeMount(el, { value }, { transition }) {
|
|
392
395
|
el[vShowOriginalDisplay] = el.style.display === "none" ? "" : el.style.display;
|
|
393
396
|
if (transition && value) {
|
|
@@ -421,9 +424,6 @@ const vShow = {
|
|
|
421
424
|
setDisplay(el, value);
|
|
422
425
|
}
|
|
423
426
|
};
|
|
424
|
-
{
|
|
425
|
-
vShow.name = "show";
|
|
426
|
-
}
|
|
427
427
|
function setDisplay(el, value) {
|
|
428
428
|
el.style.display = value ? el[vShowOriginalDisplay] : "none";
|
|
429
429
|
el[vShowHidden] = !value;
|
|
@@ -441,7 +441,7 @@ function useCssVars(getter) {
|
|
|
441
441
|
return;
|
|
442
442
|
}
|
|
443
443
|
|
|
444
|
-
const displayRE = /(
|
|
444
|
+
const displayRE = /(?:^|;)\s*display\s*:/;
|
|
445
445
|
function patchStyle(el, prev, next) {
|
|
446
446
|
const style = el.style;
|
|
447
447
|
const isCssString = shared.isString(next);
|
|
@@ -746,11 +746,10 @@ function shouldSetAsProp(el, key, value, isSVG) {
|
|
|
746
746
|
}
|
|
747
747
|
|
|
748
748
|
const REMOVAL = {};
|
|
749
|
-
/*! #__NO_SIDE_EFFECTS__ */
|
|
750
749
|
// @__NO_SIDE_EFFECTS__
|
|
751
750
|
function defineCustomElement(options, extraOptions, _createApp) {
|
|
752
|
-
|
|
753
|
-
if (shared.isPlainObject(Comp)) shared.extend(Comp, extraOptions);
|
|
751
|
+
let Comp = runtimeCore.defineComponent(options, extraOptions);
|
|
752
|
+
if (shared.isPlainObject(Comp)) Comp = shared.extend({}, Comp, extraOptions);
|
|
754
753
|
class VueCustomElement extends VueElement {
|
|
755
754
|
constructor(initialProps) {
|
|
756
755
|
super(Comp, initialProps, _createApp);
|
|
@@ -759,18 +758,14 @@ function defineCustomElement(options, extraOptions, _createApp) {
|
|
|
759
758
|
VueCustomElement.def = Comp;
|
|
760
759
|
return VueCustomElement;
|
|
761
760
|
}
|
|
762
|
-
|
|
763
|
-
const defineSSRCustomElement = /* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
|
|
761
|
+
const defineSSRCustomElement = (/* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
|
|
764
762
|
return /* @__PURE__ */ defineCustomElement(options, extraOptions, createSSRApp);
|
|
765
|
-
};
|
|
763
|
+
});
|
|
766
764
|
const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {
|
|
767
765
|
};
|
|
768
|
-
class
|
|
769
|
-
constructor(
|
|
766
|
+
class VueElementBase extends BaseClass {
|
|
767
|
+
constructor(def, props = {}, createAppFn) {
|
|
770
768
|
super();
|
|
771
|
-
this._def = _def;
|
|
772
|
-
this._props = _props;
|
|
773
|
-
this._createApp = _createApp;
|
|
774
769
|
this._isVueCE = true;
|
|
775
770
|
/**
|
|
776
771
|
* @internal
|
|
@@ -780,25 +775,26 @@ class VueElement extends BaseClass {
|
|
|
780
775
|
* @internal
|
|
781
776
|
*/
|
|
782
777
|
this._app = null;
|
|
783
|
-
/**
|
|
784
|
-
* @internal
|
|
785
|
-
*/
|
|
786
|
-
this._nonce = this._def.nonce;
|
|
787
778
|
this._connected = false;
|
|
788
779
|
this._resolved = false;
|
|
789
780
|
this._numberProps = null;
|
|
790
781
|
this._styleChildren = /* @__PURE__ */ new WeakSet();
|
|
782
|
+
this._patching = false;
|
|
783
|
+
this._dirty = false;
|
|
791
784
|
this._ob = null;
|
|
792
|
-
|
|
785
|
+
this._def = def;
|
|
786
|
+
this._props = props;
|
|
787
|
+
this._createApp = createAppFn;
|
|
788
|
+
this._nonce = def.nonce;
|
|
789
|
+
if (this._needsHydration()) {
|
|
793
790
|
this._root = this.shadowRoot;
|
|
794
791
|
} else {
|
|
795
|
-
if (
|
|
796
|
-
|
|
797
|
-
|
|
792
|
+
if (def.shadowRoot !== false) {
|
|
793
|
+
this.attachShadow(
|
|
794
|
+
shared.extend({}, def.shadowRootOptions, {
|
|
795
|
+
mode: "open"
|
|
796
|
+
})
|
|
798
797
|
);
|
|
799
|
-
}
|
|
800
|
-
if (_def.shadowRoot !== false) {
|
|
801
|
-
this.attachShadow({ mode: "open" });
|
|
802
798
|
this._root = this.shadowRoot;
|
|
803
799
|
} else {
|
|
804
800
|
this._root = this;
|
|
@@ -813,14 +809,14 @@ class VueElement extends BaseClass {
|
|
|
813
809
|
this._connected = true;
|
|
814
810
|
let parent = this;
|
|
815
811
|
while (parent = parent && (parent.parentNode || parent.host)) {
|
|
816
|
-
if (parent instanceof
|
|
812
|
+
if (parent instanceof VueElementBase) {
|
|
817
813
|
this._parent = parent;
|
|
818
814
|
break;
|
|
819
815
|
}
|
|
820
816
|
}
|
|
821
817
|
if (!this._instance) {
|
|
822
818
|
if (this._resolved) {
|
|
823
|
-
this.
|
|
819
|
+
this._mountComponent(this._def);
|
|
824
820
|
} else {
|
|
825
821
|
if (parent && parent._pendingResolve) {
|
|
826
822
|
this._pendingResolve = parent._pendingResolve.then(() => {
|
|
@@ -833,8 +829,24 @@ class VueElement extends BaseClass {
|
|
|
833
829
|
}
|
|
834
830
|
}
|
|
835
831
|
}
|
|
832
|
+
disconnectedCallback() {
|
|
833
|
+
this._connected = false;
|
|
834
|
+
runtimeCore.nextTick(() => {
|
|
835
|
+
if (!this._connected) {
|
|
836
|
+
if (this._ob) {
|
|
837
|
+
this._ob.disconnect();
|
|
838
|
+
this._ob = null;
|
|
839
|
+
}
|
|
840
|
+
this._unmount();
|
|
841
|
+
if (this._teleportTargets) {
|
|
842
|
+
this._teleportTargets.clear();
|
|
843
|
+
this._teleportTargets = void 0;
|
|
844
|
+
}
|
|
845
|
+
}
|
|
846
|
+
});
|
|
847
|
+
}
|
|
836
848
|
_setParent(parent = this._parent) {
|
|
837
|
-
if (parent) {
|
|
849
|
+
if (parent && this._instance) {
|
|
838
850
|
this._instance.parent = parent._instance;
|
|
839
851
|
this._inheritParentContext(parent);
|
|
840
852
|
}
|
|
@@ -847,19 +859,10 @@ class VueElement extends BaseClass {
|
|
|
847
859
|
);
|
|
848
860
|
}
|
|
849
861
|
}
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
if (this._ob) {
|
|
855
|
-
this._ob.disconnect();
|
|
856
|
-
this._ob = null;
|
|
857
|
-
}
|
|
858
|
-
this._app && this._app.unmount();
|
|
859
|
-
if (this._instance) this._instance.ce = void 0;
|
|
860
|
-
this._app = this._instance = null;
|
|
861
|
-
}
|
|
862
|
-
});
|
|
862
|
+
_processMutations(mutations) {
|
|
863
|
+
for (const m of mutations) {
|
|
864
|
+
this._setAttr(m.attributeName);
|
|
865
|
+
}
|
|
863
866
|
}
|
|
864
867
|
/**
|
|
865
868
|
* resolve inner component definition (handle possible async component)
|
|
@@ -871,13 +874,9 @@ class VueElement extends BaseClass {
|
|
|
871
874
|
for (let i = 0; i < this.attributes.length; i++) {
|
|
872
875
|
this._setAttr(this.attributes[i].name);
|
|
873
876
|
}
|
|
874
|
-
this._ob = new MutationObserver((
|
|
875
|
-
for (const m of mutations) {
|
|
876
|
-
this._setAttr(m.attributeName);
|
|
877
|
-
}
|
|
878
|
-
});
|
|
877
|
+
this._ob = new MutationObserver(this._processMutations.bind(this));
|
|
879
878
|
this._ob.observe(this, { attributes: true });
|
|
880
|
-
const resolve = (def
|
|
879
|
+
const resolve = (def) => {
|
|
881
880
|
this._resolved = true;
|
|
882
881
|
this._pendingResolve = void 0;
|
|
883
882
|
const { props, styles } = def;
|
|
@@ -902,29 +901,25 @@ class VueElement extends BaseClass {
|
|
|
902
901
|
"Custom element style injection is not supported when using shadowRoot: false"
|
|
903
902
|
);
|
|
904
903
|
}
|
|
905
|
-
this.
|
|
904
|
+
this._mountComponent(def);
|
|
906
905
|
};
|
|
907
906
|
const asyncDef = this._def.__asyncLoader;
|
|
908
907
|
if (asyncDef) {
|
|
908
|
+
const { configureApp } = this._def;
|
|
909
909
|
this._pendingResolve = asyncDef().then((def) => {
|
|
910
|
-
def.configureApp =
|
|
911
|
-
|
|
910
|
+
def.configureApp = configureApp;
|
|
911
|
+
this._def = def;
|
|
912
|
+
resolve(def);
|
|
912
913
|
});
|
|
913
914
|
} else {
|
|
914
915
|
resolve(this._def);
|
|
915
916
|
}
|
|
916
917
|
}
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
this._inheritParentContext();
|
|
923
|
-
if (def.configureApp) {
|
|
924
|
-
def.configureApp(this._app);
|
|
925
|
-
}
|
|
926
|
-
this._app._ceVNode = this._createVNode();
|
|
927
|
-
this._app.mount(this._root);
|
|
918
|
+
_mountComponent(def) {
|
|
919
|
+
this._mount(def);
|
|
920
|
+
this._processExposed();
|
|
921
|
+
}
|
|
922
|
+
_processExposed() {
|
|
928
923
|
const exposed = this._instance && this._instance.exposed;
|
|
929
924
|
if (!exposed) return;
|
|
930
925
|
for (const key in exposed) {
|
|
@@ -938,6 +933,38 @@ class VueElement extends BaseClass {
|
|
|
938
933
|
}
|
|
939
934
|
}
|
|
940
935
|
}
|
|
936
|
+
_processInstance() {
|
|
937
|
+
this._instance.ce = this;
|
|
938
|
+
this._instance.isCE = true;
|
|
939
|
+
{
|
|
940
|
+
this._instance.ceReload = (newStyles) => {
|
|
941
|
+
if (this._styles) {
|
|
942
|
+
this._styles.forEach((s) => this._root.removeChild(s));
|
|
943
|
+
this._styles.length = 0;
|
|
944
|
+
}
|
|
945
|
+
this._applyStyles(newStyles);
|
|
946
|
+
if (!this._instance.vapor) {
|
|
947
|
+
this._instance = null;
|
|
948
|
+
}
|
|
949
|
+
this._update();
|
|
950
|
+
};
|
|
951
|
+
}
|
|
952
|
+
const dispatch = (event, args) => {
|
|
953
|
+
this.dispatchEvent(
|
|
954
|
+
new CustomEvent(
|
|
955
|
+
event,
|
|
956
|
+
shared.isPlainObject(args[0]) ? shared.extend({ detail: args }, args[0]) : { detail: args }
|
|
957
|
+
)
|
|
958
|
+
);
|
|
959
|
+
};
|
|
960
|
+
this._instance.emit = (event, ...args) => {
|
|
961
|
+
dispatch(event, args);
|
|
962
|
+
if (shared.hyphenate(event) !== event) {
|
|
963
|
+
dispatch(shared.hyphenate(event), args);
|
|
964
|
+
}
|
|
965
|
+
};
|
|
966
|
+
this._setParent();
|
|
967
|
+
}
|
|
941
968
|
_resolveProps(def) {
|
|
942
969
|
const { props } = def;
|
|
943
970
|
const declaredPropKeys = shared.isArray(props) ? props : Object.keys(props || {});
|
|
@@ -952,7 +979,7 @@ class VueElement extends BaseClass {
|
|
|
952
979
|
return this._getProp(key);
|
|
953
980
|
},
|
|
954
981
|
set(val) {
|
|
955
|
-
this._setProp(key, val, true,
|
|
982
|
+
this._setProp(key, val, true, !this._patching);
|
|
956
983
|
}
|
|
957
984
|
});
|
|
958
985
|
}
|
|
@@ -978,11 +1005,12 @@ class VueElement extends BaseClass {
|
|
|
978
1005
|
*/
|
|
979
1006
|
_setProp(key, val, shouldReflect = true, shouldUpdate = false) {
|
|
980
1007
|
if (val !== this._props[key]) {
|
|
1008
|
+
this._dirty = true;
|
|
981
1009
|
if (val === REMOVAL) {
|
|
982
1010
|
delete this._props[key];
|
|
983
1011
|
} else {
|
|
984
1012
|
this._props[key] = val;
|
|
985
|
-
if (key === "key" && this._app) {
|
|
1013
|
+
if (key === "key" && this._app && this._app._ceVNode) {
|
|
986
1014
|
this._app._ceVNode.key = val;
|
|
987
1015
|
}
|
|
988
1016
|
}
|
|
@@ -991,7 +1019,10 @@ class VueElement extends BaseClass {
|
|
|
991
1019
|
}
|
|
992
1020
|
if (shouldReflect) {
|
|
993
1021
|
const ob = this._ob;
|
|
994
|
-
|
|
1022
|
+
if (ob) {
|
|
1023
|
+
this._processMutations(ob.takeRecords());
|
|
1024
|
+
ob.disconnect();
|
|
1025
|
+
}
|
|
995
1026
|
if (val === true) {
|
|
996
1027
|
this.setAttribute(shared.hyphenate(key), "");
|
|
997
1028
|
} else if (typeof val === "string" || typeof val === "number") {
|
|
@@ -1003,52 +1034,6 @@ class VueElement extends BaseClass {
|
|
|
1003
1034
|
}
|
|
1004
1035
|
}
|
|
1005
1036
|
}
|
|
1006
|
-
_update() {
|
|
1007
|
-
const vnode = this._createVNode();
|
|
1008
|
-
if (this._app) vnode.appContext = this._app._context;
|
|
1009
|
-
render(vnode, this._root);
|
|
1010
|
-
}
|
|
1011
|
-
_createVNode() {
|
|
1012
|
-
const baseProps = {};
|
|
1013
|
-
if (!this.shadowRoot) {
|
|
1014
|
-
baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
|
|
1015
|
-
}
|
|
1016
|
-
const vnode = runtimeCore.createVNode(this._def, shared.extend(baseProps, this._props));
|
|
1017
|
-
if (!this._instance) {
|
|
1018
|
-
vnode.ce = (instance) => {
|
|
1019
|
-
this._instance = instance;
|
|
1020
|
-
instance.ce = this;
|
|
1021
|
-
instance.isCE = true;
|
|
1022
|
-
{
|
|
1023
|
-
instance.ceReload = (newStyles) => {
|
|
1024
|
-
if (this._styles) {
|
|
1025
|
-
this._styles.forEach((s) => this._root.removeChild(s));
|
|
1026
|
-
this._styles.length = 0;
|
|
1027
|
-
}
|
|
1028
|
-
this._applyStyles(newStyles);
|
|
1029
|
-
this._instance = null;
|
|
1030
|
-
this._update();
|
|
1031
|
-
};
|
|
1032
|
-
}
|
|
1033
|
-
const dispatch = (event, args) => {
|
|
1034
|
-
this.dispatchEvent(
|
|
1035
|
-
new CustomEvent(
|
|
1036
|
-
event,
|
|
1037
|
-
shared.isPlainObject(args[0]) ? shared.extend({ detail: args }, args[0]) : { detail: args }
|
|
1038
|
-
)
|
|
1039
|
-
);
|
|
1040
|
-
};
|
|
1041
|
-
instance.emit = (event, ...args) => {
|
|
1042
|
-
dispatch(event, args);
|
|
1043
|
-
if (shared.hyphenate(event) !== event) {
|
|
1044
|
-
dispatch(shared.hyphenate(event), args);
|
|
1045
|
-
}
|
|
1046
|
-
};
|
|
1047
|
-
this._setParent();
|
|
1048
|
-
};
|
|
1049
|
-
}
|
|
1050
|
-
return vnode;
|
|
1051
|
-
}
|
|
1052
1037
|
_applyStyles(styles, owner) {
|
|
1053
1038
|
if (!styles) return;
|
|
1054
1039
|
if (owner) {
|
|
@@ -1095,13 +1080,15 @@ class VueElement extends BaseClass {
|
|
|
1095
1080
|
* Only called when shadowRoot is false
|
|
1096
1081
|
*/
|
|
1097
1082
|
_renderSlots() {
|
|
1098
|
-
const outlets =
|
|
1083
|
+
const outlets = this._getSlots();
|
|
1099
1084
|
const scopeId = this._instance.type.__scopeId;
|
|
1085
|
+
const slotReplacements = /* @__PURE__ */ new Map();
|
|
1100
1086
|
for (let i = 0; i < outlets.length; i++) {
|
|
1101
1087
|
const o = outlets[i];
|
|
1102
1088
|
const slotName = o.getAttribute("name") || "default";
|
|
1103
1089
|
const content = this._slots[slotName];
|
|
1104
1090
|
const parent = o.parentNode;
|
|
1091
|
+
const replacementNodes = [];
|
|
1105
1092
|
if (content) {
|
|
1106
1093
|
for (const n of content) {
|
|
1107
1094
|
if (scopeId && n.nodeType === 1) {
|
|
@@ -1114,12 +1101,36 @@ class VueElement extends BaseClass {
|
|
|
1114
1101
|
}
|
|
1115
1102
|
}
|
|
1116
1103
|
parent.insertBefore(n, o);
|
|
1104
|
+
replacementNodes.push(n);
|
|
1117
1105
|
}
|
|
1118
1106
|
} else {
|
|
1119
|
-
while (o.firstChild)
|
|
1107
|
+
while (o.firstChild) {
|
|
1108
|
+
const child = o.firstChild;
|
|
1109
|
+
parent.insertBefore(child, o);
|
|
1110
|
+
replacementNodes.push(child);
|
|
1111
|
+
}
|
|
1120
1112
|
}
|
|
1121
1113
|
parent.removeChild(o);
|
|
1114
|
+
slotReplacements.set(o, replacementNodes);
|
|
1115
|
+
}
|
|
1116
|
+
this._updateSlotNodes(slotReplacements);
|
|
1117
|
+
}
|
|
1118
|
+
/**
|
|
1119
|
+
* @internal
|
|
1120
|
+
*/
|
|
1121
|
+
_getSlots() {
|
|
1122
|
+
const roots = [this];
|
|
1123
|
+
if (this._teleportTargets) {
|
|
1124
|
+
roots.push(...this._teleportTargets);
|
|
1125
|
+
}
|
|
1126
|
+
const slots = /* @__PURE__ */ new Set();
|
|
1127
|
+
for (const root of roots) {
|
|
1128
|
+
const found = root.querySelectorAll("slot");
|
|
1129
|
+
for (let i = 0; i < found.length; i++) {
|
|
1130
|
+
slots.add(found[i]);
|
|
1131
|
+
}
|
|
1122
1132
|
}
|
|
1133
|
+
return Array.from(slots);
|
|
1123
1134
|
}
|
|
1124
1135
|
/**
|
|
1125
1136
|
* @internal
|
|
@@ -1127,6 +1138,22 @@ class VueElement extends BaseClass {
|
|
|
1127
1138
|
_injectChildStyle(comp) {
|
|
1128
1139
|
this._applyStyles(comp.styles, comp);
|
|
1129
1140
|
}
|
|
1141
|
+
/**
|
|
1142
|
+
* @internal
|
|
1143
|
+
*/
|
|
1144
|
+
_beginPatch() {
|
|
1145
|
+
this._patching = true;
|
|
1146
|
+
this._dirty = false;
|
|
1147
|
+
}
|
|
1148
|
+
/**
|
|
1149
|
+
* @internal
|
|
1150
|
+
*/
|
|
1151
|
+
_endPatch() {
|
|
1152
|
+
this._patching = false;
|
|
1153
|
+
if (this._dirty && this._instance) {
|
|
1154
|
+
this._update();
|
|
1155
|
+
}
|
|
1156
|
+
}
|
|
1130
1157
|
/**
|
|
1131
1158
|
* @internal
|
|
1132
1159
|
*/
|
|
@@ -1143,13 +1170,76 @@ class VueElement extends BaseClass {
|
|
|
1143
1170
|
}
|
|
1144
1171
|
}
|
|
1145
1172
|
}
|
|
1173
|
+
class VueElement extends VueElementBase {
|
|
1174
|
+
constructor(def, props = {}, createAppFn = createApp) {
|
|
1175
|
+
super(def, props, createAppFn);
|
|
1176
|
+
}
|
|
1177
|
+
_needsHydration() {
|
|
1178
|
+
if (this.shadowRoot && this._createApp !== createApp) {
|
|
1179
|
+
return true;
|
|
1180
|
+
} else {
|
|
1181
|
+
if (this.shadowRoot) {
|
|
1182
|
+
runtimeCore.warn(
|
|
1183
|
+
`Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineSSRCustomElement\`.`
|
|
1184
|
+
);
|
|
1185
|
+
}
|
|
1186
|
+
}
|
|
1187
|
+
return false;
|
|
1188
|
+
}
|
|
1189
|
+
_mount(def) {
|
|
1190
|
+
if (!def.name) {
|
|
1191
|
+
def.name = "VueElement";
|
|
1192
|
+
}
|
|
1193
|
+
this._app = this._createApp(def);
|
|
1194
|
+
this._inheritParentContext();
|
|
1195
|
+
if (def.configureApp) {
|
|
1196
|
+
def.configureApp(this._app);
|
|
1197
|
+
}
|
|
1198
|
+
this._app._ceVNode = this._createVNode();
|
|
1199
|
+
this._app.mount(this._root);
|
|
1200
|
+
}
|
|
1201
|
+
_update() {
|
|
1202
|
+
if (!this._app) return;
|
|
1203
|
+
const vnode = this._createVNode();
|
|
1204
|
+
vnode.appContext = this._app._context;
|
|
1205
|
+
render(vnode, this._root);
|
|
1206
|
+
}
|
|
1207
|
+
_unmount() {
|
|
1208
|
+
if (this._app) {
|
|
1209
|
+
this._app.unmount();
|
|
1210
|
+
}
|
|
1211
|
+
if (this._instance && this._instance.ce) {
|
|
1212
|
+
this._instance.ce = void 0;
|
|
1213
|
+
}
|
|
1214
|
+
this._app = this._instance = null;
|
|
1215
|
+
}
|
|
1216
|
+
/**
|
|
1217
|
+
* Only called when shadowRoot is false
|
|
1218
|
+
*/
|
|
1219
|
+
_updateSlotNodes(replacements) {
|
|
1220
|
+
}
|
|
1221
|
+
_createVNode() {
|
|
1222
|
+
const baseProps = {};
|
|
1223
|
+
if (!this.shadowRoot) {
|
|
1224
|
+
baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
|
|
1225
|
+
}
|
|
1226
|
+
const vnode = runtimeCore.createVNode(this._def, shared.extend(baseProps, this._props));
|
|
1227
|
+
if (!this._instance) {
|
|
1228
|
+
vnode.ce = (instance) => {
|
|
1229
|
+
this._instance = instance;
|
|
1230
|
+
this._processInstance();
|
|
1231
|
+
};
|
|
1232
|
+
}
|
|
1233
|
+
return vnode;
|
|
1234
|
+
}
|
|
1235
|
+
}
|
|
1146
1236
|
function useHost(caller) {
|
|
1147
|
-
const
|
|
1148
|
-
const el =
|
|
1237
|
+
const { hasInstance, value } = runtimeCore.useInstanceOption("ce", true);
|
|
1238
|
+
const el = value;
|
|
1149
1239
|
if (el) {
|
|
1150
1240
|
return el;
|
|
1151
1241
|
} else {
|
|
1152
|
-
if (!
|
|
1242
|
+
if (!hasInstance) {
|
|
1153
1243
|
runtimeCore.warn(
|
|
1154
1244
|
`${caller || "useHost"} called without an active component instance.`
|
|
1155
1245
|
);
|
|
@@ -1168,12 +1258,12 @@ function useShadowRoot() {
|
|
|
1168
1258
|
|
|
1169
1259
|
function useCssModule(name = "$style") {
|
|
1170
1260
|
{
|
|
1171
|
-
const
|
|
1172
|
-
if (!
|
|
1261
|
+
const { hasInstance, value: type } = runtimeCore.useInstanceOption("type", true);
|
|
1262
|
+
if (!hasInstance) {
|
|
1173
1263
|
runtimeCore.warn(`useCssModule must be called inside setup()`);
|
|
1174
1264
|
return shared.EMPTY_OBJ;
|
|
1175
1265
|
}
|
|
1176
|
-
const modules =
|
|
1266
|
+
const modules = type.__cssModules;
|
|
1177
1267
|
if (!modules) {
|
|
1178
1268
|
runtimeCore.warn(`Current instance does not have CSS modules injected.`);
|
|
1179
1269
|
return shared.EMPTY_OBJ;
|
|
@@ -1219,26 +1309,13 @@ const TransitionGroupImpl = /* @__PURE__ */ decorate({
|
|
|
1219
1309
|
prevChildren = [];
|
|
1220
1310
|
return;
|
|
1221
1311
|
}
|
|
1222
|
-
prevChildren.forEach(callPendingCbs);
|
|
1312
|
+
prevChildren.forEach((vnode) => callPendingCbs(vnode.el));
|
|
1223
1313
|
prevChildren.forEach(recordPosition);
|
|
1224
1314
|
const movedChildren = prevChildren.filter(applyTranslation);
|
|
1225
|
-
forceReflow();
|
|
1315
|
+
forceReflow(instance.vnode.el);
|
|
1226
1316
|
movedChildren.forEach((c) => {
|
|
1227
1317
|
const el = c.el;
|
|
1228
|
-
|
|
1229
|
-
addTransitionClass(el, moveClass);
|
|
1230
|
-
style.transform = style.webkitTransform = style.transitionDuration = "";
|
|
1231
|
-
const cb = el[moveCbKey] = (e) => {
|
|
1232
|
-
if (e && e.target !== el) {
|
|
1233
|
-
return;
|
|
1234
|
-
}
|
|
1235
|
-
if (!e || /transform$/.test(e.propertyName)) {
|
|
1236
|
-
el.removeEventListener("transitionend", cb);
|
|
1237
|
-
el[moveCbKey] = null;
|
|
1238
|
-
removeTransitionClass(el, moveClass);
|
|
1239
|
-
}
|
|
1240
|
-
};
|
|
1241
|
-
el.addEventListener("transitionend", cb);
|
|
1318
|
+
handleMovedChildren(el, moveClass);
|
|
1242
1319
|
});
|
|
1243
1320
|
prevChildren = [];
|
|
1244
1321
|
});
|
|
@@ -1261,10 +1338,10 @@ const TransitionGroupImpl = /* @__PURE__ */ decorate({
|
|
|
1261
1338
|
instance
|
|
1262
1339
|
)
|
|
1263
1340
|
);
|
|
1264
|
-
positionMap.set(
|
|
1265
|
-
child,
|
|
1266
|
-
child.el.
|
|
1267
|
-
);
|
|
1341
|
+
positionMap.set(child, {
|
|
1342
|
+
left: child.el.offsetLeft,
|
|
1343
|
+
top: child.el.offsetTop
|
|
1344
|
+
});
|
|
1268
1345
|
}
|
|
1269
1346
|
}
|
|
1270
1347
|
}
|
|
@@ -1285,8 +1362,7 @@ const TransitionGroupImpl = /* @__PURE__ */ decorate({
|
|
|
1285
1362
|
}
|
|
1286
1363
|
});
|
|
1287
1364
|
const TransitionGroup = TransitionGroupImpl;
|
|
1288
|
-
function callPendingCbs(
|
|
1289
|
-
const el = c.el;
|
|
1365
|
+
function callPendingCbs(el) {
|
|
1290
1366
|
if (el[moveCbKey]) {
|
|
1291
1367
|
el[moveCbKey]();
|
|
1292
1368
|
}
|
|
@@ -1295,19 +1371,30 @@ function callPendingCbs(c) {
|
|
|
1295
1371
|
}
|
|
1296
1372
|
}
|
|
1297
1373
|
function recordPosition(c) {
|
|
1298
|
-
newPositionMap.set(c,
|
|
1374
|
+
newPositionMap.set(c, {
|
|
1375
|
+
left: c.el.offsetLeft,
|
|
1376
|
+
top: c.el.offsetTop
|
|
1377
|
+
});
|
|
1299
1378
|
}
|
|
1300
1379
|
function applyTranslation(c) {
|
|
1301
|
-
|
|
1302
|
-
|
|
1380
|
+
if (baseApplyTranslation(
|
|
1381
|
+
positionMap.get(c),
|
|
1382
|
+
newPositionMap.get(c),
|
|
1383
|
+
c.el
|
|
1384
|
+
)) {
|
|
1385
|
+
return c;
|
|
1386
|
+
}
|
|
1387
|
+
}
|
|
1388
|
+
function baseApplyTranslation(oldPos, newPos, el) {
|
|
1303
1389
|
const dx = oldPos.left - newPos.left;
|
|
1304
1390
|
const dy = oldPos.top - newPos.top;
|
|
1305
1391
|
if (dx || dy) {
|
|
1306
|
-
const s =
|
|
1392
|
+
const s = el.style;
|
|
1307
1393
|
s.transform = s.webkitTransform = `translate(${dx}px,${dy}px)`;
|
|
1308
1394
|
s.transitionDuration = "0s";
|
|
1309
|
-
return
|
|
1395
|
+
return true;
|
|
1310
1396
|
}
|
|
1397
|
+
return false;
|
|
1311
1398
|
}
|
|
1312
1399
|
function hasCSSTransform(el, root, moveClass) {
|
|
1313
1400
|
const clone = el.cloneNode();
|
|
@@ -1325,6 +1412,22 @@ function hasCSSTransform(el, root, moveClass) {
|
|
|
1325
1412
|
container.removeChild(clone);
|
|
1326
1413
|
return hasTransform;
|
|
1327
1414
|
}
|
|
1415
|
+
const handleMovedChildren = (el, moveClass) => {
|
|
1416
|
+
const style = el.style;
|
|
1417
|
+
addTransitionClass(el, moveClass);
|
|
1418
|
+
style.transform = style.webkitTransform = style.transitionDuration = "";
|
|
1419
|
+
const cb = el[moveCbKey] = (e) => {
|
|
1420
|
+
if (e && e.target !== el) {
|
|
1421
|
+
return;
|
|
1422
|
+
}
|
|
1423
|
+
if (!e || e.propertyName.endsWith("transform")) {
|
|
1424
|
+
el.removeEventListener("transitionend", cb);
|
|
1425
|
+
el[moveCbKey] = null;
|
|
1426
|
+
removeTransitionClass(el, moveClass);
|
|
1427
|
+
}
|
|
1428
|
+
};
|
|
1429
|
+
el.addEventListener("transitionend", cb);
|
|
1430
|
+
};
|
|
1328
1431
|
|
|
1329
1432
|
const getModelAssigner = (vnode) => {
|
|
1330
1433
|
const fn = vnode.props["onUpdate:modelValue"] || false;
|
|
@@ -1360,21 +1463,21 @@ const vModelText = {
|
|
|
1360
1463
|
vModelTextUpdate(el, oldValue, value, trim, number, lazy);
|
|
1361
1464
|
}
|
|
1362
1465
|
};
|
|
1466
|
+
function castValue(value, trim, number) {
|
|
1467
|
+
if (trim) value = value.trim();
|
|
1468
|
+
if (number) value = shared.looseToNumber(value);
|
|
1469
|
+
return value;
|
|
1470
|
+
}
|
|
1363
1471
|
const vModelTextInit = (el, trim, number, lazy, set) => {
|
|
1364
1472
|
addEventListener(el, lazy ? "change" : "input", (e) => {
|
|
1365
1473
|
if (e.target.composing) return;
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
}
|
|
1370
|
-
if (number || el.type === "number") {
|
|
1371
|
-
domValue = shared.looseToNumber(domValue);
|
|
1372
|
-
}
|
|
1373
|
-
(0, el[assignKey])(domValue);
|
|
1474
|
+
(0, el[assignKey])(
|
|
1475
|
+
castValue(el.value, trim, number || el.type === "number")
|
|
1476
|
+
);
|
|
1374
1477
|
});
|
|
1375
|
-
if (trim) {
|
|
1478
|
+
if (trim || number) {
|
|
1376
1479
|
addEventListener(el, "change", () => {
|
|
1377
|
-
el.value = el.value.
|
|
1480
|
+
el.value = castValue(el.value, trim, number || el.type === "number");
|
|
1378
1481
|
});
|
|
1379
1482
|
}
|
|
1380
1483
|
if (!lazy) {
|
|
@@ -1657,13 +1760,13 @@ const modifierGuards = {
|
|
|
1657
1760
|
const withModifiers = (fn, modifiers) => {
|
|
1658
1761
|
const cache = fn._withMods || (fn._withMods = {});
|
|
1659
1762
|
const cacheKey = modifiers.join(".");
|
|
1660
|
-
return cache[cacheKey] || (cache[cacheKey] = (event, ...args) => {
|
|
1763
|
+
return cache[cacheKey] || (cache[cacheKey] = ((event, ...args) => {
|
|
1661
1764
|
for (let i = 0; i < modifiers.length; i++) {
|
|
1662
1765
|
const guard = modifierGuards[modifiers[i]];
|
|
1663
1766
|
if (guard && guard(event, modifiers)) return;
|
|
1664
1767
|
}
|
|
1665
1768
|
return fn(event, ...args);
|
|
1666
|
-
});
|
|
1769
|
+
}));
|
|
1667
1770
|
};
|
|
1668
1771
|
const keyNames = {
|
|
1669
1772
|
esc: "escape",
|
|
@@ -1677,7 +1780,7 @@ const keyNames = {
|
|
|
1677
1780
|
const withKeys = (fn, modifiers) => {
|
|
1678
1781
|
const cache = fn._withKeys || (fn._withKeys = {});
|
|
1679
1782
|
const cacheKey = modifiers.join(".");
|
|
1680
|
-
return cache[cacheKey] || (cache[cacheKey] = (event) => {
|
|
1783
|
+
return cache[cacheKey] || (cache[cacheKey] = ((event) => {
|
|
1681
1784
|
if (!("key" in event)) {
|
|
1682
1785
|
return;
|
|
1683
1786
|
}
|
|
@@ -1687,7 +1790,7 @@ const withKeys = (fn, modifiers) => {
|
|
|
1687
1790
|
)) {
|
|
1688
1791
|
return fn(event);
|
|
1689
1792
|
}
|
|
1690
|
-
});
|
|
1793
|
+
}));
|
|
1691
1794
|
};
|
|
1692
1795
|
|
|
1693
1796
|
const rendererOptions = /* @__PURE__ */ shared.extend({ patchProp }, nodeOps);
|
|
@@ -1701,13 +1804,13 @@ function ensureHydrationRenderer() {
|
|
|
1701
1804
|
enabledHydration = true;
|
|
1702
1805
|
return renderer;
|
|
1703
1806
|
}
|
|
1704
|
-
const render = (...args) => {
|
|
1807
|
+
const render = ((...args) => {
|
|
1705
1808
|
ensureRenderer().render(...args);
|
|
1706
|
-
};
|
|
1707
|
-
const hydrate = (...args) => {
|
|
1809
|
+
});
|
|
1810
|
+
const hydrate = ((...args) => {
|
|
1708
1811
|
ensureHydrationRenderer().hydrate(...args);
|
|
1709
|
-
};
|
|
1710
|
-
const createApp = (...args) => {
|
|
1812
|
+
});
|
|
1813
|
+
const createApp = ((...args) => {
|
|
1711
1814
|
const app = ensureRenderer().createApp(...args);
|
|
1712
1815
|
{
|
|
1713
1816
|
injectNativeTagCheck(app);
|
|
@@ -1732,8 +1835,8 @@ const createApp = (...args) => {
|
|
|
1732
1835
|
return proxy;
|
|
1733
1836
|
};
|
|
1734
1837
|
return app;
|
|
1735
|
-
};
|
|
1736
|
-
const createSSRApp = (...args) => {
|
|
1838
|
+
});
|
|
1839
|
+
const createSSRApp = ((...args) => {
|
|
1737
1840
|
const app = ensureHydrationRenderer().createApp(...args);
|
|
1738
1841
|
{
|
|
1739
1842
|
injectNativeTagCheck(app);
|
|
@@ -1747,7 +1850,7 @@ const createSSRApp = (...args) => {
|
|
|
1747
1850
|
}
|
|
1748
1851
|
};
|
|
1749
1852
|
return app;
|
|
1750
|
-
};
|
|
1853
|
+
});
|
|
1751
1854
|
function resolveRootNamespace(container) {
|
|
1752
1855
|
if (container instanceof SVGElement) {
|
|
1753
1856
|
return "svg";
|
|
@@ -1820,12 +1923,15 @@ const initDirectivesForSSR = () => {
|
|
|
1820
1923
|
exports.Transition = Transition;
|
|
1821
1924
|
exports.TransitionGroup = TransitionGroup;
|
|
1822
1925
|
exports.VueElement = VueElement;
|
|
1926
|
+
exports.VueElementBase = VueElementBase;
|
|
1823
1927
|
exports.createApp = createApp;
|
|
1824
1928
|
exports.createSSRApp = createSSRApp;
|
|
1825
1929
|
exports.defineCustomElement = defineCustomElement;
|
|
1826
1930
|
exports.defineSSRCustomElement = defineSSRCustomElement;
|
|
1827
1931
|
exports.hydrate = hydrate;
|
|
1828
1932
|
exports.initDirectivesForSSR = initDirectivesForSSR;
|
|
1933
|
+
exports.nodeOps = nodeOps;
|
|
1934
|
+
exports.patchProp = patchProp;
|
|
1829
1935
|
exports.render = render;
|
|
1830
1936
|
exports.useCssModule = useCssModule;
|
|
1831
1937
|
exports.useCssVars = useCssVars;
|