pukaad-ui-lib 1.37.0 → 1.39.0

package/dist/module.json

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

package/dist/runtime/assets/css/main.css

@@ -1 +1 @@
-@import "tailwindcss";@import "tw-animate-css";@import "./system.css";@import "./fonts/Anuphan.css";@import "./fonts/Sarabun.css";@import "./scroll-bar.css";@import "quill/dist/quill.snow.css";@custom-variant dark (&:is(.dark *));@theme inline{--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary-foreground:var(--primary-foreground);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-destructive-foreground:var(--destructive-foreground);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--color-chart-1:var(--chart-1);--color-chart-2:var(--chart-2);--color-chart-3:var(--chart-3);--color-chart-4:var(--chart-4);--color-chart-5:var(--chart-5);--color-sidebar:var(--sidebar);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar-primary:var(--sidebar-primary);--color-sidebar-primary-foreground:var(--sidebar-primary-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-border:var(--sidebar-border);--color-sidebar-ring:var(--sidebar-ring);--color-red:var(--red);--color-error:var(--error);--color-success:var(--success);--color-green:var(--green);--color-warning:var(--warning);--color-yellow:var(--yellow);--color-primary:var(--primary);--color-secondary:var(--secondary);--color-info:var(--info);--color-black:var(--black);--color-dark:var(--dark);--color-gray:var(--gray);--color-cloud:var(--cloud);--color-mercury:var(--mercury);--color-green-light:var(--green-light);--color-red-light:var(--red-light);--color-yellow-light:var(--yellow-light);--color-bright:var(--bright);--color-silver:var(--silver);--color-smoke:var(--smoke);--z-index-announce-tool:10;--z-index-dropdown:11;--z-index-overlay:12;--z-index-loading:13;--z-index-drawer:14;--z-index-modal:15;--z-index-toast:99998;--z-index-loading-page:99999}:root{--radius:0.625rem;--red:#b71c1c;--success:#43a047;--green:#1b5e20;--warning:#f9a825;--yellow:#fbc02d;--info:#e3f2fd;--black:#212121;--dark:#424242;--gray:#616161;--cloud:#c4c4c4;--mercury:#e0e0e0;--green-light:#e3f5e3;--red-light:#fde3e3;--yellow-light:#fef3c7;--bright:#f5f5f5;--silver:#f7f7f7;--smoke:#fafafa;--white:#fff;--background:var(--white);--foreground:var(--black);--card:var(--background);--card-foreground:var(--foreground);--popover:var(--background);--popover-foreground:var(--foreground);--primary:#1976b8;--primary-foreground:var(--white);--secondary:#22a7ef;--secondary-foreground:var(--white);--muted:oklch(0.97 0 0);--muted-foreground:var(--gray);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:#d32f2f;--destructive-foreground:var(--white);--border:var(--color-mercury);--input:var(--color-mercury);--ring:var(--mercury);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:var(--foreground);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:var(--color-mercury);--sidebar-ring:var(--color-mercury)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.145 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.145 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.985 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.396 0.141 25.723);--destructive-foreground:oklch(0.637 0.237 25.331);--border:oklch(0.269 0 0);--input:oklch(0.269 0 0);--ring:oklch(0.439 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(0.269 0 0);--sidebar-ring:oklch(0.439 0 0)}@layer base{*{@apply border-border outline-ring/50}body{@apply bg-background text-foreground}}
+@import "tailwindcss";@import "tw-animate-css";@import "./system.css";@import "./fonts/Anuphan.css";@import "./fonts/Sarabun.css";@import "./scroll-bar.css";@import "quill/dist/quill.snow.css";@custom-variant dark (&:is(.dark *));@theme inline{--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary-foreground:var(--primary-foreground);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-destructive-foreground:var(--destructive-foreground);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--color-chart-1:var(--chart-1);--color-chart-2:var(--chart-2);--color-chart-3:var(--chart-3);--color-chart-4:var(--chart-4);--color-chart-5:var(--chart-5);--color-sidebar:var(--sidebar);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar-primary:var(--sidebar-primary);--color-sidebar-primary-foreground:var(--sidebar-primary-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-border:var(--sidebar-border);--color-sidebar-ring:var(--sidebar-ring);--color-red:var(--red);--color-error:var(--error);--color-success:var(--success);--color-green:var(--green);--color-warning:var(--warning);--color-yellow:var(--yellow);--color-primary:var(--primary);--color-secondary:var(--secondary);--color-info:var(--info);--color-black:var(--black);--color-dark:var(--dark);--color-gray:var(--gray);--color-cloud:var(--cloud);--color-mercury:var(--mercury);--color-green-light:var(--green-light);--color-red-light:var(--red-light);--color-yellow-light:var(--yellow-light);--color-bright:var(--bright);--color-silver:var(--silver);--color-smoke:var(--smoke);--z-index-announce-tool:10;--z-index-dropdown:11;--z-index-overlay:12;--z-index-loading:13;--z-index-drawer:14;--z-index-modal:15;--z-index-toast:99998;--z-index-loading-page:99999}:root{--radius:0.625rem;--red:#b71c1c;--success:#43a047;--green:#1b5e20;--warning:#f9a825;--yellow:#fbc02d;--info:#e3f2fd;--black:#212121;--dark:#424242;--gray:#616161;--cloud:#c4c4c4;--mercury:#e0e0e0;--green-light:#e3f5e3;--red-light:#fde3e3;--yellow-light:#fef3c7;--bright:#f5f5f5;--silver:#f7f7f7;--smoke:#fafafa;--white:#fff;--background:var(--white);--foreground:var(--black);--card:var(--background);--card-foreground:var(--foreground);--popover:var(--background);--popover-foreground:var(--foreground);--primary:#1976b8;--primary-foreground:var(--white);--secondary:#22a7ef;--secondary-foreground:var(--white);--muted:oklch(0.97 0 0);--muted-foreground:var(--cloud);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:#d32f2f;--destructive-foreground:var(--white);--border:var(--color-mercury);--input:var(--color-mercury);--ring:var(--mercury);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:var(--foreground);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:var(--color-mercury);--sidebar-ring:var(--color-mercury)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.145 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.145 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.985 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.396 0.141 25.723);--destructive-foreground:oklch(0.637 0.237 25.331);--border:oklch(0.269 0 0);--input:oklch(0.269 0 0);--ring:oklch(0.439 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(0.269 0 0);--sidebar-ring:oklch(0.439 0 0)}@layer base{*{@apply border-border outline-ring/50}body{@apply bg-background text-foreground}}

package/dist/runtime/components/drawer/drawer.d.vue.ts

@@ -2,23 +2,25 @@ import type { SheetContentProps } from "@/runtime/components/ui/sheet/SheetConte
 export interface DrawerProps extends SheetContentProps {
     title?: string;
     description?: string;
+    isLoading?: boolean;
+    loadingText?: string;
 }
 type __VLS_Props = DrawerProps;
 type __VLS_ModelProps = {
     modelValue?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_22: {}, __VLS_36: {
+declare var __VLS_27: {}, __VLS_41: {
     meta: any;
-}, __VLS_44: {
+}, __VLS_49: {
     meta: any;
 };
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_22) => any;
+    header?: (props: typeof __VLS_27) => any;
 } & {
-    default?: (props: typeof __VLS_36) => any;
+    default?: (props: typeof __VLS_41) => any;
 } & {
-    footer?: (props: typeof __VLS_44) => any;
+    footer?: (props: typeof __VLS_49) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;

package/dist/runtime/components/drawer/drawer.vue

@@ -1,6 +1,7 @@
 <template>
   <ShadSheet v-model:open="isOpen">
     <ShadSheetContent v-bind="props" v-slot="{ meta }" @submit="onSubmit">
+      <Loading :is-loading="props.isLoading" :text="props.loadingText" />
       <ShadSheetHeader class="flex-shrink-0">
         <slot name="header">
           <ShadSheetTitle>{{ props.title }}</ShadSheetTitle>
@@ -23,6 +24,8 @@
 const props = defineProps({
   title: { type: String, required: false },
   description: { type: String, required: false },
+  isLoading: { type: Boolean, required: false },
+  loadingText: { type: String, required: false },
   class: { type: null, required: false },
   side: { type: String, required: false },
   forceMount: { type: Boolean, required: false },

package/dist/runtime/components/drawer/drawer.vue.d.ts

@@ -2,23 +2,25 @@ import type { SheetContentProps } from "@/runtime/components/ui/sheet/SheetConte
 export interface DrawerProps extends SheetContentProps {
     title?: string;
     description?: string;
+    isLoading?: boolean;
+    loadingText?: string;
 }
 type __VLS_Props = DrawerProps;
 type __VLS_ModelProps = {
     modelValue?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_22: {}, __VLS_36: {
+declare var __VLS_27: {}, __VLS_41: {
     meta: any;
-}, __VLS_44: {
+}, __VLS_49: {
     meta: any;
 };
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_22) => any;
+    header?: (props: typeof __VLS_27) => any;
 } & {
-    default?: (props: typeof __VLS_36) => any;
+    default?: (props: typeof __VLS_41) => any;
 } & {
-    footer?: (props: typeof __VLS_44) => any;
+    footer?: (props: typeof __VLS_49) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;

package/dist/runtime/components/image/image-cropper.d.vue.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     center: boolean;
     src: string;
-    background: boolean;
-    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
+    modal: boolean;
     guides: boolean;
     highlight: boolean;
+    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/image/image-cropper.vue.d.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     center: boolean;
     src: string;
-    background: boolean;
-    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
+    modal: boolean;
     guides: boolean;
     highlight: boolean;
+    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

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

@@ -1,3 +1,76 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+interface Province {
+    code: number;
+    name_th: string;
+    name_en: string;
+}
+interface District {
+    code: number;
+    name_th: string;
+    name_en: string;
+    province_code: number;
+}
+interface SubDistrict {
+    code: number;
+    name_th: string;
+    name_en: string;
+    district_code: number;
+    zip_code: number;
+}
+export interface InputAddressValue {
+    province?: Province;
+    district?: District;
+    subDistrict?: SubDistrict;
+    zipCode?: number;
+    detail?: string;
+    fullAddress?: string;
+}
+export interface InputAddressProps {
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    labelDetail?: string;
+    placeholderDetail?: string;
+    required?: boolean;
+    requiredDetail?: boolean;
+    rules?: object | string | Function;
+    provinces?: Province[];
+    districts?: District[];
+    subDistricts?: SubDistrict[];
+}
+type __VLS_Props = InputAddressProps;
+type __VLS_ModelProps = {
+    modelValue?: InputAddressValue;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    validate: () => Promise<boolean>;
+    setErrors: (errMsg: string[]) => void;
+    reset: () => void;
+    addressFieldRef: import("vue").Ref<any, any>;
+    detailFieldRef: import("vue").Ref<any, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: InputAddressValue) => any;
+} & {
+    change: (value: InputAddressValue) => any;
+    selectProvince: (province: Province) => any;
+    selectDistrict: (district: District) => any;
+    selectSubDistrict: (subDistrict: SubDistrict) => any;
+    selectZipCode: (zipCode: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: InputAddressValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: InputAddressValue) => any) | undefined;
+    onSelectProvince?: ((province: Province) => any) | undefined;
+    onSelectDistrict?: ((district: District) => any) | undefined;
+    onSelectSubDistrict?: ((subDistrict: SubDistrict) => any) | undefined;
+    onSelectZipCode?: ((zipCode: number) => any) | undefined;
+}>, {
+    label: string;
+    required: boolean;
+    name: string;
+    placeholder: string;
+    labelDetail: string;
+    placeholderDetail: string;
+    requiredDetail: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,87 +1,492 @@
 <template>
-  <!-- <div class="space-y-[16px]">
-    <Dropdown full-width v-model="isOpen">
-      <InputTextField
-        name="address"
-        label="จังหวัด, อำเภอ/เขต, ตำบล/แขวง, รหัสไปรษณีย์"
-        placeholder="จังหวัด, อำเภอ/เขต, ตำบล/แขวง, รหัสไปรษณีย์"
-        input-class="cursor-pointer"
-        readonly
-        :full-width="props.fullWidth"
-        append-icon="solar:alt-arrow-down-line-duotone"
-        v-model="addressValue"
-      />
-      <template #content>
-        <Tab
-          :items="typeAddress"
-          type="text"
-          tab-content-gab="0"
-          v-model="tabValue"
-        >
-          <template #tab-content-provinces>
-            <ul class="h-96 overflow-y-auto">
-              <li
-                v-for="(pro, i_pro) in getProvince()"
-                :key="i_pro"
-                class="p-2 border-b-[1px] border-mercury cursor-pointer"
-                @click="onSelectProvince(pro)"
+  <div class="space-y-4">
+    <!-- Address Selector (Province, District, Sub-district, Zip code) -->
+    <ShadFormField
+      ref="addressFieldRef"
+      :name="props.name"
+      :rules="props.rules || defaultRules"
+      v-slot="{ componentField }"
+      v-model="addressValue"
+    >
+      <ShadFormItem>
+        <ShadFormLabel v-if="props.label" class="w-full">
+          <div class="flex-1">
+            {{ props.label }}
+            <span v-if="props.required" class="text-destructive">*</span>
+          </div>
+        </ShadFormLabel>
+        <ShadPopover v-model:open="popoverOpen" v-bind="componentField">
+          <ShadPopoverTrigger as-child>
+            <ShadFormControl>
+              <ShadButton
+                variant="outline"
+                role="combobox"
+                class="w-full justify-between text-start"
               >
-                {{ pro.name_th }}
-              </li>
-            </ul>
-          </template>
+                <span :class="{ 'text-cloud': !addressValue }">
+                  {{ addressValue || props.placeholder }}
+                </span>
+                <Icon name="lucide:chevron-down" class="h-4 w-4" />
+              </ShadButton>
+            </ShadFormControl>
+          </ShadPopoverTrigger>
+          <ShadPopoverContent class="w-[400px] p-0">
+            <ShadCommand>
+              <ShadCommandInput
+                v-model="searchQuery"
+                placeholder="ค้นหาที่อยู่"
+              />
+              <ShadTabs v-model="currentTab" class="w-full">
+                <ShadTabsList class="w-full grid grid-cols-4 rounded-none">
+                  <ShadTabsTrigger value="province" class="rounded-none">
+                    จังหวัด
+                  </ShadTabsTrigger>
+                  <ShadTabsTrigger
+                    value="district"
+                    :disabled="!selectedProvince"
+                    class="rounded-none"
+                  >
+                    อำเภอ/เขต
+                  </ShadTabsTrigger>
+                  <ShadTabsTrigger
+                    value="subDistrict"
+                    :disabled="!selectedDistrict"
+                    class="rounded-none"
+                  >
+                    ตำบล/แขวง
+                  </ShadTabsTrigger>
+                  <ShadTabsTrigger
+                    value="zipCode"
+                    :disabled="!selectedSubDistrict"
+                    class="rounded-none"
+                  >
+                    รหัสไปรษณีย์
+                  </ShadTabsTrigger>
+                </ShadTabsList>
 
-          <template #tab-content-districts>
-            <ul class="h-96 overflow-y-auto">
-              <li
-                v-for="(dist, i_dist) in getDistrict({ pro_code: provineCode })"
-                :key="i_dist"
-                class="p-2 border-b-[1px] border-mercury cursor-pointer"
-                @click="onSelectDistrict(dist)"
-              >
-                {{ dist.name_th }}
-              </li>
-            </ul>
-          </template>
+                <!-- Province Tab -->
+                <ShadTabsContent value="province" class="m-0">
+                  <ShadCommandList class="max-h-64">
+                    <ShadCommandGroup>
+                      <ShadCommandItem
+                        v-for="province in filteredProvinces"
+                        :key="province.code"
+                        :value="province.name_th"
+                        @select="onSelectProvince(province)"
+                      >
+                        {{ province.name_th }}
+                        <Icon
+                          v-if="selectedProvince?.code === province.code"
+                          name="lucide:check"
+                          class="ml-auto h-4 w-4"
+                        />
+                      </ShadCommandItem>
+                    </ShadCommandGroup>
+                    <ShadCommandEmpty>ไม่พบจังหวัด</ShadCommandEmpty>
+                  </ShadCommandList>
+                </ShadTabsContent>
 
-          <template #tab-content-sub-districts>
-            <ul class="h-96 overflow-y-auto">
-              <li
-                v-for="(sub, i_sub) in getSubDistrict({
-                  dist_code: districtCode,
-                })"
-                :key="i_sub"
-                class="p-2 border-b-[1px] border-mercury cursor-pointer"
-                @click="onSelectSubDistrict(sub)"
-              >
-                {{ sub.name_th }}
-              </li>
-            </ul>
-          </template>
+                <!-- District Tab -->
+                <ShadTabsContent value="district" class="m-0">
+                  <ShadCommandList class="max-h-64">
+                    <ShadCommandGroup>
+                      <ShadCommandItem
+                        v-for="district in filteredDistricts"
+                        :key="district.code"
+                        :value="district.name_th"
+                        @select="onSelectDistrict(district)"
+                      >
+                        {{ district.name_th }}
+                        <Icon
+                          v-if="selectedDistrict?.code === district.code"
+                          name="lucide:check"
+                          class="ml-auto h-4 w-4"
+                        />
+                      </ShadCommandItem>
+                    </ShadCommandGroup>
+                    <ShadCommandEmpty>ไม่พบอำเภอ/เขต</ShadCommandEmpty>
+                  </ShadCommandList>
+                </ShadTabsContent>
 
-          <template #tab-content-zip-code>
-            <ul class="h-96 overflow-y-auto">
-              <li
-                class="p-2 border-b-[1px] border-mercury cursor-pointer"
-                @click="onSelectZipCode"
-              >
-                {{ zipCode }}
-              </li>
-            </ul>
-          </template>
-        </Tab>
-      </template>
-    </Dropdown>
+                <!-- Sub-district Tab -->
+                <ShadTabsContent value="subDistrict" class="m-0">
+                  <ShadCommandList class="max-h-64">
+                    <ShadCommandGroup>
+                      <ShadCommandItem
+                        v-for="subDistrict in filteredSubDistricts"
+                        :key="subDistrict.code"
+                        :value="subDistrict.name_th"
+                        @select="onSelectSubDistrict(subDistrict)"
+                      >
+                        {{ subDistrict.name_th }}
+                        <Icon
+                          v-if="selectedSubDistrict?.code === subDistrict.code"
+                          name="lucide:check"
+                          class="ml-auto h-4 w-4"
+                        />
+                      </ShadCommandItem>
+                    </ShadCommandGroup>
+                    <ShadCommandEmpty>ไม่พบตำบล/แขวง</ShadCommandEmpty>
+                  </ShadCommandList>
+                </ShadTabsContent>
+
+                <!-- Zip Code Tab -->
+                <ShadTabsContent value="zipCode" class="m-0">
+                  <ShadCommandList class="max-h-64">
+                    <ShadCommandGroup>
+                      <ShadCommandItem
+                        v-if="selectedSubDistrict"
+                        :value="selectedSubDistrict.zip_code.toString()"
+                        @select="onSelectZipCode"
+                      >
+                        {{ selectedSubDistrict.zip_code }}
+                        <Icon name="lucide:check" class="ml-auto h-4 w-4" />
+                      </ShadCommandItem>
+                    </ShadCommandGroup>
+                    <ShadCommandEmpty>ไม่พบรหัสไปรษณีย์</ShadCommandEmpty>
+                  </ShadCommandList>
+                </ShadTabsContent>
+              </ShadTabs>
+            </ShadCommand>
+          </ShadPopoverContent>
+        </ShadPopover>
+        <ShadFormMessage />
+      </ShadFormItem>
+    </ShadFormField>
+
+    <!-- Address Detail (House number, Soi, Moo, Road) -->
     <InputTextField
-      label="บ้านเลขที่, ซอย, หมู่, ถนน"
-      placeholder="บ้านเลขที่, ซอย, หมู่, ถนน"
-      :full-width="props.fullWidth"
-      :disabled="isDisabledAddressDetail"
+      ref="detailFieldRef"
+      :name="`${props.name}-detail`"
+      :label="props.labelDetail"
+      :placeholder="props.placeholderDetail"
+      :disabled="!addressValue"
+      :required="props.requiredDetail"
       v-model="addressDetailValue"
     />
-  </div> -->
+  </div>
 </template>
 
 <script setup>
-
+import { ref, computed, watch } from "vue";
+import InputTextField from "./input-text-field.vue";
+const props = defineProps({
+  name: { type: String, required: false, default: "address" },
+  label: { type: String, required: false, default: "\u0E08\u0E31\u0E07\u0E2B\u0E27\u0E31\u0E14, \u0E2D\u0E33\u0E40\u0E20\u0E2D/\u0E40\u0E02\u0E15, \u0E15\u0E33\u0E1A\u0E25/\u0E41\u0E02\u0E27\u0E07, \u0E23\u0E2B\u0E31\u0E2A\u0E44\u0E1B\u0E23\u0E29\u0E13\u0E35\u0E22\u0E4C" },
+  placeholder: { type: String, required: false, default: "\u0E08\u0E31\u0E07\u0E2B\u0E27\u0E31\u0E14, \u0E2D\u0E33\u0E40\u0E20\u0E2D/\u0E40\u0E02\u0E15, \u0E15\u0E33\u0E1A\u0E25/\u0E41\u0E02\u0E27\u0E07, \u0E23\u0E2B\u0E31\u0E2A\u0E44\u0E1B\u0E23\u0E29\u0E13\u0E35\u0E22\u0E4C" },
+  labelDetail: { type: String, required: false, default: "\u0E1A\u0E49\u0E32\u0E19\u0E40\u0E25\u0E02\u0E17\u0E35\u0E48, \u0E0B\u0E2D\u0E22, \u0E2B\u0E21\u0E39\u0E48, \u0E16\u0E19\u0E19" },
+  placeholderDetail: { type: String, required: false, default: "\u0E1A\u0E49\u0E32\u0E19\u0E40\u0E25\u0E02\u0E17\u0E35\u0E48, \u0E0B\u0E2D\u0E22, \u0E2B\u0E21\u0E39\u0E48, \u0E16\u0E19\u0E19" },
+  required: { type: Boolean, required: false, default: false },
+  requiredDetail: { type: Boolean, required: false, default: false },
+  rules: { type: [Object, String, Function], required: false },
+  provinces: { type: Array, required: false },
+  districts: { type: Array, required: false },
+  subDistricts: { type: Array, required: false }
+});
+const emits = defineEmits(["selectProvince", "selectDistrict", "selectSubDistrict", "selectZipCode", "change"]);
+const modelValue = defineModel({ type: Object, ...{
+  default: () => ({})
+} });
+const popoverOpen = ref(false);
+const currentTab = ref("province");
+const searchQuery = ref("");
+const addressFieldRef = ref();
+const detailFieldRef = ref();
+const selectedProvince = ref(null);
+const selectedDistrict = ref(null);
+const selectedSubDistrict = ref(null);
+const addressValue = computed(() => {
+  const parts = [];
+  if (selectedProvince.value) parts.push(selectedProvince.value.name_th);
+  if (selectedDistrict.value) parts.push(selectedDistrict.value.name_th);
+  if (selectedSubDistrict.value) parts.push(selectedSubDistrict.value.name_th);
+  if (selectedSubDistrict.value)
+    parts.push(selectedSubDistrict.value.zip_code.toString());
+  return parts.join(", ");
+});
+const addressDetailValue = ref("");
+const mockProvinces = props.provinces || [
+  { code: 10, name_th: "\u0E01\u0E23\u0E38\u0E07\u0E40\u0E17\u0E1E\u0E21\u0E2B\u0E32\u0E19\u0E04\u0E23", name_en: "Bangkok" },
+  { code: 11, name_th: "\u0E2A\u0E21\u0E38\u0E17\u0E23\u0E1B\u0E23\u0E32\u0E01\u0E32\u0E23", name_en: "Samut Prakan" },
+  { code: 12, name_th: "\u0E19\u0E19\u0E17\u0E1A\u0E38\u0E23\u0E35", name_en: "Nonthaburi" },
+  { code: 13, name_th: "\u0E1B\u0E17\u0E38\u0E21\u0E18\u0E32\u0E19\u0E35", name_en: "Pathum Thani" },
+  { code: 14, name_th: "\u0E1E\u0E23\u0E30\u0E19\u0E04\u0E23\u0E28\u0E23\u0E35\u0E2D\u0E22\u0E38\u0E18\u0E22\u0E32", name_en: "Phra Nakhon Si Ayutthaya" },
+  { code: 20, name_th: "\u0E0A\u0E25\u0E1A\u0E38\u0E23\u0E35", name_en: "Chon Buri" },
+  { code: 50, name_th: "\u0E40\u0E0A\u0E35\u0E22\u0E07\u0E43\u0E2B\u0E21\u0E48", name_en: "Chiang Mai" }
+];
+const mockDistricts = props.districts || [
+  // กรุงเทพมหานคร
+  {
+    code: 1001,
+    name_th: "\u0E40\u0E02\u0E15\u0E1E\u0E23\u0E30\u0E19\u0E04\u0E23",
+    name_en: "Phra Nakhon",
+    province_code: 10
+  },
+  { code: 1002, name_th: "\u0E40\u0E02\u0E15\u0E14\u0E38\u0E2A\u0E34\u0E15", name_en: "Dusit", province_code: 10 },
+  {
+    code: 1003,
+    name_th: "\u0E40\u0E02\u0E15\u0E2B\u0E19\u0E2D\u0E07\u0E08\u0E2D\u0E01",
+    name_en: "Nong Chok",
+    province_code: 10
+  },
+  { code: 1004, name_th: "\u0E40\u0E02\u0E15\u0E1A\u0E32\u0E07\u0E23\u0E31\u0E01", name_en: "Bang Rak", province_code: 10 },
+  { code: 1005, name_th: "\u0E40\u0E02\u0E15\u0E1A\u0E32\u0E07\u0E40\u0E02\u0E19", name_en: "Bang Khen", province_code: 10 },
+  {
+    code: 1006,
+    name_th: "\u0E40\u0E02\u0E15\u0E1A\u0E32\u0E07\u0E01\u0E30\u0E1B\u0E34",
+    name_en: "Bang Kapi",
+    province_code: 10
+  },
+  {
+    code: 1007,
+    name_th: "\u0E40\u0E02\u0E15\u0E1B\u0E17\u0E38\u0E21\u0E27\u0E31\u0E19",
+    name_en: "Pathum Wan",
+    province_code: 10
+  },
+  // สมุทรปราการ
+  {
+    code: 1101,
+    name_th: "\u0E2D\u0E33\u0E40\u0E20\u0E2D\u0E40\u0E21\u0E37\u0E2D\u0E07\u0E2A\u0E21\u0E38\u0E17\u0E23\u0E1B\u0E23\u0E32\u0E01\u0E32\u0E23",
+    name_en: "Mueang Samut Prakan",
+    province_code: 11
+  },
+  { code: 1102, name_th: "\u0E2D\u0E33\u0E40\u0E20\u0E2D\u0E1A\u0E32\u0E07\u0E1A\u0E48\u0E2D", name_en: "Bang Bo", province_code: 11 },
+  // นนทบุรี
+  {
+    code: 1201,
+    name_th: "\u0E2D\u0E33\u0E40\u0E20\u0E2D\u0E40\u0E21\u0E37\u0E2D\u0E07\u0E19\u0E19\u0E17\u0E1A\u0E38\u0E23\u0E35",
+    name_en: "Mueang Nonthaburi",
+    province_code: 12
+  },
+  {
+    code: 1202,
+    name_th: "\u0E2D\u0E33\u0E40\u0E20\u0E2D\u0E1A\u0E32\u0E07\u0E01\u0E23\u0E27\u0E22",
+    name_en: "Bang Kruai",
+    province_code: 12
+  }
+];
+const mockSubDistricts = props.subDistricts || [
+  // เขตพระนคร
+  {
+    code: 100101,
+    name_th: "\u0E41\u0E02\u0E27\u0E07\u0E1E\u0E23\u0E30\u0E1A\u0E23\u0E21\u0E21\u0E2B\u0E32\u0E23\u0E32\u0E0A\u0E27\u0E31\u0E07",
+    name_en: "Phra Borom Maha Ratchawang",
+    district_code: 1001,
+    zip_code: 10200
+  },
+  {
+    code: 100102,
+    name_th: "\u0E41\u0E02\u0E27\u0E07\u0E27\u0E31\u0E07\u0E1A\u0E39\u0E23\u0E1E\u0E32\u0E20\u0E34\u0E23\u0E21\u0E22\u0E4C",
+    name_en: "Wang Burapha Phirom",
+    district_code: 1001,
+    zip_code: 10200
+  },
+  {
+    code: 100103,
+    name_th: "\u0E41\u0E02\u0E27\u0E07\u0E27\u0E31\u0E14\u0E23\u0E32\u0E0A\u0E1A\u0E1E\u0E34\u0E18",
+    name_en: "Wat Ratchabophit",
+    district_code: 1001,
+    zip_code: 10200
+  },
+  // เขตดุสิต
+  {
+    code: 100201,
+    name_th: "\u0E41\u0E02\u0E27\u0E07\u0E14\u0E38\u0E2A\u0E34\u0E15",
+    name_en: "Dusit",
+    district_code: 1002,
+    zip_code: 10300
+  },
+  {
+    code: 100202,
+    name_th: "\u0E41\u0E02\u0E27\u0E07\u0E27\u0E0A\u0E34\u0E23\u0E1E\u0E22\u0E32\u0E1A\u0E32\u0E25",
+    name_en: "Wachiraphayaban",
+    district_code: 1002,
+    zip_code: 10300
+  },
+  // เขตบางรัก
+  {
+    code: 100401,
+    name_th: "\u0E41\u0E02\u0E27\u0E07\u0E21\u0E2B\u0E32\u0E1E\u0E24\u0E12\u0E32\u0E23\u0E32\u0E21",
+    name_en: "Maha Phruettharam",
+    district_code: 1004,
+    zip_code: 10500
+  },
+  {
+    code: 100402,
+    name_th: "\u0E41\u0E02\u0E27\u0E07\u0E2A\u0E35\u0E25\u0E21",
+    name_en: "Si Lom",
+    district_code: 1004,
+    zip_code: 10500
+  },
+  // เขตปทุมวัน
+  {
+    code: 100701,
+    name_th: "\u0E41\u0E02\u0E27\u0E07\u0E23\u0E2D\u0E07\u0E40\u0E21\u0E37\u0E2D\u0E07",
+    name_en: "Rong Mueang",
+    district_code: 1007,
+    zip_code: 10330
+  },
+  {
+    code: 100702,
+    name_th: "\u0E41\u0E02\u0E27\u0E07\u0E27\u0E31\u0E07\u0E43\u0E2B\u0E21\u0E48",
+    name_en: "Wang Mai",
+    district_code: 1007,
+    zip_code: 10330
+  },
+  {
+    code: 100703,
+    name_th: "\u0E41\u0E02\u0E27\u0E07\u0E1B\u0E17\u0E38\u0E21\u0E27\u0E31\u0E19",
+    name_en: "Pathum Wan",
+    district_code: 1007,
+    zip_code: 10330
+  },
+  // อำเภอเมืองสมุทรปราการ
+  {
+    code: 110101,
+    name_th: "\u0E15\u0E33\u0E1A\u0E25\u0E1B\u0E32\u0E01\u0E19\u0E49\u0E33",
+    name_en: "Pak Nam",
+    district_code: 1101,
+    zip_code: 10270
+  },
+  {
+    code: 110102,
+    name_th: "\u0E15\u0E33\u0E1A\u0E25\u0E2A\u0E33\u0E42\u0E23\u0E07\u0E40\u0E2B\u0E19\u0E37\u0E2D",
+    name_en: "Samrong Nuea",
+    district_code: 1101,
+    zip_code: 10270
+  },
+  // อำเภอเมืองนนทบุรี
+  {
+    code: 120101,
+    name_th: "\u0E15\u0E33\u0E1A\u0E25\u0E2A\u0E27\u0E19\u0E43\u0E2B\u0E0D\u0E48",
+    name_en: "Suan Yai",
+    district_code: 1201,
+    zip_code: 11e3
+  },
+  {
+    code: 120102,
+    name_th: "\u0E15\u0E33\u0E1A\u0E25\u0E15\u0E25\u0E32\u0E14\u0E02\u0E27\u0E31\u0E0D",
+    name_en: "Talat Khwan",
+    district_code: 1201,
+    zip_code: 11e3
+  }
+];
+const filteredProvinces = computed(() => {
+  if (!searchQuery.value) return mockProvinces;
+  const query = searchQuery.value.toLowerCase();
+  return mockProvinces.filter(
+    (p) => p.name_th.toLowerCase().includes(query) || p.name_en.toLowerCase().includes(query)
+  );
+});
+const filteredDistricts = computed(() => {
+  if (!selectedProvince.value) return [];
+  const districts = mockDistricts.filter(
+    (d) => d.province_code === selectedProvince.value?.code
+  );
+  if (!searchQuery.value) return districts;
+  const query = searchQuery.value.toLowerCase();
+  return districts.filter(
+    (d) => d.name_th.toLowerCase().includes(query) || d.name_en.toLowerCase().includes(query)
+  );
+});
+const filteredSubDistricts = computed(() => {
+  if (!selectedDistrict.value) return [];
+  const subDistricts = mockSubDistricts.filter(
+    (s) => s.district_code === selectedDistrict.value?.code
+  );
+  if (!searchQuery.value) return subDistricts;
+  const query = searchQuery.value.toLowerCase();
+  return subDistricts.filter(
+    (s) => s.name_th.toLowerCase().includes(query) || s.name_en.toLowerCase().includes(query)
+  );
+});
+const onSelectProvince = (province) => {
+  selectedProvince.value = province;
+  selectedDistrict.value = null;
+  selectedSubDistrict.value = null;
+  searchQuery.value = "";
+  currentTab.value = "district";
+  emits("selectProvince", province);
+  updateModelValue();
+};
+const onSelectDistrict = (district) => {
+  selectedDistrict.value = district;
+  selectedSubDistrict.value = null;
+  searchQuery.value = "";
+  currentTab.value = "subDistrict";
+  emits("selectDistrict", district);
+  updateModelValue();
+};
+const onSelectSubDistrict = (subDistrict) => {
+  selectedSubDistrict.value = subDistrict;
+  searchQuery.value = "";
+  currentTab.value = "zipCode";
+  emits("selectSubDistrict", subDistrict);
+  updateModelValue();
+};
+const onSelectZipCode = () => {
+  if (selectedSubDistrict.value) {
+    emits("selectZipCode", selectedSubDistrict.value.zip_code);
+    popoverOpen.value = false;
+    currentTab.value = "province";
+    updateModelValue();
+  }
+};
+const updateModelValue = () => {
+  const value = {
+    province: selectedProvince.value || void 0,
+    district: selectedDistrict.value || void 0,
+    subDistrict: selectedSubDistrict.value || void 0,
+    zipCode: selectedSubDistrict.value?.zip_code,
+    detail: addressDetailValue.value || void 0,
+    fullAddress: buildFullAddress()
+  };
+  modelValue.value = value;
+  emits("change", value);
+};
+const buildFullAddress = () => {
+  const parts = [];
+  if (addressDetailValue.value) parts.push(addressDetailValue.value);
+  if (selectedSubDistrict.value) parts.push(selectedSubDistrict.value.name_th);
+  if (selectedDistrict.value) parts.push(selectedDistrict.value.name_th);
+  if (selectedProvince.value) parts.push(selectedProvince.value.name_th);
+  if (selectedSubDistrict.value)
+    parts.push(selectedSubDistrict.value.zip_code.toString());
+  return parts.join(" ");
+};
+watch(addressDetailValue, () => {
+  updateModelValue();
+});
+const defaultRules = (v) => {
+  if (!v && props.required) {
+    return "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E17\u0E35\u0E48\u0E2D\u0E22\u0E39\u0E48";
+  }
+  if (v && v.split(", ").length < 4 && props.required) {
+    return "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E17\u0E35\u0E48\u0E2D\u0E22\u0E39\u0E48\u0E43\u0E2B\u0E49\u0E04\u0E23\u0E1A\u0E16\u0E49\u0E27\u0E19";
+  }
+  return true;
+};
+const validate = async () => {
+  const addressValid = await addressFieldRef.value?.validate();
+  const detailValid = await detailFieldRef.value?.validate?.();
+  return addressValid?.valid !== false && detailValid !== false;
+};
+const setErrors = (errMsg) => {
+  addressFieldRef.value?.setErrors(errMsg);
+};
+const reset = () => {
+  selectedProvince.value = null;
+  selectedDistrict.value = null;
+  selectedSubDistrict.value = null;
+  addressDetailValue.value = "";
+  currentTab.value = "province";
+  updateModelValue();
+};
+defineExpose({
+  validate,
+  setErrors,
+  reset,
+  addressFieldRef,
+  detailFieldRef
+});
 </script>

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

@@ -1,3 +1,76 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+interface Province {
+    code: number;
+    name_th: string;
+    name_en: string;
+}
+interface District {
+    code: number;
+    name_th: string;
+    name_en: string;
+    province_code: number;
+}
+interface SubDistrict {
+    code: number;
+    name_th: string;
+    name_en: string;
+    district_code: number;
+    zip_code: number;
+}
+export interface InputAddressValue {
+    province?: Province;
+    district?: District;
+    subDistrict?: SubDistrict;
+    zipCode?: number;
+    detail?: string;
+    fullAddress?: string;
+}
+export interface InputAddressProps {
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    labelDetail?: string;
+    placeholderDetail?: string;
+    required?: boolean;
+    requiredDetail?: boolean;
+    rules?: object | string | Function;
+    provinces?: Province[];
+    districts?: District[];
+    subDistricts?: SubDistrict[];
+}
+type __VLS_Props = InputAddressProps;
+type __VLS_ModelProps = {
+    modelValue?: InputAddressValue;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    validate: () => Promise<boolean>;
+    setErrors: (errMsg: string[]) => void;
+    reset: () => void;
+    addressFieldRef: import("vue").Ref<any, any>;
+    detailFieldRef: import("vue").Ref<any, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: InputAddressValue) => any;
+} & {
+    change: (value: InputAddressValue) => any;
+    selectProvince: (province: Province) => any;
+    selectDistrict: (district: District) => any;
+    selectSubDistrict: (subDistrict: SubDistrict) => any;
+    selectZipCode: (zipCode: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: InputAddressValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: InputAddressValue) => any) | undefined;
+    onSelectProvince?: ((province: Province) => any) | undefined;
+    onSelectDistrict?: ((district: District) => any) | undefined;
+    onSelectSubDistrict?: ((subDistrict: SubDistrict) => any) | undefined;
+    onSelectZipCode?: ((zipCode: number) => any) | undefined;
+}>, {
+    label: string;
+    required: boolean;
+    name: string;
+    placeholder: string;
+    labelDetail: string;
+    placeholderDetail: string;
+    requiredDetail: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,27 +1,54 @@
 <template>
   <ShadPopover v-model:open="open" :modal="false">
     <ShadPopoverAnchor as-child>
-      <InputTextField ref="fieldRef" v-model="searchText" :label="props.label" :name="props.name" :rules="props.rules"
-        :required="props.required" :description="props.description" :placeholder="props.placeholder"
-        :disabled-border="props.disabledBorder" :disabled-error-message="props.disabledErrorMessage" autocomplete="off"
-        @focus="open = true" @click="open = true" @blur="handleBlur" :show-counter="props.showCounter"
-        :limit="props.limit">
+      <InputTextField
+        ref="fieldRef"
+        v-model="searchText"
+        :label="props.label"
+        :name="props.name"
+        :rules="props.rules"
+        :required="props.required"
+        :description="props.description"
+        :placeholder="props.placeholder"
+        :disabled-border="props.disabledBorder"
+        :disabled-error-message="props.disabledErrorMessage"
+        autocomplete="off"
+        @focus="open = true"
+        @click="console.log('click')"
+        @blur="handleBlur"
+        :show-counter="props.showCounter"
+        :limit="props.limit"
+      >
         <template #append>
-          <Icon @mousedown.stop.prevent="handleIconMouseDown" :name="modelValue ? 'lucide:x' : 'lucide:search'"
-            size="16" class="cursor-pointer" />
+          <Icon
+            @mousedown.stop.prevent="handleIconMouseDown"
+            :name="modelValue ? 'lucide:x' : 'lucide:search'"
+            size="16"
+            class="cursor-pointer"
+          />
         </template>
       </InputTextField>
     </ShadPopoverAnchor>
-    <ShadPopoverContent @openAutoFocus.prevent @closeAutoFocus.prevent align="start"
-      class="max-h-[312px] overflow-auto">
-      <div v-if="filteredOptions.length === 0" class="flex flex-col gap-[8px] items-center justify-center h-[192px]">
+    <ShadPopoverContent
+      @openAutoFocus.prevent
+      @closeAutoFocus.prevent
+      align="start"
+      class="max-h-[312px] overflow-auto"
+    >
+      <div
+        v-if="filteredOptions.length === 0"
+        class="flex flex-col gap-[8px] items-center justify-center h-[192px]"
+      >
         <Icon name="pukaad:page-not-found" class="w-[77px] h-[64px]" />
         <div class="font-body-medium text-center text-gray">ไม่พบข้อมูล</div>
       </div>
       <div v-else>
-        <div v-for="option in filteredOptions" :key="option.value"
+        <div
+          v-for="option in filteredOptions"
+          :key="option.value"
           class="cursor-pointer hover:bg-smoke flex items-center gap-[8px] px-[8px] py-[6px]"
-          @mousedown.prevent="selectOption(option)">
+          @mousedown.prevent="selectOption(option)"
+        >
           <div class="flex flex-col gap-[4px] w-full">
             <div class="font-body-medium">
               {{ option.label }}
@@ -30,7 +57,11 @@
               {{ option.description }}
             </div>
           </div>
-          <Icon v-if="modelValue === option.value" name="lucide:check" size="16" />
+          <Icon
+            v-if="modelValue === option.value"
+            name="lucide:check"
+            size="16"
+          />
         </div>
       </div>
     </ShadPopoverContent>

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

@@ -50,7 +50,7 @@
               >
                 {{ displayValue }}
               </span>
-              <Icon name="lucide:chevrons-up-down" class="h-4 w-4" />
+              <Icon name="lucide:chevron-down" class="h-4 w-4" />
             </ShadButton>
           </ShadFormControl>
         </ShadPopoverTrigger>

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

@@ -55,10 +55,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     disabled: boolean;
     limit: number;
+    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    readonly: 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/input/input-text-field.vue.d.ts

@@ -55,10 +55,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     disabled: boolean;
     limit: number;
+    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    readonly: 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/input/input-textarea.d.vue.ts

@@ -45,10 +45,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     disabled: boolean;
     limit: number;
+    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    readonly: boolean;
     resize: "none" | "both" | "horizontal" | "vertical";
     rows: number;
     heightScroll: boolean;

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

@@ -45,10 +45,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     disabled: boolean;
     limit: number;
+    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    readonly: boolean;
     resize: "none" | "both" | "horizontal" | "vertical";
     rows: number;
     heightScroll: boolean;

package/dist/runtime/components/loading.d.vue.ts

@@ -0,0 +1,10 @@
+export interface LoadingProps {
+    isLoading?: boolean;
+    text?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<LoadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoadingProps> & Readonly<{}>, {
+    text: string;
+    isLoading: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/loading.vue

@@ -0,0 +1,24 @@
+<template>
+  <Transition name="loading-fade">
+    <div
+      v-if="isLoading"
+      class="absolute inset-0 opacity-50 z-50 flex items-center justify-center backdrop-blur-2xl"
+    >
+      <div class="flex flex-col items-center gap-3">
+        <div class="loading-spinner"></div>
+        <span v-if="text" class="text-sm text-cloud">{{ text }}</span>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+defineProps({
+  isLoading: { type: Boolean, required: false, default: false },
+  text: { type: String, required: false, default: "" }
+});
+</script>
+
+<style scoped>
+.loading-spinner{animation:spin .8s linear infinite;border:6px solid rgba(0,0,0,.1);border-radius:50%;border-top-color:#3b82f6;height:64px;width:64px}@keyframes spin{to{transform:rotate(1turn)}}.loading-fade-enter-active,.loading-fade-leave-active{transition:opacity .2s ease}.loading-fade-enter-from,.loading-fade-leave-to{opacity:0}
+</style>

package/dist/runtime/components/loading.vue.d.ts

@@ -0,0 +1,10 @@
+export interface LoadingProps {
+    isLoading?: boolean;
+    text?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<LoadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoadingProps> & Readonly<{}>, {
+    text: string;
+    isLoading: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal.d.vue.ts

@@ -5,27 +5,29 @@ export interface ModalProps {
     description?: string;
     footer?: string;
     disabledCloseBtn?: boolean;
+    isLoading?: boolean;
+    loadingText?: string;
 }
 type __VLS_Props = ModalProps;
 type __VLS_ModelProps = {
     modelValue?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_23: {}, __VLS_31: {}, __VLS_39: {}, __VLS_41: {
+declare var __VLS_28: {}, __VLS_36: {}, __VLS_44: {}, __VLS_46: {
     meta: any;
-}, __VLS_49: {
+}, __VLS_54: {
     meta: any;
 };
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_23) => any;
+    header?: (props: typeof __VLS_28) => any;
 } & {
-    title?: (props: typeof __VLS_31) => any;
+    title?: (props: typeof __VLS_36) => any;
 } & {
-    description?: (props: typeof __VLS_39) => any;
+    description?: (props: typeof __VLS_44) => any;
 } & {
-    default?: (props: typeof __VLS_41) => any;
+    default?: (props: typeof __VLS_46) => any;
 } & {
-    footer?: (props: typeof __VLS_49) => any;
+    footer?: (props: typeof __VLS_54) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;

package/dist/runtime/components/modal/modal.vue

@@ -7,6 +7,7 @@
       @submit="onSubmit"
       @close="onClose"
     >
+      <Loading :is-loading="props.isLoading" :text="props.loadingText" />
       <ShadDialogHeader>
         <slot name="header">
           <ShadDialogTitle>
@@ -36,7 +37,9 @@ const props = defineProps({
   title: { type: String, required: false },
   description: { type: String, required: false },
   footer: { type: String, required: false },
-  disabledCloseBtn: { type: Boolean, required: false, default: false }
+  disabledCloseBtn: { type: Boolean, required: false, default: false },
+  isLoading: { type: Boolean, required: false },
+  loadingText: { type: String, required: false }
 });
 const isOpen = defineModel({ type: Boolean, ...{
   default: false

package/dist/runtime/components/modal/modal.vue.d.ts

@@ -5,27 +5,29 @@ export interface ModalProps {
     description?: string;
     footer?: string;
     disabledCloseBtn?: boolean;
+    isLoading?: boolean;
+    loadingText?: string;
 }
 type __VLS_Props = ModalProps;
 type __VLS_ModelProps = {
     modelValue?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_23: {}, __VLS_31: {}, __VLS_39: {}, __VLS_41: {
+declare var __VLS_28: {}, __VLS_36: {}, __VLS_44: {}, __VLS_46: {
     meta: any;
-}, __VLS_49: {
+}, __VLS_54: {
     meta: any;
 };
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_23) => any;
+    header?: (props: typeof __VLS_28) => any;
 } & {
-    title?: (props: typeof __VLS_31) => any;
+    title?: (props: typeof __VLS_36) => any;
 } & {
-    description?: (props: typeof __VLS_39) => any;
+    description?: (props: typeof __VLS_44) => any;
 } & {
-    default?: (props: typeof __VLS_41) => any;
+    default?: (props: typeof __VLS_46) => any;
 } & {
-    footer?: (props: typeof __VLS_49) => any;
+    footer?: (props: typeof __VLS_54) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;

package/dist/runtime/components/ui/input-group/InputGroupButton.d.vue.ts

@@ -5,7 +5,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<InputGroupButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputGroupButtonProps> & Readonly<{}>, {
     variant: "default" | "outline" | "ghost" | "link" | "text" | "icon" | null;
-    size: "sm" | "icon-sm" | "icon-xs" | "xs" | null;
+    size: "icon-xs" | "sm" | "icon-sm" | "xs" | null;
 }, {}, {}, {}, 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/input-group/InputGroupButton.vue.d.ts

@@ -5,7 +5,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<InputGroupButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputGroupButtonProps> & Readonly<{}>, {
     variant: "default" | "outline" | "ghost" | "link" | "text" | "icon" | null;
-    size: "sm" | "icon-sm" | "icon-xs" | "xs" | null;
+    size: "icon-xs" | "sm" | "icon-sm" | "xs" | null;
 }, {}, {}, {}, 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/input-group/index.d.ts

@@ -12,7 +12,7 @@ export declare const inputGroupAddonVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>;
 export declare const inputGroupButtonVariants: (props?: ({
-    size?: "sm" | "icon-sm" | "icon-xs" | "xs" | null | undefined;
+    size?: "icon-xs" | "sm" | "icon-sm" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>;
 export interface InputGroupButtonProps {

package/package.json

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