pukaad-ui-lib 1.39.0 → 1.40.0

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

@@ -1,492 +1,87 @@
 <template>
-  <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"
+  <!-- <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)"
               >
-                <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>
+                {{ pro.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>
-
-                <!-- 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>
-
-                <!-- 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>
+          <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>
 
-                <!-- 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>
+          <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>
 
-    <!-- Address Detail (House number, Soi, Moo, Road) -->
+          <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>
     <InputTextField
-      ref="detailFieldRef"
-      :name="`${props.name}-detail`"
-      :label="props.labelDetail"
-      :placeholder="props.placeholderDetail"
-      :disabled="!addressValue"
-      :required="props.requiredDetail"
+      label="บ้านเลขที่, ซอย, หมู่, ถนน"
+      placeholder="บ้านเลขที่, ซอย, หมู่, ถนน"
+      :full-width="props.fullWidth"
+      :disabled="isDisabledAddressDetail"
       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,76 +1,3 @@
-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 __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -14,7 +14,7 @@
         :disabled-error-message="props.disabledErrorMessage"
         autocomplete="off"
         @focus="open = true"
-        @click="console.log('click')"
+        @click="open = true"
         @blur="handleBlur"
         :show-counter="props.showCounter"
         :limit="props.limit"
@@ -24,7 +24,7 @@
             @mousedown.stop.prevent="handleIconMouseDown"
             :name="modelValue ? 'lucide:x' : 'lucide:search'"
             size="16"
-            class="cursor-pointer"
+            class="cursor-pointer text-black"
           />
         </template>
       </InputTextField>