@zboson/ui 0.0.0-stage → 0.0.2

package/dist/notification/PurePanel.js

@@ -0,0 +1,356 @@
+import { useBaseConfig, useComponentBaseConfig } from "../config-provider/context.js";
+import { normalizeStyle as normalizeStyle$1 } from "../_util/styleUtils.js";
+import { pureAttrs, useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
+import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
+import { isRenderable } from "../_util/is.js";
+import style_default, { PurePanelStyle } from "./style/index.js";
+import useClosable, { pickClosable } from "../_util/hooks/useClosable.js";
+import { computed, createVNode, defineComponent, mergeDefaults, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+import { CheckCircleFilled, CloseCircleFilled, CloseOutlined, ExclamationCircleFilled, InfoCircleFilled } from "@zboson/icons";
+import { omit } from "es-toolkit";
+import { Notification } from "@v-c/notification";
+//#region src/notification/PurePanel.tsx
+function getCloseIcon(prefixCls, closeIcon) {
+	if (closeIcon === null || closeIcon === false) return null;
+	return isRenderable(closeIcon) ? closeIcon : createVNode(CloseOutlined, { "class": `${prefixCls}-close-icon` }, null);
+}
+const TypeIcon = {
+	success: CheckCircleFilled,
+	info: InfoCircleFilled,
+	error: CloseCircleFilled,
+	warning: ExclamationCircleFilled
+};
+const typeToIcon = TypeIcon;
+function resolveIconNode(icon, type) {
+	if (isRenderable(icon)) return icon;
+	if (type && typeToIcon[type]) return createVNode(typeToIcon[type]);
+	return null;
+}
+function getIconWrapperClassName(prefixCls, type, icon) {
+	return !isRenderable(icon) && type ? `${prefixCls}-icon-${type}` : "";
+}
+const PureContent = /* @__PURE__ */ defineComponent((props) => {
+	return () => {
+		const { prefixCls, icon, type, title, description, actions, role = "alert", styles, classes: pureContentCls } = props;
+		let iconNode;
+		if (isRenderable(icon)) iconNode = createVNode("span", {
+			"class": clsx(`${prefixCls}-icon`, pureContentCls.icon),
+			"style": styles.icon
+		}, [icon]);
+		else if (type) if (typeToIcon[type]) iconNode = createVNode(typeToIcon[type], {
+			class: clsx(`${prefixCls}-icon`, pureContentCls.icon, `${prefixCls}-icon-${type}`),
+			style: styles.icon
+		});
+		else iconNode = null;
+		const hasTitle = isRenderable(title);
+		return createVNode("div", {
+			"class": clsx({ [`${prefixCls}-with-icon`]: iconNode }),
+			"role": role
+		}, [
+			iconNode,
+			hasTitle && createVNode("div", {
+				"class": clsx(`${prefixCls}-title`, pureContentCls.title),
+				"style": styles.title
+			}, [title]),
+			description && createVNode("div", {
+				"class": clsx(`${prefixCls}-description`, pureContentCls.description),
+				"style": styles.description
+			}, [description]),
+			actions && createVNode("div", {
+				"class": clsx(`${prefixCls}-actions`, pureContentCls.actions),
+				"style": styles.actions
+			}, [actions])
+		]);
+	};
+}, {
+	props: /*@__PURE__*/ mergeDefaults({
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		icon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		title: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		description: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		actions: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		role: {
+			type: String,
+			required: false
+		},
+		classes: {
+			type: Object,
+			required: true
+		},
+		styles: {
+			type: Object,
+			required: true
+		}
+	}, { role: "alert" }),
+	name: "NoticePureContent",
+	inheritAttrs: false
+});
+const omitKeys = [
+	"prefixCls",
+	"icon",
+	"type",
+	"message",
+	"title",
+	"description",
+	"btn",
+	"actions",
+	"closeIcon",
+	"className",
+	"style",
+	"styles",
+	"classNames",
+	"closable"
+];
+/** @private Internal Component. Do not use in your production. */
+const PurePanel = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
+	const { classes: notificationClassNames, styles } = toPropsRefs(props, "classes", "styles");
+	const { getPrefixCls, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("notification", props);
+	const { notification: notificationContext } = useBaseConfig("notification", props);
+	const prefixCls = computed(() => props.prefixCls ?? getPrefixCls("notification"));
+	const mergedProps = computed(() => props);
+	const rootCls = useCSSVarCls(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, notificationClassNames), useToArr(contextStyles, styles), useToProps(mergedProps));
+	const closeableInfo = useClosable(pickClosable(computed(() => props)), pickClosable(notificationContext), computed(() => {
+		return {
+			closable: true,
+			closeIcon: createVNode(CloseOutlined, { "class": `${prefixCls.value}-close-icon` }, null),
+			closeIconRender: (icon) => getCloseIcon(prefixCls.value, icon)
+		};
+	}));
+	const rawClosable = computed(() => closeableInfo.value?.[0]);
+	const mergedCloseIcon = computed(() => closeableInfo.value?.[1]);
+	const ariaProps = computed(() => closeableInfo.value?.[3] || {});
+	const mergedClosable = computed(() => {
+		const { closable } = props;
+		return rawClosable.value ? {
+			onClose: closable && typeof closable === "object" ? closable?.onClose : void 0,
+			closeIcon: mergedCloseIcon.value,
+			...ariaProps.value
+		} : false;
+	});
+	return () => {
+		const noticePrefixCls = `${prefixCls.value}-notice`;
+		const notificationClassName = attrs.class;
+		const style = attrs.style;
+		const restProps = omit(props, omitKeys);
+		const actions = getSlotPropsFnRun(slots, props, "actions");
+		const titleNode = getSlotPropsFnRun(slots, props, "title");
+		const descriptionNode = getSlotPropsFnRun(slots, props, "description");
+		const slotIcon = getSlotPropsFnRun(slots, props, "icon");
+		const mergedNcs = mergedClassNames.value;
+		const mergedNss = mergedStyles.value;
+		const { root: rootClassName, ...contentClassNames } = mergedNcs;
+		const { root: rootStyle, ...contentStyles } = mergedNss;
+		const mergedIcon = slotIcon ?? props.icon;
+		const iconNode = resolveIconNode(mergedIcon, props.type);
+		const iconWrapperClass = clsx(getIconWrapperClassName(noticePrefixCls, props.type, mergedIcon), mergedNcs?.icon);
+		return createVNode("div", {
+			"class": clsx(`${noticePrefixCls}-pure-panel`, hashId.value, notificationClassName, cssVarCls.value, rootCls.value, rootClassName),
+			"style": rootStyle
+		}, [createVNode(PurePanelStyle, { "prefixCls": prefixCls.value }, null), createVNode(Notification, mergeProps({ "style": {
+			...contextStyle.value,
+			...normalizeStyle$1(style) || {}
+		} }, pureAttrs(attrs), restProps, {
+			"prefixCls": prefixCls.value,
+			"duration": null,
+			"closable": mergedClosable.value,
+			"role": props.role,
+			"class": clsx(notificationClassName, contextClassName.value, { [`${noticePrefixCls}-with-icon`]: !!iconNode }),
+			"icon": iconNode,
+			"title": titleNode,
+			"description": descriptionNode,
+			"actions": actions,
+			"classNames": {
+				...contentClassNames,
+				icon: iconWrapperClass
+			},
+			"styles": contentStyles
+		}), null)]);
+	};
+}, {
+	props: {
+		content: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			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
+		},
+		closable: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		closeIcon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		props: {
+			type: Object,
+			required: false
+		},
+		onClose: { required: false },
+		onClick: {
+			type: Function,
+			required: false
+		},
+		icon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		title: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		description: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		actions: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		role: {
+			type: String,
+			required: false
+		}
+	},
+	name: "NoticePurePanel",
+	inheritAttrs: false
+});
+//#endregion
+export { PureContent, TypeIcon, PurePanel as default, getCloseIcon, getIconWrapperClassName, resolveIconNode };

package/dist/notification/index.d.ts

@@ -0,0 +1,29 @@
+import { ArgsProps, GlobalConfigProps } from "./interface.js";
+import PureList from "./PureList.js";
+import PurePanel from "./PurePanel.js";
+import useNotification from "./useNotification.js";
+import { Key } from "@v-c/util/dist/type";
+//#region src/notification/index.d.ts
+interface BaseMethods {
+  open: (config: ArgsProps) => void;
+  destroy: (key?: Key) => void;
+  config: (config: GlobalConfigProps) => void;
+  useNotification: typeof useNotification;
+  /** @private Internal Component. Do not use in your production. */
+  _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
+  /** @private Internal Component. Do not use in your production. */
+  _InternalListDoNotUseOrYouWillBeFired: typeof PureList;
+}
+type StaticFn = (config: ArgsProps) => void;
+interface NoticeMethods {
+  success: StaticFn;
+  info: StaticFn;
+  warning: StaticFn;
+  error: StaticFn;
+}
+declare const staticMethods: NoticeMethods & BaseMethods;
+declare function noop(): void;
+declare const actWrapper: (wrapper: any) => void;
+declare const actDestroy: typeof noop;
+//#endregion
+export { type ArgsProps, actDestroy, actWrapper, staticMethods as default, useNotification };

package/dist/notification/index.js

@@ -0,0 +1,205 @@
+import { useBaseConfig } from "../config-provider/context.js";
+import ConfigProvider, { globalConfig } from "../config-provider/index.js";
+import { useAppConfig } from "../app/context.js";
+import PurePanel from "./PurePanel.js";
+import PureList from "./PureList.js";
+import useNotification, { useInternalNotification } from "./useNotification.js";
+import { createVNode, defineComponent, getCurrentInstance, isVNode, onMounted, render, shallowRef, watch } from "vue";
+//#region src/notification/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+let notification = null;
+let taskQueue = [];
+let defaultGlobalConfig = {};
+let act = (callback) => callback();
+function getGlobalContext() {
+	const { getContainer, rtl, maxCount, top, bottom, showProgress, pauseOnHover } = defaultGlobalConfig;
+	const mergedContainer = getContainer?.() || document.body;
+	let appContext = defaultGlobalConfig.appContext;
+	const instance = getCurrentInstance();
+	if (instance && !appContext) appContext = instance.appContext;
+	else if (!appContext) appContext = globalConfig().appContext;
+	return {
+		getContainer: () => mergedContainer,
+		rtl,
+		maxCount,
+		top,
+		bottom,
+		showProgress,
+		pauseOnHover,
+		appContext
+	};
+}
+const GlobalHolder = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	const { notificationConfig, sync } = props;
+	const { getPrefixCls } = useBaseConfig();
+	const prefixCls = defaultGlobalConfig?.prefixCls || getPrefixCls("notification");
+	const appConfig = useAppConfig();
+	const [api, holder] = useInternalNotification({
+		...notificationConfig,
+		prefixCls,
+		...appConfig.notification || {}
+	});
+	onMounted(() => {
+		sync?.();
+	});
+	const instance = { ...api };
+	Object.keys(instance).forEach((method) => {
+		instance[method] = (...args) => {
+			sync();
+			return api[method](...args);
+		};
+	});
+	expose({
+		instance,
+		sync
+	});
+	return () => {
+		if (typeof holder === "function") return holder?.();
+		return holder;
+	};
+}, { props: {
+	notificationConfig: {
+		type: Object,
+		required: true
+	},
+	sync: {
+		type: Function,
+		required: true
+	}
+} });
+const GlobalHolderWrapper = /* @__PURE__ */ defineComponent((props) => {
+	const notificationConfig = shallowRef(getGlobalContext());
+	const holderRef = shallowRef();
+	const sync = () => {
+		notificationConfig.value = getGlobalContext();
+	};
+	onMounted(sync);
+	let filled = false;
+	watch(() => holderRef.value, (holder) => {
+		if (holder && !filled) {
+			filled = true;
+			props.onReady?.({
+				instance: holder.instance,
+				sync
+			});
+		}
+	}, { immediate: true });
+	const global = globalConfig();
+	return () => {
+		const holderNode = createVNode(GlobalHolder, {
+			"ref": holderRef,
+			"sync": sync,
+			"notificationConfig": notificationConfig.value
+		}, null);
+		const configHolderNode = createVNode(ConfigProvider, {
+			"prefixCls": global.getRootPrefixCls(),
+			"iconPrefixCls": global.getIconPrefixCls(),
+			"theme": global.theme.value,
+			"locale": globalConfig().locale
+		}, _isSlot(holderNode) ? holderNode : { default: () => [holderNode] });
+		return global.holderRender ? global.holderRender(configHolderNode) : configHolderNode;
+	};
+}, { props: { onReady: {
+	type: Function,
+	required: false
+} } });
+function flushNotificationQueue() {
+	if (!notification) {
+		const holderFragment = document.createDocumentFragment();
+		const newNotification = { fragment: holderFragment };
+		notification = newNotification;
+		act(() => {
+			const vnode = createVNode(GlobalHolderWrapper, { onReady: (node) => {
+				Promise.resolve().then(() => {
+					if (!newNotification.instance && node?.instance) {
+						newNotification.instance = node.instance;
+						newNotification.sync = node.sync;
+						flushNotificationQueue();
+					}
+				});
+			} });
+			const globalCtx = getGlobalContext();
+			if (globalCtx.appContext) vnode.appContext = globalCtx.appContext;
+			render(vnode, holderFragment);
+		});
+		return;
+	}
+	if (!notification.instance) return;
+	taskQueue.forEach((task) => {
+		switch (task.type) {
+			case "open":
+				act(() => {
+					notification?.instance?.open({
+						...defaultGlobalConfig,
+						...task.config
+					});
+				});
+				break;
+			case "destroy":
+				act(() => {
+					notification?.instance?.destroy(task.key);
+				});
+				break;
+		}
+	});
+	taskQueue = [];
+}
+function setNotificationGlobalConfig(config) {
+	defaultGlobalConfig = {
+		...defaultGlobalConfig,
+		...config
+	};
+	act(() => {
+		notification?.sync?.();
+	});
+}
+function open(config) {
+	taskQueue.push({
+		type: "open",
+		config
+	});
+	flushNotificationQueue();
+}
+function destroy(key) {
+	taskQueue.push({
+		type: "destroy",
+		key
+	});
+	flushNotificationQueue();
+}
+const methods = [
+	"success",
+	"info",
+	"warning",
+	"error"
+];
+const staticMethods = {
+	open,
+	destroy,
+	config: setNotificationGlobalConfig,
+	useNotification,
+	_InternalPanelDoNotUseOrYouWillBeFired: PurePanel,
+	_InternalListDoNotUseOrYouWillBeFired: PureList
+};
+methods.forEach((type) => {
+	staticMethods[type] = (config) => open({
+		...config,
+		type
+	});
+});
+function noop() {}
+let _actWrapper = noop;
+if (process.env.NODE_ENV === "test") _actWrapper = (wrapper) => {
+	act = wrapper;
+};
+const actWrapper = _actWrapper;
+let _actDestroy = noop;
+if (process.env.NODE_ENV === "test") _actDestroy = () => {
+	notification = null;
+	taskQueue = [];
+};
+const actDestroy = _actDestroy;
+//#endregion
+export { actDestroy, actWrapper, staticMethods as default, useNotification };

package/dist/notification/interface.d.ts

@@ -0,0 +1,111 @@
+import { VueNode } from "../_util/type.js";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { ClosableType } from "../_util/hooks/useClosable.js";
+import { AppContext, CSSProperties, HTMLAttributes } from "vue";
+import { Key } from "@v-c/util/dist/type";
+//#region src/notification/interface.d.ts
+interface DivProps extends HTMLAttributes {
+  'data-testid'?: string;
+}
+declare const NotificationPlacements: readonly ["top", "topLeft", "topRight", "bottom", "bottomLeft", "bottomRight"];
+type NotificationPlacement = (typeof NotificationPlacements)[number];
+type IconType = 'success' | 'info' | 'error' | 'warning';
+type NotificationSemanticName = keyof NotificationSemanticClassNames & keyof NotificationSemanticStyles;
+interface NotificationSemanticClassNames {
+  list?: string;
+  listContent?: string;
+  wrapper?: string;
+  root?: string;
+  title?: string;
+  description?: string;
+  actions?: string;
+  icon?: string;
+  section?: string;
+  close?: string;
+  progress?: string;
+}
+interface NotificationSemanticStyles {
+  list?: CSSProperties;
+  listContent?: CSSProperties;
+  wrapper?: CSSProperties;
+  root?: CSSProperties;
+  title?: CSSProperties;
+  description?: CSSProperties;
+  actions?: CSSProperties;
+  icon?: CSSProperties;
+  section?: CSSProperties;
+  close?: CSSProperties;
+  progress?: CSSProperties;
+}
+type NotificationClassNamesType = SemanticClassNamesType<ArgsProps, NotificationSemanticClassNames>;
+type NotificationStylesType = SemanticStylesType<ArgsProps, NotificationSemanticStyles>;
+interface ArgsProps {
+  title?: VueNode;
+  description?: VueNode;
+  actions?: VueNode;
+  key?: Key;
+  onClose?: () => void;
+  duration?: number | false;
+  showProgress?: boolean;
+  pauseOnHover?: boolean;
+  icon?: VueNode;
+  placement?: NotificationPlacement;
+  style?: CSSProperties;
+  class?: string;
+  classes?: NotificationClassNamesType;
+  styles?: NotificationStylesType;
+  readonly type?: IconType;
+  onClick?: () => void;
+  closeIcon?: VueNode;
+  closable?: boolean | (Exclude<ClosableType, boolean> & {
+    onClose?: () => void;
+  });
+  props?: DivProps;
+  role?: 'alert' | 'status';
+}
+interface NotificationConfig {
+  top?: number;
+  bottom?: number;
+  prefixCls?: string;
+  getContainer?: () => HTMLElement | ShadowRoot;
+  placement?: NotificationPlacement;
+  maxCount?: number;
+  rtl?: boolean;
+  stack?: boolean | {
+    threshold?: number;
+  };
+  duration?: number | false;
+  showProgress?: boolean;
+  pauseOnHover?: boolean;
+  closeIcon?: VueNode;
+  classes?: NotificationClassNamesType;
+  styles?: NotificationStylesType;
+}
+type StaticFn = (args: ArgsProps) => void;
+interface NotificationInstance {
+  success: StaticFn;
+  error: StaticFn;
+  info: StaticFn;
+  warning: StaticFn;
+  open: StaticFn;
+  destroy: (key?: Key) => void;
+}
+interface GlobalConfigProps {
+  top?: number;
+  bottom?: number;
+  duration?: number | false;
+  showProgress?: boolean;
+  pauseOnHover?: boolean;
+  prefixCls?: string;
+  getContainer?: () => HTMLElement | ShadowRoot;
+  placement?: NotificationPlacement;
+  closeIcon?: VueNode;
+  closable?: ClosableType;
+  rtl?: boolean;
+  maxCount?: number;
+  props?: DivProps;
+  appContext?: AppContext;
+}
+//#endregion
+export { ArgsProps, GlobalConfigProps, IconType, NotificationClassNamesType, NotificationConfig, NotificationInstance, NotificationPlacement, NotificationPlacements, NotificationSemanticClassNames, NotificationSemanticName, NotificationSemanticStyles, NotificationStylesType };

package/dist/notification/interface.js

@@ -0,0 +1,11 @@
+//#region src/notification/interface.ts
+const NotificationPlacements = [
+	"top",
+	"topLeft",
+	"topRight",
+	"bottom",
+	"bottomLeft",
+	"bottomRight"
+];
+//#endregion
+export { NotificationPlacements };