@simitgroup/simpleapp-generator 1.6.6-h-alpha → 1.6.6-j-alpha

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

@@ -60,6 +60,7 @@ body {
     @apply font-medium  text-gray-50 dark:text-gray-300 border
 }
 
+/*
 .btn-primary {
     @apply btn bg-primary-600 hover:bg-primary-400 dark:!bg-primary-700 dark:hover:bg-primary-800 
 }
@@ -75,34 +76,79 @@ body {
 .btn-warn {
     @apply btn bg-warning-600 hover:bg-warning-400 
 }
-
-
-
-
-.p-component-overlay-enter {
-    animation: p-component-overlay-enter-animation 150ms forwards;
+*/
+
+/* Primary and Surface Palettes */
+:root {
+    --p-primary-50: #ecfdf5;
+    --p-primary-100: #d1fae5;
+    --p-primary-200: #a7f3d0;
+    --p-primary-300: #6ee7b7;
+    --p-primary-400: #34d399;
+    --p-primary-500: #10b981;
+    --p-primary-600: #059669;
+    --p-primary-700: #047857;
+    --p-primary-800: #065f46;
+    --p-primary-900: #064e3b;
+    --p-primary-950: #022c22;
+    --p-surface-0: #ffffff;
+    --p-surface-50: #f8fafc;
+    --p-surface-100: #f1f5f9;
+    --p-surface-200: #e2e8f0;
+    --p-surface-300: #cbd5e1;
+    --p-surface-400: #94a3b8;
+    --p-surface-500: #64748b;
+    --p-surface-600: #475569;
+    --p-surface-700: #334155;
+    --p-surface-800: #1e293b;
+    --p-surface-900: #0f172a;
+    --p-surface-950: #020617;
+    --p-content-border-radius: 6px;
+    --p-primary: var(--p-primary-500);
+    --p-icon-size: 1rem;
+}
+
+/* Light Mode */
+:root {
+    --p-primary-color: var(--p-primary-500);
+    --p-primary-contrast-color: var(--p-surface-0);
+    --p-primary-hover-color: var(--p-primary-600);
+    --p-primary-active-color: var(--p-primary-700);
+    --p-content-border-color: var(--p-surface-200);
+    --p-content-hover-background: var(--p-surface-100);
+    --p-content-hover-color: var(--p-surface-800);
+    --p-highlight-background: var(--p-primary-50);
+    --p-highlight-color: var(--p-primary-700);
+    --p-highlight-focus-background: var(--p-primary-100);
+    --p-highlight-focus-color: var(--p-primary-800);
+    --p-text-color: var(--p-surface-700);
+    --p-text-hover-color: var(--p-surface-800);
+    --p-text-muted-color: var(--p-surface-500);
+    --p-text-hover-muted-color: var(--p-surface-600);
 }
 
-.p-component-overlay-leave {
-    animation: p-component-overlay-leave-animation 150ms forwards;
-}
-
-.p-component-overlay {
-    @keyframes p-component-overlay-enter-animation {
-        from {
-            background-color: transparent;
-        }
-        to {
-            background-color: var(--maskbg);
-        }
-    }
-    
-    @keyframes p-component-overlay-leave-animation {
-        from {
-            background-color: var(--maskbg);
-        }
-        to {
-            background-color: transparent;
-        }
-    }
+/* 
+ * Dark Mode
+ * Change the .p-dark to match the darkMode in tailwind.config.
+ * For example; 
+ *  darkMode: ['selector', '[class*="app-dark"]'] 
+ *  should match;
+ * :root.app-dark
+*/
+:root.p-dark {
+    --p-primary-color: var(--p-primary-400);
+    --p-primary-contrast-color: var(--p-surface-900);
+    --p-primary-hover-color: var(--p-primary-300);
+    --p-primary-active-color: var(--p-primary-200);
+    --p-content-border-color: var(--p-surface-700);
+    --p-content-hover-background: var(--p-surface-800);
+    --p-content-hover-color: var(--p-surface-0);
+    --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
+    --p-highlight-color: rgba(255,255,255,.87);
+    --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
+    --p-highlight-focus-color: rgba(255,255,255,.87);
+    --p-text-color: var(--p-surface-0);
+    --p-text-hover-color: var(--p-surface-0);
+    --p-text-muted-color: var(--p-surface-400);
+    --p-text-hover-muted-color: var(--p-surface-300);
 }

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col">
     <label v-if="label" :for="inputid">{{ label }}</label>
-    <Calendar
+    <DatePicker
       v-model="modelValue"
       class="w-full"
       :inputid="inputid"

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

@@ -1,5 +1,5 @@
 <template>    
-  <Calendar 
+  <DatePicker 
       v-model="selectedDate"
       inline            
       @update:modelValue="chooseDate"
@@ -33,10 +33,10 @@
               />
           </div>
       </template>
-  </Calendar>
+  </DatePicker>
 </template>
 <script setup lang="ts" generic="T">
-import { CalendarDateSlotOptions,CalendarMonthChangeEvent } from "primevue/calendar";
+import { DatePickerDateSlotOptions, DatePickerMonthChangeEvent } from "primevue/datepicker";
 
 import {
 CalEventType,
@@ -76,7 +76,7 @@ const disableDays=computed(()=>{
   })
 })
 
-function isHoliday(date:CalendarDateSlotOptions){
+function isHoliday(date: DatePickerDateSlotOptions) {
 
   for(let i = 0 ; i<props.holidays.length;i++){
       const item = props.holidays[i]
@@ -111,13 +111,13 @@ const getEventQty = (date:CalendarDateSlotOptions)=>{
   const recordlength =  props.items.filter(item=>item.start==checkdate).length
   return recordlength
 }
-const viewChange = (event: CalendarMonthChangeEvent) => {    
-emits("viewChange", event);
+const viewChange = (event: DatePickerMonthChangeEvent) => {    
+  emits("viewChange", event);
 };
 
 
 onMounted(() => {
-offdays.value = getCurrentBranch()?.branch.offdays ?? [];
+  offdays.value = getCurrentBranch()?.branch.offdays ?? [];
 });
 </script>
 <style >

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

@@ -7,7 +7,7 @@
       <i class="pi pi-code"></i>
       <span>{{ label }}</span>
     </div>
-    <Sidebar
+    <Drawer
       v-model:visible="visible"
       :pt="{ root: { class: 'w-5/6' } }"
       class="text-red-100"
@@ -23,7 +23,7 @@
                 </pre
         >
       </template>
-    </Sidebar>
+    </Drawer>
   </div>
 </template>
 
@@ -37,7 +37,6 @@
 // import Panel from 'primevue/panel';
 // import ScrollPanel from 'primevue/scrollpanel';
 import Dialog from "primevue/dialog";
-import Sidebar from "primevue/sidebar";
 
 import { ref } from "vue";
 const modelValue = defineModel();

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

@@ -5,7 +5,7 @@
  * last change 2023-10-28
  * Author: Ks Tan
  */
-import OverlayPanel from 'primevue/overlaypanel';
+import Popover from 'primevue/popover';
 const op = ref()
 
 const home = ref({
@@ -63,7 +63,7 @@ const getBranches = ()=>{
                         </NuxtLink>
                         <div v-else>
                             <span class="cursor-pointer dark:text-white" @click="showSwitcher">{{ item.label }}</span>
-                            <OverlayPanel ref="op">
+                            <Popover ref="op">
                                 <div>
                                     <ul class="flex flex-col">
                                         <li  v-for="b in getBranches()" class="p-1 route-link-list ">
@@ -73,7 +73,7 @@ const getBranches = ()=>{
                                         </li>
                                     </ul>
                                 </div>
-                            </OverlayPanel>
+                            </Popover>
                         </div>
 
                 </template>

package/templates/nuxt/components/header/button/task/HeaderButtonTaskList.vue.eta

@@ -4,12 +4,12 @@
             <Badge :value="taskqty" severity="danger"></Badge>
         </i>
 
-        <Sidebar v-model:visible="visible" position="right"  :modal="false" :dismissable="false">            
+        <Drawer v-model:visible="visible" position="right"  :modal="false" :dismissable="false">            
             <template #header>
                 <div class="text text-lg font-bold">{{ t('mytasks') }}</div>
             </template>
             <HeaderButtonTaskItem  v-for="task in tasklist" :task="task" @click="viewTask"></HeaderButtonTaskItem>                                                
-        </Sidebar>
+        </Drawer>
         <Dialog v-model:visible="dialogvisible" 
             @update:visible="closeDialog" 
             :pt="{root:{class:'w-1/2 h-5/6'}}"

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

@@ -63,7 +63,7 @@
  * Author: Ks Tan
  */
 // import { CellSetting } from "~/types";
-import { FilterMatchMode } from "primevue/api";
+import { FilterMatchMode } from "@primevue/core/api";
 import DataTable from "primevue/datatable";
 import Column from "primevue/column";
 import renderComponent from "~/components/renderer";

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Sidebar v-model:visible="messagesvisible" position="right" :header="t('messages')">
+    <Drawer v-model:visible="messagesvisible" position="right" :header="t('messages')">
       <ListView :list="list" #default="{ item, index }" @click="openMessage">
         <div class="flex flex-col">
           <TextBold v-if="!item.read">{{ item.messageTitle }}</TextBold>
@@ -29,7 +29,7 @@
         </template>
       </Dialog>
       <ConfirmPopup></ConfirmPopup>
-    </Sidebar>
+    </Drawer>
   </div>
 </template>
 <script setup lang="ts">

package/templates/nuxt/components/overlay/OverlayPanelWithToolBar.vue.eta

@@ -1,12 +1,12 @@
 <template>
-  <Sidebar
+  <Drawer
     :position="position ?? 'right'"
     v-if="showDialog"
     v-model:visible="showDialog"
     modal
     :show-close-icon="false"
     :dismissable="dismissable"
-    :pt="{root:{class:'w-2/3 border-0 border-l border-l-gray-500'}}"
+    :pt="{root:{class:'!w-2/3 border-0 border-l border-l-gray-500'}}"
     #container
   >
     <div class="overflow-y-scroll">
@@ -25,7 +25,7 @@
         <slot name="default"></slot>
       </div>
     </div>
-  </Sidebar>
+  </Drawer>
 </template>
 <script lang="ts" setup>
 /**

package/templates/nuxt/components/overlay/OverlaySideBarCrud.vue.eta

@@ -1,5 +1,5 @@
 <template>
-  <Sidebar
+  <Drawer
     position="right"
     v-if="showDialog"
     v-model:visible="showDialog"
@@ -16,7 +16,7 @@
         <slot name="default"></slot>
       </div>
     </div>
-  </Sidebar>
+  </Drawer>
 </template>
 <script lang="ts" setup>
 /**

package/templates/nuxt/components/page/PageDocList.vue.eta

@@ -17,19 +17,19 @@
     <ListDocument
       v-if="recordlist"
       @click="showDialogForm"
-      :recordlist="recordlist as T[]"
+      :recordlist="recordlist"
       :unique-key="uniqueKey"
       :document-title="documentTitle"
     >
       <template #default="{ index, item }">
-        <slot name="mobileList" :index="index" :item="item as T"></slot>
+        <slot name="mobileList" :index="index" :item="item"></slot>
       </template>
     </ListDocument>
   </div>
   <div v-else class="simpleapp-crudsimple">
     <ListDocumentTable
       v-if="recordlist"
-      :value="recordlist as T[]"
+      :value="recordlist"
       :title="doc.getDocName()"
       :unique-key="<string>uniqueKey"
       :document-title="<string>documentTitle"

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

@@ -0,0 +1,19 @@
+<template>
+  <span v-if="modelValue">
+    {{ getDayJs()().to(getDayJs()(modelValue)) }}
+  </span>
+  <span v-else-if="value">
+    {{ getDayJs()().to(getDayJs()(value)) }}
+  </span>
+  <span v-else>-</span>
+</template>
+<script lang="ts" setup>
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * last change 2024-06-08
+ * author: Ks Tan
+ */
+const modelValue = defineModel<Date | string>();
+const props = defineProps<{ value?: Date | string }>();
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <Calendar
+  <DatePicker
     :pt="pt"
     :dateFormat="getPrimevueCalendarDateFormat()"
     :inputId="uuid"
@@ -12,19 +12,19 @@
     :showTime="showtime"
     :timeOnly="timeOnly"
     hourFormat="12"
-    v-bind="componentProps as CalendarProps"
+    v-bind="componentProps"
   />
 </template>
 <script setup lang="ts">
 // :date-format="getDateFormat()"
-import { CalendarProps } from "primevue/calendar";
+import { DatePickerProps } from "primevue/datepicker";
 const props = defineProps<{
   pt: any;
   uuid: string;
   placeholder?: string;
   setting: any;
   readonly?: boolean;
-  componentProps?: CalendarProps;
+  componentProps?: DatePickerProps;
   type: "date" | "time" | "datetime";
 }>();
 

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

@@ -23,7 +23,7 @@
       >
         <i class="pi pi-angle-down"></i>
       </button>
-      <OverlayPanel ref="op">
+      <Popover ref="op">
         <div class="m-4">
           <ul>
             <li v-for="docno in docFormatlist" class="hover-list-primary p-2">
@@ -34,7 +34,7 @@
             </li>
           </ul>
         </div>
-      </OverlayPanel>
+      </Popover>
     </span>
     <!-- {{ Object.getOwnPropertyNames(setting) }} -->
   </div>
@@ -47,7 +47,7 @@
  * Author: Ks Tan
  */
 import { ForeignKey } from "~/types";
-import OverlayPanel from "primevue/overlaypanel";
+import Popover from "primevue/popover";
 import InputText from "primevue/inputtext";
 import { DocNoFormat } from "~/types";
 const props = defineProps<{

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

@@ -345,7 +345,7 @@
 import { autocompletetype } from "~/types";
 import moment from "moment";
 import AutoComplete, { AutoCompleteProps } from "primevue/autocomplete";
-import Calendar, { CalendarProps } from "primevue/calendar";
+import { DatePickerProps } from "primevue/datepicker";
 import Checkbox, { CheckboxProps } from "primevue/checkbox";
 import Chips, { ChipsProps } from "primevue/chips";
 import SimpleAppDocumentNo from "./SimpleAppDocumentNo.vue";
@@ -359,7 +359,6 @@ import MultiSelect, { MultiSelectProps } from "primevue/multiselect";
 import Password, { PasswordProps } from "primevue/password";
 import RadioButton, { RadioButtonProps } from "primevue/radiobutton";
 import Rating, { RatingProps } from "primevue/rating";
-import Slider, { SliderProps } from "primevue/slider";
 import Textarea, { TextareaProps } from "primevue/textarea";
 import Editor, { EditorProps } from "primevue/editor";
 import { SimpleAppInputType } from "~/types";
@@ -390,7 +389,7 @@ const props = withDefaults(
       | InputTextProps
       | TextareaProps
       | DropdownProps
-      | CalendarProps
+      | DatePickerProps
       | RatingProps;
   }>(),
   { type: "text" },

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

@@ -12,9 +12,7 @@
  * Author: Ks Tan
  */
 import type { JSONSchema7,JSONSchema7Definition } from 'json-schema';
-import Ajv from 'ajv';
-import addFormats from 'ajv-formats';
-import addErrors from 'ajv-errors';
+import { getValidateService } from "~/simpleapp/generate/sharelibs/validate";
 import _ from 'lodash'
 
     const props = defineProps<{
@@ -130,18 +128,7 @@ import _ from 'lodash'
 
 
    const validate=(callback:Function) => {
-    const ajv = new Ajv({ allErrors: true });
-    addFormats(ajv);
-    addErrors(ajv)
-    
-    ajv.addFormat('tel',/^$|^\d{7,15}$/gm)    
-    ajv.addFormat('text',/.*$/)
-    ajv.addFormat('html',/.*$/)
-    ajv.addFormat('documentno',/.*$/)
-    
-    ajv.addKeyword({ keyword: 'x-foreignkey', schemaType: 'string' });
-    ajv.addKeyword({ keyword: 'x-simpleapp-config', schemaType: 'object' });
-
+    const ajv = getValidateService();
     
     // this.errorlist.value = {};
     // this.hook('pre-validation', this.data.value);

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

@@ -3,7 +3,7 @@
     <button class="" @click="previewPermission">
       <i class="pi pi-question-circle"></i>
     </button>
-    <Sidebar
+    <Drawer
       v-model:visible="showpermissioninfo"
       modal
       :pt="{ root: { class: 'w-2/3' } }"
@@ -86,7 +86,7 @@
           </div>
         </div>
       </div>
-    </Sidebar>
+    </Drawer>
   </div>
 </template>
 <script setup lang="ts">

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

@@ -72,7 +72,7 @@ export default defineNuxtConfig({
         '@nuxtjs/i18n',
         'dayjs-nuxt',
         '@sidebase/nuxt-auth',
-        'nuxt-primevue',
+        '@primevue/nuxt-module',
         '@nuxtjs/apollo',
         // '@nuxtjs/pwa', //cannot turn on, will cause nuxt cant start
         // "nuxt-security",     //temporary avoid nuxt-security cause cors
@@ -125,7 +125,10 @@ export default defineNuxtConfig({
         options: {
             ripple: true,
             inputStyle: 'filled',
-
+            unstyled: true,
+            ptOptions: {
+                mergeProps: true,
+            },
         },
         components: {
             include: '*',
@@ -134,9 +137,7 @@ export default defineNuxtConfig({
         directives: {
             include: ['Ripple', 'Tooltip', 'Badge', 'FocusTrap']
         },
-        cssLayerOrder: 'tailwind-base, primevue, tailwind-utilities',
-        importPT: { as: 'SimpleAppPT', from: path.resolve(__dirname, './assets/primevue/passthrough.ts') },
-
+        importPT: { from: '../presets/lara/'},
 
     },
     // pinia: {

package/templates/nuxt/pages/index.vue._eta

@@ -7,7 +7,7 @@
  */
 const alltenants = ref<any[]>([])
 const totaltenant = ref(0)
-  const list = (await getPorfileApi().getAllTenants()).data as any[];
+  const list = (await getProfileApi().getAllTenants()).data as any[];
   if(list.length==0 || list.length>1) navigateTo('/picktenant')
   else navigateTo (`/${list[0].permissions[0].xOrg}`)
   

package/templates/nuxt/plugins/40.pusher.ts.eta

@@ -9,10 +9,16 @@ import Pusher from 'pusher-js';
 export default defineNuxtPlugin( async(nuxtApp) => {
     const pusherkey =  (useRuntimeConfig().app.PUSHER_KEY ?? '') as string
     const pushercluster = (useRuntimeConfig().app.PUSHER_CLUSTER ?? '') as string    
-    const pusher = new Pusher(pusherkey, { cluster: pushercluster,});
+    let pusher = null;
+    if (pusherkey && pushercluster){
+        pusher = new Pusher(pusherkey, {
+            cluster: pushercluster
+        });
+    }
+
     return {        
         provide: {
-            pusher:pusher
+            pusher: pusher
         }
     }    
 });

package/templates/nuxt/presets/lara/accordion/index.js

@@ -0,0 +1,79 @@
+export default {
+    // For PrimeVue 3
+    accordiontab: {
+        root: {
+            class: 'mb-1'
+        },
+        header: ({ props }) => ({
+            class: [
+                // State
+                { 'select-none pointer-events-none cursor-default opacity-60': props?.disabled }
+            ]
+        }),
+        headerAction: ({ context }) => ({
+            class: [
+                //Font
+                'font-bold',
+                'leading-none',
+
+                // Alignments
+                'flex items-center',
+                'relative',
+
+                // Sizing
+                'p-5',
+
+                // Shape
+                'rounded-t-md',
+                { 'rounded-br-md rounded-bl-md': !context.active, 'rounded-br-0 rounded-bl-0': context.active },
+
+                // Color
+                'border border-surface-200 dark:border-surface-700',
+                'bg-surface-50 dark:bg-surface-800',
+                'text-surface-600 dark:text-surface-0/80',
+                { 'text-surface-900': context.active },
+
+                // Transition
+                'transition duration-200 ease-in-out',
+                'transition-shadow duration-200',
+
+                // States
+                'hover:bg-surface-100 dark:hover:bg-surface-700/40',
+                'hover:text-surface-900',
+                'focus:outline-none focus:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50 ring-inset dark:focus-visible:ring-primary-300/50', // Focus
+
+                // Misc
+                'cursor-pointer no-underline select-none'
+            ]
+        }),
+        headerIcon: {
+            class: 'inline-block mr-2'
+        },
+        headerTitle: {
+            class: 'leading-none'
+        },
+        content: {
+            class: [
+                // Spacing
+                'p-5',
+
+                //Shape
+                'rounded-tl-none rounded-tr-none rounded-br-lg rounded-bl-lg',
+                'border-t-0',
+
+                // Color
+                'bg-surface-0 dark:bg-surface-800',
+                'border border-surface-200 dark:border-surface-700',
+                'text-surface-700 dark:text-surface-0/80'
+            ]
+        },
+        transition: {
+            enterFromClass: 'max-h-0',
+            enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+            enterToClass: 'max-h-[1000px]',
+            leaveFromClass: 'max-h-[1000px]',
+            leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+            leaveToClass: 'max-h-0'
+        }
+    }
+};

package/templates/nuxt/presets/lara/accordioncontent/index.js

@@ -0,0 +1,3 @@
+export default {
+    content: 'p-5 bg-surface-0 dark:bg-surface-900 border border-t-0 border-surface-200 dark:border-surface-700 text-surface-700 dark:text-surface-0/80'
+};

package/templates/nuxt/presets/lara/accordionheader/index.js

@@ -0,0 +1,11 @@
+export default {
+    root: ({ context }) => ({
+        class: [
+            'flex items-center justify-between font-bold leading-none p-5 border border-surface-200 dark:border-surface-700 bg-surface-50 dark:bg-surface-800 text-surface-600 dark:text-surface-0/80 transition duration-200 ease-in-out',
+            {
+                'focus-visible:outline-none focus-visible:border-primary-500 dark:focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-400/20 dark:focus-visible:ring-primary-300/20': !context.disabled
+            }
+        ]
+    }),
+    toggleIcon: 'text-surface-600 dark:text-surface-0/80'
+};