@keyfunc/keybricks-ds 2.7.0 → 2.8.0

package/components/feedback/_internal/MessageView.vue

@@ -1,73 +0,0 @@
-<script setup>
-import { computed, h, isVNode, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import Toast from '../Toast.vue'
-import Icon from '../../icons/Icon.vue'
-import { contentNode } from './service-utils.js'
-
-const props = defineProps({ options: { type: Object, required: true } })
-const emit = defineEmits(['close', 'height'])
-const root = ref(null)
-const tone = computed(() => props.options.type === 'error' ? 'danger' : props.options.type)
-const Content = () => contentNode(props.options.message, props.options.dangerouslyUseHTMLString)
-const CustomIcon = () => typeof props.options.icon === 'string'
-  ? h(Icon, { name: props.options.icon, size: 16 })
-  : isVNode(props.options.icon) ? props.options.icon : h(props.options.icon)
-let timer
-let observer
-let paused = false
-function stop() { clearTimeout(timer) }
-function start() {
-  stop()
-  if (!paused && props.options.duration > 0) timer = setTimeout(() => emit('close'), props.options.duration)
-}
-function onEscape(event) {
-  if (event.key === 'Escape') emit('close')
-}
-watch(() => [props.options.restart, props.options.duration], start)
-onMounted(() => {
-  start()
-  const measure = () => emit('height', root.value.getBoundingClientRect().height)
-  measure()
-  if (typeof ResizeObserver !== 'undefined') {
-    observer = new ResizeObserver(measure)
-    observer.observe(root.value)
-  }
-  document.addEventListener('keydown', onEscape)
-})
-onBeforeUnmount(() => {
-  stop()
-  observer?.disconnect()
-  document.removeEventListener('keydown', onEscape)
-})
-</script>
-
-<template>
-  <div
-    :id="options.id"
-    ref="root"
-    :class="['kb-message', options.customClass, { 'kb-message--center': options.center, 'kb-message--plain': options.plain }]"
-    :role="options.type === 'error' || options.type === 'warning' ? 'alert' : 'status'"
-    :style="{ position: 'fixed', top: `${options.top}px`, left: '50%', transform: 'translateX(-50%)', zIndex: options.zIndex ?? 'var(--z-toast)', maxWidth: '92vw' }"
-    @mouseenter="paused = true; stop()"
-    @mouseleave="paused = false; start()"
-    @focusin="paused = true; stop()"
-    @focusout="paused = false; start()"
-  >
-    <Toast
-      :tone="tone"
-      :dismissible="options.showClose"
-      :close-label="options.closeLabel"
-      :style="{ minWidth: 'min(280px, 92vw)', maxWidth: '100%', boxSizing: 'border-box', ...(options.plain ? { boxShadow: 'none' } : {}) }"
-      @close="emit('close')"
-    >
-      <template v-if="options.icon" #icon><CustomIcon /></template>
-      <Content />
-      <span v-if="options.repeatNum > 1" class="kb-message__count"> × {{ options.repeatNum }}</span>
-    </Toast>
-  </div>
-</template>
-
-<style scoped>
-.kb-message--center { text-align: center; }
-.kb-message__count { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
-</style>

package/components/feedback/message.js

@@ -1,68 +0,0 @@
-import { getCurrentInstance, isVNode, reactive } from 'vue'
-import MessageView from './_internal/MessageView.vue'
-import { mountService, resolveTarget } from './_internal/service-utils.js'
-
-const instances = []
-let seed = 0
-const normalize = value => typeof value === 'string' || typeof value === 'function' || isVNode(value)
-  ? { message: value } : { ...value }
-
-/** Vue 消息服务；样式由 Toast 提供，业务错误脱敏仍由应用处理。 */
-export function Message(value = {}, appContext) {
-  if (typeof document === 'undefined') return { close() {} }
-  const options = { type: 'info', duration: 3000, offset: 16, ...Message.defaults, ...normalize(value) }
-  const target = resolveTarget(options)
-  if (options.grouping) {
-    const existing = instances.find(item => item.target === target && item.options.message === options.message)
-    if (existing) {
-      existing.options.repeatNum++
-      existing.options.type = options.type
-      existing.options.restart++
-      return existing.handle
-    }
-  }
-  const state = reactive({ ...options, id: `kb-message-${++seed}`, repeatNum: 1, restart: 0, height: 0, top: options.offset })
-  let dispose
-  let closed = false
-  const handle = { close() {
-    if (closed) return
-    closed = true
-    instances.splice(instances.indexOf(entry), 1)
-    dispose?.()
-    reflow()
-    options.onClose?.(handle)
-  } }
-  const entry = { options: state, handle, target }
-  function reflow() {
-    const tops = new Map()
-    for (const item of instances) {
-      const target = item.target
-      item.options.top = Math.max(Number(item.options.offset) || 0, tops.get(target) || 0)
-      tops.set(target, item.options.top + item.options.height + 16)
-    }
-  }
-  instances.push(entry)
-  try {
-    dispose = mountService(MessageView, {
-      options: state, onClose: handle.close,
-      onHeight: height => { state.height = height; reflow() },
-    }, options, appContext || getCurrentInstance()?.appContext)
-  } catch (error) {
-    instances.splice(instances.indexOf(entry), 1)
-    reflow()
-    throw error
-  }
-  reflow()
-  return handle
-}
-
-for (const type of ['success', 'info', 'warning', 'error']) {
-  Message[type] = (value, appContext) => Message({ ...normalize(value), type }, appContext)
-}
-Message.closeAll = type => {
-  for (const entry of [...instances]) {
-    if (!type || entry.options.type === type) entry.handle.close()
-  }
-}
-export default Message
-Message.defaults = {}