@simitgroup/simpleapp-generator 1.0.59 → 1.0.61

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

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DO NOT MODIFY IT BY HAND.
+ * last change 2023-09-09
+ * author: Ks Tan
+ */
+import {Notification, NotificationStatus} from '~/types'
+import { useToast, } from 'primevue/usetoast';
+import type {  ToastMessageOptions } from 'primevue/toast';
+import Toast from 'primevue/toast';
+import { stringify } from 'ajv';
+import {upperFirst, last } from 'lodash'
+
+
+const toast = useToast();
+const { $event,$listen } = useNuxtApp()
+// WildcardHandler<Record<EventType, unknown>>
+let resmsg:ToastMessageOptions = {} as ToastMessageOptions
+
+$listen("Notification",(data:Notification)=>{
+    // $listen('*',(type:key of EventType,data:any)=>{ 
+    console.log("Event type",'data',data)
+    const type:NotificationStatus = data.status
+    // let arrupdate = type.split(':')
+    // let eventdata = data
+    let duration = 3000
+    // let severity:typeof resmsg['severity'] 
+    // let isshow=true
+    let toastgroup='default'
+    // let eventname = arrupdate[1]
+    // let eventtype = arrupdate[0]
+    // let title = ''
+    switch(type){
+        case NotificationStatus.success:
+            duration = 3000
+        break;
+        case NotificationStatus.danger:
+            duration = 0
+        break;
+        case NotificationStatus.warning:
+            duration = 5000
+        break;
+        case NotificationStatus.info:
+            duration = 3000
+        break;
+
+    }
+    // if(type=='error'){
+    //     duration = 0
+    //     severity='error'
+    //     title=upperFirst(eventname) +' failed'
+    // }
+    // else if(type.indexOf('warn')>=0){
+    //     duration = 10000
+    //     severity='warn'
+    //     title=upperFirst(eventname) +' with warning'
+    // }
+    // else if(type.indexOf('info')>=0){
+    //     duration = 3000
+    //     severity='info'
+    //     isshow=false
+    //     title='Info'
+    // }
+    // else if(type.indexOf('success')>=0){
+    //     duration = 3000
+    //     severity='success'
+    //     title= upperFirst(eventname) +' successfully'
+    // }
+    // if(Array.isArray(data)){
+    //     toastgroup='list'
+    // }else if(typeof data == 'object'){
+    //     // title = camelCaseToWords(useCamelCase(title.replace(":","-")))
+    //     eventdata = data.message
+    // }
+    
+    
+    // if(isshow && severity){
+    //     console.log("isshow",isshow,"event:",severity,eventdata)
+         toast.removeAllGroups()
+        resmsg = { severity: type as typeof resmsg['severity'], summary: data.summary, detail :data.data, life: duration, group:toastgroup}
+        toast.add(resmsg)
+    // }
+    // isshow=false
+    
+})
+
+
+const getFieldName = (path:string)=>{
+    const lastword :string= last<string>(path.split('/'))??''
+    return camelCaseToWords(lastword)
+    // const lastField = path.split
+}
+</script>
+<template>
+    <Toast group="default" :pt="{}">
+        <template #message="p">
+            <div class="bg-gray-200 dark:bg-gray-900 h-full w-full border">                
+                <div class=" flex content content-end w-full">
+                    <div role="alert" class="w-full bg-white dark:bg-gray-800 shadow-lg rounded flex flex-row  transition duration-150 ease-in-out" id="notification">
+                        <div :class="'flex items-center justify-center sm:rounded-tl sm:rounded-bl  h-12 sm:h-auto sm:w-auto text-white'+getStatusColor(p.message.severity)">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="40" height="40" fill="currentColor">
+                                <path class="heroicon-ui" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-2.3-8.7l1.3 1.29 3.3-3.3a1 1 0 0 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-2-2a1 1 0 0 1 1.4-1.42z" />
+                            </svg>
+                        </div>
+                        <div class="flex flex-col justify-center  pl-4 xl:pl-1 w-96 pt-4 sm:pb-4 pb-2">
+                            <p class="text-lg text-gray-800 dark:text-gray-100 font-semibold pb-1">{{ p.message.summary }}</p>
+                            
+                            <div v-if="p.message.detail">                            
+                                <p v-if="Array.isArray(p.message.detail)" 
+                                    v-for="item in p.message.detail"
+                                    class="text-sm text-gray-600 dark:text-gray-400 font-normal">
+                                    <span v-if="item.instancePath">{{ item.instancePath }}&nbsp;</span>
+                                    <span v-if="item.message"> {{ item.message }}&nbsp;</span>
+                                    
+                                </p>
+                                <p v-else-if="typeof p.message.detail == 'string'" class="text-sm text-gray-600 dark:text-gray-400 font-normal">{{ p.message.detail }}</p>
+                                <p v-else></p>
+                            </div>
+                        </div>
+                        <div class="rounded m m-6"><button @click="toast.remove(p.message)" class="text-gray-800 hover:text-gray-300 "><i class="pi pi-times"></i></button></div>                       
+                    </div>
+                </div>
+            </div>
+        </template>
+    </Toast>
+    <!-- <Toast group="list">
+        <template #message="p">
+            <div class="bg-gray-200 dark:bg-gray-900 h-full">
+                <div class="relative mx-auto flex justify-center sm:justify-end pt-16 sm:pt-6 pb-6 sm:pb-16 h-64 overflow-x-hidden">
+                    <div role="alert" class="sm:mr-6 mt-16 sm:mt-6 mb-6 sm:mb-0 xl:w-5/12 mx-auto absolute left-0 sm:left-auto right-0 sm:top-0 sm:w-6/12 md:w-3/5 justify-between w-11/12 bg-white dark:bg-gray-800 shadow-lg rounded flex sm:flex-row flex-col transition duration-150 ease-in-out" id="notification">
+                        <div class="sm:px-6 p-2 flex mt-4 sm:mt-0 ml-4 sm:ml-0 items-center justify-center bg-green-400 sm:rounded-tl sm:rounded-bl w-12 h-12 sm:h-auto sm:w-auto text-white">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="40" height="40" fill="currentColor">
+                                <path class="heroicon-ui" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-2.3-8.7l1.3 1.29 3.3-3.3a1 1 0 0 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-2-2a1 1 0 0 1 1.4-1.42z" />
+                            </svg>
+                        </div>
+                        <div class="flex flex-col justify-center xl:-ml-4 pl-4 xl:pl-1 sm:w-3/5 pt-4 sm:pb-4 pb-2">
+                            <p class="text-lg text-gray-800 dark:text-gray-100 font-semibold pb-1">Action Completed</p>
+                            <p class="text-sm text-gray-600 dark:text-gray-400 font-normal">You have successfully completed the survey. You will soon receive a reward email. Stay tuned.</p>
+                        </div>
+                        <div class="flex sm:flex-col sm:justify-center sm:border-l dark:border-gray-700 items-center border-gray-300 sm:w-1/6 pl-4 sm:pl-0">
+                            <div class="sm:pt-4 pb-4 sm:border-b dark:border-gray-700 border-gray-300 sm:w-full flex sm:justify-center">
+                                <span class="sm:text-sm text-xs text-green-400 font-bold mr-4 sm:mr-0 cursor-pointer">View</span>
+                            </div>
+                            <div class="sm:pt-4 pb-4 flex sm:justify-center w-full cursor-pointer" @click="toast.remove(p.message)">
+                                <span class="sm:text-sm text-xs text-gray-600 dark:text-gray-400 cursor-pointer">Dismiss</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <ol>
+                <li v-for="(item,index) in  p.message.detail" :key="index"><b>{{getFieldName(item.instancePath)}}</b>: {{ item.message }}</li>
+            </ol>            
+        </template>
+    </Toast> -->
+</template>

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

@@ -8,7 +8,7 @@ import ButtonProfile from './ButtonProfile.vue';
 <template>
     <!-- <header>       -->
         <!-- <MegaMenu :model="getMenus()" orientation="horizontal" />               -->
-    <div class="bg-white border-b-2 border-b-gray-300  h-10 flex flex-row">
+    <div class="bg-white  border-b-gray-300  h-10 flex flex-row">
         
         
         <div class="flex-1 flex flex-row gap-2 p-2">
@@ -17,7 +17,7 @@ import ButtonProfile from './ButtonProfile.vue';
                 
             </div>            
             <div class="">
-                <ButtonHome @click="navigateTo(`/${getUserProfile().currentxorg}`)"/>                
+                <ButtonHome/>                
             </div>
             
         </div>

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

@@ -18,7 +18,7 @@
     <script setup lang="ts">
     import Dialog from 'primevue/dialog';
     import {onMounted, ref} from 'vue'
-    import {SimpleAppEventType} from '../simpleapp/generate/commons/events'
+    import {EventType} from '../types'
     import ProgressSpinner from 'primevue/progressspinner'
     const {$userstore,$event}= useNuxtApp()
     const disabled = ref(false)
@@ -37,13 +37,13 @@
        
     //    await reloadUserStore()
        await $userstore.decideInvitation(id,'accept')
-       $event(SimpleAppEventType.InvitationAccepted,id)
+       $event('InvitationAccepted',id)
        visible.value=false
     }
     const decline = async (id:string) => {
     //    await reloadUserStore()
        await $userstore.decideInvitation(id,'reject')
-       $event(SimpleAppEventType.InvitationRejected,id)
+       $event('InvitationRejected',id)
        visible.value=false
     }
     

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

@@ -2,7 +2,7 @@
 import _ from 'lodash'
 import {ref} from 'vue'
 
-const selectedbranch = ref(getUserProfile().currentxorg)
+const selectedbranch = ref(getCurrentXorg())
 const currentTenant=ref(getUserProfile().tenantId)
 console.log("currentTenant",currentTenant.value)
 type Org = {orgId:number, label:string,_id:string}
@@ -23,10 +23,13 @@ const getBranchesForOrg = (org:Org)=>{
 const switchXorg = ()=>{
     navigateTo(`/${selectedbranch.value}`,{external:true})    
 }
+
+console.log("selectedbranch",selectedbranch.value)
 </script>
 <template>
     <div>        
-        <select v-model="selectedbranch" class="  text-right" @change="switchXorg()">
+        
+        <select v-if="selectedbranch" v-model="selectedbranch" class="  text-right" @change="switchXorg()">
                     <optgroup v-for="o in orgList" :label="o.label">
                         <option v-for="b in getBranchesForOrg(o)" :value="b['xOrg']">{{ b['branch']['branchCode']}} </option>
                     </optgroup>

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

@@ -1,7 +1,36 @@
-<template>
-    <DataTable v-bind="$attrs" class="simpleapp-datatable" stripedRows :value="valueModel">
+<!-- <template>
+    <DataTable v-bind="$attrs" 
+    stripedRows 
+    dataKey="_id"
+    :pt="{
+             bodyRow:{class:'bg-blue-200'},
+             wrapper:{class:'bg-red-100'},
+            
+             root:{class:'bg-green-100'},
+             header:{class:'bg-blue-600'},
+             pagebutton:{class:'bg-red-800'},
+
+             tfoot:{class:'bg-red-800  boder round m-4 gap-4'},  
+    }"
+
+    :value="valueModel" 
+    :filters="filters"
+    :paginator="true" :rows="20"
+    :rowsPerPageOptions="[20,40,60,100]"
+    filterDisplay="row"
+    >
+
         <template #empty> <div class="text-center">No record found.</div> </template>
-        <template #header><slot name="header"></slot></template>
+        <template #header><slot name="header">
+            <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
+                <h4 class="m-0 flex-1">Records</h4>
+                <span class="p-input-icon-left">
+                    <i class="pi pi-search" />
+                    <InputText v-model="filters['global'].value" placeholder="Search..." />
+                </span>    
+            </div>
+            
+        </slot></template>
         <Column v-for="(col,index) in columns" :field="col" :header="camelCaseToWords(col)"></Column>                        
         <slot >
 
@@ -9,11 +38,128 @@
     </DataTable>
 </template>
 <script setup lang="ts">
+import { FilterMatchMode } from 'primevue/api';
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
 import {camelCaseToWords} from './helper'
-const props = defineProps<{columns:string[]}>()
+const props = defineProps<{columns:string[]|string[][]}>()
 const valueModel = defineModel<Object[]>()
+    const filters = ref({
+    'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
+});
+
+</script> -->
+<template>
+    <DataTable v-bind="$attrs" 
+            stripedRows 
+            dataKey="_id"
+            :showGridlines="true"
+            :pt="{
+                // header:{ class:'border bg-gray-100'},
+                headerRow:{ class:'border bg-gray-200'},                                
+            }"
+            :value="value" 
+            :filters="filters"
+            :paginator="true" :rows="20"
+            :rowsPerPageOptions="[20,40,60,100]"            
+            >
+            <!-- header -->
+            <template #header>
+                <div class=" flex flex-row w-full text-right justify-content-end">
+                    <div class="flex-1">
+                        <slot name="toolbar"></slot>
+                    </div>
+                    <div class="flex-1">
+                        <slot name="title">
+                            <h1 class="text text-2xl pt-2 text-center">{{ title }}</h1>
+                        </slot>
+                        
+                    </div>                    
+                    <span class="p-input-icon-left flex-1">                        
+                        <i class="pi pi-search  mt-4 ml-2 text-gray-400 absolute" />
+                        <InputText type ="search" v-model="filters['global'].value" class="text-right" placeholder="Keyword Search" />                        
+                    </span>
+                </div>
+            </template>
+            <!-- no data found -->
+            <template #empty>
+                <div class="text-center ">
+                    <div class="text-3xl   text-gray-400 pi pi-exclamation-circle"></div>
+                    <div class="text-3xl text-gray-400">no data found</div>
+                    
+                </div>
+            </template>
+
+            <Column v-for="(col,index) in columns"  :field="typeof col == 'string' ? col : col.field">
+                <template v-if="typeof col == 'string'" #header>            
+                    <p >{{ col }}</p>
+                </template>               
+                <template v-else-if="typeof col =='object'" #header>            
+                    <span>{{ col.title }} </span>
+                </template>
+                <template v-else #header>
+                    <span class="text-danger-600">unknown</span>
+                </template>
+                
+                <template v-if="typeof col == 'string'" #body="{index,data}">            
+                    <p >{{ data[col] }}</p>
+                </template>                
+                <template v-else-if="typeof col =='object'" #body="{index,data}">            
+                    <div v-if="col.component && col.field=='*'">
+                        <component  :is="col.component" :value="data" :fields="col.moreFields" :class="col.cssClass" :setting="col.componentSetting"></component>                        
+                    </div>
+                    <div v-else-if="col.component && col.field!='*'">                        
+                        <component :is="col.component" v-model="data[col.field]" :moreFields="col.moreFields" :class="col.cssClass" :setting="col.componentSetting" ></component>                    
+                    </div>
+                    <div v-else class="flex flex-col">                                
+                        <div :class="col.class">{{ data[col.field] }}</div>
+                        <div v-for="(f,findex) in col.moreFields" class="flex flex-col">
+                            <!-- additional field define as string -->
+                            <div v-if="typeof f == 'string'" :class="'text-gray-400 text-sm' + f.cssClass??'' ">{{ data[f] }}</div>
+                            <!-- additional field define as object -->
+                            <div v-else>                                
+                                <div v-if="f.component && f.field=='*'">
+                                    <component  :is="f.component" :value="data"  :class="f.cssClass" :setting="f.componentSetting"></component>                        
+                                </div>
+                                <div v-else-if="f.component && f.field!='*'">              
+                                    <component :is="f.component" v-model="data[f.field]" :class="f.cssClass" :setting="f.componentSetting" ></component>                    
+                                </div>
+                                <div v-else>                                    
+                                    <div :class="f.cssClass">{{ data[f.field] }}</div>
+                                </div>
+                            </div>
+                            
+                            
+                        </div>
+                    </div>                    
+                </template>
+                <template v-else #body>
+                    <span class="text-danger-600">unknown col {{ col }}</span>
+                </template>
+            </Column>            
+            <slot>
+
+            </slot>
+    </Datatable>
+</template>
+<script setup lang="ts">
+import {SearchBody,CellSetting} from '~/types'
+import { FilterMatchMode } from 'primevue/api';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+
+const props = defineProps<{
+    value:any[]
+    columns: CellSetting[]
+    title:string
+    
+    
+}>()
+
+const filters = ref({
+    'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
+});
+
 
+</script>
 
-</script>

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

@@ -0,0 +1,75 @@
+<template>
+    <card>
+        <template #header>
+            <h1 class="font font-bold text text-gray-700">{{ tenant.tenantName }}</h1>
+        </template>
+        <template #content>   
+            
+            <ul >
+                <li v-for="o in orglist">
+                    <h1>{{ o.orgName }}</h1>
+                    <ul role="list" class="divide-y divide-gray-100 rounded-md border border-gray-200">
+                        <li v-for="b in branchlist"   class="flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-6">
+                            <NuxtLink :href="`/${b.xOrg }`"  v-if="o.orgId==b.orgId" :external="true" class="hover:bg-primary-100">                    
+                                <div class="flex w-full flex-1 items-center ">
+                                    <!-- <i class="pi pi-sitemap"></i> -->
+                                    <p class="flex-1 flex-shrink-0 font-bold text-primary-600 ">
+                                        {{ b.branchCode }}
+                                    </p>
+                                    <p class=" text-right min-w-0 flex-1 gap-2">
+                                        <span href="#" class="font-medium text-gray-600 ">{{ b.group }}</span>    
+                                    </p>
+                                </div>
+                                <div class=" flex-shrink-0">
+                                    
+                                    <span class=" font-medium text-gray-400">{{useRuntimeConfig().public.APP_URL}}/{{b.xOrg }}</span>
+                                    
+                                </div>
+                                    
+                                </NuxtLink>
+                            </li>
+                    </ul>
+
+                </li>
+            </ul>
+            
+           <!-- <ul>
+            <li v-for="b in branches" class="border border-b-1">
+                <NuxtLink :href="`/${b.xOrg }`" :external="true">
+
+                    <div class="flex flex-col">
+                        <div class="flex">
+                            <p class="flex-1">{{b.branch.branchCode}}</p>
+                            <p class="flex-1 text-right">{{b.group }}</p>
+                        </div>
+                        
+                        
+                        <p class="text-gray-500">{{useRuntimeConfig().public.APP_URL}}/{{b.xOrg }}</p>
+                        
+                    </div>
+                    
+                </NuxtLink>
+            </li>
+           </ul> -->
+        </template>
+    </card>
+</template>
+
+<script setup lang="ts">
+import _ from 'lodash'
+const props = defineProps<{
+   tenant:any
+}>()
+const branchlist = computed(()=>props.tenant.permissions)
+
+
+const orglist = computed(()=>_.uniqBy(branchlist.value,'orgId')
+        .map((item:any)=>({ orgId:item.orgId,orgCode:item.orgCode,orgName:item.orgName}) ) )
+
+
+
+onMounted(()=>{
+
+})
+
+</script>

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

@@ -0,0 +1,65 @@
+<template>
+  <!-- <ul role="list" class="divide-y divide-gray-100">
+    <li v-for="person in people" :key="person.email" class="flex justify-between gap-x-6 py-5"> -->
+      <div class="flex justify-between gap-x-6 py-5 cursor-pointer">
+        <div class="flex min-w-0 gap-x-4">
+          <img class="h-12 w-12 flex-none rounded-full bg-gray-50" :src="`${getAvatarLink(data.email,32)}`" alt="" />
+          <div class="min-w-0 flex-auto">
+            <p class="text-sm font-semibold leading-6 text-gray-900">{{ data.fullname }}</p>
+            <p class="mt-1 truncate text-xs leading-5 text-gray-500">{{ data.email }}</p>
+          </div>
+        </div>
+        <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
+          
+          <div v-if="isOnline" class="mt-1 flex items-center gap-x-1.5">
+            <div class="flex-none rounded-full bg-emerald-500/20 p-1">
+              <div class="h-1.5 w-1.5 rounded-full bg-emerald-500" />
+            </div>
+            <p class="text-xs leading-5 text-gray-500">Online</p>
+          </div>
+          <p v-else class="mt-1 text-xs leading-5 text-gray-500">            
+            <span v-if="datedifferent.get('years')>0">{{ datedifferent.get('years') }} year(s)</span>
+            <span v-if="datedifferent.get('months')>0">{{ datedifferent.get('months') }} month(s)</span>
+            <span v-if="datedifferent.get('days')>0">{{ datedifferent.get('days') }} day(s)</span>
+            <span v-if="datedifferent.get('hours')>0">{{ datedifferent.get('hours') }} Hour(s)</span>
+            <span v-if="datedifferent.get('minutes')>0">{{ datedifferent.get('minutes') }} min(s)</span>                        
+          </p>          
+          <p class="text-sm text-right leading-6 text-gray-400 w-[120px] truncate ...">
+            {{ data.description }}
+          </p>
+        </div>
+      </div>
+    
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue'
+import moment from 'moment'
+const props = defineProps<{
+  data:any
+}>()
+
+
+
+const datedifferent = computed(()=>{  
+  const data = moment.duration(differentTime.value)
+  return data
+})
+const differentTime =  computed(()=>{
+    const lasttime = new Date(props.data.lastActivity).getTime()
+    const current = new Date().getTime()
+    const result  =  current - lasttime
+    return result
+})
+const isOnline = computed(()=>{
+  if(props.data.lastActivity) {
+    const diffminutes = differentTime.value/ 1000/60
+    return diffminutes < 1
+  }else{
+    return false
+  }
+  
+})
+
+
+</script>

package/templates/nuxt/components/renderers/BooleanRender.vue.eta

@@ -0,0 +1,7 @@
+<template>    
+    <i class="pi" :class="{ 'pi-check-circle text-green-500 ': modelValue, 'pi-times-circle text-red-500': !modelValue }"></i>
+</template>
+<script lang="ts" setup>
+
+const modelValue = defineModel()
+</script>

package/templates/nuxt/components/renderers/DateRender.vue.eta

@@ -0,0 +1,6 @@
+<template >
+    <span>{{ toLocalDate(modelValue) }}</span>
+</template>
+<script lang="ts" setup>
+    const modelValue = defineModel()    
+</script>

package/templates/nuxt/components/renderers/ForeignKeyRender.vue.eta

@@ -0,0 +1,10 @@
+<template>    
+    <NuxtLink :to="getDocumentUrl(setting.collection,modelValue ? modelValue['_id']:'')" class="text-primary-700 hover:text-primary-500">
+        {{modelValue?.label}}
+    </NuxtLink>
+</template>
+<script setup lang="ts">
+const modelValue = defineModel()
+
+const props = defineProps<{setting:any}>()
+</script>

package/templates/nuxt/components/renderers/MoneyRender.vue.eta

@@ -0,0 +1,7 @@
+
+<template>
+    <span>{{ modelValue }}</span>
+</template>
+<script lang="ts" setup>
+const props = defineProps(['modelValue'])
+</script>

package/templates/nuxt/components/renderers/MultiTextRender.vue.eta

@@ -0,0 +1,11 @@
+
+<template>
+    <p v-for="(f,index) in fields" >
+        <span v-if="index==0">{{ value[f] }}</span>
+        <span v-else class="text-gray-400 text-sm">{{ value[f] }}</span>
+    </p>
+</template>
+<script lang="ts" setup>
+const props = defineProps(['value','fields'])
+
+</script>

package/templates/nuxt/composables/getDocument.generate.ts.eta

@@ -0,0 +1,4 @@
+import {getAllDocuments} from '~/simpleapp/generate/commons/documents'
+export const getDocument = (docname:string) =>{
+        return getAllDocuments().find((item)=>item.docName==docname)?.docClass
+}