@v-c/notification 2.0.0-beta.1 → 2.0.0-rc.2

package/src/Progress.tsx

@@ -1,23 +1,27 @@
-import type { CSSProperties, FunctionalComponent } from 'vue'
+import type { CSSProperties } from 'vue'
+import { defineComponent } from 'vue'
 
 export interface NotificationProgressProps {
-  class?: string
+  className?: string
   style?: CSSProperties
   percent: number
 }
 
-const Progress: FunctionalComponent<NotificationProgressProps> = (props) => {
-  return (
-    <progress
-      class={props.class}
-      max="100"
-      value={props.percent}
-      style={props.style}
-    />
-  )
-}
-
-Progress.props = ['class', 'style', 'percent'] as any
-Progress.inheritAttrs = false
+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

@@ -1,33 +1,30 @@
+import type { AriaAttributes, ComputedRef } from 'vue'
 import type { VueNode } from '@v-c/util/dist/type'
-import type { ComputedRef, MaybeRef } from 'vue'
 import pickAttrs from '@v-c/util/dist/pickAttrs'
-import { computed, unref } from 'vue'
+import { computed } from 'vue'
 
 export type ClosableConfig = {
   closeIcon?: VueNode
   disabled?: boolean
   onClose?: VoidFunction
-} & Record<string, any>
+} & AriaAttributes & Record<`data-${string}`, unknown>
 
 export type ClosableType = boolean | ClosableConfig | null | undefined
 
-export interface ParsedClosableConfig {
+export interface ParsedClosableConfig extends ClosableConfig {
   closeIcon: VueNode
   disabled: boolean
-  onClose?: VoidFunction
-  [key: string]: any
 }
 
 /**
- * Normalize the closable option into an enabled flag, parsed config, and aria props.
+ * 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: MaybeRef<ClosableType>): [
-  ComputedRef<boolean>,
-  ComputedRef<ParsedClosableConfig>,
-  ComputedRef<Record<string, any>>,
-] {
+export default function useClosable(
+  closable: ComputedRef<ClosableType>,
+): [ComputedRef<boolean>, ComputedRef<ParsedClosableConfig>, ComputedRef<Record<string, unknown>>] {
   const closableObj = computed<ClosableConfig>(() => {
-    const value = unref(closable)
+    const value = closable.value
     if (value === false) {
       return { closeIcon: null, disabled: true }
     }
@@ -37,8 +34,6 @@ export default function useClosable(closable: MaybeRef<ClosableType>): [
     return {}
   })
 
-  const enabled = computed(() => !!unref(closable))
-
   const closableConfig = computed<ParsedClosableConfig>(() => {
     const obj = closableObj.value
     return {
@@ -50,5 +45,9 @@ export default function useClosable(closable: MaybeRef<ClosableType>): [
 
   const closableAriaProps = computed(() => pickAttrs(closableConfig.value, true))
 
-  return [enabled, closableConfig, closableAriaProps]
+  return [
+    computed(() => !!closable.value),
+    closableConfig,
+    closableAriaProps,
+  ]
 }

package/src/hooks/useListPosition/index.ts

@@ -1,85 +1,69 @@
-import type { ComputedRef, MaybeRef } from 'vue'
-import type { StackConfig } from '../useStack'
-import { computed, unref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
+import type { Key } from '../../interface'
+import { computed } from 'vue'
 import useSizes from './useSizes'
 
-type Key = string | number | symbol
-
-export interface ConfigItem {
-  key: Key
+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: MaybeRef<readonly ConfigItem[]>,
-  stack: MaybeRef<StackConfig | undefined>,
-  gap: MaybeRef<number> = 0,
-): [
-  ComputedRef<Map<string, number>>,
-  (key: string, node: HTMLElement | null) => void,
-  ComputedRef<number>,
-  ComputedRef<number | undefined>,
-  ComputedRef<number | undefined>,
-] {
+  configList: ComputedRef<{ key: Key }[]>,
+  stack: ComputedRef<ListPositionStackConfig | undefined>,
+  gap: Ref<number>,
+) {
   const [sizeMap, setNodeSize] = useSizes()
 
   const result = computed(() => {
-    const list = unref(configList)
-    const stackValue = unref(stack)
-    const gapValue = unref(gap) ?? 0
-
     let offsetY = 0
     let nextTotalHeight = 0
-    const stackThreshold = stackValue?.threshold ?? 0
-    const positions = new Map<string, number>()
+    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
 
-    list
+    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
-          = stackValue && index > 0
-            ? offsetY + (stackValue.offset ?? 0) - height
-            : offsetY
+        const y = stackParams && index > 0 ? offsetY + stackOffset - height : offsetY
 
-        positions.set(key, y)
+        notificationPosition.set(key, y)
 
         if (index === 0) {
           topNoticeHeight = height
           topNoticeWidth = sizeMap.value[key]?.width ?? 0
         }
 
-        if (!stackValue || index < stackThreshold) {
+        if (!stackParams || index < stackThreshold) {
           nextTotalHeight = Math.max(nextTotalHeight, y + height)
         }
 
-        if (stackValue) {
+        if (stackParams) {
           offsetY = y + height
         }
         else {
-          offsetY += height + gapValue
+          offsetY += height + gap.value
         }
       })
 
     return {
-      positions,
+      notificationPosition,
       totalHeight: nextTotalHeight,
       topNoticeHeight,
       topNoticeWidth,
     }
   })
 
-  return [
-    computed(() => result.value.positions),
-    setNodeSize,
-    computed(() => result.value.totalHeight),
-    computed(() => result.value.topNoticeHeight),
-    computed(() => result.value.topNoticeWidth),
-  ]
+  return [result, setNodeSize] as const
 }

package/src/hooks/useListPosition/useSizes.ts

@@ -1,5 +1,4 @@
-import type { Ref } from 'vue'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
 export interface NodeSize {
   width: number
@@ -9,34 +8,36 @@ export interface NodeSize {
 export type NodeSizeMap = Record<string, NodeSize>
 
 /**
- * Track measured node sizes by key. Returns the size map ref and a setter callback.
+ * Stores measured node sizes by key and exposes a callback to update them.
+ * Mirrors rc-notification@2.0 useSizes.
  */
-export default function useSizes(): [
-  Ref<NodeSizeMap>,
-  (key: string, node: HTMLElement | null) => void,
-] {
-  const sizeMap = ref<NodeSizeMap>({})
+export default function useSizes() {
+  const sizeMap = shallowRef<NodeSizeMap>({})
 
-  function setNodeSize(key: string, node: HTMLElement | null) {
+  const setNodeSize = (key: string, node: HTMLDivElement | null) => {
     if (!node) {
       if (!(key in sizeMap.value)) {
         return
       }
-      const { [key]: _, ...rest } = sizeMap.value
-      sizeMap.value = rest
+      const next = { ...sizeMap.value }
+      delete next[key]
+      sizeMap.value = next
       return
     }
 
-    const next: NodeSize = {
+    const nextSize: NodeSize = {
       width: node.offsetWidth,
       height: node.offsetHeight,
     }
     const prev = sizeMap.value[key]
-    if (prev && prev.width === next.width && prev.height === next.height) {
+    if (prev && prev.width === nextSize.width && prev.height === nextSize.height) {
       return
     }
-    sizeMap.value = { ...sizeMap.value, [key]: next }
+    sizeMap.value = {
+      ...sizeMap.value,
+      [key]: nextSize,
+    }
   }
 
-  return [sizeMap, setNodeSize]
+  return [sizeMap, setNodeSize] as const
 }

package/src/hooks/useNoticeTimer.ts

@@ -1,48 +1,43 @@
-import type { ComputedRef, MaybeRef } from 'vue'
-import raf from '@v-c/util/dist/raf'
-import { computed, onBeforeUnmount, shallowRef, unref, watch } from 'vue'
+import type { ComputedRef } from 'vue'
+import { onScopeDispose, shallowRef, watch } from 'vue'
 
 /**
- * Run the auto-close timer for a notice and report progress updates.
- * Returns controls to pause and resume the timer.
+ * 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: MaybeRef<number | false | null | undefined>,
+  duration: ComputedRef<number | false | null | undefined>,
   onClose: () => void,
-  onUpdate: (ptg: number) => void,
-): [() => void, () => void, ComputedRef<number>] {
-  const durationMs = computed(() => {
-    const value = unref(duration)
-    const merged = typeof value === 'number' ? value : 0
-    return Math.max(merged, 0) * 1000
-  })
-
-  const walking = shallowRef(durationMs.value > 0)
-  const passTime = shallowRef(0)
+  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
 
-  function syncPassTime() {
+  const syncPassTime = () => {
     const now = Date.now()
     if (lastRafTime !== null) {
-      passTime.value += now - lastRafTime
+      passTime += now - lastRafTime
     }
     lastRafTime = now
   }
 
-  function cancelRaf() {
+  const cancelStep = () => {
     if (rafId !== null) {
-      raf.cancel(rafId)
+      cancelAnimationFrame(rafId)
       rafId = null
     }
   }
 
-  function onPause() {
+  const onPause = () => {
     syncPassTime()
     walking.value = false
   }
 
-  function onResume() {
+  const onResume = () => {
     if (durationMs.value > 0) {
       lastRafTime = Date.now()
       walking.value = true
@@ -52,45 +47,39 @@ export default function useNoticeTimer(
     }
   }
 
-  // Reset when durationMs changed.
-  watch(durationMs, () => {
-    passTime.value = 0
-    lastRafTime = null
+  // 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 raf loop while walking.
+  // Drive the rAF loop while walking is true.
   watch(walking, (isWalking) => {
-    cancelRaf()
+    cancelStep()
     if (!isWalking) {
       return
     }
+    lastRafTime = Date.now()
 
-    function step() {
+    const step = () => {
       syncPassTime()
-
-      if (passTime.value >= durationMs.value) {
+      if (passTime >= durationMs.value) {
         onUpdate(1)
         onClose()
+        return
       }
-      else {
-        onUpdate(Math.min(passTime.value / durationMs.value, 1))
-        rafId = raf(step)
-      }
+      onUpdate(Math.min(passTime / durationMs.value, 1))
+      rafId = requestAnimationFrame(step)
     }
 
     step()
   }, { immediate: true })
 
-  onBeforeUnmount(() => {
-    cancelRaf()
-  })
-
-  const percent = computed(() => {
-    if (durationMs.value <= 0)
-      return 0
-    return Math.min(passTime.value / durationMs.value, 1)
+  onScopeDispose(() => {
+    cancelStep()
   })
 
-  return [onResume, onPause, percent]
+  return [onResume, onPause]
 }

package/src/hooks/useNotification.tsx

@@ -1,29 +1,41 @@
-import type { VueNode } from '@v-c/util/dist/type'
 import type { CSSProperties, MaybeRef, TransitionGroupProps } from 'vue'
-import type { NotificationListConfig, Placement, StackInput } from '../NotificationList'
+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'
 
-type Key = string | number | symbol
-
 const defaultGetContainer = () => document.body
 
 type OptionalConfig = Partial<NotificationListConfig>
-type SharedConfig = Pick<
-  NotificationListConfig,
-  'placement' | 'closable' | 'duration' | 'showProgress'
->
 
-export interface NotificationConfig extends Omit<NotificationsProps, 'container'> {
-  // UI
-  placement?: Placement
+export interface NotificationConfig {
+  prefixCls?: string
+  /** Customize container. It will repeat call which means you should return same container element. */
   getContainer?: () => HTMLElement | ShadowRoot
-
-  // Behavior
-  closable?: NotificationListConfig['closable']
+  motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps)
+  closable?: ClosableType
+  maxCount?: number
   duration?: number | false | null
-  showProgress?: NotificationListConfig['showProgress']
+  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 */
+  style?: (placement: Placement) => CSSProperties
+  /** @private Trigger when all the notification closed. */
+  onAllRemoved?: VoidFunction
+  stack?: StackConfig
+  /** @private Slot for style in Notifications */
+  renderNotifications?: NotificationsProps['renderNotifications']
 }
 
 export interface NotificationAPI {
@@ -51,13 +63,13 @@ type Task = OpenTask | CloseTask | DestroyTask
 let uniqueKey = 0
 
 function mergeConfig<T>(...objList: Partial<T>[]): T {
-  const clone = {} as T
-  objList.forEach((obj) => {
+  const clone: any = {}
+  objList.forEach((obj: any) => {
     if (obj) {
       Object.keys(obj).forEach((key) => {
-        const value = (obj as any)[key]
-        if (value !== undefined) {
-          ;(clone as any)[key] = value
+        const val = obj[key]
+        if (val !== undefined) {
+          clone[key] = val
         }
       })
     }
@@ -70,15 +82,29 @@ export default function useNotification(
 ): [NotificationAPI, () => VueNode] {
   const configRef = computed(() => unref(rootConfig) || {})
   const container = shallowRef<HTMLElement | ShadowRoot>()
-  const notificationsRef = shallowRef<NotificationsRef>()
-  const taskQueue = shallowRef<Task[]>([])
-
-  const shareConfig = computed<SharedConfig>(() => {
-    const { placement, closable, duration, showProgress } = configRef.value
-    return { placement, closable, duration, showProgress }
+  const notificationRef = shallowRef<NotificationsRef>()
+
+  const shareConfig = computed(() => {
+    const {
+      getContainer,
+      motion,
+      prefixCls,
+      maxCount,
+      className,
+      style,
+      onAllRemoved,
+      stack,
+      renderNotifications,
+      pauseOnHover,
+      classNames,
+      styles,
+      components,
+      ...restConfig
+    } = configRef.value
+    return restConfig
   })
 
-  function resolveContainer() {
+  const resolveContainer = () => {
     const getContainer = configRef.value.getContainer || defaultGetContainer
     return getContainer()
   }
@@ -86,30 +112,32 @@ export default function useNotification(
   const contextHolder = () => (
     <Notifications
       container={container.value}
-      ref={notificationsRef as any}
+      ref={notificationRef}
       prefixCls={configRef.value.prefixCls}
-      motion={configRef.value.motion as TransitionGroupProps | ((p: Placement) => TransitionGroupProps) | undefined}
+      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 as ((p: Placement) => CSSProperties) | undefined}
+      style={configRef.value.style}
       onAllRemoved={configRef.value.onAllRemoved}
-      stack={configRef.value.stack as StackInput | undefined}
+      stack={configRef.value.stack}
       renderNotifications={configRef.value.renderNotifications}
     />
   )
 
+  const taskQueue = shallowRef<Task[]>([])
+
   const api: NotificationAPI = {
     open(config) {
-      const merged = mergeConfig<NotificationListConfig>(shareConfig.value, config as any)
-      if (merged.key === null || merged.key === undefined) {
-        merged.key = `vc-notification-${uniqueKey}`
+      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: merged }]
+      taskQueue.value = [...taskQueue.value, { type: 'open', config: mergedConfig }]
     },
     close(key) {
       taskQueue.value = [...taskQueue.value, { type: 'close', key }]
@@ -128,24 +156,24 @@ export default function useNotification(
       container.value = resolveContainer()
     },
   )
-
   watch(taskQueue, () => {
-    if (notificationsRef.value && taskQueue.value.length) {
-      const tasks = taskQueue.value
-      tasks.forEach((task) => {
+    if (notificationRef.value && taskQueue.value.length) {
+      taskQueue.value.forEach((task) => {
         switch (task.type) {
           case 'open':
-            notificationsRef.value?.open(task.config)
+            notificationRef.value?.open(task.config)
             break
           case 'close':
-            notificationsRef.value?.close(task.key)
+            notificationRef.value?.close(task.key)
             break
           case 'destroy':
-            notificationsRef.value?.destroy()
+            notificationRef.value?.destroy()
+            break
+          default:
             break
         }
       })
-      taskQueue.value = taskQueue.value.filter(task => !tasks.includes(task))
+      taskQueue.value = []
     }
   })
 

package/src/hooks/useStack.ts

@@ -1,40 +1,36 @@
-import type { ComputedRef, MaybeRef } from 'vue'
-import { computed, unref } from 'vue'
-
-export interface StackConfig {
-  threshold?: number
-  offset?: number
-}
+import type { ComputedRef, MaybeRef, ToRefs } from 'vue'
+import type { StackConfig } from '../interface'
+import { computed, reactive, toRefs, unref, watchEffect } from 'vue'
 
 const DEFAULT_OFFSET = 8
 const DEFAULT_THRESHOLD = 3
 
-type StackParams = Required<StackConfig>
-
-export type StackInput = boolean | StackConfig
+type StackParams = Exclude<StackConfig, boolean>
 
 type UseStack = (
-  config?: MaybeRef<StackInput | undefined>,
-) => [ComputedRef<boolean>, ComputedRef<StackParams>]
-
+  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 enabled = computed(() => !!unref(config))
+  const result: StackParams = reactive({
+    offset: DEFAULT_OFFSET,
+    threshold: DEFAULT_THRESHOLD,
+  })
 
-  const params = computed<StackParams>(() => {
+  watchEffect(() => {
     const value = unref(config)
     if (value && typeof value === 'object') {
-      return {
-        offset: value.offset ?? DEFAULT_OFFSET,
-        threshold: value.threshold ?? DEFAULT_THRESHOLD,
-      }
-    }
-    return {
-      offset: DEFAULT_OFFSET,
-      threshold: DEFAULT_THRESHOLD,
+      result.offset = value.offset ?? DEFAULT_OFFSET
+      result.threshold = value.threshold ?? DEFAULT_THRESHOLD
     }
   })
 
-  return [enabled, params]
+  return [computed(() => !!unref(config)), toRefs(result)]
 }
 
 export default useStack