vant 3.4.5 → 4.0.0-alpha.1

package/es/area/Area.js

@@ -1,239 +1,74 @@
 import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { ref, watch, computed, reactive, nextTick, onMounted, defineComponent } from "vue";
-import { deepClone } from "../utils/deep-clone";
+import { ref, watch, computed, defineComponent } from "vue";
 import { pick, extend, makeArrayProp, makeNumericProp, createNamespace } from "../utils";
 import { pickerSharedProps } from "../picker/Picker";
+import { INHERIT_PROPS, INHERIT_SLOTS, formatDataForCascade } from "./utils";
 import { useExpose } from "../composables/use-expose";
 import { Picker } from "../picker";
 const [name, bem] = createNamespace("area");
-const EMPTY_CODE = "000000";
-const INHERIT_SLOTS = ["title", "cancel", "confirm", "toolbar", "columns-top", "columns-bottom"];
-const INHERIT_PROPS = ["title", "loading", "readonly", "itemHeight", "swipeDuration", "visibleItemCount", "cancelButtonText", "confirmButtonText"];
-const isOverseaCode = (code) => code[0] === "9";
 const areaProps = extend({}, pickerSharedProps, {
-  value: String,
+  modelValue: String,
   columnsNum: makeNumericProp(3),
   columnsPlaceholder: makeArrayProp(),
   areaList: {
     type: Object,
     default: () => ({})
-  },
-  isOverseaCode: {
-    type: Function,
-    default: isOverseaCode
   }
 });
 var stdin_default = defineComponent({
   name,
   props: areaProps,
-  emits: ["change", "confirm", "cancel"],
+  emits: ["change", "confirm", "cancel", "update:modelValue"],
   setup(props, {
     emit,
     slots
   }) {
-    const pickerRef = ref();
-    const state = reactive({
-      code: props.value,
-      columns: [{
-        values: []
-      }, {
-        values: []
-      }, {
-        values: []
-      }]
-    });
-    const areaList = computed(() => {
-      const {
-        areaList: areaList2
-      } = props;
-      return {
-        province: areaList2.province_list || {},
-        city: areaList2.city_list || {},
-        county: areaList2.county_list || {}
-      };
-    });
-    const placeholderMap = computed(() => {
-      const {
-        columnsPlaceholder
-      } = props;
-      return {
-        province: columnsPlaceholder[0] || "",
-        city: columnsPlaceholder[1] || "",
-        county: columnsPlaceholder[2] || ""
-      };
-    });
-    const getDefaultCode = () => {
-      if (props.columnsPlaceholder.length) {
-        return EMPTY_CODE;
-      }
-      const {
-        county,
-        city
-      } = areaList.value;
-      const countyCodes = Object.keys(county);
-      if (countyCodes[0]) {
-        return countyCodes[0];
-      }
-      const cityCodes = Object.keys(city);
-      if (cityCodes[0]) {
-        return cityCodes[0];
-      }
-      return "";
-    };
-    const getColumnValues = (type, code) => {
-      let column = [];
-      if (type !== "province" && !code) {
-        return column;
-      }
-      const list = areaList.value[type];
-      column = Object.keys(list).map((listCode) => ({
-        code: listCode,
-        name: list[listCode]
-      }));
-      if (code) {
-        if (type === "city" && props.isOverseaCode(code)) {
-          code = "9";
-        }
-        column = column.filter((item) => item.code.indexOf(code) === 0);
-      }
-      if (placeholderMap.value[type] && column.length) {
-        let codeFill = "";
-        if (type === "city") {
-          codeFill = EMPTY_CODE.slice(2, 4);
-        } else if (type === "county") {
-          codeFill = EMPTY_CODE.slice(4, 6);
-        }
-        column.unshift({
-          code: code + codeFill,
-          name: placeholderMap.value[type]
-        });
-      }
-      return column;
-    };
-    const getIndex = (type, code) => {
-      let compareNum = code.length;
-      if (type === "province") {
-        compareNum = props.isOverseaCode(code) ? 1 : 2;
-      }
-      if (type === "city") {
-        compareNum = 4;
-      }
-      code = code.slice(0, compareNum);
-      const list = getColumnValues(type, compareNum > 2 ? code.slice(0, compareNum - 2) : "");
-      for (let i = 0; i < list.length; i++) {
-        if (list[i].code.slice(0, compareNum) === code) {
-          return i;
-        }
-      }
-      return 0;
-    };
-    const setValues = () => {
-      const picker = pickerRef.value;
-      if (!picker) {
-        return;
-      }
-      let code = state.code || getDefaultCode();
-      const province = getColumnValues("province");
-      const city = getColumnValues("city", code.slice(0, 2));
-      picker.setColumnValues(0, province);
-      picker.setColumnValues(1, city);
-      if (city.length && code.slice(2, 4) === "00" && !props.isOverseaCode(code)) {
-        [{
-          code
-        }] = city;
-      }
-      picker.setColumnValues(2, getColumnValues("county", code.slice(0, 4)));
-      picker.setIndexes([getIndex("province", code), getIndex("city", code), getIndex("county", code)]);
-    };
-    const parseValues = (values) => values.map((value, index) => {
-      if (value) {
-        value = deepClone(value);
-        if (!value.code || value.name === props.columnsPlaceholder[index]) {
-          value.code = "";
-          value.name = "";
-        }
+    const codes = ref([]);
+    const picker = ref();
+    const columns = computed(() => formatDataForCascade(props));
+    const onChange = (...args) => emit("change", ...args);
+    const onCancel = (...args) => emit("cancel", ...args);
+    const onConfirm = (...args) => emit("confirm", ...args);
+    watch(codes, (newCodes) => {
+      const lastCode = newCodes.length ? newCodes[newCodes.length - 1] : "";
+      if (lastCode && lastCode !== props.modelValue) {
+        emit("update:modelValue", lastCode);
       }
-      return value;
+    }, {
+      deep: true
     });
-    const getValues = () => {
-      if (pickerRef.value) {
-        const values = pickerRef.value.getValues().filter(Boolean);
-        return parseValues(values);
-      }
-      return [];
-    };
-    const getArea = () => {
-      const values = getValues();
-      const area = {
-        code: "",
-        country: "",
-        province: "",
-        city: "",
-        county: ""
-      };
-      if (!values.length) {
-        return area;
-      }
-      const names = values.map((item) => item.name);
-      const validValues = values.filter((value) => value.code);
-      area.code = validValues.length ? validValues[validValues.length - 1].code : "";
-      if (props.isOverseaCode(area.code)) {
-        area.country = names[1] || "";
-        area.province = names[2] || "";
+    watch(() => props.modelValue, (newCode) => {
+      if (newCode) {
+        const lastCode = codes.value.length ? codes.value[codes.value.length - 1] : "";
+        if (newCode !== lastCode) {
+          codes.value = [`${newCode.slice(0, 2)}0000`, `${newCode.slice(0, 4)}00`, newCode].slice(0, +props.columnsNum);
+        }
       } else {
-        area.province = names[0] || "";
-        area.city = names[1] || "";
-        area.county = names[2] || "";
-      }
-      return area;
-    };
-    const reset = (newCode = "") => {
-      state.code = newCode;
-      setValues();
-    };
-    const onChange = (values, index) => {
-      state.code = values[index].code;
-      setValues();
-      if (pickerRef.value) {
-        const parsedValues = parseValues(pickerRef.value.getValues());
-        emit("change", parsedValues, index);
+        codes.value = [];
       }
-    };
-    const onConfirm = (values, index) => {
-      setValues();
-      emit("confirm", parseValues(values), index);
-    };
-    const onCancel = (...args) => emit("cancel", ...args);
-    onMounted(setValues);
-    watch(() => props.value, (value) => {
-      state.code = value;
-      setValues();
-    });
-    watch(() => props.areaList, setValues, {
-      deep: true
-    });
-    watch(() => props.columnsNum, () => {
-      nextTick(setValues);
+    }, {
+      immediate: true
     });
     useExpose({
-      reset,
-      getArea,
-      getValues
+      confirm: () => {
+        var _a;
+        return (_a = picker.value) == null ? void 0 : _a.confirm();
+      },
+      getSelectedOptions: () => {
+        var _a;
+        return ((_a = picker.value) == null ? void 0 : _a.getSelectedOptions()) || [];
+      }
     });
-    return () => {
-      const columns = state.columns.slice(0, +props.columnsNum);
-      return _createVNode(Picker, _mergeProps({
-        "ref": pickerRef,
-        "class": bem(),
-        "columns": columns,
-        "columnsFieldNames": {
-          text: "name"
-        },
-        "onChange": onChange,
-        "onCancel": onCancel,
-        "onConfirm": onConfirm
-      }, pick(props, INHERIT_PROPS)), pick(slots, INHERIT_SLOTS));
-    };
+    return () => _createVNode(Picker, _mergeProps({
+      "ref": picker,
+      "modelValue": codes.value,
+      "onUpdate:modelValue": ($event) => codes.value = $event,
+      "class": bem(),
+      "columns": columns.value,
+      "onChange": onChange,
+      "onCancel": onCancel,
+      "onConfirm": onConfirm
+    }, pick(props, INHERIT_PROPS)), pick(slots, INHERIT_SLOTS));
   }
 });
 export {

package/es/area/index.d.ts

@@ -3,7 +3,7 @@ export declare const Area: import("../utils").WithInstall<import("vue").DefineCo
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -15,14 +15,14 @@ export declare const Area: import("../utils").WithInstall<import("vue").DefineCo
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
-    value: StringConstructor;
+    modelValue: StringConstructor;
     columnsNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -35,16 +35,12 @@ export declare const Area: import("../utils").WithInstall<import("vue").DefineCo
         type: import("vue").PropType<import("./types").AreaList>;
         default: () => {};
     };
-    isOverseaCode: {
-        type: import("vue").PropType<(code: string) => boolean>;
-        default: (code: string) => boolean;
-    };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "cancel" | "confirm")[], "change" | "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => 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<import("vue").ExtractPropTypes<{
     title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -56,14 +52,14 @@ export declare const Area: import("../utils").WithInstall<import("vue").DefineCo
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
-    value: StringConstructor;
+    modelValue: StringConstructor;
     columnsNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -76,30 +72,26 @@ export declare const Area: import("../utils").WithInstall<import("vue").DefineCo
         type: import("vue").PropType<import("./types").AreaList>;
         default: () => {};
     };
-    isOverseaCode: {
-        type: import("vue").PropType<(code: string) => boolean>;
-        default: (code: string) => boolean;
-    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
 }, {
     readonly: boolean;
     loading: boolean;
     allowHtml: boolean;
-    itemHeight: string | number;
+    optionHeight: string | number;
     showToolbar: boolean;
     swipeDuration: string | number;
-    visibleItemCount: string | number;
+    visibleOptionNum: string | number;
     columnsNum: string | number;
     columnsPlaceholder: string[];
     areaList: import("./types").AreaList;
-    isOverseaCode: (code: string) => boolean;
 }>>;
 export default Area;
 export type { AreaProps } from './Area';
-export type { AreaList, AreaInstance, AreaColumnOption } from './types';
+export type { AreaList, AreaInstance } from './types';
 declare module 'vue' {
     interface GlobalComponents {
         VanArea: typeof Area;

package/es/area/types.d.ts

@@ -1,24 +1,9 @@
 import type { ComponentPublicInstance } from 'vue';
+import { PickerExpose } from '../picker/types';
 import type { AreaProps } from './Area';
 export declare type AreaList = {
     city_list: Record<string, string>;
     county_list: Record<string, string>;
     province_list: Record<string, string>;
 };
-export declare type AreaColumnOption = {
-    name: string;
-    code: string;
-};
-export declare type AreaColumnType = 'province' | 'county' | 'city';
-export declare type AreaExpose = {
-    reset: (newCode?: string) => void;
-    getArea: () => {
-        code: string;
-        country: string;
-        province: string;
-        city: string;
-        county: string;
-    };
-    getValues: () => AreaColumnOption[];
-};
-export declare type AreaInstance = ComponentPublicInstance<AreaProps, AreaExpose>;
+export declare type AreaInstance = ComponentPublicInstance<AreaProps, PickerExpose>;

package/es/area/utils.d.ts

@@ -0,0 +1,6 @@
+import type { AreaProps } from '.';
+import type { PickerOption } from '../picker';
+export declare const AREA_EMPTY_CODE = "000000";
+export declare const INHERIT_SLOTS: readonly ["title", "cancel", "confirm", "toolbar", "columns-top", "columns-bottom"];
+export declare const INHERIT_PROPS: readonly ["title", "loading", "readonly", "optionHeight", "swipeDuration", "visibleOptionNum", "cancelButtonText", "confirmButtonText"];
+export declare function formatDataForCascade({ areaList, columnsNum, columnsPlaceholder: placeholder, }: AreaProps): PickerOption[];

package/es/area/utils.js

@@ -0,0 +1,85 @@
+const AREA_EMPTY_CODE = "000000";
+const INHERIT_SLOTS = [
+  "title",
+  "cancel",
+  "confirm",
+  "toolbar",
+  "columns-top",
+  "columns-bottom"
+];
+const INHERIT_PROPS = [
+  "title",
+  "loading",
+  "readonly",
+  "optionHeight",
+  "swipeDuration",
+  "visibleOptionNum",
+  "cancelButtonText",
+  "confirmButtonText"
+];
+const makeOption = (text = "", value = AREA_EMPTY_CODE, children = void 0) => ({
+  text,
+  value,
+  children
+});
+function formatDataForCascade({
+  areaList,
+  columnsNum,
+  columnsPlaceholder: placeholder
+}) {
+  const {
+    city_list: city = {},
+    county_list: county = {},
+    province_list: province = {}
+  } = areaList;
+  const showCity = columnsNum > 1;
+  const showCounty = columnsNum > 2;
+  const getProvinceChildren = () => {
+    if (showCity) {
+      return placeholder.length ? [
+        makeOption(placeholder[0], AREA_EMPTY_CODE, showCounty ? [] : void 0)
+      ] : [];
+    }
+  };
+  const provinceMap = /* @__PURE__ */ new Map();
+  Object.keys(province).forEach((code) => {
+    provinceMap.set(code.slice(0, 2), makeOption(province[code], code, getProvinceChildren()));
+  });
+  const cityMap = /* @__PURE__ */ new Map();
+  if (showCity) {
+    const getCityChildren = () => {
+      if (showCounty) {
+        return placeholder.length ? [makeOption(placeholder[1])] : [];
+      }
+    };
+    Object.keys(city).forEach((code) => {
+      const option = makeOption(city[code], code, getCityChildren());
+      cityMap.set(code.slice(0, 4), option);
+      const province2 = provinceMap.get(code.slice(0, 2));
+      if (province2) {
+        province2.children.push(option);
+      }
+    });
+  }
+  if (showCounty) {
+    Object.keys(county).forEach((code) => {
+      const city2 = cityMap.get(code.slice(0, 4));
+      if (city2) {
+        city2.children.push(makeOption(county[code], code));
+      }
+    });
+  }
+  const options = Array.from(provinceMap.values());
+  if (placeholder.length) {
+    const county2 = showCounty ? [makeOption(placeholder[2])] : void 0;
+    const city2 = showCity ? [makeOption(placeholder[1], AREA_EMPTY_CODE, county2)] : void 0;
+    options.unshift(makeOption(placeholder[0], AREA_EMPTY_CODE, city2));
+  }
+  return options;
+}
+export {
+  AREA_EMPTY_CODE,
+  INHERIT_PROPS,
+  INHERIT_SLOTS,
+  formatDataForCascade
+};

package/es/badge/index.css

@@ -1 +1 @@
-:root{--van-badge-size: 16px;--van-badge-color: var(--van-white);--van-badge-padding: 0 3px;--van-badge-font-size: var(--van-font-size-sm);--van-badge-font-weight: var(--van-font-weight-bold);--van-badge-border-width: var(--van-border-width-base);--van-badge-background-color: var(--van-danger-color);--van-badge-dot-color: var(--van-danger-color);--van-badge-dot-size: 8px;--van-badge-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif}.van-badge{display:inline-block;box-sizing:border-box;min-width:var(--van-badge-size);padding:var(--van-badge-padding);color:var(--van-badge-color);font-weight:var(--van-badge-font-weight);font-size:var(--van-badge-font-size);font-family:var(--van-badge-font-family);line-height:1.2;text-align:center;background:var(--van-badge-background-color);border:var(--van-badge-border-width) solid var(--van-background-color-light);border-radius:var(--van-border-radius-max)}.van-badge--fixed{position:absolute;transform-origin:100%}.van-badge--top-left{top:0;left:0;transform:translate(-50%,-50%)}.van-badge--top-right{top:0;right:0;transform:translate(50%,-50%)}.van-badge--bottom-left{bottom:0;left:0;transform:translate(-50%,50%)}.van-badge--bottom-right{bottom:0;right:0;transform:translate(50%,50%)}.van-badge--dot{width:var(--van-badge-dot-size);min-width:0;height:var(--van-badge-dot-size);background:var(--van-badge-dot-color);border-radius:100%;border:none;padding:0}.van-badge__wrapper{position:relative;display:inline-block}
+body{--van-badge-size: 16px;--van-badge-color: var(--van-white);--van-badge-padding: 0 3px;--van-badge-font-size: var(--van-font-size-sm);--van-badge-font-weight: var(--van-font-bold);--van-badge-border-width: var(--van-border-width);--van-badge-background: var(--van-danger-color);--van-badge-dot-color: var(--van-danger-color);--van-badge-dot-size: 8px;--van-badge-font: -apple-system-font, helvetica neue, arial, sans-serif}.van-badge{display:inline-block;box-sizing:border-box;min-width:var(--van-badge-size);padding:var(--van-badge-padding);color:var(--van-badge-color);font-weight:var(--van-badge-font-weight);font-size:var(--van-badge-font-size);font-family:var(--van-badge-font);line-height:1.2;text-align:center;background:var(--van-badge-background);border:var(--van-badge-border-width) solid var(--van-background-2);border-radius:var(--van-radius-max)}.van-badge--fixed{position:absolute;transform-origin:100%}.van-badge--top-left{top:0;left:0;transform:translate(-50%,-50%)}.van-badge--top-right{top:0;right:0;transform:translate(50%,-50%)}.van-badge--bottom-left{bottom:0;left:0;transform:translate(-50%,50%)}.van-badge--bottom-right{bottom:0;right:0;transform:translate(50%,50%)}.van-badge--dot{width:var(--van-badge-dot-size);min-width:0;height:var(--van-badge-dot-size);background:var(--van-badge-dot-color);border-radius:100%;border:none;padding:0}.van-badge__wrapper{position:relative;display:inline-block}

package/es/badge/index.less

@@ -1,16 +1,14 @@
-@import './var.less';
-
-:root {
-  --van-badge-size: @badge-size;
-  --van-badge-color: @badge-color;
-  --van-badge-padding: @badge-padding;
-  --van-badge-font-size: @badge-font-size;
-  --van-badge-font-weight: @badge-font-weight;
-  --van-badge-border-width: @badge-border-width;
-  --van-badge-background-color: @badge-background-color;
-  --van-badge-dot-color: @badge-dot-color;
-  --van-badge-dot-size: @badge-dot-size;
-  --van-badge-font-family: @badge-font-family;
+body {
+  --van-badge-size: 16px;
+  --van-badge-color: var(--van-white);
+  --van-badge-padding: 0 3px;
+  --van-badge-font-size: var(--van-font-size-sm);
+  --van-badge-font-weight: var(--van-font-bold);
+  --van-badge-border-width: var(--van-border-width);
+  --van-badge-background: var(--van-danger-color);
+  --van-badge-dot-color: var(--van-danger-color);
+  --van-badge-dot-size: 8px;
+  --van-badge-font: -apple-system-font, helvetica neue, arial, sans-serif;
 }
 
 .van-badge {
@@ -21,12 +19,12 @@
   color: var(--van-badge-color);
   font-weight: var(--van-badge-font-weight);
   font-size: var(--van-badge-font-size);
-  font-family: var(--van-badge-font-family);
+  font-family: var(--van-badge-font);
   line-height: 1.2;
   text-align: center;
-  background: var(--van-badge-background-color);
-  border: var(--van-badge-border-width) solid var(--van-background-color-light);
-  border-radius: var(--van-border-radius-max);
+  background: var(--van-badge-background);
+  border: var(--van-badge-border-width) solid var(--van-background-2);
+  border-radius: var(--van-radius-max);
 
   &--fixed {
     position: absolute;

package/es/button/index.css

@@ -1 +1 @@
-:root{--van-button-mini-height: 24px;--van-button-mini-padding: 0 var(--van-padding-base);--van-button-mini-font-size: var(--van-font-size-xs);--van-button-small-height: 32px;--van-button-small-padding: 0 var(--van-padding-xs);--van-button-small-font-size: var(--van-font-size-sm);--van-button-normal-padding: 0 15px;--van-button-normal-font-size: var(--van-font-size-md);--van-button-large-height: 50px;--van-button-default-height: 44px;--van-button-default-line-height: 1.2;--van-button-default-font-size: var(--van-font-size-lg);--van-button-default-color: var(--van-text-color);--van-button-default-background-color: var(--van-background-color-light);--van-button-default-border-color: var(--van-border-color);--van-button-primary-color: var(--van-white);--van-button-primary-background-color: var(--van-primary-color);--van-button-primary-border-color: var(--van-primary-color);--van-button-success-color: var(--van-white);--van-button-success-background-color: var(--van-success-color);--van-button-success-border-color: var(--van-success-color);--van-button-danger-color: var(--van-white);--van-button-danger-background-color: var(--van-danger-color);--van-button-danger-border-color: var(--van-danger-color);--van-button-warning-color: var(--van-white);--van-button-warning-background-color: var(--van-warning-color);--van-button-warning-border-color: var(--van-warning-color);--van-button-border-width: var(--van-border-width-base);--van-button-border-radius: var(--van-border-radius-sm);--van-button-round-border-radius: var(--van-border-radius-max);--van-button-plain-background-color: var(--van-white);--van-button-disabled-opacity: var(--van-disabled-opacity);--van-button-icon-size: 1.2em;--van-button-loading-icon-size: 20px}.van-button{position:relative;display:inline-block;box-sizing:border-box;height:var(--van-button-default-height);margin:0;padding:0;font-size:var(--van-button-default-font-size);line-height:var(--van-button-default-line-height);text-align:center;border-radius:var(--van-button-border-radius);cursor:pointer;transition:opacity var(--van-animation-duration-fast);-webkit-appearance:none}.van-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background:var(--van-black);border:inherit;border-color:var(--van-black);border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.van-button:active:before{opacity:.1}.van-button--loading:before,.van-button--disabled:before{display:none}.van-button--default{color:var(--van-button-default-color);background:var(--van-button-default-background-color);border:var(--van-button-border-width) solid var(--van-button-default-border-color)}.van-button--primary{color:var(--van-button-primary-color);background:var(--van-button-primary-background-color);border:var(--van-button-border-width) solid var(--van-button-primary-border-color)}.van-button--success{color:var(--van-button-success-color);background:var(--van-button-success-background-color);border:var(--van-button-border-width) solid var(--van-button-success-border-color)}.van-button--danger{color:var(--van-button-danger-color);background:var(--van-button-danger-background-color);border:var(--van-button-border-width) solid var(--van-button-danger-border-color)}.van-button--warning{color:var(--van-button-warning-color);background:var(--van-button-warning-background-color);border:var(--van-button-border-width) solid var(--van-button-warning-border-color)}.van-button--plain{background:var(--van-button-plain-background-color)}.van-button--plain.van-button--primary{color:var(--van-button-primary-background-color)}.van-button--plain.van-button--success{color:var(--van-button-success-background-color)}.van-button--plain.van-button--danger{color:var(--van-button-danger-background-color)}.van-button--plain.van-button--warning{color:var(--van-button-warning-background-color)}.van-button--large{width:100%;height:var(--van-button-large-height)}.van-button--normal{padding:var(--van-button-normal-padding);font-size:var(--van-button-normal-font-size)}.van-button--small{height:var(--van-button-small-height);padding:var(--van-button-small-padding);font-size:var(--van-button-small-font-size)}.van-button__loading{color:inherit;font-size:inherit}.van-button__loading .van-loading__spinner{color:currentColor;width:var(--van-button-loading-icon-size);height:var(--van-button-loading-icon-size)}.van-button--mini{height:var(--van-button-mini-height);padding:var(--van-button-mini-padding);font-size:var(--van-button-mini-font-size)}.van-button--mini+.van-button--mini{margin-left:var(--van-padding-base)}.van-button--block{display:block;width:100%}.van-button--disabled{cursor:not-allowed;opacity:var(--van-button-disabled-opacity)}.van-button--loading{cursor:default}.van-button--round{border-radius:var(--van-button-round-border-radius)}.van-button--square{border-radius:0}.van-button__content{display:flex;align-items:center;justify-content:center;height:100%}.van-button__content:before{content:" "}.van-button__icon{font-size:var(--van-button-icon-size);line-height:inherit}.van-button__icon+.van-button__text,.van-button__loading+.van-button__text,.van-button__text+.van-button__icon,.van-button__text+.van-button__loading{margin-left:var(--van-padding-base)}.van-button--hairline{border-width:0}.van-button--hairline:after{border-color:inherit;border-radius:calc(var(--van-button-border-radius) * 2)}.van-button--hairline.van-button--round:after{border-radius:var(--van-button-round-border-radius)}.van-button--hairline.van-button--square:after{border-radius:0}
+body{--van-button-mini-height: 24px;--van-button-mini-padding: 0 var(--van-padding-base);--van-button-mini-font-size: var(--van-font-size-xs);--van-button-small-height: 32px;--van-button-small-padding: 0 var(--van-padding-xs);--van-button-small-font-size: var(--van-font-size-sm);--van-button-normal-padding: 0 15px;--van-button-normal-font-size: var(--van-font-size-md);--van-button-large-height: 50px;--van-button-default-height: 44px;--van-button-default-line-height: 1.2;--van-button-default-font-size: var(--van-font-size-lg);--van-button-default-color: var(--van-text-color);--van-button-default-background: var(--van-background-2);--van-button-default-border-color: var(--van-gray-4);--van-button-primary-color: var(--van-white);--van-button-primary-background: var(--van-primary-color);--van-button-primary-border-color: var(--van-primary-color);--van-button-success-color: var(--van-white);--van-button-success-background: var(--van-success-color);--van-button-success-border-color: var(--van-success-color);--van-button-danger-color: var(--van-white);--van-button-danger-background: var(--van-danger-color);--van-button-danger-border-color: var(--van-danger-color);--van-button-warning-color: var(--van-white);--van-button-warning-background: var(--van-warning-color);--van-button-warning-border-color: var(--van-warning-color);--van-button-border-width: var(--van-border-width);--van-button-radius: var(--van-radius-md);--van-button-round-radius: var(--van-radius-max);--van-button-plain-background: var(--van-white);--van-button-disabled-opacity: var(--van-disabled-opacity);--van-button-icon-size: 1.2em;--van-button-loading-icon-size: 20px}.van-theme-dark{--van-button-plain-background: transparent}.van-button{position:relative;display:inline-block;box-sizing:border-box;height:var(--van-button-default-height);margin:0;padding:0;font-size:var(--van-button-default-font-size);line-height:var(--van-button-default-line-height);text-align:center;border-radius:var(--van-button-radius);cursor:pointer;transition:opacity var(--van-duration-fast);-webkit-appearance:none;-webkit-font-smoothing:auto}.van-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background:var(--van-black);border:inherit;border-color:var(--van-black);border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.van-button:active:before{opacity:.1}.van-button--loading:before,.van-button--disabled:before{display:none}.van-button--default{color:var(--van-button-default-color);background:var(--van-button-default-background);border:var(--van-button-border-width) solid var(--van-button-default-border-color)}.van-button--primary{color:var(--van-button-primary-color);background:var(--van-button-primary-background);border:var(--van-button-border-width) solid var(--van-button-primary-border-color)}.van-button--success{color:var(--van-button-success-color);background:var(--van-button-success-background);border:var(--van-button-border-width) solid var(--van-button-success-border-color)}.van-button--danger{color:var(--van-button-danger-color);background:var(--van-button-danger-background);border:var(--van-button-border-width) solid var(--van-button-danger-border-color)}.van-button--warning{color:var(--van-button-warning-color);background:var(--van-button-warning-background);border:var(--van-button-border-width) solid var(--van-button-warning-border-color)}.van-button--plain{background:var(--van-button-plain-background)}.van-button--plain.van-button--primary{color:var(--van-button-primary-background)}.van-button--plain.van-button--success{color:var(--van-button-success-background)}.van-button--plain.van-button--danger{color:var(--van-button-danger-background)}.van-button--plain.van-button--warning{color:var(--van-button-warning-background)}.van-button--large{width:100%;height:var(--van-button-large-height)}.van-button--normal{padding:var(--van-button-normal-padding);font-size:var(--van-button-normal-font-size)}.van-button--small{height:var(--van-button-small-height);padding:var(--van-button-small-padding);font-size:var(--van-button-small-font-size)}.van-button__loading{color:inherit;font-size:inherit}.van-button__loading .van-loading__spinner{color:currentColor;width:var(--van-button-loading-icon-size);height:var(--van-button-loading-icon-size)}.van-button--mini{height:var(--van-button-mini-height);padding:var(--van-button-mini-padding);font-size:var(--van-button-mini-font-size)}.van-button--mini+.van-button--mini{margin-left:var(--van-padding-base)}.van-button--block{display:block;width:100%}.van-button--disabled{cursor:not-allowed;opacity:var(--van-button-disabled-opacity)}.van-button--loading{cursor:default}.van-button--round{border-radius:var(--van-button-round-radius)}.van-button--square{border-radius:0}.van-button__content{display:flex;align-items:center;justify-content:center;height:100%}.van-button__content:before{content:" "}.van-button__icon{font-size:var(--van-button-icon-size);line-height:inherit}.van-button__icon+.van-button__text,.van-button__loading+.van-button__text,.van-button__text+.van-button__icon,.van-button__text+.van-button__loading{margin-left:var(--van-padding-base)}.van-button--hairline{border-width:0}.van-button--hairline:after{border-color:inherit;border-radius:calc(var(--van-button-radius) * 2)}.van-button--hairline.van-button--round:after{border-radius:var(--van-button-round-radius)}.van-button--hairline.van-button--square:after{border-radius:0}