runtime-dom.esm-bundler.js 59 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686
  1. import { camelize, warn, callWithAsyncErrorHandling, defineComponent, nextTick, createVNode, getCurrentInstance, watchPostEffect, onMounted, onUnmounted, Fragment, Static, h, BaseTransition, useTransitionState, onUpdated, toRaw, getTransitionRawChildren, setTransitionHooks, resolveTransitionHooks, createRenderer, isRuntimeOnly, createHydrationRenderer } from '@vue/runtime-core';
  2. export * from '@vue/runtime-core';
  3. import { isString, isArray, hyphenate, capitalize, isSpecialBooleanAttr, includeBooleanAttr, isOn, isModelListener, isFunction, toNumber, camelize as camelize$1, extend, EMPTY_OBJ, isObject, invokeArrayFns, looseIndexOf, isSet, looseEqual, isHTMLTag, isSVGTag } from '@vue/shared';
  4. const svgNS = 'http://www.w3.org/2000/svg';
  5. const doc = (typeof document !== 'undefined' ? document : null);
  6. const templateContainer = doc && /*#__PURE__*/ doc.createElement('template');
  7. const nodeOps = {
  8. insert: (child, parent, anchor) => {
  9. parent.insertBefore(child, anchor || null);
  10. },
  11. remove: child => {
  12. const parent = child.parentNode;
  13. if (parent) {
  14. parent.removeChild(child);
  15. }
  16. },
  17. createElement: (tag, isSVG, is, props) => {
  18. const el = isSVG
  19. ? doc.createElementNS(svgNS, tag)
  20. : doc.createElement(tag, is ? { is } : undefined);
  21. if (tag === 'select' && props && props.multiple != null) {
  22. el.setAttribute('multiple', props.multiple);
  23. }
  24. return el;
  25. },
  26. createText: text => doc.createTextNode(text),
  27. createComment: text => doc.createComment(text),
  28. setText: (node, text) => {
  29. node.nodeValue = text;
  30. },
  31. setElementText: (el, text) => {
  32. el.textContent = text;
  33. },
  34. parentNode: node => node.parentNode,
  35. nextSibling: node => node.nextSibling,
  36. querySelector: selector => doc.querySelector(selector),
  37. setScopeId(el, id) {
  38. el.setAttribute(id, '');
  39. },
  40. cloneNode(el) {
  41. const cloned = el.cloneNode(true);
  42. // #3072
  43. // - in `patchDOMProp`, we store the actual value in the `el._value` property.
  44. // - normally, elements using `:value` bindings will not be hoisted, but if
  45. // the bound value is a constant, e.g. `:value="true"` - they do get
  46. // hoisted.
  47. // - in production, hoisted nodes are cloned when subsequent inserts, but
  48. // cloneNode() does not copy the custom property we attached.
  49. // - This may need to account for other custom DOM properties we attach to
  50. // elements in addition to `_value` in the future.
  51. if (`_value` in el) {
  52. cloned._value = el._value;
  53. }
  54. return cloned;
  55. },
  56. // __UNSAFE__
  57. // Reason: innerHTML.
  58. // Static content here can only come from compiled templates.
  59. // As long as the user only uses trusted templates, this is safe.
  60. insertStaticContent(content, parent, anchor, isSVG, start, end) {
  61. // <parent> before | first ... last | anchor </parent>
  62. const before = anchor ? anchor.previousSibling : parent.lastChild;
  63. // #5308 can only take cached path if:
  64. // - has a single root node
  65. // - nextSibling info is still available
  66. if (start && (start === end || start.nextSibling)) {
  67. // cached
  68. while (true) {
  69. parent.insertBefore(start.cloneNode(true), anchor);
  70. if (start === end || !(start = start.nextSibling))
  71. break;
  72. }
  73. }
  74. else {
  75. // fresh insert
  76. templateContainer.innerHTML = isSVG ? `<svg>${content}</svg>` : content;
  77. const template = templateContainer.content;
  78. if (isSVG) {
  79. // remove outer svg wrapper
  80. const wrapper = template.firstChild;
  81. while (wrapper.firstChild) {
  82. template.appendChild(wrapper.firstChild);
  83. }
  84. template.removeChild(wrapper);
  85. }
  86. parent.insertBefore(template, anchor);
  87. }
  88. return [
  89. // first
  90. before ? before.nextSibling : parent.firstChild,
  91. // last
  92. anchor ? anchor.previousSibling : parent.lastChild
  93. ];
  94. }
  95. };
  96. // compiler should normalize class + :class bindings on the same element
  97. // into a single binding ['staticClass', dynamic]
  98. function patchClass(el, value, isSVG) {
  99. // directly setting className should be faster than setAttribute in theory
  100. // if this is an element during a transition, take the temporary transition
  101. // classes into account.
  102. const transitionClasses = el._vtc;
  103. if (transitionClasses) {
  104. value = (value ? [value, ...transitionClasses] : [...transitionClasses]).join(' ');
  105. }
  106. if (value == null) {
  107. el.removeAttribute('class');
  108. }
  109. else if (isSVG) {
  110. el.setAttribute('class', value);
  111. }
  112. else {
  113. el.className = value;
  114. }
  115. }
  116. function patchStyle(el, prev, next) {
  117. const style = el.style;
  118. const isCssString = isString(next);
  119. if (next && !isCssString) {
  120. for (const key in next) {
  121. setStyle(style, key, next[key]);
  122. }
  123. if (prev && !isString(prev)) {
  124. for (const key in prev) {
  125. if (next[key] == null) {
  126. setStyle(style, key, '');
  127. }
  128. }
  129. }
  130. }
  131. else {
  132. const currentDisplay = style.display;
  133. if (isCssString) {
  134. if (prev !== next) {
  135. style.cssText = next;
  136. }
  137. }
  138. else if (prev) {
  139. el.removeAttribute('style');
  140. }
  141. // indicates that the `display` of the element is controlled by `v-show`,
  142. // so we always keep the current `display` value regardless of the `style`
  143. // value, thus handing over control to `v-show`.
  144. if ('_vod' in el) {
  145. style.display = currentDisplay;
  146. }
  147. }
  148. }
  149. const importantRE = /\s*!important$/;
  150. function setStyle(style, name, val) {
  151. if (isArray(val)) {
  152. val.forEach(v => setStyle(style, name, v));
  153. }
  154. else {
  155. if (val == null)
  156. val = '';
  157. if (name.startsWith('--')) {
  158. // custom property definition
  159. style.setProperty(name, val);
  160. }
  161. else {
  162. const prefixed = autoPrefix(style, name);
  163. if (importantRE.test(val)) {
  164. // !important
  165. style.setProperty(hyphenate(prefixed), val.replace(importantRE, ''), 'important');
  166. }
  167. else {
  168. style[prefixed] = val;
  169. }
  170. }
  171. }
  172. }
  173. const prefixes = ['Webkit', 'Moz', 'ms'];
  174. const prefixCache = {};
  175. function autoPrefix(style, rawName) {
  176. const cached = prefixCache[rawName];
  177. if (cached) {
  178. return cached;
  179. }
  180. let name = camelize(rawName);
  181. if (name !== 'filter' && name in style) {
  182. return (prefixCache[rawName] = name);
  183. }
  184. name = capitalize(name);
  185. for (let i = 0; i < prefixes.length; i++) {
  186. const prefixed = prefixes[i] + name;
  187. if (prefixed in style) {
  188. return (prefixCache[rawName] = prefixed);
  189. }
  190. }
  191. return rawName;
  192. }
  193. const xlinkNS = 'http://www.w3.org/1999/xlink';
  194. function patchAttr(el, key, value, isSVG, instance) {
  195. if (isSVG && key.startsWith('xlink:')) {
  196. if (value == null) {
  197. el.removeAttributeNS(xlinkNS, key.slice(6, key.length));
  198. }
  199. else {
  200. el.setAttributeNS(xlinkNS, key, value);
  201. }
  202. }
  203. else {
  204. // note we are only checking boolean attributes that don't have a
  205. // corresponding dom prop of the same name here.
  206. const isBoolean = isSpecialBooleanAttr(key);
  207. if (value == null || (isBoolean && !includeBooleanAttr(value))) {
  208. el.removeAttribute(key);
  209. }
  210. else {
  211. el.setAttribute(key, isBoolean ? '' : value);
  212. }
  213. }
  214. }
  215. // __UNSAFE__
  216. // functions. The user is responsible for using them with only trusted content.
  217. function patchDOMProp(el, key, value,
  218. // the following args are passed only due to potential innerHTML/textContent
  219. // overriding existing VNodes, in which case the old tree must be properly
  220. // unmounted.
  221. prevChildren, parentComponent, parentSuspense, unmountChildren) {
  222. if (key === 'innerHTML' || key === 'textContent') {
  223. if (prevChildren) {
  224. unmountChildren(prevChildren, parentComponent, parentSuspense);
  225. }
  226. el[key] = value == null ? '' : value;
  227. return;
  228. }
  229. if (key === 'value' &&
  230. el.tagName !== 'PROGRESS' &&
  231. // custom elements may use _value internally
  232. !el.tagName.includes('-')) {
  233. // store value as _value as well since
  234. // non-string values will be stringified.
  235. el._value = value;
  236. const newValue = value == null ? '' : value;
  237. if (el.value !== newValue ||
  238. // #4956: always set for OPTION elements because its value falls back to
  239. // textContent if no value attribute is present. And setting .value for
  240. // OPTION has no side effect
  241. el.tagName === 'OPTION') {
  242. el.value = newValue;
  243. }
  244. if (value == null) {
  245. el.removeAttribute(key);
  246. }
  247. return;
  248. }
  249. let needRemove = false;
  250. if (value === '' || value == null) {
  251. const type = typeof el[key];
  252. if (type === 'boolean') {
  253. // e.g. <select multiple> compiles to { multiple: '' }
  254. value = includeBooleanAttr(value);
  255. }
  256. else if (value == null && type === 'string') {
  257. // e.g. <div :id="null">
  258. value = '';
  259. needRemove = true;
  260. }
  261. else if (type === 'number') {
  262. // e.g. <img :width="null">
  263. // the value of some IDL attr must be greater than 0, e.g. input.size = 0 -> error
  264. value = 0;
  265. needRemove = true;
  266. }
  267. }
  268. // some properties perform value validation and throw,
  269. // some properties has getter, no setter, will error in 'use strict'
  270. // eg. <select :type="null"></select> <select :willValidate="null"></select>
  271. try {
  272. el[key] = value;
  273. }
  274. catch (e) {
  275. if ((process.env.NODE_ENV !== 'production')) {
  276. warn(`Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: ` +
  277. `value ${value} is invalid.`, e);
  278. }
  279. }
  280. needRemove && el.removeAttribute(key);
  281. }
  282. // Async edge case fix requires storing an event listener's attach timestamp.
  283. const [_getNow, skipTimestampCheck] = /*#__PURE__*/ (() => {
  284. let _getNow = Date.now;
  285. let skipTimestampCheck = false;
  286. if (typeof window !== 'undefined') {
  287. // Determine what event timestamp the browser is using. Annoyingly, the
  288. // timestamp can either be hi-res (relative to page load) or low-res
  289. // (relative to UNIX epoch), so in order to compare time we have to use the
  290. // same timestamp type when saving the flush timestamp.
  291. if (Date.now() > document.createEvent('Event').timeStamp) {
  292. // if the low-res timestamp which is bigger than the event timestamp
  293. // (which is evaluated AFTER) it means the event is using a hi-res timestamp,
  294. // and we need to use the hi-res version for event listeners as well.
  295. _getNow = () => performance.now();
  296. }
  297. // #3485: Firefox <= 53 has incorrect Event.timeStamp implementation
  298. // and does not fire microtasks in between event propagation, so safe to exclude.
  299. const ffMatch = navigator.userAgent.match(/firefox\/(\d+)/i);
  300. skipTimestampCheck = !!(ffMatch && Number(ffMatch[1]) <= 53);
  301. }
  302. return [_getNow, skipTimestampCheck];
  303. })();
  304. // To avoid the overhead of repeatedly calling performance.now(), we cache
  305. // and use the same timestamp for all event listeners attached in the same tick.
  306. let cachedNow = 0;
  307. const p = /*#__PURE__*/ Promise.resolve();
  308. const reset = () => {
  309. cachedNow = 0;
  310. };
  311. const getNow = () => cachedNow || (p.then(reset), (cachedNow = _getNow()));
  312. function addEventListener(el, event, handler, options) {
  313. el.addEventListener(event, handler, options);
  314. }
  315. function removeEventListener(el, event, handler, options) {
  316. el.removeEventListener(event, handler, options);
  317. }
  318. function patchEvent(el, rawName, prevValue, nextValue, instance = null) {
  319. // vei = vue event invokers
  320. const invokers = el._vei || (el._vei = {});
  321. const existingInvoker = invokers[rawName];
  322. if (nextValue && existingInvoker) {
  323. // patch
  324. existingInvoker.value = nextValue;
  325. }
  326. else {
  327. const [name, options] = parseName(rawName);
  328. if (nextValue) {
  329. // add
  330. const invoker = (invokers[rawName] = createInvoker(nextValue, instance));
  331. addEventListener(el, name, invoker, options);
  332. }
  333. else if (existingInvoker) {
  334. // remove
  335. removeEventListener(el, name, existingInvoker, options);
  336. invokers[rawName] = undefined;
  337. }
  338. }
  339. }
  340. const optionsModifierRE = /(?:Once|Passive|Capture)$/;
  341. function parseName(name) {
  342. let options;
  343. if (optionsModifierRE.test(name)) {
  344. options = {};
  345. let m;
  346. while ((m = name.match(optionsModifierRE))) {
  347. name = name.slice(0, name.length - m[0].length);
  348. options[m[0].toLowerCase()] = true;
  349. }
  350. }
  351. return [hyphenate(name.slice(2)), options];
  352. }
  353. function createInvoker(initialValue, instance) {
  354. const invoker = (e) => {
  355. // async edge case #6566: inner click event triggers patch, event handler
  356. // attached to outer element during patch, and triggered again. This
  357. // happens because browsers fire microtask ticks between event propagation.
  358. // the solution is simple: we save the timestamp when a handler is attached,
  359. // and the handler would only fire if the event passed to it was fired
  360. // AFTER it was attached.
  361. const timeStamp = e.timeStamp || _getNow();
  362. if (skipTimestampCheck || timeStamp >= invoker.attached - 1) {
  363. callWithAsyncErrorHandling(patchStopImmediatePropagation(e, invoker.value), instance, 5 /* NATIVE_EVENT_HANDLER */, [e]);
  364. }
  365. };
  366. invoker.value = initialValue;
  367. invoker.attached = getNow();
  368. return invoker;
  369. }
  370. function patchStopImmediatePropagation(e, value) {
  371. if (isArray(value)) {
  372. const originalStop = e.stopImmediatePropagation;
  373. e.stopImmediatePropagation = () => {
  374. originalStop.call(e);
  375. e._stopped = true;
  376. };
  377. return value.map(fn => (e) => !e._stopped && fn && fn(e));
  378. }
  379. else {
  380. return value;
  381. }
  382. }
  383. const nativeOnRE = /^on[a-z]/;
  384. const patchProp = (el, key, prevValue, nextValue, isSVG = false, prevChildren, parentComponent, parentSuspense, unmountChildren) => {
  385. if (key === 'class') {
  386. patchClass(el, nextValue, isSVG);
  387. }
  388. else if (key === 'style') {
  389. patchStyle(el, prevValue, nextValue);
  390. }
  391. else if (isOn(key)) {
  392. // ignore v-model listeners
  393. if (!isModelListener(key)) {
  394. patchEvent(el, key, prevValue, nextValue, parentComponent);
  395. }
  396. }
  397. else if (key[0] === '.'
  398. ? ((key = key.slice(1)), true)
  399. : key[0] === '^'
  400. ? ((key = key.slice(1)), false)
  401. : shouldSetAsProp(el, key, nextValue, isSVG)) {
  402. patchDOMProp(el, key, nextValue, prevChildren, parentComponent, parentSuspense, unmountChildren);
  403. }
  404. else {
  405. // special case for <input v-model type="checkbox"> with
  406. // :true-value & :false-value
  407. // store value as dom properties since non-string values will be
  408. // stringified.
  409. if (key === 'true-value') {
  410. el._trueValue = nextValue;
  411. }
  412. else if (key === 'false-value') {
  413. el._falseValue = nextValue;
  414. }
  415. patchAttr(el, key, nextValue, isSVG);
  416. }
  417. };
  418. function shouldSetAsProp(el, key, value, isSVG) {
  419. if (isSVG) {
  420. // most keys must be set as attribute on svg elements to work
  421. // ...except innerHTML & textContent
  422. if (key === 'innerHTML' || key === 'textContent') {
  423. return true;
  424. }
  425. // or native onclick with function values
  426. if (key in el && nativeOnRE.test(key) && isFunction(value)) {
  427. return true;
  428. }
  429. return false;
  430. }
  431. // these are enumerated attrs, however their corresponding DOM properties
  432. // are actually booleans - this leads to setting it with a string "false"
  433. // value leading it to be coerced to `true`, so we need to always treat
  434. // them as attributes.
  435. // Note that `contentEditable` doesn't have this problem: its DOM
  436. // property is also enumerated string values.
  437. if (key === 'spellcheck' || key === 'draggable' || key === 'translate') {
  438. return false;
  439. }
  440. // #1787, #2840 form property on form elements is readonly and must be set as
  441. // attribute.
  442. if (key === 'form') {
  443. return false;
  444. }
  445. // #1526 <input list> must be set as attribute
  446. if (key === 'list' && el.tagName === 'INPUT') {
  447. return false;
  448. }
  449. // #2766 <textarea type> must be set as attribute
  450. if (key === 'type' && el.tagName === 'TEXTAREA') {
  451. return false;
  452. }
  453. // native onclick with string value, must be set as attribute
  454. if (nativeOnRE.test(key) && isString(value)) {
  455. return false;
  456. }
  457. return key in el;
  458. }
  459. function defineCustomElement(options, hydate) {
  460. const Comp = defineComponent(options);
  461. class VueCustomElement extends VueElement {
  462. constructor(initialProps) {
  463. super(Comp, initialProps, hydate);
  464. }
  465. }
  466. VueCustomElement.def = Comp;
  467. return VueCustomElement;
  468. }
  469. const defineSSRCustomElement = ((options) => {
  470. // @ts-ignore
  471. return defineCustomElement(options, hydrate);
  472. });
  473. const BaseClass = (typeof HTMLElement !== 'undefined' ? HTMLElement : class {
  474. });
  475. class VueElement extends BaseClass {
  476. constructor(_def, _props = {}, hydrate) {
  477. super();
  478. this._def = _def;
  479. this._props = _props;
  480. /**
  481. * @internal
  482. */
  483. this._instance = null;
  484. this._connected = false;
  485. this._resolved = false;
  486. this._numberProps = null;
  487. if (this.shadowRoot && hydrate) {
  488. hydrate(this._createVNode(), this.shadowRoot);
  489. }
  490. else {
  491. if ((process.env.NODE_ENV !== 'production') && this.shadowRoot) {
  492. warn(`Custom element has pre-rendered declarative shadow root but is not ` +
  493. `defined as hydratable. Use \`defineSSRCustomElement\`.`);
  494. }
  495. this.attachShadow({ mode: 'open' });
  496. }
  497. }
  498. connectedCallback() {
  499. this._connected = true;
  500. if (!this._instance) {
  501. this._resolveDef();
  502. }
  503. }
  504. disconnectedCallback() {
  505. this._connected = false;
  506. nextTick(() => {
  507. if (!this._connected) {
  508. render(null, this.shadowRoot);
  509. this._instance = null;
  510. }
  511. });
  512. }
  513. /**
  514. * resolve inner component definition (handle possible async component)
  515. */
  516. _resolveDef() {
  517. if (this._resolved) {
  518. return;
  519. }
  520. this._resolved = true;
  521. // set initial attrs
  522. for (let i = 0; i < this.attributes.length; i++) {
  523. this._setAttr(this.attributes[i].name);
  524. }
  525. // watch future attr changes
  526. new MutationObserver(mutations => {
  527. for (const m of mutations) {
  528. this._setAttr(m.attributeName);
  529. }
  530. }).observe(this, { attributes: true });
  531. const resolve = (def) => {
  532. const { props, styles } = def;
  533. const hasOptions = !isArray(props);
  534. const rawKeys = props ? (hasOptions ? Object.keys(props) : props) : [];
  535. // cast Number-type props set before resolve
  536. let numberProps;
  537. if (hasOptions) {
  538. for (const key in this._props) {
  539. const opt = props[key];
  540. if (opt === Number || (opt && opt.type === Number)) {
  541. this._props[key] = toNumber(this._props[key]);
  542. (numberProps || (numberProps = Object.create(null)))[key] = true;
  543. }
  544. }
  545. }
  546. this._numberProps = numberProps;
  547. // check if there are props set pre-upgrade or connect
  548. for (const key of Object.keys(this)) {
  549. if (key[0] !== '_') {
  550. this._setProp(key, this[key], true, false);
  551. }
  552. }
  553. // defining getter/setters on prototype
  554. for (const key of rawKeys.map(camelize$1)) {
  555. Object.defineProperty(this, key, {
  556. get() {
  557. return this._getProp(key);
  558. },
  559. set(val) {
  560. this._setProp(key, val);
  561. }
  562. });
  563. }
  564. // apply CSS
  565. this._applyStyles(styles);
  566. // initial render
  567. this._update();
  568. };
  569. const asyncDef = this._def.__asyncLoader;
  570. if (asyncDef) {
  571. asyncDef().then(resolve);
  572. }
  573. else {
  574. resolve(this._def);
  575. }
  576. }
  577. _setAttr(key) {
  578. let value = this.getAttribute(key);
  579. if (this._numberProps && this._numberProps[key]) {
  580. value = toNumber(value);
  581. }
  582. this._setProp(camelize$1(key), value, false);
  583. }
  584. /**
  585. * @internal
  586. */
  587. _getProp(key) {
  588. return this._props[key];
  589. }
  590. /**
  591. * @internal
  592. */
  593. _setProp(key, val, shouldReflect = true, shouldUpdate = true) {
  594. if (val !== this._props[key]) {
  595. this._props[key] = val;
  596. if (shouldUpdate && this._instance) {
  597. this._update();
  598. }
  599. // reflect
  600. if (shouldReflect) {
  601. if (val === true) {
  602. this.setAttribute(hyphenate(key), '');
  603. }
  604. else if (typeof val === 'string' || typeof val === 'number') {
  605. this.setAttribute(hyphenate(key), val + '');
  606. }
  607. else if (!val) {
  608. this.removeAttribute(hyphenate(key));
  609. }
  610. }
  611. }
  612. }
  613. _update() {
  614. render(this._createVNode(), this.shadowRoot);
  615. }
  616. _createVNode() {
  617. const vnode = createVNode(this._def, extend({}, this._props));
  618. if (!this._instance) {
  619. vnode.ce = instance => {
  620. this._instance = instance;
  621. instance.isCE = true;
  622. // HMR
  623. if ((process.env.NODE_ENV !== 'production')) {
  624. instance.ceReload = newStyles => {
  625. // always reset styles
  626. if (this._styles) {
  627. this._styles.forEach(s => this.shadowRoot.removeChild(s));
  628. this._styles.length = 0;
  629. }
  630. this._applyStyles(newStyles);
  631. // if this is an async component, ceReload is called from the inner
  632. // component so no need to reload the async wrapper
  633. if (!this._def.__asyncLoader) {
  634. // reload
  635. this._instance = null;
  636. this._update();
  637. }
  638. };
  639. }
  640. // intercept emit
  641. instance.emit = (event, ...args) => {
  642. this.dispatchEvent(new CustomEvent(event, {
  643. detail: args
  644. }));
  645. };
  646. // locate nearest Vue custom element parent for provide/inject
  647. let parent = this;
  648. while ((parent =
  649. parent && (parent.parentNode || parent.host))) {
  650. if (parent instanceof VueElement) {
  651. instance.parent = parent._instance;
  652. break;
  653. }
  654. }
  655. };
  656. }
  657. return vnode;
  658. }
  659. _applyStyles(styles) {
  660. if (styles) {
  661. styles.forEach(css => {
  662. const s = document.createElement('style');
  663. s.textContent = css;
  664. this.shadowRoot.appendChild(s);
  665. // record for HMR
  666. if ((process.env.NODE_ENV !== 'production')) {
  667. (this._styles || (this._styles = [])).push(s);
  668. }
  669. });
  670. }
  671. }
  672. }
  673. function useCssModule(name = '$style') {
  674. /* istanbul ignore else */
  675. {
  676. const instance = getCurrentInstance();
  677. if (!instance) {
  678. (process.env.NODE_ENV !== 'production') && warn(`useCssModule must be called inside setup()`);
  679. return EMPTY_OBJ;
  680. }
  681. const modules = instance.type.__cssModules;
  682. if (!modules) {
  683. (process.env.NODE_ENV !== 'production') && warn(`Current instance does not have CSS modules injected.`);
  684. return EMPTY_OBJ;
  685. }
  686. const mod = modules[name];
  687. if (!mod) {
  688. (process.env.NODE_ENV !== 'production') &&
  689. warn(`Current instance does not have CSS module named "${name}".`);
  690. return EMPTY_OBJ;
  691. }
  692. return mod;
  693. }
  694. }
  695. /**
  696. * Runtime helper for SFC's CSS variable injection feature.
  697. * @private
  698. */
  699. function useCssVars(getter) {
  700. const instance = getCurrentInstance();
  701. /* istanbul ignore next */
  702. if (!instance) {
  703. (process.env.NODE_ENV !== 'production') &&
  704. warn(`useCssVars is called without current active component instance.`);
  705. return;
  706. }
  707. const setVars = () => setVarsOnVNode(instance.subTree, getter(instance.proxy));
  708. watchPostEffect(setVars);
  709. onMounted(() => {
  710. const ob = new MutationObserver(setVars);
  711. ob.observe(instance.subTree.el.parentNode, { childList: true });
  712. onUnmounted(() => ob.disconnect());
  713. });
  714. }
  715. function setVarsOnVNode(vnode, vars) {
  716. if (vnode.shapeFlag & 128 /* SUSPENSE */) {
  717. const suspense = vnode.suspense;
  718. vnode = suspense.activeBranch;
  719. if (suspense.pendingBranch && !suspense.isHydrating) {
  720. suspense.effects.push(() => {
  721. setVarsOnVNode(suspense.activeBranch, vars);
  722. });
  723. }
  724. }
  725. // drill down HOCs until it's a non-component vnode
  726. while (vnode.component) {
  727. vnode = vnode.component.subTree;
  728. }
  729. if (vnode.shapeFlag & 1 /* ELEMENT */ && vnode.el) {
  730. setVarsOnNode(vnode.el, vars);
  731. }
  732. else if (vnode.type === Fragment) {
  733. vnode.children.forEach(c => setVarsOnVNode(c, vars));
  734. }
  735. else if (vnode.type === Static) {
  736. let { el, anchor } = vnode;
  737. while (el) {
  738. setVarsOnNode(el, vars);
  739. if (el === anchor)
  740. break;
  741. el = el.nextSibling;
  742. }
  743. }
  744. }
  745. function setVarsOnNode(el, vars) {
  746. if (el.nodeType === 1) {
  747. const style = el.style;
  748. for (const key in vars) {
  749. style.setProperty(`--${key}`, vars[key]);
  750. }
  751. }
  752. }
  753. const TRANSITION = 'transition';
  754. const ANIMATION = 'animation';
  755. // DOM Transition is a higher-order-component based on the platform-agnostic
  756. // base Transition component, with DOM-specific logic.
  757. const Transition = (props, { slots }) => h(BaseTransition, resolveTransitionProps(props), slots);
  758. Transition.displayName = 'Transition';
  759. const DOMTransitionPropsValidators = {
  760. name: String,
  761. type: String,
  762. css: {
  763. type: Boolean,
  764. default: true
  765. },
  766. duration: [String, Number, Object],
  767. enterFromClass: String,
  768. enterActiveClass: String,
  769. enterToClass: String,
  770. appearFromClass: String,
  771. appearActiveClass: String,
  772. appearToClass: String,
  773. leaveFromClass: String,
  774. leaveActiveClass: String,
  775. leaveToClass: String
  776. };
  777. const TransitionPropsValidators = (Transition.props =
  778. /*#__PURE__*/ extend({}, BaseTransition.props, DOMTransitionPropsValidators));
  779. /**
  780. * #3227 Incoming hooks may be merged into arrays when wrapping Transition
  781. * with custom HOCs.
  782. */
  783. const callHook = (hook, args = []) => {
  784. if (isArray(hook)) {
  785. hook.forEach(h => h(...args));
  786. }
  787. else if (hook) {
  788. hook(...args);
  789. }
  790. };
  791. /**
  792. * Check if a hook expects a callback (2nd arg), which means the user
  793. * intends to explicitly control the end of the transition.
  794. */
  795. const hasExplicitCallback = (hook) => {
  796. return hook
  797. ? isArray(hook)
  798. ? hook.some(h => h.length > 1)
  799. : hook.length > 1
  800. : false;
  801. };
  802. function resolveTransitionProps(rawProps) {
  803. const baseProps = {};
  804. for (const key in rawProps) {
  805. if (!(key in DOMTransitionPropsValidators)) {
  806. baseProps[key] = rawProps[key];
  807. }
  808. }
  809. if (rawProps.css === false) {
  810. return baseProps;
  811. }
  812. const { name = 'v', type, duration, enterFromClass = `${name}-enter-from`, enterActiveClass = `${name}-enter-active`, enterToClass = `${name}-enter-to`, appearFromClass = enterFromClass, appearActiveClass = enterActiveClass, appearToClass = enterToClass, leaveFromClass = `${name}-leave-from`, leaveActiveClass = `${name}-leave-active`, leaveToClass = `${name}-leave-to` } = rawProps;
  813. const durations = normalizeDuration(duration);
  814. const enterDuration = durations && durations[0];
  815. const leaveDuration = durations && durations[1];
  816. const { onBeforeEnter, onEnter, onEnterCancelled, onLeave, onLeaveCancelled, onBeforeAppear = onBeforeEnter, onAppear = onEnter, onAppearCancelled = onEnterCancelled } = baseProps;
  817. const finishEnter = (el, isAppear, done) => {
  818. removeTransitionClass(el, isAppear ? appearToClass : enterToClass);
  819. removeTransitionClass(el, isAppear ? appearActiveClass : enterActiveClass);
  820. done && done();
  821. };
  822. const finishLeave = (el, done) => {
  823. removeTransitionClass(el, leaveToClass);
  824. removeTransitionClass(el, leaveActiveClass);
  825. done && done();
  826. };
  827. const makeEnterHook = (isAppear) => {
  828. return (el, done) => {
  829. const hook = isAppear ? onAppear : onEnter;
  830. const resolve = () => finishEnter(el, isAppear, done);
  831. callHook(hook, [el, resolve]);
  832. nextFrame(() => {
  833. removeTransitionClass(el, isAppear ? appearFromClass : enterFromClass);
  834. addTransitionClass(el, isAppear ? appearToClass : enterToClass);
  835. if (!hasExplicitCallback(hook)) {
  836. whenTransitionEnds(el, type, enterDuration, resolve);
  837. }
  838. });
  839. };
  840. };
  841. return extend(baseProps, {
  842. onBeforeEnter(el) {
  843. callHook(onBeforeEnter, [el]);
  844. addTransitionClass(el, enterFromClass);
  845. addTransitionClass(el, enterActiveClass);
  846. },
  847. onBeforeAppear(el) {
  848. callHook(onBeforeAppear, [el]);
  849. addTransitionClass(el, appearFromClass);
  850. addTransitionClass(el, appearActiveClass);
  851. },
  852. onEnter: makeEnterHook(false),
  853. onAppear: makeEnterHook(true),
  854. onLeave(el, done) {
  855. const resolve = () => finishLeave(el, done);
  856. addTransitionClass(el, leaveFromClass);
  857. // force reflow so *-leave-from classes immediately take effect (#2593)
  858. forceReflow();
  859. addTransitionClass(el, leaveActiveClass);
  860. nextFrame(() => {
  861. removeTransitionClass(el, leaveFromClass);
  862. addTransitionClass(el, leaveToClass);
  863. if (!hasExplicitCallback(onLeave)) {
  864. whenTransitionEnds(el, type, leaveDuration, resolve);
  865. }
  866. });
  867. callHook(onLeave, [el, resolve]);
  868. },
  869. onEnterCancelled(el) {
  870. finishEnter(el, false);
  871. callHook(onEnterCancelled, [el]);
  872. },
  873. onAppearCancelled(el) {
  874. finishEnter(el, true);
  875. callHook(onAppearCancelled, [el]);
  876. },
  877. onLeaveCancelled(el) {
  878. finishLeave(el);
  879. callHook(onLeaveCancelled, [el]);
  880. }
  881. });
  882. }
  883. function normalizeDuration(duration) {
  884. if (duration == null) {
  885. return null;
  886. }
  887. else if (isObject(duration)) {
  888. return [NumberOf(duration.enter), NumberOf(duration.leave)];
  889. }
  890. else {
  891. const n = NumberOf(duration);
  892. return [n, n];
  893. }
  894. }
  895. function NumberOf(val) {
  896. const res = toNumber(val);
  897. if ((process.env.NODE_ENV !== 'production'))
  898. validateDuration(res);
  899. return res;
  900. }
  901. function validateDuration(val) {
  902. if (typeof val !== 'number') {
  903. warn(`<transition> explicit duration is not a valid number - ` +
  904. `got ${JSON.stringify(val)}.`);
  905. }
  906. else if (isNaN(val)) {
  907. warn(`<transition> explicit duration is NaN - ` +
  908. 'the duration expression might be incorrect.');
  909. }
  910. }
  911. function addTransitionClass(el, cls) {
  912. cls.split(/\s+/).forEach(c => c && el.classList.add(c));
  913. (el._vtc ||
  914. (el._vtc = new Set())).add(cls);
  915. }
  916. function removeTransitionClass(el, cls) {
  917. cls.split(/\s+/).forEach(c => c && el.classList.remove(c));
  918. const { _vtc } = el;
  919. if (_vtc) {
  920. _vtc.delete(cls);
  921. if (!_vtc.size) {
  922. el._vtc = undefined;
  923. }
  924. }
  925. }
  926. function nextFrame(cb) {
  927. requestAnimationFrame(() => {
  928. requestAnimationFrame(cb);
  929. });
  930. }
  931. let endId = 0;
  932. function whenTransitionEnds(el, expectedType, explicitTimeout, resolve) {
  933. const id = (el._endId = ++endId);
  934. const resolveIfNotStale = () => {
  935. if (id === el._endId) {
  936. resolve();
  937. }
  938. };
  939. if (explicitTimeout) {
  940. return setTimeout(resolveIfNotStale, explicitTimeout);
  941. }
  942. const { type, timeout, propCount } = getTransitionInfo(el, expectedType);
  943. if (!type) {
  944. return resolve();
  945. }
  946. const endEvent = type + 'end';
  947. let ended = 0;
  948. const end = () => {
  949. el.removeEventListener(endEvent, onEnd);
  950. resolveIfNotStale();
  951. };
  952. const onEnd = (e) => {
  953. if (e.target === el && ++ended >= propCount) {
  954. end();
  955. }
  956. };
  957. setTimeout(() => {
  958. if (ended < propCount) {
  959. end();
  960. }
  961. }, timeout + 1);
  962. el.addEventListener(endEvent, onEnd);
  963. }
  964. function getTransitionInfo(el, expectedType) {
  965. const styles = window.getComputedStyle(el);
  966. // JSDOM may return undefined for transition properties
  967. const getStyleProperties = (key) => (styles[key] || '').split(', ');
  968. const transitionDelays = getStyleProperties(TRANSITION + 'Delay');
  969. const transitionDurations = getStyleProperties(TRANSITION + 'Duration');
  970. const transitionTimeout = getTimeout(transitionDelays, transitionDurations);
  971. const animationDelays = getStyleProperties(ANIMATION + 'Delay');
  972. const animationDurations = getStyleProperties(ANIMATION + 'Duration');
  973. const animationTimeout = getTimeout(animationDelays, animationDurations);
  974. let type = null;
  975. let timeout = 0;
  976. let propCount = 0;
  977. /* istanbul ignore if */
  978. if (expectedType === TRANSITION) {
  979. if (transitionTimeout > 0) {
  980. type = TRANSITION;
  981. timeout = transitionTimeout;
  982. propCount = transitionDurations.length;
  983. }
  984. }
  985. else if (expectedType === ANIMATION) {
  986. if (animationTimeout > 0) {
  987. type = ANIMATION;
  988. timeout = animationTimeout;
  989. propCount = animationDurations.length;
  990. }
  991. }
  992. else {
  993. timeout = Math.max(transitionTimeout, animationTimeout);
  994. type =
  995. timeout > 0
  996. ? transitionTimeout > animationTimeout
  997. ? TRANSITION
  998. : ANIMATION
  999. : null;
  1000. propCount = type
  1001. ? type === TRANSITION
  1002. ? transitionDurations.length
  1003. : animationDurations.length
  1004. : 0;
  1005. }
  1006. const hasTransform = type === TRANSITION &&
  1007. /\b(transform|all)(,|$)/.test(styles[TRANSITION + 'Property']);
  1008. return {
  1009. type,
  1010. timeout,
  1011. propCount,
  1012. hasTransform
  1013. };
  1014. }
  1015. function getTimeout(delays, durations) {
  1016. while (delays.length < durations.length) {
  1017. delays = delays.concat(delays);
  1018. }
  1019. return Math.max(...durations.map((d, i) => toMs(d) + toMs(delays[i])));
  1020. }
  1021. // Old versions of Chromium (below 61.0.3163.100) formats floating pointer
  1022. // numbers in a locale-dependent way, using a comma instead of a dot.
  1023. // If comma is not replaced with a dot, the input will be rounded down
  1024. // (i.e. acting as a floor function) causing unexpected behaviors
  1025. function toMs(s) {
  1026. return Number(s.slice(0, -1).replace(',', '.')) * 1000;
  1027. }
  1028. // synchronously force layout to put elements into a certain state
  1029. function forceReflow() {
  1030. return document.body.offsetHeight;
  1031. }
  1032. const positionMap = new WeakMap();
  1033. const newPositionMap = new WeakMap();
  1034. const TransitionGroupImpl = {
  1035. name: 'TransitionGroup',
  1036. props: /*#__PURE__*/ extend({}, TransitionPropsValidators, {
  1037. tag: String,
  1038. moveClass: String
  1039. }),
  1040. setup(props, { slots }) {
  1041. const instance = getCurrentInstance();
  1042. const state = useTransitionState();
  1043. let prevChildren;
  1044. let children;
  1045. onUpdated(() => {
  1046. // children is guaranteed to exist after initial render
  1047. if (!prevChildren.length) {
  1048. return;
  1049. }
  1050. const moveClass = props.moveClass || `${props.name || 'v'}-move`;
  1051. if (!hasCSSTransform(prevChildren[0].el, instance.vnode.el, moveClass)) {
  1052. return;
  1053. }
  1054. // we divide the work into three loops to avoid mixing DOM reads and writes
  1055. // in each iteration - which helps prevent layout thrashing.
  1056. prevChildren.forEach(callPendingCbs);
  1057. prevChildren.forEach(recordPosition);
  1058. const movedChildren = prevChildren.filter(applyTranslation);
  1059. // force reflow to put everything in position
  1060. forceReflow();
  1061. movedChildren.forEach(c => {
  1062. const el = c.el;
  1063. const style = el.style;
  1064. addTransitionClass(el, moveClass);
  1065. style.transform = style.webkitTransform = style.transitionDuration = '';
  1066. const cb = (el._moveCb = (e) => {
  1067. if (e && e.target !== el) {
  1068. return;
  1069. }
  1070. if (!e || /transform$/.test(e.propertyName)) {
  1071. el.removeEventListener('transitionend', cb);
  1072. el._moveCb = null;
  1073. removeTransitionClass(el, moveClass);
  1074. }
  1075. });
  1076. el.addEventListener('transitionend', cb);
  1077. });
  1078. });
  1079. return () => {
  1080. const rawProps = toRaw(props);
  1081. const cssTransitionProps = resolveTransitionProps(rawProps);
  1082. let tag = rawProps.tag || Fragment;
  1083. prevChildren = children;
  1084. children = slots.default ? getTransitionRawChildren(slots.default()) : [];
  1085. for (let i = 0; i < children.length; i++) {
  1086. const child = children[i];
  1087. if (child.key != null) {
  1088. setTransitionHooks(child, resolveTransitionHooks(child, cssTransitionProps, state, instance));
  1089. }
  1090. else if ((process.env.NODE_ENV !== 'production')) {
  1091. warn(`<TransitionGroup> children must be keyed.`);
  1092. }
  1093. }
  1094. if (prevChildren) {
  1095. for (let i = 0; i < prevChildren.length; i++) {
  1096. const child = prevChildren[i];
  1097. setTransitionHooks(child, resolveTransitionHooks(child, cssTransitionProps, state, instance));
  1098. positionMap.set(child, child.el.getBoundingClientRect());
  1099. }
  1100. }
  1101. return createVNode(tag, null, children);
  1102. };
  1103. }
  1104. };
  1105. const TransitionGroup = TransitionGroupImpl;
  1106. function callPendingCbs(c) {
  1107. const el = c.el;
  1108. if (el._moveCb) {
  1109. el._moveCb();
  1110. }
  1111. if (el._enterCb) {
  1112. el._enterCb();
  1113. }
  1114. }
  1115. function recordPosition(c) {
  1116. newPositionMap.set(c, c.el.getBoundingClientRect());
  1117. }
  1118. function applyTranslation(c) {
  1119. const oldPos = positionMap.get(c);
  1120. const newPos = newPositionMap.get(c);
  1121. const dx = oldPos.left - newPos.left;
  1122. const dy = oldPos.top - newPos.top;
  1123. if (dx || dy) {
  1124. const s = c.el.style;
  1125. s.transform = s.webkitTransform = `translate(${dx}px,${dy}px)`;
  1126. s.transitionDuration = '0s';
  1127. return c;
  1128. }
  1129. }
  1130. function hasCSSTransform(el, root, moveClass) {
  1131. // Detect whether an element with the move class applied has
  1132. // CSS transitions. Since the element may be inside an entering
  1133. // transition at this very moment, we make a clone of it and remove
  1134. // all other transition classes applied to ensure only the move class
  1135. // is applied.
  1136. const clone = el.cloneNode();
  1137. if (el._vtc) {
  1138. el._vtc.forEach(cls => {
  1139. cls.split(/\s+/).forEach(c => c && clone.classList.remove(c));
  1140. });
  1141. }
  1142. moveClass.split(/\s+/).forEach(c => c && clone.classList.add(c));
  1143. clone.style.display = 'none';
  1144. const container = (root.nodeType === 1 ? root : root.parentNode);
  1145. container.appendChild(clone);
  1146. const { hasTransform } = getTransitionInfo(clone);
  1147. container.removeChild(clone);
  1148. return hasTransform;
  1149. }
  1150. const getModelAssigner = (vnode) => {
  1151. const fn = vnode.props['onUpdate:modelValue'];
  1152. return isArray(fn) ? value => invokeArrayFns(fn, value) : fn;
  1153. };
  1154. function onCompositionStart(e) {
  1155. e.target.composing = true;
  1156. }
  1157. function onCompositionEnd(e) {
  1158. const target = e.target;
  1159. if (target.composing) {
  1160. target.composing = false;
  1161. trigger(target, 'input');
  1162. }
  1163. }
  1164. function trigger(el, type) {
  1165. const e = document.createEvent('HTMLEvents');
  1166. e.initEvent(type, true, true);
  1167. el.dispatchEvent(e);
  1168. }
  1169. // We are exporting the v-model runtime directly as vnode hooks so that it can
  1170. // be tree-shaken in case v-model is never used.
  1171. const vModelText = {
  1172. created(el, { modifiers: { lazy, trim, number } }, vnode) {
  1173. el._assign = getModelAssigner(vnode);
  1174. const castToNumber = number || (vnode.props && vnode.props.type === 'number');
  1175. addEventListener(el, lazy ? 'change' : 'input', e => {
  1176. if (e.target.composing)
  1177. return;
  1178. let domValue = el.value;
  1179. if (trim) {
  1180. domValue = domValue.trim();
  1181. }
  1182. else if (castToNumber) {
  1183. domValue = toNumber(domValue);
  1184. }
  1185. el._assign(domValue);
  1186. });
  1187. if (trim) {
  1188. addEventListener(el, 'change', () => {
  1189. el.value = el.value.trim();
  1190. });
  1191. }
  1192. if (!lazy) {
  1193. addEventListener(el, 'compositionstart', onCompositionStart);
  1194. addEventListener(el, 'compositionend', onCompositionEnd);
  1195. // Safari < 10.2 & UIWebView doesn't fire compositionend when
  1196. // switching focus before confirming composition choice
  1197. // this also fixes the issue where some browsers e.g. iOS Chrome
  1198. // fires "change" instead of "input" on autocomplete.
  1199. addEventListener(el, 'change', onCompositionEnd);
  1200. }
  1201. },
  1202. // set value on mounted so it's after min/max for type="range"
  1203. mounted(el, { value }) {
  1204. el.value = value == null ? '' : value;
  1205. },
  1206. beforeUpdate(el, { value, modifiers: { lazy, trim, number } }, vnode) {
  1207. el._assign = getModelAssigner(vnode);
  1208. // avoid clearing unresolved text. #2302
  1209. if (el.composing)
  1210. return;
  1211. if (document.activeElement === el) {
  1212. if (lazy) {
  1213. return;
  1214. }
  1215. if (trim && el.value.trim() === value) {
  1216. return;
  1217. }
  1218. if ((number || el.type === 'number') && toNumber(el.value) === value) {
  1219. return;
  1220. }
  1221. }
  1222. const newValue = value == null ? '' : value;
  1223. if (el.value !== newValue) {
  1224. el.value = newValue;
  1225. }
  1226. }
  1227. };
  1228. const vModelCheckbox = {
  1229. // #4096 array checkboxes need to be deep traversed
  1230. deep: true,
  1231. created(el, _, vnode) {
  1232. el._assign = getModelAssigner(vnode);
  1233. addEventListener(el, 'change', () => {
  1234. const modelValue = el._modelValue;
  1235. const elementValue = getValue(el);
  1236. const checked = el.checked;
  1237. const assign = el._assign;
  1238. if (isArray(modelValue)) {
  1239. const index = looseIndexOf(modelValue, elementValue);
  1240. const found = index !== -1;
  1241. if (checked && !found) {
  1242. assign(modelValue.concat(elementValue));
  1243. }
  1244. else if (!checked && found) {
  1245. const filtered = [...modelValue];
  1246. filtered.splice(index, 1);
  1247. assign(filtered);
  1248. }
  1249. }
  1250. else if (isSet(modelValue)) {
  1251. const cloned = new Set(modelValue);
  1252. if (checked) {
  1253. cloned.add(elementValue);
  1254. }
  1255. else {
  1256. cloned.delete(elementValue);
  1257. }
  1258. assign(cloned);
  1259. }
  1260. else {
  1261. assign(getCheckboxValue(el, checked));
  1262. }
  1263. });
  1264. },
  1265. // set initial checked on mount to wait for true-value/false-value
  1266. mounted: setChecked,
  1267. beforeUpdate(el, binding, vnode) {
  1268. el._assign = getModelAssigner(vnode);
  1269. setChecked(el, binding, vnode);
  1270. }
  1271. };
  1272. function setChecked(el, { value, oldValue }, vnode) {
  1273. el._modelValue = value;
  1274. if (isArray(value)) {
  1275. el.checked = looseIndexOf(value, vnode.props.value) > -1;
  1276. }
  1277. else if (isSet(value)) {
  1278. el.checked = value.has(vnode.props.value);
  1279. }
  1280. else if (value !== oldValue) {
  1281. el.checked = looseEqual(value, getCheckboxValue(el, true));
  1282. }
  1283. }
  1284. const vModelRadio = {
  1285. created(el, { value }, vnode) {
  1286. el.checked = looseEqual(value, vnode.props.value);
  1287. el._assign = getModelAssigner(vnode);
  1288. addEventListener(el, 'change', () => {
  1289. el._assign(getValue(el));
  1290. });
  1291. },
  1292. beforeUpdate(el, { value, oldValue }, vnode) {
  1293. el._assign = getModelAssigner(vnode);
  1294. if (value !== oldValue) {
  1295. el.checked = looseEqual(value, vnode.props.value);
  1296. }
  1297. }
  1298. };
  1299. const vModelSelect = {
  1300. // <select multiple> value need to be deep traversed
  1301. deep: true,
  1302. created(el, { value, modifiers: { number } }, vnode) {
  1303. const isSetModel = isSet(value);
  1304. addEventListener(el, 'change', () => {
  1305. const selectedVal = Array.prototype.filter
  1306. .call(el.options, (o) => o.selected)
  1307. .map((o) => number ? toNumber(getValue(o)) : getValue(o));
  1308. el._assign(el.multiple
  1309. ? isSetModel
  1310. ? new Set(selectedVal)
  1311. : selectedVal
  1312. : selectedVal[0]);
  1313. });
  1314. el._assign = getModelAssigner(vnode);
  1315. },
  1316. // set value in mounted & updated because <select> relies on its children
  1317. // <option>s.
  1318. mounted(el, { value }) {
  1319. setSelected(el, value);
  1320. },
  1321. beforeUpdate(el, _binding, vnode) {
  1322. el._assign = getModelAssigner(vnode);
  1323. },
  1324. updated(el, { value }) {
  1325. setSelected(el, value);
  1326. }
  1327. };
  1328. function setSelected(el, value) {
  1329. const isMultiple = el.multiple;
  1330. if (isMultiple && !isArray(value) && !isSet(value)) {
  1331. (process.env.NODE_ENV !== 'production') &&
  1332. warn(`<select multiple v-model> expects an Array or Set value for its binding, ` +
  1333. `but got ${Object.prototype.toString.call(value).slice(8, -1)}.`);
  1334. return;
  1335. }
  1336. for (let i = 0, l = el.options.length; i < l; i++) {
  1337. const option = el.options[i];
  1338. const optionValue = getValue(option);
  1339. if (isMultiple) {
  1340. if (isArray(value)) {
  1341. option.selected = looseIndexOf(value, optionValue) > -1;
  1342. }
  1343. else {
  1344. option.selected = value.has(optionValue);
  1345. }
  1346. }
  1347. else {
  1348. if (looseEqual(getValue(option), value)) {
  1349. if (el.selectedIndex !== i)
  1350. el.selectedIndex = i;
  1351. return;
  1352. }
  1353. }
  1354. }
  1355. if (!isMultiple && el.selectedIndex !== -1) {
  1356. el.selectedIndex = -1;
  1357. }
  1358. }
  1359. // retrieve raw value set via :value bindings
  1360. function getValue(el) {
  1361. return '_value' in el ? el._value : el.value;
  1362. }
  1363. // retrieve raw value for true-value and false-value set via :true-value or :false-value bindings
  1364. function getCheckboxValue(el, checked) {
  1365. const key = checked ? '_trueValue' : '_falseValue';
  1366. return key in el ? el[key] : checked;
  1367. }
  1368. const vModelDynamic = {
  1369. created(el, binding, vnode) {
  1370. callModelHook(el, binding, vnode, null, 'created');
  1371. },
  1372. mounted(el, binding, vnode) {
  1373. callModelHook(el, binding, vnode, null, 'mounted');
  1374. },
  1375. beforeUpdate(el, binding, vnode, prevVNode) {
  1376. callModelHook(el, binding, vnode, prevVNode, 'beforeUpdate');
  1377. },
  1378. updated(el, binding, vnode, prevVNode) {
  1379. callModelHook(el, binding, vnode, prevVNode, 'updated');
  1380. }
  1381. };
  1382. function callModelHook(el, binding, vnode, prevVNode, hook) {
  1383. let modelToUse;
  1384. switch (el.tagName) {
  1385. case 'SELECT':
  1386. modelToUse = vModelSelect;
  1387. break;
  1388. case 'TEXTAREA':
  1389. modelToUse = vModelText;
  1390. break;
  1391. default:
  1392. switch (vnode.props && vnode.props.type) {
  1393. case 'checkbox':
  1394. modelToUse = vModelCheckbox;
  1395. break;
  1396. case 'radio':
  1397. modelToUse = vModelRadio;
  1398. break;
  1399. default:
  1400. modelToUse = vModelText;
  1401. }
  1402. }
  1403. const fn = modelToUse[hook];
  1404. fn && fn(el, binding, vnode, prevVNode);
  1405. }
  1406. // SSR vnode transforms, only used when user includes client-oriented render
  1407. // function in SSR
  1408. function initVModelForSSR() {
  1409. vModelText.getSSRProps = ({ value }) => ({ value });
  1410. vModelRadio.getSSRProps = ({ value }, vnode) => {
  1411. if (vnode.props && looseEqual(vnode.props.value, value)) {
  1412. return { checked: true };
  1413. }
  1414. };
  1415. vModelCheckbox.getSSRProps = ({ value }, vnode) => {
  1416. if (isArray(value)) {
  1417. if (vnode.props && looseIndexOf(value, vnode.props.value) > -1) {
  1418. return { checked: true };
  1419. }
  1420. }
  1421. else if (isSet(value)) {
  1422. if (vnode.props && value.has(vnode.props.value)) {
  1423. return { checked: true };
  1424. }
  1425. }
  1426. else if (value) {
  1427. return { checked: true };
  1428. }
  1429. };
  1430. }
  1431. const systemModifiers = ['ctrl', 'shift', 'alt', 'meta'];
  1432. const modifierGuards = {
  1433. stop: e => e.stopPropagation(),
  1434. prevent: e => e.preventDefault(),
  1435. self: e => e.target !== e.currentTarget,
  1436. ctrl: e => !e.ctrlKey,
  1437. shift: e => !e.shiftKey,
  1438. alt: e => !e.altKey,
  1439. meta: e => !e.metaKey,
  1440. left: e => 'button' in e && e.button !== 0,
  1441. middle: e => 'button' in e && e.button !== 1,
  1442. right: e => 'button' in e && e.button !== 2,
  1443. exact: (e, modifiers) => systemModifiers.some(m => e[`${m}Key`] && !modifiers.includes(m))
  1444. };
  1445. /**
  1446. * @private
  1447. */
  1448. const withModifiers = (fn, modifiers) => {
  1449. return (event, ...args) => {
  1450. for (let i = 0; i < modifiers.length; i++) {
  1451. const guard = modifierGuards[modifiers[i]];
  1452. if (guard && guard(event, modifiers))
  1453. return;
  1454. }
  1455. return fn(event, ...args);
  1456. };
  1457. };
  1458. // Kept for 2.x compat.
  1459. // Note: IE11 compat for `spacebar` and `del` is removed for now.
  1460. const keyNames = {
  1461. esc: 'escape',
  1462. space: ' ',
  1463. up: 'arrow-up',
  1464. left: 'arrow-left',
  1465. right: 'arrow-right',
  1466. down: 'arrow-down',
  1467. delete: 'backspace'
  1468. };
  1469. /**
  1470. * @private
  1471. */
  1472. const withKeys = (fn, modifiers) => {
  1473. return (event) => {
  1474. if (!('key' in event)) {
  1475. return;
  1476. }
  1477. const eventKey = hyphenate(event.key);
  1478. if (modifiers.some(k => k === eventKey || keyNames[k] === eventKey)) {
  1479. return fn(event);
  1480. }
  1481. };
  1482. };
  1483. const vShow = {
  1484. beforeMount(el, { value }, { transition }) {
  1485. el._vod = el.style.display === 'none' ? '' : el.style.display;
  1486. if (transition && value) {
  1487. transition.beforeEnter(el);
  1488. }
  1489. else {
  1490. setDisplay(el, value);
  1491. }
  1492. },
  1493. mounted(el, { value }, { transition }) {
  1494. if (transition && value) {
  1495. transition.enter(el);
  1496. }
  1497. },
  1498. updated(el, { value, oldValue }, { transition }) {
  1499. if (!value === !oldValue)
  1500. return;
  1501. if (transition) {
  1502. if (value) {
  1503. transition.beforeEnter(el);
  1504. setDisplay(el, true);
  1505. transition.enter(el);
  1506. }
  1507. else {
  1508. transition.leave(el, () => {
  1509. setDisplay(el, false);
  1510. });
  1511. }
  1512. }
  1513. else {
  1514. setDisplay(el, value);
  1515. }
  1516. },
  1517. beforeUnmount(el, { value }) {
  1518. setDisplay(el, value);
  1519. }
  1520. };
  1521. function setDisplay(el, value) {
  1522. el.style.display = value ? el._vod : 'none';
  1523. }
  1524. // SSR vnode transforms, only used when user includes client-oriented render
  1525. // function in SSR
  1526. function initVShowForSSR() {
  1527. vShow.getSSRProps = ({ value }) => {
  1528. if (!value) {
  1529. return { style: { display: 'none' } };
  1530. }
  1531. };
  1532. }
  1533. const rendererOptions = /*#__PURE__*/ extend({ patchProp }, nodeOps);
  1534. // lazy create the renderer - this makes core renderer logic tree-shakable
  1535. // in case the user only imports reactivity utilities from Vue.
  1536. let renderer;
  1537. let enabledHydration = false;
  1538. function ensureRenderer() {
  1539. return (renderer ||
  1540. (renderer = createRenderer(rendererOptions)));
  1541. }
  1542. function ensureHydrationRenderer() {
  1543. renderer = enabledHydration
  1544. ? renderer
  1545. : createHydrationRenderer(rendererOptions);
  1546. enabledHydration = true;
  1547. return renderer;
  1548. }
  1549. // use explicit type casts here to avoid import() calls in rolled-up d.ts
  1550. const render = ((...args) => {
  1551. ensureRenderer().render(...args);
  1552. });
  1553. const hydrate = ((...args) => {
  1554. ensureHydrationRenderer().hydrate(...args);
  1555. });
  1556. const createApp = ((...args) => {
  1557. const app = ensureRenderer().createApp(...args);
  1558. if ((process.env.NODE_ENV !== 'production')) {
  1559. injectNativeTagCheck(app);
  1560. injectCompilerOptionsCheck(app);
  1561. }
  1562. const { mount } = app;
  1563. app.mount = (containerOrSelector) => {
  1564. const container = normalizeContainer(containerOrSelector);
  1565. if (!container)
  1566. return;
  1567. const component = app._component;
  1568. if (!isFunction(component) && !component.render && !component.template) {
  1569. // __UNSAFE__
  1570. // Reason: potential execution of JS expressions in in-DOM template.
  1571. // The user must make sure the in-DOM template is trusted. If it's
  1572. // rendered by the server, the template should not contain any user data.
  1573. component.template = container.innerHTML;
  1574. }
  1575. // clear content before mounting
  1576. container.innerHTML = '';
  1577. const proxy = mount(container, false, container instanceof SVGElement);
  1578. if (container instanceof Element) {
  1579. container.removeAttribute('v-cloak');
  1580. container.setAttribute('data-v-app', '');
  1581. }
  1582. return proxy;
  1583. };
  1584. return app;
  1585. });
  1586. const createSSRApp = ((...args) => {
  1587. const app = ensureHydrationRenderer().createApp(...args);
  1588. if ((process.env.NODE_ENV !== 'production')) {
  1589. injectNativeTagCheck(app);
  1590. injectCompilerOptionsCheck(app);
  1591. }
  1592. const { mount } = app;
  1593. app.mount = (containerOrSelector) => {
  1594. const container = normalizeContainer(containerOrSelector);
  1595. if (container) {
  1596. return mount(container, true, container instanceof SVGElement);
  1597. }
  1598. };
  1599. return app;
  1600. });
  1601. function injectNativeTagCheck(app) {
  1602. // Inject `isNativeTag`
  1603. // this is used for component name validation (dev only)
  1604. Object.defineProperty(app.config, 'isNativeTag', {
  1605. value: (tag) => isHTMLTag(tag) || isSVGTag(tag),
  1606. writable: false
  1607. });
  1608. }
  1609. // dev only
  1610. function injectCompilerOptionsCheck(app) {
  1611. if (isRuntimeOnly()) {
  1612. const isCustomElement = app.config.isCustomElement;
  1613. Object.defineProperty(app.config, 'isCustomElement', {
  1614. get() {
  1615. return isCustomElement;
  1616. },
  1617. set() {
  1618. warn(`The \`isCustomElement\` config option is deprecated. Use ` +
  1619. `\`compilerOptions.isCustomElement\` instead.`);
  1620. }
  1621. });
  1622. const compilerOptions = app.config.compilerOptions;
  1623. const msg = `The \`compilerOptions\` config option is only respected when using ` +
  1624. `a build of Vue.js that includes the runtime compiler (aka "full build"). ` +
  1625. `Since you are using the runtime-only build, \`compilerOptions\` ` +
  1626. `must be passed to \`@vue/compiler-dom\` in the build setup instead.\n` +
  1627. `- For vue-loader: pass it via vue-loader's \`compilerOptions\` loader option.\n` +
  1628. `- For vue-cli: see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader\n` +
  1629. `- For vite: pass it via @vitejs/plugin-vue options. See https://github.com/vitejs/vite/tree/main/packages/plugin-vue#example-for-passing-options-to-vuecompiler-dom`;
  1630. Object.defineProperty(app.config, 'compilerOptions', {
  1631. get() {
  1632. warn(msg);
  1633. return compilerOptions;
  1634. },
  1635. set() {
  1636. warn(msg);
  1637. }
  1638. });
  1639. }
  1640. }
  1641. function normalizeContainer(container) {
  1642. if (isString(container)) {
  1643. const res = document.querySelector(container);
  1644. if ((process.env.NODE_ENV !== 'production') && !res) {
  1645. warn(`Failed to mount app: mount target selector "${container}" returned null.`);
  1646. }
  1647. return res;
  1648. }
  1649. if ((process.env.NODE_ENV !== 'production') &&
  1650. window.ShadowRoot &&
  1651. container instanceof window.ShadowRoot &&
  1652. container.mode === 'closed') {
  1653. warn(`mounting on a ShadowRoot with \`{mode: "closed"}\` may lead to unpredictable bugs`);
  1654. }
  1655. return container;
  1656. }
  1657. let ssrDirectiveInitialized = false;
  1658. /**
  1659. * @internal
  1660. */
  1661. const initDirectivesForSSR = () => {
  1662. if (!ssrDirectiveInitialized) {
  1663. ssrDirectiveInitialized = true;
  1664. initVModelForSSR();
  1665. initVShowForSSR();
  1666. }
  1667. }
  1668. ;
  1669. export { Transition, TransitionGroup, VueElement, createApp, createSSRApp, defineCustomElement, defineSSRCustomElement, hydrate, initDirectivesForSSR, render, useCssModule, useCssVars, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, withKeys, withModifiers };