@vue/runtime-dom 3.5.0-alpha.5 → 3.5.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/runtime-dom.cjs.js +259 -49
- package/dist/runtime-dom.cjs.prod.js +216 -47
- package/dist/runtime-dom.d.ts +70 -41
- package/dist/runtime-dom.esm-browser.js +471 -176
- package/dist/runtime-dom.esm-browser.prod.js +2 -2
- package/dist/runtime-dom.esm-bundler.js +268 -54
- package/dist/runtime-dom.global.js +463 -172
- package/dist/runtime-dom.global.prod.js +2 -2
- package/package.json +7 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @vue/runtime-dom v3.5.0-
|
|
2
|
+
* @vue/runtime-dom v3.5.0-beta.2
|
|
3
3
|
* (c) 2018-present Yuxi (Evan) You and Vue contributors
|
|
4
4
|
* @license MIT
|
|
5
5
|
**/
|
|
@@ -10,6 +10,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
10
10
|
var runtimeCore = require('@vue/runtime-core');
|
|
11
11
|
var shared = require('@vue/shared');
|
|
12
12
|
|
|
13
|
+
let policy = void 0;
|
|
14
|
+
const tt = typeof window !== "undefined" && window.trustedTypes;
|
|
15
|
+
if (tt) {
|
|
16
|
+
try {
|
|
17
|
+
policy = /* @__PURE__ */ tt.createPolicy("vue", {
|
|
18
|
+
createHTML: (val) => val
|
|
19
|
+
});
|
|
20
|
+
} catch (e) {
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
const unsafeToTrustedHTML = policy ? (val) => policy.createHTML(val) : (val) => val;
|
|
13
24
|
const svgNS = "http://www.w3.org/2000/svg";
|
|
14
25
|
const mathmlNS = "http://www.w3.org/1998/Math/MathML";
|
|
15
26
|
const doc = typeof document !== "undefined" ? document : null;
|
|
@@ -57,7 +68,9 @@ const nodeOps = {
|
|
|
57
68
|
if (start === end || !(start = start.nextSibling)) break;
|
|
58
69
|
}
|
|
59
70
|
} else {
|
|
60
|
-
templateContainer.innerHTML =
|
|
71
|
+
templateContainer.innerHTML = unsafeToTrustedHTML(
|
|
72
|
+
namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content
|
|
73
|
+
);
|
|
61
74
|
const template = templateContainer.content;
|
|
62
75
|
if (namespace === "svg" || namespace === "mathml") {
|
|
63
76
|
const wrapper = template.firstChild;
|
|
@@ -694,16 +707,24 @@ function shouldSetAsProp(el, key, value, isSVG) {
|
|
|
694
707
|
if (isNativeOn(key) && shared.isString(value)) {
|
|
695
708
|
return false;
|
|
696
709
|
}
|
|
697
|
-
|
|
710
|
+
if (key in el) {
|
|
711
|
+
return true;
|
|
712
|
+
}
|
|
713
|
+
if (el._isVueCE && (/[A-Z]/.test(key) || !shared.isString(value))) {
|
|
714
|
+
return true;
|
|
715
|
+
}
|
|
716
|
+
return false;
|
|
698
717
|
}
|
|
699
718
|
|
|
719
|
+
const REMOVAL = {};
|
|
700
720
|
/*! #__NO_SIDE_EFFECTS__ */
|
|
701
721
|
// @__NO_SIDE_EFFECTS__
|
|
702
|
-
function defineCustomElement(options, extraOptions,
|
|
722
|
+
function defineCustomElement(options, extraOptions, _createApp) {
|
|
703
723
|
const Comp = runtimeCore.defineComponent(options, extraOptions);
|
|
724
|
+
if (shared.isPlainObject(Comp)) shared.extend(Comp, extraOptions);
|
|
704
725
|
class VueCustomElement extends VueElement {
|
|
705
726
|
constructor(initialProps) {
|
|
706
|
-
super(Comp, initialProps,
|
|
727
|
+
super(Comp, initialProps, _createApp);
|
|
707
728
|
}
|
|
708
729
|
}
|
|
709
730
|
VueCustomElement.def = Comp;
|
|
@@ -711,42 +732,82 @@ function defineCustomElement(options, extraOptions, hydrate2) {
|
|
|
711
732
|
}
|
|
712
733
|
/*! #__NO_SIDE_EFFECTS__ */
|
|
713
734
|
const defineSSRCustomElement = /* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
|
|
714
|
-
return /* @__PURE__ */ defineCustomElement(options, extraOptions,
|
|
735
|
+
return /* @__PURE__ */ defineCustomElement(options, extraOptions, createSSRApp);
|
|
715
736
|
};
|
|
716
737
|
const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {
|
|
717
738
|
};
|
|
718
739
|
class VueElement extends BaseClass {
|
|
719
|
-
constructor(_def, _props = {},
|
|
740
|
+
constructor(_def, _props = {}, _createApp = createApp) {
|
|
720
741
|
super();
|
|
721
742
|
this._def = _def;
|
|
722
743
|
this._props = _props;
|
|
744
|
+
this._createApp = _createApp;
|
|
745
|
+
this._isVueCE = true;
|
|
723
746
|
/**
|
|
724
747
|
* @internal
|
|
725
748
|
*/
|
|
726
749
|
this._instance = null;
|
|
750
|
+
/**
|
|
751
|
+
* @internal
|
|
752
|
+
*/
|
|
753
|
+
this._app = null;
|
|
754
|
+
/**
|
|
755
|
+
* @internal
|
|
756
|
+
*/
|
|
757
|
+
this._nonce = this._def.nonce;
|
|
727
758
|
this._connected = false;
|
|
728
759
|
this._resolved = false;
|
|
729
760
|
this._numberProps = null;
|
|
761
|
+
this._styleChildren = /* @__PURE__ */ new WeakSet();
|
|
730
762
|
this._ob = null;
|
|
731
|
-
if (this.shadowRoot &&
|
|
732
|
-
|
|
763
|
+
if (this.shadowRoot && _createApp !== createApp) {
|
|
764
|
+
this._root = this.shadowRoot;
|
|
733
765
|
} else {
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
this.
|
|
766
|
+
if (_def.shadowRoot !== false) {
|
|
767
|
+
this.attachShadow({ mode: "open" });
|
|
768
|
+
this._root = this.shadowRoot;
|
|
769
|
+
} else {
|
|
770
|
+
this._root = this;
|
|
737
771
|
}
|
|
738
772
|
}
|
|
773
|
+
if (!this._def.__asyncLoader) {
|
|
774
|
+
this._resolveProps(this._def);
|
|
775
|
+
}
|
|
739
776
|
}
|
|
740
777
|
connectedCallback() {
|
|
778
|
+
if (!this.shadowRoot) {
|
|
779
|
+
this._parseSlots();
|
|
780
|
+
}
|
|
741
781
|
this._connected = true;
|
|
782
|
+
let parent = this;
|
|
783
|
+
while (parent = parent && (parent.parentNode || parent.host)) {
|
|
784
|
+
if (parent instanceof VueElement) {
|
|
785
|
+
this._parent = parent;
|
|
786
|
+
break;
|
|
787
|
+
}
|
|
788
|
+
}
|
|
742
789
|
if (!this._instance) {
|
|
743
790
|
if (this._resolved) {
|
|
791
|
+
this._setParent();
|
|
744
792
|
this._update();
|
|
745
793
|
} else {
|
|
746
|
-
|
|
794
|
+
if (parent && parent._pendingResolve) {
|
|
795
|
+
this._pendingResolve = parent._pendingResolve.then(() => {
|
|
796
|
+
this._pendingResolve = void 0;
|
|
797
|
+
this._resolveDef();
|
|
798
|
+
});
|
|
799
|
+
} else {
|
|
800
|
+
this._resolveDef();
|
|
801
|
+
}
|
|
747
802
|
}
|
|
748
803
|
}
|
|
749
804
|
}
|
|
805
|
+
_setParent(parent = this._parent) {
|
|
806
|
+
if (parent) {
|
|
807
|
+
this._instance.parent = parent._instance;
|
|
808
|
+
this._instance.provides = parent._instance.provides;
|
|
809
|
+
}
|
|
810
|
+
}
|
|
750
811
|
disconnectedCallback() {
|
|
751
812
|
this._connected = false;
|
|
752
813
|
runtimeCore.nextTick(() => {
|
|
@@ -755,8 +816,9 @@ class VueElement extends BaseClass {
|
|
|
755
816
|
this._ob.disconnect();
|
|
756
817
|
this._ob = null;
|
|
757
818
|
}
|
|
758
|
-
|
|
759
|
-
this._instance =
|
|
819
|
+
this._app && this._app.unmount();
|
|
820
|
+
this._instance.ce = void 0;
|
|
821
|
+
this._app = this._instance = null;
|
|
760
822
|
}
|
|
761
823
|
});
|
|
762
824
|
}
|
|
@@ -764,7 +826,9 @@ class VueElement extends BaseClass {
|
|
|
764
826
|
* resolve inner component definition (handle possible async component)
|
|
765
827
|
*/
|
|
766
828
|
_resolveDef() {
|
|
767
|
-
this.
|
|
829
|
+
if (this._pendingResolve) {
|
|
830
|
+
return;
|
|
831
|
+
}
|
|
768
832
|
for (let i = 0; i < this.attributes.length; i++) {
|
|
769
833
|
this._setAttr(this.attributes[i].name);
|
|
770
834
|
}
|
|
@@ -775,6 +839,8 @@ class VueElement extends BaseClass {
|
|
|
775
839
|
});
|
|
776
840
|
this._ob.observe(this, { attributes: true });
|
|
777
841
|
const resolve = (def, isAsync = false) => {
|
|
842
|
+
this._resolved = true;
|
|
843
|
+
this._pendingResolve = void 0;
|
|
778
844
|
const { props, styles } = def;
|
|
779
845
|
let numberProps;
|
|
780
846
|
if (props && !shared.isArray(props)) {
|
|
@@ -792,22 +858,44 @@ class VueElement extends BaseClass {
|
|
|
792
858
|
if (isAsync) {
|
|
793
859
|
this._resolveProps(def);
|
|
794
860
|
}
|
|
795
|
-
this.
|
|
796
|
-
|
|
861
|
+
if (this.shadowRoot) {
|
|
862
|
+
this._applyStyles(styles);
|
|
863
|
+
}
|
|
864
|
+
this._mount(def);
|
|
797
865
|
};
|
|
798
866
|
const asyncDef = this._def.__asyncLoader;
|
|
799
867
|
if (asyncDef) {
|
|
800
|
-
asyncDef().then(
|
|
868
|
+
this._pendingResolve = asyncDef().then(
|
|
869
|
+
(def) => resolve(this._def = def, true)
|
|
870
|
+
);
|
|
801
871
|
} else {
|
|
802
872
|
resolve(this._def);
|
|
803
873
|
}
|
|
804
874
|
}
|
|
875
|
+
_mount(def) {
|
|
876
|
+
this._app = this._createApp(def);
|
|
877
|
+
if (def.configureApp) {
|
|
878
|
+
def.configureApp(this._app);
|
|
879
|
+
}
|
|
880
|
+
this._app._ceVNode = this._createVNode();
|
|
881
|
+
this._app.mount(this._root);
|
|
882
|
+
const exposed = this._instance && this._instance.exposed;
|
|
883
|
+
if (!exposed) return;
|
|
884
|
+
for (const key in exposed) {
|
|
885
|
+
if (!shared.hasOwn(this, key)) {
|
|
886
|
+
Object.defineProperty(this, key, {
|
|
887
|
+
// unwrap ref to be consistent with public instance behavior
|
|
888
|
+
get: () => runtimeCore.unref(exposed[key])
|
|
889
|
+
});
|
|
890
|
+
}
|
|
891
|
+
}
|
|
892
|
+
}
|
|
805
893
|
_resolveProps(def) {
|
|
806
894
|
const { props } = def;
|
|
807
895
|
const declaredPropKeys = shared.isArray(props) ? props : Object.keys(props || {});
|
|
808
896
|
for (const key of Object.keys(this)) {
|
|
809
897
|
if (key[0] !== "_" && declaredPropKeys.includes(key)) {
|
|
810
|
-
this._setProp(key, this[key]
|
|
898
|
+
this._setProp(key, this[key]);
|
|
811
899
|
}
|
|
812
900
|
}
|
|
813
901
|
for (const key of declaredPropKeys.map(shared.camelize)) {
|
|
@@ -816,18 +904,20 @@ class VueElement extends BaseClass {
|
|
|
816
904
|
return this._getProp(key);
|
|
817
905
|
},
|
|
818
906
|
set(val) {
|
|
819
|
-
this._setProp(key, val);
|
|
907
|
+
this._setProp(key, val, true, true);
|
|
820
908
|
}
|
|
821
909
|
});
|
|
822
910
|
}
|
|
823
911
|
}
|
|
824
912
|
_setAttr(key) {
|
|
825
|
-
|
|
913
|
+
if (key.startsWith("data-v-")) return;
|
|
914
|
+
const has = this.hasAttribute(key);
|
|
915
|
+
let value = has ? this.getAttribute(key) : REMOVAL;
|
|
826
916
|
const camelKey = shared.camelize(key);
|
|
827
|
-
if (this._numberProps && this._numberProps[camelKey]) {
|
|
917
|
+
if (has && this._numberProps && this._numberProps[camelKey]) {
|
|
828
918
|
value = shared.toNumber(value);
|
|
829
919
|
}
|
|
830
|
-
this._setProp(camelKey, value, false);
|
|
920
|
+
this._setProp(camelKey, value, false, true);
|
|
831
921
|
}
|
|
832
922
|
/**
|
|
833
923
|
* @internal
|
|
@@ -838,9 +928,13 @@ class VueElement extends BaseClass {
|
|
|
838
928
|
/**
|
|
839
929
|
* @internal
|
|
840
930
|
*/
|
|
841
|
-
_setProp(key, val, shouldReflect = true, shouldUpdate =
|
|
931
|
+
_setProp(key, val, shouldReflect = true, shouldUpdate = false) {
|
|
842
932
|
if (val !== this._props[key]) {
|
|
843
|
-
|
|
933
|
+
if (val === REMOVAL) {
|
|
934
|
+
delete this._props[key];
|
|
935
|
+
} else {
|
|
936
|
+
this._props[key] = val;
|
|
937
|
+
}
|
|
844
938
|
if (shouldUpdate && this._instance) {
|
|
845
939
|
this._update();
|
|
846
940
|
}
|
|
@@ -856,19 +950,25 @@ class VueElement extends BaseClass {
|
|
|
856
950
|
}
|
|
857
951
|
}
|
|
858
952
|
_update() {
|
|
859
|
-
render(this._createVNode(), this.
|
|
953
|
+
render(this._createVNode(), this._root);
|
|
860
954
|
}
|
|
861
955
|
_createVNode() {
|
|
862
|
-
const
|
|
956
|
+
const baseProps = {};
|
|
957
|
+
if (!this.shadowRoot) {
|
|
958
|
+
baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
|
|
959
|
+
}
|
|
960
|
+
const vnode = runtimeCore.createVNode(this._def, shared.extend(baseProps, this._props));
|
|
863
961
|
if (!this._instance) {
|
|
864
962
|
vnode.ce = (instance) => {
|
|
865
963
|
this._instance = instance;
|
|
964
|
+
instance.ce = this;
|
|
866
965
|
instance.isCE = true;
|
|
867
966
|
const dispatch = (event, args) => {
|
|
868
967
|
this.dispatchEvent(
|
|
869
|
-
new CustomEvent(
|
|
870
|
-
|
|
871
|
-
|
|
968
|
+
new CustomEvent(
|
|
969
|
+
event,
|
|
970
|
+
shared.isPlainObject(args[0]) ? shared.extend({ detail: args }, args[0]) : { detail: args }
|
|
971
|
+
)
|
|
872
972
|
);
|
|
873
973
|
};
|
|
874
974
|
instance.emit = (event, ...args) => {
|
|
@@ -877,27 +977,92 @@ class VueElement extends BaseClass {
|
|
|
877
977
|
dispatch(shared.hyphenate(event), args);
|
|
878
978
|
}
|
|
879
979
|
};
|
|
880
|
-
|
|
881
|
-
while (parent = parent && (parent.parentNode || parent.host)) {
|
|
882
|
-
if (parent instanceof VueElement) {
|
|
883
|
-
instance.parent = parent._instance;
|
|
884
|
-
instance.provides = parent._instance.provides;
|
|
885
|
-
break;
|
|
886
|
-
}
|
|
887
|
-
}
|
|
980
|
+
this._setParent();
|
|
888
981
|
};
|
|
889
982
|
}
|
|
890
983
|
return vnode;
|
|
891
984
|
}
|
|
892
|
-
_applyStyles(styles) {
|
|
893
|
-
if (styles)
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
985
|
+
_applyStyles(styles, owner) {
|
|
986
|
+
if (!styles) return;
|
|
987
|
+
if (owner) {
|
|
988
|
+
if (owner === this._def || this._styleChildren.has(owner)) {
|
|
989
|
+
return;
|
|
990
|
+
}
|
|
991
|
+
this._styleChildren.add(owner);
|
|
992
|
+
}
|
|
993
|
+
const nonce = this._nonce;
|
|
994
|
+
for (let i = styles.length - 1; i >= 0; i--) {
|
|
995
|
+
const s = document.createElement("style");
|
|
996
|
+
if (nonce) s.setAttribute("nonce", nonce);
|
|
997
|
+
s.textContent = styles[i];
|
|
998
|
+
this.shadowRoot.prepend(s);
|
|
899
999
|
}
|
|
900
1000
|
}
|
|
1001
|
+
/**
|
|
1002
|
+
* Only called when shaddowRoot is false
|
|
1003
|
+
*/
|
|
1004
|
+
_parseSlots() {
|
|
1005
|
+
const slots = this._slots = {};
|
|
1006
|
+
let n;
|
|
1007
|
+
while (n = this.firstChild) {
|
|
1008
|
+
const slotName = n.nodeType === 1 && n.getAttribute("slot") || "default";
|
|
1009
|
+
(slots[slotName] || (slots[slotName] = [])).push(n);
|
|
1010
|
+
this.removeChild(n);
|
|
1011
|
+
}
|
|
1012
|
+
}
|
|
1013
|
+
/**
|
|
1014
|
+
* Only called when shaddowRoot is false
|
|
1015
|
+
*/
|
|
1016
|
+
_renderSlots() {
|
|
1017
|
+
const outlets = this.querySelectorAll("slot");
|
|
1018
|
+
const scopeId = this._instance.type.__scopeId;
|
|
1019
|
+
for (let i = 0; i < outlets.length; i++) {
|
|
1020
|
+
const o = outlets[i];
|
|
1021
|
+
const slotName = o.getAttribute("name") || "default";
|
|
1022
|
+
const content = this._slots[slotName];
|
|
1023
|
+
const parent = o.parentNode;
|
|
1024
|
+
if (content) {
|
|
1025
|
+
for (const n of content) {
|
|
1026
|
+
if (scopeId && n.nodeType === 1) {
|
|
1027
|
+
const id = scopeId + "-s";
|
|
1028
|
+
const walker = document.createTreeWalker(n, 1);
|
|
1029
|
+
n.setAttribute(id, "");
|
|
1030
|
+
let child;
|
|
1031
|
+
while (child = walker.nextNode()) {
|
|
1032
|
+
child.setAttribute(id, "");
|
|
1033
|
+
}
|
|
1034
|
+
}
|
|
1035
|
+
parent.insertBefore(n, o);
|
|
1036
|
+
}
|
|
1037
|
+
} else {
|
|
1038
|
+
while (o.firstChild) parent.insertBefore(o.firstChild, o);
|
|
1039
|
+
}
|
|
1040
|
+
parent.removeChild(o);
|
|
1041
|
+
}
|
|
1042
|
+
}
|
|
1043
|
+
/**
|
|
1044
|
+
* @internal
|
|
1045
|
+
*/
|
|
1046
|
+
_injectChildStyle(comp) {
|
|
1047
|
+
this._applyStyles(comp.styles, comp);
|
|
1048
|
+
}
|
|
1049
|
+
/**
|
|
1050
|
+
* @internal
|
|
1051
|
+
*/
|
|
1052
|
+
_removeChildStyle(comp) {
|
|
1053
|
+
}
|
|
1054
|
+
}
|
|
1055
|
+
function useHost(caller) {
|
|
1056
|
+
const instance = runtimeCore.getCurrentInstance();
|
|
1057
|
+
const el = instance && instance.ce;
|
|
1058
|
+
if (el) {
|
|
1059
|
+
return el;
|
|
1060
|
+
}
|
|
1061
|
+
return null;
|
|
1062
|
+
}
|
|
1063
|
+
function useShadowRoot() {
|
|
1064
|
+
const el = useHost();
|
|
1065
|
+
return el && el.shadowRoot;
|
|
901
1066
|
}
|
|
902
1067
|
|
|
903
1068
|
function useCssModule(name = "$style") {
|
|
@@ -1400,7 +1565,9 @@ const createApp = (...args) => {
|
|
|
1400
1565
|
if (!shared.isFunction(component) && !component.render && !component.template) {
|
|
1401
1566
|
component.template = container.innerHTML;
|
|
1402
1567
|
}
|
|
1403
|
-
container.
|
|
1568
|
+
if (container.nodeType === 1) {
|
|
1569
|
+
container.textContent = "";
|
|
1570
|
+
}
|
|
1404
1571
|
const proxy = mount(container, false, resolveRootNamespace(container));
|
|
1405
1572
|
if (container instanceof Element) {
|
|
1406
1573
|
container.removeAttribute("v-cloak");
|
|
@@ -1457,6 +1624,8 @@ exports.initDirectivesForSSR = initDirectivesForSSR;
|
|
|
1457
1624
|
exports.render = render;
|
|
1458
1625
|
exports.useCssModule = useCssModule;
|
|
1459
1626
|
exports.useCssVars = useCssVars;
|
|
1627
|
+
exports.useHost = useHost;
|
|
1628
|
+
exports.useShadowRoot = useShadowRoot;
|
|
1460
1629
|
exports.vModelCheckbox = vModelCheckbox;
|
|
1461
1630
|
exports.vModelDynamic = vModelDynamic;
|
|
1462
1631
|
exports.vModelRadio = vModelRadio;
|
package/dist/runtime-dom.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BaseTransitionProps, FunctionalComponent, ObjectDirective, Directive, SetupContext, RenderFunction, ComponentOptions, ComponentObjectPropsOptions, EmitsOptions, ComputedOptions, MethodOptions, ComponentOptionsMixin, ComponentInjectOptions, SlotsType, Component, ComponentProvideOptions, ExtractPropTypes, EmitsToProps, ComponentOptionsBase, CreateComponentPublicInstanceWithMixins, DefineComponent,
|
|
1
|
+
import { BaseTransitionProps, FunctionalComponent, ObjectDirective, Directive, App, SetupContext, RenderFunction, ComponentOptions, ComponentObjectPropsOptions, EmitsOptions, ComputedOptions, MethodOptions, ComponentOptionsMixin, ComponentInjectOptions, SlotsType, Component, ComponentProvideOptions, ExtractPropTypes, EmitsToProps, ComponentOptionsBase, CreateComponentPublicInstanceWithMixins, DefineComponent, ComponentCustomElementInterface, CreateAppFunction, ConcreteComponent, VNodeRef, RootRenderFunction, RootHydrateFunction } from '@vue/runtime-core';
|
|
2
2
|
export * from '@vue/runtime-core';
|
|
3
3
|
import * as CSS from 'csstype';
|
|
4
4
|
|
|
@@ -29,8 +29,10 @@ export type TransitionGroupProps = Omit<TransitionProps, 'mode'> & {
|
|
|
29
29
|
tag?: string;
|
|
30
30
|
moveClass?: string;
|
|
31
31
|
};
|
|
32
|
-
export declare const TransitionGroup:
|
|
33
|
-
|
|
32
|
+
export declare const TransitionGroup: {
|
|
33
|
+
new (): {
|
|
34
|
+
$props: TransitionGroupProps;
|
|
35
|
+
};
|
|
34
36
|
};
|
|
35
37
|
|
|
36
38
|
declare const vShowOriginalDisplay: unique symbol;
|
|
@@ -47,20 +49,7 @@ declare const systemModifiers: readonly ["ctrl", "shift", "alt", "meta"];
|
|
|
47
49
|
type SystemModifiers = (typeof systemModifiers)[number];
|
|
48
50
|
type CompatModifiers = keyof typeof keyNames;
|
|
49
51
|
type VOnModifiers = SystemModifiers | ModifierGuards | CompatModifiers;
|
|
50
|
-
|
|
51
|
-
stop: (e: Event) => void;
|
|
52
|
-
prevent: (e: Event) => void;
|
|
53
|
-
self: (e: Event) => boolean;
|
|
54
|
-
ctrl: (e: Event) => boolean;
|
|
55
|
-
shift: (e: Event) => boolean;
|
|
56
|
-
alt: (e: Event) => boolean;
|
|
57
|
-
meta: (e: Event) => boolean;
|
|
58
|
-
left: (e: Event) => boolean;
|
|
59
|
-
middle: (e: Event) => boolean;
|
|
60
|
-
right: (e: Event) => boolean;
|
|
61
|
-
exact: (e: Event, modifiers: string[]) => boolean;
|
|
62
|
-
};
|
|
63
|
-
type ModifierGuards = keyof typeof modifierGuards;
|
|
52
|
+
type ModifierGuards = 'shift' | 'ctrl' | 'alt' | 'meta' | 'left' | 'right' | 'stop' | 'prevent' | 'self' | 'middle' | 'exact';
|
|
64
53
|
/**
|
|
65
54
|
* @private
|
|
66
55
|
*/
|
|
@@ -69,15 +58,7 @@ export declare const withModifiers: <T extends (event: Event, ...args: unknown[]
|
|
|
69
58
|
[key: string]: T;
|
|
70
59
|
};
|
|
71
60
|
}, modifiers: VOnModifiers[]) => T;
|
|
72
|
-
declare const keyNames:
|
|
73
|
-
esc: string;
|
|
74
|
-
space: string;
|
|
75
|
-
up: string;
|
|
76
|
-
left: string;
|
|
77
|
-
right: string;
|
|
78
|
-
down: string;
|
|
79
|
-
delete: string;
|
|
80
|
-
};
|
|
61
|
+
declare const keyNames: Record<'esc' | 'space' | 'up' | 'left' | 'right' | 'down' | 'delete', string>;
|
|
81
62
|
/**
|
|
82
63
|
* @private
|
|
83
64
|
*/
|
|
@@ -104,49 +85,88 @@ type VModelDirective = typeof vModelText | typeof vModelCheckbox | typeof vModel
|
|
|
104
85
|
export type VueElementConstructor<P = {}> = {
|
|
105
86
|
new (initialProps?: Record<string, any>): VueElement & P;
|
|
106
87
|
};
|
|
107
|
-
export
|
|
88
|
+
export interface CustomElementOptions {
|
|
89
|
+
styles?: string[];
|
|
90
|
+
shadowRoot?: boolean;
|
|
91
|
+
nonce?: string;
|
|
92
|
+
configureApp?: (app: App) => void;
|
|
93
|
+
}
|
|
94
|
+
export declare function defineCustomElement<Props, RawBindings = object>(setup: (props: Props, ctx: SetupContext) => RawBindings | RenderFunction, options?: Pick<ComponentOptions, 'name' | 'inheritAttrs' | 'emits'> & CustomElementOptions & {
|
|
108
95
|
props?: (keyof Props)[];
|
|
109
96
|
}): VueElementConstructor<Props>;
|
|
110
|
-
export declare function defineCustomElement<Props, RawBindings = object>(setup: (props: Props, ctx: SetupContext) => RawBindings | RenderFunction, options?: Pick<ComponentOptions, 'name' | 'inheritAttrs' | 'emits'> & {
|
|
97
|
+
export declare function defineCustomElement<Props, RawBindings = object>(setup: (props: Props, ctx: SetupContext) => RawBindings | RenderFunction, options?: Pick<ComponentOptions, 'name' | 'inheritAttrs' | 'emits'> & CustomElementOptions & {
|
|
111
98
|
props?: ComponentObjectPropsOptions<Props>;
|
|
112
99
|
}): VueElementConstructor<Props>;
|
|
113
100
|
export declare function defineCustomElement<RuntimePropsOptions extends ComponentObjectPropsOptions = ComponentObjectPropsOptions, PropsKeys extends string = string, RuntimeEmitsOptions extends EmitsOptions = {}, EmitsKeys extends string = string, Data = {}, SetupBindings = {}, Computed extends ComputedOptions = {}, Methods extends MethodOptions = {}, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, InjectOptions extends ComponentInjectOptions = {}, InjectKeys extends string = string, Slots extends SlotsType = {}, LocalComponents extends Record<string, Component> = {}, Directives extends Record<string, Directive> = {}, Exposed extends string = string, Provide extends ComponentProvideOptions = ComponentProvideOptions, InferredProps = string extends PropsKeys ? ComponentObjectPropsOptions extends RuntimePropsOptions ? {} : ExtractPropTypes<RuntimePropsOptions> : {
|
|
114
101
|
[key in PropsKeys]?: any;
|
|
115
|
-
}, ResolvedProps = InferredProps & EmitsToProps<RuntimeEmitsOptions>>(options: {
|
|
102
|
+
}, ResolvedProps = InferredProps & EmitsToProps<RuntimeEmitsOptions>>(options: CustomElementOptions & {
|
|
116
103
|
props?: (RuntimePropsOptions & ThisType<void>) | PropsKeys[];
|
|
117
104
|
} & ComponentOptionsBase<ResolvedProps, SetupBindings, Data, Computed, Methods, Mixin, Extends, RuntimeEmitsOptions, EmitsKeys, {}, // Defaults
|
|
118
|
-
InjectOptions, InjectKeys, Slots, LocalComponents, Directives, Exposed, Provide> & ThisType<CreateComponentPublicInstanceWithMixins<Readonly<ResolvedProps>, SetupBindings, Data, Computed, Methods, Mixin, Extends, RuntimeEmitsOptions, EmitsKeys, {}, false, InjectOptions, Slots, LocalComponents, Directives, Exposed
|
|
119
|
-
export declare function defineCustomElement<
|
|
105
|
+
InjectOptions, InjectKeys, Slots, LocalComponents, Directives, Exposed, Provide> & ThisType<CreateComponentPublicInstanceWithMixins<Readonly<ResolvedProps>, SetupBindings, Data, Computed, Methods, Mixin, Extends, RuntimeEmitsOptions, EmitsKeys, {}, false, InjectOptions, Slots, LocalComponents, Directives, Exposed>>, extraOptions?: CustomElementOptions): VueElementConstructor<ResolvedProps>;
|
|
106
|
+
export declare function defineCustomElement<T extends DefineComponent<any, any, any, any>>(options: T, extraOptions?: CustomElementOptions): VueElementConstructor<T extends DefineComponent<infer P, any, any, any> ? ExtractPropTypes<P> : unknown>;
|
|
120
107
|
/*! #__NO_SIDE_EFFECTS__ */
|
|
121
108
|
export declare const defineSSRCustomElement: typeof defineCustomElement;
|
|
122
|
-
declare const BaseClass:
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
export declare class VueElement extends BaseClass {
|
|
109
|
+
declare const BaseClass: typeof HTMLElement;
|
|
110
|
+
type InnerComponentDef = ConcreteComponent & CustomElementOptions;
|
|
111
|
+
export declare class VueElement extends BaseClass implements ComponentCustomElementInterface {
|
|
112
|
+
/**
|
|
113
|
+
* Component def - note this may be an AsyncWrapper, and this._def will
|
|
114
|
+
* be overwritten by the inner component when resolved.
|
|
115
|
+
*/
|
|
130
116
|
private _def;
|
|
131
117
|
private _props;
|
|
118
|
+
private _createApp;
|
|
119
|
+
_isVueCE: boolean;
|
|
132
120
|
private _connected;
|
|
133
121
|
private _resolved;
|
|
134
122
|
private _numberProps;
|
|
123
|
+
private _styleChildren;
|
|
124
|
+
private _pendingResolve;
|
|
125
|
+
private _parent;
|
|
126
|
+
/**
|
|
127
|
+
* dev only
|
|
128
|
+
*/
|
|
135
129
|
private _styles?;
|
|
130
|
+
/**
|
|
131
|
+
* dev only
|
|
132
|
+
*/
|
|
133
|
+
private _childStyles?;
|
|
136
134
|
private _ob?;
|
|
137
|
-
|
|
135
|
+
private _slots?;
|
|
136
|
+
constructor(
|
|
137
|
+
/**
|
|
138
|
+
* Component def - note this may be an AsyncWrapper, and this._def will
|
|
139
|
+
* be overwritten by the inner component when resolved.
|
|
140
|
+
*/
|
|
141
|
+
_def: InnerComponentDef, _props?: Record<string, any>, _createApp?: CreateAppFunction<Element>);
|
|
138
142
|
connectedCallback(): void;
|
|
143
|
+
private _setParent;
|
|
139
144
|
disconnectedCallback(): void;
|
|
140
145
|
/**
|
|
141
146
|
* resolve inner component definition (handle possible async component)
|
|
142
147
|
*/
|
|
143
148
|
private _resolveDef;
|
|
149
|
+
private _mount;
|
|
144
150
|
private _resolveProps;
|
|
145
151
|
protected _setAttr(key: string): void;
|
|
146
152
|
private _update;
|
|
147
153
|
private _createVNode;
|
|
148
154
|
private _applyStyles;
|
|
155
|
+
/**
|
|
156
|
+
* Only called when shaddowRoot is false
|
|
157
|
+
*/
|
|
158
|
+
private _parseSlots;
|
|
159
|
+
/**
|
|
160
|
+
* Only called when shaddowRoot is false
|
|
161
|
+
*/
|
|
162
|
+
private _renderSlots;
|
|
149
163
|
}
|
|
164
|
+
export declare function useHost(caller?: string): VueElement | null;
|
|
165
|
+
/**
|
|
166
|
+
* Retrieve the shadowRoot of the current custom element. Only usable in setup()
|
|
167
|
+
* of a `defineCustomElement` component.
|
|
168
|
+
*/
|
|
169
|
+
export declare function useShadowRoot(): ShadowRoot | null;
|
|
150
170
|
|
|
151
171
|
export declare function useCssModule(name?: string): Record<string, string>;
|
|
152
172
|
|
|
@@ -1331,9 +1351,18 @@ export type NativeElements = {
|
|
|
1331
1351
|
[K in keyof IntrinsicElementAttributes]: IntrinsicElementAttributes[K] & ReservedProps;
|
|
1332
1352
|
};
|
|
1333
1353
|
|
|
1354
|
+
/**
|
|
1355
|
+
* This is a stub implementation to prevent the need to use dom types.
|
|
1356
|
+
*
|
|
1357
|
+
* To enable proper types, add `"dom"` to `"lib"` in your `tsconfig.json`.
|
|
1358
|
+
*/
|
|
1359
|
+
type DomStub = {};
|
|
1360
|
+
type DomType<T> = typeof globalThis extends {
|
|
1361
|
+
window: unknown;
|
|
1362
|
+
} ? T : DomStub;
|
|
1334
1363
|
declare module '@vue/reactivity' {
|
|
1335
1364
|
interface RefUnwrapBailTypes {
|
|
1336
|
-
runtimeDOMBailTypes: Node | Window
|
|
1365
|
+
runtimeDOMBailTypes: DomType<Node | Window>;
|
|
1337
1366
|
}
|
|
1338
1367
|
}
|
|
1339
1368
|
declare module '@vue/runtime-core' {
|