@simitgroup/simpleapp-generator 1.6.6-j-alpha → 1.6.6-k.1-alpha

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,30 +1,32 @@
 <template>
   <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"
+    :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 { DatePickerProps } from "primevue/datepicker";
+import type { CalendarProps } from "primevue/calendar";
 const props = defineProps<{
   pt: any;
   uuid: string;
   placeholder?: string;
   setting: any;
   readonly?: boolean;
-  componentProps?: DatePickerProps;
+  componentProps?: CalendarProps;
   type: "date" | "time" | "datetime";
 }>();
 

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>
-      <Popover 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>
-      </Popover>
-    </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>
 /**

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

@@ -1,22 +1,13 @@
 <template>
   <div v-if="schema" :class="getLayoutClass()">
-    <label v-if="hidelabel"></label>
-    <label v-else :for="uuid" :class="getLabelClass()"
-      >{{ fieldlabel }}
+    <label v-if="!hidelabel" :for="uuid" :class="getLabelClass()">
+      {{ fieldlabel }}
       <span
         v-if="props.setting.isrequired && fieldlabel"
         class="text-danger-600 dark:text-danger-400"
-        >*</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> -->
-    <!-- <div v-else-if="readonly==true" :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue }}</div> -->
-    <!-- <slot v-else name="default" :uuid="uuid" :error="error"></slot> -->
-    <slot name="default" :uuid="uuid" :error="error"></slot>
+      >*</span>
+    </label>
+    <slot name="default" :uuid="uuid" :error="error"/>
 
     <small v-if="error" class="text-danger-600 dark:text-danger-400">{{
       error
@@ -24,7 +15,7 @@
     <small v-else class="input-desc">{{ fielddesc }}</small>
   </div>
   <div v-else :class="defaultcssclass">
-    <label class="etext-danger-600 dark:text-danger-400"
+    <label class="text-danger-600 dark:text-danger-400"
       >wrong path in getField()</label
     >
     <div class="text-danger-600 dark:text-danger-400">
@@ -33,7 +24,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import SimpleAppValue from "./SimpleAppValue.vue";
+// import SimpleAppValue from "./SimpleAppValue.vue";
 /**
  * This file was automatically generated by simpleapp generator. Every
  * MODIFICATION OVERRIDE BY GENERATEOR
@@ -73,25 +64,24 @@ const readonlyclass = "simpleapp-value-readonly";
 let schema: any;
 
 const getLayoutClass = () =>
-  `simpleapp-input-container flex  ${
-    props.inputType == "checkbox"
-      ? " flex flex-col "
-      : "flex flex-col "
-  }`;
+  "simpleapp-input-container flex flex-col";
+  // `simpleapp-input-container flex  ${
+  //   props.inputType == "checkbox" ? " flex flex-col " : "flex flex-col "
+  // }`;
 
 const getLabelClass = () => {
   let class1 =
-    "simpleapp-input-label text-left text-gray-500  dark:text-gray-200 ";
+    "simpleapp-input-label text-left text-gray-500  ";
 
   if (!isMobile()) class1 += "whitespace-nowrap truncate";
-  else if (props.inputType == "checkbox") class1 += " ml-1 dark:text-gray-200";
+  else if (props.inputType == "checkbox") class1 += " ml-1";
   else if (props.inputType != "autocomplete" && modelValue.value)
-    class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100";
+    class1 += "-mb-4 ml-1 z-10 text-xs";
   else if (props.inputType == "autocomplete" && modelValue.value?.label)
-    class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100";
+    class1 += "-mb-4 ml-1 z-10 text-xs";
   else if (modelValue.value !== undefined)
-    class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100";
-  else class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100 ";
+    class1 += "-mb-4 ml-1 z-10 text-xs";
+  else class1 += "-mb-4 ml-1 z-10 text-xs ";
   return class1;
 };
 
@@ -133,8 +123,9 @@ watch(props.setting.errors, (newvalue, oldvalue) => {
   if (newvalue[instancepath.value]) {
     const errlist: any[] = newvalue[instancepath.value];
     for (let i = 0; i < errlist.length; i++) {
-      error.value += errlist[i].message + ",";
+      error.value += errlist[i].message + ", ";
     }
+    error.value = error.value.slice(0, -2); 
     fieldcontainerclass.value = defaultcssclass + " input-error";
   } else {
     error.value = "";