pukaad-ui-lib 1.459.0 → 1.461.0

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' : 'blog'
-" 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-color-post-it.d.vue.ts

@@ -0,0 +1,10 @@
+export interface CardColorPostItProps {
+    color?: string;
+    size?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<CardColorPostItProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardColorPostItProps> & Readonly<{}>, {
+    size: number;
+    color: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-color-post-it.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="flex">
+    <div
+      class="rounded-[4px] shrink-0 flex items-center justify-center"
+      :style="{
+  width: `${props.size}px`,
+  height: `${props.size}px`,
+  backgroundColor: background,
+  color: iconColor
+}"
+    >
+      <Icon name="fa6-solid:message" size="24" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  color: { type: String, required: false, default: "" },
+  size: { type: Number, required: false, default: 40 }
+});
+const DEFAULT_BACKGROUND = "#E6DEFF";
+const DEFAULT_ICON_COLOR = "#8836F1";
+const ICON_COLORS = {
+  "#E6DEFF": "#8836F1",
+  "#C9E8FF": "#1976B8",
+  "#DEFFE1": "#23AA99",
+  "#FFF5C2": "#FFD233",
+  "#FFDDDD": "#F80003",
+  // #FDD
+  "#FFDAC3": "#ED4D2D",
+  "#FFE6F4": "#F50D71"
+};
+const normalizeHex = (hex) => {
+  const value = hex.trim().toUpperCase();
+  if (/^#[0-9A-F]{3}$/.test(value)) {
+    return `#${value.slice(1).split("").map((c) => c + c).join("")}`;
+  }
+  return value;
+};
+const background = computed(() => props.color?.trim() || DEFAULT_BACKGROUND);
+const iconColor = computed(
+  () => ICON_COLORS[normalizeHex(background.value)] ?? DEFAULT_ICON_COLOR
+);
+</script>

package/dist/runtime/components/card/card-color-post-it.vue.d.ts

@@ -0,0 +1,10 @@
+export interface CardColorPostItProps {
+    color?: string;
+    size?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<CardColorPostItProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardColorPostItProps> & Readonly<{}>, {
+    size: number;
+    color: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-content/card-content-close.vue

@@ -1,13 +1,13 @@
 <template>
-  <Button
-    type="button"
-    circle
-    variant="ghost"
-    class="size-[24px] p-0 bg-white text-black hover:bg-white"
-    @click.stop="emit('close')"
-  >
-    <Icon name="lucide:x" size="16" />
-  </Button>
+  <Button
+    type="button"
+    circle
+    variant="ghost"
+    class="size-[24px] p-0 bg-white text-black hover:bg-white"
+    @click.stop="emit('close')"
+  >
+    <Icon name="lucide:x" size="16" />
+  </Button>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-content/card-content-disable.vue

@@ -1,3 +1,3 @@
-<template>
-  <div class="absolute inset-0 bg-cloud/80 z-content" />
-</template>
+<template>
+  <div class="absolute inset-0 bg-cloud/80 z-content" />
+</template>

package/dist/runtime/components/card/card-content/card-content-image.vue

@@ -1,25 +1,25 @@
 <template>
-  <div class="absolute inset-0 overflow-hidden rounded-[4px] bg-white">
-    <Image
-      :src="props.item.image"
-      :width="194"
-      :height="132"
-      fit="cover"
-      class="rounded-t-[4px]"
-    />
-
-    <p
-      class="absolute left-[8px] top-[140px] line-clamp-7 h-[168px] w-[178px] overflow-hidden break-words font-title-small-prominent text-black"
-    >
-      {{ props.item.content }}
-    </p>
-
-    <div
-      class="absolute left-[8px] top-[321px] w-[178px] truncate font-body-small text-gray"
-    >
-      {{ props.item.location }}
-    </div>
-  </div>
+  <div class="absolute inset-0 overflow-hidden rounded-[4px] bg-white">
+    <Image
+      :src="props.item.image"
+      :width="194"
+      :height="132"
+      fit="cover"
+      class="rounded-t-[4px]"
+    />
+
+    <p
+      class="absolute left-[8px] top-[140px] line-clamp-7 h-[168px] w-[178px] overflow-hidden break-words font-title-small-prominent text-black"
+    >
+      {{ props.item.content }}
+    </p>
+
+    <div
+      class="absolute left-[8px] top-[321px] w-[178px] truncate font-body-small text-gray"
+    >
+      {{ props.item.location }}
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-content/card-content-menu.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="flex flex-col items-start gap-[8px]">
-    <Button
-      v-for="action in visibleActions"
-      :key="action.name"
-      :variant="action.variant ?? (action.isActive ? 'default' : 'glass')"
-      size="icon"
-      :color="action.color ?? 'primary'"
-      class="h-[40px] w-[40px] rounded-full"
-      :style="action.clickable === false ? { cursor: 'default' } : {}"
-      @click.stop="onActionClick(action)"
-    >
-      <Icon :name="action.icon" :size="20" />
-    </Button>
-  </div>
+  <div class="flex flex-col items-start gap-[8px]">
+    <Button
+      v-for="action in visibleActions"
+      :key="action.name"
+      :variant="action.variant ?? (action.isActive ? 'default' : 'glass')"
+      size="icon"
+      :color="action.color ?? 'primary'"
+      class="h-[40px] w-[40px] rounded-full"
+      :style="action.clickable === false ? { cursor: 'default' } : {}"
+      @click.stop="onActionClick(action)"
+    >
+      <Icon :name="action.icon" :size="20" />
+    </Button>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-content/card-content-post-it.vue

@@ -1,25 +1,25 @@
 <template>
-  <div
-    class="absolute inset-0 rounded-[4px]"
-    :style="{ backgroundColor: props.item.backgroundColor }"
-  >
-    <!-- กล่องข้อความกลางการ์ด (จัดกลางแนวตั้ง) -->
-    <div
-      class="absolute left-[8px] top-[64.5px] flex h-[216px] w-[178px] items-center overflow-hidden"
-    >
-      <p
-        class="line-clamp-9 w-full break-words text-center font-title-small-prominent text-black"
-      >
-        {{ props.item.content }}
-      </p>
-    </div>
-
-    <div
-      class="absolute left-[8px] top-[321px] w-[178px] truncate font-body-small text-gray"
-    >
-      {{ props.item.location }}
-    </div>
-  </div>
+  <div
+    class="absolute inset-0 rounded-[4px]"
+    :style="{ backgroundColor: props.item.backgroundColor }"
+  >
+    <!-- กล่องข้อความกลางการ์ด (จัดกลางแนวตั้ง) -->
+    <div
+      class="absolute left-[8px] top-[64.5px] flex h-[216px] w-[178px] items-center overflow-hidden"
+    >
+      <p
+        class="line-clamp-9 w-full break-words text-center font-title-small-prominent text-black"
+      >
+        {{ props.item.content }}
+      </p>
+    </div>
+
+    <div
+      class="absolute left-[8px] top-[321px] w-[178px] truncate font-body-small text-gray"
+    >
+      {{ props.item.location }}
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-content/card-content-recommend.vue

@@ -1,36 +1,36 @@
 <template>
-  <div
-    v-if="items.length"
-    class="flex w-full min-w-0 flex-col gap-[16px] rounded-[8px] bg-bright p-[16px]"
-  >
-    <div class="font-title-medium-prominent">{{ title }}</div>
-
-    <ShadCarousel :opts="{ align: 'start', slidesToScroll: 1 }">
-      <ShadCarouselContent class="ml-0 gap-[12px]">
-        <ShadCarouselItem
-          v-for="item in items"
-          :key="item.id"
-          class="basis-[calc((100%_-_36px)/4)] p-0"
-        >
-          <CardContent :item="item" />
-        </ShadCarouselItem>
-      </ShadCarouselContent>
-
-      <template v-if="items.length > 4">
-        <ShadCarouselPrevious
-          class="left-[-14px] z-content size-[50px] border-0 bg-white/85 shadow-md hover:bg-white [&_svg]:!size-[32px]"
-        >
-          <Icon name="lucide:chevron-left" class="text-primary" />
-        </ShadCarouselPrevious>
-
-        <ShadCarouselNext
-          class="right-[-14px] z-content size-[50px] border-0 bg-white/85 shadow-md hover:bg-white [&_svg]:!size-[32px]"
-        >
-          <Icon name="lucide:chevron-right" class="text-primary" />
-        </ShadCarouselNext>
-      </template>
-    </ShadCarousel>
-  </div>
+  <div
+    v-if="items.length"
+    class="flex w-full min-w-0 flex-col gap-[16px] rounded-[8px] bg-bright p-[16px]"
+  >
+    <div class="font-title-medium-prominent">{{ title }}</div>
+
+    <ShadCarousel :opts="{ align: 'start', slidesToScroll: 1 }">
+      <ShadCarouselContent class="ml-0 gap-[12px]">
+        <ShadCarouselItem
+          v-for="item in items"
+          :key="item.id"
+          class="basis-[calc((100%_-_36px)/4)] p-0"
+        >
+          <CardContent :item="item" />
+        </ShadCarouselItem>
+      </ShadCarouselContent>
+
+      <template v-if="items.length > 4">
+        <ShadCarouselPrevious
+          class="left-[-14px] z-content size-[50px] border-0 bg-white/85 shadow-md hover:bg-white [&_svg]:!size-[32px]"
+        >
+          <Icon name="lucide:chevron-left" class="text-primary" />
+        </ShadCarouselPrevious>
+
+        <ShadCarouselNext
+          class="right-[-14px] z-content size-[50px] border-0 bg-white/85 shadow-md hover:bg-white [&_svg]:!size-[32px]"
+        >
+          <Icon name="lucide:chevron-right" class="text-primary" />
+        </ShadCarouselNext>
+      </template>
+    </ShadCarousel>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-content/card-content-select.vue

@@ -1,13 +1,13 @@
 <template>
-  <!-- ติ๊กแล้ว = พื้น dark ไม่มีขอบ / ยังไม่ติ๊ก = พื้นขาว + ขอบเทา 2px (ตาม Figma) -->
-  <ShadCheckbox
-    v-model="modelValue"
-    aria-label="เลือกการ์ดนี้"
-    class="size-[32px] cursor-pointer rounded-full border-2 border-gray bg-white shadow-none transition-colors hover:bg-bright data-[state=checked]:border-dark data-[state=checked]:bg-dark data-[state=checked]:text-white data-[state=checked]:hover:bg-dark"
-    @click.stop
-  >
-    <Icon name="lucide:check" :size="20" />
-  </ShadCheckbox>
+  <!-- ติ๊กแล้ว = พื้น dark ไม่มีขอบ / ยังไม่ติ๊ก = พื้นขาว + ขอบเทา 2px (ตาม Figma) -->
+  <ShadCheckbox
+    v-model="modelValue"
+    aria-label="เลือกการ์ดนี้"
+    class="size-[32px] cursor-pointer rounded-full border-2 border-gray bg-white shadow-none transition-colors hover:bg-bright data-[state=checked]:border-dark data-[state=checked]:bg-dark data-[state=checked]:text-white data-[state=checked]:hover:bg-dark"
+    @click.stop
+  >
+    <Icon name="lucide:check" :size="20" />
+  </ShadCheckbox>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-content/card-content-time.vue

@@ -1,11 +1,11 @@
 <template>
-  <div
-    v-if="timeState.text"
-    class="inline-flex items-center rounded-[4px] p-[4px] font-body-small text-white backdrop-blur-[4px]"
-    :class="timeState.color"
-  >
-    {{ timeState.text }}
-  </div>
+  <div
+    v-if="timeState.text"
+    class="inline-flex items-center rounded-[4px] p-[4px] font-body-small text-white backdrop-blur-[4px]"
+    :class="timeState.color"
+  >
+    {{ timeState.text }}
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-content/card-content-video.vue

@@ -1,29 +1,29 @@
 <template>
-  <div class="absolute inset-0 overflow-hidden rounded-[4px] bg-black">
-    <Video
-      :src="props.item.video?.src ?? ''"
-      :poster="props.item.video?.poster"
-      :width="194"
-      :height="345"
-      fit="cover"
-      :controls="false"
-      hover-play
-      muted
-      loop
-      :preload="props.item.video?.poster ? 'none' : 'metadata'"
-    />
-
-    <div
-      class="absolute inset-x-0 bottom-0 flex h-[84px] flex-col justify-end gap-1 bg-gradient-to-t from-black/70 to-transparent p-[8px]"
-    >
-      <p class="line-clamp-2 break-words font-title-small-prominent text-white">
-        {{ props.item.title }}
-      </p>
-      <div class="truncate font-body-small text-white">
-        {{ props.item.location }}
-      </div>
-    </div>
-  </div>
+  <div class="absolute inset-0 overflow-hidden rounded-[4px] bg-black">
+    <Video
+      :src="props.item.video?.src ?? ''"
+      :poster="props.item.video?.poster"
+      :width="194"
+      :height="345"
+      fit="cover"
+      :controls="false"
+      hover-play
+      muted
+      loop
+      :preload="props.item.video?.poster ? 'none' : 'metadata'"
+    />
+
+    <div
+      class="absolute inset-x-0 bottom-0 flex h-[84px] flex-col justify-end gap-1 bg-gradient-to-t from-black/70 to-transparent p-[8px]"
+    >
+      <p class="line-clamp-2 break-words font-title-small-prominent text-white">
+        {{ props.item.title }}
+      </p>
+      <div class="truncate font-body-small text-white">
+        {{ props.item.location }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,54 +1,54 @@
 <template>
-  <!--
-    ขอบใช้ outline ไม่ใช่ border
-    เพราะการ์ด fix 194x345 + overflow-hidden ถ้าใช้ border ตอน selectable ขอบ 1px→2px
-    จะกินเข้าใน คอนเทนต์ขยับ 1px — outline วาดนอกกล่อง ขนาดในคงที่ทุกสถานะ
-    selectable/selected = ขอบเทา 2px / ปกติ = silver 1px
-  -->
-  <div
+  <!--
+    ขอบใช้ outline ไม่ใช่ border
+    เพราะการ์ด fix 194x345 + overflow-hidden ถ้าใช้ border ตอน selectable ขอบ 1px→2px
+    จะกินเข้าใน คอนเทนต์ขยับ 1px — outline วาดนอกกล่อง ขนาดในคงที่ทุกสถานะ
+    selectable/selected = ขอบเทา 2px / ปกติ = silver 1px
+  -->
+  <div
     :class="[
   'relative h-[345px] w-[194px] overflow-hidden rounded-[4px] bg-white outline outline-offset-0',
   props.disable || props.disabledNavigate && !props.selectable ? 'cursor-default' : 'cursor-pointer',
   props.selectable || selected ? 'outline-2 outline-gray' : 'outline-1 outline-silver'
-]"
-    @mouseenter="hovering = true"
-    @mouseleave="hovering = false"
-    @click="handleClick"
-  >
-    <component :is="bodyComponent" v-if="bodyComponent" :item="props.item" />
-
-    <CardContentDisable v-if="props.disable" />
-
-    <div v-if="showTime" class="absolute left-[8px] top-[8px] z-content">
-      <CardContentTime :item="props.item" />
-    </div>
-
-    <div v-if="hasMenu" class="absolute left-[146px] top-[8px] z-content">
-      <CardContentMenu
-        :item="props.item"
-        :state="props.state"
-        :is-show="isMenuShow"
-        :hide-pin="props.hidePin"
-        :hide-preview="props.hidePreview"
-        :hide-bookmark="props.hideBookmark"
-        @action="onMenuAction"
-      />
-    </div>
-
-    <div
-      v-if="props.selectable"
-      class="absolute bottom-[8px] right-[8px] z-content"
-    >
-      <CardContentSelect v-model="selected" />
-    </div>
-
-    <div
-      v-if="props.closable"
-      class="absolute right-[8px] top-[8px] z-content"
-    >
-      <CardContentClose @close="emit('close', props.item)" />
-    </div>
-  </div>
+]"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+    @click="handleClick"
+  >
+    <component :is="bodyComponent" v-if="bodyComponent" :item="props.item" />
+
+    <CardContentDisable v-if="props.disable" />
+
+    <div v-if="showTime" class="absolute left-[8px] top-[8px] z-content">
+      <CardContentTime :item="props.item" />
+    </div>
+
+    <div v-if="hasMenu" class="absolute left-[146px] top-[8px] z-content">
+      <CardContentMenu
+        :item="props.item"
+        :state="props.state"
+        :is-show="isMenuShow"
+        :hide-pin="props.hidePin"
+        :hide-preview="props.hidePreview"
+        :hide-bookmark="props.hideBookmark"
+        @action="onMenuAction"
+      />
+    </div>
+
+    <div
+      v-if="props.selectable"
+      class="absolute bottom-[8px] right-[8px] z-content"
+    >
+      <CardContentSelect v-model="selected" />
+    </div>
+
+    <div
+      v-if="props.closable"
+      class="absolute right-[8px] top-[8px] z-content"
+    >
+      <CardContentClose @close="emit('close', props.item)" />
+    </div>
+  </div>
 </template>
 
 <script setup>