vant 4.0.0-rc.4 → 4.0.0-rc.6

package/es/calendar/Calendar.mjs

@@ -106,7 +106,10 @@ var stdin_default = defineComponent({
     };
     let bodyHeight;
     const bodyRef = ref();
-    const subtitle = ref("");
+    const subtitle = ref({
+      text: "",
+      date: void 0
+    });
     const currentDate = ref(getInitialDate());
     const [monthRefs, setMonthRefs] = useRefs();
     const dayOffset = computed(() => props.firstDayOfWeek ? +props.firstDayOfWeek % 7 : 0);
@@ -167,7 +170,10 @@ var stdin_default = defineComponent({
         monthRefs.value[index].setVisible(visible);
       });
       if (currentMonth) {
-        subtitle.value = currentMonth.getTitle();
+        subtitle.value = {
+          text: currentMonth.getTitle(),
+          date: currentMonth.date
+        };
       }
     };
     const scrollToDate = (targetDate) => {
@@ -357,8 +363,9 @@ var stdin_default = defineComponent({
     const renderCalendar = () => _createVNode("div", {
       "class": bem()
     }, [_createVNode(CalendarHeader, {
+      "date": subtitle.value.date,
       "title": props.title,
-      "subtitle": subtitle.value,
+      "subtitle": subtitle.value.text,
       "showTitle": props.showTitle,
       "showSubtitle": props.showSubtitle,
       "firstDayOfWeek": dayOffset.value,

package/es/calendar/CalendarHeader.d.ts

@@ -1,10 +1,12 @@
 declare const _default: import("vue").DefineComponent<{
+    date: DateConstructor;
     title: StringConstructor;
     subtitle: StringConstructor;
     showTitle: BooleanConstructor;
     showSubtitle: BooleanConstructor;
     firstDayOfWeek: NumberConstructor;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "clickSubtitle"[], "clickSubtitle", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    date: DateConstructor;
     title: StringConstructor;
     subtitle: StringConstructor;
     showTitle: BooleanConstructor;

package/es/calendar/CalendarHeader.mjs

@@ -6,6 +6,7 @@ const [name] = createNamespace("calendar-header");
 var stdin_default = defineComponent({
   name,
   props: {
+    date: Date,
     title: String,
     subtitle: String,
     showTitle: Boolean,
@@ -29,7 +30,10 @@ var stdin_default = defineComponent({
     const onClickSubtitle = (event) => emit("clickSubtitle", event);
     const renderSubtitle = () => {
       if (props.showSubtitle) {
-        const title = slots.subtitle ? slots.subtitle() : props.subtitle;
+        const title = slots.subtitle ? slots.subtitle({
+          date: props.date,
+          text: props.subtitle
+        }) : props.subtitle;
         return _createVNode("div", {
           "class": bem("header-subtitle"),
           "onClick": onClickSubtitle

package/es/cell/Cell.d.ts

@@ -2,6 +2,10 @@ import { type PropType, type CSSProperties, type ExtractPropTypes } from 'vue';
 export declare type CellSize = 'normal' | 'large';
 export declare type CellArrowDirection = 'up' | 'down' | 'left' | 'right';
 export declare const cellSharedProps: {
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
     icon: StringConstructor;
     size: PropType<CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -26,6 +30,10 @@ export declare const cellSharedProps: {
     };
 };
 export declare const cellProps: {
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
     icon: StringConstructor;
     size: PropType<CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -55,6 +63,10 @@ export declare const cellProps: {
 };
 export declare type CellProps = ExtractPropTypes<typeof cellProps>;
 declare const _default: import("vue").DefineComponent<{
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
     icon: StringConstructor;
     size: PropType<CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -82,6 +94,10 @@ declare const _default: import("vue").DefineComponent<{
     url: StringConstructor;
     replace: BooleanConstructor;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
     icon: StringConstructor;
     size: PropType<CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -111,6 +127,7 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     replace: boolean;
     required: boolean;
+    tag: keyof HTMLElementTagNameMap;
     center: boolean;
     isLink: boolean;
     border: boolean;

package/es/cell/Cell.mjs

@@ -1,10 +1,11 @@
 import { createVNode as _createVNode } from "vue";
 import { defineComponent } from "vue";
-import { isDef, extend, truthProp, unknownProp, numericProp, createNamespace } from "../utils/index.mjs";
+import { isDef, extend, truthProp, unknownProp, numericProp, makeStringProp, createNamespace } from "../utils/index.mjs";
 import { useRoute, routeProps } from "../composables/use-route.mjs";
 import { Icon } from "../icon/index.mjs";
 const [name, bem] = createNamespace("cell");
 const cellSharedProps = {
+  tag: makeStringProp("div"),
   icon: String,
   size: String,
   title: numericProp,
@@ -83,8 +84,9 @@ var stdin_default = defineComponent({
       }
     };
     return () => {
-      var _a, _b;
+      var _a;
       const {
+        tag,
         size,
         center,
         border,
@@ -101,12 +103,17 @@ var stdin_default = defineComponent({
       if (size) {
         classes[size] = !!size;
       }
-      return _createVNode("div", {
+      return _createVNode(tag, {
         "class": bem(classes),
         "role": clickable ? "button" : void 0,
         "tabindex": clickable ? 0 : void 0,
         "onClick": route
-      }, [renderLeftIcon(), renderTitle(), renderValue(), renderRightIcon(), (_b = slots.extra) == null ? void 0 : _b.call(slots)]);
+      }, {
+        default: () => {
+          var _a2;
+          return [renderLeftIcon(), renderTitle(), renderValue(), renderRightIcon(), (_a2 = slots.extra) == null ? void 0 : _a2.call(slots)];
+        }
+      });
     };
   }
 });

package/es/cell/index.d.ts

@@ -1,4 +1,8 @@
 export declare const Cell: import("../utils").WithInstall<import("vue").DefineComponent<{
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
     icon: StringConstructor;
     size: import("vue").PropType<import("./Cell").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -26,6 +30,10 @@ export declare const Cell: import("../utils").WithInstall<import("vue").DefineCo
     url: StringConstructor;
     replace: BooleanConstructor;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
     icon: StringConstructor;
     size: import("vue").PropType<import("./Cell").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -55,6 +63,7 @@ export declare const Cell: import("../utils").WithInstall<import("vue").DefineCo
 }>>, {
     replace: boolean;
     required: boolean;
+    tag: keyof HTMLElementTagNameMap;
     center: boolean;
     isLink: boolean;
     border: boolean;

package/es/collapse-item/CollapseItem.d.ts

@@ -1,5 +1,9 @@
 import { type ExtractPropTypes } from 'vue';
 export declare const collapseItemProps: {
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
     icon: StringConstructor;
     size: import("vue").PropType<import("../cell").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -37,6 +41,10 @@ export declare const collapseItemProps: {
 };
 export declare type CollapseItemProps = ExtractPropTypes<typeof collapseItemProps>;
 declare const _default: import("vue").DefineComponent<{
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
     icon: StringConstructor;
     size: import("vue").PropType<import("../cell").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -72,6 +80,10 @@ declare const _default: import("vue").DefineComponent<{
         default: true;
     };
 }, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
     icon: StringConstructor;
     size: import("vue").PropType<import("../cell").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -108,6 +120,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     required: boolean;
+    tag: keyof HTMLElementTagNameMap;
     center: boolean;
     disabled: boolean;
     isLink: boolean;

package/es/collapse-item/index.d.ts

@@ -1,4 +1,8 @@
 export declare const CollapseItem: import("../utils").WithInstall<import("vue").DefineComponent<{
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
     icon: StringConstructor;
     size: import("vue").PropType<import("..").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -34,6 +38,10 @@ export declare const CollapseItem: import("../utils").WithInstall<import("vue").
         default: true;
     };
 }, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
     icon: StringConstructor;
     size: import("vue").PropType<import("..").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -70,6 +78,7 @@ export declare const CollapseItem: import("../utils").WithInstall<import("vue").
     };
 }>>, {
     required: boolean;
+    tag: keyof HTMLElementTagNameMap;
     center: boolean;
     disabled: boolean;
     isLink: boolean;

package/es/coupon/index.css

@@ -1 +1 @@
-:root{--van-coupon-margin: 0 var(--van-padding-sm) var(--van-padding-sm);--van-coupon-content-height: 84px;--van-coupon-content-padding: 14px 0;--van-coupon-content-text-color: var(--van-text-color);--van-coupon-background: var(--van-background-2);--van-coupon-active-background: var(--van-active-color);--van-coupon-radius: var(--van-radius-lg);--van-coupon-shadow: 0 0 4px rgba(0, 0, 0, .1);--van-coupon-head-width: 96px;--van-coupon-amount-color: var(--van-primary-color);--van-coupon-amount-font-size: 30px;--van-coupon-currency-font-size: 40%;--van-coupon-name-font-size: var(--van-font-size-md);--van-coupon-disabled-text-color: var(--van-text-color-2);--van-coupon-description-padding: var(--van-padding-xs) var(--van-padding-md);--van-coupon-description-border-color: var(--van-border-color);--van-coupon-checkbox-color: var(--van-primary-color)}.van-coupon{margin:var(--van-coupon-margin);overflow:hidden;background:var(--van-coupon-background);border-radius:var(--van-coupon-radius);box-shadow:var(--van-coupon-shadow)}.van-coupon:active{background-color:var(--van-coupon-active-background)}.van-coupon__content{display:flex;align-items:center;box-sizing:border-box;min-height:var(--van-coupon-content-height);padding:var(--van-coupon-content-padding);color:var(--van-coupon-content-text-color)}.van-coupon__head{position:relative;min-width:var(--van-coupon-head-width);padding:0 var(--van-padding-xs);color:var(--van-coupon-amount-color);text-align:center}.van-coupon__amount,.van-coupon__condition,.van-coupon__name,.van-coupon__valid{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-coupon__amount{margin-bottom:6px;font-weight:var(--van-font-bold);font-size:var(--van-coupon-amount-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-coupon__amount span{font-size:var(--van-coupon-currency-font-size)}.van-coupon__amount span:not(:empty){margin-left:2px}.van-coupon__condition{font-size:var(--van-font-size-sm);line-height:16px;white-space:pre-wrap}.van-coupon__:root{position:relative;flex:1;border-radius:0 var(--van-coupon-radius) var(--van-coupon-radius) 0}.van-coupon__name{margin-bottom:10px;font-weight:var(--van-font-bold);font-size:var(--van-coupon-name-font-size);line-height:var(--van-line-height-md)}.van-coupon__valid{font-size:var(--van-font-size-sm)}.van-coupon__corner{position:absolute;top:0;right:var(--van-padding-md);bottom:0}.van-coupon__corner .van-checkbox__icon--checked .van-icon{background-color:var(--van-coupon-checkbox-color);border-color:var(--van-coupon-checkbox-color)}.van-coupon__description{padding:var(--van-coupon-description-padding);font-size:var(--van-font-size-sm);border-top:1px dashed var(--van-coupon-description-border-color)}.van-coupon--disabled:active{background-color:var(--van-coupon-background)}.van-coupon--disabled .van-coupon-item__content{height:calc(var(--van-coupon-content-height) - 10px)}.van-coupon--disabled .van-coupon__head{color:inherit}
+:root{--van-coupon-margin: 0 var(--van-padding-sm) var(--van-padding-sm);--van-coupon-content-height: 84px;--van-coupon-content-padding: 14px 0;--van-coupon-content-text-color: var(--van-text-color);--van-coupon-background: var(--van-background-2);--van-coupon-active-background: var(--van-active-color);--van-coupon-radius: var(--van-radius-lg);--van-coupon-shadow: 0 0 4px rgba(0, 0, 0, .1);--van-coupon-head-width: 96px;--van-coupon-amount-color: var(--van-primary-color);--van-coupon-amount-font-size: 30px;--van-coupon-currency-font-size: 40%;--van-coupon-name-font-size: var(--van-font-size-md);--van-coupon-disabled-text-color: var(--van-text-color-2);--van-coupon-description-padding: var(--van-padding-xs) var(--van-padding-md);--van-coupon-description-border-color: var(--van-border-color);--van-coupon-checkbox-color: var(--van-primary-color)}.van-coupon{margin:var(--van-coupon-margin);overflow:hidden;background:var(--van-coupon-background);border-radius:var(--van-coupon-radius);box-shadow:var(--van-coupon-shadow)}.van-coupon:active{background-color:var(--van-coupon-active-background)}.van-coupon__content{display:flex;align-items:center;box-sizing:border-box;min-height:var(--van-coupon-content-height);padding:var(--van-coupon-content-padding);color:var(--van-coupon-content-text-color)}.van-coupon__head{position:relative;min-width:var(--van-coupon-head-width);padding:0 var(--van-padding-xs);color:var(--van-coupon-amount-color);text-align:center}.van-coupon__amount,.van-coupon__condition,.van-coupon__name,.van-coupon__valid{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-coupon__amount{margin-bottom:6px;font-weight:var(--van-font-bold);font-size:var(--van-coupon-amount-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-coupon__amount span{font-size:var(--van-coupon-currency-font-size)}.van-coupon__amount span:not(:empty){margin-left:2px}.van-coupon__condition{font-size:var(--van-font-size-sm);line-height:16px;white-space:pre-wrap}.van-coupon__body{position:relative;flex:1}.van-coupon__name{margin-bottom:10px;font-weight:var(--van-font-bold);font-size:var(--van-coupon-name-font-size);line-height:var(--van-line-height-md)}.van-coupon__valid{font-size:var(--van-font-size-sm)}.van-coupon__corner{position:absolute;top:0;right:var(--van-padding-md);bottom:0}.van-coupon__corner .van-checkbox__icon--checked .van-icon{background-color:var(--van-coupon-checkbox-color);border-color:var(--van-coupon-checkbox-color)}.van-coupon__description{padding:var(--van-coupon-description-padding);font-size:var(--van-font-size-sm);border-top:1px dashed var(--van-coupon-description-border-color)}.van-coupon--disabled:active{background-color:var(--van-coupon-background)}.van-coupon--disabled .van-coupon-item__content{height:calc(var(--van-coupon-content-height) - 10px)}.van-coupon--disabled .van-coupon__head{color:inherit}

package/es/coupon-list/index.css

@@ -1 +1 @@
-:root{--van-coupon-list-background: var(--van-background);--van-coupon-list-field-padding: 5px 0 5px var(--van-padding-md);--van-coupon-list-exchange-button-height: 32px;--van-coupon-list-close-button-height: 40px;--van-coupon-list-empty-tip-color: var(--van-text-color-2);--van-coupon-list-empty-tip-font-size: var(--van-font-size-md);--van-coupon-list-empty-tip-line-height: var(--van-line-height-md)}.van-coupon-list{position:relative;height:100%;background:var(--van-coupon-list-background)}.van-coupon-list__field{padding:var(--van-coupon-list-field-padding)}.van-coupon-list__field .van-field__:root{height:34px;padding-left:var(--van-padding-sm);line-height:34px;background:var(--van-background);border-radius:var(--van-radius-max)}.van-coupon-list__field .van-field__:root::-webkit-input-placeholder{color:var(--van-text-color-3)}.van-coupon-list__field .van-field__:root::placeholder{color:var(--van-text-color-3)}.van-coupon-list__field .van-field__clear{margin-right:0}.van-coupon-list__exchange-bar{display:flex;align-items:center;background-color:var(--van-background-2)}.van-coupon-list__exchange{flex:none;height:var(--van-coupon-list-exchange-button-height);font-size:var(--van-font-size-lg);line-height:calc(var(--van-coupon-list-exchange-button-height) - 2px);border:0}.van-coupon-list .van-tabs__wrap{box-shadow:0 6px 12px -12px var(--van-gray-6)}.van-coupon-list__list{box-sizing:border-box;padding:var(--van-padding-md) 0 var(--van-padding-lg);overflow-y:auto;-webkit-overflow-scrolling:touch}.van-coupon-list__list--with-bottom{padding-bottom:50px}.van-coupon-list__bottom{position:absolute;bottom:0;left:0;z-index:999;box-sizing:border-box;width:100%;padding:5px var(--van-padding-md);font-weight:var(--van-font-bold);background-color:var(--van-background-2)}.van-coupon-list__close{height:var(--van-coupon-list-close-button-height)}.van-coupon-list__empty-tip{color:var(--van-coupon-list-empty-tip-color);font-size:var(--van-coupon-list-empty-tip-font-size);line-height:var(--van-coupon-list-empty-tip-line-height)}
+:root{--van-coupon-list-background: var(--van-background);--van-coupon-list-field-padding: 5px 0 5px var(--van-padding-md);--van-coupon-list-exchange-button-height: 32px;--van-coupon-list-close-button-height: 40px;--van-coupon-list-empty-tip-color: var(--van-text-color-2);--van-coupon-list-empty-tip-font-size: var(--van-font-size-md);--van-coupon-list-empty-tip-line-height: var(--van-line-height-md)}.van-coupon-list{position:relative;height:100%;background:var(--van-coupon-list-background)}.van-coupon-list__field{padding:var(--van-coupon-list-field-padding)}.van-coupon-list__field .van-field__body{height:34px;padding-left:var(--van-padding-sm);line-height:34px;background:var(--van-background);border-radius:var(--van-radius-max)}.van-coupon-list__field .van-field__body::-webkit-input-placeholder{color:var(--van-text-color-3)}.van-coupon-list__field .van-field__body::placeholder{color:var(--van-text-color-3)}.van-coupon-list__field .van-field__clear{margin-right:0}.van-coupon-list__exchange-bar{display:flex;align-items:center;background-color:var(--van-background-2)}.van-coupon-list__exchange{flex:none;height:var(--van-coupon-list-exchange-button-height);font-size:var(--van-font-size-lg);line-height:calc(var(--van-coupon-list-exchange-button-height) - 2px);border:0}.van-coupon-list .van-tabs__wrap{box-shadow:0 6px 12px -12px var(--van-gray-6)}.van-coupon-list__list{box-sizing:border-box;padding:var(--van-padding-md) 0 var(--van-padding-lg);overflow-y:auto;-webkit-overflow-scrolling:touch}.van-coupon-list__list--with-bottom{padding-bottom:50px}.van-coupon-list__bottom{position:absolute;bottom:0;left:0;z-index:999;box-sizing:border-box;width:100%;padding:5px var(--van-padding-md);font-weight:var(--van-font-bold);background-color:var(--van-background-2)}.van-coupon-list__close{height:var(--van-coupon-list-close-button-height)}.van-coupon-list__empty-tip{color:var(--van-coupon-list-empty-tip-color);font-size:var(--van-coupon-list-empty-tip-font-size);line-height:var(--van-coupon-list-empty-tip-line-height)}

package/es/date-picker/DatePicker.mjs

@@ -1,7 +1,7 @@
 import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
 import { ref, watch, computed, defineComponent } from "vue";
 import { pick, extend, isDate, isSameValue, createNamespace } from "../utils/index.mjs";
-import { genOptions, sharedProps, getMonthEndDay, pickerInheritKeys } from "./utils.mjs";
+import { genOptions, sharedProps, getMonthEndDay, pickerInheritKeys, formatValueRange } from "./utils.mjs";
 import { Picker } from "../picker/index.mjs";
 const currentYear = new Date().getFullYear();
 const [name] = createNamespace("date-picker");
@@ -89,9 +89,12 @@ var stdin_default = defineComponent({
       }
     });
     watch(() => props.modelValue, (newValues) => {
+      newValues = formatValueRange(newValues, columns.value);
       if (!isSameValue(newValues, currentValues.value)) {
         currentValues.value = newValues;
       }
+    }, {
+      immediate: true
     });
     const onChange = (...args) => emit("change", ...args);
     const onCancel = (...args) => emit("cancel", ...args);

package/es/date-picker/utils.d.ts

@@ -41,4 +41,5 @@ export declare const pickerInheritKeys: ("title" | "readonly" | "loading" | "all
 export declare function times<T>(n: number, iteratee: (index: number) => T): T[];
 export declare const getMonthEndDay: (year: number, month: number) => number;
 export declare const genOptions: <T extends string>(min: number, max: number, type: T, formatter: Formatter, filter?: Filter) => PickerOption[];
+export declare const formatValueRange: (values: string[], columns: PickerOption[]) => string[];
 export {};

package/es/date-picker/utils.mjs

@@ -31,7 +31,18 @@ const genOptions = (min, max, type, formatter, filter) => {
   });
   return filter ? filter(type, options) : options;
 };
+const formatValueRange = (values, columns) => values.map((value, index) => {
+  const column = columns[index];
+  if (column.length) {
+    const maxValue = +column[column.length - 1].value;
+    if (+value > maxValue) {
+      return String(maxValue);
+    }
+  }
+  return value;
+});
 export {
+  formatValueRange,
   genOptions,
   getMonthEndDay,
   pickerInheritKeys,

package/es/field/Field.d.ts

@@ -44,6 +44,10 @@ export declare const fieldSharedProps: {
     };
 };
 export declare const fieldProps: {
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
     icon: StringConstructor;
     size: PropType<import("../cell").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -128,6 +132,10 @@ export declare const fieldProps: {
 };
 export declare type FieldProps = ExtractPropTypes<typeof fieldProps>;
 declare const _default: import("vue").DefineComponent<{
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
     icon: StringConstructor;
     size: PropType<import("../cell").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -210,6 +218,10 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "focus" | "blur" | "keypress" | "clickInput" | "endValidate" | "startValidate" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue")[], "clear" | "focus" | "blur" | "keypress" | "clickInput" | "endValidate" | "startValidate" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
     icon: StringConstructor;
     size: PropType<import("../cell").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -305,6 +317,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     type: FieldType;
     required: boolean;
+    tag: keyof HTMLElementTagNameMap;
     center: boolean;
     autofocus: boolean;
     disabled: boolean;

package/es/field/Field.mjs

@@ -427,9 +427,9 @@ var stdin_default = defineComponent({
       const labelAlign = getProp("labelAlign");
       const Label = renderLabel();
       const LeftIcon = renderLeftIcon();
+      const renderTitle = () => labelAlign === "top" ? [LeftIcon, Label] : Label;
       return _createVNode(Cell, {
         "size": props.size,
-        "icon": props.leftIcon,
         "class": bem({
           error: showError.value,
           disabled,
@@ -446,8 +446,8 @@ var stdin_default = defineComponent({
         }]), props.labelClass],
         "arrowDirection": props.arrowDirection
       }, {
-        icon: LeftIcon ? () => LeftIcon : null,
-        title: Label ? () => Label : null,
+        icon: LeftIcon && labelAlign !== "top" ? () => LeftIcon : null,
+        title: Label || labelAlign === "top" ? renderTitle : null,
         value: renderFieldBody,
         extra: slots.extra
       });

package/es/field/index.css

@@ -1 +1 @@
-:root{--van-field-label-width: 6.2em;--van-field-label-color: var(--van-text-color);--van-field-label-margin-right: var(--van-padding-sm);--van-field-input-text-color: var(--van-text-color);--van-field-input-error-text-color: var(--van-danger-color);--van-field-input-disabled-text-color: var(--van-text-color-3);--van-field-placeholder-text-color: var(--van-text-color-3);--van-field-icon-size: 16px;--van-field-clear-icon-size: 16px;--van-field-clear-icon-color: var(--van-gray-5);--van-field-right-icon-color: var(--van-gray-6);--van-field-error-message-color: var(--van-danger-color);--van-field-error-message-font-size: 12px;--van-field-text-area-min-height: 60px;--van-field-word-limit-color: var(--van-gray-7);--van-field-word-limit-font-size: var(--van-font-size-sm);--van-field-word-limit-line-height: 16px;--van-field-disabled-text-color: var(--van-text-color-3);--van-field-required-mark-color: var(--van-red)}.van-field__label{flex:none;box-sizing:border-box;width:var(--van-field-label-width);margin-right:var(--van-field-label-margin-right);color:var(--van-field-label-color);text-align:left;word-wrap:break-word}.van-field__label--center{text-align:center}.van-field__label--right{text-align:right}.van-field__label--required:before{margin-right:2px;color:var(--van-field-required-mark-color);content:"*"}.van-field--disabled .van-field__label{color:var(--van-field-disabled-text-color)}.van-field__value{overflow:visible}.van-field__body{display:flex;align-items:center}.van-field__control{display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;color:var(--van-field-input-text-color);line-height:inherit;text-align:left;background-color:transparent;border:0;resize:none;-webkit-user-select:auto;user-select:auto}.van-field__control::-webkit-input-placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control::placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control:disabled{color:var(--van-field-input-disabled-text-color);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--van-field-input-disabled-text-color)}.van-field__control:read-only{cursor:default}.van-field__control--center{justify-content:center;text-align:center}.van-field__control--right{justify-content:flex-end;text-align:right}.van-field__control--custom{display:flex;align-items:center;min-height:var(--van-cell-line-height)}.van-field__control--error::-webkit-input-placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--error,.van-field__control--error::placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--min-height{min-height:var(--van-field-text-area-min-height)}.van-field__control[type=date],.van-field__control[type=time],.van-field__control[type=datetime-local]{min-height:var(--van-cell-line-height)}.van-field__control[type=search]{-webkit-appearance:none}.van-field__clear,.van-field__icon,.van-field__button,.van-field__right-icon{flex-shrink:0}.van-field__clear,.van-field__right-icon{margin-right:calc(var(--van-padding-xs) * -1);padding:0 var(--van-padding-xs);line-height:inherit}.van-field__clear{color:var(--van-field-clear-icon-color);font-size:var(--van-field-clear-icon-size);cursor:pointer}.van-field__left-icon .van-icon,.van-field__right-icon .van-icon{display:block;font-size:var(--van-field-icon-size);line-height:inherit}.van-field__left-icon{margin-right:var(--van-padding-base)}.van-field__right-icon{color:var(--van-field-right-icon-color)}.van-field__button{padding-left:var(--van-padding-xs)}.van-field__error-message{color:var(--van-field-error-message-color);font-size:var(--van-field-error-message-font-size);text-align:left}.van-field__error-message--center{text-align:center}.van-field__error-message--right{text-align:right}.van-field__word-limit{margin-top:var(--van-padding-base);color:var(--van-field-word-limit-color);font-size:var(--van-field-word-limit-font-size);line-height:var(--van-field-word-limit-line-height);text-align:right}
+:root{--van-field-label-width: 6.2em;--van-field-label-color: var(--van-text-color);--van-field-label-margin-right: var(--van-padding-sm);--van-field-input-text-color: var(--van-text-color);--van-field-input-error-text-color: var(--van-danger-color);--van-field-input-disabled-text-color: var(--van-text-color-3);--van-field-placeholder-text-color: var(--van-text-color-3);--van-field-icon-size: 16px;--van-field-clear-icon-size: 16px;--van-field-clear-icon-color: var(--van-gray-5);--van-field-right-icon-color: var(--van-gray-6);--van-field-error-message-color: var(--van-danger-color);--van-field-error-message-font-size: 12px;--van-field-text-area-min-height: 60px;--van-field-word-limit-color: var(--van-gray-7);--van-field-word-limit-font-size: var(--van-font-size-sm);--van-field-word-limit-line-height: 16px;--van-field-disabled-text-color: var(--van-text-color-3);--van-field-required-mark-color: var(--van-red)}.van-field{flex-wrap:wrap}.van-field__label{flex:none;box-sizing:border-box;width:var(--van-field-label-width);margin-right:var(--van-field-label-margin-right);color:var(--van-field-label-color);text-align:left;word-wrap:break-word}.van-field__label--center{text-align:center}.van-field__label--right{text-align:right}.van-field__label--top{display:flex;width:100%;text-align:left;margin-bottom:var(--van-padding-base)}.van-field__label--required:before{margin-right:2px;color:var(--van-field-required-mark-color);content:"*"}.van-field--disabled .van-field__label{color:var(--van-field-disabled-text-color)}.van-field__value{overflow:visible}.van-field__body{display:flex;align-items:center}.van-field__control{display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;color:var(--van-field-input-text-color);line-height:inherit;text-align:left;background-color:transparent;border:0;resize:none;-webkit-user-select:auto;user-select:auto}.van-field__control::-webkit-input-placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control::placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control:disabled{color:var(--van-field-input-disabled-text-color);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--van-field-input-disabled-text-color)}.van-field__control:read-only{cursor:default}.van-field__control--center{justify-content:center;text-align:center}.van-field__control--right{justify-content:flex-end;text-align:right}.van-field__control--custom{display:flex;align-items:center;min-height:var(--van-cell-line-height)}.van-field__control--error::-webkit-input-placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--error,.van-field__control--error::placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--min-height{min-height:var(--van-field-text-area-min-height)}.van-field__control[type=date],.van-field__control[type=time],.van-field__control[type=datetime-local]{min-height:var(--van-cell-line-height)}.van-field__control[type=search]{-webkit-appearance:none}.van-field__clear,.van-field__icon,.van-field__button,.van-field__right-icon{flex-shrink:0}.van-field__clear,.van-field__right-icon{margin-right:calc(var(--van-padding-xs) * -1);padding:0 var(--van-padding-xs);line-height:inherit}.van-field__clear{color:var(--van-field-clear-icon-color);font-size:var(--van-field-clear-icon-size);cursor:pointer}.van-field__left-icon .van-icon,.van-field__right-icon .van-icon{display:block;font-size:var(--van-field-icon-size);line-height:inherit}.van-field__left-icon{margin-right:var(--van-padding-base)}.van-field__right-icon{color:var(--van-field-right-icon-color)}.van-field__button{padding-left:var(--van-padding-xs)}.van-field__error-message{color:var(--van-field-error-message-color);font-size:var(--van-field-error-message-font-size);text-align:left}.van-field__error-message--center{text-align:center}.van-field__error-message--right{text-align:right}.van-field__word-limit{margin-top:var(--van-padding-base);color:var(--van-field-word-limit-color);font-size:var(--van-field-word-limit-font-size);line-height:var(--van-field-word-limit-line-height);text-align:right}

package/es/field/index.d.ts

@@ -1,5 +1,9 @@
 import { FieldProps } from './Field';
 export declare const Field: import("../utils").WithInstall<import("vue").DefineComponent<{
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
     icon: StringConstructor;
     size: import("vue").PropType<import("..").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -82,6 +86,10 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
         default: null;
     };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "focus" | "blur" | "keypress" | "clickInput" | "endValidate" | "startValidate" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue")[], "clear" | "focus" | "blur" | "keypress" | "clickInput" | "endValidate" | "startValidate" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
     icon: StringConstructor;
     size: import("vue").PropType<import("..").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -177,6 +185,7 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
 }, {
     type: import("./types").FieldType;
     required: boolean;
+    tag: keyof HTMLElementTagNameMap;
     center: boolean;
     autofocus: boolean;
     disabled: boolean;

package/es/field/types.d.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef, ComponentPublicInstance } from 'vue';
 import type { FieldProps } from './Field';
 export declare type FieldType = 'tel' | 'url' | 'date' | 'file' | 'text' | 'time' | 'week' | 'color' | 'digit' | 'email' | 'image' | 'month' | 'radio' | 'range' | 'reset' | 'button' | 'hidden' | 'number' | 'search' | 'submit' | 'checkbox' | 'password' | 'textarea' | 'datetime-local';
-export declare type FieldTextAlign = 'left' | 'center' | 'right';
+export declare type FieldTextAlign = 'left' | 'center' | 'right' | 'top';
 export declare type FieldClearTrigger = 'always' | 'focus';
 export declare type FieldFormatTrigger = 'onBlur' | 'onChange';
 export declare type FieldValidateTrigger = 'onBlur' | 'onChange' | 'onSubmit';

package/es/image-preview/ImagePreview.mjs

@@ -103,7 +103,9 @@ var stdin_default = defineComponent({
         "rootHeight": state.rootHeight,
         "onScale": emitScale,
         "onClose": emitClose
-      }, null))]
+      }, {
+        image: slots.image
+      }))]
     });
     const renderClose = () => {
       if (props.closeable) {

package/es/image-preview/ImagePreviewItem.mjs

@@ -20,7 +20,8 @@ var stdin_default = defineComponent({
   },
   emits: ["scale", "close"],
   setup(props, {
-    emit
+    emit,
+    slots
   }) {
     const state = reactive({
       scale: 1,
@@ -238,7 +239,11 @@ var stdin_default = defineComponent({
         "onTouchend": onTouchEnd,
         "onTouchcancel": onTouchEnd
       }, {
-        default: () => [_createVNode(Image, {
+        default: () => [slots.image ? _createVNode("div", {
+          "class": bem("image-wrap")
+        }, [slots.image({
+          src: props.src
+        })]) : _createVNode(Image, {
           "src": props.src,
           "fit": "contain",
           "class": bem("image", {

package/es/image-preview/index.css

@@ -1 +1 @@
-:root{--van-image-preview-index-text-color: var(--van-white);--van-image-preview-index-font-size: var(--van-font-size-md);--van-image-preview-index-line-height: var(--van-line-height-md);--van-image-preview-index-text-shadow: 0 1px 1px var(--van-gray-8);--van-image-preview-overlay-background: rgba(0, 0, 0, .9);--van-image-preview-close-icon-size: 22px;--van-image-preview-close-icon-color: var(--van-gray-5);--van-image-preview-close-icon-margin: var(--van-padding-md);--van-image-preview-close-icon-z-index: 1}.van-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;max-width:none;background-color:transparent;transform:none}.van-image-preview__swipe{height:100%}.van-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.van-image-preview__cover{position:absolute;top:0;left:0}.van-image-preview__image{width:100%;transition-property:transform}.van-image-preview__image--vertical{width:auto;height:100%}.van-image-preview__image img{-webkit-user-drag:none}.van-image-preview__image .van-image__error{top:30%;height:40%}.van-image-preview__image .van-image__error-icon{font-size:36px}.van-image-preview__image .van-image__loading{background-color:transparent}.van-image-preview__index{position:absolute;top:var(--van-padding-md);left:50%;color:var(--van-image-preview-index-text-color);font-size:var(--van-image-preview-index-font-size);line-height:var(--van-image-preview-index-line-height);text-shadow:var(--van-image-preview-index-text-shadow);transform:translate(-50%)}.van-image-preview__overlay{background:var(--van-image-preview-overlay-background)}.van-image-preview__close-icon{position:absolute;z-index:var(--van-image-preview-close-icon-z-index);color:var(--van-image-preview-close-icon-color);font-size:var(--van-image-preview-close-icon-size)}.van-image-preview__close-icon--top-left{top:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--top-right{top:var(--van-image-preview-close-icon-margin);right:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-left{bottom:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-right{right:var(--van-image-preview-close-icon-margin);bottom:var(--van-image-preview-close-icon-margin)}
+:root{--van-image-preview-index-text-color: var(--van-white);--van-image-preview-index-font-size: var(--van-font-size-md);--van-image-preview-index-line-height: var(--van-line-height-md);--van-image-preview-index-text-shadow: 0 1px 1px var(--van-gray-8);--van-image-preview-overlay-background: rgba(0, 0, 0, .9);--van-image-preview-close-icon-size: 22px;--van-image-preview-close-icon-color: var(--van-gray-5);--van-image-preview-close-icon-margin: var(--van-padding-md);--van-image-preview-close-icon-z-index: 1}.van-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;max-width:none;background-color:transparent;transform:none}.van-image-preview__swipe{height:100%}.van-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.van-image-preview__cover{position:absolute;top:0;left:0}.van-image-preview__image,.van-image-preview__image-wrap{width:100%;transition-property:transform}.van-image-preview__image--vertical,.van-image-preview__image-wrap--vertical{width:auto;height:100%}.van-image-preview__image img,.van-image-preview__image-wrap img,.van-image-preview__image video,.van-image-preview__image-wrap video{-webkit-user-drag:none}.van-image-preview__image .van-image__error,.van-image-preview__image-wrap .van-image__error{top:30%;height:40%}.van-image-preview__image .van-image__error-icon,.van-image-preview__image-wrap .van-image__error-icon{font-size:36px}.van-image-preview__image .van-image__loading,.van-image-preview__image-wrap .van-image__loading{background-color:transparent}.van-image-preview__index{position:absolute;top:var(--van-padding-md);left:50%;color:var(--van-image-preview-index-text-color);font-size:var(--van-image-preview-index-font-size);line-height:var(--van-image-preview-index-line-height);text-shadow:var(--van-image-preview-index-text-shadow);transform:translate(-50%)}.van-image-preview__overlay{background:var(--van-image-preview-overlay-background)}.van-image-preview__close-icon{position:absolute;z-index:var(--van-image-preview-close-icon-z-index);color:var(--van-image-preview-close-icon-color);font-size:var(--van-image-preview-close-icon-size)}.van-image-preview__close-icon--top-left{top:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--top-right{top:var(--van-image-preview-close-icon-margin);right:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-left{bottom:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-right{right:var(--van-image-preview-close-icon-margin);bottom:var(--van-image-preview-close-icon-margin)}

package/es/index.d.ts

@@ -93,4 +93,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "4.0.0-rc.4";
+export const version: "4.0.0-rc.6";

package/es/index.mjs

@@ -86,7 +86,7 @@ import { TimePicker } from "./time-picker/index.mjs";
 import { Toast } from "./toast/index.mjs";
 import { TreeSelect } from "./tree-select/index.mjs";
 import { Uploader } from "./uploader/index.mjs";
-const version = "4.0.0-rc.4";
+const version = "4.0.0-rc.6";
 function install(app) {
   const components = [
     ActionBar,

package/es/loading/Loading.mjs

@@ -31,6 +31,13 @@ var stdin_default = defineComponent({
     const spinnerStyle = computed(() => extend({
       color: props.color
     }, getSizeStyle(props.size)));
+    const renderIcon = () => {
+      const DefaultIcon = props.type === "spinner" ? SpinIcon : CircularIcon;
+      return _createVNode("span", {
+        "class": bem("spinner", props.type),
+        "style": spinnerStyle.value
+      }, [slots.icon ? slots.icon() : DefaultIcon]);
+    };
     const renderText = () => {
       var _a;
       if (slots.default) {
@@ -54,10 +61,7 @@ var stdin_default = defineComponent({
         }]),
         "aria-live": "polite",
         "aria-busy": true
-      }, [_createVNode("span", {
-        "class": bem("spinner", type),
-        "style": spinnerStyle.value
-      }, [type === "spinner" ? SpinIcon : CircularIcon]), renderText()]);
+      }, [renderIcon(), renderText()]);
     };
   }
 });

package/es/nav-bar/NavBar.d.ts

@@ -12,6 +12,10 @@ export declare const navBarProps: {
     leftArrow: BooleanConstructor;
     placeholder: BooleanConstructor;
     safeAreaInsetTop: BooleanConstructor;
+    clickable: {
+        type: BooleanConstructor;
+        default: true;
+    };
 };
 export declare type NavBarProps = ExtractPropTypes<typeof navBarProps>;
 declare const _default: import("vue").DefineComponent<{
@@ -27,6 +31,10 @@ declare const _default: import("vue").DefineComponent<{
     leftArrow: BooleanConstructor;
     placeholder: BooleanConstructor;
     safeAreaInsetTop: BooleanConstructor;
+    clickable: {
+        type: BooleanConstructor;
+        default: true;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clickLeft" | "clickRight")[], "clickLeft" | "clickRight", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     title: StringConstructor;
     fixed: BooleanConstructor;
@@ -40,12 +48,17 @@ declare const _default: import("vue").DefineComponent<{
     leftArrow: BooleanConstructor;
     placeholder: BooleanConstructor;
     safeAreaInsetTop: BooleanConstructor;
+    clickable: {
+        type: BooleanConstructor;
+        default: true;
+    };
 }>> & {
     onClickLeft?: ((...args: any[]) => any) | undefined;
     onClickRight?: ((...args: any[]) => any) | undefined;
 }, {
     fixed: boolean;
     border: boolean;
+    clickable: boolean;
     placeholder: boolean;
     safeAreaInsetTop: boolean;
     leftArrow: boolean;

package/es/nav-bar/NavBar.mjs

@@ -13,7 +13,8 @@ const navBarProps = {
   rightText: String,
   leftArrow: Boolean,
   placeholder: Boolean,
-  safeAreaInsetTop: Boolean
+  safeAreaInsetTop: Boolean,
+  clickable: truthProp
 };
 var stdin_default = defineComponent({
   name,
@@ -68,12 +69,12 @@ var stdin_default = defineComponent({
       }, [_createVNode("div", {
         "class": bem("content")
       }, [hasLeft && _createVNode("div", {
-        "class": [bem("left"), HAPTICS_FEEDBACK],
+        "class": [bem("left"), props.clickable ? HAPTICS_FEEDBACK : ""],
         "onClick": onClickLeft
       }, [renderLeft()]), _createVNode("div", {
         "class": [bem("title"), "van-ellipsis"]
       }, [slots.title ? slots.title() : title]), hasRight && _createVNode("div", {
-        "class": [bem("right"), HAPTICS_FEEDBACK],
+        "class": [bem("right"), props.clickable ? HAPTICS_FEEDBACK : ""],
         "onClick": onClickRight
       }, [renderRight()])])]);
     };