@v-c/notification 2.0.0 → 2.0.2

package/src/NotificationList/index.tsx

@@ -1,322 +0,0 @@
-import type { CSSProperties, TransitionGroupProps } from 'vue'
-import type { Key, StackConfig } from '../interface'
-import type {
-  ComponentsType,
-  NotificationClassNames as NoticeClassNames,
-  NotificationProps,
-  NotificationStyles as NoticeStyles,
-} from '../Notification'
-import { clsx } from '@v-c/util'
-import { unrefElement } from '@v-c/util/dist/vueuse/unref-element'
-import { computed, defineComponent, ref, shallowRef, toRef, TransitionGroup, watch, watchEffect } from 'vue'
-
-/**
- * Map Vue's TransitionGroup enter/leave class hooks onto the rc-motion
- * style class names that antdv-next 6.4.0 notification styles target
- * (-enter-start / -enter-active / -leave-start / -leave-active).
- *
- * The shared @v-c/util getTransitionGroupProps puts -leave-active in the
- * leaveActiveClass, which means the notice jumps straight to opacity:0
- * on leave without animating. Wire each phase to the correct rc-motion
- * suffix so the opacity/transform transition runs.
- */
-function buildMotionGroupProps(name: string, override?: Partial<TransitionGroupProps>): TransitionGroupProps {
-  return {
-    name,
-    appear: true,
-    // ENTER: from = opacity 0 (-enter-start / -appear-start)
-    //        to   = opacity 1 (-enter-active / -appear-active)
-    enterFromClass: `${name} ${name}-enter ${name}-appear ${name}-enter-start ${name}-appear-start`,
-    enterActiveClass: `${name} ${name}-enter ${name}-appear`,
-    enterToClass: `${name} ${name}-enter ${name}-appear ${name}-enter-active ${name}-appear-active`,
-    // LEAVE: from = opacity 1 (-leave-start)
-    //        to   = opacity 0 (-leave-active)
-    leaveFromClass: `${name} ${name}-leave ${name}-leave-start`,
-    leaveActiveClass: `${name} ${name}-leave`,
-    leaveToClass: `${name} ${name}-leave ${name}-leave-active`,
-    moveClass: `${name} ${name}-move`,
-    ...override,
-  }
-}
-import useListPosition from '../hooks/useListPosition'
-import useStack from '../hooks/useStack'
-import Notification from '../Notification'
-import { useNotificationContext } from '../NotificationProvider'
-import Content from './Content'
-
-export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight'
-
-export type { StackConfig }
-
-export interface NotificationListConfig extends Omit<NotificationProps, 'prefixCls'> {
-  key: Key
-  placement?: Placement
-  times?: number
-}
-
-export interface NotificationClassNames extends NoticeClassNames {
-  list?: string
-  listContent?: string
-}
-
-export interface NotificationStyles extends NoticeStyles {
-  list?: CSSProperties
-  listContent?: CSSProperties
-}
-
-export interface NotificationListProps {
-  configList?: NotificationListConfig[]
-  prefixCls?: string
-  placement: Placement
-  pauseOnHover?: boolean
-  classNames?: NotificationClassNames
-  styles?: NotificationStyles
-  components?: ComponentsType
-  stack?: StackConfig
-  motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps)
-  className?: string
-  style?: CSSProperties
-  onNoticeClose?: (key: Key) => void
-  onAllRemoved?: (placement: Placement) => void
-}
-
-const noticeSlotKeys: (keyof NoticeClassNames)[] = [
-  'wrapper',
-  'root',
-  'icon',
-  'section',
-  'title',
-  'description',
-  'actions',
-  'close',
-  'progress',
-]
-
-function fillClassNames(
-  list: (NotificationClassNames | undefined)[],
-): NotificationClassNames {
-  return noticeSlotKeys.reduce<NotificationClassNames>((merged, key) => {
-    merged[key] = clsx(...list.map(item => item?.[key]))
-    return merged
-  }, {})
-}
-
-function fillStyles(
-  list: (NotificationStyles | undefined)[],
-): NotificationStyles {
-  return noticeSlotKeys.reduce<NotificationStyles>((merged, key) => {
-    merged[key] = Object.assign({}, ...list.map(item => item?.[key]))
-    return merged
-  }, {})
-}
-
-function getIndex(keys: { key: Key }[], key: Key): number | undefined {
-  const strKey = String(key)
-  const index = keys.findIndex(item => String(item.key) === strKey)
-  if (index === -1) {
-    return undefined
-  }
-  return keys.length - index - 1
-}
-
-const NotificationList = defineComponent<NotificationListProps>(
-  (props, { attrs }) => {
-    const ctx = useNotificationContext()
-
-    const configList = computed(() => props.configList ?? [])
-    const keys = computed(() =>
-      configList.value.map(config => ({ ...config, key: String(config.key) as Key })),
-    )
-
-    // ====================== Stack State =======================
-    const stackConfig = toRef(props, 'stack')
-    const [stackEnabled, stackParams] = useStack(stackConfig)
-    const listHovering = shallowRef(false)
-    const expanded = computed(() =>
-      stackEnabled.value && (listHovering.value || keys.value.length <= (stackParams.threshold?.value ?? 0)),
-    )
-
-    const stackPosition = computed(() => {
-      if (!stackEnabled.value || expanded.value) {
-        return undefined
-      }
-      return {
-        offset: stackParams.offset?.value,
-        threshold: stackParams.threshold?.value,
-      }
-    })
-
-    // ====================== List Measure ======================
-    const gap = ref(0)
-    const contentRef = ref<{ nativeElement: { value: HTMLDivElement | null } } | null>(null)
-    const [position, setNodeSize] = useListPosition(keys as any, stackPosition as any, gap)
-
-    const hasConfigList = computed(() => !!configList.value.length)
-    watchEffect(() => {
-      if (!hasConfigList.value) {
-        return
-      }
-      const listNode = unrefElement<HTMLDivElement>(contentRef.value?.nativeElement as any)
-      if (!listNode) {
-        return
-      }
-      const { gap: cssGap, rowGap } = window.getComputedStyle(listNode)
-      const nextGap = Number.parseFloat(rowGap || cssGap) || 0
-      if (gap.value !== nextGap) {
-        gap.value = nextGap
-      }
-    }, { flush: 'post' })
-
-    // Notify when list becomes empty (after motion finished).
-    const checkAllClosed = () => {
-      if (configList.value.length === 0) {
-        props.onAllRemoved?.(props.placement)
-      }
-    }
-
-    // Compute motion props per placement.
-    const placementMotion = computed(() => {
-      if (typeof props.motion === 'function') {
-        return props.placement ? props.motion(props.placement) : undefined
-      }
-      return props.motion
-    })
-
-    // Cleanup node sizes when items leave permanently.
-    watch(keys, (next, prev) => {
-      if (!prev) {
-        return
-      }
-      const nextKeySet = new Set(next.map(item => String(item.key)))
-      prev.forEach((item) => {
-        const key = String(item.key)
-        if (!nextKeySet.has(key)) {
-          setNodeSize(key, null)
-        }
-      })
-    })
-
-    return () => {
-      const {
-        prefixCls = 'vc-notification',
-        pauseOnHover,
-        classNames: ncs,
-        styles: nss,
-        components,
-        placement,
-        className,
-        style,
-        onNoticeClose,
-      } = props
-
-      const listPrefixCls = `${prefixCls}-list`
-      const positionResult = position.value
-
-      let motionGroupProps: TransitionGroupProps = {}
-      if (placementMotion.value?.name) {
-        motionGroupProps = buildMotionGroupProps(placementMotion.value.name, placementMotion.value)
-      }
-
-      const renderItems = () =>
-        keys.value.map((config) => {
-          const {
-            key,
-            placement: _itemPlacement,
-            classNames: configClassNames,
-            styles: configStyles,
-            className: configClassName,
-            style: configStyle,
-            // Extract onClose so the spread below does not also bind it.
-            // Vue would otherwise merge our `onClose={...}` and the spread's
-            // `onClose` into an Array, breaking `props.onClose?.()` in the
-            // notice itself.
-            onClose: configOnClose,
-            ...notificationConfig
-          } = config
-          const strKey = String(key)
-          const notificationIndex = getIndex(keys.value, key)
-          const stackInThreshold
-            = stackEnabled.value && notificationIndex !== undefined && notificationIndex < (stackParams.threshold?.value ?? 0)
-
-          return (
-            <Notification
-              key={strKey}
-              {...notificationConfig}
-              ref={(el: any) => {
-                const node = unrefElement<HTMLDivElement>(el?.nativeElement as any)
-                setNodeSize(strKey, node ?? null)
-              }}
-              prefixCls={prefixCls}
-              class={clsx((ctx.value as any)?.classNames?.notice, configClassName)}
-              style={configStyle}
-              classNames={fillClassNames([ncs, configClassNames])}
-              styles={fillStyles([nss, configStyles])}
-              components={{
-                ...components,
-                ...(config as NotificationListConfig).components,
-              }}
-              hovering={stackEnabled.value && listHovering.value}
-              pauseOnHover={config.pauseOnHover ?? pauseOnHover}
-              offset={positionResult.notificationPosition.get(strKey)}
-              notificationIndex={notificationIndex}
-              stackInThreshold={stackInThreshold}
-              onClose={() => {
-                configOnClose?.()
-                onNoticeClose?.(key)
-              }}
-            />
-          )
-        })
-
-      return (
-        <div
-          class={clsx(
-            prefixCls,
-            listPrefixCls,
-            `${prefixCls}-${placement}`,
-            (ctx.value as any)?.classNames?.list,
-            className,
-            ncs?.list,
-            (attrs as any).class,
-            {
-              [`${prefixCls}-stack`]: stackEnabled.value,
-              [`${prefixCls}-stack-expanded`]: expanded.value,
-              [`${listPrefixCls}-hovered`]: listHovering.value,
-            },
-          )}
-          onMouseenter={() => {
-            listHovering.value = true
-          }}
-          onMouseleave={() => {
-            listHovering.value = false
-          }}
-          style={{ ...nss?.list, ...style, ...((attrs as any).style ?? {}) } as CSSProperties}
-        >
-          <Content
-            ref={contentRef as any}
-            listPrefixCls={listPrefixCls}
-            height={positionResult.totalHeight}
-            topNoticeHeight={positionResult.topNoticeHeight}
-            topNoticeWidth={positionResult.topNoticeWidth}
-            className={ncs?.listContent}
-            style={nss?.listContent}
-          >
-            <TransitionGroup
-              appear
-              {...motionGroupProps}
-              onAfterLeave={checkAllClosed}
-            >
-              {renderItems()}
-            </TransitionGroup>
-          </Content>
-        </div>
-      )
-    }
-  },
-  {
-    name: 'NotificationList',
-    inheritAttrs: false,
-  },
-)
-
-export default NotificationList

package/src/NotificationProvider.tsx

@@ -1,19 +0,0 @@
-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

@@ -1,153 +0,0 @@
-import type { CSSProperties, TransitionGroupProps } from 'vue'
-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 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
-  stack?: StackConfig
-  renderNotifications?: (
-    node: VueNode,
-    info: { prefixCls: string, key: Key },
-  ) => VueNode
-}
-
-export interface NotificationsRef {
-  open: (config: NotificationListConfig) => void
-  close: (key: Key) => void
-  destroy: () => void
-}
-
-const defaults = {
-  prefixCls: 'vc-notification',
-} as NotificationsProps
-
-const Notifications = defineComponent<NotificationsProps>(
-  (props = defaults, { expose }) => {
-    const configList = shallowRef<NotificationListConfig[]>([])
-
-    const onNoticeClose = (key: Key) => {
-      configList.value = configList.value.filter(item => item.key !== key)
-    }
-
-    expose({
-      open: (config: NotificationListConfig) => {
-        const list = configList.value
-        let clone = [...list]
-        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 = []
-      },
-    })
-
-    const placements = shallowRef<Placements>({})
-
-    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
-    })
-
-    const onAllNoticeRemoved = (placement: Placement) => {
-      const clone = { ...placements.value }
-      const list = clone[placement] || []
-      if (!list.length) {
-        delete clone[placement]
-      }
-      placements.value = clone
-    }
-
-    const emptyRef = shallowRef(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!
-      if (!container) {
-        return null
-      }
-
-      return (
-        <Teleport to={container}>
-          {Object.keys(placements.value).map((rawPlacement) => {
-            const placement = rawPlacement as Placement
-            const placementConfigList = placements.value[placement]
-            const list = (
-              <NotificationList
-                key={placement}
-                configList={placementConfigList}
-                placement={placement}
-                prefixCls={prefixCls}
-                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}
-                onAllRemoved={onAllNoticeRemoved}
-                onNoticeClose={onNoticeClose}
-              />
-            )
-            return props.renderNotifications
-              ? props.renderNotifications(list, { prefixCls, key: placement })
-              : list
-          })}
-        </Teleport>
-      )
-    }
-  },
-  {
-    name: 'Notifications',
-  },
-)
-
-export default Notifications

package/src/Progress.tsx

@@ -1,27 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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
-}