antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/message/PurePanel.d.ts

@@ -0,0 +1,36 @@
+import { VueNode } from "../_util/type.js";
+import { SemanticClassNames, SemanticStyles } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { ArgsClassNamesType, ArgsStylesType, NoticeType, SemanticName } from "./interface.js";
+import * as vue394 from "vue";
+
+//#region src/message/PurePanel.d.ts
+interface PureContentProps {
+  prefixCls: string;
+  type?: NoticeType;
+  icon?: VueNode;
+  classNames?: SemanticClassNames<SemanticName>;
+  styles?: SemanticStyles<SemanticName>;
+}
+interface PurePanelProps extends Omit<PureContentProps, 'prefixCls' | 'children' | 'classNames' | 'styles'> {
+  content?: VueNode;
+  duration?: number | false | null;
+  showProgress?: boolean;
+  pauseOnHover?: boolean;
+  closable?: boolean | ({
+    closeIcon?: VueNode;
+    onClose?: VoidFunction;
+  } & Record<string, any>);
+  closeIcon?: VueNode;
+  props?: Record<string, any>;
+  onClose?: VoidFunction;
+  onClick?: (event: Event) => void;
+  prefixCls?: string;
+  class?: string;
+  classes?: ArgsClassNamesType;
+  styles?: ArgsStylesType;
+}
+/** @private Internal Component. Do not use in your production. */
+declare const PurePanel: vue394.DefineSetupFnComponent<PurePanelProps, {}, {}, PurePanelProps & {}, vue394.PublicProps>;
+//#endregion
+export { PurePanel };

package/dist/message/PurePanel.js

@@ -0,0 +1,212 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { pureAttrs, useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { toPropsRefs } from "../_util/tools.js";
+import useCSSVarCls_default from "../config-provider/hooks/useCSSVarCls.js";
+import style_default from "./style/index.js";
+import { cloneVNode, computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+import { CheckCircleFilled, CloseCircleFilled, ExclamationCircleFilled, InfoCircleFilled, LoadingOutlined } from "@antdv-next/icons";
+import { omit } from "es-toolkit";
+import { Notice } from "@v-c/notification";
+
+//#region src/message/PurePanel.tsx
+const TypeIcon = {
+	info: InfoCircleFilled,
+	success: CheckCircleFilled,
+	error: CloseCircleFilled,
+	warning: ExclamationCircleFilled,
+	loading: LoadingOutlined
+};
+const PureContent = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	return () => {
+		const { prefixCls, type, icon, classNames: pureContentClassNames, styles } = props;
+		const renderIcon = () => {
+			if (!icon && !type) return null;
+			if (icon && isVNode(icon)) return cloneVNode(icon, {
+				class: clsx(icon.props?.class, pureContentClassNames?.icon),
+				style: {
+					...icon.props?.style,
+					...styles?.icon
+				}
+			});
+			if (icon) return createVNode("span", {
+				"class": clsx(`${prefixCls}-icon`, pureContentClassNames?.icon),
+				"style": styles?.icon
+			}, [icon]);
+			const IconNode = type ? TypeIcon[type] : null;
+			return IconNode ? createVNode(IconNode, {
+				"class": clsx(`${prefixCls}-icon`, pureContentClassNames?.icon),
+				"style": styles?.icon
+			}, null) : null;
+		};
+		const iconNode = renderIcon();
+		return createVNode("div", { "class": clsx(`${prefixCls}-custom-content`, type && `${prefixCls}-${type}`) }, [iconNode, createVNode("span", {
+			"class": pureContentClassNames?.content,
+			"style": styles?.content
+		}, [slots.default?.()])]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		icon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		classNames: {
+			type: Object,
+			required: false
+		},
+		styles: {
+			type: Object,
+			required: false
+		}
+	},
+	name: "MessagePureContent",
+	inheritAttrs: false
+});
+const omitKeys = [
+	"prefixCls",
+	"type",
+	"icon",
+	"content",
+	"classes",
+	"styles",
+	"class"
+];
+/** @private Internal Component. Do not use in your production. */
+const PurePanel = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+	const { classes: messageClassNames, styles } = toPropsRefs(props, "classes", "styles");
+	const { getPrefixCls, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("message", props);
+	const prefixCls = computed(() => props.prefixCls ?? getPrefixCls("message"));
+	const mergedProps = computed(() => props);
+	const rootCls = useCSSVarCls_default(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, messageClassNames), useToArr(contextStyles, styles), useToProps(mergedProps));
+	return () => {
+		const restProps = omit(props, omitKeys);
+		return createVNode(Notice, mergeProps(pureAttrs(attrs), restProps, {
+			"prefixCls": prefixCls.value,
+			"eventKey": "pure",
+			"duration": null,
+			"className": clsx(contextClassName.value, mergedClassNames.value?.root, props.class, hashId.value, cssVarCls.value, rootCls.value, `${prefixCls.value}-notice-pure-panel`),
+			"style": {
+				...mergedStyles.value.root,
+				...contextStyle.value,
+				...attrs.style
+			},
+			"content": createVNode(PureContent, {
+				"prefixCls": prefixCls.value,
+				"type": props.type,
+				"icon": props.icon,
+				"classNames": mergedClassNames.value,
+				"styles": mergedStyles.value
+			}, { default: () => [props.content] })
+		}), null);
+	};
+}, {
+	props: {
+		content: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		duration: {
+			type: [
+				Number,
+				Boolean,
+				null
+			],
+			required: false
+		},
+		showProgress: {
+			type: Boolean,
+			required: false
+		},
+		pauseOnHover: {
+			type: Boolean,
+			required: false
+		},
+		closable: {
+			type: [Boolean, Object],
+			required: false
+		},
+		closeIcon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		props: {
+			type: Object,
+			required: false
+		},
+		onClose: { required: false },
+		onClick: {
+			type: Function,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		class: {
+			type: String,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		icon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		}
+	},
+	name: "MessagePurePanel",
+	inheritAttrs: false
+});
+var PurePanel_default = PurePanel;
+
+//#endregion
+export { PureContent, PurePanel_default as default };

package/dist/message/index.d.ts

@@ -0,0 +1,24 @@
+import { ArgsProps, ConfigOptions, MessageType, TypeOpen } from "./interface.js";
+import { PurePanel } from "./PurePanel.js";
+import { useMessage } from "./useMessage.js";
+import { Key } from "@v-c/util/dist/type";
+
+//#region src/message/index.d.ts
+interface BaseMethods {
+  open: (config: ArgsProps) => MessageType;
+  destroy: (key?: Key) => void;
+  config: (config: ConfigOptions) => void;
+  useMessage: typeof useMessage;
+  /** @private Internal Component. Do not use in your production. */
+  _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
+}
+interface MessageMethods {
+  info: TypeOpen;
+  success: TypeOpen;
+  error: TypeOpen;
+  warning: TypeOpen;
+  loading: TypeOpen;
+}
+declare const staticMethods: MessageMethods & BaseMethods;
+//#endregion
+export { staticMethods };

package/dist/message/index.js

@@ -0,0 +1,238 @@
+import { useBaseConfig } from "../config-provider/context.js";
+import { useAppConfig } from "../app/context.js";
+import config_provider_default, { globalConfig } from "../config-provider/index.js";
+import PurePanel_default from "./PurePanel.js";
+import { wrapPromiseFn } from "./util.js";
+import useMessage, { useInternalMessage } from "./useMessage.js";
+import { createVNode, defineComponent, isVNode, onMounted, render, shallowRef, watch } from "vue";
+
+//#region src/message/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+let message = null;
+let taskQueue = [];
+let defaultGlobalConfig = {};
+let act = (callback) => callback();
+function getGlobalContext() {
+	const { getContainer, duration, rtl, maxCount, top, pauseOnHover } = defaultGlobalConfig;
+	const mergedContainer = getContainer?.() || document.body;
+	return {
+		getContainer: () => mergedContainer,
+		duration,
+		rtl,
+		maxCount,
+		top,
+		pauseOnHover
+	};
+}
+const GlobalHolder = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	const { messageConfig, sync } = props;
+	const { getPrefixCls } = useBaseConfig();
+	const prefixCls = defaultGlobalConfig.prefixCls || getPrefixCls("message");
+	const appConfig = useAppConfig();
+	const [api, holder] = useInternalMessage({
+		...messageConfig,
+		prefixCls,
+		...appConfig.message || {}
+	});
+	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: {
+	messageConfig: {
+		type: Object,
+		required: true
+	},
+	sync: {
+		type: Function,
+		required: true
+	}
+} });
+const GlobalHolderWrapper = /* @__PURE__ */ defineComponent((props) => {
+	const messageConfig = shallowRef(getGlobalContext());
+	const holderRef = shallowRef();
+	const sync = () => {
+		messageConfig.value = getGlobalContext();
+	};
+	onMounted(sync);
+	let filled = false;
+	watch(() => holderRef.value, (holder) => {
+		if (holder && !filled) {
+			filled = true;
+			props.onReady?.({
+				instance: holder.instance,
+				sync
+			});
+		}
+	}, { immediate: true });
+	return () => {
+		const global = globalConfig();
+		const holderNode = createVNode(GlobalHolder, {
+			"ref": holderRef,
+			"sync": sync,
+			"messageConfig": messageConfig.value
+		}, null);
+		const dom = global.holderRender ? global.holderRender(holderNode) : holderNode;
+		return createVNode(config_provider_default, {
+			"prefixCls": global.getRootPrefixCls(),
+			"iconPrefixCls": global.getIconPrefixCls(),
+			"theme": global.getTheme()
+		}, _isSlot(dom) ? dom : { default: () => [dom] });
+	};
+}, { props: { onReady: {
+	type: Function,
+	required: false
+} } });
+function flushMessageQueue() {
+	if (!message) {
+		const holderFragment = document.createDocumentFragment();
+		const newMessage = { fragment: holderFragment };
+		message = newMessage;
+		act(() => {
+			render(createVNode(GlobalHolderWrapper, { onReady: (node) => {
+				Promise.resolve().then(() => {
+					if (!newMessage.instance && node?.instance) {
+						newMessage.instance = node.instance;
+						newMessage.sync = node.sync;
+						flushMessageQueue();
+					}
+				});
+			} }), holderFragment);
+		});
+		return;
+	}
+	if (!message.instance) return;
+	taskQueue.forEach((task) => {
+		const { type, skipped } = task;
+		if (skipped) return;
+		switch (type) {
+			case "open":
+				act(() => {
+					const closeFn = message.instance.open({
+						...defaultGlobalConfig,
+						...task.config
+					});
+					closeFn?.then(task.resolve);
+					task.setCloseFn(closeFn);
+				});
+				break;
+			case "destroy":
+				act(() => {
+					message?.instance.destroy(task.key);
+				});
+				break;
+			default: act(() => {
+				const closeFn = message.instance[type](...task.args);
+				closeFn?.then(task.resolve);
+				task.setCloseFn(closeFn);
+			});
+		}
+	});
+	taskQueue = [];
+}
+function setMessageGlobalConfig(config) {
+	defaultGlobalConfig = {
+		...defaultGlobalConfig,
+		...config
+	};
+	act(() => {
+		message?.sync?.();
+	});
+}
+function open(config) {
+	const result = wrapPromiseFn((resolve) => {
+		let closeFn;
+		const task = {
+			type: "open",
+			config,
+			resolve,
+			setCloseFn: (fn) => {
+				closeFn = fn;
+			}
+		};
+		taskQueue.push(task);
+		return () => {
+			if (closeFn) act(() => {
+				closeFn?.();
+			});
+			else task.skipped = true;
+		};
+	});
+	flushMessageQueue();
+	return result;
+}
+function typeOpen(type, args) {
+	const result = wrapPromiseFn((resolve) => {
+		let closeFn;
+		const task = {
+			type,
+			args,
+			resolve,
+			setCloseFn: (fn) => {
+				closeFn = fn;
+			}
+		};
+		taskQueue.push(task);
+		return () => {
+			if (closeFn) act(() => {
+				closeFn?.();
+			});
+			else task.skipped = true;
+		};
+	});
+	flushMessageQueue();
+	return result;
+}
+function destroy(key) {
+	taskQueue.push({
+		type: "destroy",
+		key
+	});
+	flushMessageQueue();
+}
+const methods = [
+	"success",
+	"info",
+	"warning",
+	"error",
+	"loading"
+];
+const staticMethods = {
+	open,
+	destroy,
+	config: setMessageGlobalConfig,
+	useMessage,
+	_InternalPanelDoNotUseOrYouWillBeFired: PurePanel_default
+};
+methods.forEach((type) => {
+	staticMethods[type] = (...args) => typeOpen(type, args);
+});
+function noop() {}
+let _actWrapper = noop;
+if (process.env.NODE_ENV === "test") _actWrapper = (wrapper) => {
+	act = wrapper;
+};
+let _actDestroy = noop;
+if (process.env.NODE_ENV === "test") _actDestroy = () => {
+	message = null;
+};
+var message_default = staticMethods;
+
+//#endregion
+export { message_default as default };

package/dist/message/interface.d.ts

@@ -0,0 +1,91 @@
+import { VueNode } from "../_util/type.js";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { CSSProperties } from "vue";
+import { Key } from "@v-c/util/dist/type";
+
+//#region src/message/interface.d.ts
+type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
+type SemanticName = 'root' | 'icon' | 'content';
+type ArgsClassNamesType = SemanticClassNamesType<ArgsProps, SemanticName>;
+type ArgsStylesType = SemanticStylesType<ArgsProps, SemanticName>;
+interface ConfigOptions {
+  top?: string | number;
+  duration?: number;
+  prefixCls?: string;
+  getContainer?: () => HTMLElement | ShadowRoot;
+  transitionName?: string;
+  maxCount?: number;
+  rtl?: boolean;
+  /**
+   * @descCN 悬停时是否暂停计时器
+   * @descEN keep the timer running or not on hover
+   */
+  pauseOnHover?: boolean;
+  classes?: ArgsClassNamesType;
+  styles?: ArgsStylesType;
+}
+interface ArgsProps {
+  /**
+   * @descCN 消息通知的内容，接收组件或者字符串
+   * @descEN The content of the message notification, receiving component or string
+   */
+  content: VueNode;
+  /**
+   * @descCN 消息通知持续显示的时间
+   * @descEN How long the message notification remains displayed
+   */
+  duration?: number;
+  /**
+   * @descCN 消息通知的类型，可以是 'info'、'success'、'error'、'warning' 或 'loading'
+   * @descEN The type of message notification, which can be 'info', 'success', 'error', 'warning' or 'loading'
+   */
+  type?: NoticeType;
+  /**
+   * @descCN 消息通知关闭时进行调用的回调函数
+   * @descEN The callback function called when the message notification is closed
+   */
+  onClose?: () => void;
+  icon?: VueNode;
+  key?: Key;
+  style?: CSSProperties;
+  class?: string;
+  classes?: ArgsClassNamesType;
+  styles?: ArgsStylesType;
+  /**
+   * @descCN 消息通知点击时的回调函数
+   * @descEN Callback function when message notification is clicked
+   */
+  onClick?: (e: MouseEvent) => void;
+  /**
+   * @descCN 悬停时是否暂停计时器
+   * @descEN keep the timer running or not on hover
+   */
+  pauseOnHover?: boolean;
+}
+type JointContent = VueNode | ArgsProps;
+interface MessageType extends PromiseLike<boolean> {
+  (): void;
+}
+type TypeOpen = (content: JointContent,
+/**
+ * @descCN 消息通知持续显示的时间，也可以直接使用 onClose。
+ * @descEN You can also use onClose directly to determine how long the message notification continues to be displayed.
+ */
+duration?: number | VoidFunction,
+/**
+ * @descCN 消息通知关闭时进行调用的回调函数
+ * @descEN The callback function called when the message notification is closed
+ */
+onClose?: VoidFunction) => MessageType;
+interface MessageInstance {
+  info: TypeOpen;
+  success: TypeOpen;
+  error: TypeOpen;
+  warning: TypeOpen;
+  loading: TypeOpen;
+  open: (args: ArgsProps) => MessageType;
+  destroy: (key?: Key) => void;
+}
+//#endregion
+export { ArgsClassNamesType, ArgsProps, ArgsStylesType, ConfigOptions, MessageInstance, MessageType, NoticeType, SemanticName, TypeOpen };

package/dist/message/style/index.d.ts

@@ -0,0 +1,24 @@
+import "../../theme/internal.js";
+import { CSSProperties } from "vue";
+
+//#region src/message/style/index.d.ts
+/** Component only token. Which will handle additional calculation of alias token */
+interface ComponentToken {
+  /**
+   * @desc 提示框 z-index
+   * @descEN z-index of Message
+   */
+  zIndexPopup: number;
+  /**
+   * @desc 提示框背景色
+   * @descEN Background color of Message
+   */
+  contentBg: string;
+  /**
+   * @desc 提示框内边距
+   * @descEN Padding of Message
+   */
+  contentPadding: CSSProperties['padding'];
+}
+//#endregion
+export { ComponentToken };