pukaad-ui-lib 1.460.0 → 1.461.0

package/dist/runtime/components/preview/preview-content.vue

@@ -1,146 +1,146 @@
 <template>
-  <!-- Figma: Preview - Video (2743:66169) — post_it / image ใช้โครงเดียวกัน -->
-  <div class="h-screen w-full overflow-hidden bg-white flex flex-col">
-    <!-- Figma: Navbar Preview (new tab) — Property 1=Admin -->
-    <div class="shrink-0 w-full bg-cloud">
-      <div class="max-w-[1280px] mx-auto flex justify-end p-[16px]">
-        <Button variant="outline" class="rounded-[6px]" @click="emit('exit')">
-          ออกจากพรีวิว
-        </Button>
-      </div>
-    </div>
-
-    <!-- เลื่อนในกล่องนี้ ไม่พึ่ง scroll ของหน้า (บางแอปล็อก html/body ไว้) -->
-    <div class="flex-1 overflow-y-auto">
-      <!-- Figma: เนื้อหาเริ่มห่างจากแถบ 22px (ช่องว่าง 6 + padding 16) -->
-      <div class="flex justify-center px-[16px] pt-[22px] pb-[16px]">
-        <!-- กว้าง 844 เท่าวิดีโอ — DisplayVideo ยืดตามความกว้างกล่องนี้ ปุ่มเล่นจะได้อยู่กลางวิดีโอ -->
-        <div class="w-[844px] flex flex-col gap-[16px]">
-          <Label v-if="labelItems.length" :items="labelItems" />
-
-          <!-- Post-it -->
-          <div
-            v-if="contentData.content_type === 'post_it'"
-            class="flex gap-[16px] py-[16px] items-center"
-          >
-            <div
-              class="w-[6px] h-full shrink-0"
-              :style="{ backgroundColor: contentData.cover_color }"
-            />
-            <div class="font-headline-large-prominent min-w-0 break-words">
-              {{ contentData.cover_text }}
-            </div>
-          </div>
-          <!-- Image -->
-          <DisplayImage
-            v-else-if="contentData.content_type === 'image'"
-            :items="contentData.media"
-            item-src="url"
-            @select="openImage"
-          />
-          <!-- Video -->
-          <DisplayVideo
-            v-else-if="contentData.content_type === 'video'"
-            :src="contentData.media?.[0]?.url"
-            :poster="contentData.video_poster_url"
-            play-button
-            width="844"
-            height="475"
-            preload="metadata"
-            class="bg-black"
-          />
-
-          <CardRefer
-            v-if="contentData.mentions?.[0]"
-            :item="contentData.mentions[0]"
-          />
-
-          <!-- Figma: Announce Description -->
-          <div
-            v-if="contentData.author"
-            class="flex items-center justify-between gap-[16px]"
-          >
-            <div class="flex items-center gap-[8px] min-w-0">
-              <Avatar :src="contentData.author.avatar ?? ''" :size="40" />
-              <div class="flex flex-col gap-[4px] min-w-0">
-                <div class="font-body-large-prominent truncate">
-                  {{ contentData.author.name }}
-                </div>
-                <div
-                  v-if="authorStats.length"
-                  class="flex gap-[8px] font-body-large"
-                >
-                  <div
-                    v-for="stat in authorStats"
-                    :key="stat.label"
-                    class="flex gap-[4px]"
-                  >
-                    <span class="text-gray">{{ stat.label }}</span>
-                    {{ stat.value }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <!-- พรีวิว = ดูหน้าตาได้แต่กดไม่ได้ -->
-            <Button circle size="icon-sm" class="shrink-0" inert>
-              <Icon name="lucide:ellipsis-vertical" />
-            </Button>
-          </div>
-
-          <div
-            v-if="contentData.description"
-            class="font-body-large whitespace-pre-wrap"
-          >
-            {{ contentData.description }}
-          </div>
-
-          <div v-if="place" class="flex gap-[8px] font-body-large">
-            <span class="text-gray">อยู่ที่</span>
-            <span class="text-primary">{{ place.name }}</span>
-          </div>
-
-          <div v-if="contentData.tags?.length" class="flex flex-wrap gap-[8px]">
-            <Chip v-for="tag in contentData.tags" :key="tag.id" color="bright">
-              {{ tag.name }}
-            </Chip>
-          </div>
-
-          <CardReaction
+  <!-- Figma: Preview - Video (2743:66169) — post_it / image ใช้โครงเดียวกัน -->
+  <div class="h-screen w-full overflow-hidden bg-white flex flex-col">
+    <!-- Figma: Navbar Preview (new tab) — Property 1=Admin -->
+    <div class="shrink-0 w-full bg-cloud">
+      <div class="max-w-[1280px] mx-auto flex justify-end p-[16px]">
+        <Button variant="outline" class="rounded-[6px]" @click="emit('exit')">
+          ออกจากพรีวิว
+        </Button>
+      </div>
+    </div>
+
+    <!-- เลื่อนในกล่องนี้ ไม่พึ่ง scroll ของหน้า (บางแอปล็อก html/body ไว้) -->
+    <div class="flex-1 overflow-y-auto">
+      <!-- Figma: เนื้อหาเริ่มห่างจากแถบ 22px (ช่องว่าง 6 + padding 16) -->
+      <div class="flex justify-center px-[16px] pt-[22px] pb-[16px]">
+        <!-- กว้าง 844 เท่าวิดีโอ — DisplayVideo ยืดตามความกว้างกล่องนี้ ปุ่มเล่นจะได้อยู่กลางวิดีโอ -->
+        <div class="w-[844px] flex flex-col gap-[16px]">
+          <Label v-if="labelItems.length" :items="labelItems" />
+
+          <!-- Post-it -->
+          <div
+            v-if="contentData.content_type === 'post_it'"
+            class="flex gap-[16px] py-[16px] items-center"
+          >
+            <div
+              class="w-[6px] h-full shrink-0"
+              :style="{ backgroundColor: contentData.cover_color }"
+            />
+            <div class="font-headline-large-prominent min-w-0 break-words">
+              {{ contentData.cover_text }}
+            </div>
+          </div>
+          <!-- Image -->
+          <DisplayImage
+            v-else-if="contentData.content_type === 'image'"
+            :items="contentData.media"
+            item-src="url"
+            @select="openImage"
+          />
+          <!-- Video -->
+          <DisplayVideo
+            v-else-if="contentData.content_type === 'video'"
+            :src="contentData.media?.[0]?.url"
+            :poster="contentData.video_poster_url"
+            play-button
+            width="844"
+            height="475"
+            preload="metadata"
+            class="bg-black"
+          />
+
+          <CardRefer
+            v-if="contentData.mentions?.[0]"
+            :item="contentData.mentions[0]"
+          />
+
+          <!-- Figma: Announce Description -->
+          <div
+            v-if="contentData.author"
+            class="flex items-center justify-between gap-[16px]"
+          >
+            <div class="flex items-center gap-[8px] min-w-0">
+              <Avatar :src="contentData.author.avatar ?? ''" :size="40" />
+              <div class="flex flex-col gap-[4px] min-w-0">
+                <div class="font-body-large-prominent truncate">
+                  {{ contentData.author.name }}
+                </div>
+                <div
+                  v-if="authorStats.length"
+                  class="flex gap-[8px] font-body-large"
+                >
+                  <div
+                    v-for="stat in authorStats"
+                    :key="stat.label"
+                    class="flex gap-[4px]"
+                  >
+                    <span class="text-gray">{{ stat.label }}</span>
+                    {{ stat.value }}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- พรีวิว = ดูหน้าตาได้แต่กดไม่ได้ -->
+            <Button circle size="icon-sm" class="shrink-0" inert>
+              <Icon name="lucide:ellipsis-vertical" />
+            </Button>
+          </div>
+
+          <div
+            v-if="contentData.description"
+            class="font-body-large whitespace-pre-wrap"
+          >
+            {{ contentData.description }}
+          </div>
+
+          <div v-if="place" class="flex gap-[8px] font-body-large">
+            <span class="text-gray">อยู่ที่</span>
+            <span class="text-primary">{{ place.name }}</span>
+          </div>
+
+          <div v-if="contentData.tags?.length" class="flex flex-wrap gap-[8px]">
+            <Chip v-for="tag in contentData.tags" :key="tag.id" color="bright">
+              {{ tag.name }}
+            </Chip>
+          </div>
+
+          <CardReaction
             :item-count="{
   liked: contentData.like_count ?? 0,
   bookmarked: contentData.bookmark_count ?? 0,
   shared: contentData.share_count ?? 0
-}"
-            disabled
-          />
-
-          <!-- Figma: Spotlight -->
-          <div v-if="recommendedContents.length" inert>
-            <CardContentRecommend :items="recommendedContents" />
-          </div>
-
-          <!-- ส่งรายการเข้าไปเอง (ไม่ใช้ fetchFn) เพราะ fetchFn โหลดหน้าถัดไปจาก window scroll -->
-          <Comment
-            :comments="comments"
-            :comment-count="commentTotal"
-            :current-user="previewUser"
-            readonly
-          />
-
-          <div ref="sentinel" class="h-[1px]" />
-          <div v-if="isLoadingComments" class="flex justify-center py-[16px]">
-            <Icon
-              name="lucide:loader-circle"
-              :size="40"
-              class="animate-spin text-cloud"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <ModalDisplayImage v-model="isImageOpen" :src="selectedImage" />
-  </div>
+}"
+            disabled
+          />
+
+          <!-- Figma: Spotlight -->
+          <div v-if="recommendedContents.length" inert>
+            <CardContentRecommend :items="recommendedContents" />
+          </div>
+
+          <!-- ส่งรายการเข้าไปเอง (ไม่ใช้ fetchFn) เพราะ fetchFn โหลดหน้าถัดไปจาก window scroll -->
+          <Comment
+            :comments="comments"
+            :comment-count="commentTotal"
+            :current-user="previewUser"
+            readonly
+          />
+
+          <div ref="sentinel" class="h-[1px]" />
+          <div v-if="isLoadingComments" class="flex justify-center py-[16px]">
+            <Icon
+              name="lucide:loader-circle"
+              :size="40"
+              class="animate-spin text-cloud"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <ModalDisplayImage v-model="isImageOpen" :src="selectedImage" />
+  </div>
 </template>
 
 <script setup>