refactor(Modal): 重构Modal

packages/devui-vue/devui/modal/index.ts

@@ -1,21 +1,22 @@
-import type { App } from 'vue'
-import Modal from './src/modal'
-import { ModalService } from './src/services/modal-service'
-import { DialogService } from './src/services/dialog-service'
-import { inBrowser } from '../shared/util/common-var'
+import type { App } from 'vue';
+import Modal from './src/modal';
+import Header from './src/header';
+import Body from './src/body';
+import Footer from './src/footer';
+import { ModalService } from './src/services/modal-service';
+import { inBrowser } from '../shared/util/common-var';
 
-Modal.install = function(app: App): void {
-  app.component(Modal.name, Modal)
-}
-
-export { Modal }
+export { Modal };
 
 export default {
   title: 'Modal 弹窗',
   category: '反馈',
   status: '100%',
   install(app: App): void {
-    app.use(Modal as any)
+    app.component(Modal.name, Modal);
+    app.component(Header.name, Header);
+    app.component(Body.name, Body);
+    app.component(Footer.name, Footer);
 
     if (!inBrowser) {
       return;
@@ -25,10 +26,9 @@ export default {
     if (!anchorsContainer) {
       anchorsContainer = document.createElement('div');
       anchorsContainer.setAttribute('id', 'd-modal-anchors-container');
-      document.body.appendChild(anchorsContainer);  
+      document.body.appendChild(anchorsContainer);
     }
     // 新增 modalService
     app.provide(ModalService.token, new ModalService(anchorsContainer));
-    app.provide(DialogService.token, new DialogService(anchorsContainer));
-  }
-}
+  },
+};

packages/devui-vue/devui/modal/src/body.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'DModalBody',
+  setup(props, { slots }) {
+    return () => <div class='devui-modal-body'>{slots.default?.()}</div>;
+  },
+});

packages/devui-vue/devui/modal/src/footer.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'DModalFooter',
+  setup(props, { slots }) {
+    return () => <div class='devui-modal-footer'>{slots.default?.()}</div>;
+  },
+});

packages/devui-vue/devui/modal/src/header.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'DModalHeader',
+  setup(props, { slots }) {
+    return () => <div class='devui-modal-header'>{slots.default?.()}</div>;
+  },
+});

packages/devui-vue/devui/modal/src/modal-types.ts

@@ -1,72 +1,31 @@
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { PropType, ExtractPropTypes } from 'vue';
 
 export const modalProps = {
-  // id: {
-  //   type: String,
-  //   required: true
-  // },
-  width: {
-    type: String,
-    default: '300px'
-  },
-  maxHeight: {
-    type: String,
-  },
-
-  zIndex: {
-    type: Number,
-    default: 1050
-  },
-  backdropZIndex: {
-    type: Number,
-    default: 1049
-  },
-
-  placement: {
-    type: String as PropType<'center' | 'top' | 'bottom'>,
-    default: 'center'
-  },
-  offsetX: {
-    type: String,
-    default: '0px'
+  modelValue: {
+    type: Boolean,
+    default: false,
   },
-
-  offsetY: {
+  title: {
     type: String,
-    default: '0px'
+    default: '',
   },
-
-  showAnimation: {
+  lockScroll: {
     type: Boolean,
-    default: true
+    default: true,
   },
-  backdropCloseable: {
+  closeOnClickOverlay: {
     type: Boolean,
-    default: true
+    default: true,
   },
-  bodyScrollable: {
-    type: Boolean,
-    default: true
+  beforeClose: {
+    type: Function as PropType<(done: () => void) => void>,
   },
+};
 
-  escapeable: {
-    type: Boolean,
-    default: true
-  },
+export type EmitName = 'update:modelValue';
 
-  onClose: {
-    type: Function as PropType<() => void>,
-  },
-  beforeHidden: {
-    type: [Object, Function] as PropType<Promise<boolean> | (() => boolean | Promise<boolean>)>
-  },
+export type EmitEventFn = (event: EmitName, result?: boolean) => void;
 
-  modelValue: {
-    type: Boolean,
-  },
-  'onUpdate:modelValue': {
-    type: Function as PropType<(value: boolean) => void>
-  }
-} as const
+export type UseModalFn = { handleVisibleChange: (val: boolean) => void };
 
-export type ModalProps = ExtractPropTypes<typeof modalProps>
+export type ModalProps = ExtractPropTypes<typeof modalProps>;