@gct-paas/design 0.1.5-dev.6 → 0.1.5-dev.8

package/es/editor/model-field-select/index.d.ts

@@ -0,0 +1,8 @@
+import { IEditorProvider } from '@gct-paas/core-web';
+export declare class Provider implements IEditorProvider {
+    component: string;
+}
+declare const _default: {
+    install(app: import('vue').App): void;
+};
+export default _default;

package/es/editor/model-field-select/index.mjs

@@ -0,0 +1,9 @@
+import ModelFieldSelect from "./model-field-select.mjs";
+import { EditorType, widthEditorInstall } from "@gct-paas/core-web";
+//#region src/editor/model-field-select/index.ts
+var Provider = class {
+	component = "ModelFieldSelect";
+};
+var model_field_select_default = widthEditorInstall(EditorType.FORM_MODEL_FIELD_SELECT, () => new Provider(), ModelFieldSelect);
+//#endregion
+export { model_field_select_default as default };

package/es/editor/model-field-select/model-field-select.css

@@ -0,0 +1,148 @@
+@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-model-field-select {
+  width: 100%;
+}
+.gct-model-field-select__field-content {
+  margin-top: var(--gct-padding-7);
+}
+
+.gct-model-field-select__field-title {
+  margin-top: var(--gct-padding-7);
+  margin-bottom: var(--gct-padding-4);
+  color: var(--gct-color-text-5);
+}
+
+.gct-model-field-select__scrollbar {
+  max-height: 338px;
+}
+
+.gct-model-field-select__field-list {
+  max-height: 338px;
+  overflow: hidden;
+}
+.gct-model-field-select__field-list .gct-dnd-item {
+  background-color: transparent;
+}
+
+.gct-model-field-select__field-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 var(--gct-padding-4);
+  border-radius: var(--gct-border-radius-s);
+}
+.gct-model-field-select__field-item--bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background-color: var(--gct-color-primary);
+  border-radius: var(--gct-border-radius-s);
+  opacity: 0.08;
+}
+
+.gct-model-field-select__field-item--drag {
+  z-index: 1;
+  flex-shrink: 0;
+  width: 16px;
+  color: #d9d9d9;
+}
+
+.gct-model-field-select__field-item--label {
+  z-index: 1;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.gct-model-field-select__field-item--label-icon {
+  display: inline-block;
+  width: 16px;
+  margin: 0 var(--gct-padding-2);
+  color: var(--gct-color-primary);
+}
+.gct-model-field-select__field-item--label-icon .iconfont {
+  font-size: 12px;
+}
+
+.gct-model-field-select__field-item--label-text {
+  display: inline-block;
+  width: 130px;
+  color: var(--gct-color-text-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gct-model-field-select__field-item--actions {
+  z-index: 1;
+  width: 16px;
+  font-size: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/es/editor/model-field-select/model-field-select.d.ts

@@ -0,0 +1,42 @@
+import { PropType } from 'vue';
+import { IModelFieldSelectEditor } from '@gct-paas/core-web';
+export declare const ModelFieldSelect: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: {
+        type: PropType<IObject[]>;
+        default: () => never[];
+    };
+    model: {
+        type: PropType<IModelFieldSelectEditor>;
+        required: true;
+    };
+    c: {
+        type: ObjectConstructor;
+    };
+    itemModel: {
+        type: ObjectConstructor;
+    };
+    data: {
+        type: ObjectConstructor;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: {
+        type: PropType<IObject[]>;
+        default: () => never[];
+    };
+    model: {
+        type: PropType<IModelFieldSelectEditor>;
+        required: true;
+    };
+    c: {
+        type: ObjectConstructor;
+    };
+    itemModel: {
+        type: ObjectConstructor;
+    };
+    data: {
+        type: ObjectConstructor;
+    };
+}>> & Readonly<{}>, {
+    value: IObject[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default ModelFieldSelect;

package/es/editor/model-field-select/model-field-select.mjs

@@ -0,0 +1,217 @@
+import { DesignNodeType } from "../../constant/index.mjs";
+import { NodeRegister } from "../../register/node/node.register.mjs";
+import "../../register/index.mjs";
+import { platform } from "../../utils/design-view/index.mjs";
+import "../../utils/index.mjs";
+import { useDesignViewController } from "../../hooks/use-design-view-controller/use-design-view-controller.mjs";
+import "../../hooks/index.mjs";
+import { useFieldTransfer } from "../../components/field-transfer/useFieldTransfer.mjs";
+import "../../components/index.mjs";
+import './model-field-select.css';/* empty css                         */
+import { FIELD_TYPE, FieldIconMap, Platform, modelLoader, t, useNamespace } from "@gct-paas/core";
+import { computed, createVNode, defineComponent, isVNode, ref, resolveComponent, watch } from "vue";
+import { CloseOutlined } from "@ant-design/icons-vue";
+import { GctDndContainer } from "@gct-paas/core-web";
+//#region src/editor/model-field-select/model-field-select.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var ModelFieldSelect = /* @__PURE__ */ defineComponent({
+	name: "ModelFieldSelect",
+	props: {
+		value: {
+			type: Array,
+			default: () => []
+		},
+		model: {
+			type: Object,
+			required: true
+		},
+		c: { type: Object },
+		itemModel: { type: Object },
+		data: { type: Object }
+	},
+	setup(props) {
+		const ns = useNamespace("model-field-select");
+		const isLoaded = ref(false);
+		const c = useDesignViewController();
+		const selectNode = c.store.selected;
+		const parentKey = computed(() => {
+			if (!selectNode || selectNode.type === DesignNodeType.PAGE || selectNode.type === DesignNodeType.PAGE_LOWER) return;
+			return selectNode.id;
+		});
+		const nodes = ref([]);
+		const fieldMap = ref({});
+		function getFieldCacheKey(modelKey, fieldKey) {
+			return `${modelKey}___${fieldKey}`;
+		}
+		function updateNodes() {
+			if (!isLoaded.value) {
+				nodes.value = [];
+				return;
+			}
+			nodes.value = c.store.getChildren(parentKey.value) || [];
+		}
+		watch(() => c.store.count, () => {
+			updateNodes();
+		});
+		/**
+		* 根据现有的列表排序，修改 c.store.tree 的顺序
+		*
+		* @author chitanda
+		* @date 2025-06-19 11:06:03
+		* @param {FieldMetaDTO[]} fields
+		*/
+		function sortFields(fields) {
+			const newItems = c.store.getChildren(parentKey.value) || [];
+			newItems.sort((a, b) => {
+				return fields.findIndex((field) => field.key === a.data.key) - fields.findIndex((field) => field.key === b.data.key);
+			});
+			if (parentKey.value) c.store.getTreeItem(parentKey.value)?.children?.sort((a, b) => {
+				return newItems.findIndex((item) => item.id === a.id) - newItems.findIndex((item) => item.id === b.id);
+			});
+			else c.store.tree.sort((a, b) => {
+				return newItems.findIndex((item) => item.id === a.id) - newItems.findIndex((item) => item.id === b.id);
+			});
+		}
+		const fieldInstance = useFieldTransfer();
+		async function addField() {
+			const excludeList = [
+				FIELD_TYPE.EXPRESSION_CONDITION,
+				FIELD_TYPE.MASTERSLAVE,
+				FIELD_TYPE.LABEL_TEMPLATE,
+				FIELD_TYPE.SERIALRULE,
+				FIELD_TYPE.PRIMARY_KEY,
+				FIELD_TYPE.ESOP
+			];
+			if (platform.value === Platform.MOBILE) excludeList.push(...[
+				FIELD_TYPE.RANGE_USER,
+				FIELD_TYPE.MESSAGE_TMPL,
+				FIELD_TYPE.EXPRESSION_CONDITION
+			]);
+			const modelKey = c.store.pageNode?.data.modelKey;
+			fieldInstance.open({
+				modelKey,
+				modalTitle: t("sys.pageDesigner.modelField"),
+				isShowCascader: true,
+				draggable: false,
+				data: nodes.value.map((item) => fieldMap.value[getFieldCacheKey(item.data.modelKey, item.data.key)]),
+				excludeFieldType: excludeList.concat(props.model.excludeFieldType ?? []),
+				excludeFieldKey: [
+					"tenant_id_",
+					"ref_field_key_",
+					"ref_model_key_"
+				].concat(props.model.excludeFieldKey ?? []),
+				saveCallback: async ({ objFieldList }) => {
+					console.log("objFieldList", objFieldList);
+					const items = c.store.getChildren(parentKey.value);
+					if (objFieldList.length === 0) {
+						items.forEach((item) => {
+							c.store.deleteNode(item.id);
+						});
+						return;
+					}
+					items.filter((item) => !objFieldList.some((field) => field.key === item.data.key)).forEach((item) => {
+						c.store.deleteNode(item.id);
+					});
+					const provider = NodeRegister.get(DesignNodeType.FIELD, c.store.prefix);
+					if (!provider) {
+						console.error("Field provider not found");
+						return;
+					}
+					for await (const item of objFieldList) if (!items.find((treeItem) => treeItem.data.key === item.key)) {
+						const field = await modelLoader.loadField(item.modelKey, item.key);
+						if (field) fieldMap.value[getFieldCacheKey(item.modelKey, field.key)] = field;
+						let fieldCodeChain = void 0;
+						if (item.fieldCodeChain) try {
+							fieldCodeChain = JSON.parse(item.fieldCodeChain);
+						} catch (error) {
+							console.error("Invalid fieldCodeChain JSON:", item.fieldCodeChain, error);
+						}
+						const data = provider.create({ data: {
+							modelKey: item.modelKey,
+							modelCategory: item.modelCategory,
+							key: item.key,
+							type: item.type,
+							name: item.name,
+							mapping_type: item.mappingType,
+							fieldCodeChain
+						} });
+						c.store.setNode(parentKey.value || null, data, -1);
+					}
+					sortFields(objFieldList);
+				}
+			});
+		}
+		const dndCfg = {
+			group: "gct-form-model-field-select",
+			end() {
+				sortFields(nodes.value.map((item) => fieldMap.value[getFieldCacheKey(item.data.modelKey, item.data.key)]));
+			}
+		};
+		function onDeleteItem(e, item) {
+			e.stopPropagation();
+			const node = nodes.value.find((n) => n.data.key === item.key);
+			if (!node) {
+				console.warn("Node not found for item:", item);
+				return;
+			}
+			c.store.deleteNode(node.id);
+		}
+		async function onInit() {
+			const all = [];
+			c.store.map.forEach((node) => {
+				all.push((async () => {
+					const key = node.data.modelKey;
+					const field = await modelLoader.loadField(key, node.data.key);
+					if (field) fieldMap.value[getFieldCacheKey(key, field.key)] = field;
+				})());
+			});
+			await Promise.all(all);
+			isLoaded.value = true;
+			updateNodes();
+		}
+		onInit();
+		return () => {
+			let _slot;
+			return createVNode("div", { "class": ns.b() }, [createVNode("div", { "class": ns.e("select-modal") }, [createVNode(resolveComponent("a-button"), {
+				"onClick": addField,
+				"type": "dashed",
+				"block": true
+			}, _isSlot(_slot = t("sys.pageDesigner.selectModelFields")) ? _slot : { default: () => [_slot] })]), createVNode("div", { "class": ns.e("field-content") }, [createVNode("div", { "class": ns.e("field-list") }, [createVNode(resolveComponent("overlayScrollbarsComponent"), {
+				"class": ns.e("scrollbar"),
+				"options": { overflow: { x: "hidden" } }
+			}, { default: () => [createVNode(GctDndContainer, {
+				"config": dndCfg,
+				"items": nodes.value,
+				"onUpdate:items": ($event) => nodes.value = $event
+			}, { default: (args) => {
+				const data = fieldMap.value[getFieldCacheKey(args.data.data.modelKey, args.data.data.key)];
+				if (!data) return createVNode("div", null, null);
+				return createVNode("div", { "class": ns.e("field-item") }, [
+					createVNode("div", { "class": ns.em("field-item", "bg") }, null),
+					createVNode("div", { "class": ns.em("field-item", "drag") }, [createVNode("i", { "class": "iconfont icon-drag" }, null)]),
+					createVNode("div", { "class": ns.em("field-item", "label") }, [createVNode("span", { "class": ns.em("field-item", "label-icon") }, [createVNode("i", { "class": ["iconfont", FieldIconMap[data.type]] }, null)]), createVNode("span", {
+						"class": ns.em("field-item", "label-text"),
+						"title": data.name
+					}, [data.name])]),
+					createVNode("div", { "class": ns.em("field-item", "actions") }, [createVNode(resolveComponent("a-popconfirm"), {
+						"placement": "topRight",
+						"ok-text": t("sys.okText"),
+						"cancel-text": t("sys.closeText"),
+						"onConfirm": (e) => onDeleteItem(e, data)
+					}, {
+						title: () => {
+							return createVNode("div", null, [t("sys.sureToDo")]);
+						},
+						default: () => {
+							return createVNode(CloseOutlined, null, null);
+						}
+					})])
+				]);
+			} })] })])])]);
+		};
+	}
+});
+//#endregion
+export { ModelFieldSelect as default };

package/es/editor/style-border/index.d.ts

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

package/es/editor/style-border/index.mjs

@@ -0,0 +1,11 @@
+import { DesignEditorType } from "../../constant/design-editor-type.mjs";
+import "../../constant/index.mjs";
+import StyleBorder from "./style-border.mjs";
+import { widthEditorInstall } from "@gct-paas/core-web";
+//#region src/editor/style-border/index.ts
+var Provider = class {
+	component = "style-border";
+};
+var style_border_default = widthEditorInstall(DesignEditorType.STYLE_BORDER, () => new Provider(), StyleBorder);
+//#endregion
+export { style_border_default as default };

package/es/editor/style-border/style-border.d.ts

@@ -0,0 +1,35 @@
+import { PropType } from 'vue';
+import { IStyleBorder } from '../../interface';
+import { IFormItem } from '@gct-paas/core-web';
+import { IBorder } from '@gct-paas/core';
+/**
+ * 边框编辑器
+ */
+export declare const StyleBorder: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    itemModel: {
+        type: PropType<IFormItem>;
+        required: true;
+    };
+    model: {
+        type: PropType<IStyleBorder>;
+        required: true;
+    };
+    value: {
+        type: PropType<IBorder>;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    itemModel: {
+        type: PropType<IFormItem>;
+        required: true;
+    };
+    model: {
+        type: PropType<IStyleBorder>;
+        required: true;
+    };
+    value: {
+        type: PropType<IBorder>;
+    };
+}>> & Readonly<{
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default StyleBorder;

package/es/editor/style-border/style-border.mjs

@@ -0,0 +1,38 @@
+import { useNamespace } from "@gct-paas/core";
+import { createVNode, defineComponent, mergeProps, resolveComponent } from "vue";
+import { useGctFormValue } from "@gct-paas/core-web";
+//#region src/editor/style-border/style-border.tsx
+/**
+* 边框编辑器
+*/
+var StyleBorder = /* @__PURE__ */ defineComponent({
+	name: "StyleBorder",
+	inheritAttrs: false,
+	props: {
+		itemModel: {
+			type: Object,
+			required: true
+		},
+		model: {
+			type: Object,
+			required: true
+		},
+		value: { type: Object }
+	},
+	emits: ["update:value"],
+	setup(props) {
+		const ns = useNamespace("style-border");
+		const val = useGctFormValue();
+		return () => {
+			return createVNode(resolveComponent("border-editor"), mergeProps({
+				"value": val.value,
+				"onUpdate:value": ($event) => val.value = $event
+			}, props.model.props || {}, {
+				"showArea": props.model.showArea,
+				"class": [ns.b(), ns.is("readonly", props.model.readonly)]
+			}), null);
+		};
+	}
+});
+//#endregion
+export { StyleBorder as default };

package/es/editor/style-font/index.d.ts

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

package/es/editor/style-font/index.mjs

@@ -0,0 +1,11 @@
+import { DesignEditorType } from "../../constant/design-editor-type.mjs";
+import "../../constant/index.mjs";
+import StyleFont from "./style-font.mjs";
+import { widthEditorInstall } from "@gct-paas/core-web";
+//#region src/editor/style-font/index.ts
+var StyleFontProvider = class {
+	component = "style-font";
+};
+var style_font_default = widthEditorInstall(DesignEditorType.STYLE_FONT, () => new StyleFontProvider(), StyleFont);
+//#endregion
+export { style_font_default as default };

package/es/editor/style-font/style-font.css

@@ -0,0 +1,86 @@
+@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-style-font .component {
+  padding: 2px;
+  border: 1px solid var(--gct-color-border);
+  border-radius: 4px;
+}
+.gct-style-font .box .color-picker-icon {
+  width: 20px;
+  height: 20px;
+}
+.gct-style-font .align-group-box,
+.gct-style-font .font-style-box {
+  height: 28px;
+}
+.gct-style-font .align-group-box .iconfont:hover, .gct-style-font .align-group-box .anticon:hover,
+.gct-style-font .font-style-box .iconfont:hover,
+.gct-style-font .font-style-box .anticon:hover {
+  background-color: transparent;
+}
+.gct-style-font .align-group-box .icon-box:hover,
+.gct-style-font .font-style-box .icon-box:hover {
+  background-color: #e6e9ef;
+}

package/es/editor/style-font/style-font.d.ts

@@ -0,0 +1,35 @@
+import { PropType } from 'vue';
+import { IFormItem } from '@gct-paas/core-web';
+import { IFont } from '@gct-paas/core';
+import { IStyleFont } from '../../interface';
+/**
+ * 文本样式编辑器
+ */
+export declare const StyleFont: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    itemModel: {
+        type: PropType<IFormItem>;
+        required: true;
+    };
+    model: {
+        type: PropType<IStyleFont>;
+        required: true;
+    };
+    value: {
+        type: PropType<IFont>;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    itemModel: {
+        type: PropType<IFormItem>;
+        required: true;
+    };
+    model: {
+        type: PropType<IStyleFont>;
+        required: true;
+    };
+    value: {
+        type: PropType<IFont>;
+    };
+}>> & Readonly<{
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default StyleFont;