pukaad-ui-lib 1.72.0 → 1.74.0

package/dist/module.json

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

package/dist/runtime/assets/svg/tag-empty.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="180" height="123" viewBox="0 0 180 123" fill="none">
+  <g clip-path="url(#clip0_5616_301)">
+    <path d="M167.793 23.2002C162.111 19.4053 155.211 16.7871 149.617 14.0565C139.302 9.02603 128.278 3.54088 116.957 1.23824C102.668 -1.66881 87.2018 0.802313 73.6832 5.9291C62.0371 10.3472 51.0108 17.905 45.7471 29.5385C45.4815 30.1269 45.232 30.7206 44.9959 31.3223C34.6537 57.8414 8.52055 63.6769 3.50371 75.3506C-1.51314 87.0216 31.1017 121.2 65.5972 122.869C100.093 124.535 99.8244 110.032 131.245 110.781C158.886 111.439 174.986 86.0588 178.865 61.5588C180.308 52.4339 180.982 42.084 177.124 33.4404C175.206 29.14 171.801 25.88 167.796 23.2029L167.793 23.2002Z" fill="#E3F2FD"/>
+    <path opacity="0.7" d="M167.793 23.2002C162.111 19.4053 155.211 16.7871 149.617 14.0565C139.302 9.02603 128.278 3.54088 116.957 1.23824C102.668 -1.66881 87.2018 0.802313 73.6832 5.9291C62.0371 10.3472 51.0108 17.905 45.7471 29.5385C45.4815 30.1269 45.232 30.7206 44.9959 31.3223C34.6537 57.8414 8.52055 63.6769 3.50371 75.3506C-1.51314 87.0216 31.1017 121.2 65.5972 122.869C100.093 124.535 99.8244 110.032 131.245 110.781C158.886 111.439 174.986 86.0588 178.865 61.5588C180.308 52.4339 180.982 42.084 177.124 33.4404C175.206 29.14 171.801 25.88 167.796 23.2029L167.793 23.2002Z" fill="white"/>
+    <path d="M144.056 7.73697C143.581 8.54998 143.375 9.33357 143.265 9.82833C142.953 11.227 141.861 12.0026 139.527 10.9141C137.193 9.82566 135.01 10.4488 134.387 12.155C133.765 13.864 133.454 15.26 130.806 14.6395C128.158 14.0191 126.755 13.864 125.977 14.9498C125.199 16.0356 125.043 16.8138 125.043 16.8138H159.992" stroke="#22A7EF" stroke-miterlimit="10"/>
+    <path d="M161.703 16.8165H166.785C167.096 16.8165 166.291 14.4176 166.2 14.2705C164.424 11.3982 161.899 13.5885 159.466 12.7782C159.466 12.7782 156.196 4.39401 150.43 4.54912C147.723 4.62133 146.047 5.48248 144.998 6.52014" stroke="#22A7EF" stroke-miterlimit="10"/>
+    <path d="M16.907 32.6167H39.6411C39.8584 32.6167 39.2977 30.9479 39.2333 30.8436C37.9965 28.8432 36.2393 30.3676 34.5437 29.8059C34.5437 29.8059 33.256 26.5031 30.9085 24.9118" stroke="#22A7EF" stroke-miterlimit="10"/>
+    <path d="M29.6772 24.2914C29.2319 24.1416 28.757 24.0614 28.2554 24.0774C24.2419 24.1844 23.4826 26.7812 23.2653 27.752C23.048 28.7255 22.2888 29.2657 20.663 28.5089C19.0372 27.752 17.5188 28.1853 17.0842 29.3727C16.6496 30.5601 16.4322 31.5363 14.5892 31.103C12.7461 30.6698 11.7695 30.5628 11.2276 31.3196C10.6857 32.0765 10.5757 32.6167 10.5757 32.6167H15.0801" stroke="#22A7EF" stroke-miterlimit="10"/>
+    <path d="M102.335 55.3222C101.828 55.1243 101.284 55.0146 100.702 55.0307C96.6882 55.1377 95.9289 57.7345 95.7116 58.7053C95.4943 59.6761 94.7351 60.219 93.1093 59.4621C91.4835 58.7053 89.9651 59.1385 89.5305 60.326C89.0958 61.5161 88.8785 62.4895 87.0355 62.0563C85.1924 61.623 84.2158 61.5161 83.6739 62.2729C83.132 63.0298 83.022 63.57 83.022 63.57H112.087C112.305 63.57 111.744 61.9012 111.68 61.7969C110.443 59.7964 108.686 61.3208 106.99 60.7592C106.99 60.7592 105.888 57.9351 103.867 56.2502" stroke="#22A7EF" stroke-miterlimit="10"/>
+    <path d="M136.222 12.2166L130.247 34.585L125.166 53.5999L108.651 115.423H89.5789L106.094 53.5999L111.173 34.585L117.147 12.2166H136.222Z" fill="#22A7EF"/>
+    <path opacity="0.14" d="M136.222 12.2166L130.247 34.585L125.166 53.5999L108.651 115.423H89.5789L106.094 53.5999L111.173 34.585L117.147 12.2166H136.222Z" fill="white"/>
+    <path d="M130.248 34.5851L125.166 53.5999H106.094L111.173 34.5851H130.248Z" fill="#1976B8"/>
+    <path d="M118.529 78.6909L113.448 97.7057H94.3757L99.4543 78.6909H118.529Z" fill="#1976B8"/>
+    <path d="M91.8002 12.2166L85.8256 34.585L80.7444 53.5999L64.229 115.423H45.1543L61.6696 53.5999L66.7509 34.585L72.7255 12.2166H91.8002Z" fill="#22A7EF"/>
+    <path opacity="0.14" d="M91.8002 12.2166L85.8256 34.585L80.7444 53.5999L64.229 115.423H45.1543L61.6696 53.5999L66.7509 34.585L72.7255 12.2166H91.8002Z" fill="white"/>
+    <path d="M74.1071 78.6909L69.0259 97.7057H49.9512L55.0324 78.6909H74.1071Z" fill="#1976B8"/>
+    <path d="M85.8256 34.5851L80.7444 53.5999H61.6697L66.7509 34.5851H85.8256Z" fill="#1976B8"/>
+    <path d="M30.0608 95.5448L35.3084 76.53H138.843L133.596 95.5448H30.0608Z" fill="#1976B8"/>
+    <path d="M44.344 51.5861L49.5942 32.5713H153.126L147.879 51.5861H44.344Z" fill="#1976B8"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_5616_301">
+      <rect width="180" height="123" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/dist/runtime/components/drawer/drawer-post-blog.d.vue.ts

@@ -1,10 +1,29 @@
+export interface DrawerPostBlogItem {
+    title: string;
+    content: object[];
+    tags: string[];
+    disableComment: boolean;
+    coverImage: File[];
+}
+export interface DrawerPostBlogProps {
+    item?: DrawerPostBlogItem;
+}
+type __VLS_Props = DrawerPostBlogProps;
 type __VLS_ModelProps = {
     modelValue?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+} & {
+    submit: (data: DrawerPostBlogItem) => any;
+    saveDraft: (data: DrawerPostBlogItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: ((data: DrawerPostBlogItem) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    onSaveDraft?: ((data: DrawerPostBlogItem) => any) | undefined;
+}>, {
+    item: DrawerPostBlogItem;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/drawer/drawer-post-blog.vue

@@ -1,89 +1,122 @@
 <template>
-  <Drawer class="w-[748px]" title="เพิ่มบล็อก" v-model="isOpen">
-    <div class="flex flex-col gap-4">
+  <Drawer
+    class="w-[748px]"
+    :title="drawerTitle"
+    @close="onClose"
+    disabled-auto-close
+    @submit="onSubmit"
+    v-model="isOpen"
+  >
+    <div class="flex flex-col gap-[16px]">
       <InputTextField
+        name="title"
         label="หัวข้อ"
         placeholder="ตั้งชื่อบทความให้น่าสนใจ"
         showCounter
         :limit="180"
+        v-model="form.title"
+        disabled-border
         required
       />
-      <InputContent placeholder="อยากเล่าอะไร" />
 
-      <InputCheckbox label="ไม่อนุญาตให้แสดงความคิดเห็น" />
-      <div class="h-[500px] w-full bg-red-500"></div>
-      <div class="h-[500px] w-full bg-red-500"></div>
-      <!-- <div class="flex flex-col gap-[8px]">
+      <InputContent
+        placeholder="อยากเล่าอะไร"
+        :height="288"
+        v-model="form.content"
+      />
+
+      <InputTag
+        v-model="form.tags"
+        name="tags"
+        label="แท็ก"
+        placeholder="เพิ่มแท็ก"
+        :limit="5"
+      />
+
+      <InputCheckbox
+        name="disableComment"
+        label="ไม่อนุญาตให้แสดงความคิดเห็น"
+        v-model="form.disableComment"
+      />
+
+      <div class="flex flex-col gap-[8px]">
         <div class="text-gray font-body-large">ภาพหน้าปก</div>
         <InputFile
-          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
           :limit="1"
+          name="coverImage"
+          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
+          v-model="form.coverImage"
         />
         <div class="flex flex-col text-gray font-body-small">
           <div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
           <div>ขนาดไม่เกิน 30 mb</div>
         </div>
-      </div> -->
-    </div>
-  </Drawer>
-  <!-- <Drawer
-    :width="788"
-    title="เล่าเรื่องราวของคุณ"
-    v-model="isOpen"
-    @submit="onSubmit"
-  >
-    <Card full-width>
-      <div class="flex flex-col gap-[16px]">
-        <InputTextField
-          placeholder="ตั้งชื่อบทความให้น่าสนใจ"
-          label="หัวข้อ"
-          fullWidth
-          showCounter
-          disabled-border
-          :limit="180"
-          required
-          v-model="state.title"
-        />
-        <InputContent
-          placeholder="อยากเล่าอะไร"
-          class="h-[140px]"
-          v-model="state.content"
-        />
-        <InputTag v-model="state.tag" />
-        <InputCheckbox
-          label="ไม่อนุญาตให้แสดงความคิดเห็น"
-          :label-gap="10"
-          v-model="state.disabled_comment"
-        />
-        <div class="flex flex-col gap-[8px]">
-          <div class="text-gray font-body-large">ภาพหน้าปก</div>
-          <InputFile
-            accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
-            :limit="1"
-            v-model="state.file"
-          />
-          <div class="flex flex-col text-gray font-body-small">
-            <div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
-            <div>ขนาดไม่เกิน 30 mb</div>
-          </div>
-        </div>
       </div>
-    </Card>
+    </div>
 
     <template #footer="{ meta }">
-      <div class="flex justify-end items-center gap-[16px]">
-        <Button variant="text" color="black" @click="onClose"> ยกเลิก </Button>
-        <Button variant="solid" @click="onSave"> บันทึกแบบร่าง </Button>
+      <div class="flex justify-end gap-[16px] items-center">
+        <Button variant="outline" @click="onClose">ยกเลิก</Button>
+        <Button @click="onSaveDraft"> บันทึกแบบร่าง </Button>
         <Button type="submit" color="primary" :disabled="!meta.valid">
-          ยืนยัน
+          เผยแพร่
         </Button>
       </div>
     </template>
-  </Drawer> -->
+  </Drawer>
 </template>
 
 <script setup>
+import { ref, watch, computed } from "vue";
+import { useNuxtApp } from "nuxt/app";
+const { $alert } = useNuxtApp();
+const emit = defineEmits(["submit", "saveDraft"]);
+const props = defineProps({
+  item: { type: Object, required: false, default: () => ({
+    title: "",
+    content: [],
+    tags: [],
+    disableComment: false,
+    coverImage: []
+  }) }
+});
+const form = ref(JSON.parse(JSON.stringify(props.item)));
 const isOpen = defineModel({ type: Boolean, ...{
   default: false
 } });
+const drawerTitle = computed(() => {
+  const hasTitle = props.item?.title?.trim();
+  return hasTitle ? "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E1A\u0E25\u0E47\u0E2D\u0E01" : "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E1A\u0E25\u0E47\u0E2D\u0E01";
+});
+watch(isOpen, (newVal) => {
+  if (newVal) {
+    form.value = JSON.parse(JSON.stringify(props.item));
+  }
+});
+const onClose = async () => {
+  const isModified = JSON.stringify(form.value) !== JSON.stringify(props.item);
+  if (isModified) {
+    const { isConfirmed } = await $alert.show({
+      type: "warning",
+      title: "\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E35\u0E49\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
+      description: "\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01 \u0E04\u0E38\u0E13\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E25\u0E30\u0E17\u0E34\u0E49\u0E07\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
+      confirmText: "\u0E25\u0E30\u0E17\u0E34\u0E49\u0E07",
+      cancelText: "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E15\u0E48\u0E2D",
+      showCancelBtn: true
+    });
+    if (isConfirmed) {
+      isOpen.value = false;
+    }
+  } else {
+    isOpen.value = false;
+  }
+};
+const onSaveDraft = () => {
+  emit("saveDraft", form.value);
+  console.log("onSaveDraft", form.value);
+};
+const onSubmit = () => {
+  emit("submit", form.value);
+  isOpen.value = false;
+};
 </script>

package/dist/runtime/components/drawer/drawer-post-blog.vue.d.ts

@@ -1,10 +1,29 @@
+export interface DrawerPostBlogItem {
+    title: string;
+    content: object[];
+    tags: string[];
+    disableComment: boolean;
+    coverImage: File[];
+}
+export interface DrawerPostBlogProps {
+    item?: DrawerPostBlogItem;
+}
+type __VLS_Props = DrawerPostBlogProps;
 type __VLS_ModelProps = {
     modelValue?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+} & {
+    submit: (data: DrawerPostBlogItem) => any;
+    saveDraft: (data: DrawerPostBlogItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: ((data: DrawerPostBlogItem) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    onSaveDraft?: ((data: DrawerPostBlogItem) => any) | undefined;
+}>, {
+    item: DrawerPostBlogItem;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,25 @@
-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 InputTagProps {
+    name?: string;
+    rules?: object | string | Function;
+    label?: string;
+    required?: boolean;
+    showCounter?: boolean;
+    limit?: number;
+    placeholder?: string;
+}
+type __VLS_Props = InputTagProps;
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    name: string;
+    placeholder: string;
+    limit: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,43 +1,269 @@
 <template>
-  <!-- <div class="flex flex-col gap-[4px]">
-    <div class="flex flex-wrap gap-[4px]">
-      <Chip
-        v-for="(item, i_item) in items"
-        :key="i_item"
-        color="primary"
-        size="small"
-        closable
-        auto-height
-        @closable="onClosable(i_item)"
-      >
-        {{ item }}
-      </Chip>
-      <Chip v-if="isInputShow" color="primary" size="small">
-        <input
-          ref="inputRef"
-          class="text-center w-full"
-          @keyup.enter="onAddTag"
-          :style="{ width: inputWidth + 'px' }"
-          @input="onInput"
-          v-model="inputTag"
-        />
-      </Chip>
-      <Button
-        v-else
-        prepend-icon="fa6-solid:plus"
-        full-rounded
-        size="small"
-        @click="showInputTag"
-      >
-        เพิ่มแท็ก
-      </Button>
-    </div>
-    <Card v-if="isInputShow" type="outline" full-width disabled-padding-content>
-      <Tab :items="tabItems" type="text" v-model="tab" />
-    </Card>
-  </div> -->
+  <ShadPopover v-model:open="popoverOpen">
+    <ShadPopoverAnchor as-child>
+      <ShadFormField :name="props.name" v-model="modelValue">
+        <ShadFormItem>
+          <ShadFormLabel v-if="props.label" class="w-full">
+            <div class="font-body-large-prominent text-gray-500">
+              {{ props.label }}
+              <span v-if="props.required" class="text-destructive">*</span>
+            </div>
+          </ShadFormLabel>
+          <div
+            class="flex flex-wrap items-center gap-2 min-h-10 w-full rounded-md bg-background px-3 py-2 cursor-text"
+            @mousedown="handleContainerClick"
+          >
+            <!-- Selected Tags as Chips -->
+            <Chip
+              v-for="tag in selectedTags"
+              :key="tag.value"
+              closable
+              @closable="onRemoveTag(tag.value)"
+              class="bg-bright"
+            >
+              {{ tag.label }}
+            </Chip>
+            <!-- Input for search -->
+            <InputTextField
+              v-if="!isLimitReached"
+              ref="inputRef"
+              id="input-tag-search"
+              name="input-tag-search"
+              v-model="searchQuery"
+              disabled-border
+              :placeholder="props.placeholder"
+              class="flex-1 min-w-[100px]"
+              @keydown="onKeydown"
+            />
+          </div>
+        </ShadFormItem>
+      </ShadFormField>
+    </ShadPopoverAnchor>
+    <ShadPopoverContent
+      @openAutoFocus.prevent
+      @interactOutside="handleInteractOutside"
+    >
+      <ShadCommand class="p-2">
+        <ShadTabs v-model="currentTab" class="w-full">
+          <ShadTabsList class="w-full grid grid-cols-2">
+            <ShadTabsTrigger value="popular">ยอดนิยม</ShadTabsTrigger>
+            <ShadTabsTrigger value="latest">ล่าสุด</ShadTabsTrigger>
+          </ShadTabsList>
+
+          <!-- Popular Tab -->
+          <ShadTabsContent value="popular" class="m-0">
+            <ShadCommandList class="max-h-64">
+              <ShadCommandGroup>
+                <ShadCommandItem
+                  v-for="tag in filteredPopularTags"
+                  :key="tag.value"
+                  :value="tag.value"
+                  :disabled="isOptionDisabled(tag.value)"
+                  :class="[
+  'flex w-full justify-between',
+  isOptionDisabled(tag.value) && 'cursor-not-allowed opacity-50'
+]"
+                  @select="onSelectTag(tag)"
+                >
+                  <span class="font-body-medium">{{ tag.label }}</span>
+                  <div class="flex items-center gap-2">
+                    <div class="font-body-small text-gray">
+                      {{ tag.postCount }}
+                    </div>
+                    <Icon
+                      v-if="isSelected(tag.value)"
+                      name="lucide:check"
+                      class="h-4 w-4"
+                    />
+                  </div>
+                </ShadCommandItem>
+              </ShadCommandGroup>
+              <ShadCommandEmpty :force-show="filteredPopularTags.length === 0">
+                <div
+                  class="flex flex-col items-center justify-center h-full gap-2"
+                >
+                  <Icon name="pukaad:tag-empty" class="h-[123px] w-[180px]" />
+                  <div class="text-gray font-body-medium">ไม่พบข้อมูล</div>
+                </div>
+              </ShadCommandEmpty>
+            </ShadCommandList>
+          </ShadTabsContent>
+
+          <!-- Latest Tab -->
+          <ShadTabsContent value="latest" class="m-0">
+            <ShadCommandList class="max-h-64">
+              <ShadCommandGroup>
+                <ShadCommandItem
+                  v-for="tag in filteredLatestTags"
+                  :key="tag.value"
+                  :value="tag.value"
+                  :disabled="isOptionDisabled(tag.value)"
+                  :class="[
+  'flex w-full justify-between',
+  isOptionDisabled(tag.value) && 'cursor-not-allowed opacity-50'
+]"
+                  @select="onSelectTag(tag)"
+                >
+                  <span class="font-body-medium">{{ tag.label }}</span>
+                  <div class="flex items-center gap-2">
+                    <div class="font-body-small text-gray">
+                      {{ tag.postCount }}
+                    </div>
+                    <Icon
+                      v-if="isSelected(tag.value)"
+                      name="lucide:check"
+                      class="h-4 w-4"
+                    />
+                  </div>
+                </ShadCommandItem>
+              </ShadCommandGroup>
+              <ShadCommandEmpty :force-show="filteredLatestTags.length === 0">
+                <div
+                  class="flex flex-col items-center justify-center h-full gap-2"
+                >
+                  <Icon name="pukaad:tag-empty" class="h-[123px] w-[180px]" />
+                  <div class="text-gray font-body-medium">ไม่พบข้อมูล</div>
+                </div>
+              </ShadCommandEmpty>
+            </ShadCommandList>
+          </ShadTabsContent>
+        </ShadTabs>
+      </ShadCommand>
+    </ShadPopoverContent>
+  </ShadPopover>
 </template>
 
 <script setup>
-
+import { ref, computed, nextTick } from "vue";
+const props = defineProps({
+  name: { type: String, required: false, default: "input-tag" },
+  rules: { type: [Object, String, Function], required: false },
+  label: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  showCounter: { type: Boolean, required: false },
+  limit: { type: Number, required: false, default: 0 },
+  placeholder: { type: String, required: false, default: "\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E41\u0E17\u0E47\u0E01..." }
+});
+const modelValue = defineModel({ type: Array, ...{
+  default: () => []
+} });
+const popoverOpen = ref(false);
+const currentTab = ref("popular");
+const searchQuery = ref("");
+const inputRef = ref();
+const allTags = ref([
+  // Popular tags
+  { label: "\u0E1A\u0E38\u0E23\u0E35\u0E23\u0E31\u0E21\u0E22\u0E4C", value: "buriram", postCount: "46.5 \u0E1E\u0E31\u0E19 \u0E42\u0E1E\u0E2A\u0E15\u0E4C" },
+  { label: "\u0E01\u0E23\u0E38\u0E07\u0E40\u0E17\u0E1E", value: "bangkok", postCount: "120.3 \u0E1E\u0E31\u0E19 \u0E42\u0E1E\u0E2A\u0E15\u0E4C" },
+  { label: "\u0E40\u0E0A\u0E35\u0E22\u0E07\u0E43\u0E2B\u0E21\u0E48", value: "chiangmai", postCount: "85.2 \u0E1E\u0E31\u0E19 \u0E42\u0E1E\u0E2A\u0E15\u0E4C" },
+  { label: "\u0E20\u0E39\u0E40\u0E01\u0E47\u0E15", value: "phuket", postCount: "72.1 \u0E1E\u0E31\u0E19 \u0E42\u0E1E\u0E2A\u0E15\u0E4C" },
+  { label: "\u0E1E\u0E31\u0E17\u0E22\u0E32", value: "pattaya", postCount: "55.8 \u0E1E\u0E31\u0E19 \u0E42\u0E1E\u0E2A\u0E15\u0E4C" },
+  { label: "\u0E2B\u0E31\u0E27\u0E2B\u0E34\u0E19", value: "huahin", postCount: "34.6 \u0E1E\u0E31\u0E19 \u0E42\u0E1E\u0E2A\u0E15\u0E4C" },
+  { label: "\u0E02\u0E2D\u0E19\u0E41\u0E01\u0E48\u0E19", value: "khonkaen", postCount: "28.4 \u0E1E\u0E31\u0E19 \u0E42\u0E1E\u0E2A\u0E15\u0E4C" },
+  { label: "\u0E19\u0E04\u0E23\u0E23\u0E32\u0E0A\u0E2A\u0E35\u0E21\u0E32", value: "korat", postCount: "22.9 \u0E1E\u0E31\u0E19 \u0E42\u0E1E\u0E2A\u0E15\u0E4C" },
+  // Latest tags
+  { label: "\u0E2A\u0E38\u0E02\u0E38\u0E21\u0E27\u0E34\u0E17", value: "sukhumvit", postCount: "12.3 \u0E1E\u0E31\u0E19 \u0E42\u0E1E\u0E2A\u0E15\u0E4C" },
+  { label: "\u0E2A\u0E22\u0E32\u0E21", value: "siam", postCount: "8.7 \u0E1E\u0E31\u0E19 \u0E42\u0E1E\u0E2A\u0E15\u0E4C" },
+  { label: "\u0E2D\u0E32\u0E23\u0E35\u0E22\u0E4C", value: "ari", postCount: "6.2 \u0E1E\u0E31\u0E19 \u0E42\u0E1E\u0E2A\u0E15\u0E4C" },
+  { label: "\u0E17\u0E2D\u0E07\u0E2B\u0E25\u0E48\u0E2D", value: "thonglor", postCount: "15.4 \u0E1E\u0E31\u0E19 \u0E42\u0E1E\u0E2A\u0E15\u0E4C" },
+  { label: "\u0E40\u0E2D\u0E01\u0E21\u0E31\u0E22", value: "ekkamai", postCount: "9.8 \u0E1E\u0E31\u0E19 \u0E42\u0E1E\u0E2A\u0E15\u0E4C" },
+  { label: "\u0E2D\u0E42\u0E28\u0E01", value: "asoke", postCount: "11.2 \u0E1E\u0E31\u0E19 \u0E42\u0E1E\u0E2A\u0E15\u0E4C" },
+  { label: "\u0E2A\u0E35\u0E25\u0E21", value: "silom", postCount: "18.6 \u0E1E\u0E31\u0E19 \u0E42\u0E1E\u0E2A\u0E15\u0E4C" },
+  { label: "\u0E23\u0E31\u0E0A\u0E14\u0E32", value: "ratchada", postCount: "7.5 \u0E1E\u0E31\u0E19 \u0E42\u0E1E\u0E2A\u0E15\u0E4C" }
+]);
+const popularTags = computed(() => allTags.value.slice(0, 8));
+const latestTags = computed(() => allTags.value.slice(8));
+const selectedTags = computed(() => {
+  return modelValue.value.map((value) => allTags.value.find((tag) => tag.value === value)).filter((tag) => tag !== void 0);
+});
+const isLimitReached = computed(() => {
+  if (props.limit <= 0) return false;
+  return modelValue.value.length >= props.limit;
+});
+const handleContainerClick = (event) => {
+  if (!isLimitReached.value) {
+    popoverOpen.value = true;
+    setTimeout(() => {
+      const input = document.getElementById(
+        "input-tag-search"
+      );
+      input?.focus();
+    }, 50);
+  }
+};
+const handleInteractOutside = (event) => {
+  const target = event.target;
+  const container = target.closest('[class*="flex flex-wrap items-center"]');
+  if (container) {
+    event.preventDefault();
+  }
+};
+const filteredPopularTags = computed(() => {
+  if (!searchQuery.value) return popularTags.value;
+  const query = searchQuery.value.toLowerCase();
+  return popularTags.value.filter(
+    (tag) => tag.label.toLowerCase().includes(query) || tag.value.toLowerCase().includes(query)
+  );
+});
+const filteredLatestTags = computed(() => {
+  if (!searchQuery.value) return latestTags.value;
+  const query = searchQuery.value.toLowerCase();
+  return latestTags.value.filter(
+    (tag) => tag.label.toLowerCase().includes(query) || tag.value.toLowerCase().includes(query)
+  );
+});
+const isSelected = (value) => {
+  return modelValue.value.includes(value);
+};
+const isOptionDisabled = (value) => {
+  if (isLimitReached.value && !isSelected(value)) {
+    return true;
+  }
+  return false;
+};
+const onSelectTag = (tag) => {
+  if (modelValue.value.includes(tag.value)) {
+    modelValue.value = modelValue.value.filter((v) => v !== tag.value);
+  } else {
+    if (props.limit > 0 && modelValue.value.length >= props.limit) {
+      return;
+    }
+    modelValue.value = [...modelValue.value, tag.value];
+  }
+  searchQuery.value = "";
+};
+const onRemoveTag = (value) => {
+  modelValue.value = modelValue.value.filter((v) => v !== value);
+};
+const onKeydown = (event) => {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    onAddCustomTag();
+  }
+};
+const onAddCustomTag = () => {
+  const trimmedQuery = searchQuery.value.trim();
+  if (!trimmedQuery) return;
+  if (props.limit > 0 && modelValue.value.length >= props.limit) {
+    return;
+  }
+  const newValue = trimmedQuery.toLowerCase().replace(/\s+/g, "-");
+  const existingTag = allTags.value.find(
+    (tag) => tag.value === newValue || tag.label === trimmedQuery
+  );
+  if (existingTag) {
+    if (!modelValue.value.includes(existingTag.value)) {
+      modelValue.value = [...modelValue.value, existingTag.value];
+    }
+  } else {
+    const newTag = {
+      label: trimmedQuery,
+      value: newValue,
+      postCount: "\u0E43\u0E2B\u0E21\u0E48"
+    };
+    allTags.value = [...allTags.value, newTag];
+    modelValue.value = [...modelValue.value, newValue];
+  }
+  searchQuery.value = "";
+};
 </script>

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

@@ -1,3 +1,25 @@
-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 InputTagProps {
+    name?: string;
+    rules?: object | string | Function;
+    label?: string;
+    required?: boolean;
+    showCounter?: boolean;
+    limit?: number;
+    placeholder?: string;
+}
+type __VLS_Props = InputTagProps;
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    name: string;
+    placeholder: string;
+    limit: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -23,13 +23,13 @@ type __VLS_ModelProps = {
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_21: {}, __VLS_58: {}, __VLS_73: {};
+declare var __VLS_21: {}, __VLS_59: {}, __VLS_74: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_21) => any;
 } & {
-    prepend?: (props: typeof __VLS_58) => any;
+    prepend?: (props: typeof __VLS_59) => any;
 } & {
-    append?: (props: typeof __VLS_73) => any;
+    append?: (props: typeof __VLS_74) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     setErrors: (errMsg: string[]) => void;
@@ -39,6 +39,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     "update:modelValue": (value: string) => any;
 } & {
     click: (event: Event) => any;
+    keydown: (event: KeyboardEvent) => any;
     clickPrepend: (event: Event) => any;
     clickIconPrepend: (event: Event) => any;
     clickAppend: (event: Event) => any;
@@ -46,6 +47,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClick?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onKeydown?: ((event: KeyboardEvent) => any) | undefined;
     onClickPrepend?: ((event: Event) => any) | undefined;
     onClickIconPrepend?: ((event: Event) => any) | undefined;
     onClickAppend?: ((event: Event) => any) | undefined;

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

@@ -48,6 +48,7 @@
             :placeholder="props.placeholder"
             :type="props.type"
             @click="emits('click', $event)"
+            @keydown="emits('keydown', $event)"
           >
           </ShadInputGroupInput>
         </ShadFormControl>
@@ -118,7 +119,7 @@ const props = defineProps({
   modelValue: { type: [String, Number], required: false },
   class: { type: null, required: false }
 });
-const emits = defineEmits(["click", "clickPrepend", "clickIconPrepend", "clickAppend", "clickIconAppend"]);
+const emits = defineEmits(["click", "keydown", "clickPrepend", "clickIconPrepend", "clickAppend", "clickIconAppend"]);
 const modelValue = defineModel({ type: String, ...{
   default: ""
 } });

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

@@ -23,13 +23,13 @@ type __VLS_ModelProps = {
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_21: {}, __VLS_58: {}, __VLS_73: {};
+declare var __VLS_21: {}, __VLS_59: {}, __VLS_74: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_21) => any;
 } & {
-    prepend?: (props: typeof __VLS_58) => any;
+    prepend?: (props: typeof __VLS_59) => any;
 } & {
-    append?: (props: typeof __VLS_73) => any;
+    append?: (props: typeof __VLS_74) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     setErrors: (errMsg: string[]) => void;
@@ -39,6 +39,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     "update:modelValue": (value: string) => any;
 } & {
     click: (event: Event) => any;
+    keydown: (event: KeyboardEvent) => any;
     clickPrepend: (event: Event) => any;
     clickIconPrepend: (event: Event) => any;
     clickAppend: (event: Event) => any;
@@ -46,6 +47,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClick?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onKeydown?: ((event: KeyboardEvent) => any) | undefined;
     onClickPrepend?: ((event: Event) => any) | undefined;
     onClickIconPrepend?: ((event: Event) => any) | undefined;
     onClickAppend?: ((event: Event) => any) | undefined;

package/dist/runtime/components/ui/command/CommandEmpty.vue

@@ -31,7 +31,13 @@ const isRender = computed(() => {
 "
   >
     <slot />
-    <Icon name="pukaad:page-not-found" class="h-[64px] w-[74px]" />
-    <div class="text-gray font-body-medium">ไม่พบข้อมูล</div>
+    <Icon
+      v-if="!$slots.default"
+      name="pukaad:page-not-found"
+      class="h-[64px] w-[74px]"
+    />
+    <div v-if="!$slots.default" class="text-gray font-body-medium">
+      ไม่พบข้อมูล
+    </div>
   </Primitive>
 </template>

package/package.json

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