@simitgroup/simpleapp-generator 1.2.7 → 1.3.0-alpha

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

@@ -4,50 +4,73 @@ 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-800  shadow p-4 rounded-2xl'},
             // title:{class:''},
             // header:{class:''}
         },       
         tabpanel:{
             headerTitle:{class:'m-0 p-0'},            
         },
+        accordiontab:{
+            content:{style:'padding: 0.7rem;'}
+            
+        },
         selectbutton:{
-            root:{class:'flex flex-row gap-1'},
+            root:{class:'flex flex-row gap-1 '},
             button: ({ context }) => ({
-                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' : undefined}`
+                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' : ''}`
             }),
             // 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'},
+            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 w-full max-h-full max-w-full md:h-3/4 lg:h-1/2']},},        
+        dialog:{
+            root:{class:[' w-full max-h-full max-w-full md:h-3/4 lg:h-1/2 p-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-gray-400 dark:!border-blue-900/40  rounded-lg flex flex-row p-1'},
-            input:{class:'w-full p-2 font-sans  rounded-lg 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-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-400 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'},
+            // root:{class:'border border-gray-400 dark:!border-blue-900/40  rounded-lg flex flex-row'},
+            // loadingIcon:{class:'hidden'},
+            panel:{
+                class:'p-autocomplete-panel p-component p-2 w-full md:max-w-[500px] p-input-filled bg-white text-gray-700 border-0 rounded-md shadow-lg max-h-[200px] overflow-auto dark:bg-gray-900 dark:text-white/80'
+            },
             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 '
             }
         },
+        column:{
+            bodycell:{
+                style:'padding:5px;'
+            },
+        },
         sidebar:{
-            root:{class:'w-full md:w-1/2 xl:w-1/4   bg-white dark:bg-gray-800 border p-0 h-full'},
+            root:{class:'w-full md:w-2/3  bg-white dark:bg-slate-950  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: {
@@ -59,10 +82,9 @@ const CustomTailwind = usePassThrough(
         breadcrumb:{
             root:{class:''}
         },
-        inputnumber:{
-            // root:{class:''},
-            input:{class:'bg-white dark:bg-white text-black dark-text-black'}
-        }
+        // inputnumber:{            
+            // input:{class:'text-right text-yellow-700'}
+        // }
     },
 );
 

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

@@ -1,6 +1,5 @@
 <template>
-    <!-- this component allow modify -->
-    <Button>
+    <Button class="dark:text-white">
         <slot></slot>
     </Button>
 </template>

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

@@ -0,0 +1,21 @@
+<template>
+  <div v-for="o in options">
+    <ButtonPrimary v-if="value == o.value" @click="switchButton(o.value)">{{
+      o.label
+    }}</ButtonPrimary>
+    <ButtonDefault v-else @click="switchButton(o.value)">{{
+      o.label
+    }}</ButtonDefault>
+  </div>
+</template>
+<script setup lang="ts">
+type keyvalue = { label: string; value: string };
+const emits = defineEmits(["switch"]);
+const props = defineProps<{
+  options: keyvalue[];
+  value: string;
+}>();
+const switchButton = (v: string) => {
+  if (v != props.value) emits("switch", v);
+};
+</script>

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

@@ -1,11 +1,12 @@
 <template> 
-    {{ calendarMode }}
     <VueCal
+        
         :id="id"
+        ref="vueresourcecal"
         :disable-views="['years', 'year', 'month', 'week']"
         :time-from="8 * 60"
-        :time-to="20 * 60"
-        :time-step="30"
+        :time-to="22 * 60"
+        :time-step="60"
         active-view="day"
         :snap-to-time="15"
         hide-view-selector
@@ -22,7 +23,7 @@
         @event-drag-create="onDragNew"
         @event-drop="onEventDrop"
         @view-change="viewChange"
-        
+        @cell-click="onCellClick"
         @cell-contextmenu="eventHappend"
         
     >
@@ -68,12 +69,13 @@
 
 import "vue-cal/dist/vuecal.css";
 import VueCal, { Event, SplitDaysAttributes } from "vue-cal";
-import { CalEventType,CalRightClickEvent,OffDay,CalResource,CalResourceType,RelocateEvent } from '~/types'
+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 emits = defineEmits(['eventRghtClick','eventClick','eventDrop','eventDragNew','viewChange','resourceClick'])
+const vueresourcecal = ref()
+const emits = defineEmits(['eventRghtClick','eventClick','eventDrop','eventDragNew','viewChange','resourceClick','slotClick'])
 const props = defineProps<{
     id:string    
     items:CalEventType<T>[]
@@ -126,6 +128,25 @@ const allresources = computed(()=>{
     })
     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)
 }
@@ -143,7 +164,7 @@ const onEventClick = (eventdata: CalResource) => {
 
 const calendarMode = computed(()=>{
     
-    if(isMobile()){
+    if(useDevice().isMobile){
         return {
             title: false,
             drag: true,

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

@@ -1,8 +1,7 @@
 <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>      
+    <div :class="`p-0 absolute bg-yellow-200 bottom-0 right-0`" v-if="isdebug=='1'">
+        <button @click="visible=true"  class=" text-white text-xs bg-warning-800 p-0 m-0">
+            <i class="pi pi-code"></i>{{ label }}</button>      
         <Sidebar v-model:visible="visible" class="text-red-100">
             
             <template #header >

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

@@ -1,26 +1,36 @@
-<template>
-    <Dialog v-model:visible="visible"         
-        :pt="{root:{class:'w-5/6 h-5/6'}}"
-        :modal="true" 
-        :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"
-                />
-            </div>            
-        </template>
-        <template #default>                    
-            <div v-for="(v,k) in allview" v-memo="[k]" class="viewer-item flex flex-col">            
-                    <component                             
-                        :is="defineAsyncComponent(v.viewer)" 
-                        :_id="v._id" 
-                        :readonly="v.readonly"   
-                        :paras="v.paras"                      
-                        @after="(eventType:string,data:any,result:any)=>after(v,eventType,data,result)"
-                            />
-            </div>
-        </template>                
-    </Dialog>
+<template>  
+  <OverlayViewer v-model="visible" :close-event-name="initDocumentName"  >
+    <!-- <template #header>
+      
+    </template> -->
+      <div class="w-full h-full ">
+          <div class="flex flex-row gap-4">
+            <Chip
+              v-for="(v, k) in allview"
+              :label="v.label"
+              @remove="deleteTab"
+              :removable="true"
+            />
+          </div>
+        
+        <div
+          v-for="(v, k) in allview"
+          v-memo="[k]"
+          class="viewer-item flex flex-col"
+        >
+          <component
+            :is="defineAsyncComponent(v.viewer)"
+            :_id="v._id"
+            :readonly="v.readonly"
+            :paras="v.paras"
+            @after="
+              (eventType: FormCrudEvent, data: any, result: any) =>
+                after(v, eventType, data, result)
+            "
+          />
+        </div>
+      </div>
+  </OverlayViewer>
 </template>
 <script setup lang="ts">
 /**
@@ -29,55 +39,55 @@
  * last change 2024-01-27
  * author: Ks Tan
  */
-import { onKeyStroke } from '@vueuse/core'
-import { useDialog } from 'primevue/usedialog';
-import {defineAsyncComponent} from 'vue'
-import { ViewRecord } from '~/types';
+import { onKeyStroke } from "@vueuse/core";
+import { useDialog } from "primevue/usedialog";
+import { defineAsyncComponent } from "vue";
+import { ViewRecord,FormCrudEvent } from "~/types";
 // import TabView from 'primevue/tabview';
-import Chip from 'primevue/chip';
+import Chip from "primevue/chip";
 
+const { $listen } = useNuxtApp();
+const initDocumentName = ref('')
+const visible = ref(false);
+const allview = ref<{ [key: string]: ViewRecord }>({});
+const after = (v: ViewRecord, eventType: FormCrudEvent, data: any, result: any) => {
+  if (v.after) {
+    v.after(eventType, data, result);
+    //only after mount consider no remove tab
+    if (eventType != "mount") deleteTab();
+  }
+};
 
-const {$listen,} = useNuxtApp()
-const visible = ref(false)
-const allview = ref<{[key:string]:ViewRecord}>({})
-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()
-    }
-}
-
-onKeyStroke('Escape', (e) => {
-  e.preventDefault()
-  deleteTab()
-})
-
-const deleteTab=()=>{
-    
-    const keys = Object.keys(allview.value)
-    const lastkey = keys[keys.length-1]
-    delete allview.value[lastkey]
-    // updateprops.value++
-    if(Object.keys(allview.value).length==0){
-        visible.value=false
-        return
-    }
-}
+onKeyStroke("Escape", (e) => {
+  e.preventDefault();
+  deleteTab();
+});
 
-$listen('ViewRecord',(setting)=>{     
-    visible.value=true    
-    allview.value[setting.eventId]=setting
-    
-})
+const deleteTab = () => {
+  const keys = Object.keys(allview.value);
+  const lastkey = keys[keys.length - 1];
+  delete allview.value[lastkey];
+  console.log("DeleteTab",allview.value)
+  // updateprops.value++
+  if (Object.keys(allview.value).length == 0) {
+    visible.value = false;
+    useNuxtApp().$event('CloseDialog','viewer')
+    return;
+  }
+};
 
+$listen("ViewRecord", (setting) => {  
+  if(initDocumentName.value=='') initDocumentName.value= setting.documentName
+  visible.value = true;
+  allview.value[setting.eventId] = setting;
+});
 </script>
 
 <style scoped>
-.viewer-item{
-    display: none;
+.viewer-item {
+  display: none;
 }
-.viewer-item:last-child{    
-    display: flex;    
+.viewer-item:last-child {
+  display: flex;
 }
-</style>
+</style>

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">

package/templates/nuxt/components/form/FormBranch.vue.eta

@@ -0,0 +1,83 @@
+<template>
+  <SimpleAppForm #default="o" :document="doc">
+    <client-only>
+      <title v-if="id">{{ data.branchName ?? data.branchCode }}</title>
+
+      <SimpleAppFormToolBar
+        :document="doc"
+        @on="actionListener"
+      ></SimpleAppFormToolBar>
+      <div
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-2"
+      >
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.text"
+          :setting="o.getField('#/properties/branchName')"
+          v-model="data.branchName"
+        />
+
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.text"
+          :setting="o.getField('#/properties/branchCode')"
+          v-model="data.branchCode"
+        />
+
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.checkbox"
+          :setting="o.getField('#/properties/active')"
+          v-model="data.active"
+        />
+
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.textarea"
+          :setting="o.getField('#/properties/description')"
+          v-model="data.description"
+        />
+      </div>
+    </client-only>
+  </SimpleAppForm>
+  <DebugDocumentData v-model="data" :label="doc.getDocName()" />
+</template>
+
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator.
+ * last change 2024-02-16
+ * Author: Ks Tan
+ */
+import { SimpleAppInputType, FormCrudEvent } from "~/types";
+import { Branch } from "~/simpleapp/generate/types";
+import { BranchDoc } from "~/simpleapp/docs/BranchDoc";
+
+const props = defineProps<{
+  _id?: string;
+  doc?: BranchDoc;
+  paras?: Branch;
+}>();
+const doc = props.doc ?? useNuxtApp().$BranchDoc();
+const data = doc.getReactiveData();
+const emits = defineEmits(["after"]);
+const id = computed(() => props._id ?? "");
+
+/************ start default methods ****************/
+
+const newData = () => doc.setNew();
+
+const getRecord = async () => {
+  if (id.value && id.value != "new") {
+    await doc.getById(id.value);
+  } else {
+    newData();
+  }
+};
+
+getRecord();
+watch(id, async () => await getRecord());
+/************ end default methods ****************/
+
+const actionListener = async (actionName: string) => {
+  emits("after", actionName, data.value, doc);
+};
+
+onMounted(async () => await actionListener(FormCrudEvent.mount));
+</script>

package/templates/nuxt/components/form/readme.md.eta

@@ -0,0 +1 @@
+all document form auto generate into here

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

@@ -1,9 +1,9 @@
 <template>
     <!-- <header>       -->
         <!-- <MegaMenu :model="getMenus()" orientation="horizontal" />               -->
-    <client-only>
-    <div class="flex flex-row">
-        
+    
+    <div >
+        <client-only>
         
         <div class="flex-1 flex flex-row gap-2 p-2">
             <!-- <div class="">
@@ -13,7 +13,7 @@
             <!-- <div class="">
                 <HeaderButtonHome/>                
             </div> -->
-            <div v-if="isMobile()">                
+            <div v-if="isMobile()" class="dark:text-white max-w-[15rem] truncate ...">                
                 <div v-if="useRoute().fullPath.split('/').length<=3">{{ t('home') }}</div>
                 <div v-else>{{ _.last(useRoute().fullPath.split('/'))  }}</div>
             </div>
@@ -23,11 +23,11 @@
             
         </div>
         <div class="flex-1 flex flex-row-reverse  gap-2 p-2">
-
-            <div class=" text-right">
+            <!--
+            <div class=" text-right" v-if="!isMobile()">
                 <HeaderButtonProfile/>
             </div>
-            <!-- <div class=" text-right">
+             <div class=" text-right">
                 <HeaderButtonTaskList/>
             </div> -->
             <!-- <div class="">
@@ -36,9 +36,9 @@
         </div>
 
         
-        
+    </client-only>    
     </div>
-    </client-only>
+    
     <!-- </header> -->
 </template>
 

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

@@ -52,11 +52,11 @@ const getBranches = ()=>{
 <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="'-'">
+                        <NuxtLink :to="item.url" v-if="item.url" class="dark:text-white" :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>
+                            <span class="cursor-pointer dark:text-white" @click="showSwitcher">{{ item.label }}</span>
                             <OverlayPanel ref="op">
                                 <div>
                                     <ul class="flex flex-col">

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

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import Dialog from 'primevue/dialog';
-import {ref} from 'vue'
+// import {ref} from 'vue'
 import {MenuData} from '~/types'
-const visible = ref(false)
+const visible = defineModel<boolean>({default:true,required:true})
 
 // const emit = defineEmits(['select'])
 const selectMenu = (menuname:{name:string,children:any}) =>{
@@ -12,11 +12,11 @@ const selectMenu = (menuname:{name:string,children:any}) =>{
 
 
 const m =  getMenustFromPageMeta()
-const treemenu:any[] = []
-
+let treemenu:any[] = []
 
 getMenustFromPageMeta().reduce((r, item) => {
-    item.split('/').reduce((o, name) => {
+    item.split('/').
+    reduce((o, name) => {
         var temp = (o.children = o.children || []).find(q => q.name === name);
         if (!temp) o.children.push(temp = { name });
         return temp;
@@ -24,32 +24,26 @@ getMenustFromPageMeta().reduce((r, item) => {
     return r;
 }, { children: treemenu })
 
-
+treemenu = treemenu.sort((a,b)=>a.name<b.name ?-1:1)
 </script>
 <template>
-  <div>    
-    <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>
-    </button>
-
-     <Dialog v-model:visible="visible" modal :header="t('pickDocument')" :pt="{dialog:{ class:' bg-primary-800 ' }}">
+  
+    <!-- <button class="text-center border-none  cursor-pointer pi pi-bars dark:text-white" v-if="getCurrentXorg()" @click="visible=true">      -->
+      <Dialog v-model:visible="visible" modal :header="t('pickDocument')" :pt="{dialog:{ class:' bg-primary-800 ' }}">
       <div class="">
-          <div v-for="m in treemenu" class="m-4">
+        
+          <div v-for="m in treemenu.sort()" class="m-4">
+            
             <h3>{{ t(m.name) }}</h3>
-            <div class="grid grid-cols-6 gap-4">
-              <button v-for="submenu in m.children" class="border rounded-lg p-2" @click="selectMenu(submenu)">              
+            <div class="grid md:grid-cols-2 lg:grid-cols-6 gap-4">              
+              <ButtonPrimary v-for="submenu in m.children.sort((a:any,b:any)=>a.name<b.name ?-1:1)" class="border rounded-lg p-2" @click="selectMenu(submenu)">              
                 {{ t(submenu.name) }}
-              </button>
+              </ButtonPrimary>
             </div>
             
           </div>
           
         </div>
     </Dialog>           
-  </div>
+    
 </template>
-<style scoped>
-
-</style>