vant 3.4.5 → 4.0.0-alpha.0

package/es/coupon-list/index.less

@@ -1,20 +1,18 @@
-@import './var.less';
-
-:root {
-  --van-coupon-list-background-color: @coupon-list-background-color;
-  --van-coupon-list-field-padding: @coupon-list-field-padding;
-  --van-coupon-list-exchange-button-height: @coupon-list-exchange-button-height;
-  --van-coupon-list-close-button-height: @coupon-list-close-button-height;
-  --van-coupon-list-empty-image-size: @coupon-list-empty-image-size;
-  --van-coupon-list-empty-tip-color: @coupon-list-empty-tip-color;
-  --van-coupon-list-empty-tip-font-size: @coupon-list-empty-tip-font-size;
-  --van-coupon-list-empty-tip-line-height: @coupon-list-empty-tip-line-height;
+body {
+  --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-image-size: 200px;
+  --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-color);
+  background: var(--van-coupon-list-background);
 
   &__field {
     padding: var(--van-coupon-list-field-padding);
@@ -23,8 +21,8 @@
       height: 34px;
       padding-left: var(--van-padding-sm);
       line-height: 34px;
-      background: var(--van-gray-1);
-      border-radius: 17px;
+      background: var(--van-background);
+      border-radius: var(--van-radius-max);
 
       &::placeholder {
         color: var(--van-text-color-3);
@@ -39,7 +37,7 @@
   &__exchange-bar {
     display: flex;
     align-items: center;
-    background-color: var(--van-background-color-light);
+    background-color: var(--van-background-2);
   }
 
   &__exchange {
@@ -73,8 +71,8 @@
     box-sizing: border-box;
     width: 100%;
     padding: 5px var(--van-padding-md);
-    font-weight: var(--van-font-weight-bold);
-    background-color: var(--van-background-color-light);
+    font-weight: var(--van-font-bold);
+    background-color: var(--van-background-2);
   }
 
   &__close {

package/es/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/es/date-picker/DatePicker.js

@@ -0,0 +1,111 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { ref, watch, computed, defineComponent } from "vue";
+import { pick, extend, isDate, isSameValue, createNamespace } from "../utils";
+import { genOptions, sharedProps, getMonthEndDay, pickerInheritKeys } from "./utils";
+import { Picker } from "../picker";
+const currentYear = new Date().getFullYear();
+const [name] = createNamespace("date-picker");
+const datePickerProps = extend({}, sharedProps, {
+  columnsType: {
+    type: Array,
+    default: () => ["year", "month", "day"]
+  },
+  minDate: {
+    type: Date,
+    default: () => new Date(currentYear - 10, 0, 1),
+    validator: isDate
+  },
+  maxDate: {
+    type: Date,
+    default: () => new Date(currentYear + 10, 11, 31),
+    validator: isDate
+  }
+});
+var stdin_default = defineComponent({
+  name,
+  props: datePickerProps,
+  emits: ["confirm", "cancel", "change", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const currentValues = ref(props.modelValue);
+    const genYearOptions = () => {
+      const minYear = props.minDate.getFullYear();
+      const maxYear = props.maxDate.getFullYear();
+      return 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 genOptions(1, props.maxDate.getMonth() + 1, "month", props.formatter, props.filter);
+      }
+      return genOptions(1, 12, "month", props.formatter, props.filter);
+    };
+    const genDayOptions = () => {
+      const year = getValue("year");
+      const month = getValue("month");
+      let maxDate = getMonthEndDay(year, month);
+      if (isMaxYear(year) && isMaxMonth(month)) {
+        maxDate = props.maxDate.getDate();
+      }
+      return genOptions(1, maxDate, "day", props.formatter, props.filter);
+    };
+    const columns = 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}`);
+      }
+    }));
+    watch(currentValues, (newValues) => {
+      if (isSameValue(newValues, props.modelValue)) {
+        emit("update:modelValue", newValues);
+      }
+    });
+    watch(() => props.modelValue, (newValues) => {
+      if (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 () => _createVNode(Picker, _mergeProps({
+      "modelValue": currentValues.value,
+      "onUpdate:modelValue": ($event) => currentValues.value = $event,
+      "columns": columns.value,
+      "onChange": onChange,
+      "onCancel": onCancel,
+      "onConfirm": onConfirm
+    }, pick(props, pickerInheritKeys)), slots);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/{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/es/date-picker/index.js

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils";
+import _DatePicker from "./DatePicker";
+const DatePicker = withInstall(_DatePicker);
+var stdin_default = DatePicker;
+export {
+  DatePicker,
+  stdin_default as default
+};

package/es/{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/es/date-picker/utils.js

@@ -0,0 +1,40 @@
+import { extend, padZero, makeArrayProp } from "../utils";
+import { pickerSharedProps } from "../picker/Picker";
+const sharedProps = extend({}, pickerSharedProps, {
+  modelValue: makeArrayProp(),
+  filter: Function,
+  formatter: {
+    type: Function,
+    default: (type, option) => option
+  }
+});
+const pickerInheritKeys = Object.keys(pickerSharedProps);
+function times(n, iteratee) {
+  if (n < 0) {
+    return [];
+  }
+  const result = Array(n);
+  let index = -1;
+  while (++index < n) {
+    result[index] = iteratee(index);
+  }
+  return result;
+}
+const getMonthEndDay = (year, month) => 32 - new Date(year, month - 1, 32).getDate();
+const genOptions = (min, max, type, formatter, filter) => {
+  const options = times(max - min + 1, (index) => {
+    const value = padZero(min + index);
+    return formatter(type, {
+      text: value,
+      value
+    });
+  });
+  return filter ? filter(type, options) : options;
+};
+export {
+  genOptions,
+  getMonthEndDay,
+  pickerInheritKeys,
+  sharedProps,
+  times
+};

package/es/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/es/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/es/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)}