pukaad-ui-lib 1.429.2 → 1.430.1

package/dist/module.json

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

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

@@ -67,18 +67,12 @@
                   <div class="flex flex-col gap-[4px]">
                     <div class="font-body-medium">
                       <span
-                        v-if="item.actor"
+                        v-if="item.actor && !isGrouped(item)"
                         class="font-body-medium-prominent"
                       >
                         {{ item.actor.name }}
                       </span>
                       {{ item.message }}
-                      <span
-                        v-if="item.grouped_count && item.grouped_count > 1"
-                        class="text-gray font-body-small"
-                      >
-                        ({{ item.grouped_count }} คน)
-                      </span>
                     </div>
                     <div class="text-gray font-body-small">
                       {{ formatRelativeTime(item.created_at) }}
@@ -201,8 +195,7 @@ const markAsRead = async (item) => {
   try {
     await api(`/notifications/${item.id}/read`, { method: "PATCH" });
     item.is_read = true;
-    const totalUnread = generalNotifications.value.filter((n) => !n.is_read).length + systemNotifications.value.filter((n) => !n.is_read).length;
-    notificationStore.setUnreadCount(totalUnread);
+    notificationStore.fetchUnreadCount();
   } catch {
   }
 };
@@ -219,6 +212,7 @@ const onClickNotification = (item) => {
   markAsRead(item);
   emit("select", item);
 };
+const isGrouped = (item) => !!item.grouped_count && item.grouped_count > 1;
 const formatRelativeTime = (dateStr) => {
   const now = /* @__PURE__ */ new Date();
   const date = new Date(dateStr);

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-chat.vue

@@ -46,6 +46,8 @@
           :accept="mediaAccept"
           :limit="mediaLimit"
           :preview-size="66"
+          :min-video-seconds="1"
+          :max-video-seconds="0"
           :width="66"
           :height="66"
           disabled-drop

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

@@ -37,14 +37,16 @@ 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;
     showCover: boolean;
     previewFullSize: boolean;
     previewSize: number;
+    minVideoSeconds: number;
+    maxVideoSeconds: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -186,7 +186,9 @@ const props = defineProps({
   column: { type: Boolean, required: false, default: false },
   showCover: { type: Boolean, required: false, default: false },
   previewFullSize: { type: Boolean, required: false, default: false },
-  previewSize: { type: Number, required: false, default: 98 }
+  previewSize: { type: Number, required: false, default: 98 },
+  minVideoSeconds: { type: Number, required: false, default: 10 },
+  maxVideoSeconds: { type: Number, required: false, default: 60 }
 });
 const isDrag = ref(false);
 const { errorMessage, setErrors } = useField(props.name);
@@ -231,19 +233,19 @@ const createFileItem = async (file) => {
       return null;
     }
     const duration = await getVideoDuration(file);
-    if (duration < 10) {
+    if (props.minVideoSeconds > 0 && duration < props.minVideoSeconds) {
       $alert.show({
         type: "error",
         title: "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14 !",
-        description: "\u0E40\u0E19\u0E37\u0E48\u0E2D\u0E07\u0E08\u0E32\u0E01\u0E27\u0E34\u0E14\u0E35\u0E42\u0E2D\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13 \u0E21\u0E35\u0E04\u0E27\u0E32\u0E21\u0E22\u0E32\u0E27\u0E19\u0E49\u0E2D\u0E22\u0E01\u0E27\u0E48\u0E32 10 \u0E27\u0E34\u0E19\u0E32\u0E17\u0E35"
+        description: `\u0E40\u0E19\u0E37\u0E48\u0E2D\u0E07\u0E08\u0E32\u0E01\u0E27\u0E34\u0E14\u0E35\u0E42\u0E2D\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13 \u0E21\u0E35\u0E04\u0E27\u0E32\u0E21\u0E22\u0E32\u0E27\u0E19\u0E49\u0E2D\u0E22\u0E01\u0E27\u0E48\u0E32 ${props.minVideoSeconds} \u0E27\u0E34\u0E19\u0E32\u0E17\u0E35`
       });
       return null;
     }
-    if (duration > 60) {
+    if (props.maxVideoSeconds > 0 && duration > props.maxVideoSeconds) {
       $alert.show({
         type: "error",
         title: "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14 !",
-        description: "\u0E40\u0E19\u0E37\u0E48\u0E2D\u0E07\u0E08\u0E32\u0E01\u0E27\u0E34\u0E14\u0E35\u0E42\u0E2D\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13 \u0E21\u0E35\u0E04\u0E27\u0E32\u0E21\u0E22\u0E32\u0E27\u0E40\u0E01\u0E34\u0E19 60 \u0E27\u0E34\u0E19\u0E32\u0E17\u0E35"
+        description: `\u0E40\u0E19\u0E37\u0E48\u0E2D\u0E07\u0E08\u0E32\u0E01\u0E27\u0E34\u0E14\u0E35\u0E42\u0E2D\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13 \u0E21\u0E35\u0E04\u0E27\u0E32\u0E21\u0E22\u0E32\u0E27\u0E40\u0E01\u0E34\u0E19 ${props.maxVideoSeconds} \u0E27\u0E34\u0E19\u0E32\u0E17\u0E35`
       });
       return null;
     }

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

@@ -37,14 +37,16 @@ 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;
     showCover: boolean;
     previewFullSize: boolean;
     previewSize: number;
+    minVideoSeconds: number;
+    maxVideoSeconds: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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/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/dist/runtime/composables/store-notification.js

@@ -1,12 +1,15 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { ref, watch } from "vue";
+import { useDocumentVisibility } from "@vueuse/core";
 import { useApi } from "./useApi.js";
 import { useRealtime } from "./useRealtime.js";
 export const useNotificationStore = defineStore("notification", () => {
   const api = useApi();
-  const { onEvent, offEvent } = useRealtime();
+  const { onEvent, offEvent, isConnected } = useRealtime();
+  const visibility = useDocumentVisibility();
   const unreadCount = ref(0);
   const isOpenDrawer = ref(false);
+  const isListening = ref(false);
   const fetchUnreadCount = async () => {
     try {
       const response = await api(
@@ -31,10 +34,18 @@ export const useNotificationStore = defineStore("notification", () => {
   };
   const initRealtime = () => {
     onEvent("notification", onNotificationEvent);
+    isListening.value = true;
   };
   const closeRealtime = () => {
     offEvent("notification", onNotificationEvent);
+    isListening.value = false;
   };
+  watch([isConnected, visibility], ([connected, vis], [wasConnected, prevVis]) => {
+    if (!isListening.value) return;
+    const reconnected = connected && !wasConnected;
+    const becameVisible = vis === "visible" && prevVis !== "visible";
+    if (reconnected || becameVisible) fetchUnreadCount();
+  });
   const setUnreadCount = (count) => {
     unreadCount.value = count;
   };

package/package.json

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