@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.
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @vue/runtime-dom v3.6.0-alpha.2
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)(,|$)/.test(
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
- return document.body.offsetHeight;
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 = /(^|;)\s*display\s*:/;
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
- const Comp = runtimeCore.defineComponent(options, extraOptions);
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
- /*! #__NO_SIDE_EFFECTS__ */
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 VueElement extends BaseClass {
769
- constructor(_def, _props = {}, _createApp = createApp) {
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
- if (this.shadowRoot && _createApp !== createApp) {
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 (this.shadowRoot) {
796
- runtimeCore.warn(
797
- `Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineSSRCustomElement\`.`
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 VueElement) {
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._mount(this._def);
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
- disconnectedCallback() {
851
- this._connected = false;
852
- runtimeCore.nextTick(() => {
853
- if (!this._connected) {
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((mutations) => {
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, isAsync = false) => {
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._mount(def);
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 = this._def.configureApp;
911
- resolve(this._def = def, true);
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
- _mount(def) {
918
- if (!def.name) {
919
- def.name = "VueElement";
920
- }
921
- this._app = this._createApp(def);
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, 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
- ob && ob.disconnect();
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 = (this._teleportTarget || this).querySelectorAll("slot");
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) parent.insertBefore(o.firstChild, o);
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 instance = runtimeCore.getCurrentInstance();
1148
- const el = instance && instance.ce;
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 (!instance) {
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 instance = runtimeCore.getCurrentInstance();
1172
- if (!instance) {
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 = instance.type.__cssModules;
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
- const style = el.style;
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.getBoundingClientRect()
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(c) {
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, c.el.getBoundingClientRect());
1374
+ newPositionMap.set(c, {
1375
+ left: c.el.offsetLeft,
1376
+ top: c.el.offsetTop
1377
+ });
1299
1378
  }
1300
1379
  function applyTranslation(c) {
1301
- const oldPos = positionMap.get(c);
1302
- const newPos = newPositionMap.get(c);
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 = c.el.style;
1392
+ const s = el.style;
1307
1393
  s.transform = s.webkitTransform = `translate(${dx}px,${dy}px)`;
1308
1394
  s.transitionDuration = "0s";
1309
- return c;
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
- let domValue = el.value;
1367
- if (trim) {
1368
- domValue = domValue.trim();
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.trim();
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;