runtime-dom.cjs.js 57 KB

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