@kp-ui/lowcode-pc-v2 0.0.5 → 0.0.6

package/src/hooks/useTableWidget.js

@@ -5,11 +5,26 @@ import { useRemoteData } from "../../core/src/hooks/useRemoteData.js";
 import { useFactoryRender } from "../../core/src/hooks/useFactoryRender.js";
 import { useTableColumnStore } from "../../core/src/store/useTableColumnStore.js";
 import ActionButtonListRender_default from "../components/public/ActionButtonListRender.js";
-import { computed, h, inject, isVNode, ref, watchEffect } from "vue";
+import { computed, h, inject, isVNode, ref, toRaw, watch } from "vue";
 import { message } from "ant-design-vue";
 import { CustomItemRender, TpfDelConfirm, tranformAntSizzVxetableSize, tranformAntTableColumnToVxetableColumn, useExecFunction } from "tmgc2-share";
 import { cloneDeep, isArray, omit } from "lodash-es";
 //#region src/hooks/useTableWidget.ts
+var normalizePlainObject = (value) => {
+	const rawValue = toRaw(value);
+	if (isArray(rawValue)) return rawValue.map(normalizePlainObject);
+	if (!rawValue || typeof rawValue !== "object") return rawValue;
+	const prototype = Object.getPrototypeOf(rawValue);
+	if (prototype !== Object.prototype && prototype !== null) return rawValue;
+	return Object.keys(rawValue).reduce((result, key) => {
+		result[key] = normalizePlainObject(rawValue[key]);
+		return result;
+	}, {});
+};
+var normalizeTableData = (value) => {
+	if (!isArray(value)) return [];
+	return value.map(normalizePlainObject);
+};
 function useTableWidget({ widget, fieldModel, designState = false }) {
 	const tableRef = ref();
 	const { i18nt } = useI18n();
@@ -25,6 +40,7 @@ function useTableWidget({ widget, fieldModel, designState = false }) {
 		var _ref, _widget$props;
 		return (_ref = (widget === null || widget === void 0 || (_widget$props = widget.props) === null || _widget$props === void 0 ? void 0 : _widget$props.showColumnManager) && !!columnList.value.length) !== null && _ref !== void 0 ? _ref : false;
 	});
+	const localData = ref(normalizeTableData(fieldModel.value));
 	const columnList = ref([]);
 	const initColumnList = () => {
 		const storageKey = widget.props.name || widget.id;
@@ -67,7 +83,7 @@ function useTableWidget({ widget, fieldModel, designState = false }) {
 		const tableColumns = (optins === null || optins === void 0 ? void 0 : optins.tableColumns) || [];
 		const { rowSelection, showIndex } = optins !== null && optins !== void 0 ? optins : {};
 		if (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.hasRowSelection) leftFixedColumns.push({
-			title: rowSelection.columnTitle,
+			title: rowSelection.columnTitle || "",
 			width: rowSelection.columnWidth,
 			align: "left",
 			fixed: "left",
@@ -164,12 +180,27 @@ function useTableWidget({ widget, fieldModel, designState = false }) {
 		};
 	};
 	const tableSize = computed(() => widget.props.tableSize);
+	const tableHeight = computed(() => {
+		if (widget.props.heightMode === "auto") return "100%";
+		const height = transformPx(widget.props.height);
+		return height === "unset" ? "100%" : height;
+	});
+	const tableWrapperFlex = computed(() => widget.props.heightMode === "auto" ? "0 0 auto" : "1 1 auto");
 	const onSortChange = () => {
 		initTableSoureData();
 	};
 	const rowKey = computed(() => widget.props.rowKey);
+	const tableData = computed(() => localData.value);
+	const syncTableValue = (value) => {
+		var _tableRef$value;
+		const tableValue = normalizeTableData(value);
+		localData.value = tableValue;
+		fieldModel.value = tableValue;
+		(_tableRef$value = tableRef.value) === null || _tableRef$value === void 0 || _tableRef$value.loadData(tableValue);
+	};
 	const tableProps = computed(() => {
-		const { height = 300, border = false, lineHeight = 50, colorRow = false, showPagination = true, treeConfig } = widget.props;
+		var _widget$props$rowSele;
+		const { border = false, lineHeight = 50, colorRow = false, showPagination = true, treeConfig } = widget.props;
 		let _treeConfig = {};
 		if (treeConfig === null || treeConfig === void 0 ? void 0 : treeConfig.enabled) _treeConfig = {
 			transform: treeConfig.transform,
@@ -180,11 +211,11 @@ function useTableWidget({ widget, fieldModel, designState = false }) {
 			id: widget.id,
 			showPagination,
 			size: tranformAntSizzVxetableSize(tableSize.value),
-			height: transformPx(height),
 			border: border !== null && border !== void 0 ? border : false,
-			data: fieldModel.value || [],
+			data: tableData.value,
 			columns: columns.value,
 			treeConfig: _treeConfig,
+			minHeight: "200px",
 			rowConfig: {
 				keyField: rowKey.value,
 				isCurrent: colorRow,
@@ -192,11 +223,12 @@ function useTableWidget({ widget, fieldModel, designState = false }) {
 			},
 			customConfig: { storage: !designState },
 			checkboxConfig: {
+				reserve: (_widget$props$rowSele = widget.props.rowSelection) === null || _widget$props$rowSele === void 0 ? void 0 : _widget$props$rowSele.preserveSelectedRowKeys,
 				isShiftKey: (treeConfig === null || treeConfig === void 0 ? void 0 : treeConfig.enabled) ? true : false,
 				checkMethod: (_data) => {
-					var _widget$props$rowSele;
+					var _widget$props$rowSele2;
 					return executeFunction({
-						functionBody: (_widget$props$rowSele = widget.props.rowSelection) === null || _widget$props$rowSele === void 0 ? void 0 : _widget$props$rowSele.checkMethod,
+						functionBody: (_widget$props$rowSele2 = widget.props.rowSelection) === null || _widget$props$rowSele2 === void 0 ? void 0 : _widget$props$rowSele2.checkMethod,
 						params: _data,
 						keys: ["row"]
 					});
@@ -211,9 +243,9 @@ function useTableWidget({ widget, fieldModel, designState = false }) {
 	const initTableSoureData = async () => {
 		await loadData();
 	};
-	watchEffect(() => {
-		fieldModel.value = data.value || [];
-	});
+	watch(() => data.value, (value) => {
+		syncTableValue(value);
+	}, { immediate: true });
 	const onRunEvent = ({ row, $event }, type) => {
 		executeFunction({
 			functionBody: widget.events[type] || "",
@@ -249,15 +281,14 @@ function useTableWidget({ widget, fieldModel, designState = false }) {
 		});
 	};
 	const getDataSource = () => {
-		return fieldModel.value;
+		return localData.value;
 	};
 	const insertTableValue = (data) => {
-		if (!fieldModel.value) fieldModel.value = [];
-		fieldModel.value.push(cloneDeep(data));
+		setValue([...localData.value, normalizePlainObject(cloneDeep(data))]);
 	};
 	const setValue = (data) => {
 		if (!isArray(data)) return console.error("表格数据类型错误");
-		fieldModel.value = cloneDeep(data);
+		syncTableValue(cloneDeep(data));
 	};
 	const getTableColumns = () => {
 		return widget.props.tableColumns;
@@ -269,7 +300,7 @@ function useTableWidget({ widget, fieldModel, designState = false }) {
 		if (!delKeys.length) return;
 		try {
 			await TpfDelConfirm({ content: i18nt("确定删除选中的数据吗") });
-			setValue(fieldModel.value.filter((item) => !(delKeys === null || delKeys === void 0 ? void 0 : delKeys.includes(item[rowKey.value]))));
+			setValue(localData.value.filter((item) => !(delKeys === null || delKeys === void 0 ? void 0 : delKeys.includes(item[rowKey.value]))));
 			message.success(i18nt("操作成功"));
 		} catch (_unused) {}
 	};
@@ -300,6 +331,8 @@ function useTableWidget({ widget, fieldModel, designState = false }) {
 		initTableSoureData,
 		setTableRef,
 		tableSize,
+		tableHeight,
+		tableWrapperFlex,
 		tableProps,
 		tableRef,
 		columns,

package/src/render/index.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import index_vue_vue_type_script_setup_true_lang_default from "./index.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                      */
 //#region src/render/index.vue
-var render_default = /* @__PURE__ */ _plugin_vue_export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-039c10e2"]]);
+var render_default = /* @__PURE__ */ _plugin_vue_export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-464184f3"]]);
 //#endregion
 export { render_default as default };

package/src/render/index.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import LowcodeRenderProvider_default from "../../core/src/components/common/rend
 import { usePageContext } from "../../core/src/components/common/render/usePageContext.js";
 import RenderWidgetList_default from "../../core/src/components/common/render/RenderWidgetList.js";
 import { getRenderWidget } from "../widgets/render.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, isRef, onMounted, openBlock, ref, unref, watchEffect, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, isRef, normalizeClass, onMounted, openBlock, ref, unref, useCssVars, watchEffect, withCtx } from "vue";
 import { Skeleton } from "ant-design-vue";
 import { getLocat } from "@kp-ui/tool";
 //#region src/render/index.vue?vue&type=script&setup=true&lang.ts
@@ -28,6 +28,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		parentForm: { default: null }
 	},
 	setup(__props, { expose: __expose }) {
+		useCssVars((_ctx) => ({ "4a7fb80b": unref(formConfig).backgroundColor }));
 		const debug = computed(() => getLocat().debug === "1");
 		const debugVisible = ref(false);
 		const props = __props;
@@ -46,7 +47,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			formJson: props.formJson
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(LowcodeRenderProvider_default), {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["layout-render-wrapper", unref(formConfig).customClass]) }, [createVNode(unref(LowcodeRenderProvider_default), {
 				getWidget: unref(getRenderWidget),
 				context: unref(formContext)
 			}, {
@@ -64,7 +65,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					}, null, 8, ["visible"])) : createCommentVNode("", true)
 				]),
 				_: 1
-			}, 8, ["getWidget", "context"]);
+			}, 8, ["getWidget", "context"])], 2);
 		};
 	}
 });

package/src/schemas/defaults/field.js

@@ -5,6 +5,7 @@ var defaultValidationConfig = {
 	requiredHint: "",
 	validation: "",
 	validationHint: "",
+	onValidate: "",
 	rules: []
 };
 var defaultDataSourceConfig = {

package/src/widgets/advanced/code-editor/index.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import index_vue_vue_type_script_setup_true_lang_default from "./index.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                      */
 //#region src/widgets/advanced/code-editor/index.vue
-var code_editor_default = /* @__PURE__ */ _plugin_vue_export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b5e7230e"]]);
+var code_editor_default = /* @__PURE__ */ _plugin_vue_export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8c04a069"]]);
 //#endregion
 export { code_editor_default as default };

package/src/widgets/advanced/code-editor/index.vue_vue_type_script_setup_true_lang.js

@@ -10,8 +10,15 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 	__name: "index",
 	props: { widget: {} },
 	setup(__props, { expose: __expose }) {
-		const { rules, designState, fieldModel, isReadMode, handleHidden, defineExposed } = useField(__props.widget);
-		__expose({ ...defineExposed });
+		const { rules, designState, fieldModel, isReadMode, handleHidden, defineExposed, getFieldEditor } = useField(__props.widget);
+		const setValue = (newValue) => {
+			var _getFieldEditor;
+			(_getFieldEditor = getFieldEditor()) === null || _getFieldEditor === void 0 || _getFieldEditor.setValue(newValue);
+		};
+		__expose({
+			...defineExposed,
+			setValue
+		});
 		return (_ctx, _cache) => {
 			return !unref(handleHidden) ? (openBlock(), createBlock(form_item_wrapper_default, {
 				key: 0,

package/src/widgets/advanced/data-table/index.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import index_vue_vue_type_script_setup_true_lang_default from "./index.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                      */
 //#region src/widgets/advanced/data-table/index.vue
-var data_table_default = /* @__PURE__ */ _plugin_vue_export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-218c688c"]]);
+var data_table_default = /* @__PURE__ */ _plugin_vue_export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-19607d37"]]);
 //#endregion
 export { data_table_default as default };

package/src/widgets/advanced/data-table/index.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { useField } from "../../../../core/src/hooks/useField.js";
 import { WidgetType, getWidgetName } from "../../widgetTypes.js";
 import { useTableWidget } from "../../../hooks/useTableWidget.js";
 import DataTableColumnDialog_default from "../../../components/public/DataTableColumnDialog.js";
-import { createCommentVNode, createElementBlock, createVNode, defineComponent, onMounted, openBlock, ref, unref, watchEffect } from "vue";
+import { createCommentVNode, createElementBlock, createVNode, defineComponent, onMounted, openBlock, ref, unref, useCssVars, watchEffect } from "vue";
 import { SvgIcon, Table, useVxeTable } from "tmgc2-share";
 //#region src/widgets/advanced/data-table/index.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
@@ -20,10 +20,14 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 	__name: "index",
 	props: { widget: {} },
 	setup(__props, { expose: __expose }) {
-		var _widget$props$rowSele;
+		var _widget$props$rowSele, _widget$props$rowSele2;
+		useCssVars((_ctx) => ({
+			"0622be28": unref(tableHeight),
+			"3bd67a87": unref(tableWrapperFlex)
+		}));
 		const { widget } = __props;
 		const { fieldModel, handleHidden, defineExposed } = useField(widget);
-		const { loading, tableProps, pagination, showColumnManager, setPagination, setTableRef, initTableSoureData, handleTableChange, onRunEvent, onSortChange, onCheckboxChange, tableDefinExpoed, columnList, initColumnList, handleUpdateColumns } = useTableWidget({
+		const { loading, tableProps, pagination, showColumnManager, tableHeight, tableWrapperFlex, setPagination, setTableRef, initTableSoureData, handleTableChange, onRunEvent, onSortChange, onCheckboxChange, tableDefinExpoed, columnList, initColumnList, handleUpdateColumns } = useTableWidget({
 			widget,
 			fieldModel,
 			designState: false
@@ -35,10 +39,11 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			columnDialogVisible.value = true;
 		};
 		const columnDialogVisible = ref(false);
-		const { tableRef, register, selectedRowInfo, sorts, selectRow, delSelectRow } = useVxeTable({
+		const { tableRef, register, selectedRowInfo, sorts, selectRow, delSelectRow, getSelectedRows } = useVxeTable({
 			props: {
 				rowKey: widget.props.rowKey,
 				hasRowSelection: (_widget$props$rowSele = widget.props.rowSelection) === null || _widget$props$rowSele === void 0 ? void 0 : _widget$props$rowSele.hasRowSelection,
+				preserveSelectedRowKeys: (_widget$props$rowSele2 = widget.props.rowSelection) === null || _widget$props$rowSele2 === void 0 ? void 0 : _widget$props$rowSele2.preserveSelectedRowKeys,
 				clickRowCheck: widget.props.colorRow
 			},
 			events: {
@@ -53,14 +58,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				cellClick: (params) => onRunEvent(params, "onCellClick")
 			}
 		});
-		const getSelectedRowKeys = () => {
-			var _tableRef$value;
-			return (((_tableRef$value = tableRef.value) === null || _tableRef$value === void 0 ? void 0 : _tableRef$value.getCheckboxRecords()) || []).map((item) => item[widget.props.rowKey]);
-		};
-		const getSelectedRows = () => {
-			var _tableRef$value2;
-			return (_tableRef$value2 = tableRef.value) === null || _tableRef$value2 === void 0 ? void 0 : _tableRef$value2.getCheckboxRecords(true);
-		};
+		const getSelectedRowKeys = () => selectedRowInfo.value.selectedRowKeys;
 		/**
 		* 获取字段编辑器
 		* @returns 字段编辑器

package/src/widgets/advanced/data-table/schema.js

@@ -57,6 +57,7 @@ var DataTable = {
 		labelHidden: false,
 		hidden: false,
 		lineHeight: 38,
+		heightMode: "fixed",
 		height: 300,
 		customClass: [],
 		showIndex: false,
@@ -92,7 +93,7 @@ var DataTable = {
 		showColumnManager: false,
 		colorRow: true,
 		rowSelection: {
-			columnTitle: "序号",
+			columnTitle: "",
 			hasRowSelection: false,
 			preserveSelectedRowKeys: false,
 			fixed: true,

package/src/widgets/containers/dialog/index-render.js

@@ -1,5 +1,7 @@
+import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_export-helper.js";
 import index_render_vue_vue_type_script_setup_true_lang_default from "./index-render.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                             */
 //#region src/widgets/containers/dialog/index-render.vue
-var index_render_default = index_render_vue_vue_type_script_setup_true_lang_default;
+var index_render_default = /* @__PURE__ */ _plugin_vue_export_helper_default(index_render_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-17ae4bcb"]]);
 //#endregion
 export { index_render_default as default };

package/src/widgets/containers/dialog/index-render.vue_vue_type_script_setup_true_lang.js

@@ -4,11 +4,10 @@ import { ComponentNameEnum } from "../../../../core/src/constants/WidgetTypeEnum
 import { useField } from "../../../../core/src/hooks/useField.js";
 import { WidgetType, getWidgetName } from "../../widgetTypes.js";
 import ActionButtonListRender_default from "../../../components/public/ActionButtonListRender.js";
-import { createBlock, createElementVNode, createVNode, defineComponent, openBlock, ref, unref, withCtx } from "vue";
+import { createBlock, createVNode, defineComponent, openBlock, ref, unref, withCtx } from "vue";
 import { TpfModal } from "tmgc2-share";
 import { useI18n } from "@kp-ui/i18n";
 //#region src/widgets/containers/dialog/index-render.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "dialog-content" };
 var index_render_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	name: getWidgetName(WidgetType.Dialog),
@@ -58,6 +57,7 @@ var index_render_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 				"close-on-click-modal": false,
 				"close-on-press-escape": true,
 				width: unref(transformPx)(_ctx.widget.props.width) || "600px",
+				height: unref(transformPx)(_ctx.widget.props.height) || "440px",
 				mask: true,
 				onCancel: close,
 				"left-num": leftNum.value
@@ -72,16 +72,17 @@ var index_render_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 					"ctx",
 					"disabled"
 				])]),
-				default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(unref(RenderWidgetList_default), {
+				default: withCtx(() => [createVNode(unref(RenderWidgetList_default), {
 					parentWidget: _ctx.widget,
 					list: _ctx.widget.children,
 					"onUpdate:list": _cache[0] || (_cache[0] = ($event) => _ctx.widget.children = $event)
-				}, null, 8, ["parentWidget", "list"])])]),
+				}, null, 8, ["parentWidget", "list"])]),
 				_: 1
 			}, 8, [
 				"title",
 				"visible",
 				"width",
+				"height",
 				"left-num"
 			]);
 		};

package/src/widgets/containers/dialog/schema.js

@@ -15,6 +15,7 @@ var Dialog = {
 	props: {
 		name: "",
 		width: "100%",
+		height: "440px",
 		customClass: [],
 		title: "对话框",
 		centered: false,

package/src/widgets/containers/flex/index-render.js

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_export-helper.js";
+import index_render_vue_vue_type_script_setup_true_lang_default from "./index-render.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                             */
+//#region src/widgets/containers/flex/index-render.vue
+var index_render_default = /* @__PURE__ */ _plugin_vue_export_helper_default(index_render_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-4ac728a4"]]);
+//#endregion
+export { index_render_default as default };

package/src/widgets/containers/flex/index-render.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,93 @@
+import RenderWidgetList_default from "../../../../core/src/components/common/render/RenderWidgetList.js";
+import { ComponentNameEnum } from "../../../../core/src/constants/WidgetTypeEnum.js";
+import { useField } from "../../../../core/src/hooks/useField.js";
+import { WidgetType, getWidgetName } from "../../widgetTypes.js";
+import { computed, createCommentVNode, createElementBlock, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, unref } from "vue";
+//#region src/widgets/containers/flex/index-render.vue?vue&type=script&setup=true&lang.ts
+var index_render_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	name: getWidgetName(WidgetType.Flex),
+	componentName: ComponentNameEnum.ContainerWidget,
+	__name: "index-render",
+	props: { widget: {} },
+	setup(__props, { expose: __expose }) {
+		const { handleHidden, defineExposed } = useField(__props.widget);
+		const flexHeight = computed(() => {
+			if (__props.widget.props.heightMode === "fixed") {
+				var _props$widget$props$f;
+				return `${(_props$widget$props$f = __props.widget.props.flexHeight) !== null && _props$widget$props$f !== void 0 ? _props$widget$props$f : 42}px`;
+			}
+			return "100%";
+		});
+		const getFlexItemStyle = (childWidget) => {
+			var _props$widget$props$f2, _ref, _config$mode;
+			const config = childWidget.id ? (_props$widget$props$f2 = __props.widget.props.flexItemWidths) === null || _props$widget$props$f2 === void 0 ? void 0 : _props$widget$props$f2[childWidget.id] : void 0;
+			const mode = (_ref = (_config$mode = config === null || config === void 0 ? void 0 : config.mode) !== null && _config$mode !== void 0 ? _config$mode : __props.widget.props.flexItemWidthMode) !== null && _ref !== void 0 ? _ref : "auto";
+			const size = (config === null || config === void 0 ? void 0 : config.width) || __props.widget.props.flexItemWidth || "240px";
+			const isColumn = __props.widget.props.flexDirection.includes("column");
+			if (isColumn) {
+				if (mode === "full") return {
+					width: "100%",
+					minHeight: 0,
+					flex: "1"
+				};
+				if (mode === "fixed") return {
+					width: "100%",
+					height: size,
+					flex: `0 0 ${size}`
+				};
+				return {
+					width: "100%",
+					flex: "0 1 auto"
+				};
+			}
+			if (mode === "full") {
+				if (!__props.widget.props.wrap) return {
+					width: 0,
+					minWidth: 0,
+					flex: "1 1 0"
+				};
+				return {
+					width: "100%",
+					flex: "0 0 100%"
+				};
+			}
+			if (mode === "fixed") return {
+				width: size,
+				flex: `0 0 ${size}`
+			};
+			return {
+				width: isColumn ? "100%" : "auto",
+				flex: "0 1 auto"
+			};
+		};
+		const flexStyle = computed(() => {
+			var _props$widget$props$g;
+			return {
+				...__props.widget.style,
+				height: flexHeight.value,
+				display: "flex",
+				flexDirection: __props.widget.props.flexDirection,
+				justifyContent: __props.widget.props.justifyContent,
+				alignItems: __props.widget.props.alignItems,
+				flexWrap: __props.widget.props.wrap ? "wrap" : "nowrap",
+				gap: `${(_props$widget$props$g = __props.widget.props.gap) !== null && _props$widget$props$g !== void 0 ? _props$widget$props$g : 0}px`
+			};
+		});
+		__expose({ ...defineExposed });
+		return (_ctx, _cache) => {
+			return !unref(handleHidden) ? (openBlock(), createElementBlock("div", {
+				class: normalizeClass(["flex-container", _ctx.widget.props.customClass]),
+				style: normalizeStyle(flexStyle.value),
+				key: _ctx.widget.id
+			}, [createVNode(unref(RenderWidgetList_default), {
+				list: _ctx.widget.children,
+				"onUpdate:list": _cache[0] || (_cache[0] = ($event) => _ctx.widget.children = $event),
+				parentWidget: _ctx.widget,
+				itemStyle: getFlexItemStyle
+			}, null, 8, ["list", "parentWidget"])], 6)) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { index_render_vue_vue_type_script_setup_true_lang_default as default };

package/src/widgets/containers/flex/schema.js

@@ -0,0 +1,35 @@
+import { WidgetType } from "../../widgetTypes.js";
+//#region src/widgets/containers/flex/schema.ts
+var Flex = {
+	id: "",
+	type: WidgetType.Flex,
+	category: "container",
+	style: {
+		width: "100%",
+		minHeight: "42px"
+	},
+	events: {
+		onMounted: "",
+		onHidden: "//return false"
+	},
+	children: [],
+	props: {
+		name: "",
+		label: "flex",
+		hidden: false,
+		customClass: [],
+		heightMode: "inherit",
+		flexHeight: 42,
+		flexDirection: "row",
+		justifyContent: "flex-start",
+		alignItems: "stretch",
+		gap: 8,
+		wrap: true,
+		flexItemWidthMode: "auto",
+		flexItemWidth: "240px",
+		flexItemWidths: {},
+		componentSort: true
+	}
+};
+//#endregion
+export { Flex };

package/src/widgets/containers/space/schema.js

@@ -3,6 +3,7 @@ import { WidgetType } from "../../widgetTypes.js";
 var Space = {
 	id: "",
 	type: WidgetType.Space,
+	internal: true,
 	category: "container",
 	style: {},
 	events: {

package/src/widgets/render.js

@@ -62,6 +62,7 @@ import { Collapse } from "./containers/collapse/schema.js";
 import { Dialog } from "./containers/dialog/schema.js";
 import { Form } from "./containers/form/schema.js";
 import { Space } from "./containers/space/schema.js";
+import { Flex } from "./containers/flex/schema.js";
 import { List } from "./containers/list/schema.js";
 import { SecondaryPage } from "./template/SecondaryPage/schema.js";
 import index_render_default from "./containers/grid-col/index-render.js";
@@ -73,8 +74,9 @@ import index_render_default$5 from "./containers/collapse/index-render.js";
 import index_render_default$6 from "./containers/dialog/index-render.js";
 import index_render_default$7 from "./containers/form/index-render.js";
 import index_render_default$8 from "./containers/space/index-render.js";
-import index_render_default$9 from "./containers/list/index-render.js";
-import index_render_default$10 from "./template/SecondaryPage/index-render.js";
+import index_render_default$9 from "./containers/flex/index-render.js";
+import index_render_default$10 from "./containers/list/index-render.js";
+import index_render_default$11 from "./template/SecondaryPage/index-render.js";
 //#region src/widgets/render.ts
 var renderSchemas = [
 	Input,
@@ -113,6 +115,7 @@ var renderSchemas = [
 	Dialog,
 	Form,
 	Space,
+	Flex,
 	List,
 	SecondaryPage
 ];
@@ -154,7 +157,8 @@ var renderComponents = [
 	index_render_default$7,
 	index_render_default$8,
 	index_render_default$9,
-	index_render_default$10
+	index_render_default$10,
+	index_render_default$11
 ];
 new Map(renderSchemas.map((schema) => [schema.type, schema]));
 var renderRegistryComponents = new Map(renderComponents.map((component) => [component.name, component]));

package/src/widgets/widgetTypes.js

@@ -40,6 +40,7 @@ var WidgetType = /* @__PURE__ */ function(WidgetType) {
 	WidgetType["Dialog"] = "dialog";
 	WidgetType["GridSubForm"] = "grid-sub-form";
 	WidgetType["Space"] = "space";
+	WidgetType["Flex"] = "flex";
 	WidgetType["List"] = "list";
 	WidgetType["SecondaryPage"] = "secondary-page";
 	return WidgetType;

package/src/widgets/wrapper/form-item-wrapper.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import form_item_wrapper_vue_vue_type_script_setup_true_lang_default from "./form-item-wrapper.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                  */
 //#region src/widgets/wrapper/form-item-wrapper.vue
-var form_item_wrapper_default = /* @__PURE__ */ _plugin_vue_export_helper_default(form_item_wrapper_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9c668962"]]);
+var form_item_wrapper_default = /* @__PURE__ */ _plugin_vue_export_helper_default(form_item_wrapper_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-254940bd"]]);
 //#endregion
 export { form_item_wrapper_default as default };

package/src/widgets/wrapper/form-item-wrapper.vue_vue_type_script_setup_true_lang.js

@@ -4,16 +4,12 @@ import { FormItem } from "ant-design-vue";
 import { SvgIcon } from "tmgc2-share";
 //#region src/widgets/wrapper/form-item-wrapper.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
-	key: 0,
-	class: "label-box"
-};
-var _hoisted_2 = {
 	key: 0,
 	class: "custom-label"
 };
-var _hoisted_3 = { class: "label-text" };
-var _hoisted_4 = { class: "label-text" };
-var _hoisted_5 = {
+var _hoisted_2 = ["title"];
+var _hoisted_3 = ["title"];
+var _hoisted_4 = {
 	key: 1,
 	class: "label-text"
 };
@@ -68,13 +64,22 @@ var form_item_wrapper_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				name: unref(getPropName),
 				labelAlign: labelAlign.value
 			}, {
-				label: withCtx(() => [!labelHidden.value ? (openBlock(), createElementBlock("div", _hoisted_1, [labelIconClass.value ? (openBlock(), createElementBlock("span", _hoisted_2, [labelIconPosition.value === "front" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(_component_a_tooltip, { title: labelIconTooltip.value }, {
+				label: withCtx(() => [!labelHidden.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(["label-box", `label-box--${labelAlign.value}`])
+				}, [labelIconClass.value ? (openBlock(), createElementBlock("span", _hoisted_1, [labelIconPosition.value === "front" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(_component_a_tooltip, { title: labelIconTooltip.value }, {
 					default: withCtx(() => [createVNode(unref(SvgIcon), { "icon-class": labelIconClass.value }, null, 8, ["icon-class"])]),
 					_: 1
-				}, 8, ["title"]), createElementVNode("span", _hoisted_3, toDisplayString(unref(label)), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("span", _hoisted_4, toDisplayString(unref(label)), 1), createVNode(_component_a_tooltip, { title: labelIconTooltip.value }, {
+				}, 8, ["title"]), createElementVNode("span", {
+					class: "label-text",
+					title: unref(label)
+				}, toDisplayString(unref(label)), 9, _hoisted_2)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("span", {
+					class: "label-text",
+					title: unref(label)
+				}, toDisplayString(unref(label)), 9, _hoisted_3), createVNode(_component_a_tooltip, { title: labelIconTooltip.value }, {
 					default: withCtx(() => [createVNode(unref(SvgIcon), { "icon-class": labelIconClass.value }, null, 8, ["icon-class"])]),
 					_: 1
-				}, 8, ["title"])], 64))])) : (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(unref(label)), 1))])) : createCommentVNode("", true)]),
+				}, 8, ["title"])], 64))])) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(unref(label)), 1))], 2)) : createCommentVNode("", true)]),
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 				_: 3
 			}, 8, [