@gct-paas/core-web 0.1.6-dev.4 → 0.1.6-dev.6

package/es/modules/relationship-diagram-config/components/diagram-config-item-reverse/diagram-config-item-reverse.css

@@ -0,0 +1,107 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-diagram-config-item-reverse {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #E8EBF0;
+  border-radius: 4px;
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.06);
+}
+.gct-diagram-config-item-reverse__title {
+  height: 32px;
+  padding: 8px 12px;
+  font-size: 14px;
+  line-height: 22px;
+  color: #212528;
+}
+.gct-diagram-config-item-reverse__title .ant-select {
+  min-width: 100px;
+}
+
+.gct-diagram-config-item-reverse__select {
+  height: 50px;
+  padding: 7px 12px;
+}
+.gct-diagram-config-item-reverse__select .ant-select {
+  width: 152px;
+}
+.gct-diagram-config-item-reverse__select .ant-select .ant-select-selector {
+  background-color: #F7F8FA;
+}
+.gct-diagram-config-item-reverse__select .ant-select .ant-select-selector .ant-select-selection-placeholder {
+  color: #C3C3C3;
+}
+.gct-diagram-config-item-reverse__select.is-select .ant-select-selector {
+  border-color: #3168EC !important;
+}
+
+.gct-diagram-config-item-reverse__model-select {
+  padding: 4.5px 8px;
+  background-color: #F7F8FA;
+}
+.gct-diagram-config-item-reverse__model-select .ant-select .ant-select-selector {
+  background-color: transparent;
+  border: 0;
+}

package/es/modules/relationship-diagram-config/components/diagram-config-item-reverse/diagram-config-item-reverse.d.ts

@@ -0,0 +1,34 @@
+import { PropType } from 'vue';
+import { IRelationshipDiagramNode } from '../../interface';
+/**
+ * 节点容器
+ */
+export declare const DiagramConfigItemReverse: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    i: {
+        type: NumberConstructor;
+        required: true;
+    };
+    data: {
+        type: PropType<IRelationshipDiagramNode>;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    modelSelect: import('vue').Ref<string | null, string | null>;
+    select: import('vue').Ref<string | null, string | null>;
+    modelOptions: import('vue').Ref<IData[], IData[]>;
+    options: import('vue').Ref<IData[], IData[]>;
+    onModelChange: (value: string | null, _: IObject) => void;
+    onChange: (value: string | null, _: IObject) => void;
+    onModelFocus: () => Promise<void>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    i: {
+        type: NumberConstructor;
+        required: true;
+    };
+    data: {
+        type: PropType<IRelationshipDiagramNode>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default DiagramConfigItemReverse;

package/es/modules/relationship-diagram-config/components/diagram-config-item-reverse/diagram-config-item-reverse.mjs

@@ -0,0 +1,198 @@
+import { LinkType, NodeType } from "../../constant/index.mjs";
+import { useRootController } from "../../hooks/index.mjs";
+import './diagram-config-item-reverse.css';/* empty css                                  */
+import { createVNode, defineComponent, ref, resolveComponent, watch } from "vue";
+import { clone } from "lodash-es";
+import { t, useNamespace } from "@gct-paas/core";
+//#region src/modules/relationship-diagram-config/components/diagram-config-item-reverse/diagram-config-item-reverse.tsx
+/**
+* 节点容器
+*/
+var DiagramConfigItemReverse = /* @__PURE__ */ defineComponent({
+	name: "DiagramConfigItemReverse",
+	props: {
+		i: {
+			type: Number,
+			required: true
+		},
+		data: {
+			type: Object,
+			required: true
+		}
+	},
+	setup(props) {
+		const ns = useNamespace("diagram-config-item-reverse");
+		const c = useRootController();
+		const models = ref([]);
+		const modelSelect = ref(props.data.modelKey || null);
+		const select = ref(props.data.value || null);
+		const modelOptions = ref([]);
+		const options = ref([]);
+		watch(props.data, () => {
+			modelSelect.value = props.data.modelKey || null;
+			select.value = props.data.value || null;
+			redrawConnect();
+		});
+		const onModelChange = (value, _) => {
+			options.value = [];
+			modelSelect.value = value;
+			select.value = null;
+			const cloneData = clone(props.data);
+			c.node.cache.reverseClear(cloneData);
+			c.node.update(Object.assign(cloneData, {
+				modelKey: value ?? null,
+				modelCategory: _ ? _.data.modelCategory ?? "entity" : "entity",
+				value: null,
+				label: null
+			}));
+			if (value) c.node.cache.reverseReset(cloneData);
+			options.value = [];
+			fillFieldsOptions(_);
+			updateBeforeState();
+			updateAfterState();
+			redrawConnect();
+		};
+		const fillFieldsOptions = (_) => {
+			if (_) {
+				const data = _.data;
+				if (data.fieldMetaList) options.value = data.fieldMetaList.map((item) => {
+					return {
+						label: item.name,
+						value: item.key,
+						data: item
+					};
+				});
+			}
+		};
+		const onChange = (value, _) => {
+			select.value = value;
+			const cloneData = clone(props.data);
+			if (cloneData.value) c.node.cache.clear(cloneData);
+			if (value) c.node.update(Object.assign(cloneData, {
+				value,
+				label: _.label
+			}));
+			else c.node.update(Object.assign(cloneData, {
+				value: null,
+				label: null
+			}));
+			if (value) c.node.cache.reset(cloneData);
+			updateBeforeState();
+			updateAfterState();
+			redrawConnect();
+		};
+		/**
+		* 更新后一个节点的状态
+		*
+		* @author zhanghanrui
+		* @date 2024-06-28 15:06:19
+		*/
+		const updateAfterState = async () => {
+			if (select.value) {
+				if (c.link.getByTarget(props.data.id)) return;
+				const items = await c.getModelList(modelSelect.value, select.value);
+				if (items && items.length > 0) c.node.create({
+					type: NodeType.REVERSE,
+					reverse: true
+				}, {
+					type: LinkType.VIRTUAL,
+					reverse: true,
+					dashed: true
+				});
+			}
+		};
+		/**
+		* 更新前一个节点的状态
+		*
+		* @author zhanghanrui
+		* @date 2024-06-28 14:06:53
+		*/
+		const updateBeforeState = () => {
+			const link = c.link.getBySource(props.data.id);
+			if (link) {
+				const node = c.node.get(link.target, 0, true);
+				if (node && node.type === NodeType.DEFAULT) if (select.value) c.node.update(Object.assign(node, {
+					value: null,
+					label: null,
+					noSelectField: true
+				}));
+				else c.node.update(Object.assign(node, {
+					value: null,
+					label: null,
+					noSelectField: false
+				}));
+			}
+		};
+		const redrawConnect = () => {
+			const link = c.link.getBySource(props.data.id);
+			if (link) {
+				const l = clone(link);
+				if (select.value) l.type = LinkType.DEFAULT;
+				else l.type = LinkType.VIRTUAL;
+				c.link.update(l);
+				const node = c.node.get(link.target);
+				if (node) c.node.update({
+					...node,
+					noSelectField: true
+				});
+			}
+		};
+		const onModelFocus = async () => {
+			const link = c.link.getBySource(props.data.id);
+			if (link) {
+				const targetNode = c.node.get(link.target);
+				if (targetNode) {
+					models.value = await c.getModelList(targetNode.modelKey, targetNode.value);
+					modelOptions.value = models.value.map((item) => {
+						return {
+							value: item.key,
+							label: item.name,
+							data: item
+						};
+					});
+				}
+			}
+		};
+		const load = async () => {
+			if (props.data.modelKey) {
+				await onModelFocus();
+				const opt = modelOptions.value.find((item) => {
+					return item.value === props.data.modelKey;
+				});
+				if (opt) fillFieldsOptions(opt);
+			}
+		};
+		load();
+		return {
+			ns,
+			modelSelect,
+			select,
+			modelOptions,
+			options,
+			onModelChange,
+			onChange,
+			onModelFocus
+		};
+	},
+	render() {
+		return createVNode("div", { "class": this.ns.b() }, [createVNode("div", { "class": [this.ns.e("title"), this.ns.e("model-select")] }, [createVNode(resolveComponent("a-select"), {
+			"size": "small",
+			"allowClear": true,
+			"placeholder": t("sys.pageDesigner.selectModel"),
+			"value": this.modelSelect,
+			"options": this.modelOptions,
+			"onChange": (val, o) => this.onModelChange(val, o),
+			"onFocus": () => this.onModelFocus()
+		}, null)]), createVNode("div", { "class": [this.ns.e("select")] }, [createVNode(resolveComponent("a-select"), {
+			"class": "handle-select",
+			"allowClear": true,
+			"placeholder": t("sys.pageDesigner.dataLinkage.selectPlaceholder"),
+			"value": this.select,
+			"options": this.options,
+			"onChange": (val, o) => this.onChange(val, o),
+			"disabled": !this.modelSelect
+		}, null)])]);
+	}
+});
+//#endregion
+export { DiagramConfigItemReverse, DiagramConfigItemReverse as default };

package/es/modules/relationship-diagram-config/components/diagram-config-item-virtual/diagram-config-item-virtual.css

@@ -0,0 +1,68 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-diagram-config-item-virtual {
+  width: 100%;
+  height: 100%;
+}

package/es/modules/relationship-diagram-config/components/diagram-config-item-virtual/diagram-config-item-virtual.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 最后一个虚拟节点
+ */
+export declare const DiagramConfigItemVirtual: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    i: {
+        type: NumberConstructor;
+        required: true;
+    };
+    beforeNodeId: {
+        type: StringConstructor;
+        required: true;
+    };
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    i: {
+        type: NumberConstructor;
+        required: true;
+    };
+    beforeNodeId: {
+        type: StringConstructor;
+        required: true;
+    };
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default DiagramConfigItemVirtual;

package/es/modules/relationship-diagram-config/components/diagram-config-item-virtual/diagram-config-item-virtual.mjs

@@ -0,0 +1,53 @@
+import { LinkType } from "../../constant/index.mjs";
+import { useRootController } from "../../hooks/index.mjs";
+import './diagram-config-item-virtual.css';/* empty css                                  */
+import { createVNode, defineComponent, nextTick, onMounted, onUnmounted } from "vue";
+import { createUUID } from "qx-util";
+import { useNamespace } from "@gct-paas/core";
+//#region src/modules/relationship-diagram-config/components/diagram-config-item-virtual/diagram-config-item-virtual.tsx
+/**
+* 最后一个虚拟节点
+*/
+var DiagramConfigItemVirtual = /* @__PURE__ */ defineComponent({
+	name: "DiagramConfigItemVirtual",
+	props: {
+		i: {
+			type: Number,
+			required: true
+		},
+		beforeNodeId: {
+			type: String,
+			required: true
+		},
+		id: {
+			type: String,
+			required: true
+		}
+	},
+	setup(props) {
+		const ns = useNamespace("diagram-config-item-virtual");
+		const c = useRootController();
+		const link = {
+			id: createUUID(),
+			i: props.i - 1,
+			source: props.beforeNodeId,
+			target: props.id,
+			type: LinkType.VIRTUAL,
+			return: props.i % c.config.lineCount === 0,
+			startLine: Math.floor((props.i - 1) / 3) + 1
+		};
+		onMounted(() => {
+			nextTick(() => {
+				c.connect(link);
+			});
+		});
+		onUnmounted(() => {
+			c.disconnect(link);
+		});
+		return () => {
+			return createVNode("div", { "class": ns.b() }, null);
+		};
+	}
+});
+//#endregion
+export { DiagramConfigItemVirtual, DiagramConfigItemVirtual as default };

package/es/modules/relationship-diagram-config/components/index.d.ts

@@ -0,0 +1,5 @@
+export { DiagramConfigItem } from './diagram-config-item/diagram-config-item';
+export { DiagramConfigItemContainer } from './diagram-config-item-container/diagram-config-item-container';
+export { DiagramConfigItemReverse } from './diagram-config-item-reverse/diagram-config-item-reverse';
+export { DiagramConfigItemInfo } from './diagram-config-item-info/diagram-config-item-info';
+export { DiagramConfigItemVirtual } from './diagram-config-item-virtual/diagram-config-item-virtual';

package/es/modules/relationship-diagram-config/components/index.mjs

@@ -0,0 +1,5 @@
+import "./diagram-config-item/diagram-config-item.mjs";
+import "./diagram-config-item-container/diagram-config-item-container.mjs";
+import "./diagram-config-item-reverse/diagram-config-item-reverse.mjs";
+import "./diagram-config-item-info/diagram-config-item-info.mjs";
+import "./diagram-config-item-virtual/diagram-config-item-virtual.mjs";

package/es/modules/relationship-diagram-config/constant/index.d.ts

@@ -0,0 +1,72 @@
+/**
+ * 连线方向
+ *
+ * @author zhanghanrui
+ * @date 2024-06-30 13:06:37
+ * @export
+ */
+export declare const ConnectionDirection: {
+    /**
+     * 正向
+     */
+    readonly FORWARD: "forward";
+    /**
+     * 反向
+     */
+    readonly REVERSE: "reverse";
+};
+export type ConnectionDirection = (typeof ConnectionDirection)[keyof typeof ConnectionDirection];
+/**
+ * 控制器标识
+ *
+ * @author zhanghanrui
+ * @date 2024-06-25 09:06:57
+ * @export
+ */
+export declare const ControllerTag: {
+    /**
+     * 根节点控制器标识
+     */
+    readonly ROOT: "root-controller";
+};
+export type ControllerTag = (typeof ControllerTag)[keyof typeof ControllerTag];
+/**
+ * 连线类型
+ *
+ * @author zhanghanrui
+ * @date 2024-06-25 19:06:26
+ * @export
+ */
+export declare const LinkType: {
+    /**
+     * 默认连线
+     */
+    readonly DEFAULT: "default";
+    /**
+     * 虚拟连线
+     */
+    readonly VIRTUAL: "virtual";
+};
+export type LinkType = (typeof LinkType)[keyof typeof LinkType];
+/**
+ * 节点类型
+ *
+ * @author zhanghanrui
+ * @date 2024-06-25 20:06:44
+ * @export
+ */
+export declare const NodeType: {
+    /**
+     * 默认节点
+     */
+    readonly DEFAULT: "default";
+    /**
+     * 虚拟节点
+     */
+    readonly VIRTUAL: "virtual";
+    /**
+     * 反转节点
+     */
+    readonly REVERSE: "reverse";
+};
+export type NodeType = (typeof NodeType)[keyof typeof NodeType];

package/es/modules/relationship-diagram-config/constant/index.mjs

@@ -0,0 +1,70 @@
+//#region src/modules/relationship-diagram-config/constant/index.ts
+/**
+* 连线方向
+*
+* @author zhanghanrui
+* @date 2024-06-30 13:06:37
+* @export
+*/
+var ConnectionDirection = {
+	/**
+	* 正向
+	*/
+	FORWARD: "forward",
+	/**
+	* 反向
+	*/
+	REVERSE: "reverse"
+};
+/**
+* 控制器标识
+*
+* @author zhanghanrui
+* @date 2024-06-25 09:06:57
+* @export
+*/
+var ControllerTag = { 
+/**
+* 根节点控制器标识
+*/
+ROOT: "root-controller" };
+/**
+* 连线类型
+*
+* @author zhanghanrui
+* @date 2024-06-25 19:06:26
+* @export
+*/
+var LinkType = {
+	/**
+	* 默认连线
+	*/
+	DEFAULT: "default",
+	/**
+	* 虚拟连线
+	*/
+	VIRTUAL: "virtual"
+};
+/**
+* 节点类型
+*
+* @author zhanghanrui
+* @date 2024-06-25 20:06:44
+* @export
+*/
+var NodeType = {
+	/**
+	* 默认节点
+	*/
+	DEFAULT: "default",
+	/**
+	* 虚拟节点
+	*/
+	VIRTUAL: "virtual",
+	/**
+	* 反转节点
+	*/
+	REVERSE: "reverse"
+};
+//#endregion
+export { ConnectionDirection, ControllerTag, LinkType, NodeType };

package/es/modules/relationship-diagram-config/hooks/index.d.ts

@@ -0,0 +1,10 @@
+import { RelationshipDiagramConfigController } from '../relationship-diagram-config.controller';
+/**
+ * 获取根控制器实例
+ *
+ * @author zhanghanrui
+ * @date 2024-06-25 09:06:08
+ * @export
+ * @return {*}  {RelationshipDiagramConfigController}
+ */
+export declare function useRootController(): RelationshipDiagramConfigController;

package/es/modules/relationship-diagram-config/hooks/index.mjs

@@ -0,0 +1,19 @@
+import { ControllerTag } from "../constant/index.mjs";
+import "../relationship-diagram-config.controller.mjs";
+import { inject } from "vue";
+//#region src/modules/relationship-diagram-config/hooks/index.ts
+/**
+* 获取根控制器实例
+*
+* @author zhanghanrui
+* @date 2024-06-25 09:06:08
+* @export
+* @return {*}  {RelationshipDiagramConfigController}
+*/
+function useRootController() {
+	const rootController = inject(ControllerTag.ROOT);
+	if (!rootController) throw new Error("root controller not found");
+	return rootController;
+}
+//#endregion
+export { useRootController };

package/es/modules/relationship-diagram-config/index.d.ts

@@ -0,0 +1,6 @@
+import { App } from 'vue';
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;
+export * from './interface';