How to use setVarsOnVNode method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

runtime-dom.esm-bundler.js

Source: runtime-dom.esm-bundler.js Github

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

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)