runtime-dom.cjs.prod.js 42 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var runtimeCore = require('@vue/runtime-core');
  4. var shared = require('@vue/shared');
  5. const svgNS = 'http://www.w3.org/2000/svg';
  6. const doc = (typeof document !== 'undefined' ? document : null);
  7. let tempContainer;
  8. let tempSVGContainer;
  9. const nodeOps = {
  10. insert: (child, parent, anchor) => {
  11. parent.insertBefore(child, anchor || null);
  12. },
  13. remove: child => {
  14. const parent = child.parentNode;
  15. if (parent) {
  16. parent.removeChild(child);
  17. }
  18. },
  19. createElement: (tag, isSVG, is) => isSVG
  20. ? doc.createElementNS(svgNS, tag)
  21. : doc.createElement(tag, is ? { is } : undefined),
  22. createText: text => doc.createTextNode(text),
  23. createComment: text => doc.createComment(text),
  24. setText: (node, text) => {
  25. node.nodeValue = text;
  26. },
  27. setElementText: (el, text) => {
  28. el.textContent = text;
  29. },
  30. parentNode: node => node.parentNode,
  31. nextSibling: node => node.nextSibling,
  32. querySelector: selector => doc.querySelector(selector),
  33. setScopeId(el, id) {
  34. el.setAttribute(id, '');
  35. },
  36. cloneNode(el) {
  37. return el.cloneNode(true);
  38. },
  39. // __UNSAFE__
  40. // Reason: innerHTML.
  41. // Static content here can only come from compiled templates.
  42. // As long as the user only uses trusted templates, this is safe.
  43. insertStaticContent(content, parent, anchor, isSVG) {
  44. const temp = isSVG
  45. ? tempSVGContainer ||
  46. (tempSVGContainer = doc.createElementNS(svgNS, 'svg'))
  47. : tempContainer || (tempContainer = doc.createElement('div'));
  48. temp.innerHTML = content;
  49. const first = temp.firstChild;
  50. let node = first;
  51. let last = node;
  52. while (node) {
  53. last = node;
  54. nodeOps.insert(node, parent, anchor);
  55. node = temp.firstChild;
  56. }
  57. return [first, last];
  58. }
  59. };
  60. // compiler should normalize class + :class bindings on the same element
  61. // into a single binding ['staticClass', dynamic]
  62. function patchClass(el, value, isSVG) {
  63. if (value == null) {
  64. value = '';
  65. }
  66. if (isSVG) {
  67. el.setAttribute('class', value);
  68. }
  69. else {
  70. // directly setting className should be faster than setAttribute in theory
  71. // if this is an element during a transition, take the temporary transition
  72. // classes into account.
  73. const transitionClasses = el._vtc;
  74. if (transitionClasses) {
  75. value = (value
  76. ? [value, ...transitionClasses]
  77. : [...transitionClasses]).join(' ');
  78. }
  79. el.className = value;
  80. }
  81. }
  82. function patchStyle(el, prev, next) {
  83. const style = el.style;
  84. if (!next) {
  85. el.removeAttribute('style');
  86. }
  87. else if (shared.isString(next)) {
  88. if (prev !== next) {
  89. style.cssText = next;
  90. }
  91. }
  92. else {
  93. for (const key in next) {
  94. setStyle(style, key, next[key]);
  95. }
  96. if (prev && !shared.isString(prev)) {
  97. for (const key in prev) {
  98. if (next[key] == null) {
  99. setStyle(style, key, '');
  100. }
  101. }
  102. }
  103. }
  104. }
  105. const importantRE = /\s*!important$/;
  106. function setStyle(style, name, val) {
  107. if (shared.isArray(val)) {
  108. val.forEach(v => setStyle(style, name, v));
  109. }
  110. else {
  111. if (name.startsWith('--')) {
  112. // custom property definition
  113. style.setProperty(name, val);
  114. }
  115. else {
  116. const prefixed = autoPrefix(style, name);
  117. if (importantRE.test(val)) {
  118. // !important
  119. style.setProperty(shared.hyphenate(prefixed), val.replace(importantRE, ''), 'important');
  120. }
  121. else {
  122. style[prefixed] = val;
  123. }
  124. }
  125. }
  126. }
  127. const prefixes = ['Webkit', 'Moz', 'ms'];
  128. const prefixCache = {};
  129. function autoPrefix(style, rawName) {
  130. const cached = prefixCache[rawName];
  131. if (cached) {
  132. return cached;
  133. }
  134. let name = runtimeCore.camelize(rawName);
  135. if (name !== 'filter' && name in style) {
  136. return (prefixCache[rawName] = name);
  137. }
  138. name = shared.capitalize(name);
  139. for (let i = 0; i < prefixes.length; i++) {
  140. const prefixed = prefixes[i] + name;
  141. if (prefixed in style) {
  142. return (prefixCache[rawName] = prefixed);
  143. }
  144. }
  145. return rawName;
  146. }
  147. const xlinkNS = 'http://www.w3.org/1999/xlink';
  148. function patchAttr(el, key, value, isSVG) {
  149. if (isSVG && key.startsWith('xlink:')) {
  150. if (value == null) {
  151. el.removeAttributeNS(xlinkNS, key.slice(6, key.length));
  152. }
  153. else {
  154. el.setAttributeNS(xlinkNS, key, value);
  155. }
  156. }
  157. else {
  158. // note we are only checking boolean attributes that don't have a
  159. // corresponding dom prop of the same name here.
  160. const isBoolean = shared.isSpecialBooleanAttr(key);
  161. if (value == null || (isBoolean && value === false)) {
  162. el.removeAttribute(key);
  163. }
  164. else {
  165. el.setAttribute(key, isBoolean ? '' : value);
  166. }
  167. }
  168. }
  169. // __UNSAFE__
  170. // functions. The user is responsible for using them with only trusted content.
  171. function patchDOMProp(el, key, value,
  172. // the following args are passed only due to potential innerHTML/textContent
  173. // overriding existing VNodes, in which case the old tree must be properly
  174. // unmounted.
  175. prevChildren, parentComponent, parentSuspense, unmountChildren) {
  176. if (key === 'innerHTML' || key === 'textContent') {
  177. if (prevChildren) {
  178. unmountChildren(prevChildren, parentComponent, parentSuspense);
  179. }
  180. el[key] = value == null ? '' : value;
  181. return;
  182. }
  183. if (key === 'value' && el.tagName !== 'PROGRESS') {
  184. // store value as _value as well since
  185. // non-string values will be stringified.
  186. el._value = value;
  187. const newValue = value == null ? '' : value;
  188. if (el.value !== newValue) {
  189. el.value = newValue;
  190. }
  191. return;
  192. }
  193. if (value === '' || value == null) {
  194. const type = typeof el[key];
  195. if (value === '' && type === 'boolean') {
  196. // e.g. <select multiple> compiles to { multiple: '' }
  197. el[key] = true;
  198. return;
  199. }
  200. else if (value == null && type === 'string') {
  201. // e.g. <div :id="null">
  202. el[key] = '';
  203. el.removeAttribute(key);
  204. return;
  205. }
  206. else if (type === 'number') {
  207. // e.g. <img :width="null">
  208. el[key] = 0;
  209. el.removeAttribute(key);
  210. return;
  211. }
  212. }
  213. // some properties perform value validation and throw
  214. try {
  215. el[key] = value;
  216. }
  217. catch (e) {
  218. }
  219. }
  220. // Async edge case fix requires storing an event listener's attach timestamp.
  221. let _getNow = Date.now;
  222. // Determine what event timestamp the browser is using. Annoyingly, the
  223. // timestamp can either be hi-res (relative to page load) or low-res
  224. // (relative to UNIX epoch), so in order to compare time we have to use the
  225. // same timestamp type when saving the flush timestamp.
  226. if (typeof document !== 'undefined' &&
  227. _getNow() > document.createEvent('Event').timeStamp) {
  228. // if the low-res timestamp which is bigger than the event timestamp
  229. // (which is evaluated AFTER) it means the event is using a hi-res timestamp,
  230. // and we need to use the hi-res version for event listeners as well.
  231. _getNow = () => performance.now();
  232. }
  233. // To avoid the overhead of repeatedly calling performance.now(), we cache
  234. // and use the same timestamp for all event listeners attached in the same tick.
  235. let cachedNow = 0;
  236. const p = Promise.resolve();
  237. const reset = () => {
  238. cachedNow = 0;
  239. };
  240. const getNow = () => cachedNow || (p.then(reset), (cachedNow = _getNow()));
  241. function addEventListener(el, event, handler, options) {
  242. el.addEventListener(event, handler, options);
  243. }
  244. function removeEventListener(el, event, handler, options) {
  245. el.removeEventListener(event, handler, options);
  246. }
  247. function patchEvent(el, rawName, prevValue, nextValue, instance = null) {
  248. // vei = vue event invokers
  249. const invokers = el._vei || (el._vei = {});
  250. const existingInvoker = invokers[rawName];
  251. if (nextValue && existingInvoker) {
  252. // patch
  253. existingInvoker.value = nextValue;
  254. }
  255. else {
  256. const [name, options] = parseName(rawName);
  257. if (nextValue) {
  258. // add
  259. const invoker = (invokers[rawName] = createInvoker(nextValue, instance));
  260. addEventListener(el, name, invoker, options);
  261. }
  262. else if (existingInvoker) {
  263. // remove
  264. removeEventListener(el, name, existingInvoker, options);
  265. invokers[rawName] = undefined;
  266. }
  267. }
  268. }
  269. const optionsModifierRE = /(?:Once|Passive|Capture)$/;
  270. function parseName(name) {
  271. let options;
  272. if (optionsModifierRE.test(name)) {
  273. options = {};
  274. let m;
  275. while ((m = name.match(optionsModifierRE))) {
  276. name = name.slice(0, name.length - m[0].length);
  277. options[m[0].toLowerCase()] = true;
  278. }
  279. }
  280. return [shared.hyphenate(name.slice(2)), options];
  281. }
  282. function createInvoker(initialValue, instance) {
  283. const invoker = (e) => {
  284. // async edge case #6566: inner click event triggers patch, event handler
  285. // attached to outer element during patch, and triggered again. This
  286. // happens because browsers fire microtask ticks between event propagation.
  287. // the solution is simple: we save the timestamp when a handler is attached,
  288. // and the handler would only fire if the event passed to it was fired
  289. // AFTER it was attached.
  290. const timeStamp = e.timeStamp || _getNow();
  291. if (timeStamp >= invoker.attached - 1) {
  292. runtimeCore.callWithAsyncErrorHandling(patchStopImmediatePropagation(e, invoker.value), instance, 5 /* NATIVE_EVENT_HANDLER */, [e]);
  293. }
  294. };
  295. invoker.value = initialValue;
  296. invoker.attached = getNow();
  297. return invoker;
  298. }
  299. function patchStopImmediatePropagation(e, value) {
  300. if (shared.isArray(value)) {
  301. const originalStop = e.stopImmediatePropagation;
  302. e.stopImmediatePropagation = () => {
  303. originalStop.call(e);
  304. e._stopped = true;
  305. };
  306. return value.map(fn => (e) => !e._stopped && fn(e));
  307. }
  308. else {
  309. return value;
  310. }
  311. }
  312. const nativeOnRE = /^on[a-z]/;
  313. const forcePatchProp = (_, key) => key === 'value';
  314. const patchProp = (el, key, prevValue, nextValue, isSVG = false, prevChildren, parentComponent, parentSuspense, unmountChildren) => {
  315. switch (key) {
  316. // special
  317. case 'class':
  318. patchClass(el, nextValue, isSVG);
  319. break;
  320. case 'style':
  321. patchStyle(el, prevValue, nextValue);
  322. break;
  323. default:
  324. if (shared.isOn(key)) {
  325. // ignore v-model listeners
  326. if (!shared.isModelListener(key)) {
  327. patchEvent(el, key, prevValue, nextValue, parentComponent);
  328. }
  329. }
  330. else if (shouldSetAsProp(el, key, nextValue, isSVG)) {
  331. patchDOMProp(el, key, nextValue, prevChildren, parentComponent, parentSuspense, unmountChildren);
  332. }
  333. else {
  334. // special case for <input v-model type="checkbox"> with
  335. // :true-value & :false-value
  336. // store value as dom properties since non-string values will be
  337. // stringified.
  338. if (key === 'true-value') {
  339. el._trueValue = nextValue;
  340. }
  341. else if (key === 'false-value') {
  342. el._falseValue = nextValue;
  343. }
  344. patchAttr(el, key, nextValue, isSVG);
  345. }
  346. break;
  347. }
  348. };
  349. function shouldSetAsProp(el, key, value, isSVG) {
  350. if (isSVG) {
  351. // most keys must be set as attribute on svg elements to work
  352. // ...except innerHTML
  353. if (key === 'innerHTML') {
  354. return true;
  355. }
  356. // or native onclick with function values
  357. if (key in el && nativeOnRE.test(key) && shared.isFunction(value)) {
  358. return true;
  359. }
  360. return false;
  361. }
  362. // spellcheck and draggable are numerated attrs, however their
  363. // corresponding DOM properties are actually booleans - this leads to
  364. // setting it with a string "false" value leading it to be coerced to
  365. // `true`, so we need to always treat them as attributes.
  366. // Note that `contentEditable` doesn't have this problem: its DOM
  367. // property is also enumerated string values.
  368. if (key === 'spellcheck' || key === 'draggable') {
  369. return false;
  370. }
  371. // #1787, #2840 form property on form elements is readonly and must be set as
  372. // attribute.
  373. if (key === 'form') {
  374. return false;
  375. }
  376. // #1526 <input list> must be set as attribute
  377. if (key === 'list' && el.tagName === 'INPUT') {
  378. return false;
  379. }
  380. // #2766 <textarea type> must be set as attribute
  381. if (key === 'type' && el.tagName === 'TEXTAREA') {
  382. return false;
  383. }
  384. // native onclick with string value, must be set as attribute
  385. if (nativeOnRE.test(key) && shared.isString(value)) {
  386. return false;
  387. }
  388. return key in el;
  389. }
  390. function useCssModule(name = '$style') {
  391. /* istanbul ignore else */
  392. {
  393. const instance = runtimeCore.getCurrentInstance();
  394. if (!instance) {
  395. return shared.EMPTY_OBJ;
  396. }
  397. const modules = instance.type.__cssModules;
  398. if (!modules) {
  399. return shared.EMPTY_OBJ;
  400. }
  401. const mod = modules[name];
  402. if (!mod) {
  403. return shared.EMPTY_OBJ;
  404. }
  405. return mod;
  406. }
  407. }
  408. /**
  409. * Runtime helper for SFC's CSS variable injection feature.
  410. * @private
  411. */
  412. function useCssVars(getter) {
  413. return;
  414. }
  415. const TRANSITION = 'transition';
  416. const ANIMATION = 'animation';
  417. // DOM Transition is a higher-order-component based on the platform-agnostic
  418. // base Transition component, with DOM-specific logic.
  419. const Transition = (props, { slots }) => runtimeCore.h(runtimeCore.BaseTransition, resolveTransitionProps(props), slots);
  420. Transition.displayName = 'Transition';
  421. const DOMTransitionPropsValidators = {
  422. name: String,
  423. type: String,
  424. css: {
  425. type: Boolean,
  426. default: true
  427. },
  428. duration: [String, Number, Object],
  429. enterFromClass: String,
  430. enterActiveClass: String,
  431. enterToClass: String,
  432. appearFromClass: String,
  433. appearActiveClass: String,
  434. appearToClass: String,
  435. leaveFromClass: String,
  436. leaveActiveClass: String,
  437. leaveToClass: String
  438. };
  439. const TransitionPropsValidators = (Transition.props = /*#__PURE__*/ shared.extend({}, runtimeCore.BaseTransition.props, DOMTransitionPropsValidators));
  440. function resolveTransitionProps(rawProps) {
  441. let { name = 'v', type, css = true, 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;
  442. const baseProps = {};
  443. for (const key in rawProps) {
  444. if (!(key in DOMTransitionPropsValidators)) {
  445. baseProps[key] = rawProps[key];
  446. }
  447. }
  448. if (!css) {
  449. return baseProps;
  450. }
  451. const durations = normalizeDuration(duration);
  452. const enterDuration = durations && durations[0];
  453. const leaveDuration = durations && durations[1];
  454. const { onBeforeEnter, onEnter, onEnterCancelled, onLeave, onLeaveCancelled, onBeforeAppear = onBeforeEnter, onAppear = onEnter, onAppearCancelled = onEnterCancelled } = baseProps;
  455. const finishEnter = (el, isAppear, done) => {
  456. removeTransitionClass(el, isAppear ? appearToClass : enterToClass);
  457. removeTransitionClass(el, isAppear ? appearActiveClass : enterActiveClass);
  458. done && done();
  459. };
  460. const finishLeave = (el, done) => {
  461. removeTransitionClass(el, leaveToClass);
  462. removeTransitionClass(el, leaveActiveClass);
  463. done && done();
  464. };
  465. const makeEnterHook = (isAppear) => {
  466. return (el, done) => {
  467. const hook = isAppear ? onAppear : onEnter;
  468. const resolve = () => finishEnter(el, isAppear, done);
  469. hook && hook(el, resolve);
  470. nextFrame(() => {
  471. removeTransitionClass(el, isAppear ? appearFromClass : enterFromClass);
  472. addTransitionClass(el, isAppear ? appearToClass : enterToClass);
  473. if (!(hook && hook.length > 1)) {
  474. whenTransitionEnds(el, type, enterDuration, resolve);
  475. }
  476. });
  477. };
  478. };
  479. return shared.extend(baseProps, {
  480. onBeforeEnter(el) {
  481. onBeforeEnter && onBeforeEnter(el);
  482. addTransitionClass(el, enterFromClass);
  483. addTransitionClass(el, enterActiveClass);
  484. },
  485. onBeforeAppear(el) {
  486. onBeforeAppear && onBeforeAppear(el);
  487. addTransitionClass(el, appearFromClass);
  488. addTransitionClass(el, appearActiveClass);
  489. },
  490. onEnter: makeEnterHook(false),
  491. onAppear: makeEnterHook(true),
  492. onLeave(el, done) {
  493. const resolve = () => finishLeave(el, done);
  494. addTransitionClass(el, leaveFromClass);
  495. // force reflow so *-leave-from classes immediately take effect (#2593)
  496. forceReflow();
  497. addTransitionClass(el, leaveActiveClass);
  498. nextFrame(() => {
  499. removeTransitionClass(el, leaveFromClass);
  500. addTransitionClass(el, leaveToClass);
  501. if (!(onLeave && onLeave.length > 1)) {
  502. whenTransitionEnds(el, type, leaveDuration, resolve);
  503. }
  504. });
  505. onLeave && onLeave(el, resolve);
  506. },
  507. onEnterCancelled(el) {
  508. finishEnter(el, false);
  509. onEnterCancelled && onEnterCancelled(el);
  510. },
  511. onAppearCancelled(el) {
  512. finishEnter(el, true);
  513. onAppearCancelled && onAppearCancelled(el);
  514. },
  515. onLeaveCancelled(el) {
  516. finishLeave(el);
  517. onLeaveCancelled && onLeaveCancelled(el);
  518. }
  519. });
  520. }
  521. function normalizeDuration(duration) {
  522. if (duration == null) {
  523. return null;
  524. }
  525. else if (shared.isObject(duration)) {
  526. return [NumberOf(duration.enter), NumberOf(duration.leave)];
  527. }
  528. else {
  529. const n = NumberOf(duration);
  530. return [n, n];
  531. }
  532. }
  533. function NumberOf(val) {
  534. const res = shared.toNumber(val);
  535. return res;
  536. }
  537. function addTransitionClass(el, cls) {
  538. cls.split(/\s+/).forEach(c => c && el.classList.add(c));
  539. (el._vtc ||
  540. (el._vtc = new Set())).add(cls);
  541. }
  542. function removeTransitionClass(el, cls) {
  543. cls.split(/\s+/).forEach(c => c && el.classList.remove(c));
  544. const { _vtc } = el;
  545. if (_vtc) {
  546. _vtc.delete(cls);
  547. if (!_vtc.size) {
  548. el._vtc = undefined;
  549. }
  550. }
  551. }
  552. function nextFrame(cb) {
  553. requestAnimationFrame(() => {
  554. requestAnimationFrame(cb);
  555. });
  556. }
  557. let endId = 0;
  558. function whenTransitionEnds(el, expectedType, explicitTimeout, resolve) {
  559. const id = (el._endId = ++endId);
  560. const resolveIfNotStale = () => {
  561. if (id === el._endId) {
  562. resolve();
  563. }
  564. };
  565. if (explicitTimeout) {
  566. return setTimeout(resolveIfNotStale, explicitTimeout);
  567. }
  568. const { type, timeout, propCount } = getTransitionInfo(el, expectedType);
  569. if (!type) {
  570. return resolve();
  571. }
  572. const endEvent = type + 'end';
  573. let ended = 0;
  574. const end = () => {
  575. el.removeEventListener(endEvent, onEnd);
  576. resolveIfNotStale();
  577. };
  578. const onEnd = (e) => {
  579. if (e.target === el && ++ended >= propCount) {
  580. end();
  581. }
  582. };
  583. setTimeout(() => {
  584. if (ended < propCount) {
  585. end();
  586. }
  587. }, timeout + 1);
  588. el.addEventListener(endEvent, onEnd);
  589. }
  590. function getTransitionInfo(el, expectedType) {
  591. const styles = window.getComputedStyle(el);
  592. // JSDOM may return undefined for transition properties
  593. const getStyleProperties = (key) => (styles[key] || '').split(', ');
  594. const transitionDelays = getStyleProperties(TRANSITION + 'Delay');
  595. const transitionDurations = getStyleProperties(TRANSITION + 'Duration');
  596. const transitionTimeout = getTimeout(transitionDelays, transitionDurations);
  597. const animationDelays = getStyleProperties(ANIMATION + 'Delay');
  598. const animationDurations = getStyleProperties(ANIMATION + 'Duration');
  599. const animationTimeout = getTimeout(animationDelays, animationDurations);
  600. let type = null;
  601. let timeout = 0;
  602. let propCount = 0;
  603. /* istanbul ignore if */
  604. if (expectedType === TRANSITION) {
  605. if (transitionTimeout > 0) {
  606. type = TRANSITION;
  607. timeout = transitionTimeout;
  608. propCount = transitionDurations.length;
  609. }
  610. }
  611. else if (expectedType === ANIMATION) {
  612. if (animationTimeout > 0) {
  613. type = ANIMATION;
  614. timeout = animationTimeout;
  615. propCount = animationDurations.length;
  616. }
  617. }
  618. else {
  619. timeout = Math.max(transitionTimeout, animationTimeout);
  620. type =
  621. timeout > 0
  622. ? transitionTimeout > animationTimeout
  623. ? TRANSITION
  624. : ANIMATION
  625. : null;
  626. propCount = type
  627. ? type === TRANSITION
  628. ? transitionDurations.length
  629. : animationDurations.length
  630. : 0;
  631. }
  632. const hasTransform = type === TRANSITION &&
  633. /\b(transform|all)(,|$)/.test(styles[TRANSITION + 'Property']);
  634. return {
  635. type,
  636. timeout,
  637. propCount,
  638. hasTransform
  639. };
  640. }
  641. function getTimeout(delays, durations) {
  642. while (delays.length < durations.length) {
  643. delays = delays.concat(delays);
  644. }
  645. return Math.max(...durations.map((d, i) => toMs(d) + toMs(delays[i])));
  646. }
  647. // Old versions of Chromium (below 61.0.3163.100) formats floating pointer
  648. // numbers in a locale-dependent way, using a comma instead of a dot.
  649. // If comma is not replaced with a dot, the input will be rounded down
  650. // (i.e. acting as a floor function) causing unexpected behaviors
  651. function toMs(s) {
  652. return Number(s.slice(0, -1).replace(',', '.')) * 1000;
  653. }
  654. // synchronously force layout to put elements into a certain state
  655. function forceReflow() {
  656. return document.body.offsetHeight;
  657. }
  658. const positionMap = new WeakMap();
  659. const newPositionMap = new WeakMap();
  660. const TransitionGroupImpl = {
  661. name: 'TransitionGroup',
  662. props: /*#__PURE__*/ shared.extend({}, TransitionPropsValidators, {
  663. tag: String,
  664. moveClass: String
  665. }),
  666. setup(props, { slots }) {
  667. const instance = runtimeCore.getCurrentInstance();
  668. const state = runtimeCore.useTransitionState();
  669. let prevChildren;
  670. let children;
  671. runtimeCore.onUpdated(() => {
  672. // children is guaranteed to exist after initial render
  673. if (!prevChildren.length) {
  674. return;
  675. }
  676. const moveClass = props.moveClass || `${props.name || 'v'}-move`;
  677. if (!hasCSSTransform(prevChildren[0].el, instance.vnode.el, moveClass)) {
  678. return;
  679. }
  680. // we divide the work into three loops to avoid mixing DOM reads and writes
  681. // in each iteration - which helps prevent layout thrashing.
  682. prevChildren.forEach(callPendingCbs);
  683. prevChildren.forEach(recordPosition);
  684. const movedChildren = prevChildren.filter(applyTranslation);
  685. // force reflow to put everything in position
  686. forceReflow();
  687. movedChildren.forEach(c => {
  688. const el = c.el;
  689. const style = el.style;
  690. addTransitionClass(el, moveClass);
  691. style.transform = style.webkitTransform = style.transitionDuration = '';
  692. const cb = (el._moveCb = (e) => {
  693. if (e && e.target !== el) {
  694. return;
  695. }
  696. if (!e || /transform$/.test(e.propertyName)) {
  697. el.removeEventListener('transitionend', cb);
  698. el._moveCb = null;
  699. removeTransitionClass(el, moveClass);
  700. }
  701. });
  702. el.addEventListener('transitionend', cb);
  703. });
  704. });
  705. return () => {
  706. const rawProps = runtimeCore.toRaw(props);
  707. const cssTransitionProps = resolveTransitionProps(rawProps);
  708. const tag = rawProps.tag || runtimeCore.Fragment;
  709. prevChildren = children;
  710. children = slots.default ? runtimeCore.getTransitionRawChildren(slots.default()) : [];
  711. for (let i = 0; i < children.length; i++) {
  712. const child = children[i];
  713. if (child.key != null) {
  714. runtimeCore.setTransitionHooks(child, runtimeCore.resolveTransitionHooks(child, cssTransitionProps, state, instance));
  715. }
  716. }
  717. if (prevChildren) {
  718. for (let i = 0; i < prevChildren.length; i++) {
  719. const child = prevChildren[i];
  720. runtimeCore.setTransitionHooks(child, runtimeCore.resolveTransitionHooks(child, cssTransitionProps, state, instance));
  721. positionMap.set(child, child.el.getBoundingClientRect());
  722. }
  723. }
  724. return runtimeCore.createVNode(tag, null, children);
  725. };
  726. }
  727. };
  728. const TransitionGroup = TransitionGroupImpl;
  729. function callPendingCbs(c) {
  730. const el = c.el;
  731. if (el._moveCb) {
  732. el._moveCb();
  733. }
  734. if (el._enterCb) {
  735. el._enterCb();
  736. }
  737. }
  738. function recordPosition(c) {
  739. newPositionMap.set(c, c.el.getBoundingClientRect());
  740. }
  741. function applyTranslation(c) {
  742. const oldPos = positionMap.get(c);
  743. const newPos = newPositionMap.get(c);
  744. const dx = oldPos.left - newPos.left;
  745. const dy = oldPos.top - newPos.top;
  746. if (dx || dy) {
  747. const s = c.el.style;
  748. s.transform = s.webkitTransform = `translate(${dx}px,${dy}px)`;
  749. s.transitionDuration = '0s';
  750. return c;
  751. }
  752. }
  753. function hasCSSTransform(el, root, moveClass) {
  754. // Detect whether an element with the move class applied has
  755. // CSS transitions. Since the element may be inside an entering
  756. // transition at this very moment, we make a clone of it and remove
  757. // all other transition classes applied to ensure only the move class
  758. // is applied.
  759. const clone = el.cloneNode();
  760. if (el._vtc) {
  761. el._vtc.forEach(cls => {
  762. cls.split(/\s+/).forEach(c => c && clone.classList.remove(c));
  763. });
  764. }
  765. moveClass.split(/\s+/).forEach(c => c && clone.classList.add(c));
  766. clone.style.display = 'none';
  767. const container = (root.nodeType === 1
  768. ? root
  769. : root.parentNode);
  770. container.appendChild(clone);
  771. const { hasTransform } = getTransitionInfo(clone);
  772. container.removeChild(clone);
  773. return hasTransform;
  774. }
  775. const getModelAssigner = (vnode) => {
  776. const fn = vnode.props['onUpdate:modelValue'];
  777. return shared.isArray(fn) ? value => shared.invokeArrayFns(fn, value) : fn;
  778. };
  779. function onCompositionStart(e) {
  780. e.target.composing = true;
  781. }
  782. function onCompositionEnd(e) {
  783. const target = e.target;
  784. if (target.composing) {
  785. target.composing = false;
  786. trigger(target, 'input');
  787. }
  788. }
  789. function trigger(el, type) {
  790. const e = document.createEvent('HTMLEvents');
  791. e.initEvent(type, true, true);
  792. el.dispatchEvent(e);
  793. }
  794. // We are exporting the v-model runtime directly as vnode hooks so that it can
  795. // be tree-shaken in case v-model is never used.
  796. const vModelText = {
  797. created(el, { modifiers: { lazy, trim, number } }, vnode) {
  798. el._assign = getModelAssigner(vnode);
  799. const castToNumber = number || el.type === 'number';
  800. addEventListener(el, lazy ? 'change' : 'input', e => {
  801. if (e.target.composing)
  802. return;
  803. let domValue = el.value;
  804. if (trim) {
  805. domValue = domValue.trim();
  806. }
  807. else if (castToNumber) {
  808. domValue = shared.toNumber(domValue);
  809. }
  810. el._assign(domValue);
  811. });
  812. if (trim) {
  813. addEventListener(el, 'change', () => {
  814. el.value = el.value.trim();
  815. });
  816. }
  817. if (!lazy) {
  818. addEventListener(el, 'compositionstart', onCompositionStart);
  819. addEventListener(el, 'compositionend', onCompositionEnd);
  820. // Safari < 10.2 & UIWebView doesn't fire compositionend when
  821. // switching focus before confirming composition choice
  822. // this also fixes the issue where some browsers e.g. iOS Chrome
  823. // fires "change" instead of "input" on autocomplete.
  824. addEventListener(el, 'change', onCompositionEnd);
  825. }
  826. },
  827. // set value on mounted so it's after min/max for type="range"
  828. mounted(el, { value }) {
  829. el.value = value == null ? '' : value;
  830. },
  831. beforeUpdate(el, { value, modifiers: { trim, number } }, vnode) {
  832. el._assign = getModelAssigner(vnode);
  833. // avoid clearing unresolved text. #2302
  834. if (el.composing)
  835. return;
  836. if (document.activeElement === el) {
  837. if (trim && el.value.trim() === value) {
  838. return;
  839. }
  840. if ((number || el.type === 'number') && shared.toNumber(el.value) === value) {
  841. return;
  842. }
  843. }
  844. const newValue = value == null ? '' : value;
  845. if (el.value !== newValue) {
  846. el.value = newValue;
  847. }
  848. }
  849. };
  850. const vModelCheckbox = {
  851. created(el, _, vnode) {
  852. el._assign = getModelAssigner(vnode);
  853. addEventListener(el, 'change', () => {
  854. const modelValue = el._modelValue;
  855. const elementValue = getValue(el);
  856. const checked = el.checked;
  857. const assign = el._assign;
  858. if (shared.isArray(modelValue)) {
  859. const index = shared.looseIndexOf(modelValue, elementValue);
  860. const found = index !== -1;
  861. if (checked && !found) {
  862. assign(modelValue.concat(elementValue));
  863. }
  864. else if (!checked && found) {
  865. const filtered = [...modelValue];
  866. filtered.splice(index, 1);
  867. assign(filtered);
  868. }
  869. }
  870. else if (shared.isSet(modelValue)) {
  871. const cloned = new Set(modelValue);
  872. if (checked) {
  873. cloned.add(elementValue);
  874. }
  875. else {
  876. cloned.delete(elementValue);
  877. }
  878. assign(cloned);
  879. }
  880. else {
  881. assign(getCheckboxValue(el, checked));
  882. }
  883. });
  884. },
  885. // set initial checked on mount to wait for true-value/false-value
  886. mounted: setChecked,
  887. beforeUpdate(el, binding, vnode) {
  888. el._assign = getModelAssigner(vnode);
  889. setChecked(el, binding, vnode);
  890. }
  891. };
  892. function setChecked(el, { value, oldValue }, vnode) {
  893. el._modelValue = value;
  894. if (shared.isArray(value)) {
  895. el.checked = shared.looseIndexOf(value, vnode.props.value) > -1;
  896. }
  897. else if (shared.isSet(value)) {
  898. el.checked = value.has(vnode.props.value);
  899. }
  900. else if (value !== oldValue) {
  901. el.checked = shared.looseEqual(value, getCheckboxValue(el, true));
  902. }
  903. }
  904. const vModelRadio = {
  905. created(el, { value }, vnode) {
  906. el.checked = shared.looseEqual(value, vnode.props.value);
  907. el._assign = getModelAssigner(vnode);
  908. addEventListener(el, 'change', () => {
  909. el._assign(getValue(el));
  910. });
  911. },
  912. beforeUpdate(el, { value, oldValue }, vnode) {
  913. el._assign = getModelAssigner(vnode);
  914. if (value !== oldValue) {
  915. el.checked = shared.looseEqual(value, vnode.props.value);
  916. }
  917. }
  918. };
  919. const vModelSelect = {
  920. created(el, { value, modifiers: { number } }, vnode) {
  921. const isSetModel = shared.isSet(value);
  922. addEventListener(el, 'change', () => {
  923. const selectedVal = Array.prototype.filter
  924. .call(el.options, (o) => o.selected)
  925. .map((o) => number ? shared.toNumber(getValue(o)) : getValue(o));
  926. el._assign(el.multiple
  927. ? isSetModel
  928. ? new Set(selectedVal)
  929. : selectedVal
  930. : selectedVal[0]);
  931. });
  932. el._assign = getModelAssigner(vnode);
  933. },
  934. // set value in mounted & updated because <select> relies on its children
  935. // <option>s.
  936. mounted(el, { value }) {
  937. setSelected(el, value);
  938. },
  939. beforeUpdate(el, _binding, vnode) {
  940. el._assign = getModelAssigner(vnode);
  941. },
  942. updated(el, { value }) {
  943. setSelected(el, value);
  944. }
  945. };
  946. function setSelected(el, value) {
  947. const isMultiple = el.multiple;
  948. if (isMultiple && !shared.isArray(value) && !shared.isSet(value)) {
  949. return;
  950. }
  951. for (let i = 0, l = el.options.length; i < l; i++) {
  952. const option = el.options[i];
  953. const optionValue = getValue(option);
  954. if (isMultiple) {
  955. if (shared.isArray(value)) {
  956. option.selected = shared.looseIndexOf(value, optionValue) > -1;
  957. }
  958. else {
  959. option.selected = value.has(optionValue);
  960. }
  961. }
  962. else {
  963. if (shared.looseEqual(getValue(option), value)) {
  964. el.selectedIndex = i;
  965. return;
  966. }
  967. }
  968. }
  969. if (!isMultiple) {
  970. el.selectedIndex = -1;
  971. }
  972. }
  973. // retrieve raw value set via :value bindings
  974. function getValue(el) {
  975. return '_value' in el ? el._value : el.value;
  976. }
  977. // retrieve raw value for true-value and false-value set via :true-value or :false-value bindings
  978. function getCheckboxValue(el, checked) {
  979. const key = checked ? '_trueValue' : '_falseValue';
  980. return key in el ? el[key] : checked;
  981. }
  982. const vModelDynamic = {
  983. created(el, binding, vnode) {
  984. callModelHook(el, binding, vnode, null, 'created');
  985. },
  986. mounted(el, binding, vnode) {
  987. callModelHook(el, binding, vnode, null, 'mounted');
  988. },
  989. beforeUpdate(el, binding, vnode, prevVNode) {
  990. callModelHook(el, binding, vnode, prevVNode, 'beforeUpdate');
  991. },
  992. updated(el, binding, vnode, prevVNode) {
  993. callModelHook(el, binding, vnode, prevVNode, 'updated');
  994. }
  995. };
  996. function callModelHook(el, binding, vnode, prevVNode, hook) {
  997. let modelToUse;
  998. switch (el.tagName) {
  999. case 'SELECT':
  1000. modelToUse = vModelSelect;
  1001. break;
  1002. case 'TEXTAREA':
  1003. modelToUse = vModelText;
  1004. break;
  1005. default:
  1006. switch (vnode.props && vnode.props.type) {
  1007. case 'checkbox':
  1008. modelToUse = vModelCheckbox;
  1009. break;
  1010. case 'radio':
  1011. modelToUse = vModelRadio;
  1012. break;
  1013. default:
  1014. modelToUse = vModelText;
  1015. }
  1016. }
  1017. const fn = modelToUse[hook];
  1018. fn && fn(el, binding, vnode, prevVNode);
  1019. }
  1020. // SSR vnode transforms
  1021. {
  1022. vModelText.getSSRProps = ({ value }) => ({ value });
  1023. vModelRadio.getSSRProps = ({ value }, vnode) => {
  1024. if (vnode.props && shared.looseEqual(vnode.props.value, value)) {
  1025. return { checked: true };
  1026. }
  1027. };
  1028. vModelCheckbox.getSSRProps = ({ value }, vnode) => {
  1029. if (shared.isArray(value)) {
  1030. if (vnode.props && shared.looseIndexOf(value, vnode.props.value) > -1) {
  1031. return { checked: true };
  1032. }
  1033. }
  1034. else if (shared.isSet(value)) {
  1035. if (vnode.props && value.has(vnode.props.value)) {
  1036. return { checked: true };
  1037. }
  1038. }
  1039. else if (value) {
  1040. return { checked: true };
  1041. }
  1042. };
  1043. }
  1044. const systemModifiers = ['ctrl', 'shift', 'alt', 'meta'];
  1045. const modifierGuards = {
  1046. stop: e => e.stopPropagation(),
  1047. prevent: e => e.preventDefault(),
  1048. self: e => e.target !== e.currentTarget,
  1049. ctrl: e => !e.ctrlKey,
  1050. shift: e => !e.shiftKey,
  1051. alt: e => !e.altKey,
  1052. meta: e => !e.metaKey,
  1053. left: e => 'button' in e && e.button !== 0,
  1054. middle: e => 'button' in e && e.button !== 1,
  1055. right: e => 'button' in e && e.button !== 2,
  1056. exact: (e, modifiers) => systemModifiers.some(m => e[`${m}Key`] && !modifiers.includes(m))
  1057. };
  1058. /**
  1059. * @private
  1060. */
  1061. const withModifiers = (fn, modifiers) => {
  1062. return (event, ...args) => {
  1063. for (let i = 0; i < modifiers.length; i++) {
  1064. const guard = modifierGuards[modifiers[i]];
  1065. if (guard && guard(event, modifiers))
  1066. return;
  1067. }
  1068. return fn(event, ...args);
  1069. };
  1070. };
  1071. // Kept for 2.x compat.
  1072. // Note: IE11 compat for `spacebar` and `del` is removed for now.
  1073. const keyNames = {
  1074. esc: 'escape',
  1075. space: ' ',
  1076. up: 'arrow-up',
  1077. left: 'arrow-left',
  1078. right: 'arrow-right',
  1079. down: 'arrow-down',
  1080. delete: 'backspace'
  1081. };
  1082. /**
  1083. * @private
  1084. */
  1085. const withKeys = (fn, modifiers) => {
  1086. return (event) => {
  1087. if (!('key' in event))
  1088. return;
  1089. const eventKey = shared.hyphenate(event.key);
  1090. if (
  1091. // None of the provided key modifiers match the current event key
  1092. !modifiers.some(k => k === eventKey || keyNames[k] === eventKey)) {
  1093. return;
  1094. }
  1095. return fn(event);
  1096. };
  1097. };
  1098. const vShow = {
  1099. beforeMount(el, { value }, { transition }) {
  1100. el._vod = el.style.display === 'none' ? '' : el.style.display;
  1101. if (transition && value) {
  1102. transition.beforeEnter(el);
  1103. }
  1104. else {
  1105. setDisplay(el, value);
  1106. }
  1107. },
  1108. mounted(el, { value }, { transition }) {
  1109. if (transition && value) {
  1110. transition.enter(el);
  1111. }
  1112. },
  1113. updated(el, { value, oldValue }, { transition }) {
  1114. if (transition && value !== oldValue) {
  1115. if (value) {
  1116. transition.beforeEnter(el);
  1117. setDisplay(el, true);
  1118. transition.enter(el);
  1119. }
  1120. else {
  1121. transition.leave(el, () => {
  1122. setDisplay(el, false);
  1123. });
  1124. }
  1125. }
  1126. else {
  1127. setDisplay(el, value);
  1128. }
  1129. },
  1130. beforeUnmount(el, { value }) {
  1131. setDisplay(el, value);
  1132. }
  1133. };
  1134. {
  1135. vShow.getSSRProps = ({ value }) => {
  1136. if (!value) {
  1137. return { style: { display: 'none' } };
  1138. }
  1139. };
  1140. }
  1141. function setDisplay(el, value) {
  1142. el.style.display = value ? el._vod : 'none';
  1143. }
  1144. const rendererOptions = shared.extend({ patchProp, forcePatchProp }, nodeOps);
  1145. // lazy create the renderer - this makes core renderer logic tree-shakable
  1146. // in case the user only imports reactivity utilities from Vue.
  1147. let renderer;
  1148. let enabledHydration = false;
  1149. function ensureRenderer() {
  1150. return renderer || (renderer = runtimeCore.createRenderer(rendererOptions));
  1151. }
  1152. function ensureHydrationRenderer() {
  1153. renderer = enabledHydration
  1154. ? renderer
  1155. : runtimeCore.createHydrationRenderer(rendererOptions);
  1156. enabledHydration = true;
  1157. return renderer;
  1158. }
  1159. // use explicit type casts here to avoid import() calls in rolled-up d.ts
  1160. const render = ((...args) => {
  1161. ensureRenderer().render(...args);
  1162. });
  1163. const hydrate = ((...args) => {
  1164. ensureHydrationRenderer().hydrate(...args);
  1165. });
  1166. const createApp = ((...args) => {
  1167. const app = ensureRenderer().createApp(...args);
  1168. const { mount } = app;
  1169. app.mount = (containerOrSelector) => {
  1170. const container = normalizeContainer(containerOrSelector);
  1171. if (!container)
  1172. return;
  1173. const component = app._component;
  1174. if (!shared.isFunction(component) && !component.render && !component.template) {
  1175. component.template = container.innerHTML;
  1176. }
  1177. // clear content before mounting
  1178. container.innerHTML = '';
  1179. const proxy = mount(container);
  1180. if (container instanceof Element) {
  1181. container.removeAttribute('v-cloak');
  1182. container.setAttribute('data-v-app', '');
  1183. }
  1184. return proxy;
  1185. };
  1186. return app;
  1187. });
  1188. const createSSRApp = ((...args) => {
  1189. const app = ensureHydrationRenderer().createApp(...args);
  1190. const { mount } = app;
  1191. app.mount = (containerOrSelector) => {
  1192. const container = normalizeContainer(containerOrSelector);
  1193. if (container) {
  1194. return mount(container, true);
  1195. }
  1196. };
  1197. return app;
  1198. });
  1199. function normalizeContainer(container) {
  1200. if (shared.isString(container)) {
  1201. const res = document.querySelector(container);
  1202. return res;
  1203. }
  1204. return container;
  1205. }
  1206. exports.Transition = Transition;
  1207. exports.TransitionGroup = TransitionGroup;
  1208. exports.createApp = createApp;
  1209. exports.createSSRApp = createSSRApp;
  1210. exports.hydrate = hydrate;
  1211. exports.render = render;
  1212. exports.useCssModule = useCssModule;
  1213. exports.useCssVars = useCssVars;
  1214. exports.vModelCheckbox = vModelCheckbox;
  1215. exports.vModelDynamic = vModelDynamic;
  1216. exports.vModelRadio = vModelRadio;
  1217. exports.vModelSelect = vModelSelect;
  1218. exports.vModelText = vModelText;
  1219. exports.vShow = vShow;
  1220. exports.withKeys = withKeys;
  1221. exports.withModifiers = withModifiers;
  1222. Object.keys(runtimeCore).forEach(function (k) {
  1223. if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = runtimeCore[k];
  1224. });