zhui-plus 1.0.0 → 1.0.10

package/packages/components/message/index.ts

@@ -0,0 +1,8 @@
+export * from './src/message'
+// import { App } from 'vue'
+
+// export default {
+//   install(app: App) {
+//     app.component('BlMessage', BlMessage)
+//   }
+// }

package/packages/components/message/src/data.com.ts

@@ -0,0 +1,61 @@
+export const style = {
+  warning: {
+    icon: 'WarningFilled',
+    color: '#E6A23C',
+    backgroundColor: 'rgb(253, 246, 236)'
+  },
+  danger: {
+    icon: 'CircleCloseFilled',
+    color: '#F56C6C',
+    backgroundColor: 'rgb(254, 240, 240)'
+  },
+  success: {
+    icon: 'CircleCheckFilled',
+    color: '#67C23A',
+    backgroundColor: 'rgb(240, 249, 235)'
+  },
+  info: {
+    icon: 'InfoFilled',
+    color: '#909399',
+    backgroundColor: '#F4F4F5'
+  }
+}
+
+export const propsOption = {
+  type: {
+    type: String,
+    default: 'success',
+    validator: (value: string) => {
+      return ['primary', 'success', 'info', 'warning', 'danger'].includes(value)
+    }
+  },
+  message: {
+    type: String
+  },
+  icon: {
+    type: String
+  },
+  duration: {
+    type: Number,
+    default: 2500
+  },
+  showClose: {
+    type: Boolean,
+    default: false
+  },
+  center: {
+    type: Boolean,
+    default: false
+  },
+  onClose: {
+    type: Function
+  },
+  offset: {
+    type: Number,
+    default: 20
+  },
+  grouping: {
+    type: Boolean,
+    default: false
+  }
+}

package/packages/components/message/src/message-icon.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+  import {
+    CircleCheckFilled,
+    InfoFilled,
+    WarningFilled,
+    CircleCloseFilled
+  } from '@element-plus/icons-vue'
+  import { style } from './data.com'
+  import { computed } from 'vue'
+  const props = defineProps({
+    type: {
+      type: String,
+      default: 'success'
+    },
+    size: {
+      type: [Number, String],
+      default: 16
+    }
+  })
+  const isShow = (type: string) => {
+    return props.type === type
+  }
+  const sizeComputed = computed(() => {
+    let size = ''
+    if (typeof props.size === 'number') {
+      size = props.size + 'px'
+    } else {
+      size = props.size
+    }
+    return {
+      height: size,
+      width: size
+    }
+  })
+</script>
+
+<template>
+  <span>
+    <CircleCheckFilled
+      v-if="isShow('success')"
+      :style="{ color: style[type].color, ...sizeComputed }"
+    />
+    <InfoFilled v-if="isShow('info')" :style="{ color: style[type].color, ...sizeComputed }" />
+    <WarningFilled
+      v-if="isShow('warning')"
+      :style="{ color: style[type].color, ...sizeComputed }"
+    />
+    <CircleCloseFilled
+      v-if="isShow('danger')"
+      :style="{ color: style[type].color, ...sizeComputed }"
+    />
+  </span>
+</template>
+
+<style scoped>
+  .icon-size {
+    width: 16px;
+    height: 16px;
+  }
+</style>

package/packages/components/message/src/message.ts

@@ -0,0 +1,89 @@
+import { ComponentPublicInstance, createVNode, h, render, VNode } from 'vue'
+import BlMessage from './zh-message.vue'
+import {
+  Message,
+  MessageFn,
+  MessageOptionType,
+  MessageParams,
+  MessageParamsTyped,
+  messageTypes
+} from './message.type'
+
+const boxId = 'zh-message__function'
+const container = document.createElement('div')
+document.body.appendChild(container)
+container.id = boxId
+
+let timer: NodeJS.Timeout
+let num = 0
+const BlMessageFn: MessageFn & Partial<Message> = (props: MessageParams) => {
+  num++
+  const containItem = document.createElement('div')
+  let options: MessageOptionType = {
+    message: '',
+    duration: 3000,
+    grouping: false
+  } as MessageOptionType
+  if (typeof props === 'string') {
+    options.message = props
+  } else {
+    options = { ...options, ...props }
+    if (props.grouping) options.repeatNum = num
+  }
+  // console.log('调用了', num)
+  // 创建虚拟dom
+  const boxVNode = createVNode(BlMessage, options)
+  // 将虚拟dom渲染到container上面
+  // render(boxVNode, container)
+  renderHelper(boxVNode, containItem, options)
+  // 开启定时器，若原先存在则先进行清除
+  timer && clearTimeout(timer)
+  if (options.duration! > 0)
+    timer = setTimeout(() => {
+      num = 0
+      render(null, container)
+      // @ts-ignore
+    }, options!.duration + 50)
+  return {
+    close: () => {
+      ;(
+        boxVNode.component!.proxy as ComponentPublicInstance<{
+          visible: boolean
+        }>
+      ).visible = false
+    }
+  }
+}
+
+const renderHelper = (vm: VNode, containItem: HTMLDivElement, options: MessageOptionType) => {
+  if (options.grouping!) {
+    render(vm, container)
+  } else {
+    render(vm, containItem)
+    container.appendChild(containItem)
+  }
+}
+
+const optionHelper = (props: MessageParamsTyped, type: string) => {
+  let options: MessageOptionType = {} as MessageOptionType
+  if (typeof props === 'string') {
+    options.message = props
+    options.type = type
+  } else {
+    options = { ...props, type }
+  }
+  return options
+}
+
+messageTypes.forEach((type) => {
+  BlMessageFn[type] = (message: MessageParamsTyped) => BlMessageFn(optionHelper(message, type))
+})
+
+// const BlMessageSuccess = (message: MessageOptionType | string) =>
+//   BlMessageFn(optionHelper(message, 'success'))
+// const BlMessageWarning = (message: MessageOptionType | string) =>
+//   BlMessageFn(optionHelper(message, 'warning'))
+// const BlMessageDanger = (message: MessageOptionType | string) =>
+//   BlMessageFn(optionHelper(message, 'danger'))
+
+export { BlMessageFn }

package/packages/components/message/src/message.type.ts

@@ -0,0 +1,40 @@
+export type MessageOptionType = {
+  // 显示的信息 必填
+  message?: string
+  // 类型 默认 danger
+  type?: string
+  // 显示的时间 默认2500
+  duration?: number
+  // 是否显示关闭按钮
+  showClose?: Boolean
+  // 是否居中
+  center?: Boolean
+  // 关闭的回调函数
+  onClose?: Function
+  // 是否合并
+  grouping?: Boolean
+  repeatNum?: number
+}
+
+export const messageTypes = ['success', 'info', 'warning', 'danger'] as const
+
+export type MessageParams = MessageOptionType | string
+
+export interface MessageHandle {
+  close: () => void
+}
+
+export type MessageFn = (options: MessageParams) => MessageHandle
+
+export type MessageOptionsTyped = Omit<MessageOptionType, 'type'>
+
+export type MessageParamsTyped = Partial<MessageOptionsTyped> | string
+
+export type MessageTypedFn = (options: MessageParamsTyped) => MessageHandle
+
+export interface Message extends MessageFn {
+  success: MessageTypedFn
+  warning: MessageTypedFn
+  info: MessageTypedFn
+  danger: MessageTypedFn
+}

package/packages/components/message/src/zh-message.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+  import { onMounted, ref, watch } from 'vue'
+  import { style } from './data.com'
+  import BlBadge from '../../badge/src/zh-badge.vue'
+  import { Close } from '@element-plus/icons-vue'
+  import MessageIcon from './message-icon.vue'
+
+  const visible = ref(false)
+  const props = defineProps({
+    type: {
+      type: String,
+      default: 'info',
+      validator: (value: string) => {
+        return ['success', 'info', 'warning', 'danger'].includes(value)
+      }
+    },
+    message: {
+      type: String
+    },
+    duration: {
+      type: Number,
+      default: 3000
+    },
+    showClose: {
+      type: Boolean,
+      default: false
+    },
+    center: {
+      type: Boolean,
+      default: false
+    },
+    onClose: {
+      type: Function
+    },
+    grouping: {
+      type: Boolean,
+      default: false
+    },
+    repeatNum: {
+      type: Number,
+      default: 0
+    }
+  })
+
+  const messageRef = ref()
+  // 关闭
+  function close() {
+    visible.value = false
+    props.onClose && props.onClose(messageRef)
+  }
+
+  // 清楚定时器
+  function clearTimer() {
+    clearTimeout(timer.value)
+  }
+
+  const timer = ref()
+  function startTimer() {
+    if (props.duration > 0) {
+      timer.value = setTimeout(() => {
+        if (visible.value) close()
+      }, props.duration)
+    }
+  }
+
+  onMounted(() => {
+    // @ts-ignore
+    // console.log(style[props.type as string].icon)
+    startTimer()
+    visible.value = true
+  })
+
+  // 当合并的时候，每次有新的，以最新的关闭为准
+  watch(
+    () => props.repeatNum,
+    () => {
+      clearTimer()
+      startTimer()
+    }
+  )
+</script>
+
+<template>
+  <transition name="message">
+    <div
+      v-if="visible"
+      ref="messageRef"
+      :style="style[type]"
+      class="zh-message w-80 h-12 rounded flex items-center px-6 mb-4"
+      :class="{ 'justify-center': center }"
+    >
+      <zh-badge v-if="repeatNum > 1" :value="repeatNum" :type="type" class="zh-message__badge" />
+      <message-icon :type="type" />
+      <span class="pl-4 text-sm" v-html="message"> </span>
+      <Close v-if="showClose" class="close-btn absolute right-4 cursor-pointer" @click="close" />
+    </div>
+  </transition>
+</template>
+
+<style scoped>
+  .zh-message {
+    height: 46px;
+    width: 380px;
+    position: relative;
+    z-index: 999;
+  }
+  .zh-message__badge {
+    @apply absolute top-0 right-0 !important;
+  }
+  .close-btn {
+    width: 16px;
+    color: #aaa;
+    height: 16px;
+  }
+  .message-enter-active {
+    animation: 0.5s message-open-close;
+  }
+  .message-leave-active {
+    animation: 0.5s message-open-close;
+    animation-direction: reverse;
+  }
+
+  @keyframes message-open-close {
+    from {
+      transform: translateY(-40px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+</style>

package/packages/components/message-box/index.ts

@@ -0,0 +1,12 @@
+// import BlMessageBox from './src/zh-messagebox.vue'
+// import { App } from 'vue'
+
+export * from './src/messageBox'
+
+// export default {
+//   install(app: App) {
+//     app.component('BlMessageBox', BlMessageBox)
+//   }
+// }
+
+// export { BlMessageBox }

package/packages/components/message-box/src/messageBox.help.ts

@@ -0,0 +1,40 @@
+export interface MessageBoxTextType {
+  titleText?: string
+  messageText?: string
+  confirmText?: string
+  cancelText?: string
+}
+
+export const TextContextDefault = {
+  titleText: 'Title',
+  messageText: 'Message',
+  confirmText: 'OK',
+  cancelText: 'Cancel'
+}
+
+export type Action = 'confirm' | 'cancel' | 'close'
+
+export interface MessageBoxState {
+  title: string
+  message: string
+  confirmText: string
+  cancelText: string
+  type: 'success' | 'info' | 'warning' | 'danger'
+  boxType: 'alert' | 'confirm'
+  distinguishCancelAndClose: boolean
+  showClose: boolean
+  showCancelButton: boolean
+  center: boolean
+  action: Action
+  callback: Callback
+  showInput: boolean
+  inputValue: String
+}
+
+export type Callback = ((value: string, action: Action) => any) | ((action: Action) => any)
+
+export type MessageBoxData = MessageBoxInputData & Action
+export interface MessageBoxInputData {
+  value: string
+  action: Action
+}

package/packages/components/message-box/src/messageBox.ts

@@ -0,0 +1,126 @@
+import { Action, Callback, MessageBoxData, MessageBoxState } from './messageBox.help'
+import { ComponentPublicInstance, h, render } from 'vue'
+import ZhMessageBox from './zh-message-box.vue'
+
+const messageInstance = new Map<
+  ComponentPublicInstance<{
+    visible_: boolean
+    closed: () => void
+    state: MessageBoxState
+  }>,
+  {
+    options: any
+    callback: Callback
+    resolve: (res: any) => void
+    reject: (reason?: any) => void
+  }
+>()
+
+const container = document.createElement('div')
+document.body.appendChild(container)
+
+const initInstance = (props: any, container: HTMLDivElement) => {
+  const vNode = h(ZhMessageBox, props)
+  render(vNode, container)
+  return vNode.component
+}
+
+const showMessage = (options: any = {}) => {
+  // const container = container
+  const instacne = initInstance(options, container)
+
+  const vm = instacne?.proxy as ComponentPublicInstance<{
+    visible_: boolean
+    closed: () => void
+    state: MessageBoxState
+  }>
+  options.onAction = (action: Action) => {
+    const currentMsg = messageInstance.get(vm)!
+    let resolve: Action | { value: string; action: Action }
+    if (options.showInput) {
+      resolve = { value: vm.state.inputValue as string, action }
+    } else {
+      resolve = action
+    }
+    if (options.callback) {
+      options.callback(resolve, instacne!.proxy)
+    } else {
+      if (action === 'cancel' || action === 'close') {
+        if (options.distinguishCancelAndClose && action !== 'cancel') {
+          currentMsg.reject('close')
+        } else {
+          currentMsg.reject('cancel')
+        }
+      } else {
+        currentMsg.resolve(resolve)
+      }
+    }
+    render(null, container)
+  }
+
+  // @ts-ignore
+  vm['onAction'] = options.onAction
+
+  for (const prop in options) {
+    if (Object.hasOwn(options, prop) && !Object.hasOwn(vm.$props, prop)) {
+      // @ts-ignore
+      vm[prop as string] = options[prop]
+    }
+  }
+
+  vm.visible_ = true
+  return vm
+}
+
+async function MessageBox(options: Partial<MessageBoxState>): Promise<MessageBoxData>
+function MessageBox(
+  options: Partial<MessageBoxState> | string
+): Promise<{ value: string; action: Action } | Action> {
+  let callback: Callback
+  if (typeof options === 'string') {
+    options = {
+      message: options
+    }
+  } else {
+    callback = options.callback!
+  }
+  return new Promise((resolve, reject) => {
+    const vm = showMessage(options)
+    messageInstance.set(vm, {
+      options,
+      callback,
+      resolve,
+      reject
+    })
+  })
+}
+
+function MessageBoxFn(
+  message: string,
+  title?: string | Partial<MessageBoxState>,
+  options?: Partial<MessageBoxState>
+) {
+  let option_ = {} as Partial<MessageBoxState>
+  option_.message = message
+  if (title) {
+    if (typeof title === 'string') {
+      option_.title = title
+    } else {
+      option_ = { ...option_, ...title }
+    }
+  }
+  if (options) {
+    option_ = { ...option_, ...options }
+  }
+  return MessageBox(option_)
+}
+
+MessageBox.close = () => {
+  messageInstance.forEach((_, vm) => {
+    vm.closed()
+  })
+
+  messageInstance.clear()
+}
+
+export { MessageBoxFn }

package/packages/components/message-box/src/zh-message-box.vue

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { Close } from '@element-plus/icons-vue'
+  import UtilModal from '../../../utils/vue/util-modal.vue'
+  import { defineComponent, nextTick, reactive, ref, toRefs } from 'vue'
+  import { useNamespace } from '../../../utils/hooks/hooks.util'
+  import MessageIcon from '../../message/src/message-icon.vue'
+  import { Action, MessageBoxState } from './messageBox.help'
+  import BlButton from '../../button/src/zh-button.vue'
+  export default defineComponent({
+    name: 'BlMessageBox',
+    components: {
+      UtilModal,
+      Close,
+      MessageIcon,
+      BlButton
+    },
+    setup(props, { emit }) {
+      const ns = useNamespace('message-box')
+      const visible_ = ref(false)
+      const state = reactive<Partial<MessageBoxState>>({
+        title: '',
+        message: 'Message',
+        confirmText: 'OK',
+        cancelText: 'Cancel',
+        type: 'info',
+        boxType: 'alert',
+        distinguishCancelAndClose: false,
+        showClose: true,
+        showCancelButton: true,
+        center: false,
+        action: '' as Action,
+        showInput: false
+      })
+      // const $emit = defineEmits(['action'])
+      // 接受遮罩层事件
+      const closeModal = (e: { type: string }) => {
+        if (state.distinguishCancelAndClose && (e.type === 'click' || e.type === 'Escape')) {
+          closed('close')
+        }
+      }
+      // 关闭
+      const closed = (action: Action) => {
+        state.action = action
+        if (!visible_.value) return
+        visible_.value = false
+        nextTick(() => {
+          if (state.action) emit('action', state.action)
+        })
+      }
+      // 按钮
+      const confirmAll = (type: Action) => {
+        closed(type)
+      }
+      return {
+        ...toRefs(state),
+        confirmAll,
+        closeModal,
+        ns,
+        visible_
+      }
+    }
+  })
+</script>
+
+<template>
+  <util-modal :visible="visible_" z-index="10" @closed="closeModal">
+    <transition name="message-box">
+      <div v-show="visible_" :class="[ns.b()]">
+        <div class="flex justify-between items-center">
+          <span class="text-lg">{{ title }}</span>
+          <Close
+            v-if="showClose"
+            class="close-btn cursor-pointer"
+            @click="confirmAll('cancel')"
+          />
+        </div>
+        <div class="py-4 flex items-center">
+          <message-icon v-if="boxType === 'confirm'" class="mr-4" :type="type" size="21" />
+          <span class="text-sm text-gray-500" v-html="message"></span>
+        </div>
+        <div class="flex justify-end pt-0.5">
+          <zh-button v-if="showCancelButton" @click="confirmAll('cancel')">{{
+            cancelText
+          }}</zh-button>
+          <zh-button type="primary" @click="confirmAll('confirm')">{{ confirmText }}</zh-button>
+        </div>
+      </div>
+    </transition>
+  </util-modal>
+</template>
+
+<style scoped>
+  @import '../style/index.css';
+</style>

package/packages/components/message-box/style/index.css

@@ -0,0 +1,29 @@
+.zh-message-box {
+    width: 420px;
+    z-index: 99;
+    @apply absolute top-1/2 left-2/4 px-4 py-2 bg-white transform -translate-x-1/2 -translate-y-1/2;
+    @apply rounded;
+}
+.close-btn {
+    width: 18px;
+    color: #807f7f;
+    height: 18px;
+}
+.message-box-enter-active {
+    animation: 0.5s message-open-close;
+}
+.message-box-leave-active {
+    animation: 0.5s message-open-close;
+    animation-direction: reverse;
+}
+
+@keyframes message-open-close {
+    from {
+        transform: translateY(-40px) translateX(-50%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(-50%) translateX(-50%);
+        opacity: 1;
+    }
+}