vant 3.2.6 → 3.3.1

package/lib/action-sheet/ActionSheet.js

@@ -18,28 +18,31 @@ var _shared = require("../popup/shared");
 // Utils
 // Components
 var [name, bem] = (0, _utils.createNamespace)('action-sheet');
-var popupKeys = [..._shared.popupSharedPropKeys, 'round', 'closeOnPopstate', 'safeAreaInsetBottom'];
+var actionSheetProps = (0, _utils.extend)({}, _shared.popupSharedProps, {
+  title: String,
+  round: _utils.truthProp,
+  actions: (0, _utils.makeArrayProp)(),
+  closeIcon: (0, _utils.makeStringProp)('cross'),
+  closeable: _utils.truthProp,
+  cancelText: String,
+  description: String,
+  closeOnPopstate: _utils.truthProp,
+  closeOnClickAction: Boolean,
+  safeAreaInsetBottom: _utils.truthProp
+});
+var popupInheritKeys = [..._shared.popupSharedPropKeys, 'round', 'closeOnPopstate', 'safeAreaInsetBottom'];
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: (0, _utils.extend)({}, _shared.popupSharedProps, {
-    title: String,
-    round: _utils.truthProp,
-    actions: (0, _utils.makeArrayProp)(),
-    closeIcon: (0, _utils.makeStringProp)('cross'),
-    closeable: _utils.truthProp,
-    cancelText: String,
-    description: String,
-    closeOnPopstate: _utils.truthProp,
-    closeOnClickAction: Boolean,
-    safeAreaInsetBottom: _utils.truthProp
-  }),
+  props: actionSheetProps,
   emits: ['select', 'cancel', 'update:show'],
 
-  setup(props, {
-    slots,
-    emit
-  }) {
+  setup(props, _ref) {
+    var {
+      slots,
+      emit
+    } = _ref;
+
     var updateShow = show => emit('update:show', show);
 
     var onCancel = () => {
@@ -53,7 +56,7 @@ var _default = (0, _vue.defineComponent)({
           "class": bem('header')
         }, [props.title, props.closeable && (0, _vue.createVNode)(_icon.Icon, {
           "name": props.closeIcon,
-          "class": bem('close'),
+          "class": [bem('close'), _utils.HAPTICS_FEEDBACK],
           "onClick": onCancel
         }, null)]);
       }
@@ -131,7 +134,7 @@ var _default = (0, _vue.defineComponent)({
       "class": bem(),
       "position": "bottom",
       "onUpdate:show": updateShow
-    }, (0, _utils.pick)(props, popupKeys)), {
+    }, (0, _utils.pick)(props, popupInheritKeys)), {
       default: () => [renderHeader(), renderDescription(), (0, _vue.createVNode)("div", {
         "class": bem('content')
       }, [props.actions.map(renderOption), slots.default == null ? void 0 : slots.default()]), renderCancel()]

package/lib/action-sheet/index.css

@@ -1 +1 @@
-:root{--van-action-sheet-max-height:80%;--van-action-sheet-header-height:48px;--van-action-sheet-header-font-size:var(--van-font-size-lg);--van-action-sheet-description-color:var(--van-gray-6);--van-action-sheet-description-font-size:var(--van-font-size-md);--van-action-sheet-description-line-height:var(--van-line-height-md);--van-action-sheet-item-background:var(--van-white);--van-action-sheet-item-font-size:var(--van-font-size-lg);--van-action-sheet-item-line-height:var(--van-line-height-lg);--van-action-sheet-item-text-color:var(--van-text-color);--van-action-sheet-item-disabled-text-color:var(--van-gray-5);--van-action-sheet-subname-color:var(--van-gray-6);--van-action-sheet-subname-font-size:var(--van-font-size-sm);--van-action-sheet-subname-line-height:var(--van-line-height-sm);--van-action-sheet-close-icon-size:22px;--van-action-sheet-close-icon-color:var(--van-gray-5);--van-action-sheet-close-icon-active-color:var(--van-gray-6);--van-action-sheet-close-icon-padding:0 var(--van-padding-md);--van-action-sheet-cancel-text-color:var(--van-gray-7);--van-action-sheet-cancel-padding-top:var(--van-padding-xs);--van-action-sheet-cancel-padding-color:var(--van-background-color);--van-action-sheet-loading-icon-size:22px}.van-action-sheet{display:flex;flex-direction:column;max-height:var(--van-action-sheet-max-height);overflow:hidden;color:var(--van-action-sheet-item-text-color)}.van-action-sheet__content{flex:1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.van-action-sheet__cancel,.van-action-sheet__item{display:block;width:100%;padding:14px var(--van-padding-md);font-size:var(--van-action-sheet-item-font-size);background:var(--van-action-sheet-item-background);border:none;cursor:pointer}.van-action-sheet__cancel:active,.van-action-sheet__item:active{background-color:var(--van-active-color)}.van-action-sheet__item{line-height:var(--van-action-sheet-item-line-height)}.van-action-sheet__item--disabled,.van-action-sheet__item--loading{color:var(--van-action-sheet-item-disabled-text-color)}.van-action-sheet__item--disabled:active,.van-action-sheet__item--loading:active{background-color:var(--van-action-sheet-item-background)}.van-action-sheet__item--disabled{cursor:not-allowed}.van-action-sheet__item--loading{cursor:default}.van-action-sheet__cancel{flex-shrink:0;box-sizing:border-box;color:var(--van-action-sheet-cancel-text-color)}.van-action-sheet__subname{margin-top:var(--van-padding-xs);color:var(--van-action-sheet-subname-color);font-size:var(--van-action-sheet-subname-font-size);line-height:var(--van-action-sheet-subname-line-height)}.van-action-sheet__gap{display:block;height:var(--van-action-sheet-cancel-padding-top);background:var(--van-action-sheet-cancel-padding-color)}.van-action-sheet__header{flex-shrink:0;font-weight:var(--van-font-weight-bold);font-size:var(--van-action-sheet-header-font-size);line-height:var(--van-action-sheet-header-height);text-align:center}.van-action-sheet__description{position:relative;flex-shrink:0;padding:20px var(--van-padding-md);color:var(--van-action-sheet-description-color);font-size:var(--van-action-sheet-description-font-size);line-height:var(--van-action-sheet-description-line-height);text-align:center}.van-action-sheet__description::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:var(--van-padding-md);bottom:0;left:var(--van-padding-md);border-bottom:1px solid var(--van-border-color);transform:scaleY(.5)}.van-action-sheet__loading-icon .van-loading__spinner{width:var(--van-action-sheet-loading-icon-size);height:var(--van-action-sheet-loading-icon-size)}.van-action-sheet__close{position:absolute;top:0;right:0;padding:var(--van-action-sheet-close-icon-padding);color:var(--van-action-sheet-close-icon-color);font-size:var(--van-action-sheet-close-icon-size);line-height:inherit}.van-action-sheet__close:active{color:var(--van-action-sheet-close-icon-active-color)}
+:root{--van-action-sheet-max-height:80%;--van-action-sheet-header-height:48px;--van-action-sheet-header-font-size:var(--van-font-size-lg);--van-action-sheet-description-color:var(--van-text-color-2);--van-action-sheet-description-font-size:var(--van-font-size-md);--van-action-sheet-description-line-height:var(--van-line-height-md);--van-action-sheet-item-background:var(--van-background-color-light);--van-action-sheet-item-font-size:var(--van-font-size-lg);--van-action-sheet-item-line-height:var(--van-line-height-lg);--van-action-sheet-item-text-color:var(--van-text-color);--van-action-sheet-item-disabled-text-color:var(--van-text-color-3);--van-action-sheet-subname-color:var(--van-text-color-2);--van-action-sheet-subname-font-size:var(--van-font-size-sm);--van-action-sheet-subname-line-height:var(--van-line-height-sm);--van-action-sheet-close-icon-size:22px;--van-action-sheet-close-icon-color:var(--van-gray-5);--van-action-sheet-close-icon-padding:0 var(--van-padding-md);--van-action-sheet-cancel-text-color:var(--van-gray-7);--van-action-sheet-cancel-padding-top:var(--van-padding-xs);--van-action-sheet-cancel-padding-color:var(--van-background-color);--van-action-sheet-loading-icon-size:22px}.van-action-sheet{display:flex;flex-direction:column;max-height:var(--van-action-sheet-max-height);overflow:hidden;color:var(--van-action-sheet-item-text-color)}.van-action-sheet__content{flex:1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.van-action-sheet__cancel,.van-action-sheet__item{display:block;width:100%;padding:14px var(--van-padding-md);font-size:var(--van-action-sheet-item-font-size);background:var(--van-action-sheet-item-background);border:none;cursor:pointer}.van-action-sheet__cancel:active,.van-action-sheet__item:active{background-color:var(--van-active-color)}.van-action-sheet__item{line-height:var(--van-action-sheet-item-line-height)}.van-action-sheet__item--disabled,.van-action-sheet__item--loading{color:var(--van-action-sheet-item-disabled-text-color)}.van-action-sheet__item--disabled:active,.van-action-sheet__item--loading:active{background-color:var(--van-action-sheet-item-background)}.van-action-sheet__item--disabled{cursor:not-allowed}.van-action-sheet__item--loading{cursor:default}.van-action-sheet__cancel{flex-shrink:0;box-sizing:border-box;color:var(--van-action-sheet-cancel-text-color)}.van-action-sheet__subname{margin-top:var(--van-padding-xs);color:var(--van-action-sheet-subname-color);font-size:var(--van-action-sheet-subname-font-size);line-height:var(--van-action-sheet-subname-line-height)}.van-action-sheet__gap{display:block;height:var(--van-action-sheet-cancel-padding-top);background:var(--van-action-sheet-cancel-padding-color)}.van-action-sheet__header{flex-shrink:0;font-weight:var(--van-font-weight-bold);font-size:var(--van-action-sheet-header-font-size);line-height:var(--van-action-sheet-header-height);text-align:center}.van-action-sheet__description{position:relative;flex-shrink:0;padding:20px var(--van-padding-md);color:var(--van-action-sheet-description-color);font-size:var(--van-action-sheet-description-font-size);line-height:var(--van-action-sheet-description-line-height);text-align:center}.van-action-sheet__description::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:var(--van-padding-md);bottom:0;left:var(--van-padding-md);border-bottom:1px solid var(--van-border-color);transform:scaleY(.5)}.van-action-sheet__loading-icon .van-loading__spinner{width:var(--van-action-sheet-loading-icon-size);height:var(--van-action-sheet-loading-icon-size)}.van-action-sheet__close{position:absolute;top:0;right:0;padding:var(--van-action-sheet-close-icon-padding);color:var(--van-action-sheet-close-icon-color);font-size:var(--van-action-sheet-close-icon-size);line-height:inherit}

package/lib/action-sheet/index.d.ts

@@ -119,4 +119,4 @@ export declare const ActionSheet: import("../utils").WithInstall<import("vue").D
     closeOnClickAction: boolean;
 }>>;
 export default ActionSheet;
-export type { ActionSheetAction } from './ActionSheet';
+export type { ActionSheetProps, ActionSheetAction } from './ActionSheet';

package/lib/action-sheet/index.less

@@ -18,7 +18,6 @@
   --van-action-sheet-subname-line-height: @action-sheet-subname-line-height;
   --van-action-sheet-close-icon-size: @action-sheet-close-icon-size;
   --van-action-sheet-close-icon-color: @action-sheet-close-icon-color;
-  --van-action-sheet-close-icon-active-color: @action-sheet-close-icon-active-color;
   --van-action-sheet-close-icon-padding: @action-sheet-close-icon-padding;
   --van-action-sheet-cancel-text-color: @action-sheet-cancel-text-color;
   --van-action-sheet-cancel-padding-top: @action-sheet-cancel-padding-top;
@@ -129,9 +128,5 @@
     color: var(--van-action-sheet-close-icon-color);
     font-size: var(--van-action-sheet-close-icon-size);
     line-height: inherit;
-
-    &:active {
-      color: var(--van-action-sheet-close-icon-active-color);
-    }
   }
 }

package/lib/action-sheet/var.less

@@ -3,20 +3,19 @@
 @action-sheet-max-height: 80%;
 @action-sheet-header-height: 48px;
 @action-sheet-header-font-size: var(--van-font-size-lg);
-@action-sheet-description-color: var(--van-gray-6);
+@action-sheet-description-color: var(--van-text-color-2);
 @action-sheet-description-font-size: var(--van-font-size-md);
 @action-sheet-description-line-height: var(--van-line-height-md);
-@action-sheet-item-background: var(--van-white);
+@action-sheet-item-background: var(--van-background-color-light);
 @action-sheet-item-font-size: var(--van-font-size-lg);
 @action-sheet-item-line-height: var(--van-line-height-lg);
 @action-sheet-item-text-color: var(--van-text-color);
-@action-sheet-item-disabled-text-color: var(--van-gray-5);
-@action-sheet-subname-color: var(--van-gray-6);
+@action-sheet-item-disabled-text-color: var(--van-text-color-3);
+@action-sheet-subname-color: var(--van-text-color-2);
 @action-sheet-subname-font-size: var(--van-font-size-sm);
 @action-sheet-subname-line-height: var(--van-line-height-sm);
 @action-sheet-close-icon-size: 22px;
 @action-sheet-close-icon-color: var(--van-gray-5);
-@action-sheet-close-icon-active-color: var(--van-gray-6);
 @action-sheet-close-icon-padding: 0 var(--van-padding-md);
 @action-sheet-cancel-text-color: var(--van-gray-7);
 @action-sheet-cancel-padding-top: var(--van-padding-xs);

package/lib/address-edit/AddressEdit.d.ts

@@ -2,7 +2,7 @@ import { PropType, ExtractPropTypes } from 'vue';
 import { isMobile } from '../utils';
 import { AreaList } from '../area';
 import type { AddressEditInfo, AddressEditSearchItem } from './types';
-declare const props: {
+declare const addressEditProps: {
     areaList: PropType<AreaList>;
     isSaving: BooleanConstructor;
     isDeleting: BooleanConstructor;
@@ -50,7 +50,7 @@ declare const props: {
         default: (value: string) => boolean;
     };
 };
-export declare type AddressEditProps = ExtractPropTypes<typeof props>;
+export declare type AddressEditProps = ExtractPropTypes<typeof addressEditProps>;
 declare const _default: import("vue").DefineComponent<{
     areaList: PropType<AreaList>;
     isSaving: BooleanConstructor;

package/lib/address-edit/AddressEdit.js

@@ -13,6 +13,8 @@ var _area = require("../area");
 
 var _cell = require("../cell");
 
+var _form = require("../form");
+
 var _field = require("../field");
 
 var _popup = require("../popup");
@@ -46,7 +48,7 @@ var DEFAULT_DATA = {
 
 var isPostal = value => /^\d{6}$/.test(value);
 
-var props = {
+var addressEditProps = {
   areaList: Object,
   isSaving: Boolean,
   isDeleting: Boolean,
@@ -82,26 +84,18 @@ var props = {
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props,
+  props: addressEditProps,
   emits: ['save', 'focus', 'delete', 'click-area', 'change-area', 'change-detail', 'select-search', 'change-default'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var areaRef = (0, _vue.ref)();
-    var state = (0, _vue.reactive)({
-      data: {},
-      showAreaPopup: false,
-      detailFocused: false,
-      errorInfo: {
-        tel: '',
-        name: '',
-        areaCode: '',
-        postalCode: '',
-        addressDetail: ''
-      }
-    });
+    var data = (0, _vue.reactive)({});
+    var showAreaPopup = (0, _vue.ref)(false);
+    var detailFocused = (0, _vue.ref)(false);
     var areaListLoaded = (0, _vue.computed)(() => (0, _utils.isObject)(props.areaList) && Object.keys(props.areaList).length);
     var areaText = (0, _vue.computed)(() => {
       var {
@@ -110,7 +104,7 @@ var _default = (0, _vue.defineComponent)({
         city,
         county,
         areaCode
-      } = state.data;
+      } = data;
 
       if (areaCode) {
         var arr = [country, province, city, county];
@@ -128,7 +122,7 @@ var _default = (0, _vue.defineComponent)({
     var hideBottomFields = (0, _vue.computed)(() => {
       var _props$searchResult;
 
-      return ((_props$searchResult = props.searchResult) == null ? void 0 : _props$searchResult.length) && state.detailFocused;
+      return ((_props$searchResult = props.searchResult) == null ? void 0 : _props$searchResult.length) && detailFocused.value;
     });
 
     var assignAreaValues = () => {
@@ -136,77 +130,59 @@ var _default = (0, _vue.defineComponent)({
         var detail = areaRef.value.getArea();
         detail.areaCode = detail.code;
         delete detail.code;
-        (0, _utils.extend)(state.data, detail);
+        (0, _utils.extend)(data, detail);
       }
     };
 
     var onFocus = key => {
-      state.errorInfo[key] = '';
-      state.detailFocused = key === 'addressDetail';
+      detailFocused.value = key === 'addressDetail';
       emit('focus', key);
     };
 
-    var getErrorMessage = key => {
-      var value = String(state.data[key] || '').trim();
-
-      if (props.validator) {
-        var message = props.validator(key, value);
-
-        if (message) {
-          return message;
-        }
-      }
-
-      switch (key) {
-        case 'name':
-          return value ? '' : t('nameEmpty');
-
-        case 'tel':
-          return props.telValidator(value) ? '' : t('telInvalid');
-
-        case 'areaCode':
-          return value ? '' : t('areaEmpty');
-
-        case 'addressDetail':
-          return value ? '' : t('addressEmpty');
-
-        case 'postalCode':
-          return value && !props.postalValidator(value) ? t('postalEmpty') : '';
-      }
-    };
-
-    var onSave = () => {
-      var items = ['name', 'tel'];
-
-      if (props.showArea) {
-        items.push('areaCode');
-      }
+    var rules = (0, _vue.computed)(() => {
+      var {
+        validator,
+        telValidator,
+        postalValidator
+      } = props;
 
-      if (props.showDetail) {
-        items.push('addressDetail');
-      }
+      var makeRule = (name, emptyMessage) => ({
+        validator: value => {
+          if (validator) {
+            var message = validator(name, value);
 
-      if (props.showPostal) {
-        items.push('postalCode');
-      }
+            if (message) {
+              return message;
+            }
+          }
 
-      var isValid = items.every(item => {
-        var msg = getErrorMessage(item);
+          if (!value) {
+            return emptyMessage;
+          }
 
-        if (msg) {
-          state.errorInfo[item] = msg;
+          return true;
         }
-
-        return !msg;
       });
 
-      if (isValid && !props.isSaving) {
-        emit('save', state.data);
-      }
-    };
+      return {
+        name: [makeRule('name', t('nameEmpty'))],
+        tel: [makeRule('tel', t('telInvalid')), {
+          validator: telValidator,
+          message: t('telInvalid')
+        }],
+        areaCode: [makeRule('areaCode', t('areaEmpty'))],
+        addressDetail: [makeRule('addressDetail', t('addressEmpty'))],
+        postalCode: [makeRule('addressDetail', t('postalEmpty')), {
+          validator: postalValidator,
+          message: t('postalEmpty')
+        }]
+      };
+    });
+
+    var onSave = () => emit('save', data);
 
     var onChangeDetail = val => {
-      state.data.addressDetail = val;
+      data.addressDetail = val;
       emit('change-detail', val);
     };
 
@@ -215,22 +191,25 @@ var _default = (0, _vue.defineComponent)({
 
       if (values.some(value => !value.code)) {
         (0, _toast.Toast)(t('areaEmpty'));
-        return;
+      } else {
+        showAreaPopup.value = false;
+        assignAreaValues();
+        emit('change-area', values);
       }
-
-      state.showAreaPopup = false;
-      assignAreaValues();
-      emit('change-area', values);
     };
 
-    var onDelete = () => emit('delete', state.data); // get values of area component
+    var onDelete = () => emit('delete', data); // get values of area component
+
 
+    var getArea = () => {
+      var _areaRef$value;
 
-    var getArea = () => areaRef.value ? areaRef.value.getValues() : []; // set area code to area component
+      return ((_areaRef$value = areaRef.value) == null ? void 0 : _areaRef$value.getValues()) || [];
+    }; // set area code to area component
 
 
     var setAreaCode = code => {
-      state.data.areaCode = code || '';
+      data.areaCode = code || '';
 
       if (code) {
         (0, _vue.nextTick)(assignAreaValues);
@@ -240,20 +219,20 @@ var _default = (0, _vue.defineComponent)({
     var onDetailBlur = () => {
       // await for click search event
       setTimeout(() => {
-        state.detailFocused = false;
+        detailFocused.value = false;
       });
     };
 
     var setAddressDetail = value => {
-      state.data.addressDetail = value;
+      data.addressDetail = value;
     };
 
     var renderSetDefaultCell = () => {
       if (props.showSetDefault) {
         var _slots = {
           'right-icon': () => (0, _vue.createVNode)(_switch.Switch, {
-            "modelValue": state.data.isDefault,
-            "onUpdate:modelValue": $event => state.data.isDefault = $event,
+            "modelValue": data.isDefault,
+            "onUpdate:modelValue": $event => data.isDefault = $event,
             "size": "24",
             "onChange": event => emit('change-default', event)
           }, null)
@@ -264,8 +243,6 @@ var _default = (0, _vue.defineComponent)({
           "class": bem('default')
         }, _slots), [[_vue.vShow, !hideBottomFields.value]]);
       }
-
-      return null;
     };
 
     (0, _useExpose.useExpose)({
@@ -273,115 +250,114 @@ var _default = (0, _vue.defineComponent)({
       setAreaCode,
       setAddressDetail
     });
-    (0, _vue.watch)(() => props.areaList, () => setAreaCode(state.data.areaCode));
+    (0, _vue.watch)(() => props.areaList, () => setAreaCode(data.areaCode));
     (0, _vue.watch)(() => props.addressInfo, value => {
-      state.data = (0, _utils.extend)({}, DEFAULT_DATA, value);
+      (0, _utils.extend)(data, DEFAULT_DATA, value);
       setAreaCode(value.areaCode);
     }, {
       deep: true,
       immediate: true
     });
     return () => {
-      var {
-        data,
-        errorInfo
-      } = state;
       var {
         disableArea
       } = props;
-      return (0, _vue.createVNode)("div", {
-        "class": bem()
-      }, [(0, _vue.createVNode)("div", {
-        "class": bem('fields')
-      }, [(0, _vue.createVNode)(_field.Field, {
-        "modelValue": data.name,
-        "onUpdate:modelValue": $event => data.name = $event,
-        "clearable": true,
-        "label": t('name'),
-        "placeholder": t('name'),
-        "errorMessage": errorInfo.name,
-        "onFocus": () => onFocus('name')
-      }, null), (0, _vue.createVNode)(_field.Field, {
-        "modelValue": data.tel,
-        "onUpdate:modelValue": $event => data.tel = $event,
-        "clearable": true,
-        "type": "tel",
-        "label": t('tel'),
-        "maxlength": props.telMaxlength,
-        "placeholder": t('tel'),
-        "errorMessage": errorInfo.tel,
-        "onFocus": () => onFocus('tel')
-      }, null), (0, _vue.withDirectives)((0, _vue.createVNode)(_field.Field, {
-        "readonly": true,
-        "label": t('area'),
-        "is-link": !disableArea,
-        "modelValue": areaText.value,
-        "placeholder": props.areaPlaceholder || t('area'),
-        "errorMessage": errorInfo.areaCode,
-        "onFocus": () => onFocus('areaCode'),
-        "onClick": () => {
-          emit('click-area');
-          state.showAreaPopup = !disableArea;
-        }
-      }, null), [[_vue.vShow, props.showArea]]), (0, _vue.createVNode)(_AddressEditDetail.default, {
-        "show": props.showDetail,
-        "value": data.addressDetail,
-        "focused": state.detailFocused,
-        "detailRows": props.detailRows,
-        "errorMessage": errorInfo.addressDetail,
-        "searchResult": props.searchResult,
-        "detailMaxlength": props.detailMaxlength,
-        "showSearchResult": props.showSearchResult,
-        "onBlur": onDetailBlur,
-        "onFocus": () => onFocus('addressDetail'),
-        "onInput": onChangeDetail,
-        "onSelect-search": event => emit('select-search', event)
-      }, null), props.showPostal && (0, _vue.withDirectives)((0, _vue.createVNode)(_field.Field, {
-        "modelValue": data.postalCode,
-        "onUpdate:modelValue": $event => data.postalCode = $event,
-        "type": "tel",
-        "label": t('postal'),
-        "maxlength": "6",
-        "placeholder": t('postal'),
-        "errorMessage": errorInfo.postalCode,
-        "onFocus": () => onFocus('postalCode')
-      }, null), [[_vue.vShow, !hideBottomFields.value]]), slots.default == null ? void 0 : slots.default()]), renderSetDefaultCell(), (0, _vue.withDirectives)((0, _vue.createVNode)("div", {
-        "class": bem('buttons')
-      }, [(0, _vue.createVNode)(_button.Button, {
-        "block": true,
-        "round": true,
-        "type": "danger",
-        "text": props.saveButtonText || t('save'),
-        "class": bem('button'),
-        "loading": props.isSaving,
-        "onClick": onSave
-      }, null), props.showDelete && (0, _vue.createVNode)(_button.Button, {
-        "block": true,
-        "round": true,
-        "class": bem('button'),
-        "loading": props.isDeleting,
-        "text": props.deleteButtonText || t('delete'),
-        "onClick": onDelete
-      }, null)]), [[_vue.vShow, !hideBottomFields.value]]), (0, _vue.createVNode)(_popup.Popup, {
-        "show": state.showAreaPopup,
-        "onUpdate:show": $event => state.showAreaPopup = $event,
-        "round": true,
-        "teleport": "body",
-        "position": "bottom",
-        "lazyRender": false
+      return (0, _vue.createVNode)(_form.Form, {
+        "class": bem(),
+        "onSubmit": onSave
       }, {
-        default: () => [(0, _vue.createVNode)(_area.Area, {
-          "ref": areaRef,
-          "value": data.areaCode,
-          "loading": !areaListLoaded.value,
-          "areaList": props.areaList,
-          "columnsPlaceholder": props.areaColumnsPlaceholder,
-          "onConfirm": onAreaConfirm,
-          "onCancel": () => {
-            state.showAreaPopup = false;
+        default: () => [(0, _vue.createVNode)("div", {
+          "class": bem('fields')
+        }, [(0, _vue.createVNode)(_field.Field, {
+          "modelValue": data.name,
+          "onUpdate:modelValue": $event => data.name = $event,
+          "clearable": true,
+          "label": t('name'),
+          "rules": rules.value.name,
+          "placeholder": t('name'),
+          "onFocus": () => onFocus('name')
+        }, null), (0, _vue.createVNode)(_field.Field, {
+          "modelValue": data.tel,
+          "onUpdate:modelValue": $event => data.tel = $event,
+          "clearable": true,
+          "type": "tel",
+          "label": t('tel'),
+          "rules": rules.value.tel,
+          "maxlength": props.telMaxlength,
+          "placeholder": t('tel'),
+          "onFocus": () => onFocus('tel')
+        }, null), (0, _vue.withDirectives)((0, _vue.createVNode)(_field.Field, {
+          "readonly": true,
+          "label": t('area'),
+          "is-link": !disableArea,
+          "modelValue": areaText.value,
+          "rules": rules.value.areaCode,
+          "placeholder": props.areaPlaceholder || t('area'),
+          "onFocus": () => onFocus('areaCode'),
+          "onClick": () => {
+            emit('click-area');
+            showAreaPopup.value = !disableArea;
           }
-        }, null)]
-      })]);
+        }, null), [[_vue.vShow, props.showArea]]), (0, _vue.createVNode)(_AddressEditDetail.default, {
+          "show": props.showDetail,
+          "rows": props.detailRows,
+          "rules": rules.value.addressDetail,
+          "value": data.addressDetail,
+          "focused": detailFocused.value,
+          "maxlength": props.detailMaxlength,
+          "searchResult": props.searchResult,
+          "showSearchResult": props.showSearchResult,
+          "onBlur": onDetailBlur,
+          "onFocus": () => onFocus('addressDetail'),
+          "onInput": onChangeDetail,
+          "onSelect-search": event => emit('select-search', event)
+        }, null), props.showPostal && (0, _vue.withDirectives)((0, _vue.createVNode)(_field.Field, {
+          "modelValue": data.postalCode,
+          "onUpdate:modelValue": $event => data.postalCode = $event,
+          "type": "tel",
+          "rules": rules.value.postalCode,
+          "label": t('postal'),
+          "maxlength": "6",
+          "placeholder": t('postal'),
+          "onFocus": () => onFocus('postalCode')
+        }, null), [[_vue.vShow, !hideBottomFields.value]]), slots.default == null ? void 0 : slots.default()]), renderSetDefaultCell(), (0, _vue.withDirectives)((0, _vue.createVNode)("div", {
+          "class": bem('buttons')
+        }, [(0, _vue.createVNode)(_button.Button, {
+          "block": true,
+          "round": true,
+          "type": "danger",
+          "text": props.saveButtonText || t('save'),
+          "class": bem('button'),
+          "loading": props.isSaving,
+          "nativeType": "submit"
+        }, null), props.showDelete && (0, _vue.createVNode)(_button.Button, {
+          "block": true,
+          "round": true,
+          "class": bem('button'),
+          "loading": props.isDeleting,
+          "text": props.deleteButtonText || t('delete'),
+          "onClick": onDelete
+        }, null)]), [[_vue.vShow, !hideBottomFields.value]]), (0, _vue.createVNode)(_popup.Popup, {
+          "show": showAreaPopup.value,
+          "onUpdate:show": $event => showAreaPopup.value = $event,
+          "round": true,
+          "teleport": "body",
+          "position": "bottom",
+          "lazyRender": false
+        }, {
+          default: () => [(0, _vue.createVNode)(_area.Area, {
+            "ref": areaRef,
+            "value": data.areaCode,
+            "loading": !areaListLoaded.value,
+            "areaList": props.areaList,
+            "columnsPlaceholder": props.areaColumnsPlaceholder,
+            "onConfirm": onAreaConfirm,
+            "onCancel": () => {
+              showAreaPopup.value = false;
+            }
+          }, null)]
+        })]
+      });
     };
   }
 

package/lib/address-edit/AddressEditDetail.d.ts

@@ -1,22 +1,23 @@
 import { PropType } from 'vue';
 import type { AddressEditSearchItem } from './types';
+import type { FieldRule } from '../field/types';
 declare const _default: import("vue").DefineComponent<{
     show: BooleanConstructor;
+    rows: (NumberConstructor | StringConstructor)[];
     value: StringConstructor;
+    rules: PropType<FieldRule[]>;
     focused: BooleanConstructor;
-    detailRows: (NumberConstructor | StringConstructor)[];
+    maxlength: (NumberConstructor | StringConstructor)[];
     searchResult: PropType<AddressEditSearchItem[]>;
-    errorMessage: StringConstructor;
-    detailMaxlength: (NumberConstructor | StringConstructor)[];
     showSearchResult: BooleanConstructor;
 }, () => JSX.Element | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "focus" | "blur" | "select-search")[], "input" | "focus" | "blur" | "select-search", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
     show?: unknown;
+    rows?: unknown;
     value?: unknown;
+    rules?: unknown;
     focused?: unknown;
-    detailRows?: unknown;
+    maxlength?: unknown;
     searchResult?: unknown;
-    errorMessage?: unknown;
-    detailMaxlength?: unknown;
     showSearchResult?: unknown;
 } & {
     focused: boolean;
@@ -24,10 +25,10 @@ declare const _default: import("vue").DefineComponent<{
     showSearchResult: boolean;
 } & {
     value?: string | undefined;
-    errorMessage?: string | undefined;
+    maxlength?: string | number | undefined;
+    rows?: string | number | undefined;
+    rules?: FieldRule[] | undefined;
     searchResult?: AddressEditSearchItem[] | undefined;
-    detailRows?: string | number | undefined;
-    detailMaxlength?: string | number | undefined;
 }> & {
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;