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

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 };

package/es/editor/content-tag-style/content-tag-style.css

@@ -0,0 +1,164 @@
+@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-content-tag-style {
+  min-height: 26px;
+}
+.gct-content-tag-style__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 18px;
+}
+
+.gct-content-tag-style__check .ant-checkbox-inner::after {
+  top: 48%;
+  left: 20%;
+}
+.gct-content-tag-style__check .ant-checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  height: 18px;
+}
+.gct-content-tag-style__check .ant-checkbox-wrapper .ant-checkbox {
+  top: 0;
+}
+.gct-content-tag-style__check .ant-checkbox-wrapper .ant-checkbox .ant-checkbox-inner {
+  width: 14px;
+  height: 14px;
+  border-radius: 4px;
+}
+.gct-content-tag-style__check .ant-checkbox-wrapper .ant-checkbox + span {
+  padding-right: 0;
+  padding-left: 4px;
+}
+
+.gct-content-tag-style__tag-icon {
+  width: 30px;
+  height: 20px;
+  margin-right: 10px;
+}
+
+.gct-content-tag-style__tag {
+  display: flex;
+  align-items: center;
+  height: 24px;
+}
+.gct-content-tag-style__tag .radius {
+  background-color: var(--ant-primary-color);
+  border-radius: 5px;
+}
+.gct-content-tag-style__tag .linear_radius {
+  border: 1px solid var(--ant-primary-color);
+  border-radius: 5px;
+}
+.gct-content-tag-style__tag .big_radius {
+  background-color: var(--ant-primary-color);
+  border-radius: 10px;
+}
+.gct-content-tag-style__tag .linear_big_radius {
+  border: 1px solid var(--ant-primary-color);
+  border-radius: 10px;
+}
+.gct-content-tag-style__tag .dashed_radius {
+  border: 1px dashed var(--ant-primary-color);
+  border-radius: 5px;
+}
+.gct-content-tag-style__tag .status {
+  background-color: var(--ant-primary-color);
+  border-radius: 4px;
+  border-top-left-radius: 15px;
+}
+
+.gct-content-tag-style__content {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.gct-content-tag-style__select {
+  flex-grow: 1;
+  height: 26px;
+}
+
+.gct-content-tag-style__color {
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+}
+
+.gct-content-tag-style__color-picker {
+  width: 26px;
+  height: 26px;
+  padding: 2px;
+  border: 1px solid var(--gct-color-border);
+  border-radius: 4px;
+}
+.gct-content-tag-style__color-picker .box,
+.gct-content-tag-style__color-picker .color-picker-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}

package/es/editor/content-tag-style/content-tag-style.d.ts

@@ -0,0 +1,112 @@
+import { IEditorBasic } from '@gct-paas/core-web';
+import { DesignEditorType } from '../../constant';
+export interface IFieldInfoEditor extends IEditorBasic {
+    readonly type: DesignEditorType.CONTENT_TAG_STYLE;
+}
+export declare const ContentTagStyle: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    context: {
+        type: import('vue').PropType<IContext>;
+        default: () => {};
+    };
+    value: {
+        type: import('vue').PropType<IObject>;
+    };
+    model: {
+        type: import('vue').PropType<IEditorBasic>;
+        required: boolean;
+    };
+    c: {
+        type: import('vue').PropType<import('@gct-paas/core-web').IFormItemController>;
+        required: boolean;
+    };
+    itemModel: {
+        type: import('vue').PropType<import('@gct-paas/core-web').IFormEditItem>;
+    };
+    data: {
+        type: ObjectConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    keepalive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: import('vue').PropType<"small" | "medium" | "large">;
+    };
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+    isEmptyText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    context: {
+        type: import('vue').PropType<IContext>;
+        default: () => {};
+    };
+    value: {
+        type: import('vue').PropType<IObject>;
+    };
+    model: {
+        type: import('vue').PropType<IEditorBasic>;
+        required: boolean;
+    };
+    c: {
+        type: import('vue').PropType<import('@gct-paas/core-web').IFormItemController>;
+        required: boolean;
+    };
+    itemModel: {
+        type: import('vue').PropType<import('@gct-paas/core-web').IFormEditItem>;
+    };
+    data: {
+        type: ObjectConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    keepalive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: import('vue').PropType<"small" | "medium" | "large">;
+    };
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+    isEmptyText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    context: IContext;
+    disabled: boolean;
+    readonly: boolean;
+    keepalive: boolean;
+    visible: boolean;
+    count: number;
+    isEmptyText: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/editor/content-tag-style/content-tag-style.mjs

@@ -0,0 +1,80 @@
+import './content-tag-style.css';/* empty css                        */
+import { TagTypeEnum, t, useNamespace } from "@gct-paas/core";
+import { computed, createVNode, defineComponent, isVNode, resolveComponent } from "vue";
+import { gctFormItemEditorProps, useGctFormValue } from "@gct-paas/core-web";
+//#region src/editor/content-tag-style/content-tag-style.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var ContentTagStyle = /* @__PURE__ */ defineComponent({
+	name: "ContentTagStyle",
+	props: gctFormItemEditorProps(),
+	setup() {
+		const ns = useNamespace("content-tag-style");
+		const keys = Object.keys(TagTypeEnum);
+		const val = useGctFormValue();
+		const check = computed({
+			get() {
+				return val.value?.check;
+			},
+			set(value) {
+				val.value = {
+					...val.value || {},
+					check: value
+				};
+			}
+		});
+		const mode = computed({
+			get() {
+				return val.value?.mode || TagTypeEnum.RADIUS;
+			},
+			set(value) {
+				val.value = {
+					...val.value || {},
+					mode: value
+				};
+			}
+		});
+		const color = computed({
+			get() {
+				return val.value?.color;
+			},
+			set(value) {
+				val.value = {
+					...val.value || {},
+					color: value
+				};
+			}
+		});
+		return () => {
+			let _slot, _slot2;
+			return createVNode("div", { "class": ns.b() }, [createVNode("div", { "class": ns.e("title") }, [createVNode("span", { "class": ns.e("label") }, [t("sys.cardDesign.cfg_form.label_style")]), createVNode("span", { "class": ns.e("check") }, [createVNode(resolveComponent("a-checkbox"), {
+				"checked": check.value,
+				"onUpdate:checked": ($event) => check.value = $event,
+				"size": "small"
+			}, _isSlot(_slot = t("sys.cardDesign.cfg_form.cfg_content_tag_style")) ? _slot : { default: () => [_slot] })])]), check.value ? createVNode("div", { "class": ns.e("content") }, [createVNode("span", { "class": ns.e("select") }, [createVNode(resolveComponent("a-select"), {
+				"value": mode.value,
+				"onUpdate:value": ($event) => mode.value = $event,
+				"size": "small",
+				"placeholder": t("sys.chooseText")
+			}, _isSlot(_slot2 = keys.map((key) => {
+				const val = TagTypeEnum[key];
+				const label = t(`sys.pageDesigner.${val}`);
+				return createVNode(resolveComponent("a-select-option"), {
+					"class": ns.e("option"),
+					"key": val,
+					"value": val,
+					"label": label
+				}, { default: () => [createVNode("div", { "class": ns.e("tag") }, [createVNode("span", { "class": [ns.e("tag-icon"), val] }, null), createVNode("span", null, [label])])] });
+			})) ? _slot2 : { default: () => [_slot2] })]), createVNode("span", { "class": ns.e("color") }, [createVNode(resolveComponent("color-editor"), {
+				"value": color.value,
+				"onUpdate:value": ($event) => color.value = $event,
+				"show-alpha": true,
+				"size": "small",
+				"class": ns.e("color-picker")
+			}, null)])]) : null]);
+		};
+	}
+});
+//#endregion
+export { ContentTagStyle };

package/es/editor/content-tag-style/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/content-tag-style/index.mjs

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