@v-c/notification 0.0.2

package/docs/showProgress.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useNotification } from '../src'
+import motion from './motion.ts'
+import './index.less'
+
+const [notice, contextHolder] = useNotification({ showProgress: true, motion })
+</script>
+
+<template>
+  <button
+    @click="() => {
+      notice.open({
+        content: `${new Date().toISOString()}`,
+      });
+    }"
+  >
+    Show With Progress
+  </button>
+  <button
+    @click="() => {
+      notice.open({
+        content: `${new Date().toISOString()}`,
+        pauseOnHover: false,
+      });
+    }"
+  >
+    Not Pause On Hover
+  </button>
+  <contextHolder />
+</template>
+
+<style scoped>
+
+</style>

package/docs/stack.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useNotification } from '../src'
+import motion from './motion.ts'
+import './index.less'
+
+const [{ open }, contextHolder] = useNotification({ motion, stack: true })
+
+function getConfig() {
+  return {
+    content: `${Array.from({ length: Math.round(Math.random() * 5) + 1 })
+      .fill(1)
+      .map(() => new Date().toISOString())
+      .join('\n')}`,
+    duration: null,
+  }
+}
+</script>
+
+<template>
+  <button
+    @click="() => {
+      open(getConfig());
+    }"
+  >
+    Top Right
+  </button>
+  <button
+    @click="() => {
+      open({ ...getConfig(), placement: 'bottomRight' });
+    }"
+  >
+    Bottom Right
+  </button>
+  <contextHolder />
+</template>
+
+<style scoped>
+
+</style>

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@v-c/notification",
+  "type": "module",
+  "version": "0.0.2",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@v-c/util": "0.0.16"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "prepublish": "pnpm build",
+    "bump": "bumpp --release patch"
+  }
+}

package/src/Notice.tsx

@@ -0,0 +1,212 @@
+import type { CSSProperties } from 'vue'
+import type { Key, NoticeConfig } from './interface.ts'
+import { classNames } from '@v-c/util'
+import KeyCode from '@v-c/util/dist/KeyCode'
+import pickAttrs from '@v-c/util/dist/pickAttrs'
+import { computed, defineComponent, shallowRef, watch } from 'vue'
+
+export interface NoticeProps extends Omit<NoticeConfig, 'onClose'> {
+  prefixCls: string
+  eventKey: Key
+  onClick?: (event: Event) => void
+  onNoticeClose?: (key: Key) => void
+  hovering?: boolean
+  props?: Record<string, any>
+}
+
+const defaults = {
+  duration: 4.5,
+  pauseOnHover: true,
+  closeIcon: 'x',
+} as const
+
+const Notify = defineComponent<NoticeProps & { times?: number }>((props, { attrs }) => {
+  const hovering = shallowRef(false)
+  const percent = shallowRef(0)
+  const spentTime = shallowRef(0)
+
+  const mergedHovering = computed(() => props.hovering || hovering.value)
+  const mergedDuration = computed(() => {
+    if (typeof props.duration === 'number') {
+      return props.duration
+    }
+    if (props.duration === undefined) {
+      return defaults.duration
+    }
+    return 0
+  })
+  const mergedPauseOnHover = computed(() =>
+    props.pauseOnHover === undefined ? defaults.pauseOnHover : props.pauseOnHover,
+  )
+  const mergedShowProgress = computed(() => mergedDuration.value > 0 && props.showProgress)
+  const mergedCloseIcon = computed(() => props.closeIcon ?? defaults.closeIcon)
+
+  // ======================== Close =========================
+  const onInternalClose = () => {
+    props.onNoticeClose?.(props.eventKey)
+  }
+
+  const onCloseKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter' || e.code === 'Enter' || e.keyCode === KeyCode.ENTER) {
+      onInternalClose()
+    }
+  }
+
+  // ======================== Timing ========================
+  watch([
+    () => props.times,
+    mergedDuration,
+    mergedHovering,
+  ], (_n, _, onCleanup) => {
+    const duration = mergedDuration.value
+    const hoveringValue = mergedHovering.value
+    const pauseOnHover = mergedPauseOnHover.value
+    if (!hoveringValue && duration > 0) {
+      const start = Date.now() - spentTime.value
+      const timeoutId = window.setTimeout(() => {
+        onInternalClose()
+      }, duration * 1000 - spentTime.value)
+
+      onCleanup(() => {
+        if (pauseOnHover) {
+          clearTimeout(timeoutId)
+        }
+        spentTime.value = Date.now() - start
+      })
+    }
+  }, {
+    immediate: true,
+  })
+
+  // ===================== Progress Bar =====================
+  watch([
+    () => props.times,
+    mergedDuration,
+    spentTime,
+    mergedHovering,
+    mergedShowProgress,
+  ], (_n, _, onCleanup) => {
+    const hoveringValue = mergedHovering.value
+    const showProgress = mergedShowProgress.value
+    const pauseOnHover = mergedPauseOnHover.value
+    const duration = mergedDuration.value
+    const baseSpentTime = spentTime.value
+
+    if (!hoveringValue && showProgress && (pauseOnHover || baseSpentTime === 0)) {
+      const start = performance.now()
+      let animationFrame = 0
+
+      const calculate = () => {
+        cancelAnimationFrame(animationFrame)
+        animationFrame = requestAnimationFrame((timestamp) => {
+          const runtime = timestamp + baseSpentTime - start
+          const progress = Math.min(runtime / (duration * 1000), 1)
+          percent.value = progress * 100
+          if (progress < 1) {
+            calculate()
+          }
+        })
+      }
+
+      calculate()
+
+      onCleanup(() => {
+        if (pauseOnHover) {
+          cancelAnimationFrame(animationFrame)
+        }
+      })
+    }
+  }, {
+    immediate: true,
+  })
+
+  return () => {
+    const {
+      closable,
+      prefixCls,
+      props: divProps,
+      onClick,
+      content,
+      className,
+      style,
+    } = props
+
+    // ======================== Closable ========================
+    const closableConfig
+      = typeof closable === 'object' && closable !== null
+        ? closable
+        : closable
+          ? { closeIcon: mergedCloseIcon.value }
+          : {}
+    const ariaProps = pickAttrs(closableConfig, true)
+
+    // ======================== Progress ========================
+    const safePercent = percent.value <= 0 ? 0 : percent.value > 100 ? 100 : percent.value
+    const validPercent = 100 - safePercent
+
+    // ======================== Render ========================
+    const noticePrefixCls = `${prefixCls}-notice`
+
+    const mergedStyle: CSSProperties = {
+      ...(typeof divProps?.style === 'object' && divProps?.style ? divProps.style : {}),
+      ...(typeof (attrs as any).style === 'object' && (attrs as any).style ? (attrs as any).style : {}),
+      ...(typeof style === 'object' && style ? style : {}),
+    }
+
+    return (
+      <div
+        {...divProps}
+        class={
+          classNames(
+            noticePrefixCls,
+            className,
+            (attrs as any).class,
+            {
+              [`${noticePrefixCls}-closable`]: !!closable,
+            },
+          )
+        }
+        style={mergedStyle}
+        onMouseenter={(e: MouseEvent) => {
+          hovering.value = true
+          divProps?.onMouseEnter?.(e)
+        }}
+        onMouseleave={(e: MouseEvent) => {
+          hovering.value = false
+          divProps?.onMouseLeave?.(e)
+        }}
+        onClick={onClick}
+      >
+        {/* Content */}
+        <div class={`${noticePrefixCls}-content`}>{content}</div>
+
+        {/* Close Icon */}
+        {closable && (
+          <button
+            type="button"
+            class={`${noticePrefixCls}-close`}
+            onKeydown={onCloseKeyDown}
+            aria-label="Close"
+            {...ariaProps}
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              onInternalClose()
+            }}
+          >
+            {closableConfig.closeIcon ?? mergedCloseIcon.value}
+          </button>
+        )}
+
+        {/* Progress Bar */}
+        {mergedShowProgress.value && (
+          <progress class={`${noticePrefixCls}-progress`} max="100" value={validPercent}>
+            {`${validPercent}%`}
+          </progress>
+        )}
+      </div>
+    )
+  }
+})
+
+export default Notify

package/src/NoticeList.tsx

@@ -0,0 +1,203 @@
+import type { CSSProperties, TransitionGroupProps } from 'vue'
+import type { InnerOpenConfig, Key, NoticeConfig, OpenConfig, Placement, StackConfig } from './interface.ts'
+import { classNames as clsx } from '@v-c/util'
+import { getTransitionGroupProps } from '@v-c/util/dist/utils/transition'
+import { unrefElement } from '@v-c/util/dist/vueuse/unref-element'
+import { computed, defineComponent, reactive, ref, shallowRef, toRef, TransitionGroup, watch, watchEffect } from 'vue'
+import useStack from './hooks/useStack.ts'
+import Notice from './Notice.tsx'
+import { useNotificationContext } from './NotificationProvider.tsx'
+
+export interface NoticeListProps {
+  configList?: OpenConfig[]
+  placement?: Placement
+  prefixCls?: string
+  motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps)
+  stack?: StackConfig
+
+  // Events
+  onAllNoticeRemoved?: (placement: Placement) => void
+  onNoticeClose?: (key: Key) => void
+}
+
+const NoticeList = defineComponent<NoticeListProps>((props, { attrs }) => {
+  const ctx = useNotificationContext()
+  const dictRef = reactive<Record<string, HTMLDivElement | undefined>>({})
+  const keys = computed(() =>
+    (props.configList ?? []).map(config => ({
+      config,
+      key: String(config.key),
+    })),
+  )
+  const latestNotice = shallowRef<HTMLDivElement | null>(null)
+  const hoverKeys = ref<string[]>([])
+
+  const stackConfig = toRef(props, 'stack')
+  const [stackEnabled, stackOptions] = useStack(stackConfig)
+  const expanded = computed(
+    () =>
+      stackEnabled.value
+      && (hoverKeys.value.length > 0 || keys.value.length <= stackOptions.threshold!.value!),
+  )
+  const placementMotion = computed(() => {
+    if (typeof props.motion === 'function') {
+      return props.placement ? props.motion(props.placement) : undefined
+    }
+    return props.motion
+  })
+
+  // Clean hover key
+  watch([hoverKeys, keys, stackEnabled], () => {
+    if (stackEnabled.value && hoverKeys.value.length > 1) {
+      hoverKeys.value = hoverKeys.value.filter(key =>
+        keys.value.some(({ key: dataKey }) => key === dataKey),
+      )
+    }
+  })
+
+  // Sync latest notice after DOM updates so collapsed stack uses accurate height
+  watchEffect(
+    () => {
+      if (!stackEnabled.value) {
+        latestNotice.value = null
+        return
+      }
+
+      const lastKey = keys.value[keys.value.length - 1]?.key
+      latestNotice.value = lastKey ? dictRef[lastKey] ?? null : null
+    },
+    { flush: 'post' },
+  )
+
+  const checkAllClosed = () => {
+    if (!props.placement) {
+      return
+    }
+    if (keys.value.length === 0) {
+      props.onAllNoticeRemoved?.(props.placement)
+    }
+  }
+
+  return () => {
+    const { prefixCls = '', placement = 'topRight', onNoticeClose } = props
+
+    const renderNotify = () =>
+      keys.value.map(({ config }, motionIndex) => {
+        const { key, times } = config as InnerOpenConfig
+        const strKey = String(key)
+        const {
+          className: configClassName,
+          style: configStyle,
+          classNames: configClassNames,
+          styles: configStyles,
+          ...restConfig
+        } = config as NoticeConfig
+        const dataIndex = keys.value.findIndex(item => item.key === strKey)
+        const stackStyle: CSSProperties = {}
+
+        if (stackEnabled.value) {
+          const index = keys.value.length - 1 - (dataIndex > -1 ? dataIndex : motionIndex - 1)
+          const transformX = placement === 'top' || placement === 'bottom' ? '-50%' : '0'
+          if (index > 0) {
+            stackStyle.height = expanded.value
+              ? dictRef[strKey]?.offsetHeight
+              : latestNotice.value?.offsetHeight
+            if (stackStyle.height && typeof stackStyle.height === 'number') {
+              stackStyle.height = `${stackStyle.height}px`
+            }
+            let verticalOffset = 0
+            for (let i = 0; i < index; i += 1) {
+              const targetKey = keys.value[keys.value.length - 1 - i]?.key
+              const node = targetKey ? dictRef[targetKey] : null
+              verticalOffset += (node?.offsetHeight ?? 0) + stackOptions.gap!.value!
+            }
+
+            const transformY
+              = (expanded.value ? verticalOffset : index * stackOptions.offset!.value!)
+                * (placement.startsWith('top') ? 1 : -1)
+            const currentWidth = dictRef[strKey]?.offsetWidth
+            const latestWidth = latestNotice.value?.offsetWidth
+            const scaleX
+              = !expanded.value && latestWidth && currentWidth
+                ? (latestWidth - stackOptions.offset!.value! * 2 * (index < 3 ? index : 3))
+                / currentWidth
+                : 1
+            stackStyle.transform = `translate3d(${transformX}, ${transformY}px, 0) scaleX(${scaleX})`
+          }
+          else {
+            stackStyle.transform = `translate3d(${transformX}, 0, 0)`
+          }
+        }
+        return (
+          <div
+            key={strKey}
+            class={clsx(`${prefixCls}-notice-wrapper`, configClassNames?.wrapper)}
+            style={{
+              ...stackStyle,
+              ...configStyles?.wrapper,
+            }}
+            onMouseenter={() => {
+              hoverKeys.value = hoverKeys.value.includes(strKey)
+                ? hoverKeys.value
+                : [...hoverKeys.value, strKey]
+            }}
+            onMouseleave={() => {
+              hoverKeys.value = hoverKeys.value.filter(k => k !== strKey)
+            }}
+          >
+            <Notice
+              {...restConfig as any}
+              ref={(el) => {
+                const element = unrefElement<HTMLDivElement>(el as any) ?? undefined
+                if (dataIndex > -1) {
+                  dictRef[strKey] = element
+                }
+                else {
+                  delete dictRef[strKey]
+                }
+              }}
+              prefixCls={prefixCls}
+              classNames={configClassNames}
+              styles={configStyles}
+              class={clsx(configClassName, (ctx.value as any)?.classNames?.notice)}
+              style={configStyle}
+              times={times}
+              eventKey={key}
+              onNoticeClose={onNoticeClose}
+              hovering={stackEnabled.value && hoverKeys.value.length > 0}
+            />
+          </div>
+        )
+      })
+    let motionGroupProps: TransitionGroupProps = {}
+    if (placementMotion.value) {
+      motionGroupProps = getTransitionGroupProps(placementMotion.value.name!, placementMotion.value)
+    }
+    return (
+      <TransitionGroup
+        key={placement}
+        tag="div"
+        appear
+        {...{
+          class: clsx(
+            prefixCls,
+            `${prefixCls}-${placement}`,
+            (ctx.value as any)?.classNames?.list,
+            (attrs as any).class,
+            {
+              [`${prefixCls}-stack-expanded`]: expanded.value,
+              [`${prefixCls}-stack`]: stackEnabled.value,
+            },
+          ),
+          style: (attrs as any).style,
+        }}
+        {...motionGroupProps}
+        onAfterLeave={checkAllClosed}
+      >
+        {renderNotify()}
+      </TransitionGroup>
+    )
+  }
+})
+
+export default NoticeList

package/src/NotificationProvider.tsx

@@ -0,0 +1,19 @@
+import type { InjectionKey, Ref } from 'vue'
+import { inject, provide, ref } from 'vue'
+
+export interface NotificationContextProps {
+  classNames?: {
+    notice?: string
+    list?: string
+  }
+}
+export const NotificationContext: InjectionKey<Ref<NotificationContextProps>> = Symbol('NotificationContext')
+
+export function useNotificationProvider(props: Ref<NotificationContextProps>) {
+  provide(NotificationContext, props)
+  return props
+}
+
+export function useNotificationContext() {
+  return inject(NotificationContext, ref({}))
+}

package/src/Notifications.tsx

@@ -0,0 +1,164 @@
+import type { VueNode } from '@v-c/util/dist/type'
+import type { CSSProperties, TransitionGroupProps } from 'vue'
+import type { InnerOpenConfig, Key, OpenConfig, Placement, Placements, StackConfig } from './interface.ts'
+import { defineComponent, shallowRef, Teleport, watch } from 'vue'
+import NoticeList from './NoticeList.tsx'
+
+export interface NotificationsProps {
+  prefixCls?: string
+  motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps)
+  container?: HTMLElement | ShadowRoot
+  maxCount?: number
+  className?: (placement: Placement) => string
+  style?: (placement: Placement) => CSSProperties
+  onAllRemoved?: VoidFunction
+  stack?: StackConfig
+  renderNotifications?: (
+    node: VueNode,
+    info: { prefixCls: string, key: Key },
+  ) => VueNode
+}
+
+export interface NotificationsRef {
+  open: (config: OpenConfig) => void
+  close: (key: Key) => void
+  destroy: () => void
+}
+
+const defaults = {
+  prefixCls: 'vc-notification',
+} as NotificationsProps
+
+const Notifications = defineComponent<NotificationsProps>(
+  (props = defaults, { expose }) => {
+    const configList = shallowRef<OpenConfig[]>([])
+    // ======================== Close =========================
+    const onNoticeClose = (key: Key) => {
+      // Trigger close event
+      const config = configList.value.find(item => item.key === key)
+      const closable = config?.closable
+      const closableObj = closable && typeof closable === 'object' ? closable : {}
+      closableObj.onClose?.()
+      config?.onClose?.()
+      configList.value = configList.value.filter(item => item.key !== key)
+    }
+
+    // ========================= Refs =========================
+    expose({
+      open: (config: OpenConfig) => {
+        const list = configList.value
+        let clone = [...configList.value]
+        // Replace if exist
+        const index = clone.findIndex(item => item.key === config.key)
+        const innerConfig: InnerOpenConfig = {
+          ...config,
+        }
+        if (index >= 0) {
+          innerConfig.times = ((list[index] as InnerOpenConfig)?.times || 0) + 1
+          clone[index] = innerConfig
+        }
+        else {
+          innerConfig.times = 0
+          clone.push(innerConfig)
+        }
+        const maxCount = props.maxCount ?? 0
+        if (maxCount > 0 && clone.length > maxCount) {
+          clone = clone.slice(-maxCount)
+        }
+        configList.value = clone
+      },
+      close: onNoticeClose,
+      destroy: () => {
+        configList.value = []
+      },
+    })
+
+    // ====================== Placements ======================
+
+    const placements = shallowRef<Placements>({})
+
+    watch(
+      configList,
+      () => {
+        const nextPlacements: Placements = {}
+        configList.value.forEach((config) => {
+          const { placement = 'topRight' } = config
+          if (placement) {
+            nextPlacements[placement] = nextPlacements[placement] || []
+            nextPlacements[placement].push(config)
+          }
+        })
+        // Fill exist placements to avoid empty list causing remove without motion
+        Object.keys(placements.value).forEach((_placement) => {
+          const placement = _placement as Placement
+          nextPlacements[placement] = nextPlacements[placement] || []
+        })
+        placements.value = nextPlacements
+      },
+    )
+
+    // Clean up container if all notices fade out
+    const onAllNoticeRemoved = (placement: Placement) => {
+      const clone = { ...placements.value }
+      const list = clone[placement] || []
+      if (!list.length) {
+        delete clone[placement]
+      }
+      placements.value = clone
+    }
+
+    // Effect tell that placements is empty now
+    const emptyRef = shallowRef(false)
+
+    watch(
+      placements,
+      () => {
+        if (Object.keys(placements.value).length > 0) {
+          emptyRef.value = true
+        }
+        else if (emptyRef.value) {
+        // Trigger only when from exist to empty
+          props?.onAllRemoved?.()
+          emptyRef.value = false
+        }
+      },
+    )
+
+    return () => {
+      const { container } = props
+      const prefixCls = props.prefixCls ?? defaults.prefixCls ?? ''
+      // ======================== Render ========================
+      if (!container) {
+        return null
+      }
+
+      return (
+        <Teleport to={container}>
+          {Object.keys(placements.value).map((placement) => {
+            const placementConfigList = placements.value[placement as Placement]
+            const list = (
+              <NoticeList
+                key={placement}
+                configList={placementConfigList}
+                placement={placement as Placement}
+                prefixCls={prefixCls}
+                class={props.className?.(placement as Placement)}
+                style={props.style?.(placement as Placement)}
+                motion={props.motion}
+                stack={props.stack}
+                onAllNoticeRemoved={() => onAllNoticeRemoved(placement as Placement)}
+                onNoticeClose={onNoticeClose}
+              />
+            )
+            return props.renderNotifications ? props.renderNotifications(list, { prefixCls, key: placement }) : list
+          })}
+        </Teleport>
+      )
+    }
+  },
+  {
+    name: 'Notifications',
+  },
+)
+
+export default Notifications