feat(MessageDialog)

Signed-off-by: Tenny <joel.shu@qq.com>

Author: Tenny

docs/.vitepress/theme/index.ts

@@ -31,6 +31,7 @@ import '../../../style/tooltip';
 import '../../../style/util/tabs.css';
 import '../../../style/list';
 import '../../../style/dialog';
+import '../../../style/dialog-box';
 
 export default {
   extends: DefaultTheme,

docs/components/dialog.md

@@ -30,7 +30,25 @@
     }
   }
 
-  DialogBox.alert()
+  function openAlert() {
+    DialogBox.alert("这是 Alert Content", 'Alert Title').then((result) => {
+      if (result === true) {
+        Message.success("点击了确定")
+      } else {
+        Message.info("点击了关闭")
+      }
+    })
+  }
+
+  function openConfirm() {
+    DialogBox.confirm("这是 Confirm Content", 'Confirm Title', { type: 'success' }).then((result) => {
+      if (result === true) {
+        Message.success("点击了确定")
+      } else {
+        Message.info("点击了关闭")
+      }
+    })
+  }
 </script>
 
 ### 基础用法
@@ -180,6 +198,28 @@
   </CodePreview>
 </ClientOnly>
 
+### 消息弹窗
+
+模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。系统自带有3种消息弹窗：`alert`、`confirm`、`prompt` 但是其样式比较简陋不太美观，消息弹窗优化了样式。
+
+分别通过 `NtDialogBox.alert()`、`NtDialogBox.confirm()`、`NtDialogBox.prompt()` 调用
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup>
+  </script>
+  <template>
+  </template>
+  </textarea>
+  <template #preview>
+    <Button @click="openAlert">alert</Button>
+    <Button @click="openConfirm">confirm</Button>
+    <Button>prompt</Button>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
 ## API
 
 ### Dialog Props

src/components/dialog/AlertDialog.vue

@@ -69,6 +69,10 @@ export default defineComponent({
       type: String,
       default: undefined,
     },
+    to: {
+      type: [Object, String] as PropType<HTMLElement | 'string'>,
+      default: 'body',
+    },
     /** 主题, normal - 普通, mobile - 移动风格 */
     theme: {
       type: String as PropType<'normal' | 'mobile'>,
@@ -111,9 +115,10 @@ export default defineComponent({
     }
 
     return () => {
+      console.log(props.to);
       return h(
         Teleport,
-        { to: 'body' },
+        { to: props.to },
         h(
           Transition,
           {

src/components/dialog/Dialog.vue

@@ -1,24 +1,56 @@
-import { h, render, createVNode } from 'vue';
-import Dialog from './Dialog.vue';
+import { render, createVNode } from 'vue';
+import AlertDialog from './MessageDialog.vue';
+import { isBlank } from 'ph-utils';
 
-export default {
-  alert() {
-    return new Promise((resolve, reject) => {
-      const vnode = createVNode(
-        Dialog,
-        {
-          title: 'Alert',
-          modelValue: true,
-          'onUpdate:modelValue': onUpdate,
-        },
-        () => 'Alert',
-      );
-      function onUpdate(val: boolean) {
-        if (vnode.component != null) {
-          vnode.component.props.modelValue = val;
-        }
+function getContainer() {
+  return document.createElement('div');
+}
+
+type MessageOption = {
+  showCancel?: boolean;
+  type?: string;
+};
+
+function alert(message: string, title?: string, option?: MessageOption) {
+  return new Promise((resolve) => {
+    const opts = { showCancel: false, ...option };
+    let container = getContainer();
+    const onClose = (action: 'close' | 'ok') => {
+      resolve(action === 'ok' ? true : false);
+      if (vnode != null && vnode.component != null) {
+        vnode.component.props.show = false;
       }
-      render(vnode, document.body);
-    });
-  },
+      vnode = undefined as any;
+      container = undefined as any;
+    };
+    const props: any = {
+      message,
+      show: true,
+      showCancel: opts.showCancel,
+      onClose,
+      to: container,
+    };
+
+    if (!isBlank(title)) {
+      props.title = title;
+    }
+
+    if (!isBlank(opts.type)) {
+      props.type = opts.type;
+    }
+
+    let vnode = createVNode(AlertDialog, props);
+    render(vnode, container);
+    document.body.appendChild(container.firstElementChild as any);
+  });
+}
+
+function confirm(message: string, title?: string, option?: MessageOption) {
+  const opts = { type: 'info', showCancel: true, ...option };
+  return alert(message, title, opts);
+}
+
+export default {
+  alert,
+  confirm,
 };

src/components/dialog/DialogBox.ts

@@ -0,0 +1,70 @@
+<template>
+  <Dialog
+    :model-value="show"
+    :title="title"
+    :show-cancel="showCancel"
+    :mask-closable="false"
+    :before-close="handleClose"
+    container-class="nt-message-dialog-container"
+    :to="to"
+  >
+    <component
+      v-if="IconComponentName != null"
+      :is="IconComponentName"
+      :class="['nt-confirm-icon', 'nt-confirm-icon--' + props.type]"
+    ></component>
+    {{ message }}</Dialog
+  >
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, ref, computed } from 'vue';
+import Dialog from './Dialog.vue';
+
+const AsyncInfoIcon = defineAsyncComponent(() => import('../icon/Info.vue'));
+const AsyncErrorIcon = defineAsyncComponent(
+  () => import('../icon/MaskClose.vue'),
+);
+const AsyncWarnIcon = defineAsyncComponent(() => import('../icon/Warn.vue'));
+const AsyncSuccessIcon = defineAsyncComponent(
+  () => import('../icon/Success.vue'),
+);
+
+const IconComponentName = computed(() => {
+  if (props.type === 'success') {
+    return AsyncSuccessIcon;
+  } else if (props.type === 'warn') {
+    return AsyncWarnIcon;
+  } else if (props.type === 'error') {
+    return AsyncErrorIcon;
+  } else if (props.type === 'info') {
+    return AsyncInfoIcon;
+  }
+  return null;
+});
+
+const props = withDefaults(
+  defineProps<{
+    show?: boolean;
+    title?: string;
+    message: string;
+    showCancel?: boolean;
+    type?: 'success' | 'error' | 'warn' | 'info';
+    to: HTMLElement;
+  }>(),
+  {
+    title: '提示',
+    showCancel: true,
+    type: undefined,
+    show: false,
+  },
+);
+
+const emits = defineEmits(['close']);
+
+const handleClose = (action: 'cancel' | 'ok' | 'close') => {
+  emits('close', action);
+};
+</script>
+
+<style></style>

src/components/dialog/MessageDialog.vue

@@ -11,7 +11,7 @@
       :style="bindStyle"
       :class="['nt-message', `nt-message-${type}`, customClass]"
     >
-      <div>
+      <div class="nt-message-container">
         <component :is="icon" class="nt-message-icon"></component>
         <span class="nt-message-content">{{ message }}</span>
       </div>

src/components/message/index.vue

@@ -40,7 +40,6 @@ export { default as Card } from './components/Card.vue';
 export { default as Popover } from './components/popover/Popover.vue';
 export { default as Tooltip } from './components/popover/Tooltip.vue';
 export { default as Dialog } from './components/dialog/Dialog.vue';
-export { default as AlertDialog } from './components/dialog/AlertDialog.vue';
 export { default as DialogBox } from './components/dialog/DialogBox';
 
 export { default as Qrcode } from './components/Qrcode.vue';

src/index.ts

@@ -0,0 +1,20 @@
+.nt-message-dialog-container {
+  display: flex;
+  align-items: center;
+}
+
+.nt-confirm-icon {
+  margin-right: 5px;
+}
+.nt-confirm-icon--info {
+  color: var(--nt-success-color, #999999);
+}
+.nt-confirm-icon--success {
+  color: var(--nt-success-color, #19bf6c);
+}
+.nt-confirm-icon--error {
+  color: var(--nt-error-color, #ed3f13);
+}
+.nt-confirm-icon--warn {
+  color: var(--nt-warn-color, #f90);
+}

style/dialog-box/index.css

@@ -0,0 +1 @@
+import './index.css';