@ramathibodi/nuxt-commons 0.1.44 → 0.1.45

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.44",
+  "version": "0.1.45",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"

package/dist/runtime/components/form/CheckboxGroup.vue

@@ -59,7 +59,6 @@ watch(props.modelValue, () => {
 </script>
 
 <template>
-  <v-container fluid>
     <label class="text-body-1 opacity-60">{{props.label}}</label>
     <div :class="`d-flex ${inline ? 'flex-row':'flex-column'}`">
       <v-checkbox v-for="item in computeItems"
@@ -83,7 +82,6 @@ watch(props.modelValue, () => {
     <label class="text-error text-subtitle-2 ml-1">
       {{computedRules}}
     </label>
-  </v-container>
 
 </template>
 

package/dist/runtime/components/form/Date.vue

@@ -6,7 +6,6 @@ import '@vuepic/vue-datepicker/dist/main.css'
 import {isArray, isString} from "lodash-es";
 import { type dateFormat, Datetime } from '../../utils/datetime'
 import { useRules } from "../../composables/utils/validation";
-import {VInput} from "vuetify/components/VInput";
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
   locale?: 'TH' | 'EN'
@@ -180,50 +179,45 @@ defineExpose({
 </script>
 
 <template>
-  <v-input v-model="displayedDate" v-bind="$attrs" ref="inputRef">
-    <template #default="{isReadonly,isDisabled}">
-      <v-menu
-          v-model="isMenuOpen"
-          :open-on-click="false"
+  <v-menu
+      v-model="isMenuOpen"
+      :open-on-click="false"
+  >
+    <template #activator="{ props: activatorProps }">
+      <v-text-field
+          ref="textFieldRef"
+          v-model="displayedDate"
+          :rules="computedRules"
+          v-bind="$attrs"
+          @focus="handleTextFieldFocus"
+          @blur="handleTextFieldBlur"
+          @keydown="handleTextFieldInput"
+          @keyup.enter="handleTextFieldEnterKey"
+          @click:clear="handleTextFieldClear"
+          @click="toggleMenuOpen('textField')"
       >
-        <template #activator="{ props: activatorProps }">
-            <v-text-field
-                ref="textFieldRef"
-                v-model="displayedDate"
-                :rules="computedRules"
-                v-bind="$attrs"
-                @focus="handleTextFieldFocus"
-                @blur="handleTextFieldBlur"
-                @keydown="handleTextFieldInput"
-                @keyup.enter="handleTextFieldEnterKey"
-                @click:clear="handleTextFieldClear"
-                @click="toggleMenuOpen('textField')"
-            >
-              <template #append-inner>
-                <v-icon v-if="!isReadonly.value"
-                    v-bind="activatorProps"
-                    @click="toggleMenuOpen('icon')"
-                >
-                  fa:fa-regular fa-calendar
-                </v-icon>
-              </template>
-            </v-text-field>
+        <template #append="{ isReadonly, isDisabled }">
+          <v-icon
+              :disabled="isReadonly.value || isDisabled.value"
+              v-bind="activatorProps"
+              @click="toggleMenuOpen('icon')"
+          >
+            fa:fa-regular fa-calendar
+          </v-icon>
         </template>
-        <Datepicker
-            v-model="selectedDate"
-            model-type="yyyy-MM-dd"
-            :enable-time-picker="false"
-            :flow="flow"
-            :min-date="props.minDate"
-            :max-date="props.maxDate"
-            auto-apply
-            inline
-            :locale="locale"
-            @update:model-value="updateDatePicker"
-        />
-      </v-menu>
+      </v-text-field>
     </template>
-
-  </v-input>
-
-</template>
+    <Datepicker
+        v-model="selectedDate"
+        model-type="yyyy-MM-dd"
+        :enable-time-picker="false"
+        :flow="flow"
+        :min-date="props.minDate"
+        :max-date="props.maxDate"
+        auto-apply
+        inline
+        :locale="locale"
+        @update:model-value="updateDatePicker"
+    />
+  </v-menu>
+</template>

package/dist/runtime/components/form/DateTime.vue

@@ -4,7 +4,6 @@ import { union,isBoolean,isArray,isString } from 'lodash-es'
 import { VTextField } from 'vuetify/components/VTextField'
 import { type dateFormat, Datetime } from '../../utils/datetime'
 import { useRules } from '../../composables/utils/validation'
-import {VInput} from "vuetify/components/VInput";
 
 interface Props {
   modelValue?: string | null
@@ -97,7 +96,7 @@ const computedTimeRules = computed(() => union(computedRules.value, props.timeRu
 
 const datePart = ref<string | null>(null)
 const timePart = ref<string | null>(null)
-const pauseEmit = ref(false)
+const pauseEmit = ref(true)
 
 function reset() {
   datePart.value = null
@@ -159,43 +158,38 @@ watch(() => props.modelValue, () => {
 </script>
 
 <template>
-  <v-input v-model="datePart" v-bind="$attrs" ref="inputRef">
-    <template #default="{isReadonly,isDisabled}">
-      <v-container
-          :fluid="true"
-          class="pa-0"
-      >
-        <v-row :dense="dense">
-          <v-col cols="8">
-            <FormDate
-                v-model="datePart"
-                ref="dateRef"
-                :rules="computedDateRules"
-                :label="label"
-                :format="format"
-                :picker-only="pickerOnly"
-                :readonly="isReadonly.value"
-                :disabled="fixedDate"
-                :min-date="minDate"
-                :max-date="maxDate"
-                v-bind="$attrs"
-            />
-          </v-col>
-          <v-col cols="4">
-            <FormTime
-                v-model="timePart"
-                ref="timeRef"
-                :rules="computedTimeRules"
-                :label="label"
-                :enable-seconds="enableSeconds"
-                :picker-only="pickerOnly"
-                :readonly="isReadonly.value"
-                v-bind="$attrs"
-            />
-          </v-col>
-        </v-row>
-      </v-container>
-    </template>
-  </v-input>
-
+  <v-container
+      :fluid="true"
+      class="pa-0"
+  >
+    <v-row :dense="dense">
+      <v-col cols="8">
+        <FormDate
+            v-model="datePart"
+            ref="dateRef"
+            :rules="computedDateRules"
+            :label="label"
+            :format="format"
+            :picker-only="pickerOnly"
+            :readonly="readonly"
+            :disabled="fixedDate"
+            :min-date="minDate"
+            :max-date="maxDate"
+            v-bind="$attrs"
+        />
+      </v-col>
+      <v-col cols="4">
+        <FormTime
+            v-model="timePart"
+            ref="timeRef"
+            :rules="computedTimeRules"
+            :label="label"
+            :enable-seconds="enableSeconds"
+            :picker-only="pickerOnly"
+            :readonly="readonly"
+            v-bind="$attrs"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
 </template>

package/dist/runtime/components/form/Time.vue

@@ -4,7 +4,6 @@ import { VTextField } from 'vuetify/components/VTextField'
 import Datepicker from '@vuepic/vue-datepicker'
 import '@vuepic/vue-datepicker/dist/main.css'
 import { Datetime } from '../../utils/datetime'
-import {VInput} from "vuetify/components/VInput";
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
   enableSeconds?: boolean
@@ -123,49 +122,45 @@ defineExpose({
 </script>
 
 <template>
-  <v-input v-model="displayedDate" v-bind="$attrs" ref="inputRef">
-    <template #default="{isReadonly,isDisabled}">
-      <v-menu
-          v-model="isMenuOpen"
-          :close-on-content-click="false"
-          :open-on-click="false"
+  <v-menu
+      v-model="isMenuOpen"
+      :close-on-content-click="false"
+      :open-on-click="false"
+  >
+    <template #activator="{ props }">
+      <v-text-field
+          ref="textFieldRef"
+          v-model="tempTime"
+          v-bind="$attrs"
+          @focus="onTextFieldFocus"
+          @blur="onTextFieldBlur"
+          @keydown="onTextFieldTyped"
+          @keyup.enter="onTextFieldEnterKey"
+          @click:clear="onTextFieldClear"
+          @click="toggleMenuOpen('textField')"
       >
-        <template #activator="{ props }">
-          <v-text-field
-              ref="textFieldRef"
-              v-model="tempTime"
-              v-bind="$attrs"
-              @focus="onTextFieldFocus"
-              @blur="onTextFieldBlur"
-              @keydown="onTextFieldTyped"
-              @keyup.enter="onTextFieldEnterKey"
-              @click:clear="onTextFieldClear"
-              @click="toggleMenuOpen('textField')"
+        <template #append="{ isReadonly, isDisabled }">
+          <v-icon
+              :disabled="isReadonly.value || isDisabled.value"
+              v-bind="props"
+              @click="toggleMenuOpen('icon')"
           >
-            <template #append-inner>
-              <v-icon v-if="!isReadonly.value"
-                  v-bind="props"
-                  @click="toggleMenuOpen('icon')"
-              >
-                fa:fa-regular fa-clock
-              </v-icon>
-            </template>
-          </v-text-field>
+            fa:fa-regular fa-clock
+          </v-icon>
         </template>
-        <Datepicker
-            v-model="time"
-            model-type="HH:mm:ss"
-            :enable-seconds="enableSeconds"
-            minutes-grid-increment="1"
-            time-picker
-            auto-apply
-            :close-on-auto-apply="false"
-            inline
-            :locale="locale"
-            @update:model-value="setDatePicker"
-        />
-      </v-menu>
+      </v-text-field>
     </template>
-  </v-input>
-
-</template>
+    <Datepicker
+        v-model="time"
+        model-type="HH:mm:ss"
+        :enable-seconds="enableSeconds"
+        minutes-grid-increment="1"
+        time-picker
+        auto-apply
+        :close-on-auto-apply="false"
+        inline
+        :locale="locale"
+        @update:model-value="setDatePicker"
+    />
+  </v-menu>
+</template>

package/dist/runtime/components/label/Field.vue

@@ -7,6 +7,7 @@ interface Props {
   horizontal?: boolean;
   size?: 'large' | 'medium';
   truncate?: boolean;
+  notFoundText?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -15,6 +16,7 @@ const props = withDefaults(defineProps<Props>(), {
   horizontal: false,
   size: 'large',
   truncate: false,
+  notFoundText : '-'
 });
 
 const valueText = ref<HTMLElement | null>(null);
@@ -27,6 +29,9 @@ const setTruncate = (event: Event) => {
   const target = event.target as HTMLElement;
   isTooltip.value = target.offsetWidth < target.scrollWidth;
 };
+const valueData = computed(()=>{
+  return (props.value) ? props.value : props.notFoundText
+})
 
 </script>
 
@@ -41,8 +46,8 @@ const setTruncate = (event: Event) => {
       <slot name="label">{{ props.label }}:</slot>
     </div>
     <div :class="`ml-1 ${calTruncate}`" ref="valueText">
-      <slot name="value">
-        <div v-if="!props.truncate">{{ props.value }}</div>
+      <slot name="value" :value="valueData">
+        <div v-if="!props.truncate">{{ valueData }}</div>
         <div
             v-else
             @mouseover="setTruncate"
@@ -54,10 +59,10 @@ const setTruncate = (event: Event) => {
                   class="text-truncate"
                   v-bind="isTooltip ? props : ''"
               >
-                {{ value }}
+                {{ valueData }}
               </div>
             </template>
-            <span>{{ value }}</span>
+            <span>{{ valueData }}</span>
           </v-tooltip>
         </div>
       </slot>
@@ -70,8 +75,8 @@ const setTruncate = (event: Event) => {
     </VCardSubtitle>
     <VCardText :class="`pa-0 mb-2 ${calSize}`">
       <div :class="calTruncate" ref="valueText">
-        <slot name="value">
-          <div v-if="!props.truncate">{{ props.value }}</div>
+        <slot name="value" :value="valueData">
+          <div v-if="!props.truncate">{{ valueData }}</div>
           <div
               v-else
               @mouseover="setTruncate"
@@ -83,10 +88,10 @@ const setTruncate = (event: Event) => {
                     class="text-truncate"
                     v-bind="isTooltip ? props : ''"
                 >
-                  {{ value }}
+                  {{ valueData }}
                 </div>
               </template>
-              <span>{{ value }}</span>
+              <span>{{ valueData }}</span>
             </v-tooltip>
           </div>
         </slot>

package/dist/runtime/components/master/Combobox.vue

@@ -43,6 +43,17 @@ watch(selectedItem, (newValue) => {
   emit('update:modelValue', newValue.itemCode)
 })
 
+watch(
+    () => props.modelValue,
+    (newVal) => {
+      if (newVal && items.value.length > 0) {
+        const found = items.value.find(item => item.itemCode === newVal)
+        if (found) selectedItem.value = found
+      }
+    },
+    { immediate: true }
+)
+
 const itemTitleField = computed(() => {
   if (props.lang == 'TH') return 'itemValue'
   else return 'itemValueAlternative'

package/dist/runtime/components/master/Select.vue

@@ -9,6 +9,7 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VSelect['$props']>
   modelValue?: string
   groupKey: string
   fields?: string[]
+  lang?: 'TH' | 'EN'
 }
 const props = withDefaults(defineProps<Props>(), {
   lang: 'TH',
@@ -38,9 +39,20 @@ watch(() => props.groupKey, () => {
 }, { immediate: true })
 
 watch(selectedItem, (newValue) => {
-  emit('update:modelValue', newValue)
+    emit('update:modelValue', newValue.itemCode)
 })
 
+watch(
+    () => props.modelValue,
+    (newVal) => {
+      if (newVal && items.value.length > 0) {
+        const found = items.value.find(item => item.itemCode === newVal)
+        if (found) selectedItem.value = found
+      }
+    },
+    { immediate: true }
+)
+
 const itemTitleField = computed(() => {
   if (props.lang == 'TH') return 'itemValue'
   else return 'itemValueAlternative'

package/dist/runtime/components/master/label.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
+import {computed} from "vue";
+
 interface Props {
   groupKey?: string | null
   itemCode?: string | null
   locale?: string
-
   notFoundText?: string
   placeholder?: string
 }

package/dist/runtime/composables/document/template.js

@@ -1,7 +1,7 @@
 import { processTemplateFormTable } from "./templateFormTable.js";
 import { processTemplateFormHidden } from "./templateFormHidden.js";
 import { some, includes } from "lodash-es";
-export const validationRulesRegex = /^(require(?:\([^)]*\))?|requireIf(?:\([^)]*\))?|requireTrue(?:\([^)]*\))?|requireTrueIf(?:\([^)]*\))?|numeric(?:\([^)]*\))?|range(?:\([^)]*\))?|integer(?:\([^)]*\))?|unique(?:\([^)]*\))?|length(?:\([^)]*\))?|lengthGreater(?:\([^)]*\))?|lengthLess(?:\([^)]*\))?|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex(?:\([^)]*\))?)(,(require(?:\([^)]*\))?|requireIf(?:\([^)]*\))?|requireTrue(?:\([^)]*\))?|requireTrueIf(?:\([^)]*\))?|numeric(?:\([^)]*\))?|range(?:\([^)]*\))?|integer(?:\([^)]*\))?|unique(?:\([^)]*\))?|length(?:\([^)]*\))?|lengthGreater(?:\([^)]*\))?|lengthLess(?:\([^)]*\))?|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex(?:\([^)]*\))?))*$/;
+export const validationRulesRegex = /^(require(?:\([^)]*\))?|requireIf\([^)]*\)|requireTrue(?:\([^)]*\))?|requireTrueIf\([^)]*\)|numeric(?:\([^)]*\))?|range\([^)]*\)|integer(?:\([^)]*\))?|unique\([^)]*\)|length(?:\([^)]*\))?|lengthGreater\([^)]*\)|lengthLess\([^)]*\)|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex\([^)]*\)|idcard(?:\([^)]*\))?|DateFuture(?:\([^)]*\))?|DatetimeFuture(?:\([^)]*\))?|DateHappen(?:\([^)]*\))?|DatetimeHappen(?:\([^)]*\))?|DateAfter\([^)]*\)|DateBefore\([^)]*\)|DateEqual\([^)]*\))(,(require(?:\([^)]*\))?|requireIf\([^)]*\)|requireTrue(?:\([^)]*\))?|requireTrueIf\([^)]*\)|numeric(?:\([^)]*\))?|range\([^)]*\)|integer(?:\([^)]*\))?|unique\([^)]*\)|length(?:\([^)]*\))?|lengthGreater\([^)]*\)|lengthLess\([^)]*\)|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex\([^)]*\)|idcard(?:\([^)]*\))?|DateFuture(?:\([^)]*\))?|DatetimeFuture(?:\([^)]*\))?|DateHappen(?:\([^)]*\))?|DatetimeHappen(?:\([^)]*\))?|DateAfter\([^)]*\)|DateBefore\([^)]*\)|DateEqual\([^)]*\)))*$/;
 export function useDocumentTemplate(items, parentTemplates) {
   if (!items) return "";
   if (typeof items === "string") {
@@ -52,7 +52,7 @@ function templateItemToString(item, parentTemplates) {
       templateString = item.inputCustomCode || "";
       break;
     case "VRadio":
-      templateString = `<v-radio-group v-model="data.${item.variableName || ""}"${validationRules ? " " + validationRules.trim() : ""}>${item.inputLabel ? `<template #label>${item.inputLabel}</template>` : ""}${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
+      templateString = `${item.inputLabel ? `<p class="opacity-60">${item.inputLabel}</p>` : ""} <v-radio-group v-model="data.${item.variableName || ""}"${validationRules ? " " + validationRules.trim() : ""}>${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
       break;
     case "VRadioInline":
       templateString = `<v-radio-group v-model="data.${item.variableName || ""}" inline ${validationRules ? " " + validationRules.trim() : ""}>${item.inputLabel ? `<template #prepend><span class="opacity-60">${item.inputLabel}</span></template>` : ""}${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;

package/dist/runtime/composables/menu.js

@@ -20,7 +20,7 @@ export function routeToMenuItem(route) {
     };
     if (route.children) {
       const menuItems = new Array();
-      for (const children of route.children) {
+      for (const children of route.children.sort((a, b) => (a.path?.toString() ?? "").localeCompare(b.path?.toString() ?? ""))) {
         const childMenuItem = routeToMenuItem(children);
         if (childMenuItem) menuItems.push(childMenuItem);
         menuItem.menuItems = menuItems;
@@ -31,7 +31,7 @@ export function routeToMenuItem(route) {
 }
 export function createMenu() {
   const menuAll = ref([]);
-  const routes = useRouter().getRoutes();
+  const routes = useRouter().getRoutes().sort((a, b) => (a.path?.toString() ?? "").localeCompare(b.path?.toString() ?? ""));
   for (const route of routes) {
     const paths = route.path.split("/");
     if (paths.length == 2) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.44",
+  "version": "0.1.45",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",
@@ -115,5 +115,5 @@
     "vitest": "^1.6.0",
     "vue-tsc": "2.0.29"
   },
-  "packageManager": "pnpm@9.15.5+sha512.845196026aab1cc3f098a0474b64dfbab2afe7a1b4e91dd86895d8e4aa32a7a6d03049e2d0ad770bbe4de023a7122fb68c1a1d6e0d033c7076085f9d5d4800d4"
+  "packageManager": "pnpm@9.15.9+sha512.68046141893c66fad01c079231128e9afb89ef87e2691d69e4d40eee228988295fd4682181bae55b58418c3a253bde65a505ec7c5f9403ece5cc3cd37dcf2531"
 }