@simitgroup/simpleapp-generator 2.0.3-h-alpha → 2.0.3-i-alpha

package/ReleaseNote.md

@@ -1,3 +1,8 @@
+[2.0.3i-alpha]
+1. Add uiSchema for custom field
+2. Remove unused lang template files (cn.ts._eta, en.ts.eta)
+3. Migrate getValidateService import to @simtrain/shared
+
 [2.0.3h-alpha]
 1. Split monolithic simpleapp-event plugin into focused plugins
 

package/dist/buildinschemas/customfield.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"customfield.d.ts","sourceRoot":"","sources":["../../src/buildinschemas/customfield.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,UAAU,EAAE,MAAM,SAAS,CAAC;AAEjE,eAAO,MAAM,WAAW,EAAE,UA6CzB,CAAC"}
+{"version":3,"file":"customfield.d.ts","sourceRoot":"","sources":["../../src/buildinschemas/customfield.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,UAAU,EAAE,MAAM,SAAS,CAAC;AAEjE,eAAO,MAAM,WAAW,EAAE,UAiDzB,CAAC"}

package/dist/buildinschemas/customfield.js

@@ -32,6 +32,10 @@ exports.customfield = {
                 jsonSchema: {
                     type: 'object',
                     properties: {}
+                },
+                uiSchema: {
+                    type: 'object',
+                    properties: {}
                 }
             }
         },

package/dist/buildinschemas/customfield.js.map

@@ -1 +1 @@
-{"version":3,"file":"customfield.js","sourceRoot":"","sources":["../../src/buildinschemas/customfield.ts"],"names":[],"mappings":";;;AAAA,kCAAiE;AAEpD,QAAA,WAAW,GAAe;IACrC,IAAI,EAAE,QAAQ;IACd,oBAAoB,EAAE;QACpB,YAAY,EAAE,aAAa;QAC3B,YAAY,EAAE,aAAa;QAC3B,aAAa,EAAE,oBAAa,CAAC,MAAM;QACnC,SAAS,EAAE,gBAAgB;QAC3B,aAAa,EAAE,gBAAgB;QAC/B,QAAQ,EAAE,UAAU;QACpB,YAAY,EAAE,aAAa;KAC5B;IACD,UAAU,EAAE;QACV,GAAG,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QACvB,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC3B,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC7B,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC7B,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE;QACzC,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE;QACtC,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE;QACzC,cAAc,EAAE;YACd,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,CAAC;SACb;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,UAAU,EAAE;oBACV,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,EAAE;iBACf;aACF;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE;wBACL,IAAI,EAAE,QAAQ;qBACf;iBACF;aACF;SACF;KACF;CACF,CAAC"}
+{"version":3,"file":"customfield.js","sourceRoot":"","sources":["../../src/buildinschemas/customfield.ts"],"names":[],"mappings":";;;AAAA,kCAAiE;AAEpD,QAAA,WAAW,GAAe;IACrC,IAAI,EAAE,QAAQ;IACd,oBAAoB,EAAE;QACpB,YAAY,EAAE,aAAa;QAC3B,YAAY,EAAE,aAAa;QAC3B,aAAa,EAAE,oBAAa,CAAC,MAAM;QACnC,SAAS,EAAE,gBAAgB;QAC3B,aAAa,EAAE,gBAAgB;QAC/B,QAAQ,EAAE,UAAU;QACpB,YAAY,EAAE,aAAa;KAC5B;IACD,UAAU,EAAE;QACV,GAAG,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QACvB,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC3B,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC7B,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC7B,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE;QACzC,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE;QACtC,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE;QACzC,cAAc,EAAE;YACd,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,CAAC;SACb;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,UAAU,EAAE;oBACV,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,EAAE;iBACf;gBACD,QAAQ,EAAE;oBACR,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,EAAE;iBACf;aACF;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE;wBACL,IAAI,EAAE,QAAQ;qBACf;iBACF;aACF;SACF;KACF;CACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simitgroup/simpleapp-generator",
-  "version": "2.0.3h-alpha",
+  "version": "2.0.3i-alpha",
   "description": "frontend nuxtjs and backend nests code generator using jsonschema.",
   "main": "dist/index.js",
   "scripts": {

package/src/buildinschemas/customfield.ts

@@ -30,6 +30,10 @@ export const customfield: SchemaType = {
         jsonSchema: {
           type: 'object',
           properties: {}
+        },
+        uiSchema: {
+          type: 'object',
+          properties: {}
         }
       }
     },

package/templates/nuxt/components/simpleApp/SimpleAppCalendarInput.vue.eta

@@ -14,6 +14,7 @@
     v-bind="<CalendarProps>componentProps"
     :select-other-months="true"
     pt:pcInputText:root="w-full"
+    class="w-full"
     @update:model-value="updateDateTime"
   />
 </template>
@@ -37,14 +38,10 @@ const modelValue = defineModel<string>({ required: true });
 const datetimevalue = ref<Date>();
 
 const refreshFromParent = () => {
-  if (modelValue.value === undefined || modelValue.value == "")
-    datetimevalue.value = undefined;
+  if (modelValue.value === undefined || modelValue.value == "") datetimevalue.value = undefined;
   else if (props.type == "time")
-    datetimevalue.value = stringToDate(
-      "2000-01-01 " + (modelValue.value ?? "00:00:00"),
-    );
-  else if (props.type == "date")
-    datetimevalue.value = stringToDate(modelValue.value + "T00:00:00");
+    datetimevalue.value = stringToDate("2000-01-01 " + (modelValue.value ?? "00:00:00"));
+  else if (props.type == "date") datetimevalue.value = stringToDate(modelValue.value + "T00:00:00");
   else datetimevalue.value = stringToDate(modelValue.value);
 };
 

package/templates/nuxt/components/simpleApp/SimpleAppForm.vue.eta

@@ -1,12 +1,18 @@
 <template>
-  <form class="simpleapp-form" @submit.prevent="true">
-    <slot name="default" :data="document.getData()" :getField="getField"></slot>
+  <form
+    class="simpleapp-form"
+    @submit.prevent="true"
+  >
+    <slot
+      name="default"
+      :data="document.getData()"
+      :getField="getField"
+    ></slot>
     <slot name="customField">
-      <CustomFieldFormSection
+      <SimpleAppCustomFieldForm
         v-if="document.schema.properties.more"
-        :customFieldJsonSchema="document.schema.properties.more"
-        :data="document.getData().more"
-        :handleGetField="getField"
+        :document="document"
+        :readonly="isreadonly"
       />
     </slot>
   </form>
@@ -18,12 +24,12 @@
  * last change 2023-10-28
  * Author: Ks Tan
  */
+import type { JSONSchema7 } from "json-schema";
 import jsonpath from "jsonpath";
+import _ from "lodash";
 import { SimpleAppClient } from "~/simpleapp/generate/clients/SimpleAppClient";
-import type { JSONSchema7, JSONSchema7Definition } from "json-schema";
 import * as alldefaults from "~/simpleapp/generate/defaults";
-import _, { upperFirst } from "lodash";
-import CustomFieldFormSection from "~/simpleapp/generate/features/customField/components/CustomFieldFormSection.vue";
+
 const props = defineProps<{
   document: SimpleAppClient<any, any>;
   readonly?: boolean;
@@ -32,9 +38,7 @@ if (!props.document) {
   throw "undefine SimpleAppForm property 'document'";
 }
 
-const isreadonly = computed(() =>
-  props.readonly ? props.readonly : props.document.isReadOnly(),
-);
+const isreadonly = computed(() => (props.readonly ? props.readonly : props.document.isReadOnly()));
 
 // const obj = {schema:props.schema,data: props.schema}
 const getField = (path: string) => {
@@ -121,10 +125,7 @@ const getInstancePath = (schema: any, path: string) => {
   // let paths = path.replace('#/','').split('/')
   // return '/'+paths[1]
 };
-const getPathObject = (
-  schema: JSONSchema7,
-  path: string,
-): JSONSchema7 | undefined => {
+const getPathObject = (schema: JSONSchema7, path: string): JSONSchema7 | undefined => {
   // console.log("path",path)
   if (!path || !path.includes("#/properties")) {
     console.error("unknown path");

package/templates/nuxt/components/simpleApp/SimpleAppJsonSchemaForm.vue.eta

@@ -1,161 +1,163 @@
 <template>
-    <form class="simpleapp-form" @submit.prevent="true">
-        <slot name="header"><h3 class="flex flex-col">{{ title }}</h3></slot>
-        <slot  name="default" :getField="getField" :validate="validate"></slot>
-    </form>
+  <form
+    class="simpleapp-form"
+    @submit.prevent="true"
+  >
+    <slot name="header"
+      ><h3 class="flex flex-col">{{ title }}</h3></slot
+    >
+    <slot
+      name="default"
+      :getField="getField"
+      :validate="validate"
+    ></slot>
+  </form>
 </template>
-<script setup lang="ts" >
+<script setup lang="ts">
 /**
  * This file was automatically generated by simpleapp generator. Every
  * MODIFICATION OVERRIDE BY GENERATEOR
  * last change 2023-10-28
  * Author: Ks Tan
  */
-import type { JSONSchema7,JSONSchema7Definition } from 'json-schema';
-import { getValidateService } from "~/simpleapp/generate/sharelibs/validate";
-import _ from 'lodash'
+import { getValidateService } from "@simtrain/shared";
+import type { JSONSchema7, JSONSchema7Definition } from "json-schema";
+import _ from "lodash";
 
-    const props = defineProps<{
-        title?:string,
-        schema:JSONSchema7,
-        data:any,
-        // document: SimpleAppClient<any,any>
-        readonly?:boolean
-    }>()
-    if(!props.schema){
-        throw "undefine jsonschema property 'schema'"
-    }
-    const formerrors = ref<any>({})
-    const getField = (path:string)=>{
-    const schema = props.schema
-    const fieldsetting = getPathObject(schema,path)
-    
-    return {
-            path: path,
-            key: _.last(path.split('/')),
-            instancepath: getInstancePath(schema,path),
-            fieldsetting: fieldsetting,            
-            isrequired: getIsRequired(schema,path),
-            errors: formerrors,
-            readonly: props.readonly
-        } //as SimpleAppFieldSetting
-    }
+const props = defineProps<{
+  title?: string;
+  schema: JSONSchema7;
+  data: any;
+  // document: SimpleAppClient<any,any>
+  readonly?: boolean;
+}>();
+if (!props.schema) {
+  throw "undefine jsonschema property 'schema'";
+}
+const formerrors = ref<any>({});
+const getField = (path: string) => {
+  const schema = props.schema;
+  const fieldsetting = getPathObject(schema, path);
 
-    
-    const getIsRequired=(schema:any,path:string)=>{
-        if(!path){
-            console.error('unknown path')
-            return 'xx'
-        }
+  return {
+    path: path,
+    key: _.last(path.split("/")),
+    instancepath: getInstancePath(schema, path),
+    fieldsetting: fieldsetting,
+    isrequired: getIsRequired(schema, path),
+    errors: formerrors,
+    readonly: props.readonly,
+  }; //as SimpleAppFieldSetting
+};
 
-        try{
-            let paths = path.replace('#/','').split('/')
-            const fieldname = paths[paths.length-1]
-            paths = paths.slice(0, -2);    
-            let tmp = schema
-            for(let i=0;i<paths.length;i++){
-                tmp = tmp[paths[i]]
-                
-            }
-            if(Array.isArray(tmp['required'])   ) {
-                    const arr:string[] = tmp['required']
-                    return arr.includes (fieldname)
-                }else{
-                    return false
-                }
+const getIsRequired = (schema: any, path: string) => {
+  if (!path) {
+    console.error("unknown path");
+    return "xx";
+  }
 
-            // console.log("get instance path",instancepath)
-            
-            // return tmp
-        }catch(err:any){
-            console.error(err.message)
-        }
+  try {
+    let paths = path.replace("#/", "").split("/");
+    const fieldname = paths[paths.length - 1];
+    paths = paths.slice(0, -2);
+    let tmp = schema;
+    for (let i = 0; i < paths.length; i++) {
+      tmp = tmp[paths[i]];
     }
-   const getInstancePath=(schema:any,path:string)=>{
-    if(!path){
-        console.error('unknown path')
-        return 'yy'
+    if (Array.isArray(tmp["required"])) {
+      const arr: string[] = tmp["required"];
+      return arr.includes(fieldname);
+    } else {
+      return false;
     }
-    try{
-        let paths = path.replace('#/','').split('/')    
-        let tmp = schema
-        let instancepath=''
-        for(let i=0;i<paths.length;i++){
-            tmp = tmp[paths[i]]
-            if(tmp['type'] && paths[i] !='items'){
-                instancepath=instancepath+'/'+paths[i]
-            }
-        }
 
-        // console.log("get instance path",instancepath)
-        return instancepath
-        // return tmp
-    }catch(err:any){
-        console.error(err.message)
+    // console.log("get instance path",instancepath)
+
+    // return tmp
+  } catch (err: any) {
+    console.error(err.message);
+  }
+};
+const getInstancePath = (schema: any, path: string) => {
+  if (!path) {
+    console.error("unknown path");
+    return "yy";
+  }
+  try {
+    let paths = path.replace("#/", "").split("/");
+    let tmp = schema;
+    let instancepath = "";
+    for (let i = 0; i < paths.length; i++) {
+      tmp = tmp[paths[i]];
+      if (tmp["type"] && paths[i] != "items") {
+        instancepath = instancepath + "/" + paths[i];
+      }
     }
 
+    // console.log("get instance path",instancepath)
+    return instancepath;
+    // return tmp
+  } catch (err: any) {
+    console.error(err.message);
+  }
 
-    // let paths = path.replace('#/','').split('/')    
-    // return '/'+paths[1]
-   }
-   const getPathObject=(schema:JSONSchema7,path:string):JSONSchema7|undefined=>{
-    // console.log("path",path)
-    if(!path){
-        console.error('unknown path')
-        return undefined
+  // let paths = path.replace('#/','').split('/')
+  // return '/'+paths[1]
+};
+const getPathObject = (schema: JSONSchema7, path: string): JSONSchema7 | undefined => {
+  // console.log("path",path)
+  if (!path) {
+    console.error("unknown path");
+    return undefined;
+  }
+  try {
+    let paths: string[] = path.replace("#/", "").split("/");
+    let tmp: JSONSchema7Definition = schema;
+    // console.log(path)
+    for (let i = 0; i < paths.length; i++) {
+      //silly code, but it seems require to avoid typescript complaint.
+      //ultimately it is to obtain result as "tmp=tmp[path[i]]"
+      const key1 = paths[i] as keyof JSONSchema7;
+      let jsonkey: keyof JSONSchema7 = key1;
+      let obj: JSONSchema7 = {} as JSONSchema7;
+      Object.assign(obj, tmp[jsonkey]);
+      tmp = { ...obj };
     }
-    try{
-        let paths:string[] = path.replace('#/','').split('/')    
-        let tmp :JSONSchema7Definition= schema
-        // console.log(path)
-        for(let i=0;i<paths.length;i++){
-            
-            //silly code, but it seems require to avoid typescript complaint.
-            //ultimately it is to obtain result as "tmp=tmp[path[i]]"
-            const key1 = paths[i] as keyof JSONSchema7
-            let jsonkey: keyof JSONSchema7 = key1
-            let obj:JSONSchema7 = {} as JSONSchema7
-            Object.assign(obj,tmp[jsonkey])
-            tmp = {...obj}            
-        }
-        // console.log('final ',path,tmp)
-        return tmp
-    }catch(err:any){
-        console.error(err.message)
-        
-    }    
-   }
+    // console.log('final ',path,tmp)
+    return tmp;
+  } catch (err: any) {
+    console.error(err.message);
+  }
+};
 
+const validate = (callback: Function) => {
+  const ajv = getValidateService();
 
-   const validate=(callback:Function) => {
-    const ajv = getValidateService();
-    
-    // this.errorlist.value = {};
-    // this.hook('pre-validation', this.data.value);
-    const validate = ajv.compile(props.schema);
-    // console.log("validate data",props.data)
-    const valid = validate(props.data);
-    if (!valid) {
-      const errors = validate.errors;
-      const tmp: { [key: string]: any } = {};
-      if (errors) {
-        for (let i = 0; i < errors?.length; i++) {
-          const key: string = errors[i]['instancePath'];
-          if (!tmp[key]) {
-            tmp[key] = [];
-          }
-          tmp[key].push(errors[i]);
+  // this.errorlist.value = {};
+  // this.hook('pre-validation', this.data.value);
+  const validate = ajv.compile(props.schema);
+  // console.log("validate data",props.data)
+  const valid = validate(props.data);
+  if (!valid) {
+    const errors = validate.errors;
+    const tmp: { [key: string]: any } = {};
+    if (errors) {
+      for (let i = 0; i < errors?.length; i++) {
+        const key: string = errors[i]["instancePath"];
+        if (!tmp[key]) {
+          tmp[key] = [];
         }
+        tmp[key].push(errors[i]);
       }
-      formerrors.value = tmp;
-      console.error(formerrors.value );
-
-      // return validate.errors;
-      callback(formerrors.value )
-    } else {
-        //   this.hook('post-validation', this.data.value);
-        callback(false)
     }
-  }
+    formerrors.value = tmp;
+    console.error(formerrors.value);
 
-</script>
+    // return validate.errors;
+    callback(formerrors.value);
+  } else {
+    //   this.hook('post-validation', this.data.value);
+    callback(false);
+  }
+};
+</script>

package/templates/nuxt/components/simpleApp/SimpleAppRemoteSelect.vue.eta

@@ -36,28 +36,25 @@ function handleChange(newValue: any) {
   const actions = remoteConfig?.onChangeAction ?? [];
   if (!Array.isArray(actions) || actions.length === 0) return;
 
-  const modelObject = props.setting.modelObject ?? {};
-  const selectedOption = options.value.find(
-    (opt: any) => opt.value === newValue,
-  );
+  const selectedOption = options.value.find((opt: any) => opt.value === newValue);
 
   for (const action of actions) {
     if (!action.updateField) continue;
 
     let updateVal: any = action.updateValue;
 
-    if (
-      typeof updateVal === "string" &&
-      updateVal.startsWith("{") &&
-      updateVal.endsWith("}")
-    ) {
+    if (typeof updateVal === "string" && updateVal.startsWith("{") && updateVal.endsWith("}")) {
       // ✅ Replace {path.to.value} using selectedOption
       const path = updateVal.slice(1, -1).trim();
       const resolvedVal = resolvePath(selectedOption ?? {}, path);
       updateVal = resolvedVal !== undefined ? resolvedVal : "";
     }
 
-    setPath(modelObject, action.updateField, updateVal);
+    if (props.setting.handleFieldChange) {
+      props.setting.handleFieldChange(action.updateField, updateVal);
+    } else {
+      setPath(props.setting.modelObject ?? {}, action.updateField, updateVal);
+    }
   }
 }
 

package/templates/nuxt/simpleapp/generate/clients/SimpleAppClient.ts.eta

@@ -4,23 +4,23 @@
  * last change 2024-03-08
  * Author: Ks Tan
  */
-import { ref } from "vue";
-import type { Ref } from "vue";
+import type { VerticalLayout } from "@jsonforms/core";
+import { getValidateService } from "@simtrain/shared";
 import type { AxiosResponse } from "axios";
+import { cloneDeep, isEmpty } from "lodash";
+import type { Ref } from "vue";
+import { ref, WatchHandle } from "vue";
 import {
-  SearchBody,
-  TextSearchBody,
+  DynamicObject,
+  FormActions,
   NotificationStatus,
   SchemaType,
-  FormActions,
-  DynamicObject,
+  SearchBody,
+  TextSearchBody,
 } from "~/types";
-import { getValidateService } from "~/simpleapp/generate/sharelibs/validate";
-import { WatchHandle } from "vue";
+import { CustomFieldDataModeEnum } from "../features/customField/enums/common";
 import { CustomFieldService } from "../features/customField/services/CustomFieldService";
 import { CustomFieldDataMode } from "../features/customField/types/common";
-import { CustomFieldDataModeEnum } from "../features/customField/enums/common";
-import { cloneDeep, isEmpty } from "lodash";
 
 // import { useToast, } from 'primevue/usetoast';
 // import type {  ToastMessageOptions } from 'primevue/toast';
@@ -58,6 +58,7 @@ export class SimpleAppClient<
   // FLAG::CUSTOM_FIELD
   protected _customFieldWatch: WatchHandle | null = null;
   private _customFieldService = new CustomFieldService();
+  public customFieldUiSchema: VerticalLayout | undefined = undefined;
 
   constructor(apiobj: TApi, doctype: string, docname: string) {
     this.docapi = apiobj;
@@ -67,10 +68,8 @@ export class SimpleAppClient<
   }
   isReady = () => this.ready;
   getDocType = () => this.doctype;
-  getDocName = (capFirst: boolean = false) =>
-    capFirst ? upperFirst(this.docname) : this.docname;
-  getResourceName = () =>
-    upperFirst(this.schema["x-simpleapp-config"]?.resourceName ?? "");
+  getDocName = (capFirst: boolean = false) => (capFirst ? upperFirst(this.docname) : this.docname);
+  getResourceName = () => upperFirst(this.schema["x-simpleapp-config"]?.resourceName ?? "");
   setNew = () => {};
   isNew = () => this.data.value?.created == "";
   setSchema = (schema: SchemaType) => (this.schema = schema);
@@ -115,9 +114,7 @@ export class SimpleAppClient<
       const attributeName = keys[keys.length - 1];
       if (allowedPatchAttributes.includes(attributeName)) {
         if (attributeName === "required" && Array.isArray(value)) {
-          target.required = Array.from(
-            new Set([...(target.required ?? []), ...value]),
-          );
+          target.required = Array.from(new Set([...(target.required ?? []), ...value]));
         } else {
           target[attributeName] = value;
         }
@@ -132,16 +129,13 @@ export class SimpleAppClient<
   prepareCustomFieldJsonSchema() {
     this.prepareSchemaPatches();
 
-    const resp = this._customFieldService.prepareCustomFieldJsonSchema(
-      this.docname,
-    );
-    this.schema.properties.more = resp;
+    const { jsonSchema, uiSchema } = this._customFieldService.prepareCustomFieldJsonSchema(this.docname);
+    this.schema.properties.more = jsonSchema;
+    this.customFieldUiSchema = uiSchema;
   }
 
-  prepareCustomFieldData<T extends DynamicObject>(
-    mode: CustomFieldDataMode,
-    data: T,
-  ) {
+  prepareCustomFieldData<T extends DynamicObject>(mode: CustomFieldDataMode, data: T) {
+    if (!data || typeof data !== "object") return data;
     const customFieldData = this._customFieldService.prepareCustomFieldData(
       this.docname,
       mode,

package/templates/nuxt/simpleapp/generate/features/customField/services/CustomFieldService.ts.eta

@@ -1,83 +1,108 @@
+import { type ControlElement, type GroupLayout, type UISchemaElement, type VerticalLayout } from "@jsonforms/core";
 import _ from "lodash";
+import { DynamicObject, SimpleAppJSONSchema7Definition } from "~/types";
+import { CustomFieldDataModeEnum } from "../enums/common";
 import {
   CustomFieldDataMode,
   CustomFieldMoreSchema,
   CustomFieldMoreSchemaGroup,
 } from "../types/common";
-import { CustomFieldDataModeEnum } from "../enums/common";
-import { DynamicObject, SimpleAppJSONSchema7Definition } from "~/types";
 
 export class CustomFieldService {
   // =============================== Prepare Schema Function ===============================
-  prepareCustomFieldJsonSchema(collectionName: string) {
-    const customFieldFromDB = this.findCustomFieldSchemaFromDB(collectionName);
-    const customFieldFromMiniApp =
-      this.findCustomFieldSchemaFromMiniApp(collectionName);
-
-    if (customFieldFromDB && !_.isEmpty(customFieldFromDB)) {
-    }
+  prepareCustomFieldJsonSchema(collectionName: string): { jsonSchema: CustomFieldMoreSchema; uiSchema: VerticalLayout | undefined } {
+    const fromDB = this.findCustomFieldSchemaFromDB(collectionName);
+    const fromMiniApp = this.findCustomFieldSchemaFromMiniApp(collectionName);
 
-    const schema: CustomFieldMoreSchema = {
+    const jsonSchema: CustomFieldMoreSchema = {
       type: "object",
       properties: {
-        ...customFieldFromDB,
-        ...customFieldFromMiniApp,
+        ...fromDB.jsonSchema,
+        ...fromMiniApp.jsonSchema,
       },
     };
 
-    return schema;
+    const uiSchema = this.buildMoreUiSchema({ ...fromDB.uiSchema, ...fromMiniApp.uiSchema });
+
+    return { jsonSchema, uiSchema };
   }
 
   prepareSchemaPatches(collectionName: string) {
     return this.findSchemaPatchFromMiniApp(collectionName);
   }
 
-  private findCustomFieldSchemaFromDB(collectionName: string) {
+  private findCustomFieldSchemaFromDB(collectionName: string): { jsonSchema: CustomFieldMoreSchemaGroup; uiSchema: Record<string, VerticalLayout> } {
     const { $customFieldStore } = useNuxtApp();
     if (!$customFieldStore.data || _.isEmpty($customFieldStore.data)) {
-      return {};
+      return { jsonSchema: {}, uiSchema: {} };
     }
 
     const customField = $customFieldStore.findByCollectionName(collectionName);
     if (!customField) {
-      return {};
+      return { jsonSchema: {}, uiSchema: {} };
     }
 
-    if (
-      !customField?.form?.jsonSchema ||
-      _.isEmpty(customField?.form?.jsonSchema)
-    ) {
-      return {};
+    if (!customField?.form?.jsonSchema || _.isEmpty(customField?.form?.jsonSchema)) {
+      return { jsonSchema: {}, uiSchema: {} };
     }
 
-    const schema: CustomFieldMoreSchemaGroup = {
-      default: {
-        title: "Custom Field",
-        ...customField.form.jsonSchema,
+    return {
+      jsonSchema: {
+        default: {
+          title: "Custom Field",
+          ...customField.form.jsonSchema,
+        },
       },
+      uiSchema: customField.form.uiSchema ? { default: customField.form.uiSchema as VerticalLayout } : {},
     };
-
-    return schema;
   }
 
-  private findCustomFieldSchemaFromMiniApp(collectionName: string) {
-    const schema: CustomFieldMoreSchemaGroup = {};
+  private findCustomFieldSchemaFromMiniApp(collectionName: string): { jsonSchema: CustomFieldMoreSchemaGroup; uiSchema: Record<string, VerticalLayout> } {
+    const jsonSchema: CustomFieldMoreSchemaGroup = {};
+    const uiSchema: Record<string, VerticalLayout> = {};
 
     const { $miniAppStore } = useNuxtApp();
 
     const miniAppForms = $miniAppStore.getForm(collectionName);
     if (!miniAppForms || miniAppForms.length <= 0) {
-      return schema;
+      return { jsonSchema, uiSchema };
     }
 
     for (let i = 0; i < miniAppForms.length; i++) {
-      const miniAppItem = miniAppForms[i];
-      const { miniAppCode, jsonSchema } = miniAppItem;
+      const miniAppItem = miniAppForms[i] as any;
+      const { miniAppCode, jsonSchema: itemJsonSchema, uiSchema: itemUiSchema } = miniAppItem;
+
+      jsonSchema[miniAppCode] = itemJsonSchema as SimpleAppJSONSchema7Definition;
+      if (itemUiSchema) uiSchema[miniAppCode] = itemUiSchema as VerticalLayout;
+    }
+
+    return { jsonSchema, uiSchema };
+  }
 
-      schema[miniAppCode] = jsonSchema as SimpleAppJSONSchema7Definition;
+  private buildMoreUiSchema(groupUiSchemas: Record<string, VerticalLayout>): VerticalLayout | undefined {
+    const elements: UISchemaElement[] = [];
+    for (const [groupKey, uischema] of Object.entries(groupUiSchemas)) {
+      if (!uischema?.elements?.length) continue;
+      const group: GroupLayout = {
+        type: "Group",
+        label: groupKey === "default" ? "Custom Field" : groupKey,
+        options: { cols: "grid-cols-1" },
+        elements: [this.prefixElement(uischema, groupKey)],
+      };
+      elements.push(group);
     }
+    return elements.length ? { type: "VerticalLayout", elements } : undefined;
+  }
 
-    return schema;
+  private prefixElement(elem: UISchemaElement, groupKey: string): UISchemaElement {
+    if (elem.type === "Control") {
+      const ctrl = elem as ControlElement;
+      return { ...ctrl, scope: ctrl.scope.replace("#/properties/", `#/properties/${groupKey}/properties/`) };
+    }
+    if ("elements" in elem && Array.isArray(elem.elements)) {
+      return { ...elem, elements: (elem as any).elements.map((e: UISchemaElement) => this.prefixElement(e, groupKey)) } as UISchemaElement;
+    }
+    return elem;
   }
 
   private findSchemaPatchFromMiniApp(collectionName: string) {
@@ -107,11 +132,7 @@ export class CustomFieldService {
     customSchema: CustomFieldMoreSchema | undefined,
     resourceData: T | undefined,
   ): T | undefined {
-    if (
-      !customSchema ||
-      !customSchema?.properties ||
-      _.isEmpty(customSchema.properties)
-    ) {
+    if (!customSchema || !customSchema?.properties || _.isEmpty(customSchema.properties)) {
       return resourceData;
     }
 
@@ -125,10 +146,7 @@ export class CustomFieldService {
           return this.prepareCustomFieldWithDefaultData<T>(customSchema);
         }
 
-        return this.prepareCustomFieldWithExistingData(
-          customSchema,
-          resourceData,
-        );
+        return this.prepareCustomFieldWithExistingData(customSchema, resourceData);
         break;
     }
   }
@@ -137,9 +155,7 @@ export class CustomFieldService {
     customSchema: CustomFieldMoreSchema,
   ) {
     const data: DynamicObject = {};
-    for (const [groupName, groupItem] of Object.entries(
-      customSchema.properties,
-    )) {
+    for (const [groupName, groupItem] of Object.entries(customSchema.properties)) {
       const defaultData = this.generateDefaultData(groupItem);
 
       data[groupName] = defaultData;
@@ -153,14 +169,9 @@ export class CustomFieldService {
     resourceData: T,
   ) {
     const data: DynamicObject = {};
-    for (const [groupName, groupItem] of Object.entries(
-      customSchema.properties,
-    )) {
+    for (const [groupName, groupItem] of Object.entries(customSchema.properties)) {
       const defaultData = this.generateDefaultData(groupItem);
-      const mergedData = this.mergeWithDefault(
-        defaultData,
-        resourceData?.[groupName],
-      );
+      const mergedData = this.mergeWithDefault(defaultData, resourceData?.[groupName]);
 
       data[groupName] = mergedData;
     }
@@ -193,11 +204,7 @@ export class CustomFieldService {
       const arr = [];
       const itemsCount = minItems > 0 ? 1 : 0;
       for (let i = 0; i < itemsCount; i++) {
-        arr.push(
-          this.generateDefaultData(
-            itemSchema as SimpleAppJSONSchema7Definition,
-          ),
-        );
+        arr.push(this.generateDefaultData(itemSchema as SimpleAppJSONSchema7Definition));
       }
       return arr;
     }
@@ -220,10 +227,7 @@ export class CustomFieldService {
     }
   }
 
-  private mergeWithDefault<T extends DynamicObject>(
-    defaultData: T,
-    collectionData: T | undefined,
-  ) {
+  private mergeWithDefault<T extends DynamicObject>(defaultData: T, collectionData: T | undefined) {
     if (Array.isArray(defaultData)) {
       if (Array.isArray(collectionData)) {
         if (_.isEmpty(collectionData)) {
@@ -242,16 +246,11 @@ export class CustomFieldService {
     } else if (typeof defaultData === "object" && defaultData !== null) {
       const result: any = {};
       for (const key of Object.keys(defaultData)) {
-        result[key] = this.mergeWithDefault(
-          defaultData[key],
-          collectionData?.[key],
-        );
+        result[key] = this.mergeWithDefault(defaultData[key], collectionData?.[key]);
       }
       return result;
     } else {
-      return typeof collectionData !== "undefined"
-        ? collectionData
-        : defaultData;
+      return typeof collectionData !== "undefined" ? collectionData : defaultData;
     }
   }
 }

package/templates/nuxt/lang/cn.ts._eta

@@ -1,15 +0,0 @@
-/**
- * This file was automatically generated by simpleapp generator during initialization. It is changable.
- * --remove-this-line-to-prevent-override--
- * last change 2024-02-22
- * author: Ks Tan
- */
-export default {
-    welcome:'欢迎',
-    welcomeSimpleApp: '你好,欢迎来到 SimpleApp',
-    changeHomePageMsg: '改了这面',
-    category: '类别',
-    /*manually fix from df.ts.eta*/
-}
-
-// or

package/templates/nuxt/lang/en.ts.eta

@@ -1,19 +0,0 @@
-
-export default {
-    //auto generate from lang/default.ts
-    <%let langkeys = Object.keys(it.lang) %>
-    <% for(let l=0; l< langkeys.length; l++){ %>
-    <% let key = langkeys[l] %>
-        "<%=key%>" : <% if (typeof it.lang[key] === 'object') { %><%~ JSON.stringify(it.lang[key], null, 2) %><% } else { %>"<%~ it.lang[key] %>"<% } %>,
-    <%}%>    
-
-
-    //auto generate from schema
-    <% for(let i=0; i< it.allfields.length; i++){ %>
-    <% let f = it.allfields[i] %>
-        <% if(!it.lang[f]){%>        
-            '<%= f %>' : '<%= camelCaseToWords(f) %>',
-        <%}%>
-    <%}%>    
-
-}