runtime-dom.cjs.prod.js 53 KB

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