@vue/runtime-dom 3.5.17 → 3.6.0-alpha.2

package/dist/runtime-dom.esm-bundler.js

@@ -1,11 +1,11 @@
 /**
-* @vue/runtime-dom v3.5.17
+* @vue/runtime-dom v3.6.0-alpha.2
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
 import { warn, BaseTransitionPropsValidators, h, BaseTransition, assertNumber, getCurrentInstance, onBeforeUpdate, queuePostFlushCb, onMounted, watch, onUnmounted, Fragment, Static, camelize, callWithAsyncErrorHandling, defineComponent, nextTick, unref, createVNode, useTransitionState, onUpdated, toRaw, getTransitionRawChildren, setTransitionHooks, resolveTransitionHooks, Text, createRenderer, createHydrationRenderer, isRuntimeOnly } from '@vue/runtime-core';
 export * from '@vue/runtime-core';
-import { extend, isObject, toNumber, isArray, NOOP, isString, hyphenate, capitalize, isSpecialBooleanAttr, includeBooleanAttr, isSymbol, isFunction, isOn, isModelListener, camelize as camelize$1, isPlainObject, hasOwn, EMPTY_OBJ, looseToNumber, looseIndexOf, isSet, looseEqual, invokeArrayFns, isHTMLTag, isSVGTag, isMathMLTag } from '@vue/shared';
+import { extend, isObject, toNumber, isArray, NOOP, normalizeCssVarValue, isString, hyphenate, capitalize, isSpecialBooleanAttr, includeBooleanAttr, isSymbol, canSetValueDirectly, isFunction, isNativeOn, shouldSetAsAttr, isOn, isModelListener, camelize as camelize$1, isPlainObject, hasOwn, EMPTY_OBJ, looseEqual, looseToNumber, looseIndexOf, isSet, invokeArrayFns, isHTMLTag, isSVGTag, isMathMLTag } from '@vue/shared';
 
 let policy = void 0;
 const tt = typeof window !== "undefined" && window.trustedTypes;
@@ -498,8 +498,9 @@ function setVarsOnNode(el, vars) {
     const style = el.style;
     let cssText = "";
     for (const key in vars) {
-      style.setProperty(`--${key}`, vars[key]);
-      cssText += `--${key}: ${vars[key]};`;
+      const value = normalizeCssVarValue(vars[key]);
+      style.setProperty(`--${key}`, value);
+      cssText += `--${key}: ${value};`;
     }
     style[CSS_VAR_TEXT] = cssText;
   }
@@ -556,11 +557,11 @@ function patchStyle(el, prev, next) {
 }
 const semicolonRE = /[^\\];\s*$/;
 const importantRE = /\s*!important$/;
-function setStyle(style, name, val) {
-  if (isArray(val)) {
-    val.forEach((v) => setStyle(style, name, v));
+function setStyle(style, name, rawVal) {
+  if (isArray(rawVal)) {
+    rawVal.forEach((v) => setStyle(style, name, v));
   } else {
-    if (val == null) val = "";
+    const val = rawVal == null ? "" : String(rawVal);
     if (!!(process.env.NODE_ENV !== "production")) {
       if (semicolonRE.test(val)) {
         warn(
@@ -633,8 +634,7 @@ function patchDOMProp(el, key, value, parentComponent, attrName) {
     return;
   }
   const tag = el.tagName;
-  if (key === "value" && tag !== "PROGRESS" && // custom elements may use _value internally
-  !tag.includes("-")) {
+  if (key === "value" && canSetValueDirectly(tag)) {
     const oldValue = tag === "OPTION" ? el.getAttribute("value") || "" : el.value;
     const newValue = value == null ? (
       // #11647: value should be set as empty string for null and undefined,
@@ -762,8 +762,6 @@ function patchStopImmediatePropagation(e, value) {
   }
 }
 
-const isNativeOn = (key) => key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && // lowercase letter
-key.charCodeAt(2) > 96 && key.charCodeAt(2) < 123;
 const patchProp = (el, key, prevValue, nextValue, namespace, parentComponent) => {
   const isSVG = namespace === "svg";
   if (key === "class") {
@@ -803,24 +801,9 @@ function shouldSetAsProp(el, key, value, isSVG) {
     }
     return false;
   }
-  if (key === "spellcheck" || key === "draggable" || key === "translate" || key === "autocorrect") {
+  if (shouldSetAsAttr(el.tagName, key)) {
     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) && isString(value)) {
     return false;
   }
@@ -1426,28 +1409,12 @@ 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 = 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);
-    }
+    vModelTextInit(
+      el,
+      trim,
+      number || !!(vnode.props && vnode.props.type === "number"),
+      lazy
+    );
   },
   // set value on mounted so it's after min/max for type="range"
   mounted(el, { value }) {
@@ -1455,70 +1422,111 @@ const vModelText = {
   },
   beforeUpdate(el, { value, oldValue, modifiers: { lazy, trim, number } }, vnode) {
     el[assignKey] = getModelAssigner(vnode);
-    if (el.composing) return;
-    const elValue = (number || el.type === "number") && !/^0\d/.test(el.value) ? looseToNumber(el.value) : el.value;
-    const newValue = value == null ? "" : value;
-    if (elValue === newValue) {
+    vModelTextUpdate(el, oldValue, value, trim, number, lazy);
+  }
+};
+const vModelTextInit = (el, trim, number, lazy, set) => {
+  addEventListener(el, lazy ? "change" : "input", (e) => {
+    if (e.target.composing) return;
+    let domValue = el.value;
+    if (trim) {
+      domValue = domValue.trim();
+    }
+    if (number || el.type === "number") {
+      domValue = looseToNumber(domValue);
+    }
+    (set || 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);
+  }
+};
+const vModelTextUpdate = (el, oldValue, value, trim, number, lazy) => {
+  if (el.composing) return;
+  const elValue = (number || el.type === "number") && !/^0\d/.test(el.value) ? looseToNumber(el.value) : el.value;
+  const newValue = value == null ? "" : value;
+  if (elValue === newValue) {
+    return;
+  }
+  if (document.activeElement === el && el.type !== "range") {
+    if (lazy && value === oldValue) {
       return;
     }
-    if (document.activeElement === el && el.type !== "range") {
-      if (lazy && value === oldValue) {
-        return;
-      }
-      if (trim && el.value.trim() === newValue) {
-        return;
-      }
+    if (trim && el.value.trim() === newValue) {
+      return;
     }
-    el.value = newValue;
   }
+  el.value = newValue;
 };
 const vModelCheckbox = {
   // #4096 array checkboxes need to be deep traversed
   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 (isArray(modelValue)) {
-        const index = 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 (isSet(modelValue)) {
-        const cloned = new Set(modelValue);
-        if (checked) {
-          cloned.add(elementValue);
-        } else {
-          cloned.delete(elementValue);
-        }
-        assign(cloned);
-      } else {
-        assign(getCheckboxValue(el, checked));
-      }
-    });
+    vModelCheckboxInit(el);
   },
   // set initial checked on mount to wait for true-value/false-value
-  mounted: setChecked,
+  mounted(el, binding, vnode) {
+    vModelCheckboxUpdate(
+      el,
+      binding.oldValue,
+      binding.value,
+      vnode.props.value
+    );
+  },
   beforeUpdate(el, binding, vnode) {
     el[assignKey] = getModelAssigner(vnode);
-    setChecked(el, binding, vnode);
+    vModelCheckboxUpdate(
+      el,
+      binding.oldValue,
+      binding.value,
+      vnode.props.value
+    );
   }
 };
-function setChecked(el, { value, oldValue }, vnode) {
+const vModelCheckboxInit = (el, set) => {
+  addEventListener(el, "change", () => {
+    const assign = set || el[assignKey];
+    const modelValue = el._modelValue;
+    const elementValue = getValue(el);
+    const checked = el.checked;
+    if (isArray(modelValue)) {
+      const index = 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 (isSet(modelValue)) {
+      const cloned = new Set(modelValue);
+      if (checked) {
+        cloned.add(elementValue);
+      } else {
+        cloned.delete(elementValue);
+      }
+      assign(cloned);
+    } else {
+      assign(getCheckboxValue(el, checked));
+    }
+  });
+};
+const vModelCheckboxUpdate = (el, oldValue, value, rawValue = getValue(el)) => {
   el._modelValue = value;
   let checked;
   if (isArray(value)) {
-    checked = looseIndexOf(value, vnode.props.value) > -1;
+    checked = looseIndexOf(value, rawValue) > -1;
   } else if (isSet(value)) {
-    checked = value.has(vnode.props.value);
+    checked = value.has(rawValue);
   } else {
     if (value === oldValue) return;
     checked = looseEqual(value, getCheckboxValue(el, true));
@@ -1526,7 +1534,7 @@ function setChecked(el, { value, oldValue }, vnode) {
   if (el.checked !== checked) {
     el.checked = checked;
   }
-}
+};
 const vModelRadio = {
   created(el, { value }, vnode) {
     el.checked = looseEqual(value, vnode.props.value);
@@ -1546,36 +1554,38 @@ const vModelSelect = {
   // <select multiple> value need to be deep traversed
   deep: true,
   created(el, { value, modifiers: { number } }, vnode) {
-    const isSetModel = isSet(value);
-    addEventListener(el, "change", () => {
-      const selectedVal = Array.prototype.filter.call(el.options, (o) => o.selected).map(
-        (o) => number ? looseToNumber(getValue(o)) : getValue(o)
-      );
-      el[assignKey](
-        el.multiple ? isSetModel ? new Set(selectedVal) : selectedVal : selectedVal[0]
-      );
-      el._assigning = true;
-      nextTick(() => {
-        el._assigning = false;
-      });
-    });
+    vModelSelectInit(el, value, number);
     el[assignKey] = getModelAssigner(vnode);
   },
   // set value in mounted & updated because <select> relies on its children
   // <option>s.
   mounted(el, { value }) {
-    setSelected(el, value);
+    vModelSetSelected(el, value);
   },
   beforeUpdate(el, _binding, vnode) {
     el[assignKey] = getModelAssigner(vnode);
   },
   updated(el, { value }) {
-    if (!el._assigning) {
-      setSelected(el, value);
-    }
+    vModelSetSelected(el, value);
   }
 };
-function setSelected(el, value) {
+const vModelSelectInit = (el, value, number, set) => {
+  const isSetModel = isSet(value);
+  addEventListener(el, "change", () => {
+    const selectedVal = Array.prototype.filter.call(el.options, (o) => o.selected).map(
+      (o) => number ? looseToNumber(getValue(o)) : getValue(o)
+    );
+    (set || el[assignKey])(
+      el.multiple ? isSetModel ? new Set(selectedVal) : selectedVal : selectedVal[0]
+    );
+    el._assigning = true;
+    nextTick(() => {
+      el._assigning = false;
+    });
+  });
+};
+const vModelSetSelected = (el, value) => {
+  if (el._assigning) return;
   const isMultiple = el.multiple;
   const isArrayValue = isArray(value);
   if (isMultiple && !isArrayValue && !isSet(value)) {
@@ -1606,13 +1616,20 @@ function setSelected(el, value) {
   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;
+  if (key in el) {
+    return el[key];
+  }
+  const attr = checked ? "true-value" : "false-value";
+  if (el.hasAttribute(attr)) {
+    return el.getAttribute(attr);
+  }
+  return checked;
 }
 const vModelDynamic = {
   created(el, binding, vnode) {
@@ -1865,4 +1882,4 @@ const initDirectivesForSSR = () => {
   }
 } ;
 
-export { Transition, TransitionGroup, VueElement, createApp, createSSRApp, defineCustomElement, defineSSRCustomElement, hydrate, initDirectivesForSSR, render, useCssModule, useCssVars, useHost, useShadowRoot, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, withKeys, withModifiers };
+export { Transition, TransitionGroup, VueElement, createApp, createSSRApp, defineCustomElement, defineSSRCustomElement, ensureRenderer, hydrate, initDirectivesForSSR, normalizeContainer, patchStyle, render, shouldSetAsProp, useCssModule, useCssVars, useHost, useShadowRoot, vModelCheckbox, vModelCheckboxInit, vModelCheckboxUpdate, vModelDynamic, getValue as vModelGetValue, vModelRadio, vModelSelect, vModelSelectInit, vModelSetSelected, vModelText, vModelTextInit, vModelTextUpdate, vShow, vShowHidden, vShowOriginalDisplay, withKeys, withModifiers };