dpzvc3-ui 3.0.6 → 3.1.0

package/src/components/message/confirm.ts

@@ -0,0 +1,104 @@
+import { createVNode, render } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+import MessageGroup from './messageGroup'
+
+// MessageGroup.newInstance = function (props = {}) {
+function createMessageInstance(props = {}) {
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+
+  let vnode = createVNode(MessageGroup, { ...props })
+  render(vnode, container)
+
+  // vnode.component.proxy 会有 expose 出来的方法
+  const instance = vnode.component?.proxy as ComponentPublicInstance
+  const { add, remove, closeAll } = vnode.component?.exposed || {}
+//   console.log(vnode.component.exposed
+// , 'instance---messageGroup')
+
+  return {
+    add(options: any) {
+      // instance?.add?.(options)
+      add?.(options)
+    },
+    remove(name: string | number) {
+      // instance?.remove?.(name)
+      remove?.(name)
+    },
+    closeAll() {
+      // instance?.closeAll?.()
+      closeAll?.()
+    },
+    component: instance,
+    destroy() {
+      closeAll?.()
+      setTimeout(() => {
+        render(null, container)
+        container.parentNode?.removeChild(container)
+      }, 500)
+    }
+  }
+}
+
+export {createMessageInstance}
+// /**
+//  * confirm.js - Vue 3 版本
+//  * 负责创建 MessageGroup 实例
+//  */
+
+// import { createVNode, render } from 'vue'
+// import MessageGroup from './messageGroup'
+
+// MessageGroup.newInstance = function (props = {}) {
+//   // alert(4)
+//   const container = document.createElement('div')
+//   document.body.appendChild(container)
+
+//   let vnode = null
+//   let instance = null // 组件实例 proxy
+
+//   const mount = () => {
+//     vnode = createVNode(MessageGroup, {
+//       ...props
+//       // 这里使用 ref 拿到组件实例 proxy
+//     })
+//     render(vnode, container)
+//     instance = vnode.component.proxy
+//   }
+
+//   mount()
+
+//   return {
+//     add (options) {
+//       if (instance && instance.add) {
+//         instance.add(options)
+//       }
+//     },
+//     remove (name) {
+//       if (instance && instance.remove) {
+//         instance.remove(name)
+//       }
+//     },
+//     closeAll () {
+//       if (instance && instance.closeAll) {
+//         instance.closeAll()
+//       }
+//     },
+//     component: instance,
+//     destroy () {
+//       if (instance && instance.closeAll) {
+//         instance.closeAll()
+//       }
+
+//       setTimeout(() => {
+//         render(null, container)
+//         if (container.parentNode) {
+//           container.parentNode.removeChild(container)
+//         }
+//         instance = null
+//       }, 500)
+//     }
+//   }
+// }
+
+// export default MessageGroup

package/src/components/message/{index.js → index.ts}

@@ -2,13 +2,13 @@
  * message/index.js - Vue 3 版本
  */
 
-import MessageGroup from './confirm'
+import { createMessageInstance } from './confirm'
 import { randomStr } from '../../utils/util'
-
+import type { MergeMessageOptions,MessageInstance,MgInstance } from './types'
 let defaultDuration = 1
 let top = '0'
 
-let MGInstance = null
+let MGInstance:MgInstance = null
 let seed = 1
 const time = Date.now()
 
@@ -18,7 +18,7 @@ function getName () {
 
 function getNewInstance () {
   if (!MGInstance) {
-    MGInstance = MessageGroup.newInstance({
+    MGInstance = createMessageInstance({
       styles: {
         top,
         right: '0'
@@ -29,7 +29,7 @@ function getNewInstance () {
   return MGInstance
 }
 
-function message (props = {}) {
+function message (props:MergeMessageOptions) {
   const {
     text = '',
     name = getName(),
@@ -64,27 +64,28 @@ function message (props = {}) {
   }
 }
 
-export default {
+const Message: MessageInstance= {
 
-  show (options = {}) {
+  show(options:MergeMessageOptions) {
+    // alert(1)
     return message(options)
   },
 
-  success (options = {}) {
+  success (options:MergeMessageOptions) {
     return message({
       ...options,
       type: 'success'
     })
   },
 
-  error (options = {}) {
+  error (options:MergeMessageOptions) {
     return message({
       ...options,
       type: 'error'
     })
   },
 
-  loading (options = {}) {
+  loading (options:MergeMessageOptions) {
     return message({
       ...options,
       type: 'loading',
@@ -93,15 +94,15 @@ export default {
     })
   },
 
-  config (options = {}) {
-    if (options.top !== undefined) {
-      top = options.top
-    }
+  // config (options:MergeMessageOptions) {
+  //   if (options?.top !== undefined) {
+  //     top = options.top
+  //   }
 
-    if (options.duration !== undefined) {
-      defaultDuration = options.duration
-    }
-  },
+  //   if (options.duration !== undefined) {
+  //     defaultDuration = options.duration
+  //   }
+  // },
 
   destroy () {
     if (!MGInstance) return
@@ -109,3 +110,4 @@ export default {
     MGInstance = null
   }
 }
+export default Message

package/src/components/message/message.tsx

@@ -0,0 +1,100 @@
+import { defineComponent, computed, onMounted, onBeforeUnmount, inject, PropType } from 'vue'
+import Spinner from '../spinner'
+import type { MessageProps } from './types'
+
+const prefixCls = 'dpzvc3-message'
+
+export default defineComponent({
+  name: 'DpzMessage',
+  props: {
+    name: {
+      type: [String, Number] as PropType<string | number>,
+      required: true
+    },
+    text: {
+      type: [String, Number] as PropType<string | number>,
+      default: ''
+    },
+    duration: {
+      type: Number,
+      default: 1.5
+    },
+    showLeft: {
+      type: Boolean,
+      default: false
+    },
+    rightHide: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String as PropType<MessageProps['type']>,
+      default: 'normal'
+    },
+    onClose: {
+      type: Function as PropType<() => void>,
+      default: () => {}
+    },
+    position: {
+      type: String as PropType<MessageProps['position']>,
+      default: 'top'
+    }
+  },
+  setup(props) {
+    /** 🔑 从 MessageGroup 注入 remove 方法 */
+    const remove = inject<(name: string | number) => void>('removeMessage')
+
+    let timer: number | null = null
+
+    const classes = computed(() => [prefixCls, `${prefixCls}-position-${props.position}`])
+    const wrapperClasses = computed(() => [`${prefixCls}-text`])
+    const leftClasses = computed(() => [`${prefixCls}-left`])
+    const rightClasses = computed(() => [`${prefixCls}-right`])
+
+    const closeTimer = () => {
+      if (timer) {
+        clearTimeout(timer)
+        timer = null
+      }
+    }
+
+    const close = () => {
+      closeTimer()
+      remove?.(props.name)
+      props.onClose?.()
+    }
+
+    onMounted(() => {
+      closeTimer()
+      if (props.duration !== 0) {
+        timer = window.setTimeout(() => {
+          close()
+        }, props.duration * 1000)
+      }
+    })
+
+    onBeforeUnmount(() => {
+      closeTimer()
+    })
+
+    return () => (
+      <div class={classes.value}>
+        {props.showLeft && (
+          <div class={leftClasses.value}>
+            <slot name="message-left">
+              <Spinner size="65" type="blade" color="#ffffff" />
+            </slot>
+          </div>
+        )}
+
+        <p class={wrapperClasses.value}>{props.text}</p>
+
+        {!props.rightHide && (
+          <div class={rightClasses.value}>
+            <slot name="message-right" />
+          </div>
+        )}
+      </div>
+    )
+  }
+})

package/src/components/message/messageGroup.tsx

@@ -0,0 +1,59 @@
+import { defineComponent, ref, provide, PropType } from 'vue'
+import Message from './message'
+import type { MessageProps } from './types' // 引入类型
+
+export default defineComponent({
+  name: 'MessageGroup',
+  props: {
+    styles: {
+      type: Object as PropType<Record<string, any>>,
+      default: () => ({})
+    }
+  },
+    setup(props, { expose }) {
+    const messages = ref<MessageProps[]>([])
+
+    const add = (msgProps: Partial<MessageProps> = {}) => {
+      const message: MessageProps = {
+        name: '',
+        text: '',
+        duration: 1.5,
+        showLeft: false,
+        rightHide: true,
+        type: 'normal',
+        position: 'top',
+        onClose: () => {},
+        ...msgProps
+      }
+        // alert(1)
+      messages.value.push(message)
+    }
+
+    const remove = (name: string) => {
+      messages.value = messages.value.filter(item => item.name !== name)
+    }
+
+    const closeAll = () => {
+      messages.value = []
+    }
+    provide('removeMessage', remove)
+    expose({add, closeAll, remove})
+    return () => (
+      <div class="dpzvc3-message-group" style={props.styles}>
+        {messages.value.map(message => (
+          <Message
+            key={message.name}
+            name={message.name}
+            text={message.text}
+            duration={message.duration}
+            show-left={message.showLeft}
+            right-hide={message.rightHide}
+            type={message.type}
+            position={message.position}
+            on-close={message.onClose}
+          />
+        ))}
+      </div>
+    )
+  }
+})

package/src/components/message/types.ts

@@ -0,0 +1,48 @@
+// export interface MessageItem {
+//   name: string
+//   text: string
+//   duration?: number
+//   showLeft?: boolean
+//   rightHide?: boolean
+//   type?: 'normal' | 'success' | 'error' | 'warning'
+//   position?: 'top' | 'bottom'
+//   onClose?: () => void
+
+import type { ComponentPublicInstance } from 'vue'
+
+// }
+export interface MessageProps {
+  name?: string | number
+  text?: string | number
+  duration?: number
+  showLeft?: boolean
+  rightHide?: boolean
+  type?: 'success' | 'loading' | 'error' | 'normal' | 'warning' | 'danger'
+  position?: 'top' | 'bottom'
+  onClose?: () => void
+}
+// type stylesOptions = "left" | "top"
+export type MergeMessageOptions<T = MessageProps> = {
+    [K in keyof T]: T[K]
+} & {
+  loading?: boolean,
+  styles?: Record<string, any>
+}
+
+// message实例
+export type MessageInstance = {
+  show: (options:MergeMessageOptions) => any
+  success: (options:MergeMessageOptions) => any
+  error: (options: MergeMessageOptions) => any
+  loading: (options: MergeMessageOptions) => any
+  // config: (options: MergeMessageOptions) => void
+  destroy: () => void
+}
+
+export type MgInstance = {
+  add: (options: any) => void
+  remove: (name: string | number) => void
+  closeAll: () => void
+  component: ComponentPublicInstance
+  destroy: () => void
+} | null

package/src/components/modal/{confirm.js → confirm.ts}

@@ -2,9 +2,9 @@
  * confirm.js - Vue 3 版本（修复 enter 过渡）
  */
 import { h, createVNode, render } from 'vue'
-import Modal from './modal.vue'
+import Modal from './modal'
 import VButton from '../button'
-
+// import type { ModalInstance } from './types'
 const prefixCls = 'dpzvc3-modal'
 
 function createModalInstance (properties = {}) {
@@ -14,7 +14,7 @@ function createModalInstance (properties = {}) {
   let vnode = null
 
   const defaultProps = {
-    visible: false,
+    // visible: false,
     modelValue: false,
     width: '70%',
     body: '',
@@ -80,6 +80,7 @@ function createModalInstance (properties = {}) {
 
   const destroy = () => {
     render(null, container)
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     container.parentNode && container.parentNode.removeChild(container)
     props.onRemove()
   }
@@ -116,7 +117,7 @@ function createModalInstance (properties = {}) {
     component: props
   }
 }
-
-export default {
-  newInstance: createModalInstance
-}
+// const ModalMethods:ModalInstance = {
+//   newInstance: createModalInstance,
+// }
+export { createModalInstance }

package/src/components/modal/index.ts

@@ -0,0 +1,68 @@
+/**
+ * index.js - Vue 3 版本
+ */
+import {createModalInstance } from './confirm'
+import type { MergeOptions,DefaultProps, ModalInstance } from './types'
+let modalInstance:DefaultProps
+
+function getModalInstance () {
+  if (!modalInstance) {
+    modalInstance = createModalInstance({
+      showHead: true,
+      // closable: true,
+      maskClosable: false,
+      footerHide: false
+    })
+  }
+  return modalInstance
+}
+
+function confirm (options: MergeOptions) {
+  const instance = getModalInstance()
+
+  options.onRemove = () => {
+    modalInstance = null
+  }
+
+  instance!.show(options)
+  return instance
+}
+const Modal: ModalInstance = {
+  info: (props: MergeOptions) => { 
+    props.showCancle = true
+      props.showHead = false
+      return confirm(props)
+  },
+  confirm: (props: MergeOptions) => {
+    props.showCancle = false
+      props.showHead = false
+      return confirm(props)
+  },
+  remove: () => {
+    if (!modalInstance) return false
+    const instance = getModalInstance()
+    instance!.remove()
+  }
+}
+// info 模态框，显示取消按钮
+// Modal.info = function (props: MergeOptions) {
+//   props.showCancle = true
+//   props.showHead = false
+//   return confirm(props)
+// }
+
+// confirm 模态框，不显示取消按钮
+// Modal.confirm  = function (props: MergeOptions) {
+//   props.showCancle = false
+//   props.showHead = false
+//   return confirm(props)
+// }
+
+// 移除当前 modal
+// Modal.remove = function () {
+//   if (!modalInstance) return false
+//   const instance = getModalInstance()
+//   instance!.remove()
+// }
+
+export default Modal