refactor: reorganize all components (#8303)

src/toast/Toast.tsx

@@ -1,4 +1,11 @@
-import { watch, PropType, onMounted, onUnmounted, CSSProperties } from 'vue';
+import {
+  watch,
+  PropType,
+  onMounted,
+  onUnmounted,
+  CSSProperties,
+  defineComponent,
+} from 'vue';
 
 // Utils
 import { createNamespace, isDef, UnknownProp } from '../utils';
@@ -9,12 +16,14 @@ import Icon from '../icon';
 import Popup from '../popup';
 import Loading, { LoadingType } from '../loading';
 
-const [createComponent, bem] = createNamespace('toast');
+const [name, bem] = createNamespace('toast');
 
 export type ToastType = 'text' | 'loading' | 'success' | 'fail' | 'html';
 export type ToastPosition = 'top' | 'middle' | 'bottom';
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     icon: String,
     show: Boolean,

src/toast/index.tsx

@@ -1,5 +1,5 @@
-import { ref, App, Plugin, TeleportProps, getCurrentInstance } from 'vue';
-import { isObject, inBrowser, ComponentInstance } from '../utils';
+import { ref, App, TeleportProps, getCurrentInstance } from 'vue';
+import { isObject, inBrowser, installable, ComponentInstance } from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import VanToast, { ToastType, ToastPosition } from './Toast';
 import type { LoadingType } from '../loading';
@@ -179,7 +179,7 @@ Toast.allowMultiple = (value = true) => {
 };
 
 Toast.install = (app: App) => {
-  app.use((VanToast as unknown) as Plugin);
+  app.use(installable(VanToast));
   app.config.globalProperties.$toast = Toast;
 };