@simitgroup/simpleapp-generator 1.2.8 → 1.3.1-alpha

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

@@ -16,13 +16,17 @@ const CustomTailwind = usePassThrough(
             // buttonContainer:{class:'hidden'},
         },
         card:{
-            root:{class:'bg-white dark:bg-gray-600  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 '},
             button: ({ context }) => ({
@@ -41,7 +45,7 @@ const CustomTailwind = usePassThrough(
         },
         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 w-full max-h-full max-w-full md:h-3/4 lg:h-1/2']},
+            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'}
         },        
@@ -50,14 +54,22 @@ const CustomTailwind = usePassThrough(
             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'},
-            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'}
         },        
@@ -70,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/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,25 +1,36 @@
-<template>
-    <Dialog v-model:visible="visible"        
-        :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">
 /**
@@ -28,56 +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)=>{     
-    console.log("ViewRecord event received by listener")
-    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/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/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,17 +24,19 @@ getMenustFromPageMeta().reduce((r, item) => {
     return r;
 }, { children: treemenu })
 
-
+treemenu = treemenu.sort((a,b)=>a.name<b.name ?-1:1)
 </script>
 <template>
   
-    <button class="text-center border-none  cursor-pointer pi pi-bars dark:text-white" v-if="getCurrentXorg()" @click="visible=true">     
+    <!-- <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 md:grid-cols-2 lg:grid-cols-6 gap-4">
-              <ButtonPrimary 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) }}
               </ButtonPrimary>
             </div>
@@ -43,5 +45,5 @@ getMenustFromPageMeta().reduce((r, item) => {
           
         </div>
     </Dialog>           
-    </button>  
+    
 </template>

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

@@ -7,15 +7,12 @@ import {ref} from 'vue'
 
 const { locale,setLocale,locales } = useI18n()
 const colorMode = useColorMode()
-
+const modelValue = defineModel<boolean>()
 const mylocale = ref(locale)
-const userprofileoverlay = ref();
 const colors = [{value:'light', name:t('light')},{value:'dark', name:t('dark')}]
-const toggle = (event:any) => {
-    userprofileoverlay.value.toggle(event);   
-}
+
 const toProfile = ()=>{    
-    userprofileoverlay.value.toggle();   
+    modelValue.value=false
 
     if(getCurrentXorg()){
         navigateTo(`/${getCurrentXorg()}/profile`)
@@ -24,10 +21,6 @@ const toProfile = ()=>{
     }
     
 }
-const toFrontpage = () =>{
-    userprofileoverlay.value.toggle();   
-    navigateTo('/')
-}
 const saveLocale=async (v:string)=>{    
     await setLocale(v)
 } 
@@ -37,14 +30,15 @@ const saveLocale=async (v:string)=>{
 </script>
 
 <template>          
-        <div class="bg-cover bg-center rounded-md p-3  cursor-pointer profile-button"  @click="toggle">
-            <img  :src="getAvatarLink(<string>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="bg-cover bg-center rounded-md p-3  cursor-pointer profile-button"  @click="toggle">
+            <i class="pi pi-user dark:text-white"></i> -->
+            <!-- <img  :src="getAvatarLink(<string>getProfileEmail(),32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" /> -->
+        <!-- </div> -->
     
-        <OverlayPanel appendTo="body" ref="userprofileoverlay" >                    
+        <Dialog appendTo="body" ref="userprofileoverlay" v-model:visible="modelValue" close-on-escape :header="t('profile')">
             <!-- <div> -->
                 <!-- <div class="py-2 transition duration-150 ease-in-out z-10 absolute top-0 right-0 bottom-0 left-0" id="modal"> -->
-                    <div  class="">
+                    <div  class="p-4">
                         <!-- <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" >
                                 <div class="w-12 h-12 bg-cover bg-center rounded-md">
@@ -77,13 +71,13 @@ const saveLocale=async (v:string)=>{
                             
                             <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 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>
+                                <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-white 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>
                 <!-- </div> -->
                 
             <!-- </div> -->
-        </OverlayPanel>
+        </Dialog>
     
 </template>

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

@@ -0,0 +1,25 @@
+<template>
+  <ListView
+    :list="recordlist as T[]"
+    with-filter
+    :title-field="documentTitle"
+    :sub-title-field="uniqueKey"
+    #default="{ item, index }"
+  >
+    <div class="cursor-pointer flex flex-row gap-2" @click="emits('click', item)">
+      <slot name="default" :index="index" :item="item">      
+        <TextTitle class="flex-1">{{ item[(documentTitle as  keyof typeof item) ] }}</TextTitle>
+        <TextSubtitle >{{ item[uniqueKey as  keyof typeof item] }}</TextSubtitle>
+      </slot>
+    </div>
+  </ListView>
+</template>
+<script setup lang="ts" generic="T extends { [key: string]: any }">
+import { SearchBody } from "~/types";
+const emits = defineEmits(["click"]);
+const props = defineProps<{
+  recordlist: T[];  
+  uniqueKey?: string;
+  documentTitle?: string;
+}>();
+</script>

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

@@ -0,0 +1,77 @@
+<template>
+  <DataTable
+    v-bind="$attrs"
+    stripedRows
+    dataKey="_id"
+    :showGridlines="true"
+    size="small"
+    :pt="{
+      header: { class: '' },
+      headerRow: { class: ' bg-gray-200' },
+    }"
+    v-on:row-click="clickRow"
+    :value="value"
+    :filters="filters"
+    :paginator="true"
+    :rows="20"
+    :rowsPerPageOptions="[20, 40, 60, 100]"
+  >
+    <!-- header -->
+    <template #header>
+      <div class="flex flex-row w-full text-right justify-content-end">
+        <div class="flex-1">
+          <slot name="toolbar"></slot>
+        </div>
+        <div class="flex-1">
+          <slot name="title">
+            <h1 class="text text-2xl pt-2 text-center dark:text-white">
+              {{ t(title) }}
+            </h1>
+          </slot>
+        </div>
+        <span class="p-input-icon-left flex-1">
+          <i class="pi pi-search mt-4 ml-2 text-gray-400 absolute" />
+          <InputText
+            type="search"
+            v-model="filters['global'].value"
+            class="text-right"
+            placeholder="Keyword Search"
+          />
+        </span>
+      </div>
+    </template>
+    <!-- no data found -->
+    <template #empty>
+      <div class="text-center">
+        <div class="text-3xl text-gray-400 pi pi-exclamation-circle"></div>
+        <div class="text-3xl text-gray-400">{{ t("noDataFound") }}</div>
+      </div>
+    </template>    
+      <slot name="default">
+        <Column header="undefineColumns"></Column>
+      </slot>    
+  </DataTable>
+</template>
+<script setup lang="ts" generic="T">
+// import { CellSetting } from "~/types";
+import { FilterMatchMode } from "primevue/api";
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+import renderComponent from "~/components/renderer";
+import { emit } from "process";
+const props = defineProps<{
+  value: T[]
+  title: string
+  columns: string[]
+  uniqueKey: string
+  documentTitle: string
+}>();
+const emits = defineEmits(["selectRow"]);
+const clickRow = (eventdata: any) => {
+  emits("selectRow", eventdata.data);
+};
+
+const filters = ref({
+  global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+});
+</script>