pukaad-ui-lib 1.3.3 → 1.5.0

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

@@ -1,85 +1,85 @@
 <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)"
-              >
-                {{ pro.name_th }}
-              </li>
-            </ul>
-          </template>
-
-          <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>
-
-          <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>
-
-          <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
-      label="บ้านเลขที่, ซอย, หมู่, ถนน"
-      placeholder="บ้านเลขที่, ซอย, หมู่, ถนน"
-      :full-width="props.fullWidth"
-      :disabled="isDisabledAddressDetail"
-      v-model="addressDetailValue"
-    />
-  </div> -->
+  <!-- <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)"
+              >
+                {{ pro.name_th }}
+              </li>
+            </ul>
+          </template>
+
+          <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>
+
+          <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>
+
+          <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
+      label="บ้านเลขที่, ซอย, หมู่, ถนน"
+      placeholder="บ้านเลขที่, ซอย, หมู่, ถนน"
+      :full-width="props.fullWidth"
+      :disabled="isDisabledAddressDetail"
+      v-model="addressDetailValue"
+    />
+  </div> -->
 </template>
 
 <script setup>

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

@@ -1,6 +1,7 @@
 import type { HTMLAttributes } from "vue";
 interface AutocompleteOption {
     label: string;
+    description?: string;
     value: string | number;
 }
 interface InputAutocompleteProps {
@@ -15,17 +16,16 @@ interface InputAutocompleteProps {
     required?: boolean;
     disabledBorder?: boolean;
     options?: AutocompleteOption[] | string[] | number[];
+    showCounter?: boolean;
+    limit?: number;
+    returnObject?: boolean;
 }
 type __VLS_Props = InputAutocompleteProps;
 type __VLS_ModelProps = {
     modelValue?: string | number;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_18: {};
-type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_18) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     setErrors: (errMsg: string[]) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | number) => any;
@@ -38,14 +38,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     description: string;
     options: AutocompleteOption[] | string[] | number[];
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
+    showCounter: boolean;
+    returnObject: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,96 +1,47 @@
 <template>
-  <ShadFormField
-    ref="fieldRef"
-    :name="props.name"
-    :rules="props.rules || defaultRules"
-    v-slot="{ componentField }"
-    v-model="modelValue"
-  >
-    <ShadFormItem>
-      <ShadFormLabel v-if="$slots.label || props.label" class="w-full">
-        <slot name="label">
-          <div
-            :class="[
-  'flex-1',
-  props.disabledBorder && 'font-body-small-prominent'
-]"
-          >
-            {{ props.label }}
-            <span v-if="props.required" class="text-destructive">*</span>
-          </div>
-        </slot>
-      </ShadFormLabel>
-
-      <ShadPopover v-model:open="open" :modal="false">
-        <ShadPopoverAnchor as-child>
-          <div ref="containerRef">
-            <InputTextField
-              v-model="searchText"
-              :placeholder="props.placeholder"
-              @focus="onFocus"
-              @click="onFocus"
-            >
-              <template #append>
-                <Icon
-                  :name="open ? 'lucide:chevron-up' : 'lucide:chevron-down'"
-                  size="16"
-                  class="opacity-50 cursor-pointer"
-                  @mousedown.prevent="toggleDropdown"
-                />
-              </template>
-            </InputTextField>
-          </div>
-        </ShadPopoverAnchor>
-
-        <ShadPopoverContent
-          class="p-0 max-h-60 overflow-auto"
-          :style="{ width: containerRef?.offsetWidth + 'px' }"
-          @openAutoFocus.prevent
-          @closeAutoFocus.prevent
-        >
-          <!-- Empty State -->
-          <div
-            v-if="filteredOptions.length === 0"
-            class="flex flex-col items-center justify-center py-6"
-          >
-            <Icon name="pukaad:page-not-found" size="50" />
-            <div class="font-body-large text-center mt-2">ไม่พบข้อมูล</div>
-          </div>
-
-          <!-- Options List -->
-          <div v-else class="py-1">
-            <div
-              v-for="option in filteredOptions"
-              :key="option.value"
-              class="px-3 py-2 cursor-pointer hover:bg-accent flex items-center gap-2"
-              @click="selectOption(option)"
-            >
-              <Icon
-                name="lucide:check"
-                size="16"
-                :class="[
-  modelValue === option.value ? 'opacity-100' : 'opacity-0'
-]"
-              />
-              <span>{{ option.label }}</span>
-            </div>
-          </div>
-        </ShadPopoverContent>
-      </ShadPopover>
-
-      <ShadFormDescription v-if="props.description">
-        {{ props.description }}
-      </ShadFormDescription>
-      <ShadFormMessage v-if="!props.disabledErrorMessage" />
-    </ShadFormItem>
-  </ShadFormField>
+  <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">
+        <template #append>
+          <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]">
+        <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"
+          class="cursor-pointer hover:bg-smoke flex items-center gap-[8px] px-[8px] py-[6px]"
+          @mousedown.prevent="selectOption(option)">
+          <div class="flex flex-col gap-[4px] w-full">
+            <div class="font-body-medium">
+              {{ option.label }}
+            </div>
+            <div v-if="option.description" class="font-body-small text-gray">
+              {{ option.description }}
+            </div>
+          </div>
+          <Icon v-if="modelValue === option.value" name="lucide:check" size="16" />
+        </div>
+      </div>
+    </ShadPopoverContent>
+  </ShadPopover>
 </template>
 
 <script setup>
 import { ref, computed, watch } from "vue";
 const props = defineProps({
   id: { type: String, required: false, default: "input-autocomplete" },
-  name: { type: String, required: false, default: "input-autocomplete" },
+  name: { type: String, required: false, default: "input-autocompl" },
   class: { type: null, required: false },
   placeholder: { type: String, required: false, default: "\u0E1E\u0E34\u0E21\u0E1E\u0E4C\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E04\u0E49\u0E19\u0E2B\u0E32..." },
   rules: { type: [Object, String, Function], required: false },
@@ -99,7 +50,10 @@ const props = defineProps({
   disabledErrorMessage: { type: Boolean, required: false, default: false },
   required: { type: Boolean, required: false, default: false },
   disabledBorder: { type: Boolean, required: false, default: false },
-  options: { type: Array, required: false, default: () => [] }
+  options: { type: Array, required: false, default: () => [] },
+  showCounter: { type: Boolean, required: false, default: false },
+  limit: { type: Number, required: false, default: 0 },
+  returnObject: { type: Boolean, required: false, default: false }
 });
 const modelValue = defineModel({ type: [String, Number], ...{
   default: ""
@@ -107,60 +61,74 @@ const modelValue = defineModel({ type: [String, Number], ...{
 const open = ref(false);
 const searchText = ref("");
 const fieldRef = ref();
-const containerRef = ref();
 const normalizedOptions = computed(() => {
-  return props.options.map((option) => {
-    if (typeof option === "object" && option !== null) {
-      return option;
+  return props.options.map((opt) => {
+    if (typeof opt === "object" && opt !== null) {
+      return opt;
     }
     return {
-      label: String(option),
-      value: option
+      label: String(opt),
+      value: opt
     };
   });
 });
 const filteredOptions = computed(() => {
-  if (!searchText.value) {
-    return normalizedOptions.value;
+  const search = searchText.value.toLowerCase().trim();
+  if (!search) return normalizedOptions.value;
+  if (modelValue.value) {
+    const selected = normalizedOptions.value.find(
+      (opt) => opt.value === modelValue.value
+    );
+    if (selected && selected.label.toLowerCase().trim() === search) {
+      return normalizedOptions.value;
+    }
   }
-  const query = searchText.value.toLowerCase();
   return normalizedOptions.value.filter(
-    (option) => option.label.toLowerCase().includes(query)
+    (opt) => opt.label.toLowerCase().includes(search)
   );
 });
-watch(
-  modelValue,
-  (newValue) => {
-    if (newValue) {
-      const selected = normalizedOptions.value.find(
-        (option) => option.value === newValue
-      );
-      if (selected) {
-        searchText.value = selected.label;
-      }
-    } else {
-      searchText.value = "";
+const handleBlur = () => {
+  if (modelValue.value) {
+    const selected = normalizedOptions.value.find(
+      (opt) => opt.value === modelValue.value
+    );
+    if (selected) {
+      searchText.value = selected.label;
     }
-  },
-  { immediate: true }
-);
-const onFocus = () => {
-  open.value = true;
+  } else {
+    searchText.value = "";
+  }
 };
-const toggleDropdown = () => {
-  open.value = !open.value;
+const handleIconMouseDown = () => {
+  modelValue.value = "";
+  searchText.value = "";
+  open.value = true;
 };
 const selectOption = (option) => {
   modelValue.value = option.value;
   searchText.value = option.label;
-  open.value = false;
+  open.value = true;
 };
-const defaultRules = (v) => {
-  if (!v && props.required) {
-    return `\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38 ${props.label || "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25"}`;
+watch(
+  modelValue,
+  (val) => {
+    if (val) {
+      const found = normalizedOptions.value.find((o) => o.value === val);
+      if (found) {
+        searchText.value = found.label;
+      }
+    }
+  },
+  { immediate: true }
+);
+watch(searchText, (val) => {
+  if (!open.value && val) {
+    open.value = true;
   }
-  return true;
-};
+  if (val === "") {
+    modelValue.value = "";
+  }
+});
 const setErrors = (errMsg) => {
   fieldRef.value?.setErrors(errMsg);
 };

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

@@ -1,6 +1,7 @@
 import type { HTMLAttributes } from "vue";
 interface AutocompleteOption {
     label: string;
+    description?: string;
     value: string | number;
 }
 interface InputAutocompleteProps {
@@ -15,17 +16,16 @@ interface InputAutocompleteProps {
     required?: boolean;
     disabledBorder?: boolean;
     options?: AutocompleteOption[] | string[] | number[];
+    showCounter?: boolean;
+    limit?: number;
+    returnObject?: boolean;
 }
 type __VLS_Props = InputAutocompleteProps;
 type __VLS_ModelProps = {
     modelValue?: string | number;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_18: {};
-type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_18) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     setErrors: (errMsg: string[]) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | number) => any;
@@ -38,14 +38,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     description: string;
     options: AutocompleteOption[] | string[] | number[];
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
+    showCounter: boolean;
+    returnObject: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};