@simitgroup/simpleapp-generator 1.2.6 → 1.2.8

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

@@ -0,0 +1,50 @@
+
+/* calendar */
+
+#monthviewcal .vuecal__cell--current,
+#monthviewcal .vuecal__cell--today {
+  background-color: lightblue;
+}
+#monthviewcal .vuecal__cell--selected {
+  background-color: lightgreen;
+}
+
+#monthviewcal .vuecal__cell {
+  height: 3rem;
+}
+
+#resourceviewcal .vuecal__event {
+border-radius: 0.5rem;
+}
+#resourceviewcal .vuecal__time-column {
+  margin-top: 3rem;
+  /* background-color: red; */
+}
+
+#resourceviewcal .vuecal__split-days-headers{
+  min-height: 3rem;
+  /* background-color: blue; */
+  /* margin-left:-4rem; */
+}
+#resourceviewcal .vuecal__event {
+border: solid 1px #ccc !important;
+}
+
+
+
+
+#resourceviewcal .nostudent{
+    background-color: aqua;
+}
+#resourceviewcal .full{
+  @apply bg-orange-700 text-white
+    /* background-color: darkorange; */
+    /* color:white; */
+}
+#resourceviewcal .overlimit{
+    background-color: darkred;
+    color:white;
+}
+#resourceviewcal .default{
+    background-color: lightblue;
+}

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

@@ -15,7 +15,7 @@
 }
 
 body {
-    @apply bg-gray-50  dark:bg-gray-800
+    @apply bg-gray-50  dark:bg-gray-800  h-screen w-screen overflow-y-scroll 
 }
 
 input {
@@ -56,7 +56,3 @@ input {
 .btn-warn {
     @apply btn bg-warning-600 hover:bg-warning-400 
 }
-
-.simpleapp-input-label{
-    @apply  text-left
-}

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

@@ -4,17 +4,19 @@ import Tailwind from "primevue/passthrough/tailwind";
 
 const CustomTailwind = usePassThrough(
     Tailwind,
-    {
-
+    {        
+        avatar:{
+            root:{ class:'h-full w-full'},
+        },
         toast:{
-            root:{ class:'w-1/3 '},
-            message:{},
-            container:{class:'w-full ' },
-            content:{class:'flex flex-row-reverse w-full'},
-            buttonContainer:{class:'hidden'},
+            root:{ class:'w-full md:w-1/2 lg:w-1/3 ml-4' , style:'position: fixed; top: 0px; right: 0px; z-index: 1102;'},
+            // message:{},
+            // container:{class:'w-full ' },
+            // content:{class:'flex flex-row-reverse w-full'},
+            // buttonContainer:{class:'hidden'},
         },
         card:{
-            root:{class:'shadow p-4 rounded-2xl m-2'},
+            root:{class:'bg-white dark:bg-gray-600  shadow p-4 rounded-2xl m-2'},
             // title:{class:''},
             // header:{class:''}
         },       
@@ -22,18 +24,33 @@ const CustomTailwind = usePassThrough(
             headerTitle:{class:'m-0 p-0'},            
         },
         selectbutton:{
-            root:{class:'flex flex-row gap-1'},
+            root:{class:'flex flex-row gap-1 '},
             button: ({ context }) => ({
-                
-                class: ['text-center border text-gray-300 dark:border-gray-700  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' : '']
+                class: ` focus:outline-none transition duration-150 ease-in-out rounded p-2 m-1 border dark:border-gray-600   ${context.active ? 'bg-primary-600 border-primary-400 text-white' : ''}`
             }),
-            label:{class: 'text-sm'},
+            // button: ( context)  => ({
+                
+            //     class: ['text-center border text-gray-400 dark:border-gray-700  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 dark:text-white'},
+        },
+        checkbox:{
+            input:{ class:' flex items-center justify-center border-2 w-6 h-6 text-gray-600  rounded-lg transition-colors duration-200 border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-500 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]'}
+            // p-checkbox p-component cursor-pointer inline-flex relative select-none align-bottom w-6 h-6
+             
         },
         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  h-4/5']}},        
+        dialog:{
+            root:{class:['border w-full max-h-full max-w-full md:h-3/4 lg:h-1/2']},
+            header:{class: 'p-dialog-header flex items-center  text-2xl justify-between shrink-0 bg-white text-gray-800 border-t-0  rounded-tl-lg rounded-tr-lg p-6 dark:bg-gray-900  dark:text-white/80'},
+            content:{class:'p-dialog-content overflow-y-auto bg-white text-gray-700 px-6 pb-8 pt-0 dark:bg-gray-900  dark:text-white/80 rounded-bl-lg rounded-br-lg h-full'}
+        },        
+        calendar:{
+            root:{class:'border border-grey-900 dark:!border-blue-900/40  rounded-lg flex flex-row p-0'},            
+            input:{class:'w-full p-inputtext p-component font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none hover:border-blue-500 rounded-lg'},
+        },
         autocomplete:{
-            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'},
+            root:{class:'border border-gray-400 dark:!border-blue-900/40  rounded-lg flex flex-row'},
             loadingIcon:{class:'hidden'},
             dropdownbutton: {
                 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 '
@@ -41,8 +58,9 @@ const CustomTailwind = usePassThrough(
         },
         sidebar:{
             root:{class:'w-full md:w-1/2 xl:w-1/4   bg-white dark:bg-gray-800 border p-0 h-full'},
+            header:{class:'dark:text-white text-2xl p-2'},
             content:{class:'p-0 pt-0 h-full w-full grow overflow-y-auto'}
-        },
+        },        
         panel: {
             root:{class:['border']},
             title: {class: ['leading-none font-light text-2xl']},
@@ -51,6 +69,10 @@ const CustomTailwind = usePassThrough(
         },
         breadcrumb:{
             root:{class:''}
+        },
+        inputnumber:{
+            // root:{class:''},
+            input:{class:'bg-white dark:bg-white text-black dark-text-black'}
         }
     },
 );

package/templates/nuxt/components/button/ButtonDanger.vue._eta

@@ -0,0 +1,6 @@
+<template>
+    <!-- this component allow modify -->
+    <Button class="btn-danger">
+        <slot></slot>
+    </Button>
+</template>

package/templates/nuxt/components/button/ButtonDefault.vue._eta

@@ -0,0 +1,6 @@
+<template>
+    <!-- this component allow modify -->
+    <Button>
+        <slot></slot>
+    </Button>
+</template>

package/templates/nuxt/components/button/ButtonPrimary.vue._eta

@@ -0,0 +1,6 @@
+<template>
+    <!-- this component allow modify -->
+    <Button class="btn-primary">
+        <slot></slot>
+    </Button>
+</template>

package/templates/nuxt/components/button/ButtonWarning.vue._eta

@@ -0,0 +1,6 @@
+<template>
+    <!-- this component allow modify -->
+    <Button class="btn-warn">
+        <slot></slot>
+    </Button>
+</template>

package/templates/nuxt/components/calendar/CalendarByResource.vue.eta

@@ -0,0 +1,188 @@
+<template> 
+    <VueCal
+        
+        :id="id"
+        ref="vueresourcecal"
+        :disable-views="['years', 'year', 'month', 'week']"
+        :time-from="8 * 60"
+        :time-to="22 * 60"
+        :time-step="60"
+        active-view="day"
+        :snap-to-time="15"
+        hide-view-selector
+        :events="allevents"
+        :editable-events="calendarMode"
+        :split-days="allresources"
+        :min-split-width="100"
+        
+        :sticky-split-labels="true"
+        sticky-split-labels
+        
+        :selected-date="selectedDate"
+        :drag-to-create-threshold="15"        
+        @event-drag-create="onDragNew"
+        @event-drop="onEventDrop"
+        @view-change="viewChange"
+        @cell-click="onCellClick"
+        @cell-contextmenu="eventHappend"
+        
+    >
+        <!-- header template -->
+        <template #split-label="{ split, view }">
+        <div
+            @click="clickResource(split._id, split.label)"
+            class="cursor-pointer"
+        >
+            <!-- <div
+            v-if="resourceType == CalResourceType.teacher && split.email"
+            class="w-full text-center"
+            >
+            <img
+                :src="getAvatarLink(split.email, 48)"
+                class="overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow"
+            /> -->
+            <div>{{ split.displayName }} <span v-if="split._id == '?'" class="pi pi-plus"></span></div>
+            <!-- </div>
+            <div v-else>{{ split.displayName }}</div> -->
+            
+        </div>
+        </template>
+
+        <!-- event template -->
+        <!--  @contextmenu="onRightClick($event, event)" -->
+        <template #event="{ event, view }">
+            <div 
+                @click="onRightClick($event,event)"
+                class="cursor-pointer"
+            >            
+            <slot name="default" :event="<CalEventType<T>>event">
+                <div>{{ event.title }}</div>
+                <div>{{ event.start }}</div>
+                <div>{{ event.end }}</div>
+            </slot>                
+            </div>
+        </template>
+    </VueCal>
+</template>
+<script setup lang="ts" generic="T">
+
+
+import "vue-cal/dist/vuecal.css";
+import VueCal, { Event, SplitDaysAttributes } from "vue-cal";
+import { CalEventType,CalViewClickSlotEvent,CalResource,CalResourceType,RelocateEvent } from '~/types'
+import { emit } from "process";
+import moment from 'moment'
+const timezoneoffset = new Date().getTimezoneOffset() 
+const eventsdata = ref<CalEventType<T>[]>()
+const vueresourcecal = ref()
+const emits = defineEmits(['eventRghtClick','eventClick','eventDrop','eventDragNew','viewChange','resourceClick','slotClick'])
+const props = defineProps<{
+    id:string    
+    items:CalEventType<T>[]
+    resources:CalResource[]
+    resourceType:CalResourceType
+}>()
+const selectedDate = defineModel<Date>()
+const selectedSchedule = ref<CalResource>();
+
+
+
+const allevents = computed(()=>{  
+
+    const list =  props.items.map(item=>{                           
+        if(item.start instanceof Date) item.start =item.start.addMinutes(timezoneoffset).format('YYYY-MM-DD HH:mm')            
+        if(item.end instanceof Date) item.end = item.end.addMinutes(timezoneoffset).format('YYYY-MM-DD HH:mm')
+        if(!item.split) item.split='?'         
+        return item
+    })
+    return list
+})
+const eventHappend  = (e:any)=>{
+    console.log("event happen eee",e)
+    // alert("event happend")
+}
+const viewChange = (e:any)=>{
+    console.log("calendar view change",e)
+    selectedDate.value=e.startDate
+    // endDate :  Sat Feb 17 2024 23:59:59 GMT+0800 (Malaysia Time) {}
+    // events :  []
+    // startDate :  Sat Feb 17 2024 00:00:00 GMT+0800 (Malaysia Time) {}
+    // view :  "day"
+    emits('viewChange',e)
+}
+const allresources = computed(()=>{    
+    const tmplist = props.resources.map(r=>{
+        if(!r.id) r.id =r._id
+        if(r.hide===undefined) r.hide=false
+        if(!r.displayName) r.displayName=r.label
+        return r
+    })
+    tmplist.push({
+        _id:'?',
+        id:'?',
+        hide:false,
+        label:t('unknown'),
+        displayName:t('unknown'),
+        code:'',
+        email:'',
+    })
+    return tmplist
+})
+const onCellClick = async(e:CalViewClickSlotEvent)=>{    
+    const date =e.date
+    date.setHours(date.getHours() + Math.floor(date.getMinutes()/60));
+    date.setMinutes(0, 0, 0); // Resets also seconds and milliseconds
+    
+    
+    const newevent:CalEventType<T> = {
+        id: 'new',
+        start: date,
+        end: date.addHours(1),
+        class: 'nostudent',
+        title: t('new'),
+        // content?: string | undefined;
+        split: e.split,
+        data: {} as T
+    }
+    // emits('slotClick',e)
+    emits('eventDragNew',newevent)
+}
+const onEventDrop = async (relocateData: RelocateEvent<T>)=>{
+    emits('eventDrop', relocateData)
+}
+const clickResource = async (splitid:string, splitlabel:string)=> emits('resourceClick', splitid,splitlabel)
+const onDragNew = (e: CalEventType<T>)=> emits('eventDragNew', e)
+
+const onRightClick = (clickevent: any, scheduledata: any) => {
+  selectedSchedule.value = scheduledata;
+  emits('eventRghtClick', clickevent,scheduledata)
+};
+const onEventClick = (eventdata: CalResource) => {
+  selectedSchedule.value = eventdata;
+  emits('eventClick',eventdata)
+};
+
+const calendarMode = computed(()=>{
+    
+    if(useDevice().isMobile){
+        return {
+            title: false,
+            drag: true,
+            resize: false,
+            delete: false,
+            // create: true,
+        }
+    }else{
+      return  {
+            title: false,
+            drag: true,
+            resize: false,
+            delete: false,
+            create: true,
+        }
+    }
+    
+})
+
+
+</script>

package/templates/nuxt/components/calendar/CalendarSmall.vue.eta

@@ -0,0 +1,74 @@
+<template>    
+    <vue-cal
+        :id="id"
+        class="w-full"
+        hide-view-selector
+        click-to-navigate
+        :time="false"
+        today-button
+        active-view="month"
+        :disable-views="['week', 'day']"
+        :selected-date="selectedDate"
+        events-count-on-year-view
+        @view-change="viewChange"
+        :events="allevents"
+        @cell-focus="chooseDate"
+        xsmall
+        >
+        <template #cell-content="{ cell, view, events }" class="bg-red-300">            
+            <div class="flex flex-col" @contextmenu="(mouseevent:MouseEvent)=>onRightClickDate(mouseevent,cell)">
+                <div>
+                    <s
+                        v-if="dateExists(new Date(cell.formattedDate),alloffdays)"
+                        v-tooltip="getHolidayName(new Date(cell.formattedDate))"
+                        class="text text-red-400 font-bold"
+                        >{{ cell.content }}</s
+                    >
+                    <span v-else>{{ cell.content }} </span>
+                </div>
+                <div>
+                    <slot name="default" :cell="cell" events="events">                            
+                        <Badge  v-if="events.length>0"  
+                            @contextmenu="(mouseevent:MouseEvent)=>onRightClickDate(mouseevent,cell)"
+                            severity="info"
+                            :value="events.length"/>                               
+                    </slot>
+                </div>
+            </div>            
+        </template>
+    </vue-cal>    
+</template>
+<script lang="ts" setup generic="T">
+import VueCal, { Event, SplitDaysAttributes } from "vue-cal";
+import { CalEventType,CalRightClickEvent,OffDay } from '~/types'
+
+const props = defineProps<{
+    id:string
+    items:CalEventType<T>[]
+    offdays:OffDay[]
+}>()
+const emits =  defineEmits(['chooseDate','rightClick'])
+const alloffdays = computed(()=> props.offdays.map(item=>item.date))
+const selectedDate = defineModel<Date>({required:true})
+const getHolidayName = (date:Date) => props.offdays.find(item=>item.date.getTime() == date.getTime())?.title
+const allevents = computed(()=>{
+    const list = props.items.map(item=>{
+        if(item.start instanceof Date) item.start = item.start.format('YYYY-MM-DD HH:mm')
+        if(item.end instanceof Date) item.end = item.end.format('YYYY-MM-DD HH:mm')
+        return item
+    })
+    return list
+})
+const viewChange = (event: any) => {    
+    console.log("Calendar Small view change")
+  chooseDate(event.startDate);
+};
+const chooseDate = (date1: Date) => {
+  selectedDate.value = date1;
+  emits('chooseDate',selectedDate.value)
+};
+const onRightClickDate=(e: MouseEvent,cell:CalRightClickEvent)=>{    
+    emits('rightClick',e,cell)
+}
+
+</script>

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

@@ -1,8 +1,27 @@
+
+<template>
+    <div class="simpleapp-crudsimple">    
+          <TableDocuments :value="recordlist" :columns="columns" :title="doc.getDocName()" > 
+            <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>  
+          <Dialog v-model:visible="showDialog" modal>
+            <NuxtPage :_id="id" @after="after"></NuxtPage>
+          </Dialog>
+    </div>            
+    
+</template>
 <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
+ * last change 2024-02-04
  * author: Ks Tan
  */
 import {ref} from 'vue'
@@ -10,20 +29,15 @@ import _ from 'lodash'
 import { SimpleAppClient } from  '~/simpleapp/generate/clients/SimpleAppClient' //'../SimpleAppClient';
 
 import {SearchBody,CellSetting} from '~/types'
-const props = withDefaults(defineProps<{
+const props = defineProps<{
     document:SimpleAppClient<any,any>
-    columns:CellSetting[]    
-    layoutClass?:string
-    col1Class?:string
-    col2Class?:string
+    columns:CellSetting[]        
     sorts?: string[][]
-}>(),{
-  layoutClass:'grid grid-cols-2',
-  col1Class:'p-4',
-  col2Class:'p-4'
-})
+}>()
+const id= computed(()=>getPathPara('id'))
 const resourcename = ref( _.upperFirst(props.document.getDocName()))
 const visible = ref(false)
+const showDialog = ref(false);
 const doc = props.document
 const data = doc.getReactiveData()
 const disabled=ref(false)
@@ -84,34 +98,28 @@ const getWantedFields = (selectedCols:CellSetting[]) =>{
         return cols
     }
 
-const selectRow =  (data:any) =>{  
-  console.log("select row",data)
-  goTo(doc.getDocName(),data._id)  
+watch(showDialog,()=>{
+  if(!showDialog.value){
+    goTo(props.document.getDocName())
+  }
+})
+watch(()=>useRoute().path, async()=>{
+  if(getPathPara('id')){
+    showDialog.value=true
+  }else{
+    showDialog.value=false
+  }
+})
+const after = (eventType:string)=>{
+  if(eventType!='mount') goTo(resourcename.value)
+  //showDialog.value=false
 }
+onMounted(()=>{
+  if(id.value){
+    showDialog.value=true
+  }else{
+    showDialog.value=false
+  }
+})
 </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

@@ -1,10 +1,7 @@
 <template>
-    <Dialog v-model:visible="visible"         
-        :pt="{root:{class:'w-5/6 h-5/6'}}"
+    <Dialog v-model:visible="visible"        
         :modal="true" 
-        :close-on-escape="false" >                
-        
-
+        :close-on-escape="false" >                        
         <template #header>
             <div class="flex flex-row gap-4">
                 <Chip v-for="(v,k) in allview" :label="v.label" @remove="deleteTab" :removable="true"
@@ -16,8 +13,9 @@
                     <component                             
                         :is="defineAsyncComponent(v.viewer)" 
                         :_id="v._id" 
-                        :readonly="v.readonly" 
-                        @after-create="callback(v,$event)" 
+                        :readonly="v.readonly"   
+                        :paras="v.paras"                      
+                        @after="(eventType:string,data:any,result:any)=>after(v,eventType,data,result)"
                             />
             </div>
         </template>                
@@ -41,13 +39,14 @@ import Chip from 'primevue/chip';
 const {$listen,} = useNuxtApp()
 const visible = ref(false)
 const allview = ref<{[key:string]:ViewRecord}>({})
-
-const callback = (v:ViewRecord,data:any)=>{
-    if(v.afterCreate){
-        v.afterCreate(data)
+const after = (v:ViewRecord,eventType:string,data:any,result:any)=>{
+    if(v.after){        
+        v.after(eventType,data,result)
+        //only after mount consider no remove tab
+        if(eventType!='mount') deleteTab()
     }
-    deleteTab()
 }
+
 onKeyStroke('Escape', (e) => {
   e.preventDefault()
   deleteTab()
@@ -66,6 +65,7 @@ const deleteTab=()=>{
 }
 
 $listen('ViewRecord',(setting)=>{     
+    console.log("ViewRecord event received by listener")
     visible.value=true    
     allview.value[setting.eventId]=setting
     

package/templates/nuxt/components/event/EventNotification.vue._eta

@@ -93,8 +93,29 @@ const getFieldName = (path:string)=>{
 }
 </script>
 <template>
-    <Toast group="default" :pt="{}">
+    <Toast group="default">
         <template #message="p">
+            <div class="h-full w-full border">
+                <p class="text-lg text-red-800 font-semibold pb-1">{{ p.message.summary }}</p>              
+                <div v-if="p.message.detail" class="flex flex-col gap-2 ">                            
+                    <p v-if="Array.isArray(p.message.detail)"  v-for="item in p.message.detail"
+                        class="text-sm text-red-600  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-if="typeof p.message.detail == 'object'" class="text-sm text-gray-600 dark:text-gray-400 font-normal">
+                        {{ p.message.detail.message }}
+                    </p>
+                    <p v-else></p>
+                </div>
+
+            </div>
+        </template>
+        <!-- <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">
@@ -126,7 +147,7 @@ const getFieldName = (path:string)=>{
                     </div>
                 </div>
             </div>
-        </template>
+        </template> -->
     </Toast>
     <!-- <Toast group="list">
         <template #message="p">