pukaad-ui-lib 1.78.0 → 1.80.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.78.0",
+  "version": "1.80.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/input/input-birth-date.vue

@@ -15,12 +15,15 @@
     :max-value="today"
     :min-value="minDate"
     :rules="birthDateRules"
+    :default-placeholder="defaultPlaceholder"
+    :reverse-years="true"
     :class="props.class"
   />
 </template>
 
 <script setup>
 import { computed } from "vue";
+import { CalendarDate } from "@internationalized/date";
 const props = defineProps({
   id: { type: String, required: false, default: "input-birth-date" },
   name: { type: String, required: false, default: "input-birth-date" },
@@ -44,6 +47,14 @@ const minDate = computed(() => {
   date.setFullYear(date.getFullYear() - props.maxYearsBack);
   return date;
 });
+const defaultPlaceholder = computed(() => {
+  const date = /* @__PURE__ */ new Date();
+  return new CalendarDate(
+    date.getFullYear() - props.minAge,
+    date.getMonth() + 1,
+    date.getDate()
+  );
+});
 const birthDateRules = (v) => {
   if (!v && props.required) {
     return `\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01${props.label || "\u0E27\u0E31\u0E19\u0E40\u0E01\u0E34\u0E14"}`;

package/dist/runtime/components/input/input-date-picker.d.vue.ts

@@ -19,6 +19,8 @@ export interface InputDatePickerProps {
     maxValue?: Date;
     minValue?: Date;
     isDateDisabled?: (date: DateValue) => boolean;
+    defaultPlaceholder?: DateValue;
+    reverseYears?: boolean;
 }
 type __VLS_Props = InputDatePickerProps;
 type __VLS_ModelProps = {

package/dist/runtime/components/input/input-date-picker.vue

@@ -46,6 +46,8 @@
                 :max-value="maxCalendarValue"
                 :min-value="minCalendarValue"
                 :is-date-disabled="props.isDateDisabled"
+                :default-placeholder="props.defaultPlaceholder"
+                :reverse-years="props.reverseYears"
               />
               <!-- Time Picker -->
               <div
@@ -131,7 +133,9 @@ const props = defineProps({
   class: { type: null, required: false },
   maxValue: { type: Date, required: false },
   minValue: { type: Date, required: false },
-  isDateDisabled: { type: Function, required: false }
+  isDateDisabled: { type: Function, required: false },
+  defaultPlaceholder: { type: null, required: false },
+  reverseYears: { type: Boolean, required: false }
 });
 const maxCalendarValue = computed(() => {
   if (!props.maxValue) return void 0;

package/dist/runtime/components/input/input-date-picker.vue.d.ts

@@ -19,6 +19,8 @@ export interface InputDatePickerProps {
     maxValue?: Date;
     minValue?: Date;
     isDateDisabled?: (date: DateValue) => boolean;
+    defaultPlaceholder?: DateValue;
+    reverseYears?: boolean;
 }
 type __VLS_Props = InputDatePickerProps;
 type __VLS_ModelProps = {

package/dist/runtime/components/input/input-email.vue

@@ -32,6 +32,7 @@ const props = defineProps({
   iconAppend: { type: String, required: false },
   showCounter: { type: Boolean, required: false },
   limit: { type: Number, required: false },
+  maxLength: { type: Number, required: false },
   defaultValue: { type: [String, Number], required: false },
   modelValue: { type: [String, Number], required: false },
   class: { type: null, required: false }

package/dist/runtime/components/input/input-password.vue

@@ -64,6 +64,7 @@ const props = defineProps({
   iconAppend: { type: String, required: false },
   showCounter: { type: Boolean, required: false },
   limit: { type: Number, required: false },
+  maxLength: { type: Number, required: false },
   defaultValue: { type: [String, Number], required: false },
   modelValue: { type: [String, Number], required: false },
   class: { type: null, required: false }

package/dist/runtime/components/input/input-phone.vue

@@ -3,6 +3,7 @@
     ref="phoneRef"
     v-bind="$props"
     :rules="defaultRules || props.rules"
+    :max-length="computedMaxLength"
     v-model="phoneCode"
   >
     <template #append v-if="props.showIconStatus && validationState !== 'none'">
@@ -12,7 +13,7 @@
 </template>
 
 <script setup>
-import { ref, watch, computed } from "vue";
+import { ref, watch, computed, nextTick } from "vue";
 import {
   formatPhone,
   reverseFormatPhone,
@@ -36,6 +37,7 @@ const props = defineProps({
   iconAppend: { type: String, required: false },
   showCounter: { type: Boolean, required: false },
   limit: { type: Number, required: false },
+  maxLength: { type: Number, required: false },
   defaultValue: { type: [String, Number], required: false },
   modelValue: { type: [String, Number], required: false },
   class: { type: null, required: false }
@@ -43,6 +45,7 @@ const props = defineProps({
 const phoneRef = ref();
 const phoneCode = ref("");
 const validationState = ref("none");
+const previousFormatted = ref("");
 const modelValue = defineModel({ type: String, ...{
   default: ""
 } });
@@ -52,6 +55,12 @@ const validationIcon = computed(() => {
 const validationIconClass = computed(() => {
   return validationState.value === "success" ? "text-success" : "text-destructive";
 });
+const computedMaxLength = computed(() => {
+  if (previousFormatted.value && phoneCode.value.includes("+66")) {
+    return previousFormatted.value.length;
+  }
+  return void 0;
+});
 const defaultRules = (v) => {
   if (!v) return "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E01\u0E23\u0E2D\u0E01\u0E40\u0E1A\u0E2D\u0E23\u0E4C\u0E42\u0E17\u0E23\u0E28\u0E31\u0E1E\u0E17\u0E4C";
   if (!checkPattern(v)) return "\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07";
@@ -62,6 +71,7 @@ watch(
   (v) => {
     if (!v) {
       validationState.value = "none";
+      previousFormatted.value = "";
       return;
     }
     const isValidPattern = checkPattern(v);
@@ -72,11 +82,17 @@ watch(
       }
       modelValue.value = reverseFormatPhone(newNumber || v);
       validationState.value = "success";
+      previousFormatted.value = newNumber || v;
+      nextTick(() => {
+        const inputEl = document.getElementById(props.id);
+        inputEl?.blur();
+      });
     } else {
-      if (v.includes("+66")) {
+      if (previousFormatted.value && v.includes("+66")) {
         phoneCode.value = "";
         modelValue.value = "";
         validationState.value = "none";
+        previousFormatted.value = "";
       } else {
         validationState.value = "error";
       }

package/dist/runtime/components/input/input-text-field.d.vue.ts

@@ -17,6 +17,7 @@ export interface InputTextFieldProps extends InputProps {
     iconAppend?: string;
     showCounter?: boolean;
     limit?: number;
+    maxLength?: number;
 }
 type __VLS_Props = InputTextFieldProps;
 type __VLS_ModelProps = {

package/dist/runtime/components/input/input-text-field.vue

@@ -47,6 +47,7 @@
             :disabled="props.disabled"
             :placeholder="props.placeholder"
             :type="props.type"
+            :maxlength="props.maxLength"
             @click="emits('click', $event)"
             @keydown="emits('keydown', $event)"
           >
@@ -115,6 +116,7 @@ const props = defineProps({
   iconAppend: { type: String, required: false },
   showCounter: { type: Boolean, required: false, default: false },
   limit: { type: Number, required: false, default: 0 },
+  maxLength: { type: Number, required: false },
   defaultValue: { type: [String, Number], required: false },
   modelValue: { type: [String, Number], required: false },
   class: { type: null, required: false }

package/dist/runtime/components/input/input-text-field.vue.d.ts

@@ -17,6 +17,7 @@ export interface InputTextFieldProps extends InputProps {
     iconAppend?: string;
     showCounter?: boolean;
     limit?: number;
+    maxLength?: number;
 }
 type __VLS_Props = InputTextFieldProps;
 type __VLS_ModelProps = {

package/dist/runtime/components/ui/calendar/Calendar.d.vue.ts

@@ -5,6 +5,7 @@ type __VLS_Props = CalendarRootProps & {
     class?: HTMLAttributes["class"];
     layout?: LayoutTypes;
     yearRange?: DateValue[];
+    reverseYears?: boolean;
 };
 declare var __VLS_59: {}, __VLS_67: {}, __VLS_69: {
     date: DateValue;
@@ -31,6 +32,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     modelValue: DateValue | DateValue[];
     layout: "month-and-year" | "month-only" | "year-only";
+    reverseYears: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ui/calendar/Calendar.vue

@@ -5,8 +5,23 @@ import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from "reka-ui";
 import { createYear, createYearRange, toDate } from "reka-ui/date";
 import { computed, toRaw } from "vue";
 import { cn } from "@/runtime/plugins/shadcn";
-import { NativeSelect, NativeSelectOption } from "@/runtime/components/ui/native-select";
-import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from ".";
+import {
+  NativeSelect,
+  NativeSelectOption
+} from "@/runtime/components/ui/native-select";
+import {
+  CalendarCell,
+  CalendarCellTrigger,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHead,
+  CalendarGridRow,
+  CalendarHeadCell,
+  CalendarHeader,
+  CalendarHeading,
+  CalendarNextButton,
+  CalendarPrevButton
+} from ".";
 const props = defineProps({
   defaultValue: { type: null, required: false },
   defaultPlaceholder: { type: null, required: false },
@@ -36,7 +51,8 @@ const props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
   layout: { type: null, required: false, default: void 0 },
-  yearRange: { type: Array, required: false }
+  yearRange: { type: Array, required: false },
+  reverseYears: { type: Boolean, required: false, default: false }
 });
 const emits = defineEmits(["update:modelValue", "update:placeholder"]);
 const delegatedProps = reactiveOmit(props, "class", "layout", "placeholder");
@@ -51,6 +67,12 @@ const yearRange = computed(() => {
     end: props?.maxValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone())).cycle("year", 10)
   });
 });
+const displayYearRange = computed(() => {
+  if (props.reverseYears) {
+    return [...yearRange.value].reverse();
+  }
+  return yearRange.value;
+});
 const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate();
 const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate();
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
@@ -60,18 +82,30 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
   <DefineMonthTemplate v-slot="{ date }">
     <div class="**:data-[slot=native-select-icon]:right-1">
       <div class="relative">
-        <div class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none">
+        <div
+          class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none"
+        >
           {{ formatter.custom(toDate(date), { month: "short" }) }}
         </div>
         <NativeSelect
           class="text-xs h-8 pr-6 pl-2 text-transparent relative"
-          @change="(e) => {
-  placeholder = placeholder.set({
-    month: Number(e?.target?.value)
-  });
-}"
+          @change="
+  (e) => {
+    placeholder = placeholder.set({
+      month: Number(e?.target?.value)
+    });
+  }
+"
         >
-          <NativeSelectOption v-for="(month) in createYear({ dateObj: date })" :key="month.toString()" :value="month.month" :selected="date.month === month.month">
+          <NativeSelectOption
+            v-for="month in createYear({ dateObj: date })"
+            :key="month.toString()"
+            :value="month.month"
+            :selected="date.month === month.month"
+            :class="
+  date.month === month.month ? 'text-primary font-medium' : ''
+"
+          >
             {{ formatter.custom(toDate(month), { month: "short" }) }}
           </NativeSelectOption>
         </NativeSelect>
@@ -82,18 +116,28 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
   <DefineYearTemplate v-slot="{ date }">
     <div class="**:data-[slot=native-select-icon]:right-1">
       <div class="relative">
-        <div class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none">
+        <div
+          class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none"
+        >
           {{ formatter.custom(toDate(date), { year: "numeric" }) }}
         </div>
         <NativeSelect
           class="text-xs h-8 pr-6 pl-2 text-transparent relative"
-          @change="(e) => {
-  placeholder = placeholder.set({
-    year: Number(e?.target?.value)
-  });
-}"
+          @change="
+  (e) => {
+    placeholder = placeholder.set({
+      year: Number(e?.target?.value)
+    });
+  }
+"
         >
-          <NativeSelectOption v-for="(year) in yearRange" :key="year.toString()" :value="year.year" :selected="date.year === year.year">
+          <NativeSelectOption
+            v-for="year in displayYearRange"
+            :key="year.toString()"
+            :value="year.year"
+            :selected="date.year === year.year"
+            :class="date.year === year.year ? 'text-primary font-medium' : ''"
+          >
             {{ formatter.custom(toDate(year), { year: "numeric" }) }}
           </NativeSelectOption>
         </NativeSelect>
@@ -109,7 +153,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     :class="cn('p-3', props.class)"
   >
     <CalendarHeader class="pt-0">
-      <nav class="flex items-center gap-1 absolute top-0 inset-x-0 justify-between">
+      <nav
+        class="flex items-center gap-1 absolute top-0 inset-x-0 justify-between"
+      >
         <CalendarPrevButton>
           <slot name="calendar-prev-icon" />
         </CalendarPrevButton>
@@ -118,7 +164,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         </CalendarNextButton>
       </nav>
 
-      <slot name="calendar-heading" :date="date" :month="ReuseMonthTemplate" :year="ReuseYearTemplate">
+      <slot
+        name="calendar-heading"
+        :date="date"
+        :month="ReuseMonthTemplate"
+        :year="ReuseYearTemplate"
+      >
         <template v-if="layout === 'month-and-year'">
           <div class="flex items-center justify-center gap-1">
             <ReuseMonthTemplate :date="date" />
@@ -147,24 +198,23 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       <CalendarGrid v-for="month in grid" :key="month.value.toString()">
         <CalendarGridHead>
           <CalendarGridRow>
-            <CalendarHeadCell
-              v-for="day in weekDays" :key="day"
-            >
+            <CalendarHeadCell v-for="day in weekDays" :key="day">
               {{ day }}
             </CalendarHeadCell>
           </CalendarGridRow>
         </CalendarGridHead>
         <CalendarGridBody>
-          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+          <CalendarGridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDate-${index}`"
+            class="mt-2 w-full"
+          >
             <CalendarCell
               v-for="weekDate in weekDates"
               :key="weekDate.toString()"
               :date="weekDate"
             >
-              <CalendarCellTrigger
-                :day="weekDate"
-                :month="month.value"
-              />
+              <CalendarCellTrigger :day="weekDate" :month="month.value" />
             </CalendarCell>
           </CalendarGridRow>
         </CalendarGridBody>

package/dist/runtime/components/ui/calendar/Calendar.vue.d.ts

@@ -5,6 +5,7 @@ type __VLS_Props = CalendarRootProps & {
     class?: HTMLAttributes["class"];
     layout?: LayoutTypes;
     yearRange?: DateValue[];
+    reverseYears?: boolean;
 };
 declare var __VLS_59: {}, __VLS_67: {}, __VLS_69: {
     date: DateValue;
@@ -31,6 +32,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     modelValue: DateValue | DateValue[];
     layout: "month-and-year" | "month-only" | "year-only";
+    reverseYears: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.78.0",
+  "version": "1.80.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",