pukaad-ui-lib 1.446.0 → 1.448.0

package/dist/module.json

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

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

@@ -2,6 +2,7 @@ import type { HTMLAttributes } from "vue";
 export interface CardFileProps {
     class?: HTMLAttributes["class"];
     fileName?: string;
+    contentType?: string;
     /** bytes (number) หรือข้อความสำเร็จรูป เช่น "57KB" — แสดงเฉพาะ layout horizontal */
     fileSize?: number | string;
     layout?: "horizontal" | "vertical";

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

@@ -11,7 +11,7 @@
     :title="props.fileName"
   >
     <div class="size-[32px] shrink-0 flex items-center justify-center">
-      <Icon name="pukaad:file-pdf" class="w-[24px] h-[32px]" />
+      <Icon :name="fileIcon" class="w-[24px] h-[32px]" />
     </div>
     <span class="font-body-small text-black text-center w-full truncate">
       {{ props.fileName }}
@@ -30,7 +30,7 @@
     :title="props.fileName"
   >
     <div class="size-[40px] shrink-0 flex items-center justify-center">
-      <Icon name="pukaad:file-pdf" class="w-[30px] h-[40px]" />
+      <Icon :name="fileIcon" class="w-[30px] h-[40px]" />
     </div>
 
     <div class="flex flex-col gap-[4px] items-start justify-center">
@@ -52,10 +52,16 @@ import { cn } from "#pukaad-ui/runtime/plugins/shadcn";
 const props = defineProps({
   class: { type: null, required: false },
   fileName: { type: String, required: false, default: "" },
+  contentType: { type: String, required: false },
   fileSize: { type: [Number, String], required: false, default: "" },
   layout: { type: String, required: false, default: "horizontal" }
 });
 const isVertical = computed(() => props.layout === "vertical");
+const fileIcon = computed(() => {
+  const mime = props.contentType?.split(";")[0]?.trim().toLowerCase();
+  const isImage = mime ? mime.startsWith("image/") : /\.(jpe?g|png|webp|bmp|gif)$/i.test(props.fileName || "");
+  return isImage ? "pukaad:file-jpg" : "pukaad:file-pdf";
+});
 const displaySize = computed(() => {
   const size = props.fileSize;
   if (!size) return "";

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

@@ -2,6 +2,7 @@ import type { HTMLAttributes } from "vue";
 export interface CardFileProps {
     class?: HTMLAttributes["class"];
     fileName?: string;
+    contentType?: string;
     /** bytes (number) หรือข้อความสำเร็จรูป เช่น "57KB" — แสดงเฉพาะ layout horizontal */
     fileSize?: number | string;
     layout?: "horizontal" | "vertical";

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

@@ -27,12 +27,12 @@ declare const __VLS_export: import("vue").DefineComponent<ChatConversationItemPr
     avatar: string | null;
     muted: boolean;
     disabledMenu: boolean;
+    unreadCount: number;
+    pinned: boolean;
     preview: string;
     to: string;
     active: boolean;
     typing: boolean;
-    unreadCount: number;
-    pinned: 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.d.ts

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

package/dist/runtime/components/display/display-video.d.vue.ts

@@ -81,16 +81,16 @@ declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
     toggle: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (payload: DisplayVideoAction) => any;
-    prev: (payload: DisplayVideoAction) => any;
-    next: (payload: DisplayVideoAction) => any;
     fullscreen: (payload: DisplayVideoAction) => any;
     "play-click": (payload: DisplayVideoAction) => any;
+    prev: (payload: DisplayVideoAction) => any;
+    next: (payload: DisplayVideoAction) => any;
 }, string, import("vue").PublicProps, Readonly<DisplayVideoProps> & Readonly<{
     onClose?: ((payload: DisplayVideoAction) => any) | undefined;
-    onPrev?: ((payload: DisplayVideoAction) => any) | undefined;
-    onNext?: ((payload: DisplayVideoAction) => any) | undefined;
     onFullscreen?: ((payload: DisplayVideoAction) => any) | undefined;
     "onPlay-click"?: ((payload: DisplayVideoAction) => any) | undefined;
+    onPrev?: ((payload: DisplayVideoAction) => any) | undefined;
+    onNext?: ((payload: DisplayVideoAction) => any) | undefined;
 }>, {
     src: string;
     fullHeight: boolean;

package/dist/runtime/components/display/display-video.vue.d.ts

@@ -81,16 +81,16 @@ declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
     toggle: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (payload: DisplayVideoAction) => any;
-    prev: (payload: DisplayVideoAction) => any;
-    next: (payload: DisplayVideoAction) => any;
     fullscreen: (payload: DisplayVideoAction) => any;
     "play-click": (payload: DisplayVideoAction) => any;
+    prev: (payload: DisplayVideoAction) => any;
+    next: (payload: DisplayVideoAction) => any;
 }, string, import("vue").PublicProps, Readonly<DisplayVideoProps> & Readonly<{
     onClose?: ((payload: DisplayVideoAction) => any) | undefined;
-    onPrev?: ((payload: DisplayVideoAction) => any) | undefined;
-    onNext?: ((payload: DisplayVideoAction) => any) | undefined;
     onFullscreen?: ((payload: DisplayVideoAction) => any) | undefined;
     "onPlay-click"?: ((payload: DisplayVideoAction) => any) | undefined;
+    onPrev?: ((payload: DisplayVideoAction) => any) | undefined;
+    onNext?: ((payload: DisplayVideoAction) => any) | undefined;
 }>, {
     src: string;
     fullHeight: boolean;

package/dist/runtime/components/image/image-cropper.d.vue.ts

@@ -65,14 +65,14 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
     src: string;
     center: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/image/image-cropper.vue.d.ts

@@ -65,14 +65,14 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
     src: string;
     center: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/input/input-address.d.vue.ts

@@ -50,8 +50,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     name: string;
     required: boolean;
-    placeholder: string;
     layout: "vertical" | "horizontal";
+    placeholder: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;

package/dist/runtime/components/input/input-address.vue.d.ts

@@ -50,8 +50,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     name: string;
     required: boolean;
-    placeholder: string;
     layout: "vertical" | "horizontal";
+    placeholder: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;

package/dist/runtime/components/input/input-autocomplete.d.vue.ts

@@ -69,10 +69,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
-    labelKey: string;
-    placeholder: string;
     options: AutocompleteOption[] | string[] | number[];
     limit: number;
+    labelKey: string;
+    placeholder: string;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-autocomplete.vue.d.ts

@@ -69,10 +69,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
-    labelKey: string;
-    placeholder: string;
     options: AutocompleteOption[] | string[] | number[];
     limit: number;
+    labelKey: string;
+    placeholder: string;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-birth-date.d.vue.ts

@@ -30,9 +30,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     id: string;
     name: string;
     required: boolean;
+    layout: "month-and-year" | "month-only" | "year-only";
     locale: string;
     placeholder: string;
-    layout: "month-and-year" | "month-only" | "year-only";
     disabledErrorMessage: boolean;
     dateFormat: string;
     minAge: number;

package/dist/runtime/components/input/input-birth-date.vue.d.ts

@@ -30,9 +30,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     id: string;
     name: string;
     required: boolean;
+    layout: "month-and-year" | "month-only" | "year-only";
     locale: string;
     placeholder: string;
-    layout: "month-and-year" | "month-only" | "year-only";
     disabledErrorMessage: boolean;
     dateFormat: string;
     minAge: number;

package/dist/runtime/components/input/input-combobox.d.vue.ts

@@ -59,8 +59,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     pageSize: number;
     name: string;
-    labelKey: string;
     limit: number;
+    labelKey: string;
     valueKey: string;
     multiple: boolean;
     placeholderSearch: string;

package/dist/runtime/components/input/input-combobox.vue.d.ts

@@ -59,8 +59,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     pageSize: number;
     name: string;
-    labelKey: string;
     limit: number;
+    labelKey: string;
     valueKey: string;
     multiple: boolean;
     placeholderSearch: string;

package/dist/runtime/components/input/input-date-picker.d.vue.ts

@@ -44,9 +44,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    layout: "month-and-year" | "month-only" | "year-only";
     locale: string;
     placeholder: string;
-    layout: "month-and-year" | "month-only" | "year-only";
     disabledErrorMessage: boolean;
     dateFormat: string;
     showTime: boolean;

package/dist/runtime/components/input/input-date-picker.vue.d.ts

@@ -44,9 +44,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    layout: "month-and-year" | "month-only" | "year-only";
     locale: string;
     placeholder: string;
-    layout: "month-and-year" | "month-only" | "year-only";
     disabledErrorMessage: boolean;
     dateFormat: string;
     showTime: boolean;

package/dist/runtime/components/input/input-localized-name.d.vue.ts

@@ -11,9 +11,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     label: string;
     name: string;
     modelValue: LocalizedNameItem[];
-    placeholder: string;
     options: InputSelectItem[];
     limit: number;
+    placeholder: string;
     showCounter: boolean;
     addLabel: string;
     removable: boolean;

package/dist/runtime/components/input/input-localized-name.vue.d.ts

@@ -11,9 +11,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     label: string;
     name: string;
     modelValue: LocalizedNameItem[];
-    placeholder: string;
     options: InputSelectItem[];
     limit: number;
+    placeholder: string;
     showCounter: boolean;
     addLabel: string;
     removable: boolean;

package/dist/runtime/components/input/input-radio.d.vue.ts

@@ -30,6 +30,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
 }>, {
     size: number | string;
+    color: import("#pukaad-ui/types/components/input/input-radio").InputRadioColor;
     disabled: boolean;
     items: import("#pukaad-ui/types/components/input/input-radio").InputRadioItem[] | string[] | number[];
     item: string | number;

package/dist/runtime/components/input/input-radio.vue

@@ -18,7 +18,7 @@
             </template>
 
             <input v-bind="field"
-              :class="['appearance-none rounded-full border border-black bg-white checked:border-primary checked:bg-primary checked:shadow-[inset_0_0_0_2px_white] cursor-pointer shrink-0', cursor]"
+              :class="['appearance-none rounded-full border border-black bg-white checked:shadow-[inset_0_0_0_2px_white] cursor-pointer shrink-0', colorClass, cursor]"
               type="radio" :name="props.name" :style="{ width: `${props.size}px`, height: `${props.size}px` }"
               :value="typeof item === 'object' ? item.value : item" :disabled="
   props.disabled || typeof item === 'object' && item.disabled
@@ -84,9 +84,16 @@ const props = defineProps({
   item: { type: [String, Number], required: false, default: () => "" },
   disabled: { type: Boolean, required: false, default: false },
   standalone: { type: Boolean, required: false, default: false },
-  disabledErrorMessage: { type: Boolean, required: false, default: false }
+  disabledErrorMessage: { type: Boolean, required: false, default: false },
+  color: { type: String, required: false, default: "primary" }
 });
 const modelValue = defineModel({ type: [String, Number] });
+const colorClass = computed(() => {
+  if (props.color === "destructive") {
+    return "checked:border-destructive checked:bg-destructive";
+  }
+  return "checked:border-primary checked:bg-primary";
+});
 const items = computed(() => {
   if (!Array.isArray(props.items)) return [];
   const arr = props.items.map((item) => {

package/dist/runtime/components/input/input-radio.vue.d.ts

@@ -30,6 +30,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
 }>, {
     size: number | string;
+    color: import("#pukaad-ui/types/components/input/input-radio").InputRadioColor;
     disabled: boolean;
     items: import("#pukaad-ui/types/components/input/input-radio").InputRadioItem[] | string[] | number[];
     item: string | number;

package/dist/runtime/components/input/input-suggest.d.vue.ts

@@ -20,9 +20,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
+    limit: number;
     labelKey: string;
     placeholder: string;
-    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-suggest.vue.d.ts

@@ -20,9 +20,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
+    limit: number;
     labelKey: string;
     placeholder: string;
-    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-tag-modal.d.vue.ts

@@ -40,9 +40,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    options: InputTagModalOption[];
     labelKey: string;
     placeholder: string;
-    options: InputTagModalOption[];
     disabledErrorMessage: boolean;
     valueKey: string;
     searchPlaceholder: string;

package/dist/runtime/components/input/input-tag-modal.vue.d.ts

@@ -40,9 +40,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    options: InputTagModalOption[];
     labelKey: string;
     placeholder: string;
-    options: InputTagModalOption[];
     disabledErrorMessage: boolean;
     valueKey: string;
     searchPlaceholder: string;

package/dist/runtime/components/input/input-tag.d.vue.ts

@@ -26,9 +26,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
 }>, {
     name: string;
-    placeholder: string;
     state: "user" | "admin";
     limit: number;
+    placeholder: string;
     profileScope: "personal" | "business";
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-tag.vue.d.ts

@@ -26,9 +26,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
 }>, {
     name: string;
-    placeholder: string;
     state: "user" | "admin";
     limit: number;
+    placeholder: string;
     profileScope: "personal" | "business";
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-textarea.d.vue.ts

@@ -46,8 +46,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullHeight: boolean;
     fullWidth: boolean;
-    rows: number;
     limit: number;
+    rows: number;
     readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

package/dist/runtime/components/input/input-textarea.vue.d.ts

@@ -46,8 +46,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullHeight: boolean;
     fullWidth: boolean;
-    rows: number;
     limit: number;
+    rows: number;
     readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

package/dist/runtime/components/timeline.d.vue.ts

@@ -20,14 +20,24 @@ type __VLS_Props = {
 declare var __VLS_1: {
     item: TimelineItem;
     index: number;
-}, __VLS_8: {
+}, __VLS_3: {
+    item: TimelineItem;
+    index: number;
+}, __VLS_5: {
+    item: TimelineItem;
+    index: number;
+}, __VLS_12: {
     item: TimelineItem;
     index: number;
 };
 type __VLS_Slots = {} & {
-    content?: (props: typeof __VLS_1) => any;
+    dot?: (props: typeof __VLS_1) => any;
+} & {
+    line?: (props: typeof __VLS_3) => any;
+} & {
+    content?: (props: typeof __VLS_5) => any;
 } & {
-    description?: (props: typeof __VLS_8) => any;
+    description?: (props: typeof __VLS_12) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/timeline.vue

@@ -6,11 +6,20 @@
       class="flex gap-[8px] w-full"
     >
       <!-- dot + connecting line (โครงของ component เอง) -->
-      <div class="flex flex-col items-center w-[8px]">
-        <div class="w-[20px] h-[26px] flex items-center justify-center">
-          <div class="w-[10px] h-[10px] rounded-full bg-black shrink-0" />
-        </div>
-        <div class="w-[2px] flex-1 bg-bright" />
+      <div class="flex flex-col items-center shrink-0">
+        <slot name="dot" :item="item" :index="index">
+          <div class="w-[20px] h-[26px] flex items-center justify-center shrink-0">
+            <div class="w-[10px] h-[10px] rounded-full bg-black shrink-0" />
+          </div>
+        </slot>
+        <slot
+          v-if="index < props.items.length - 1"
+          name="line"
+          :item="item"
+          :index="index"
+        >
+          <div class="w-[2px] flex-1 bg-bright" />
+        </slot>
       </div>
 
       <!-- เนื้อหา — ปล่อยให้ผู้ใช้ครอบเองผ่าน slot ได้ ถ้าไม่ส่งมาใช้ default นี้ -->

package/dist/runtime/components/timeline.vue.d.ts

@@ -20,14 +20,24 @@ type __VLS_Props = {
 declare var __VLS_1: {
     item: TimelineItem;
     index: number;
-}, __VLS_8: {
+}, __VLS_3: {
+    item: TimelineItem;
+    index: number;
+}, __VLS_5: {
+    item: TimelineItem;
+    index: number;
+}, __VLS_12: {
     item: TimelineItem;
     index: number;
 };
 type __VLS_Slots = {} & {
-    content?: (props: typeof __VLS_1) => any;
+    dot?: (props: typeof __VLS_1) => any;
+} & {
+    line?: (props: typeof __VLS_3) => any;
+} & {
+    content?: (props: typeof __VLS_5) => any;
 } & {
-    description?: (props: typeof __VLS_8) => any;
+    description?: (props: typeof __VLS_12) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.446.0",
+  "version": "1.448.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",