vant 3.4.8 → 4.0.0-alpha.2

package/lib/area/Area.d.ts

@@ -5,7 +5,7 @@ declare const areaProps: {
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -17,14 +17,14 @@ declare const areaProps: {
         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;
@@ -37,10 +37,6 @@ declare const areaProps: {
         type: PropType<AreaList>;
         default: () => {};
     };
-    isOverseaCode: {
-        type: PropType<(code: string) => boolean>;
-        default: (code: string) => boolean;
-    };
 };
 export declare type AreaProps = ExtractPropTypes<typeof areaProps>;
 declare const _default: import("vue").DefineComponent<{
@@ -48,7 +44,7 @@ declare const _default: import("vue").DefineComponent<{
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -60,14 +56,14 @@ declare const _default: import("vue").DefineComponent<{
         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;
@@ -80,16 +76,12 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<AreaList>;
         default: () => {};
     };
-    isOverseaCode: {
-        type: 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<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<ExtractPropTypes<{
     title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -101,14 +93,14 @@ declare const _default: import("vue").DefineComponent<{
         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;
@@ -121,25 +113,21 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<AreaList>;
         default: () => {};
     };
-    isOverseaCode: {
-        type: 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: AreaList;
-    isOverseaCode: (code: string) => boolean;
 }>;
 export default _default;

package/lib/area/Area.js

@@ -22,239 +22,74 @@ __export(stdin_exports, {
 module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
 var import_vue2 = require("vue");
-var import_deep_clone = require("../utils/deep-clone");
 var import_utils = require("../utils");
 var import_Picker = require("../picker/Picker");
+var import_utils2 = require("./utils");
 var import_use_expose = require("../composables/use-expose");
 var import_picker = require("../picker");
 const [name, bem] = (0, import_utils.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 = (0, import_utils.extend)({}, import_Picker.pickerSharedProps, {
-  value: String,
+  modelValue: String,
   columnsNum: (0, import_utils.makeNumericProp)(3),
   columnsPlaceholder: (0, import_utils.makeArrayProp)(),
   areaList: {
     type: Object,
     default: () => ({})
-  },
-  isOverseaCode: {
-    type: Function,
-    default: isOverseaCode
   }
 });
 var stdin_default = (0, import_vue2.defineComponent)({
   name,
   props: areaProps,
-  emits: ["change", "confirm", "cancel"],
+  emits: ["change", "confirm", "cancel", "update:modelValue"],
   setup(props, {
     emit,
     slots
   }) {
-    const pickerRef = (0, import_vue2.ref)();
-    const state = (0, import_vue2.reactive)({
-      code: props.value,
-      columns: [{
-        values: []
-      }, {
-        values: []
-      }, {
-        values: []
-      }]
-    });
-    const areaList = (0, import_vue2.computed)(() => {
-      const {
-        areaList: areaList2
-      } = props;
-      return {
-        province: areaList2.province_list || {},
-        city: areaList2.city_list || {},
-        county: areaList2.county_list || {}
-      };
-    });
-    const placeholderMap = (0, import_vue2.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 = (0, import_deep_clone.deepClone)(value);
-        if (!value.code || value.name === props.columnsPlaceholder[index]) {
-          value.code = "";
-          value.name = "";
-        }
+    const codes = (0, import_vue2.ref)([]);
+    const picker = (0, import_vue2.ref)();
+    const columns = (0, import_vue2.computed)(() => (0, import_utils2.formatDataForCascade)(props));
+    const onChange = (...args) => emit("change", ...args);
+    const onCancel = (...args) => emit("cancel", ...args);
+    const onConfirm = (...args) => emit("confirm", ...args);
+    (0, import_vue2.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] || "";
+    (0, import_vue2.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);
-    (0, import_vue2.onMounted)(setValues);
-    (0, import_vue2.watch)(() => props.value, (value) => {
-      state.code = value;
-      setValues();
-    });
-    (0, import_vue2.watch)(() => props.areaList, setValues, {
-      deep: true
-    });
-    (0, import_vue2.watch)(() => props.columnsNum, () => {
-      (0, import_vue2.nextTick)(setValues);
+    }, {
+      immediate: true
     });
     (0, import_use_expose.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 (0, import_vue.createVNode)(import_picker.Picker, (0, import_vue.mergeProps)({
-        "ref": pickerRef,
-        "class": bem(),
-        "columns": columns,
-        "columnsFieldNames": {
-          text: "name"
-        },
-        "onChange": onChange,
-        "onCancel": onCancel,
-        "onConfirm": onConfirm
-      }, (0, import_utils.pick)(props, INHERIT_PROPS)), (0, import_utils.pick)(slots, INHERIT_SLOTS));
-    };
+    return () => (0, import_vue.createVNode)(import_picker.Picker, (0, import_vue.mergeProps)({
+      "ref": picker,
+      "modelValue": codes.value,
+      "onUpdate:modelValue": ($event) => codes.value = $event,
+      "class": bem(),
+      "columns": columns.value,
+      "onChange": onChange,
+      "onCancel": onCancel,
+      "onConfirm": onConfirm
+    }, (0, import_utils.pick)(props, import_utils2.INHERIT_PROPS)), (0, import_utils.pick)(slots, import_utils2.INHERIT_SLOTS));
   }
 });

package/lib/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/lib/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/lib/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/lib/area/utils.js

@@ -0,0 +1,104 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  AREA_EMPTY_CODE: () => AREA_EMPTY_CODE,
+  INHERIT_PROPS: () => INHERIT_PROPS,
+  INHERIT_SLOTS: () => INHERIT_SLOTS,
+  formatDataForCascade: () => formatDataForCascade
+});
+module.exports = __toCommonJS(stdin_exports);
+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;
+}

package/lib/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}