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

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

@@ -0,0 +1,206 @@
+import { InjectionKey, Ref } from "vue";
+import { VueNode } from "@v-c/util";
+import { ImageProps } from "antdv-next";
+import { Key } from "@v-c/util/dist/type";
+import { LinkProps } from "antdv-next/dist/typography/Link";
+
+//#region src/components/Help/HelpProvide.d.ts
+/**
+ * ProHelp 数据源子项内容类型。
+ * 该类型定义了多种数据源子项内容类型，例如 h1、h2、link、text、image等。
+ * 其中，link 和 inlineLink 属性都是链接类型的数据源子项内容，不同的是 inlineLink 是内联链接，而 link 是块级链接。
+ *
+ * @typedef {object} ProHelpDataSourceContentType
+ * @property {string} h1 标题1类型的数据源子项内容。
+ * @property {string} h2 标题2类型的数据源子项内容。
+ * @property {{ children: string } & React.AnchorHTMLAttributes<HTMLAnchorElement>} link 链接类型的数据源子项内容。
+ * @property {{ children: string } & React.AnchorHTMLAttributes<HTMLAnchorElement>} inlineLink 内联链接类型的数据源子项内容。
+ * @property {string} text 文本类型的数据源子项内容。
+ * @property {ImageProps} image 图片类型的数据源子项内容。
+ */
+interface ProHelpDataSourceContentType {
+  /**
+   * h1 标题1类型的数据源子项内容。
+   */
+  h1: string;
+  /**
+   * h2 标题1类型的数据源子项内容。
+   */
+  h2: string;
+  /**
+   * link 链接类型的数据源子项内容。
+   */
+  link: {
+    children: string;
+  } & LinkProps;
+  /**
+   * 行内链接类型的数据源子项内容。
+   */
+  inlineLink: LinkProps & {
+    children: string;
+  };
+  /**
+   * navigation 类型链接，或切换菜单
+   */
+  navigationSwitch: {
+    selectKey: string;
+    children: string;
+  };
+  /**
+   * text 文本类型的数据源子项内容。
+   */
+  text: string;
+  /**
+   * image 图片类型的数据源子项内容。
+   */
+  image: ImageProps;
+  /**
+   * markdown 类型的渲染，支持 基本的 markdown 语法
+   * 会包在一个叫 inner-html 为 markdown 的 div 中
+   */
+  html: {
+    class: string;
+    children: string;
+  };
+}
+/**
+ * ProHelp 数据源子项内容类型的类型，可能的取值为 "h1"、"h2"、"link"、"inlineLink"、"text" 和 "image"。
+ * @typedef {'h1' | 'h2' | 'link' | 'inlineLink' | 'text' | 'image'} ProHelpDataSourceChildrenType
+ */
+type ProHelpDataSourceChildrenType = Extract<keyof ProHelpDataSourceContentType, any>;
+/**
+ * ProHelp 数据源子项内容属性类型。
+ * @template ValueType 数据源项值的类型，默认为 'text'。
+ * 该类型定义了一个名为 children 的对象属性，根据 valueType 属性的值来确定该属性对象的具体类型，
+ * 如果 valueType 的类型是 ProHelpDataSourceChildrenType，
+ * 则使用 ProHelpDataSourceContentType 中 ProHelpDataSourceChildrenType 所对应的属性类型；
+ * 否则，使用 ProHelpDataSourceContentType 中 ValueType 所对应的属性类型。
+ */
+type ProHelpDataSourceContentProps<ValueTypeMap, ValueType> = ValueType extends ProHelpDataSourceChildrenType ? ProHelpDataSourceContentType[ValueType] : ValueType extends keyof ValueTypeMap ? ValueTypeMap[ValueType] : ProHelpDataSourceContentType[ProHelpDataSourceChildrenType];
+/**
+ * ProHelp 数据源子项类型。
+ * @template ValueTypeMap 数据源项值的类型，默认为 'text'。
+ * @property {(ValueType | ProHelpDataSourceChildrenType)} valueType 数据源子项值的类型，可以为指定的类型，也可以是自定义类型。
+ * @property {ProHelpDataSourceContentProps<ValueType>} children 包含数据源子项内容的对象。
+ */
+interface ProHelpDataSourceChildren<ValueTypeMap = {
+  text: string;
+}> {
+  /**
+   * 包含数据源子项内容的对象。
+   * @template ValueType 数据源项值的类型，默认为 'text'。
+   */
+  valueType: ValueTypeMap extends Map<infer ValueType, any> ? ValueType : keyof ValueTypeMap | ProHelpDataSourceChildrenType;
+  /**
+   * 数据源子项值的类型。
+   * @typedef {(ValueTypeMap | ProHelpDataSourceChildrenType)} ProHelpDataSourceChildrenType
+   */
+  children: ProHelpDataSourceContentProps<ValueTypeMap, keyof ValueTypeMap | ProHelpDataSourceChildrenType>;
+}
+/**
+ * ProHelp 数据源类型。
+ * @template ValueType 数据源项值的类型，默认为 'text'。
+ * @property {string} key 数据源项的唯一标识。
+ * @property {string} title 数据源项的标题。
+ * @property children 包含子项的数组，每个子项包含一个唯一标识，标题以及子子项数组。
+ */
+interface ProHelpDataSource<ValueType = 'text'> {
+  /**
+   * key 数据源项的唯一标识
+   */
+  key: string;
+  /**
+   * title 数据源项的标题。
+   */
+  title: string;
+  /**
+   * 在一页内加载所有的 children 内容
+   */
+  infiniteScrollFull?: boolean;
+  /**
+   * children 包含子项的数组，每个子项包含一个唯一标识，标题以及子子项数组。
+   */
+  children: {
+    key: string;
+    title: string;
+    /**
+     * 是否远程加载children
+     */
+    asyncLoad?: boolean;
+    children?: ProHelpDataSourceChildren<ValueType>[];
+  }[];
+}
+interface ProHelpContextType {
+  /**
+   * 帮助文档的数据源，包含一组帮助文档数据，每个数据包含标题和内容等信息。
+   */
+  dataSource: ProHelpDataSource<any>[];
+  /**
+   * 帮助组件的子组件，用于渲染自定义的帮助内容。
+   * 是一个键值对结构的集合，其中：
+   * 键（key）为字符串类型；
+   * 值（value）为一个函数类型，该函数接受两个参数：一个名为 item 的 ProHelpDataSourceChildren 类型的对象，表示一个 ProHelp 数据源子项的子项；
+   * 一个名为 index 的数字类型参数，表示该子项在父级子项数组中的索引。
+   * 该函数返回一个 ReactNode 类型的元素，用于表示该 ProHelp 数据源子项子项应该渲染的 UI 元素。
+   * 这个 Map 的作用是将 ProHelp 数据源子项子项的 valueType 属性与对应的渲染函数进行映射，从而实现在渲染 ProHelp 数据源时动态地选择渲染方法。
+   * 在实际使用时，我们可以通过判断子项的 valueType 属性，从 valueTypeMap 中取出对应的渲染函数，再将该子项和渲染函数作为参数传入 renderDataSourceItem 函数中即可。
+   */
+  valueTypeMap: Map<string, (item: ProHelpDataSourceChildren<any>, index: number) => VueNode>;
+  /**
+   * 加载数据源的函数,如果把数据源设置为 async load就可以使用这个功能。
+   */
+  onLoadContext?: (key: Key, context: ProHelpDataSource<any>['children'][number]) => Promise<ProHelpDataSourceChildren<any>[]>;
+}
+/**
+ * 这段代码定义了一个名为 ProHelpProvide 的 Vue 上下文对象，并且指定了该上下文对象的初始值为 { dataSource: [] }。
+ * 这个上下文对象中包含了一个名为 dataSource 的属性，该属性的值是一个数组，类型为 ProHelpDataSource<any>[]。
+ * 该上下文对象通常用于在 Vue 组件树中共享数据，即可以通过在组件中使用 useProHelpProvider，
+ * 将 dataSource 和 valueTypeMap 数据源传递给这些组件，这些组件即可从上下文中获取 dataSource 数据源，实现数据的共享和传递。
+ */
+declare const proHelpContextKey: InjectionKey<Ref<ProHelpContextType>>;
+declare function useProHelpProvider(props: Ref<ProHelpContextType>): void;
+declare function useProHelpContext(): Ref<{
+  dataSource: {
+    key: string;
+    title: string;
+    infiniteScrollFull?: boolean
+    /**
+     * children 包含子项的数组，每个子项包含一个唯一标识，标题以及子子项数组。
+     */
+    | undefined;
+    children: {
+      key: string;
+      title: string;
+      asyncLoad?: boolean | undefined;
+      children?: {
+        valueType: unknown;
+        children: any;
+      }[] | undefined;
+    }[];
+  }[];
+  valueTypeMap: Map<string, (item: ProHelpDataSourceChildren<any>, index: number) => VueNode> & Omit<Map<string, (item: ProHelpDataSourceChildren<any>, index: number) => VueNode>, keyof Map<any, any>>;
+  onLoadContext?: ((key: Key, context: ProHelpDataSource<any>["children"][number]) => Promise<ProHelpDataSourceChildren<any>[]>) | undefined;
+}, ProHelpContextType | {
+  dataSource: {
+    key: string;
+    title: string;
+    infiniteScrollFull?: boolean
+    /**
+     * children 包含子项的数组，每个子项包含一个唯一标识，标题以及子子项数组。
+     */
+    | undefined;
+    children: {
+      key: string;
+      title: string;
+      asyncLoad?: boolean | undefined;
+      children?: {
+        valueType: unknown;
+        children: any;
+      }[] | undefined;
+    }[];
+  }[];
+  valueTypeMap: Map<string, (item: ProHelpDataSourceChildren<any>, index: number) => VueNode> & Omit<Map<string, (item: ProHelpDataSourceChildren<any>, index: number) => VueNode>, keyof Map<any, any>>;
+  onLoadContext?: ((key: Key, context: ProHelpDataSource<any>["children"][number]) => Promise<ProHelpDataSourceChildren<any>[]>) | undefined;
+}>;
+//#endregion
+export { ProHelpContextType, ProHelpDataSource, ProHelpDataSourceChildren, proHelpContextKey, useProHelpContext, useProHelpProvider };

package/dist/components/Help/HelpProvide.js

@@ -0,0 +1,20 @@
+import { inject, provide, ref } from "vue";
+//#region src/components/Help/HelpProvide.ts
+/**
+* 这段代码定义了一个名为 ProHelpProvide 的 Vue 上下文对象，并且指定了该上下文对象的初始值为 { dataSource: [] }。
+* 这个上下文对象中包含了一个名为 dataSource 的属性，该属性的值是一个数组，类型为 ProHelpDataSource<any>[]。
+* 该上下文对象通常用于在 Vue 组件树中共享数据，即可以通过在组件中使用 useProHelpProvider，
+* 将 dataSource 和 valueTypeMap 数据源传递给这些组件，这些组件即可从上下文中获取 dataSource 数据源，实现数据的共享和传递。
+*/
+const proHelpContextKey = Symbol("proHelpContext");
+function useProHelpProvider(props) {
+	return provide(proHelpContextKey, props);
+}
+function useProHelpContext() {
+	return inject(proHelpContextKey, ref({
+		dataSource: [],
+		valueTypeMap: /* @__PURE__ */ new Map()
+	}));
+}
+//#endregion
+export { proHelpContextKey, useProHelpContext, useProHelpProvider };

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

@@ -0,0 +1,19 @@
+import { ProHelpDataSource } from "./HelpProvide.js";
+import * as _$vue from "vue";
+
+//#region src/components/Help/ProHelpContentPanel.d.ts
+interface ProHelpContentPanelProps {
+  /**
+   * 控制当前选中的帮助文档
+   */
+  selectedKey?: string;
+  parentItem?: ProHelpDataSource;
+  onScroll?: (key?: string) => void;
+}
+/**
+ * 控制具体的帮助文档显示组件
+ * selectedKey 来展示对应的内容。它会根据不同的item.valueType值来展示不同的内容，包括标题、图片、超链接等。
+ */
+declare const ProHelpContentPanel: _$vue.DefineSetupFnComponent<ProHelpContentPanelProps, {}, {}, ProHelpContentPanelProps & {}, _$vue.PublicProps>;
+//#endregion
+export { ProHelpContentPanelProps, ProHelpContentPanel as default };

package/dist/components/Help/ProHelpContentPanel.js

@@ -0,0 +1,120 @@
+import { useProHelpContext } from "./HelpProvide.js";
+import RenderContentPanel from "./RenderContentPanel.js";
+import AsyncContentPanel from "./AsyncContentPanel.js";
+import { Fragment, computed, createVNode, defineComponent, ref, shallowRef } from "vue";
+import { useProConfig } from "@antdv-vue/pro-provider";
+import { useDebounceFn, useEffect } from "@antdv-vue/pro-utils";
+import { classNames } from "@v-c/util";
+//#region src/components/Help/ProHelpContentPanel.tsx
+/**
+* 控制具体的帮助文档显示组件
+* selectedKey 来展示对应的内容。它会根据不同的item.valueType值来展示不同的内容，包括标题、图片、超链接等。
+*/
+const ProHelpContentPanel = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+	const proHelpContextProvide = useProHelpContext();
+	const proConfig = useProConfig();
+	const scrollHeightMap = ref(/* @__PURE__ */ new Map());
+	const divRef = shallowRef(null);
+	const renderItem = (item) => {
+		if (item?.asyncLoad) return createVNode("div", {
+			"class": classNames(attrs.class, proConfig.value.hashId),
+			"id": item.title
+		}, [createVNode(AsyncContentPanel, {
+			"key": item?.key,
+			"item": item,
+			"onInit": (ref) => {
+				if (!scrollHeightMap.value) return;
+				scrollHeightMap.value.set(item.key, ref);
+			}
+		}, null)]);
+		return createVNode("div", {
+			"class": classNames(attrs.class, proConfig.value.hashId),
+			"id": item?.title
+		}, [createVNode(RenderContentPanel, {
+			"onInit": (ref) => {
+				if (!scrollHeightMap.value) return;
+				scrollHeightMap.value.set(item?.key, ref);
+			},
+			"dataSourceChildren": item?.children || []
+		}, null)]);
+	};
+	useEffect(() => {
+		if (!props.selectedKey || !props.parentItem?.infiniteScrollFull) return;
+		const div = scrollHeightMap.value.get(props.selectedKey);
+		if (div?.offsetTop && divRef.value) {
+			if (Math.abs(divRef.value.scrollTop - div?.offsetTop + 40) > div?.clientHeight) divRef.value.scrollTop = div?.offsetTop - 40;
+		}
+	}, [() => props.selectedKey]);
+	/**
+	* debounce（防抖）处理滚动事件，并根据滚动位置来实现找到当前列表的 key
+	*/
+	const onScrollEvent = useDebounceFn(async (e) => {
+		const dom = e?.target;
+		const list = Array.from(scrollHeightMap.value.entries()).find(([, value]) => {
+			if (dom?.scrollTop < value.offsetTop) return true;
+			return false;
+		});
+		if (!list) return;
+		if (list.at(0) !== props.selectedKey) props.onScroll?.(list.at(0));
+	}, 200);
+	/**
+	* 当 parentItem 组件中的 infiniteScrollFull 属性变化时
+	* 如果该属性为真值，则开始监听滚动事件；
+	* 如果为假值，则停止监听滚动事件并取消防抖处理。
+	* 在监听滚动事件时，可以实现分页（瀑布流）效果。同时，该代码还会根据 selectedKey 的变化来触发跳转
+	*/
+	useEffect(() => {
+		if (!props.parentItem?.infiniteScrollFull) return;
+		onScrollEvent.cancel();
+		divRef.value?.addEventListener("scroll", onScrollEvent.run, false);
+		return () => {
+			onScrollEvent.cancel();
+			divRef.value?.removeEventListener("scroll", onScrollEvent.run, false);
+		};
+	}, [() => props.parentItem?.infiniteScrollFull, () => props.selectedKey]);
+	/**
+	* 生成一个  Map  能根据 key 找到所有的 index
+	*/
+	const dataSourceMap = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		proHelpContextProvide.value.dataSource.forEach((page) => {
+			page.children.forEach((item) => {
+				map.set(item.key || item.title, {
+					...item,
+					parentKey: page.key
+				});
+			});
+		});
+		return map;
+	});
+	return () => {
+		const { selectedKey, parentItem } = props;
+		if (parentItem && parentItem.infiniteScrollFull) return createVNode("div", {
+			"ref": divRef,
+			"class": classNames(`${attrs.class}-infinite-scroll`, proConfig.value.hashId),
+			"style": { overflow: "auto" }
+		}, [parentItem.children?.map((item) => {
+			return createVNode(Fragment, { "key": item.key }, [renderItem(item)]);
+		})]);
+		return renderItem(dataSourceMap.value.get(selectedKey));
+	};
+}, {
+	props: {
+		selectedKey: {
+			type: String,
+			required: false
+		},
+		parentItem: {
+			type: Object,
+			required: false
+		},
+		onScroll: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "ProHelpContentPanel",
+	inheritAttrs: false
+});
+//#endregion
+export { ProHelpContentPanel as default };

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

@@ -0,0 +1,13 @@
+import { ProHelpPanelProps } from "./ProHelpPanel.js";
+import * as _$vue from "vue";
+import { DrawerProps } from "antdv-next";
+
+//#region src/components/Help/ProHelpDrawer.d.ts
+type ProHelpDrawerProps = {
+  drawerProps?: DrawerProps;
+} & Omit<ProHelpPanelProps, 'onClose'>;
+declare const ProHelpDrawer: _$vue.DefineSetupFnComponent<ProHelpDrawerProps, {}, {}, {
+  drawerProps?: DrawerProps;
+} & Omit<ProHelpPanelProps, "onClose"> & {}, _$vue.PublicProps>;
+//#endregion
+export { ProHelpDrawerProps, ProHelpDrawer as default };

package/dist/components/Help/ProHelpDrawer.js

@@ -0,0 +1,108 @@
+import ProHelpPanel from "./ProHelpPanel.js";
+import { computed, createVNode, defineComponent, mergeProps } from "vue";
+import { useMountMergeState } from "@antdv-vue/pro-utils";
+import { Drawer } from "antdv-next";
+//#region src/components/Help/ProHelpDrawer.tsx
+const ProHelpDrawer = /* @__PURE__ */ defineComponent((props) => {
+	const [drawerOpen, setDrawerOpen] = useMountMergeState(false, {
+		value: computed(() => props.drawerProps?.open),
+		onChange: (open) => {
+			props.drawerProps?.afterOpenChange?.(open);
+		}
+	});
+	return () => {
+		const { drawerProps, ...restProps } = props;
+		return createVNode(Drawer, mergeProps({
+			"closeIcon": null,
+			"styles": {
+				header: { display: "none" },
+				body: { padding: 0 }
+			},
+			"mask": { closable: true }
+		}, drawerProps, {
+			"size": drawerProps?.size ?? 720,
+			"open": drawerOpen.value,
+			"onClose": () => setDrawerOpen(false),
+			"afterOpenChange": (open) => {
+				setDrawerOpen(open);
+			}
+		}), { default: () => [createVNode(ProHelpPanel, mergeProps(restProps, {
+			"onClose": () => setDrawerOpen(false),
+			"variant": "borderless"
+		}), null)] });
+	};
+}, {
+	props: {
+		drawerProps: {
+			type: Object,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		defaultSelectedKey: {
+			type: String,
+			required: false
+		},
+		selectedKey: {
+			type: String,
+			required: false
+		},
+		"onUpdate:selectedKey": {
+			type: Function,
+			required: false
+		},
+		onSelectedKeyChange: {
+			type: Function,
+			required: false
+		},
+		showLeftPanel: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		"onUpdate:showLeftPanel": {
+			type: Function,
+			required: false
+		},
+		onShowLeftPanelChange: {
+			type: Function,
+			required: false
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		height: {
+			type: [Number, String],
+			required: false
+		},
+		footer: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		infiniteScrollFull: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		extraRender: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "ProHelpDrawer",
+	inheritAttrs: false
+});
+//#endregion
+export { ProHelpDrawer as default };

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

@@ -0,0 +1,19 @@
+import { ProHelpPanelProps } from "./ProHelpPanel.js";
+import * as _$vue from "vue";
+import { ModalProps } from "antdv-next";
+
+//#region src/components/Help/ProHelpModal.d.ts
+type ProHelpModalrops = {
+  /**
+   * Ant Design Modal 组件的 props，可以传递一些选项，如位置、大小、关闭方式等等。
+   */
+  modalProps?: ModalProps;
+} & Omit<ProHelpPanelProps, 'onClose'>;
+declare const ProHelpModal: _$vue.DefineSetupFnComponent<ProHelpModalrops, {}, {}, {
+  /**
+   * Ant Design Modal 组件的 props，可以传递一些选项，如位置、大小、关闭方式等等。
+   */
+  modalProps?: ModalProps;
+} & Omit<ProHelpPanelProps, "onClose"> & {}, _$vue.PublicProps>;
+//#endregion
+export { ProHelpModalrops, ProHelpModal as default };

package/dist/components/Help/ProHelpModal.js

@@ -0,0 +1,105 @@
+import ProHelpPanel from "./ProHelpPanel.js";
+import { computed, createVNode, defineComponent, mergeProps } from "vue";
+import { useMountMergeState } from "@antdv-vue/pro-utils";
+import { Modal } from "antdv-next";
+//#region src/components/Help/ProHelpModal.tsx
+const ProHelpModal = /* @__PURE__ */ defineComponent((props) => {
+	const [modalOpen, setModalOpen] = useMountMergeState(false, {
+		value: computed(() => props.modalProps?.open),
+		onChange: () => {
+			props.modalProps?.afterClose?.();
+		}
+	});
+	return () => {
+		const { modalProps, ...restprops } = props;
+		return createVNode(Modal, mergeProps({
+			"onCancel": () => {
+				setModalOpen(false);
+			},
+			"styles": { body: { margin: "-24px" } },
+			"centered": true,
+			"closable": false,
+			"footer": null,
+			"width": 720,
+			"open": modalOpen.value,
+			"mask": { closable: true }
+		}, modalProps), { default: () => [createVNode(ProHelpPanel, mergeProps(restprops, {
+			"height": restprops.height || 648,
+			"onClose": () => setModalOpen(false)
+		}), null)] });
+	};
+}, {
+	props: {
+		modalProps: {
+			type: Object,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		defaultSelectedKey: {
+			type: String,
+			required: false
+		},
+		selectedKey: {
+			type: String,
+			required: false
+		},
+		"onUpdate:selectedKey": {
+			type: Function,
+			required: false
+		},
+		onSelectedKeyChange: {
+			type: Function,
+			required: false
+		},
+		showLeftPanel: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		"onUpdate:showLeftPanel": {
+			type: Function,
+			required: false
+		},
+		onShowLeftPanelChange: {
+			type: Function,
+			required: false
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		height: {
+			type: [Number, String],
+			required: false
+		},
+		footer: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		infiniteScrollFull: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		extraRender: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "ProHelpModal",
+	inheritAttrs: false
+});
+//#endregion
+export { ProHelpModal as default };