@simitgroup/simpleapp-generator 1.6.6-i-alpha → 1.6.6-k-alpha

package/templates/nuxt/components/overlay/{OverlaySideBarCrud.vue.eta → OverlaySideBarCrud.vue._eta}

@@ -1,5 +1,5 @@
 <template>
-  <Sidebar
+  <Drawer
     position="right"
     v-if="showDialog"
     v-model:visible="showDialog"
@@ -16,12 +16,12 @@
         <slot name="default"></slot>
       </div>
     </div>
-  </Sidebar>
+  </Drawer>
 </template>
 <script lang="ts" setup>
 /**
- * This file was automatically generated by simpleapp generator. Every
- * MODIFICATION OVERRIDE BY GENERATEOR
+ * This file was automatically generated by simpleapp generator during initialization. It is changable.
+ * --remove-this-line-to-prevent-override--
  * last change 2023-10-28
  * Author: Ks Tan
  */

package/templates/nuxt/components/overlay/{OverlayViewer.vue.eta → OverlayViewer.vue._eta}

@@ -24,8 +24,8 @@
 </template>
 <script lang="ts" setup>
 /**
- * This file was automatically generated by simpleapp generator. Every
- * MODIFICATION OVERRIDE BY GENERATEOR
+ * This file was automatically generated by simpleapp generator during initialization. It is changable.
+ * --remove-this-line-to-prevent-override--
  * last change 2023-10-28
  * Author: Ks Tan
  */

package/templates/nuxt/components/page/{PageDocList.vue.eta → 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"
@@ -142,8 +142,8 @@
 
 <script setup lang="ts" generic="T extends { [key: string]: any }">
 /**
- * This file was automatically generated by simpleapp generator. Every
- * MODIFICATION OVERRIDE BY GENERATEOR
+ * This file was automatically generated by simpleapp generator during initialization. It is changable.
+ * --remove-this-line-to-prevent-override--
  * last change 2023-10-28
  * Author: Ks Tan
  */

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/renderer/{RendererDateTime.vue.eta → RendererDateTime.vue._eta}

@@ -9,8 +9,8 @@
 </template>
 <script lang="ts" setup>
 /**
- * This file was automatically generated by simpleapp generator during initialization.
- * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * This file was automatically generated by simpleapp generator during initialization. It is changable.
+ * --remove-this-line-to-prevent-override--
  * last change 2024-03-10
  * author: Ks Tan
  */

package/templates/nuxt/components/renderer/{RendererDocHistories.vue.eta → RendererDocHistories.vue._eta}

@@ -49,6 +49,12 @@
   </div>
 </template>
 <script lang="ts" setup>
+/**
+ * This file was automatically generated by simpleapp generator during initialization. It is changable.
+ * --remove-this-line-to-prevent-override--
+ * last change 2024-02-22
+ * author: Ks Tan
+ */
 import TextSubsubtitle from "../text/TextSubsubtitle.vue";
 import RendererDateTime from "./RendererDateTime.vue";
 import { Documentevent, User } from "~/simpleapp/generate/openapi";

package/templates/nuxt/components/renderer/{RendererForeignKey.vue.eta → RendererForeignKey.vue._eta}

@@ -12,8 +12,8 @@
 </template>
 <script setup lang="ts">
 /**
- * This file was automatically generated by simpleapp generator during initialization.
- * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * This file was automatically generated by simpleapp generator during initialization. It is changable.
+ * --remove-this-line-to-prevent-override--
  * last change 2024-04-14
  * author: Ks Tan
  */

package/templates/nuxt/components/renderer/{RendererLink.vue.eta → RendererLink.vue._eta}

@@ -10,8 +10,8 @@
 </template>
 <script setup lang="ts">
 /**
- * This file was automatically generated by simpleapp generator during initialization.
- * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * This file was automatically generated by simpleapp generator during initialization. It is changable.
+ * --remove-this-line-to-prevent-override--
  * last change 2024-02-04
  * author: Ks Tan
  */

package/templates/nuxt/components/renderer/{RendererTime.vue.eta → RendererTime.vue._eta}

@@ -9,8 +9,8 @@
 </template>
 <script lang="ts" setup>
 /**
- * This file was automatically generated by simpleapp generator during initialization.
- * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * This file was automatically generated by simpleapp generator during initialization. It is changable.
+ * --remove-this-line-to-prevent-override--
  * last change 2024-04-14
  * author: Ks Tan
  */

package/templates/nuxt/components/renderer/{RendererViewer.vue.eta → RendererViewer.vue._eta}

@@ -15,8 +15,8 @@
 </template>
 <script setup lang="ts">
 /**
- * This file was automatically generated by simpleapp generator during initialization.
- * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * This file was automatically generated by simpleapp generator during initialization. It is changable.
+ * --remove-this-line-to-prevent-override--
  * last change 2024-02-04
  * author: Ks Tan
  */

package/templates/nuxt/components/select/{SelectTemplate.vue.eta → SelectTemplate.vue._eta}

@@ -64,8 +64,8 @@
 </template>
 <script setup lang="ts">
 /**
- * This file was automatically generated by simpleapp generator. Every
- * MODIFICATION OVERRIDE BY GENERATEOR
+ * This file was automatically generated by simpleapp generator during initialization. It is changable.
+ * --remove-this-line-to-prevent-override--
  * last change 2024-02-26
  * Author: Ks Tan
  */

package/templates/nuxt/components/session/{SessionBlock.vue.eta → SessionBlock.vue._eta}

@@ -17,8 +17,8 @@
 </template>
 <script lang="ts" setup>
 /**
- * This file was automatically generated by simpleapp generator. Every
- * MODIFICATION OVERRIDE BY GENERATEOR
+ * This file was automatically generated by simpleapp generator during initialization. It is changable.
+ * --remove-this-line-to-prevent-override--
  * last change 2023-10-28
  * Author: Ks Tan
  */

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

@@ -1,12 +1,12 @@
 <template>
   <div
     v-if="readonly"
-    class="p-2 border rounded-lg border-gray-300 dark:border-blue-900/40"
+    class="p-2 border rounded-lg border-gray-300 flex h-input items-center"
   >
     <button
       type="button"
       :readonly="readonly"
-      class="cursor-pointer text-primary-600 dark:text-primary-400"
+      class="cursor-pointer text-primary-600"
       tabindex="0"
       @click="openViewer(true)"
     >
@@ -15,70 +15,71 @@
   </div>
   <div
     v-else-if="modelValue !== undefined"
-    class="p-2 border rounded-lg border-gray-300 dark:border-blue-900/40 relative"
+    class="px-3 border rounded-lg border-gray-300 flex h-input items-center"
   >
-  <!-- readonly -->
+    <!-- readonly -->
     <button
+      :id="inputId"
       ref="autocompleteinput"
       type="button"
-      :id="inputId"
-      
-      class="cursor-pointer text-primary-600 dark:text-primary-400"
-      @click="openViewer(true)"
+      class="cursor-pointer text-primary-600 flex-1 text-left"
+      @click="openViewer(false)"
     >
       {{ modelValue && modelValue.label ? modelValue.label : "-" }}
     </button>
 
     <div
-      class="absolute h-full top-0 right-0 text-right text-white z-10 align-middle p-3"
+      class="text-right text-white align-middle"
     >
       <button
-      type="button"
+        type="button"
         class="pi pi-times rounded-full bg-slate-500 p-1 cursor-pointer text-xs"
-        @click="clear"
         tabindex="0"
-      ></button>
+        @click="clear"
+      />
     </div>
   </div>
   <div v-else class="relative">
     <div
-      class="absolute h-full top-0 right-10 text-right text-white z-10 align-middle p-3"
       v-if="modelValue?._id"
+      class="absolute h-full top-0 right-10 text-right text-white z-10 align-middle py-2 px-3"
     >
       <span
         class="pi pi-times rounded-full bg-slate-500 p-1 cursor-pointer text-xs"
         @click="clear"
-      ></span>
+      />
     </div>
 
     <AutoComplete
       v-if="!isMobile()"
-      class="w-full"
-      v-model="autocompleteitem"
       ref="autocompleteinput"
-      forceSelection
-      optionLabel="label"
-      @focus="setFocus"
-      @item-select="pickAutoComplete"
-      @complete="getListFromAutocompleteApi"
+      v-model="autocompleteitem"
+      pt:root="w-full"
+      pt:pcInputText:root="w-full rounded-r-none"
+      pt:dropdown="min-w-10"
+      force-selection
+      option-label="label"
       :placeholder="placeholdertxt"
       :dropdown="true"
-      @clear="clear"
       :dropdown-mode="'current'"
       :readonly="readonly"
       :pt="pt"
       :delay="500"
       :disabled="readonly"
-      @click="clickAutocomplete"
       :suggestions="list"
-      @blur="onBlurAutocomplete"
-      :inputId="inputId"
+      :input-id="inputId"
       :path="setting.instancepath"
+      @focus="setFocus"
+      @item-select="pickAutoComplete"
+      @complete="getListFromAutocompleteApi"
+      @clear="clear"
+      @click="clickAutocomplete"
+      @blur="onBlurAutocomplete"
     >
       <template #header>
         <slot name="header">
           <div
-            class="flex flex-row font font-semibold text-sm dark:text-white gap-2 p-2"
+            class="flex flex-row font font-semibold text-sm gap-2 p-2"
           >
             <div class="w w-1/3 line-clamp-1">
               {{ t(codefield) ?? t("code") }}
@@ -94,7 +95,7 @@
       </template>
       <template #option="{ index, option }">
         <slot name="option" :index="index" :option="option">
-          <div class="flex flex-row dark:text-white text-sm gap-2">
+          <div class="flex flex-row text-sm gap-2">
             <div class="w w-1/3 line-clamp-1">{{ option.code }}</div>
             <div class="w w-2/3 line-clamp-1">{{ option.label }}</div>
           </div>
@@ -106,35 +107,35 @@
       <InputGroup class="w-full flex flex-row">
         <InputText
           :value="modelValue?.label"
-          @focus="showAutocompleteDialog(false)"
           :placeholder="placeholdertxt"
           class="rounded-r-none"
-        ></InputText>
+          @focus="showAutocompleteDialog(false)"
+        />
         <InputGroupAddon
-          @click="showAutocompleteDialog(true)"
           v-ripple
-          class="bg bg-primary-600 dark:bg-primary-700 text-white rounded-r-lg p-3"
+          class="bg bg-primary-600 text-white rounded-r-lg p-3"
+          @click="showAutocompleteDialog(true)"
         >
-          <i :class="`pi ${modelValue ? 'pi-link' : 'pi-angle-down'}`"></i>
+          <i :class="`pi ${modelValue ? 'pi-link' : 'pi-angle-down'}`" />
         </InputGroupAddon>
       </InputGroup>
 
       <OverlaySideBarCrud
         v-model="mobileVisible"
-        closeEventName="autocompleteoverlay"
+        close-event-name="autocompleteoverlay"
       >
         <template v-if="mobileListMode == 'list'">
           <mobile-toolbar>
             <template #start>
               <ButtonText @click="mobileVisible = false">
-                <i class="pi pi-times"></i>
+                <i class="pi pi-times"/>
               </ButtonText>
             </template>
             <template #center>
               <TextTitle class="text-white">{{ t(docname) }}</TextTitle>
             </template>
             <template #end>
-              <div></div>
+              <div/>
               <!-- <ButtonText @click="openViewer(false)">
             <i class="pi pi-plus"></i>
             </ButtonText>  -->
@@ -142,12 +143,12 @@
           </mobile-toolbar>
           <ListView
             :list="list"
-            :withFilter="true"
-            :defaultFilterValue="defaultFilterValue"
-            idField="_id"
-            titleField="code"
-            subTitleField="label"
+            :with-filter="true"
+            :default-filter-value="defaultFilterValue"
+            id-field="_id"
             #default="{ item, index }"
+            title-field="code"
+            sub-title-field="label"
             @click="onClickInMobile"
           >
             <div class="flex flex-row justify-end">
@@ -242,13 +243,12 @@ if (modelValue.value && modelValue.value._id) {
 const clear = () => {
   autocompleteitem.value = undefined;
   modelValue.value = undefined;
-  if(!isMobile()){
-    setTimeout(()=>{    
-    const autoel = autocompleteinput.value.$el
-    autoel?.firstElementChild?.focus()    
-  },100)  
+  if (!isMobile()) {
+    setTimeout(() => {
+      const autoel = autocompleteinput.value.$el;
+      autoel?.firstElementChild?.focus();
+    }, 100);
   }
-  
 };
 
 //if record picked, click button show record info instead
@@ -294,7 +294,7 @@ const getListFromAutocompleteApi = (event: any) => {
   getDocumentApi(targetDocument)
     .autoComplete(keyword, morefilter)
     .then((res: any) => {
-      console.log("Run autocomplete?");
+      // console.log("Run autocomplete?");
       list.value = res.data;
 
       if (
@@ -338,12 +338,12 @@ watch(modelValue, (newvalue: any) => {
 });
 const emitChanges = () => {
   emits("change", modelValue.value);
-  if(!isMobile()){
-    setTimeout(()=>{    
-    const autoel = autocompleteinput.value
-    autoel?.focus()    
-  },100)}
-
+  if (!isMobile()) {
+    setTimeout(() => {
+      const autoel = autocompleteinput.value;
+      autoel?.firstElementChild?.focus();
+    }, 100);
+  }
 };
 
 const setFocus = (ev: any) => {
@@ -399,7 +399,7 @@ const afterRenderMobileForm = async (
   data: any,
   result: any,
 ) => {
-  console.log("afterRenderMobileForm", eventType);
+  // console.log("afterRenderMobileForm", eventType);
   if (eventType == FormCrudEvent.create || eventType == FormCrudEvent.update) {
     autocompleteitem.value = {
       _id: data._id,
@@ -423,7 +423,7 @@ const afterRenderMobileForm = async (
 };
 
 const clickAutocomplete = (a, b) => {
-  console.log("clickAutocomplete", a, b);
+  // console.log("clickAutocomplete", a, b);
   return false;
 };
 </script>

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

@@ -1,23 +1,25 @@
 <template>
-  <Calendar
+  <DatePicker
+    v-model="datetimevalue"
     :pt="pt"
-    :dateFormat="getPrimevueCalendarDateFormat()"
-    :inputId="uuid"
+    :date-format="getPrimevueCalendarDateFormat()"
+    :input-id="uuid"
     :path="setting.instancepath"
-    v-model="datetimevalue"
-    @update:modelValue="updateDateTime"
-    showButtonBar
+    show-button-bar
     :readonly="readonly"
     :placeholder="placeholder"
-    :showTime="showtime"
-    :timeOnly="timeOnly"
-    hourFormat="12"
-    v-bind="componentProps as CalendarProps"
+    :show-time="showtime"
+    :time-only="timeOnly"
+    hour-format="12"
+    v-bind="<CalendarProps>componentProps"
+    :select-other-months="true"
+    pt:pcInputText:root="w-full"
+    @update:model-value="updateDateTime"
   />
 </template>
 <script setup lang="ts">
 // :date-format="getDateFormat()"
-import { CalendarProps } from "primevue/calendar";
+import type { CalendarProps } from "primevue/calendar";
 const props = defineProps<{
   pt: any;
   uuid: string;

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

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col">
-    <div class="flex flex-row gap-2">
+    <div class="flex flex-row gap-2 mt-3">
       <TextTitle v-if="title" class="flex-1">{{ title }}</TextTitle>
 
       <div class="flex flex-row"><slot name="buttons"></slot></div>
@@ -11,10 +11,12 @@
         </ButtonDefault>
       </div>
     </div>
+    <div class="text-xs italic text-gray-400"  v-if="inputDescription">{{ inputDescription }}</div>
+
     <ListContainer
-      class="p-2 dark:bg-slate-900 bg-slate-200 rounded-lg"
+      class="p-2 bg-slate-200 rounded-lg mt-3"
       :list="list"
-      #default="{item,index }"
+      #default="{ item, index }"
       @click="showRow"
     >
       <slot name="listbody" :item="item" :index="index">
@@ -61,6 +63,7 @@ const props = defineProps<{
   addNew?: boolean;
   readonly?: boolean;
   doc: SimpleAppClient<any, any>;
+  inputDescription: string
 }>();
 const readonly = computed(() => {
   if (props.readonly) return true;

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

@@ -1,43 +1,48 @@
 <template>
-  <div class="flex flex-row w-full">
+  <InputGroup class="flex flex-row w-full">
     <InputText
-      @focus="setFocus"
-      :readonly="readonly"
       v-model="modelValue"
+      :readonly="readonly"
       :placeholder="placeholder"
       :pt="pt"
       :class="
         !pt
           ? 'flex-1 w-full rounded-lg  ' +
-            (props.readonly || !props.setting.document.isNew() ? '' : 'rounded-tr-none rounded-br-none')
+            (props.readonly || !props.setting.document.isNew()
+              ? ''
+              : 'rounded-tr-none rounded-br-none')
           : ''
       "
+      @focus="setFocus"
     />
-    <span class="" v-if="!readonly && props.setting.document.isNew()">
-      <button
-        v-ripple
-        type="button"
-        @click="toggle"
+    <!-- <span class=""> -->
+      <Button
+        v-if="!readonly && props.setting.document.isNew()"
         tabindex="-1"
-        class="'btn bg-primary-500 dark:text-black text-white p-3 dark:border-blue-900/40 rounded-lg rounded-tl-none rounded-bl-none"
-      >
-        <i class="pi pi-angle-down"></i>
-      </button>
-      <OverlayPanel ref="op">
-        <div class="m-4">
-          <ul>
-            <li v-for="docno in docFormatlist" class="hover-list-primary p-2">
-              <div class="flex flex-row gap-2 cursor-pointer" @click="chooseFormat(docno)">                
-                <span class="">{{ docno.docNoFormatName }}</span>
-                <span class="text text-green-600">{{ docno.sample }}</span>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </OverlayPanel>
-    </span>
+        icon="pi pi-angle-down"
+        @click="toggle"
+      />
+      
+    <!-- </span> -->
+    <Popover ref="op">
+      <ul>
+        <li 
+          v-for="(docno, index) in docFormatlist" 
+          :key="index" 
+          class="hover-list-primary p-2"
+        >
+          <div
+            class="flex flex-row gap-2 cursor-pointer"
+            @click="chooseFormat(docno)"
+          >
+            <span class="">{{ docno.docNoFormatName }}</span>
+            <span class="text text-green-600">{{ docno.sample }}</span>
+          </div>
+        </li>
+      </ul>
+    </Popover>
     <!-- {{ Object.getOwnPropertyNames(setting) }} -->
-  </div>
+  </InputGroup>
 </template>
 <script lang="ts" setup>
 /**
@@ -47,7 +52,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<{