@v-c/notification 2.0.0 → 2.0.2

package/src/hooks/useNoticeTimer.ts

@@ -1,85 +0,0 @@
-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,181 +0,0 @@
-import type { CSSProperties, MaybeRef, TransitionGroupProps } from 'vue'
-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<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)
-  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 */
-  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 {
-  open: (config: OptionalConfig) => void
-  close: (key: Key) => void
-  destroy: () => void
-}
-
-interface OpenTask {
-  type: 'open'
-  config: NotificationListConfig
-}
-
-interface CloseTask {
-  type: 'close'
-  key: Key
-}
-
-interface DestroyTask {
-  type: 'destroy'
-}
-
-type Task = OpenTask | CloseTask | DestroyTask
-
-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> = {},
-): [NotificationAPI, () => VueNode] {
-  const configRef = computed(() => unref(rootConfig) || {})
-  const container = shallowRef<HTMLElement | ShadowRoot>()
-  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
-  })
-
-  const resolveContainer = () => {
-    const getContainer = configRef.value.getContainer || defaultGetContainer
-    return getContainer()
-  }
-
-  const contextHolder = () => (
-    <Notifications
-      container={container.value}
-      ref={notificationRef}
-      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}
-      stack={configRef.value.stack}
-      renderNotifications={configRef.value.renderNotifications}
-    />
-  )
-
-  const taskQueue = shallowRef<Task[]>([])
-
-  const api: NotificationAPI = {
-    open(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) {
-      taskQueue.value = [...taskQueue.value, { type: 'close', key }]
-    },
-    destroy() {
-      taskQueue.value = [...taskQueue.value, { type: 'destroy' }]
-    },
-  }
-
-  onMounted(() => {
-    container.value = resolveContainer()
-  })
-  watch(
-    () => configRef.value.getContainer,
-    () => {
-      container.value = resolveContainer()
-    },
-  )
-  watch(taskQueue, () => {
-    if (notificationRef.value && taskQueue.value.length) {
-      taskQueue.value.forEach((task) => {
-        switch (task.type) {
-          case 'open':
-            notificationRef.value?.open(task.config)
-            break
-          case 'close':
-            notificationRef.value?.close(task.key)
-            break
-          case 'destroy':
-            notificationRef.value?.destroy()
-            break
-          default:
-            break
-        }
-      })
-      taskQueue.value = []
-    }
-  })
-
-  return [api, contextHolder]
-}

package/src/hooks/useStack.ts

@@ -1,36 +0,0 @@
-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 = Exclude<StackConfig, boolean>
-
-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,
-  })
-
-  watchEffect(() => {
-    const value = unref(config)
-    if (value && typeof value === 'object') {
-      result.offset = value.offset ?? DEFAULT_OFFSET
-      result.threshold = value.threshold ?? DEFAULT_THRESHOLD
-    }
-  })
-
-  return [computed(() => !!unref(config)), toRefs(result)]
-}
-
-export default useStack

package/src/index.ts

@@ -1,50 +0,0 @@
-import useNotification from './hooks/useNotification'
-import Notification from './Notification'
-import NotificationList from './NotificationList'
-import { useNotificationContext, useNotificationProvider } from './NotificationProvider'
-import Progress from './Progress'
-
-import type { NotificationAPI, NotificationConfig } from './hooks/useNotification'
-import type {
-  ComponentsType,
-  NotificationClassNames as NoticeClassNames,
-  NotificationProps,
-  NotificationStyles as NoticeStyles,
-} from './Notification'
-import type {
-  NotificationClassNames,
-  NotificationListProps,
-  NotificationStyles,
-  Placement,
-} from './NotificationList'
-import type { NotificationProgressProps } from './Progress'
-import type { Key, NotificationListConfig, StackConfig } from './interface'
-import type { ClosableType, ParsedClosableConfig } from './hooks/useClosable'
-
-export {
-  Notification,
-  NotificationList,
-  Progress,
-  useNotification,
-  useNotificationContext,
-  useNotificationProvider,
-}
-
-export type {
-  ClosableType,
-  ComponentsType,
-  Key,
-  NoticeClassNames,
-  NoticeStyles,
-  NotificationAPI,
-  NotificationClassNames,
-  NotificationConfig,
-  NotificationListConfig,
-  NotificationListProps,
-  NotificationProgressProps,
-  NotificationProps,
-  NotificationStyles,
-  ParsedClosableConfig,
-  Placement,
-  StackConfig,
-}

package/src/interface.ts

@@ -1,45 +0,0 @@
-import type { ClosableType } from './hooks/useClosable'
-import type {
-  ComponentsType,
-  NotificationProps,
-} from './Notification'
-
-export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight'
-
-export type Key = string | number
-
-export type StackConfig
-  = | boolean
-    | {
-    /**
-     * When the notice count exceeds this threshold, notices will be stacked.
-     * @default 3
-     */
-      threshold?: number
-      /**
-       * Vertical offset applied between stacked notices.
-       * @default 8
-       */
-      offset?: number
-    }
-
-/**
- * Configuration accepted by the public `api.open` call.
- * Mirrors rc-notification@2.0 NotificationListConfig.
- */
-export interface NotificationListConfig extends Omit<NotificationProps, 'prefixCls'> {
-  key: Key
-  placement?: Placement
-  times?: number
-}
-
-export type Placements = Partial<Record<Placement, NotificationListConfig[]>>
-
-export type InnerOpenConfig = NotificationListConfig & { times?: number }
-
-// Re-export common surfaces consumers used to import from interface.ts directly.
-export type {
-  ClosableType,
-  ComponentsType,
-  NotificationProps,
-}

package/tests/notification.test.tsx

@@ -1,70 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { nextTick } from 'vue'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import Notifications from '../src/Notifications'
-
-describe('notification', () => {
-  afterEach(() => {
-    document.body.innerHTML = ''
-  })
-
-  it('calls close callbacks once when notice close button is clicked', async () => {
-    const onClose = vi.fn()
-    const closableOnClose = vi.fn()
-    const wrapper = mount(Notifications, {
-      props: {
-        container: document.body,
-      },
-      attachTo: document.body,
-    })
-
-    wrapper.vm.open({
-      key: 'notice',
-      title: 'Notice',
-      duration: false,
-      closable: {
-        closeIcon: 'x',
-        onClose: closableOnClose,
-      },
-      onClose,
-    })
-
-    await nextTick()
-    await nextTick()
-    await document.querySelector<HTMLButtonElement>('.vc-notification-notice-close')!.click()
-    await nextTick()
-
-    expect(closableOnClose).toHaveBeenCalledTimes(1)
-    expect(onClose).toHaveBeenCalledTimes(1)
-  })
-
-  it('does not call notice close callbacks when closed by api', async () => {
-    const onClose = vi.fn()
-    const closableOnClose = vi.fn()
-    const wrapper = mount(Notifications, {
-      props: {
-        container: document.body,
-      },
-      attachTo: document.body,
-    })
-
-    wrapper.vm.open({
-      key: 'notice',
-      title: 'Notice',
-      duration: false,
-      closable: {
-        closeIcon: 'x',
-        onClose: closableOnClose,
-      },
-      onClose,
-    })
-
-    await nextTick()
-    await nextTick()
-    wrapper.vm.close('notice')
-    await nextTick()
-
-    expect(closableOnClose).not.toHaveBeenCalled()
-    expect(onClose).not.toHaveBeenCalled()
-  })
-})

package/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": ["../../tsconfig.base.json"],
-  "compilerOptions": {
-
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"]
-}

package/vite.config.ts

@@ -1,19 +0,0 @@
-import type { UserConfig } from 'vite'
-import { defineConfig, mergeConfig } from 'vite'
-import { buildCommon, resolveBuildEntries } from '../../scripts/build.common'
-
-const packageRoot = new URL('.', import.meta.url)
-const entry = resolveBuildEntries(packageRoot, ['src/**/*.ts', 'src/**/*.tsx', '!src/**/*.test.ts', '!src/**/tests'])
-
-export default defineConfig({
-  ...mergeConfig(buildCommon({
-    packageRoot,
-    external: ['vue', 'classnames', /^@v-c\/util/],
-  }), {
-    build: {
-      lib: {
-        entry,
-      },
-    },
-  } as UserConfig),
-})

package/vitest.config.ts

@@ -1,11 +0,0 @@
-import { defineProject, mergeConfig } from 'vitest/config'
-import configShared from '../../vitest.config'
-
-export default mergeConfig(
-  configShared,
-  defineProject({
-    test: {
-      environment: 'jsdom',
-    },
-  }),
-)