@simitgroup/simpleapp-generator 1.2.7 → 1.3.0-alpha

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

@@ -1,277 +1,414 @@
 <template>
-    <SimpleAppFieldContainer :hidelabel="hidelabel" v-model="modelValue" 
-                :label="label" :description="description" :pt="pt"
-                :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
-        <Checkbox v-if="inputType ==SimpleAppInputType.checkbox"  :readonly="isReadonly" :pt="pt"
-                :inputId="slotprops.uuid" :path="setting.instancepath"
-                v-model="modelValue" :binary="true"
-                v-bind="(componentProps as CheckboxProps)"/>
-        <InputSwitch v-else-if="inputType ==SimpleAppInputType.switch"  :readonly="isReadonly" :pt="pt"
-                :inputId="slotprops.uuid" :path="setting.instancepath"
-                v-model="modelValue as boolean" :binary="true"
-                v-bind="(componentProps as InputSwitchProps)"/>
+  <SimpleAppFieldContainer
+    :hidelabel="hidelabel"
+    v-model="modelValue"
+    :label="label"
+    :description="description"
+    :pt="pt"
+    :inputType="inputType"
+    :setting="setting"
+    :instancepath="instancepath"
+    :error="error"
+    #default="slotprops"
+  >
+    <Checkbox
+      v-if="inputType == SimpleAppInputType.checkbox"
+      :readonly="isReadonly"
+      :pt="pt"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      v-model="modelValue"
+      :binary="true"
+      v-bind="componentProps as CheckboxProps"
+    />
+    <InputSwitch
+      v-else-if="inputType == SimpleAppInputType.switch"
+      :readonly="isReadonly"
+      :pt="pt"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      v-model="modelValue as boolean"
+      :binary="true"
+      v-bind="componentProps as InputSwitchProps"
+    />
 
-        <InputText type="date" :pt="pt" 
-            v-else-if="inputType == SimpleAppInputType.date"            
-            :inputId="slotprops.uuid" :path="setting.instancepath"
-            v-model="datevalue" @update:modelValue="updateDate" :readonly="isReadonly"
-            :placeholder="placeholder"
-            v-bind="(componentProps as InputTextProps)"/>
-        <!-- calendar component -->        
-        <Calendar type="date" :pt="pt" class="flex flex-col"
-            v-else-if="SimpleAppInputType.calendar==inputType"
-            :inputId="slotprops.uuid" :path="setting.instancepath"
-            v-model="datevalue" @update:modelValue="updateDate" :readonly="isReadonly"
-            :placeholder="placeholder"
-            v-bind="(componentProps as CalendarProps)"/>
+    <InputText
+      type="date"
+      :pt="pt"
+      v-else-if="inputType == SimpleAppInputType.date"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      v-model="datevalue"
+      @update:modelValue="updateDate"
+      :readonly="isReadonly"
+      :placeholder="placeholder"
+      v-bind="componentProps as InputTextProps"
+    />
+    <!-- calendar component -->
+    <Calendar
+      type="date"
+      :pt="pt"
+      class="flex flex-col"
+      v-else-if="SimpleAppInputType.calendar == inputType"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      v-model="datevalue"
+      @update:modelValue="updateDate"
+      :readonly="isReadonly"
+      :placeholder="placeholder"
+      v-bind="componentProps as CalendarProps"
+    />
 
-        <!-- time component -->        
-        <Calendar  :pt="pt" 
-            v-else-if="inputType == SimpleAppInputType.time" timeOnly showTime 
-            hourFormat="12" 
-             @update:modelValue="updateTime"      
-            :inputId="slotprops.uuid" :path="setting.instancepath"
-            v-model="(modelValue as string)" :readonly="isReadonly"
-            :placeholder="placeholder"            
-            v-bind="(componentProps as CalendarProps)"/>
+    <!-- time component -->
+    <Calendar
+      :pt="pt"
+      v-else-if="inputType == SimpleAppInputType.time"
+      timeOnly
+      showTime
+      hourFormat="12"
+      @update:modelValue="updateTime"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      v-model="modelValue as string"
+      :readonly="isReadonly"
+      :placeholder="placeholder"
+      v-bind="componentProps as CalendarProps"
+    />
 
-        <!-- select/list component -->                
-        <Listbox v-model="modelValue"  :pt="pt"
-            v-else-if="SimpleAppInputType.list==inputType"
-            :inputId="slotprops.uuid" :path="setting.instancepath"  
-            :readonly="isReadonly"
-            class="w w-full lg:w-full"
-            :disabled="isReadonly"
-            :options="getListOptions()" optionLabel="label" optionValue="value"
-            :placeholder="placeholder"
-            v-bind="(componentProps as ListboxProps)"/>
+    <!-- select/list component -->
+    <Listbox
+      v-model="modelValue"
+      :pt="pt"
+      v-else-if="SimpleAppInputType.list == inputType"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      :readonly="isReadonly"
+      class="w w-full lg:w-full"
+      :disabled="isReadonly"
+      :options="getListOptions()"
+      optionLabel="label"
+      optionValue="value"
+      :placeholder="placeholder"
+      v-bind="componentProps as ListboxProps"
+    />
 
-        <Dropdown  v-model="modelValue"  :pt="pt"
-            v-else-if="SimpleAppInputType.select == inputType"
-            :inputId="slotprops.uuid" :path="setting.instancepath"  
-            :readonly="isReadonly"
-            class="w w-full lg:w-full"
-            :disabled="isReadonly"
-            :options="getListOptions()" optionLabel="label" optionValue="value"
-            :placeholder="placeholder"
-            v-bind="componentProps"/>
-        
-        <!-- radio component -->                
-        <div v-else-if="inputType == SimpleAppInputType.radio" >
-            <div v-for="(item,index) in getListOptions()">
-                <RadioButton :pt="pt"  v-model="modelValue" 
-                        :inputId="setting.key+'-'+index" name="smaple" :value="item.value"
-                        :readonly="isReadonly"
-                        />  {{ ' ' }}
-                <label :for="setting.key+'-'+index"> {{ item.label  }} </label>
-            </div>            
-        </div>
-        
-        <!-- autocomplete, need do more enterprise grade component-->
-        <SimpleAppAutocomplete     v-else-if="inputType==SimpleAppInputType.autocomplete"  
-                v-model="(modelValue as autocompletetype)"                          
-                :pt="pt"
-                :setting="setting"
-                :disabled="isReadonly"                                                             
-                :inputId="slotprops.uuid"
-                :path="setting.instancepath"
-                :readonly="isReadonly"                
-                :placeholder="placeholder"
-                 />
-        <!-- v-bind:attributes="componentProps" -->
-        <!--  document no input-->
-        <SimpleAppDocumentNo v-else-if="inputType == SimpleAppInputType.documentno" 
-            :setting="setting" v-model="(modelValue as string)" :inputId="slotprops.uuid"
-            :readonly="isReadonly" @update:docNoFormat="triggerDocNoFormatChange"     
-            :pt="pt"
-             :path="setting.instancepath"
-             v-bind="(componentProps as any)"/> 
-             <!-- use componentProps as any at the moment, no ideal yet, and for compatibility -->
-           
-        
-        <!-- password -->
-        <Password 
-                v-else-if="inputType == SimpleAppInputType.password" 
-                :type="type" v-model="(modelValue as string)" :pt="pt" 
-                :readonly="isReadonly" class="flex flex-col"
-                :inputId="slotprops.uuid" :path="setting.instancepath"
-                :placeholder="placeholder"
-                v-bind="(componentProps as PasswordProps)"/>
+    <Dropdown
+      v-model="modelValue"
+      :pt="pt"
+      v-else-if="SimpleAppInputType.select == inputType"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      :readonly="isReadonly"
+      class="w w-full lg:w-full"
+      :disabled="isReadonly"
+      :options="getListOptions()"
+      optionLabel="label"
+      optionValue="value"
+      :placeholder="placeholder"
+      v-bind="componentProps"
+    />
 
-        <!-- rating -->
-        <Rating v-else-if="inputType == SimpleAppInputType.rating" 
-          :type="type" v-model="(modelValue as number)" :pt="pt" 
-                :readonly="isReadonly"                 
-                :inputId="slotprops.uuid" :path="setting.instancepath"
-                v-bind="(componentProps as RatingProps)"/>
-            
-        <!-- chip -->
-        <Chips  v-else-if="inputType == SimpleAppInputType.chip" 
-          :type="type" v-model="(modelValue as string[])"
-                 :pt="pt" 
-                :disabled="isReadonly"                                 
-                :inputId="slotprops.uuid" :path="setting.instancepath"
-                :placeholder="placeholder"
-                v-bind="(componentProps as ChipsProps)"
-                />
-        <!-- simple component -->        
-        <InputNumber v-else-if="inputType == SimpleAppInputType.number"                 
-                :type="type" v-model="(modelValue as number)"
-                :readonly="isReadonly"        
-                :pt="pt"
-                :class="!pt ? 'w-full flex flex-col' :''"
-                :inputId="slotprops.uuid" :path="setting.instancepath"
-                v-bind="(componentProps as InputNumber)"
-                :placeholder="placeholder"
-                />
-            <Textarea v-else-if="inputType == SimpleAppInputType.textarea"
-            v-model="(modelValue as string)"                
-                :readonly="isReadonly"        
-                :pt="pt"
-                :type="type"
-                class="w-full flex flex-col"
-                :inputId="slotprops.uuid" 
-                :path="setting.instancepath"
-                :placeholder="placeholder"
-                v-bind="(componentProps as TextareaProps)"
-                />
-        <InputText v-else
-            v-model="(modelValue as string)"                
-                :readonly="isReadonly"        
-                :pt="pt"
-                :type="type"
-                class="w-full flex flex-col"
-                :inputId="slotprops.uuid" 
-                :path="setting.instancepath"
-                :placeholder="placeholder"
-                v-bind="(componentProps as InputTextProps)"
-                />                    
-        <!-- component require special treatment -->        
-    </SimpleAppFieldContainer>    
+    <!-- radio component -->
+    <div v-else-if="inputType == SimpleAppInputType.radio">
+      <div v-for="(item, index) in getListOptions()">
+        <RadioButton
+          :pt="pt"
+          v-model="modelValue"
+          :inputId="setting.key + '-' + index"
+          name="smaple"
+          :value="item.value"
+          :readonly="isReadonly"
+        />
+        {{ " " }}
+        <label :for="setting.key + '-' + index"> {{ item.label }} </label>
+      </div>
+    </div>
+
+    <!-- autocomplete, need do more enterprise grade component-->
+    <SimpleAppAutocomplete
+      v-else-if="inputType == SimpleAppInputType.autocomplete"
+      v-model="modelValue as autocompletetype"
+      :hidelabel="hidelabel"
+      :pt="pt"
+      :setting="setting"
+      :disabled="isReadonly"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      :readonly="isReadonly"
+      :placeholder="placeholder"
+    />
+    <!-- v-bind:attributes="componentProps" -->
+    <!--  document no input-->
+    <SimpleAppDocumentNo
+      v-else-if="inputType == SimpleAppInputType.documentno"
+      :setting="setting"
+      v-model="modelValue as string"
+      :inputId="slotprops.uuid"
+      :readonly="isReadonly"
+      @update:docNoFormat="triggerDocNoFormatChange"
+      :pt="pt"
+      :path="setting.instancepath"
+      v-bind="componentProps as any"
+    />
+    <!-- use componentProps as any at the moment, no ideal yet, and for compatibility -->
+
+    <!-- password -->
+    <Password
+      v-else-if="inputType == SimpleAppInputType.password"
+      :type="type"
+      v-model="modelValue as string"
+      :pt="pt"
+      @focus="setFocus"
+      :readonly="isReadonly"
+      class="flex flex-col"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      :placeholder="placeholder"
+      v-bind="componentProps as PasswordProps"
+    />
+
+    <!-- rating -->
+    <Rating
+      v-else-if="inputType == SimpleAppInputType.rating"
+      :type="type"
+      v-model="modelValue as number"
+      :pt="pt"
+      :readonly="isReadonly"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      v-bind="componentProps as RatingProps"
+    />
+
+    <!-- chip -->
+    <Chips
+      v-else-if="inputType == SimpleAppInputType.chip"
+      :type="type"
+      v-model="modelValue as string[]"
+      :pt="pt"
+      :disabled="isReadonly"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      :placeholder="placeholder"
+      v-bind="componentProps as ChipsProps"
+    />
+    <!-- simple component  -->
+    
+    <InputNumber
+      v-else-if="inputType == SimpleAppInputType.number"
+      :type="type"
+      v-model="modelValue as number"
+      @focus="setFocus"
+      :readonly="isReadonly"
+      :pt="pt"
+      :class="!pt ? 'w-full flex flex-col' : ''"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      v-bind="componentProps as InputNumber"
+      :placeholder="placeholder"
+    />
+    <Textarea
+      v-else-if="inputType == SimpleAppInputType.textarea"
+      v-model="modelValue as string"
+      :autofocus="autofocus"
+      :readonly="isReadonly"
+      :pt="pt"
+      :type="type"
+      class="w-full flex flex-col"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      :placeholder="placeholder"
+      v-bind="componentProps as TextareaProps"
+    />
+    <InputText
+      v-else
+      v-model="modelValue as string"
+      @focus="setFocus"
+      :autofocus="autofocus"
+      :readonly="isReadonly"
+      :pt="pt"
+      :type="type"
+      class="w-full flex flex-col"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      :placeholder="placeholder"
+      v-bind="componentProps as InputTextProps"
+    />
+    <!-- component require special treatment -->        
+  </SimpleAppFieldContainer>
 </template>
 
 <script lang="ts" setup>
-import {autocompletetype} from '~/types'
-import moment from 'moment'
-import AutoComplete,{ AutoCompleteProps } from 'primevue/autocomplete';
-import Calendar,{ CalendarProps } from 'primevue/calendar';
-import Checkbox,{ CheckboxProps } from 'primevue/checkbox';
-import Chips,{ ChipsProps } from 'primevue/chips';
-import SimpleAppDocumentNo from './SimpleAppDocumentNo.vue';
-import SimpleAppAutocomplete from './SimpleAppAutocomplete.vue'
-import Dropdown,{ DropdownProps } from 'primevue/dropdown';
-import InputNumber, { InputNumberProps } from 'primevue/inputnumber';
-import InputSwitch, { InputSwitchProps } from 'primevue/inputswitch';
-import InputText, { InputTextProps } from 'primevue/inputtext';
-import Listbox,{ ListboxProps } from 'primevue/listbox';
-import MultiSelect,{ MultiSelectProps } from 'primevue/multiselect';
-import Password,{ PasswordProps } from 'primevue/password';
-import RadioButton,{ RadioButtonProps } from 'primevue/radiobutton';
-import Rating,{ RatingProps } from 'primevue/rating';
-import Slider,{ SliderProps }  from 'primevue/slider';
-import Textarea, { TextareaProps } from 'primevue/textarea';
-import {SimpleAppInputType} from '~/types'
-
-const modelValue = defineModel({required:true})
-const datevalue = ref('')
-const timevalue = ref<Date>()
+import { autocompletetype } from "~/types";
+import moment from "moment";
+import AutoComplete, { AutoCompleteProps } from "primevue/autocomplete";
+import Calendar, { CalendarProps } from "primevue/calendar";
+import Checkbox, { CheckboxProps } from "primevue/checkbox";
+import Chips, { ChipsProps } from "primevue/chips";
+import SimpleAppDocumentNo from "./SimpleAppDocumentNo.vue";
+import SimpleAppAutocomplete from "./SimpleAppAutocomplete.vue";
+import Dropdown, { DropdownProps } from "primevue/dropdown";
+import InputNumber, { InputNumberProps } from "primevue/inputnumber";
+import InputSwitch, { InputSwitchProps } from "primevue/inputswitch";
+import InputText, { InputTextProps } from "primevue/inputtext";
+import Listbox, { ListboxProps } from "primevue/listbox";
+import MultiSelect, { MultiSelectProps } from "primevue/multiselect";
+import Password, { PasswordProps } from "primevue/password";
+import RadioButton, { RadioButtonProps } from "primevue/radiobutton";
+import Rating, { RatingProps } from "primevue/rating";
+import Slider, { SliderProps } from "primevue/slider";
+import Textarea, { TextareaProps } from "primevue/textarea";
+import { SimpleAppInputType } from "~/types";
 
-const props = withDefaults( defineProps<{
-    inputType:SimpleAppInputType,
-    label?:string,
-    description?:string,
-    error?:string,
-    setting:any,
-    type?:string,
-    instancepath?:string,
-    hidelabel?: boolean
-    readonly?: boolean
-    pt?:any,
-    placeholder?:string
-    componentProps?: InputNumberProps | InputSwitchProps | InputTextProps | TextareaProps | DropdownProps | CalendarProps | RatingProps
+const instancepath = ref("");
+const modelValue = defineModel({ required: true });
+const datevalue = ref("");
+const timevalue = ref<Date>();
 
-}>(),{type:'text'})
+const props = withDefaults(
+  defineProps<{
+    inputType: SimpleAppInputType;
+    label?: string;
+    description?: string;
+    error?: string;
+    setting: any;
+    type?: string;
+    instancepath?: string;
+    hidelabel?: boolean;
+    readonly?: boolean;
+    autofocus?: boolean;
+    pt?: any;
+    placeholder?: string;
+    componentProps?:
+      | InputNumberProps
+      | InputSwitchProps
+      | InputTextProps
+      | TextareaProps
+      | DropdownProps
+      | CalendarProps
+      | RatingProps;
+  }>(),
+  { type: "text" },
+);
 
+const pt =ref(props.pt)
 
-if(props.inputType== SimpleAppInputType.date && modelValue.value){
-    datevalue.value = moment(modelValue.value as string ).format('YYYY-MM-DD')
-}else{
-    datevalue.value = ''
+if (props.inputType == SimpleAppInputType.date && modelValue.value) {
+  datevalue.value = moment(modelValue.value as string).format("YYYY-MM-DD");
+} else {
+  datevalue.value = "";
 }
 
-const isReadonly = computed(()=>{
-    if(props.readonly){
-        return props.readonly
-    }else if(props.setting.readonly){
-        return props.setting.readonly
-    }else{
-        return false
-    }
-})
-const updateTime = () =>{
-    modelValue.value = moment(timevalue.value).format("HH:mm:ss")   
-}
-const updateDate = (value:any)=>{
-    
-    if(value){
-        modelValue.value = moment(value).format('YYYY-MM-DD')
-    }else{
-        modelValue.value=''
-    }
-    
-}
+if (props?.instancepath) instancepath.value = props.instancepath;
+  else if (props.setting?.instancepath)
+    instancepath.value = props.setting.instancepath;
+  else instancepath.value = "/unknown";
+
+watch(props.setting.errors, (newvalue, oldvalue) => {
+  let errmsg = ''
+  if (newvalue[instancepath.value]) {
+    const errlist: any[] = newvalue[instancepath.value];    
+    for (let i = 0; i < errlist.length; i++) {
+      errmsg += errlist[i].message + ",";
+    }    
+  } else {
+    errmsg = "";    
+  }
+  if(errmsg!=''){
+    const errorstyle = { style:'border-color: lightcoral; color:white '}
+    if(!pt.value)pt.value = {}
 
+    if(props.inputType == SimpleAppInputType.text) pt.value={ root: errorstyle}
+    else if(props.inputType == SimpleAppInputType.autocomplete) pt.value={ input:errorstyle} 
+    else  if(props.inputType == SimpleAppInputType.number) pt.value={ input: {root:errorstyle}  } 
+    else pt.value = {root: errorstyle, input:{root:errorstyle}}
+    //some component still not working
 
-const getListOptions = () =>{
+  }else{
+   pt.value=props.pt 
+  }
     
-    const options = []
-    if(props.setting.fieldsetting.enum){
-        for(let i=0;i<props.setting.fieldsetting.enum.length;i++){
-            const v = props.setting.fieldsetting.enum[i]
-            if(typeof v == 'string'){
-                options.push({value:v, label: t(v)})
-            }else{
-                options.push({value:v.value, label: t(v.label)})
-            }
-            
-        }
+  
+})
+const isReadonly = computed(() => {
+  if (props.readonly) {
+    return props.readonly;
+  } else if (props.setting.readonly) {
+    return props.setting.readonly;
+  } else {
+    return false;
+  }
+});
+const updateTime = () => {
+  modelValue.value = moment(timevalue.value).format("HH:mm:ss");
+};
+const updateDate = (value: any) => {
+  if (value) {
+    modelValue.value = moment(value).format("YYYY-MM-DD");
+  } else {
+    modelValue.value = "";
+  }
+};
 
+const setFocus = (ev: any) => {
+  if (!isMobile()) ev.target.select();
+};
 
+const getListOptions = () => {
+  const options = [];
+  if (props.setting.fieldsetting.enum) {
+    for (let i = 0; i < props.setting.fieldsetting.enum.length; i++) {
+      const v = props.setting.fieldsetting.enum[i];
+      if (typeof v == "string") {
+        options.push({ value: v, label: t(v) });
+      } else {
+        options.push({ value: v.value, label: t(v.label) });
+      }
     }
-    return options
-}
+  }
+  return options;
+};
 
+const emits = defineEmits([
+  "change",
+  "update:modelValue",
+  "update:docNoFormat",
+]);
 
-const emits = defineEmits(['change','update:modelValue','update:docNoFormat'])
-
-watch(modelValue ,(newvalue:any)=>{
-    
-    if([SimpleAppInputType.date,SimpleAppInputType.calendar].includes(props.inputType)){
-        if(modelValue.value){
-            datevalue.value = moment(modelValue.value as string ).format('YYYY-MM-DD')
-        }else{
-            datevalue.value = ''
-        }
-        
+watch(modelValue, (newvalue: any) => {
+  if (
+    [SimpleAppInputType.date, SimpleAppInputType.calendar].includes(
+      props.inputType,
+    )
+  ) {
+    if (modelValue.value) {
+      datevalue.value = moment(modelValue.value as string).format("YYYY-MM-DD");
+    } else {
+      datevalue.value = "";
     }
+  }
 
-
-    emits('change',modelValue.value)
-    emits('update:modelValue',modelValue.value)    
-})
-
+  emits("change", modelValue.value);
+  emits("update:modelValue", modelValue.value);
+});
+onMounted(() => {
+  if (
+    [SimpleAppInputType.date, SimpleAppInputType.calendar].includes(
+      props.inputType,
+    )
+  ) {
+    if (modelValue.value) {
+      datevalue.value = moment(modelValue.value as string).format("YYYY-MM-DD");
+    } else {
+      datevalue.value = "";
+    }
+  }
+});
 
 /************ start autocomplete only ***************/
 
 /************ end autocomplete only ***************/
 
-
-
-
-
-const triggerDocNoFormatChange=(formatdata:any)=>{
-    emits('update:docNoFormat',formatdata)
-}
+const triggerDocNoFormatChange = (formatdata: any) => {
+  emits("update:docNoFormat", formatdata);
+};
 </script>
-<style scoped>
-</style>