pukaad-ui-lib 1.39.0 → 1.41.0

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

@@ -1,158 +1,126 @@
 <template>
-  <div class="space-y-4">
+  <div :class="['flex flex-col', props.gap]">
     <!-- Address Selector (Province, District, Sub-district, Zip code) -->
-    <ShadFormField
-      ref="addressFieldRef"
+    <InputCombobox
+      ref="comboboxRef"
       :name="props.name"
+      :label="props.label"
+      :placeholder="props.placeholder"
+      :required="props.required"
       :rules="props.rules || defaultRules"
-      v-slot="{ componentField }"
-      v-model="addressValue"
+      v-model="internalValue"
+      @clear="handleClear"
     >
-      <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"
+      <template #popover-content="{ close }">
+        <ShadCommand class="p-2">
+          <ShadTabs v-model="currentTab" class="w-full">
+            <ShadTabsList class="w-full grid grid-cols-4">
+              <ShadTabsTrigger value="province"> จังหวัด </ShadTabsTrigger>
+              <ShadTabsTrigger value="district" :disabled="!selectedProvince">
+                อำเภอ/เขต
+              </ShadTabsTrigger>
+              <ShadTabsTrigger
+                value="subDistrict"
+                :disabled="!selectedDistrict"
               >
-                <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>
+                ตำบล/แขวง
+              </ShadTabsTrigger>
+              <ShadTabsTrigger value="zipCode" :disabled="!selectedSubDistrict">
+                รหัสไปรษณีย์
+              </ShadTabsTrigger>
+            </ShadTabsList>
+            <InputTextField v-model="searchQuery" placeholder="ค้นหาที่อยู่">
+              <template #prepend>
+                <Icon name="lucide:search" class="h-4 w-4" />
+              </template>
+            </InputTextField>
 
-                <!-- 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>
+            <!-- Province Tab -->
+            <ShadTabsContent value="province" class="m-0">
+              <ShadCommandList class="max-h-64">
+                <ShadCommandGroup>
+                  <ShadCommandItem
+                    v-for="province in provinces"
+                    :key="province.id"
+                    :value="province.name_th"
+                    @select="onSelectProvince(province)"
+                  >
+                    {{ province.name_th }}
+                    <Icon
+                      v-if="selectedProvince?.id === province.id"
+                      name="lucide:check"
+                      class="ml-auto h-4 w-4"
+                    />
+                  </ShadCommandItem>
+                </ShadCommandGroup>
+                <ShadCommandEmpty :force-show="provinces.length === 0" />
+              </ShadCommandList>
+            </ShadTabsContent>
 
-                <!-- 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>
+            <!-- District Tab -->
+            <ShadTabsContent value="district" class="m-0">
+              <ShadCommandList class="max-h-64">
+                <ShadCommandGroup>
+                  <ShadCommandItem
+                    v-for="district in amphurs"
+                    :key="district.id"
+                    :value="district.name_th"
+                    @select="onSelectDistrict(district)"
+                  >
+                    {{ district.name_th }}
+                    <Icon
+                      v-if="selectedDistrict?.id === district.id"
+                      name="lucide:check"
+                      class="ml-auto h-4 w-4"
+                    />
+                  </ShadCommandItem>
+                </ShadCommandGroup>
+                <ShadCommandEmpty :force-show="amphurs.length === 0" />
+              </ShadCommandList>
+            </ShadTabsContent>
 
-                <!-- 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>
+            <!-- Sub-district Tab -->
+            <ShadTabsContent value="subDistrict" class="m-0">
+              <ShadCommandList class="max-h-64">
+                <ShadCommandGroup>
+                  <ShadCommandItem
+                    v-for="subDistrict in tambons"
+                    :key="subDistrict.id"
+                    :value="subDistrict.name_th"
+                    @select="onSelectSubDistrict(subDistrict)"
+                  >
+                    {{ subDistrict.name_th }}
+                    <Icon
+                      v-if="selectedSubDistrict?.id === subDistrict.id"
+                      name="lucide:check"
+                      class="ml-auto h-4 w-4"
+                    />
+                  </ShadCommandItem>
+                </ShadCommandGroup>
+                <ShadCommandEmpty :force-show="tambons.length === 0" />
+              </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>
+            <!-- Zip Code Tab -->
+            <ShadTabsContent value="zipCode" class="m-0">
+              <ShadCommandList class="max-h-64">
+                <ShadCommandGroup>
+                  <ShadCommandItem
+                    v-if="selectedSubDistrict"
+                    :value="selectedSubDistrict.zipcode_code?.toString() || ''"
+                    @select="() => onSelectZipCode(close)"
+                  >
+                    {{ selectedSubDistrict.zipcode_code }}
+                    <Icon name="lucide:check" class="ml-auto h-4 w-4" />
+                  </ShadCommandItem>
+                </ShadCommandGroup>
+                <ShadCommandEmpty :force-show="!selectedSubDistrict" />
+              </ShadCommandList>
+            </ShadTabsContent>
+          </ShadTabs>
+        </ShadCommand>
+      </template>
+    </InputCombobox>
 
     <!-- Address Detail (House number, Soi, Moo, Road) -->
     <InputTextField
@@ -169,7 +137,10 @@
 
 <script setup>
 import { ref, computed, watch } from "vue";
-import InputTextField from "./input-text-field.vue";
+import {
+  useThaiAddress
+} from "@/runtime/composables/useThaiAddress";
+const { getProvinces, getAmphursByProvinceId, getTambonsByAmphurId } = useThaiAddress();
 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" },
@@ -179,227 +150,62 @@ const props = defineProps({
   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 }
+  gap: { type: String, required: false, default: "gap-4" }
 });
 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 comboboxRef = 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 provinces = computed(() => {
+  const allProvinces = getProvinces();
+  if (!searchQuery.value || currentTab.value !== "province")
+    return allProvinces;
   const query = searchQuery.value.toLowerCase();
-  return mockProvinces.filter(
+  return allProvinces.filter(
     (p) => p.name_th.toLowerCase().includes(query) || p.name_en.toLowerCase().includes(query)
   );
 });
-const filteredDistricts = computed(() => {
+const amphurs = computed(() => {
   if (!selectedProvince.value) return [];
-  const districts = mockDistricts.filter(
-    (d) => d.province_code === selectedProvince.value?.code
-  );
-  if (!searchQuery.value) return districts;
+  const allAmphurs = getAmphursByProvinceId(selectedProvince.value.id);
+  if (!searchQuery.value || currentTab.value !== "district") return allAmphurs;
   const query = searchQuery.value.toLowerCase();
-  return districts.filter(
-    (d) => d.name_th.toLowerCase().includes(query) || d.name_en.toLowerCase().includes(query)
+  return allAmphurs.filter(
+    (a) => a.name_th.toLowerCase().includes(query) || a.name_en.toLowerCase().includes(query)
   );
 });
-const filteredSubDistricts = computed(() => {
+const tambons = computed(() => {
   if (!selectedDistrict.value) return [];
-  const subDistricts = mockSubDistricts.filter(
-    (s) => s.district_code === selectedDistrict.value?.code
-  );
-  if (!searchQuery.value) return subDistricts;
+  const allTambons = getTambonsByAmphurId(selectedDistrict.value.id);
+  if (!searchQuery.value || currentTab.value !== "subDistrict")
+    return allTambons;
   const query = searchQuery.value.toLowerCase();
-  return subDistricts.filter(
-    (s) => s.name_th.toLowerCase().includes(query) || s.name_en.toLowerCase().includes(query)
+  return allTambons.filter(
+    (t) => t.name_th.toLowerCase().includes(query) || t.name_en.toLowerCase().includes(query)
   );
 });
+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?.zipcode_code)
+    parts.push(selectedSubDistrict.value.zipcode_code.toString());
+  return parts.join(", ");
+});
+const internalValue = computed({
+  get: () => addressValue.value,
+  set: () => {
+  }
+});
+const addressDetailValue = ref("");
 const onSelectProvince = (province) => {
   selectedProvince.value = province;
   selectedDistrict.value = null;
@@ -424,22 +230,29 @@ const onSelectSubDistrict = (subDistrict) => {
   emits("selectSubDistrict", subDistrict);
   updateModelValue();
 };
-const onSelectZipCode = () => {
-  if (selectedSubDistrict.value) {
-    emits("selectZipCode", selectedSubDistrict.value.zip_code);
-    popoverOpen.value = false;
+const onSelectZipCode = (close) => {
+  if (selectedSubDistrict.value?.zipcode_code) {
+    emits("selectZipCode", selectedSubDistrict.value.zipcode_code);
+    close?.();
     currentTab.value = "province";
     updateModelValue();
   }
 };
+const handleClear = () => {
+  selectedProvince.value = null;
+  selectedDistrict.value = null;
+  selectedSubDistrict.value = null;
+  searchQuery.value = "";
+  currentTab.value = "province";
+};
 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()
+    province_id: selectedProvince.value?.id,
+    amphur_id: selectedDistrict.value?.id,
+    tambon_id: selectedSubDistrict.value?.id,
+    zipcode: selectedSubDistrict.value?.zipcode_code,
+    detail_address: addressDetailValue.value || void 0,
+    full_address: buildFullAddress()
   };
   modelValue.value = value;
   emits("change", value);
@@ -450,8 +263,8 @@ const buildFullAddress = () => {
   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());
+  if (selectedSubDistrict.value?.zipcode_code)
+    parts.push(selectedSubDistrict.value.zipcode_code.toString());
   return parts.join(" ");
 };
 watch(addressDetailValue, () => {
@@ -467,12 +280,12 @@ const defaultRules = (v) => {
   return true;
 };
 const validate = async () => {
-  const addressValid = await addressFieldRef.value?.validate();
+  const addressValid = await comboboxRef.value?.validate?.();
   const detailValid = await detailFieldRef.value?.validate?.();
-  return addressValid?.valid !== false && detailValid !== false;
+  return addressValid?.valid !== false && detailValid?.valid !== false;
 };
 const setErrors = (errMsg) => {
-  addressFieldRef.value?.setErrors(errMsg);
+  comboboxRef.value?.setErrors(errMsg);
 };
 const reset = () => {
   selectedProvince.value = null;
@@ -480,13 +293,14 @@ const reset = () => {
   selectedSubDistrict.value = null;
   addressDetailValue.value = "";
   currentTab.value = "province";
+  searchQuery.value = "";
   updateModelValue();
 };
 defineExpose({
   validate,
   setErrors,
   reset,
-  addressFieldRef,
+  comboboxRef,
   detailFieldRef
 });
 </script>