vant 3.4.2 → 4.0.0-alpha.0

package/es/address-list/index.css

@@ -1 +1 @@
-:root{--van-address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;--van-address-list-disabled-text-color: var(--van-text-color-2);--van-address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0 var(--van-padding-md);--van-address-list-disabled-text-font-size: var(--van-font-size-md);--van-address-list-disabled-text-line-height: var(--van-line-height-md);--van-address-list-add-button-z-index: 999;--van-address-list-item-padding: var(--van-padding-sm);--van-address-list-item-text-color: var(--van-text-color);--van-address-list-item-disabled-text-color: var(--van-text-color-3);--van-address-list-item-font-size: 13px;--van-address-list-item-line-height: var(--van-line-height-sm);--van-address-list-item-radio-icon-color: var(--van-danger-color);--van-address-list-edit-icon-size: 20px}.van-address-list{box-sizing:border-box;height:100%;padding:var(--van-address-list-padding)}.van-address-list__bottom{position:fixed;bottom:0;left:0;z-index:var(--van-address-list-add-button-z-index);box-sizing:border-box;width:100%;padding-left:var(--van-padding-md);padding-right:var(--van-padding-md);background-color:var(--van-background-color-light)}.van-address-list__add{height:40px;margin:5px 0}.van-address-list__disabled-text{padding:var(--van-address-list-disabled-text-padding);color:var(--van-address-list-disabled-text-color);font-size:var(--van-address-list-disabled-text-font-size);line-height:var(--van-address-list-disabled-text-line-height)}.van-address-item{padding:var(--van-address-list-item-padding);background-color:var(--van-background-color-light);border-radius:var(--van-border-radius-lg)}.van-address-item:not(:last-child){margin-bottom:var(--van-padding-sm)}.van-address-item__value{padding-right:44px}.van-address-item__name{display:flex;align-items:center;margin-bottom:var(--van-padding-xs);font-size:var(--van-font-size-lg);line-height:var(--van-line-height-lg)}.van-address-item__tag{flex:none;margin-left:var(--van-padding-xs);padding-top:0;padding-bottom:0;line-height:1.4em}.van-address-item__address{color:var(--van-address-list-item-text-color);font-size:var(--van-address-list-item-font-size);line-height:var(--van-address-list-item-line-height)}.van-address-item--disabled .van-address-item__name,.van-address-item--disabled .van-address-item__address{color:var(--van-address-list-item-disabled-text-color)}.van-address-item__edit{position:absolute;top:50%;right:var(--van-padding-md);color:var(--van-gray-6);font-size:var(--van-address-list-edit-icon-size);transform:translateY(-50%)}.van-address-item .van-cell{padding:0}.van-address-item .van-radio__label{margin-left:var(--van-padding-sm)}.van-address-item .van-radio__icon--checked .van-icon{background-color:var(--van-address-list-item-radio-icon-color);border-color:var(--van-address-list-item-radio-icon-color)}
+body{--van-address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;--van-address-list-disabled-text-color: var(--van-text-color-2);--van-address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0;--van-address-list-disabled-text-font-size: var(--van-font-size-md);--van-address-list-disabled-text-line-height: var(--van-line-height-md);--van-address-list-add-button-z-index: 999;--van-address-list-item-padding: var(--van-padding-sm);--van-address-list-item-text-color: var(--van-text-color);--van-address-list-item-disabled-text-color: var(--van-text-color-3);--van-address-list-item-font-size: 13px;--van-address-list-item-line-height: var(--van-line-height-sm);--van-address-list-radio-color: var(--van-primary-color);--van-address-list-edit-icon-size: 20px}.van-address-list{box-sizing:border-box;height:100%;padding:var(--van-address-list-padding)}.van-address-list__bottom{position:fixed;bottom:0;left:0;z-index:var(--van-address-list-add-button-z-index);box-sizing:border-box;width:100%;padding-left:var(--van-padding-md);padding-right:var(--van-padding-md);background-color:var(--van-background-2)}.van-address-list__add{height:40px;margin:5px 0}.van-address-list__disabled-text{padding:var(--van-address-list-disabled-text-padding);color:var(--van-address-list-disabled-text-color);font-size:var(--van-address-list-disabled-text-font-size);line-height:var(--van-address-list-disabled-text-line-height)}.van-address-item{padding:var(--van-address-list-item-padding);background-color:var(--van-background-2);border-radius:var(--van-radius-lg)}.van-address-item:not(:last-child){margin-bottom:var(--van-padding-sm)}.van-address-item__title{padding-right:44px}.van-address-item__name{display:flex;align-items:center;margin-bottom:var(--van-padding-xs);font-size:var(--van-font-size-lg);line-height:var(--van-line-height-lg)}.van-address-item__tag{flex:none;margin-left:var(--van-padding-xs);padding-top:0;padding-bottom:0;line-height:1.4em}.van-address-item__address{color:var(--van-address-list-item-text-color);font-size:var(--van-address-list-item-font-size);line-height:var(--van-address-list-item-line-height)}.van-address-item--disabled .van-address-item__name,.van-address-item--disabled .van-address-item__address{color:var(--van-address-list-item-disabled-text-color)}.van-address-item__edit{position:absolute;top:50%;right:var(--van-padding-md);color:var(--van-gray-6);font-size:var(--van-address-list-edit-icon-size);transform:translateY(-50%)}.van-address-item .van-cell{padding:0}.van-address-item .van-radio__label{margin-left:var(--van-padding-sm)}.van-address-item .van-radio__icon--checked .van-icon{background-color:var(--van-address-list-radio-color);border-color:var(--van-address-list-radio-color)}

package/es/address-list/index.d.ts

@@ -15,7 +15,7 @@ export declare const AddressList: import("../utils").WithInstall<import("vue").D
     };
     addButtonText: StringConstructor;
     defaultTagText: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "update:modelValue" | "add" | "edit" | "click-item" | "edit-disabled" | "select-disabled")[], "select" | "update:modelValue" | "add" | "edit" | "click-item" | "edit-disabled" | "select-disabled", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "update:modelValue" | "add" | "edit" | "clickItem" | "editDisabled" | "selectDisabled")[], "select" | "update:modelValue" | "add" | "edit" | "clickItem" | "editDisabled" | "selectDisabled", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     list: {
         type: import("vue").PropType<import("./AddressListItem").AddressListAddress[]>;
         default: () => never[];
@@ -37,9 +37,9 @@ export declare const AddressList: import("../utils").WithInstall<import("vue").D
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onEdit?: ((...args: any[]) => any) | undefined;
     onAdd?: ((...args: any[]) => any) | undefined;
-    "onClick-item"?: ((...args: any[]) => any) | undefined;
-    "onEdit-disabled"?: ((...args: any[]) => any) | undefined;
-    "onSelect-disabled"?: ((...args: any[]) => any) | undefined;
+    onClickItem?: ((...args: any[]) => any) | undefined;
+    onEditDisabled?: ((...args: any[]) => any) | undefined;
+    onSelectDisabled?: ((...args: any[]) => any) | undefined;
 }, {
     switchable: boolean;
     list: import("./AddressListItem").AddressListAddress[];

package/es/address-list/index.less

@@ -1,19 +1,17 @@
-@import './var.less';
-
-:root {
-  --van-address-list-padding: @address-list-padding;
-  --van-address-list-disabled-text-color: @address-list-disabled-text-color;
-  --van-address-list-disabled-text-padding: @address-list-disabled-text-padding;
-  --van-address-list-disabled-text-font-size: @address-list-disabled-text-font-size;
-  --van-address-list-disabled-text-line-height: @address-list-disabled-text-line-height;
-  --van-address-list-add-button-z-index: @address-list-add-button-z-index;
-  --van-address-list-item-padding: @address-list-item-padding;
-  --van-address-list-item-text-color: @address-list-item-text-color;
-  --van-address-list-item-disabled-text-color: @address-list-item-disabled-text-color;
-  --van-address-list-item-font-size: @address-list-item-font-size;
-  --van-address-list-item-line-height: @address-list-item-line-height;
-  --van-address-list-item-radio-icon-color: @address-list-item-radio-icon-color;
-  --van-address-list-edit-icon-size: @address-list-edit-icon-size;
+body {
+  --van-address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;
+  --van-address-list-disabled-text-color: var(--van-text-color-2);
+  --van-address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0;
+  --van-address-list-disabled-text-font-size: var(--van-font-size-md);
+  --van-address-list-disabled-text-line-height: var(--van-line-height-md);
+  --van-address-list-add-button-z-index: 999;
+  --van-address-list-item-padding: var(--van-padding-sm);
+  --van-address-list-item-text-color: var(--van-text-color);
+  --van-address-list-item-disabled-text-color: var(--van-text-color-3);
+  --van-address-list-item-font-size: 13px;
+  --van-address-list-item-line-height: var(--van-line-height-sm);
+  --van-address-list-radio-color: var(--van-primary-color);
+  --van-address-list-edit-icon-size: 20px;
 }
 
 .van-address-list {
@@ -30,7 +28,7 @@
     width: 100%;
     padding-left: var(--van-padding-md);
     padding-right: var(--van-padding-md);
-    background-color: var(--van-background-color-light);
+    background-color: var(--van-background-2);
   }
 
   &__add {
@@ -48,14 +46,14 @@
 
 .van-address-item {
   padding: var(--van-address-list-item-padding);
-  background-color: var(--van-background-color-light);
-  border-radius: var(--van-border-radius-lg);
+  background-color: var(--van-background-2);
+  border-radius: var(--van-radius-lg);
 
   &:not(:last-child) {
     margin-bottom: var(--van-padding-sm);
   }
 
-  &__value {
+  &__title {
     padding-right: 44px;
   }
 
@@ -106,7 +104,7 @@
   }
 
   .van-radio__icon--checked .van-icon {
-    background-color: var(--van-address-list-item-radio-icon-color);
-    border-color: var(--van-address-list-item-radio-icon-color);
+    background-color: var(--van-address-list-radio-color);
+    border-color: var(--van-address-list-radio-color);
   }
 }

package/es/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/es/area/Area.js

@@ -1,237 +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] || "";
+        codes.value = [];
       }
-      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);
-      }
-    };
-    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();
+    }, {
+      immediate: true
     });
-    watch(() => props.areaList, setValues, {
-      deep: true
-    });
-    watch(() => props.columnsNum, () => nextTick(setValues));
     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[];