pukaad-ui-lib 1.376.0 → 1.376.2

package/dist/runtime/components/card/card-announce2.vue

@@ -1,108 +1,106 @@
 <template>
-  <div
-    class="w-[194px] min-h-[345px] rounded-[4px] shadow-xs outline outline-field-background-disabled cursor-pointer bg-white"
-    @click="emit('click', props.item.id)"
-  >
-  
-    <div
-      v-if="props.item.type === 'sale'"
-      class="relative flex flex-col gap-[14px]"
-    >
-      <Image
-        :width="194"
-        :height="194"
-        :src="props.item.media?.src"
-        class="rounded-t-[4px]"
-      />
-      <div class="flex flex-col gap-[14px] mx-auto w-[182px] h-full">
-        <div
-          class="font-title-small-prominent text-word-on-surface line-clamp-4 h-[96px]"
-        >
-          {{ props.item.title }}
-        </div>
-        <div class="font-headline-small text-word-on-surface">
-          {{ props.item.price }}
-        </div>
-      </div>
-      <LabelCardAtom
-        class="absolute top-[4px] left-[0px]"
-        :color="props.item.tag?.color"
-        :text="props.item.tag?.text"
-      />
-    </div>
-  
-    <div
-      v-else-if="props.item.type === 'video'"
-      class="relative w-full h-full group"
-    >
-      <video
-        ref="videoRef"
-        :src="props.item.media?.src"
-        :poster="props.item.media?.thumbnail"
-        preload="none"
-        class="w-full h-full object-cover rounded-[4px]"
-        muted
-        loop
-        @mouseenter="playVideo"
-        @mouseleave="showPoster"
-      />
-      <div
-        class="absolute bottom-0 left-0 w-full p-[8px] flex flex-col justify-between h-[88px]"
-      >
-        <div
-          class="text-white font-title-small-prominent line-clamp-2 h-[48px] w-[178px] text-word-on-surface-variant"
-        >
-          {{ props.item.title }}
-        </div>
-        <div class="text-white font-body-small">
-          {{ props.item.location }}
-        </div>
-      </div>
-    </div>
-
-
-    <div
-      v-else-if="props.item.type === 'note'"
-      class="w-full h-full rounded-[4px] pt-[76px] px-[8px] pb-[8px]"
-      :style="{ backgroundColor: props.item.color || '#DEFFE1' }"
-    >
-      <div class="flex flex-col justify-between h-full">
-        <div
-          class="flex font-title-small-prominent text-word-on-surface w-[182px] h-[210px] line-clamp-8 text-center overflow-hidden props.items-center"
-        >
-          {{ props.item.content }}
-        </div>
-        <div class="font-body-small text-gray">
-          {{ props.item.location }}
-        </div>
-      </div>
-    </div>
-
-
-    <div
-      v-else-if="props.item.type === 'image'"
-      class="w-full h-full rounded-[4px]"
-    >
-      <div class="flex flex-col justify-between h-full">
-        <div class="flex flex-col gap-[8px]">
-          <Image
-            width="194"
-            height="129"
-            :src="props.item.media?.src"
-            class="rounded-t-[4px]"
-          />
-          <div
-            class="w-[182px] text-word-onsurface font-title-small-prominent mx-auto line-clamp-7"
-          >
-            {{ props.item.content }}
-          </div>
-        </div>
-        <div class="px-[8px] pb-[8px] font-body-small text-gray">
-          {{ props.item.location }}
-        </div>
-      </div>
-    </div>
-  </div>
+  <div
+    class="w-[194px] min-h-[345px] rounded-[4px] shadow-xs outline outline-field-background-disabled cursor-pointer bg-white"
+    @click="emit('click', props.item.id)"
+  >
+  
+    <div
+      v-if="props.item.type === 'sale'"
+      class="relative flex flex-col gap-[14px]"
+    >
+      <Image
+        :width="194"
+        :height="194"
+        :src="props.item.media?.src"
+        class="rounded-t-[4px]"
+      />
+      <div class="flex flex-col gap-[14px] mx-auto w-[182px] h-full">
+        <div
+          class="font-title-small-prominent text-word-on-surface line-clamp-4 h-[96px]"
+        >
+          {{ props.item.title }}
+        </div>
+        <div class="font-headline-small text-word-on-surface">
+          {{ props.item.price }}
+        </div>
+      </div>
+      <LabelCardAtom
+        class="absolute top-[4px] left-[0px]"
+        :color="props.item.tag?.color"
+        :text="props.item.tag?.text"
+      />
+    </div>
+  
+    <div
+      v-else-if="props.item.type === 'video'"
+      class="relative w-full h-full group"
+    >
+      <video
+        ref="videoRef"
+        :src="props.item.media?.src"
+        :poster="props.item.media?.thumbnail"
+        preload="none"
+        class="w-full h-full object-cover rounded-[4px]"
+        muted
+        loop
+        @mouseenter="playVideo"
+        @mouseleave="showPoster"
+      />
+      <div
+        class="absolute bottom-0 left-0 w-full p-[8px] flex flex-col justify-between h-[88px]"
+      >
+        <div
+          class="text-white font-title-small-prominent line-clamp-2 h-[48px] w-[178px] text-word-on-surface-variant"
+        >
+          {{ props.item.title }}
+        </div>
+        <div class="text-white font-body-small">
+          {{ props.item.location }}
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-else-if="props.item.type === 'note'"
+      class="w-full h-full rounded-[4px] pt-[76px] px-[8px] pb-[8px]"
+      :style="{ backgroundColor: props.item.color || '#DEFFE1' }"
+    >
+      <div class="flex flex-col justify-between h-full">
+        <div
+          class="flex font-title-small-prominent text-word-on-surface w-[182px] h-[210px] line-clamp-8 text-center overflow-hidden props.items-center"
+        >
+          {{ props.item.content }}
+        </div>
+        <div class="font-body-small text-gray">
+          {{ props.item.location }}
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-else-if="props.item.type === 'image'"
+      class="w-full h-full rounded-[4px]"
+    >
+      <div class="flex flex-col justify-between h-full">
+        <div class="flex flex-col gap-[8px]">
+          <Image
+            width="194"
+            height="129"
+            :src="props.item.media?.src"
+            class="rounded-t-[4px]"
+          />
+          <div
+            class="w-[182px] text-word-onsurface font-title-small-prominent mx-auto line-clamp-7"
+          >
+            {{ props.item.content }}
+          </div>
+        </div>
+        <div class="px-[8px] pb-[8px] font-body-small text-gray">
+          {{ props.item.location }}
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-blog.vue

@@ -1,53 +1,53 @@
 <template>
-    <div class="flex gap-[16px] cursor-pointer items-start" @click="onClick">
-        <Image v-if="displayImage" :src="displayImage" :width="227" :height="128" class="rounded-[4px]"
-            fit="cover" />
-        <div class="flex flex-col gap-[4px] w-full">
-            <div ref="titleRef" class="font-title-small-prominent"
-                :class="displayImage ? 'line-clamp-3' : 'line-clamp-2'">
-                {{ props.item.title }}
-            </div>
-            <div v-if="props.item.author" class="flex gap-[4px] text-body-medium items-center flex-wrap">
-                <div class="flex gap-[4px] items-center">
-                    <div>{{ props.item.author.name }}</div>
-                </div>
-                <div class="text-gray flex gap-[4px] items-center">
-                    <div>•</div>
-                    <div>{{ convertDateTorelativeText(displayDate) }}</div>
-                </div>
-            </div>
-            <div v-if="!displayImage" class="text-body-large text-gray"
-                :class="isTitleTwoLines ? 'line-clamp-1' : 'line-clamp-2'">
-                {{ displayDescription }}
-            </div>
-            <div class="flex justify-between">
-                <div class="flex gap-[24px] text-body-large text-gray">
-                    <div class="flex items-center gap-[4px]">
-                        <Icon name="pukaad:thumbs-up-regular" :size="20" />
-                        <div>{{ convertNumber(props.item.like_count ?? 0) }}</div>
-                    </div>
-                    <div class="flex items-center gap-[4px]">
-                        <Icon name="lucide:message-circle-more" :size="20" />
-                        <div>{{ convertNumber(props.item.comment_count ?? 0) }}</div>
-                    </div>
-                    <div class="flex items-center gap-[4px]">
-                        <Icon name="uil:share" :size="20" />
-                        <div>{{ convertNumber(props.item.share_count ?? 0) }}</div>
-                    </div>
-                </div>
-
-                <div v-if="!props.disabledMenu" class="flex items-center gap-[8px] text-gray" @click.stop>
-                    <Icon v-if="isPinned" name="mage:pin-fill" :size="20" />
+    <div class="flex gap-[16px] cursor-pointer items-start" @click="onClick">
+        <Image v-if="displayImage" :src="displayImage" :width="227" :height="128" class="rounded-[4px]"
+            fit="cover" />
+        <div class="flex flex-col gap-[4px] w-full">
+            <div ref="titleRef" class="font-title-small-prominent"
+                :class="displayImage ? 'line-clamp-3' : 'line-clamp-2'">
+                {{ props.item.title }}
+            </div>
+            <div v-if="props.item.author" class="flex gap-[4px] text-body-medium items-center flex-wrap">
+                <div class="flex gap-[4px] items-center">
+                    <div>{{ props.item.author.name }}</div>
+                </div>
+                <div class="text-gray flex gap-[4px] items-center">
+                    <div>•</div>
+                    <div>{{ convertDateTorelativeText(displayDate) }}</div>
+                </div>
+            </div>
+            <div v-if="!displayImage" class="text-body-large text-gray"
+                :class="isTitleTwoLines ? 'line-clamp-1' : 'line-clamp-2'">
+                {{ displayDescription }}
+            </div>
+            <div class="flex justify-between">
+                <div class="flex gap-[24px] text-body-large text-gray">
+                    <div class="flex items-center gap-[4px]">
+                        <Icon name="pukaad:thumbs-up-regular" :size="20" />
+                        <div>{{ convertNumber(props.item.like_count ?? 0) }}</div>
+                    </div>
+                    <div class="flex items-center gap-[4px]">
+                        <Icon name="lucide:message-circle-more" :size="20" />
+                        <div>{{ convertNumber(props.item.comment_count ?? 0) }}</div>
+                    </div>
+                    <div class="flex items-center gap-[4px]">
+                        <Icon name="uil:share" :size="20" />
+                        <div>{{ convertNumber(props.item.share_count ?? 0) }}</div>
+                    </div>
+                </div>
+
+                <div v-if="!props.disabledMenu" class="flex items-center gap-[8px] text-gray" @click.stop>
+                    <Icon v-if="isPinned" name="mage:pin-fill" :size="20" />
                     <PickerOptionMenuUser v-if="props.item.author" :state="
   props.isMyProfile ? isPinned ? 'my-blog-pined' : 'my-blog' : 'report-announce'
-" disabled-padding @blog-unpin="$emit('blog-unpinned', props.item.id)"
-                        @blog-pin="$emit('blog-pinned', props.item.id)" @blog-edit="$emit('blog-edit')"
-                        @blog-delete="$emit('blog-deleted', props.item.id)" />
-                </div>
-
-            </div>
-        </div>
-    </div>
+" disabled-padding @blog-unpin="$emit('blog-unpinned', props.item.id)"
+                        @blog-pin="$emit('blog-pinned', props.item.id)" @blog-edit="$emit('blog-edit')"
+                        @blog-delete="$emit('blog-deleted', props.item.id)" />
+                </div>
+
+            </div>
+        </div>
+    </div>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-opening-hours.vue

@@ -1,56 +1,56 @@
 <template>
-  <div class="font-body-large flex flex-col gap-[4px] w-full">
-    <!-- สถานะปิดชั่วคราว -->
-    <div
-      v-if="props.openStatus === 'temporarily_closed'"
-      class="font-body-large-prominent text-error"
-    >
-      ปิดชั่วคราว
-    </div>
-
-    <!-- เวลาทำการปกติ -->
-    <div
-      v-for="(line, index) in lines"
-      :key="index"
-      class="flex items-start justify-between"
-    >
-      <span>{{ line.day }}</span>
-      <div class="flex flex-col items-end">
-        <span v-for="(time, timeIndex) in line.time_lines" :key="timeIndex">
-          {{ time }}
-        </span>
-      </div>
-    </div>
-
-    <!-- วันทำการพิเศษ -->
-    <template v-if="formattedSpecialDays.length">
-      <div class="font-body-large-prominent text-warning">วันทำการพิเศษ</div>
-      <div
-        v-for="(special, index) in formattedSpecialDays"
-        :key="index"
-        class="flex items-start justify-between text-warning"
-      >
-        <span>{{ special.date_label }}</span>
-        <div class="flex flex-col items-end">
-          <span
-            v-for="(time, timeIndex) in special.time_lines"
-            :key="timeIndex"
-          >
-            {{ time }}
-          </span>
-        </div>
-      </div>
-    </template>
-
-    <div
+  <div class="font-body-large flex flex-col gap-[4px] w-full">
+    <!-- สถานะปิดชั่วคราว -->
+    <div
+      v-if="props.openStatus === 'temporarily_closed'"
+      class="font-body-large-prominent text-error"
+    >
+      ปิดชั่วคราว
+    </div>
+
+    <!-- เวลาทำการปกติ -->
+    <div
+      v-for="(line, index) in lines"
+      :key="index"
+      class="flex items-start justify-between"
+    >
+      <span>{{ line.day }}</span>
+      <div class="flex flex-col items-end">
+        <span v-for="(time, timeIndex) in line.time_lines" :key="timeIndex">
+          {{ time }}
+        </span>
+      </div>
+    </div>
+
+    <!-- วันทำการพิเศษ -->
+    <template v-if="formattedSpecialDays.length">
+      <div class="font-body-large-prominent text-warning">วันทำการพิเศษ</div>
+      <div
+        v-for="(special, index) in formattedSpecialDays"
+        :key="index"
+        class="flex items-start justify-between text-warning"
+      >
+        <span>{{ special.date_label }}</span>
+        <div class="flex flex-col items-end">
+          <span
+            v-for="(time, timeIndex) in special.time_lines"
+            :key="timeIndex"
+          >
+            {{ time }}
+          </span>
+        </div>
+      </div>
+    </template>
+
+    <div
       v-if="
   !lines.length && !formattedSpecialDays.length && props.openStatus !== 'temporarily_closed'
-"
-      class="text-cloud"
-    >
-      ไม่มีข้อมูลเวลาทำการ
-    </div>
-  </div>
+"
+      class="text-cloud"
+    >
+      ไม่มีข้อมูลเวลาทำการ
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-place-detail.vue

@@ -1,102 +1,102 @@
 <template>
-  <Card variant="outline">
-    <div class="flex flex-col gap-[16px]">
-      <div class="flex gap-[12px]">
-        <Icon
-          name="lucide:circle-alert"
-          :size="20"
-          class="text-primary shrink-0 mt-[2px]"
-        />
-        <div v-if="props.item.description">{{ props.item.description }}</div>
-        <div v-else class="text-cloud">ไม่มีข้อมูลคำอธิบาย</div>
-      </div>
-
-      <div class="flex gap-[12px]">
-        <Icon
-          name="lucide:tag"
-          :size="20"
-          class="text-primary shrink-0 mt-[2px]"
-        />
-        <div v-if="categoryText">{{ categoryText }}</div>
-        <div v-else class="text-cloud">ไม่มีข้อมูลประเภท</div>
-      </div>
-
-      <div class="flex gap-[12px]">
-        <Icon
-          name="lucide:clock"
-          :size="20"
+  <Card variant="outline">
+    <div class="flex flex-col gap-[16px]">
+      <div class="flex gap-[12px]">
+        <Icon
+          name="lucide:circle-alert"
+          :size="20"
+          class="text-primary shrink-0 mt-[2px]"
+        />
+        <div v-if="props.item.description">{{ props.item.description }}</div>
+        <div v-else class="text-cloud">ไม่มีข้อมูลคำอธิบาย</div>
+      </div>
+
+      <div class="flex gap-[12px]">
+        <Icon
+          name="lucide:tag"
+          :size="20"
+          class="text-primary shrink-0 mt-[2px]"
+        />
+        <div v-if="categoryText">{{ categoryText }}</div>
+        <div v-else class="text-cloud">ไม่มีข้อมูลประเภท</div>
+      </div>
+
+      <div class="flex gap-[12px]">
+        <Icon
+          name="lucide:clock"
+          :size="20"
           :class="[
   'shrink-0 mt-[2px]',
   props.item.open_status === 'temporarily_closed' ? 'text-destructive' : 'text-primary '
-]"
-        />
-        <div class="flex-1 min-w-0">
-          <CardOpeningHours
-            :items="props.item.opening_hours"
-            :special-days="props.item.special_days"
-            :open-status="props.item.open_status"
-          />
-        </div>
-      </div>
-
-      <div class="flex gap-[12px]">
-        <Icon
-          name="lucide:phone"
-          :size="20"
-          class="text-primary shrink-0 mt-[2px]"
-        />
-        <div v-if="props.item.phone">{{ props.item.phone }}</div>
-        <div v-else class="text-cloud">ไม่มีข้อมูลเบอร์โทรศัพท์</div>
-      </div>
-      <template v-if="!props.item.owner_profile_id">
-        <div class="flex gap-[12px]">
-          <Icon
-            name="lucide:shield-check"
-            :size="20"
-            class="text-primary shrink-0 mt-[2px]"
-          />
-          <div class="font-body-large">หากคุณเป็นเจ้าของธุรกิจนี้</div>
-        </div>
-        <div
-          class="flex gap-[12px] hover:cursor-pointer"
-          @click="isOpenModalSuggestEdit = true"
-        >
-          <Icon
-            name="lucide:square-pen"
-            :size="20"
-            class="text-primary shrink-0 mt-[2px]"
-          />
-          <div class="font-body-large">แนะนำให้แก้ไข</div>
-        </div>
-      </template>
-      <Divider />
-
-      <div v-if="socialLinks.length" class="flex flex-col gap-[8px]">
-        <div
-          v-for="(linkItem, index) in socialLinks"
-          :key="index"
-          class="flex gap-[12px] items-center cursor-pointer hover:underline"
-          @click="onClickLink(linkItem.link)"
-        >
-          <Icon
-            :name="`pukaad-social:${linkItem.name}`"
-            :size="20"
-            class="shrink-0"
-          />
-          <span class="truncate">{{ linkItem.link }}</span>
-        </div>
-      </div>
-      <div v-else class="flex gap-[12px] items-center">
-        <Icon name="lucide:link" :size="20" class="text-primary shrink-0" />
-        <span class="text-cloud">ไม่มีข้อมูลช่องทางติดต่อ</span>
-      </div>
-    </div>
-    <ModalSuggestEditPlace
-      v-if="!props.item.owner_profile_id"
-      v-model="isOpenModalSuggestEdit"
-      :item="props.item"
-    />
-  </Card>
+]"
+        />
+        <div class="flex-1 min-w-0">
+          <CardOpeningHours
+            :items="props.item.opening_hours"
+            :special-days="props.item.special_days"
+            :open-status="props.item.open_status"
+          />
+        </div>
+      </div>
+
+      <div class="flex gap-[12px]">
+        <Icon
+          name="lucide:phone"
+          :size="20"
+          class="text-primary shrink-0 mt-[2px]"
+        />
+        <div v-if="props.item.phone">{{ props.item.phone }}</div>
+        <div v-else class="text-cloud">ไม่มีข้อมูลเบอร์โทรศัพท์</div>
+      </div>
+      <template v-if="!props.item.owner_profile_id">
+        <div class="flex gap-[12px]">
+          <Icon
+            name="lucide:shield-check"
+            :size="20"
+            class="text-primary shrink-0 mt-[2px]"
+          />
+          <div class="font-body-large">หากคุณเป็นเจ้าของธุรกิจนี้</div>
+        </div>
+        <div
+          class="flex gap-[12px] hover:cursor-pointer"
+          @click="isOpenModalSuggestEdit = true"
+        >
+          <Icon
+            name="lucide:square-pen"
+            :size="20"
+            class="text-primary shrink-0 mt-[2px]"
+          />
+          <div class="font-body-large">แนะนำให้แก้ไข</div>
+        </div>
+      </template>
+      <Divider />
+
+      <div v-if="socialLinks.length" class="flex flex-col gap-[8px]">
+        <div
+          v-for="(linkItem, index) in socialLinks"
+          :key="index"
+          class="flex gap-[12px] items-center cursor-pointer hover:underline"
+          @click="onClickLink(linkItem.link)"
+        >
+          <Icon
+            :name="`pukaad-social:${linkItem.name}`"
+            :size="20"
+            class="shrink-0"
+          />
+          <span class="truncate">{{ linkItem.link }}</span>
+        </div>
+      </div>
+      <div v-else class="flex gap-[12px] items-center">
+        <Icon name="lucide:link" :size="20" class="text-primary shrink-0" />
+        <span class="text-cloud">ไม่มีข้อมูลช่องทางติดต่อ</span>
+      </div>
+    </div>
+    <ModalSuggestEditPlace
+      v-if="!props.item.owner_profile_id"
+      v-model="isOpenModalSuggestEdit"
+      :item="props.item"
+    />
+  </Card>
 </template>
 
 <script setup>