@antdv-vue/pro-layout 0.0.0-stage → 2.0.3

package/dist/components/Help/ProHelpSearch.js

@@ -0,0 +1,530 @@
+import { useProHelpContext } from "./HelpProvide.js";
+import { Fragment, computed, createVNode, defineComponent, mergeProps } from "vue";
+import { useProConfig } from "@antdv-vue/pro-provider";
+import { useDebounceFn, useState } from "@antdv-vue/pro-utils";
+import { classNames } from "@v-c/util";
+import { Select } from "antdv-next";
+import { SearchOutlined } from "@antdv-next/icons";
+//#region src/components/Help/ProHelpSearch.tsx
+const Highlight = ({ label, words, class: className }) => {
+	if (!words?.length || !words[0]) return createVNode("div", {
+		"title": label,
+		"class": className
+	}, [label]);
+	const matchKeywordsRE = new RegExp(words.map((word) => word.replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&")).join("|"), "gi");
+	let matchText = label;
+	const elements = [];
+	while (matchText.length) {
+		const match = matchKeywordsRE.exec(matchText);
+		if (!match) {
+			elements.push(matchText);
+			break;
+		}
+		const start = match.index;
+		const matchLength = match[0].length + start;
+		elements.push(matchText.slice(0, start), createVNode("span", { "class": `${className}-light` }, [matchText.slice(start, matchLength)]));
+		matchText = matchText.slice(matchLength);
+	}
+	return createVNode("div", {
+		"title": label,
+		"class": className
+	}, [elements]);
+};
+const ProHelpSearch = /* @__PURE__ */ defineComponent((props) => {
+	const baseClassName = computed(() => `${props.basePrefixCls}-search-list-item-content`);
+	const proHeleContextProvide = useProHelpContext();
+	const [keyWord, setKeyWork] = useState(props.defaultValue ?? "");
+	const debounceSetKeyWork = useDebounceFn(async (key) => setKeyWork(key), 20);
+	const proConfig = useProConfig();
+	const [open, setOpen] = useState(false);
+	return () => {
+		const { iconClassName, basePrefixCls, ...restProps } = props;
+		return createVNode(Fragment, null, [!open.value ? createVNode("div", { "class": classNames(iconClassName, proConfig.value.hashId) }, [createVNode(SearchOutlined, mergeProps({ title: "search panel" }, { "onClick": () => {
+			setOpen(true);
+		} }), null)]) : null, open.value ? createVNode(Select, mergeProps(restProps, {
+			"placeholder": "please input search text",
+			"showSearch": {
+				onSearch: (value) => {
+					debounceSetKeyWork.cancel();
+					debounceSetKeyWork.run(value);
+				},
+				filterOption: (input, option) => (option?.title ?? "").toLowerCase().includes(input.toLowerCase())
+			},
+			"onBlur": () => setOpen(false),
+			"size": "small",
+			"popupMatchSelectWidth": false,
+			"options": proHeleContextProvide.value.dataSource.map((item) => ({
+				label: createVNode(Highlight, {
+					"label": item.title,
+					"class": baseClassName.value,
+					"words": keyWord.value ? [keyWord.value] : []
+				}, null),
+				title: item.title,
+				value: item.key,
+				options: item.children?.map((sunItem) => {
+					return {
+						label: createVNode(Highlight, {
+							"label": sunItem.title,
+							"class": baseClassName.value,
+							"words": keyWord.value ? [keyWord.value] : []
+						}, null),
+						title: sunItem.title,
+						value: sunItem.key,
+						dataItemKey: item.key
+					};
+				})
+			}))
+		}), null) : null]);
+	};
+}, {
+	props: {
+		placement: {
+			type: String,
+			required: false
+		},
+		mode: {
+			type: String,
+			required: false
+		},
+		status: {
+			type: String,
+			required: false
+		},
+		popupClassName: {
+			type: String,
+			required: false
+		},
+		dropdownClassName: {
+			type: String,
+			required: false
+		},
+		dropdownStyle: {
+			type: Object,
+			required: false
+		},
+		dropdownRender: {
+			type: Function,
+			required: false
+		},
+		dropdownMatchSelectWidth: {
+			type: [Boolean, Number],
+			required: false,
+			default: void 0
+		},
+		popupMatchSelectWidth: {
+			type: [Boolean, Number],
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		optionRender: {
+			type: Function,
+			required: false
+		},
+		prefix: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		suffix: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		suffixIcon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		size: {
+			type: [String, null],
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		bordered: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		showArrow: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		popupRender: {
+			type: Function,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		fieldNames: {
+			type: Object,
+			required: false
+		},
+		showSearch: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		searchValue: {
+			type: String,
+			required: false
+		},
+		autoClearSearchValue: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		filterSort: {
+			type: Function,
+			required: false
+		},
+		optionLabelProp: {
+			type: String,
+			required: false
+		},
+		defaultActiveFirstOption: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		virtual: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		direction: {
+			type: String,
+			required: false
+		},
+		listHeight: {
+			type: Number,
+			required: false
+		},
+		listItemHeight: {
+			type: Number,
+			required: false
+		},
+		labelRender: {
+			type: Function,
+			required: false
+		},
+		menuItemSelectedIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		labelInValue: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		value: { required: false },
+		defaultValue: { required: false },
+		maxCount: {
+			type: Number,
+			required: false
+		},
+		tagRender: {
+			type: Function,
+			required: false
+		},
+		autoFocus: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		autoComplete: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		tabIndex: {
+			type: Number,
+			required: false
+		},
+		notFoundContent: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		maxLength: {
+			type: Number,
+			required: false
+		},
+		showScrollBar: {
+			type: [Boolean, String],
+			required: false,
+			default: void 0
+		},
+		choiceTransitionName: {
+			type: String,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		open: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		maxTagTextLength: {
+			type: Number,
+			required: false
+		},
+		maxTagCount: {
+			type: [Number, String],
+			required: false
+		},
+		maxTagPlaceholder: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		tokenSeparators: {
+			type: [Array, Function],
+			required: false
+		},
+		allowClear: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		clearIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		removeIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		animation: {
+			type: String,
+			required: false
+		},
+		transitionName: {
+			type: String,
+			required: false
+		},
+		popupStyle: {
+			type: Object,
+			required: false
+		},
+		popupAlign: {
+			type: Object,
+			required: false
+		},
+		builtinPlacements: {
+			type: Object,
+			required: false
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false
+		},
+		showAction: {
+			type: Array,
+			required: false
+		},
+		components: {
+			type: Object,
+			required: false
+		},
+		onOpenChange: {
+			type: Function,
+			required: false
+		},
+		onDropdownVisibleChange: {
+			type: Function,
+			required: false
+		},
+		onClear: {
+			type: Function,
+			required: false
+		},
+		onKeydown: {
+			type: Function,
+			required: false
+		},
+		onKeyup: {
+			type: Function,
+			required: false
+		},
+		onBlur: {
+			type: Function,
+			required: false
+		},
+		"onUpdate:value": {
+			type: Function,
+			required: false
+		},
+		onClick: {
+			type: Function,
+			required: false
+		},
+		onActive: {
+			type: Function,
+			required: false
+		},
+		onChange: {
+			type: Function,
+			required: false
+		},
+		onDeselect: {
+			type: Function,
+			required: false
+		},
+		onInputKeydown: {
+			type: Function,
+			required: false
+		},
+		onMousedown: {
+			type: Function,
+			required: false
+		},
+		onMouseleave: {
+			type: Function,
+			required: false
+		},
+		onMouseenter: {
+			type: Function,
+			required: false
+		},
+		onFocus: {
+			type: Function,
+			required: false
+		},
+		onPopupScroll: {
+			type: Function,
+			required: false
+		},
+		onSelect: {
+			type: Function,
+			required: false
+		},
+		iconClassName: {
+			type: String,
+			required: false
+		},
+		basePrefixCls: {
+			type: String,
+			required: false
+		}
+	},
+	name: "ProHelpSearch",
+	inheritAttrs: false
+});
+//#endregion
+export { ProHelpSearch as default };

package/dist/components/Help/RenderContentPanel.d.ts

@@ -0,0 +1,11 @@
+import { ProHelpDataSourceChildren } from "./HelpProvide.js";
+import * as _$vue from "vue";
+
+//#region src/components/Help/RenderContentPanel.d.ts
+interface RenderContentPanelProps {
+  dataSourceChildren?: ProHelpDataSourceChildren<any>[];
+  onInit?: (ref: HTMLDivElement) => void;
+}
+declare const RenderContentPanel: _$vue.DefineSetupFnComponent<RenderContentPanelProps, {}, {}, RenderContentPanelProps & {}, _$vue.PublicProps>;
+//#endregion
+export { RenderContentPanelProps, RenderContentPanel as default };

package/dist/components/Help/RenderContentPanel.js

@@ -0,0 +1,90 @@
+import { useProHelpContext } from "./HelpProvide.js";
+import { useSelectKeyContext } from "./ProHelpPanel.js";
+import { Fragment, createVNode, defineComponent, isVNode, mergeProps, shallowRef } from "vue";
+import { useEffect } from "@antdv-vue/pro-utils";
+import { Image, TypographyLink, TypographyText, TypographyTitle } from "antdv-next";
+//#region src/components/Help/RenderContentPanel.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const NavigationSwitch = (props, { slots }) => {
+	const context = useSelectKeyContext();
+	return createVNode(TypographyText, null, { default: () => [createVNode("a", {
+		"data-testid": "navigation-switch",
+		"onClick": () => {
+			context.value.setSelectedKey?.(props.selectKey);
+		}
+	}, [slots.default?.()])] });
+};
+const RenderContentPanel = /* @__PURE__ */ defineComponent((props) => {
+	const proHelpContextProvide = useProHelpContext();
+	const divRef = shallowRef(null);
+	useEffect(() => {
+		props.onInit?.(divRef.value);
+	}, [() => props.dataSourceChildren]);
+	/**
+	* itemRender 的定义
+	* @param {ProHelpDataSourceChildren} item
+	* @param {number} index
+	* @return {*}
+	*/
+	const itemRender = (item, index) => {
+		if (proHelpContextProvide.value.valueTypeMap.has(item.valueType)) return createVNode(Fragment, { "key": index }, [proHelpContextProvide.value.valueTypeMap.get(item.valueType)?.(item, index)]);
+		if (item.valueType === "html") {
+			const { class: className, children } = item.children;
+			return createVNode("div", {
+				"key": index,
+				"class": className || "inner-html"
+			}, [children]);
+		}
+		if (item.valueType === "h1") return createVNode(TypographyTitle, {
+			"key": index,
+			"style": { marginTop: 0 },
+			"level": 3
+		}, { default: () => [item.children] });
+		if (item.valueType === "h2") return createVNode(TypographyTitle, {
+			"key": index,
+			"style": { marginTop: "20px" },
+			"level": 5
+		}, { default: () => [item.children] });
+		if (item.valueType === "image") return createVNode("div", {
+			"key": index,
+			"style": { marginBlock: "12px" }
+		}, [createVNode(Image, item.children, null)]);
+		if (item.valueType === "inlineLink") {
+			const { children, ...props } = item.children;
+			return createVNode(TypographyLink, mergeProps({ "key": index }, props), _isSlot(children) ? children : { default: () => [children] });
+		}
+		if (item.valueType === "link") {
+			const { children, ...props } = item.children;
+			return createVNode("div", { "key": index }, [createVNode(TypographyLink, mergeProps({ "key": index }, props), _isSlot(children) ? children : { default: () => [children] })]);
+		}
+		if (item.valueType === "navigationSwitch") {
+			const { selectKey, children } = item.children;
+			return createVNode(NavigationSwitch, {
+				"key": index,
+				"selectKey": selectKey
+			}, _isSlot(children) ? children : { default: () => [children] });
+		}
+		return createVNode(TypographyText, { "key": index }, { default: () => [item.children] });
+	};
+	return () => {
+		const { dataSourceChildren } = props;
+		return createVNode("div", { "ref": divRef }, [dataSourceChildren?.map(itemRender)]);
+	};
+}, {
+	props: {
+		dataSourceChildren: {
+			type: Array,
+			required: false
+		},
+		onInit: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "RenderContentPanel",
+	inheritAttrs: false
+});
+//#endregion
+export { RenderContentPanel as default };

package/dist/components/Help/index.d.ts

@@ -0,0 +1,43 @@
+import { ProHelpDataSource, ProHelpDataSourceChildren } from "./HelpProvide.js";
+import ProHelpPanel from "./ProHelpPanel.js";
+import * as _$vue from "vue";
+import { Plugin } from "vue";
+import { Key, VueNode } from "@v-c/util/dist/type";
+
+//#region src/components/Help/index.d.ts
+interface ProHelpProps<ValueType> {
+  /**
+   * 帮助文档的数据源，包含一组帮助文档数据，每个数据包含标题和内容等信息。
+   */
+  dataSource: ProHelpDataSource<ValueType>[];
+  /**
+   * 帮助组件的子组件，用于渲染自定义的帮助内容。
+   * 是一个键值对结构的集合，其中：
+   * 键（key）为字符串类型；
+   * 值（value）为一个函数类型，该函数接受两个参数：一个名为 item 的 ProHelpDataSourceChildren 类型的对象，表示一个 ProHelp 数据源子项的子项；
+   * 一个名为 index 的数字类型参数，表示该子项在父级子项数组中的索引。
+   * 该函数返回一个 ReactNode 类型的元素，用于表示该 ProHelp 数据源子项子项应该渲染的 UI 元素。
+   * 这个 Map 的作用是将 ProHelp 数据源子项子项的 valueType 属性与对应的渲染函数进行映射，从而实现在渲染 ProHelp 数据源时动态地选择渲染方法。
+   * 在实际使用时，我们可以通过判断子项的 valueType 属性，从 valueTypeMap 中取出对应的渲染函数，再将该子项和渲染函数作为参数传入 renderDataSourceItem 函数中即可。
+   */
+  valueTypeMap?: Map<string, (item: ProHelpDataSourceChildren<ValueType>, index: number) => VueNode>;
+  /**
+   * 加载数据源的函数,如果把数据源设置为 async load就可以使用这个功能。
+   */
+  onLoadContext?: (key: Key, context: ProHelpDataSource<ValueType>['children'][number]) => Promise<ProHelpDataSourceChildren<ValueType>[]>;
+}
+declare const _ProHelp: new <ValueTypeMap = {
+  text: any;
+}>(props: ProHelpProps<ValueTypeMap> & {} & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps) => _$vue.CreateComponentPublicInstanceWithMixins<ProHelpProps<ValueTypeMap> & {}, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, _$vue.PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, _$vue.ComponentProvideOptions, {
+  P: {};
+  B: {};
+  D: {};
+  C: {};
+  M: {};
+  Defaults: {};
+}, ProHelpProps<ValueTypeMap> & {}, {}, {}, {}, {}, {}>;
+declare const ProHelp: typeof _ProHelp & Plugin & {
+  Panel: typeof ProHelpPanel;
+};
+//#endregion
+export { ProHelpProps, ProHelp as default };

package/dist/components/Help/index.js

@@ -0,0 +1,31 @@
+import { useProHelpProvider } from "./HelpProvide.js";
+import ProHelpPanel from "./ProHelpPanel.js";
+import { Fragment, computed, createVNode, defineComponent } from "vue";
+//#region src/components/Help/index.tsx
+const ProHelp = /* @__PURE__ */ defineComponent((props, { slots, expose }) => {
+	useProHelpProvider(computed(() => {
+		const { dataSource = [], valueTypeMap = /* @__PURE__ */ new Map(), onLoadContext } = props;
+		return {
+			onLoadContext,
+			dataSource,
+			valueTypeMap
+		};
+	}));
+	expose({});
+	return () => createVNode(Fragment, null, [slots.default?.()]);
+}, {
+	name: "ProHelp",
+	inheritAttrs: false,
+	props: [
+		"dataSource",
+		"valueTypeMap",
+		"onLoadContext"
+	]
+});
+ProHelp.Panel = ProHelpPanel;
+ProHelp.install = (app) => {
+	app.component(ProHelp.name, ProHelp);
+	app.component(ProHelp.Panel.name, ProHelpPanel);
+};
+//#endregion
+export { ProHelp as default };

package/dist/components/Help/style/index.d.ts

@@ -0,0 +1,10 @@
+import * as _$vue from "vue";
+import { ProAliasCssVarToken } from "@antdv-vue/pro-provider";
+import { Keyframes } from "@antdv-next/cssinjs";
+
+//#region src/components/Help/style/index.d.ts
+interface ProHelpToken extends ProAliasCssVarToken {}
+declare const actionsInputAnimal: Keyframes;
+declare const _default: (prefixCls: _$vue.Ref<string>, rootCls?: _$vue.Ref<string | undefined>) => readonly [_$vue.Ref<string, string>, _$vue.ComputedRef<string | undefined>];
+//#endregion
+export { ProHelpToken, actionsInputAnimal, _default as default };