@v-c/notification 0.0.3 → 2.0.0-beta.1

package/src/hooks/useListPosition/index.ts

@@ -0,0 +1,85 @@
+import type { ComputedRef, MaybeRef } from 'vue'
+import type { StackConfig } from '../useStack'
+import { computed, unref } from 'vue'
+import useSizes from './useSizes'
+
+type Key = string | number | symbol
+
+export interface ConfigItem {
+  key: Key
+}
+
+/**
+ * Calculates each notification's position and the full list height.
+ */
+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>,
+] {
+  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>()
+    let topNoticeHeight: number | undefined
+    let topNoticeWidth: number | undefined
+
+    list
+      .slice()
+      .reverse()
+      .forEach((config, index) => {
+        const key = String(config.key)
+        const height = sizeMap.value[key]?.height ?? 0
+        const y
+          = stackValue && index > 0
+            ? offsetY + (stackValue.offset ?? 0) - height
+            : offsetY
+
+        positions.set(key, y)
+
+        if (index === 0) {
+          topNoticeHeight = height
+          topNoticeWidth = sizeMap.value[key]?.width ?? 0
+        }
+
+        if (!stackValue || index < stackThreshold) {
+          nextTotalHeight = Math.max(nextTotalHeight, y + height)
+        }
+
+        if (stackValue) {
+          offsetY = y + height
+        }
+        else {
+          offsetY += height + gapValue
+        }
+      })
+
+    return {
+      positions,
+      totalHeight: nextTotalHeight,
+      topNoticeHeight,
+      topNoticeWidth,
+    }
+  })
+
+  return [
+    computed(() => result.value.positions),
+    setNodeSize,
+    computed(() => result.value.totalHeight),
+    computed(() => result.value.topNoticeHeight),
+    computed(() => result.value.topNoticeWidth),
+  ]
+}

package/src/hooks/useListPosition/useSizes.ts

@@ -0,0 +1,42 @@
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+
+export interface NodeSize {
+  width: number
+  height: number
+}
+
+export type NodeSizeMap = Record<string, NodeSize>
+
+/**
+ * Track measured node sizes by key. Returns the size map ref and a setter callback.
+ */
+export default function useSizes(): [
+  Ref<NodeSizeMap>,
+  (key: string, node: HTMLElement | null) => void,
+] {
+  const sizeMap = ref<NodeSizeMap>({})
+
+  function setNodeSize(key: string, node: HTMLElement | null) {
+    if (!node) {
+      if (!(key in sizeMap.value)) {
+        return
+      }
+      const { [key]: _, ...rest } = sizeMap.value
+      sizeMap.value = rest
+      return
+    }
+
+    const next: NodeSize = {
+      width: node.offsetWidth,
+      height: node.offsetHeight,
+    }
+    const prev = sizeMap.value[key]
+    if (prev && prev.width === next.width && prev.height === next.height) {
+      return
+    }
+    sizeMap.value = { ...sizeMap.value, [key]: next }
+  }
+
+  return [sizeMap, setNodeSize]
+}

package/src/hooks/useNoticeTimer.ts

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

package/src/hooks/useNotification.tsx

@@ -1,36 +1,29 @@
 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 { NotificationListConfig, Placement, StackInput } 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<OpenConfig>
+type OptionalConfig = Partial<NotificationListConfig>
+type SharedConfig = Pick<
+  NotificationListConfig,
+  'placement' | 'closable' | 'duration' | 'showProgress'
+>
 
-export interface NotificationConfig {
-  prefixCls?: string
-  /** Customize container. It will repeat call which means you should return same container element. */
+export interface NotificationConfig extends Omit<NotificationsProps, 'container'> {
+  // UI
+  placement?: Placement
   getContainer?: () => HTMLElement | ShadowRoot
-  motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps)
-  closeIcon?: VueNode
-  closable?:
-    | boolean
-    | ({ closeIcon?: VueNode, onClose?: VoidFunction } & Record<string, any>)
-  maxCount?: number
+
+  // Behavior
+  closable?: NotificationListConfig['closable']
   duration?: number | false | null
-  showProgress?: boolean
-  pauseOnHover?: boolean
-  /** @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']
+  showProgress?: NotificationListConfig['showProgress']
 }
 
 export interface NotificationAPI {
@@ -41,7 +34,7 @@ export interface NotificationAPI {
 
 interface OpenTask {
   type: 'open'
-  config: OpenConfig
+  config: NotificationListConfig
 }
 
 interface CloseTask {
@@ -58,46 +51,34 @@ type Task = OpenTask | CloseTask | DestroyTask
 let uniqueKey = 0
 
 function mergeConfig<T>(...objList: Partial<T>[]): T {
-  const clone: any = {}
-
-  objList.forEach((obj: any) => {
+  const clone = {} as T
+  objList.forEach((obj) => {
     if (obj) {
       Object.keys(obj).forEach((key) => {
-        const val = obj[key]
-
-        if (val !== undefined) {
-          clone[key] = val
+        const value = (obj as any)[key]
+        if (value !== undefined) {
+          ;(clone as any)[key] = value
         }
       })
     }
   })
-
   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 notificationsRef = shallowRef<NotificationsRef>()
+  const taskQueue = shallowRef<Task[]>([])
 
-  const notificationRef = shallowRef<NotificationsRef>()
-
-  const shareConfig = computed(() => {
-    const {
-      getContainer,
-      motion,
-      prefixCls,
-      maxCount,
-      className,
-      style,
-      onAllRemoved,
-      stack,
-      renderNotifications,
-      ...restConfig
-    } = configRef.value
-    return restConfig
+  const shareConfig = computed<SharedConfig>(() => {
+    const { placement, closable, duration, showProgress } = configRef.value
+    return { placement, closable, duration, showProgress }
   })
 
-  const resolveContainer = () => {
+  function resolveContainer() {
     const getContainer = configRef.value.getContainer || defaultGetContainer
     return getContainer()
   }
@@ -105,31 +86,30 @@ export default function useNotification(rootConfig: MaybeRef<NotificationConfig>
   const contextHolder = () => (
     <Notifications
       container={container.value}
-      ref={notificationRef}
+      ref={notificationsRef as any}
       prefixCls={configRef.value.prefixCls}
-      motion={configRef.value.motion}
+      motion={configRef.value.motion as TransitionGroupProps | ((p: Placement) => TransitionGroupProps) | undefined}
       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}
+      style={configRef.value.style as ((p: Placement) => CSSProperties) | undefined}
       onAllRemoved={configRef.value.onAllRemoved}
-      stack={configRef.value.stack}
+      stack={configRef.value.stack as StackInput | undefined}
       renderNotifications={configRef.value.renderNotifications}
     />
   )
 
-  const taskQueue = shallowRef<Task[]>([])
-
-  // ========================= Refs =========================
-
   const api: NotificationAPI = {
     open(config) {
-      const mergedConfig = mergeConfig(shareConfig.value, config)
-      if (mergedConfig.key === null || mergedConfig.key === undefined) {
-        mergedConfig.key = `vc-notification-${uniqueKey}`
+      const merged = mergeConfig<NotificationListConfig>(shareConfig.value, config as any)
+      if (merged.key === null || merged.key === undefined) {
+        merged.key = `vc-notification-${uniqueKey}`
         uniqueKey += 1
       }
-
-      taskQueue.value = [...taskQueue.value, { type: 'open', config: mergedConfig }]
+      taskQueue.value = [...taskQueue.value, { type: 'open', config: merged }]
     },
     close(key) {
       taskQueue.value = [...taskQueue.value, { type: 'close', key }]
@@ -139,41 +119,35 @@ 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,
     () => {
       container.value = resolveContainer()
     },
   )
+
   watch(taskQueue, () => {
-    if (notificationRef.value && taskQueue.value.length) {
-      taskQueue.value.forEach((task) => {
+    if (notificationsRef.value && taskQueue.value.length) {
+      const tasks = taskQueue.value
+      tasks.forEach((task) => {
         switch (task.type) {
           case 'open':
-            notificationRef.value?.open(task.config)
+            notificationsRef.value?.open(task.config)
             break
           case 'close':
-            notificationRef.value?.close(task.key)
+            notificationsRef.value?.close(task.key)
             break
           case 'destroy':
-            notificationRef.value?.destroy()
-            break
-          default:
+            notificationsRef.value?.destroy()
             break
         }
       })
-      taskQueue.value = taskQueue.value.filter(task => !taskQueue.value.includes(task))
+      taskQueue.value = taskQueue.value.filter(task => !tasks.includes(task))
     }
   })
 
-  // ======================== Return ========================
-  return [api, contextHolder] as [NotificationAPI, () => VueNode]
+  return [api, contextHolder]
 }

package/src/hooks/useStack.ts

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

package/src/index.ts

@@ -1,9 +1,35 @@
 import type { NotificationAPI, NotificationConfig } from './hooks/useNotification'
+import type { ComponentsType, NotificationProps } from './Notification'
+import type { NotificationProgressProps } from './Progress'
 import useNotification from './hooks/useNotification'
-import Notice from './Notice'
-import { useNotificationProvider } from './NotificationProvider'
+import Notification from './Notification'
+import NotificationList from './NotificationList'
+import NotificationProvider, { useNotificationProvider } from './NotificationProvider'
+import Progress from './Progress'
 
-export { Notice, useNotification, useNotificationProvider }
-export type { NotificationAPI, NotificationConfig }
+export {
+  Notification,
+  NotificationList,
+  NotificationProvider,
+  Progress,
+  useNotification,
+  useNotificationProvider,
+}
 
-export type { NoticeProps } from './Notice'
+export type {
+  ComponentsType,
+  NotificationAPI,
+  NotificationConfig,
+  NotificationProgressProps,
+  NotificationProps,
+}
+
+export type {
+  NotificationClassNames,
+  NotificationListConfig,
+  NotificationListProps,
+  NotificationStyles,
+  Placement,
+  StackConfig,
+  StackInput,
+} from './NotificationList'