pukaad-ui-lib 1.40.0 → 1.41.0

package/dist/runtime/components/button.vue

@@ -1,6 +1,6 @@
 <template>
   <ShadButton
-    :class="props.class"
+    :class="['font-body-medium', props.class]"
     :variant="props.variant"
     :color="props.color"
     :type="props.type"

package/dist/runtime/components/collapse/collapse.vue

@@ -7,7 +7,7 @@
   >
     <slot name="title">
       <div
-        class="flex justify-between items-center cursor-pointer"
+        class="flex justify-between items-center p-2 cursor-pointer"
         @click="isOpen = !isOpen"
       >
         <slot name="title-text">

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

@@ -1,3 +1,58 @@
-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>;
+import { type Province, type Amphur, type Tambon } from "@/runtime/composables/useThaiAddress";
+export interface InputAddressValue {
+    province_id?: number;
+    amphur_id?: number;
+    tambon_id?: number;
+    zipcode?: number;
+    detail_address?: string;
+    full_address?: string;
+}
+export interface InputAddressProps {
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    labelDetail?: string;
+    placeholderDetail?: string;
+    required?: boolean;
+    requiredDetail?: boolean;
+    rules?: object | string | Function;
+    gap?: string;
+}
+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;
+    comboboxRef: 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: Amphur) => any;
+    selectSubDistrict: (subDistrict: Tambon) => 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: Amphur) => any) | undefined;
+    onSelectSubDistrict?: ((subDistrict: Tambon) => any) | undefined;
+    onSelectZipCode?: ((zipCode: number) => any) | undefined;
+}>, {
+    label: string;
+    required: boolean;
+    name: string;
+    placeholder: string;
+    gap: 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,306 @@
 <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="['flex flex-col', props.gap]">
+    <!-- Address Selector (Province, District, Sub-district, Zip code) -->
+    <InputCombobox
+      ref="comboboxRef"
+      :name="props.name"
+      :label="props.label"
+      :placeholder="props.placeholder"
+      :required="props.required"
+      :rules="props.rules || defaultRules"
+      v-model="internalValue"
+      @clear="handleClear"
+    >
+      <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"
               >
-                {{ pro.name_th }}
-              </li>
-            </ul>
-          </template>
+                ตำบล/แขวง
+              </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>
 
-          <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 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>
 
-          <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 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>
 
-          <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>
+            <!-- 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.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>
-    </Dropdown>
+    </InputCombobox>
+
+    <!-- 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 {
+  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" },
+  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 },
+  gap: { type: String, required: false, default: "gap-4" }
+});
+const emits = defineEmits(["selectProvince", "selectDistrict", "selectSubDistrict", "selectZipCode", "change"]);
+const modelValue = defineModel({ type: Object, ...{
+  default: () => ({})
+} });
+const currentTab = ref("province");
+const searchQuery = ref("");
+const comboboxRef = ref();
+const detailFieldRef = ref();
+const selectedProvince = ref(null);
+const selectedDistrict = ref(null);
+const selectedSubDistrict = ref(null);
+const provinces = computed(() => {
+  const allProvinces = getProvinces();
+  if (!searchQuery.value || currentTab.value !== "province")
+    return allProvinces;
+  const query = searchQuery.value.toLowerCase();
+  return allProvinces.filter(
+    (p) => p.name_th.toLowerCase().includes(query) || p.name_en.toLowerCase().includes(query)
+  );
+});
+const amphurs = computed(() => {
+  if (!selectedProvince.value) return [];
+  const allAmphurs = getAmphursByProvinceId(selectedProvince.value.id);
+  if (!searchQuery.value || currentTab.value !== "district") return allAmphurs;
+  const query = searchQuery.value.toLowerCase();
+  return allAmphurs.filter(
+    (a) => a.name_th.toLowerCase().includes(query) || a.name_en.toLowerCase().includes(query)
+  );
+});
+const tambons = computed(() => {
+  if (!selectedDistrict.value) return [];
+  const allTambons = getTambonsByAmphurId(selectedDistrict.value.id);
+  if (!searchQuery.value || currentTab.value !== "subDistrict")
+    return allTambons;
+  const query = searchQuery.value.toLowerCase();
+  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;
+  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 = (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_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);
+};
+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?.zipcode_code)
+    parts.push(selectedSubDistrict.value.zipcode_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 comboboxRef.value?.validate?.();
+  const detailValid = await detailFieldRef.value?.validate?.();
+  return addressValid?.valid !== false && detailValid?.valid !== false;
+};
+const setErrors = (errMsg) => {
+  comboboxRef.value?.setErrors(errMsg);
+};
+const reset = () => {
+  selectedProvince.value = null;
+  selectedDistrict.value = null;
+  selectedSubDistrict.value = null;
+  addressDetailValue.value = "";
+  currentTab.value = "province";
+  searchQuery.value = "";
+  updateModelValue();
+};
+defineExpose({
+  validate,
+  setErrors,
+  reset,
+  comboboxRef,
+  detailFieldRef
+});
 </script>

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

@@ -1,3 +1,58 @@
-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>;
+import { type Province, type Amphur, type Tambon } from "@/runtime/composables/useThaiAddress";
+export interface InputAddressValue {
+    province_id?: number;
+    amphur_id?: number;
+    tambon_id?: number;
+    zipcode?: number;
+    detail_address?: string;
+    full_address?: string;
+}
+export interface InputAddressProps {
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    labelDetail?: string;
+    placeholderDetail?: string;
+    required?: boolean;
+    requiredDetail?: boolean;
+    rules?: object | string | Function;
+    gap?: string;
+}
+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;
+    comboboxRef: 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: Amphur) => any;
+    selectSubDistrict: (subDistrict: Tambon) => 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: Amphur) => any) | undefined;
+    onSelectSubDistrict?: ((subDistrict: Tambon) => any) | undefined;
+    onSelectZipCode?: ((zipCode: number) => any) | undefined;
+}>, {
+    label: string;
+    required: boolean;
+    name: string;
+    placeholder: string;
+    gap: 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-combobox.d.vue.ts

@@ -19,18 +19,26 @@ type __VLS_ModelProps = {
     modelValue?: string | string[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_25: {}, __VLS_67: {};
+declare var __VLS_25: {}, __VLS_44: {
+    close: () => boolean;
+}, __VLS_69: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_25) => any;
 } & {
-    options?: (props: typeof __VLS_67) => any;
+    'popover-content'?: (props: typeof __VLS_44) => any;
+} & {
+    options?: (props: typeof __VLS_69) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     setErrors: (errMsg: string[]) => void;
+    validate: () => Promise<any>;
     inputTextFieldRef: import("vue").Ref<any, any>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | string[]) => any;
+} & {
+    clear: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
 }>, {
     name: string;