@ramathibodi/nuxt-commons 4.0.14 → 4.0.15

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.3.1"
   },
-  "version": "4.0.14",
+  "version": "4.0.15",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -43,6 +43,9 @@ const computedRules = computed(() => {
     return ["DateHappen"];
   }
 });
+const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+const birthdateYearRange = computed(() => [currentYear - 120, currentYear]);
+const maxBirthdate = /* @__PURE__ */ new Date();
 const dobFormat = computed(() => {
   let displayFormat = void 0;
   if (dobPrecisionSelected.value == "yearMonth") {
@@ -64,6 +67,10 @@ const dobFormat = computed(() => {
       :flow="props.flow"
       :format="dobFormat"
       :rules="computedRules"
+      :year-range="birthdateYearRange"
+      :max-date="maxBirthdate"
+      reverse-years
+      eager
   >
     <template #append="{ isReadonly, isDisabled, activatorProps, toggleMenuOpen }">
       <span

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

@@ -13,7 +13,7 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VCheckbox['$props'
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
     inline: boolean;
 }>>, {
-    validate: () => boolean;
+    validate: () => Promise<boolean>;
     reset: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;

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

@@ -1,7 +1,8 @@
 <script setup>
-import { ref, watch, computed } from "vue";
+import { ref, watch, computed, nextTick } from "vue";
 import { VCheckbox } from "vuetify/components/VCheckbox";
-import { join, without, filter, head, reject } from "lodash-es";
+import { VInput } from "vuetify/components/VInput";
+import { filter, head, reject } from "lodash-es";
 const props = defineProps({
   items: { type: Array, required: true },
   label: { type: String, required: false },
@@ -12,26 +13,20 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue"]);
 const values = ref([]);
 const valuesOther = ref();
-const touched = ref(false);
-const onUserInput = () => {
-  touched.value = true;
-};
-const validate = () => {
-  touched.value = true;
-  return !computedRules.value;
+const inputRef = ref();
+const validationValue = computed(() => values.value.length ? values.value : null);
+const validate = async () => {
+  const errors = await inputRef.value?.validate() ?? [];
+  return errors.length === 0;
 };
 const reset = () => {
-  touched.value = false;
+  inputRef.value?.resetValidation();
 };
 defineExpose({ validate, reset });
-const computedRules = computed(() => {
-  if (props.rules) {
-    let rules = props.rules.map((rule) => rule(values.value.length ? values.value : null));
-    rules = without(rules, true);
-    return join(rules, ",");
-  }
-});
-const showError = computed(() => touched.value && !!computedRules.value);
+const onInteract = async () => {
+  await nextTick();
+  inputRef.value?.validate();
+};
 const computedOther = computed(() => {
   const itemOther = filter(props.items, { value: "other" });
   return head(itemOther);
@@ -59,33 +54,39 @@ watch(props.modelValue, () => {
 </script>
 
 <template>
-  <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"
-      v-model="values"
-      :value="item.value"
-      density="compact"
-      hide-details
-      :error="showError"
-      :="$attrs"
-      :label="item.label"
-      @update:model-value="onUserInput"
-    />
-  </div>
-  <v-text-field
-    v-if="computedOther"
-    v-model="valuesOther"
-    hide-details
-    :error="showError"
-    :="$attrs"
-    :label="computedOther.label"
-    @update:model-value="onUserInput"
-  />
-  <label
-    v-if="showError"
-    class="text-error text-subtitle-2 ml-1"
+  <v-input
+    ref="inputRef"
+    :model-value="validationValue"
+    :rules="props.rules"
+    hide-details="auto"
   >
-    {{ computedRules }}
-  </label>
+    <template #default="{ isValid }">
+      <div class="w-100">
+        <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"
+            :key="item.value"
+            v-model="values"
+            :value="item.value"
+            density="compact"
+            hide-details
+            :error="isValid === false"
+            :="$attrs"
+            :label="item.label"
+            @update:model-value="onInteract"
+          />
+        </div>
+        <v-text-field
+          v-if="computedOther"
+          v-model="valuesOther"
+          hide-details
+          :error="isValid === false"
+          :="$attrs"
+          :label="computedOther.label"
+          @update:model-value="onInteract"
+        />
+      </div>
+    </template>
+  </v-input>
 </template>

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

@@ -13,7 +13,7 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VCheckbox['$props'
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
     inline: boolean;
 }>>, {
-    validate: () => boolean;
+    validate: () => Promise<boolean>;
     reset: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;

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

@@ -12,6 +12,9 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props
     flow?: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[];
     rules?: typeof VTextField['rules'];
     defaultDate?: boolean | string;
+    yearRange?: [number, number];
+    reverseYears?: boolean;
+    eager?: boolean;
 }
 declare function resetDatePicker(): void;
 declare function toggleMenuOpen(trigger: string): void;
@@ -42,11 +45,13 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     pickerOnly: boolean;
     flow: () => never[];
     defaultDate: boolean;
+    reverseYears: boolean;
+    eager: boolean;
 }>>, {
     reset: typeof resetDatePicker;
     validate: typeof validate;
     resetValidation: typeof resetValidation;
-    isValid: boolean | null | undefined;
+    isValid: import("vue").ComputedRef<boolean | null | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
@@ -55,6 +60,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     pickerOnly: boolean;
     flow: () => never[];
     defaultDate: boolean;
+    reverseYears: boolean;
+    eager: boolean;
 }>>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -17,7 +17,10 @@ const props = defineProps({
   pickerOnly: { type: Boolean, required: false, default: false },
   flow: { type: Array, required: false, default: () => [] },
   rules: { type: null, required: false },
-  defaultDate: { type: [Boolean, String], required: false, default: false }
+  defaultDate: { type: [Boolean, String], required: false, default: false },
+  yearRange: { type: Array, required: false },
+  reverseYears: { type: Boolean, required: false, default: false },
+  eager: { type: Boolean, required: false, default: false }
 });
 const emit = defineEmits(["update:modelValue"]);
 const computedRules = computed(() => {
@@ -157,11 +160,12 @@ function validate() {
 function resetValidation() {
   textFieldRef.value?.resetValidation();
 }
+const isValid = computed(() => textFieldRef.value?.isValid);
 defineExpose({
   reset: resetDatePicker,
   validate,
   resetValidation,
-  isValid: textFieldRef.value?.isValid
+  isValid
 });
 </script>
 
@@ -169,6 +173,7 @@ defineExpose({
   <v-menu
       v-model="isMenuOpen"
       :open-on-click="false"
+      :eager="props.eager"
   >
     <template #activator="{ props: activatorProps }">
       <v-text-field
@@ -203,6 +208,8 @@ defineExpose({
         :flow="datepickerFlow"
         :min-date="props.minDate"
         :max-date="props.maxDate"
+        :year-range="props.yearRange"
+        :reverse-years="props.reverseYears"
         auto-apply
         inline
         :locale="datepickerLocale"

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

@@ -12,6 +12,9 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props
     flow?: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[];
     rules?: typeof VTextField['rules'];
     defaultDate?: boolean | string;
+    yearRange?: [number, number];
+    reverseYears?: boolean;
+    eager?: boolean;
 }
 declare function resetDatePicker(): void;
 declare function toggleMenuOpen(trigger: string): void;
@@ -42,11 +45,13 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     pickerOnly: boolean;
     flow: () => never[];
     defaultDate: boolean;
+    reverseYears: boolean;
+    eager: boolean;
 }>>, {
     reset: typeof resetDatePicker;
     validate: typeof validate;
     resetValidation: typeof resetValidation;
-    isValid: boolean | null | undefined;
+    isValid: import("vue").ComputedRef<boolean | null | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
@@ -55,6 +60,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     pickerOnly: boolean;
     flow: () => never[];
     defaultDate: boolean;
+    reverseYears: boolean;
+    eager: boolean;
 }>>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -17,7 +17,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     reset: typeof reset;
     validate: typeof validate;
     resetValidation: typeof resetValidation;
-    isValid: boolean | null | undefined;
+    isValid: import("vue").ComputedRef<boolean | null | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {

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

@@ -96,11 +96,12 @@ function validate() {
 function resetValidation() {
   textFieldRef.value?.resetValidation();
 }
+const isValid = computed(() => textFieldRef.value?.isValid);
 defineExpose({
   reset,
   validate,
   resetValidation,
-  isValid: textFieldRef.value?.isValid
+  isValid
 });
 </script>
 

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

@@ -17,7 +17,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     reset: typeof reset;
     validate: typeof validate;
     resetValidation: typeof resetValidation;
-    isValid: boolean | null | undefined;
+    isValid: import("vue").ComputedRef<boolean | null | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "4.0.14",
+  "version": "4.0.15",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",