@kp-ui/lowcode-pc-v2 0.0.1

package/core/src/components/common/render/usePageContext.js

@@ -0,0 +1,238 @@
+import { EVENT_TYPE, useEmitter } from "../../../utils/useEmitter.js";
+import { useI18n } from "../../../utils/i18n.js";
+import { generateId, insertCustomCssToHead, insertGlobalFunctionsToHtml, removeCustomCssToHead, removeScriptToHead } from "../../../utils/util.js";
+import { useAppRef } from "../../../hooks/useAppRef.js";
+import { computed, nextTick, onMounted, ref, useTemplateRef, watch, watchEffect } from "vue";
+import _objectSpread from "@oxc-project/runtime/helpers/objectSpread2";
+import { useExecFunction, useRef } from "tmgc2-share";
+import { cloneDeep, set } from "lodash-es";
+import _asyncToGenerator from "@oxc-project/runtime/helpers/asyncToGenerator";
+//#region ../core/src/components/common/render/usePageContext.ts
+/**
+* 创建表单上下文
+* @param options 表单上下文配置
+* @returns 表单上下文
+*/
+var usePageContext = ({ props }) => {
+	const { formJson } = props;
+	const dynamicDialogRef = useTemplateRef("dynamicDialogRef");
+	const { i18nt } = useI18n();
+	const [readModeFlag, setReadMode] = useRef(false);
+	const formContextData = ref({});
+	const { emitter } = useEmitter();
+	const formJsonObj = ref();
+	const formDataModel = ref({});
+	const isLoading = ref(false);
+	const widgetRefList = ref(/* @__PURE__ */ new Map());
+	const dialogProps = ref({});
+	const childFormRef = ref();
+	const serveList = computed(() => formConfig.value.serveList);
+	const formWidgetId = Symbol("formWidget");
+	const dialogOrDrawerRef = ref();
+	const { context, execHttpFunction, asyncExecuteFunction } = useExecFunction();
+	const { getPageInstance, getInstance, registerToRefList } = useAppRef(widgetRefList, formWidgetId);
+	const formConfig = computed(() => {
+		var _formJsonObj$value;
+		return ((_formJsonObj$value = formJsonObj.value) === null || _formJsonObj$value === void 0 ? void 0 : _formJsonObj$value.formConfig) || {};
+	});
+	const widgetList = computed(() => {
+		var _formJsonObj$value2;
+		return ((_formJsonObj$value2 = formJsonObj.value) === null || _formJsonObj$value2 === void 0 ? void 0 : _formJsonObj$value2.widgetList) || [];
+	});
+	const labelPosition = computed(() => {
+		var _formConfig$value;
+		return ((_formConfig$value = formConfig.value) === null || _formConfig$value === void 0 ? void 0 : _formConfig$value.labelPosition) || "horizontal";
+	});
+	const setChildFormRef = (chid) => {
+		childFormRef.value = chid;
+	};
+	const labelWidth = computed(() => {
+		var _formConfig$value2;
+		return ((_formConfig$value2 = formConfig.value) === null || _formConfig$value2 === void 0 ? void 0 : _formConfig$value2.labelWidth) ? `${formConfig.value.labelWidth}px` : "80px";
+	});
+	const customClass = computed(() => {
+		var _formConfig$value3;
+		return ((_formConfig$value3 = formConfig.value) === null || _formConfig$value3 === void 0 ? void 0 : _formConfig$value3.customClass) || "";
+	});
+	/**
+	* 设置表单JSON数据
+	*/
+	const setFormJson = function() {
+		var _ref = _asyncToGenerator(function* (json) {
+			formJsonObj.value = json || {
+				widgetList: [],
+				formConfig: {}
+			};
+			formDataModel.value = {};
+			yield nextTick();
+			handleOnMounted();
+		});
+		return function setFormJson(_x) {
+			return _ref.apply(this, arguments);
+		};
+	}();
+	/**
+	* 获取表单数据
+	*/
+	const getPageData = () => {
+		return formDataModel.value || {};
+	};
+	/**
+	* 设置表单数据
+	*/
+	const setPageData = (data) => {
+		if (!data) return;
+		Object.keys(data).forEach((key) => {
+			if (Object.prototype.hasOwnProperty.call(formDataModel.value, key)) formDataModel.value[key] = data[key];
+		});
+	};
+	/**
+	* 设置加载状态
+	*/
+	const setLoading = (loading) => {
+		isLoading.value = loading;
+	};
+	const setDialogOrDrawerRef = (ddRef) => {
+		dialogOrDrawerRef.value = ddRef;
+	};
+	/**
+	* 获取父级VFormRender组件实例
+	* @returns {object}
+	*/
+	const getParentPageInstance = () => {
+		return props.parentForm;
+	};
+	const getChildFormRef = () => {
+		var _dynamicDialogRef$val;
+		return (_dynamicDialogRef$val = dynamicDialogRef.value) === null || _dynamicDialogRef$val === void 0 ? void 0 : _dynamicDialogRef$val.getPageInstance();
+	};
+	/**
+	* 字段值变化事件处理器
+	*/
+	const fieldChangeEventHandler = () => {
+		emitter.off(EVENT_TYPE.ON_FIELD_DATA_CHANGE);
+		emitter.on(EVENT_TYPE.ON_FIELD_DATA_CHANGE, ({ fieldName, value }) => {
+			if (fieldName) set(formDataModel.value, fieldName, value);
+		});
+	};
+	const handleOnMounted = () => {
+		var _formConfig$value4;
+		if ((_formConfig$value4 = formConfig.value) === null || _formConfig$value4 === void 0 ? void 0 : _formConfig$value4.onPageMounted) {
+			var _formConfig$value5;
+			asyncExecuteFunction({ functionBody: (_formConfig$value5 = formConfig.value) === null || _formConfig$value5 === void 0 ? void 0 : _formConfig$value5.onPageMounted });
+		}
+	};
+	/**
+	* 插入自定义样式和脚本
+	* @param cssCode CSS代码
+	* @param functions 自定义函数
+	* @param formId 表单ID
+	*/
+	const insertCustomCode = () => {
+		const formId = "vfRender" + generateId();
+		const { cssCode, functions } = formConfig.value;
+		if (cssCode) insertCustomCssToHead(cssCode, formId || "");
+		if (functions) insertGlobalFunctionsToHtml(functions, formId || "");
+	};
+	const removeCustomCode = () => {
+		const formId = "vfRender" + generateId();
+		const { cssCode, functions } = formConfig.value;
+		if (cssCode) removeCustomCssToHead(formId || "");
+		if (functions) removeScriptToHead(formId || "");
+	};
+	const reload = () => {
+		var _context$value;
+		const router = (_context$value = context.value) === null || _context$value === void 0 ? void 0 : _context$value.$router;
+		router === null || router === void 0 || router.replace({ query: _objectSpread(_objectSpread({}, router.currentRoute.value.query), {}, { _t: Date.now() }) });
+	};
+	const goBack = (reloadStatus, cb) => {
+		const fn = getVfCtx().goBack;
+		if (typeof fn === "function") fn(reloadStatus, cb);
+		else {
+			var _context$value2;
+			const router = (_context$value2 = context.value) === null || _context$value2 === void 0 ? void 0 : _context$value2.$router;
+			router === null || router === void 0 || router.go(-1);
+		}
+	};
+	const getFieldValue = (field) => {
+		return formDataModel.value[field];
+	};
+	const setFiledValue = (field, value) => {
+		formDataModel.value[field] = value;
+	};
+	const setVfCtx = (vfCtx) => {
+		formContextData.value = cloneDeep(vfCtx);
+	};
+	const addVfCtx = (vfCtx) => {
+		formContextData.value = cloneDeep(_objectSpread(_objectSpread({}, formContextData.value), vfCtx));
+	};
+	const getVfCtx = () => {
+		return formContextData.value;
+	};
+	const executeHttp = function() {
+		var _ref2 = _asyncToGenerator(function* (name, params) {
+			const fn = serveList.value[name];
+			console.log(serveList.value.loadDetail);
+			return yield execHttpFunction(fn, params);
+		});
+		return function executeHttp(_x2, _x3) {
+			return _ref2.apply(this, arguments);
+		};
+	}();
+	onMounted(() => {
+		if (formJson) setFormJson(formJson);
+		fieldChangeEventHandler();
+	});
+	const expose = {
+		context,
+		i18nt,
+		goBack,
+		reload,
+		getFieldValue,
+		getVfCtx,
+		addVfCtx,
+		getParentPageInstance,
+		getPageInstance,
+		getInstance,
+		getPageData,
+		getChildFormRef,
+		setPageData,
+		setReadMode,
+		setFormJson,
+		setLoading,
+		formDataModel,
+		setFiledValue,
+		isLoading,
+		vfCtx: props.vfCtx,
+		formConfig,
+		dynamicDialogRef,
+		setChildFormRef,
+		setDialogOrDrawerRef,
+		executeHttp
+	};
+	watchEffect(() => {
+		setVfCtx(props.vfCtx || {});
+	});
+	watch(() => formConfig.value.cssCode, () => {
+		insertCustomCode();
+	});
+	return _objectSpread({
+		formWidgetId,
+		registerToRefList,
+		dialogOrDrawerRef,
+		insertCustomCode,
+		removeCustomCode,
+		emitter,
+		formJsonObj,
+		readModeFlag,
+		widgetRefList,
+		widgetList,
+		labelPosition,
+		labelWidth,
+		customClass,
+		dialogProps,
+		expose
+	}, expose);
+};
+//#endregion
+export { usePageContext };

package/core/src/components/property-editor/propertyRegister.js

@@ -0,0 +1,29 @@
+import { EventHandlerEditorEnum } from "../../constants/EditorTypeEnum.js";
+EventHandlerEditorEnum.onOpen, EventHandlerEditorEnum.onClose, EventHandlerEditorEnum.onClickOverlay;
+var EventParamsRegister = {
+	onFocus: { params: ["event"] },
+	onBlur: { params: ["event"] },
+	customRender: { params: [
+		"data",
+		"formData",
+		"h"
+	] },
+	onLoad: { params: ["list", "raw"] },
+	onItemClick: { params: ["item", "index"] },
+	onBeforeClose: { params: ["item", "index"] },
+	"data-table": { customRender: { params: [
+		"index",
+		"record",
+		"column",
+		"scope",
+		"h"
+	] } }
+};
+var getEventParams = (attr, widgetId) => {
+	var _EventParamsRegister$, _EventParamsRegister$2;
+	const widgetParams = widgetId ? (_EventParamsRegister$ = EventParamsRegister[widgetId]) === null || _EventParamsRegister$ === void 0 || (_EventParamsRegister$ = _EventParamsRegister$[attr]) === null || _EventParamsRegister$ === void 0 ? void 0 : _EventParamsRegister$.params : void 0;
+	const commonParams = (_EventParamsRegister$2 = EventParamsRegister[attr]) === null || _EventParamsRegister$2 === void 0 ? void 0 : _EventParamsRegister$2.params;
+	return widgetParams || commonParams || [];
+};
+//#endregion
+export { getEventParams };

package/core/src/constants/EditorTypeEnum.js

@@ -0,0 +1,9 @@
+//#region ../core/src/constants/EditorTypeEnum.ts
+var EventHandlerEditorEnum = {
+	onMounted: "onMounted-editor",
+	onOpen: "onOpen-editor",
+	onClose: "onClose-editor",
+	onClickOverlay: "onClickOverlay-editor"
+};
+//#endregion
+export { EventHandlerEditorEnum };

package/core/src/constants/WidgetTypeEnum.js

@@ -0,0 +1,15 @@
+//#region ../core/src/constants/WidgetTypeEnum.ts
+var ComponentNameEnum = /* @__PURE__ */ function(ComponentNameEnum) {
+	ComponentNameEnum["VFormRender"] = "VFormRender";
+	ComponentNameEnum["VFormDesigner"] = "VFormDesigner";
+	ComponentNameEnum["ContainerWidget"] = "ContainerWidget";
+	ComponentNameEnum["VfBoxWidget"] = "VfBoxWidget";
+	ComponentNameEnum["VfDialogWidget"] = "VfDialogWidget";
+	ComponentNameEnum["FieldWidget"] = "FieldWidget";
+	ComponentNameEnum["DisplayWidget"] = "DisplayWidget";
+	ComponentNameEnum["PropertyEditor"] = "PropertyEditor";
+	ComponentNameEnum["OnSubFormRowAddEditor"] = "OnSubFormRowAddEditor";
+	return ComponentNameEnum;
+}({});
+//#endregion
+export { ComponentNameEnum };

package/core/src/constants/index.js

@@ -0,0 +1,10 @@
+import "./EditorTypeEnum.js";
+import "./WidgetTypeEnum.js";
+//#region ../core/src/constants/index.ts
+var ButtonPositionEnum = /* @__PURE__ */ function(ButtonPositionEnum) {
+	ButtonPositionEnum[ButtonPositionEnum["CURRENT"] = 0] = "CURRENT";
+	ButtonPositionEnum[ButtonPositionEnum["DIY"] = 1] = "DIY";
+	return ButtonPositionEnum;
+}({});
+//#endregion
+export { ButtonPositionEnum };

package/core/src/hooks/useAppRef.js

@@ -0,0 +1,46 @@
+import { useI18n } from "../utils/i18n.js";
+import { computed, getCurrentInstance, inject, ref } from "vue";
+import _objectSpread from "@oxc-project/runtime/helpers/objectSpread2";
+import { message } from "ant-design-vue";
+//#region ../core/src/hooks/useAppRef.ts
+function useAppRef(widgetRefList, formWidgetId) {
+	const { i18nt } = useI18n();
+	const isRoot = formWidgetId !== void 0;
+	if (!isRoot) formWidgetId = inject("formWidgetId", "");
+	const refList = inject("refList", widgetRefList || ref(/* @__PURE__ */ new Map()));
+	const instance = getCurrentInstance();
+	const widgetId = computed(() => {
+		var _instance$proxy;
+		return instance === null || instance === void 0 || (_instance$proxy = instance.proxy) === null || _instance$proxy === void 0 || (_instance$proxy = _instance$proxy.widget) === null || _instance$proxy === void 0 || (_instance$proxy = _instance$proxy.props) === null || _instance$proxy === void 0 ? void 0 : _instance$proxy.name;
+	});
+	const getInstance = (widgetName, showError) => {
+		const foundRef = (isRoot ? widgetRefList === null || widgetRefList === void 0 ? void 0 : widgetRefList.value : refList.value).get(widgetName);
+		if (!foundRef && !!showError) message.error(i18nt("render.hint.refNotFound") + widgetName);
+		return foundRef;
+	};
+	const registerToRefList = (widgetName) => {
+		(isRoot ? widgetRefList === null || widgetRefList === void 0 ? void 0 : widgetRefList.value : refList.value).set(widgetName || widgetId.value, _objectSpread(_objectSpread({
+			instance,
+			proxy: instance === null || instance === void 0 ? void 0 : instance.proxy
+		}, instance === null || instance === void 0 ? void 0 : instance.appContext.config.globalProperties), instance === null || instance === void 0 ? void 0 : instance.exposed));
+	};
+	/**
+	* 从引用列表中注销
+	*/
+	const unregisterFromRefList = () => {
+		var _refList$value;
+		refList === null || refList === void 0 || (_refList$value = refList.value) === null || _refList$value === void 0 || _refList$value.delete(widgetId.value);
+	};
+	const getPageInstance = () => {
+		return getInstance(formWidgetId);
+	};
+	return {
+		refList,
+		getPageInstance,
+		registerToRefList,
+		unregisterFromRefList,
+		getInstance
+	};
+}
+//#endregion
+export { useAppRef };

package/core/src/hooks/useFactoryRender.js

@@ -0,0 +1,60 @@
+import { getCurrentInstance, h, resolveComponent } from "vue";
+import _objectSpread from "@oxc-project/runtime/helpers/objectSpread2";
+import { defaultFactoryModules } from "tmgc2-share";
+//#region ../core/src/hooks/useFactoryRender.ts
+var NATIVE_HTML_TAGS = new Set([
+	"div",
+	"span",
+	"p",
+	"a",
+	"img",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"ul",
+	"li",
+	"ol",
+	"table",
+	"tr",
+	"td",
+	"th",
+	"input",
+	"button",
+	"iframe",
+	"svg",
+	"br",
+	"hr",
+	"label",
+	"form",
+	"i",
+	"b",
+	"strong",
+	"em",
+	"header",
+	"footer",
+	"main",
+	"section",
+	"article",
+	"aside",
+	"nav"
+]);
+function useFactoryRender() {
+	const instance = getCurrentInstance();
+	const publicComponents = instance === null || instance === void 0 ? void 0 : instance.appContext;
+	const components = _objectSpread(_objectSpread({}, defaultFactoryModules), publicComponents);
+	const findGlobalSysComponents = (name, props, slots) => {
+		if (NATIVE_HTML_TAGS.has(name)) return h(name, props, slots);
+		return h(resolveComponent(name), props, slots);
+	};
+	const factoryRender = (name, props, slots) => {
+		if (!name) return null;
+		if (name in components) return h(components[name], props, slots);
+		return findGlobalSysComponents(name, props, slots);
+	};
+	return { factoryRender };
+}
+//#endregion
+export { useFactoryRender };