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

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

@@ -0,0 +1,95 @@
+import * as _$vue from "vue";
+import { InjectionKey, Ref } from "vue";
+import { VueNode } from "@v-c/util";
+import { CustomSlotsType } from "@v-c/util/dist/type";
+
+//#region src/components/Help/ProHelpPanel.d.ts
+declare const selectKeyContextKey: InjectionKey<Ref<{
+  selectedKey?: string;
+  setSelectedKey?: (key: string) => void;
+}>>;
+declare function useSelectKeyProvider(props: Ref<{
+  selectedKey?: string;
+  setSelectedKey?: (key: string) => void;
+}>): void;
+declare function useSelectKeyContext(): Ref<{
+  selectedKey?: string;
+  setSelectedKey?: (key: string) => void;
+}, {
+  selectedKey?: string;
+  setSelectedKey?: (key: string) => void;
+}>;
+interface ProHelpPanelProps {
+  /**
+   * 帮助面板的标题
+   */
+  title?: string;
+  /**
+   * 帮助面板首次打开时的默认选中文档的键名
+   */
+  defaultSelectedKey?: string;
+  /**
+   * 当前选中的帮助文档的键名。如果提供了这个 prop，那么该组件将是一个受控组件，其状态将由父组件管理。如果未提供，那么该组件将是一个非受控组件，其状态将在组件内部管理。
+   */
+  selectedKey?: string;
+  'onUpdate:selectedKey'?: (selectedKey?: string) => void;
+  /**
+   * 当选中的文档键名发生变化时调用的回调函数。新的键名将作为参数传递给该函数。
+   */
+  onSelectedKeyChange?: (key: string | undefined) => void;
+  /**
+   *控制左侧面板是否能够打开
+   */
+  showLeftPanel?: boolean;
+  /**
+   * 当左侧面板打开状态发生变化时调用的回调函数。新的打开状态将作为参数传递给该函数。
+   */
+  'onUpdate:showLeftPanel'?: (showLeftPanel?: boolean) => void;
+  /**
+   * 当左侧面板打开状态发生变化时调用的回调函数。新的打开状态将作为参数传递给该函数。
+   */
+  onShowLeftPanelChange?: (show: boolean) => void;
+  /**
+   * 卡片的变体类型
+   */
+  variant?: 'outlined' | 'borderless';
+  /**
+   * 当帮助面板关闭时调用的回调函数。
+   */
+  onClose?: () => void;
+  /**
+   * 帮助面板的高度，可以是数字或字符串类型。
+   */
+  height?: number | string;
+  /**
+   * 帮助面板的页脚
+   */
+  footer?: VueNode;
+  /**
+   * 在一页内加载所有的 children 内容
+   */
+  infiniteScrollFull?: boolean;
+  /**
+   * 自定义渲染 extra 部分的内容
+   *
+   * @param {VueNode} collapsePannelAction - 折叠收起的左侧按钮
+   * @param {VueNode} helpSelectAction - 默认的帮助筛选按钮
+   * @param {VueNode} closeAction - 关闭操作按钮
+   * @returns {VueNode} - 返回自定义渲染的 extra 操作按钮
+   *
+   */
+  extraRender?: (collapsePannelAction: VueNode, helpSelectAction: VueNode, closeAction: VueNode) => VueNode;
+}
+declare const ProHelpPanel: _$vue.DefineSetupFnComponent<ProHelpPanelProps, {
+  'onUpdate:selectedKey': any;
+  'onUpdate:showLeftPanel': any;
+}, CustomSlotsType<{
+  extraRender?: (collapsePannelAction: VueNode, helpSearchAction: VueNode, closeAction: VueNode) => VueNode;
+  footer?: () => VueNode;
+  default?: () => VueNode;
+}>, ProHelpPanelProps & {
+  "onOnUpdate:selectedKey"?: ((...args: any) => any) | undefined;
+  "onOnUpdate:showLeftPanel"?: ((...args: any) => any) | undefined;
+}, _$vue.PublicProps>;
+//#endregion
+export { ProHelpPanelProps, ProHelpPanel as default, selectKeyContextKey, useSelectKeyContext, useSelectKeyProvider };

package/dist/components/Help/ProHelpPanel.js

@@ -0,0 +1,245 @@
+import { gLocaleObject } from "../../locales/index.js";
+import { useProHelpContext } from "./HelpProvide.js";
+import ProHelpContentPanel from "./ProHelpContentPanel.js";
+import ProHelpSearch from "./ProHelpSearch.js";
+import style_default from "./style/index.js";
+import { Fragment, computed, createVNode, defineComponent, h, inject, mergeProps, provide, ref } from "vue";
+import { isNeedOpenHash, useProConfig } from "@antdv-vue/pro-provider";
+import { useMountMergeState, useState } from "@antdv-vue/pro-utils";
+import { classNames } from "@v-c/util";
+import { Card, ConfigProvider, Menu } from "antdv-next";
+import { useConfig } from "antdv-next/config-provider/context";
+import { CloseOutlined, ProfileOutlined } from "@antdv-next/icons";
+import { unit } from "@antdv-next/cssinjs";
+//#region src/components/Help/ProHelpPanel.tsx
+const selectKeyContextKey = Symbol("selectKeyContext");
+function useSelectKeyProvider(props) {
+	return provide(selectKeyContextKey, props);
+}
+function useSelectKeyContext() {
+	return inject(selectKeyContextKey, ref({}));
+}
+function getFormatMessage() {
+	return ({ id }) => {
+		return gLocaleObject()[id];
+	};
+}
+const ProHelpPanel = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
+	const config = useConfig();
+	const prefixCls = computed(() => config.value.getPrefixCls("pro"));
+	const baseClassName = computed(() => `${prefixCls.value}-help`);
+	const proConfig = useProConfig();
+	const [hashId, cssVarCls] = style_default(baseClassName);
+	const proHelpContextProvide = useProHelpContext();
+	const [openKey, setOpenKey] = useState("");
+	const formatMessage = getFormatMessage();
+	const [selectedKey, setSelectedKey] = useMountMergeState(() => {
+		if (props.selectedKey) return props.selectedKey;
+		return props.defaultSelectedKey;
+	}, {
+		defaultValue: props.defaultSelectedKey,
+		value: computed(() => props.selectedKey),
+		onChange: (value) => {
+			emit("onUpdate:selectedKey", value);
+			props["onUpdate:selectedKey"]?.(value);
+			props.onSelectedKeyChange?.(value);
+		}
+	});
+	const [showLeftPanel, setShowLeftPanel] = useMountMergeState(() => {
+		if (props.showLeftPanel) return props.showLeftPanel;
+		return true;
+	}, {
+		defaultValue: true,
+		value: computed(() => props.showLeftPanel),
+		onChange: (show) => {
+			emit("onUpdate:showLeftPanel", show);
+			props["onUpdate:showLeftPanel"]?.(show);
+			props.onShowLeftPanelChange?.(show);
+		}
+	});
+	const dataSourceKeyMap = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		proHelpContextProvide.value.dataSource.forEach((page) => {
+			map.set(page.key, page);
+			page.children?.forEach((item) => {
+				map.set(item.key || item.title, {
+					parentKey: page.key,
+					...item
+				});
+			});
+		});
+		return map;
+	});
+	const parentKey = computed(() => dataSourceKeyMap.value.get(selectedKey.value)?.parentKey || "");
+	useSelectKeyProvider(computed(() => ({
+		selectedKey: selectedKey.value,
+		setSelectedKey
+	})));
+	return () => {
+		const { title = formatMessage({
+			id: "app.help.title",
+			defaultMessage: "帮助中心"
+		}), variant = "outlined", onClose, footer = slots.footer, extraRender = slots.extraRender, height } = props;
+		const defaultExtraActions = {
+			collapsePanelAction: createVNode("div", { "class": classNames(`${baseClassName.value}-actions-item`, hashId?.value, cssVarCls?.value) }, [createVNode(ProfileOutlined, mergeProps({ title: "collapse panel" }, { "onClick": () => setShowLeftPanel(!showLeftPanel.value) }), null)]),
+			helpSearchAction: createVNode(ProHelpSearch, {
+				"iconClassName": classNames(`${baseClassName.value}-actions-item`, hashId?.value, cssVarCls?.value),
+				"class": classNames(`${baseClassName.value}-actions-input`, hashId?.value, cssVarCls?.value),
+				"value": selectedKey.value,
+				"basePrefixCls": baseClassName.value,
+				"onChange": (value, item) => {
+					setSelectedKey(value);
+					setOpenKey(item.dataItemKey);
+				}
+			}, null),
+			closeAction: createVNode("div", { "class": classNames(`${baseClassName.value}-actions-item`, hashId?.value, cssVarCls?.value) }, [createVNode(CloseOutlined, { "onClick": () => onClose?.() }, null)])
+		};
+		return createVNode(Fragment, null, [createVNode(Card, {
+			"variant": variant,
+			"title": title,
+			"styles": { body: {
+				display: "flex",
+				padding: 0,
+				margin: 0,
+				height: "100%",
+				width: "100%"
+			} },
+			"size": "small",
+			"extra": createVNode("div", { "class": classNames(`${baseClassName.value}-actions`, hashId?.value, cssVarCls?.value) }, [extraRender ? extraRender(defaultExtraActions.collapsePanelAction, defaultExtraActions.helpSearchAction, defaultExtraActions.closeAction) : createVNode(Fragment, null, [
+				defaultExtraActions.collapsePanelAction,
+				defaultExtraActions.helpSearchAction,
+				onClose ? defaultExtraActions.closeAction : null
+			])])
+		}, { default: () => [showLeftPanel.value ? createVNode("div", {
+			"class": classNames(hashId?.value, cssVarCls?.value, `${baseClassName.value}-left-panel`),
+			"style": { height: unit(height) }
+		}, [createVNode(ConfigProvider, { "theme": {
+			hashed: isNeedOpenHash(),
+			token: {
+				lineHeight: 1.2,
+				fontSize: 12,
+				controlHeightLG: 26
+			},
+			components: { Menu: {
+				itemBorderRadius: proConfig.value.token.borderRadius,
+				activeBarWidth: 0,
+				activeBarBorderWidth: 0,
+				itemSelectedBg: proConfig.value.token.layout?.sider?.colorBgMenuItemSelected || "rgba(0, 0, 0, 0.04)",
+				itemActiveBg: proConfig.value.token.layout?.sider?.colorBgMenuItemHover || "rgba(0, 0, 0, 0.04)",
+				itemColor: proConfig.value.token.layout?.sider?.colorTextMenu || "rgba(0, 0, 0, 0.65)",
+				itemHoverColor: proConfig.value.token.layout?.sider?.colorTextMenuActive || "rgba(0, 0, 0, 0.85)",
+				itemSelectedColor: proConfig.value.token.layout?.sider?.colorTextMenuSelected || "rgba(0, 0, 0, 1)",
+				itemBg: "transparent",
+				subMenuItemBg: "transparent",
+				popupBg: proConfig.value.token?.colorBgElevated,
+				darkPopupBg: proConfig.value.token?.colorBgElevated
+			} }
+		} }, { default: () => [createVNode(Menu, {
+			"class": classNames(hashId?.value, cssVarCls?.value, `${baseClassName.value}-left-panel-menu`),
+			"openKeys": [parentKey.value, openKey.value],
+			"onOpenChange": (keys) => {
+				setOpenKey(keys.at(-1) || "");
+			},
+			"selectedKeys": selectedKey.value ? [selectedKey.value] : [],
+			"onSelect": ({ selectedKeys }) => {
+				setSelectedKey(selectedKeys.at(-1) || "");
+			},
+			"mode": "inline",
+			"items": proHelpContextProvide.value.dataSource.map((item) => {
+				return {
+					key: item.key,
+					label: item.title,
+					children: item.children.map((child) => {
+						return {
+							key: child.key,
+							label: child.title
+						};
+					})
+				};
+			})
+		}, null)] })]) : null, createVNode("div", {
+			"class": classNames(hashId?.value, cssVarCls?.value, `${baseClassName.value}-content-panel`),
+			"style": { height: unit(height) }
+		}, [selectedKey.value ? createVNode(ProHelpContentPanel, {
+			"parentItem": dataSourceKeyMap.value.get(parentKey.value),
+			"class": classNames(`${baseClassName.value}-content-render`, hashId?.value, cssVarCls?.value),
+			"selectedKey": selectedKey.value,
+			"onScroll": (key) => setSelectedKey(key)
+		}, null) : null, footer ? createVNode("div", { "class": classNames(`${baseClassName.value}-footer`, hashId?.value, cssVarCls?.value) }, [Array.isArray(footer) || typeof footer === "boolean" || typeof footer === "number" || typeof footer === "string" ? footer : h(footer)]) : null])] })]);
+	};
+}, {
+	props: {
+		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
+		},
+		onClose: {
+			type: Function,
+			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
+		}
+	},
+	emits: ["onUpdate:selectedKey", "onUpdate:showLeftPanel"],
+	name: "ProHelpPanel",
+	inheritAttrs: false
+});
+//#endregion
+export { ProHelpPanel as default, selectKeyContextKey, useSelectKeyContext, useSelectKeyProvider };

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

@@ -0,0 +1,61 @@
+import * as _$vue from "vue";
+import { CSSProperties } from "vue";
+import { PopoverProps } from "antdv-next";
+import { CustomSlotsType, VueNode } from "@v-c/util/dist/type";
+
+//#region src/components/Help/ProHelpPopover.d.ts
+type ProHelpPopoverProps = Omit<PopoverProps, 'content'> & {
+  /**
+   * 悬浮提示文字的 CSS 类名
+   */
+  textClassName?: string;
+  /**
+   * Popover 内容的 content 的 CSS 类名
+   */
+  popoverContextClassName?: string;
+  /**
+   * 悬浮提示文字的 CSS 样式对象
+   */
+  textStyle?: CSSProperties;
+  /**
+   * 当前选中的帮助文档的 key 值
+   */
+  selectedKey: string;
+  /**
+   * 可选的悬浮提示 Popover 组件的 Props，用于自定义悬浮提示的样式和行为。
+   * 该属性可以传递 Ant Design Popover 组件的 props，如位置、大小、触发方式等等
+   * @see popoverProps 注意，content 属性已经被从 PopoverProps 中删除，因为这个属性由 ProHelpPopover 内部控制。
+   */
+  popoverProps?: PopoverProps;
+};
+/**
+ * 异步加载内容的面板组件
+ */
+declare const ProHelpPopover: _$vue.DefineSetupFnComponent<ProHelpPopoverProps, {}, CustomSlotsType<{
+  default?: () => VueNode;
+}>, Omit<PopoverProps, "content"> & {
+  /**
+   * 悬浮提示文字的 CSS 类名
+   */
+  textClassName?: string;
+  /**
+   * Popover 内容的 content 的 CSS 类名
+   */
+  popoverContextClassName?: string;
+  /**
+   * 悬浮提示文字的 CSS 样式对象
+   */
+  textStyle?: CSSProperties;
+  /**
+   * 当前选中的帮助文档的 key 值
+   */
+  selectedKey: string;
+  /**
+   * 可选的悬浮提示 Popover 组件的 Props，用于自定义悬浮提示的样式和行为。
+   * 该属性可以传递 Ant Design Popover 组件的 props，如位置、大小、触发方式等等
+   * @see popoverProps 注意，content 属性已经被从 PopoverProps 中删除，因为这个属性由 ProHelpPopover 内部控制。
+   */
+  popoverProps?: PopoverProps;
+} & {}, _$vue.PublicProps>;
+//#endregion
+export { ProHelpPopoverProps, ProHelpPopover as default };

package/dist/components/Help/ProHelpPopover.js

@@ -0,0 +1,183 @@
+import ProHelpContentPanel from "./ProHelpContentPanel.js";
+import { computed, createVNode, defineComponent, mergeProps } from "vue";
+import { useProConfig } from "@antdv-vue/pro-provider";
+import { classNames } from "@v-c/util";
+import { Popover } from "antdv-next";
+import { useConfig } from "antdv-next/config-provider/context";
+//#region src/components/Help/ProHelpPopover.tsx
+/**
+* 异步加载内容的面板组件
+*/
+const ProHelpPopover = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const config = useConfig();
+	const proConfig = useProConfig();
+	const prefixCls = computed(() => props.prefixCls || config.value.getPrefixCls("pro"));
+	const baseClassName = computed(() => `${prefixCls.value}-help-popover`);
+	return () => {
+		return createVNode(Popover, mergeProps({
+			"styles": { container: { padding: 0 } },
+			"content": createVNode("div", { "class": classNames(`${baseClassName.value}-content`, proConfig.value.hashId, props.popoverContextClassName) }, [createVNode(ProHelpContentPanel, { "selectedKey": props.selectedKey }, null)])
+		}, props.popoverProps), { default: () => [createVNode("span", { "class": classNames(`${baseClassName.value}-text`, proConfig.value.hashId, props.textClassName) }, [slots.default?.()])] });
+	};
+}, {
+	props: {
+		title: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		afterOpenChange: {
+			type: Function,
+			required: false
+		},
+		builtinPlacements: { required: false },
+		overlay: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		openClass: {
+			type: String,
+			required: false
+		},
+		unique: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		align: {
+			type: Object,
+			required: false
+		},
+		arrow: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		autoAdjustOverflow: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		color: { required: false },
+		open: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false
+		},
+		destroyOnHidden: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		zIndex: {
+			type: Number,
+			required: false
+		},
+		placement: {
+			type: String,
+			required: false
+		},
+		trigger: {
+			type: [String, Array],
+			required: false
+		},
+		fresh: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		mouseEnterDelay: {
+			type: Number,
+			required: false
+		},
+		mouseLeaveDelay: {
+			type: Number,
+			required: false
+		},
+		getTooltipContainer: {
+			type: Function,
+			required: false
+		},
+		motion: {
+			type: Object,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		"onUpdate:open": {
+			type: Function,
+			required: false
+		},
+		onOpenChange: {
+			type: Function,
+			required: false
+		},
+		textClassName: {
+			type: String,
+			required: false
+		},
+		popoverContextClassName: {
+			type: String,
+			required: false
+		},
+		textStyle: {
+			type: Object,
+			required: false
+		},
+		selectedKey: {
+			type: String,
+			required: true
+		},
+		popoverProps: {
+			type: Object,
+			required: false
+		}
+	},
+	name: "ProHelpPopover",
+	inheritAttrs: false
+});
+//#endregion
+export { ProHelpPopover as default };

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

@@ -0,0 +1,14 @@
+import * as _$vue from "vue";
+import { SelectProps } from "antdv-next";
+
+//#region src/components/Help/ProHelpSearch.d.ts
+type ProHelpSearchProps = Omit<SelectProps, 'onSearch' | 'optionFilterProp' | 'options' | 'filterOption'> & {
+  iconClassName?: string;
+  basePrefixCls?: string;
+};
+declare const ProHelpSearch: _$vue.DefineSetupFnComponent<ProHelpSearchProps, {}, {}, Omit<SelectProps, "onSearch" | "optionFilterProp" | "options" | "filterOption"> & {
+  iconClassName?: string;
+  basePrefixCls?: string;
+} & {}, _$vue.PublicProps>;
+//#endregion
+export { ProHelpSearchProps, ProHelpSearch as default };