pukaad-ui-lib 1.33.0 → 1.34.0

package/dist/module.json

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

package/dist/runtime/components/input/input-autocomplete.d.vue.ts

@@ -37,8 +37,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     placeholder: string;
     description: string;
-    limit: number;
     options: AutocompleteOption[] | string[] | number[];
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-autocomplete.vue.d.ts

@@ -37,8 +37,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     placeholder: string;
     description: string;
-    limit: number;
     options: AutocompleteOption[] | string[] | number[];
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -0,0 +1,42 @@
+import type { HTMLAttributes } from "vue";
+import type { LayoutTypes } from "@/runtime/components/ui/calendar";
+export interface InputBirthDateProps {
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    label?: string;
+    placeholder?: string;
+    description?: string;
+    disabledErrorMessage?: boolean;
+    required?: boolean;
+    dateFormat?: string;
+    locale?: string;
+    layout?: LayoutTypes;
+    class?: HTMLAttributes["class"];
+    minAge?: number;
+    maxYearsBack?: number;
+}
+type __VLS_Props = InputBirthDateProps;
+type __VLS_ModelProps = {
+    modelValue?: Date | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Date | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Date | undefined) => any) | undefined;
+}>, {
+    required: boolean;
+    id: string;
+    name: string;
+    placeholder: string;
+    disabled: boolean;
+    disabledErrorMessage: boolean;
+    locale: string;
+    layout: "month-and-year" | "month-only" | "year-only";
+    dateFormat: string;
+    minAge: number;
+    maxYearsBack: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,74 @@
+<template>
+  <InputDatePicker
+    v-model="modelValue"
+    :id="props.id"
+    :name="props.name"
+    :label="props.label"
+    :placeholder="props.placeholder"
+    :disabled="props.disabled"
+    :required="props.required"
+    :description="props.description"
+    :disabled-error-message="props.disabledErrorMessage"
+    :date-format="props.dateFormat"
+    :locale="props.locale"
+    :layout="props.layout"
+    :max-value="today"
+    :min-value="minDate"
+    :rules="birthDateRules"
+    :class="props.class"
+  />
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  id: { type: String, required: false, default: "input-birth-date" },
+  name: { type: String, required: false, default: "input-birth-date" },
+  disabled: { type: Boolean, required: false, default: false },
+  label: { type: String, required: false },
+  placeholder: { type: String, required: false, default: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E40\u0E01\u0E34\u0E14" },
+  description: { type: String, required: false },
+  disabledErrorMessage: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  dateFormat: { type: String, required: false, default: "D MMMM BBBB" },
+  locale: { type: String, required: false, default: "th" },
+  layout: { type: null, required: false, default: "month-and-year" },
+  class: { type: null, required: false },
+  minAge: { type: Number, required: false, default: 13 },
+  maxYearsBack: { type: Number, required: false, default: 100 }
+});
+const modelValue = defineModel({ type: null, ...{ default: void 0 } });
+const today = computed(() => /* @__PURE__ */ new Date());
+const minDate = computed(() => {
+  const date = /* @__PURE__ */ new Date();
+  date.setFullYear(date.getFullYear() - props.maxYearsBack);
+  return date;
+});
+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"}`;
+  }
+  if (v) {
+    const now = /* @__PURE__ */ new Date();
+    if (v > now) {
+      return "\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07";
+    }
+    const minAllowedDate = /* @__PURE__ */ new Date();
+    minAllowedDate.setFullYear(
+      minAllowedDate.getFullYear() - props.maxYearsBack
+    );
+    if (v < minAllowedDate) {
+      return "\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07";
+    }
+    const ageDate = new Date(
+      now.getFullYear() - props.minAge,
+      now.getMonth(),
+      now.getDate()
+    );
+    if (v > ageDate) {
+      return `\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49\u0E15\u0E49\u0E2D\u0E07\u0E21\u0E35\u0E2D\u0E32\u0E22\u0E38\u0E44\u0E21\u0E48\u0E15\u0E48\u0E33\u0E01\u0E27\u0E48\u0E32 ${props.minAge} \u0E1B\u0E35`;
+    }
+  }
+  return true;
+};
+</script>

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

@@ -0,0 +1,42 @@
+import type { HTMLAttributes } from "vue";
+import type { LayoutTypes } from "@/runtime/components/ui/calendar";
+export interface InputBirthDateProps {
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    label?: string;
+    placeholder?: string;
+    description?: string;
+    disabledErrorMessage?: boolean;
+    required?: boolean;
+    dateFormat?: string;
+    locale?: string;
+    layout?: LayoutTypes;
+    class?: HTMLAttributes["class"];
+    minAge?: number;
+    maxYearsBack?: number;
+}
+type __VLS_Props = InputBirthDateProps;
+type __VLS_ModelProps = {
+    modelValue?: Date | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Date | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Date | undefined) => any) | undefined;
+}>, {
+    required: boolean;
+    id: string;
+    name: string;
+    placeholder: string;
+    disabled: boolean;
+    disabledErrorMessage: boolean;
+    locale: string;
+    layout: "month-and-year" | "month-only" | "year-only";
+    dateFormat: string;
+    minAge: number;
+    maxYearsBack: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,3 +1,4 @@
+import type { DateValue } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import type { LayoutTypes } from "@/runtime/components/ui/calendar";
 export interface InputDatePickerProps {
@@ -15,6 +16,9 @@ export interface InputDatePickerProps {
     layout?: LayoutTypes;
     showTime?: boolean;
     class?: HTMLAttributes["class"];
+    maxValue?: Date;
+    minValue?: Date;
+    isDateDisabled?: (date: DateValue) => boolean;
 }
 type __VLS_Props = InputDatePickerProps;
 type __VLS_ModelProps = {

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

@@ -27,7 +27,7 @@
   cn(
     'w-full flex items-center justify-between gap-2 font-body-large',
     !modelValue && 'text-muted-foreground',
-    errorMessage && 'border-destructive',
+    errorMessage && 'border-destructive hover:border-destructive',
     props.class
   )
 "
@@ -44,6 +44,9 @@
                 initial-focus
                 :locale="locale"
                 :layout="layout"
+                :max-value="maxCalendarValue"
+                :min-value="minCalendarValue"
+                :is-date-disabled="props.isDateDisabled"
               />
               <!-- Time Picker -->
               <div
@@ -126,7 +129,26 @@ const props = defineProps({
   locale: { type: String, required: false, default: "th" },
   layout: { type: null, required: false, default: "month-and-year" },
   showTime: { type: Boolean, required: false, default: false },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  maxValue: { type: Date, required: false },
+  minValue: { type: Date, required: false },
+  isDateDisabled: { type: Function, required: false }
+});
+const maxCalendarValue = computed(() => {
+  if (!props.maxValue) return void 0;
+  return new CalendarDate(
+    props.maxValue.getFullYear(),
+    props.maxValue.getMonth() + 1,
+    props.maxValue.getDate()
+  );
+});
+const minCalendarValue = computed(() => {
+  if (!props.minValue) return void 0;
+  return new CalendarDate(
+    props.minValue.getFullYear(),
+    props.minValue.getMonth() + 1,
+    props.minValue.getDate()
+  );
 });
 const modelValue = defineModel({ type: null, ...{ default: void 0 } });
 const fieldRef = ref();

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

@@ -1,3 +1,4 @@
+import type { DateValue } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import type { LayoutTypes } from "@/runtime/components/ui/calendar";
 export interface InputDatePickerProps {
@@ -15,6 +16,9 @@ export interface InputDatePickerProps {
     layout?: LayoutTypes;
     showTime?: boolean;
     class?: HTMLAttributes["class"];
+    maxValue?: Date;
+    minValue?: Date;
+    isDateDisabled?: (date: DateValue) => boolean;
 }
 type __VLS_Props = InputDatePickerProps;
 type __VLS_ModelProps = {

package/package.json

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