pukaad-ui-lib 1.450.2 → 1.451.0

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

@@ -1,245 +1,245 @@
 <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>
-
-    <ShadTabs v-model="activeTab" class="flex-1 flex flex-col h-full">
-      <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?.like_place_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]"
-                  @require-auth="emit('require-auth')"
-                />
-                <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
-              v-if="isMyProfile"
-              class="h-[200px] flex flex-col gap-[8px] items-center justify-center"
-            >
-              <div class="font-title-medium-prominent text-black">
-                กำลังมองหาผู้ติดตามอยู่ใช่ไหม
-              </div>
-              <div class="flex flex-col font-body-large text-gray items-center">
-                <div>เมื่อมีคนติดตามบัญชีนี้ ข้อมูลจะแสดงที่นี่</div>
-                <div>การโพสต์และการโต้ตอบกับผู้อื่นจะช่วยเพิ่มผู้ติดตาม</div>
-              </div>
-            </div>
-            <div
-              v-else
-              class="h-[200px] flex flex-col gap-[8px] items-center justify-center"
-            >
-              <div
-                class="font-title-medium-prominent text-black flex gap-[4px]"
-              >
-                {{ profileData?.name }} ยังไม่มีผู้ติดตาม
-              </div>
-              <div class="font-body-large 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]"
-                  @require-auth="emit('require-auth')"
-                />
-                <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
-              v-if="isMyProfile"
-              class="flex flex-col gap-[24px] items-center justify-center h-[200px]"
-            >
-              <div class="flex flex-col gap-[8px] items-center">
-                <div class="font-title-medium-prominent text-black">
-                  ทันเหตุการณ์
-                </div>
-                <div
-                  class="flex flex-col font-body-large text-gray items-center"
-                >
-                  <div>
-                    การติดตามบัญชีเป็นวิธีที่ง่ายในการสร้างลำดับเหตุการณ์
-                  </div>
-                  <div>
-                    ของคุณและรู้ว่ามีอะไรเกิดขึ้นบ้างกับหัวข้อและผู้ที่คุณสนใจ
-                  </div>
-                </div>
-              </div>
-              <Button color="primary" @click="emit('explore-profiles')"
-                >ติดตามใครดี</Button
-              >
-            </div>
-            <div
-              v-else
-              class="h-[200px] flex flex-col gap-[8px] items-center justify-center"
-            >
-              <div class="font-title-medium-prominent text-black">
-                {{ profileData?.name }} ไม่ได้กำลังติดตามใคร
-              </div>
-              <div class="font-body-large 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 gap-[16px]">
-              <template
-                v-for="(place, index) in favorites"
-                :key="place.id || index"
-              >
-                <CardPlaceItem
-                  v-model="favorites[index]"
-                  @require-auth="emit('require-auth')"
-                />
-                <Divider v-if="index !== favorites.length - 1" />
-              </template>
-            </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
-              v-if="isMyProfile"
-              class="flex flex-col gap-[24px] items-center justify-center h-[200px]"
-            >
-              <div class="flex flex-col gap-[8px] items-center">
-                <div class="font-title-medium-prominent text-black">
-                  ยังไม่มีสถานที่โปรด
-                </div>
-                <div class="font-body-large text-gray">
-                  กดหัวใจที่สถานที่ใดก็ได้เพื่อบันทึกไว้ที่นี่
-                </div>
-              </div>
-              <Button color="primary" @click="emit('explore-places')"
-                >ที่ไหนน่าสนใจ</Button
-              >
-            </div>
-            <div
-              v-else
-              class="h-[200px] flex flex-col gap-[8px] items-center justify-center"
-            >
-              <div class="font-title-medium-prominent text-black">
-                @{{ profileData?.name }} ยังไม่มีสถานที่โปรด
-              </div>
-              <div class="font-body-large text-gray">
-                เมื่อเขาบันทึกสถานที่ไว้จะแสดงที่นี่
-              </div>
-            </div>
-          </template>
-        </ShadTabsContent>
-      </div>
-    </ShadTabs>
-  </Drawer>
+  <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>
+
+    <ShadTabs v-model="activeTab" class="flex-1 flex flex-col h-full">
+      <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?.like_place_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]"
+                  @require-auth="emit('require-auth')"
+                />
+                <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
+              v-if="isMyProfile"
+              class="h-[200px] flex flex-col gap-[8px] items-center justify-center"
+            >
+              <div class="font-title-medium-prominent text-black">
+                กำลังมองหาผู้ติดตามอยู่ใช่ไหม
+              </div>
+              <div class="flex flex-col font-body-large text-gray items-center">
+                <div>เมื่อมีคนติดตามบัญชีนี้ ข้อมูลจะแสดงที่นี่</div>
+                <div>การโพสต์และการโต้ตอบกับผู้อื่นจะช่วยเพิ่มผู้ติดตาม</div>
+              </div>
+            </div>
+            <div
+              v-else
+              class="h-[200px] flex flex-col gap-[8px] items-center justify-center"
+            >
+              <div
+                class="font-title-medium-prominent text-black flex gap-[4px]"
+              >
+                {{ profileData?.name }} ยังไม่มีผู้ติดตาม
+              </div>
+              <div class="font-body-large 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]"
+                  @require-auth="emit('require-auth')"
+                />
+                <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
+              v-if="isMyProfile"
+              class="flex flex-col gap-[24px] items-center justify-center h-[200px]"
+            >
+              <div class="flex flex-col gap-[8px] items-center">
+                <div class="font-title-medium-prominent text-black">
+                  ทันเหตุการณ์
+                </div>
+                <div
+                  class="flex flex-col font-body-large text-gray items-center"
+                >
+                  <div>
+                    การติดตามบัญชีเป็นวิธีที่ง่ายในการสร้างลำดับเหตุการณ์
+                  </div>
+                  <div>
+                    ของคุณและรู้ว่ามีอะไรเกิดขึ้นบ้างกับหัวข้อและผู้ที่คุณสนใจ
+                  </div>
+                </div>
+              </div>
+              <Button color="primary" @click="emit('explore-profiles')"
+                >ติดตามใครดี</Button
+              >
+            </div>
+            <div
+              v-else
+              class="h-[200px] flex flex-col gap-[8px] items-center justify-center"
+            >
+              <div class="font-title-medium-prominent text-black">
+                {{ profileData?.name }} ไม่ได้กำลังติดตามใคร
+              </div>
+              <div class="font-body-large 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 gap-[16px]">
+              <template
+                v-for="(place, index) in favorites"
+                :key="place.id || index"
+              >
+                <CardPlaceItem
+                  v-model="favorites[index]"
+                  @require-auth="emit('require-auth')"
+                />
+                <Divider v-if="index !== favorites.length - 1" />
+              </template>
+            </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
+              v-if="isMyProfile"
+              class="flex flex-col gap-[24px] items-center justify-center h-[200px]"
+            >
+              <div class="flex flex-col gap-[8px] items-center">
+                <div class="font-title-medium-prominent text-black">
+                  ยังไม่มีสถานที่โปรด
+                </div>
+                <div class="font-body-large text-gray">
+                  กดหัวใจที่สถานที่ใดก็ได้เพื่อบันทึกไว้ที่นี่
+                </div>
+              </div>
+              <Button color="primary" @click="emit('explore-places')"
+                >ที่ไหนน่าสนใจ</Button
+              >
+            </div>
+            <div
+              v-else
+              class="h-[200px] flex flex-col gap-[8px] items-center justify-center"
+            >
+              <div class="font-title-medium-prominent text-black">
+                @{{ profileData?.name }} ยังไม่มีสถานที่โปรด
+              </div>
+              <div class="font-body-large text-gray">
+                เมื่อเขาบันทึกสถานที่ไว้จะแสดงที่นี่
+              </div>
+            </div>
+          </template>
+        </ShadTabsContent>
+      </div>
+    </ShadTabs>
+  </Drawer>
 </template>
 
 <script setup>