@simitgroup/simpleapp-generator 1.1.1 → 1.1.3

package/templates/nuxt/assets/css/style.css._eta

@@ -1,7 +1,11 @@
-.router-link-exact-active{
-    @apply  bg-primary-100 block
+
+[disabled] ,[readonly]{
+    @apply bg-gray-300 dark:bg-gray-900
 }
 
+[aria-selected=true]{
+    @apply bg-primary-100
+}
 
 [data-pc-group-section=pagebutton]{
     @apply p-2 m-0 rounded-none border
@@ -9,27 +13,41 @@
 [data-pc-section=pagebutton]{
     @apply p-3 m-0 border
 }
+
+
+input {
+    @apply  bg-opacity-0	 bg-black
+}
+
+.route-link-list {
+ @apply hover:bg-secondary-200  dark:hover:bg-gray-800 
+}
+
+.router-link-exact-active{
+    @apply  bg-primary-100  dark:bg-gray-800  block
+}
+
+
+.title-text{
+    @apply text-xl font-bold text-gray-700
+}
+.subtitle-text{
+    @apply text-base text-gray-500
+}
+
 .btn {
-    @apply font-medium
+    @apply font-medium  text-gray-50 dark:text-gray-300 border
 }
 
 .btn-primary {
-    @apply bg-primary-600 hover:bg-primary-400 text-white
+    @apply btn bg-primary-600 hover:bg-primary-400 dark:!bg-primary-700 dark:hover:bg-primary-800 
 }
 .btn-secondary {
-    @apply bg-secondary-600 hover:bg-secondary-400 text-white
+    @apply btn bg-secondary-600 hover:bg-secondary-400 
 }
 .btn-danger {
-    @apply bg-danger-600 hover:bg-danger-400 text-white
+    @apply btn bg-danger-600 hover:bg-danger-400  dark:bg-danger-700 dark:hover:bg-danger-800 
 }
 .btn-warn {
-    @apply bg-warning-600 hover:bg-warning-400 text-white
+    @apply btn bg-warning-600 hover:bg-warning-400 
 }
-
-[disabled] ,[readonly]{
-    @apply bg-gray-300
-}
-
-[aria-selected=true]{
-    @apply bg-primary-100
-}

package/templates/nuxt/assets/primevue/passthrough.ts._eta

@@ -13,22 +13,29 @@ const CustomTailwind = usePassThrough(
             content:{class:'flex flex-row-reverse w-full'},
             buttonContainer:{class:'hidden'},
         },
-        card:{root:{class:'shadow p-4'}},       
-        tabpanel:{headerTitle:{class:'m-3 p-3 bg bg-text-300'},},
+        card:{
+            root:{class:'shadow p-4 rounded-2xl m-2'},
+            // title:{class:''},
+            // header:{class:''}
+        },       
+        tabpanel:{
+            headerTitle:{class:'m-0 p-0'},            
+        },
         selectbutton:{
             root:{class:'flex flex-row gap-1'},
             button: ({ context }) => ({
-                class: ['text-center border rounded  p-2 cursor-pointer hover:bg-primary-400 hover:text-white', context.active ? 'bg-primary-600 text-white' : '']
+                class: ['text-center border-gray-400 dark:border-gray-700 text-gray-50 dark:text-gray-300 rounded-lg  p-2 cursor-pointer hover:bg-primary-400 dark:hover:bg-primary-800 hover:text-white', context.active ? 'bg-primary-600  dark:bg-primary-700 text-white' : '']
             }),
             label:{class: 'text-sm'},
         },
-        button:{root:{class: 'focus:outline-none transition duration-150 ease-in-out rounded px-8 py-2 m-1 border'}},
+        button:{root:{class: 'focus:outline-none transition duration-150 ease-in-out rounded p-2 m-1 border dark:border-gray-600'}},
         dialog:{root:{class:['border p-2']}},        
         autocomplete:{
-            input:{class:'m-0 font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40  rounded-lg  rounded-tr-none rounded-br-none transition-colors duration-200 appearance-none hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] p-3 text-base flex-1'},
-            loadingIcon:{class:'animate-spin mt-4 -ml-6 mr-2'},
+            root:{class:'border border-gray-300 dark:!border-blue-900/40  rounded-lg flex flex-row'},
+            input:{class:'w-full p-2 font-sans  rounded-lg  rounded-tr-none rounded-br-none transition-colors duration-200 appearance-none hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]  text-base'},
+            loadingIcon:{class:'hidden'},
             dropdownbutton: {
-                root:' bg-primary-600 hover:bg-primary-400 text-white rounded flex flex-row  p-3  -ml-6 rounded-tl-none rounded-bl-none '
+                root:' btn-primary dark:shadow-primary-800 dark:border-primary-900 text-white rounded-lg flex flex-row  p-3 rounded-tl-none rounded-bl-none '
             }
         },
         sidebar:{

package/templates/nuxt/components/debug/DebugDocumentData.vue.eta

@@ -1,3 +1,24 @@
+<template>
+    <div class="p-0 top-0  absolute left-1/2 text-right bg-yellow-200" v-if="isdebug=='1'">
+        <Button @click="visible=true"  class=" text-white bg-warning-800">
+            <i class="pi pi-code"></i>
+            {{ label }}</Button>      
+        <Sidebar v-model:visible="visible" class="text-red-100">
+            
+            <template #header >
+                <h1 class="text-gray-700 text-lg font-bold content-center">{{ label }} Data</h1>    
+            </template>
+            <template #default>                
+                <pre class="border rounder-lg m-0 p-0 dark:bg-gray-500">{{ modelValue }}
+                </pre>                
+            </template>
+                
+        </Sidebar>
+
+    </div>
+        
+</template>
+
 <script setup lang="ts">
 /**
  * This file was automatically generated by simpleapp generator during initialization.
@@ -14,28 +35,8 @@ import {ref} from 'vue'
 const modelValue = defineModel()
 const isdebug = ref(useRuntimeConfig().public.DEBUGDATA)
 const visible = ref(false)
-const props = defineProps<{label?:string}>()
-const label = ref(props.label??'Debug')
+const props = withDefaults(defineProps<{label?:string}>(),{label:'label'})
+const buttonlabel = computed(()=>props.label??'debug')
 const op = ref();
 
 </script>
-<template>
-    <div class="floatright" v-if="isdebug=='1'">
-        <Button @click="visible=true" >{{ label }}</Button>      
-        <Sidebar v-model:visible="visible">
-            <pre class="pb-2">{{ modelValue }}</pre>
-        </Sidebar>
-
-    </div>
-        
-</template>
-<style scoped>
-.floatright{
-    position: fixed;
-    right: 0;
-    background-color: antiquewhite;
-    font-size: large;    
-    top: 20;
-    z-index: 999999;
-}
-</style>

package/templates/nuxt/components/docPage/DocPageList.vue.eta

@@ -0,0 +1,117 @@
+<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 {ref} from 'vue'
+import _ from 'lodash'
+import { SimpleAppClient } from  '~/simpleapp/generate/clients/SimpleAppClient' //'../SimpleAppClient';
+
+import {SearchBody,CellSetting} from '~/types'
+const props = withDefaults(defineProps<{
+    document:SimpleAppClient<any,any>
+    columns:CellSetting[]    
+    layoutClass?:string
+    col1Class?:string
+    col2Class?:string
+    sorts?: string[][]
+}>(),{
+  layoutClass:'grid grid-cols-2',
+  col1Class:'p-4',
+  col2Class:'p-4'
+})
+const resourcename = ref( _.upperFirst(props.document.getDocName()))
+const visible = ref(false)
+const doc = props.document
+const data = doc.getReactiveData()
+const disabled=ref(false)
+const recordlist = ref();
+const router = useRouter()
+const route = useRoute()
+const filters = ref()
+const popuptitle = ref("New "+doc.getDocName())
+const systemwindows = ref(false)
+const {$event,$listen} = useNuxtApp()
+
+const refresh = () => {
+  const searchbody: SearchBody = {
+    fields: getWantedFields(props.columns),
+    sorts:props.sorts
+  }
+  console.log('searchbody',searchbody)
+  doc.search(searchbody).then((res:any) => { 
+    console.log("refreshrefreshrefresh",recordlist.value)   
+    recordlist.value = res;
+    disabled.value=false
+  });
+};
+const newData = () => {
+  router.push({ path: getDocumentUrl(doc.getDocName(),'new') })  
+  doc.setNew()    
+  visible.value=true;
+};
+
+
+
+
+onNuxtReady(()=>{
+  refresh()   
+})
+$listen('RefreshDocumentList',(data)=>{
+  if(data.documentName == doc.getDocName()){
+    refresh()
+  }
+})
+
+const getWantedFields = (selectedCols:CellSetting[]) =>{
+        let cols:string[] = []
+        
+        selectedCols.forEach((item)=>{
+
+            if(typeof item=='string'){
+                cols.push(item)
+            }else if(typeof item =='object'){
+                if(item.field !='*'){
+                    cols.push(item.field)
+                }
+                if(item.moreFields && item.moreFields.length>0){
+                    cols = cols.concat(item.moreFields)
+                }                
+            }
+        })        
+        return cols
+    }
+
+const selectRow =  (data:any) =>{  
+  console.log("select row",data)
+  goTo(doc.getDocName(),data._id)  
+}
+</script>
+ 
+<template>
+    <div class="simpleapp-crudsimple">    
+      <h1 v-if="systemwindows" class="error-text text-center">* system administration screen</h1>      
+      <div :class="layoutClass">
+        <div v-if="recordlist" :class="col1Class">
+          <TableDocuments :value="recordlist" :columns="columns" :title="doc.getDocName()"  @select-row="selectRow"> 
+            <template #toolbar>
+                <div class="w-full text-left">
+                    <Button class=" btn-primary" @click="newData" v-tooltip="'Add new(ctrl+enter)'" v-if="canPerform(resourcename,'create')">{{ t('new') }}</Button>
+                </div>                
+            </template>
+            <template #additionaltoolbar>
+                <Button class="bg-secondary-600 hover:bg-secondary-400 text-white" @click="refresh()" type="button" >{{ t('refresh') }}</Button>                                                                            
+            </template>
+        </TableDocuments>  
+      
+        </div>
+        <div :class="col2Class">
+          <slot>
+              undefine page content
+          </slot> 
+        </div>
+      </div>            
+    </div>
+</template>

package/templates/nuxt/components/event/EventDocumentViewer.vue.eta

@@ -0,0 +1,72 @@
+<template>
+    <Dialog v-model:visible="visible" 
+        @update:visible="closeDialog" 
+        :pt="{root:{class:'w-5/6 h-5/6'}}"
+        :modal="true" 
+        :close-on-escape="false" >                
+        <template #header>
+            <div class="flex flex-row">
+                <Chip v-for="(v,index) in allview" :label="v.label" @remove="deleteTab" :removable="index == allview.length-1"/>
+            </div>            
+        </template>
+        <template #default>
+            <div v-for="(v,index) in allview">
+                <component v-if="index == allview.length-1" :is="defineAsyncComponent(v.viewer)" :_id="v._id" :readonly="v.readonly" @after-create="callback(v,$event)"></component>
+            </div>
+        </template>                
+    </Dialog>
+</template>
+<script setup lang="ts">
+import { onKeyStroke } from '@vueuse/core'
+
+import { useDialog } from 'primevue/usedialog';
+import {defineAsyncComponent} from 'vue'
+import { ViewRecord } from '~/types';
+// import TabView from 'primevue/tabview';
+import Chip from 'primevue/chip';
+
+const tabindex =ref(0)
+const activetabindex=ref(0)
+const findindex = ref(0)
+const dialog = useDialog()
+const {$listen,} = useNuxtApp()
+const visible = ref(false)
+const _id = ref('')
+const ViewRecordComponent = ref()
+const readonly =  ref<boolean>()
+const allview = ref<ViewRecord[]>([])
+
+const callback = (v:ViewRecord,data:any)=>{
+    if(v.afterCreate){
+        v.afterCreate(data)
+    }
+    deleteTab()
+}
+onKeyStroke('Escape', (e) => {
+  e.preventDefault()
+  deleteTab()
+})
+
+const deleteTab=()=>{
+    
+    const index = allview.value.length- 1
+    allview.value.splice(index,1)
+
+    if(allview.value.length==0){
+        visible.value=false
+        return
+    }else{
+        activetabindex.value = activetabindex.value >0 ? activetabindex.value - 1 : 0
+    }
+}
+const closeDialog = ()=>{
+    allview.value=[]
+}
+$listen('ViewRecord',(setting)=>{     
+    visible.value=true    
+    allview.value.push(setting)
+    activetabindex.value = allview.value.length-1
+    
+})
+
+</script>

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

@@ -8,32 +8,34 @@
 <template>
     <!-- <header>       -->
         <!-- <MegaMenu :model="getMenus()" orientation="horizontal" />               -->
-    <div class="bg-white  border-b-gray-300  h-10 flex flex-row">
+    <client-only>
+    <div class="flex flex-row">
         
         
         <div class="flex-1 flex flex-row gap-2 p-2">
             <div class="">
-                <HeaderButtonMenuPicker/>
-                
-            </div>            
-            <div class="">
-                <HeaderButtonHome/>                
-            </div>
+                <HeaderButtonMenuPicker/>                
+            </div>     
             
+            <!-- <div class="">
+                <HeaderButtonHome/>                
+            </div> -->
+            <HeaderBreadcrumb class="hidden md:block" v-if="useRoute().fullPath!='/'"></HeaderBreadcrumb>       
         </div>
         <div class="flex-1 flex flex-row-reverse  gap-2 p-2">
 
             <div class=" text-right">
-                <HeaderButtonProfile/>                                
+                <HeaderButtonProfile/>
             </div>
          
-            <div class="">
+            <!-- <div class="">
                 <HeaderSelectBranch/>              
-            </div>        
+            </div>         -->
         </div>
 
         
         
     </div>
+    </client-only>
     <!-- </header> -->
 </template>

package/templates/nuxt/components/header/HeaderBreadcrumb.vue.eta

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import OverlayPanel from 'primevue/overlaypanel';
+const op = ref()
+
+const home = ref({
+    icon: 'pi pi-home',
+    url: '/'
+
+});
+const items = computed(()=>{
+    const fullpath = useRoute().fullPath    
+    let path = fullpath
+    const params = useRoute().params
+    const name = useRoute().meta.name
+    const data = []
+    const patharr = fullpath.split('/').filter((item)=>item!='')
+    let pathurl = ''
+    for(let i=0; i< patharr.length;i++){
+        const p = patharr[i]
+        pathurl = `${pathurl}/${p}`        
+        let pathlabel = ''
+        if(i==0 && params['xorg']){
+            
+            pathlabel = getUserProfile().branchName
+            data.push ({ label: pathlabel }) 
+        }else{
+            pathlabel = t(p)
+            data.push ({ label: pathlabel  , url:pathurl}) 
+        }
+
+           
+    }
+    if(params['xorg']){
+    
+     path = path.replace('/'+params['xorg'],'')
+    }
+
+    return data
+})
+
+const showSwitcher=(event:any)=>{
+    op.value.toggle(event)
+}
+
+const getBranches = ()=>{
+    const orgId = getUserProfile().orgId
+    const tenantId=getUserProfile().tenantId
+    return getUserProfile().branches.filter((item:any)=>{return item.branch.tenantId == tenantId &&  item.branch.orgId == orgId})    
+}
+</script>
+<template>
+    <Breadcrumb :home="home" :model="items" class="!p-0 border-none ">
+                <template #item="{ item }">
+                        <NuxtLink :to="item.url" v-if="item.url" :active-class="'-'" :exact-active-class="'-'">
+                            <span :class="item.icon"></span>{{ item.label }}
+                        </NuxtLink>
+                        <div v-else>
+                            <span class="cursor-pointer" @click="showSwitcher">{{ item.label }}</span>
+                            <OverlayPanel ref="op">
+                                <div>
+                                    <ul class="flex flex-col">
+                                        <li  v-for="b in getBranches()" class="p-1 route-link-list ">
+                                            <NuxtLink  :to="'/'+b['xOrg']" >
+                                            {{ b['branch']['branchCode']}} - {{ b['branch']['branchName']}}
+                                            </NuxtLink>          
+                                        </li>
+                                    </ul>
+                                </div>
+                            </OverlayPanel>
+                        </div>
+
+                </template>
+                <template #separator> <span class="pi pi-chevron-right"></span></template>        
+    </Breadcrumb>    
+
+</template>

package/templates/nuxt/components/header/button/HeaderButtonMenuPicker.vue.eta

@@ -3,18 +3,19 @@ import Dialog from 'primevue/dialog';
 import {ref} from 'vue'
 import {MenuData} from '~/types'
 const visible = ref(false)
-const menus = getMenus();
+
 // const emit = defineEmits(['select'])
 const selectMenu = (menu:MenuData) =>{
   navigateTo(menu.url)
   visible.value=false
+  
   // emit('select',menu)
 }
 </script>
 <template>
   <div>
 
-    <button class="text-center border-none  cursor-pointer" v-if="useRoute().params.xorg" @click="visible=true">
+    <button class="text-center border-none  cursor-pointer" v-if="getCurrentXorg()" @click="visible=true">
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
       </svg>
@@ -22,17 +23,14 @@ const selectMenu = (menu:MenuData) =>{
 
      <Dialog v-model:visible="visible" modal header="Pick Document" :pt="{dialog:{ class:' bg-primary-800 ' }}">
       <div class="">
-          <Button v-for="menu in menus" @click="selectMenu(menu)" >
+          <Button v-for="menu in getMenus()" @click="selectMenu(menu)" >
             <div v-if="menu.isolationType == 'none'" class="text-warning-600 hover:text-warning-500">
               * {{ camelCaseToWords(menu.label) }}
             </div>
             <div v-else class="">{{ camelCaseToWords(menu.label) }}</div>
           </Button>
         </div>
-    </Dialog>
-       
-
-    
+    </Dialog>           
   </div>
 </template>
 <style scoped>

package/templates/nuxt/components/header/button/HeaderButtonProfile.vue.eta

@@ -1,9 +1,14 @@
 <script setup lang="ts">
 import Avatar from 'primevue/avatar';
+import Dropdown from 'primevue/dropdown';
 import OverlayPanel from 'primevue/overlaypanel';
 import {ref} from 'vue'
 
+
+const { locale,setLocale,locales } = useI18n()
+const mylocale = ref(locale)
 const userprofileoverlay = ref();
+const colors = [{value:'light', name:'Light'},{value:'dark', name:'Dark'}]
 const toggle = (event:any) => {
     userprofileoverlay.value.toggle(event);   
 }
@@ -21,6 +26,11 @@ const toFrontpage = () =>{
     userprofileoverlay.value.toggle();   
     navigateTo('/')
 }
+const saveLocale=async (v:string)=>{    
+    await setLocale(v)
+} 
+
+
 
 </script>
 
@@ -29,10 +39,10 @@ const toFrontpage = () =>{
         <div class=" w-[120px] truncate ...">
             
             <div class="flex flex-row-reverse  cursor-pointer border-none w-full" @click="toggle">                    
-                <p>{{ getUserProfile().fullName }}</p>
+                <p>{{ getProfileFullName() }}</p>
                 <!-- <Avatar :image="getUserStore().getAvatarLink(32)" class="" size="normal" shape="circle" />                 -->
                 <div class="w-8 h-8 bg-cover bg-center rounded-md">
-                    <img :src="getAvatarLink(getUserProfile().email,32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" />
+                    <img :src="getAvatarLink(getProfileEmail(),32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" />
                 </div>
             </div>
             
@@ -42,21 +52,42 @@ const toFrontpage = () =>{
                 <div class="py-2 transition duration-150 ease-in-out z-10 absolute top-0 right-0 bottom-0 left-0" id="modal">
                     <div role="alert" class="container mx-auto w-full md:w-full max-w-lg">
                         <div class="relative p-4 md:p-8 bg-white dark:bg-gray-800 shadow-md rounded border border-gray-400">
-                            <div class="w-full flex items-center justify-start text-gray-600 dark:text-gray-400 mb-5 cursor-pointer" @click="toProfile">
+                            <div class="w-full flex items-center justify-start text-gray-600 dark:text-gray-400 mb-5" >
                                 <div class="w-12 h-12 bg-cover bg-center rounded-md">
-                                    <img :src="getAvatarLink(getUserProfile().email,32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" />
+                                    <img :src="getAvatarLink(getProfileEmail(),32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" />
                                 </div>
-                                <div class="flex flex-col cursor-pointer" >
+                                <div class="flex flex-col" >
                                     <h1 class="text-left text-gray-800 dark:text-gray-100 font-lg font-bold tracking-normal leading-tight ml-2">{{ getUserProfile().fullName }}</h1>
                                     <p  class="text-gray-400 dark:text-gray-100 font-normal text-base tracking-normal ml-2 mr-4">{{getUserProfile().group }}</p>
                                 </div>
                                 
                             </div>
+                            <!-- language -->
+                            <div class="col-span-full">
+                                <label for="pick-lang" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-300">{{ t('language') }}</label>
+                                <div class="mt-2">
+                                    <Dropdown inputId="pick-lang" @update:model-value="saveLocale" v-model="mylocale" option-value="code" option-label="name" :options="locales" >                                    
+                                    </Dropdown>
+                                    <!-- <select v-model="$colorMode.preference" id="picklang">
+                                        <option value="light">Light</option>
+                                        <option value="dark">Dark</option>
+                                    </select> -->
+                                </div>
+                            </div>
+                            <div class="mt-3 col-span-full">
+                                <label for="pick-theme" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-300">{{ t('theme') }}</label>
+                                <div class="mt-2">
+                                    <Dropdown inputId="pick-theme" v-model="$colorMode.preference" option-value="value" option-label="name" :options="colors" >                                    
+                                    </Dropdown>
+                                   
+                                </div>
+                            </div>
+
                             
-                            <div class="flex items-center justify-start w-full">
-                                <button class="focus:outline-none transition duration-150 ease-in-out hover:bg-gray-600 bg-gray-700 rounded text-white px-8 py-2 text-sm" @click="toFrontpage">Tenant</button>
+                            <div class="mt-3 flex items-center justify-start w-full">
+                                <button class="focus:outline-none transition duration-150 ease-in-out hover:bg-gray-600 bg-gray-700 rounded text-white px-8 py-2 text-sm" @click="toProfile">{{ t('profile') }}</button>
                                 <!-- <button class="focus:outline-none transition duration-150 ease-in-out bg-gray-600  rounded text-white px-8 py-2 text-sm" @click="toFrontpage">Pick Tenant</button> -->
-                                <button class="focus:outline-none ml-3 bg-warning-100 dark:bg-warning-700 dark:border-warning-700 dark:hover:bg-warning-600 transition duration-150 text-gray-600 dark:text-gray-400 ease-in-out hover:border-gray-400 hover:bg-gray-300 border rounded px-8 py-2 text-sm" @click="logout()">Logout</button>
+                                <button class="focus:outline-none ml-3 bg-warning-100 dark:bg-warning-700 dark:border-warning-700 dark:hover:bg-warning-600 transition duration-150 text-gray-600 dark:text-gray-400 ease-in-out hover:border-gray-400 hover:bg-gray-300 border rounded px-8 py-2 text-sm" @click="logout()">{{ t('logout') }}</button>
                             </div>                            
                         </div>
                     </div>

package/templates/nuxt/components/list/ListView.vue.eta

@@ -13,8 +13,10 @@
                 <li v-for="item in filterlist">                    
                     <div  :class="getSelectedCSS(item)">
                         <NuxtLink :to="`${url}/${item[idField]}`">
-                            <div class="mr-2">{{item[titleField]  }}</div>
-                            <div class="font font-bold text-right">{{item[subTitleField]}}</div>
+                            <slot>
+                                <div class="mr-2">{{item[titleField]  }}</div>
+                                <div class="font font-bold text-right">{{item[subTitleField]}}</div>
+                            </slot>
                         </NuxtLink>
                     </div>
                 

package/templates/nuxt/components/renderer/RendererForeignKey.vue.eta

@@ -1,11 +1,30 @@
 <template>    
-    <NuxtLink  v-if="setting?.collection" :to="getDocumentUrl(setting.collection,modelValue ? modelValue['_id']:'')" class="text-primary-700 hover:text-primary-500 cursor-pointer">        
+    <span  v-if="setting?.collection" @click="viewRecord" class="text-primary-700 hover:text-primary-500 cursor-pointer">        
         {{modelValue?.label}}
-    </NuxtLink>
+    </span>
     <span v-else>{{modelValue?.label || modelValue}}</span>
 </template>
 <script setup lang="ts">
-const modelValue = defineModel()
 
+
+const modelValue = defineModel<{label:string,_id:string}>()
 const props = defineProps<{setting:any}>()
+const {$event} = useNuxtApp()
+const viewer=ref()
+const viewRecord = () => {
+    viewer.value = getDocument(props.setting.collection)?.viewer
+    
+    // getDocumentUrl(setting.collection,modelValue ? modelValue['_id']:'')
+    //getDocumentUrl(setting.collection,modelValue ? modelValue['_id']:'')
+    $event('ViewRecord',{
+        _id: modelValue.value?._id as string,
+        label: modelValue.value?.label as string,
+        eventId: crypto.randomUUID(),
+        documentName: props.setting.collection,
+        viewer: viewer.value,
+        readonly:true
+
+    })
+
+}
 </script>