vant 4.6.6 → 4.6.8

package/lib/vant.cjs.js

@@ -629,15 +629,32 @@ const configProviderProps = {
   themeVars: Object,
   themeVarsDark: Object,
   themeVarsLight: Object,
+  themeVarsScope: makeStringProp("local"),
   iconPrefix: String
 };
+function insertDash(str) {
+  return str.replace(/([a-zA-Z])(\d)/g, "$1-$2");
+}
 function mapThemeVarsToCSSVars(themeVars) {
   const cssVars = {};
   Object.keys(themeVars).forEach((key) => {
-    cssVars[`--van-${kebabCase(key)}`] = themeVars[key];
+    const formattedKey = insertDash(kebabCase(key));
+    cssVars[`--van-${formattedKey}`] = themeVars[key];
   });
   return cssVars;
 }
+function syncThemeVarsOnRoot(newStyle = {}, oldStyle = {}) {
+  Object.keys(newStyle).forEach((key) => {
+    if (newStyle[key] !== oldStyle[key]) {
+      document.documentElement.style.setProperty(key, newStyle[key]);
+    }
+  });
+  Object.keys(oldStyle).forEach((key) => {
+    if (!newStyle[key]) {
+      document.documentElement.style.removeProperty(key);
+    }
+  });
+}
 var stdin_default$1R = vue.defineComponent({
   name: name$1H,
   props: configProviderProps,
@@ -663,6 +680,22 @@ var stdin_default$1R = vue.defineComponent({
       vue.onActivated(addTheme);
       vue.onDeactivated(removeTheme);
       vue.onBeforeUnmount(removeTheme);
+      vue.watch(style, (newStyle, oldStyle) => {
+        if (props2.themeVarsScope === "global") {
+          syncThemeVarsOnRoot(newStyle, oldStyle);
+        }
+      });
+      vue.watch(() => props2.themeVarsScope, (newScope, oldScope) => {
+        if (oldScope === "global") {
+          syncThemeVarsOnRoot({}, style.value);
+        }
+        if (newScope === "global") {
+          syncThemeVarsOnRoot(style.value, {});
+        }
+      });
+      if (props2.themeVarsScope === "global") {
+        syncThemeVarsOnRoot(style.value, {});
+      }
     }
     vue.provide(CONFIG_PROVIDER_KEY, props2);
     vue.watchEffect(() => {
@@ -672,7 +705,7 @@ var stdin_default$1R = vue.defineComponent({
     });
     return () => vue.createVNode(props2.tag, {
       "class": bem$1C(),
-      "style": style.value
+      "style": props2.themeVarsScope === "local" ? style.value : void 0
     }, {
       default: () => {
         var _a;
@@ -5315,7 +5348,11 @@ var stdin_default$1n = vue.defineComponent({
     shape: String,
     parent: Object,
     checked: Boolean,
-    bindGroup: truthProp
+    bindGroup: truthProp,
+    indeterminate: {
+      type: Boolean,
+      default: null
+    }
   }),
   emits: ["click", "toggle"],
   setup(props2, {
@@ -5369,14 +5406,16 @@ var stdin_default$1n = vue.defineComponent({
       var _a, _b;
       const {
         bem: bem2,
-        checked
+        checked,
+        indeterminate
       } = props2;
       const iconSize = props2.iconSize || getParentProp("iconSize");
       return vue.createVNode("div", {
         "ref": iconRef,
         "class": bem2("icon", [shape.value, {
           disabled: disabled.value,
-          checked
+          checked,
+          indeterminate
         }]),
         "style": shape.value !== "dot" ? {
           fontSize: addUnit(iconSize)
@@ -5389,7 +5428,7 @@ var stdin_default$1n = vue.defineComponent({
         checked,
         disabled: disabled.value
       }) : shape.value !== "dot" ? vue.createVNode(Icon, {
-        "name": "success",
+        "name": indeterminate ? "minus" : "success",
         "style": iconStyle.value
       }, null) : vue.createVNode("div", {
         "class": bem2("icon--dot__icon"),
@@ -7485,7 +7524,11 @@ var stdin_default$19 = vue.defineComponent({
 const [name$$, bem$_] = createNamespace("checkbox");
 const checkboxProps = extend({}, checkerProps, {
   shape: String,
-  bindGroup: truthProp
+  bindGroup: truthProp,
+  indeterminate: {
+    type: Boolean,
+    default: null
+  }
 });
 var stdin_default$18 = vue.defineComponent({
   name: name$$,
@@ -7537,8 +7580,13 @@ var stdin_default$18 = vue.defineComponent({
       } else {
         emit("update:modelValue", newValue);
       }
+      if (props2.indeterminate !== null)
+        emit("change", newValue);
     };
-    vue.watch(() => props2.modelValue, (value) => emit("change", value));
+    vue.watch(() => props2.modelValue, (value) => {
+      if (props2.indeterminate === null)
+        emit("change", value);
+    });
     useExpose({
       toggle,
       props: props2,
@@ -11160,6 +11208,8 @@ const navBarProps = {
   border: truthProp,
   leftText: String,
   rightText: String,
+  leftDisabled: Boolean,
+  rightDisabled: Boolean,
   leftArrow: Boolean,
   placeholder: Boolean,
   safeAreaInsetTop: Boolean,
@@ -11175,8 +11225,16 @@ var stdin_default$I = vue.defineComponent({
   }) {
     const navBarRef = vue.ref();
     const renderPlaceholder = usePlaceholder(navBarRef, bem$z);
-    const onClickLeft = (event) => emit("clickLeft", event);
-    const onClickRight = (event) => emit("clickRight", event);
+    const onClickLeft = (event) => {
+      if (!props2.leftDisabled) {
+        emit("clickLeft", event);
+      }
+    };
+    const onClickRight = (event) => {
+      if (!props2.rightDisabled) {
+        emit("clickRight", event);
+      }
+    };
     const renderLeft = () => {
       if (slots.left) {
         return slots.left();
@@ -11218,12 +11276,16 @@ var stdin_default$I = vue.defineComponent({
       }, [vue.createVNode("div", {
         "class": bem$z("content")
       }, [hasLeft && vue.createVNode("div", {
-        "class": [bem$z("left"), props2.clickable ? HAPTICS_FEEDBACK : ""],
+        "class": [bem$z("left", {
+          disabled: props2.leftDisabled
+        }), props2.clickable && !props2.leftDisabled ? HAPTICS_FEEDBACK : ""],
         "onClick": onClickLeft
       }, [renderLeft()]), vue.createVNode("div", {
         "class": [bem$z("title"), "van-ellipsis"]
       }, [slots.title ? slots.title() : title]), hasRight && vue.createVNode("div", {
-        "class": [bem$z("right"), props2.clickable ? HAPTICS_FEEDBACK : ""],
+        "class": [bem$z("right", {
+          disabled: props2.rightDisabled
+        }), props2.clickable && !props2.rightDisabled ? HAPTICS_FEEDBACK : ""],
         "onClick": onClickRight
       }, [renderRight()])])]);
     };
@@ -16413,7 +16475,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.6.6";
+const version = "4.6.8";
 function install(app) {
   const components = [
     ActionBar,

package/lib/vant.es.js

@@ -627,15 +627,32 @@ const configProviderProps = {
   themeVars: Object,
   themeVarsDark: Object,
   themeVarsLight: Object,
+  themeVarsScope: makeStringProp("local"),
   iconPrefix: String
 };
+function insertDash(str) {
+  return str.replace(/([a-zA-Z])(\d)/g, "$1-$2");
+}
 function mapThemeVarsToCSSVars(themeVars) {
   const cssVars = {};
   Object.keys(themeVars).forEach((key) => {
-    cssVars[`--van-${kebabCase(key)}`] = themeVars[key];
+    const formattedKey = insertDash(kebabCase(key));
+    cssVars[`--van-${formattedKey}`] = themeVars[key];
   });
   return cssVars;
 }
+function syncThemeVarsOnRoot(newStyle = {}, oldStyle = {}) {
+  Object.keys(newStyle).forEach((key) => {
+    if (newStyle[key] !== oldStyle[key]) {
+      document.documentElement.style.setProperty(key, newStyle[key]);
+    }
+  });
+  Object.keys(oldStyle).forEach((key) => {
+    if (!newStyle[key]) {
+      document.documentElement.style.removeProperty(key);
+    }
+  });
+}
 var stdin_default$1R = defineComponent({
   name: name$1H,
   props: configProviderProps,
@@ -661,6 +678,22 @@ var stdin_default$1R = defineComponent({
       onActivated(addTheme);
       onDeactivated(removeTheme);
       onBeforeUnmount(removeTheme);
+      watch(style, (newStyle, oldStyle) => {
+        if (props2.themeVarsScope === "global") {
+          syncThemeVarsOnRoot(newStyle, oldStyle);
+        }
+      });
+      watch(() => props2.themeVarsScope, (newScope, oldScope) => {
+        if (oldScope === "global") {
+          syncThemeVarsOnRoot({}, style.value);
+        }
+        if (newScope === "global") {
+          syncThemeVarsOnRoot(style.value, {});
+        }
+      });
+      if (props2.themeVarsScope === "global") {
+        syncThemeVarsOnRoot(style.value, {});
+      }
     }
     provide(CONFIG_PROVIDER_KEY, props2);
     watchEffect(() => {
@@ -670,7 +703,7 @@ var stdin_default$1R = defineComponent({
     });
     return () => createVNode(props2.tag, {
       "class": bem$1C(),
-      "style": style.value
+      "style": props2.themeVarsScope === "local" ? style.value : void 0
     }, {
       default: () => {
         var _a;
@@ -5313,7 +5346,11 @@ var stdin_default$1n = defineComponent({
     shape: String,
     parent: Object,
     checked: Boolean,
-    bindGroup: truthProp
+    bindGroup: truthProp,
+    indeterminate: {
+      type: Boolean,
+      default: null
+    }
   }),
   emits: ["click", "toggle"],
   setup(props2, {
@@ -5367,14 +5404,16 @@ var stdin_default$1n = defineComponent({
       var _a, _b;
       const {
         bem: bem2,
-        checked
+        checked,
+        indeterminate
       } = props2;
       const iconSize = props2.iconSize || getParentProp("iconSize");
       return createVNode("div", {
         "ref": iconRef,
         "class": bem2("icon", [shape.value, {
           disabled: disabled.value,
-          checked
+          checked,
+          indeterminate
         }]),
         "style": shape.value !== "dot" ? {
           fontSize: addUnit(iconSize)
@@ -5387,7 +5426,7 @@ var stdin_default$1n = defineComponent({
         checked,
         disabled: disabled.value
       }) : shape.value !== "dot" ? createVNode(Icon, {
-        "name": "success",
+        "name": indeterminate ? "minus" : "success",
         "style": iconStyle.value
       }, null) : createVNode("div", {
         "class": bem2("icon--dot__icon"),
@@ -7483,7 +7522,11 @@ var stdin_default$19 = defineComponent({
 const [name$$, bem$_] = createNamespace("checkbox");
 const checkboxProps = extend({}, checkerProps, {
   shape: String,
-  bindGroup: truthProp
+  bindGroup: truthProp,
+  indeterminate: {
+    type: Boolean,
+    default: null
+  }
 });
 var stdin_default$18 = defineComponent({
   name: name$$,
@@ -7535,8 +7578,13 @@ var stdin_default$18 = defineComponent({
       } else {
         emit("update:modelValue", newValue);
       }
+      if (props2.indeterminate !== null)
+        emit("change", newValue);
     };
-    watch(() => props2.modelValue, (value) => emit("change", value));
+    watch(() => props2.modelValue, (value) => {
+      if (props2.indeterminate === null)
+        emit("change", value);
+    });
     useExpose({
       toggle,
       props: props2,
@@ -11158,6 +11206,8 @@ const navBarProps = {
   border: truthProp,
   leftText: String,
   rightText: String,
+  leftDisabled: Boolean,
+  rightDisabled: Boolean,
   leftArrow: Boolean,
   placeholder: Boolean,
   safeAreaInsetTop: Boolean,
@@ -11173,8 +11223,16 @@ var stdin_default$I = defineComponent({
   }) {
     const navBarRef = ref();
     const renderPlaceholder = usePlaceholder(navBarRef, bem$z);
-    const onClickLeft = (event) => emit("clickLeft", event);
-    const onClickRight = (event) => emit("clickRight", event);
+    const onClickLeft = (event) => {
+      if (!props2.leftDisabled) {
+        emit("clickLeft", event);
+      }
+    };
+    const onClickRight = (event) => {
+      if (!props2.rightDisabled) {
+        emit("clickRight", event);
+      }
+    };
     const renderLeft = () => {
       if (slots.left) {
         return slots.left();
@@ -11216,12 +11274,16 @@ var stdin_default$I = defineComponent({
       }, [createVNode("div", {
         "class": bem$z("content")
       }, [hasLeft && createVNode("div", {
-        "class": [bem$z("left"), props2.clickable ? HAPTICS_FEEDBACK : ""],
+        "class": [bem$z("left", {
+          disabled: props2.leftDisabled
+        }), props2.clickable && !props2.leftDisabled ? HAPTICS_FEEDBACK : ""],
         "onClick": onClickLeft
       }, [renderLeft()]), createVNode("div", {
         "class": [bem$z("title"), "van-ellipsis"]
       }, [slots.title ? slots.title() : title]), hasRight && createVNode("div", {
-        "class": [bem$z("right"), props2.clickable ? HAPTICS_FEEDBACK : ""],
+        "class": [bem$z("right", {
+          disabled: props2.rightDisabled
+        }), props2.clickable && !props2.rightDisabled ? HAPTICS_FEEDBACK : ""],
         "onClick": onClickRight
       }, [renderRight()])])]);
     };
@@ -16411,7 +16473,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.6.6";
+const version = "4.6.8";
 function install(app) {
   const components = [
     ActionBar,

package/lib/vant.js

@@ -1017,15 +1017,32 @@
     themeVars: Object,
     themeVarsDark: Object,
     themeVarsLight: Object,
+    themeVarsScope: makeStringProp("local"),
     iconPrefix: String
   };
+  function insertDash(str) {
+    return str.replace(/([a-zA-Z])(\d)/g, "$1-$2");
+  }
   function mapThemeVarsToCSSVars(themeVars) {
     const cssVars = {};
     Object.keys(themeVars).forEach((key) => {
-      cssVars[`--van-${kebabCase(key)}`] = themeVars[key];
+      const formattedKey = insertDash(kebabCase(key));
+      cssVars[`--van-${formattedKey}`] = themeVars[key];
     });
     return cssVars;
   }
+  function syncThemeVarsOnRoot(newStyle = {}, oldStyle = {}) {
+    Object.keys(newStyle).forEach((key) => {
+      if (newStyle[key] !== oldStyle[key]) {
+        document.documentElement.style.setProperty(key, newStyle[key]);
+      }
+    });
+    Object.keys(oldStyle).forEach((key) => {
+      if (!newStyle[key]) {
+        document.documentElement.style.removeProperty(key);
+      }
+    });
+  }
   var stdin_default$1R = vue.defineComponent({
     name: name$1H,
     props: configProviderProps,
@@ -1051,6 +1068,22 @@
         vue.onActivated(addTheme);
         vue.onDeactivated(removeTheme);
         vue.onBeforeUnmount(removeTheme);
+        vue.watch(style, (newStyle, oldStyle) => {
+          if (props2.themeVarsScope === "global") {
+            syncThemeVarsOnRoot(newStyle, oldStyle);
+          }
+        });
+        vue.watch(() => props2.themeVarsScope, (newScope, oldScope) => {
+          if (oldScope === "global") {
+            syncThemeVarsOnRoot({}, style.value);
+          }
+          if (newScope === "global") {
+            syncThemeVarsOnRoot(style.value, {});
+          }
+        });
+        if (props2.themeVarsScope === "global") {
+          syncThemeVarsOnRoot(style.value, {});
+        }
       }
       vue.provide(CONFIG_PROVIDER_KEY, props2);
       vue.watchEffect(() => {
@@ -1060,7 +1093,7 @@
       });
       return () => vue.createVNode(props2.tag, {
         "class": bem$1C(),
-        "style": style.value
+        "style": props2.themeVarsScope === "local" ? style.value : void 0
       }, {
         default: () => {
           var _a;
@@ -5774,7 +5807,11 @@
       shape: String,
       parent: Object,
       checked: Boolean,
-      bindGroup: truthProp
+      bindGroup: truthProp,
+      indeterminate: {
+        type: Boolean,
+        default: null
+      }
     }),
     emits: ["click", "toggle"],
     setup(props2, {
@@ -5828,14 +5865,16 @@
         var _a, _b;
         const {
           bem: bem2,
-          checked
+          checked,
+          indeterminate
         } = props2;
         const iconSize = props2.iconSize || getParentProp("iconSize");
         return vue.createVNode("div", {
           "ref": iconRef,
           "class": bem2("icon", [shape.value, {
             disabled: disabled.value,
-            checked
+            checked,
+            indeterminate
           }]),
           "style": shape.value !== "dot" ? {
             fontSize: addUnit(iconSize)
@@ -5848,7 +5887,7 @@
           checked,
           disabled: disabled.value
         }) : shape.value !== "dot" ? vue.createVNode(Icon, {
-          "name": "success",
+          "name": indeterminate ? "minus" : "success",
           "style": iconStyle.value
         }, null) : vue.createVNode("div", {
           "class": bem2("icon--dot__icon"),
@@ -7941,7 +7980,11 @@
   const [name$$, bem$_] = createNamespace("checkbox");
   const checkboxProps = extend({}, checkerProps, {
     shape: String,
-    bindGroup: truthProp
+    bindGroup: truthProp,
+    indeterminate: {
+      type: Boolean,
+      default: null
+    }
   });
   var stdin_default$18 = vue.defineComponent({
     name: name$$,
@@ -7993,8 +8036,13 @@
         } else {
           emit("update:modelValue", newValue);
         }
+        if (props2.indeterminate !== null)
+          emit("change", newValue);
       };
-      vue.watch(() => props2.modelValue, (value) => emit("change", value));
+      vue.watch(() => props2.modelValue, (value) => {
+        if (props2.indeterminate === null)
+          emit("change", value);
+      });
       useExpose({
         toggle,
         props: props2,
@@ -11587,6 +11635,8 @@
     border: truthProp,
     leftText: String,
     rightText: String,
+    leftDisabled: Boolean,
+    rightDisabled: Boolean,
     leftArrow: Boolean,
     placeholder: Boolean,
     safeAreaInsetTop: Boolean,
@@ -11602,8 +11652,16 @@
     }) {
       const navBarRef = vue.ref();
       const renderPlaceholder = usePlaceholder(navBarRef, bem$z);
-      const onClickLeft = (event) => emit("clickLeft", event);
-      const onClickRight = (event) => emit("clickRight", event);
+      const onClickLeft = (event) => {
+        if (!props2.leftDisabled) {
+          emit("clickLeft", event);
+        }
+      };
+      const onClickRight = (event) => {
+        if (!props2.rightDisabled) {
+          emit("clickRight", event);
+        }
+      };
       const renderLeft = () => {
         if (slots.left) {
           return slots.left();
@@ -11645,12 +11703,16 @@
         }, [vue.createVNode("div", {
           "class": bem$z("content")
         }, [hasLeft && vue.createVNode("div", {
-          "class": [bem$z("left"), props2.clickable ? HAPTICS_FEEDBACK : ""],
+          "class": [bem$z("left", {
+            disabled: props2.leftDisabled
+          }), props2.clickable && !props2.leftDisabled ? HAPTICS_FEEDBACK : ""],
           "onClick": onClickLeft
         }, [renderLeft()]), vue.createVNode("div", {
           "class": [bem$z("title"), "van-ellipsis"]
         }, [slots.title ? slots.title() : title]), hasRight && vue.createVNode("div", {
-          "class": [bem$z("right"), props2.clickable ? HAPTICS_FEEDBACK : ""],
+          "class": [bem$z("right", {
+            disabled: props2.rightDisabled
+          }), props2.clickable && !props2.rightDisabled ? HAPTICS_FEEDBACK : ""],
           "onClick": onClickRight
         }, [renderRight()])])]);
       };
@@ -17623,7 +17685,7 @@
       });
     }
   };
-  const version = "4.6.6";
+  const version = "4.6.8";
   function install(app) {
     const components = [
       ActionBar,