types(Dialog): dialog fn use ts (#8114)

src/dialog/Dialog.tsx

@@ -13,6 +13,7 @@ import ActionBarButton from '../action-bar-button';
 
 const [createComponent, bem, t] = createNamespace('dialog');
 
+export type DialogTheme = 'default' | 'round-button';
 export type DialogAction = 'confirm' | 'cancel';
 export type DialogMessageAlign = 'left' | 'center' | 'right';
 
@@ -26,7 +27,7 @@ export default createComponent({
   props: {
     ...popupSharedProps,
     title: String,
-    theme: String,
+    theme: String as PropType<DialogTheme>,
     width: [Number, String],
     message: String,
     callback: Function as PropType<(action?: DialogAction) => void>,

src/dialog/index.tsx

@@ -1,8 +1,40 @@
+import { App, TeleportProps } from 'vue';
 import { inBrowser } from '../utils';
+import { Interceptor } from '../utils/interceptor';
 import { mountComponent, usePopupState } from '../utils/mount-component';
-import VanDialog from './Dialog';
+import VanDialog, {
+  DialogTheme,
+  DialogAction,
+  DialogMessageAlign,
+} from './Dialog';
 
-let instance;
+export type DialogOptions = {
+  title?: string;
+  width?: string | number;
+  theme?: DialogTheme;
+  message?: string;
+  overlay?: boolean;
+  teleport?: TeleportProps['to'];
+  className?: any;
+  allowHtml?: boolean;
+  lockScroll?: boolean;
+  transition?: string;
+  beforeClose?: Interceptor;
+  messageAlign?: DialogMessageAlign;
+  overlayClass?: string;
+  overlayStyle?: Record<string, any>;
+  closeOnPopstate?: boolean;
+  cancelButtonText?: string;
+  showCancelButton?: boolean;
+  showConfirmButton?: boolean;
+  cancelButtonColor?: string;
+  confirmButtonText?: string;
+  confirmButtonColor?: string;
+  closeOnClickOverlay?: boolean;
+};
+
+// TODO remove any
+let instance: any;
 
 function initInstance() {
   const Wrapper = {
@@ -15,7 +47,7 @@ function initInstance() {
   ({ instance } = mountComponent(Wrapper));
 }
 
-function Dialog(options) {
+function Dialog(options: DialogOptions) {
   /* istanbul ignore if */
   if (!inBrowser) {
     return Promise.resolve();
@@ -29,7 +61,7 @@ function Dialog(options) {
     instance.open({
       ...Dialog.currentOptions,
       ...options,
-      callback: (action) => {
+      callback: (action: DialogAction) => {
         (action === 'confirm' ? resolve : reject)(action);
       },
     });
@@ -62,9 +94,13 @@ Dialog.defaultOptions = {
   closeOnClickOverlay: false,
 };
 
+Dialog.currentOptions = {
+  ...Dialog.defaultOptions,
+};
+
 Dialog.alert = Dialog;
 
-Dialog.confirm = (options) =>
+Dialog.confirm = (options: DialogOptions) =>
   Dialog({
     showCancelButton: true,
     ...options,
@@ -76,7 +112,7 @@ Dialog.close = () => {
   }
 };
 
-Dialog.setDefaultOptions = (options) => {
+Dialog.setDefaultOptions = (options: DialogOptions) => {
   Object.assign(Dialog.currentOptions, options);
 };
 
@@ -84,10 +120,8 @@ Dialog.resetDefaultOptions = () => {
   Dialog.currentOptions = { ...Dialog.defaultOptions };
 };
 
-Dialog.resetDefaultOptions();
+Dialog.install = (app: App) => {
-
+  app.use(VanDialog as any);
-Dialog.install = (app) => {
-  app.use(VanDialog);
   app.config.globalProperties.$dialog = Dialog;
 };
 

src/toast/index.tsx

@@ -47,6 +47,7 @@ const defaultOptions: ToastOptions = {
   closeOnClickOverlay: false,
 };
 
+// TODO remove any
 let queue: any[] = [];
 let allowMultiple = false;
 let currentOptions = { ...defaultOptions };