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

package/src/NotificationList/index.tsx

@@ -1,26 +1,24 @@
-import type { CSSProperties, PropType, TransitionGroupProps } from 'vue'
-import type { StackInput } from '../hooks/useStack'
+import type { CSSProperties, TransitionGroupProps } from 'vue'
+import type { Key, StackConfig } from '../interface'
 import type {
   ComponentsType,
   NotificationClassNames as NoticeClassNames,
-  NotificationStyles as NoticeStyles,
   NotificationProps,
+  NotificationStyles as NoticeStyles,
 } from '../Notification'
-import { classNames as clsx } from '@v-c/util'
+import { clsx } from '@v-c/util'
 import { getTransitionGroupProps } from '@v-c/util/dist/utils/transition'
-import { computed, defineComponent, inject, nextTick, onMounted, ref, shallowRef, toRef, watch } from 'vue'
+import { unrefElement } from '@v-c/util/dist/vueuse/unref-element'
+import { computed, defineComponent, ref, shallowRef, toRef, TransitionGroup, watch, watchEffect } from 'vue'
 import useListPosition from '../hooks/useListPosition'
 import useStack from '../hooks/useStack'
 import Notification from '../Notification'
-import { NotificationContext } from '../NotificationProvider'
+import { useNotificationContext } from '../NotificationProvider'
 import Content from './Content'
 
-type Key = string | number | symbol
-
 export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight'
 
-export type { StackConfig, StackInput } from '../hooks/useStack'
-export type { ComponentsType } from '../Notification'
+export type { StackConfig }
 
 export interface NotificationListConfig extends Omit<NotificationProps, 'prefixCls'> {
   key: Key
@@ -46,9 +44,9 @@ export interface NotificationListProps {
   classNames?: NotificationClassNames
   styles?: NotificationStyles
   components?: ComponentsType
-  stack?: StackInput
+  stack?: StackConfig
   motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps)
-  class?: string
+  className?: string
   style?: CSSProperties
   onNoticeClose?: (key: Key) => void
   onAllRemoved?: (placement: Placement) => void
@@ -67,183 +65,173 @@ const noticeSlotKeys: (keyof NoticeClassNames)[] = [
 ]
 
 function fillClassNames(
-  classNamesList: (NotificationClassNames | undefined)[],
+  list: (NotificationClassNames | undefined)[],
 ): NotificationClassNames {
   return noticeSlotKeys.reduce<NotificationClassNames>((merged, key) => {
-    merged[key] = clsx(...classNamesList.map(cn => cn?.[key]))
+    merged[key] = clsx(...list.map(item => item?.[key]))
     return merged
   }, {})
 }
 
-function fillStyles(stylesList: (NotificationStyles | undefined)[]): NotificationStyles {
+function fillStyles(
+  list: (NotificationStyles | undefined)[],
+): NotificationStyles {
   return noticeSlotKeys.reduce<NotificationStyles>((merged, key) => {
-    merged[key] = Object.assign({}, ...stylesList.map(s => s?.[key]))
+    merged[key] = Object.assign({}, ...list.map(item => item?.[key]))
     return merged
   }, {})
 }
 
-const NotificationList = defineComponent({
-  name: 'NotificationList',
-  inheritAttrs: false,
-  props: {
-    configList: { type: Array as PropType<NotificationListConfig[]>, default: () => [] },
-    prefixCls: { type: String, default: 'vc-notification' },
-    placement: { type: String as PropType<Placement>, required: true },
-    pauseOnHover: { type: Boolean, default: undefined },
-    classNames: { type: Object as PropType<NotificationClassNames>, default: undefined },
-    styles: { type: Object as PropType<NotificationStyles>, default: undefined },
-    components: { type: Object as PropType<ComponentsType>, default: undefined },
-    stack: { type: [Boolean, Object] as PropType<StackInput>, default: undefined },
-    motion: {
-      type: [Object, Function] as PropType<NotificationListProps['motion']>,
-      default: undefined,
-    },
-    class: { type: String, default: undefined },
-    style: { type: Object as PropType<CSSProperties>, default: undefined },
-    onNoticeClose: { type: Function as PropType<(key: Key) => void>, default: undefined },
-    onAllRemoved: { type: Function as PropType<(placement: Placement) => void>, default: undefined },
-  },
-  setup(props, { attrs }) {
-    const ctx = inject(NotificationContext, ref({}))
+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
+}
 
-    // ========================== Data ==========================
+const NotificationList = defineComponent<NotificationListProps>(
+  (props, { attrs }) => {
+    const ctx = useNotificationContext()
+
+    const configList = computed(() => props.configList ?? [])
     const keys = computed(() =>
-      props.configList.map(config => ({
-        config,
-        key: String(config.key),
-      })),
+      configList.value.map(config => ({ ...config, key: String(config.key) as Key })),
     )
 
-    // ===================== Motion Config ======================
-    const placementMotion = computed(() => {
-      if (typeof props.motion === 'function') {
-        return props.motion(props.placement)
-      }
-      return props.motion
-    })
-
-    const motionGroupProps = computed<TransitionGroupProps>(() => {
-      const motionVal = placementMotion.value
-      if (!motionVal) {
-        return {}
-      }
-      if (motionVal.name) {
-        return getTransitionGroupProps(motionVal.name, motionVal as any)
-      }
-      return { ...motionVal }
-    })
-
     // ====================== Stack State =======================
-    const [stackEnabled, stackParams] = useStack(toRef(props, 'stack'))
+    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.value.threshold),
+    const expanded = computed(() =>
+      stackEnabled.value && (listHovering.value || keys.value.length <= (stackParams.threshold?.value ?? 0)),
     )
 
-    // ====================== Stack Layout ======================
     const stackPosition = computed(() => {
       if (!stackEnabled.value || expanded.value) {
         return undefined
       }
       return {
-        offset: stackParams.value.offset,
-        threshold: stackParams.value.threshold,
+        offset: stackParams.offset?.value,
+        threshold: stackParams.threshold?.value,
       }
     })
 
     // ====================== List Measure ======================
-    const gap = shallowRef(0)
-    const contentRef = shallowRef<{ nativeElement: HTMLElement | null } | null>(null)
-    const configListRef = computed(() => props.configList)
-    const [
-      notificationPosition,
-      setNodeSize,
-      totalHeight,
-      topNoticeHeight,
-      topNoticeWidth,
-    ] = useListPosition(configListRef, stackPosition, gap)
-
-    const hasConfigList = computed(() => keys.value.length > 0)
+    const gap = ref(0)
+    const contentRef = ref<{ nativeElement: { value: HTMLDivElement | null } } | null>(null)
+    const [position, setNodeSize] = useListPosition(keys as any, stackPosition as any, gap)
 
-    function syncGap() {
-      const node = contentRef.value?.nativeElement
-      if (!node)
+    const hasConfigList = computed(() => !!configList.value.length)
+    watchEffect(() => {
+      if (!hasConfigList.value) {
         return
-      const { gap: cssGap, rowGap } = window.getComputedStyle(node)
-      const next = Number.parseFloat(rowGap || cssGap) || 0
-      if (next !== gap.value) {
-        gap.value = next
+      }
+      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)
       }
     }
 
-    onMounted(syncGap)
-    watch(hasConfigList, () => {
-      nextTick(syncGap)
+    // Compute motion props per placement.
+    const placementMotion = computed(() => {
+      if (typeof props.motion === 'function') {
+        return props.placement ? props.motion(props.placement) : undefined
+      }
+      return props.motion
     })
 
-    // ====================== All Removed =======================
-    function checkAllClosed() {
-      if (!props.placement) {
+    // Cleanup node sizes when items leave permanently.
+    watch(keys, (next, prev) => {
+      if (!prev) {
         return
       }
-      if (keys.value.length === 0) {
-        props.onAllRemoved?.(props.placement)
-      }
-    }
+      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',
-        placement,
-        classNames,
-        styles,
-        components,
         pauseOnHover,
-        class: className,
+        classNames: ncs,
+        styles: nss,
+        components,
+        placement,
+        className,
         style,
         onNoticeClose,
       } = props
 
       const listPrefixCls = `${prefixCls}-list`
-      const ctxClassNames = (ctx.value as any)?.classNames
+      const positionResult = position.value
+
+      let motionGroupProps: TransitionGroupProps = {}
+      if (placementMotion.value) {
+        motionGroupProps = getTransitionGroupProps(placementMotion.value.name!, placementMotion.value)
+      }
 
       const renderItems = () =>
-        keys.value.map(({ config }) => {
+        keys.value.map((config) => {
           const {
             key,
-            placement: itemPlacement,
+            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 dataIndex = keys.value.findIndex(item => item.key === strKey)
-          const notificationIndex
-            = dataIndex === -1 ? undefined : keys.value.length - dataIndex - 1
+          const notificationIndex = getIndex(keys.value, key)
           const stackInThreshold
-            = stackEnabled.value
-              && notificationIndex !== undefined
-              && notificationIndex < stackParams.value.threshold
+            = stackEnabled.value && notificationIndex !== undefined && notificationIndex < (stackParams.threshold?.value ?? 0)
 
           return (
             <Notification
-              {...(notificationConfig as any)}
               key={strKey}
+              {...notificationConfig}
               ref={(el: any) => {
-                const node = el?.nativeElement ?? null
-                setNodeSize(strKey, node)
+                const node = unrefElement<HTMLDivElement>(el?.nativeElement as any)
+                setNodeSize(strKey, node ?? null)
               }}
               prefixCls={prefixCls}
-              class={clsx(ctxClassNames?.notice, config.class)}
-              classNames={fillClassNames([classNames, config.classNames])}
-              styles={fillStyles([styles, config.styles])}
-              components={{ ...components, ...config.components }}
+              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={notificationPosition.value.get(strKey)}
+              offset={positionResult.notificationPosition.get(strKey)}
               notificationIndex={notificationIndex}
-              stackInThreshold={!!stackInThreshold}
+              stackInThreshold={stackInThreshold}
               onClose={() => {
                 configOnClose?.()
                 onNoticeClose?.(key)
@@ -258,10 +246,10 @@ const NotificationList = defineComponent({
             prefixCls,
             listPrefixCls,
             `${prefixCls}-${placement}`,
-            ctxClassNames?.list,
+            (ctx.value as any)?.classNames?.list,
             className,
+            ncs?.list,
             (attrs as any).class,
-            classNames?.list,
             {
               [`${prefixCls}-stack`]: stackEnabled.value,
               [`${prefixCls}-stack-expanded`]: expanded.value,
@@ -274,25 +262,33 @@ const NotificationList = defineComponent({
           onMouseleave={() => {
             listHovering.value = false
           }}
-          style={{ ...styles?.list, ...style }}
+          style={{ ...nss?.list, ...style, ...((attrs as any).style ?? {}) } as CSSProperties}
         >
           <Content
             ref={contentRef as any}
             listPrefixCls={listPrefixCls}
-            height={totalHeight.value}
-            topNoticeHeight={topNoticeHeight.value}
-            topNoticeWidth={topNoticeWidth.value}
-            class={classNames?.listContent}
-            style={styles?.listContent}
-            motionProps={motionGroupProps.value}
-            onAfterLeave={checkAllClosed}
+            height={positionResult.totalHeight}
+            topNoticeHeight={positionResult.topNoticeHeight}
+            topNoticeWidth={positionResult.topNoticeWidth}
+            className={ncs?.listContent}
+            style={nss?.listContent}
           >
-            {renderItems()}
+            <TransitionGroup
+              appear
+              {...motionGroupProps}
+              onAfterLeave={checkAllClosed}
+            >
+              {renderItems()}
+            </TransitionGroup>
           </Content>
         </div>
       )
     }
   },
-})
+  {
+    name: 'NotificationList',
+    inheritAttrs: false,
+  },
+)
 
 export default NotificationList

package/src/NotificationProvider.tsx

@@ -1,5 +1,5 @@
-import type { InjectionKey, PropType, Ref } from 'vue'
-import { computed, defineComponent, inject, provide, ref } from 'vue'
+import type { InjectionKey, Ref } from 'vue'
+import { inject, provide, ref } from 'vue'
 
 export interface NotificationContextProps {
   classNames?: {
@@ -7,10 +7,7 @@ export interface NotificationContextProps {
     list?: string
   }
 }
-
-export const NotificationContext: InjectionKey<Ref<NotificationContextProps>> = Symbol(
-  'NotificationContext',
-)
+export const NotificationContext: InjectionKey<Ref<NotificationContextProps>> = Symbol('NotificationContext')
 
 export function useNotificationProvider(props: Ref<NotificationContextProps>) {
   provide(NotificationContext, props)
@@ -20,20 +17,3 @@ export function useNotificationProvider(props: Ref<NotificationContextProps>) {
 export function useNotificationContext() {
   return inject(NotificationContext, ref({}))
 }
-
-const NotificationProvider = defineComponent({
-  name: 'NotificationProvider',
-  props: {
-    classNames: {
-      type: Object as PropType<NotificationContextProps['classNames']>,
-      default: undefined,
-    },
-  },
-  setup(props, { slots }) {
-    const ctx = computed<NotificationContextProps>(() => ({ classNames: props.classNames }))
-    provide(NotificationContext, ctx)
-    return () => slots.default?.()
-  },
-})
-
-export default NotificationProvider

package/src/Notifications.tsx

@@ -1,34 +1,26 @@
+import type { CSSProperties, TransitionGroupProps } from 'vue'
 import type { VueNode } from '@v-c/util/dist/type'
-import type { CSSProperties, PropType, TransitionGroupProps } from 'vue'
-import type {
-  ComponentsType,
-  NotificationClassNames,
-  NotificationListConfig,
-  NotificationStyles,
-  Placement,
-  StackInput,
-} from './NotificationList'
+import type { InnerOpenConfig, Key, NotificationListConfig, Placement, Placements, StackConfig } from './interface'
+import type { ComponentsType } from './Notification'
 import { defineComponent, shallowRef, Teleport, watch } from 'vue'
-import NotificationList from './NotificationList'
-
-type Key = string | number | symbol
+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
-
-  container?: HTMLElement | ShadowRoot
-  motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps)
-
-  maxCount?: number
-  pauseOnHover?: boolean
-  stack?: StackInput
-
   onAllRemoved?: VoidFunction
+  stack?: StackConfig
   renderNotifications?: (
     node: VueNode,
     info: { prefixCls: string, key: Key },
@@ -41,45 +33,31 @@ export interface NotificationsRef {
   destroy: () => void
 }
 
-type Placements = Partial<Record<Placement, NotificationListConfig[]>>
+const defaults = {
+  prefixCls: 'vc-notification',
+} as NotificationsProps
 
-const Notifications = defineComponent({
-  name: 'Notifications',
-  inheritAttrs: false,
-  props: {
-    prefixCls: { type: String, default: 'vc-notification' },
-    classNames: { type: Object as PropType<NotificationClassNames>, default: undefined },
-    styles: { type: Object as PropType<NotificationStyles>, default: undefined },
-    components: { type: Object as PropType<ComponentsType>, default: undefined },
-    className: { type: Function as PropType<(p: Placement) => string>, default: undefined },
-    style: { type: Function as PropType<(p: Placement) => CSSProperties>, default: undefined },
-    container: { type: Object as PropType<HTMLElement | ShadowRoot>, default: undefined },
-    motion: {
-      type: [Object, Function] as PropType<NotificationsProps['motion']>,
-      default: undefined,
-    },
-    maxCount: { type: Number, default: undefined },
-    pauseOnHover: { type: Boolean, default: undefined },
-    stack: { type: [Boolean, Object] as PropType<StackInput>, default: undefined },
-    onAllRemoved: { type: Function as PropType<VoidFunction>, default: undefined },
-    renderNotifications: {
-      type: Function as PropType<NotificationsProps['renderNotifications']>,
-      default: undefined,
-    },
-  },
-  setup(props, { expose }) {
+const Notifications = defineComponent<NotificationsProps>(
+  (props = defaults, { expose }) => {
     const configList = shallowRef<NotificationListConfig[]>([])
-    const placements = shallowRef<Placements>({})
-    const emptyRef = shallowRef(false)
+
+    const onNoticeClose = (key: Key) => {
+      const config = configList.value.find(item => item.key === key)
+      const closable = config?.closable
+      const closableObj = closable && typeof closable === 'object' ? closable : null
+      closableObj?.onClose?.()
+      config?.onClose?.()
+      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: NotificationListConfig = { ...config }
+        const innerConfig: InnerOpenConfig = { ...config }
         if (index >= 0) {
-          innerConfig.times = (list[index]?.times ?? 0) + 1
+          innerConfig.times = ((list[index] as InnerOpenConfig)?.times ?? 0) + 1
           clone[index] = innerConfig
         }
         else {
@@ -92,81 +70,78 @@ const Notifications = defineComponent({
         }
         configList.value = clone
       },
-      close: (key: Key) => {
-        configList.value = configList.value.filter(item => item.key !== key)
-      },
+      close: onNoticeClose,
       destroy: () => {
         configList.value = []
       },
-    } as NotificationsRef)
+    })
 
-    watch(
-      configList,
-      () => {
-        const next: Placements = {}
-        configList.value.forEach((config) => {
-          const placement = config.placement ?? 'topRight'
-          next[placement] = next[placement] || []
-          next[placement]!.push(config)
-        })
-        Object.keys(placements.value).forEach((placement) => {
-          next[placement as Placement] = next[placement as Placement] || []
-        })
-        placements.value = next
-      },
-      { immediate: true },
-    )
+    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
+    })
 
-    function onAllNoticeRemoved(placement: Placement) {
+    const onAllNoticeRemoved = (placement: Placement) => {
       const clone = { ...placements.value }
-      if (!(clone[placement] || []).length) {
+      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?.()
+        props?.onAllRemoved?.()
         emptyRef.value = false
       }
     })
 
     return () => {
-      const { container, prefixCls = 'vc-notification' } = props
+      const { container } = props
+      const prefixCls = props.prefixCls ?? defaults.prefixCls!
       if (!container) {
         return null
       }
 
-      const placementList = Object.keys(placements.value) as Placement[]
-
       return (
         <Teleport to={container}>
-          {placementList.map((placement) => {
+          {Object.keys(placements.value).map((rawPlacement) => {
+            const placement = rawPlacement as Placement
+            const placementConfigList = placements.value[placement]
             const list = (
               <NotificationList
                 key={placement}
-                configList={placements.value[placement]}
+                configList={placementConfigList}
                 placement={placement}
                 prefixCls={prefixCls}
                 pauseOnHover={props.pauseOnHover}
                 classNames={props.classNames}
                 styles={props.styles}
                 components={props.components}
-                class={props.className?.(placement)}
+                className={props.className?.(placement)}
                 style={props.style?.(placement)}
                 motion={props.motion}
                 stack={props.stack}
-                onNoticeClose={(key) => {
-                  configList.value = configList.value.filter(item => item.key !== key)
-                }}
                 onAllRemoved={onAllNoticeRemoved}
+                onNoticeClose={onNoticeClose}
               />
             )
-
             return props.renderNotifications
               ? props.renderNotifications(list, { prefixCls, key: placement })
               : list
@@ -175,6 +150,9 @@ const Notifications = defineComponent({
       )
     }
   },
-})
+  {
+    name: 'Notifications',
+  },
+)
 
 export default Notifications