@v-c/notification 2.0.0-rc.2 → 2.0.0-rc.4

package/dist/NotificationList/Content.js

@@ -12,7 +12,7 @@ var Content = /* @__PURE__ */ defineComponent((props, { slots, expose }) => {
 		const contentPrefixCls = `${listPrefixCls}-content`;
 		const contentStyle = {
 			...style,
-			height,
+			height: `${height}px`,
 			"--top-notificiation-height": `${topNoticeHeight}px`,
 			"--top-notificiation-width": `${topNoticeWidth}px`
 		};
@@ -23,38 +23,16 @@ var Content = /* @__PURE__ */ defineComponent((props, { slots, expose }) => {
 		}, [slots.default?.()]);
 	};
 }, {
-	props: {
-		listPrefixCls: {
-			type: String,
-			required: true
-		},
-		height: {
-			type: Number,
-			required: true
-		},
-		topNoticeHeight: {
-			type: Number,
-			required: false,
-			default: void 0
-		},
-		topNoticeWidth: {
-			type: Number,
-			required: false,
-			default: void 0
-		},
-		className: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		style: {
-			type: Object,
-			required: false,
-			default: void 0
-		}
-	},
 	name: "NotificationListContent",
-	inheritAttrs: false
+	inheritAttrs: false,
+	props: [
+		"listPrefixCls",
+		"height",
+		"topNoticeHeight",
+		"topNoticeWidth",
+		"className",
+		"style"
+	]
 });
 //#endregion
 export { Content as default };

package/dist/NotificationList/index.js

@@ -5,9 +5,32 @@ import useStack from "../hooks/useStack.js";
 import Content from "./Content.js";
 import { TransitionGroup, computed, createVNode, defineComponent, isVNode, mergeProps, ref, shallowRef, toRef, watch, watchEffect } from "vue";
 import { clsx } from "@v-c/util";
-import { getTransitionGroupProps } from "@v-c/util/dist/utils/transition";
 import { unrefElement } from "@v-c/util/dist/vueuse/unref-element";
 //#region src/NotificationList/index.tsx
+/**
+* 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, override) {
+	return {
+		name,
+		appear: true,
+		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`,
+		leaveFromClass: `${name} ${name}-leave ${name}-leave-start`,
+		leaveActiveClass: `${name} ${name}-leave`,
+		leaveToClass: `${name} ${name}-leave ${name}-leave-active`,
+		moveClass: `${name} ${name}-move`,
+		...override
+	};
+}
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
@@ -90,7 +113,7 @@ var NotificationList = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 		const listPrefixCls = `${prefixCls}-list`;
 		const positionResult = position.value;
 		let motionGroupProps = {};
-		if (placementMotion.value) motionGroupProps = getTransitionGroupProps(placementMotion.value.name, placementMotion.value);
+		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, onClose: configOnClose, ...notificationConfig } = config;
 			const strKey = String(key);

package/dist/Notifications.js

@@ -8,10 +8,6 @@ var defaults = { prefixCls: "vc-notification" };
 var Notifications = /* @__PURE__ */ defineComponent((props, { expose }) => {
 	const configList = shallowRef([]);
 	const onNoticeClose = (key) => {
-		const config = configList.value.find((item) => item.key === key);
-		const closable = config?.closable;
-		(closable && typeof closable === "object" ? closable : null)?.onClose?.();
-		config?.onClose?.();
 		configList.value = configList.value.filter((item) => item.key !== key);
 	};
 	expose({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/notification",
   "type": "module",
-  "version": "2.0.0-rc.2",
+  "version": "2.0.0-rc.4",
   "publishConfig": {
     "access": "public"
   },

package/src/NotificationList/Content.tsx

@@ -39,9 +39,14 @@ const Content = defineComponent<ContentProps>(
       prevHeight = height
 
       const contentPrefixCls = `${listPrefixCls}-content`
+      // Force height to a string so Vue's style patcher always re-applies the
+      // unit. Passing a plain number (e.g. 0 → 216) was getting silently
+      // skipped during patch — the CSS variables on the same vnode style
+      // were applied, but `height: 216` was not patched onto the DOM until
+      // a manual `inst.update()` was invoked.
       const contentStyle: ContentStyle = {
         ...style,
-        height,
+        height: `${height}px`,
         '--top-notificiation-height': `${topNoticeHeight}px`,
         '--top-notificiation-width': `${topNoticeWidth}px`,
       }
@@ -60,6 +65,11 @@ const Content = defineComponent<ContentProps>(
   {
     name: 'NotificationListContent',
     inheritAttrs: false,
+    // Declare runtime props so Vue tracks reactive reads inside the render
+    // closure. Without this, `props.height` in `const { height } = props`
+    // does not subscribe to updates, so the rendered `height: 0px` stays
+    // stale even after position recomputes with measured node sizes.
+    props: ['listPrefixCls', 'height', 'topNoticeHeight', 'topNoticeWidth', 'className', 'style'] as any,
   },
 )
 

package/src/NotificationList/index.tsx

@@ -7,9 +7,37 @@ import type {
   NotificationStyles as NoticeStyles,
 } from '../Notification'
 import { clsx } from '@v-c/util'
-import { getTransitionGroupProps } from '@v-c/util/dist/utils/transition'
 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'
@@ -185,8 +213,8 @@ const NotificationList = defineComponent<NotificationListProps>(
       const positionResult = position.value
 
       let motionGroupProps: TransitionGroupProps = {}
-      if (placementMotion.value) {
-        motionGroupProps = getTransitionGroupProps(placementMotion.value.name!, placementMotion.value)
+      if (placementMotion.value?.name) {
+        motionGroupProps = buildMotionGroupProps(placementMotion.value.name, placementMotion.value)
       }
 
       const renderItems = () =>

package/src/Notifications.tsx

@@ -42,11 +42,6 @@ const Notifications = defineComponent<NotificationsProps>(
     const configList = shallowRef<NotificationListConfig[]>([])
 
     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)
     }
 

package/tests/notification.test.tsx

@@ -0,0 +1,70 @@
+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/vitest.config.ts

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