pukaad-ui-lib 1.420.0 → 1.422.0

package/dist/module.json

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

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

@@ -20,6 +20,7 @@ type __VLS_Props = {
     iconSize?: number | string;
     id?: string;
     state?: string;
+    loginPath?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
@@ -32,6 +33,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     disabledDividerBottom: boolean;
     iconSize: number | string;
     state: string;
+    loginPath: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -32,8 +32,14 @@
 
 <script setup>
 import { computed, reactive, ref, watch } from "vue";
+import { navigateTo, useCookie, useRoute, useRuntimeConfig } from "nuxt/app";
 import { useApi } from "../../composables/useApi";
 const api = useApi();
+const route = useRoute();
+const config = useRuntimeConfig();
+const secId = useCookie(
+  config.public.APP_TYPE === "OFFICE" ? "OFFICE_SEC_ID" : "SEC_ID"
+);
 const isOpenModalShare = ref(false);
 const props = defineProps({
   itemCount: { type: Object, required: false, default: () => ({
@@ -54,7 +60,8 @@ const props = defineProps({
   disabled: { type: Boolean, required: false, default: false },
   iconSize: { type: [Number, String], required: false, default: 20 },
   id: { type: String, required: false, default: "" },
-  state: { type: String, required: false, default: "" }
+  state: { type: String, required: false, default: "" },
+  loginPath: { type: String, required: false, default: "/auth/login" }
 });
 const computedPadding = computed(
   () => props.disabledPadding ? 0 : props.padding
@@ -114,37 +121,46 @@ const reactions = [
     action: toggleShared
   }
 ];
+function redirectToLogin() {
+  return navigateTo({
+    path: props.loginPath,
+    query: { redirect: route.fullPath }
+  });
+}
+function ensureLoggedIn() {
+  if (secId.value) return true;
+  redirectToLogin();
+  return false;
+}
+function isUnauthorized(error) {
+  const e = error;
+  return (e?.status ?? e?.statusCode) === 401;
+}
 async function toggleLike() {
+  const likeUrl = props.state === "blog" && props.id ? `/blogs/${props.id}/like` : props.state === "content" && props.id ? `/contents/${props.id}/like` : "";
+  if (likeUrl && !ensureLoggedIn()) return;
   const previousLiked = reaction.liked;
   reaction.liked = !previousLiked;
   counts.liked += reaction.liked ? 1 : -1;
-  if (props.state === "blog" && props.id) {
-    try {
-      await api(`/blogs/${props.id}/like`, {
-        method: reaction.liked ? "POST" : "DELETE"
-      });
-    } catch (error) {
-      console.error(error);
-      reaction.liked = previousLiked;
-      counts.liked += previousLiked ? 1 : -1;
-    }
-  } else if (props.state === "content" && props.id) {
-    try {
-      await api(`/contents/${props.id}/like`, {
-        method: reaction.liked ? "POST" : "DELETE"
-      });
-    } catch (error) {
-      console.error(error);
-      reaction.liked = previousLiked;
-      counts.liked += previousLiked ? 1 : -1;
-    }
+  if (!likeUrl) return;
+  try {
+    await api(likeUrl, {
+      method: reaction.liked ? "POST" : "DELETE"
+    });
+  } catch (error) {
+    console.error(error);
+    reaction.liked = previousLiked;
+    counts.liked += previousLiked ? 1 : -1;
+    if (isUnauthorized(error)) redirectToLogin();
   }
 }
 async function toggleBookmark() {
+  const canCallApi = props.state === "content" && !!props.id;
+  if (canCallApi && !ensureLoggedIn()) return;
   const previousBookmarked = reaction.bookmarked;
   reaction.bookmarked = !previousBookmarked;
   counts.bookmarked += reaction.bookmarked ? 1 : -1;
-  if (props.state === "content" && props.id) {
+  if (canCallApi) {
     try {
       await api(`/contents/${props.id}/bookmark`, {
         method: reaction.bookmarked ? "POST" : "DELETE"
@@ -153,6 +169,7 @@ async function toggleBookmark() {
       console.error(error);
       reaction.bookmarked = previousBookmarked;
       counts.bookmarked += previousBookmarked ? 1 : -1;
+      if (isUnauthorized(error)) redirectToLogin();
     }
   }
 }

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

@@ -20,6 +20,7 @@ type __VLS_Props = {
     iconSize?: number | string;
     id?: string;
     state?: string;
+    loginPath?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
@@ -32,6 +33,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     disabledDividerBottom: boolean;
     iconSize: number | string;
     state: string;
+    loginPath: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/display/display-video.d.vue.ts

@@ -81,16 +81,16 @@ declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
     toggle: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (payload: DisplayVideoAction) => any;
-    fullscreen: (payload: DisplayVideoAction) => any;
-    "play-click": (payload: DisplayVideoAction) => any;
     prev: (payload: DisplayVideoAction) => any;
     next: (payload: DisplayVideoAction) => any;
+    fullscreen: (payload: DisplayVideoAction) => any;
+    "play-click": (payload: DisplayVideoAction) => any;
 }, string, import("vue").PublicProps, Readonly<DisplayVideoProps> & Readonly<{
     onClose?: ((payload: DisplayVideoAction) => any) | undefined;
-    onFullscreen?: ((payload: DisplayVideoAction) => any) | undefined;
-    "onPlay-click"?: ((payload: DisplayVideoAction) => any) | undefined;
     onPrev?: ((payload: DisplayVideoAction) => any) | undefined;
     onNext?: ((payload: DisplayVideoAction) => any) | undefined;
+    onFullscreen?: ((payload: DisplayVideoAction) => any) | undefined;
+    "onPlay-click"?: ((payload: DisplayVideoAction) => any) | undefined;
 }>, {
     src: string;
     fullHeight: boolean;

package/dist/runtime/components/display/display-video.vue.d.ts

@@ -81,16 +81,16 @@ declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
     toggle: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (payload: DisplayVideoAction) => any;
-    fullscreen: (payload: DisplayVideoAction) => any;
-    "play-click": (payload: DisplayVideoAction) => any;
     prev: (payload: DisplayVideoAction) => any;
     next: (payload: DisplayVideoAction) => any;
+    fullscreen: (payload: DisplayVideoAction) => any;
+    "play-click": (payload: DisplayVideoAction) => any;
 }, string, import("vue").PublicProps, Readonly<DisplayVideoProps> & Readonly<{
     onClose?: ((payload: DisplayVideoAction) => any) | undefined;
-    onFullscreen?: ((payload: DisplayVideoAction) => any) | undefined;
-    "onPlay-click"?: ((payload: DisplayVideoAction) => any) | undefined;
     onPrev?: ((payload: DisplayVideoAction) => any) | undefined;
     onNext?: ((payload: DisplayVideoAction) => any) | undefined;
+    onFullscreen?: ((payload: DisplayVideoAction) => any) | undefined;
+    "onPlay-click"?: ((payload: DisplayVideoAction) => any) | undefined;
 }>, {
     src: string;
     fullHeight: boolean;

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

@@ -1,10 +1,11 @@
 import type { SelectPlaceItem } from "../input/input-select-place.vue.js";
 import type { MentionItem } from "../input/input-mention.vue.js";
-interface IFileItem {
+export interface IFileItem {
     file?: File;
     url: string;
     description?: string;
     duration?: string;
+    mediaType?: "image" | "video";
 }
 interface SelectedTag {
     id: string;
@@ -24,6 +25,7 @@ export interface DrawerPostContentItem {
 }
 export interface DrawerPostContentProps {
     item?: DrawerPostContentItem;
+    state?: "personal" | "business";
 }
 type __VLS_Props = DrawerPostContentProps;
 declare const modelValue: import("vue").ModelRef<boolean | undefined, string, boolean | undefined, boolean | undefined>;
@@ -41,6 +43,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     onSaveDraft?: ((data: unknown) => any) | undefined;
 }>, {
     item: DrawerPostContentItem;
+    state: "personal" | "business";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -105,6 +105,7 @@
         <Divider height="1" />
         <InputTag
           v-model="selectedTags"
+          :profile-scope="props.state"
           label="เพิ่มแท็ก"
           placeholder="กรอกชื่อแท็ก"
         />
@@ -171,7 +172,8 @@ const props = defineProps({
     tags: [],
     mentions: [],
     places: []
-  }) }
+  }) },
+  state: { type: String, required: false, default: "personal" }
 });
 const modelValue = defineModel({ type: Boolean });
 const currentId = ref(void 0);
@@ -197,6 +199,7 @@ const hasCoverFile = computed(() => coverFiles.value.length > 0);
 const coverFileType = computed(() => {
   const first = coverFiles.value[0];
   if (!first) return null;
+  if (first.mediaType) return first.mediaType;
   return first.file?.type?.startsWith("video") ? "video" : "image";
 });
 const coverAccept = computed(() => {
@@ -319,6 +322,10 @@ const onClose = async () => {
   modelValue.value = false;
 };
 const onSaveDraft = async () => {
+  if (props.state === "business") {
+    await submitContent("DRAFT");
+    return;
+  }
   if (isSubmitting.value) return;
   isSubmitting.value = true;
   try {
@@ -331,13 +338,15 @@ const onSaveDraft = async () => {
         file: f.file,
         url: f.url,
         description: f.description,
-        duration: f.duration
+        duration: f.duration,
+        mediaType: f.mediaType
       })),
       posterFiles: posterFiles.value.map((f) => ({
         file: f.file,
         url: f.url,
         description: f.description,
-        duration: f.duration
+        duration: f.duration,
+        mediaType: f.mediaType
       })),
       description: description.value,
       tags: JSON.parse(JSON.stringify(selectedTags.value)),
@@ -373,6 +382,10 @@ const parseDurationToSeconds = (duration) => {
   if (Number.isNaN(m) || Number.isNaN(s)) return 0;
   return m * 60 + s;
 };
+const endpointMap = {
+  personal: "/personal/contents",
+  business: "/business/contents"
+};
 const submitContent = async (status) => {
   if (isSubmitting.value) return;
   if (!hasCoverText.value && !hasCoverFile.value) {
@@ -414,7 +427,8 @@ const submitContent = async (status) => {
       place_ids: selectedPlaces.value.map((p) => p.id),
       status
     };
-    const endpoint = isEditMode.value ? `/personal/contents/${currentId.value}` : "/personal/contents";
+    const baseEndpoint = endpointMap[props.state];
+    const endpoint = isEditMode.value ? `${baseEndpoint}/${currentId.value}` : baseEndpoint;
     const method = isEditMode.value ? "PATCH" : "POST";
     const res = await api(
       endpoint,
@@ -426,7 +440,8 @@ const submitContent = async (status) => {
     if (currentId.value?.startsWith("draft_")) {
       await deleteDraft(currentId.value);
     }
-    emit("success", res.data);
+    if (status === "DRAFT") emit("saveDraft", res.data);
+    else emit("success", res.data);
     modelValue.value = false;
   } catch (e) {
     const apiErr = e;

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

@@ -1,10 +1,11 @@
 import type { SelectPlaceItem } from "../input/input-select-place.vue.js";
 import type { MentionItem } from "../input/input-mention.vue.js";
-interface IFileItem {
+export interface IFileItem {
     file?: File;
     url: string;
     description?: string;
     duration?: string;
+    mediaType?: "image" | "video";
 }
 interface SelectedTag {
     id: string;
@@ -24,6 +25,7 @@ export interface DrawerPostContentItem {
 }
 export interface DrawerPostContentProps {
     item?: DrawerPostContentItem;
+    state?: "personal" | "business";
 }
 type __VLS_Props = DrawerPostContentProps;
 declare const modelValue: import("vue").ModelRef<boolean | undefined, string, boolean | undefined, boolean | undefined>;
@@ -41,6 +43,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     onSaveDraft?: ((data: unknown) => any) | undefined;
 }>, {
     item: DrawerPostContentItem;
+    state: "personal" | "business";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/image/image-cropper.d.vue.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
-    crossorigin: "" | "anonymous" | "use-credentials";
-    background: boolean;
-    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
+    crossorigin: "" | "anonymous" | "use-credentials";
+    modal: boolean;
     guides: boolean;
     highlight: boolean;
+    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/image/image-cropper.vue.d.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
-    crossorigin: "" | "anonymous" | "use-credentials";
-    background: boolean;
-    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
+    crossorigin: "" | "anonymous" | "use-credentials";
+    modal: boolean;
     guides: boolean;
     highlight: boolean;
+    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

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

@@ -50,10 +50,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     placeholder: string;
+    gap: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;
-    gap: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -50,10 +50,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     placeholder: string;
+    gap: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;
-    gap: string;
 }, {}, {}, {}, 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

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

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

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

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

@@ -59,8 +59,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     pageSize: number;
     name: string;
-    limit: number;
     labelKey: string;
+    limit: number;
     valueKey: string;
     multiple: boolean;
     placeholderSearch: string;

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

@@ -59,8 +59,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     pageSize: number;
     name: string;
-    limit: number;
     labelKey: string;
+    limit: number;
     valueKey: string;
     multiple: boolean;
     placeholderSearch: string;

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

@@ -35,8 +35,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     fullWidth: boolean;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

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

@@ -35,8 +35,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     fullWidth: boolean;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

package/dist/runtime/components/input/input-localized-name.d.vue.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     name: string;
     modelValue: LocalizedNameItem[];
     options: InputSelectItem[];
-    limit: number;
     placeholder: string;
+    limit: number;
     showCounter: boolean;
     addLabel: string;
     removable: boolean;

package/dist/runtime/components/input/input-localized-name.vue.d.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     name: string;
     modelValue: LocalizedNameItem[];
     options: InputSelectItem[];
-    limit: number;
     placeholder: string;
+    limit: number;
     showCounter: boolean;
     addLabel: string;
     removable: boolean;

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

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-personal-card-id.d.vue.ts

@@ -11,12 +11,12 @@ 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: File | null) => any;
 } & {
-    remove: () => any;
     complete: (file: File) => any;
+    remove: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: File | null) => any) | undefined;
-    onRemove?: (() => any) | undefined;
     onComplete?: ((file: File) => any) | undefined;
+    onRemove?: (() => any) | undefined;
 }>, {
     name: string;
     disabledErrorMessage: boolean;

package/dist/runtime/components/input/input-personal-card-id.vue.d.ts

@@ -11,12 +11,12 @@ 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: File | null) => any;
 } & {
-    remove: () => any;
     complete: (file: File) => any;
+    remove: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: File | null) => any) | undefined;
-    onRemove?: (() => any) | undefined;
     onComplete?: ((file: File) => any) | undefined;
+    onRemove?: (() => any) | undefined;
 }>, {
     name: string;
     disabledErrorMessage: boolean;

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

@@ -20,9 +20,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
-    limit: number;
     labelKey: string;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -20,9 +20,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
-    limit: number;
     labelKey: string;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -13,6 +13,7 @@ interface InputTagProps {
     placeholder?: string;
     state?: "user" | "admin";
     ignore?: string[];
+    profileScope?: "personal" | "business";
 }
 type __VLS_Props = InputTagProps;
 type __VLS_ModelProps = {
@@ -26,9 +27,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    limit: number;
     placeholder: string;
+    limit: number;
     ignore: string[];
+    profileScope: "personal" | "business";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -51,12 +51,15 @@
       <ShadCommand :filter="() => 1">
         <ShadCommandInput
           v-if="props.state === 'admin'"
+          v-model="searchQuery"
           placeholder="ค้นหาแท็ก"
         />
         <ShadTabs v-model="currentTab" class="w-full p-2">
           <ShadTabsList class="w-full grid grid-cols-2">
             <ShadTabsTrigger value="popular">ยอดนิยม</ShadTabsTrigger>
-            <ShadTabsTrigger value="latest">ล่าสุด</ShadTabsTrigger>
+            <ShadTabsTrigger value="recent">{{
+              isOffice ? "\u0E25\u0E48\u0E32\u0E2A\u0E38\u0E14" : "\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19\u0E25\u0E48\u0E32\u0E2A\u0E38\u0E14"
+            }}</ShadTabsTrigger>
           </ShadTabsList>
 
           <!-- Popular Tab -->
@@ -87,7 +90,9 @@
                   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 class="text-gray font-body-medium">
+                    {{ popularState.error || "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25" }}
+                  </div>
                 </div>
               </ShadCommandEmpty>
 
@@ -104,12 +109,12 @@
             </ShadCommandList>
           </ShadTabsContent>
 
-          <!-- Latest Tab -->
-          <ShadTabsContent value="latest" class="m-0">
+          <!-- Recent / Office latest tab -->
+          <ShadTabsContent value="recent" class="m-0">
             <ShadCommandList class="max-h-64 overflow-y-auto">
               <ShadCommandGroup>
                 <ShadCommandItem
-                  v-for="tag in filteredLatestTags"
+                  v-for="tag in filteredRecentTags"
                   :key="tag.value"
                   :value="tag.value"
                   class="flex w-full justify-between"
@@ -125,19 +130,23 @@
               <!-- Initital Loading / Empty State -->
               <ShadCommandEmpty
                 :force-show="
-  filteredLatestTags.length === 0 && !latestState.loading
+  filteredRecentTags.length === 0 && !recentState.loading
 "
               >
                 <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 class="text-gray font-body-medium">
+                    {{
+                      recentState.error || (!isOffice && !searchQuery && recentState.data.length === 0 ? "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E41\u0E17\u0E47\u0E01\u0E17\u0E35\u0E48\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19\u0E25\u0E48\u0E32\u0E2A\u0E38\u0E14" : "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25")
+                    }}
+                  </div>
                 </div>
               </ShadCommandEmpty>
 
               <!-- Loading Indicator -->
-              <div v-if="latestState.loading" class="flex justify-center p-2">
+              <div v-if="recentState.loading" class="flex justify-center p-2">
                 <Icon
                   name="lucide:loader-2"
                   class="animate-spin h-5 w-5 text-primary"
@@ -145,7 +154,7 @@
               </div>
 
               <!-- Sentinel for Infinite Scroll -->
-              <div ref="latestSentinel" class="h-1" />
+              <div ref="recentSentinel" class="h-1" />
             </ShadCommandList>
           </ShadTabsContent>
         </ShadTabs>
@@ -155,13 +164,21 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, reactive, watch } from "vue";
-import { useNuxtApp } from "nuxt/app";
+import { ref, computed, reactive, watch } from "vue";
+import { useNuxtApp, useRuntimeConfig, useCookie } from "nuxt/app";
 import { useApi } from "../../composables/useApi";
 import { useIntersectionObserver } from "@vueuse/core";
 const { $convert } = useNuxtApp();
 const convertNumber = (val) => $convert?.convertNumber(val) || val;
 const api = useApi();
+const config = useRuntimeConfig();
+const isOffice = computed(
+  () => props.state === "admin" || config.public.APP_TYPE === "OFFICE"
+);
+const businessProfileId = useCookie(
+  "PUKAAD_BUSINESS_PROFILE_ID"
+);
+const sessionId = useCookie("SEC_ID");
 const props = defineProps({
   name: { type: String, required: false, default: "input-tag" },
   rules: { type: [Object, String, Function], required: false },
@@ -171,7 +188,8 @@ const props = defineProps({
   limit: { type: Number, required: false, default: 0 },
   placeholder: { type: String, required: false, default: "\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E41\u0E17\u0E47\u0E01..." },
   state: { type: String, required: false, default: "user" },
-  ignore: { type: Array, required: false, default: () => [] }
+  ignore: { type: Array, required: false, default: () => [] },
+  profileScope: { type: String, required: false, default: "personal" }
 });
 const modelValue = defineModel({ type: Array, ...{
   default: () => []
@@ -185,13 +203,15 @@ const popularState = reactive({
   data: [],
   page: 1,
   hasMore: true,
-  loading: false
+  loading: false,
+  error: ""
 });
-const latestState = reactive({
+const recentState = reactive({
   data: [],
   page: 1,
   hasMore: true,
-  loading: false
+  loading: false,
+  error: ""
 });
 const mapTag = (tag) => ({
   label: tag.name,
@@ -199,14 +219,23 @@ const mapTag = (tag) => ({
   postCount: tag.usage_count
 });
 const PAGE_SIZE = 20;
+let requestGeneration = 0;
 const fetchTags = async (type) => {
-  const state = type === "popular" ? popularState : latestState;
+  const state = type === "popular" ? popularState : recentState;
   if (state.loading || !state.hasMore) return;
   state.loading = true;
+  state.error = "";
+  const generation = requestGeneration;
   try {
-    const res = await api(
-      `/tags/${type}?page=${state.page}&page_size=${PAGE_SIZE}`
-    );
+    const endpoint = type === "recent" && isOffice.value ? "latest" : type;
+    const res = await api(`/tags/${endpoint}`, {
+      query: {
+        page: state.page,
+        page_size: PAGE_SIZE,
+        scope: props.profileScope
+      }
+    });
+    if (generation !== requestGeneration) return;
     if (res.data && Array.isArray(res.data)) {
       const newTags = res.data.map(mapTag);
       state.data = [...state.data, ...newTags];
@@ -216,42 +245,65 @@ const fetchTags = async (type) => {
       state.hasMore = false;
     }
   } catch (e) {
+    if (generation !== requestGeneration) return;
     console.error(`Failed to fetch ${type} tags:`, e);
-    state.hasMore = false;
+    state.error = "\u0E42\u0E2B\u0E25\u0E14\u0E41\u0E17\u0E47\u0E01\u0E44\u0E21\u0E48\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08 \u0E01\u0E23\u0E38\u0E13\u0E32\u0E1B\u0E34\u0E14\u0E41\u0E25\u0E49\u0E27\u0E40\u0E1B\u0E34\u0E14\u0E43\u0E2B\u0E21\u0E48";
   } finally {
-    state.loading = false;
+    if (generation === requestGeneration) state.loading = false;
   }
 };
 watch(popoverOpen, (isOpen) => {
   if (isOpen) {
+    resetLists();
     if (currentTab.value === "popular" && popularState.data.length === 0) {
       fetchTags("popular");
-    } else if (currentTab.value === "latest" && latestState.data.length === 0) {
-      fetchTags("latest");
+    } else if (currentTab.value === "recent" && recentState.data.length === 0) {
+      fetchTags("recent");
     }
   }
 });
 const popularSentinel = ref(null);
-const latestSentinel = ref(null);
+const recentSentinel = ref(null);
 useIntersectionObserver(popularSentinel, (entries) => {
   const entry = entries[0];
   if (entry?.isIntersecting && currentTab.value === "popular" && popoverOpen.value) {
     fetchTags("popular");
   }
 });
-useIntersectionObserver(latestSentinel, (entries) => {
+useIntersectionObserver(recentSentinel, (entries) => {
   const entry = entries[0];
-  if (entry?.isIntersecting && currentTab.value === "latest" && popoverOpen.value) {
-    fetchTags("latest");
+  if (entry?.isIntersecting && currentTab.value === "recent" && popoverOpen.value) {
+    fetchTags("recent");
   }
 });
 watch(currentTab, (newTab) => {
+  if (!popoverOpen.value) return;
   if (newTab === "popular" && popularState.data.length === 0) {
     fetchTags("popular");
-  } else if (newTab === "latest" && latestState.data.length === 0) {
-    fetchTags("latest");
+  } else if (newTab === "recent" && recentState.data.length === 0) {
+    fetchTags("recent");
   }
 });
+const resetLists = () => {
+  requestGeneration++;
+  for (const state of [popularState, recentState]) {
+    Object.assign(state, {
+      data: [],
+      page: 1,
+      hasMore: true,
+      loading: false,
+      error: ""
+    });
+  }
+};
+watch(
+  [sessionId, businessProfileId, () => props.profileScope, isOffice],
+  () => {
+    resetLists();
+    if (popoverOpen.value)
+      fetchTags(currentTab.value === "popular" ? "popular" : "recent");
+  }
+);
 const selectedTags = computed(() => modelValue.value);
 const isLimitReached = computed(() => {
   if (props.limit <= 0) return false;
@@ -286,7 +338,7 @@ const filterTags = (tags) => {
   );
 };
 const filteredPopularTags = computed(() => filterTags(popularState.data));
-const filteredLatestTags = computed(() => filterTags(latestState.data));
+const filteredRecentTags = computed(() => filterTags(recentState.data));
 const onSelectTag = (tag) => {
   if (isSelected(tag.value)) {
     modelValue.value = modelValue.value.filter((t) => t.id !== tag.value);
@@ -318,7 +370,7 @@ const onAddCustomTag = () => {
     return;
   }
   const newValue = trimmedQuery.toLowerCase().replace(/\s+/g, "-");
-  const existingTag = [...popularState.data, ...latestState.data].find(
+  const existingTag = [...popularState.data, ...recentState.data].find(
     (tag) => tag.value === newValue || tag.label === trimmedQuery
   );
   if (existingTag) {

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

@@ -13,6 +13,7 @@ interface InputTagProps {
     placeholder?: string;
     state?: "user" | "admin";
     ignore?: string[];
+    profileScope?: "personal" | "business";
 }
 type __VLS_Props = InputTagProps;
 type __VLS_ModelProps = {
@@ -26,9 +27,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    limit: number;
     placeholder: string;
+    limit: number;
     ignore: string[];
+    profileScope: "personal" | "business";
 }, {}, {}, {}, 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

@@ -59,8 +59,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    limit: number;
     readonly: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -59,8 +59,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    limit: number;
     readonly: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -46,9 +46,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullHeight: boolean;
     fullWidth: boolean;
-    limit: number;
     rows: number;
     readonly: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -46,9 +46,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullHeight: boolean;
     fullWidth: boolean;
-    limit: number;
     rows: number;
     readonly: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/composables/useApi.js

@@ -3,6 +3,7 @@ export const useApi = () => {
   const config = useRuntimeConfig();
   const baseURL = config.public.BASE_URL_API;
   const provinceIdState = useState("pukaad:province-id", () => null);
+  const businessProfileId = useCookie("PUKAAD_BUSINESS_PROFILE_ID");
   const configProvinceId = config.public.APP_PROVINCE_ID;
   const { APP_TYPE } = config.public;
   const secId = useCookie(
@@ -22,6 +23,9 @@ export const useApi = () => {
       if (pid) {
         headers.set("X-Province-ID", String(pid));
       }
+      if (businessProfileId.value) {
+        headers.set("X-Business-Profile-ID", businessProfileId.value);
+      }
       options.headers = headers;
     },
     onResponseError({ response }) {

package/package.json

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