types: fix $toast、$dialog、$notify typing (#9556)

* types: fix $toast、$dialog、$notify typing

* types: organize

packages/vant/src/dialog/Dialog.tsx

@@ -21,12 +21,15 @@ import { Button } from '../button';
 import { ActionBar } from '../action-bar';
 import { ActionBarButton } from '../action-bar-button';
 
-const [name, bem, t] = createNamespace('dialog');
+// Types
+import type {
+  DialogTheme,
+  DialogAction,
+  DialogMessage,
+  DialogMessageAlign,
+} from './types';
 
-export type DialogTheme = 'default' | 'round-button';
+const [name, bem, t] = createNamespace('dialog');
-export type DialogAction = 'confirm' | 'cancel';
-export type DialogMessage = string | (() => JSX.Element);
-export type DialogMessageAlign = 'left' | 'center' | 'right';
 
 const popupKeys = [
   ...popupSharedPropKeys,

packages/vant/src/dialog/function-call.tsx

@@ -1,43 +1,8 @@
-import { App, CSSProperties, TeleportProps } from 'vue';
+import { App } from 'vue';
-import {
+import { extend, inBrowser, withInstall, ComponentInstance } from '../utils';
-  extend,
-  inBrowser,
-  withInstall,
-  Interceptor,
-  ComponentInstance,
-} from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
-import VanDialog, {
+import VanDialog from './Dialog';
-  DialogTheme,
+import type { DialogAction, DialogOptions } from './types';
-  DialogAction,
-  DialogMessage,
-  DialogMessageAlign,
-} from './Dialog';
-
-export type DialogOptions = {
-  title?: string;
-  width?: string | number;
-  theme?: DialogTheme;
-  message?: DialogMessage;
-  overlay?: boolean;
-  teleport?: TeleportProps['to'];
-  className?: unknown;
-  allowHtml?: boolean;
-  lockScroll?: boolean;
-  transition?: string;
-  beforeClose?: Interceptor;
-  messageAlign?: DialogMessageAlign;
-  overlayClass?: string;
-  overlayStyle?: CSSProperties;
-  closeOnPopstate?: boolean;
-  cancelButtonText?: string;
-  showCancelButton?: boolean;
-  showConfirmButton?: boolean;
-  cancelButtonColor?: string;
-  confirmButtonText?: string;
-  confirmButtonColor?: string;
-  closeOnClickOverlay?: boolean;
-};
 
 let instance: ComponentInstance;
 

packages/vant/src/dialog/index.ts

@@ -1,6 +1,10 @@
-import { Dialog, DialogOptions } from './function-call';
+import { Dialog } from './function-call';
-import type { DialogTheme, DialogMessage, DialogMessageAlign } from './Dialog';
 
 export default Dialog;
 export { Dialog };
-export type { DialogTheme, DialogMessage, DialogOptions, DialogMessageAlign };
+export type {
+  DialogTheme,
+  DialogMessage,
+  DialogOptions,
+  DialogMessageAlign,
+} from './types';

packages/vant/src/dialog/types.ts

@@ -0,0 +1,39 @@
+import { Dialog } from './function-call';
+import type { CSSProperties, TeleportProps } from 'vue';
+import type { Interceptor } from '../utils';
+
+export type DialogTheme = 'default' | 'round-button';
+export type DialogAction = 'confirm' | 'cancel';
+export type DialogMessage = string | (() => JSX.Element);
+export type DialogMessageAlign = 'left' | 'center' | 'right';
+
+export type DialogOptions = {
+  title?: string;
+  width?: string | number;
+  theme?: DialogTheme;
+  message?: DialogMessage;
+  overlay?: boolean;
+  teleport?: TeleportProps['to'];
+  className?: unknown;
+  allowHtml?: boolean;
+  lockScroll?: boolean;
+  transition?: string;
+  beforeClose?: Interceptor;
+  messageAlign?: DialogMessageAlign;
+  overlayClass?: string;
+  overlayStyle?: CSSProperties;
+  closeOnPopstate?: boolean;
+  cancelButtonText?: string;
+  showCancelButton?: boolean;
+  showConfirmButton?: boolean;
+  cancelButtonColor?: string;
+  confirmButtonText?: string;
+  confirmButtonColor?: string;
+  closeOnClickOverlay?: boolean;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $dialog: typeof Dialog;
+  }
+}

packages/vant/src/notify/Notify.tsx

@@ -2,11 +2,10 @@ import { PropType, defineComponent } from 'vue';
 import { createNamespace, extend, unknownProp } from '../utils';
 import { Popup } from '../popup';
 import { popupSharedProps } from '../popup/shared';
+import type { NotifyType } from './types';
 
 const [name, bem] = createNamespace('notify');
 
-export type NotifyType = 'primary' | 'success' | 'danger' | 'warning';
-
 export default defineComponent({
   name,
 

packages/vant/src/notify/function-call.tsx

@@ -7,26 +7,12 @@ import {
   ComponentInstance,
 } from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
-import VanNotify, { NotifyType } from './Notify';
+import VanNotify from './Notify';
+import type { NotifyMessage, NotifyOptions } from './types';
 
 let timer: number;
 let instance: ComponentInstance;
 
-export type NotifyMessage = string | number;
-
-export type NotifyOptions = {
-  type?: NotifyType;
-  color?: string;
-  message?: NotifyMessage;
-  duration?: number;
-  className?: unknown;
-  background?: string;
-  lockScroll?: boolean;
-  onClick?: (event: MouseEvent) => void;
-  onClose?: () => void;
-  onOpened?: () => void;
-};
-
 function parseOptions(message: NotifyMessage | NotifyOptions) {
   return isObject(message) ? message : { message };
 }

packages/vant/src/notify/index.ts

@@ -1,6 +1,5 @@
-import { Notify, NotifyOptions } from './function-call';
+import { Notify } from './function-call';
-import type { NotifyType } from './Notify';
 
 export default Notify;
 export { Notify };
-export type { NotifyType, NotifyOptions };
+export type { NotifyType, NotifyOptions } from './types';

packages/vant/src/notify/types.ts

@@ -0,0 +1,24 @@
+import { Notify } from './function-call';
+
+export type NotifyMessage = string | number;
+
+export type NotifyType = 'primary' | 'success' | 'danger' | 'warning';
+
+export type NotifyOptions = {
+  type?: NotifyType;
+  color?: string;
+  message?: NotifyMessage;
+  duration?: number;
+  className?: unknown;
+  background?: string;
+  lockScroll?: boolean;
+  onClick?: (event: MouseEvent) => void;
+  onClose?: () => void;
+  onOpened?: () => void;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $notify: typeof Notify;
+  }
+}

packages/vant/src/toast/Toast.tsx

@@ -16,10 +16,10 @@ import { Icon } from '../icon';
 import { Popup } from '../popup';
 import { Loading, LoadingType } from '../loading';
 
-const [name, bem] = createNamespace('toast');
+// Types
+import type { ToastType, ToastPosition } from './types';
 
-export type ToastType = 'text' | 'loading' | 'success' | 'fail' | 'html';
+const [name, bem] = createNamespace('toast');
-export type ToastPosition = 'top' | 'middle' | 'bottom';
 
 export default defineComponent({
   name,

packages/vant/src/toast/function-call.tsx

@@ -1,4 +1,4 @@
-import { ref, App, TeleportProps, getCurrentInstance, watch } from 'vue';
+import { ref, App, getCurrentInstance, watch } from 'vue';
 import {
   extend,
   isObject,
@@ -7,31 +7,8 @@ import {
   ComponentInstance,
 } from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
-import VanToast, { ToastType, ToastPosition } from './Toast';
+import VanToast from './Toast';
-import type { LoadingType } from '../loading';
+import type { ToastType, ToastOptions } from './types';
-
-export type ToastOptions = {
-  icon?: string;
-  type?: ToastType;
-  mask?: boolean;
-  message?: string | number;
-  onClose?: () => void;
-  onOpened?: () => void;
-  overlay?: boolean;
-  duration?: number;
-  teleport?: TeleportProps['to'];
-  iconSize?: number | string;
-  position?: ToastPosition;
-  className?: unknown;
-  transition?: string;
-  iconPrefix?: string;
-  loadingType?: LoadingType;
-  forbidClick?: boolean;
-  closeOnClick?: boolean;
-  overlayClass?: unknown;
-  overlayStyle?: Record<string, any>;
-  closeOnClickOverlay?: boolean;
-};
 
 const defaultOptions: ToastOptions = {
   icon: '',

packages/vant/src/toast/index.ts

@@ -1,6 +1,5 @@
-import { Toast, ToastOptions } from './function-call';
+import { Toast } from './function-call';
-import type { ToastType, ToastPosition } from './Toast';
 
 export default Toast;
 export { Toast };
-export type { ToastType, ToastOptions, ToastPosition };
+export type { ToastType, ToastOptions, ToastPosition } from './types';

packages/vant/src/toast/types.ts

@@ -0,0 +1,35 @@
+import { Toast } from './function-call';
+import type { TeleportProps } from 'vue';
+import type { LoadingType } from '../loading';
+
+export type ToastType = 'text' | 'loading' | 'success' | 'fail' | 'html';
+export type ToastPosition = 'top' | 'middle' | 'bottom';
+
+export type ToastOptions = {
+  icon?: string;
+  type?: ToastType;
+  mask?: boolean;
+  message?: string | number;
+  onClose?: () => void;
+  onOpened?: () => void;
+  overlay?: boolean;
+  duration?: number;
+  teleport?: TeleportProps['to'];
+  iconSize?: number | string;
+  position?: ToastPosition;
+  className?: unknown;
+  transition?: string;
+  iconPrefix?: string;
+  loadingType?: LoadingType;
+  forbidClick?: boolean;
+  closeOnClick?: boolean;
+  overlayClass?: unknown;
+  overlayStyle?: Record<string, any>;
+  closeOnClickOverlay?: boolean;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $toast: typeof Toast;
+  }
+}