@simitgroup/simpleapp-generator 1.2.8 → 1.3.0-alpha

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

@@ -1,193 +1,220 @@
-<template>   
-        <AutoComplete v-model="modelValue"  v-if="!readonly" ref="autocompleteinput"
-               forceSelection optionLabel="label"  
-               @focus="setFocus"              
-               @item-select="pickAutoComplete"
-               @complete="getListFromAutocompleteApi"       
-               :placeholder="t('keyword')"
-               :dropdown="true"
-               :dropdown-icon="buttonClass"               
-               @before-show="beforeShow"
-               @clear = "clear"
-               :dropdown-mode="'current'"
-                :pt="pt"
-                :delay="500"
-               :disabled="readonly"
-               :suggestions="list"                                
-               @blur="onBlurAutocomplete"
-               :inputId="inputId" :path="setting.instancepath"
-               :readonly="readonly"
-                >
-                    <template #header>
-                        <slot name="header">
-                            <div class="flex flex-row font font-bold  dark:text-white">                            
-                                <div class="w w-1/3">{{ t(codefield) ?? t('code') }}</div>
-                                <div class="w w-2/3" >{{ t(labelfield) ?? t('label') }}</div>
-                            </div>
-                        </slot>
-                    </template>
-                    <template #option="{index,option}">
-                        <slot name="option" :index="index" :option="option">
-                            <div class="flex flex-row dark:text-white">                            
-                                <div class="w w-1/3" >{{ option.code }}</div>
-                                <div class="w w-2/3" >{{ option.label }}</div>
-                            </div>
-                        </slot>
-                    </template>
-                <!-- </slot> -->
-            </AutoComplete>
-        <div v-else class="p-3 border rounded-lg border-gray-300 dark:border-blue-900/40 ">
-            <span :readonly="readonly" class="cursor-pointer text-primary-600  dark:text-primary-400 "
-                tabindex="0" @click="openViewer(true)">{{ modelValue && modelValue.label ?  modelValue.label:'-' }}</span>
-        </div>        
+<template>
+  <div v-if="!readonly" class="relative">
+    <div
+      class="absolute h-full top-0 right-10 text-right dark:text-white z-10 align-middle p-3"
+      v-if="modelValue?._id"
+    >
+      <span
+        class="pi pi-times rounded-full bg-slate-500 p-1 cursor-pointer text-xs"
+        @click="clear"
+      ></span>      
+    </div>
+
+    <AutoComplete
+      class="w-full"
+      v-model="modelValue"
+      ref="autocompleteinput"
+      forceSelection
+      optionLabel="label"
+      @focus="setFocus"
+      @item-select="pickAutoComplete"
+      @complete="getListFromAutocompleteApi"
+      :placeholder="placeholdertxt"
+      :dropdown="true"
+      @clear="clear"
+      :dropdown-mode="'current'"
+      :pt="pt"
+      :delay="500"
+      :disabled="readonly"
+      :suggestions="list"
+      @blur="onBlurAutocomplete"
+      :inputId="inputId"
+      :path="setting.instancepath"
+      :readonly="readonly"
+    >
+      <template #header>
+        <slot name="header">
+          <div class="flex flex-row font font-bold dark:text-white">
+            <div class="w w-1/3">{{ t(codefield) ?? t("code") }}</div>
+            <div class="w w-2/3">{{ t(labelfield) ?? t("label") }}</div>
+          </div>
+        </slot>
+      </template>
+      <template #content>
+        <div class="bg-red-300">content</div>
+      </template>
+      <template #option="{ index, option }">
+        <slot name="option" :index="index" :option="option">
+          <div class="flex flex-row dark:text-white">
+            <div class="w w-1/3">{{ option.code }}</div>
+            <div class="w w-2/3">{{ option.label }}</div>
+          </div>
+        </slot>
+      </template>
+      <!-- </slot> -->
+    </AutoComplete>
+  </div>
+  <div
+    v-else
+    class="p-3 border rounded-lg border-gray-300 dark:border-blue-900/40"
+  >
+    <span
+      :readonly="readonly"
+      class="cursor-pointer text-primary-600 dark:text-primary-400"
+      tabindex="0"
+      @click="openViewer(true)"
+      >{{ modelValue && modelValue.label ? modelValue.label : "-" }}</span
+    >
+  </div>
 </template>
 <script setup lang="ts">
-import { isNull } from 'lodash';
-import * as jsonpath from 'jsonpath';
-import {autocompletetype,SchemaConfig,SchemaType} from '~/types'
-const autocompleteinput = ref()
-const {$event} = useNuxtApp()
-const list = ref<any[]>([])
-const props = withDefaults(defineProps<{
-    setting:any    
-    allowAddNew?:boolean
-    showNull?:boolean
-    readonly?:boolean
-    inputId:string
-    pt?:any
-}>(),{
-allowAddNew:true,showNull:true
-})
-
-const path = '$'+props.setting.instancepath
-const modifiedpath = path.replaceAll('/','.')        
-const queryresult = jsonpath.query(props.setting.defaultValue,modifiedpath)[0]
-const remotedoc = getDocument(props.setting.fieldsetting['x-foreignkey'])
-const schema:SchemaType = <SchemaType>remotedoc?.docClass.getSchema()
-    
-const labelfield = schema['x-simpleapp-config'].documentTitle as string
-const codefield  = schema['x-simpleapp-config'].uniqueKey as string
-const docname = props.setting.fieldsetting['x-foreignkey']
-
-const emptyautocomplete = computed(():autocompletetype=> queryresult)
+import { isNull } from "lodash";
+import * as jsonpath from "jsonpath";
+import { AutoCompleteDropdownClickEvent } from "primevue/autocomplete";
+import { autocompletetype, SchemaConfig, SchemaType } from "~/types";
+const autocompleteinput = ref<autocompletetype|undefined>();
+const { $event } = useNuxtApp();
+const list = ref<any[]>([]);
+const props = withDefaults(
+  defineProps<{
+    setting: any;
+    allowAddNew?: boolean;
+    showNull?: boolean;
+    readonly?: boolean;
+    placeholder?:string;
+    hidelabel?:boolean;
+    inputId: string;
+    pt?: any;
+  }>(),
+  {
+    allowAddNew: true,
+    showNull: true,
+  },
+);
 
-const autocompleteitem = ref<autocompletetype>(emptyautocomplete.value)
-const modelValue = defineModel<autocompletetype>({required:true})
-if(modelValue.value && modelValue.value._id){
-    autocompleteitem.value={...modelValue.value}
+const path = "$" + props.setting.instancepath;
+const modifiedpath = path.replaceAll("/", ".");
+const queryresult = jsonpath.query(props.setting.defaultValue, modifiedpath)[0];
+const remotedoc = getDocument(props.setting.fieldsetting["x-foreignkey"]);
+const schema: SchemaType = <SchemaType>remotedoc?.docClass.getSchema();
+const labelfield = schema["x-simpleapp-config"].documentTitle as string;
+const codefield = schema["x-simpleapp-config"].uniqueKey as string;
+const docname = props.setting.fieldsetting["x-foreignkey"];
+const placeholdertxt = computed(()=> props.placeholder ?? t(docname)   )
+const emptyautocomplete = computed((): autocompletetype => queryresult);
+const cancelShowList = ref(false);
+const autocompleteitem = ref<autocompletetype|undefined>(emptyautocomplete.value);
+const modelValue = defineModel<autocompletetype|undefined>({ required: true });
+if (modelValue.value && modelValue.value._id) {
+  autocompleteitem.value = { ...modelValue.value };
 }
 //clear auto complete auto set value = empty
-const clear = ()=>{
-    autocompleteitem.value = emptyautocomplete.value
-    modelValue.value = emptyautocomplete.value
-}
-const buttonClass=computed(()=>modelValue.value?._id ? 'pi pi-link' : 'pi pi-angle-down')
+const clear = () => {
+  autocompleteitem.value = undefined
+  modelValue.value = undefined
+};
 
 //if record picked, click button show record info instead
-const beforeShow = ()=>{    
-    if(modelValue.value?._id ){                
-        openViewer(true)        
-    }
-}
-   
+const openlink = () => {
+  if (modelValue.value?._id) {
+    openViewer(true);
+  }
+};
+
 //recorrect data if lose focus
-const onBlurAutocomplete = ()=>{   
-    if(  autocompleteitem.value === null){
-        autocompleteitem.value = emptyautocomplete.value
-    }
-    if(isNull(modelValue.value )){
-        modelValue.value = autocompleteitem.value
-    }
-    else if(typeof modelValue.value =='object'){
-        
-    }else{
-        modelValue.value = autocompleteitem.value
-    }
-}
+const onBlurAutocomplete = () => {
+  if (autocompleteitem.value === null) {
+    autocompleteitem.value = emptyautocomplete.value;
+  }
+  if (isNull(modelValue.value)) {
+    modelValue.value = autocompleteitem.value;
+  } else if (typeof modelValue.value == "object") {
+  } else {
+    modelValue.value = autocompleteitem.value;
+  }
+};
 
 //obtain remote data
-const getListFromAutocompleteApi =  (event:any)=>{    
- const keyword = event.query??''  
- const targetDocument = props.setting.fieldsetting['x-foreignkey']
- getDocumentApi(targetDocument).autoComplete(keyword).then((res:any)=>{
+const getListFromAutocompleteApi = (event: any) => {
+  const keyword = event.query ?? "";
+  const targetDocument = props.setting.fieldsetting["x-foreignkey"];
+  getDocumentApi(targetDocument)
+    .autoComplete(keyword)
+    .then((res: any) => {
+      list.value = res.data;
 
-   list.value = res.data
-
-   if(props.allowAddNew){
-    list.value = list.value.concat({_id:'new',label:'<'+t('new')+'>'})
-   }
- })
-}
+      if (props.allowAddNew) {
+        list.value = list.value.concat({
+          _id: "new",
+          label: "<" + t("new") + ">",
+        });
+      }
+    });
+};
 
 //on select
-const pickAutoComplete = (event:any)=>{
-    if(event.value._id===''){        
-        modelValue.value =  emptyautocomplete.value
-        autocompleteitem.value = emptyautocomplete.value
-    } else if(event.value._id==='new'){
-        
-        modelValue.value =  emptyautocomplete.value
-        autocompleteitem.value = emptyautocomplete.value
-        openViewer(false)        
-    } 
-    else if(typeof event.value.query == 'undefined'){      
-        modelValue.value=event.value
-        autocompleteitem.value = event.value      
-    }
-}
-
-const emits = defineEmits(['change','update:modelValue','update:docNoFormat'])
-watch(modelValue ,(newvalue:any)=>{
-   
-   emitChanges()
-   
-})
-const emitChanges = () =>{
-    
-    emits('change',modelValue.value)
- 
-}
+const pickAutoComplete = (event: any) => {
+  if (event.value._id === "") {
+    modelValue.value = emptyautocomplete.value;
+    autocompleteitem.value = emptyautocomplete.value;
+  } else if (event.value._id === "new") {
+    modelValue.value = emptyautocomplete.value;
+    autocompleteitem.value = emptyautocomplete.value;
+    openViewer(false);
+  } else if (typeof event.value.query == "undefined") {
+    modelValue.value = event.value;
+    autocompleteitem.value = event.value;
+  }
+};
 
+const emits = defineEmits([
+  "change",
+  "update:modelValue",
+  "update:docNoFormat",
+]);
+watch(modelValue, (newvalue: any) => {
+  emitChanges();
+});
+const emitChanges = () => {
+  emits("change", modelValue.value);
+};
 
-const setFocus = (ev:any) => {
-    if(!isMobile()) ev.target.select()
-}
+const setFocus = (ev: any) => {
+  if (!isMobile()) ev.target.select();
+};
 
 //pop up records
-const openViewer = (readonly:boolean) =>{    
-    
-    if(remotedoc){
-        
-        $event('ViewRecord',{
-            _id: modelValue.value?._id as string,
-            eventId: randomUUID(),
-            label: (readonly ? modelValue.value?.label : `${t('new') + ' '+ t(docname) }`)  as string,
-            readonly:readonly,
-            viewer : getDocument(docname)?.viewer,
-            documentName: docname,
+const openViewer = (readonly: boolean) => {
+  if (remotedoc) {
+    $event("ViewRecord", {
+      _id: modelValue.value?._id as string,
+      eventId: randomUUID(),
+      label: (readonly
+        ? modelValue.value?.label
+        : `${t("new") + " " + t(docname)}`) as string,
+      readonly: readonly,
+      viewer: getDocument(docname)?.viewer,
+      documentName: docname,
 
-            //after create, auto copy value into auto complete
-            after:(eventType:string,data:any,result:any)=>{                
-                autocompleteitem.value = {
-                    _id: data._id,
-                    code: data[codefield],                    
-                    label: data[labelfield],
-                }
-                if(schema['x-simpleapp-config'].additionalAutoCompleteFields){
-                    const addfields = schema['x-simpleapp-config'].additionalAutoCompleteFields
-                    for(let i=0;i<addfields.length;i++){
-                        const fieldname = addfields[i] as string
-                        autocompleteitem.value[fieldname] = data[fieldname]
-                    }
-                }   
-                modelValue.value = {...autocompleteitem.value}                             
-                emitChanges()
-                
-                
-            }
-        })
-
-    }
+      //after create, auto copy value into auto complete
+      after: (eventType: string, data: any, result: any) => {
+        autocompleteitem.value = {
+          _id: data._id,
+          code: data[codefield],
+          label: data[labelfield],
+        };
+        if (schema["x-simpleapp-config"].additionalAutoCompleteFields) {
+          const addfields =
+            schema["x-simpleapp-config"].additionalAutoCompleteFields;
+          for (let i = 0; i < addfields.length; i++) {
+            const fieldname = addfields[i] as string;
+            autocompleteitem.value[fieldname] = data[fieldname];
+          }
+        }
+        modelValue.value = { ...autocompleteitem.value };
+        emitChanges();
+      },
+    });
   }
-
-</script>
+};
+</script>

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

@@ -1,130 +1,134 @@
 <template>
-    <div v-if="schema" :class="getLayoutClass()">          
-        <label v-if="hidelabel"></label>
-        <label v-else  :for="uuid" :class="getLabelClass()" @click="console.log(inputType)">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>
-        <!-- <label v-else-if="error" class="simpleapp-input-label text-danger-600 overflow-hidden" :for="uuid">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>        
+  <div v-if="schema" :class="getLayoutClass()">
+    <label v-if="hidelabel"></label>
+    <label v-else :for="uuid" :class="getLabelClass()"
+      >{{ fieldlabel }}
+      <span
+        v-if="props.setting.isrequired && fieldlabel"
+        class="text-danger-600 dark:text-danger-400"
+        >*</span
+      ></label
+    >
+    <!-- <label v-else-if="error" class="simpleapp-input-label text-danger-600 overflow-hidden" :for="uuid">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>        
         <label v-else  :for="uuid" class="simpleapp-input-label whitespace-nowrap	text-gray-500 truncate">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>         -->
-        
-        <!-- <div :uuid="uuid" >{{ modelValue }}</div> -->
-        <!-- <div v-if="typeof modelValue =='object' && typeof modelValue['_id']!='undefined' && typeof modelValue['label']!='undefined' &&  readonly ==true " :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue['label'] }}</div> -->
-        <!-- <div v-else-if="readonly==true" :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue }}</div> -->
-        <!-- <slot v-else name="default" :uuid="uuid" :error="error"></slot> -->
-        <slot name="default" :uuid="uuid" :error="error"></slot>
 
-        <small v-if="error" class="text-danger-600">{{ error }}</small>
-        <small v-else class="input-desc">{{ fielddesc }}</small>
-    </div>
-    <div v-else :class="defaultcssclass">
-        <label class="etext-danger-600">wrong path in getField()</label>
-        <div class="text-danger-600">{{ props.setting.path }}</div>
-    </div>
+    <!-- <div :uuid="uuid" >{{ modelValue }}</div> -->
+    <!-- <div v-if="typeof modelValue =='object' && typeof modelValue['_id']!='undefined' && typeof modelValue['label']!='undefined' &&  readonly ==true " :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue['label'] }}</div> -->
+    <!-- <div v-else-if="readonly==true" :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue }}</div> -->
+    <!-- <slot v-else name="default" :uuid="uuid" :error="error"></slot> -->    
+    <slot name="default" :uuid="uuid" :error="error"></slot>    
+    
+
+    <small v-if="error" class="text-danger-600 dark:text-danger-400">{{ error }}</small>
+    <small v-else class="input-desc">{{ fielddesc }}</small>
+  </div>
+  <div v-else :class="defaultcssclass">
+    <label class="etext-danger-600 dark:text-danger-400">wrong path in getField()</label>
+    <div class="text-danger-600 dark:text-danger-400">{{ props.setting.path }}</div>
+  </div>
 </template>
 <script setup lang="ts">
-import SimpleAppValue from './SimpleAppValue.vue'
+import SimpleAppValue from "./SimpleAppValue.vue";
 // import {camelCaseToWords} from './helper'
 // import {computed,setBlockTracking,watch} from 'vue'
 
-import {ref} from 'vue'
-
+import { ref } from "vue";
 
-const uuid =  randomUUID();
+const uuid = randomUUID();
 // const fieldlabel = ref('')
 // const fielddesc = ref('')
-const defaultcssclass='simpleapp-input-container'
-const fieldcontainerclass = ref(defaultcssclass)
-let instancepath = ref('')
+const defaultcssclass = "simpleapp-input-container";
+const fieldcontainerclass = ref(defaultcssclass);
+let instancepath = ref("");
 const props = defineProps<{
-    label?: string,    
-    inputType: string,
-    description?: string,
-    instancepath?:string,
-    hidelabel?:boolean,
-    readonly?:boolean
-    // error?:string,
-    setting:any
-}>()
-
-const readonly = computed(()=>{
-   return props.readonly ??  props.setting.readonly ?? false
-})
-
-const modelValue = defineModel<any>() //this model value support all kind of data, string, number, autocomplete and etc
-const readonlyclass="simpleapp-value-readonly"
+  label?: string;
+  inputType: string;
+  description?: string;
+  instancepath?: string;
+  hidelabel?: boolean;
+  readonly?: boolean;
+  // error?:string,
+  setting: any;
+}>();
+
+const readonly = computed(() => {
+  return props.readonly ?? props.setting.readonly ?? false;
+});
+
+const modelValue = defineModel<any>(); //this model value support all kind of data, string, number, autocomplete and etc
+const readonlyclass = "simpleapp-value-readonly";
 // console.log('props.setting',modelValue.value,props.setting)
-let schema:any 
+let schema: any;
 
-const getLayoutClass = () =>  `simpleapp-input-container flex  ${ props.inputType == 'checkbox' ? " flex-row gap-4 mt-1 ml-1 " : "flex flex-col "}`
+const getLayoutClass = () =>
+  `simpleapp-input-container flex  ${
+    props.inputType == "checkbox"
+      ? " flex-row gap-4 mt-1 ml-1 "
+      : "flex flex-col "
+  }`;
 
 const getLabelClass = () => {
-    let class1= "simpleapp-input-label text-left text-gray-500  "
-    if(!isMobile()) class1 += "whitespace-nowrap truncate"
-    else if (props.inputType == 'checkbox' ) class1 += " ml-1 dark:text-grey-200"
-    else if (props.inputType != 'autocomplete' &&  modelValue.value) class1 += "-mb-4 ml-1 z-50 text-xs dark:text-grey-100"
-    else if (props.inputType == 'autocomplete' &&  modelValue.value?.label) class1 += "-mb-4 ml-1 z-50 text-xs dark:text-grey-100"
-    else if (props.inputType == 'number' && modelValue.value !== undefined) class1 += "-mb-4 ml-1 z-50 text-xs dark:text-grey-100"
-    else  class1 += "-mb-4 ml-1 z-50 text-xs dark:text-grey-100 hidden"
-    return class1    
+  let class1 =
+    "simpleapp-input-label text-left text-gray-500  dark:text-gray-200 ";
+
+  if (!isMobile()) class1 += "whitespace-nowrap truncate";
+  else if (props.inputType == "checkbox") class1 += " ml-1 dark:text-gray-200";
+  else if (props.inputType != "autocomplete" && modelValue.value)
+    class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100";
+  else if (props.inputType == "autocomplete" && modelValue.value?.label)
+    class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100";
+  else if (modelValue.value !== undefined)
+    class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100";
+  else class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100 hidden";
+  return class1;
+};
+
+const fielddesc = computed(() => {
+  return props.description ?? "";
+});
+
+if (props.setting.fieldsetting && props.setting.fieldsetting.type) {
+  schema = props.setting.fieldsetting;
+  // console.log("schema setting",props.setting,schema)
+  if (props?.instancepath) instancepath.value = props.instancepath;
+  else if (props.setting?.instancepath)
+    instancepath.value = props.setting.instancepath;
+  else instancepath.value = "/unknown";
+
+  const fieldnamearr = instancepath.value.split("/");
+  const fieldname = camelCaseToWords(fieldnamearr[fieldnamearr.length - 1]);
+
+  // if(props.description)fielddesc.value = props.description
+  // else if (schema?.description != 'undefined') fielddesc.value=schema.description
+  // else fielddesc.value=''
 }
-
-
-
-const fielddesc = computed(()=>{
-    return props.description ?? ''
-})
-
-if(props.setting.fieldsetting && props.setting.fieldsetting.type){
-    
-    schema = props.setting.fieldsetting
-    // console.log("schema setting",props.setting,schema)
-    if(props?.instancepath) instancepath.value =props.instancepath
-    else if(props.setting?.instancepath) instancepath.value = props.setting.instancepath
-    else instancepath.value='/unknown'
-
-    const fieldnamearr = instancepath.value.split('/')
-    const fieldname = camelCaseToWords(fieldnamearr[fieldnamearr.length-1])
-
-   
-    
-    
-    // if(props.description)fielddesc.value = props.description 
-    // else if (schema?.description != 'undefined') fielddesc.value=schema.description
-    // else fielddesc.value=''
-
-   
-
-}
-const fieldlabel = computed(()=>{
-       
-       if(props.label){
-           return t(props.label)
-       }
-       else if (schema.title ) {
-           return  t(schema.title)
-       }
-       else{
-           return  t(props.setting.key)
-       }
-   })
-const errormsg = computed(()=>{
-    
-    props.setting.errors[instancepath.value]
-})
-const error = ref("")
-watch(props.setting.errors,(newvalue,oldvalue)=>{
-    //it is array
-    error.value=''
-    if(newvalue[instancepath.value]){
-        const errlist:any[] = newvalue[instancepath.value]
-        for(let i=0;i<errlist.length;i++){
-            error.value += errlist[i].message +','
-        }
-        fieldcontainerclass.value=defaultcssclass + ' input-error'
-    }else{
-        error.value=''
-        fieldcontainerclass.value=defaultcssclass
+const fieldlabel = computed(() => {
+  if (props.label) {
+    return t(props.label);
+  } else if (schema.title) {
+    return t(schema.title);
+  } else {
+    return t(props.setting.key);
+  }
+});
+const errormsg = computed(() => {
+  props.setting.errors[instancepath.value];
+});
+const error = ref("");
+watch(props.setting.errors, (newvalue, oldvalue) => {
+  //it is array
+  error.value = "";
+  if (newvalue[instancepath.value]) {
+    const errlist: any[] = newvalue[instancepath.value];
+    for (let i = 0; i < errlist.length; i++) {
+      error.value += errlist[i].message + ",";
     }
-    // console.log("validation result",props.setting.instancepath,)
-    // error.value = newvalue[props.setting.instancepath].message
-})
-
+    fieldcontainerclass.value = defaultcssclass + " input-error";
+  } else {
+    error.value = "";
+    fieldcontainerclass.value = defaultcssclass;
+  }
+  // console.log("validation result",props.setting.instancepath,)
+  // error.value = newvalue[props.setting.instancepath].message
+});
 </script>