refactor: reorganize all components (#8303)

src/contact-edit/ContactEdit.tsx

@@ -1,4 +1,4 @@
-import { watch, reactive, PropType } from 'vue';
+import { watch, reactive, PropType, defineComponent } from 'vue';
 
 // Utils
 import { createNamespace } from '../utils';
@@ -12,20 +12,22 @@ import Button from '../button';
 import Dialog from '../dialog';
 import Switch from '../switch';
 
-const [createComponent, bem, t] = createNamespace('contact-edit');
+const [name, bem, t] = createNamespace('contact-edit');
 
-export type ContactInfo = {
+export type ContactEditInfo = {
   tel: string;
   name: string;
   isDefault?: boolean;
 };
 
-const DEFAULT_CONTACT: ContactInfo = {
+const DEFAULT_CONTACT: ContactEditInfo = {
   tel: '',
   name: '',
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     isEdit: Boolean,
     isSaving: Boolean,
@@ -33,7 +35,7 @@ export default createComponent({
     showSetDefault: Boolean,
     setDefaultLabel: String,
     contactInfo: {
-      type: Object as PropType<ContactInfo>,
+      type: Object as PropType<ContactEditInfo>,
       default: () => ({ ...DEFAULT_CONTACT }),
     },
     telValidator: {

src/contact-edit/index.ts

@@ -0,0 +1,8 @@
+import { installable } from '../utils';
+import _ContactEdit from './ContactEdit';
+
+const ContactEdit = installable(_ContactEdit);
+
+export default ContactEdit;
+export { ContactEdit };
+export type { ContactEditInfo } from './ContactEdit';

src/contact-edit/test/index.spec.ts

@@ -1,5 +1,5 @@
 import { VueWrapper } from '@vue/test-utils';
-import ContactEdit, { ContactInfo } from '..';
+import ContactEdit, { ContactEditInfo } from '..';
 import { mount, later } from '../../../test';
 
 const contactInfo = {
@@ -49,14 +49,18 @@ test('should emit save event after submitting form', async () => {
   });
 
   await submitForm(wrapper);
-  expect(wrapper.emitted<[ContactInfo]>('save')![0][0]).toEqual(contactInfo);
+  expect(wrapper.emitted<[ContactEditInfo]>('save')![0][0]).toEqual(
+    contactInfo
+  );
 });
 
 test('should watch contact info', async () => {
   const wrapper = mount(ContactEdit);
   await wrapper.setProps({ contactInfo });
   await submitForm(wrapper);
-  expect(wrapper.emitted<[ContactInfo]>('save')![0][0]).toEqual(contactInfo);
+  expect(wrapper.emitted<[ContactEditInfo]>('save')![0][0]).toEqual(
+    contactInfo
+  );
 });
 
 test('should allow deleting contact', async () => {