[breaking change] AddressEdit: use camelcase data (#1644)

youzan · Aug 17, 2018 · 05c4804 · 05c4804
1 parent abd4819
commit 05c4804
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 61 deletions.
diff --git a/packages/address-edit/en-US.md b/packages/address-edit/en-US.md
@@ -103,10 +103,10 @@ export default {
 | province | Province | `String` |
 | city | City | `String` |
 | county | County | `String` |
-| address_detail | Detailed Address | `String` |
-| area_code | Area code | `String` |
-| postal_code | Postal code | `String` |
-| is_default | Is default address | `Boolean` |
+| addressDetail | Detailed Address | `String` |
+| areaCode | Area code | `String` |
+| postalCode | Postal code | `String` |
+| isDefault | Is default address | `Boolean` |
 
 #### searchResult Data Structure
 | key | Description | Type |

diff --git a/packages/address-edit/index.vue b/packages/address-edit/index.vue
@@ -26,32 +26,32 @@
       />
       <address-edit-detail
         :focused="detailFocused"
-        :value="data.address_detail"
-        :error="errorInfo.address_detail"
+        :value="data.addressDetail"
+        :error="errorInfo.addressDetail"
         :search-result="searchResult"
         :show-search-result="showSearchResult"
-        @focus="onFocus('address_detail')"
+        @focus="onFocus('addressDetail')"
         @blur="detailFocused = false"
         @input="onChangeDetail"
         @select-search="$emit('select-search', $event)"
       />
       <field
         v-if="showPostal"
         v-show="!hideBottomFields"
-        v-model="data.postal_code"
+        v-model="data.postalCode"
         type="tel"
         maxlength="6"
         class="van-hairline--top"
         :label="$t('postal')"
         :placeholder="$t('postal')"
-        :error="errorInfo.postal_code"
-        @focus="onFocus('postal_code')"
+        :error="errorInfo.postalCode"
+        @focus="onFocus('postalCode')"
       />
       <slot />
       <switch-cell
         v-if="showSetDefault"
         v-show="!hideBottomFields"
-        v-model="data.is_default"
+        v-model="data.isDefault"
         :title="$t('defaultAddress')"
       />
     </cell-group>
@@ -69,7 +69,7 @@
       <van-area
         ref="area"
         :loading="!areaListLoaded"
-        :value="data.area_code"
+        :value="data.areaCode"
         :area-list="areaList"
         @confirm="onAreaConfirm"
         @cancel="showArea = false"
@@ -98,10 +98,10 @@ const defaultData = {
   province: '',
   city: '',
   county: '',
-  area_code: '',
-  postal_code: '',
-  address_detail: '',
-  is_default: false
+  areaCode: '',
+  postalCode: '',
+  addressDetail: '',
+  isDefault: false
 };
 
 export default create({
@@ -148,8 +148,8 @@ export default create({
       errorInfo: {
         tel: false,
         name: false,
-        postal_code: false,
-        address_detail: false
+        postalCode: false,
+        addressDetail: false
       }
     };
   },
@@ -169,8 +169,8 @@ export default create({
     },
 
     areaText() {
-      const { province, city, county, area_code } = this.data;
-      return province && city && county && area_code
+      const { province, city, county, areaCode } = this.data;
+      return province && city && county && areaCode
         ? `${province} ${city} ${county}`
         : '';
     }
@@ -184,32 +184,32 @@ export default create({
           ...val
         };
 
-        this.setAreaCode(val.area_code);
+        this.setAreaCode(val.areaCode);
       },
       deep: true,
       immediate: true
     },
 
     areaList() {
-      this.setAreaCode(this.data.area_code);
+      this.setAreaCode(this.data.areaCode);
     }
   },
 
   methods: {
     onFocus(key) {
       this.errorInfo[key] = false;
-      this.detailFocused = key === 'address_detail';
+      this.detailFocused = key === 'addressDetail';
       this.$emit('focus', key);
     },
 
     onChangeDetail(val) {
-      this.data.address_detail = val;
+      this.data.addressDetail = val;
       this.$emit('change-detail', val);
     },
 
     onAreaConfirm(values) {
       this.showArea = false;
-      this.data.area_code = values[2].code;
+      this.data.areaCode = values[2].code;
       this.assignAreaValues(values);
       this.$emit('change-area', values);
     },
@@ -223,10 +223,10 @@ export default create({
     },
 
     onSave() {
-      const items = ['name', 'tel', 'area_code', 'address_detail'];
+      const items = ['name', 'tel', 'areaCode', 'addressDetail'];
 
       if (this.showPostal) {
-        items.push('postal_code');
+        items.push('postalCode');
       }
 
       const isValid = items.every(item => {
@@ -252,11 +252,11 @@ export default create({
           return value ? '' : $t('nameEmpty');
         case 'tel':
           return this.telValidator(value) ? '' : $t('telInvalid');
-        case 'area_code':
+        case 'areaCode':
           return value ? '' : $t('areaEmpty');
-        case 'address_detail':
+        case 'addressDetail':
           return value ? '' : $t('addressEmpty');
-        case 'postal_code':
+        case 'postalCode':
           return value && !/^\d{6}$/.test(value) ? $t('postalEmpty') : '';
       }
     },
@@ -280,7 +280,7 @@ export default create({
 
     // set area code to area component
     setAreaCode(code) {
-      this.data.area_code = code || '';
+      this.data.areaCode = code || '';
       this.$nextTick(() => {
         const { area } = this.$refs;
         if (area) {

diff --git a/packages/address-edit/test/index.spec.js b/packages/address-edit/test/index.spec.js
@@ -12,10 +12,10 @@ const addressInfo = {
   province: '北京市',
   city: '北京市',
   county: '朝阳区',
-  address_detail: '详细地址',
-  area_code: '110101',
-  postal_code: '10000',
-  is_default: true
+  addressDetail: '详细地址',
+  areaCode: '110101',
+  postalCode: '10000',
+  isDefault: true
 };
 
 const createComponent = () => {
@@ -77,47 +77,47 @@ it('valid tel', () => {
   expect(errorInfo.tel).toBeFalsy();
 });
 
-it('valid area_code', () => {
+it('valid areaCode', () => {
   const { data, button, errorInfo } = createComponent();
-  // area_code empty
-  data.area_code = '';
+  // areaCode empty
+  data.areaCode = '';
   button.trigger('click');
-  expect(errorInfo.area_code).toBeTruthy();
+  expect(errorInfo.areaCode).toBeTruthy();
 
-  // area_code invalid
-  data.area_code = '-1';
+  // areaCode invalid
+  data.areaCode = '-1';
   button.trigger('click');
-  expect(errorInfo.area_code).toBeTruthy();
+  expect(errorInfo.areaCode).toBeTruthy();
 });
 
-it('valid address_detail', () => {
+it('valid addressDetail', () => {
   const { data, field, button, errorInfo } = createComponent();
-  data.address_detail = '';
+  data.addressDetail = '';
   button.trigger('click');
-  expect(errorInfo.address_detail).toBeTruthy();
+  expect(errorInfo.addressDetail).toBeTruthy();
   field.at(3).trigger('focus');
-  expect(errorInfo.address_detail).toBeFalsy();
+  expect(errorInfo.addressDetail).toBeFalsy();
 });
 
 test('valid postal code', () => {
   const { vm, data, field, button, errorInfo } = createComponent();
 
-  // postal_code invalid
-  data.postal_code = '123';
+  // postalCode invalid
+  data.postalCode = '123';
   button.trigger('click');
-  expect(errorInfo.postal_code).toBeTruthy();
+  expect(errorInfo.postalCode).toBeTruthy();
   field.at(4).trigger('focus');
-  expect(errorInfo.postal_code).toBeFalsy();
+  expect(errorInfo.postalCode).toBeFalsy();
 
   // valid result
-  data.postal_code = '123456';
+  data.postalCode = '123456';
   button.trigger('click');
 
-  // not show postal_code
-  data.postal_code = '156';
+  // not show postalCode
+  data.postalCode = '156';
   vm.showPostal = false;
   button.trigger('click');
-  expect(errorInfo.postal_code).toBeFalsy();
+  expect(errorInfo.postalCode).toBeFalsy();
 });
 
 test('select area', () => {
@@ -137,7 +137,7 @@ test('select area', () => {
   expect(data.province).toEqual('北京市');
   expect(data.city).toEqual('北京市');
   expect(data.county).toEqual('朝阳区');
-  expect(data.area_code).toEqual('123456');
+  expect(data.areaCode).toEqual('123456');
 });
 
 test('on change detail', () => {
@@ -169,7 +169,7 @@ test('set/get area code', async() => {
   wrapper.vm.setAreaCode('110102');
 
   await later(50);
-  expect(wrapper.vm.data.area_code).toEqual('110102');
+  expect(wrapper.vm.data.areaCode).toEqual('110102');
   expect(wrapper.vm.getArea()).toEqual([
     { code: '110000', name: '北京市' },
     { code: '110100', name: '北京市' },
@@ -186,7 +186,7 @@ test('watch area code', async() => {
     propsData: {
       areaList: {},
       addressInfo: {
-        area_code: '110101'
+        areaCode: '110101'
       }
     }
   });

diff --git a/packages/address-edit/zh-CN.md b/packages/address-edit/zh-CN.md
@@ -105,10 +105,10 @@ export default {
 | province | 省份 | `String` |
 | city | 城市 | `String` |
 | county | 区县 | `String` |
-| address_detail | 详细地址 | `String` |
-| area_code | 地区编码，通过省市区选择获取 | `String` |
-| postal_code | 邮政编码 | `String` |
-| is_default | 是否为默认地址 | `Boolean` |
+| addressDetail | 详细地址 | `String` |
+| areaCode | 地区编码，通过省市区选择获取 | `String` |
+| postalCode | 邮政编码 | `String` |
+| isDefault | 是否为默认地址 | `Boolean` |
 
 #### searchResult 数据格式