refactor: reorganize all components (#8303)

src/image-preview/ImagePreview.tsx

@@ -6,6 +6,7 @@ import {
   reactive,
   onMounted,
   CSSProperties,
+  defineComponent,
 } from 'vue';
 
 // Utils
@@ -27,14 +28,16 @@ import Swipe, { SwipeToOptions } from '../swipe';
 import Popup, { PopupCloseIconPosition } from '../popup';
 import ImagePreviewItem from './ImagePreviewItem';
 
-const [createComponent, bem] = createNamespace('image-preview');
+const [name, bem] = createNamespace('image-preview');
 
 export type ScaleEventParams = {
   scale: number;
   index: number;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     show: Boolean,
     closeable: Boolean,

src/image-preview/index.tsx

@@ -1,5 +1,5 @@
-import { App, CSSProperties, Plugin, TeleportProps } from 'vue';
-import { ComponentInstance, inBrowser } from '../utils';
+import { App, CSSProperties, TeleportProps } from 'vue';
+import { ComponentInstance, inBrowser, installable } from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import { Interceptor } from '../utils/interceptor';
 import { PopupCloseIconPosition } from '../popup';
@@ -97,10 +97,10 @@ const ImagePreview = (
   return instance;
 };
 
-ImagePreview.Component = VanImagePreview;
+ImagePreview.Component = installable(VanImagePreview);
 
 ImagePreview.install = (app: App) => {
-  app.use((VanImagePreview as unknown) as Plugin);
+  app.use(installable(VanImagePreview));
 };
 
 export default ImagePreview;

src/image-preview/test/function.spec.ts

@@ -3,7 +3,7 @@ import ImagePreview from '..';
 import ImagePreviewComponent from '../ImagePreview';
 
 test('should expose ImagePreviewComponent in ImagePreview.Component', () => {
-  expect(ImagePreview.Component).toEqual(ImagePreviewComponent);
+  expect(ImagePreview.Component.name).toEqual('van-image-preview');
 });
 
 test('should register component to app', () => {