pukaad-ui-lib 1.400.0 → 1.402.0

package/dist/module.json

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

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

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,15 @@
+<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>
+</template>
+
+<script setup>
+const emit = defineEmits(["close"]);
+</script>

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

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -9,12 +9,15 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "update:selected": (value: boolean) => any;
 } & {
     click: (item: CardContentItem) => any;
+    close: (item: CardContentItem) => any;
     action: (name: string, item: CardContentItem) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClick?: ((item: CardContentItem) => any) | undefined;
+    onClose?: ((item: CardContentItem) => any) | undefined;
     "onUpdate:selected"?: ((value: boolean) => any) | undefined;
     onAction?: ((name: string, item: CardContentItem) => any) | undefined;
 }>, {
+    closable: boolean;
     selectable: boolean;
     disable: boolean;
     disabledNavigate: boolean;

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

@@ -41,6 +41,13 @@
     >
       <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>
 
@@ -53,18 +60,20 @@ import CardContentVideo from "./card-content-video.vue";
 import CardContentTime from "./card-content-time.vue";
 import CardContentMenu from "./card-content-menu.vue";
 import CardContentSelect from "./card-content-select.vue";
+import CardContentClose from "./card-content-close.vue";
 import CardContentDisable from "./card-content-disable.vue";
 const router = useRouter();
 const props = defineProps({
   item: { type: Object, required: true },
   state: { type: String, required: false },
   selectable: { type: Boolean, required: false, default: false },
+  closable: { type: Boolean, required: false, default: false },
   disabledNavigate: { type: Boolean, required: false, default: false },
   disable: { type: Boolean, required: false, default: false },
   hidePin: { type: Boolean, required: false },
   hideBookmark: { type: Boolean, required: false }
 });
-const emit = defineEmits(["click", "action"]);
+const emit = defineEmits(["click", "action", "close"]);
 const selected = defineModel("selected", { type: Boolean, ...{ default: false } });
 const handleClick = () => {
   if (props.disable) return;

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

@@ -9,12 +9,15 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "update:selected": (value: boolean) => any;
 } & {
     click: (item: CardContentItem) => any;
+    close: (item: CardContentItem) => any;
     action: (name: string, item: CardContentItem) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClick?: ((item: CardContentItem) => any) | undefined;
+    onClose?: ((item: CardContentItem) => any) | undefined;
     "onUpdate:selected"?: ((value: boolean) => any) | undefined;
     onAction?: ((name: string, item: CardContentItem) => any) | undefined;
 }>, {
+    closable: boolean;
     selectable: boolean;
     disable: boolean;
     disabledNavigate: boolean;

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

@@ -0,0 +1,26 @@
+export interface CardReferItem {
+    id?: string;
+    mention_type?: string;
+    target_id?: string;
+    content_type?: string;
+    title?: string;
+    image_url?: string;
+    place_name?: string;
+    place_address?: string;
+    author_name?: string;
+    author_avatar?: string;
+    link_title?: string;
+    link_url?: string;
+}
+type __VLS_Props = {
+    item?: CardReferItem;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: CardReferItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: CardReferItem) => any) | undefined;
+}>, {
+    item: CardReferItem;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,126 @@
+<template>
+  <div
+    class="flex gap-[16px] bg-bright p-[8px] rounded-[6px] w-full items-center cursor-pointer"
+    @click="onClick"
+  >
+    <!-- post-it -->
+    <div
+      v-if="isPost && props.item.content_type === 'post_it'"
+      class="w-[50px] h-[50px] shrink-0 bg-info rounded-sm flex items-center justify-center"
+    >
+      <Icon name="fa6-solid:message" size="24" class="text-primary" />
+    </div>
+
+    <!-- Image -->
+    <Image
+      v-else-if="isPost && props.item.content_type === 'image'"
+      :src="props.item.image_url"
+      :width="50"
+      :height="50"
+      class="shrink-0 rounded-[4px]"
+    />
+
+    <!-- video -->
+    <div
+      v-else-if="isPost && props.item.content_type === 'video'"
+      class="relative w-[50px] h-[50px] shrink-0"
+    >
+      <Image
+        :src="props.item.image_url"
+        :width="50"
+        :height="50"
+        class="rounded-[4px]"
+      />
+      <div
+        class="absolute inset-0 m-auto bg-black/50 w-[24px] h-[24px] rounded-full flex items-center justify-center"
+      >
+        <Icon name="lucide:play" size="16" class="text-white" />
+      </div>
+    </div>
+
+    <!-- Blog -->
+    <Image
+      v-else-if="props.item.mention_type === 'blog'"
+      :src="props.item.image_url"
+      :width="89"
+      :height="50"
+      class="shrink-0 rounded-[4px]"
+    />
+
+    <!-- Link -->
+    <div
+      v-else-if="props.item.mention_type === 'link'"
+      class="w-[50px] h-[50px] shrink-0 bg-info rounded-sm flex items-center justify-center"
+    >
+      <Icon name="fa6-solid:link" size="24" class="text-primary" />
+    </div>
+
+    <!-- ปลายทางถูกลบ / campaign ที่ยัง resolve ไม่ได้ — ไม่มีรูปให้โชว์ -->
+    <div
+      v-else
+      class="w-[50px] h-[50px] shrink-0 bg-mercury rounded-sm flex items-center justify-center"
+    >
+      <Icon name="lucide:file-question" size="24" class="text-gray" />
+    </div>
+
+    <div class="flex flex-col gap-[4px] min-w-0 flex-1">
+      <div class="font-body-large-prominent w-full truncate">
+        {{ displayTitle }}
+      </div>
+
+      <!-- บล็อกโชว์ผู้เขียน อย่างอื่นโชว์บรรทัดรองตาม type -->
+      <div
+        v-if="props.item.mention_type === 'blog' && props.item.author_name"
+        class="flex gap-[4px] items-center"
+      >
+        <Avatar :src="props.item.author_avatar" :size="16" />
+        <div class="font-body-small text-gray truncate">
+          {{ props.item.author_name }}
+        </div>
+      </div>
+      <div v-else-if="subTitle" class="font-body-small text-gray w-full truncate">
+        {{ subTitle }}
+      </div>
+    </div>
+
+    <Icon name="lucide:chevron-right" size="24" class="shrink-0" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useRouter } from "vue-router";
+const emit = defineEmits(["select"]);
+const props = defineProps({
+  item: { type: Object, required: false, default: () => ({}) }
+});
+const router = useRouter();
+const isPost = computed(() => props.item.mention_type === "post");
+const displayTitle = computed(() => {
+  if (props.item.mention_type === "link") {
+    return props.item.link_title || props.item.link_url || "";
+  }
+  return props.item.title || "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
+});
+const subTitle = computed(() => {
+  if (props.item.mention_type === "link") {
+    return props.item.link_title ? props.item.link_url : "";
+  }
+  if (isPost.value) return props.item.place_name;
+  return "";
+});
+const onClick = () => {
+  emit("select", props.item);
+  const { mention_type, target_id, link_url } = props.item;
+  if (mention_type === "link") {
+    if (link_url) window.open(link_url, "_blank", "noopener");
+    return;
+  }
+  if (!target_id) return;
+  if (mention_type === "post") {
+    router.push(`/content/${target_id}`);
+  } else if (mention_type === "blog") {
+    router.push(`/blog/${target_id}`);
+  }
+};
+</script>

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

@@ -0,0 +1,26 @@
+export interface CardReferItem {
+    id?: string;
+    mention_type?: string;
+    target_id?: string;
+    content_type?: string;
+    title?: string;
+    image_url?: string;
+    place_name?: string;
+    place_address?: string;
+    author_name?: string;
+    author_avatar?: string;
+    link_title?: string;
+    link_url?: string;
+}
+type __VLS_Props = {
+    item?: CardReferItem;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: CardReferItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: CardReferItem) => any) | undefined;
+}>, {
+    item: CardReferItem;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -186,11 +186,26 @@ const syncPlayback = () => {
   el.volume = props.volume;
   el.playbackRate = props.playbackRate;
 };
+const applyStartTime = () => {
+  const el = videoRef.value;
+  if (!el || !props.startTime) return;
+  if (el.readyState >= 1) {
+    el.currentTime = props.startTime;
+    return;
+  }
+  el.addEventListener(
+    "loadedmetadata",
+    () => {
+      el.currentTime = props.startTime;
+    },
+    { once: true }
+  );
+};
 onMounted(() => {
   syncPlayback();
   const el = videoRef.value;
   if (!el) return;
-  if (props.startTime) el.currentTime = props.startTime;
+  applyStartTime();
   onPaused(el.paused);
 });
 onBeforeUnmount(clearHideTimer);

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

@@ -50,10 +50,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     placeholder: string;
+    gap: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;
-    gap: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -50,10 +50,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     placeholder: string;
+    gap: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;
-    gap: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -35,8 +35,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     fullWidth: boolean;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

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

@@ -35,8 +35,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     fullWidth: boolean;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

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

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-personal-card-id.d.vue.ts

@@ -11,12 +11,12 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: File | null) => any;
 } & {
-    remove: () => any;
     complete: (file: File) => any;
+    remove: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: File | null) => any) | undefined;
-    onRemove?: (() => any) | undefined;
     onComplete?: ((file: File) => any) | undefined;
+    onRemove?: (() => any) | undefined;
 }>, {
     name: string;
     disabledErrorMessage: boolean;

package/dist/runtime/components/input/input-personal-card-id.vue.d.ts

@@ -11,12 +11,12 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: File | null) => any;
 } & {
-    remove: () => any;
     complete: (file: File) => any;
+    remove: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: File | null) => any) | undefined;
-    onRemove?: (() => any) | undefined;
     onComplete?: ((file: File) => any) | undefined;
+    onRemove?: (() => any) | undefined;
 }>, {
     name: string;
     disabledErrorMessage: boolean;

package/dist/runtime/components/input/input-text-field.d.vue.ts

@@ -59,8 +59,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    limit: number;
     readonly: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-text-field.vue.d.ts

@@ -59,8 +59,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    limit: number;
     readonly: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -47,8 +47,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     fullHeight: boolean;
     fullWidth: boolean;
     rows: number;
-    limit: number;
     readonly: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -47,8 +47,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     fullHeight: boolean;
     fullWidth: boolean;
     rows: number;
-    limit: number;
     readonly: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/modal/modal-password-confirmed.d.vue.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.vue.d.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.d.vue.ts

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.vue.d.ts

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/package.json

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