vant 3.4.5 → 4.0.0-alpha.0

package/lib/date-picker/DatePicker.js

@@ -0,0 +1,135 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => stdin_default
+});
+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);
+  }
+});
+module.exports = __toCommonJS(stdin_exports);

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

@@ -27,11 +27,11 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
 var stdin_exports = {};
 __export(stdin_exports, {
-  DatetimePicker: () => DatetimePicker,
+  DatePicker: () => DatePicker,
   default: () => stdin_default
 });
 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;
 module.exports = __toCommonJS(stdin_exports);

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

@@ -22,21 +22,20 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
 var stdin_exports = {};
 __export(stdin_exports, {
+  genOptions: () => genOptions,
   getMonthEndDay: () => getMonthEndDay,
-  getTrueValue: () => getTrueValue,
   pickerInheritKeys: () => pickerInheritKeys,
-  proxyPickerMethods: () => proxyPickerMethods,
   sharedProps: () => sharedProps,
   times: () => times
 });
 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);
@@ -51,37 +50,15 @@ 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;
 };
 module.exports = __toCommonJS(stdin_exports);

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:translate(-50%,-50%) scale(.7);opacity:0}.van-dialog-bounce-leave-active{transform:translate(-50%,-50%) 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{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:translate(-50%,-50%) scale(.7);opacity:0}.van-dialog-bounce-leave-active{transform:translate(-50%,-50%) 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;

package/lib/divider/index.css

@@ -1 +1 @@
-:root{--van-divider-margin: var(--van-padding-md) 0;--van-divider-text-color: var(--van-text-color-2);--van-divider-font-size: var(--van-font-size-md);--van-divider-line-height: 24px;--van-divider-border-color: var(--van-border-color);--van-divider-content-padding: var(--van-padding-md);--van-divider-content-left-width: 10%;--van-divider-content-right-width: 10%}.van-divider{display:flex;align-items:center;margin:var(--van-divider-margin);color:var(--van-divider-text-color);font-size:var(--van-divider-font-size);line-height:var(--van-divider-line-height);border-color:var(--van-divider-border-color);border-style:solid;border-width:0}.van-divider:before,.van-divider:after{display:block;flex:1;box-sizing:border-box;height:1px;border-color:inherit;border-style:inherit;border-width:var(--van-border-width-base) 0 0}.van-divider:before{content:""}.van-divider--hairline:before,.van-divider--hairline:after{transform:scaleY(.5)}.van-divider--dashed{border-style:dashed}.van-divider--content-center:before,.van-divider--content-left:before,.van-divider--content-right:before{margin-right:var(--van-divider-content-padding)}.van-divider--content-center:after,.van-divider--content-left:after,.van-divider--content-right:after{margin-left:var(--van-divider-content-padding);content:""}.van-divider--content-left:before{max-width:var(--van-divider-content-left-width)}.van-divider--content-right:after{max-width:var(--van-divider-content-right-width)}
+body{--van-divider-margin: var(--van-padding-md) 0;--van-divider-text-color: var(--van-text-color-2);--van-divider-font-size: var(--van-font-size-md);--van-divider-line-height: 24px;--van-divider-border-color: var(--van-border-color);--van-divider-content-padding: var(--van-padding-md);--van-divider-content-left-width: 10%;--van-divider-content-right-width: 10%}.van-divider{display:flex;align-items:center;margin:var(--van-divider-margin);color:var(--van-divider-text-color);font-size:var(--van-divider-font-size);line-height:var(--van-divider-line-height);border-color:var(--van-divider-border-color);border-style:solid;border-width:0}.van-divider:before,.van-divider:after{display:block;flex:1;box-sizing:border-box;height:1px;border-color:inherit;border-style:inherit;border-width:var(--van-border-width) 0 0}.van-divider:before{content:""}.van-divider--hairline:before,.van-divider--hairline:after{transform:scaleY(.5)}.van-divider--dashed{border-style:dashed}.van-divider--content-center:before,.van-divider--content-left:before,.van-divider--content-right:before{margin-right:var(--van-divider-content-padding)}.van-divider--content-center:after,.van-divider--content-left:after,.van-divider--content-right:after{margin-left:var(--van-divider-content-padding);content:""}.van-divider--content-left:before{max-width:var(--van-divider-content-left-width)}.van-divider--content-right:after{max-width:var(--van-divider-content-right-width)}

package/lib/divider/index.less

@@ -1,14 +1,12 @@
-@import './var.less';
-
-:root {
-  --van-divider-margin: @divider-margin;
-  --van-divider-text-color: @divider-text-color;
-  --van-divider-font-size: @divider-font-size;
-  --van-divider-line-height: @divider-line-height;
-  --van-divider-border-color: @divider-border-color;
-  --van-divider-content-padding: @divider-content-padding;
-  --van-divider-content-left-width: @divider-content-left-width;
-  --van-divider-content-right-width: @divider-content-right-width;
+body {
+  --van-divider-margin: var(--van-padding-md) 0;
+  --van-divider-text-color: var(--van-text-color-2);
+  --van-divider-font-size: var(--van-font-size-md);
+  --van-divider-line-height: 24px;
+  --van-divider-border-color: var(--van-border-color);
+  --van-divider-content-padding: var(--van-padding-md);
+  --van-divider-content-left-width: 10%;
+  --van-divider-content-right-width: 10%;
 }
 
 .van-divider {
@@ -30,7 +28,7 @@
     height: 1px;
     border-color: inherit;
     border-style: inherit;
-    border-width: var(--van-border-width-base) 0 0;
+    border-width: var(--van-border-width) 0 0;
   }
 
   &::before {

package/lib/dropdown-item/index.css

@@ -1 +1 @@
-:root{--van-dropdown-item-z-index: 10}.van-dropdown-item{position:fixed;right:0;left:0;z-index:var(--van-dropdown-item-z-index);overflow:hidden}.van-dropdown-item__icon{display:block;line-height:inherit}.van-dropdown-item__option{text-align:left}.van-dropdown-item__option--active,.van-dropdown-item__option--active .van-dropdown-item__icon{color:var(--van-dropdown-menu-option-active-color)}.van-dropdown-item--up{top:0}.van-dropdown-item--down{bottom:0}.van-dropdown-item__content{position:absolute;max-height:var(--van-dropdown-menu-content-max-height)}
+body{--van-dropdown-item-z-index: 10}.van-dropdown-item{position:fixed;right:0;left:0;z-index:var(--van-dropdown-item-z-index);overflow:hidden}.van-dropdown-item__icon{display:block;line-height:inherit}.van-dropdown-item__option{text-align:left}.van-dropdown-item__option--active,.van-dropdown-item__option--active .van-dropdown-item__icon{color:var(--van-dropdown-menu-option-active-color)}.van-dropdown-item--up{top:0}.van-dropdown-item--down{bottom:0}.van-dropdown-item__content{position:absolute;max-height:var(--van-dropdown-menu-content-max-height)}

package/lib/dropdown-item/index.less

@@ -1,8 +1,5 @@
-@import './var.less';
-@import '../dropdown-menu/var.less';
-
-:root {
-  --van-dropdown-item-z-index: @dropdown-item-z-index;
+body {
+  --van-dropdown-item-z-index: 10;
 }
 
 .van-dropdown-item {

package/lib/dropdown-menu/index.css

@@ -1 +1 @@
-:root{--van-dropdown-menu-height: 48px;--van-dropdown-menu-background-color: var(--van-background-color-light);--van-dropdown-menu-box-shadow: 0 2px 12px rgba(100, 101, 102, .12);--van-dropdown-menu-title-font-size: 15px;--van-dropdown-menu-title-text-color: var(--van-text-color);--van-dropdown-menu-title-active-text-color: var(--van-danger-color);--van-dropdown-menu-title-disabled-text-color: var(--van-text-color-2);--van-dropdown-menu-title-padding: 0 var(--van-padding-xs);--van-dropdown-menu-title-line-height: var(--van-line-height-lg);--van-dropdown-menu-option-active-color: var(--van-danger-color);--van-dropdown-menu-content-max-height: 80%}.van-dropdown-menu{-webkit-user-select:none;user-select:none}.van-dropdown-menu__bar{position:relative;display:flex;height:var(--van-dropdown-menu-height);background:var(--van-dropdown-menu-background-color);box-shadow:var(--van-dropdown-menu-box-shadow)}.van-dropdown-menu__bar--opened{z-index:calc(var(--van-dropdown-item-z-index) + 1)}.van-dropdown-menu__item{display:flex;flex:1;align-items:center;justify-content:center;min-width:0}.van-dropdown-menu__item--disabled .van-dropdown-menu__title{color:var(--van-dropdown-menu-title-disabled-text-color)}.van-dropdown-menu__title{position:relative;box-sizing:border-box;max-width:100%;padding:var(--van-dropdown-menu-title-padding);color:var(--van-dropdown-menu-title-text-color);font-size:var(--van-dropdown-menu-title-font-size);line-height:var(--van-dropdown-menu-title-line-height)}.van-dropdown-menu__title:after{position:absolute;top:50%;right:-4px;margin-top:-5px;border:3px solid;border-color:transparent transparent var(--van-gray-4) var(--van-gray-4);transform:rotate(-45deg);opacity:.8;content:""}.van-dropdown-menu__title--active{color:var(--van-dropdown-menu-title-active-text-color)}.van-dropdown-menu__title--active:after{border-color:transparent transparent currentColor currentColor}.van-dropdown-menu__title--down:after{margin-top:-1px;transform:rotate(135deg)}
+body{--van-dropdown-menu-height: 48px;--van-dropdown-menu-background: var(--van-background-2);--van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, .12);--van-dropdown-menu-title-font-size: 15px;--van-dropdown-menu-title-text-color: var(--van-text-color);--van-dropdown-menu-title-active-text-color: var(--van-primary-color);--van-dropdown-menu-title-disabled-text-color: var(--van-text-color-2);--van-dropdown-menu-title-padding: 0 var(--van-padding-xs);--van-dropdown-menu-title-line-height: var(--van-line-height-lg);--van-dropdown-menu-option-active-color: var(--van-primary-color);--van-dropdown-menu-content-max-height: 80%}.van-dropdown-menu{-webkit-user-select:none;user-select:none}.van-dropdown-menu__bar{position:relative;display:flex;height:var(--van-dropdown-menu-height);background:var(--van-dropdown-menu-background);box-shadow:var(--van-dropdown-menu-shadow)}.van-dropdown-menu__bar--opened{z-index:calc(var(--van-dropdown-item-z-index) + 1)}.van-dropdown-menu__item{display:flex;flex:1;align-items:center;justify-content:center;min-width:0}.van-dropdown-menu__item--disabled .van-dropdown-menu__title{color:var(--van-dropdown-menu-title-disabled-text-color)}.van-dropdown-menu__title{position:relative;box-sizing:border-box;max-width:100%;padding:var(--van-dropdown-menu-title-padding);color:var(--van-dropdown-menu-title-text-color);font-size:var(--van-dropdown-menu-title-font-size);line-height:var(--van-dropdown-menu-title-line-height)}.van-dropdown-menu__title:after{position:absolute;top:50%;right:-4px;margin-top:-5px;border:3px solid;border-color:transparent transparent var(--van-gray-4) var(--van-gray-4);transform:rotate(-45deg);opacity:.8;content:""}.van-dropdown-menu__title--active{color:var(--van-dropdown-menu-title-active-text-color)}.van-dropdown-menu__title--active:after{border-color:transparent transparent currentColor currentColor}.van-dropdown-menu__title--down:after{margin-top:-1px;transform:rotate(135deg)}

package/lib/dropdown-menu/index.less

@@ -1,18 +1,15 @@
-@import './var.less';
-@import '../dropdown-item/var.less';
-
-:root {
-  --van-dropdown-menu-height: @dropdown-menu-height;
-  --van-dropdown-menu-background-color: @dropdown-menu-background-color;
-  --van-dropdown-menu-box-shadow: @dropdown-menu-box-shadow;
-  --van-dropdown-menu-title-font-size: @dropdown-menu-title-font-size;
-  --van-dropdown-menu-title-text-color: @dropdown-menu-title-text-color;
-  --van-dropdown-menu-title-active-text-color: @dropdown-menu-title-active-text-color;
-  --van-dropdown-menu-title-disabled-text-color: @dropdown-menu-title-disabled-text-color;
-  --van-dropdown-menu-title-padding: @dropdown-menu-title-padding;
-  --van-dropdown-menu-title-line-height: @dropdown-menu-title-line-height;
-  --van-dropdown-menu-option-active-color: @dropdown-menu-option-active-color;
-  --van-dropdown-menu-content-max-height: @dropdown-menu-content-max-height;
+body {
+  --van-dropdown-menu-height: 48px;
+  --van-dropdown-menu-background: var(--van-background-2);
+  --van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
+  --van-dropdown-menu-title-font-size: 15px;
+  --van-dropdown-menu-title-text-color: var(--van-text-color);
+  --van-dropdown-menu-title-active-text-color: var(--van-primary-color);
+  --van-dropdown-menu-title-disabled-text-color: var(--van-text-color-2);
+  --van-dropdown-menu-title-padding: 0 var(--van-padding-xs);
+  --van-dropdown-menu-title-line-height: var(--van-line-height-lg);
+  --van-dropdown-menu-option-active-color: var(--van-primary-color);
+  --van-dropdown-menu-content-max-height: 80%;
 }
 
 .van-dropdown-menu {
@@ -22,8 +19,8 @@
     position: relative;
     display: flex;
     height: var(--van-dropdown-menu-height);
-    background: var(--van-dropdown-menu-background-color);
-    box-shadow: var(--van-dropdown-menu-box-shadow);
+    background: var(--van-dropdown-menu-background);
+    box-shadow: var(--van-dropdown-menu-shadow);
 
     &--opened {
       z-index: calc(var(--van-dropdown-item-z-index) + 1);

package/lib/empty/index.css

@@ -1 +1 @@
-:root{--van-empty-padding: var(--van-padding-xl) 0;--van-empty-image-size: 160px;--van-empty-description-margin-top: var(--van-padding-md);--van-empty-description-padding: 0 60px;--van-empty-description-color: var(--van-text-color-2);--van-empty-description-font-size: var(--van-font-size-md);--van-empty-description-line-height: var(--van-line-height-md);--van-empty-bottom-margin-top: 24px}.van-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:var(--van-empty-padding)}.van-empty__image{width:var(--van-empty-image-size);height:var(--van-empty-image-size)}.van-empty__image img{width:100%;height:100%}.van-empty__description{margin-top:var(--van-empty-description-margin-top);padding:var(--van-empty-description-padding);color:var(--van-empty-description-color);font-size:var(--van-empty-description-font-size);line-height:var(--van-empty-description-line-height)}.van-empty__bottom{margin-top:var(--van-empty-bottom-margin-top)}
+body{--van-empty-padding: var(--van-padding-xl) 0;--van-empty-image-size: 160px;--van-empty-description-margin-top: var(--van-padding-md);--van-empty-description-padding: 0 60px;--van-empty-description-color: var(--van-text-color-2);--van-empty-description-font-size: var(--van-font-size-md);--van-empty-description-line-height: var(--van-line-height-md);--van-empty-bottom-margin-top: 24px}.van-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:var(--van-empty-padding)}.van-empty__image{width:var(--van-empty-image-size);height:var(--van-empty-image-size)}.van-empty__image img{width:100%;height:100%}.van-empty__description{margin-top:var(--van-empty-description-margin-top);padding:var(--van-empty-description-padding);color:var(--van-empty-description-color);font-size:var(--van-empty-description-font-size);line-height:var(--van-empty-description-line-height)}.van-empty__bottom{margin-top:var(--van-empty-bottom-margin-top)}

package/lib/empty/index.less

@@ -1,14 +1,12 @@
-@import './var.less';
-
-:root {
-  --van-empty-padding: @empty-padding;
-  --van-empty-image-size: @empty-image-size;
-  --van-empty-description-margin-top: @empty-description-margin-top;
-  --van-empty-description-padding: @empty-description-padding;
-  --van-empty-description-color: @empty-description-color;
-  --van-empty-description-font-size: @empty-description-font-size;
-  --van-empty-description-line-height: @empty-description-line-height;
-  --van-empty-bottom-margin-top: @empty-bottom-margin-top;
+body {
+  --van-empty-padding: var(--van-padding-xl) 0;
+  --van-empty-image-size: 160px;
+  --van-empty-description-margin-top: var(--van-padding-md);
+  --van-empty-description-padding: 0 60px;
+  --van-empty-description-color: var(--van-text-color-2);
+  --van-empty-description-font-size: var(--van-font-size-md);
+  --van-empty-description-line-height: var(--van-line-height-md);
+  --van-empty-bottom-margin-top: 24px;
 }
 
 .van-empty {