@v-c/notification 1.0.0 → 2.0.0-beta.1

package/tests/index.spec.tsx

@@ -0,0 +1,200 @@
+import type { NotificationAPI, NotificationConfig } from '../src'
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, h, nextTick } from 'vue'
+import { useNotification } from '../src'
+
+async function flush() {
+  await nextTick()
+  vi.runAllTimers()
+  await nextTick()
+  await nextTick()
+}
+
+function renderDemo(config?: NotificationConfig) {
+  let api!: NotificationAPI
+
+  const Demo = defineComponent({
+    setup() {
+      const [_api, holder] = useNotification(config)
+      api = _api
+      return () => holder()
+    },
+  })
+
+  const wrapper = mount(Demo, {
+    global: {
+      stubs: {
+        'transition': false,
+        'transition-group': false,
+      },
+    },
+  })
+  return { wrapper, get api() {
+    return api
+  } }
+}
+
+describe('@v-c/notification', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    vi.useRealTimers()
+    vi.restoreAllMocks()
+  })
+
+  it('opens notice with description', async () => {
+    const { api } = renderDemo()
+    api.open({ description: h('p', { class: 'test' }, '1'), duration: 0.1 })
+    await flush()
+    expect(document.querySelector('.test')).toBeTruthy()
+
+    // Run all timers to flush duration
+    await flush()
+    expect(document.querySelector('.test')).toBeFalsy()
+  })
+
+  it('renders semantic slots when provided', async () => {
+    const { api } = renderDemo()
+    api.open({
+      title: 'bamboo',
+      description: 'little',
+      icon: h('span'),
+      actions: h('button', { type: 'button' }, 'light'),
+      closable: true,
+      showProgress: true,
+      duration: 3,
+    })
+    await flush()
+
+    expect(document.querySelector('.vc-notification-notice-title')).toBeTruthy()
+    expect(document.querySelector('.vc-notification-notice-description')).toBeTruthy()
+    expect(document.querySelector('.vc-notification-notice-icon')).toBeTruthy()
+    expect(document.querySelector('.vc-notification-notice-actions')).toBeTruthy()
+    expect(document.querySelector('.vc-notification-notice-close')).toBeTruthy()
+    expect(document.querySelector('.vc-notification-notice-progress')).toBeTruthy()
+    expect(document.querySelector('.vc-notification-notice-section')).toBeTruthy()
+  })
+
+  it('does not wrap in section when only one of title/description provided', async () => {
+    const { api } = renderDemo()
+    api.open({ description: 'only-description' })
+    await flush()
+    expect(document.querySelector('.vc-notification-notice-section')).toBeFalsy()
+    expect(document.querySelector('.vc-notification-notice-description')).toBeTruthy()
+  })
+
+  it('forwards classNames and styles for list and listContent', async () => {
+    const { api } = renderDemo({
+      classNames: {
+        list: 'root-list',
+        listContent: 'inner-content',
+      },
+      styles: {
+        list: { color: 'red' },
+        listContent: { color: 'blue' },
+      },
+    })
+    api.open({ description: 'x' })
+    await flush()
+    expect(document.querySelector('.vc-notification-list')?.classList.contains('root-list')).toBe(true)
+    expect(document.querySelector('.vc-notification-list-content')?.classList.contains('inner-content')).toBe(true)
+  })
+
+  it('respects maxCount', async () => {
+    const { api } = renderDemo({ maxCount: 1 })
+    api.open({ description: h('span', { class: 'a' }, 'a'), duration: 0 })
+    api.open({ description: h('span', { class: 'b' }, 'b'), duration: 0 })
+    api.open({ description: h('span', { class: 'c' }, 'c'), duration: 0 })
+    await flush()
+    expect(document.querySelectorAll('.a, .b, .c')).toHaveLength(1)
+    expect(document.querySelector('.c')).toBeTruthy()
+  })
+
+  it('triggers onClose only when close button is clicked', async () => {
+    const { api } = renderDemo()
+    let clicks = 0
+    let closes = 0
+    api.open({
+      description: h('p', 'x'),
+      closable: true,
+      duration: 0,
+      onClick: () => {
+        clicks += 1
+      },
+      onClose: () => {
+        closes += 1
+      },
+    })
+    await nextTick()
+    await nextTick()
+    const closeBtn = document.querySelector('.vc-notification-notice-close') as HTMLButtonElement
+    closeBtn.click()
+    expect(clicks).toBe(0)
+    expect(closes).toBe(1)
+  })
+
+  it('destroy removes everything', async () => {
+    const { api } = renderDemo()
+    api.open({ description: h('p', { class: 'test' }, 'x'), duration: 0 })
+    await flush()
+    expect(document.querySelector('.test')).toBeTruthy()
+    api.destroy()
+    await flush()
+    expect(document.querySelector('.test')).toBeFalsy()
+  })
+
+  it('placement adds className', async () => {
+    const { api } = renderDemo()
+    api.open({ description: 'x', placement: 'bottomLeft' })
+    await flush()
+    expect(document.querySelector('.vc-notification')?.classList.contains('vc-notification-bottomLeft')).toBe(true)
+  })
+
+  it('motion as function receives placement', async () => {
+    const motionFn = vi.fn().mockReturnValue({})
+    const { api } = renderDemo({ motion: motionFn })
+    api.open({ description: 'x', placement: 'bottomLeft' })
+    await flush()
+    expect(motionFn).toHaveBeenCalledWith('bottomLeft')
+  })
+
+  it('open with custom close icon', async () => {
+    const { api } = renderDemo()
+    api.open({
+      description: 'x',
+      closable: { closeIcon: h('span', { class: 'test-icon' }, 'X') },
+      duration: 0,
+    })
+    await flush()
+    expect(document.querySelector('.test-icon')?.textContent).toBe('X')
+  })
+
+  it('forwards data and aria attrs via props', async () => {
+    const { api } = renderDemo()
+    api.open({
+      description: 'x',
+      class: 'notice-class',
+      props: {
+        'data-test': 'data-test-value',
+        'aria-describedby': 'desc-id',
+        'role': 'status',
+      },
+    })
+    await flush()
+    const notice = document.querySelector('.notice-class')
+    expect(notice?.getAttribute('data-test')).toBe('data-test-value')
+    expect(notice?.getAttribute('aria-describedby')).toBe('desc-id')
+    expect(notice?.getAttribute('role')).toBe('status')
+  })
+
+  it('default role is alert', async () => {
+    const { api } = renderDemo()
+    api.open({ description: 'x' })
+    await flush()
+    expect(document.querySelector('.vc-notification-notice')?.getAttribute('role')).toBe('alert')
+  })
+})

package/vite.config.ts

@@ -1,12 +1,13 @@
 import type { UserConfig } from 'vite'
-import fg from 'fast-glob'
 import { defineConfig, mergeConfig } from 'vite'
-import { buildCommon } from '../../scripts/build.common'
+import { buildCommon, resolveBuildEntries } from '../../scripts/build.common'
 
-const entry = fg.sync(['src/**/*.ts', 'src/**/*.tsx', '!src/**/*.test.ts', '!src/**/tests'])
+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: {

package/vitest.config.ts

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

package/dist/Notice.cjs

@@ -1,235 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
-let vue = require("vue");
-let _v_c_util = require("@v-c/util");
-let _v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
-_v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(_v_c_util_dist_KeyCode);
-let _v_c_util_dist_pickAttrs = require("@v-c/util/dist/pickAttrs");
-_v_c_util_dist_pickAttrs = require_rolldown_runtime.__toESM(_v_c_util_dist_pickAttrs);
-var defaults = {
-	duration: 4.5,
-	pauseOnHover: true,
-	closeIcon: "x"
-};
-var Notify = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
-	const hovering = (0, vue.shallowRef)(false);
-	const percent = (0, vue.shallowRef)(0);
-	const spentTime = (0, vue.shallowRef)(0);
-	const mergedHovering = (0, vue.computed)(() => props.hovering || hovering.value);
-	const mergedDuration = (0, vue.computed)(() => {
-		if (typeof props.duration === "number") return props.duration;
-		if (props.duration === void 0) return defaults.duration;
-		return 0;
-	});
-	const mergedPauseOnHover = (0, vue.computed)(() => props.pauseOnHover === void 0 ? defaults.pauseOnHover : props.pauseOnHover);
-	const mergedShowProgress = (0, vue.computed)(() => mergedDuration.value > 0 && props.showProgress);
-	const mergedCloseIcon = (0, vue.computed)(() => props.closeIcon ?? defaults.closeIcon);
-	const onInternalClose = () => {
-		props.onNoticeClose?.(props.eventKey);
-	};
-	const onCloseKeyDown = (e) => {
-		if (e.key === "Enter" || e.code === "Enter" || e.keyCode === _v_c_util_dist_KeyCode.default.ENTER) onInternalClose();
-	};
-	(0, vue.watch)([
-		() => props.times,
-		mergedDuration,
-		mergedHovering
-	], (_n, _, onCleanup) => {
-		const duration = mergedDuration.value;
-		const hoveringValue = mergedHovering.value;
-		const pauseOnHover = mergedPauseOnHover.value;
-		if (!hoveringValue && duration > 0) {
-			const start = Date.now() - spentTime.value;
-			const timeoutId = window.setTimeout(() => {
-				onInternalClose();
-			}, duration * 1e3 - spentTime.value);
-			onCleanup(() => {
-				if (pauseOnHover) clearTimeout(timeoutId);
-				spentTime.value = Date.now() - start;
-			});
-		}
-	}, { immediate: true });
-	(0, vue.watch)([
-		() => props.times,
-		mergedDuration,
-		spentTime,
-		mergedHovering,
-		mergedShowProgress
-	], (_n, _, onCleanup) => {
-		const hoveringValue = mergedHovering.value;
-		const showProgress = mergedShowProgress.value;
-		const pauseOnHover = mergedPauseOnHover.value;
-		const duration = mergedDuration.value;
-		const baseSpentTime = spentTime.value;
-		if (!hoveringValue && showProgress && (pauseOnHover || baseSpentTime === 0)) {
-			const start = performance.now();
-			let animationFrame = 0;
-			const calculate = () => {
-				cancelAnimationFrame(animationFrame);
-				animationFrame = requestAnimationFrame((timestamp) => {
-					const runtime = timestamp + baseSpentTime - start;
-					const progress = Math.min(runtime / (duration * 1e3), 1);
-					percent.value = progress * 100;
-					if (progress < 1) calculate();
-				});
-			};
-			calculate();
-			onCleanup(() => {
-				if (pauseOnHover) cancelAnimationFrame(animationFrame);
-			});
-		}
-	}, { immediate: true });
-	return () => {
-		const { closable, prefixCls, props: divProps, onClick, content, className, style } = props;
-		const closableConfig = typeof closable === "object" && closable !== null ? closable : closable ? { closeIcon: mergedCloseIcon.value } : {};
-		const ariaProps = (0, _v_c_util_dist_pickAttrs.default)(closableConfig, true);
-		const validPercent = 100 - (percent.value <= 0 ? 0 : percent.value > 100 ? 100 : percent.value);
-		const noticePrefixCls = `${prefixCls}-notice`;
-		const mergedStyle = {
-			...typeof divProps?.style === "object" && divProps?.style ? divProps.style : {},
-			...typeof attrs.style === "object" && attrs.style ? attrs.style : {},
-			...typeof style === "object" && style ? style : {}
-		};
-		return (0, vue.createVNode)("div", (0, vue.mergeProps)(divProps, {
-			"class": (0, _v_c_util.classNames)(noticePrefixCls, className, attrs.class, { [`${noticePrefixCls}-closable`]: !!closable }),
-			"style": mergedStyle,
-			"onMouseenter": (e) => {
-				hovering.value = true;
-				divProps?.onMouseEnter?.(e);
-			},
-			"onMouseleave": (e) => {
-				hovering.value = false;
-				divProps?.onMouseLeave?.(e);
-			},
-			"onClick": onClick
-		}), [
-			(0, vue.createVNode)("div", { "class": `${noticePrefixCls}-content` }, [content]),
-			closable && (0, vue.createVNode)("button", (0, vue.mergeProps)({
-				"type": "button",
-				"class": `${noticePrefixCls}-close`,
-				"onKeydown": onCloseKeyDown,
-				"aria-label": "Close"
-			}, ariaProps, { "onClick": (e) => {
-				e.preventDefault();
-				e.stopPropagation();
-				onInternalClose();
-			} }), [closableConfig.closeIcon ?? mergedCloseIcon.value]),
-			mergedShowProgress.value && (0, vue.createVNode)("progress", {
-				"class": `${noticePrefixCls}-progress`,
-				"max": "100",
-				"value": validPercent
-			}, [`${validPercent}%`])
-		]);
-	};
-}, { props: {
-	prefixCls: {
-		type: String,
-		required: true,
-		default: void 0
-	},
-	eventKey: {
-		type: [String, Number],
-		required: true,
-		default: void 0
-	},
-	onClick: {
-		type: Function,
-		required: false,
-		default: void 0
-	},
-	onNoticeClose: {
-		type: Function,
-		required: false,
-		default: void 0
-	},
-	hovering: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	props: {
-		type: Object,
-		required: false,
-		default: void 0
-	},
-	content: {
-		type: [
-			Object,
-			Function,
-			String,
-			Number,
-			null,
-			Boolean,
-			Array
-		],
-		required: false,
-		default: void 0
-	},
-	duration: {
-		type: [
-			Number,
-			Boolean,
-			null
-		],
-		required: false,
-		default: void 0
-	},
-	showProgress: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	pauseOnHover: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	closeIcon: {
-		type: [
-			Object,
-			Function,
-			String,
-			Number,
-			null,
-			Boolean,
-			Array
-		],
-		required: false,
-		default: void 0
-	},
-	closable: {
-		type: [Boolean, Object],
-		required: false,
-		default: void 0
-	},
-	className: {
-		type: String,
-		required: false,
-		default: void 0
-	},
-	style: {
-		type: Object,
-		required: false,
-		default: void 0
-	},
-	classNames: {
-		type: Object,
-		required: false,
-		default: void 0
-	},
-	styles: {
-		type: Object,
-		required: false,
-		default: void 0
-	},
-	times: {
-		type: Number,
-		required: false,
-		default: void 0
-	}
-} });
-var Notice_default = Notify;
-exports.default = Notice_default;

package/dist/Notice.d.ts

@@ -1,15 +0,0 @@
-import { Key, NoticeConfig } from './interface.ts';
-export interface NoticeProps extends Omit<NoticeConfig, 'onClose'> {
-    prefixCls: string;
-    eventKey: Key;
-    onClick?: (event: Event) => void;
-    onNoticeClose?: (key: Key) => void;
-    hovering?: boolean;
-    props?: Record<string, any>;
-}
-declare const Notify: import('vue').DefineSetupFnComponent<NoticeProps & {
-    times?: number;
-}, {}, {}, NoticeProps & {
-    times?: number;
-} & {}, import('vue').PublicProps>;
-export default Notify;

package/dist/Notice.js

@@ -1,227 +0,0 @@
-import { computed, createVNode, defineComponent, mergeProps, shallowRef, watch } from "vue";
-import { classNames } from "@v-c/util";
-import KeyCode from "@v-c/util/dist/KeyCode";
-import pickAttrs from "@v-c/util/dist/pickAttrs";
-var defaults = {
-	duration: 4.5,
-	pauseOnHover: true,
-	closeIcon: "x"
-};
-var Notice_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
-	const hovering = shallowRef(false);
-	const percent = shallowRef(0);
-	const spentTime = shallowRef(0);
-	const mergedHovering = computed(() => props.hovering || hovering.value);
-	const mergedDuration = computed(() => {
-		if (typeof props.duration === "number") return props.duration;
-		if (props.duration === void 0) return defaults.duration;
-		return 0;
-	});
-	const mergedPauseOnHover = computed(() => props.pauseOnHover === void 0 ? defaults.pauseOnHover : props.pauseOnHover);
-	const mergedShowProgress = computed(() => mergedDuration.value > 0 && props.showProgress);
-	const mergedCloseIcon = computed(() => props.closeIcon ?? defaults.closeIcon);
-	const onInternalClose = () => {
-		props.onNoticeClose?.(props.eventKey);
-	};
-	const onCloseKeyDown = (e) => {
-		if (e.key === "Enter" || e.code === "Enter" || e.keyCode === KeyCode.ENTER) onInternalClose();
-	};
-	watch([
-		() => props.times,
-		mergedDuration,
-		mergedHovering
-	], (_n, _, onCleanup) => {
-		const duration = mergedDuration.value;
-		const hoveringValue = mergedHovering.value;
-		const pauseOnHover = mergedPauseOnHover.value;
-		if (!hoveringValue && duration > 0) {
-			const start = Date.now() - spentTime.value;
-			const timeoutId = window.setTimeout(() => {
-				onInternalClose();
-			}, duration * 1e3 - spentTime.value);
-			onCleanup(() => {
-				if (pauseOnHover) clearTimeout(timeoutId);
-				spentTime.value = Date.now() - start;
-			});
-		}
-	}, { immediate: true });
-	watch([
-		() => props.times,
-		mergedDuration,
-		spentTime,
-		mergedHovering,
-		mergedShowProgress
-	], (_n, _, onCleanup) => {
-		const hoveringValue = mergedHovering.value;
-		const showProgress = mergedShowProgress.value;
-		const pauseOnHover = mergedPauseOnHover.value;
-		const duration = mergedDuration.value;
-		const baseSpentTime = spentTime.value;
-		if (!hoveringValue && showProgress && (pauseOnHover || baseSpentTime === 0)) {
-			const start = performance.now();
-			let animationFrame = 0;
-			const calculate = () => {
-				cancelAnimationFrame(animationFrame);
-				animationFrame = requestAnimationFrame((timestamp) => {
-					const runtime = timestamp + baseSpentTime - start;
-					const progress = Math.min(runtime / (duration * 1e3), 1);
-					percent.value = progress * 100;
-					if (progress < 1) calculate();
-				});
-			};
-			calculate();
-			onCleanup(() => {
-				if (pauseOnHover) cancelAnimationFrame(animationFrame);
-			});
-		}
-	}, { immediate: true });
-	return () => {
-		const { closable, prefixCls, props: divProps, onClick, content, className, style } = props;
-		const closableConfig = typeof closable === "object" && closable !== null ? closable : closable ? { closeIcon: mergedCloseIcon.value } : {};
-		const ariaProps = pickAttrs(closableConfig, true);
-		const validPercent = 100 - (percent.value <= 0 ? 0 : percent.value > 100 ? 100 : percent.value);
-		const noticePrefixCls = `${prefixCls}-notice`;
-		const mergedStyle = {
-			...typeof divProps?.style === "object" && divProps?.style ? divProps.style : {},
-			...typeof attrs.style === "object" && attrs.style ? attrs.style : {},
-			...typeof style === "object" && style ? style : {}
-		};
-		return createVNode("div", mergeProps(divProps, {
-			"class": classNames(noticePrefixCls, className, attrs.class, { [`${noticePrefixCls}-closable`]: !!closable }),
-			"style": mergedStyle,
-			"onMouseenter": (e) => {
-				hovering.value = true;
-				divProps?.onMouseEnter?.(e);
-			},
-			"onMouseleave": (e) => {
-				hovering.value = false;
-				divProps?.onMouseLeave?.(e);
-			},
-			"onClick": onClick
-		}), [
-			createVNode("div", { "class": `${noticePrefixCls}-content` }, [content]),
-			closable && createVNode("button", mergeProps({
-				"type": "button",
-				"class": `${noticePrefixCls}-close`,
-				"onKeydown": onCloseKeyDown,
-				"aria-label": "Close"
-			}, ariaProps, { "onClick": (e) => {
-				e.preventDefault();
-				e.stopPropagation();
-				onInternalClose();
-			} }), [closableConfig.closeIcon ?? mergedCloseIcon.value]),
-			mergedShowProgress.value && createVNode("progress", {
-				"class": `${noticePrefixCls}-progress`,
-				"max": "100",
-				"value": validPercent
-			}, [`${validPercent}%`])
-		]);
-	};
-}, { props: {
-	prefixCls: {
-		type: String,
-		required: true,
-		default: void 0
-	},
-	eventKey: {
-		type: [String, Number],
-		required: true,
-		default: void 0
-	},
-	onClick: {
-		type: Function,
-		required: false,
-		default: void 0
-	},
-	onNoticeClose: {
-		type: Function,
-		required: false,
-		default: void 0
-	},
-	hovering: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	props: {
-		type: Object,
-		required: false,
-		default: void 0
-	},
-	content: {
-		type: [
-			Object,
-			Function,
-			String,
-			Number,
-			null,
-			Boolean,
-			Array
-		],
-		required: false,
-		default: void 0
-	},
-	duration: {
-		type: [
-			Number,
-			Boolean,
-			null
-		],
-		required: false,
-		default: void 0
-	},
-	showProgress: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	pauseOnHover: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	closeIcon: {
-		type: [
-			Object,
-			Function,
-			String,
-			Number,
-			null,
-			Boolean,
-			Array
-		],
-		required: false,
-		default: void 0
-	},
-	closable: {
-		type: [Boolean, Object],
-		required: false,
-		default: void 0
-	},
-	className: {
-		type: String,
-		required: false,
-		default: void 0
-	},
-	style: {
-		type: Object,
-		required: false,
-		default: void 0
-	},
-	classNames: {
-		type: Object,
-		required: false,
-		default: void 0
-	},
-	styles: {
-		type: Object,
-		required: false,
-		default: void 0
-	},
-	times: {
-		type: Number,
-		required: false,
-		default: void 0
-	}
-} });
-export { Notice_default as default };