dpzvc3-ui 3.1.5 → 3.1.6

package/src/components/message/confirm.ts

@@ -1,104 +0,0 @@
-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.ts

@@ -1,113 +0,0 @@
-/**
- * message/index.js - Vue 3 版本
- */
-
-import { createMessageInstance } from './confirm'
-import { randomStr } from '../../utils/util'
-import type { MergeMessageOptions,MessageInstance,MgInstance } from './types'
-let defaultDuration = 1
-let top = '0'
-
-let MGInstance:MgInstance = null
-let seed = 1
-const time = Date.now()
-
-function getName () {
-  return `dpzvc3-message-group_${time}_${seed++}_${randomStr()}`
-}
-
-function getNewInstance () {
-  if (!MGInstance) {
-    MGInstance = createMessageInstance({
-      styles: {
-        top,
-        right: '0'
-      }
-    })
-  }
-
-  return MGInstance
-}
-
-function message (props:MergeMessageOptions) {
-  const {
-    text = '',
-    name = getName(),
-    duration = props.duration === 0 ? 0 : (props.duration || defaultDuration),
-    showLeft = false,
-    rightHide = true,
-    loading = false,
-    onClose = () => {},
-    styles = {},
-    type = 'normal',
-    position = 'center'
-  } = props
-
-  const instance = getNewInstance()
-  // console.log(instance.add, 'instance')
-  instance.add({
-    name,
-    text,
-    duration,
-    showLeft,
-    rightHide,
-    loading,
-    onClose,
-    styles,
-    type,
-    position
-  })
-
-  // 返回手动关闭函数（保持旧行为）
-  return function remove () {
-    instance.remove(name)
-  }
-}
-
-const Message: MessageInstance= {
-
-  show(options:MergeMessageOptions) {
-    // alert(1)
-    return message(options)
-  },
-
-  success (options:MergeMessageOptions) {
-    return message({
-      ...options,
-      type: 'success'
-    })
-  },
-
-  error (options:MergeMessageOptions) {
-    return message({
-      ...options,
-      type: 'error'
-    })
-  },
-
-  loading (options:MergeMessageOptions) {
-    return message({
-      ...options,
-      type: 'loading',
-      duration: 0,
-      showLeft: true
-    })
-  },
-
-  // config (options:MergeMessageOptions) {
-  //   if (options?.top !== undefined) {
-  //     top = options.top
-  //   }
-
-  //   if (options.duration !== undefined) {
-  //     defaultDuration = options.duration
-  //   }
-  // },
-
-  destroy () {
-    if (!MGInstance) return
-    MGInstance.destroy()
-    MGInstance = null
-  }
-}
-export default Message

package/src/components/message/message.tsx

@@ -1,100 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,48 +0,0 @@
-// 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.ts

@@ -1,123 +0,0 @@
-/**
- * confirm.js - Vue 3 版本（修复 enter 过渡）
- */
-import { h, createVNode, render } from 'vue'
-import Modal from './modal'
-import VButton from '../button'
-// import type { ModalInstance } from './types'
-const prefixCls = 'dpzvc3-modal'
-
-function createModalInstance (properties = {}) {
-  const container = document.createElement('div')
-  document.body.appendChild(container)
-
-  let vnode = null
-
-  const defaultProps = {
-    // visible: false,
-    modelValue: false,
-    width: '70%',
-    body: '',
-    title: '',
-    okText: '确定',
-    cancleText: '取消',
-    loading: false,
-    buttonLoading: false,
-    showCancle: true,
-    showHead: true,
-    onOk: () => {},
-    onCancle: () => {},
-    onRemove: () => {}
-  }
-
-  const props = { ...defaultProps, ...properties }
-
-  const updateVNode = () => {
-    const footer = [
-      props.showCancle
-        ? h(VButton, { type: 'primary', radius: false, onClick: cancle }, () => props.cancleText)
-        : null,
-      h(
-        VButton,
-        { type: 'normal', radius: false, loading: props.buttonLoading, onClick: ok },
-        () => props.okText
-      )
-    ]
-
-    vnode = createVNode(
-      Modal,
-      {
-        modelValue: props.modelValue,
-        width: props.width,
-        showHead: props.showHead,
-        footerHide: false,
-        onOk: ok,
-        onCancle: cancle
-      },
-      {
-        header: () =>
-          h('div', {
-            class: `${prefixCls}-header-inner ellipse-fir`,
-            innerHTML: props.title
-          }),
-        body: () =>
-          h('div', {
-            class: `${prefixCls}-body-inner`,
-            innerHTML: props.body
-          }),
-        footer: () => footer
-      }
-    )
-
-    render(vnode, container)
-  }
-
-  const remove = () => {
-    props.modelValue = false
-    updateVNode()
-    setTimeout(destroy, 300)
-  }
-
-  const destroy = () => {
-    render(null, container)
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    container.parentNode && container.parentNode.removeChild(container)
-    props.onRemove()
-  }
-
-  const ok = () => {
-    if (props.loading) {
-      props.buttonLoading = true
-    } else {
-      remove()
-    }
-    props.onOk()
-  }
-
-  const cancle = () => {
-    remove()
-    props.onCancle()
-  }
-
-  return {
-    show (newProps = {}) {
-      Object.assign(props, newProps)
-
-      // 👇 关键：先 render hidden
-      props.modelValue = false
-      updateVNode()
-
-      // 👇 下一帧再显示，触发 enter
-      requestAnimationFrame(() => {
-        props.modelValue = true
-        updateVNode()
-      })
-    },
-    remove,
-    component: props
-  }
-}
-// const ModalMethods:ModalInstance = {
-//   newInstance: createModalInstance,
-// }
-export { createModalInstance }

package/src/components/modal/index.ts

@@ -1,68 +0,0 @@
-/**
- * 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