pukaad-ui-lib 1.74.0 → 1.76.0

package/dist/module.json

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

package/dist/module.mjs

@@ -81,6 +81,7 @@ const module$1 = defineNuxtModule({
     addPlugin(resolver.resolve("./runtime/plugins/loadingPage"));
     addPlugin(resolver.resolve("./runtime/plugins/alert"));
     addPlugin(resolver.resolve("./runtime/plugins/toast"));
+    addPlugin(resolver.resolve("./runtime/plugins/format"));
     addPlugin(resolver.resolve("./runtime/plugins/quill.client"));
     _nuxt.hook("nitro:config", (nitroConfig) => {
       nitroConfig.publicAssets ||= [];

package/dist/runtime/components/card/card-profile-about.d.vue.ts

@@ -18,12 +18,12 @@ export interface CardProfileAboutItem {
     links: CardProfileAboutLink[];
 }
 type __VLS_Props = {
-    edit?: boolean;
+    isMyProfile?: boolean;
     item?: CardProfileAboutItem;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     item: CardProfileAboutItem;
-    edit: boolean;
+    isMyProfile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/card/card-profile-about.vue

@@ -1,6 +1,6 @@
 <template>
   <Card title="ข้อมูลทั่วไป" class="flex-col flex gap-[16px]">
-    <template v-if="props.edit && !isEmpty" #header>
+    <template v-if="props.isMyProfile && !isEmpty" #header>
       <div class="flex justify-between items-center">
         <div class="font-title-medium-prominent">ข้อมูลทั่วไป</div>
         <Button variant="text" color="primary" @click="isShowEdit = true">
@@ -10,7 +10,7 @@
       </div>
     </template>
     <div
-      v-if="props.edit && isEmpty"
+      v-if="props.isMyProfile && isEmpty"
       class="flex flex-col gap-[8px] font-body-large"
     >
       <Button class="w-full" @click="isShowEdit = true">
@@ -85,7 +85,7 @@
 <script setup>
 import { ref, computed } from "vue";
 const props = defineProps({
-  edit: { type: Boolean, required: false, default: false },
+  isMyProfile: { type: Boolean, required: false, default: false },
   item: { type: Object, required: false, default: () => ({
     description: "",
     category: 0,

package/dist/runtime/components/card/card-profile-about.vue.d.ts

@@ -18,12 +18,12 @@ export interface CardProfileAboutItem {
     links: CardProfileAboutLink[];
 }
 type __VLS_Props = {
-    edit?: boolean;
+    isMyProfile?: boolean;
     item?: CardProfileAboutItem;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     item: CardProfileAboutItem;
-    edit: boolean;
+    isMyProfile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/card/card-reaction.d.vue.ts

@@ -1,3 +1,41 @@
-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 Count {
+    liked?: number;
+    bookmarked?: number;
+    viewed?: number;
+    commented?: number;
+    shared?: number;
+}
+interface Reacted {
+    liked?: boolean;
+    bookmarked?: boolean;
+}
+type __VLS_Props = {
+    itemCount?: Count;
+    itemActive?: Reacted;
+    padding?: string | number;
+    disabledPadding?: boolean;
+    disabledDividerTop?: boolean;
+    disabledDividerBottom?: boolean;
+    disabled?: boolean;
+    iconSize?: number | string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:liked": (value: boolean) => any;
+    "update:bookmarked": (value: boolean) => any;
+    share: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:liked"?: ((value: boolean) => any) | undefined;
+    "onUpdate:bookmarked"?: ((value: boolean) => any) | undefined;
+    onShare?: (() => any) | undefined;
+}>, {
+    disabled: boolean;
+    disabledPadding: boolean;
+    itemCount: Count;
+    itemActive: Reacted;
+    padding: string | number;
+    disabledDividerTop: boolean;
+    disabledDividerBottom: boolean;
+    iconSize: number | string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/card/card-reaction.vue

@@ -1,35 +1,129 @@
 <template>
-  <!-- <div>
+  <div>
     <Divider v-if="!props.disabledDividerTop" :height="0" />
     <div class="flex justify-between w-full font-body-large text-gray">
       <div
         v-for="(react, i) in listReaction"
         :key="i"
-        :class="[
-          'flex items-center gap-[4px] justify-center w-full',
-          react.action && 'cursor-pointer hover:bg-bright',
-          props.disabled && 'pointer-events-none',
-        ]"
-        :style="{
-          padding: `${props.padding}px`,
-        }"
-        :aria-disabledd="props.disabled || !react.action"
+        :class="[
+  'flex items-center gap-[4px] justify-center w-full',
+  react.action && 'cursor-pointer hover:bg-bright',
+  props.disabled && 'pointer-events-none'
+]"
+        :style="{
+  padding: `${computedPadding}px`
+}"
+        :aria-disabled="props.disabled || !react.action"
         @click="react.action"
       >
         <Icon
           :name="react.reacted ? react.iconReacted : react.icon"
-          :size="props.size"
+          :size="props.iconSize"
         />
         <div :class="[react.reacted && 'text-primary']">
-          {{ react.count }}
+          {{ $format.number(react.count) }}
         </div>
       </div>
     </div>
     <Divider v-if="!props.disabledDividerBottom" :height="0" />
+    <ModalShare v-model="isOpenModalShare" />
   </div>
-  <ModalShare v-model="isOpenModalShare" /> -->
 </template>
 
 <script setup>
-
+import { computed, reactive, ref, watch } from "vue";
+import { useNuxtApp } from "nuxt/app";
+const { $format } = useNuxtApp();
+const isOpenModalShare = ref(false);
+const props = defineProps({
+  itemCount: { type: Object, required: false, default: () => ({
+    liked: 0,
+    bookmarked: 0,
+    viewed: 0,
+    commented: 0,
+    shared: 0
+  }) },
+  itemActive: { type: Object, required: false, default: () => ({
+    liked: false,
+    bookmarked: false
+  }) },
+  padding: { type: [String, Number], required: false, default: 16 },
+  disabledPadding: { type: Boolean, required: false, default: false },
+  disabledDividerTop: { type: Boolean, required: false, default: false },
+  disabledDividerBottom: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  iconSize: { type: [Number, String], required: false, default: 20 }
+});
+const emit = defineEmits(["update:liked", "update:bookmarked", "share"]);
+const computedPadding = computed(
+  () => props.disabledPadding ? 0 : props.padding
+);
+const counts = reactive({ ...props.itemCount });
+const reaction = reactive({ ...props.itemActive });
+watch(
+  () => props.itemCount,
+  (newVal) => {
+    Object.assign(counts, newVal);
+  },
+  { immediate: true, deep: true }
+);
+watch(
+  () => props.itemActive,
+  (newVal) => {
+    Object.assign(reaction, newVal);
+  },
+  { immediate: true, deep: true }
+);
+const listReaction = computed(() => {
+  const keys = Object.keys(props.itemCount || {});
+  const showAll = keys.length === 0;
+  return reactions.filter((re) => showAll || keys.includes(re.name)).map((re) => {
+    return {
+      ...re,
+      count: counts[re.name] ?? 0,
+      reacted: reaction[re.name] ?? false
+    };
+  });
+});
+const reactions = [
+  {
+    name: "liked",
+    icon: "pukaad:thumbs-up-regular",
+    iconReacted: "pukaad:thumbs-up-solid",
+    action: toggleLike
+  },
+  {
+    name: "bookmarked",
+    icon: "lucide:bookmark",
+    iconReacted: "pukaad:bookmark-solid",
+    action: toggleBookmark
+  },
+  {
+    name: "viewed",
+    icon: "lucide:eye"
+  },
+  {
+    name: "commented",
+    icon: "lucide:message-circle-more"
+  },
+  {
+    name: "shared",
+    icon: "uil:share",
+    action: toggleShared
+  }
+];
+function toggleLike() {
+  reaction.liked = !reaction.liked;
+  counts.liked += reaction.liked ? 1 : -1;
+  emit("update:liked", reaction.liked);
+}
+function toggleBookmark() {
+  reaction.bookmarked = !reaction.bookmarked;
+  counts.bookmarked += reaction.bookmarked ? 1 : -1;
+  emit("update:bookmarked", reaction.bookmarked);
+}
+function toggleShared() {
+  isOpenModalShare.value = !isOpenModalShare.value;
+  emit("share");
+}
 </script>

package/dist/runtime/components/card/card-reaction.vue.d.ts

@@ -1,3 +1,41 @@
-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 Count {
+    liked?: number;
+    bookmarked?: number;
+    viewed?: number;
+    commented?: number;
+    shared?: number;
+}
+interface Reacted {
+    liked?: boolean;
+    bookmarked?: boolean;
+}
+type __VLS_Props = {
+    itemCount?: Count;
+    itemActive?: Reacted;
+    padding?: string | number;
+    disabledPadding?: boolean;
+    disabledDividerTop?: boolean;
+    disabledDividerBottom?: boolean;
+    disabled?: boolean;
+    iconSize?: number | string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:liked": (value: boolean) => any;
+    "update:bookmarked": (value: boolean) => any;
+    share: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:liked"?: ((value: boolean) => any) | undefined;
+    "onUpdate:bookmarked"?: ((value: boolean) => any) | undefined;
+    onShare?: (() => any) | undefined;
+}>, {
+    disabled: boolean;
+    disabledPadding: boolean;
+    itemCount: Count;
+    itemActive: Reacted;
+    padding: string | number;
+    disabledDividerTop: boolean;
+    disabledDividerBottom: boolean;
+    iconSize: number | string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/card/card-user-blog.d.vue.ts

@@ -1,18 +1,37 @@
-import type { CardUserBlogProps } from "@/types/components/card/card-user-blog";
+interface User {
+    id: string;
+    name: string;
+    avatar: string;
+    path_name: string;
+    verified?: boolean;
+    view_count: number;
+}
+interface Content {
+    create_at: string;
+    title: string;
+    description: string;
+    image?: string;
+    likes_count: number;
+    comments_count: number;
+    shares_count: number;
+    liked?: boolean;
+}
+interface CardUserBlogProps {
+    id: string;
+    ispinned?: boolean;
+    user: User;
+    content: Content;
+}
 type __VLS_Props = {
     item: CardUserBlogProps;
-    isProfile?: boolean;
+    isMyProfile?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "blog-pin": () => any;
-    "blog-unpin": () => any;
     "blog-edit": (item: CardUserBlogProps) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onBlog-pin"?: (() => any) | undefined;
-    "onBlog-unpin"?: (() => any) | undefined;
     "onBlog-edit"?: ((item: CardUserBlogProps) => any) | undefined;
 }>, {
-    isProfile: boolean;
+    isMyProfile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/card/card-user-blog.vue

@@ -1,43 +1,42 @@
 <template>
   <div>
     <div
-      class="py-[16px] flex flex-col gap-[16px] w-[668px] border-mercury border-b-[1px]"
+      class="flex flex-col gap-[16px] w-[668px] border-mercury border-b-[1px]"
     >
       <div class="flex gap-[16px] items-center w-full">
         <div class="flex gap-[8px] items-center w-full">
-          <!-- <Avatar :src="props.item.user.avatar" :size="40" class="cursor-pointer" @click="onProfileClick" /> -->
+          <Avatar
+            :src="props.item.user.avatar"
+            :size="40"
+            class="cursor-pointer"
+            @click="onProfileClick"
+          />
           <div class="flex flex-col gap-[4px]">
-            <div class="flex gap-[4px] items-center">
-              <div
+            <div>
+              <span
                 class="font-body-large cursor-pointer"
                 @click="onProfileClick"
-              >
-                {{ props.item.user.name }}
-              </div>
-              <Icon
+                >{{ props.item.user.name }}</span
+              ><Icon
                 v-if="props.item.user.verified"
                 name="pukaad:verify"
                 :size="16"
+                class="inline-block align-middle ml-[8px]"
               />
             </div>
             <div class="text-gray font-body-small flex gap-[4px] items-center">
               <div>{{ props.item.content.create_at }}</div>
               <div>•</div>
-              <div>{{ props.item.content.view_count }}</div>
+              <div>{{ $format.number(props.item.user.view_count) }} วิว</div>
             </div>
           </div>
         </div>
-        <Button
-          v-if="isPinned"
-          prepend-icon="lucide:pin"
-          variant="text"
-          :icon-size="20"
-          disabled-padding
-          color="black"
-        />
+
+        <Icon v-if="isPinned" name="lucide:pin" :size="20" />
+
         <PickerOptionMenuUser
           :state="
-  props.isProfile ? isPinned ? 'my-blog-pined' : 'my-blog' : 'report-announce'
+  props.isMyProfile ? isPinned ? 'my-blog-pined' : 'my-blog' : 'report-announce'
 "
           disabled-padding
           @blog-unpin="onBlogUnpin"
@@ -55,11 +54,13 @@
       <div class="font-title-medium-prominent">
         {{ props.item.content.title }}
       </div>
-      <div class="text-gray font-body-large">
+      <div
+        v-if="!props.item.content.image"
+        class="text-gray font-body-large line-clamp-4"
+      >
         {{ props.item.content.description }}
       </div>
       <CardReaction
-        padding="0"
         disabled-divider-top
         disabled-divider-bottom
         :item-count="{
@@ -67,7 +68,7 @@
   commented: props.item.content.comments_count,
   shared: props.item.content.shares_count
 }"
-        :itemReacted="{
+        :itemActive="{
   liked: props.item.content.liked
 }"
       />
@@ -76,15 +77,14 @@
 </template>
 
 <script setup>
-import Image from "../image/image.vue";
 import { useRouter } from "vue-router";
 import { ref, watch } from "vue";
 const props = defineProps({
   item: { type: Object, required: true },
-  isProfile: { type: Boolean, required: false, default: false }
+  isMyProfile: { type: Boolean, required: false, default: false }
 });
 const router = useRouter();
-const emit = defineEmits(["blog-pin", "blog-unpin", "blog-edit"]);
+const emit = defineEmits(["blog-edit"]);
 const isPinned = ref(props.item.ispinned);
 watch(
   () => props.item.ispinned,
@@ -97,11 +97,9 @@ const onProfileClick = () => {
 };
 const onBlogPin = () => {
   isPinned.value = true;
-  emit("blog-pin");
 };
 const onBlogUnpin = () => {
   isPinned.value = false;
-  emit("blog-unpin");
 };
 const onBlogEdit = () => {
   emit("blog-edit", props.item);

package/dist/runtime/components/card/card-user-blog.vue.d.ts

@@ -1,18 +1,37 @@
-import type { CardUserBlogProps } from "@/types/components/card/card-user-blog";
+interface User {
+    id: string;
+    name: string;
+    avatar: string;
+    path_name: string;
+    verified?: boolean;
+    view_count: number;
+}
+interface Content {
+    create_at: string;
+    title: string;
+    description: string;
+    image?: string;
+    likes_count: number;
+    comments_count: number;
+    shares_count: number;
+    liked?: boolean;
+}
+interface CardUserBlogProps {
+    id: string;
+    ispinned?: boolean;
+    user: User;
+    content: Content;
+}
 type __VLS_Props = {
     item: CardUserBlogProps;
-    isProfile?: boolean;
+    isMyProfile?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "blog-pin": () => any;
-    "blog-unpin": () => any;
     "blog-edit": (item: CardUserBlogProps) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onBlog-pin"?: (() => any) | undefined;
-    "onBlog-unpin"?: (() => any) | undefined;
     "onBlog-edit"?: ((item: CardUserBlogProps) => any) | undefined;
 }>, {
-    isProfile: boolean;
+    isMyProfile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -36,9 +36,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     description: string;
+    limit: number;
     options: AutocompleteOption[] | string[] | number[];
     placeholder: string;
-    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -36,9 +36,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     description: string;
+    limit: number;
     options: AutocompleteOption[] | string[] | number[];
     placeholder: string;
-    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-date-picker.vue

@@ -17,7 +17,7 @@
       </ShadFormLabel>
 
       <ShadFormControl>
-        <Popover>
+        <Popover v-model:open="isPopoverOpen">
           <PopoverTrigger as-child>
             <Button
               variant="outline"
@@ -151,6 +151,7 @@ const minCalendarValue = computed(() => {
 });
 const modelValue = defineModel({ type: null, ...{ default: void 0 } });
 const fieldRef = ref();
+const isPopoverOpen = ref(false);
 const hours = Array.from({ length: 24 }, (_, i) => i);
 const minutes = Array.from({ length: 12 }, (_, i) => i * 5);
 const selectedHour = computed(() => modelValue.value?.getHours() ?? -1);
@@ -172,6 +173,9 @@ const calendarValue = computed({
         newDate.setMinutes(modelValue.value.getMinutes());
       }
       modelValue.value = newDate;
+      if (!props.showTime) {
+        isPopoverOpen.value = false;
+      }
     } else {
       modelValue.value = void 0;
     }
@@ -184,6 +188,7 @@ function handleTimeChange(type, value) {
     newDate.setHours(value);
   } else if (type === "minute") {
     newDate.setMinutes(value);
+    isPopoverOpen.value = false;
   }
   modelValue.value = newDate;
 }

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

@@ -18,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {
     name: string;
-    placeholder: string;
     limit: number;
+    placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -58,23 +58,12 @@
                   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'
-]"
+                  class="flex w-full justify-between"
                   @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 class="font-body-small text-gray">
+                    {{ $format.number(tag.postCount) }} โพสต์
                   </div>
                 </ShadCommandItem>
               </ShadCommandGroup>
@@ -97,23 +86,12 @@
                   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'
-]"
+                  class="flex w-full justify-between"
                   @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 class="font-body-small text-gray">
+                    {{ $format.number(tag.postCount) }} โพสต์
                   </div>
                 </ShadCommandItem>
               </ShadCommandGroup>
@@ -134,7 +112,7 @@
 </template>
 
 <script setup>
-import { ref, computed, nextTick } from "vue";
+import { ref, computed, onMounted } from "vue";
 const props = defineProps({
   name: { type: String, required: false, default: "input-tag" },
   rules: { type: [Object, String, Function], required: false },
@@ -151,28 +129,59 @@ 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 isLoading = ref(false);
+const allTags = ref([]);
+const popularTags = ref([]);
+const latestTags = ref([]);
+const mockFetchTags = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        popular: [
+          { label: "\u0E1A\u0E38\u0E23\u0E35\u0E23\u0E31\u0E21\u0E22\u0E4C", value: "buriram", postCount: 4500 },
+          { label: "\u0E01\u0E23\u0E38\u0E07\u0E40\u0E17\u0E1E", value: "bangkok", postCount: 120300 },
+          {
+            label: "\u0E40\u0E0A\u0E35\u0E22\u0E07\u0E43\u0E2B\u0E21\u0E48",
+            value: "chiangmai",
+            postCount: 85200
+          },
+          { label: "\u0E20\u0E39\u0E40\u0E01\u0E47\u0E15", value: "phuket", postCount: 72100 },
+          { label: "\u0E1E\u0E31\u0E17\u0E22\u0E32", value: "pattaya", postCount: 55800 },
+          { label: "\u0E2B\u0E31\u0E27\u0E2B\u0E34\u0E19", value: "huahin", postCount: 34600 },
+          { label: "\u0E02\u0E2D\u0E19\u0E41\u0E01\u0E48\u0E19", value: "khonkaen", postCount: 28400 },
+          { label: "\u0E19\u0E04\u0E23\u0E23\u0E32\u0E0A\u0E2A\u0E35\u0E21\u0E32", value: "korat", postCount: 22900 }
+        ],
+        latest: [
+          {
+            label: "\u0E2A\u0E38\u0E02\u0E38\u0E21\u0E27\u0E34\u0E17",
+            value: "sukhumvit",
+            postCount: 12300
+          },
+          { label: "\u0E2A\u0E22\u0E32\u0E21", value: "siam", postCount: 8700 },
+          { label: "\u0E2D\u0E32\u0E23\u0E35\u0E22\u0E4C", value: "ari", postCount: 6200 },
+          { label: "\u0E17\u0E2D\u0E07\u0E2B\u0E25\u0E48\u0E2D", value: "thonglor", postCount: 15400 },
+          { label: "\u0E40\u0E2D\u0E01\u0E21\u0E31\u0E22", value: "ekkamai", postCount: 9800 },
+          { label: "\u0E2D\u0E42\u0E28\u0E01", value: "asoke", postCount: 11200 },
+          { label: "\u0E2A\u0E35\u0E25\u0E21", value: "silom", postCount: 18600 },
+          { label: "\u0E23\u0E31\u0E0A\u0E14\u0E32", value: "ratchada", postCount: 7500 }
+        ]
+      });
+    }, 500);
+  });
+};
+onMounted(async () => {
+  isLoading.value = true;
+  try {
+    const response = await mockFetchTags();
+    popularTags.value = response.popular;
+    latestTags.value = response.latest;
+    allTags.value = [...response.popular, ...response.latest];
+  } catch (error) {
+    console.error("Failed to fetch tags:", error);
+  } finally {
+    isLoading.value = false;
+  }
+});
 const selectedTags = computed(() => {
   return modelValue.value.map((value) => allTags.value.find((tag) => tag.value === value)).filter((tag) => tag !== void 0);
 });
@@ -199,28 +208,25 @@ const handleInteractOutside = (event) => {
   }
 };
 const filteredPopularTags = computed(() => {
-  if (!searchQuery.value) return popularTags.value;
+  const availableTags = popularTags.value.filter(
+    (tag) => !modelValue.value.includes(tag.value)
+  );
+  if (!searchQuery.value) return availableTags;
   const query = searchQuery.value.toLowerCase();
-  return popularTags.value.filter(
+  return availableTags.filter(
     (tag) => tag.label.toLowerCase().includes(query) || tag.value.toLowerCase().includes(query)
   );
 });
 const filteredLatestTags = computed(() => {
-  if (!searchQuery.value) return latestTags.value;
+  const availableTags = latestTags.value.filter(
+    (tag) => !modelValue.value.includes(tag.value)
+  );
+  if (!searchQuery.value) return availableTags;
   const query = searchQuery.value.toLowerCase();
-  return latestTags.value.filter(
+  return availableTags.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);
@@ -229,6 +235,7 @@ const onSelectTag = (tag) => {
       return;
     }
     modelValue.value = [...modelValue.value, tag.value];
+    popoverOpen.value = false;
   }
   searchQuery.value = "";
 };

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

@@ -18,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {
     name: string;
-    placeholder: string;
     limit: number;
+    placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.d.vue.ts

@@ -1,22 +1,31 @@
-import type { ModalPasswordProps } from "@/types/components/modal/modal-password";
-type __VLS_Props = ModalPasswordProps;
+interface Props {
+    title?: string;
+    confirmText?: string;
+    loginToken?: string;
+    description?: string;
+    disabledForgotPassword?: boolean;
+}
+type __VLS_Props = Props;
 type __VLS_ModelProps = {
     modelValue?: boolean;
 };
 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;
-} & {
-    complete: (is_verify: boolean) => any;
+    complete: (data: {
+        secId: string;
+    }) => any;
     close: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onComplete?: ((is_verify: boolean) => any) | undefined;
+    onComplete?: ((data: {
+        secId: string;
+    }) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
     title: string;
-    confirmedText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.vue

@@ -1,19 +1,23 @@
 <template>
   <Modal
     :title="props.title"
-    :loading="loadingModal"
-    @close="emit('close')"
-    @submit="onVerifyPassword"
+    :loading="loading"
     v-model="isOpen"
+    @close="emit('close')"
+    @submit="handleSubmit"
   >
     <div v-if="props.description" class="font-body-large">
       {{ props.description }}
     </div>
     <InputPassword
+      ref="inputRef"
+      disabled-forgot-password
+      required
       label="รหัสผ่าน"
       placeholder="กรอกรหัสผ่าน"
       v-model="password"
     />
+
     <template #footer="{ meta }">
       <Button
         type="submit"
@@ -21,52 +25,62 @@
         class="w-full"
         :disabled="!meta.valid"
       >
-        {{ props.confirmedText }}
+        {{ props.confirmText }}
       </Button>
     </template>
   </Modal>
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from "vue";
-import { useRuntimeConfig } from "nuxt/app";
-const { BASE_URL_API } = useRuntimeConfig().public;
-const emit = defineEmits(["close", "complete"]);
+import { ref, computed, watch } from "vue";
+import { useNuxtApp, useRuntimeConfig } from "nuxt/app";
 const props = defineProps({
-  confirmedText: { type: String, required: false, default: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19" },
   title: { type: String, required: false, default: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E23\u0E2B\u0E31\u0E2A\u0E1C\u0E48\u0E32\u0E19" },
-  disabledForgotPassword: { type: Boolean, required: false, default: false },
-  description: { type: String, required: false }
+  confirmText: { type: String, required: false, default: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19" },
+  loginToken: { type: String, required: false },
+  description: { type: String, required: false },
+  disabledForgotPassword: { type: Boolean, required: false, default: false }
 });
-const isOpen = defineModel({ type: Boolean, ...{
-  default: false
-} });
-const inputPasswordRef = ref();
+const emit = defineEmits(["complete", "close"]);
+const { $toast } = useNuxtApp();
+const config = useRuntimeConfig();
+const isOpen = defineModel({ type: Boolean, ...{ default: false } });
+const apiPath = computed(
+  () => config.public.APP_TYPE === "office" ? "/office/auth/password/verify" : "/user/auth/password/verify"
+);
+const loading = ref(false);
 const password = ref("");
-const loadingModal = ref(false);
-const onVerifyPassword = async () => {
-  loadingModal.value = true;
+const inputRef = ref();
+watch(isOpen, (open) => {
+  if (!open) {
+    password.value = "";
+  }
+});
+const handleSubmit = async () => {
+  if (!props.loginToken) {
+    $toast?.error?.("\u0E44\u0E21\u0E48\u0E1E\u0E1A login token");
+    return;
+  }
+  loading.value = true;
   try {
-    const { status } = await $fetch(
-      `${BASE_URL_API}/me/password-verify`,
-      {
-        credentials: "include",
-        method: "POST",
-        body: {
-          password: password.value
-        }
+    const res = await $fetch(`${config.public.BASE_URL_API}${apiPath.value}`, {
+      method: "POST",
+      credentials: "include",
+      body: {
+        login_token: props.loginToken,
+        password: password.value
       }
-    );
-    if (status !== "success") throw "\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14\u0E1A\u0E32\u0E07\u0E2D\u0E22\u0E48\u0E32\u0E07";
-    emit("complete", false);
-    isOpen.value = false;
-  } catch (error) {
-    inputPasswordRef.value.setErrors("\u0E23\u0E2B\u0E31\u0E2A\u0E1C\u0E48\u0E32\u0E19\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07");
+    });
+    if (res.code === 200 && res.data) {
+      emit("complete", { secId: res.data.sec_id });
+      isOpen.value = false;
+    } else {
+      inputRef.value?.setErrors?.(res.message || "\u0E23\u0E2B\u0E31\u0E2A\u0E1C\u0E48\u0E32\u0E19\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07");
+    }
+  } catch (e) {
+    inputRef.value?.setErrors?.(e?.data?.message || "\u0E23\u0E2B\u0E31\u0E2A\u0E1C\u0E48\u0E32\u0E19\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07");
   } finally {
-    loadingModal.value = false;
+    loading.value = false;
   }
 };
-watch(isOpen, (value) => {
-  password.value = "";
-});
 </script>

package/dist/runtime/components/modal/modal-password-confirmed.vue.d.ts

@@ -1,22 +1,31 @@
-import type { ModalPasswordProps } from "@/types/components/modal/modal-password";
-type __VLS_Props = ModalPasswordProps;
+interface Props {
+    title?: string;
+    confirmText?: string;
+    loginToken?: string;
+    description?: string;
+    disabledForgotPassword?: boolean;
+}
+type __VLS_Props = Props;
 type __VLS_ModelProps = {
     modelValue?: boolean;
 };
 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;
-} & {
-    complete: (is_verify: boolean) => any;
+    complete: (data: {
+        secId: string;
+    }) => any;
     close: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onComplete?: ((is_verify: boolean) => any) | undefined;
+    onComplete?: ((data: {
+        secId: string;
+    }) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
     title: string;
-    confirmedText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-profile-edit.vue

@@ -8,28 +8,15 @@
   >
     <template #header>
       <div v-if="step !== 'menu'">
-        <div class="flex justify-between items-center w-full">
-          <Button
-            variant="text"
-            color="black"
-            disabled-padding
-            icon-size="24"
-            prepend-icon="lucide:chevron-left"
-            @click="step = 'menu'"
-          />
+        <div class="flex gap-[8px] items-center w-full">
+          <Button variant="text" @click="step = 'menu'">
+            <Icon name="lucide:chevron-left" :size="24" />
+          </Button>
           <div class="font-title-medium-prominent">
             <div v-if="step === 'profile-name'">แก้ไขชื่อโปรไฟล์</div>
             <div v-if="step === 'premium-id'">พรีเมียม ID</div>
             <div v-if="step === 'category'">หมวดหมู่</div>
           </div>
-          <Button
-            variant="text"
-            color="black"
-            disabled-padding
-            icon-size="24"
-            prepend-icon="lucide:x"
-            @click="onClose"
-          />
         </div>
       </div>
     </template>
@@ -141,12 +128,13 @@
           <InputTextField
             v-model="namePremiumID"
             label="ซื้อพรีเมียม ID"
-            full-width
             show-counter
             :limit="18"
             prepend-icon="lucide:at-sign"
           />
-          <Button color="primary" :disabled="!namePremiumID"
+          <Button
+            color="primary"
+            :disabled="!namePremiumID || namePremiumID.length > 18"
             >ซื้อพรีเมียม ID</Button
           >
         </div>
@@ -157,11 +145,10 @@
           <div class="font-body-large">เลือกหมวดหมู่ที่สอดคล้องกับโปรไฟล์</div>
           <InputAutocomplete
             v-model="profileCategory"
-            :items="profileCategoryItems"
+            :options="profileCategoryItems"
             name="profileCategory"
             placeholder="ค้นหาหรือเลือกหมวดหมู่ที่เกี่ยวข้อง"
             label="หมวดหมู่"
-            full-width
           />
           <Button color="primary" :disabled="!profileCategory">บันทึก</Button>
         </div>

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu-user.d.vue.ts

@@ -1,9 +1,9 @@
 import type { PickerOptionMenuUserProps } from "@/types/components/picker/picker-option-menu/picker-option-menu-user";
 declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "blog-pin": () => any;
-    "blog-unpin": () => any;
     "blog-edit": () => any;
     "report-announce": () => any;
+    "blog-unpin": () => any;
+    "blog-pin": () => any;
     "profile-edit": () => any;
     "profile-share": () => any;
     "profile-follower-delete": () => any;
@@ -18,10 +18,10 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserPr
     "review-delete": () => any;
     archive: () => any;
 }, string, import("vue").PublicProps, Readonly<PickerOptionMenuUserProps> & Readonly<{
-    "onBlog-pin"?: (() => any) | undefined;
-    "onBlog-unpin"?: (() => any) | undefined;
     "onBlog-edit"?: (() => any) | undefined;
     "onReport-announce"?: (() => any) | undefined;
+    "onBlog-unpin"?: (() => any) | undefined;
+    "onBlog-pin"?: (() => any) | undefined;
     "onProfile-edit"?: (() => any) | undefined;
     "onProfile-share"?: (() => any) | undefined;
     "onProfile-follower-delete"?: (() => any) | undefined;

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu-user.vue.d.ts

@@ -1,9 +1,9 @@
 import type { PickerOptionMenuUserProps } from "@/types/components/picker/picker-option-menu/picker-option-menu-user";
 declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "blog-pin": () => any;
-    "blog-unpin": () => any;
     "blog-edit": () => any;
     "report-announce": () => any;
+    "blog-unpin": () => any;
+    "blog-pin": () => any;
     "profile-edit": () => any;
     "profile-share": () => any;
     "profile-follower-delete": () => any;
@@ -18,10 +18,10 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserPr
     "review-delete": () => any;
     archive: () => any;
 }, string, import("vue").PublicProps, Readonly<PickerOptionMenuUserProps> & Readonly<{
-    "onBlog-pin"?: (() => any) | undefined;
-    "onBlog-unpin"?: (() => any) | undefined;
     "onBlog-edit"?: (() => any) | undefined;
     "onReport-announce"?: (() => any) | undefined;
+    "onBlog-unpin"?: (() => any) | undefined;
+    "onBlog-pin"?: (() => any) | undefined;
     "onProfile-edit"?: (() => any) | undefined;
     "onProfile-share"?: (() => any) | undefined;
     "onProfile-follower-delete"?: (() => any) | undefined;

package/dist/runtime/plugins/format.d.ts

@@ -0,0 +1,9 @@
+export declare class Format {
+    number(num: number): string;
+}
+declare const _default: import("nuxt/app").Plugin<{
+    format: Format;
+}> & import("nuxt/app").ObjectPlugin<{
+    format: Format;
+}>;
+export default _default;

package/dist/runtime/plugins/format.js

@@ -0,0 +1,29 @@
+import { defineNuxtPlugin } from "nuxt/app";
+export class Format {
+  number(num) {
+    if (num >= 1e6) {
+      const value = Math.floor(num / 1e6 * 10) / 10;
+      return value.toString().replace(/\.0$/, "") + " \u0E25\u0E49\u0E32\u0E19";
+    }
+    if (num >= 1e5) {
+      const value = Math.floor(num / 1e5 * 10) / 10;
+      return value.toString().replace(/\.0$/, "") + " \u0E41\u0E2A\u0E19";
+    }
+    if (num >= 1e4) {
+      const value = Math.floor(num / 1e4 * 10) / 10;
+      return value.toString().replace(/\.0$/, "") + " \u0E2B\u0E21\u0E37\u0E48\u0E19";
+    }
+    if (num >= 1e3) {
+      const value = Math.floor(num / 1e3 * 10) / 10;
+      return value.toString().replace(/\.0$/, "") + " \u0E1E\u0E31\u0E19";
+    }
+    return num.toString();
+  }
+}
+export default defineNuxtPlugin(() => {
+  return {
+    provide: {
+      format: new Format()
+    }
+  };
+});

package/package.json

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