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

package/assets/styles/style.css

@@ -135,35 +135,66 @@
   border-radius: 4px;
   color: #333;
 }
-.field-wrapper[data-v-9c668962] {
+.field-wrapper[data-v-254940bd] {
   position: relative;
 }
-.field-wrapper.hidden[data-v-9c668962] {
+.field-wrapper.hidden[data-v-254940bd] {
   display: none;
 }
-.ant-form-item[data-v-9c668962] {
+.ant-form-item[data-v-254940bd] {
   position: relative;
 }
-.ant-form-item[data-v-9c668962] .ant-form-item-label {
+.ant-form-item[data-v-254940bd] .ant-form-item-label {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.ant-form-item .label-box[data-v-9c668962] {
+.ant-form-item .label-box[data-v-254940bd] {
   display: flex;
   align-items: center;
+  width: 100%;
+  height: auto;
+  min-height: 30px;
+  min-width: 0;
 }
-.ant-form-item .label-box .label-text[data-v-9c668962] {
-  overflow: hidden;
-  text-overflow: ellipsis;
+.ant-form-item .label-box .label-text[data-v-254940bd] {
+  min-width: 0;
+  display: inline;
+  overflow: visible;
+  text-overflow: initial;
+  white-space: normal;
+  text-align: inherit;
+  word-break: break-all;
+  -webkit-line-clamp: initial;
+  -webkit-box-orient: initial;
+}
+.ant-form-item .label-box--left[data-v-254940bd] {
+  justify-content: flex-start;
+}
+.ant-form-item .label-box--left .label-text[data-v-254940bd] {
+  text-align: start;
+}
+.ant-form-item .label-box--right[data-v-254940bd] {
+  justify-content: flex-end;
 }
-.ant-form-item .custom-label[data-v-9c668962] {
-  display: flex;
+.ant-form-item .label-box--right .label-text[data-v-254940bd] {
+  text-align: end;
+}
+.ant-form-item .custom-label[data-v-254940bd] {
+  display: inline-flex;
   align-items: center;
+  width: 100%;
+  min-width: 0;
   gap: 4px;
-}.designer[data-v-b5e7230e] {
+}
+.ant-form-item .custom-label .label-text[data-v-254940bd] {
+  flex: 1 1 auto;
+}
+.ant-form-item .custom-label[data-v-254940bd] .svg-icon {
+  flex: 0 0 auto;
+}.designer[data-v-8c04a069] {
   position: relative;
 }
-.designer[data-v-b5e7230e]::before {
+.designer[data-v-8c04a069]::before {
   position: absolute;
   z-index: 99;
   content: "";
@@ -275,11 +306,13 @@
 }
 .button-list-container .button-icon[data-v-37429548] {
   margin-right: 4px;
-}.talbe-wrapper[data-v-218c688c] {
-  width: 100%;
+}.talbe-wrapper[data-v-19607d37] {
   position: relative;
+  height: var(--0622be28);
+  display: flex;
+  flex: var(--3bd67a87);
 }
-.talbe-wrapper .table-toolbar[data-v-218c688c] {
+.talbe-wrapper .table-toolbar[data-v-19607d37] {
   padding: 8px 0;
   margin-bottom: 8px;
   position: absolute;
@@ -288,10 +321,10 @@
   right: 0;
   width: 30px;
 }
-.talbe-wrapper .vxe-grid[data-v-218c688c] {
+.talbe-wrapper .vxe-grid[data-v-19607d37] {
   width: 100%;
 }
-.talbe-wrapper__pagination[data-v-218c688c] {
+.talbe-wrapper__pagination[data-v-19607d37] {
   margin-top: 10px;
   display: flex;
   justify-content: end;
@@ -412,32 +445,38 @@
 }
 .vf-box-widget .vf-box-content[data-v-d52cfec5] {
   min-height: 60px;
-}.collapse-container[data-v-cf9e4069] {
+}.collapse-container[data-v-198dcc4f] {
   display: flex;
   margin: 2px;
-  height: 100%;
   width: 100%;
-  flex: 1 0 0;
 }
-.collapse-container .form-widget-list[data-v-cf9e4069] {
+.collapse-container .form-widget-list[data-v-198dcc4f] {
   min-height: 28px;
 }
-.collapse-container[data-v-cf9e4069] .header-right .form-widget-list {
+.collapse-container[data-v-198dcc4f] .header-right .form-widget-list {
   min-width: 200px;
 }
-.tpf-collapse[data-v-cf9e4069] {
+.tpf-collapse[data-v-198dcc4f] {
   padding: 5px;
 }
-.tpf-collapse .collapse-right[data-v-cf9e4069] {
+.tpf-collapse .collapse-right[data-v-198dcc4f] {
   min-width: 200px;
   min-height: 30px;
 }
-.tpf-collapse[data-v-cf9e4069] .tpf-collapse-content-wrapper {
+.tpf-collapse[data-v-198dcc4f] .tpf-collapse-content-wrapper {
   overflow: hidden;
   background-color: #fff;
   padding: 16px;
 }
-.form-widget[data-v-4c8924c1] {
+[data-v-17ae4bcb] .ant-modal-body .ime-table {
+  height: 100%;
+}.flex-container[data-v-4ac728a4] {
+  width: 100%;
+  min-height: 42px;
+}
+.flex-container[data-v-4ac728a4] .ant-form-item {
+  margin-bottom: 0;
+}.form-widget[data-v-4c8924c1] {
   width: 100%;
   min-height: 60px;
 }.grid-cell[data-v-598209c1] {
@@ -490,11 +529,16 @@
 .page-template-widget[data-v-dc2a06fa] .addInfoLayout-footer .ant-form-item {
   margin-bottom: 0;
 }
-.loading-wrapper[data-v-039c10e2] {
+.layout-render-wrapper[data-v-464184f3] {
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: var(--4a7fb80b);
+}
+.loading-wrapper[data-v-464184f3] {
   min-height: 300px;
   padding: 20px;
 }
-.ant-form .ant-form-item-explain.ant-form-item-explain-connected[data-v-039c10e2] {
+.ant-form .ant-form-item-explain.ant-form-item-explain-connected[data-v-464184f3] {
   display: none;
 }
 /*$vite$:1*/

package/core/src/components/common/render/RenderWidgetList.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { Fragment, createBlock, createElementBlock, defineComponent, inject, mergeModels, openBlock, provide, renderList, resolveDynamicComponent, toRef, unref, useModel } from "vue";
+import { Fragment, createBlock, createElementBlock, defineComponent, inject, mergeModels, normalizeStyle, openBlock, provide, renderList, resolveDynamicComponent, toRef, unref, useModel } from "vue";
 //#region ../core/src/components/common/render/RenderWidgetList.vue?vue&type=script&setup=true&lang.ts
 var RenderWidgetList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
@@ -12,7 +12,8 @@ var RenderWidgetList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		},
 		allowTypes: { default: () => [] },
 		notAllowTypes: { default: () => [] },
-		parentWidget: {}
+		parentWidget: {},
+		itemStyle: {}
 	}, {
 		"list": {
 			type: Array,
@@ -28,16 +29,17 @@ var RenderWidgetList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		const list = useModel(__props, "list");
 		return (_ctx, _cache) => {
 			return openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (widget, index) => {
+				var _ctx$itemStyle;
 				return openBlock(), createBlock(resolveDynamicComponent(unref(getWidget)(widget)), {
 					key: `${widget.id}_${index}`,
 					id: widget.id,
-					stlyle: widget.style,
+					style: normalizeStyle([widget.style, (_ctx$itemStyle = _ctx.itemStyle) === null || _ctx$itemStyle === void 0 ? void 0 : _ctx$itemStyle.call(_ctx, widget, index)]),
 					widget,
 					field: widget,
 					index
 				}, null, 8, [
 					"id",
-					"stlyle",
+					"style",
 					"widget",
 					"field",
 					"index"

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

@@ -26,6 +26,7 @@ var usePageContext = ({ props }) => {
 	const childFormRef = ref();
 	const serveList = computed(() => formConfig.value.serveList);
 	const formWidgetId = Symbol("formWidget");
+	const formCustomCodeId = "vfRender" + generateId();
 	const dialogOrDrawerRef = ref();
 	const { context, execHttpFunction, asyncExecuteFunction } = useExecFunction();
 	const { getPageInstance, getInstance, registerToRefList } = useAppRef(widgetRefList, formWidgetId);
@@ -122,16 +123,18 @@ var usePageContext = ({ props }) => {
 	* @param formId 表单ID
 	*/
 	const insertCustomCode = () => {
-		const formId = "vfRender" + generateId();
 		const { cssCode, functions } = formConfig.value;
-		if (cssCode) insertCustomCssToHead(cssCode, formId || "");
-		if (functions) insertGlobalFunctionsToHtml(functions, formId || "");
+		if (cssCode) insertCustomCssToHead(cssCode, formCustomCodeId);
+		else removeCustomCssToHead(formCustomCodeId);
+		if (functions) {
+			removeScriptToHead(formCustomCodeId);
+			insertGlobalFunctionsToHtml(functions, formCustomCodeId);
+		} else removeScriptToHead(formCustomCodeId);
 	};
 	const removeCustomCode = () => {
-		const formId = "vfRender" + generateId();
 		const { cssCode, functions } = formConfig.value;
-		if (cssCode) removeCustomCssToHead(formId || "");
-		if (functions) removeScriptToHead(formId || "");
+		if (cssCode) removeCustomCssToHead(formCustomCodeId);
+		if (functions) removeScriptToHead(formCustomCodeId);
 	};
 	const reload = () => {
 		var _context$value;
@@ -153,7 +156,7 @@ var usePageContext = ({ props }) => {
 	const getFieldValue = (field) => {
 		return formDataModel.value[field];
 	};
-	const setFiledValue = (field, value) => {
+	const setFieldValue = (field, value) => {
 		formDataModel.value[field] = value;
 	};
 	const setVfCtx = (vfCtx) => {
@@ -195,7 +198,7 @@ var usePageContext = ({ props }) => {
 		setPageJson,
 		setLoading,
 		formDataModel,
-		setFiledValue,
+		setFieldValue,
 		isLoading,
 		vfCtx: props.vfCtx,
 		formConfig,

package/core/src/hooks/useAppRef.js

@@ -1,5 +1,5 @@
 import { useI18n } from "../utils/i18n.js";
-import { computed, getCurrentInstance, inject, ref } from "vue";
+import { computed, getCurrentInstance, inject, proxyRefs, ref } from "vue";
 import { message } from "ant-design-vue";
 //#region ../core/src/hooks/useAppRef.ts
 function useAppRef(widgetRefList, formWidgetId) {
@@ -18,12 +18,14 @@ function useAppRef(widgetRefList, formWidgetId) {
 		return foundRef;
 	};
 	const registerToRefList = (widgetName) => {
-		(isRoot ? widgetRefList === null || widgetRefList === void 0 ? void 0 : widgetRefList.value : refList.value).set(widgetName || widgetId.value, {
+		const list = isRoot ? widgetRefList === null || widgetRefList === void 0 ? void 0 : widgetRefList.value : refList.value;
+		const exposed = {
 			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
-		});
+		};
+		list.set(widgetName || widgetId.value, proxyRefs(exposed));
 	};
 	/**
 	* 从引用列表中注销

package/core/src/hooks/useField.js

@@ -202,10 +202,6 @@ function useField(widget) {
 		if (eq(fieldModel.value, newValue)) return;
 		const oldValue = deepClone(fieldModel.value);
 		if (widget.type === "file-upload") newValue = showFileList(newValue || []);
-		else if (widget.type === "code-editor") {
-			var _getFieldEditor;
-			(_getFieldEditor = getFieldEditor()) === null || _getFieldEditor === void 0 || _getFieldEditor.setValue(newValue);
-		}
 		fieldModel.value = newValue;
 		if (!disableChangeEvent) emitFieldDataChange(newValue, oldValue);
 	};

package/core/src/hooks/useFieldRules.js

@@ -15,23 +15,24 @@ function useFieldRules({ widget, getPropName, getPageInstance, designState }) {
 	});
 	/** 构建字段规则 */
 	const buildFieldRules = () => {
-		var _widget$props, _widget$validation, _widget$validation2, _widget$validation5, _widget$validation6;
+		var _widget$props, _widget$validation, _widget$events, _widget$validation2, _widget$validation3, _widget$validation6, _widget$validation8;
 		if (!("formItemFlag" in widget) || !widget.formItemFlag || ((_widget$props = widget.props) === null || _widget$props === void 0 ? void 0 : _widget$props.hidden)) return;
 		rules.value = [];
-		if ((_widget$validation = widget.validation) === null || _widget$validation === void 0 ? void 0 : _widget$validation.required) rules.value.push({
+		const customValidate = ((_widget$validation = widget.validation) === null || _widget$validation === void 0 ? void 0 : _widget$validation.onValidate) || ((_widget$events = widget.events) === null || _widget$events === void 0 ? void 0 : _widget$events.onValidate);
+		if ((_widget$validation2 = widget.validation) === null || _widget$validation2 === void 0 ? void 0 : _widget$validation2.required) rules.value.push({
 			required: true,
 			trigger: ["blur"],
 			message: widget.validation.requiredHint || i18nt("render.hint.fieldRequired")
 		});
-		if ((_widget$validation2 = widget.validation) === null || _widget$validation2 === void 0 ? void 0 : _widget$validation2.validation) {
-			var _widget$validation3;
-			const rulesFn = unref(rulesMap)[(_widget$validation3 = widget.validation) === null || _widget$validation3 === void 0 ? void 0 : _widget$validation3.validation];
+		if ((_widget$validation3 = widget.validation) === null || _widget$validation3 === void 0 ? void 0 : _widget$validation3.validation) {
+			var _widget$validation4;
+			const rulesFn = unref(rulesMap)[(_widget$validation4 = widget.validation) === null || _widget$validation4 === void 0 ? void 0 : _widget$validation4.validation];
 			if (rulesFn) {
-				var _widget$validation4;
-				rules.value.push(rulesFn((_widget$validation4 = widget.validation) === null || _widget$validation4 === void 0 ? void 0 : _widget$validation4.validationHint));
+				var _widget$validation5;
+				rules.value.push(rulesFn((_widget$validation5 = widget.validation) === null || _widget$validation5 === void 0 ? void 0 : _widget$validation5.validationHint));
 			}
 		}
-		(_widget$validation5 = widget.validation) === null || _widget$validation5 === void 0 || (_widget$validation5 = _widget$validation5.rules) === null || _widget$validation5 === void 0 || _widget$validation5.forEach((rule) => {
+		(_widget$validation6 = widget.validation) === null || _widget$validation6 === void 0 || (_widget$validation6 = _widget$validation6.rules) === null || _widget$validation6 === void 0 || _widget$validation6.forEach((rule) => {
 			if (rule.type === "pattern" && rule.value) rules.value.push({
 				pattern: new RegExp(rule.value),
 				trigger: rule.trigger || ["blur", "change"],
@@ -42,7 +43,33 @@ function useFieldRules({ widget, getPropName, getPageInstance, designState }) {
 				trigger: rule.trigger || ["blur"]
 			});
 		});
-		if ((_widget$validation6 = widget.validation) === null || _widget$validation6 === void 0 ? void 0 : _widget$validation6.rules) {}
+		if (customValidate) rules.value.push({
+			validator: async (rule, value) => {
+				let executeError;
+				let result = await Promise.resolve(executeFunction({
+					functionBody: customValidate,
+					params: {
+						rule,
+						value
+					},
+					keys: ["rule", "value"],
+					errorCallback: (error) => {
+						executeError = error;
+					}
+				}));
+				if (typeof result === "function") result = await result();
+				if (executeError) return Promise.reject(executeError);
+				if (result === false) {
+					var _widget$validation7;
+					return Promise.reject(new Error(((_widget$validation7 = widget.validation) === null || _widget$validation7 === void 0 ? void 0 : _widget$validation7.validationHint) || rule.message || ""));
+				}
+				if (typeof result === "string") return Promise.reject(new Error(result));
+				if (result instanceof Error) return Promise.reject(result);
+				return Promise.resolve();
+			},
+			trigger: ["blur", "change"]
+		});
+		if ((_widget$validation8 = widget.validation) === null || _widget$validation8 === void 0 ? void 0 : _widget$validation8.rules) {}
 	};
 	/** 清除字段规则 */
 	const clearFieldRules = () => {

package/core/src/hooks/useLowcode.js

@@ -2,7 +2,6 @@ import { ref } from "vue";
 import { message } from "ant-design-vue";
 import { http, routerReloadStatus, useDataQueryApi, useRouteBackTab } from "tmgc2-share";
 import { cloneDeep } from "lodash-es";
-import { getLocat } from "@kp-ui/tool";
 //#region ../core/src/hooks/useLowcode.ts
 var defaultPageJson = {
 	widgetList: [],
@@ -12,25 +11,25 @@ var pageJsonCache = /* @__PURE__ */ new Map();
 var pageJsonRequestCache = /* @__PURE__ */ new Map();
 var normalizePageJson = (json) => ({
 	...defaultPageJson,
-	...json || {}
+	...json
 });
-var getCachedPageJson = (formCode, useDataQuery) => {
-	const cached = pageJsonCache.get(formCode);
+var getCachedPageJson = (pageCode, useDataQuery) => {
+	const cached = pageJsonCache.get(pageCode);
 	if (cached) return Promise.resolve(cached);
-	const pending = pageJsonRequestCache.get(formCode);
+	const pending = pageJsonRequestCache.get(pageCode);
 	if (pending) return pending;
-	const request = useDataQuery.dataQueryDetail({ code: formCode }, "FormDefinitionV2").then((res) => {
+	const request = useDataQuery.dataQueryDetail({ code: pageCode }, "FormDefinitionV2").then((res) => {
 		const data = res.data.object || {};
 		const cache = {
 			formId: data.formId,
 			json: normalizePageJson(JSON.parse(data.frontendDefinition || "{}"))
 		};
-		pageJsonCache.set(formCode, cache);
+		pageJsonCache.set(pageCode, cache);
 		return cache;
 	}).finally(() => {
-		pageJsonRequestCache.delete(formCode);
+		pageJsonRequestCache.delete(pageCode);
 	});
-	pageJsonRequestCache.set(formCode, request);
+	pageJsonRequestCache.set(pageCode, request);
 	return request;
 };
 var useLowcode = (options = {}) => {
@@ -40,14 +39,16 @@ var useLowcode = (options = {}) => {
 	const formId = ref();
 	const formConfig = ref();
 	const { routeBackTab } = useRouteBackTab();
-	const getPageJson = async (formCode) => {
+	const pageCode = ref(options.pageCode || "");
+	const getPageJson = async (_pageCode) => {
 		let json = cloneDeep(defaultPageJson);
-		formCode = formCode || options.formCode || getLocat().formCode;
-		if (formCode) {
+		pageCode.value = _pageCode || options.pageCode || "";
+		console.log(pageCode.value);
+		if (pageCode.value) {
 			var _vfdRef$value;
 			(_vfdRef$value = vfdRef.value) === null || _vfdRef$value === void 0 || _vfdRef$value.setLoading(true);
 			try {
-				const cache = await getCachedPageJson(formCode, useDataQuery);
+				const cache = await getCachedPageJson(pageCode.value, useDataQuery);
 				json = cloneDeep(cache.json);
 				formId.value = cache.formId;
 			} finally {
@@ -60,7 +61,7 @@ var useLowcode = (options = {}) => {
 		vfdRef.value.setPageJson(json);
 		return json;
 	};
-	const getComponentJson = async (..._args) => getPageJson(options.formCode);
+	const getComponentJson = async (..._args) => getPageJson(options.pageCode);
 	const getFieldList = async (entityCode) => {
 		isLoading.value = true;
 		const p = {
@@ -91,14 +92,13 @@ var useLowcode = (options = {}) => {
 		routeBackTab(reloadStatus, cb);
 	};
 	const saveJsonApi = async (json) => {
-		const { formCode } = getLocat();
 		const params = {
-			formCode,
+			pageCode: pageCode.value,
 			formId: formId.value,
 			frontendDefinition: JSON.stringify(json)
 		};
 		await http.post(`/api/tmgc2-mgt/formDefinition/formDefinitionV2/save`, params);
-		if (formCode) pageJsonCache.set(formCode, {
+		if (pageCode.value) pageJsonCache.set(pageCode.value, {
 			formId: formId.value,
 			json: normalizePageJson(cloneDeep(json))
 		});

package/core/src/hooks/useRemoteData.js

@@ -1,7 +1,7 @@
 import { usePagination } from "./usePagination.js";
 import { computed, ref, watch } from "vue";
 import { useExecFunction } from "tmgc2-share";
-import { debounce } from "lodash-es";
+import { debounce, isArray } from "lodash-es";
 //#region ../core/src/hooks/useRemoteData.ts
 function useRemoteData({ widget, onLoaded, formConfig }) {
 	var _widget$dataSource;
@@ -68,8 +68,9 @@ function useRemoteData({ widget, onLoaded, formConfig }) {
 				pagination.value.total = result.total || 0;
 				pagination.value.totalPage = result.totalPage || 0;
 			}
-			data.value = result.list;
-			onLoaded === null || onLoaded === void 0 || onLoaded(result);
+			if (isArray(result)) data.value = result;
+			else data.value = result.list;
+			onLoaded === null || onLoaded === void 0 || onLoaded(data.value);
 		} catch (err) {
 			console.error("remote data load error:", err);
 		} finally {

package/core/src/hooks/useSelect.js

@@ -12,18 +12,9 @@ function findInArray(arrayObject, element) {
 }
 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] } : {
-			...data,
-			list: [...unref(apiResult).list, ...data.list]
-		};
-	};
-	const { loadData, loadMore, refresh, data, pager, loading } = useRemoteData({
+	const { loadData, loadMore, refresh, data, pagination, loading } = useRemoteData({
 		widget,
 		designState,
-		onLoaded,
 		formConfig
 	});
 	const mapping = computed(() => {
@@ -57,7 +48,6 @@ function useSelect({ widget, designState, fieldModel, formConfig }) {
 		keyword.value.val = _keyword;
 	};
 	const selectOps = computed(() => {
-		var _apiResult$value;
 		const showSearch = true;
 		const useServer = widget.props.showSearch;
 		return {
@@ -68,7 +58,7 @@ function useSelect({ widget, designState, fieldModel, formConfig }) {
 			onSearch: remoteQuery,
 			filterOption: !useServer && filterOption,
 			listHeight: 240,
-			options: cloneDeep(((_apiResult$value = apiResult.value) === null || _apiResult$value === void 0 ? void 0 : _apiResult$value.list) || [])
+			options: cloneDeep(data.value) || []
 		};
 	});
 	const getOptionItems = () => {
@@ -106,6 +96,7 @@ function useSelect({ widget, designState, fieldModel, formConfig }) {
 	};
 	return {
 		selectDefineExpose: {
+			loadData,
 			loadOptions: loadData,
 			initOptionItems: loadData,
 			getSelectedItem,
@@ -128,7 +119,7 @@ function useSelect({ widget, designState, fieldModel, formConfig }) {
 		optionLabel,
 		filterOption,
 		keyword,
-		pager,
+		pager: pagination,
 		loading,
 		selectOps,
 		initOptionItems: loadData,

package/core/src/lang/en-US.js

@@ -45,6 +45,7 @@ var en_US_default = {
 			popover: "Popover",
 			"custom-render": "Custom Render",
 			space: "Space",
+			flex: "Flex",
 			image: "Image",
 			cell: "Cell",
 			input: "Input",
@@ -209,6 +210,7 @@ var en_US_default = {
 			alignEnd: "End",
 			alignCenter: "Center",
 			alignBaseline: "Baseline",
+			alignStretch: "Stretch",
 			wrap: "Wrap",
 			fill: "Fill",
 			defaultExpand: "Default Expand",
@@ -231,6 +233,7 @@ var en_US_default = {
 			buttonListConfig: "Button Group Config",
 			buttonPosition: "Position",
 			autoWidth: "Auto Width",
+			autoHeight: "Auto Height",
 			dataSoureEdit: "dataSoure Edit",
 			fixed: "Fixed Position",
 			fixedRight: "Fixed Right",
@@ -344,9 +347,12 @@ var en_US_default = {
 			gridJustify: "Horizontal Align",
 			justifyStart: "Start",
 			justifyEnd: "End",
+			justifyFlexStart: "Flex Start",
+			justifyFlexEnd: "Flex End",
 			justifyCenter: "Center",
 			justifySpaceAround: "Space Around",
 			justifySpaceBetween: "Space Between",
+			justifySpaceEvenly: "Space Evenly",
 			gridAlign: "Vertical Align",
 			alignTop: "Top",
 			alignCenter: "Center",
@@ -426,6 +432,14 @@ var en_US_default = {
 			leftAlign: "Left",
 			centerAlign: "Center",
 			rightAlign: "Right",
+			rowReverse: "Row Reverse",
+			columnReverse: "Column Reverse",
+			flexHeightMode: "Height Mode",
+			inheritHeight: "Inherit",
+			fixedHeight: "Fixed",
+			flexHeight: "Fixed Height",
+			componentSort: "Component Sort",
+			noSortableComponents: "No sortable components",
 			formCss: "Form CSS",
 			addCss: "Edit",
 			customClass: "Custom Class",
@@ -452,6 +466,7 @@ var en_US_default = {
 			drawDirection: "Direction",
 			tableWidth: "Width(px/%)",
 			tableHeight: "Height(px/%)",
+			tableHeightMode: "Height Mode",
 			showCheckBox: "Show CheckBox",
 			showColumnManager: "Column Manager",
 			showIndex: "Show Row Number",
@@ -611,8 +626,15 @@ var en_US_default = {
 			justifyContent: "Justify Content",
 			alignItems: "Align Items",
 			flexWrap: "Flex Wrap",
+			flexBlockConfig: "Block Config",
 			flexGrow: "Flex Grow",
 			flexShrink: "Flex Shrink",
+			flexItemWidthMode: "Item Width",
+			flexItemWidth: "Fixed Width",
+			fixedWidth: "Fixed",
+			fullWidth: "Full",
+			flexItemWidthPlaceholder: "e.g. 240px, 50%, calc(50% - 8px)",
+			flexItemHeightPlaceholder: "e.g. 240px, 50%, calc(100% - 8px)",
 			gap: "Gap",
 			positionOffset: "Position Offset",
 			top: "Top",