refactor: reorganize all components (#8303)

src/address-edit/AddressEdit.tsx

@@ -1,4 +1,12 @@
-import { ref, watch, computed, nextTick, reactive, PropType } from 'vue';
+import {
+  ref,
+  watch,
+  computed,
+  nextTick,
+  reactive,
+  PropType,
+  defineComponent,
+} from 'vue';
 
 // Utils
 import { ComponentInstance, createNamespace, isObject } from '../utils';
@@ -16,11 +24,11 @@ import Toast from '../toast';
 import Button from '../button';
 import Dialog from '../dialog';
 import Switch from '../switch';
-import Detail, { AddressEditSearchItem } from './Detail';
+import AddressEditDetail, { AddressEditSearchItem } from './AddressEditDetail';
 
-const [createComponent, bem, t] = createNamespace('address-edit');
+const [name, bem, t] = createNamespace('address-edit');
 
-export type AddressInfo = {
+export type AddressEditInfo = {
   tel: string;
   name: string;
   city: string;
@@ -33,7 +41,7 @@ export type AddressInfo = {
   addressDetail: string;
 };
 
-const defaultData: AddressInfo = {
+const defaultData: AddressEditInfo = {
   name: '',
   tel: '',
   city: '',
@@ -50,7 +58,9 @@ function isPostal(value: string) {
   return /^\d{6}$/.test(value);
 }
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     areaList: Object as PropType<AreaList>,
     isSaving: Boolean,
@@ -85,7 +95,7 @@ export default createComponent({
       default: 200,
     },
     addressInfo: {
-      type: Object as PropType<Partial<AddressInfo>>,
+      type: Object as PropType<Partial<AddressEditInfo>>,
       default: () => ({ ...defaultData }),
     },
     telValidator: {
@@ -118,7 +128,7 @@ export default createComponent({
     const areaRef = ref<ComponentInstance>();
 
     const state = reactive({
-      data: {} as AddressInfo,
+      data: {} as AddressEditInfo,
       showAreaPopup: false,
       detailFocused: false,
       errorInfo: {
@@ -359,7 +369,7 @@ export default createComponent({
                 state.showAreaPopup = !disableArea;
               }}
             />
-            <Detail
+            <AddressEditDetail
               show={props.showDetail}
               value={data.addressDetail}
               focused={state.detailFocused}

src/address-edit/AddressEditDetail.tsx

@@ -1,4 +1,4 @@
-import { PropType, ref } from 'vue';
+import { PropType, ref, defineComponent } from 'vue';
 
 // Utils
 import { ComponentInstance, createNamespace } from '../utils';
@@ -8,7 +8,7 @@ import { isAndroid } from '../utils/validate/system';
 import Cell from '../cell';
 import Field from '../field';
 
-const [createComponent, bem, t] = createNamespace('address-edit-detail');
+const [name, bem, t] = createNamespace('address-edit-detail');
 const android = isAndroid();
 
 export type AddressEditSearchItem = {
@@ -16,7 +16,9 @@ export type AddressEditSearchItem = {
   address: string;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     show: Boolean,
     value: String,

src/address-edit/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _AddressEdit from './AddressEdit';
+
+const AddressEdit = installable(_AddressEdit);
+
+export default AddressEdit;
+export { AddressEdit };