@simitgroup/simpleapp-generator 1.2.7 → 1.2.8

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

@@ -1,10 +1,11 @@
 
 <template>
-    <span>  {{ Intl.NumberFormat('en',{
+    <span v-if="showCurrency"> {{ Intl.NumberFormat(  useI18n().defaultLocale,{
         style:'currency',
         currency: getUserProfile()?.currency,
         currencyDisplay: 'symbol',        
     }).format(modelValue) }}</span>
+    <span v-else> {{ modelValue.toLocaleString(useI18n().defaultLocale,options) }}</span>
 </template>
 <script lang="ts" setup>
 /**
@@ -13,5 +14,12 @@
  * last change 2024-02-04
  * author: Ks Tan
  */
-const props = defineProps(['modelValue'])
+
+const options = {
+  style: 'decimal',  // Other options: 'currency', 'percent', etc.
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+};
+const modelValue = defineModel<number>({required:true})
+const props = defineProps<{showCurrency?:boolean}>()
 </script>

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

@@ -1,7 +1,7 @@
 <template>
-    <a @click="openViewer" class="text-primary-700 hover:text-primary-500 cursor-pointer">
+    <a @click="openViewer" class="text-primary-700 dark:text-primary-400 hover:text-primary-500 cursor-pointer">
         <slot name="default">
-            <div >{{ value[fields[0]] }}</div>
+            <div v-if="fields">{{ value[fields[0]] }}</div>
         </slot>
     </a>
 </template>
@@ -12,10 +12,10 @@
  * last change 2024-02-04
  * author: Ks Tan
  */
-
+import { RendererSetting } from '~/types';
 const props = defineProps<{
-    fields:any,
-    setting:any,
+    fields?:string[],
+    setting:RendererSetting,
     value:any
 }>()
 

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

@@ -1,7 +1,7 @@
 <template>   
         <AutoComplete v-model="modelValue"  v-if="!readonly" ref="autocompleteinput"
                forceSelection optionLabel="label"  
-               @focus="($event.target as HTMLInputElement).select()"              
+               @focus="setFocus"              
                @item-select="pickAutoComplete"
                @complete="getListFromAutocompleteApi"       
                :placeholder="t('keyword')"
@@ -17,7 +17,25 @@
                @blur="onBlurAutocomplete"
                :inputId="inputId" :path="setting.instancepath"
                :readonly="readonly"
-                />
+                >
+                    <template #header>
+                        <slot name="header">
+                            <div class="flex flex-row font font-bold  dark:text-white">                            
+                                <div class="w w-1/3">{{ t(codefield) ?? t('code') }}</div>
+                                <div class="w w-2/3" >{{ t(labelfield) ?? t('label') }}</div>
+                            </div>
+                        </slot>
+                    </template>
+                    <template #option="{index,option}">
+                        <slot name="option" :index="index" :option="option">
+                            <div class="flex flex-row dark:text-white">                            
+                                <div class="w w-1/3" >{{ option.code }}</div>
+                                <div class="w w-2/3" >{{ option.label }}</div>
+                            </div>
+                        </slot>
+                    </template>
+                <!-- </slot> -->
+            </AutoComplete>
         <div v-else class="p-3 border rounded-lg border-gray-300 dark:border-blue-900/40 ">
             <span :readonly="readonly" class="cursor-pointer text-primary-600  dark:text-primary-400 "
                 tabindex="0" @click="openViewer(true)">{{ modelValue && modelValue.label ?  modelValue.label:'-' }}</span>
@@ -44,6 +62,12 @@ allowAddNew:true,showNull:true
 const path = '$'+props.setting.instancepath
 const modifiedpath = path.replaceAll('/','.')        
 const queryresult = jsonpath.query(props.setting.defaultValue,modifiedpath)[0]
+const remotedoc = getDocument(props.setting.fieldsetting['x-foreignkey'])
+const schema:SchemaType = <SchemaType>remotedoc?.docClass.getSchema()
+    
+const labelfield = schema['x-simpleapp-config'].documentTitle as string
+const codefield  = schema['x-simpleapp-config'].uniqueKey as string
+const docname = props.setting.fieldsetting['x-foreignkey']
 
 const emptyautocomplete = computed(():autocompletetype=> queryresult)
 
@@ -124,15 +148,16 @@ const emitChanges = () =>{
  
 }
 
+
+const setFocus = (ev:any) => {
+    if(!isMobile()) ev.target.select()
+}
+
 //pop up records
-const openViewer = (readonly:boolean) =>{
-    const remotedoc = getDocument(props.setting.fieldsetting['x-foreignkey'])
+const openViewer = (readonly:boolean) =>{    
     
     if(remotedoc){
-        const schema:SchemaType = remotedoc.docClass.getSchema()
-        const labelfield = schema['x-simpleapp-config'].documentTitle as string
-        const codefield  = schema['x-simpleapp-config'].uniqueKey as string
-        const docname = props.setting.fieldsetting['x-foreignkey']
+        
         $event('ViewRecord',{
             _id: modelValue.value?._id as string,
             eventId: randomUUID(),
@@ -157,7 +182,7 @@ const openViewer = (readonly:boolean) =>{
                 }   
                 modelValue.value = {...autocompleteitem.value}                             
                 emitChanges()
-                console.log("autocompleteitem.value",autocompleteitem.value ,modelValue.value)
+                
                 
             }
         })

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

@@ -3,11 +3,12 @@
     
         <div class="flex flex-row w-full">
             <InputText 
+                @focus="setFocus"              
                 :readonly="readonly"
                 v-model="modelValue"    
                 :placeholder="placeholder"
                 :pt="pt"
-                :class=" !pt ? 'flex-1 w-full rounded-lg  '+ ( props.readonly?'':'dark:!bg-gray-700 rounded-tr-none rounded-br-none') : ''"
+                :class=" !pt ? 'flex-1 w-full rounded-lg  '+ ( props.readonly?'':'rounded-tr-none rounded-br-none') : ''"
             />
             <span class="" v-if="!readonly">
                 <button  type="button" @click="toggle"  tabindex="-1"
@@ -72,6 +73,11 @@ const loadDocFormats = async () =>{
     }
 }
 
+
+const setFocus = (ev:any) => {
+    if(!isMobile()) ev.target.select()
+}
+
 onMounted(()=>{
     loadDocFormats()
 

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

@@ -1,8 +1,9 @@
 <template>
-    <div v-if="schema" class="flex flex-col">          
-        <div v-if="hidelabel"></div>
-        <label v-else-if="error" class="simpleapp-input-label text-danger-600 overflow-hidden" :for="uuid">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>        
-        <label v-else  :for="uuid" class="simpleapp-input-label whitespace-nowrap	text-gray-500 truncate">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>        
+    <div v-if="schema" :class="getLayoutClass()">          
+        <label v-if="hidelabel"></label>
+        <label v-else  :for="uuid" :class="getLabelClass()" @click="console.log(inputType)">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>
+        <!-- <label v-else-if="error" class="simpleapp-input-label text-danger-600 overflow-hidden" :for="uuid">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>        
+        <label v-else  :for="uuid" class="simpleapp-input-label whitespace-nowrap	text-gray-500 truncate">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>         -->
         
         <!-- <div :uuid="uuid" >{{ modelValue }}</div> -->
         <!-- <div v-if="typeof modelValue =='object' && typeof modelValue['_id']!='undefined' && typeof modelValue['label']!='undefined' &&  readonly ==true " :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue['label'] }}</div> -->
@@ -34,6 +35,7 @@ const fieldcontainerclass = ref(defaultcssclass)
 let instancepath = ref('')
 const props = defineProps<{
     label?: string,    
+    inputType: string,
     description?: string,
     instancepath?:string,
     hidelabel?:boolean,
@@ -45,17 +47,27 @@ const props = defineProps<{
 const readonly = computed(()=>{
    return props.readonly ??  props.setting.readonly ?? 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 modelValue = defineModel<any>() //this model value support all kind of data, string, number, autocomplete and etc
 const readonlyclass="simpleapp-value-readonly"
 // console.log('props.setting',modelValue.value,props.setting)
 let schema:any 
 
+const getLayoutClass = () =>  `simpleapp-input-container flex  ${ props.inputType == 'checkbox' ? " flex-row gap-4 mt-1 ml-1 " : "flex flex-col "}`
+
+const getLabelClass = () => {
+    let class1= "simpleapp-input-label text-left text-gray-500  "
+    if(!isMobile()) class1 += "whitespace-nowrap truncate"
+    else if (props.inputType == 'checkbox' ) class1 += " ml-1 dark:text-grey-200"
+    else if (props.inputType != 'autocomplete' &&  modelValue.value) class1 += "-mb-4 ml-1 z-50 text-xs dark:text-grey-100"
+    else if (props.inputType == 'autocomplete' &&  modelValue.value?.label) class1 += "-mb-4 ml-1 z-50 text-xs dark:text-grey-100"
+    else if (props.inputType == 'number' && modelValue.value !== undefined) class1 += "-mb-4 ml-1 z-50 text-xs dark:text-grey-100"
+    else  class1 += "-mb-4 ml-1 z-50 text-xs dark:text-grey-100 hidden"
+    return class1    
+}
+
+
+
 const fielddesc = computed(()=>{
     return props.description ?? ''
 })
@@ -116,8 +128,3 @@ watch(props.setting.errors,(newvalue,oldvalue)=>{
 })
 
 </script>
-<style scoped>
-.simpleapp-input-container{
-    @apply flex flex-col
-}
-</style>

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

@@ -1,6 +1,6 @@
 <template>
     <SimpleAppFieldContainer :hidelabel="hidelabel" v-model="modelValue" 
-                :label="label" :description="description" :pt="pt"
+                :label="label" :description="description" :pt="pt" :inputType="inputType"
                 :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
         <Checkbox v-if="inputType ==SimpleAppInputType.checkbox"  :readonly="isReadonly" :pt="pt"
                 :inputId="slotprops.uuid" :path="setting.instancepath"
@@ -93,6 +93,7 @@
         <Password 
                 v-else-if="inputType == SimpleAppInputType.password" 
                 :type="type" v-model="(modelValue as string)" :pt="pt" 
+                @focus="setFocus"
                 :readonly="isReadonly" class="flex flex-col"
                 :inputId="slotprops.uuid" :path="setting.instancepath"
                 :placeholder="placeholder"
@@ -117,6 +118,7 @@
         <!-- simple component -->        
         <InputNumber v-else-if="inputType == SimpleAppInputType.number"                 
                 :type="type" v-model="(modelValue as number)"
+                @focus="setFocus"
                 :readonly="isReadonly"        
                 :pt="pt"
                 :class="!pt ? 'w-full flex flex-col' :''"
@@ -125,7 +127,8 @@
                 :placeholder="placeholder"
                 />
             <Textarea v-else-if="inputType == SimpleAppInputType.textarea"
-            v-model="(modelValue as string)"                
+                v-model="(modelValue as string)"    
+                :autofocus="autofocus"                            
                 :readonly="isReadonly"        
                 :pt="pt"
                 :type="type"
@@ -136,7 +139,9 @@
                 v-bind="(componentProps as TextareaProps)"
                 />
         <InputText v-else
-            v-model="(modelValue as string)"                
+            v-model="(modelValue as string)"    
+                @focus="setFocus"
+                :autofocus="autofocus"
                 :readonly="isReadonly"        
                 :pt="pt"
                 :type="type"
@@ -186,6 +191,7 @@ const props = withDefaults( defineProps<{
     instancepath?:string,
     hidelabel?: boolean
     readonly?: boolean
+    autofocus?:boolean
     pt?:any,
     placeholder?:string
     componentProps?: InputNumberProps | InputSwitchProps | InputTextProps | TextareaProps | DropdownProps | CalendarProps | RatingProps
@@ -221,6 +227,9 @@ const updateDate = (value:any)=>{
     
 }
 
+const setFocus = (ev:any) => {
+    if(!isMobile()) ev.target.select()
+}
 
 const getListOptions = () =>{
     
@@ -244,6 +253,7 @@ const getListOptions = () =>{
 
 const emits = defineEmits(['change','update:modelValue','update:docNoFormat'])
 
+
 watch(modelValue ,(newvalue:any)=>{
     
     if([SimpleAppInputType.date,SimpleAppInputType.calendar].includes(props.inputType)){
@@ -259,7 +269,16 @@ watch(modelValue ,(newvalue:any)=>{
     emits('change',modelValue.value)
     emits('update:modelValue',modelValue.value)    
 })
-
+onMounted(()=>{
+    if([SimpleAppInputType.date,SimpleAppInputType.calendar].includes(props.inputType)){
+        if(modelValue.value){
+            datevalue.value = moment(modelValue.value as string ).format('YYYY-MM-DD')
+        }else{
+            datevalue.value = ''
+        }
+        
+    }
+})
 
 /************ start autocomplete only ***************/
 
@@ -272,6 +291,4 @@ watch(modelValue ,(newvalue:any)=>{
 const triggerDocNoFormatChange=(formatdata:any)=>{
     emits('update:docNoFormat',formatdata)
 }
-</script>
-<style scoped>
-</style>
+</script>

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

@@ -2,9 +2,9 @@
     <DataTable v-bind="$attrs" stripedRows resizableColumns
      class="simpleapp-datatable p-datatable-sm" :value="modelValue">
     <template #empty> <div class="text-center">No record found.</div> </template>
-    <template #header >
-        <div>        
-            <Button v-if="!setting.readonly"  icon="pi pi-plus" @click="addNew()" class="simpleapp-datatable-add btn-primary" type="button">Add</Button>
+    <template #header v-if="!setting.readonly  && !readonly">
+        <div  >        
+            <Button  icon="pi pi-plus" @click="addNew()" class="simpleapp-datatable-add btn-primary" type="button">Add</Button>
         </div>
     </template>
     <slot>
@@ -35,6 +35,7 @@ const props = defineProps<{
     // columns:InputTableColumn[],
     setting:any,
     getField:Function,    
+    readonly?:boolean
 }>()
 
 

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

@@ -1,7 +1,7 @@
 <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 justify-between gap-x-6 py-5 cursor-pointer" @click="emits('click',data)">
       <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">
@@ -38,7 +38,7 @@ import moment from 'moment'
 const props = defineProps<{
 data:any
 }>()
-
+const emits = defineEmits(['click'])
 
 
 const datedifferent = computed(()=>{  

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

@@ -0,0 +1,16 @@
+import moment from "moment";
+
+export const dateExists = (date:Date,listDate:Date[]) => {
+    const existsrecord = listDate.find(item=>{
+      return date.getTime()===item.getTime()
+    })
+    return existsrecord===undefined ? false :true
+  }
+export const getMoment = (startTime:string)=> moment(startTime)
+export const lastDateOfMonth = (datestr:string) => moment(datestr).endOf('month').format('YYYY-MM-DD');
+export const today = () => moment().format('YYYY-MM-DD')
+export const dateToString = (date:Date) => moment(date).format('YYYY-MM-DD')
+export const dateToDateTimeString = (date:Date)=> moment(date).format('YYYY-MM-DD HH:mm:ss')
+export const toLocalDate = (dateiso8601:string)=> new Date(String(dateiso8601)).toLocaleDateString()
+
+

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

@@ -30,3 +30,4 @@ export const getPathPara = (paraname:string,emptyvalue:string=''):string=>{
    }
 }
 
+export const setCurrentUrl = (path:string)=>useRouter().push({path:path})

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

@@ -16,10 +16,5 @@ export const getAvatarLink = (email:string, size:number):string=>{
   
 }
 
-export const toLocalDate = (dateiso8601:string)=> new Date(String(dateiso8601)).toLocaleDateString()
 export const t = (txt:string,options?:any):string => !txt || txt.trim()=='' ? '' : useNuxtApp().$i18n.t(txt,options)
-export const today = () => moment().format('YYYY-MM-DD')
-export const dateToString = (date:Date) => moment(date).format('YYYY-MM-DD')
-export const getMoment = (startTime:string)=> moment(startTime)
-export const lastDateOfMonth = (datestr:string) => moment(datestr).endOf('month').format('YYYY-MM-DD');
 export const upperFirst = (str:string) => _.upperFirst(str)

package/templates/nuxt/error.vue._eta

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex items-center justify-center py-12 bg bg-gray-500">
-            <div class="bg-white border rounded-md flex items-center justify-center mx-4 md:w-2/3">
+  <div class="w w-full items-center justify-center py-12 bg bg-gray-500">
+            <div class="bg-white dark:bg-gray-600 p-1 border rounded-md flex items-center justify-center mx-4 w-7/8 md:w-2/3">
                 <div class="flex flex-col items-center py-16">
                     
                     <div class="flex flex-row">
-                      <div class="w w-40">
+                      <div class="w w-full ">
                         <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-13.59 -13.59 480.17 480.17" xml:space="preserve" fill="#000000" stroke="#000000" stroke-width="0.00452986"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <g> <path style="fill:#010002;" d="M0,0v452.986h452.986V0H0z M403.223,24.655c8.132,0,14.668,6.558,14.668,14.625 c0,8.111-6.536,14.711-14.668,14.711c-8.089,0-14.668-6.601-14.668-14.711C388.576,31.234,395.134,24.655,403.223,24.655z M352.035,24.655c8.046,0,14.647,6.558,14.647,14.625c0,8.111-6.601,14.711-14.647,14.711c-8.132,0-14.668-6.601-14.668-14.711 C337.389,31.234,343.903,24.655,352.035,24.655z M417.955,418.624H35.053V85.701h382.903V418.624z"></path> <path style="fill:#010002;" d="M226.493,398.952c80.394,0,145.495-65.101,145.495-145.43s-65.101-145.495-145.495-145.495 c-80.373,0-145.516,65.165-145.516,145.495C80.977,333.873,146.12,398.952,226.493,398.952z M142.044,198.516l29.444-29.444 l55.005,55.027l54.984-55.027l29.379,29.444L255.894,253.5l54.984,54.941l-29.423,29.444l-54.962-54.962l-55.005,54.984 l-29.444-29.444l54.984-54.941L142.044,198.516z"></path> </g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </g> </g></svg>
                       </div>
                       <div>

package/templates/nuxt/layouts/default.vue._eta

@@ -1,15 +1,18 @@
 <template>
-    <div class="h-full flex flex-row"  v-if="!isMobile()">
-        <div>
-            <HeaderButtonMenuPicker class="p-2  text-6xl cursor-pointer"></HeaderButtonMenuPicker>
-            <div class="" v-for="item in menus">
-                <div class="border">                    
-                    <NuxtLink 
-                        :class="`pi ${item.iconClass} p-2  text-6xl cursor-pointer`"
-                        :to="getDocumentUrl(item.path)"
-                        ></NuxtLink>
-                </div>
-            </div>            
+    <div class="h-full flex flex-row">
+        <div class="flex flex-col justify justify-between">
+            <div  > 
+                <HeaderButtonMenuPicker class="cursor-pointer p-2  text-6xl "></HeaderButtonMenuPicker>
+                <div class="" v-for="item in menus">
+                    <div class="">                    
+                        <NuxtLink 
+                            :class="`pi ${item.iconClass} p-2  text-6xl cursor-pointer`"
+                            :to="getDocumentUrl(item.path)"
+                            ></NuxtLink>
+                    </div>
+                </div> 
+            </div>
+            <HeaderButtonProfile class="p-6"/>           
         </div>        
         <div class="flex-1">
             <HeaderBar />
@@ -17,33 +20,15 @@
             <slot></slot>
         </div>                
     </div>
-    <div v-else class="mb-20">
-        <div v-if="getCurrentXorg()" class="border flex flex-row h-20 fixed left-0 w-full  justify justify-between bottom-0 z-50 bg-white dark:bg-gray-800" >
-                
-                <div v-for="item in menus">                    
-                    <NuxtLink 
-                        :class="`pi ${item.iconClass} p-2  text-6xl cursor-pointer`"
-                        :to="getDocumentUrl(item.path)"
-                        ></NuxtLink>
-                </div>
-                <HeaderButtonMenuPicker class="p-2  text-6xl cursor-pointer"></HeaderButtonMenuPicker>
-        </div> 
-        <div class="flex flex-col h-screen ">
-            
-                <HeaderBar />
-                <UserInvitation/>
-                <slot></slot>
-            
-        </div> 
-    </div>
+    
 </template>
 <script setup lang="ts">
 const menus=[
     // {iconClass:'pi-bars',path:'managestudents/profile'},
-    {iconClass:'pi-home',path:''},
-    {iconClass:'pi-users',path:'managestudents/profile'},
-    {iconClass:'pi-calendar',path:`manageclasses`},
+    {iconClass:'pi-home text-white',path:''},
+    {iconClass:'pi-users text-white',path:'managestudents/profile'},
+    {iconClass:'pi-calendar text-white',path:`manageclasses`},
     // {iconClass:'pi-database',path:'managedata'},
-    {iconClass:'pi-chart-pie',path:'reports'},
+    {iconClass:'pi-chart-pie text-white',path:'reports'},
 ]
 </script>

package/templates/nuxt/layouts/loginlayout.vue._eta

@@ -0,0 +1,3 @@
+<template>
+        <slot v-if="useRoute().path=='/login'"></slot>        
+</template>

package/templates/nuxt/layouts/mobile.vue._eta

@@ -0,0 +1,29 @@
+<template>
+    <div class="h-screen flex flex-col">
+        <div class="flex flex-col grow">
+              <slot></slot>            
+        </div> 
+        <!-- fixed -->
+        <div v-if="getCurrentXorg()" class="flex h-20 border-t-2 dark:border-t-gray-700  text-4xl  flex-row   left-0 w-full  justify justify-between bottom-0 z-50 bg-white dark:bg-gray-600 pl-2 pr-2" >                                
+                <NuxtLink v-for="item in menus"
+                        :class="`pi ${item.iconClass} pb-6 pt-6 cursor-pointer inline-block align-middle`"
+                        :to="getDocumentUrl(item.path)"
+                        ></NuxtLink>                
+                <HeaderButtonMenuPicker class=" cursor-pointer"></HeaderButtonMenuPicker>
+                <HeaderButtonProfile class=""/>
+                <UserInvitation/>
+        </div> 
+        <!-- <HeaderBar class="border flex flex-row h-10 fixed left-0 w-full  justify justify-between top-0 z-50 bg-white  dark:bg-gray-800"/> -->
+     
+    </div>
+</template>
+<script setup lang="ts">
+const menus=[
+    // {iconClass:'pi-bars',path:'managestudents/profile'},
+    {iconClass:'pi-home text-white',path:''},
+    // {iconClass:'pi-users text-white',path:'managestudents/profile'},
+    // {iconClass:'pi-calendar text-white',path:`manageclasses`},
+    // {iconClass:'pi-database',path:'managedata'},
+    // {iconClass:'pi-chart-pie text-white',path:'reports'},
+]
+</script>

package/templates/nuxt/nuxt.config.ts._eta

@@ -6,7 +6,11 @@
  */
 import path from 'path'
 export default defineNuxtConfig({
-  // colorMode: {}  ,  
+  colorMode: {
+    classSuffix: ''
+
+  },  
+  
   runtimeConfig:{     
     public:{
       APP_URL: process.env.APP_URL,
@@ -26,16 +30,19 @@ export default defineNuxtConfig({
 tailwindcss: {
     // Options
   },
-  devServer: {
-      // host: "0.0.0.0",
-  },
+devServer: {
+    host: "0.0.0.0",
+},
   modules: [
     // "@hebilicious/authjs-nuxt",
+    '@nuxtjs/color-mode',
+     '@nuxtjs/device',
     '@nuxtjs/i18n',
     '@sidebase/nuxt-auth',
     'nuxt-primevue',
+    // '@nuxtjs/pwa', //cannot turn on, will cause nuxt cant start
     // "nuxt-security",     //temporary avoid nuxt-security cause cors
-    '@vueuse/nuxt',    
+    '@vueuse/nuxt',     
     '@nuxtjs/tailwindcss',
     ['@pinia/nuxt',{
       autoImports: [
@@ -44,10 +51,13 @@ tailwindcss: {
         ['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
       ],
     }],
-    '@nuxtjs/color-mode',
+    
     
 
-  ],  
+  ], 
+  device: {
+    refreshOnResize: true
+  }, 
   i18n: {
     lazy: true,
     langDir: "lang/",
@@ -70,13 +80,14 @@ tailwindcss: {
         iso: "cn",
         name: "Chinese",
         file: "cn.ts",
+      
       },
     ],
     defaultLocale: "df",    
   },
   primevue: {
     options: {
-      unstyled: true,
+      //unstyled: true,
       ripple: true,
       inputStyle: 'filled'
     }, 
@@ -85,7 +96,7 @@ tailwindcss: {
       exclude: ['chart']
     }, 
     directives: {
-      include: ['Ripple', 'Tooltip','BadgeDirective']
+      include: ['Ripple', 'Tooltip','BadgeDirective','FocusTrap']
     },
     cssLayerOrder: 'tailwind-base, primevue, tailwind-utilities',
     importPT: { as: 'SimpleAppPT', from:  path.resolve(__dirname,'./assets/primevue/passthrough.ts') },
@@ -96,7 +107,7 @@ tailwindcss: {
 
   // },
   auth: {
-    globalAppMiddleware: true
+    globalAppMiddleware: false
   },
   // security: {
     // corsHandler:{
@@ -127,13 +138,12 @@ tailwindcss: {
     'primeicons/primeicons.css',
     path.resolve(__dirname,'./assets/css/style.css'),
     path.resolve(__dirname,'./assets/css/calendar.css'),
-    ],
+    ],        
+  },
 
   // devtools: { enabled: true },
   // build: {
   //               // transpile: ["primevue"]
-  //       },
-  
-  
+  //       },  
 
-})
+)