vant 3.4.8 → 4.0.0-alpha.2

package/lib/date-picker/DatePicker.d.ts

@@ -0,0 +1,168 @@
+import { type PropType, type ExtractPropTypes } from 'vue';
+export declare type DatePickerColumnType = 'year' | 'month' | 'day';
+declare const datePickerProps: {
+    title: StringConstructor;
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    optionHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    visibleOptionNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+} & {
+    modelValue: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    filter: PropType<(columnType: string, options: import("../picker").PickerOption[]) => import("../picker").PickerOption[]>;
+    formatter: {
+        type: PropType<(type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption>;
+        default: (type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption;
+    };
+} & {
+    columnsType: {
+        type: PropType<DatePickerColumnType[]>;
+        default: () => string[];
+    };
+    minDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+    maxDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+};
+export declare type DatePickerProps = ExtractPropTypes<typeof datePickerProps>;
+declare const _default: import("vue").DefineComponent<{
+    title: StringConstructor;
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    optionHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    visibleOptionNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+} & {
+    modelValue: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    filter: PropType<(columnType: string, options: import("../picker").PickerOption[]) => import("../picker").PickerOption[]>;
+    formatter: {
+        type: PropType<(type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption>;
+        default: (type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption;
+    };
+} & {
+    columnsType: {
+        type: PropType<DatePickerColumnType[]>;
+        default: () => string[];
+    };
+    minDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+    maxDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "cancel" | "confirm")[], "update:modelValue" | "change" | "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    title: StringConstructor;
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    optionHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    visibleOptionNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+} & {
+    modelValue: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    filter: PropType<(columnType: string, options: import("../picker").PickerOption[]) => import("../picker").PickerOption[]>;
+    formatter: {
+        type: PropType<(type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption>;
+        default: (type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption;
+    };
+} & {
+    columnsType: {
+        type: PropType<DatePickerColumnType[]>;
+        default: () => string[];
+    };
+    minDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+    maxDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}, {
+    formatter: (type: string, option: import("../picker").PickerOption) => import("../picker").PickerOption;
+    modelValue: string[];
+    readonly: boolean;
+    loading: boolean;
+    allowHtml: boolean;
+    optionHeight: string | number;
+    showToolbar: boolean;
+    swipeDuration: string | number;
+    visibleOptionNum: string | number;
+    minDate: Date;
+    maxDate: Date;
+    columnsType: DatePickerColumnType[];
+}>;
+export default _default;

package/lib/date-picker/DatePicker.js

@@ -0,0 +1,130 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => stdin_default
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_utils = require("../utils");
+var import_utils2 = require("./utils");
+var import_picker = require("../picker");
+const currentYear = new Date().getFullYear();
+const [name] = (0, import_utils.createNamespace)("date-picker");
+const datePickerProps = (0, import_utils.extend)({}, import_utils2.sharedProps, {
+  columnsType: {
+    type: Array,
+    default: () => ["year", "month", "day"]
+  },
+  minDate: {
+    type: Date,
+    default: () => new Date(currentYear - 10, 0, 1),
+    validator: import_utils.isDate
+  },
+  maxDate: {
+    type: Date,
+    default: () => new Date(currentYear + 10, 11, 31),
+    validator: import_utils.isDate
+  }
+});
+var stdin_default = (0, import_vue2.defineComponent)({
+  name,
+  props: datePickerProps,
+  emits: ["confirm", "cancel", "change", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const currentValues = (0, import_vue2.ref)(props.modelValue);
+    const genYearOptions = () => {
+      const minYear = props.minDate.getFullYear();
+      const maxYear = props.maxDate.getFullYear();
+      return (0, import_utils2.genOptions)(minYear, maxYear, "year", props.formatter, props.filter);
+    };
+    const isMaxYear = (year) => year === props.maxDate.getFullYear();
+    const isMaxMonth = (month) => month === props.maxDate.getMonth() + 1;
+    const getValue = (type) => {
+      const {
+        minDate,
+        columnsType
+      } = props;
+      const index = columnsType.indexOf(type);
+      const value = currentValues.value[index];
+      if (value) {
+        return +value;
+      }
+      switch (type) {
+        case "year":
+          return minDate.getFullYear();
+        case "month":
+          return minDate.getMonth() + 1;
+        case "day":
+          return minDate.getDate();
+      }
+    };
+    const genMonthOptions = () => {
+      if (isMaxYear(getValue("year"))) {
+        return (0, import_utils2.genOptions)(1, props.maxDate.getMonth() + 1, "month", props.formatter, props.filter);
+      }
+      return (0, import_utils2.genOptions)(1, 12, "month", props.formatter, props.filter);
+    };
+    const genDayOptions = () => {
+      const year = getValue("year");
+      const month = getValue("month");
+      let maxDate = (0, import_utils2.getMonthEndDay)(year, month);
+      if (isMaxYear(year) && isMaxMonth(month)) {
+        maxDate = props.maxDate.getDate();
+      }
+      return (0, import_utils2.genOptions)(1, maxDate, "day", props.formatter, props.filter);
+    };
+    const columns = (0, import_vue2.computed)(() => props.columnsType.map((type) => {
+      switch (type) {
+        case "year":
+          return genYearOptions();
+        case "month":
+          return genMonthOptions();
+        case "day":
+          return genDayOptions();
+        default:
+          throw new Error(`[Vant] DatePicker: unsupported columns type: ${type}`);
+      }
+    }));
+    (0, import_vue2.watch)(currentValues, (newValues) => {
+      if ((0, import_utils.isSameValue)(newValues, props.modelValue)) {
+        emit("update:modelValue", newValues);
+      }
+    });
+    (0, import_vue2.watch)(() => props.modelValue, (newValues) => {
+      if (!(0, import_utils.isSameValue)(newValues, currentValues.value)) {
+        currentValues.value = newValues;
+      }
+    });
+    const onChange = (...args) => emit("change", ...args);
+    const onCancel = (...args) => emit("cancel", ...args);
+    const onConfirm = (...args) => emit("confirm", ...args);
+    return () => (0, import_vue.createVNode)(import_picker.Picker, (0, import_vue.mergeProps)({
+      "modelValue": currentValues.value,
+      "onUpdate:modelValue": ($event) => currentValues.value = $event,
+      "columns": columns.value,
+      "onChange": onChange,
+      "onCancel": onCancel,
+      "onConfirm": onConfirm
+    }, (0, import_utils.pick)(props, import_utils2.pickerInheritKeys)), slots);
+  }
+});

package/lib/{datetime-picker/DatePicker.d.ts → date-picker/index.d.ts}

@@ -1,10 +1,10 @@
-import { DatetimePickerColumnType, DatetimePickerType } from './types';
-declare const _default: import("vue").DefineComponent<{
+import { DatePickerProps } from './DatePicker';
+export declare const DatePicker: import("../utils").WithInstall<import("vue").DefineComponent<{
     title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -16,25 +16,27 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
-    filter: import("vue").PropType<(type: string, values: string[]) => string[]>;
-    columnsOrder: import("vue").PropType<DatetimePickerColumnType[]>;
+    modelValue: {
+        type: import("vue").PropType<string[]>;
+        default: () => never[];
+    };
+    filter: import("vue").PropType<(columnType: string, options: import("..").PickerOption[]) => import("..").PickerOption[]>;
     formatter: {
-        type: import("vue").PropType<(type: string, value: string) => string>;
-        default: (type: string, value: string) => string;
+        type: import("vue").PropType<(type: string, option: import("..").PickerOption) => import("..").PickerOption>;
+        default: (type: string, option: import("..").PickerOption) => import("..").PickerOption;
     };
 } & {
-    type: {
-        type: import("vue").PropType<DatetimePickerType>;
-        default: DatetimePickerType;
+    columnsType: {
+        type: import("vue").PropType<import("./DatePicker").DatePickerColumnType[]>;
+        default: () => string[];
     };
-    modelValue: DateConstructor;
     minDate: {
         type: DateConstructor;
         default: () => Date;
@@ -50,7 +52,7 @@ declare const _default: import("vue").DefineComponent<{
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -62,25 +64,27 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
-    filter: import("vue").PropType<(type: string, values: string[]) => string[]>;
-    columnsOrder: import("vue").PropType<DatetimePickerColumnType[]>;
+    modelValue: {
+        type: import("vue").PropType<string[]>;
+        default: () => never[];
+    };
+    filter: import("vue").PropType<(columnType: string, options: import("..").PickerOption[]) => import("..").PickerOption[]>;
     formatter: {
-        type: import("vue").PropType<(type: string, value: string) => string>;
-        default: (type: string, value: string) => string;
+        type: import("vue").PropType<(type: string, option: import("..").PickerOption) => import("..").PickerOption>;
+        default: (type: string, option: import("..").PickerOption) => import("..").PickerOption;
     };
 } & {
-    type: {
-        type: import("vue").PropType<DatetimePickerType>;
-        default: DatetimePickerType;
+    columnsType: {
+        type: import("vue").PropType<import("./DatePicker").DatePickerColumnType[]>;
+        default: () => string[];
     };
-    modelValue: DateConstructor;
     minDate: {
         type: DateConstructor;
         default: () => Date;
@@ -97,16 +101,24 @@ declare const _default: import("vue").DefineComponent<{
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
 }, {
-    type: DatetimePickerType;
-    formatter: (type: string, value: string) => string;
+    formatter: (type: string, option: import("..").PickerOption) => import("..").PickerOption;
+    modelValue: string[];
     readonly: boolean;
     loading: boolean;
     allowHtml: boolean;
-    itemHeight: string | number;
+    optionHeight: string | number;
     showToolbar: boolean;
     swipeDuration: string | number;
-    visibleItemCount: string | number;
+    visibleOptionNum: string | number;
     minDate: Date;
     maxDate: Date;
-}>;
-export default _default;
+    columnsType: import("./DatePicker").DatePickerColumnType[];
+}>>;
+export default DatePicker;
+export type { DatePickerProps };
+export type { DatePickerColumnType } from './DatePicker';
+declare module 'vue' {
+    interface GlobalComponents {
+        VanDatePicker: typeof DatePicker;
+    }
+}

package/lib/{datetime-picker → date-picker}/index.js

@@ -20,11 +20,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var stdin_exports = {};
 __export(stdin_exports, {
-  DatetimePicker: () => DatetimePicker,
+  DatePicker: () => DatePicker,
   default: () => stdin_default
 });
 module.exports = __toCommonJS(stdin_exports);
 var import_utils = require("../utils");
-var import_DatetimePicker = __toESM(require("./DatetimePicker"));
-const DatetimePicker = (0, import_utils.withInstall)(import_DatetimePicker.default);
-var stdin_default = DatetimePicker;
+var import_DatePicker = __toESM(require("./DatePicker"));
+const DatePicker = (0, import_utils.withInstall)(import_DatePicker.default);
+var stdin_default = DatePicker;

package/lib/date-picker/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/date-picker/style/less.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/{datetime-picker → date-picker}/utils.d.ts

@@ -1,12 +1,13 @@
 import type { PropType } from 'vue';
-import type { PickerInstance } from '../picker';
-import type { DatetimePickerColumnType } from './types';
+import type { PickerOption } from '../picker';
+declare type Filter = (columnType: string, options: PickerOption[]) => PickerOption[];
+declare type Formatter = (type: string, option: PickerOption) => PickerOption;
 export declare const sharedProps: {
     title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -18,22 +19,25 @@ export declare const sharedProps: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
-    filter: PropType<(type: string, values: string[]) => string[]>;
-    columnsOrder: PropType<DatetimePickerColumnType[]>;
+    modelValue: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    filter: PropType<Filter>;
     formatter: {
-        type: PropType<(type: string, value: string) => string>;
-        default: (type: string, value: string) => string;
+        type: PropType<Formatter>;
+        default: (type: string, option: PickerOption) => PickerOption;
     };
 };
-export declare const pickerInheritKeys: ("title" | "readonly" | "loading" | "allowHtml" | "itemHeight" | "showToolbar" | "swipeDuration" | "visibleItemCount" | "cancelButtonText" | "confirmButtonText")[];
+export declare const pickerInheritKeys: ("title" | "readonly" | "loading" | "allowHtml" | "optionHeight" | "showToolbar" | "swipeDuration" | "visibleOptionNum" | "cancelButtonText" | "confirmButtonText")[];
 export declare function times<T>(n: number, iteratee: (index: number) => T): T[];
-export declare function getTrueValue(value: string | undefined): number;
 export declare const getMonthEndDay: (year: number, month: number) => number;
-export declare const proxyPickerMethods: (picker: PickerInstance, callback: () => void) => PickerInstance;
+export declare const genOptions: <T extends string>(min: number, max: number, type: T, formatter: Formatter, filter?: Filter | undefined) => PickerOption[];
+export {};

package/lib/{datetime-picker → date-picker}/utils.js

@@ -17,10 +17,9 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var stdin_exports = {};
 __export(stdin_exports, {
+  genOptions: () => genOptions,
   getMonthEndDay: () => getMonthEndDay,
-  getTrueValue: () => getTrueValue,
   pickerInheritKeys: () => pickerInheritKeys,
-  proxyPickerMethods: () => proxyPickerMethods,
   sharedProps: () => sharedProps,
   times: () => times
 });
@@ -28,11 +27,11 @@ module.exports = __toCommonJS(stdin_exports);
 var import_utils = require("../utils");
 var import_Picker = require("../picker/Picker");
 const sharedProps = (0, import_utils.extend)({}, import_Picker.pickerSharedProps, {
+  modelValue: (0, import_utils.makeArrayProp)(),
   filter: Function,
-  columnsOrder: Array,
   formatter: {
     type: Function,
-    default: (type, value) => value
+    default: (type, option) => option
   }
 });
 const pickerInheritKeys = Object.keys(import_Picker.pickerSharedProps);
@@ -47,36 +46,14 @@ function times(n, iteratee) {
   }
   return result;
 }
-function getTrueValue(value) {
-  if (!value) {
-    return 0;
-  }
-  while (Number.isNaN(parseInt(value, 10))) {
-    if (value.length > 1) {
-      value = value.slice(1);
-    } else {
-      return 0;
-    }
-  }
-  return parseInt(value, 10);
-}
 const getMonthEndDay = (year, month) => 32 - new Date(year, month - 1, 32).getDate();
-const proxyPickerMethods = (picker, callback) => {
-  const methods = [
-    "setValues",
-    "setIndexes",
-    "setColumnIndex",
-    "setColumnValue"
-  ];
-  return new Proxy(picker, {
-    get: (target, prop) => {
-      if (methods.includes(prop)) {
-        return (...args) => {
-          target[prop](...args);
-          callback();
-        };
-      }
-      return target[prop];
-    }
+const genOptions = (min, max, type, formatter, filter) => {
+  const options = times(max - min + 1, (index) => {
+    const value = (0, import_utils.padZero)(min + index);
+    return formatter(type, {
+      text: value,
+      value
+    });
   });
+  return filter ? filter(type, options) : options;
 };

package/lib/dialog/index.css

@@ -1 +1 @@
-:root{--van-dialog-width: 320px;--van-dialog-small-screen-width: 90%;--van-dialog-font-size: var(--van-font-size-lg);--van-dialog-transition: var(--van-animation-duration-base);--van-dialog-border-radius: 16px;--van-dialog-background-color: var(--van-background-color-light);--van-dialog-header-font-weight: var(--van-font-weight-bold);--van-dialog-header-line-height: 24px;--van-dialog-header-padding-top: 26px;--van-dialog-header-isolated-padding: var(--van-padding-lg) 0;--van-dialog-message-padding: var(--van-padding-lg);--van-dialog-message-font-size: var(--van-font-size-md);--van-dialog-message-line-height: var(--van-line-height-md);--van-dialog-message-max-height: 60vh;--van-dialog-has-title-message-text-color: var(--van-gray-7);--van-dialog-has-title-message-padding-top: var(--van-padding-xs);--van-dialog-button-height: 48px;--van-dialog-round-button-height: 36px;--van-dialog-confirm-button-text-color: var(--van-danger-color)}.van-dialog{top:45%;left:50%;width:var(--van-dialog-width);overflow:hidden;font-size:var(--van-dialog-font-size);background:var(--van-dialog-background-color);border-radius:var(--van-dialog-border-radius);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:var(--van-dialog-transition);transition-property:transform,opacity}@media (max-width: 321px){.van-dialog{width:var(--van-dialog-small-screen-width)}}.van-dialog__header{padding-top:var(--van-dialog-header-padding-top);font-weight:var(--van-dialog-header-font-weight);line-height:var(--van-dialog-header-line-height);text-align:center}.van-dialog__header--isolated{padding:var(--van-dialog-header-isolated-padding)}.van-dialog__content--isolated{display:flex;align-items:center;min-height:104px}.van-dialog__message{flex:1;max-height:var(--van-dialog-message-max-height);padding:26px var(--van-dialog-message-padding);overflow-y:auto;font-size:var(--van-dialog-message-font-size);line-height:var(--van-dialog-message-line-height);white-space:pre-wrap;text-align:center;word-wrap:break-word;-webkit-overflow-scrolling:touch}.van-dialog__message--has-title{padding-top:var(--van-dialog-has-title-message-padding-top);color:var(--van-dialog-has-title-message-text-color)}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__footer{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.van-dialog__confirm,.van-dialog__cancel{flex:1;height:var(--van-dialog-button-height);margin:0;border:0}.van-dialog__confirm,.van-dialog__confirm:active{color:var(--van-dialog-confirm-button-text-color)}.van-dialog--round-button .van-dialog__footer{position:relative;height:auto;padding:var(--van-padding-xs) var(--van-padding-lg) var(--van-padding-md)}.van-dialog--round-button .van-dialog__message{padding-bottom:var(--van-padding-md);color:var(--van-text-color)}.van-dialog--round-button .van-dialog__confirm,.van-dialog--round-button .van-dialog__cancel{height:var(--van-dialog-round-button-height)}.van-dialog--round-button .van-dialog__confirm{color:var(--van-white)}.van-dialog-bounce-enter-from{transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.van-dialog-bounce-leave-active{transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}
+body{--van-dialog-width: 320px;--van-dialog-small-screen-width: 90%;--van-dialog-font-size: var(--van-font-size-lg);--van-dialog-transition: var(--van-duration-base);--van-dialog-radius: 16px;--van-dialog-background: var(--van-background-2);--van-dialog-header-font-weight: var(--van-font-bold);--van-dialog-header-line-height: 24px;--van-dialog-header-padding-top: 26px;--van-dialog-header-isolated-padding: var(--van-padding-lg) 0;--van-dialog-message-padding: var(--van-padding-lg);--van-dialog-message-font-size: var(--van-font-size-md);--van-dialog-message-line-height: var(--van-line-height-md);--van-dialog-message-max-height: 60vh;--van-dialog-has-title-message-text-color: var(--van-gray-7);--van-dialog-has-title-message-padding-top: var(--van-padding-xs);--van-dialog-button-height: 48px;--van-dialog-round-button-height: 36px;--van-dialog-confirm-button-text-color: var(--van-primary-color)}.van-dialog{top:45%;left:50%;width:var(--van-dialog-width);overflow:hidden;font-size:var(--van-dialog-font-size);background:var(--van-dialog-background);border-radius:var(--van-dialog-radius);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:var(--van-dialog-transition);transition-property:transform,opacity}@media (max-width: 321px){.van-dialog{width:var(--van-dialog-small-screen-width)}}.van-dialog__header{color:var(--van-text-color);padding-top:var(--van-dialog-header-padding-top);font-weight:var(--van-dialog-header-font-weight);line-height:var(--van-dialog-header-line-height);text-align:center}.van-dialog__header--isolated{padding:var(--van-dialog-header-isolated-padding)}.van-dialog__content--isolated{display:flex;align-items:center;min-height:104px}.van-dialog__message{color:var(--van-text-color);flex:1;max-height:var(--van-dialog-message-max-height);padding:26px var(--van-dialog-message-padding);overflow-y:auto;font-size:var(--van-dialog-message-font-size);line-height:var(--van-dialog-message-line-height);white-space:pre-wrap;text-align:center;word-wrap:break-word;-webkit-overflow-scrolling:touch}.van-dialog__message--has-title{padding-top:var(--van-dialog-has-title-message-padding-top);color:var(--van-dialog-has-title-message-text-color)}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__footer{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.van-dialog__confirm,.van-dialog__cancel{flex:1;height:var(--van-dialog-button-height);margin:0;border:0}.van-dialog__confirm,.van-dialog__confirm:active{color:var(--van-dialog-confirm-button-text-color)}.van-dialog--round-button .van-dialog__footer{position:relative;height:auto;padding:var(--van-padding-xs) var(--van-padding-lg) var(--van-padding-md)}.van-dialog--round-button .van-dialog__message{padding-bottom:var(--van-padding-md);color:var(--van-text-color)}.van-dialog--round-button .van-dialog__confirm,.van-dialog--round-button .van-dialog__cancel{height:var(--van-dialog-round-button-height)}.van-dialog--round-button .van-dialog__confirm{color:var(--van-white)}.van-dialog-bounce-enter-from{transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.van-dialog-bounce-leave-active{transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}

package/lib/dialog/index.less

@@ -1,25 +1,23 @@
-@import './var.less';
-
-:root {
-  --van-dialog-width: @dialog-width;
-  --van-dialog-small-screen-width: @dialog-small-screen-width;
-  --van-dialog-font-size: @dialog-font-size;
-  --van-dialog-transition: @dialog-transition;
-  --van-dialog-border-radius: @dialog-border-radius;
-  --van-dialog-background-color: @dialog-background-color;
-  --van-dialog-header-font-weight: @dialog-header-font-weight;
-  --van-dialog-header-line-height: @dialog-header-line-height;
-  --van-dialog-header-padding-top: @dialog-header-padding-top;
-  --van-dialog-header-isolated-padding: @dialog-header-isolated-padding;
-  --van-dialog-message-padding: @dialog-message-padding;
-  --van-dialog-message-font-size: @dialog-message-font-size;
-  --van-dialog-message-line-height: @dialog-message-line-height;
-  --van-dialog-message-max-height: @dialog-message-max-height;
-  --van-dialog-has-title-message-text-color: @dialog-has-title-message-text-color;
-  --van-dialog-has-title-message-padding-top: @dialog-has-title-message-padding-top;
-  --van-dialog-button-height: @dialog-button-height;
-  --van-dialog-round-button-height: @dialog-round-button-height;
-  --van-dialog-confirm-button-text-color: @dialog-confirm-button-text-color;
+body {
+  --van-dialog-width: 320px;
+  --van-dialog-small-screen-width: 90%;
+  --van-dialog-font-size: var(--van-font-size-lg);
+  --van-dialog-transition: var(--van-duration-base);
+  --van-dialog-radius: 16px;
+  --van-dialog-background: var(--van-background-2);
+  --van-dialog-header-font-weight: var(--van-font-bold);
+  --van-dialog-header-line-height: 24px;
+  --van-dialog-header-padding-top: 26px;
+  --van-dialog-header-isolated-padding: var(--van-padding-lg) 0;
+  --van-dialog-message-padding: var(--van-padding-lg);
+  --van-dialog-message-font-size: var(--van-font-size-md);
+  --van-dialog-message-line-height: var(--van-line-height-md);
+  --van-dialog-message-max-height: 60vh;
+  --van-dialog-has-title-message-text-color: var(--van-gray-7);
+  --van-dialog-has-title-message-padding-top: var(--van-padding-xs);
+  --van-dialog-button-height: 48px;
+  --van-dialog-round-button-height: 36px;
+  --van-dialog-confirm-button-text-color: var(--van-primary-color);
 }
 
 .van-dialog {
@@ -28,8 +26,8 @@
   width: var(--van-dialog-width);
   overflow: hidden;
   font-size: var(--van-dialog-font-size);
-  background: var(--van-dialog-background-color);
-  border-radius: var(--van-dialog-border-radius);
+  background: var(--van-dialog-background);
+  border-radius: var(--van-dialog-radius);
   backface-visibility: hidden; // avoid blurry text after scale animation
   transition: var(--van-dialog-transition);
   transition-property: transform, opacity;
@@ -39,6 +37,7 @@
   }
 
   &__header {
+    color: var(--van-text-color);
     padding-top: var(--van-dialog-header-padding-top);
     font-weight: var(--van-dialog-header-font-weight);
     line-height: var(--van-dialog-header-line-height);
@@ -58,6 +57,7 @@
   }
 
   &__message {
+    color: var(--van-text-color);
     flex: 1;
     max-height: var(--van-dialog-message-max-height);
     padding: 26px var(--van-dialog-message-padding);