pukaad-ui-lib 1.459.0 → 1.461.0

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

@@ -1,198 +1,198 @@
 <template>
-  <!-- Figma: Preview - Display Place (2884:29368) -->
-  <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">
-      <div class="max-w-[1280px] mx-auto p-[16px] flex flex-col gap-[16px]">
-        <!-- Place Cover -->
-        <DisplayImagePlace
-          v-if="photos.length > 0 || videos.length > 0"
-          :photos="photos"
-          :videos="videos"
-          variant="featured"
-          :state="props.state"
-          :title="placeData.business_name"
-        />
-
-        <!-- Place Title -->
-        <div class="flex flex-col gap-[8px]">
-          <div class="flex gap-[8px] justify-between items-center">
-            <div class="font-headline-medium-prominent">
-              {{ placeData.business_name || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E0A\u0E37\u0E48\u0E2D\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48" }}
-            </div>
-            <!-- พรีวิว = ดูหน้าตาได้แต่กดไม่ได้ -->
-            <div class="flex gap-[8px] items-center" inert>
-              <Button size="sm" class="rounded-full font-body-small">
-                <Icon name="lucide:heart" :size="16" />
-                ถูกใจ
-              </Button>
-              <Button circle size="icon-sm">
-                <Icon name="uil:share" />
-              </Button>
-              <Button circle size="icon-sm">
-                <Icon name="lucide:ellipsis-vertical" />
-              </Button>
-            </div>
-          </div>
-
-          <Chip v-if="closedStatus" color="error" class="gap-[4px] self-start">
-            <Icon :name="closedStatus.icon" class="!size-[16px]" />
-            <span class="font-body-medium-prominent">{{
-              closedStatus.label
-            }}</span>
-          </Chip>
-
-          <div class="flex gap-[16px] font-body-large">
-            <div class="flex gap-[8px] items-center">
-              <InputRating
-                :model-value="placeData.rating ?? 0"
-                readonly
-                :size="16"
-              />
-              {{ convertNumber(placeData.review_count || 0) }}
-            </div>
-            <Divider alignment="vertical" />
-            <div class="flex gap-[4px]">
-              <span class="text-gray">ถูกใจ</span>
-              {{ convertNumber(placeData.like_count || 0) }}
-            </div>
-            <Divider alignment="vertical" />
-            <div class="flex gap-[4px]">
-              <span class="text-gray">แชร์</span>
-              {{ convertNumber(placeData.share_count || 0) }}
-            </div>
-            <Divider alignment="vertical" />
-            <div>
-              {{
-                placeData.categories?.[0]?.category_name || "\u0E44\u0E21\u0E48\u0E23\u0E30\u0E1A\u0E38\u0E2B\u0E21\u0E27\u0E14\u0E2B\u0E21\u0E39\u0E48"
-              }}
-            </div>
-          </div>
-
-          <div class="flex gap-[16px] items-center">
-            <div class="flex gap-[8px] items-center">
-              <Icon name="lucide:map-pin" :size="20" class="text-primary" />
-              <div class="font-body-large text-gray">
-                {{ placeData.address?.full_address || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E17\u0E35\u0E48\u0E2D\u0E22\u0E39\u0E48" }}
-              </div>
-            </div>
-            <Button
-              v-if="placeData.lat_lng"
-              variant="text"
-              color="primary"
-              class="font-body-large"
-              @click="openMap"
-            >
-              ดูแผนที่
-            </Button>
-          </div>
-        </div>
-
-        <div class="flex justify-between gap-[24px]">
-          <!-- ซ้าย: รีวิว -->
-          <div class="w-[824px] shrink-0">
-            <ShadTabs
-              v-if="placeData.is_review"
-              v-model="activeTab"
-              class="gap-[16px]"
-            >
-              <ShadTabsList>
-                <ShadTabsTrigger
-                  v-for="tab in mainTabs"
-                  :key="tab.value"
-                  :value="tab.value"
-                >
-                  {{ tab.label }}
-                </ShadTabsTrigger>
-              </ShadTabsList>
-
-              <ShadTabsContent value="review" class="flex flex-col gap-[16px]">
-                <div inert>
-                  <DisplayRatingSummary
-                    :rating="placeData.rating ?? 0"
-                    :total-reviews="placeData.review_count ?? 0"
-                    :distribution="ratingDistribution"
-                  />
-                </div>
-
-                <ShadTabs v-model="activeReviewTab">
-                  <ShadTabsList>
-                    <ShadTabsTrigger
-                      v-for="tab in reviewFilterTabs"
-                      :key="tab.value"
-                      :value="tab.value"
-                      :disabled="reviewCounts[tab.value] === 0"
-                    >
-                      {{ tab.label }}
-                    </ShadTabsTrigger>
-                  </ShadTabsList>
-                </ShadTabs>
-
-                <div v-if="reviews.length > 0" class="flex flex-col">
-                  <CardReview
-                    v-for="review in reviews"
-                    :key="review.review_id"
-                    :item="review"
-                    :is-profile="false"
-                    disabled-like
-                    disabled-menu
-                  />
-                </div>
-                <div
-                  v-else-if="!isLoadingReviews"
-                  class="flex flex-col items-center gap-[8px] py-[32px]"
-                >
-                  <Icon name="pukaad:page-not-found" :size="120" />
-                  <div class="font-title-small-prominent">ยังไม่มีรีวิว</div>
-                </div>
-
-                <div ref="sentinel" class="h-[1px]" />
-                <div
-                  v-if="isLoadingReviews"
-                  class="flex justify-center py-[16px]"
-                >
-                  <Icon
-                    name="lucide:loader-circle"
-                    :size="40"
-                    class="animate-spin text-cloud"
-                  />
-                </div>
-              </ShadTabsContent>
-
-              <ShadTabsContent value="aboutPost">
-                <div class="text-gray py-[32px] text-center">
-                  ยังไม่มีโพสต์ที่เกี่ยวข้อง
-                </div>
-              </ShadTabsContent>
-            </ShadTabs>
-
-            <div
-              v-else
-              class="flex flex-col items-center justify-center gap-[16px] py-[48px]"
-            >
-              <Icon name="pukaad:page-not-found" :size="145" />
-              <div>ยังไม่มีรีวิว</div>
-            </div>
-          </div>
-
-          <!-- ขวา: Place About -->
-          <!-- TODO: "ที่ไหนน่าสนใจ" (Figma: Reccommended Places) — ยังไม่มี API -->
-          <div class="w-[380px] shrink-0 flex flex-col gap-[16px]">
-            <CardPlaceDetail :item="placeDetailItem" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+  <!-- Figma: Preview - Display Place (2884:29368) -->
+  <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">
+      <div class="max-w-[1280px] mx-auto p-[16px] flex flex-col gap-[16px]">
+        <!-- Place Cover -->
+        <DisplayImagePlace
+          v-if="photos.length > 0 || videos.length > 0"
+          :photos="photos"
+          :videos="videos"
+          variant="featured"
+          :state="props.state"
+          :title="placeData.business_name"
+        />
+
+        <!-- Place Title -->
+        <div class="flex flex-col gap-[8px]">
+          <div class="flex gap-[8px] justify-between items-center">
+            <div class="font-headline-medium-prominent">
+              {{ placeData.business_name || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E0A\u0E37\u0E48\u0E2D\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48" }}
+            </div>
+            <!-- พรีวิว = ดูหน้าตาได้แต่กดไม่ได้ -->
+            <div class="flex gap-[8px] items-center" inert>
+              <Button size="sm" class="rounded-full font-body-small">
+                <Icon name="lucide:heart" :size="16" />
+                ถูกใจ
+              </Button>
+              <Button circle size="icon-sm">
+                <Icon name="uil:share" />
+              </Button>
+              <Button circle size="icon-sm">
+                <Icon name="lucide:ellipsis-vertical" />
+              </Button>
+            </div>
+          </div>
+
+          <Chip v-if="closedStatus" color="error" class="gap-[4px] self-start">
+            <Icon :name="closedStatus.icon" class="!size-[16px]" />
+            <span class="font-body-medium-prominent">{{
+              closedStatus.label
+            }}</span>
+          </Chip>
+
+          <div class="flex gap-[16px] font-body-large">
+            <div class="flex gap-[8px] items-center">
+              <InputRating
+                :model-value="placeData.rating ?? 0"
+                readonly
+                :size="16"
+              />
+              {{ convertNumber(placeData.review_count || 0) }}
+            </div>
+            <Divider alignment="vertical" />
+            <div class="flex gap-[4px]">
+              <span class="text-gray">ถูกใจ</span>
+              {{ convertNumber(placeData.like_count || 0) }}
+            </div>
+            <Divider alignment="vertical" />
+            <div class="flex gap-[4px]">
+              <span class="text-gray">แชร์</span>
+              {{ convertNumber(placeData.share_count || 0) }}
+            </div>
+            <Divider alignment="vertical" />
+            <div>
+              {{
+                placeData.categories?.[0]?.category_name || "\u0E44\u0E21\u0E48\u0E23\u0E30\u0E1A\u0E38\u0E2B\u0E21\u0E27\u0E14\u0E2B\u0E21\u0E39\u0E48"
+              }}
+            </div>
+          </div>
+
+          <div class="flex gap-[16px] items-center">
+            <div class="flex gap-[8px] items-center">
+              <Icon name="lucide:map-pin" :size="20" class="text-primary" />
+              <div class="font-body-large text-gray">
+                {{ placeData.address?.full_address || "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E17\u0E35\u0E48\u0E2D\u0E22\u0E39\u0E48" }}
+              </div>
+            </div>
+            <Button
+              v-if="placeData.lat_lng"
+              variant="text"
+              color="primary"
+              class="font-body-large"
+              @click="openMap"
+            >
+              ดูแผนที่
+            </Button>
+          </div>
+        </div>
+
+        <div class="flex justify-between gap-[24px]">
+          <!-- ซ้าย: รีวิว -->
+          <div class="w-[824px] shrink-0">
+            <ShadTabs
+              v-if="placeData.is_review"
+              v-model="activeTab"
+              class="gap-[16px]"
+            >
+              <ShadTabsList>
+                <ShadTabsTrigger
+                  v-for="tab in mainTabs"
+                  :key="tab.value"
+                  :value="tab.value"
+                >
+                  {{ tab.label }}
+                </ShadTabsTrigger>
+              </ShadTabsList>
+
+              <ShadTabsContent value="review" class="flex flex-col gap-[16px]">
+                <div inert>
+                  <DisplayRatingSummary
+                    :rating="placeData.rating ?? 0"
+                    :total-reviews="placeData.review_count ?? 0"
+                    :distribution="ratingDistribution"
+                  />
+                </div>
+
+                <ShadTabs v-model="activeReviewTab">
+                  <ShadTabsList>
+                    <ShadTabsTrigger
+                      v-for="tab in reviewFilterTabs"
+                      :key="tab.value"
+                      :value="tab.value"
+                      :disabled="reviewCounts[tab.value] === 0"
+                    >
+                      {{ tab.label }}
+                    </ShadTabsTrigger>
+                  </ShadTabsList>
+                </ShadTabs>
+
+                <div v-if="reviews.length > 0" class="flex flex-col">
+                  <CardReview
+                    v-for="review in reviews"
+                    :key="review.review_id"
+                    :item="review"
+                    :is-profile="false"
+                    disabled-like
+                    disabled-menu
+                  />
+                </div>
+                <div
+                  v-else-if="!isLoadingReviews"
+                  class="flex flex-col items-center gap-[8px] py-[32px]"
+                >
+                  <Icon name="pukaad:page-not-found" :size="120" />
+                  <div class="font-title-small-prominent">ยังไม่มีรีวิว</div>
+                </div>
+
+                <div ref="sentinel" class="h-[1px]" />
+                <div
+                  v-if="isLoadingReviews"
+                  class="flex justify-center py-[16px]"
+                >
+                  <Icon
+                    name="lucide:loader-circle"
+                    :size="40"
+                    class="animate-spin text-cloud"
+                  />
+                </div>
+              </ShadTabsContent>
+
+              <ShadTabsContent value="aboutPost">
+                <div class="text-gray py-[32px] text-center">
+                  ยังไม่มีโพสต์ที่เกี่ยวข้อง
+                </div>
+              </ShadTabsContent>
+            </ShadTabs>
+
+            <div
+              v-else
+              class="flex flex-col items-center justify-center gap-[16px] py-[48px]"
+            >
+              <Icon name="pukaad:page-not-found" :size="145" />
+              <div>ยังไม่มีรีวิว</div>
+            </div>
+          </div>
+
+          <!-- ขวา: Place About -->
+          <!-- TODO: "ที่ไหนน่าสนใจ" (Figma: Reccommended Places) — ยังไม่มี API -->
+          <div class="w-[380px] shrink-0 flex flex-col gap-[16px]">
+            <CardPlaceDetail :item="placeDetailItem" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/progress-bar.vue

@@ -1,21 +1,21 @@
 <template>
-  <div
-    class="rounded-full"
+  <div
+    class="rounded-full"
     :style="{
   backgroundColor: props.colorBackground,
   height: `${props.height}px`,
   width: props.fullWidth ? '100%' : `${props.width}px`
-}"
-  >
-    <div
-      class="rounded-full"
+}"
+  >
+    <div
+      class="rounded-full"
       :style="{
   backgroundColor: props.colorActive,
   height: `${props.height}px`,
   width: `${value}%`
-}"
-    ></div>
-  </div>
+}"
+    ></div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/read-more-text.vue

@@ -1,8 +1,8 @@
 <template>
-  <div ref="container" class="whitespace-pre-wrap break-words">
-    <template v-if="expanded || !isTruncated">{{ props.text }}</template>
-    <template v-else>{{ displayText }}...<span class="text-primary cursor-pointer" @click="toggle">ดูเพิ่มเติม</span></template>
-  </div>
+  <div ref="container" class="whitespace-pre-wrap break-words">
+    <template v-if="expanded || !isTruncated">{{ props.text }}</template>
+    <template v-else>{{ displayText }}...<span class="text-primary cursor-pointer" @click="toggle">ดูเพิ่มเติม</span></template>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/table.vue

@@ -1,88 +1,88 @@
 <template>
-  <div class="bg-white rounded-[8px] h-full">
-    <div class="overflow-auto">
-      <table class="w-full">
-        <thead v-if="!props.disabledHeader">
-          <slot name="header" :item="props.itemHeader">
-            <tr>
-              <template v-for="(header, i) in itemHeaders" :key="i">
-                <th class="sticky top-0 bg-white">
-                  <div
-                    class="p-[14px] flex gap-[8px] text-gray font-label-sans-serif-large"
+  <div class="bg-white rounded-[8px] h-full">
+    <div class="overflow-auto">
+      <table class="w-full">
+        <thead v-if="!props.disabledHeader">
+          <slot name="header" :item="props.itemHeader">
+            <tr>
+              <template v-for="(header, i) in itemHeaders" :key="i">
+                <th class="sticky top-0 bg-white">
+                  <div
+                    class="p-[14px] flex gap-[8px] text-gray font-label-sans-serif-large"
                     :style="{
   justifyContent: header.alignment || props.headerAlignment
-}"
-                  >
-                    <div class="flex">
-                      {{ header.label }}
-                    </div>
-                    <div
+}"
+                  >
+                    <div class="flex">
+                      {{ header.label }}
+                    </div>
+                    <div
                       :class="[
   'flex justify-center items-center cursor-pointer',
   sortkey === header.key && 'text-primary'
-]"
-                      @click="onSortBy(header.key)"
-                    >
-                      <Icon name="fa6-solid:sort" size="16" />
-                    </div>
-                  </div>
-                </th>
-              </template>
-            </tr>
-          </slot>
-        </thead>
-
-        <slot name="body" :items="items" :header="itemHeaders">
-          <tbody>
-            <tr
-              v-for="(body, i_body) in items"
-              :key="i_body"
-              @click="emit('click-row', body, i_body)"
-            >
-              <slot
-                name="item"
-                :item="body"
-                :header="itemHeaders"
-                :index="i_body"
-              >
-                <td
-                  v-for="(header, i_header) in itemHeaders"
-                  :key="i_header"
-                  class="font-body-medium border-y-[1px] border-mercury p-[14px]"
-                >
-                  <slot :name="`item-${header.key}`" :item="body">
-                    <div>
-                      {{ body[header.key] }}
-                    </div>
-                  </slot>
-                </td>
-              </slot>
-            </tr>
-          </tbody>
-        </slot>
-      </table>
-    </div>
-
-    <div
-      v-if="items.length === 0"
-      class="w-full h-full flex justify-center items-center p-[16px]"
-    >
-      <Icon name="pukaad:page-not-found" size="150"></Icon>
-    </div>
-
-    <div
-      v-if="items.length > 0"
-      class="p-[14px] flex justify-center items-center"
-    >
-      <Pagination
-        :totalPage="props.totalPage"
-        :totalVisible="props.paginationVisible"
-        @change="(e) => emit('change-page', e)"
-        @select="(e) => emit('select-page', e)"
-        v-model="page"
-      />
-    </div>
-  </div>
+]"
+                      @click="onSortBy(header.key)"
+                    >
+                      <Icon name="fa6-solid:sort" size="16" />
+                    </div>
+                  </div>
+                </th>
+              </template>
+            </tr>
+          </slot>
+        </thead>
+
+        <slot name="body" :items="items" :header="itemHeaders">
+          <tbody>
+            <tr
+              v-for="(body, i_body) in items"
+              :key="i_body"
+              @click="emit('click-row', body, i_body)"
+            >
+              <slot
+                name="item"
+                :item="body"
+                :header="itemHeaders"
+                :index="i_body"
+              >
+                <td
+                  v-for="(header, i_header) in itemHeaders"
+                  :key="i_header"
+                  class="font-body-medium border-y-[1px] border-mercury p-[14px]"
+                >
+                  <slot :name="`item-${header.key}`" :item="body">
+                    <div>
+                      {{ body[header.key] }}
+                    </div>
+                  </slot>
+                </td>
+              </slot>
+            </tr>
+          </tbody>
+        </slot>
+      </table>
+    </div>
+
+    <div
+      v-if="items.length === 0"
+      class="w-full h-full flex justify-center items-center p-[16px]"
+    >
+      <Icon name="pukaad:page-not-found" size="150"></Icon>
+    </div>
+
+    <div
+      v-if="items.length > 0"
+      class="p-[14px] flex justify-center items-center"
+    >
+      <Pagination
+        :totalPage="props.totalPage"
+        :totalVisible="props.paginationVisible"
+        @change="(e) => emit('change-page', e)"
+        @select="(e) => emit('select-page', e)"
+        v-model="page"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>