runtime-dom.esm-bundler.js 59 KB

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