pukaad-ui-lib 1.243.0 → 1.245.0

package/dist/module.json

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

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

@@ -1,40 +1,19 @@
 export interface User {
-    id: string;
-    profile_image: {
-        image_url: string;
-    };
-    profile_name: string;
-    profile_verified?: boolean;
-    profile_followers?: number;
-    profile_path: {
-        path_name: string;
-    };
-    profile_posts: number;
-    profile_bio: string | null;
+    id?: string;
+    avatar?: string;
+    name?: string;
+    follower_count?: number;
+    public_count?: number;
+    description?: string;
     is_following?: boolean;
-    is_blocked?: boolean;
 }
-type __VLS_Props = {
-    disabledPaddingHorizontal?: boolean;
-    hiddenInfo?: boolean;
-    variant?: "normal" | "search";
-    ellipsis?: boolean;
-    showBlockOption?: boolean;
-};
 type __VLS_ModelProps = {
-    modelValue: User;
+    modelValue?: User;
 };
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: User) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: User) => any) | undefined;
-}>, {
-    variant: "normal" | "search";
-    ellipsis: boolean;
-    disabledPaddingHorizontal: boolean;
-    hiddenInfo: boolean;
-    showBlockOption: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,156 +1,79 @@
 <template>
-  <div
-    :class="[
-  'flex gap-[16px] items-center border-b border-mercury w-full',
-  props.disabledPaddingHorizontal ? 'py-[16px]' : 'p-[16px]'
-]"
-  >
-    <div class="flex w-full gap-[16px]">
-      <!-- <Avatar
-        :src="user.profile_image.image_url"
-        size="48"
-        class="cursor-pointer"
-      /> -->
+  <div class="flex gap-[16px] items-center justify-between cursor-pointer transition-colors" @click="onClickCard">
+    <div class="flex gap-[8px]">
+      <Avatar :src="modelValue?.avatar" :alt="modelValue?.name" :size="40" />
       <div class="flex flex-col gap-[4px]">
-        <div class="flex gap-[4px] items-center">
-          <div
-            :class="[
-  props.hiddenInfo ? 'font-body-large-prominent' : 'font-body-small-prominent'
-]"
-          >
-            {{ user.profile_name }}
-          </div>
-          <Icon
-            v-if="user.profile_verified === true"
-            name="pukaad-verify"
-            :size="props.hiddenInfo ? 20 : 16"
-          />
-        </div>
-        <div
-          v-if="!props.hiddenInfo"
-          :class="[
-  'flex gap-[4px] text-gray items-center',
-  props.variant === 'search' ? 'font-body-large' : 'font-body-small'
-]"
-        >
-          <div>ผู้ติดตาม {{ user.profile_followers }}</div>
-          <div>•</div>
-          <div>กำลังเผยแพร่ {{ user.profile_posts }}</div>
+        <div class="font-body-large-prominent flex items-center gap-[4px]">
+          {{ modelValue?.name }}
         </div>
-        <div
-          v-if="!props.hiddenInfo"
-          :class="[
-  'text-gray',
-  props.variant === 'search' ? 'font-body-large' : 'font-body-small'
-]"
-        >
-          {{ user.profile_bio }}
+        <div class="flex flex-col gap-[4px] font-body-small text-gray">
+          <div class="flex items-center gap-[4px]">
+            <div>ผู้ติดตาม {{ $convert.convertNumber(modelValue?.follower_count || 0) }}</div>
+            <div>•</div>
+            <div>กำลังเผยแพร่ {{ $convert.convertNumber(modelValue?.public_count || 0) }}</div>
+          </div>
+          <div v-if="modelValue?.description" class="line-clamp-2">
+            {{ modelValue?.description }}
+          </div>
         </div>
       </div>
     </div>
-
-    <Button
-      :color="buttonState.variant"
-      :variant="buttonState.type"
-      @click="buttonState.action"
-    >
-      {{ buttonState.text }}
+    <Button :color="!modelValue?.is_following ? 'primary' : void 0" variant="outline" @click.stop="onFollowToggle">
+      {{ modelValue?.is_following ? "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21" : "\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21" }}
     </Button>
-
-    <PickerOptionMenuUser
-      v-if="ellipsis"
-      state="follower"
-      circle
-      variant="text"
-    />
   </div>
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
-import { useNuxtApp } from "nuxt/app";
-const { $alert } = useNuxtApp();
-const props = defineProps({
-  disabledPaddingHorizontal: { type: Boolean, required: false, default: false },
-  hiddenInfo: { type: Boolean, required: false, default: false },
-  variant: { type: String, required: false, default: "normal" },
-  ellipsis: { type: Boolean, required: false, default: false },
-  showBlockOption: { type: Boolean, required: false, default: false }
-});
-const user = defineModel({ type: Object, ...{ required: true } });
-const buttonState = computed(() => {
-  if (user.value.is_blocked) {
-    return {
-      text: "\u0E40\u0E25\u0E34\u0E01\u0E1A\u0E25\u0E47\u0E2D\u0E01",
-      variant: "default",
-      type: "solid",
-      action: toggleBlock
-    };
-  } else if (user.value.is_following) {
-    return {
-      text: "\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21\u0E41\u0E25\u0E49\u0E27",
-      variant: "default",
-      type: "solid",
-      action: toggleFollow
-    };
-  } else if (showBlockOption.value) {
-    return {
-      text: "\u0E1A\u0E25\u0E47\u0E2D\u0E01",
-      variant: "error",
-      type: "solid",
-      action: toggleBlock
-    };
-  } else {
-    return {
-      text: "\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21",
-      variant: "primary",
-      type: "flat-outline",
-      action: toggleFollow
-    };
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { navigateTo, useCookie, useRuntimeConfig } from "nuxt/app";
+import { useApi } from "../../composables/useApi";
+const modelValue = defineModel({ type: Object, ...{
+  default: () => ({})
+} });
+const router = useRouter();
+const onClickCard = () => {
+  if (modelValue.value?.id) {
+    router.push(`/@${modelValue.value.id}`);
   }
-});
-const toggleFollow = () => {
-  user.value = {
-    ...user.value,
-    is_following: !user.value.is_following
-  };
 };
-const showBlockOption = ref(props.showBlockOption);
-const toggleBlock = () => {
-  if (user.value.is_blocked) {
-    $alert.show({
-      type: "warning",
-      title: "\u0E40\u0E25\u0E34\u0E01\u0E1A\u0E25\u0E47\u0E2D\u0E04",
-      text: `\u0E04\u0E38\u0E13\u0E41\u0E19\u0E48\u0E43\u0E08\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48\u0E27\u0E48\u0E32\u0E04\u0E38\u0E13\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E40\u0E25\u0E34\u0E01\u0E1A\u0E25\u0E47\u0E2D\u0E01 ${user.value.profile_name} \u0E43\u0E0A\u0E48\u0E21\u0E31\u0E49\u0E22?`,
-      confirmText: "\u0E40\u0E25\u0E34\u0E01\u0E1A\u0E25\u0E47\u0E2D\u0E04",
-      showCancelBtn: true,
-      cancelText: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01"
-    }).then((result) => {
-      if (result) {
-        user.value = {
-          ...user.value,
-          is_blocked: false
-        };
-        showBlockOption.value = true;
-      }
-    });
-  } else {
-    $alert.show({
-      type: "warning",
-      title: "\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E1A\u0E25\u0E47\u0E2D\u0E01\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49\u0E19\u0E35\u0E49\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
-      text: `${user.value.profile_name} \u0E08\u0E30\u0E44\u0E21\u0E48\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E40\u0E02\u0E49\u0E32\u0E16\u0E36\u0E07\u0E42\u0E1E\u0E2A\u0E15\u0E4C\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13 \u0E2A\u0E48\u0E07\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21\u0E16\u0E36\u0E07\u0E04\u0E38\u0E13 \u0E21\u0E2D\u0E07\u0E40\u0E2B\u0E47\u0E19\u0E04\u0E27\u0E32\u0E21\u0E04\u0E34\u0E14\u0E40\u0E2B\u0E47\u0E19\u0E2B\u0E23\u0E37\u0E2D\u0E23\u0E35\u0E27\u0E34\u0E27\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13 \u0E41\u0E25\u0E30\u0E08\u0E30\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01\u0E01\u0E32\u0E23\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21\u0E14\u0E49\u0E27\u0E22`,
-      confirmText: "\u0E1A\u0E25\u0E47\u0E2D\u0E01",
-      showCancelBtn: true,
-      cancelText: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01"
-    }).then((result) => {
-      if (result) {
-        user.value = {
-          ...user.value,
-          is_following: false,
-          is_blocked: true
-        };
+const api = useApi();
+const config = useRuntimeConfig();
+const isLoading = ref(false);
+const onFollowToggle = async () => {
+  const { APP_TYPE } = config.public;
+  const secId = useCookie(APP_TYPE === "OFFICE" ? "OFFICE_SEC_ID" : "SEC_ID");
+  if (!secId.value) {
+    navigateTo("/auth/login");
+    return;
+  }
+  if (!modelValue.value?.id) return;
+  if (isLoading.value) return;
+  const targetId = modelValue.value.id;
+  const currentFollowing = !!modelValue.value.is_following;
+  modelValue.value.is_following = !currentFollowing;
+  if (modelValue.value.follower_count !== void 0) {
+    modelValue.value.follower_count += !currentFollowing ? 1 : -1;
+  }
+  isLoading.value = true;
+  try {
+    const method = currentFollowing ? "DELETE" : "POST";
+    const response = await api(`/profiles/${targetId}/follow`, { method });
+    if (response.data) {
+      modelValue.value.is_following = response.data.is_following;
+      if (modelValue.value.follower_count !== void 0) {
+        modelValue.value.follower_count = response.data.follower_count;
       }
-    });
+    }
+  } catch (error) {
+    modelValue.value.is_following = currentFollowing;
+    if (modelValue.value.follower_count !== void 0) {
+      modelValue.value.follower_count += currentFollowing ? 1 : -1;
+    }
+    console.error("Follow toggle failed:", error);
+  } finally {
+    isLoading.value = false;
   }
 };
 </script>

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

@@ -1,40 +1,19 @@
 export interface User {
-    id: string;
-    profile_image: {
-        image_url: string;
-    };
-    profile_name: string;
-    profile_verified?: boolean;
-    profile_followers?: number;
-    profile_path: {
-        path_name: string;
-    };
-    profile_posts: number;
-    profile_bio: string | null;
+    id?: string;
+    avatar?: string;
+    name?: string;
+    follower_count?: number;
+    public_count?: number;
+    description?: string;
     is_following?: boolean;
-    is_blocked?: boolean;
 }
-type __VLS_Props = {
-    disabledPaddingHorizontal?: boolean;
-    hiddenInfo?: boolean;
-    variant?: "normal" | "search";
-    ellipsis?: boolean;
-    showBlockOption?: boolean;
-};
 type __VLS_ModelProps = {
-    modelValue: User;
+    modelValue?: User;
 };
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: User) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: User) => any) | undefined;
-}>, {
-    variant: "normal" | "search";
-    ellipsis: boolean;
-    disabledPaddingHorizontal: boolean;
-    hiddenInfo: boolean;
-    showBlockOption: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/drawer/drawer-profile-network.d.vue.ts

@@ -0,0 +1,30 @@
+export interface ProfileSummary {
+    id?: string;
+    name: string;
+    avatar: string;
+    follower_count: number;
+    following_count: number;
+    favorite_count?: number;
+}
+export interface DrawerProfileNetworkProps {
+    profileId: string;
+    defaultTab?: "followers" | "following" | "favorites";
+}
+type __VLS_Props = DrawerProfileNetworkProps;
+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;
+} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    profileId: string;
+    defaultTab: "followers" | "following" | "favorites";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/drawer/drawer-profile-network.vue

@@ -0,0 +1,268 @@
+<template>
+  <Drawer class="w-[748px]" v-model="isOpen" @close="onClose">
+    <template #header>
+      <div class="flex items-center gap-[16px]">
+        <Avatar :src="profileData?.avatar" :size="40" />
+        <div class="flex flex-col gap-[4px]">
+          <div class="font-body-prominent text-black">
+            {{ profileData?.name }}
+          </div>
+          <div class="font-body-small text-gray items-center">
+            @{{ profileData?.id }}
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <div class="flex flex-col h-full">
+      <ShadTabs v-model="activeTab" class="flex-1 flex flex-col">
+        <ShadTabsList>
+          <ShadTabsTrigger value="followers" class="px-[16px] py-[8px]">
+            ผู้ติดตาม ({{ $convert.convertNumber(profileData?.follower_count || 0) }})
+          </ShadTabsTrigger>
+          <ShadTabsTrigger value="following" class="px-[16px] py-[8px]">
+            กำลังติดตาม ({{ $convert.convertNumber(profileData?.following_count || 0) }})
+          </ShadTabsTrigger>
+          <ShadTabsTrigger value="favorites" class="px-[16px] py-[8px]">
+            สถานที่โปรด ({{ $convert.convertNumber(profileData?.favorite_count || 0) }})
+          </ShadTabsTrigger>
+        </ShadTabsList>
+
+        <div class="flex-1 overflow-y-auto" @scroll="onScroll">
+          <!-- Followers -->
+          <ShadTabsContent value="followers" class="flex flex-col mt-0">
+            <template v-if="tabState.followers.loading">
+              <div class="flex justify-center py-[40px]">
+                <Icon name="lucide:loader-2" size="24" class="animate-spin text-gray" />
+              </div>
+            </template>
+            <template v-else-if="followers.length > 0">
+              <div class="flex flex-col gap-[16px]">
+                <template v-for="(user, index) in followers" :key="user.id || index">
+                  <CardUserItem v-model="followers[index]" />
+                  <Divider v-if="index !== followers.length - 1" />
+                </template>
+              </div>
+              <div v-if="tabState.followers.loadingMore" class="flex justify-center py-[16px]">
+                <Icon name="lucide:loader-2" size="20" class="animate-spin text-gray" />
+              </div>
+            </template>
+            <template v-else>
+              <div class="flex flex-col items-center justify-center py-[40px] gap-[8px]">
+                <Icon name="lucide:users" size="40" class="text-gray" />
+                <div class="font-body-medium text-gray">ไม่มีผู้ติดตาม</div>
+              </div>
+            </template>
+          </ShadTabsContent>
+
+          <!-- Following -->
+          <ShadTabsContent value="following" class="flex flex-col mt-0">
+            <template v-if="tabState.following.loading">
+              <div class="flex justify-center py-[40px]">
+                <Icon name="lucide:loader-2" size="24" class="animate-spin text-gray" />
+              </div>
+            </template>
+            <template v-else-if="following.length > 0">
+              <div class="flex flex-col gap-[16px]">
+                <template v-for="(user, index) in following" :key="user.id || index">
+                  <CardUserItem v-model="following[index]" />
+                  <Divider v-if="index !== following.length - 1" />
+                </template>
+              </div>
+              <div v-if="tabState.following.loadingMore" class="flex justify-center py-[16px]">
+                <Icon name="lucide:loader-2" size="20" class="animate-spin text-gray" />
+              </div>
+            </template>
+            <template v-else>
+              <div class="flex flex-col items-center justify-center py-[40px] gap-[8px]">
+                <Icon name="lucide:users" size="40" class="text-gray" />
+                <div class="font-body-medium text-gray">ไม่ได้ติดตามใคร</div>
+              </div>
+            </template>
+          </ShadTabsContent>
+
+          <!-- Favorites -->
+          <ShadTabsContent value="favorites" class="flex flex-col mt-0">
+            <template v-if="tabState.favorites.loading">
+              <div class="flex justify-center py-[40px]">
+                <Icon name="lucide:loader-2" size="24" class="animate-spin text-gray" />
+              </div>
+            </template>
+            <template v-else-if="favorites.length > 0">
+              <div class="flex flex-col items-center justify-center p-[48px] text-gray font-body-large">
+                สถานที่โปรด (อยู่ระหว่างการพัฒนา)
+              </div>
+              <div v-if="tabState.favorites.loadingMore" class="flex justify-center py-[16px]">
+                <Icon name="lucide:loader-2" size="20" class="animate-spin text-gray" />
+              </div>
+            </template>
+            <template v-else>
+              <div class="flex flex-col items-center justify-center py-[40px] gap-[8px]">
+                <Icon name="lucide:map-pin-off" size="40" class="text-gray" />
+                <div class="font-body-medium text-gray">ไม่มีสถานที่โปรด</div>
+              </div>
+            </template>
+          </ShadTabsContent>
+        </div>
+      </ShadTabs>
+    </div>
+  </Drawer>
+</template>
+
+<script setup>
+import { ref, reactive, watch } from "vue";
+import { useApi } from "../../composables/useApi";
+const createTabState = () => ({
+  loading: false,
+  loadingMore: false,
+  hasMore: true,
+  page: 1
+});
+const props = defineProps({
+  profileId: { type: String, required: true, default: "" },
+  defaultTab: { type: String, required: false, default: "followers" }
+});
+const emit = defineEmits(["close"]);
+const isOpen = defineModel({ type: Boolean, ...{ default: false } });
+const activeTab = ref(props.defaultTab);
+const profileData = ref(null);
+const api = useApi();
+const followers = ref([]);
+const following = ref([]);
+const favorites = ref([]);
+const tabState = reactive({
+  followers: createTabState(),
+  following: createTabState(),
+  favorites: createTabState()
+});
+const PAGE_SIZE = 20;
+const syncProfile = (profile) => {
+  profileData.value = { ...profileData.value, ...profile };
+};
+const fetchFollowers = async (isLoadMore = false) => {
+  if (!props.profileId) return;
+  const s = tabState.followers;
+  if (isLoadMore) {
+    if (!s.hasMore || s.loadingMore) return;
+    s.loadingMore = true;
+  } else {
+    s.loading = true;
+    s.page = 1;
+  }
+  try {
+    const res = await api(`/profiles/${props.profileId}/followers`, {
+      query: { page: s.page, page_size: PAGE_SIZE }
+    });
+    if (res.meta) s.hasMore = s.page < res.meta.total_pages;
+    if (res.data?.profile) syncProfile(res.data.profile);
+    const items = res.data?.items || [];
+    isLoadMore ? followers.value.push(...items) : followers.value = items;
+  } catch (e) {
+    console.error("Failed to fetch followers", e);
+  } finally {
+    s.loading = false;
+    s.loadingMore = false;
+  }
+};
+const fetchFollowing = async (isLoadMore = false) => {
+  if (!props.profileId) return;
+  const s = tabState.following;
+  if (isLoadMore) {
+    if (!s.hasMore || s.loadingMore) return;
+    s.loadingMore = true;
+  } else {
+    s.loading = true;
+    s.page = 1;
+  }
+  try {
+    const res = await api(`/profiles/${props.profileId}/following`, {
+      query: { page: s.page, page_size: PAGE_SIZE }
+    });
+    if (res.meta) s.hasMore = s.page < res.meta.total_pages;
+    if (res.data?.profile) syncProfile(res.data.profile);
+    const items = res.data?.items || [];
+    isLoadMore ? following.value.push(...items) : following.value = items;
+  } catch (e) {
+    console.error("Failed to fetch following", e);
+  } finally {
+    s.loading = false;
+    s.loadingMore = false;
+  }
+};
+const fetchFavorites = async (isLoadMore = false) => {
+  if (!props.profileId) return;
+  const s = tabState.favorites;
+  if (isLoadMore) {
+    if (!s.hasMore || s.loadingMore) return;
+    s.loadingMore = true;
+  } else {
+    s.loading = true;
+    s.page = 1;
+  }
+  try {
+    const res = await api(
+      `/profiles/${props.profileId}/favorites`,
+      { query: { page: s.page, page_size: PAGE_SIZE } }
+    );
+    if (res.meta) s.hasMore = s.page < res.meta.total_pages;
+    if (res.data?.profile) syncProfile(res.data.profile);
+    const items = res.data?.items || [];
+    isLoadMore ? favorites.value.push(...items) : favorites.value = items;
+  } catch (e) {
+    console.error("Failed to fetch favorites", e);
+  } finally {
+    s.loading = false;
+    s.loadingMore = false;
+  }
+};
+const resetAll = () => {
+  followers.value = [];
+  following.value = [];
+  favorites.value = [];
+  profileData.value = null;
+  ["followers", "following", "favorites"].forEach((tab) => {
+    Object.assign(tabState[tab], createTabState());
+  });
+};
+watch(isOpen, (v) => {
+  if (v) {
+    activeTab.value = props.defaultTab;
+    if (activeTab.value === "followers") fetchFollowers();
+    else if (activeTab.value === "following") fetchFollowing();
+    else if (activeTab.value === "favorites") fetchFavorites();
+  } else {
+    resetAll();
+  }
+});
+watch(activeTab, (v) => {
+  if (v === "followers" && followers.value.length === 0) fetchFollowers();
+  else if (v === "following" && following.value.length === 0) fetchFollowing();
+  else if (v === "favorites" && favorites.value.length === 0) fetchFavorites();
+});
+const onClose = () => {
+  isOpen.value = false;
+  emit("close");
+};
+const onScroll = (e) => {
+  const target = e.target;
+  if (!target) return;
+  const isBottom = target.scrollHeight - target.scrollTop <= target.clientHeight + 50;
+  if (!isBottom) return;
+  if (activeTab.value === "followers") {
+    if (tabState.followers.hasMore) {
+      tabState.followers.page++;
+      fetchFollowers(true);
+    }
+  } else if (activeTab.value === "following") {
+    if (tabState.following.hasMore) {
+      tabState.following.page++;
+      fetchFollowing(true);
+    }
+  } else if (activeTab.value === "favorites") {
+    if (tabState.favorites.hasMore) {
+      tabState.favorites.page++;
+      fetchFavorites(true);
+    }
+  }
+};
+</script>

package/dist/runtime/components/drawer/drawer-profile-network.vue.d.ts

@@ -0,0 +1,30 @@
+export interface ProfileSummary {
+    id?: string;
+    name: string;
+    avatar: string;
+    follower_count: number;
+    following_count: number;
+    favorite_count?: number;
+}
+export interface DrawerProfileNetworkProps {
+    profileId: string;
+    defaultTab?: "followers" | "following" | "favorites";
+}
+type __VLS_Props = DrawerProfileNetworkProps;
+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;
+} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    profileId: string;
+    defaultTab: "followers" | "following" | "favorites";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -100,11 +100,11 @@ const handleSubmit = async () => {
         logout_all: logoutAll.value
       }
     });
-    if (res.code === 200 && res.data) {
+    if (res.data?.sec_id) {
       emit("complete", { secId: res.data.sec_id });
       isOpen.value = false;
     } else {
-      $toast?.error?.(res.message || "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14");
+      $toast?.error?.(res.message?.description || "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14");
     }
   } catch (e) {
     $toast?.error?.(

package/package.json

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