@gct-paas/design 0.1.5-test.2 → 0.1.6-dev.0

package/es/components/panel/panel-form/panel-form.css

@@ -0,0 +1,67 @@
+@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-design-panel-form {
+  height: 100%;
+}

package/es/components/panel/panel-form/panel-form.d.ts

@@ -0,0 +1,62 @@
+import { PropType } from 'vue';
+import { IEditForm } from '@gct-paas/core-web';
+import { IDesignNode, IDesignNodeData } from '@gct-paas/schema';
+export declare const PanelForm: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    model: {
+        type: PropType<IEditForm>;
+        required: true;
+    };
+    node: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    data: import('vue').Ref<{
+        id: string;
+        order?: number | undefined;
+        label: string;
+        type: string;
+        updateDate: number;
+        data: {
+            [x: string]: any;
+            [x: symbol]: any;
+            name?: string | undefined;
+        };
+        parentId?: string | undefined;
+        clone: () => IDesignNode;
+    }, IDesignNode<IDesignNodeData> | {
+        id: string;
+        order?: number | undefined;
+        label: string;
+        type: string;
+        updateDate: number;
+        data: {
+            [x: string]: any;
+            [x: symbol]: any;
+            name?: string | undefined;
+        };
+        parentId?: string | undefined;
+        clone: () => IDesignNode;
+    }>;
+    formData: import('vue').WritableComputedRef<IDesignNodeData, IDesignNodeData>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    model: {
+        type: PropType<IEditForm>;
+        required: true;
+    };
+    node: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    context: IContext;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/panel/panel-form/panel-form.mjs

@@ -0,0 +1,59 @@
+import { useDesignViewController } from "../../../hooks/use-design-view-controller/use-design-view-controller.mjs";
+import "../../../hooks/index.mjs";
+import './panel-form.css';/* empty css                 */
+import { useNamespace } from "@gct-paas/core";
+import { computed, createVNode, defineComponent, ref, resolveComponent } from "vue";
+//#region src/components/panel/panel-form/panel-form.tsx
+var PanelForm = /* @__PURE__ */ defineComponent({
+	name: "PanelForm",
+	props: {
+		model: {
+			type: Object,
+			required: true
+		},
+		node: {
+			type: Object,
+			required: true
+		},
+		context: {
+			type: Object,
+			default: () => {
+				return {};
+			}
+		}
+	},
+	setup(props) {
+		const ns = useNamespace("design-panel-form");
+		const c = useDesignViewController();
+		const data = ref(props.node);
+		return {
+			ns,
+			data,
+			formData: computed({
+				get() {
+					return data.value.data;
+				},
+				set(val) {
+					Object.assign(data.value.data, val);
+					console.debug("[ 保存的val ] >", data.value.data);
+					c.store.updateNode(data.value);
+				}
+			})
+		};
+	},
+	render() {
+		return createVNode("div", { "class": this.ns.b() }, [createVNode(resolveComponent("gct-edit-form"), {
+			"class": "h-full",
+			"embed": true,
+			"model": this.model,
+			"data": this.formData,
+			"onUpdate:data": ($event) => this.formData = $event,
+			"context": {
+				...this.context,
+				id: void 0
+			}
+		}, null)]);
+	}
+});
+//#endregion
+export { PanelForm };

package/es/components/panel/panel-path/panel-path.css

@@ -0,0 +1,89 @@
+@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-design-panel-path {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 12px;
+  overflow: auto hidden;
+  font-size: 12px;
+  color: #797A7D;
+  white-space: nowrap;
+  border-bottom: 1px solid #E0E3EA;
+}
+.gct-design-panel-path__arrow {
+  padding: 0 6px;
+}
+.gct-design-panel-path__arrow > .iconfont {
+  font-size: 10px;
+}
+
+.gct-design-panel-path__item {
+  cursor: pointer;
+}
+.gct-design-panel-path__item:last-child {
+  color: #212528;
+}

package/es/components/panel/panel-path/panel-path.d.ts

@@ -0,0 +1,35 @@
+import { IDesignNode, IDesignNodeData } from '@gct-paas/schema';
+export declare const PanelPath: import('vue').DefineComponent<{}, {
+    ns: import('@gct-paas/core').Namespace;
+    c: import('../../..').IDesignViewController;
+    rootRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    paths: import('vue').Ref<{
+        id: string;
+        order?: number | undefined;
+        label: string;
+        type: string;
+        updateDate: number;
+        data: {
+            [x: string]: any;
+            [x: symbol]: any;
+            name?: string | undefined;
+        };
+        parentId?: string | undefined;
+        clone: () => IDesignNode;
+    }[], IDesignNode<IDesignNodeData>[] | {
+        id: string;
+        order?: number | undefined;
+        label: string;
+        type: string;
+        updateDate: number;
+        data: {
+            [x: string]: any;
+            [x: symbol]: any;
+            name?: string | undefined;
+        };
+        parentId?: string | undefined;
+        clone: () => IDesignNode;
+    }[]>;
+    onActive: (item: IDesignNode<IDesignNodeData> | null) => void;
+    onActivePage: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/panel/panel-path/panel-path.mjs

@@ -0,0 +1,52 @@
+import { useDesignViewController } from "../../../hooks/use-design-view-controller/use-design-view-controller.mjs";
+import "../../../hooks/index.mjs";
+import './panel-path.css';/* empty css                 */
+import { useNamespace } from "@gct-paas/core";
+import { Fragment, createVNode, defineComponent, nextTick, ref, watch } from "vue";
+//#region src/components/panel/panel-path/panel-path.tsx
+var PanelPath = /* @__PURE__ */ defineComponent({
+	name: "PanelPath",
+	setup() {
+		const ns = useNamespace("design-panel-path");
+		const rootRef = ref(null);
+		const c = useDesignViewController();
+		const paths = ref([]);
+		watch(() => c.store.selected, (val) => {
+			if (val) paths.value = c.store.getPaths(val.id);
+			else paths.value = [];
+		});
+		watch(paths, () => {
+			nextTick(() => {
+				if (rootRef.value) rootRef.value.scrollTo(rootRef.value.scrollWidth, 0);
+			});
+		});
+		const onActive = (item) => {
+			c.store.setActive(item);
+		};
+		const onActivePage = () => {
+			c.store.setActive(c.store.pageNode);
+		};
+		return {
+			ns,
+			c,
+			rootRef,
+			paths,
+			onActive,
+			onActivePage
+		};
+	},
+	render() {
+		return createVNode("div", {
+			"ref": "rootRef",
+			"class": this.ns.b()
+		}, [createVNode("span", {
+			"class": this.ns.e("item"),
+			"onClick": this.onActivePage
+		}, [this.c.store.rootExpLabel]), this.paths.map((item) => createVNode(Fragment, null, [createVNode("span", { "class": this.ns.e("arrow") }, [createVNode("i", { "class": "iconfont icon-a-Rightarrow" }, null)]), createVNode("span", {
+			"class": this.ns.e("item"),
+			"onClick": () => this.onActive(item)
+		}, [item.label])]))]);
+	}
+});
+//#endregion
+export { PanelPath };

package/es/components/user-occupy/user-occupy.vue.mjs

@@ -1,7 +1,7 @@
 import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.mjs";
 import user_occupy_vue_vue_type_script_setup_true_lang_default from "./user-occupy.vue_vue_type_script_setup_true_lang.mjs";
-import './user-occupy.vue_vue_type_style_index_0_scoped_24cb9749_lang.css';/* empty css                                                                  */
+import './user-occupy.vue_vue_type_style_index_0_scoped_9b136922_lang.css';/* empty css                                                                  */
 //#region src/components/user-occupy/user-occupy.vue
-var user_occupy_default = /* @__PURE__ */ _plugin_vue_export_helper_default(user_occupy_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-24cb9749"]]);
+var user_occupy_default = /* @__PURE__ */ _plugin_vue_export_helper_default(user_occupy_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9b136922"]]);
 //#endregion
 export { user_occupy_default as default };

package/es/components/user-occupy/user-occupy.vue_vue_type_script_setup_true_lang.mjs

@@ -17,9 +17,9 @@ var user_occupy_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			return occupyInfo.value.occupyName.substring(0, 12) + "...";
 		});
 		return (_ctx, _cache) => {
-			const _component_svg_icon = resolveComponent("svg-icon");
+			const _component_assets_svg_icon = resolveComponent("assets-svg-icon");
 			return unref(occupyInfo).occupyId ? (openBlock(), createElementBlock("div", _hoisted_1, [
-				createVNode(_component_svg_icon, { src: "/assets/design-view/icon_shejizhong.svg" }),
+				createVNode(_component_assets_svg_icon, { src: "/extras-assets/design-view/icon_shejizhong.svg" }),
 				createTextVNode(" " + toDisplayString(unref(t)("sys.user")) + "\xA0", 1),
 				createElementVNode("span", {
 					class: "user-occupy__username",

package/es/components/user-occupy/{user-occupy.vue_vue_type_style_index_0_scoped_24cb9749_lang.css → user-occupy.vue_vue_type_style_index_0_scoped_9b136922_lang.css}

@@ -1,25 +1,25 @@
-.gct-svg-icon[data-v-24cb9749] {
+.gct-svg-icon[data-v-9b136922] {
   margin-right: 8px;
   font-size: 16px;
 }
-.user-occupy[data-v-24cb9749] {
+.user-occupy[data-v-9b136922] {
   color: #fff;
   display: flex;
   align-items: center;
   line-height: 1em;
   font-size: 12px;
 }
-.user-occupy__username[data-v-24cb9749] {
+.user-occupy__username[data-v-9b136922] {
   color: var(--ant-primary-color);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
   vertical-align: bottom;
 }
-.user-occupy .iconfont[data-v-24cb9749] {
+.user-occupy .iconfont[data-v-9b136922] {
   margin-right: 6px;
 }
-.designer-stage .user-occupy[data-v-24cb9749],
-.so-toolbar .user-occupy[data-v-24cb9749] {
+.designer-stage .user-occupy[data-v-9b136922],
+.so-toolbar .user-occupy[data-v-9b136922] {
   color: #5c616a;
 }

package/es/controller/index.d.ts

@@ -0,0 +1 @@
+export { DesignViewController } from './view/design-view.controller';

package/es/controller/index.mjs

@@ -0,0 +1 @@
+import "./view/design-view.controller.mjs";

package/es/controller/view/design-view.controller.d.ts

@@ -0,0 +1,48 @@
+import { IDesignViewController } from '../../interface';
+import { DesignViewHooks } from '../../hooks/designer.hooks';
+import { IDesignNode } from '@gct-paas/schema';
+import { IFormItemBasic } from '@gct-paas/core-web';
+/**
+ * 设计界面控制器
+ *
+ * @author zhanghanrui
+ * @date 2024-07-05 14:07:35
+ * @export
+ * @class DesignViewController
+ * @implements {IDesignViewController}
+ */
+export declare class DesignViewController implements IDesignViewController {
+    readonly store: import('pinia').Store<string, import('../..').IDesignViewState, IObject, import('../..').IDesignViewActions>;
+    readonly hooks: DesignViewHooks;
+    protected expansionTimer: number | null;
+    protected findModelPaths(paths: IFormItemBasic[], items: IFormItemBasic[], model: IFormItemBasic): IFormItemBasic[] | null;
+    /**
+     * 效验整个设计页面的表单数据
+     *
+     * @author zhanghanrui
+     * @date 2024-08-04 14:08:35
+     * @return {*}  {Promise<boolean>}
+     */
+    validate(): Promise<boolean>;
+    /**
+     * 设置展开节点
+     *
+     * @param {string[]} ids 只指定自身需要额外设置的节点，默认会根据当前往上取3层展开
+     * @returns {*}  {void}
+     */
+    setExpansion(ids: string[]): void;
+    /**
+     * 取消展开容器
+     */
+    cancelExpansion(): void;
+    /**
+     * 当前节点左右子节点类型
+     *
+     * @param {IDesignNode} node
+     * @returns {*}  {string[]}
+     */
+    types(node: IDesignNode): string[];
+    mounted(): void;
+    unmounted(): void;
+    dropEnd(): void;
+}

package/es/controller/view/design-view.controller.mjs

@@ -0,0 +1,150 @@
+import { NodeRegister } from "../../register/node/node.register.mjs";
+import "../../register/index.mjs";
+import { useDesignViewStore } from "../../store/view/design-view.store.mjs";
+import "../../store/index.mjs";
+import { DesignViewHooks } from "../../hooks/designer.hooks.mjs";
+import { isFunction } from "lodash-es";
+import { h } from "vue";
+import { EditFormController } from "@gct-paas/core-web";
+import { message } from "ant-design-vue";
+import AsyncValidator from "async-validator";
+//#region src/controller/view/design-view.controller.ts
+/**
+* 设计界面控制器
+*
+* @author zhanghanrui
+* @date 2024-07-05 14:07:35
+* @export
+* @class DesignViewController
+* @implements {IDesignViewController}
+*/
+var DesignViewController = class {
+	store = useDesignViewStore();
+	hooks = new DesignViewHooks();
+	expansionTimer = null;
+	findModelPaths(paths, items, model) {
+		if (items.findIndex((item) => {
+			const container = item;
+			if (container.children) {
+				if (this.findModelPaths(paths, container.children, model) !== null) {
+					paths.push(item);
+					return true;
+				}
+				return false;
+			}
+			if (item.name === model.name) return true;
+			return false;
+		}) !== -1) return paths;
+		return null;
+	}
+	/**
+	* 效验整个设计页面的表单数据
+	*
+	* @author zhanghanrui
+	* @date 2024-08-04 14:08:35
+	* @return {*}  {Promise<boolean>}
+	*/
+	async validate() {
+		const data = this.store.getData();
+		for (const node of data.nodes) {
+			const provider = NodeRegister.get(node.type, this.store.prefix);
+			if (provider) {
+				const model = provider.model;
+				if (model) {
+					const formC = new EditFormController(isFunction(model) ? model({}, node) : model);
+					Object.assign(formC.state.data, node.data);
+					formC.loaded();
+					formC.validate = async () => {
+						const rules = {};
+						const keys = Object.keys(formC.item);
+						for (const key of keys) {
+							const item = formC.item[key];
+							if (item.type === "item" && item.model.rules) rules[key] = item.model.rules;
+						}
+						if (rules && Object.keys(rules).length > 0) {
+							const validator = new AsyncValidator(rules);
+							validator.validate(formC.state.data);
+							return new Promise((resolve) => {
+								validator.validate(formC.state.data, (errors, _fields) => {
+									if (errors && errors.length > 0) {
+										const { field } = errors[0];
+										const c = formC.item[field];
+										const pathModels = this.findModelPaths([], formC.model.children, c.model)?.filter((_) => {
+											return _.title;
+										}).reverse();
+										console.log("pathModels", pathModels);
+										message.warn(h("span", {}, [h("span", {}, [`【${c.data.name}】组件 - 【${pathModels ? pathModels.map((_) => `${_.title} - `).join("") : null}${c.model.label}】必填`])]));
+										resolve(false);
+									} else resolve(true);
+								});
+							});
+						}
+						return true;
+					};
+					if (await formC.validate() !== true) return false;
+				}
+			}
+		}
+		return true;
+	}
+	/**
+	* 设置展开节点
+	*
+	* @param {string[]} ids 只指定自身需要额外设置的节点，默认会根据当前往上取3层展开
+	* @returns {*}  {void}
+	*/
+	setExpansion(ids) {
+		if (this.store.isDragging !== true) return;
+		if (this.expansionTimer) {
+			clearTimeout(this.expansionTimer);
+			this.expansionTimer = null;
+		}
+		this.expansionTimer = setTimeout(() => {
+			ids.forEach((id) => {
+				this.store.expansions.add(id);
+			});
+			const keys = this.hooks.expansion.callSync([]);
+			keys.slice(keys.length - 3).forEach((id) => {
+				this.store.expansions.add(id);
+			});
+			this.store.countAdd();
+		}, 2e3);
+	}
+	/**
+	* 取消展开容器
+	*/
+	cancelExpansion() {
+		if (this.expansionTimer) {
+			clearTimeout(this.expansionTimer);
+			this.expansionTimer = null;
+		}
+		this.store.expansions.clear();
+		this.store.countAdd();
+	}
+	/**
+	* 当前节点左右子节点类型
+	*
+	* @param {IDesignNode} node
+	* @returns {*}  {string[]}
+	*/
+	types(node) {
+		const items = this.store.getChildren(node);
+		const types = [];
+		items.forEach((item) => {
+			types.push(item.type);
+			types.push(...this.types(item));
+		});
+		return types;
+	}
+	mounted() {}
+	unmounted() {
+		this.store.history.clearAll();
+		this.store.$reset();
+	}
+	dropEnd() {
+		this.cancelExpansion();
+		this.store.dropContainer = null;
+	}
+};
+//#endregion
+export { DesignViewController };

package/es/create-app-vue.mjs

@@ -1,4 +1,5 @@
 import components_default from "./components/index.mjs";
+import editor_default from "./editor/index.mjs";
 //#region src/create-app-vue.ts
 /**
 * 创建 Vue 应用并配置全局错误处理
@@ -8,6 +9,7 @@ import components_default from "./components/index.mjs";
 */
 async function designCreateAppVue(app) {
 	app.use(components_default);
+	app.use(editor_default);
 }
 //#endregion
 export { designCreateAppVue };