@kp-ui/lowcode-pc-v2 0.0.1

package/core/src/hooks/useRemoteData.js

@@ -0,0 +1,113 @@
+import { usePagination } from "./usePagination.js";
+import { computed, ref, watch } from "vue";
+import { useExecFunction } from "tmgc2-share";
+import { debounce } from "lodash-es";
+import _asyncToGenerator from "@oxc-project/runtime/helpers/asyncToGenerator";
+//#region ../core/src/hooks/useRemoteData.ts
+function useRemoteData({ widget, onLoaded, formConfig }) {
+	var _widget$dataSource;
+	const loading = ref(false);
+	const data = ref([]);
+	const { pagination, getPagination, setPagination } = usePagination((_widget$dataSource = widget.dataSource) === null || _widget$dataSource === void 0 || (_widget$dataSource = _widget$dataSource.pagination) === null || _widget$dataSource === void 0 ? void 0 : _widget$dataSource.pageSize);
+	const { execHttpFunction } = useExecFunction();
+	const dataSource = computed(() => (widget === null || widget === void 0 ? void 0 : widget.dataSource) || {});
+	const autoLoad = computed(() => {
+		var _widget$dataSource2;
+		return (_widget$dataSource2 = widget.dataSource) === null || _widget$dataSource2 === void 0 || (_widget$dataSource2 = _widget$dataSource2.remote) === null || _widget$dataSource2 === void 0 ? void 0 : _widget$dataSource2.autoLoad;
+	});
+	const isRemote = computed(() => dataSource.value.type === "remote");
+	const httpMethod = computed(() => {
+		var _dataSource$value$rem;
+		const http = (_dataSource$value$rem = dataSource.value.remote) === null || _dataSource$value$rem === void 0 ? void 0 : _dataSource$value$rem.httpMethod;
+		if (http) {
+			var _formConfig$value$ser;
+			return ((_formConfig$value$ser = formConfig.value.serveList) === null || _formConfig$value$ser === void 0 ? void 0 : _formConfig$value$ser[http]) || null;
+		}
+		return null;
+	});
+	const loadingPage = computed(() => {
+		var _dataSource$value;
+		return (_dataSource$value = dataSource.value) === null || _dataSource$value === void 0 ? void 0 : _dataSource$value.loadingPage;
+	});
+	const initPager = () => {
+		var _widget$dataSource3;
+		setPagination({
+			current: 1,
+			pageSize: (_widget$dataSource3 = widget.dataSource) === null || _widget$dataSource3 === void 0 || (_widget$dataSource3 = _widget$dataSource3.pagination) === null || _widget$dataSource3 === void 0 ? void 0 : _widget$dataSource3.pageSize,
+			total: 0,
+			totalPage: 0
+		});
+	};
+	const loadData = function() {
+		var _ref = _asyncToGenerator(function* () {
+			if (!isRemote.value) {
+				data.value = dataSource.value.data || [];
+				return;
+			}
+			if (loading.value) return;
+			loading.value = true;
+			if (pagination.value.current === 1) initPager();
+			try {
+				if (!httpMethod.value) {
+					loading.value = false;
+					return;
+				}
+				const { dataHandlerCode, dataReqHandlerCode, http } = httpMethod.value;
+				const params = loadingPage.value ? {
+					page: pagination.value.current,
+					pageSize: pagination.value.pageSize
+				} : {};
+				const result = yield execHttpFunction({
+					http,
+					dataHandlerCode,
+					dataReqHandlerCode
+				}, { data: params });
+				if (!result) {
+					loading.value = false;
+					return;
+				}
+				if (loadingPage.value) {
+					pagination.value.total = result.total || 0;
+					pagination.value.totalPage = result.totalPage || 0;
+				}
+				data.value = result.list;
+				onLoaded === null || onLoaded === void 0 || onLoaded(result);
+			} catch (err) {
+				console.error("remote data load error:", err);
+			} finally {
+				loading.value = false;
+			}
+		});
+		return function loadData() {
+			return _ref.apply(this, arguments);
+		};
+	}();
+	const loadMore = debounce(() => {
+		if (pagination.value.totalPage === pagination.value.current) return;
+		pagination.value.current += 1;
+	}, 500);
+	const refresh = () => {
+		pagination.value.current = 1;
+	};
+	watch(() => [pagination.value.current, pagination.value.pageSize], () => {
+		loadData();
+	});
+	watch(() => [autoLoad.value, httpMethod.value], ([val, val1]) => {
+		if (val || val1) loadData();
+	}, { immediate: true });
+	return {
+		getPagination,
+		setPagination,
+		loadData,
+		refresh,
+		autoLoad,
+		loading,
+		data,
+		pagination,
+		isRemote,
+		loadingPage,
+		loadMore
+	};
+}
+//#endregion
+export { useRemoteData };

package/core/src/hooks/useSelect.js

@@ -0,0 +1,137 @@
+import { useRemoteData } from "./useRemoteData.js";
+import { computed, ref, unref } from "vue";
+import _objectSpread from "@oxc-project/runtime/helpers/objectSpread2";
+import { cloneDeep, isArray } from "lodash-es";
+//#region ../core/src/hooks/useSelect.ts
+function findInArray(arrayObject, element) {
+	if (!Array.isArray(arrayObject)) return -1;
+	let foundIdx = -1;
+	arrayObject.forEach((aItem, aIdx) => {
+		if (aItem === element) foundIdx = aIdx;
+	});
+	return foundIdx;
+}
+function useSelect({ widget, designState, fieldModel, formConfig }) {
+	const keyword = ref({ val: "" });
+	const apiResult = ref({ list: [] });
+	const onLoaded = (result) => {
+		const data = result.data || {};
+		if (data) apiResult.value = isArray(data) ? { list: [...unref(apiResult).list, ...data] } : _objectSpread(_objectSpread({}, data), {}, { list: [...unref(apiResult).list, ...data.list] });
+	};
+	const { loadData, loadMore, refresh, data, pager, loading } = useRemoteData({
+		widget,
+		designState,
+		onLoaded,
+		formConfig
+	});
+	const mapping = computed(() => {
+		var _widget$dataSource;
+		return (widget === null || widget === void 0 || (_widget$dataSource = widget.dataSource) === null || _widget$dataSource === void 0 ? void 0 : _widget$dataSource.mapping) || {};
+	});
+	const labelKey = computed(() => {
+		var _mapping$value;
+		return ((_mapping$value = mapping.value) === null || _mapping$value === void 0 ? void 0 : _mapping$value.labelField) || "label";
+	});
+	const valueKey = computed(() => {
+		var _mapping$value2;
+		return ((_mapping$value2 = mapping.value) === null || _mapping$value2 === void 0 ? void 0 : _mapping$value2.valueField) || "value";
+	});
+	const childrenKey = computed(() => {
+		var _mapping$value3;
+		return ((_mapping$value3 = mapping.value) === null || _mapping$value3 === void 0 ? void 0 : _mapping$value3.childrenField) || "children";
+	});
+	const fieldNames = computed(() => ({
+		label: unref(labelKey) || "label",
+		value: unref(valueKey) || "value",
+		children: unref(childrenKey) || "children"
+	}));
+	const filterOption = (inputValue, option) => {
+		var _option$labelKey$valu;
+		return String((_option$labelKey$valu = option[labelKey.value]) !== null && _option$labelKey$valu !== void 0 ? _option$labelKey$valu : "").toLowerCase().includes(inputValue.toLowerCase());
+	};
+	const remoteQuery = (_keyword) => {
+		if (!widget.props.showSearch) return;
+		if (designState) return;
+		keyword.value.val = _keyword;
+	};
+	const selectOps = computed(() => {
+		var _apiResult$value;
+		const showSearch = true;
+		const useServer = widget.props.showSearch;
+		return {
+			loading: loading.value,
+			showSearch,
+			fieldNames: unref(fieldNames),
+			onPopupScroll: loadMore,
+			onSearch: remoteQuery,
+			filterOption: !useServer && filterOption,
+			listHeight: 240,
+			options: cloneDeep(((_apiResult$value = apiResult.value) === null || _apiResult$value === void 0 ? void 0 : _apiResult$value.list) || [])
+		};
+	});
+	const getOptionItems = () => {
+		return data.value || [];
+	};
+	const getSelectedItem = () => {
+		const list = getOptionItems();
+		const vk = valueKey.value;
+		if (isArray(fieldModel.value)) return list.filter((item) => findInArray(fieldModel.value, item[vk]) !== -1);
+		return list.find((item) => item[vk] == fieldModel.value);
+	};
+	const optionLabel = computed(() => {
+		if (fieldModel.value === null) return "";
+		let resultContent = "";
+		const vk = valueKey.value;
+		const lk = labelKey.value;
+		(data.value || []).forEach((oItem) => {
+			if (oItem[vk] === fieldModel.value || findInArray(fieldModel.value, oItem[vk]) !== -1) resultContent = resultContent === "" ? oItem[lk] : resultContent + " " + oItem[lk];
+		});
+		return resultContent;
+	});
+	const disableOption = (optionValue) => {
+		const optionList = data.value || [];
+		const vk = valueKey.value;
+		optionList.forEach((opt) => {
+			if (opt[vk] === optionValue) opt.disabled = true;
+		});
+	};
+	const enableOption = (optionValue) => {
+		const optionList = data.value || [];
+		const vk = valueKey.value;
+		optionList.forEach((opt) => {
+			if (opt[vk] === optionValue) opt.disabled = false;
+		});
+	};
+	return {
+		selectDefineExpose: {
+			loadOptions: loadData,
+			initOptionItems: loadData,
+			getSelectedItem,
+			disableOption,
+			clearOptionItems: loadData,
+			enableOption,
+			getOptionItems,
+			keyword: unref(keyword)
+		},
+		fieldNames,
+		data,
+		loadData,
+		loadMore,
+		refresh,
+		disableOption,
+		clearOptionItems: loadData,
+		childrenKey,
+		valueKey,
+		labelKey,
+		optionLabel,
+		filterOption,
+		keyword,
+		pager,
+		loading,
+		selectOps,
+		initOptionItems: loadData,
+		getOptionItems
+	};
+}
+//#endregion
+export { useSelect };

package/core/src/hooks/useWebMCP.js

@@ -0,0 +1,50 @@
+//#region ../core/src/hooks/useWebMCP.ts
+/**
+* WebMCP 规范注册 Hooks
+* @param context 低代码渲染上下文
+*/
+var useWebMCP = (context) => {
+	const registerWebMCPTools = () => {
+		window.__LOWCODE_MCP_TOOLS__ = {
+			context,
+			getPageData: () => {
+				var _context$formDataMode;
+				return ((_context$formDataMode = context.formDataModel) === null || _context$formDataMode === void 0 ? void 0 : _context$formDataMode.value) || {};
+			},
+			setPageData: (data) => {
+				var _context$formDataMode2;
+				if (((_context$formDataMode2 = context.formDataModel) === null || _context$formDataMode2 === void 0 ? void 0 : _context$formDataMode2.value) && data) {
+					Object.assign(context.formDataModel.value, data);
+					return "表单数据已更新";
+				}
+				return "更新失败：上下文或数据无效";
+			},
+			getWidgetsInfo: () => {
+				var _context$widgetRefLis;
+				return Array.from(((_context$widgetRefLis = context.widgetRefList) === null || _context$widgetRefLis === void 0 || (_context$widgetRefLis = _context$widgetRefLis.value) === null || _context$widgetRefLis === void 0 ? void 0 : _context$widgetRefLis.keys()) || []);
+			},
+			getFormJson: () => {
+				var _context$designer;
+				const designer = (_context$designer = context.designer) === null || _context$designer === void 0 ? void 0 : _context$designer.value;
+				if (designer) return {
+					widgetList: designer.widgetList,
+					formConfig: designer.formConfig
+				};
+				return null;
+			},
+			setFormJson: (formJson) => {
+				var _context$designer2;
+				const designer = (_context$designer2 = context.designer) === null || _context$designer2 === void 0 ? void 0 : _context$designer2.value;
+				if (designer) {
+					designer.loadFormJson(formJson);
+					designer.emitHistoryChange();
+					return "表单 JSON 已导入";
+				}
+				return "导入失败：设计器上下文不存在";
+			}
+		};
+	};
+	return { registerWebMCPTools };
+};
+//#endregion
+export { useWebMCP };