@v-c/notification 2.0.0-rc.1 → 2.0.0-rc.3

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,9 +113,9 @@ 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, ...notificationConfig } = config;
+			const { key, placement: _itemPlacement, classNames: configClassNames, styles: configStyles, className: configClassName, style: configStyle, onClose: configOnClose, ...notificationConfig } = config;
 			const strKey = String(key);
 			const notificationIndex = getIndex(keys.value, key);
 			const stackInThreshold = stackEnabled.value && notificationIndex !== void 0 && notificationIndex < (stackParams.threshold?.value ?? 0);
@@ -115,7 +138,7 @@ var NotificationList = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 				"notificationIndex": notificationIndex,
 				"stackInThreshold": stackInThreshold,
 				"onClose": () => {
-					config.onClose?.();
+					configOnClose?.();
 					onNoticeClose?.(key);
 				}
 			}), null);
@@ -145,10 +168,7 @@ var NotificationList = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 			"topNoticeWidth": positionResult.topNoticeWidth,
 			"className": ncs?.listContent,
 			"style": nss?.listContent
-		}, { default: () => [createVNode(TransitionGroup, mergeProps({
-			"tag": false,
-			"appear": true
-		}, motionGroupProps, { "onAfterLeave": checkAllClosed }), _isSlot(_slot = renderItems()) ? _slot : { default: () => [_slot] })] })]);
+		}, { default: () => [createVNode(TransitionGroup, mergeProps({ "appear": true }, motionGroupProps, { "onAfterLeave": checkAllClosed }), _isSlot(_slot = renderItems()) ? _slot : { default: () => [_slot] })] })]);
 	};
 }, {
 	props: {

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.1",
+  "version": "2.0.0-rc.3",
   "publishConfig": {
     "access": "public"
   },

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,13 +213,26 @@ 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 = () =>
         keys.value.map((config) => {
-          const { key, placement: _itemPlacement, classNames: configClassNames, styles: configStyles, className: configClassName, style: configStyle, ...notificationConfig } = 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
@@ -220,7 +261,7 @@ const NotificationList = defineComponent<NotificationListProps>(
               notificationIndex={notificationIndex}
               stackInThreshold={stackInThreshold}
               onClose={() => {
-                (config as NotificationListConfig).onClose?.()
+                configOnClose?.()
                 onNoticeClose?.(key)
               }}
             />
@@ -261,7 +302,6 @@ const NotificationList = defineComponent<NotificationListProps>(
             style={nss?.listContent}
           >
             <TransitionGroup
-              tag={false as any}
               appear
               {...motionGroupProps}
               onAfterLeave={checkAllClosed}

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',
+    },
   }),
 )