@v-c/notification 1.0.0 → 2.0.0-rc.1

package/src/Notifications.tsx

@@ -1,14 +1,22 @@
-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 type { VueNode } from '@v-c/util/dist/type'
+import type { InnerOpenConfig, Key, NotificationListConfig, Placement, Placements, StackConfig } from './interface'
+import type { ComponentsType } from './Notification'
 import { defineComponent, shallowRef, Teleport, watch } from 'vue'
-import NoticeList from './NoticeList.tsx'
+import NotificationList, {
+  type NotificationClassNames,
+  type NotificationStyles,
+} from './NotificationList'
 
 export interface NotificationsProps {
   prefixCls?: string
   motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps)
   container?: HTMLElement | ShadowRoot
   maxCount?: number
+  pauseOnHover?: boolean
+  classNames?: NotificationClassNames
+  styles?: NotificationStyles
+  components?: ComponentsType
   className?: (placement: Placement) => string
   style?: (placement: Placement) => CSSProperties
   onAllRemoved?: VoidFunction
@@ -20,7 +28,7 @@ export interface NotificationsProps {
 }
 
 export interface NotificationsRef {
-  open: (config: OpenConfig) => void
+  open: (config: NotificationListConfig) => void
   close: (key: Key) => void
   destroy: () => void
 }
@@ -31,30 +39,25 @@ const defaults = {
 
 const Notifications = defineComponent<NotificationsProps>(
   (props = defaults, { expose }) => {
-    const configList = shallowRef<OpenConfig[]>([])
-    // ======================== Close =========================
+    const configList = shallowRef<NotificationListConfig[]>([])
+
     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?.()
+      const closableObj = closable && typeof closable === 'object' ? closable : null
+      closableObj?.onClose?.()
       config?.onClose?.()
       configList.value = configList.value.filter(item => item.key !== key)
     }
 
-    // ========================= Refs =========================
     expose({
-      open: (config: OpenConfig) => {
+      open: (config: NotificationListConfig) => {
         const list = configList.value
-        let clone = [...configList.value]
-        // Replace if exist
+        let clone = [...list]
         const index = clone.findIndex(item => item.key === config.key)
-        const innerConfig: InnerOpenConfig = {
-          ...config,
-        }
+        const innerConfig: InnerOpenConfig = { ...config }
         if (index >= 0) {
-          innerConfig.times = ((list[index] as InnerOpenConfig)?.times || 0) + 1
+          innerConfig.times = ((list[index] as InnerOpenConfig)?.times ?? 0) + 1
           clone[index] = innerConfig
         }
         else {
@@ -73,31 +76,22 @@ const Notifications = defineComponent<NotificationsProps>(
       },
     })
 
-    // ====================== 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
-      },
-    )
+    watch(configList, () => {
+      const next: Placements = {}
+      configList.value.forEach((config) => {
+        const placement = (config.placement ?? 'topRight') as Placement
+        next[placement] = next[placement] || []
+        next[placement]!.push(config)
+      })
+      // Keep existing placements so empty lists can finish leave motion.
+      Object.keys(placements.value).forEach((placement) => {
+        next[placement as Placement] = next[placement as Placement] || []
+      })
+      placements.value = next
+    })
 
-    // Clean up container if all notices fade out
     const onAllNoticeRemoved = (placement: Placement) => {
       const clone = { ...placements.value }
       const list = clone[placement] || []
@@ -107,50 +101,50 @@ const Notifications = defineComponent<NotificationsProps>(
       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
-        }
-      },
-    )
+    watch(placements, () => {
+      if (Object.keys(placements.value).length > 0) {
+        emptyRef.value = true
+      }
+      else if (emptyRef.value) {
+        props?.onAllRemoved?.()
+        emptyRef.value = false
+      }
+    })
 
     return () => {
       const { container } = props
-      const prefixCls = props.prefixCls ?? defaults.prefixCls ?? ''
-      // ======================== Render ========================
+      const prefixCls = props.prefixCls ?? defaults.prefixCls!
       if (!container) {
         return null
       }
 
       return (
         <Teleport to={container}>
-          {Object.keys(placements.value).map((placement) => {
-            const placementConfigList = placements.value[placement as Placement]
+          {Object.keys(placements.value).map((rawPlacement) => {
+            const placement = rawPlacement as Placement
+            const placementConfigList = placements.value[placement]
             const list = (
-              <NoticeList
+              <NotificationList
                 key={placement}
                 configList={placementConfigList}
-                placement={placement as Placement}
+                placement={placement}
                 prefixCls={prefixCls}
-                class={props.className?.(placement as Placement)}
-                style={props.style?.(placement as Placement)}
+                pauseOnHover={props.pauseOnHover}
+                classNames={props.classNames}
+                styles={props.styles}
+                components={props.components}
+                className={props.className?.(placement)}
+                style={props.style?.(placement)}
                 motion={props.motion}
                 stack={props.stack}
-                onAllNoticeRemoved={() => onAllNoticeRemoved(placement as Placement)}
+                onAllRemoved={onAllNoticeRemoved}
                 onNoticeClose={onNoticeClose}
               />
             )
-            return props.renderNotifications ? props.renderNotifications(list, { prefixCls, key: placement }) : list
+            return props.renderNotifications
+              ? props.renderNotifications(list, { prefixCls, key: placement })
+              : list
           })}
         </Teleport>
       )

package/src/Progress.tsx

@@ -0,0 +1,27 @@
+import type { CSSProperties } from 'vue'
+import { defineComponent } from 'vue'
+
+export interface NotificationProgressProps {
+  className?: string
+  style?: CSSProperties
+  percent: number
+}
+
+const Progress = defineComponent<NotificationProgressProps>(
+  (props) => {
+    return () => (
+      <progress
+        class={props.className}
+        max="100"
+        value={props.percent}
+        style={props.style}
+      />
+    )
+  },
+  {
+    name: 'NotificationProgress',
+    inheritAttrs: false,
+  },
+)
+
+export default Progress

package/src/hooks/useClosable.ts

@@ -0,0 +1,53 @@
+import type { AriaAttributes, ComputedRef } from 'vue'
+import type { VueNode } from '@v-c/util/dist/type'
+import pickAttrs from '@v-c/util/dist/pickAttrs'
+import { computed } from 'vue'
+
+export type ClosableConfig = {
+  closeIcon?: VueNode
+  disabled?: boolean
+  onClose?: VoidFunction
+} & AriaAttributes & Record<`data-${string}`, unknown>
+
+export type ClosableType = boolean | ClosableConfig | null | undefined
+
+export interface ParsedClosableConfig extends ClosableConfig {
+  closeIcon: VueNode
+  disabled: boolean
+}
+
+/**
+ * Normalizes the closable option into a boolean flag, parsed config, and
+ * aria props for the close button. Mirrors rc-notification@2.0 useClosable.
+ */
+export default function useClosable(
+  closable: ComputedRef<ClosableType>,
+): [ComputedRef<boolean>, ComputedRef<ParsedClosableConfig>, ComputedRef<Record<string, unknown>>] {
+  const closableObj = computed<ClosableConfig>(() => {
+    const value = closable.value
+    if (value === false) {
+      return { closeIcon: null, disabled: true }
+    }
+    if (typeof value === 'object' && value !== null) {
+      return value
+    }
+    return {}
+  })
+
+  const closableConfig = computed<ParsedClosableConfig>(() => {
+    const obj = closableObj.value
+    return {
+      ...obj,
+      closeIcon: 'closeIcon' in obj ? obj.closeIcon : '×',
+      disabled: obj.disabled ?? false,
+    }
+  })
+
+  const closableAriaProps = computed(() => pickAttrs(closableConfig.value, true))
+
+  return [
+    computed(() => !!closable.value),
+    closableConfig,
+    closableAriaProps,
+  ]
+}

package/src/hooks/useListPosition/index.ts

@@ -0,0 +1,69 @@
+import type { ComputedRef, Ref } from 'vue'
+import type { Key } from '../../interface'
+import { computed } from 'vue'
+import useSizes from './useSizes'
+
+export interface ListPositionStackConfig {
+  threshold?: number
+  offset?: number
+}
+
+/**
+ * Calculates each notification's position and the full list height.
+ * Mirrors rc-notification@2.0 useListPosition.
+ */
+export default function useListPosition(
+  configList: ComputedRef<{ key: Key }[]>,
+  stack: ComputedRef<ListPositionStackConfig | undefined>,
+  gap: Ref<number>,
+) {
+  const [sizeMap, setNodeSize] = useSizes()
+
+  const result = computed(() => {
+    let offsetY = 0
+    let nextTotalHeight = 0
+    const stackParams = stack.value
+    const stackThreshold = stackParams?.threshold ?? 0
+    const stackOffset = stackParams?.offset ?? 0
+    const notificationPosition = new Map<string, number>()
+    let topNoticeHeight: number | undefined
+    let topNoticeWidth: number | undefined
+
+    configList.value
+      .slice()
+      .reverse()
+      .forEach((config, index) => {
+        // Walk from newest to oldest so each notice can be positioned after the ones below it.
+        const key = String(config.key)
+        const height = sizeMap.value[key]?.height ?? 0
+        const y = stackParams && index > 0 ? offsetY + stackOffset - height : offsetY
+
+        notificationPosition.set(key, y)
+
+        if (index === 0) {
+          topNoticeHeight = height
+          topNoticeWidth = sizeMap.value[key]?.width ?? 0
+        }
+
+        if (!stackParams || index < stackThreshold) {
+          nextTotalHeight = Math.max(nextTotalHeight, y + height)
+        }
+
+        if (stackParams) {
+          offsetY = y + height
+        }
+        else {
+          offsetY += height + gap.value
+        }
+      })
+
+    return {
+      notificationPosition,
+      totalHeight: nextTotalHeight,
+      topNoticeHeight,
+      topNoticeWidth,
+    }
+  })
+
+  return [result, setNodeSize] as const
+}

package/src/hooks/useListPosition/useSizes.ts

@@ -0,0 +1,43 @@
+import { shallowRef } from 'vue'
+
+export interface NodeSize {
+  width: number
+  height: number
+}
+
+export type NodeSizeMap = Record<string, NodeSize>
+
+/**
+ * Stores measured node sizes by key and exposes a callback to update them.
+ * Mirrors rc-notification@2.0 useSizes.
+ */
+export default function useSizes() {
+  const sizeMap = shallowRef<NodeSizeMap>({})
+
+  const setNodeSize = (key: string, node: HTMLDivElement | null) => {
+    if (!node) {
+      if (!(key in sizeMap.value)) {
+        return
+      }
+      const next = { ...sizeMap.value }
+      delete next[key]
+      sizeMap.value = next
+      return
+    }
+
+    const nextSize: NodeSize = {
+      width: node.offsetWidth,
+      height: node.offsetHeight,
+    }
+    const prev = sizeMap.value[key]
+    if (prev && prev.width === nextSize.width && prev.height === nextSize.height) {
+      return
+    }
+    sizeMap.value = {
+      ...sizeMap.value,
+      [key]: nextSize,
+    }
+  }
+
+  return [sizeMap, setNodeSize] as const
+}

package/src/hooks/useNoticeTimer.ts

@@ -0,0 +1,85 @@
+import type { ComputedRef } from 'vue'
+import { onScopeDispose, shallowRef, watch } from 'vue'
+
+/**
+ * Runs the notice auto-close timer and reports progress updates via rAF.
+ * Returns controls to pause and resume the timer. Mirrors rc-notification@2.0
+ * useNoticeTimer.
+ */
+export default function useNoticeTimer(
+  duration: ComputedRef<number | false | null | undefined>,
+  onClose: () => void,
+  onUpdate: (percent: number) => void,
+): [() => void, () => void] {
+  const durationMs = shallowRef(0)
+  const walking = shallowRef(false)
+  let passTime = 0
+  let lastRafTime: number | null = null
+  let rafId: number | null = null
+
+  const syncPassTime = () => {
+    const now = Date.now()
+    if (lastRafTime !== null) {
+      passTime += now - lastRafTime
+    }
+    lastRafTime = now
+  }
+
+  const cancelStep = () => {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId)
+      rafId = null
+    }
+  }
+
+  const onPause = () => {
+    syncPassTime()
+    walking.value = false
+  }
+
+  const onResume = () => {
+    if (durationMs.value > 0) {
+      lastRafTime = Date.now()
+      walking.value = true
+    }
+    else {
+      onUpdate(0)
+    }
+  }
+
+  // Reset accumulated passTime whenever duration changes.
+  watch(duration, () => {
+    const next = typeof duration.value === 'number' ? duration.value : 0
+    durationMs.value = Math.max(next, 0) * 1000
+    passTime = 0
+    walking.value = durationMs.value > 0
+  }, { immediate: true })
+
+  // Drive the rAF loop while walking is true.
+  watch(walking, (isWalking) => {
+    cancelStep()
+    if (!isWalking) {
+      return
+    }
+    lastRafTime = Date.now()
+
+    const step = () => {
+      syncPassTime()
+      if (passTime >= durationMs.value) {
+        onUpdate(1)
+        onClose()
+        return
+      }
+      onUpdate(Math.min(passTime / durationMs.value, 1))
+      rafId = requestAnimationFrame(step)
+    }
+
+    step()
+  }, { immediate: true })
+
+  onScopeDispose(() => {
+    cancelStep()
+  })
+
+  return [onResume, onPause]
+}

package/src/hooks/useNotification.tsx

@@ -1,27 +1,32 @@
-import type { VueNode } from '@v-c/util/dist/type'
 import type { CSSProperties, MaybeRef, TransitionGroupProps } from 'vue'
-import type { Key, OpenConfig, Placement, StackConfig } from '../interface'
+import type { VueNode } from '@v-c/util/dist/type'
+import type { ClosableType, Key, NotificationListConfig, Placement, StackConfig } from '../interface'
+import type {
+  ComponentsType,
+} from '../Notification'
+import type { NotificationClassNames, NotificationStyles } from '../NotificationList'
 import type { NotificationsProps, NotificationsRef } from '../Notifications'
 import { computed, onMounted, shallowRef, unref, watch } from 'vue'
 import Notifications from '../Notifications'
 
 const defaultGetContainer = () => document.body
 
-type OptionalConfig = Partial<OpenConfig>
+type OptionalConfig = Partial<NotificationListConfig>
 
 export interface NotificationConfig {
   prefixCls?: string
   /** Customize container. It will repeat call which means you should return same container element. */
   getContainer?: () => HTMLElement | ShadowRoot
   motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps)
-  closeIcon?: VueNode
-  closable?:
-    | boolean
-    | ({ closeIcon?: VueNode, onClose?: VoidFunction } & Record<string, any>)
+  closable?: ClosableType
   maxCount?: number
   duration?: number | false | null
   showProgress?: boolean
   pauseOnHover?: boolean
+  placement?: Placement
+  classNames?: NotificationClassNames
+  styles?: NotificationStyles
+  components?: ComponentsType
   /** @private. Config for notification holder style. Safe to remove if refactor */
   className?: (placement: Placement) => string
   /** @private. Config for notification holder style. Safe to remove if refactor */
@@ -41,7 +46,7 @@ export interface NotificationAPI {
 
 interface OpenTask {
   type: 'open'
-  config: OpenConfig
+  config: NotificationListConfig
 }
 
 interface CloseTask {
@@ -59,26 +64,24 @@ let uniqueKey = 0
 
 function mergeConfig<T>(...objList: Partial<T>[]): T {
   const clone: any = {}
-
   objList.forEach((obj: any) => {
     if (obj) {
       Object.keys(obj).forEach((key) => {
         const val = obj[key]
-
         if (val !== undefined) {
           clone[key] = val
         }
       })
     }
   })
-
   return clone
 }
 
-export default function useNotification(rootConfig: MaybeRef<NotificationConfig> = {}) {
+export default function useNotification(
+  rootConfig: MaybeRef<NotificationConfig> = {},
+): [NotificationAPI, () => VueNode] {
   const configRef = computed(() => unref(rootConfig) || {})
   const container = shallowRef<HTMLElement | ShadowRoot>()
-
   const notificationRef = shallowRef<NotificationsRef>()
 
   const shareConfig = computed(() => {
@@ -92,6 +95,10 @@ export default function useNotification(rootConfig: MaybeRef<NotificationConfig>
       onAllRemoved,
       stack,
       renderNotifications,
+      pauseOnHover,
+      classNames,
+      styles,
+      components,
       ...restConfig
     } = configRef.value
     return restConfig
@@ -109,6 +116,10 @@ export default function useNotification(rootConfig: MaybeRef<NotificationConfig>
       prefixCls={configRef.value.prefixCls}
       motion={configRef.value.motion}
       maxCount={configRef.value.maxCount}
+      pauseOnHover={configRef.value.pauseOnHover}
+      classNames={configRef.value.classNames}
+      styles={configRef.value.styles}
+      components={configRef.value.components}
       className={configRef.value.className}
       style={configRef.value.style}
       onAllRemoved={configRef.value.onAllRemoved}
@@ -119,16 +130,13 @@ export default function useNotification(rootConfig: MaybeRef<NotificationConfig>
 
   const taskQueue = shallowRef<Task[]>([])
 
-  // ========================= Refs =========================
-
   const api: NotificationAPI = {
     open(config) {
-      const mergedConfig = mergeConfig(shareConfig.value, config)
+      const mergedConfig = mergeConfig<NotificationListConfig>(shareConfig.value as any, config)
       if (mergedConfig.key === null || mergedConfig.key === undefined) {
         mergedConfig.key = `vc-notification-${uniqueKey}`
         uniqueKey += 1
       }
-
       taskQueue.value = [...taskQueue.value, { type: 'open', config: mergedConfig }]
     },
     close(key) {
@@ -139,14 +147,9 @@ export default function useNotification(rootConfig: MaybeRef<NotificationConfig>
     },
   }
 
-  // ======================= Container ======================
-  // React 18 should all in effect that we will check container in each render
-  // Which means getContainer should be stable.
-  onMounted(
-    () => {
-      container.value = resolveContainer()
-    },
-  )
+  onMounted(() => {
+    container.value = resolveContainer()
+  })
   watch(
     () => configRef.value.getContainer,
     () => {
@@ -170,10 +173,9 @@ export default function useNotification(rootConfig: MaybeRef<NotificationConfig>
             break
         }
       })
-      taskQueue.value = taskQueue.value.filter(task => !taskQueue.value.includes(task))
+      taskQueue.value = []
     }
   })
 
-  // ======================== Return ========================
-  return [api, contextHolder] as [NotificationAPI, () => VueNode]
+  return [api, contextHolder]
 }

package/src/hooks/useStack.ts

@@ -4,25 +4,29 @@ import { computed, reactive, toRefs, unref, watchEffect } from 'vue'
 
 const DEFAULT_OFFSET = 8
 const DEFAULT_THRESHOLD = 3
-const DEFAULT_GAP = 16
 
 type StackParams = Exclude<StackConfig, boolean>
 
-type UseStack = (config?: MaybeRef<StackConfig | undefined>) => [ComputedRef<boolean>, ToRefs<StackParams>]
+type UseStack = (
+  config?: MaybeRef<StackConfig | undefined>,
+) => [ComputedRef<boolean>, ToRefs<StackParams>]
 
+/**
+ * Resolves the stack setting into an enabled flag and normalized stack params.
+ * Mirrors rc-notification@2.0 useStack. The `gap` config is no longer surfaced
+ * here — gap is now read from the list-content CSS `gap`/`row-gap`.
+ */
 const useStack: UseStack = (config) => {
   const result: StackParams = reactive({
     offset: DEFAULT_OFFSET,
     threshold: DEFAULT_THRESHOLD,
-    gap: DEFAULT_GAP,
   })
 
   watchEffect(() => {
-    const _config = unref(config)
-    if (_config && typeof _config === 'object') {
-      result.offset = _config.offset ?? DEFAULT_OFFSET
-      result.threshold = _config.threshold ?? DEFAULT_THRESHOLD
-      result.gap = _config.gap ?? DEFAULT_GAP
+    const value = unref(config)
+    if (value && typeof value === 'object') {
+      result.offset = value.offset ?? DEFAULT_OFFSET
+      result.threshold = value.threshold ?? DEFAULT_THRESHOLD
     }
   })