pukaad-ui-lib 1.282.0 → 1.282.2

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

@@ -1,140 +1,140 @@
 <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?.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]" @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 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 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?.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]" @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 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 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>

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

@@ -30,9 +30,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onExplore-profiles"?: (() => any) | undefined;
     "onExplore-places"?: (() => any) | undefined;
 }>, {
-    isMyProfile: boolean;
     profileId: string;
     defaultTab: "followers" | "following" | "favorites";
+    isMyProfile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/drawer/drawer-suggest-place/drawer-suggest-place.vue

@@ -1,108 +1,108 @@
 <template>
-  <Drawer class="w-[888px]" :title="drawerTitle" :loading="loading" v-model="isOpen">
-    <!-- backoffice: แสดงแบบมี tabs -->
-    <ShadTabs v-if="props.state === 'backoffice'" default-value="business-info">
-      <ShadTabsList>
-        <ShadTabsTrigger value="business-info">ข้อมูลธุรกิจ</ShadTabsTrigger>
-        <ShadTabsTrigger value="image">รูปภาพ</ShadTabsTrigger>
-        <ShadTabsTrigger value="video">วิดีโอ</ShadTabsTrigger>
-      </ShadTabsList>
-      <ShadTabsContent value="business-info">
-        <SuggestPlaceForm v-model="formData" :state="props.state" />
-      </ShadTabsContent>
-      <ShadTabsContent value="image">
-        <div class="flex flex-col gap-[16px] w-full">
-          <div class="flex justify-between items-center">
-            <div class="flex flex-col gap-[4px]">
-              <div class="font-body-large-prominent">รูปภาพ</div>
-              <div class="font-label-serif-medium text-gray">
-                รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif ขนาดไฟล์ไม่เกิน
-                30 mb
-              </div>
-            </div>
-            <div class="flex gap-[8px]">
-              <Icon
-                name="lucide:list"
-                size="20"
+  <Drawer class="w-[888px]" :title="drawerTitle" :loading="loading" v-model="isOpen">
+    <!-- backoffice: แสดงแบบมี tabs -->
+    <ShadTabs v-if="props.state === 'backoffice'" default-value="business-info">
+      <ShadTabsList>
+        <ShadTabsTrigger value="business-info">ข้อมูลธุรกิจ</ShadTabsTrigger>
+        <ShadTabsTrigger value="image">รูปภาพ</ShadTabsTrigger>
+        <ShadTabsTrigger value="video">วิดีโอ</ShadTabsTrigger>
+      </ShadTabsList>
+      <ShadTabsContent value="business-info">
+        <SuggestPlaceForm v-model="formData" :state="props.state" />
+      </ShadTabsContent>
+      <ShadTabsContent value="image">
+        <div class="flex flex-col gap-[16px] w-full">
+          <div class="flex justify-between items-center">
+            <div class="flex flex-col gap-[4px]">
+              <div class="font-body-large-prominent">รูปภาพ</div>
+              <div class="font-label-serif-medium text-gray">
+                รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif ขนาดไฟล์ไม่เกิน
+                30 mb
+              </div>
+            </div>
+            <div class="flex gap-[8px]">
+              <Icon
+                name="lucide:list"
+                size="20"
                 :class="
   photoColumns ? 'text-primary' : 'cursor-pointer text-gray'
-"
-                @click="photoColumns = true"
-              />
-              <Icon
-                name="lucide:layout-grid"
-                size="20"
+"
+                @click="photoColumns = true"
+              />
+              <Icon
+                name="lucide:layout-grid"
+                size="20"
                 :class="
   !photoColumns ? 'text-primary' : 'cursor-pointer text-gray'
-"
-                @click="photoColumns = false"
-              />
-            </div>
-          </div>
-          <InputFile
-            accept="image/*"
-            :column="photoColumns"
-            show-cover
-            :model-value="formData.photos"
+"
+                @click="photoColumns = false"
+              />
+            </div>
+          </div>
+          <InputFile
+            accept="image/*"
+            :column="photoColumns"
+            show-cover
+            :model-value="formData.photos"
             @update:model-value="(val) => {
   formData = { ...formData, photos: val };
-}"
-          />
-        </div>
-      </ShadTabsContent>
-      <ShadTabsContent value="video">
-        <div class="flex flex-col gap-[16px] w-full">
-          <div class="flex justify-between items-center">
-            <div class="flex flex-col gap-[4px]">
-              <div class="font-body-large-prominent">วิดีโอ</div>
-              <div class="font-label-serif-medium text-gray">
-                รองรับไฟล์ *.mp4 *.mov ขนาดไฟล์ไม่เกิน 25 Mb หรือ 10-60 วินาที
-              </div>
-            </div>
-            <div class="flex gap-[8px]">
-              <Icon
-                name="lucide:list"
-                size="20"
+}"
+          />
+        </div>
+      </ShadTabsContent>
+      <ShadTabsContent value="video">
+        <div class="flex flex-col gap-[16px] w-full">
+          <div class="flex justify-between items-center">
+            <div class="flex flex-col gap-[4px]">
+              <div class="font-body-large-prominent">วิดีโอ</div>
+              <div class="font-label-serif-medium text-gray">
+                รองรับไฟล์ *.mp4 *.mov ขนาดไฟล์ไม่เกิน 25 Mb หรือ 10-60 วินาที
+              </div>
+            </div>
+            <div class="flex gap-[8px]">
+              <Icon
+                name="lucide:list"
+                size="20"
                 :class="
   videoColumns ? 'text-primary' : 'cursor-pointer text-gray'
-"
-                @click="videoColumns = true"
-              />
-              <Icon
-                name="lucide:layout-grid"
-                size="20"
+"
+                @click="videoColumns = true"
+              />
+              <Icon
+                name="lucide:layout-grid"
+                size="20"
                 :class="
   !videoColumns ? 'text-primary' : 'cursor-pointer text-gray'
-"
-                @click="videoColumns = false"
-              />
-            </div>
-          </div>
-          <InputFile
-            accept="video/*"
-            :column="videoColumns"
-            :model-value="formData.videos"
+"
+                @click="videoColumns = false"
+              />
+            </div>
+          </div>
+          <InputFile
+            accept="video/*"
+            :column="videoColumns"
+            :model-value="formData.videos"
             @update:model-value="(val) => {
   formData = { ...formData, videos: val };
-}"
-          />
-        </div>
-      </ShadTabsContent>
-    </ShadTabs>
-
-    <!-- personal / business: แสดงตรงๆ ไม่มี tabs -->
-    <div v-else>
-      <SuggestPlaceForm v-model="formData" :state="props.state" />
-    </div>
-    <template #footer>
-      <div class="flex gap-[8px] justify-end">
-        <Button variant="outline">ยกเลิก</Button>
-        <Button color="primary" :disabled="!isFormValid" @click="onSubmit">{{
-          props.state === "personal" ? "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01" : "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E41\u0E25\u0E30\u0E40\u0E1C\u0E22\u0E41\u0E1E\u0E23\u0E48"
-        }}</Button>
-      </div>
-    </template>
-  </Drawer>
+}"
+          />
+        </div>
+      </ShadTabsContent>
+    </ShadTabs>
+
+    <!-- personal / business: แสดงตรงๆ ไม่มี tabs -->
+    <div v-else>
+      <SuggestPlaceForm v-model="formData" :state="props.state" />
+    </div>
+    <template #footer>
+      <div class="flex gap-[8px] justify-end">
+        <Button variant="outline">ยกเลิก</Button>
+        <Button color="primary" :disabled="!isFormValid" @click="onSubmit">{{
+          props.state === "personal" ? "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01" : "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E41\u0E25\u0E30\u0E40\u0E1C\u0E22\u0E41\u0E1E\u0E23\u0E48"
+        }}</Button>
+      </div>
+    </template>
+  </Drawer>
 </template>
 
 <script setup>