|
|
|
|
|
|
|
|
|
|
|
'use strict'; |
|
|
|
Object.defineProperty(exports, '__esModule', { value: true }); |
|
|
|
var runtimeCore = require('@vue/runtime-core'); |
|
var shared = require('@vue/shared'); |
|
|
|
const svgNS = "http://www.w3.org/2000/svg"; |
|
const mathmlNS = "http://www.w3.org/1998/Math/MathML"; |
|
const doc = typeof document !== "undefined" ? document : null; |
|
const templateContainer = doc && doc.createElement("template"); |
|
const nodeOps = { |
|
insert: (child, parent, anchor) => { |
|
parent.insertBefore(child, anchor || null); |
|
}, |
|
remove: (child) => { |
|
const parent = child.parentNode; |
|
if (parent) { |
|
parent.removeChild(child); |
|
} |
|
}, |
|
createElement: (tag, namespace, is, props) => { |
|
const el = namespace === "svg" ? doc.createElementNS(svgNS, tag) : namespace === "mathml" ? doc.createElementNS(mathmlNS, tag) : doc.createElement(tag, is ? { is } : void 0); |
|
if (tag === "select" && props && props.multiple != null) { |
|
el.setAttribute("multiple", props.multiple); |
|
} |
|
return el; |
|
}, |
|
createText: (text) => doc.createTextNode(text), |
|
createComment: (text) => doc.createComment(text), |
|
setText: (node, text) => { |
|
node.nodeValue = text; |
|
}, |
|
setElementText: (el, text) => { |
|
el.textContent = text; |
|
}, |
|
parentNode: (node) => node.parentNode, |
|
nextSibling: (node) => node.nextSibling, |
|
querySelector: (selector) => doc.querySelector(selector), |
|
setScopeId(el, id) { |
|
el.setAttribute(id, ""); |
|
}, |
|
|
|
|
|
|
|
|
|
insertStaticContent(content, parent, anchor, namespace, start, end) { |
|
const before = anchor ? anchor.previousSibling : parent.lastChild; |
|
if (start && (start === end || start.nextSibling)) { |
|
while (true) { |
|
parent.insertBefore(start.cloneNode(true), anchor); |
|
if (start === end || !(start = start.nextSibling)) |
|
break; |
|
} |
|
} else { |
|
templateContainer.innerHTML = namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content; |
|
const template = templateContainer.content; |
|
if (namespace === "svg" || namespace === "mathml") { |
|
const wrapper = template.firstChild; |
|
while (wrapper.firstChild) { |
|
template.appendChild(wrapper.firstChild); |
|
} |
|
template.removeChild(wrapper); |
|
} |
|
parent.insertBefore(template, anchor); |
|
} |
|
return [ |
|
|
|
before ? before.nextSibling : parent.firstChild, |
|
|
|
anchor ? anchor.previousSibling : parent.lastChild |
|
]; |
|
} |
|
}; |
|
|
|
const TRANSITION = "transition"; |
|
const ANIMATION = "animation"; |
|
const vtcKey = Symbol("_vtc"); |
|
const Transition = (props, { slots }) => runtimeCore.h(runtimeCore.BaseTransition, resolveTransitionProps(props), slots); |
|
Transition.displayName = "Transition"; |
|
const DOMTransitionPropsValidators = { |
|
name: String, |
|
type: String, |
|
css: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
duration: [String, Number, Object], |
|
enterFromClass: String, |
|
enterActiveClass: String, |
|
enterToClass: String, |
|
appearFromClass: String, |
|
appearActiveClass: String, |
|
appearToClass: String, |
|
leaveFromClass: String, |
|
leaveActiveClass: String, |
|
leaveToClass: String |
|
}; |
|
const TransitionPropsValidators = Transition.props = shared.extend( |
|
{}, |
|
runtimeCore.BaseTransitionPropsValidators, |
|
DOMTransitionPropsValidators |
|
); |
|
const callHook = (hook, args = []) => { |
|
if (shared.isArray(hook)) { |
|
hook.forEach((h2) => h2(...args)); |
|
} else if (hook) { |
|
hook(...args); |
|
} |
|
}; |
|
const hasExplicitCallback = (hook) => { |
|
return hook ? shared.isArray(hook) ? hook.some((h2) => h2.length > 1) : hook.length > 1 : false; |
|
}; |
|
function resolveTransitionProps(rawProps) { |
|
const baseProps = {}; |
|
for (const key in rawProps) { |
|
if (!(key in DOMTransitionPropsValidators)) { |
|
baseProps[key] = rawProps[key]; |
|
} |
|
} |
|
if (rawProps.css === false) { |
|
return baseProps; |
|
} |
|
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; |
|
const durations = normalizeDuration(duration); |
|
const enterDuration = durations && durations[0]; |
|
const leaveDuration = durations && durations[1]; |
|
const { |
|
onBeforeEnter, |
|
onEnter, |
|
onEnterCancelled, |
|
onLeave, |
|
onLeaveCancelled, |
|
onBeforeAppear = onBeforeEnter, |
|
onAppear = onEnter, |
|
onAppearCancelled = onEnterCancelled |
|
} = baseProps; |
|
const finishEnter = (el, isAppear, done) => { |
|
removeTransitionClass(el, isAppear ? appearToClass : enterToClass); |
|
removeTransitionClass(el, isAppear ? appearActiveClass : enterActiveClass); |
|
done && done(); |
|
}; |
|
const finishLeave = (el, done) => { |
|
el._isLeaving = false; |
|
removeTransitionClass(el, leaveFromClass); |
|
removeTransitionClass(el, leaveToClass); |
|
removeTransitionClass(el, leaveActiveClass); |
|
done && done(); |
|
}; |
|
const makeEnterHook = (isAppear) => { |
|
return (el, done) => { |
|
const hook = isAppear ? onAppear : onEnter; |
|
const resolve = () => finishEnter(el, isAppear, done); |
|
callHook(hook, [el, resolve]); |
|
nextFrame(() => { |
|
removeTransitionClass(el, isAppear ? appearFromClass : enterFromClass); |
|
addTransitionClass(el, isAppear ? appearToClass : enterToClass); |
|
if (!hasExplicitCallback(hook)) { |
|
whenTransitionEnds(el, type, enterDuration, resolve); |
|
} |
|
}); |
|
}; |
|
}; |
|
return shared.extend(baseProps, { |
|
onBeforeEnter(el) { |
|
callHook(onBeforeEnter, [el]); |
|
addTransitionClass(el, enterFromClass); |
|
addTransitionClass(el, enterActiveClass); |
|
}, |
|
onBeforeAppear(el) { |
|
callHook(onBeforeAppear, [el]); |
|
addTransitionClass(el, appearFromClass); |
|
addTransitionClass(el, appearActiveClass); |
|
}, |
|
onEnter: makeEnterHook(false), |
|
onAppear: makeEnterHook(true), |
|
onLeave(el, done) { |
|
el._isLeaving = true; |
|
const resolve = () => finishLeave(el, done); |
|
addTransitionClass(el, leaveFromClass); |
|
forceReflow(); |
|
addTransitionClass(el, leaveActiveClass); |
|
nextFrame(() => { |
|
if (!el._isLeaving) { |
|
return; |
|
} |
|
removeTransitionClass(el, leaveFromClass); |
|
addTransitionClass(el, leaveToClass); |
|
if (!hasExplicitCallback(onLeave)) { |
|
whenTransitionEnds(el, type, leaveDuration, resolve); |
|
} |
|
}); |
|
callHook(onLeave, [el, resolve]); |
|
}, |
|
onEnterCancelled(el) { |
|
finishEnter(el, false); |
|
callHook(onEnterCancelled, [el]); |
|
}, |
|
onAppearCancelled(el) { |
|
finishEnter(el, true); |
|
callHook(onAppearCancelled, [el]); |
|
}, |
|
onLeaveCancelled(el) { |
|
finishLeave(el); |
|
callHook(onLeaveCancelled, [el]); |
|
} |
|
}); |
|
} |
|
function normalizeDuration(duration) { |
|
if (duration == null) { |
|
return null; |
|
} else if (shared.isObject(duration)) { |
|
return [NumberOf(duration.enter), NumberOf(duration.leave)]; |
|
} else { |
|
const n = NumberOf(duration); |
|
return [n, n]; |
|
} |
|
} |
|
function NumberOf(val) { |
|
const res = shared.toNumber(val); |
|
{ |
|
runtimeCore.assertNumber(res, "<transition> explicit duration"); |
|
} |
|
return res; |
|
} |
|
function addTransitionClass(el, cls) { |
|
cls.split(/\s+/).forEach((c) => c && el.classList.add(c)); |
|
(el[vtcKey] || (el[vtcKey] = new Set())).add(cls); |
|
} |
|
function removeTransitionClass(el, cls) { |
|
cls.split(/\s+/).forEach((c) => c && el.classList.remove(c)); |
|
const _vtc = el[vtcKey]; |
|
if (_vtc) { |
|
_vtc.delete(cls); |
|
if (!_vtc.size) { |
|
el[vtcKey] = void 0; |
|
} |
|
} |
|
} |
|
function nextFrame(cb) { |
|
requestAnimationFrame(() => { |
|
requestAnimationFrame(cb); |
|
}); |
|
} |
|
let endId = 0; |
|
function whenTransitionEnds(el, expectedType, explicitTimeout, resolve) { |
|
const id = el._endId = ++endId; |
|
const resolveIfNotStale = () => { |
|
if (id === el._endId) { |
|
resolve(); |
|
} |
|
}; |
|
if (explicitTimeout) { |
|
return setTimeout(resolveIfNotStale, explicitTimeout); |
|
} |
|
const { type, timeout, propCount } = getTransitionInfo(el, expectedType); |
|
if (!type) { |
|
return resolve(); |
|
} |
|
const endEvent = type + "end"; |
|
let ended = 0; |
|
const end = () => { |
|
el.removeEventListener(endEvent, onEnd); |
|
resolveIfNotStale(); |
|
}; |
|
const onEnd = (e) => { |
|
if (e.target === el && ++ended >= propCount) { |
|
end(); |
|
} |
|
}; |
|
setTimeout(() => { |
|
if (ended < propCount) { |
|
end(); |
|
} |
|
}, timeout + 1); |
|
el.addEventListener(endEvent, onEnd); |
|
} |
|
function getTransitionInfo(el, expectedType) { |
|
const styles = window.getComputedStyle(el); |
|
const getStyleProperties = (key) => (styles[key] || "").split(", "); |
|
const transitionDelays = getStyleProperties(`${TRANSITION}Delay`); |
|
const transitionDurations = getStyleProperties(`${TRANSITION}Duration`); |
|
const transitionTimeout = getTimeout(transitionDelays, transitionDurations); |
|
const animationDelays = getStyleProperties(`${ANIMATION}Delay`); |
|
const animationDurations = getStyleProperties(`${ANIMATION}Duration`); |
|
const animationTimeout = getTimeout(animationDelays, animationDurations); |
|
let type = null; |
|
let timeout = 0; |
|
let propCount = 0; |
|
if (expectedType === TRANSITION) { |
|
if (transitionTimeout > 0) { |
|
type = TRANSITION; |
|
timeout = transitionTimeout; |
|
propCount = transitionDurations.length; |
|
} |
|
} else if (expectedType === ANIMATION) { |
|
if (animationTimeout > 0) { |
|
type = ANIMATION; |
|
timeout = animationTimeout; |
|
propCount = animationDurations.length; |
|
} |
|
} else { |
|
timeout = Math.max(transitionTimeout, animationTimeout); |
|
type = timeout > 0 ? transitionTimeout > animationTimeout ? TRANSITION : ANIMATION : null; |
|
propCount = type ? type === TRANSITION ? transitionDurations.length : animationDurations.length : 0; |
|
} |
|
const hasTransform = type === TRANSITION && /\b(transform|all)(,|$)/.test( |
|
getStyleProperties(`${TRANSITION}Property`).toString() |
|
); |
|
return { |
|
type, |
|
timeout, |
|
propCount, |
|
hasTransform |
|
}; |
|
} |
|
function getTimeout(delays, durations) { |
|
while (delays.length < durations.length) { |
|
delays = delays.concat(delays); |
|
} |
|
return Math.max(...durations.map((d, i) => toMs(d) + toMs(delays[i]))); |
|
} |
|
function toMs(s) { |
|
if (s === "auto") |
|
return 0; |
|
return Number(s.slice(0, -1).replace(",", ".")) * 1e3; |
|
} |
|
function forceReflow() { |
|
return document.body.offsetHeight; |
|
} |
|
|
|
function patchClass(el, value, isSVG) { |
|
const transitionClasses = el[vtcKey]; |
|
if (transitionClasses) { |
|
value = (value ? [value, ...transitionClasses] : [...transitionClasses]).join(" "); |
|
} |
|
if (value == null) { |
|
el.removeAttribute("class"); |
|
} else if (isSVG) { |
|
el.setAttribute("class", value); |
|
} else { |
|
el.className = value; |
|
} |
|
} |
|
|
|
const vShowOriginalDisplay = Symbol("_vod"); |
|
const vShowHidden = Symbol("_vsh"); |
|
const vShow = { |
|
beforeMount(el, { value }, { transition }) { |
|
el[vShowOriginalDisplay] = el.style.display === "none" ? "" : el.style.display; |
|
if (transition && value) { |
|
transition.beforeEnter(el); |
|
} else { |
|
setDisplay(el, value); |
|
} |
|
}, |
|
mounted(el, { value }, { transition }) { |
|
if (transition && value) { |
|
transition.enter(el); |
|
} |
|
}, |
|
updated(el, { value, oldValue }, { transition }) { |
|
if (!value === !oldValue) |
|
return; |
|
if (transition) { |
|
if (value) { |
|
transition.beforeEnter(el); |
|
setDisplay(el, true); |
|
transition.enter(el); |
|
} else { |
|
transition.leave(el, () => { |
|
setDisplay(el, false); |
|
}); |
|
} |
|
} else { |
|
setDisplay(el, value); |
|
} |
|
}, |
|
beforeUnmount(el, { value }) { |
|
setDisplay(el, value); |
|
} |
|
}; |
|
{ |
|
vShow.name = "show"; |
|
} |
|
function setDisplay(el, value) { |
|
el.style.display = value ? el[vShowOriginalDisplay] : "none"; |
|
el[vShowHidden] = !value; |
|
} |
|
function initVShowForSSR() { |
|
vShow.getSSRProps = ({ value }) => { |
|
if (!value) { |
|
return { style: { display: "none" } }; |
|
} |
|
}; |
|
} |
|
|
|
const CSS_VAR_TEXT = Symbol("CSS_VAR_TEXT" ); |
|
function useCssVars(getter) { |
|
return; |
|
} |
|
|
|
const displayRE = /(^|;)\s*display\s*:/; |
|
function patchStyle(el, prev, next) { |
|
const style = el.style; |
|
const isCssString = shared.isString(next); |
|
let hasControlledDisplay = false; |
|
if (next && !isCssString) { |
|
if (prev) { |
|
if (!shared.isString(prev)) { |
|
for (const key in prev) { |
|
if (next[key] == null) { |
|
setStyle(style, key, ""); |
|
} |
|
} |
|
} else { |
|
for (const prevStyle of prev.split(";")) { |
|
const key = prevStyle.slice(0, prevStyle.indexOf(":")).trim(); |
|
if (next[key] == null) { |
|
setStyle(style, key, ""); |
|
} |
|
} |
|
} |
|
} |
|
for (const key in next) { |
|
if (key === "display") { |
|
hasControlledDisplay = true; |
|
} |
|
setStyle(style, key, next[key]); |
|
} |
|
} else { |
|
if (isCssString) { |
|
if (prev !== next) { |
|
const cssVarText = style[CSS_VAR_TEXT]; |
|
if (cssVarText) { |
|
next += ";" + cssVarText; |
|
} |
|
style.cssText = next; |
|
hasControlledDisplay = displayRE.test(next); |
|
} |
|
} else if (prev) { |
|
el.removeAttribute("style"); |
|
} |
|
} |
|
if (vShowOriginalDisplay in el) { |
|
el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : ""; |
|
if (el[vShowHidden]) { |
|
style.display = "none"; |
|
} |
|
} |
|
} |
|
const semicolonRE = /[^\\];\s*$/; |
|
const importantRE = /\s*!important$/; |
|
function setStyle(style, name, val) { |
|
if (shared.isArray(val)) { |
|
val.forEach((v) => setStyle(style, name, v)); |
|
} else { |
|
if (val == null) |
|
val = ""; |
|
{ |
|
if (semicolonRE.test(val)) { |
|
runtimeCore.warn( |
|
`Unexpected semicolon at the end of '${name}' style value: '${val}'` |
|
); |
|
} |
|
} |
|
if (name.startsWith("--")) { |
|
style.setProperty(name, val); |
|
} else { |
|
const prefixed = autoPrefix(style, name); |
|
if (importantRE.test(val)) { |
|
style.setProperty( |
|
shared.hyphenate(prefixed), |
|
val.replace(importantRE, ""), |
|
"important" |
|
); |
|
} else { |
|
style[prefixed] = val; |
|
} |
|
} |
|
} |
|
} |
|
const prefixes = ["Webkit", "Moz", "ms"]; |
|
const prefixCache = {}; |
|
function autoPrefix(style, rawName) { |
|
const cached = prefixCache[rawName]; |
|
if (cached) { |
|
return cached; |
|
} |
|
let name = runtimeCore.camelize(rawName); |
|
if (name !== "filter" && name in style) { |
|
return prefixCache[rawName] = name; |
|
} |
|
name = shared.capitalize(name); |
|
for (let i = 0; i < prefixes.length; i++) { |
|
const prefixed = prefixes[i] + name; |
|
if (prefixed in style) { |
|
return prefixCache[rawName] = prefixed; |
|
} |
|
} |
|
return rawName; |
|
} |
|
|
|
const xlinkNS = "http://www.w3.org/1999/xlink"; |
|
function patchAttr(el, key, value, isSVG, instance) { |
|
if (isSVG && key.startsWith("xlink:")) { |
|
if (value == null) { |
|
el.removeAttributeNS(xlinkNS, key.slice(6, key.length)); |
|
} else { |
|
el.setAttributeNS(xlinkNS, key, value); |
|
} |
|
} else { |
|
const isBoolean = shared.isSpecialBooleanAttr(key); |
|
if (value == null || isBoolean && !shared.includeBooleanAttr(value)) { |
|
el.removeAttribute(key); |
|
} else { |
|
el.setAttribute(key, isBoolean ? "" : value); |
|
} |
|
} |
|
} |
|
|
|
function patchDOMProp(el, key, value, prevChildren, parentComponent, parentSuspense, unmountChildren) { |
|
if (key === "innerHTML" || key === "textContent") { |
|
if (prevChildren) { |
|
unmountChildren(prevChildren, parentComponent, parentSuspense); |
|
} |
|
el[key] = value == null ? "" : value; |
|
return; |
|
} |
|
const tag = el.tagName; |
|
if (key === "value" && tag !== "PROGRESS" && |
|
!tag.includes("-")) { |
|
el._value = value; |
|
const oldValue = tag === "OPTION" ? el.getAttribute("value") || "" : el.value; |
|
const newValue = value == null ? "" : value; |
|
if (oldValue !== newValue) { |
|
el.value = newValue; |
|
} |
|
if (value == null) { |
|
el.removeAttribute(key); |
|
} |
|
return; |
|
} |
|
let needRemove = false; |
|
if (value === "" || value == null) { |
|
const type = typeof el[key]; |
|
if (type === "boolean") { |
|
value = shared.includeBooleanAttr(value); |
|
} else if (value == null && type === "string") { |
|
value = ""; |
|
needRemove = true; |
|
} else if (type === "number") { |
|
value = 0; |
|
needRemove = true; |
|
} |
|
} |
|
try { |
|
el[key] = value; |
|
} catch (e) { |
|
if (!needRemove) { |
|
runtimeCore.warn( |
|
`Failed setting prop "${key}" on <${tag.toLowerCase()}>: value ${value} is invalid.`, |
|
e |
|
); |
|
} |
|
} |
|
needRemove && el.removeAttribute(key); |
|
} |
|
|
|
function addEventListener(el, event, handler, options) { |
|
el.addEventListener(event, handler, options); |
|
} |
|
function removeEventListener(el, event, handler, options) { |
|
el.removeEventListener(event, handler, options); |
|
} |
|
const veiKey = Symbol("_vei"); |
|
function patchEvent(el, rawName, prevValue, nextValue, instance = null) { |
|
const invokers = el[veiKey] || (el[veiKey] = {}); |
|
const existingInvoker = invokers[rawName]; |
|
if (nextValue && existingInvoker) { |
|
existingInvoker.value = nextValue; |
|
} else { |
|
const [name, options] = parseName(rawName); |
|
if (nextValue) { |
|
const invoker = invokers[rawName] = createInvoker(nextValue, instance); |
|
addEventListener(el, name, invoker, options); |
|
} else if (existingInvoker) { |
|
removeEventListener(el, name, existingInvoker, options); |
|
invokers[rawName] = void 0; |
|
} |
|
} |
|
} |
|
const optionsModifierRE = /(?:Once|Passive|Capture)$/; |
|
function parseName(name) { |
|
let options; |
|
if (optionsModifierRE.test(name)) { |
|
options = {}; |
|
let m; |
|
while (m = name.match(optionsModifierRE)) { |
|
name = name.slice(0, name.length - m[0].length); |
|
options[m[0].toLowerCase()] = true; |
|
} |
|
} |
|
const event = name[2] === ":" ? name.slice(3) : shared.hyphenate(name.slice(2)); |
|
return [event, options]; |
|
} |
|
let cachedNow = 0; |
|
const p = Promise.resolve(); |
|
const getNow = () => cachedNow || (p.then(() => cachedNow = 0), cachedNow = Date.now()); |
|
function createInvoker(initialValue, instance) { |
|
const invoker = (e) => { |
|
if (!e._vts) { |
|
e._vts = Date.now(); |
|
} else if (e._vts <= invoker.attached) { |
|
return; |
|
} |
|
runtimeCore.callWithAsyncErrorHandling( |
|
patchStopImmediatePropagation(e, invoker.value), |
|
instance, |
|
5, |
|
[e] |
|
); |
|
}; |
|
invoker.value = initialValue; |
|
invoker.attached = getNow(); |
|
return invoker; |
|
} |
|
function patchStopImmediatePropagation(e, value) { |
|
if (shared.isArray(value)) { |
|
const originalStop = e.stopImmediatePropagation; |
|
e.stopImmediatePropagation = () => { |
|
originalStop.call(e); |
|
e._stopped = true; |
|
}; |
|
return value.map((fn) => (e2) => !e2._stopped && fn && fn(e2)); |
|
} else { |
|
return value; |
|
} |
|
} |
|
|
|
const isNativeOn = (key) => key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && |
|
key.charCodeAt(2) > 96 && key.charCodeAt(2) < 123; |
|
const patchProp = (el, key, prevValue, nextValue, namespace, prevChildren, parentComponent, parentSuspense, unmountChildren) => { |
|
const isSVG = namespace === "svg"; |
|
if (key === "class") { |
|
patchClass(el, nextValue, isSVG); |
|
} else if (key === "style") { |
|
patchStyle(el, prevValue, nextValue); |
|
} else if (shared.isOn(key)) { |
|
if (!shared.isModelListener(key)) { |
|
patchEvent(el, key, prevValue, nextValue, parentComponent); |
|
} |
|
} else if (key[0] === "." ? (key = key.slice(1), true) : key[0] === "^" ? (key = key.slice(1), false) : shouldSetAsProp(el, key, nextValue, isSVG)) { |
|
patchDOMProp( |
|
el, |
|
key, |
|
nextValue, |
|
prevChildren, |
|
parentComponent, |
|
parentSuspense, |
|
unmountChildren |
|
); |
|
} else { |
|
if (key === "true-value") { |
|
el._trueValue = nextValue; |
|
} else if (key === "false-value") { |
|
el._falseValue = nextValue; |
|
} |
|
patchAttr(el, key, nextValue, isSVG); |
|
} |
|
}; |
|
function shouldSetAsProp(el, key, value, isSVG) { |
|
if (isSVG) { |
|
if (key === "innerHTML" || key === "textContent") { |
|
return true; |
|
} |
|
if (key in el && isNativeOn(key) && shared.isFunction(value)) { |
|
return true; |
|
} |
|
return false; |
|
} |
|
if (key === "spellcheck" || key === "draggable" || key === "translate") { |
|
return false; |
|
} |
|
if (key === "form") { |
|
return false; |
|
} |
|
if (key === "list" && el.tagName === "INPUT") { |
|
return false; |
|
} |
|
if (key === "type" && el.tagName === "TEXTAREA") { |
|
return false; |
|
} |
|
if (key === "width" || key === "height") { |
|
const tag = el.tagName; |
|
if (tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE") { |
|
return false; |
|
} |
|
} |
|
if (isNativeOn(key) && shared.isString(value)) { |
|
return false; |
|
} |
|
return key in el; |
|
} |
|
|
|
|
|
|
|
function defineCustomElement(options, hydrate2) { |
|
const Comp = runtimeCore.defineComponent(options); |
|
class VueCustomElement extends VueElement { |
|
constructor(initialProps) { |
|
super(Comp, initialProps, hydrate2); |
|
} |
|
} |
|
VueCustomElement.def = Comp; |
|
return VueCustomElement; |
|
} |
|
|
|
const defineSSRCustomElement = (options) => { |
|
return defineCustomElement(options, hydrate); |
|
}; |
|
const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class { |
|
}; |
|
class VueElement extends BaseClass { |
|
constructor(_def, _props = {}, hydrate2) { |
|
super(); |
|
this._def = _def; |
|
this._props = _props; |
|
|
|
|
|
|
|
this._instance = null; |
|
this._connected = false; |
|
this._resolved = false; |
|
this._numberProps = null; |
|
this._ob = null; |
|
if (this.shadowRoot && hydrate2) { |
|
hydrate2(this._createVNode(), this.shadowRoot); |
|
} else { |
|
if (this.shadowRoot) { |
|
runtimeCore.warn( |
|
`Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineSSRCustomElement\`.` |
|
); |
|
} |
|
this.attachShadow({ mode: "open" }); |
|
if (!this._def.__asyncLoader) { |
|
this._resolveProps(this._def); |
|
} |
|
} |
|
} |
|
connectedCallback() { |
|
this._connected = true; |
|
if (!this._instance) { |
|
if (this._resolved) { |
|
this._update(); |
|
} else { |
|
this._resolveDef(); |
|
} |
|
} |
|
} |
|
disconnectedCallback() { |
|
this._connected = false; |
|
if (this._ob) { |
|
this._ob.disconnect(); |
|
this._ob = null; |
|
} |
|
runtimeCore.nextTick(() => { |
|
if (!this._connected) { |
|
render(null, this.shadowRoot); |
|
this._instance = null; |
|
} |
|
}); |
|
} |
|
|
|
|
|
|
|
_resolveDef() { |
|
this._resolved = true; |
|
for (let i = 0; i < this.attributes.length; i++) { |
|
this._setAttr(this.attributes[i].name); |
|
} |
|
this._ob = new MutationObserver((mutations) => { |
|
for (const m of mutations) { |
|
this._setAttr(m.attributeName); |
|
} |
|
}); |
|
this._ob.observe(this, { attributes: true }); |
|
const resolve = (def, isAsync = false) => { |
|
const { props, styles } = def; |
|
let numberProps; |
|
if (props && !shared.isArray(props)) { |
|
for (const key in props) { |
|
const opt = props[key]; |
|
if (opt === Number || opt && opt.type === Number) { |
|
if (key in this._props) { |
|
this._props[key] = shared.toNumber(this._props[key]); |
|
} |
|
(numberProps || (numberProps = Object.create(null)))[shared.camelize(key)] = true; |
|
} |
|
} |
|
} |
|
this._numberProps = numberProps; |
|
if (isAsync) { |
|
this._resolveProps(def); |
|
} |
|
this._applyStyles(styles); |
|
this._update(); |
|
}; |
|
const asyncDef = this._def.__asyncLoader; |
|
if (asyncDef) { |
|
asyncDef().then((def) => resolve(def, true)); |
|
} else { |
|
resolve(this._def); |
|
} |
|
} |
|
_resolveProps(def) { |
|
const { props } = def; |
|
const declaredPropKeys = shared.isArray(props) ? props : Object.keys(props || {}); |
|
for (const key of Object.keys(this)) { |
|
if (key[0] !== "_" && declaredPropKeys.includes(key)) { |
|
this._setProp(key, this[key], true, false); |
|
} |
|
} |
|
for (const key of declaredPropKeys.map(shared.camelize)) { |
|
Object.defineProperty(this, key, { |
|
get() { |
|
return this._getProp(key); |
|
}, |
|
set(val) { |
|
this._setProp(key, val); |
|
} |
|
}); |
|
} |
|
} |
|
_setAttr(key) { |
|
let value = this.getAttribute(key); |
|
const camelKey = shared.camelize(key); |
|
if (this._numberProps && this._numberProps[camelKey]) { |
|
value = shared.toNumber(value); |
|
} |
|
this._setProp(camelKey, value, false); |
|
} |
|
|
|
|
|
|
|
_getProp(key) { |
|
return this._props[key]; |
|
} |
|
|
|
|
|
|
|
_setProp(key, val, shouldReflect = true, shouldUpdate = true) { |
|
if (val !== this._props[key]) { |
|
this._props[key] = val; |
|
if (shouldUpdate && this._instance) { |
|
this._update(); |
|
} |
|
if (shouldReflect) { |
|
if (val === true) { |
|
this.setAttribute(shared.hyphenate(key), ""); |
|
} else if (typeof val === "string" || typeof val === "number") { |
|
this.setAttribute(shared.hyphenate(key), val + ""); |
|
} else if (!val) { |
|
this.removeAttribute(shared.hyphenate(key)); |
|
} |
|
} |
|
} |
|
} |
|
_update() { |
|
render(this._createVNode(), this.shadowRoot); |
|
} |
|
_createVNode() { |
|
const vnode = runtimeCore.createVNode(this._def, shared.extend({}, this._props)); |
|
if (!this._instance) { |
|
vnode.ce = (instance) => { |
|
this._instance = instance; |
|
instance.isCE = true; |
|
{ |
|
instance.ceReload = (newStyles) => { |
|
if (this._styles) { |
|
this._styles.forEach((s) => this.shadowRoot.removeChild(s)); |
|
this._styles.length = 0; |
|
} |
|
this._applyStyles(newStyles); |
|
this._instance = null; |
|
this._update(); |
|
}; |
|
} |
|
const dispatch = (event, args) => { |
|
this.dispatchEvent( |
|
new CustomEvent(event, { |
|
detail: args |
|
}) |
|
); |
|
}; |
|
instance.emit = (event, ...args) => { |
|
dispatch(event, args); |
|
if (shared.hyphenate(event) !== event) { |
|
dispatch(shared.hyphenate(event), args); |
|
} |
|
}; |
|
let parent = this; |
|
while (parent = parent && (parent.parentNode || parent.host)) { |
|
if (parent instanceof VueElement) { |
|
instance.parent = parent._instance; |
|
instance.provides = parent._instance.provides; |
|
break; |
|
} |
|
} |
|
}; |
|
} |
|
return vnode; |
|
} |
|
_applyStyles(styles) { |
|
if (styles) { |
|
styles.forEach((css) => { |
|
const s = document.createElement("style"); |
|
s.textContent = css; |
|
this.shadowRoot.appendChild(s); |
|
{ |
|
(this._styles || (this._styles = [])).push(s); |
|
} |
|
}); |
|
} |
|
} |
|
} |
|
|
|
function useCssModule(name = "$style") { |
|
{ |
|
const instance = runtimeCore.getCurrentInstance(); |
|
if (!instance) { |
|
runtimeCore.warn(`useCssModule must be called inside setup()`); |
|
return shared.EMPTY_OBJ; |
|
} |
|
const modules = instance.type.__cssModules; |
|
if (!modules) { |
|
runtimeCore.warn(`Current instance does not have CSS modules injected.`); |
|
return shared.EMPTY_OBJ; |
|
} |
|
const mod = modules[name]; |
|
if (!mod) { |
|
runtimeCore.warn(`Current instance does not have CSS module named "${name}".`); |
|
return shared.EMPTY_OBJ; |
|
} |
|
return mod; |
|
} |
|
} |
|
|
|
const positionMap = new WeakMap(); |
|
const newPositionMap = new WeakMap(); |
|
const moveCbKey = Symbol("_moveCb"); |
|
const enterCbKey = Symbol("_enterCb"); |
|
const TransitionGroupImpl = { |
|
name: "TransitionGroup", |
|
props: shared.extend({}, TransitionPropsValidators, { |
|
tag: String, |
|
moveClass: String |
|
}), |
|
setup(props, { slots }) { |
|
const instance = runtimeCore.getCurrentInstance(); |
|
const state = runtimeCore.useTransitionState(); |
|
let prevChildren; |
|
let children; |
|
runtimeCore.onUpdated(() => { |
|
if (!prevChildren.length) { |
|
return; |
|
} |
|
const moveClass = props.moveClass || `${props.name || "v"}-move`; |
|
if (!hasCSSTransform( |
|
prevChildren[0].el, |
|
instance.vnode.el, |
|
moveClass |
|
)) { |
|
return; |
|
} |
|
prevChildren.forEach(callPendingCbs); |
|
prevChildren.forEach(recordPosition); |
|
const movedChildren = prevChildren.filter(applyTranslation); |
|
forceReflow(); |
|
movedChildren.forEach((c) => { |
|
const el = c.el; |
|
const style = el.style; |
|
addTransitionClass(el, moveClass); |
|
style.transform = style.webkitTransform = style.transitionDuration = ""; |
|
const cb = el[moveCbKey] = (e) => { |
|
if (e && e.target !== el) { |
|
return; |
|
} |
|
if (!e || /transform$/.test(e.propertyName)) { |
|
el.removeEventListener("transitionend", cb); |
|
el[moveCbKey] = null; |
|
removeTransitionClass(el, moveClass); |
|
} |
|
}; |
|
el.addEventListener("transitionend", cb); |
|
}); |
|
}); |
|
return () => { |
|
const rawProps = runtimeCore.toRaw(props); |
|
const cssTransitionProps = resolveTransitionProps(rawProps); |
|
let tag = rawProps.tag || runtimeCore.Fragment; |
|
prevChildren = children; |
|
children = slots.default ? runtimeCore.getTransitionRawChildren(slots.default()) : []; |
|
for (let i = 0; i < children.length; i++) { |
|
const child = children[i]; |
|
if (child.key != null) { |
|
runtimeCore.setTransitionHooks( |
|
child, |
|
runtimeCore.resolveTransitionHooks(child, cssTransitionProps, state, instance) |
|
); |
|
} else { |
|
runtimeCore.warn(`<TransitionGroup> children must be keyed.`); |
|
} |
|
} |
|
if (prevChildren) { |
|
for (let i = 0; i < prevChildren.length; i++) { |
|
const child = prevChildren[i]; |
|
runtimeCore.setTransitionHooks( |
|
child, |
|
runtimeCore.resolveTransitionHooks(child, cssTransitionProps, state, instance) |
|
); |
|
positionMap.set(child, child.el.getBoundingClientRect()); |
|
} |
|
} |
|
return runtimeCore.createVNode(tag, null, children); |
|
}; |
|
} |
|
}; |
|
const removeMode = (props) => delete props.mode; |
|
removeMode(TransitionGroupImpl.props); |
|
const TransitionGroup = TransitionGroupImpl; |
|
function callPendingCbs(c) { |
|
const el = c.el; |
|
if (el[moveCbKey]) { |
|
el[moveCbKey](); |
|
} |
|
if (el[enterCbKey]) { |
|
el[enterCbKey](); |
|
} |
|
} |
|
function recordPosition(c) { |
|
newPositionMap.set(c, c.el.getBoundingClientRect()); |
|
} |
|
function applyTranslation(c) { |
|
const oldPos = positionMap.get(c); |
|
const newPos = newPositionMap.get(c); |
|
const dx = oldPos.left - newPos.left; |
|
const dy = oldPos.top - newPos.top; |
|
if (dx || dy) { |
|
const s = c.el.style; |
|
s.transform = s.webkitTransform = `translate(${dx}px,${dy}px)`; |
|
s.transitionDuration = "0s"; |
|
return c; |
|
} |
|
} |
|
function hasCSSTransform(el, root, moveClass) { |
|
const clone = el.cloneNode(); |
|
const _vtc = el[vtcKey]; |
|
if (_vtc) { |
|
_vtc.forEach((cls) => { |
|
cls.split(/\s+/).forEach((c) => c && clone.classList.remove(c)); |
|
}); |
|
} |
|
moveClass.split(/\s+/).forEach((c) => c && clone.classList.add(c)); |
|
clone.style.display = "none"; |
|
const container = root.nodeType === 1 ? root : root.parentNode; |
|
container.appendChild(clone); |
|
const { hasTransform } = getTransitionInfo(clone); |
|
container.removeChild(clone); |
|
return hasTransform; |
|
} |
|
|
|
const getModelAssigner = (vnode) => { |
|
const fn = vnode.props["onUpdate:modelValue"] || false; |
|
return shared.isArray(fn) ? (value) => shared.invokeArrayFns(fn, value) : fn; |
|
}; |
|
function onCompositionStart(e) { |
|
e.target.composing = true; |
|
} |
|
function onCompositionEnd(e) { |
|
const target = e.target; |
|
if (target.composing) { |
|
target.composing = false; |
|
target.dispatchEvent(new Event("input")); |
|
} |
|
} |
|
const assignKey = Symbol("_assign"); |
|
const vModelText = { |
|
created(el, { modifiers: { lazy, trim, number } }, vnode) { |
|
el[assignKey] = getModelAssigner(vnode); |
|
const castToNumber = number || vnode.props && vnode.props.type === "number"; |
|
addEventListener(el, lazy ? "change" : "input", (e) => { |
|
if (e.target.composing) |
|
return; |
|
let domValue = el.value; |
|
if (trim) { |
|
domValue = domValue.trim(); |
|
} |
|
if (castToNumber) { |
|
domValue = shared.looseToNumber(domValue); |
|
} |
|
el[assignKey](domValue); |
|
}); |
|
if (trim) { |
|
addEventListener(el, "change", () => { |
|
el.value = el.value.trim(); |
|
}); |
|
} |
|
if (!lazy) { |
|
addEventListener(el, "compositionstart", onCompositionStart); |
|
addEventListener(el, "compositionend", onCompositionEnd); |
|
addEventListener(el, "change", onCompositionEnd); |
|
} |
|
}, |
|
|
|
mounted(el, { value }) { |
|
el.value = value == null ? "" : value; |
|
}, |
|
beforeUpdate(el, { value, modifiers: { lazy, trim, number } }, vnode) { |
|
el[assignKey] = getModelAssigner(vnode); |
|
if (el.composing) |
|
return; |
|
const elValue = number || el.type === "number" ? shared.looseToNumber(el.value) : el.value; |
|
const newValue = value == null ? "" : value; |
|
if (elValue === newValue) { |
|
return; |
|
} |
|
if (document.activeElement === el && el.type !== "range") { |
|
if (lazy) { |
|
return; |
|
} |
|
if (trim && el.value.trim() === newValue) { |
|
return; |
|
} |
|
} |
|
el.value = newValue; |
|
} |
|
}; |
|
const vModelCheckbox = { |
|
|
|
deep: true, |
|
created(el, _, vnode) { |
|
el[assignKey] = getModelAssigner(vnode); |
|
addEventListener(el, "change", () => { |
|
const modelValue = el._modelValue; |
|
const elementValue = getValue(el); |
|
const checked = el.checked; |
|
const assign = el[assignKey]; |
|
if (shared.isArray(modelValue)) { |
|
const index = shared.looseIndexOf(modelValue, elementValue); |
|
const found = index !== -1; |
|
if (checked && !found) { |
|
assign(modelValue.concat(elementValue)); |
|
} else if (!checked && found) { |
|
const filtered = [...modelValue]; |
|
filtered.splice(index, 1); |
|
assign(filtered); |
|
} |
|
} else if (shared.isSet(modelValue)) { |
|
const cloned = new Set(modelValue); |
|
if (checked) { |
|
cloned.add(elementValue); |
|
} else { |
|
cloned.delete(elementValue); |
|
} |
|
assign(cloned); |
|
} else { |
|
assign(getCheckboxValue(el, checked)); |
|
} |
|
}); |
|
}, |
|
|
|
mounted: setChecked, |
|
beforeUpdate(el, binding, vnode) { |
|
el[assignKey] = getModelAssigner(vnode); |
|
setChecked(el, binding, vnode); |
|
} |
|
}; |
|
function setChecked(el, { value, oldValue }, vnode) { |
|
el._modelValue = value; |
|
if (shared.isArray(value)) { |
|
el.checked = shared.looseIndexOf(value, vnode.props.value) > -1; |
|
} else if (shared.isSet(value)) { |
|
el.checked = value.has(vnode.props.value); |
|
} else if (value !== oldValue) { |
|
el.checked = shared.looseEqual(value, getCheckboxValue(el, true)); |
|
} |
|
} |
|
const vModelRadio = { |
|
created(el, { value }, vnode) { |
|
el.checked = shared.looseEqual(value, vnode.props.value); |
|
el[assignKey] = getModelAssigner(vnode); |
|
addEventListener(el, "change", () => { |
|
el[assignKey](getValue(el)); |
|
}); |
|
}, |
|
beforeUpdate(el, { value, oldValue }, vnode) { |
|
el[assignKey] = getModelAssigner(vnode); |
|
if (value !== oldValue) { |
|
el.checked = shared.looseEqual(value, vnode.props.value); |
|
} |
|
} |
|
}; |
|
const vModelSelect = { |
|
|
|
deep: true, |
|
created(el, { value, modifiers: { number } }, vnode) { |
|
const isSetModel = shared.isSet(value); |
|
addEventListener(el, "change", () => { |
|
const selectedVal = Array.prototype.filter.call(el.options, (o) => o.selected).map( |
|
(o) => number ? shared.looseToNumber(getValue(o)) : getValue(o) |
|
); |
|
el[assignKey]( |
|
el.multiple ? isSetModel ? new Set(selectedVal) : selectedVal : selectedVal[0] |
|
); |
|
el._assigning = true; |
|
runtimeCore.nextTick(() => { |
|
el._assigning = false; |
|
}); |
|
}); |
|
el[assignKey] = getModelAssigner(vnode); |
|
}, |
|
|
|
|
|
mounted(el, { value, modifiers: { number } }) { |
|
setSelected(el, value, number); |
|
}, |
|
beforeUpdate(el, _binding, vnode) { |
|
el[assignKey] = getModelAssigner(vnode); |
|
}, |
|
updated(el, { value, modifiers: { number } }) { |
|
if (!el._assigning) { |
|
setSelected(el, value, number); |
|
} |
|
} |
|
}; |
|
function setSelected(el, value, number) { |
|
const isMultiple = el.multiple; |
|
const isArrayValue = shared.isArray(value); |
|
if (isMultiple && !isArrayValue && !shared.isSet(value)) { |
|
runtimeCore.warn( |
|
`<select multiple v-model> expects an Array or Set value for its binding, but got ${Object.prototype.toString.call(value).slice(8, -1)}.` |
|
); |
|
return; |
|
} |
|
for (let i = 0, l = el.options.length; i < l; i++) { |
|
const option = el.options[i]; |
|
const optionValue = getValue(option); |
|
if (isMultiple) { |
|
if (isArrayValue) { |
|
const optionType = typeof optionValue; |
|
if (optionType === "string" || optionType === "number") { |
|
option.selected = value.includes( |
|
number ? shared.looseToNumber(optionValue) : optionValue |
|
); |
|
} else { |
|
option.selected = shared.looseIndexOf(value, optionValue) > -1; |
|
} |
|
} else { |
|
option.selected = value.has(optionValue); |
|
} |
|
} else if (shared.looseEqual(getValue(option), value)) { |
|
if (el.selectedIndex !== i) |
|
el.selectedIndex = i; |
|
return; |
|
} |
|
} |
|
if (!isMultiple && el.selectedIndex !== -1) { |
|
el.selectedIndex = -1; |
|
} |
|
} |
|
function getValue(el) { |
|
return "_value" in el ? el._value : el.value; |
|
} |
|
function getCheckboxValue(el, checked) { |
|
const key = checked ? "_trueValue" : "_falseValue"; |
|
return key in el ? el[key] : checked; |
|
} |
|
const vModelDynamic = { |
|
created(el, binding, vnode) { |
|
callModelHook(el, binding, vnode, null, "created"); |
|
}, |
|
mounted(el, binding, vnode) { |
|
callModelHook(el, binding, vnode, null, "mounted"); |
|
}, |
|
beforeUpdate(el, binding, vnode, prevVNode) { |
|
callModelHook(el, binding, vnode, prevVNode, "beforeUpdate"); |
|
}, |
|
updated(el, binding, vnode, prevVNode) { |
|
callModelHook(el, binding, vnode, prevVNode, "updated"); |
|
} |
|
}; |
|
function resolveDynamicModel(tagName, type) { |
|
switch (tagName) { |
|
case "SELECT": |
|
return vModelSelect; |
|
case "TEXTAREA": |
|
return vModelText; |
|
default: |
|
switch (type) { |
|
case "checkbox": |
|
return vModelCheckbox; |
|
case "radio": |
|
return vModelRadio; |
|
default: |
|
return vModelText; |
|
} |
|
} |
|
} |
|
function callModelHook(el, binding, vnode, prevVNode, hook) { |
|
const modelToUse = resolveDynamicModel( |
|
el.tagName, |
|
vnode.props && vnode.props.type |
|
); |
|
const fn = modelToUse[hook]; |
|
fn && fn(el, binding, vnode, prevVNode); |
|
} |
|
function initVModelForSSR() { |
|
vModelText.getSSRProps = ({ value }) => ({ value }); |
|
vModelRadio.getSSRProps = ({ value }, vnode) => { |
|
if (vnode.props && shared.looseEqual(vnode.props.value, value)) { |
|
return { checked: true }; |
|
} |
|
}; |
|
vModelCheckbox.getSSRProps = ({ value }, vnode) => { |
|
if (shared.isArray(value)) { |
|
if (vnode.props && shared.looseIndexOf(value, vnode.props.value) > -1) { |
|
return { checked: true }; |
|
} |
|
} else if (shared.isSet(value)) { |
|
if (vnode.props && value.has(vnode.props.value)) { |
|
return { checked: true }; |
|
} |
|
} else if (value) { |
|
return { checked: true }; |
|
} |
|
}; |
|
vModelDynamic.getSSRProps = (binding, vnode) => { |
|
if (typeof vnode.type !== "string") { |
|
return; |
|
} |
|
const modelToUse = resolveDynamicModel( |
|
|
|
vnode.type.toUpperCase(), |
|
vnode.props && vnode.props.type |
|
); |
|
if (modelToUse.getSSRProps) { |
|
return modelToUse.getSSRProps(binding, vnode); |
|
} |
|
}; |
|
} |
|
|
|
const systemModifiers = ["ctrl", "shift", "alt", "meta"]; |
|
const modifierGuards = { |
|
stop: (e) => e.stopPropagation(), |
|
prevent: (e) => e.preventDefault(), |
|
self: (e) => e.target !== e.currentTarget, |
|
ctrl: (e) => !e.ctrlKey, |
|
shift: (e) => !e.shiftKey, |
|
alt: (e) => !e.altKey, |
|
meta: (e) => !e.metaKey, |
|
left: (e) => "button" in e && e.button !== 0, |
|
middle: (e) => "button" in e && e.button !== 1, |
|
right: (e) => "button" in e && e.button !== 2, |
|
exact: (e, modifiers) => systemModifiers.some((m) => e[`${m}Key`] && !modifiers.includes(m)) |
|
}; |
|
const withModifiers = (fn, modifiers) => { |
|
const cache = fn._withMods || (fn._withMods = {}); |
|
const cacheKey = modifiers.join("."); |
|
return cache[cacheKey] || (cache[cacheKey] = (event, ...args) => { |
|
for (let i = 0; i < modifiers.length; i++) { |
|
const guard = modifierGuards[modifiers[i]]; |
|
if (guard && guard(event, modifiers)) |
|
return; |
|
} |
|
return fn(event, ...args); |
|
}); |
|
}; |
|
const keyNames = { |
|
esc: "escape", |
|
space: " ", |
|
up: "arrow-up", |
|
left: "arrow-left", |
|
right: "arrow-right", |
|
down: "arrow-down", |
|
delete: "backspace" |
|
}; |
|
const withKeys = (fn, modifiers) => { |
|
const cache = fn._withKeys || (fn._withKeys = {}); |
|
const cacheKey = modifiers.join("."); |
|
return cache[cacheKey] || (cache[cacheKey] = (event) => { |
|
if (!("key" in event)) { |
|
return; |
|
} |
|
const eventKey = shared.hyphenate(event.key); |
|
if (modifiers.some((k) => k === eventKey || keyNames[k] === eventKey)) { |
|
return fn(event); |
|
} |
|
}); |
|
}; |
|
|
|
const rendererOptions = shared.extend({ patchProp }, nodeOps); |
|
let renderer; |
|
let enabledHydration = false; |
|
function ensureRenderer() { |
|
return renderer || (renderer = runtimeCore.createRenderer(rendererOptions)); |
|
} |
|
function ensureHydrationRenderer() { |
|
renderer = enabledHydration ? renderer : runtimeCore.createHydrationRenderer(rendererOptions); |
|
enabledHydration = true; |
|
return renderer; |
|
} |
|
const render = (...args) => { |
|
ensureRenderer().render(...args); |
|
}; |
|
const hydrate = (...args) => { |
|
ensureHydrationRenderer().hydrate(...args); |
|
}; |
|
const createApp = (...args) => { |
|
const app = ensureRenderer().createApp(...args); |
|
{ |
|
injectNativeTagCheck(app); |
|
injectCompilerOptionsCheck(app); |
|
} |
|
const { mount } = app; |
|
app.mount = (containerOrSelector) => { |
|
const container = normalizeContainer(containerOrSelector); |
|
if (!container) |
|
return; |
|
const component = app._component; |
|
if (!shared.isFunction(component) && !component.render && !component.template) { |
|
component.template = container.innerHTML; |
|
} |
|
container.innerHTML = ""; |
|
const proxy = mount(container, false, resolveRootNamespace(container)); |
|
if (container instanceof Element) { |
|
container.removeAttribute("v-cloak"); |
|
container.setAttribute("data-v-app", ""); |
|
} |
|
return proxy; |
|
}; |
|
return app; |
|
}; |
|
const createSSRApp = (...args) => { |
|
const app = ensureHydrationRenderer().createApp(...args); |
|
{ |
|
injectNativeTagCheck(app); |
|
injectCompilerOptionsCheck(app); |
|
} |
|
const { mount } = app; |
|
app.mount = (containerOrSelector) => { |
|
const container = normalizeContainer(containerOrSelector); |
|
if (container) { |
|
return mount(container, true, resolveRootNamespace(container)); |
|
} |
|
}; |
|
return app; |
|
}; |
|
function resolveRootNamespace(container) { |
|
if (container instanceof SVGElement) { |
|
return "svg"; |
|
} |
|
if (typeof MathMLElement === "function" && container instanceof MathMLElement) { |
|
return "mathml"; |
|
} |
|
} |
|
function injectNativeTagCheck(app) { |
|
Object.defineProperty(app.config, "isNativeTag", { |
|
value: (tag) => shared.isHTMLTag(tag) || shared.isSVGTag(tag) || shared.isMathMLTag(tag), |
|
writable: false |
|
}); |
|
} |
|
function injectCompilerOptionsCheck(app) { |
|
if (runtimeCore.isRuntimeOnly()) { |
|
const isCustomElement = app.config.isCustomElement; |
|
Object.defineProperty(app.config, "isCustomElement", { |
|
get() { |
|
return isCustomElement; |
|
}, |
|
set() { |
|
runtimeCore.warn( |
|
`The \`isCustomElement\` config option is deprecated. Use \`compilerOptions.isCustomElement\` instead.` |
|
); |
|
} |
|
}); |
|
const compilerOptions = app.config.compilerOptions; |
|
const msg = `The \`compilerOptions\` config option is only respected when using a build of Vue.js that includes the runtime compiler (aka "full build"). Since you are using the runtime-only build, \`compilerOptions\` must be passed to \`@vue/compiler-dom\` in the build setup instead. |
|
- For vue-loader: pass it via vue-loader's \`compilerOptions\` loader option. |
|
- For vue-cli: see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader |
|
- For vite: pass it via @vitejs/plugin-vue options. See https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#example-for-passing-options-to-vuecompiler-sfc`; |
|
Object.defineProperty(app.config, "compilerOptions", { |
|
get() { |
|
runtimeCore.warn(msg); |
|
return compilerOptions; |
|
}, |
|
set() { |
|
runtimeCore.warn(msg); |
|
} |
|
}); |
|
} |
|
} |
|
function normalizeContainer(container) { |
|
if (shared.isString(container)) { |
|
const res = document.querySelector(container); |
|
if (!res) { |
|
runtimeCore.warn( |
|
`Failed to mount app: mount target selector "${container}" returned null.` |
|
); |
|
} |
|
return res; |
|
} |
|
if (window.ShadowRoot && container instanceof window.ShadowRoot && container.mode === "closed") { |
|
runtimeCore.warn( |
|
`mounting on a ShadowRoot with \`{mode: "closed"}\` may lead to unpredictable bugs` |
|
); |
|
} |
|
return container; |
|
} |
|
let ssrDirectiveInitialized = false; |
|
const initDirectivesForSSR = () => { |
|
if (!ssrDirectiveInitialized) { |
|
ssrDirectiveInitialized = true; |
|
initVModelForSSR(); |
|
initVShowForSSR(); |
|
} |
|
} ; |
|
|
|
exports.Transition = Transition; |
|
exports.TransitionGroup = TransitionGroup; |
|
exports.VueElement = VueElement; |
|
exports.createApp = createApp; |
|
exports.createSSRApp = createSSRApp; |
|
exports.defineCustomElement = defineCustomElement; |
|
exports.defineSSRCustomElement = defineSSRCustomElement; |
|
exports.hydrate = hydrate; |
|
exports.initDirectivesForSSR = initDirectivesForSSR; |
|
exports.render = render; |
|
exports.useCssModule = useCssModule; |
|
exports.useCssVars = useCssVars; |
|
exports.vModelCheckbox = vModelCheckbox; |
|
exports.vModelDynamic = vModelDynamic; |
|
exports.vModelRadio = vModelRadio; |
|
exports.vModelSelect = vModelSelect; |
|
exports.vModelText = vModelText; |
|
exports.vShow = vShow; |
|
exports.withKeys = withKeys; |
|
exports.withModifiers = withModifiers; |
|
Object.keys(runtimeCore).forEach(function (k) { |
|
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = runtimeCore[k]; |
|
}); |
|
|