pukaad-ui-lib 1.345.0 → 1.347.0

package/dist/module.json

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

package/dist/runtime/components/data-table.d.vue.ts

@@ -34,7 +34,11 @@ declare var __VLS_13: {
     index: number;
 }, __VLS_106: `item-${string}`, __VLS_107: {
     item: Record<string, any>;
-}, __VLS_109: {}, __VLS_117: {};
+}, __VLS_109: {
+    item: Record<string, any>;
+    index: number;
+    colspan: number;
+}, __VLS_111: {}, __VLS_119: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_41>]?: (props: typeof __VLS_42) => any;
 } & {
@@ -46,9 +50,11 @@ type __VLS_Slots = {} & {
 } & {
     item?: (props: typeof __VLS_97) => any;
 } & {
-    empty?: (props: typeof __VLS_109) => any;
+    'row-banner'?: (props: typeof __VLS_109) => any;
+} & {
+    empty?: (props: typeof __VLS_111) => any;
 } & {
-    'empty-content'?: (props: typeof __VLS_117) => any;
+    'empty-content'?: (props: typeof __VLS_119) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:page": (value: number) => any;

package/dist/runtime/components/data-table.vue

@@ -76,6 +76,9 @@ const itemHeaders = computed(() => {
   );
   return header;
 });
+const totalColumns = computed(
+  () => itemHeaders.value.length + (props.selectable ? 1 : 0)
+);
 const sortedItems = computed(() => {
   return props.items.slice().sort((a, b) => {
     if (!sortkey.value) return 0;
@@ -197,49 +200,58 @@ const getJustifyClass = (alignment = "start") => {
 
             <!-- Data Rows -->
             <template v-else-if="sortedItems.length > 0">
-              <ShadTableRow
-                v-for="(item, i_body) in sortedItems"
-                :key="i_body"
-                class="cursor-pointer"
-                :data-state="
+              <template v-for="(item, i_body) in sortedItems" :key="i_body">
+                <ShadTableRow
+                  class="cursor-pointer"
+                  :data-state="
   props.selectable && isSelected(item) ? 'selected' : void 0
 "
-                @click="emit('click-row', item, i_body)"
-              >
-                <!-- Checkbox per row -->
-                <ShadTableCell v-if="props.selectable" @click.stop>
-                  <div class="flex items-center justify-center">
-                    <InputCheckbox
-                      :model-value="isSelected(item)"
-                      @update:model-value="() => toggleRow(item)"
-                    />
-                  </div>
-                </ShadTableCell>
-
-                <slot
-                  name="item"
-                  :item="item"
-                  :header="itemHeaders"
-                  :index="i_body"
+                  @click="emit('click-row', item, i_body)"
                 >
-                  <ShadTableCell
-                    v-for="(header, i_header) in itemHeaders"
-                    :key="i_header"
-                    :class="
+                  <!-- Checkbox per row -->
+                  <ShadTableCell v-if="props.selectable" @click.stop>
+                    <div class="flex items-center justify-center">
+                      <InputCheckbox
+                        :model-value="isSelected(item)"
+                        @update:model-value="() => toggleRow(item)"
+                      />
+                    </div>
+                  </ShadTableCell>
+
+                  <slot
+                    name="item"
+                    :item="item"
+                    :header="itemHeaders"
+                    :index="i_body"
+                  >
+                    <ShadTableCell
+                      v-for="(header, i_header) in itemHeaders"
+                      :key="i_header"
+                      :class="
   getAlignmentClass(header.alignment || props.cellAlignment)
 "
-                    :style="{
+                      :style="{
   width: header.width ? typeof header.width === 'number' ? `${header.width}px` : header.width : void 0,
   minWidth: header.minWidth ? typeof header.minWidth === 'number' ? `${header.minWidth}px` : header.minWidth : void 0,
   maxWidth: header.maxWidth ? typeof header.maxWidth === 'number' ? `${header.maxWidth}px` : header.maxWidth : header.width ? typeof header.width === 'number' ? `${header.width}px` : header.width : header.minWidth ? typeof header.minWidth === 'number' ? `${header.minWidth}px` : header.minWidth : void 0
 }"
-                  >
-                    <slot :name="`item-${header.key}`" :item="item">
-                      {{ item[header.key] }}
-                    </slot>
-                  </ShadTableCell>
-                </slot>
-              </ShadTableRow>
+                    >
+                      <slot :name="`item-${header.key}`" :item="item">
+                        {{ item[header.key] }}
+                      </slot>
+                    </ShadTableCell>
+                  </slot>
+                </ShadTableRow>
+
+                <!-- แถวเสริมเต็มความกว้าง แทรกใต้แถวนี้ — ใช้กับกรณีเช่น banner "กำลังโอนสิทธิ์" (Figma 2779-278256) -->
+                <!-- ไม่ระบุ slot นี้ = ไม่มีอะไร render เพิ่ม, consumer เป็นคนคุม v-if ว่าจะโชว์กับ item ไหน -->
+                <slot
+                  name="row-banner"
+                  :item="item"
+                  :index="i_body"
+                  :colspan="totalColumns"
+                />
+              </template>
             </template>
 
             <!-- Empty State -->

package/dist/runtime/components/data-table.vue.d.ts

@@ -34,7 +34,11 @@ declare var __VLS_13: {
     index: number;
 }, __VLS_106: `item-${string}`, __VLS_107: {
     item: Record<string, any>;
-}, __VLS_109: {}, __VLS_117: {};
+}, __VLS_109: {
+    item: Record<string, any>;
+    index: number;
+    colspan: number;
+}, __VLS_111: {}, __VLS_119: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_41>]?: (props: typeof __VLS_42) => any;
 } & {
@@ -46,9 +50,11 @@ type __VLS_Slots = {} & {
 } & {
     item?: (props: typeof __VLS_97) => any;
 } & {
-    empty?: (props: typeof __VLS_109) => any;
+    'row-banner'?: (props: typeof __VLS_109) => any;
+} & {
+    empty?: (props: typeof __VLS_111) => any;
 } & {
-    'empty-content'?: (props: typeof __VLS_117) => any;
+    'empty-content'?: (props: typeof __VLS_119) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:page": (value: number) => any;

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

@@ -0,0 +1,33 @@
+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;
+}
+declare const modelValue: import("vue").ModelRef<boolean | undefined, string, boolean | undefined, boolean | undefined>;
+type __VLS_ModelProps = {
+    modelValue?: typeof modelValue['value'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: NotificationItem) => any;
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    onSelect?: ((item: NotificationItem) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,260 @@
+<template>
+  <Drawer v-model="modelValue" title="การแจ้งเตือน" class="w-[748px]">
+    <div class="flex justify-between items-center mb-[16px]">
+      <ShadTabs v-model="selectedTab" class="w-full">
+        <div class="flex justify-between items-center w-full">
+          <ShadTabsList>
+            <ShadTabsTrigger
+              v-for="tab in tabs"
+              :key="tab.value"
+              :value="tab.value"
+              class="px-4 py-2"
+            >
+              <Icon name="lucide:layers" />
+              <div class="flex">
+                {{ tab.label }}
+                <div
+                  v-if="
+  tab.value === 'general' ? hasUnreadGeneral : hasUnreadSystem
+"
+                  class="bg-destructive rounded-full w-[10px] h-[10px] m-[2px] shrink-0"
+                />
+              </div>
+            </ShadTabsTrigger>
+          </ShadTabsList>
+
+          <div
+            v-if="notifications.length > 0"
+            class="text-primary font-body-medium cursor-pointer"
+            @click="markAllRead"
+          >
+            อ่านทั้งหมด
+          </div>
+        </div>
+
+        <ShadTabsContent value="general" class="flex flex-col gap-[8px]">
+          <template v-if="isLoading && notifications.length === 0">
+            <div class="flex justify-center py-[40px]">
+              <Icon
+                name="lucide:loader-2"
+                size="24"
+                class="animate-spin text-gray"
+              />
+            </div>
+          </template>
+
+          <template v-else-if="notifications.length === 0">
+            <div
+              class="flex flex-col items-center justify-center py-[40px] gap-[8px]"
+            >
+              <Icon name="lucide:bell-off" size="40" class="text-gray" />
+              <div class="font-body-medium text-gray">ยังไม่มีการแจ้งเตือน</div>
+            </div>
+          </template>
+
+          <template v-else>
+            <Card
+              v-for="item in notifications"
+              :key="item.id"
+              variant="outline"
+              class="cursor-pointer transition-colors"
+              :class="{ 'bg-bright': !item.is_read }"
+              @click="onClickNotification(item)"
+            >
+              <div class="flex gap-[8px] items-center">
+                <div class="flex gap-[8px] items-center w-full">
+                  <Avatar :size="30" :src="item.actor?.avatar ?? void 0" />
+                  <div class="flex flex-col gap-[4px]">
+                    <div class="font-body-medium">
+                      <span
+                        v-if="item.actor"
+                        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) }}
+                    </div>
+                  </div>
+                </div>
+                <div
+                  v-if="!item.is_read"
+                  class="bg-primary rounded-full w-[10px] h-[10px] shrink-0"
+                />
+              </div>
+            </Card>
+          </template>
+        </ShadTabsContent>
+
+        <ShadTabsContent value="system" class="flex flex-col gap-[8px]">
+          <template v-if="isLoading && notifications.length === 0">
+            <div class="flex justify-center py-[40px]">
+              <Icon
+                name="lucide:loader-2"
+                size="24"
+                class="animate-spin text-gray"
+              />
+            </div>
+          </template>
+
+          <template v-else-if="notifications.length === 0">
+            <div
+              class="flex flex-col items-center justify-center py-[40px] gap-[8px]"
+            >
+              <Icon name="lucide:bell-off" size="40" class="text-gray" />
+              <div class="font-body-medium text-gray">ยังไม่มีการแจ้งเตือนระบบ</div>
+            </div>
+          </template>
+
+          <template v-else>
+            <Card
+              v-for="item in notifications"
+              :key="item.id"
+              variant="outline"
+              class="cursor-pointer transition-colors"
+              :class="{ 'bg-bright': !item.is_read }"
+              @click="onClickNotification(item)"
+            >
+              <div class="flex gap-[8px] items-center">
+                <div class="flex gap-[8px] items-center w-full">
+                  <div class="flex items-center justify-center w-[30px] h-[30px] rounded-full bg-muted shrink-0">
+                    <Icon name="lucide:bell" size="16" class="text-primary" />
+                  </div>
+                  <div class="flex flex-col gap-[4px]">
+                    <div class="font-body-medium">{{ item.message }}</div>
+                    <div class="text-gray font-body-small">
+                      {{ formatRelativeTime(item.created_at) }}
+                    </div>
+                  </div>
+                </div>
+                <div
+                  v-if="!item.is_read"
+                  class="bg-primary rounded-full w-[10px] h-[10px] shrink-0"
+                />
+              </div>
+            </Card>
+          </template>
+        </ShadTabsContent>
+      </ShadTabs>
+    </div>
+  </Drawer>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import { useApi } from "../../composables/useApi";
+import { useNotificationStore } from "../../composables/store-notification";
+const api = useApi();
+const modelValue = defineModel({ type: Boolean });
+const notificationStore = useNotificationStore();
+const emit = defineEmits(["select"]);
+const selectedTab = ref("general");
+const tabs = [
+  { value: "general", label: "\u0E17\u0E31\u0E48\u0E27\u0E44\u0E1B" },
+  { value: "system", label: "\u0E23\u0E30\u0E1A\u0E1A" }
+];
+const generalNotifications = ref([]);
+const systemNotifications = ref([]);
+const isLoading = ref(false);
+const notifications = computed(
+  () => selectedTab.value === "system" ? systemNotifications.value : generalNotifications.value
+);
+const hasUnreadGeneral = computed(
+  () => generalNotifications.value.some((n) => !n.is_read)
+);
+const hasUnreadSystem = computed(
+  () => systemNotifications.value.some((n) => !n.is_read)
+);
+const fetchNotifications = async () => {
+  try {
+    isLoading.value = true;
+    if (selectedTab.value === "system") {
+      const response = await api(`/notifications`, {
+        params: { page: 1, page_size: 50, category: "system" }
+      });
+      systemNotifications.value = response.data;
+    } else {
+      const response = await api(`/notifications`, {
+        params: { page: 1, page_size: 50 }
+      });
+      generalNotifications.value = response.data.filter(
+        (n) => n.category !== "system"
+      );
+    }
+  } catch (err) {
+    console.error("Fetch notifications error:", err);
+  } finally {
+    isLoading.value = false;
+  }
+};
+const markAsRead = async (item) => {
+  if (item.is_read) return;
+  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);
+  } catch {
+  }
+};
+const markAllRead = async () => {
+  try {
+    await api(`/notifications/read-all`, { method: "PATCH" });
+    generalNotifications.value.forEach((n) => n.is_read = true);
+    systemNotifications.value.forEach((n) => n.is_read = true);
+    notificationStore.setUnreadCount(0);
+  } catch {
+  }
+};
+const onClickNotification = (item) => {
+  markAsRead(item);
+  emit("select", item);
+};
+const formatRelativeTime = (dateStr) => {
+  const now = /* @__PURE__ */ new Date();
+  const date = new Date(dateStr);
+  const diffMs = now.getTime() - date.getTime();
+  const diffSec = Math.floor(diffMs / 1e3);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHour / 24);
+  if (diffSec < 60) return "\u0E40\u0E21\u0E37\u0E48\u0E2D\u0E0B\u0E31\u0E01\u0E04\u0E23\u0E39\u0E48";
+  if (diffMin < 60) return `${diffMin} \u0E19\u0E32\u0E17\u0E35\u0E17\u0E35\u0E48\u0E41\u0E25\u0E49\u0E27`;
+  if (diffHour < 24) return `${diffHour} \u0E0A\u0E31\u0E48\u0E27\u0E42\u0E21\u0E07\u0E17\u0E35\u0E48\u0E41\u0E25\u0E49\u0E27`;
+  if (diffDay < 7) return `${diffDay} \u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E41\u0E25\u0E49\u0E27`;
+  return date.toLocaleDateString("th-TH", {
+    day: "numeric",
+    month: "short",
+    year: "numeric"
+  });
+};
+watch(
+  () => notificationStore.isOpenDrawer,
+  (val) => {
+    if (val) {
+      fetchNotifications();
+    }
+  }
+);
+watch(selectedTab, () => {
+  if (notificationStore.isOpenDrawer) {
+    fetchNotifications();
+  }
+});
+watch(
+  () => notificationStore.unreadCount,
+  () => {
+    if (notificationStore.isOpenDrawer) {
+      fetchNotifications();
+    }
+  }
+);
+</script>

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

@@ -0,0 +1,33 @@
+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;
+}
+declare const modelValue: import("vue").ModelRef<boolean | undefined, string, boolean | undefined, boolean | undefined>;
+type __VLS_ModelProps = {
+    modelValue?: typeof modelValue['value'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: NotificationItem) => any;
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    onSelect?: ((item: NotificationItem) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

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

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.d.vue.ts

@@ -14,7 +14,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -208,7 +208,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;

package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.vue.d.ts

@@ -14,7 +14,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -208,7 +208,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;

package/dist/runtime/components/ui/native-select/NativeSelectOption.d.vue.ts

@@ -16,7 +16,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -212,7 +212,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;

package/dist/runtime/components/ui/native-select/NativeSelectOption.vue.d.ts

@@ -16,7 +16,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -212,7 +212,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;

package/dist/runtime/composables/store-notification.d.ts

@@ -0,0 +1,31 @@
+export declare const useNotificationStore: import("pinia").StoreDefinition<"notification", Pick<{
+    unreadCount: import("vue").Ref<number, number>;
+    isOpenDrawer: import("vue").Ref<boolean, boolean>;
+    fetchUnreadCount: () => Promise<void>;
+    initRealtime: () => void;
+    closeRealtime: () => void;
+    setUnreadCount: (count: number) => void;
+    openDrawer: () => void;
+    closeDrawer: () => void;
+    toggleDrawer: () => void;
+}, "unreadCount" | "isOpenDrawer">, Pick<{
+    unreadCount: import("vue").Ref<number, number>;
+    isOpenDrawer: import("vue").Ref<boolean, boolean>;
+    fetchUnreadCount: () => Promise<void>;
+    initRealtime: () => void;
+    closeRealtime: () => void;
+    setUnreadCount: (count: number) => void;
+    openDrawer: () => void;
+    closeDrawer: () => void;
+    toggleDrawer: () => void;
+}, never>, Pick<{
+    unreadCount: import("vue").Ref<number, number>;
+    isOpenDrawer: import("vue").Ref<boolean, boolean>;
+    fetchUnreadCount: () => Promise<void>;
+    initRealtime: () => void;
+    closeRealtime: () => void;
+    setUnreadCount: (count: number) => void;
+    openDrawer: () => void;
+    closeDrawer: () => void;
+    toggleDrawer: () => void;
+}, "fetchUnreadCount" | "initRealtime" | "closeRealtime" | "setUnreadCount" | "openDrawer" | "closeDrawer" | "toggleDrawer">>;

package/dist/runtime/composables/store-notification.js

@@ -0,0 +1,61 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { useApi } from "./useApi.js";
+import { useRealtime } from "./useRealtime.js";
+export const useNotificationStore = defineStore("notification", () => {
+  const api = useApi();
+  const { onEvent, offEvent } = useRealtime();
+  const unreadCount = ref(0);
+  const isOpenDrawer = ref(false);
+  const fetchUnreadCount = async () => {
+    try {
+      const response = await api(
+        `/notifications/unread-count`
+      );
+      unreadCount.value = response.data.count;
+    } catch (err) {
+      console.error("Failed to fetch unread count", err);
+    }
+  };
+  const onNotificationEvent = (_payload) => {
+    const payload = _payload;
+    if (typeof payload.unread_count === "number") {
+      unreadCount.value = payload.unread_count;
+      return;
+    }
+    if (payload?.action === "delete") {
+      unreadCount.value = Math.max(0, unreadCount.value - 1);
+      return;
+    }
+    unreadCount.value++;
+  };
+  const initRealtime = () => {
+    onEvent("notification", onNotificationEvent);
+  };
+  const closeRealtime = () => {
+    offEvent("notification", onNotificationEvent);
+  };
+  const setUnreadCount = (count) => {
+    unreadCount.value = count;
+  };
+  const openDrawer = () => {
+    isOpenDrawer.value = true;
+  };
+  const closeDrawer = () => {
+    isOpenDrawer.value = false;
+  };
+  const toggleDrawer = () => {
+    isOpenDrawer.value = !isOpenDrawer.value;
+  };
+  return {
+    unreadCount,
+    isOpenDrawer,
+    fetchUnreadCount,
+    initRealtime,
+    closeRealtime,
+    setUnreadCount,
+    openDrawer,
+    closeDrawer,
+    toggleDrawer
+  };
+});

package/dist/runtime/composables/useRealtime.d.ts

@@ -0,0 +1,10 @@
+type EventCallback = (payload: unknown) => void;
+export declare const useRealtime: () => {
+    connect: () => void;
+    disconnect: () => void;
+    send: (event: string, payload: unknown) => void;
+    onEvent: (event: string, callback: EventCallback) => void;
+    offEvent: (event: string, callback: EventCallback) => void;
+    isConnected: import("vue").Ref<boolean, boolean>;
+};
+export {};

package/dist/runtime/composables/useRealtime.js

@@ -0,0 +1,127 @@
+import { ref, getCurrentInstance, onBeforeUnmount } from "vue";
+import { useRuntimeConfig } from "nuxt/app";
+import { createAuthenticatedWebSocket } from "../utils/websocket.js";
+const socket = ref(null);
+const isConnected = ref(false);
+const reconnectAttempts = ref(0);
+const maxReconnectDelay = 3e4;
+const baseReconnectDelay = 1e3;
+let reconnectTimeout = null;
+let isManuallyClosed = false;
+const eventListeners = /* @__PURE__ */ new Map();
+export const useRealtime = () => {
+  const { BASE_URL_API } = useRuntimeConfig().public;
+  const onEvent = (event, callback) => {
+    if (!eventListeners.has(event)) {
+      eventListeners.set(event, /* @__PURE__ */ new Set());
+    }
+    eventListeners.get(event).add(callback);
+  };
+  const offEvent = (event, callback) => {
+    eventListeners.get(event)?.delete(callback);
+  };
+  const getWsUrl = () => {
+    let url = BASE_URL_API;
+    if (typeof window !== "undefined" && window.location.hostname !== "localhost") {
+      url = url.replace("localhost", window.location.hostname).replace("127.0.0.1", window.location.hostname);
+    }
+    if (url.startsWith("http://")) {
+      url = url.replace("http://", "ws://");
+    } else if (url.startsWith("https://")) {
+      url = url.replace("https://", "wss://");
+    }
+    return `${url}/ws`;
+  };
+  const connect = () => {
+    if (socket.value?.readyState === WebSocket.OPEN || socket.value?.readyState === WebSocket.CONNECTING) {
+      return;
+    }
+    isManuallyClosed = false;
+    const wsUrl = getWsUrl();
+    console.log("Connecting to WS:", wsUrl);
+    const ws = createAuthenticatedWebSocket(wsUrl);
+    if (!ws) {
+      return;
+    }
+    socket.value = ws;
+    socket.value.onopen = () => {
+      console.log("WS Connected");
+      isConnected.value = true;
+      reconnectAttempts.value = 0;
+    };
+    socket.value.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        console.log("WS Event:", data);
+        handleEvent(data);
+      } catch (e) {
+        console.error("WS Parse Error:", e);
+      }
+    };
+    socket.value.onclose = () => {
+      console.log("WS Closed");
+      isConnected.value = false;
+      socket.value = null;
+      if (!isManuallyClosed) {
+        attemptReconnect();
+      }
+    };
+    socket.value.onerror = (error) => {
+      console.error("WS Error:", error);
+    };
+  };
+  const attemptReconnect = () => {
+    if (reconnectTimeout) clearTimeout(reconnectTimeout);
+    const delay = Math.min(
+      baseReconnectDelay * Math.pow(2, reconnectAttempts.value),
+      maxReconnectDelay
+    );
+    const jitter = Math.random() * 1e3;
+    console.log(
+      `Reconnecting in ${delay + jitter}ms... (Attempt ${reconnectAttempts.value + 1})`
+    );
+    reconnectTimeout = setTimeout(() => {
+      reconnectAttempts.value++;
+      connect();
+    }, delay + jitter);
+  };
+  const disconnect = () => {
+    isManuallyClosed = true;
+    if (socket.value) {
+      socket.value.close();
+      socket.value = null;
+    }
+    if (reconnectTimeout) {
+      clearTimeout(reconnectTimeout);
+      reconnectTimeout = null;
+    }
+    isConnected.value = false;
+  };
+  const send = (event, payload) => {
+    if (socket.value?.readyState === WebSocket.OPEN) {
+      socket.value.send(JSON.stringify({ event, payload }));
+    } else {
+      console.warn("WS: Cannot send, socket is not connected.");
+    }
+  };
+  const handleEvent = (data) => {
+    const { event, payload } = data;
+    const listeners = eventListeners.get(event);
+    if (listeners) {
+      listeners.forEach((cb) => cb(payload));
+    }
+  };
+  if (getCurrentInstance()) {
+    onBeforeUnmount(() => {
+      disconnect();
+    });
+  }
+  return {
+    connect,
+    disconnect,
+    send,
+    onEvent,
+    offEvent,
+    isConnected
+  };
+};

package/dist/runtime/utils/websocket.d.ts

@@ -0,0 +1 @@
+export declare const createAuthenticatedWebSocket: (url: string) => WebSocket | null;

package/dist/runtime/utils/websocket.js

@@ -0,0 +1,15 @@
+import { useRuntimeConfig, useCookie } from "nuxt/app";
+export const createAuthenticatedWebSocket = (url) => {
+  const config = useRuntimeConfig();
+  const { APP_TYPE } = config.public;
+  const secId = useCookie(APP_TYPE === "OFFICE" ? "OFFICE_SEC_ID" : "SEC_ID");
+  if (!secId.value) {
+    console.warn(
+      "WS: No auth token found, cannot create authenticated connection."
+    );
+    return null;
+  }
+  const wsUrl = new URL(url);
+  wsUrl.searchParams.append("token", secId.value);
+  return new WebSocket(wsUrl.toString());
+};

package/package.json

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