refactor: reorganize all components (#8303)

src/dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import { PropType, reactive } from 'vue';
+import { PropType, reactive, defineComponent } from 'vue';
 
 // Utils
 import { callInterceptor, Interceptor } from '../utils/interceptor';
@@ -12,7 +12,7 @@ import ActionBar from '../action-bar';
 import ActionBarButton from '../action-bar-button';
 import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
 
-const [createComponent, bem, t] = createNamespace('dialog');
+const [name, bem, t] = createNamespace('dialog');
 
 export type DialogTheme = 'default' | 'round-button';
 export type DialogAction = 'confirm' | 'cancel';
@@ -24,7 +24,9 @@ const popupKeys = [
   'closeOnPopstate',
 ] as const;
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     ...popupSharedProps,
     title: String,

src/dialog/index.tsx

@@ -1,5 +1,5 @@
-import { App, Plugin, CSSProperties, TeleportProps } from 'vue';
-import { inBrowser, ComponentInstance } from '../utils';
+import { App, CSSProperties, TeleportProps } from 'vue';
+import { inBrowser, ComponentInstance, installable } from '../utils';
 import { Interceptor } from '../utils/interceptor';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import VanDialog, {
@@ -120,10 +120,10 @@ Dialog.resetDefaultOptions = () => {
 };
 
 Dialog.install = (app: App) => {
-  app.use((VanDialog as unknown) as Plugin);
+  app.use(installable(VanDialog));
   app.config.globalProperties.$dialog = Dialog;
 };
 
-Dialog.Component = VanDialog;
+Dialog.Component = installable(VanDialog);
 
 export default Dialog;

src/dialog/test/funciton-call.spec.js

@@ -11,7 +11,7 @@ test('should update default options when calling setDefaultOptions method', () =
 });
 
 test('should expose Dialog component', () => {
-  expect(Dialog.Component).toEqual(DialogComponent);
+  expect(Dialog.Component.name).toEqual('van-dialog');
 });
 
 test('should register component to app', () => {