pukaad-ui-lib 1.431.0 → 1.433.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.431.0",
+  "version": "1.433.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/assets/svg/id-card-selfie-guideline.svg

@@ -0,0 +1,15 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="304.943" height="530" viewBox="0 0 304.943 530" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ID Card Selfie Guideline">
+<g id="Face">
+<mask id="id-card-selfie-face-mask" fill="white">
+<path d="M152.471 0C209.301 0 257.223 54.4901 272.03 128.893C273.567 128.534 275.145 128.347 276.755 128.347C292.323 128.347 304.943 145.777 304.943 167.278C304.943 188.78 292.323 206.21 276.755 206.21C276.216 206.21 275.68 206.187 275.148 206.146C265.574 290.604 214.295 355.092 152.471 355.092C90.6462 355.092 39.367 290.603 29.793 206.146C29.2617 206.187 28.7262 206.21 28.1875 206.21C12.6199 206.21 5.97154e-06 188.78 0 167.278C0 145.777 12.6199 128.347 28.1875 128.347C29.7971 128.347 31.3752 128.535 32.9111 128.893C47.7188 54.4902 95.6405 0.000256103 152.471 0Z"/>
+</mask>
+<path d="M152.471 0V-6H152.471L152.471 0ZM272.03 128.893L266.146 130.064L267.356 136.143L273.392 134.736L272.03 128.893ZM276.755 128.347V122.347V122.347V128.347ZM304.943 167.278H310.943V167.278H304.943ZM276.755 206.21V212.21V212.21V206.21ZM275.148 206.146L275.613 200.163L269.839 199.715L269.187 205.47L275.148 206.146ZM152.471 355.092L152.471 361.092H152.471V355.092ZM29.793 206.146L35.7548 205.47L35.1025 199.716L29.3291 200.163L29.793 206.146ZM28.1875 206.21L28.1874 212.21H28.1875V206.21ZM0 167.278H-6V167.278H0ZM28.1875 128.347V122.347H28.1874L28.1875 128.347ZM32.9111 128.893L31.5495 134.736L37.5859 136.143L38.7957 130.064L32.9111 128.893ZM152.471 0V6C205.088 6 251.582 56.8896 266.146 130.064L272.03 128.893L277.915 127.721C262.863 52.0906 213.514 -6 152.471 -6V0ZM272.03 128.893L273.392 134.736C274.493 134.479 275.614 134.347 276.755 134.347V128.347V122.347C274.675 122.347 272.64 122.59 270.668 123.049L272.03 128.893ZM276.755 128.347V134.347C282.134 134.347 287.54 137.347 291.827 143.268C296.109 149.183 298.943 157.652 298.943 167.278H304.943H310.943C310.943 155.403 307.467 144.407 301.547 136.231C295.632 128.062 286.943 122.347 276.755 122.347V128.347ZM304.943 167.278H298.943C298.943 176.905 296.109 185.374 291.827 191.288C287.54 197.21 282.134 200.21 276.755 200.21V206.21V212.21C286.943 212.21 295.632 206.495 301.547 198.326C307.467 190.15 310.943 179.153 310.943 167.278H304.943ZM276.755 206.21V200.21C276.387 200.21 276.008 200.194 275.613 200.163L275.148 206.146L274.684 212.128C275.353 212.179 276.044 212.21 276.755 212.21V206.21ZM275.148 206.146L269.187 205.47C264.509 246.73 249.668 282.838 228.753 308.5C207.845 334.152 181.15 349.092 152.471 349.092V355.092V361.092C185.616 361.092 215.473 343.787 238.054 316.081C260.628 288.384 276.213 250.019 281.11 206.821L275.148 206.146ZM152.471 355.092L152.471 349.092C123.792 349.092 97.0965 334.152 76.1888 308.5C55.2735 282.838 40.4319 246.73 35.7548 205.47L29.793 206.146L23.8312 206.821C28.728 250.019 44.3131 288.384 66.887 316.081C89.4686 343.787 119.325 361.092 152.471 361.092L152.471 355.092ZM29.793 206.146L29.3291 200.163C28.9337 200.194 28.5539 200.21 28.1875 200.21V206.21V212.21C28.8986 212.21 29.5897 212.179 30.2568 212.128L29.793 206.146ZM28.1875 206.21L28.1876 200.21C22.8082 200.21 17.4031 197.21 13.1158 191.288C8.8337 185.374 6 176.905 6 167.278H0H-6C-6 179.153 -2.52377 190.15 3.39597 198.326C9.31052 206.495 17.9992 212.21 28.1874 212.21L28.1875 206.21ZM0 167.278H6C6 157.652 8.8337 149.183 13.1158 143.268C17.4031 137.347 22.8081 134.347 28.1876 134.347L28.1875 128.347L28.1874 122.347C17.9992 122.347 9.31052 128.062 3.39597 136.231C-2.52378 144.407 -6 155.403 -6 167.278H0ZM28.1875 128.347V134.347C29.327 134.347 30.4484 134.479 31.5495 134.736L32.9111 128.893L34.2728 123.049C32.3021 122.59 30.2672 122.347 28.1875 122.347V128.347ZM32.9111 128.893L38.7957 130.064C53.3589 56.8897 99.8532 6.00024 152.471 6L152.471 0L152.471 -6C91.4278 -5.99972 42.0787 52.0907 27.0265 127.721L32.9111 128.893Z" fill="#1976B8" mask="url(#id-card-selfie-face-mask)"/>
+</g>
+<g id="ID Card">
+<rect x="33.2661" y="377.608" width="226.398" height="149.392" rx="18" stroke="#1976B8" stroke-width="6"/>
+<circle cx="55.7474" cy="400.116" r="11.3745" stroke="#1976B8" stroke-width="6"/>
+<rect x="202.472" y="449" width="45.8508" height="66.3858" stroke="#1976B8" stroke-width="6"/>
+</g>
+</g>
+</svg>

package/dist/runtime/assets/svg/passport-guideline.svg

@@ -0,0 +1,6 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="464" height="554" viewBox="0 0 464 554" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Passport Guideline">
+<rect x="3" y="3" width="458" height="548" rx="18" stroke="#1976B8" stroke-width="6"/>
+<rect x="30" y="320" width="133" height="137" stroke="#1976B8" stroke-width="6"/>
+</g>
+</svg>

package/dist/runtime/components/badge/badge-count.d.vue.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from "vue";
+export type BadgeCountColor = "destructive" | "primary";
+export interface BadgeCountProps {
+    count?: number;
+    max?: number;
+    color?: BadgeCountColor;
+    disabledDot?: boolean;
+    class?: HTMLAttributes["class"];
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BadgeCountProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeCountProps> & Readonly<{}>, {
+    class: HTMLAttributes["class"];
+    color: BadgeCountColor;
+    count: number;
+    max: number;
+    disabledDot: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/badge/badge-count.vue

@@ -0,0 +1,45 @@
+<template>
+  <span v-if="slots.default" :class="['relative inline-flex', props.class]">
+    <slot />
+    <span
+      v-if="mode !== 'none'"
+      :class="[badgeClass, 'absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 pointer-events-none']"
+      :aria-label="ariaLabel"
+    >
+      {{ text }}
+    </span>
+  </span>
+  <span
+    v-else-if="mode !== 'none'"
+    :class="[badgeClass, props.class]"
+    :aria-label="ariaLabel"
+  >
+    {{ text }}
+  </span>
+</template>
+
+<script setup>
+import { computed, useSlots } from "vue";
+const props = defineProps({
+  count: { type: Number, required: false, default: 0 },
+  max: { type: Number, required: false, default: 99 },
+  color: { type: String, required: false, default: "destructive" },
+  disabledDot: { type: Boolean, required: false, default: false },
+  class: { type: null, required: false, default: void 0 }
+});
+const slots = useSlots();
+const mode = computed(() => {
+  if (!Number.isFinite(props.count) || props.count <= 0) return "none";
+  if (props.count === 1 && !props.disabledDot) return "dot";
+  return "count";
+});
+const text = computed(() => {
+  if (mode.value !== "count") return "";
+  return props.count > props.max ? `${props.max}+` : String(props.count);
+});
+const badgeClass = computed(() => [
+  props.color === "primary" ? "bg-primary" : "bg-destructive",
+  mode.value === "dot" ? "inline-block size-[10px] rounded-full shrink-0" : "inline-flex items-center justify-center h-[18px] min-w-[18px] px-[4px] rounded-full text-white text-[10px] leading-none shrink-0"
+]);
+const ariaLabel = computed(() => `\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E2D\u0E48\u0E32\u0E19 ${props.count}`);
+</script>

package/dist/runtime/components/badge/badge-count.vue.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from "vue";
+export type BadgeCountColor = "destructive" | "primary";
+export interface BadgeCountProps {
+    count?: number;
+    max?: number;
+    color?: BadgeCountColor;
+    disabledDot?: boolean;
+    class?: HTMLAttributes["class"];
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BadgeCountProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeCountProps> & Readonly<{}>, {
+    class: HTMLAttributes["class"];
+    color: BadgeCountColor;
+    count: number;
+    max: number;
+    disabledDot: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -38,8 +38,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onBlog-updated"?: ((id: string, data: any) => any) | undefined;
     "onBlog-deleted"?: ((id: string) => any) | undefined;
 }>, {
-    disabledMenu: boolean;
     isMyProfile: boolean;
+    disabledMenu: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -38,8 +38,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onBlog-updated"?: ((id: string, data: any) => any) | undefined;
     "onBlog-deleted"?: ((id: string) => any) | undefined;
 }>, {
-    disabledMenu: boolean;
     isMyProfile: boolean;
+    disabledMenu: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/card/card-file.d.vue.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from "vue";
+export interface CardFileProps {
+    class?: HTMLAttributes["class"];
+    fileName?: string;
+    /** bytes (number) หรือข้อความสำเร็จรูป เช่น "57KB" — แสดงเฉพาะ layout horizontal */
+    fileSize?: number | string;
+    layout?: "horizontal" | "vertical";
+}
+declare const __VLS_export: import("vue").DefineComponent<CardFileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardFileProps> & Readonly<{}>, {
+    fileName: string;
+    fileSize: number | string;
+    layout: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,67 @@
+<template>
+  <!-- vertical: กล่องไฟล์ในช่องอัปโหลด (Input - File) -->
+  <div
+    v-if="isVertical"
+    :class="
+  cn(
+    'bg-white border border-mercury rounded-[6px] size-[100px] p-[8px] flex flex-col items-center justify-center gap-[8px] cursor-pointer',
+    props.class
+  )
+"
+    :title="props.fileName"
+  >
+    <div class="size-[32px] shrink-0 flex items-center justify-center">
+      <Icon name="pukaad:file-pdf" class="w-[24px] h-[32px]" />
+    </div>
+    <span class="font-body-small text-black text-center w-full truncate">
+      {{ props.fileName }}
+    </span>
+  </div>
+
+  <!-- horizontal: การ์ดไฟล์แนบ (Card FDF Chat) -->
+  <div
+    v-else
+    :class="
+  cn(
+    'bg-white shadow-sm flex items-center gap-[8px] p-[8px] rounded-[8px] w-fit cursor-pointer',
+    props.class
+  )
+"
+    :title="props.fileName"
+  >
+    <div class="size-[40px] shrink-0 flex items-center justify-center">
+      <Icon name="pukaad:file-pdf" class="w-[30px] h-[40px]" />
+    </div>
+
+    <div class="flex flex-col gap-[4px] items-start justify-center">
+      <span
+        class="font-body-medium-prominent text-black max-w-[300px] truncate"
+      >
+        {{ props.fileName }}
+      </span>
+      <span v-if="displaySize" class="font-body-small text-gray">
+        {{ displaySize }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { cn } from "#pukaad-ui/runtime/plugins/shadcn";
+const props = defineProps({
+  class: { type: null, required: false },
+  fileName: { type: String, required: false, default: "" },
+  fileSize: { type: [Number, String], required: false, default: "" },
+  layout: { type: String, required: false, default: "horizontal" }
+});
+const isVertical = computed(() => props.layout === "vertical");
+const displaySize = computed(() => {
+  const size = props.fileSize;
+  if (!size) return "";
+  if (typeof size === "string") return `\u0E02\u0E19\u0E32\u0E14 ${size}`;
+  if (size < 1024) return `\u0E02\u0E19\u0E32\u0E14 ${size}B`;
+  if (size < 1024 * 1024) return `\u0E02\u0E19\u0E32\u0E14 ${Math.round(size / 1024)}KB`;
+  return `\u0E02\u0E19\u0E32\u0E14 ${(size / (1024 * 1024)).toFixed(1)}MB`;
+});
+</script>

package/dist/runtime/components/card/card-file.vue.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from "vue";
+export interface CardFileProps {
+    class?: HTMLAttributes["class"];
+    fileName?: string;
+    /** bytes (number) หรือข้อความสำเร็จรูป เช่น "57KB" — แสดงเฉพาะ layout horizontal */
+    fileSize?: number | string;
+    layout?: "horizontal" | "vertical";
+}
+declare const __VLS_export: import("vue").DefineComponent<CardFileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardFileProps> & Readonly<{}>, {
+    fileName: string;
+    fileSize: number | string;
+    layout: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-profile/card-profile-header.d.vue.ts

@@ -7,8 +7,8 @@ declare const __VLS_export: import("vue").DefineComponent<CardProfileAboutProps,
     onChat?: (() => any) | undefined;
 }>, {
     type: "article" | "media" | "sale-info";
-    preview: boolean;
     disabledPadding: boolean;
+    preview: boolean;
     optionMenuButtonType: "solid" | "text";
     actionsHidden: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/card/card-profile/card-profile-header.vue.d.ts

@@ -7,8 +7,8 @@ declare const __VLS_export: import("vue").DefineComponent<CardProfileAboutProps,
     onChat?: (() => any) | undefined;
 }>, {
     type: "article" | "media" | "sale-info";
-    preview: boolean;
     disabledPadding: boolean;
+    preview: boolean;
     optionMenuButtonType: "solid" | "text";
     actionsHidden: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/chat/chat-conversation-item.d.vue.ts

@@ -26,13 +26,13 @@ declare const __VLS_export: import("vue").DefineComponent<ChatConversationItemPr
     name: string;
     avatar: string | null;
     muted: boolean;
+    disabledMenu: boolean;
     preview: string;
     to: string;
     active: boolean;
     typing: boolean;
     unreadCount: number;
     pinned: boolean;
-    disabledMenu: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/chat/chat-conversation-item.vue

@@ -25,23 +25,14 @@
       </div>
       <div
         v-if="muted || unreadCount > 0"
-        :class="['shrink-0', menuVisibleClass && 'group-hover:invisible group-focus-within:invisible', isMenuOpen && 'invisible']"
+        :class="['flex shrink-0', menuVisibleClass && 'group-hover:invisible group-focus-within:invisible', isMenuOpen && 'invisible']"
       >
         <Icon
           v-if="muted"
           name="lucide:bell-off"
           class="size-[18px] text-gray"
         />
-        <div
-          v-else-if="unreadCount > 1"
-          class="flex items-center justify-center h-[18px] min-w-[18px] px-[4px] rounded-full bg-primary text-white text-[10px]"
-        >
-          {{ unreadCount > 99 ? "99+" : unreadCount }}
-        </div>
-        <div
-          v-else-if="unreadCount === 1"
-          class="bg-primary rounded-full w-[10px] h-[10px]"
-        />
+        <BadgeCount v-else :count="unreadCount" color="primary" />
       </div>
     </component>
     <div

package/dist/runtime/components/chat/chat-conversation-item.vue.d.ts

@@ -26,13 +26,13 @@ declare const __VLS_export: import("vue").DefineComponent<ChatConversationItemPr
     name: string;
     avatar: string | null;
     muted: boolean;
+    disabledMenu: boolean;
     preview: string;
     to: string;
     active: boolean;
     typing: boolean;
     unreadCount: number;
     pinned: boolean;
-    disabledMenu: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/drawer/drawer-notification.d.vue.ts

@@ -1,23 +1,4 @@
-export interface NotificationActor {
-    id: string;
-    name: string;
-    avatar: string | null;
-}
-export interface NotificationRef {
-    type: string;
-    id: string;
-}
-export interface NotificationItem {
-    id: string;
-    category: string;
-    action: string;
-    message: string;
-    ref?: NotificationRef;
-    is_read: boolean;
-    actor?: NotificationActor;
-    grouped_count?: number;
-    created_at: string;
-}
+import type { NotificationItem } from "../../types/notification.js";
 declare const modelValue: import("vue").ModelRef<boolean | undefined, string, boolean | undefined, boolean | undefined>;
 type __VLS_ModelProps = {
     modelValue?: typeof modelValue['value'];