@gct-paas/design 0.1.4-dev.9 → 0.1.5-dev.0

package/es/hooks/design-view/widget/useWidget.mjs

@@ -1,124 +1,97 @@
-import { computed } from 'vue';
-import { useSelectedWidget } from './useSelectedWidget.mjs';
-import { FormComponents } from '@gct-paas/core';
-import { has } from 'lodash-es';
-
-const NotMask = [
-  FormComponents.Search,
-  FormComponents.DataTable,
-  FormComponents.DataVTable,
-  FormComponents.SubDataTable,
-  FormComponents.Form,
-  FormComponents.FormProcess,
-  FormComponents.RdoForm,
-  FormComponents.MedProRdoForm,
-  FormComponents.LayoutContainer,
-  FormComponents.Grid,
-  FormComponents.GridCol,
-  FormComponents.LeftRightColumns,
-  FormComponents.ButtonContainer,
-  FormComponents.SubTable,
-  FormComponents.Tabs,
-  FormComponents.TabPane,
-  FormComponents.TableSelect,
-  FormComponents.Collapse,
-  FormComponents.CardList,
-  FormComponents.TreeTable,
-  FormComponents.RefDataTable,
-  FormComponents.DynamicTable,
-  FormComponents.Text,
-  FormComponents.UploadFile,
-  FormComponents.Descriptions,
-  FormComponents.BottomButtonContainer,
-  FormComponents.ButtonProcessContainer,
-  FormComponents.ApprovalHistory
+import { designRegister } from "../../../utils/design-view/index.mjs";
+import "../../../utils/index.mjs";
+import { useSelectedWidget } from "./useSelectedWidget.mjs";
+import { has } from "lodash-es";
+import { FormComponents } from "@gct-paas/core";
+import { computed } from "vue";
+//#region src/hooks/design-view/widget/useWidget.ts
+/**不需要遮罩 */
+var NotMask = [
+	FormComponents.Search,
+	FormComponents.DataTable,
+	FormComponents.DataVTable,
+	FormComponents.SubDataTable,
+	FormComponents.Form,
+	FormComponents.FormProcess,
+	FormComponents.RdoForm,
+	FormComponents.MedProRdoForm,
+	FormComponents.LayoutContainer,
+	FormComponents.Grid,
+	FormComponents.GridCol,
+	FormComponents.LeftRightColumns,
+	FormComponents.ButtonContainer,
+	FormComponents.SubTable,
+	FormComponents.Tabs,
+	FormComponents.TabPane,
+	FormComponents.TableSelect,
+	FormComponents.Collapse,
+	FormComponents.CardList,
+	FormComponents.TreeTable,
+	FormComponents.RefDataTable,
+	FormComponents.DynamicTable,
+	FormComponents.Text,
+	FormComponents.UploadFile,
+	FormComponents.Descriptions,
+	FormComponents.BottomButtonContainer,
+	FormComponents.ButtonProcessContainer,
+	FormComponents.ApprovalHistory
 ];
 function useWidget(props) {
-  const { selectedWidget } = useSelectedWidget();
-  const widget = props.widget;
-  const isWidgetSelected = computed(() => {
-    if (selectedWidget.value.id === widget.id) {
-      if (!has(selectedWidget.value, "materialType") || !has(widget, "materialType")) {
-        return true;
-      } else {
-        return selectedWidget.value.materialType === widget.materialType;
-      }
-    }
-    return false;
-  });
-  const label = computed(() => {
-    return widget.props.label;
-  });
-  const value = computed(() => {
-    return "";
-  });
-  const widgetdesigner = {};
-  const hideMaskValue = computed(() => {
-    if (typeof widgetdesigner[widget.type]?.hideMask === "function") {
-      return widgetdesigner[widget.type].hideMask(widget);
-    }
-    return widgetdesigner[widget.type]?.hideMask;
-  });
-  const hideMask = computed(() => {
-    return NotMask.indexOf(widget.type) === -1 && !hideMaskValue.value;
-  });
-  const showMask = computed(() => {
-    return NotMask.indexOf(widget.type) === -1 && !hideMaskValue.value;
-  });
-  return { isWidgetSelected, value, label, hideMask, showMask };
+	const { selectedWidget } = useSelectedWidget();
+	const widget = props.widget;
+	/**组件是否被选中 */
+	const isWidgetSelected = computed(() => {
+		if (selectedWidget.value.id === widget.id) if (!has(selectedWidget.value, "materialType") || !has(widget, "materialType")) return true;
+		else return selectedWidget.value.materialType === widget.materialType;
+		return false;
+	});
+	/**初始化label */
+	const label = computed(() => {
+		return widget.props.label;
+	});
+	const value = computed(() => {
+		return "";
+	});
+	const widgetdesigner = designRegister.value.getProvider(widget.type)?.designerConfig || {};
+	const hideMaskValue = computed(() => {
+		if (typeof widgetdesigner[widget.type]?.hideMask === "function") return widgetdesigner[widget.type].hideMask(widget);
+		return widgetdesigner[widget.type]?.hideMask;
+	});
+	return {
+		isWidgetSelected,
+		value,
+		label,
+		hideMask: computed(() => {
+			return NotMask.indexOf(widget.type) === -1 && !hideMaskValue.value;
+		}),
+		showMask: computed(() => {
+			return NotMask.indexOf(widget.type) === -1 && !hideMaskValue.value;
+		})
+	};
 }
-const widgetWrapperProps = {
-  /**组件 */
-  widget: {
-    type: Object
-  },
-  /**父组件 */
-  parentWidget: {
-    type: Object
-  },
-  /**父组件List */
-  parentList: {
-    type: Array
-  },
-  /**在父组件列表的下标 */
-  indexOfParentList: {
-    type: Number
-  },
-  /** 是否隐藏操作按钮 */
-  hideAction: {
-    type: Boolean
-  },
-  /** 显示哪些操作按钮 */
-  actionTypes: {
-    type: Array
-  },
-  action: {
-    // 返回 true 中断自身操作
-    type: Object
-  },
-  /** 是否为新版设计器 */
-  isNewDesigner: {
-    type: Boolean
-  },
-  deleteCallback: { type: Function },
-  /**是否开启悬浮虚线 */
-  showHoverLine: {
-    type: Boolean,
-    default: false
-  }
+/**widget-wrapper通用的props */
+var widgetWrapperProps = {
+	widget: { type: Object },
+	parentWidget: { type: Object },
+	parentList: { type: Array },
+	indexOfParentList: { type: Number },
+	hideAction: { type: Boolean },
+	actionTypes: { type: Array },
+	action: { type: Object },
+	deleteCallback: { type: Function },
+	showHoverLine: {
+		type: Boolean,
+		default: false
+	}
 };
-const widgetProps = {
-  /**组件 */
-  widget: {
-    type: Object,
-    require: true,
-    default: () => ({})
-  },
-  rowReadonly: Boolean,
-  formData: {
-    type: Object
-  },
-  isNewDesigner: Boolean
+var widgetProps = {
+	widget: {
+		type: Object,
+		require: true,
+		default: () => ({})
+	},
+	rowReadonly: Boolean,
+	formData: { type: Object }
 };
-
+//#endregion
 export { NotMask, useWidget, widgetProps, widgetWrapperProps };

package/es/hooks/design-view/widget/useWidgetQuery.mjs

@@ -1,88 +1,106 @@
-import { TreeHelper, FormComponents, FIELD_TYPE } from '@gct-paas/core';
-import { getCompPos } from '@gct-paas/schema';
-import { computed } from 'vue';
-import { useScope } from '../layout/useScope.mjs';
-
+import { useScope } from "../layout/useScope.mjs";
+import { FIELD_TYPE, FormComponents, TreeHelper } from "@gct-paas/core";
+import { computed } from "vue";
+import { getCompPos } from "@gct-paas/schema";
+//#region src/hooks/design-view/widget/useWidgetQuery.ts
+/**
+* 组件查询 Hook
+*
+* 在当前作用域内查找各类型组件，提供类型安全的组件查询能力。
+*/
 function useWidgetQuery() {
-  const allWidget = computed(
-    () => {
-      const { scopeData } = useScope();
-      return TreeHelper.findNodeAll(scopeData.value, (widget) => {
-        return !!widget;
-      });
-    }
-  );
-  const allFormWidget = computed(() => {
-    const { scopeData } = useScope();
-    return TreeHelper.findNodeAll(scopeData.value, (widget) => {
-      return [
-        FormComponents.Form,
-        FormComponents.RdoForm,
-        FormComponents.MedProRdoForm,
-        FormComponents.FormProcess
-      ].includes(widget.type);
-    });
-  });
-  const excludeSubTableFormWidget = computed(() => {
-    const { scopeData } = useScope();
-    return TreeHelper.findNodeAll(scopeData.value, (widget) => {
-      if ([
-        FormComponents.RdoForm,
-        FormComponents.MedProRdoForm,
-        FormComponents.FormProcess
-      ].includes(widget.type)) {
-        return true;
-      }
-      return widget.type === FormComponents.Form && !getCompPos(widget, FIELD_TYPE.MASTERSLAVE, FormComponents.Form);
-    });
-  });
-  const allSubTableWidget = computed(() => {
-    const { scopeData } = useScope();
-    return TreeHelper.findNodeAll(scopeData.value, (widget) => {
-      return widget.type === FormComponents.SubTable;
-    });
-  });
-  const allListWidget = computed(() => {
-    const { scopeData } = useScope();
-    return TreeHelper.findNodeAll(scopeData.value, (widget) => {
-      return widget.type === FormComponents.DataList || widget.type === FormComponents.RdoDataList;
-    });
-  });
-  const allTableWidget = computed(() => {
-    const { scopeData } = useScope();
-    return TreeHelper.findNodeAll(scopeData.value, (widget) => {
-      return widget.type === FormComponents.DataTable || widget.type === FormComponents.DataVTable || widget.type === FormComponents.RefDataTable;
-    });
-  });
-  const allDeptWidget = computed(() => {
-    const { scopeData } = useScope();
-    return TreeHelper.findNodeAll(scopeData.value, (widget) => {
-      return widget.type === FormComponents.Department;
-    });
-  });
-  const allRefSelectWidget = computed(() => {
-    const { scopeData } = useScope();
-    return TreeHelper.findNodeAll(scopeData.value, (widget) => {
-      return widget.type === FormComponents.Select && widget.props.fieldType === FIELD_TYPE.REF;
-    });
-  });
-  function getWidgetByScope(type) {
-    const { scopeData } = useScope();
-    return TreeHelper.findNodeAll(scopeData.value, (widget) => {
-      return widget.type === type;
-    });
-  }
-  return {
-    allWidget,
-    allFormWidget,
-    excludeSubTableFormWidget,
-    allSubTableWidget,
-    allListWidget,
-    allTableWidget,
-    allDeptWidget,
-    allRefSelectWidget,
-    getWidgetByScope
-  };
+	/** 获取作用域内所有组件 */
+	const allWidget = computed(() => {
+		const { scopeData } = useScope();
+		return TreeHelper.findNodeAll(scopeData.value, (widget) => {
+			return !!widget;
+		});
+	});
+	/**
+	* 在作用域中找到所有Form表单
+	* 注:如果是模态框状态下,则查找范围应该为modalBody+modalFooter 因为footer中的按钮需要关联到body中的表单
+	*/
+	const allFormWidget = computed(() => {
+		const { scopeData } = useScope();
+		return TreeHelper.findNodeAll(scopeData.value, (widget) => {
+			return [
+				FormComponents.Form,
+				FormComponents.RdoForm,
+				FormComponents.MedProRdoForm,
+				FormComponents.FormProcess
+			].includes(widget.type);
+		});
+	});
+	/** 排除子表的表单 */
+	const excludeSubTableFormWidget = computed(() => {
+		const { scopeData } = useScope();
+		return TreeHelper.findNodeAll(scopeData.value, (widget) => {
+			if ([
+				FormComponents.RdoForm,
+				FormComponents.MedProRdoForm,
+				FormComponents.FormProcess
+			].includes(widget.type)) return true;
+			return widget.type === FormComponents.Form && !getCompPos(widget, FIELD_TYPE.MASTERSLAVE, FormComponents.Form);
+		});
+	});
+	/** 所有子表组件 */
+	const allSubTableWidget = computed(() => {
+		const { scopeData } = useScope();
+		return TreeHelper.findNodeAll(scopeData.value, (widget) => {
+			return widget.type === FormComponents.SubTable;
+		});
+	});
+	/** 所有列表包括rdo的 */
+	const allListWidget = computed(() => {
+		const { scopeData } = useScope();
+		return TreeHelper.findNodeAll(scopeData.value, (widget) => {
+			return widget.type === FormComponents.DataList || widget.type === FormComponents.RdoDataList;
+		});
+	});
+	/** 所有表格组件 */
+	const allTableWidget = computed(() => {
+		const { scopeData } = useScope();
+		return TreeHelper.findNodeAll(scopeData.value, (widget) => {
+			return widget.type === FormComponents.DataTable || widget.type === FormComponents.DataVTable || widget.type === FormComponents.RefDataTable;
+		});
+	});
+	/** 所有部门组件 */
+	const allDeptWidget = computed(() => {
+		const { scopeData } = useScope();
+		return TreeHelper.findNodeAll(scopeData.value, (widget) => {
+			return widget.type === FormComponents.Department;
+		});
+	});
+	/** 所有引用选择组件 */
+	const allRefSelectWidget = computed(() => {
+		const { scopeData } = useScope();
+		return TreeHelper.findNodeAll(scopeData.value, (widget) => {
+			return widget.type === FormComponents.Select && widget.props.fieldType === FIELD_TYPE.REF;
+		});
+	});
+	/**
+	* 在作用域中找到所需要的组件类型
+	*
+	* @param {K} type 组件类型
+	* @returns {ComTypeMap[K][]} 查找结果
+	*/
+	function getWidgetByScope(type) {
+		const { scopeData } = useScope();
+		return TreeHelper.findNodeAll(scopeData.value, (widget) => {
+			return widget.type === type;
+		});
+	}
+	return {
+		allWidget,
+		allFormWidget,
+		excludeSubTableFormWidget,
+		allSubTableWidget,
+		allListWidget,
+		allTableWidget,
+		allDeptWidget,
+		allRefSelectWidget,
+		getWidgetByScope
+	};
 }
-
+//#endregion
 export { useWidgetQuery };

package/es/hooks/design-view/widget/useWidgetRegistry.d.ts

@@ -1,8 +1,8 @@
-import { LowCodeWidget } from '@gct-paas/schema';
+import { IDesignerItemHooks, LowCodeWidget } from '@gct-paas/schema';
 import { Component } from 'vue';
 export declare function useWidgetRegistry(): {
     getAsyncWidget: (widget: string | LowCodeWidget.BasicSchema) => Component | undefined;
-    getWidgetHooks: (type: string) => unknown;
+    getWidgetHooks: (type: string) => IDesignerItemHooks;
     widgetEntry: import('vue').ComputedRef<string>;
     pluginConfigs: import('vue').ComputedRef<IObject[]>;
     getWhiteList: (type: string) => (string | RegExp)[];

package/es/hooks/design-view/widget/useWidgetRegistry.mjs

@@ -1,59 +1,89 @@
-import { Platform } from '@gct-paas/core';
-import { computed } from 'vue';
-import { widgetInfo, pluginConfigs, platform, designRegister } from '../design-state.mjs';
-
+import { designRegister, platform } from "../../../utils/design-view/index.mjs";
+import { pluginConfigs, widgetInfo } from "../design-state.mjs";
+import { Platform } from "@gct-paas/core";
+import { computed } from "vue";
+//#region src/hooks/design-view/widget/useWidgetRegistry.ts
+/**
+* 组件注册查询 Hook
+*
+* 提供设计器中异步组件获取、钩子查询、白黑名单获取等组件注册相关功能。
+*/
 function useWidgetRegistry() {
-  const allComHooks = computed(() => {
-    return widgetInfo.value.hooks;
-  });
-  const allWhiteList = computed(() => {
-    return widgetInfo.value.whiteList;
-  });
-  const allBlackList = computed(() => {
-    return widgetInfo.value.blackList;
-  });
-  const pluginConfigsComputed = computed(() => {
-    return pluginConfigs.value;
-  });
-  function setPluginConfigs(configs) {
-    pluginConfigs.value = configs;
-  }
-  const getAsyncWidget = (widget) => {
-    if (typeof widget === "string") {
-      return designRegister.value.getComponentByType(widget);
-    }
-    if (widget._plugin) {
-      return designRegister.value.getComponentByPluginTag(widget._plugin.key);
-    }
-    return designRegister.value.getComponentByType(widget.type);
-  };
-  const getWidgetHooks = (type) => {
-    return allComHooks.value[type] ?? {};
-  };
-  const getWhiteList = (type) => {
-    return allWhiteList.value[type] ?? [];
-  };
-  const getBlackList = (type) => {
-    return allBlackList.value[type] ?? [];
-  };
-  const widgetEntry = computed(() => {
-    if (platform.value === Platform.MOBILE) {
-      return "widget-mobile-entry";
-    } else if (platform.value === Platform.PAD) {
-      return "widget-pad-entry";
-    } else {
-      return "widget-entry";
-    }
-  });
-  return {
-    getAsyncWidget,
-    getWidgetHooks,
-    widgetEntry,
-    pluginConfigs: pluginConfigsComputed,
-    getWhiteList,
-    getBlackList,
-    setPluginConfigs
-  };
+	/** 组件钩子集合 */
+	const allComHooks = computed(() => {
+		return widgetInfo.value.hooks;
+	});
+	/** 白名单集合 */
+	const allWhiteList = computed(() => {
+		return widgetInfo.value.whiteList;
+	});
+	/** 黑名单集合 */
+	const allBlackList = computed(() => {
+		return widgetInfo.value.blackList;
+	});
+	/** 插件配置（computed 包装，对外保持只读语义） */
+	const pluginConfigsComputed = computed(() => {
+		return pluginConfigs.value;
+	});
+	/**
+	* 设置插件配置
+	*
+	* @param {IObject[]} configs 插件配置列表
+	*/
+	function setPluginConfigs(configs) {
+		pluginConfigs.value = configs;
+	}
+	/**
+	* 获取异步组件
+	*
+	* @param {string | LowCodeWidget.BasicSchema} widget 组件类型字符串或组件schema
+	* @returns {*} 异步组件
+	*/
+	const getAsyncWidget = (widget) => {
+		if (typeof widget === "string") return designRegister.value.getComponentByType(widget);
+		if (widget._plugin) return designRegister.value.getComponentByPluginTag(widget._plugin.key);
+		return designRegister.value.getComponentByType(widget.type);
+	};
+	/**
+	* 获取组件拖拽钩子
+	*
+	* @param {string} type 组件类型
+	* @returns {*} 组件钩子
+	*/
+	const getWidgetHooks = (type) => {
+		return allComHooks.value[type] ?? {};
+	};
+	/**
+	* 获取组件白名单
+	*
+	* @param {string} type 组件类型
+	* @returns {(string | RegExp)[]} 白名单
+	*/
+	const getWhiteList = (type) => {
+		return allWhiteList.value[type] ?? [];
+	};
+	/**
+	* 获取组件黑名单
+	*
+	* @param {string} type 组件类型
+	* @returns {(string | RegExp)[]} 黑名单
+	*/
+	const getBlackList = (type) => {
+		return allBlackList.value[type] ?? [];
+	};
+	return {
+		getAsyncWidget,
+		getWidgetHooks,
+		widgetEntry: computed(() => {
+			if (platform.value === Platform.MOBILE) return "widget-mobile-entry";
+			else if (platform.value === Platform.PAD) return "widget-pad-entry";
+			else return "widget-entry";
+		}),
+		pluginConfigs: pluginConfigsComputed,
+		getWhiteList,
+		getBlackList,
+		setPluginConfigs
+	};
 }
-
+//#endregion
 export { useWidgetRegistry };

package/es/hooks/designer.hooks.mjs

@@ -1,12 +1,18 @@
-import { SyncSeriesHook } from 'qx-util';
-
-class DesignViewHooks {
-  /**
-   * 触发执行设计容器扩容展示
-   *
-   * @static
-   */
-  expansion = new SyncSeriesHook();
-}
-
+import { SyncSeriesHook } from "qx-util";
+//#region src/hooks/designer.hooks.ts
+/**
+* 设计界面钩子
+*
+* @export
+* @class DesignViewHooks
+*/
+var DesignViewHooks = class {
+	/**
+	* 触发执行设计容器扩容展示
+	*
+	* @static
+	*/
+	expansion = new SyncSeriesHook();
+};
+//#endregion
 export { DesignViewHooks };