@simitgroup/simpleapp-generator 1.0.32 → 1.0.35

package/templates/nuxt/components/SimpleAppListmulti.vue.eta

@@ -0,0 +1,41 @@
+
+<template>
+    <FieldContainer v-bind="$attrs" :refto="id" v-model="modelValue" :label="label" :description="description" :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
+        <Listbox v-model="modelValue" 
+            class="simpleapp-inputfield"
+            :id="slotprops.uuid"   
+            v-bind="$attrs"
+            optionValue="value"
+            optionLabel="label"
+            :path="setting.instancepath"
+            :options="options"
+            multiple
+          />        
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+import {computed,watch,ref} from 'vue' 
+import Listbox from 'primevue/listbox';
+import FieldContainer from './SimpleFieldContainer.vue'
+import {prepareList,simpleArrayToObject} from './helper'
+import type {SimpleAppFieldSetting} from './type'
+import type { JSONSchema7 } from 'json-schema';
+const modelValue = defineModel()
+const props = defineProps<{
+    label?:string,
+    id?:string,
+    description?:string,
+    error?:string,
+    setting:SimpleAppFieldSetting,
+    optionLabel?:string,
+    optionValue?:string,
+    instancepath?:string,
+    options?:any[],
+}>()
+const optionValue = props.optionValue ?? 'label' 
+const optionLabel  = props.optionLabel ?? 'value' 
+
+const options = prepareList('anyOf',props.setting.fieldsetting.items,optionLabel,optionValue,props.options,)
+
+
+</script>

package/templates/nuxt/components/SimpleAppNumber.vue.eta

@@ -0,0 +1,32 @@
+
+<template>
+    <FieldContainer :hidelabel="hidelabel" v-model="modelValue" :label="label" :description="description"  :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">
+        <InputNumber class="simpleapp-inputfield" 
+            :inputId="slotprops.uuid"
+            v-model="modelValue"    
+            :path="setting.instancepath"
+            :pt="{input:{class:'text-right w-full'}}"                          
+         ></InputNumber>
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+import {computed,watch,ref} from 'vue'
+import InputNumber from 'primevue/inputnumber';
+import FieldContainer from './SimpleFieldContainer.vue'
+const props = withDefaults(defineProps<{
+    label?:string,
+    description?:string,
+    setting:any
+    error?:string,
+    instancepath?:string,
+    hidelabel?:boolean
+}>(),{
+    hidelabel:false
+})
+const emit = defineEmits(['change'])
+const modelValue =defineModel()
+watch(modelValue,()=>{
+    // props.setting.document.validateFailed()
+    emit('change',modelValue)
+})
+</script>

package/templates/nuxt/components/SimpleAppPassword.vue.eta

@@ -0,0 +1,41 @@
+
+<template>
+    <FieldContainer v-bind="$attrs" v-model="modelValue" :label="label" :description="description" :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
+        <Password
+            class="simpleapp-inputfield"
+            :inputId="slotprops.uuid"   
+            v-model="modelValue" 
+            v-bind="$attrs"
+            :path="setting.instancepath"
+         ></Password>         
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+import {computed,watch,ref} from 'vue'
+import Password from 'primevue/password';
+import FieldContainer from './SimpleFieldContainer.vue'
+const modelValue = defineModel()
+const props = defineProps<{
+    label?:string,
+    id?:string,
+    description?:string,
+    error?:string,
+    setting:any,
+    instancepath?:string,
+}>()
+
+// const modelValue = defineModel<{modelValue?:string}>()
+// console.log(modelValue.value)
+
+
+// const emits = defineEmits(['update:modelValue'])
+// const onchange=(e:any)=>{    
+//     emits('update:modelValue',e.target.value)
+// }
+
+
+// watch(props ,(after,before)=>{
+//     // console.log("B4",before,"after",after)
+//     inputvalue.value=after.modelValue
+// })
+</script>

package/templates/nuxt/components/SimpleAppRadio.vue.eta

@@ -0,0 +1,42 @@
+
+<template>
+    <FieldContainer v-bind="$attrs"
+    v-model="modelValue"
+     :label="label"
+    :description="description" 
+     :setting="setting" 
+     :instancepath="instancepath" 
+     :error="error"
+      #default="slotprops">
+        <div v-for="(o, index) in options" :key="index" class="simpleapp-inputradio">
+            <RadioButton 
+                v-model="modelValue"  
+                :inputId="`${slotprops.uuid}_${index}`" 
+                :value="o.value" />
+            <label :for="`${slotprops.uuid}_${index}`">{{ o.label }}</label>
+        </div>        
+
+              
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+import RadioButton from 'primevue/radiobutton';
+import FieldContainer from './SimpleFieldContainer.vue'
+import {prepareList,simpleArrayToObject} from './helper'
+import type {ListOptionType} from './type'
+const modelValue = defineModel()
+const props = defineProps<{
+    label?:string,
+    description?:string,
+    error?:string,
+    setting:any,
+    optionLabel?:string,
+    optionValue?:string,
+    instancepath?:string,
+    options?:any[],
+}>()
+const optionValue = props.optionValue ?? 'label' 
+const optionLabel  = props.optionLabel ?? 'value' 
+const options = prepareList('oneOf',props.setting.fieldsetting,optionLabel,optionValue,props.options,)
+
+</script>

package/templates/nuxt/components/SimpleAppRating.vue.eta

@@ -0,0 +1,41 @@
+
+<template>
+    <FieldContainer v-bind="$attrs" v-model="modelValue" :label="label" :description="description" :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
+        <Rating
+            class="simpleapp-inputfield"
+            :inputId="slotprops.uuid"
+            v-model="modelValue" 
+            v-bind="$attrs"
+            :path="setting.instancepath"
+         ></Rating>         
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+import {computed,watch,ref} from 'vue'
+import Rating from 'primevue/rating';
+
+import FieldContainer from './SimpleFieldContainer.vue'
+const modelValue = defineModel()
+const props = defineProps<{
+    label?:string,
+    description?:string,
+    error?:string,
+    setting:any,
+    instancepath?:string,
+}>()
+
+// const modelValue = defineModel<{modelValue?:string}>()
+// console.log(modelValue.value)
+
+
+// const emits = defineEmits(['update:modelValue'])
+// const onchange=(e:any)=>{    
+//     emits('update:modelValue',e.target.value)
+// }
+
+
+// watch(props ,(after,before)=>{
+//     // console.log("B4",before,"after",after)
+//     inputvalue.value=after.modelValue
+// })
+</script>

package/templates/nuxt/components/SimpleAppSelect.vue.eta

@@ -0,0 +1,38 @@
+
+<template>
+    <FieldContainer v-bind="$attrs" v-model="modelValue" :label="label" :description="description" :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
+        <Dropdown v-model="modelValue" 
+        class="simpleapp-inputfield"
+        :inputId="slotprops.uuid"   
+        v-bind="$attrs"
+        optionValue="value"
+        optionLabel="label"
+        :path="setting.instancepath"
+        :options="options"
+          />        
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+import {computed,watch,ref} from 'vue'
+import Dropdown from 'primevue/dropdown';
+import FieldContainer from './SimpleFieldContainer.vue'
+import {prepareList,simpleArrayToObject} from './helper'
+import type {ListOptionType} from './type'
+import type { JSONSchema7 } from 'json-schema';
+const modelValue = defineModel()
+const props = defineProps<{
+    label?:string,    
+    description?:string,
+    error?:string,
+    setting:any,
+    optionLabel?:string,
+    optionValue?:string,
+    instancepath?:string,
+    options?:any[]
+}>()
+
+const optionValue = props.optionValue ?? 'value' 
+const optionLabel  = props.optionLabel ?? 'label' 
+const options = prepareList('oneOf',props.setting.fieldsetting,optionLabel,optionValue,props.options,)
+
+</script>

package/templates/nuxt/components/SimpleAppSelectmulti.vue.eta

@@ -0,0 +1,39 @@
+
+<template>
+    <FieldContainer v-bind="$attrs" v-model="modelValue" :label="label" :description="description" :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
+        <MultiSelect v-model="modelValue" 
+        class="simpleapp-inputfield"
+        :inputId="slotprops.uuid"   
+        v-bind="$attrs"
+        :optionValue="optionValue"
+        :optionLabel="optionLabel"
+        :path="setting.instancepath"
+        :options="options"
+        multiple
+          />        
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+import {computed,watch,ref} from 'vue'
+import MultiSelect from 'primevue/multiselect';
+import FieldContainer from './SimpleFieldContainer.vue'
+import {prepareList,simpleArrayToObject} from './helper'
+import type {SimpleAppFieldSetting} from './type'
+import type { JSONSchema7 } from 'json-schema';
+const modelValue = defineModel()
+const props = defineProps<{
+    label?:string,
+    description?:string,
+    error?:string,
+    setting:SimpleAppFieldSetting,
+    optionLabel?:string,
+    optionValue?:string,
+    instancepath?:string,
+    options?:any[]
+}>()
+const optionValue = props.optionValue ?? 'label' 
+const optionLabel  = props.optionLabel ?? 'value' 
+// console.log("appselectmulti",props.description, props.setting.fieldsetting)
+const options = prepareList('anyOf',props.setting.fieldsetting.items,optionLabel,optionValue,props.options,)
+// props.setting.fieldsetting.items
+</script>

package/templates/nuxt/components/SimpleAppSlider.vue.eta

@@ -0,0 +1,42 @@
+
+<template>
+    <FieldContainer v-bind="$attrs" v-model="modelValue" :label="label" :description="description" :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
+        <Slider
+            class="simpleapp-inputfield"
+            :inputId="slotprops.uuid"
+            v-model="modelValue" 
+            v-bind="$attrs"
+            :path="setting.instancepath"
+         ></Slider>         
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+import {computed,watch,ref} from 'vue'
+import Slider from 'primevue/slider';
+
+
+import FieldContainer from './SimpleFieldContainer.vue'
+const modelValue = defineModel()
+const props = defineProps<{
+    label?:string,
+    description?:string,
+    error?:string,
+    setting:any,
+    instancepath?:string,
+}>()
+
+// const modelValue = defineModel<{modelValue?:string}>()
+// console.log(modelValue.value)
+
+
+// const emits = defineEmits(['update:modelValue'])
+// const onchange=(e:any)=>{    
+//     emits('update:modelValue',e.target.value)
+// }
+
+
+// watch(props ,(after,before)=>{
+//     // console.log("B4",before,"after",after)
+//     inputvalue.value=after.modelValue
+// })
+</script>

package/templates/nuxt/components/SimpleAppSwitch.vue.eta

@@ -0,0 +1,30 @@
+
+
+<template>
+    <FieldContainer v-bind="$attrs" v-model="modelValue" :label="label" :description="description" :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
+        <InputSwitch
+            class="simpleapp-inputswitch"
+            :inputId="slotprops.uuid"
+            v-model="modelValue"  
+            :binary="true"
+            v-bind="$attrs"
+            :path="setting.instancepath"
+         ></InputSwitch>         
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+// import {Ref} from 'vue'
+import InputSwitch from 'primevue/inputswitch';
+import FieldContainer from './SimpleFieldContainer.vue'
+
+const modelValue = defineModel<boolean>()
+const props = defineProps<{
+    label?:string,
+    id?:string,
+    description?:string,
+    error?:string,
+    setting:any,
+    instancepath?:string,
+}>()
+
+</script>

package/templates/nuxt/components/SimpleAppText.vue.eta

@@ -0,0 +1,50 @@
+
+<template>
+    <FieldContainer :hidelabel="hidelabel" v-model="modelValue" :label="label" :description="description" :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
+       
+        
+        <InputText v-if="slotprops.error"
+            class="simpleapp-inputfield simpleapp-invalid-input"
+            :id="slotprops.uuid"
+            v-model="modelValue"
+            :path="setting.instancepath"
+            :type="type"
+         ></InputText>         
+         <InputText v-else
+            class="simpleapp-inputfield"
+            :id="slotprops.uuid"
+            v-model="modelValue"
+            :path="setting.instancepath"
+            :type="type"
+         ></InputText>  
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+import {computed,watch,ref} from 'vue'
+import InputText from 'primevue/inputtext';
+import FieldContainer from './SimpleFieldContainer.vue'
+const modelValue = defineModel()
+const props = withDefaults( defineProps<{
+    label?:string,
+    description?:string,
+    error?:string,
+    setting:any,
+    type?:string,
+    instancepath?:string,
+    hidelabel?: boolean
+}>(),{type:'text'})
+
+// const modelValue = defineModel<{modelValue?:string}>()
+// console.log(modelValue.value)
+
+const emits = defineEmits(['change'])
+// const onchange=(e:any)=>{    
+//     emits('update:modelValue',e.target.value)
+// }
+
+
+watch(modelValue ,()=>{
+    // props.setting.document.validateFailed()
+    emits('change',modelValue.value)
+})
+</script>

package/templates/nuxt/components/SimpleAppTextarea.vue.eta

@@ -0,0 +1,30 @@
+
+<template>
+    <FieldContainer v-bind="$attrs" v-model="modelValue" :label="label" :description="description" :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
+        <Textarea
+            class="simpleapp-inputfield"
+            :id="slotprops.uuid"
+            v-model="modelValue" 
+            v-bind="$attrs"
+            :autoResize="autoResize"
+            :path="setting.instancepath"
+         ></Textarea>         
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+import {computed,watch,ref} from 'vue'
+import Textarea from 'primevue/textarea';
+
+import FieldContainer from './SimpleFieldContainer.vue'
+const modelValue = defineModel()
+const props = defineProps<{
+    label?:string,
+    id?:string,
+    description?:string,
+    error?:string,
+    setting:any,
+    autoResize?:boolean,
+    instancepath?:string,
+}>()
+
+</script>

package/templates/nuxt/components/SimpleAppValue.vue.eta

@@ -0,0 +1,86 @@
+<template>
+    <div v-if="schema" :class="fieldcontainerclass">  
+        
+        <div v-if="hidelabel"></div>
+        <label v-else  :for="uuid">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="input-error">*</span></label>
+        
+        <div :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue }}</div>
+
+
+        <small v-if="error" class="input-desc">{{ error }}</small>
+        <small v-else class="input-desc">{{ fielddesc }}</small>
+
+        <slot></slot>
+    </div>
+    <div v-else class="simpleapp-input-container">
+        <label class="input-error">wrong path in getField()</label>
+        <div class="input-error">{{ props.setting.path }}</div>
+    </div>
+</template>
+<script setup lang="ts">
+import {camelCaseToWords} from './helper'
+import {computed,watch} from 'vue'
+import {ref} from 'vue'
+const modelValue = defineModel()
+const uuid = crypto.randomUUID()
+const fieldlabel = ref('')
+const fielddesc = ref('')
+const defaultcssclass='simpleapp-input-container'
+const fieldcontainerclass = ref(defaultcssclass)
+let instancepath = ref('')
+const props = defineProps<{
+    label?: string,    
+    description?: string,
+    instancepath?:string,
+    hidelabel?:boolean,
+    // error?:string,
+    setting:any
+}>()
+
+// console.log('props.setting',props.setting.fieldsetting)
+let schema:any 
+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.label)fieldlabel.value = props.label 
+    else if (schema.title ) fieldlabel.value=schema.title
+    else fieldlabel.value=fieldname
+    
+    if(props.description)fielddesc.value = props.description 
+    else if (schema?.description != 'undefined') fielddesc.value=schema.description
+    else fielddesc.value=''
+
+   
+
+}
+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
+    }
+    // console.log("validation result",props.setting.instancepath,)
+    // error.value = newvalue[props.setting.instancepath].message
+})
+
+</script>

package/templates/nuxt/components/SimpleFieldContainer.vue.eta

@@ -0,0 +1,102 @@
+<template>
+    <div v-if="schema" :class="fieldcontainerclass">          
+        <div v-if="hidelabel"></div>
+        <label v-else-if="error" class="error-text" :for="uuid">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="input-error">*</span></label>        
+        <label v-else  :for="uuid">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="input-error">*</span></label>        
+        
+        
+        <div v-if="readonly && typeof modelValue =='object' && typeof modelValue['_id']!='undefined' && typeof modelValue['label']!='undefined' " :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue['label'] }}</div>
+        <div v-else-if="readonly" :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue }}</div>
+        <slot v-else name="default" :uuid="uuid" :error="error"></slot>
+
+        <small v-if="error" class="error-text">{{ error }}</small>
+        <small v-else class="input-desc">{{ fielddesc }}</small>
+    </div>
+    <div v-else :class="defaultcssclass">
+        <label class="error-text ">wrong path in getField()</label>
+        <div class="error-text">{{ props.setting.path }}</div>
+    </div>
+</template>
+<script setup lang="ts">
+import SimpleAppValue from './SimpleAppValue.vue'
+import {camelCaseToWords} from './helper'
+import {computed,setBlockTracking,watch} from 'vue'
+
+import {ref} from 'vue'
+const uuid =  crypto.randomUUID();
+const fieldlabel = ref('')
+const fielddesc = ref('')
+const defaultcssclass='simpleapp-input-container'
+const fieldcontainerclass = ref(defaultcssclass)
+let instancepath = ref('')
+const props = defineProps<{
+    label?: string,    
+    description?: string,
+    instancepath?:string,
+    hidelabel?:boolean,
+    readonly?:boolean
+    // error?:string,
+    setting:any
+}>()
+
+const readonly = ref(false)
+if(props.readonly !== undefined){
+    readonly.value=props.readonly
+}else if(props.setting.readonly !==undefined){
+    readonly.value=props.readonly
+}
+// console.log("props.setting.format",props.setting.format)
+const modelValue = defineModel()
+const readonlyclass="simpleapp-value-readonly"
+// console.log('props.setting',modelValue.value,props.setting)
+let schema:any 
+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.label)fieldlabel.value = props.label 
+    else if (schema.title ) fieldlabel.value=schema.title
+    else fieldlabel.value=fieldname
+    
+    if(props.description)fielddesc.value = props.description 
+    else if (schema?.description != 'undefined') fielddesc.value=schema.description
+    else fielddesc.value=''
+
+   
+
+}
+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
+    }
+    // console.log("validation result",props.setting.instancepath,)
+    // error.value = newvalue[props.setting.instancepath].message
+})
+
+</script>
+<style scoped>
+.simpleapp-input-container{
+    @apply flex flex-col
+}
+</style>