@ozdao/martyrs 0.2.481 → 0.2.482

package/dist/martyrs/src/modules/notifications/components/blocks/NotificationItem.vue.cjs

@@ -4,12 +4,12 @@ const vue = require("vue");
 const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
 const _hoisted_1 = { class: "notification-icon" };
 const _hoisted_2 = { class: "notification-content" };
-const _hoisted_3 = { class: "notification-title" };
-const _hoisted_4 = { class: "notification-body" };
-const _hoisted_5 = { class: "notification-time" };
+const _hoisted_3 = { class: "p-medium t-medium mn-b-small" };
+const _hoisted_4 = { class: "p-small mn-b-small" };
+const _hoisted_5 = { class: "pd-thin w-max radius-thin bg-white" };
 const _hoisted_6 = {
   key: 0,
-  class: "unread-indicator"
+  class: "flex-child-default unread-indicator"
 };
 const _sfc_main = {
   __name: "NotificationItem",
@@ -62,20 +62,20 @@ const _sfc_main = {
     };
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(["notification-item", { unread: isUnread.value }]),
+        class: vue.normalizeClass(["notification-item gap-thin flex pd-small radius-small bg-light", { "bg-second-small": isUnread.value }]),
         onClick: handleClick
       }, [
         vue.createElementVNode("div", _hoisted_1, vue.toDisplayString(notificationIcon.value), 1),
         vue.createElementVNode("div", _hoisted_2, [
-          vue.createElementVNode("h3", _hoisted_3, vue.toDisplayString(__props.notification.title), 1),
+          vue.createElementVNode("p", _hoisted_3, vue.toDisplayString(__props.notification.title), 1),
           vue.createElementVNode("p", _hoisted_4, vue.toDisplayString(__props.notification.body), 1),
-          vue.createElementVNode("span", _hoisted_5, vue.toDisplayString(formattedDate.value), 1)
+          vue.createElementVNode("p", _hoisted_5, vue.toDisplayString(formattedDate.value), 1)
         ]),
         isUnread.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6)) : vue.createCommentVNode("", true)
       ], 2);
     };
   }
 };
-const NotificationItem = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-c57c48a6"]]);
+const NotificationItem = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-8aa96de9"]]);
 exports.default = NotificationItem;
 //# sourceMappingURL=NotificationItem.vue.cjs.map

package/dist/martyrs/src/modules/notifications/components/blocks/NotificationItem.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationItem.vue.cjs","sources":["../../../../../../../src/modules/notifications/components/blocks/NotificationItem.vue"],"sourcesContent":["<script setup>\nimport { computed } from 'vue';\n\n// Props\nconst props = defineProps({\n  notification: {\n    type: Object,\n    required: true\n  }\n});\n\n// Compute if notification is unread\nconst isUnread = computed(() => props.notification.status !== 'read');\n\n// Format date\nconst formattedDate = computed(() => {\n  const date = new Date(props.notification.createdAt);\n  const now = new Date();\n  const diffMs = now - date;\n  const diffSec = Math.floor(diffMs / 1000);\n  const diffMin = Math.floor(diffSec / 60);\n  const diffHours = Math.floor(diffMin / 60);\n  const diffDays = Math.floor(diffHours / 24);\n  \n  if (diffSec < 60) {\n    return 'Just now';\n  } else if (diffMin < 60) {\n    return `${diffMin}m ago`;\n  } else if (diffHours < 24) {\n    return `${diffHours}h ago`;\n  } else if (diffDays < 7) {\n    return `${diffDays}d ago`;\n  } else {\n    return date.toLocaleDateString();\n  }\n});\n\n// Get icon based on notification type\nconst notificationIcon = computed(() => {\n  switch (props.notification.type) {\n    case 'alert':\n      return '⚠️';\n    case 'success':\n      return '✅';\n    case 'error':\n      return '❌';\n    case 'info':\n    default:\n      return 'ℹ️';\n  }\n});\n\n// Emit click event\nconst emit = defineEmits(['click']);\nconst handleClick = () => {\n  emit('click', props.notification);\n};\n</script>\n\n<template>\n  <div \n    class=\"notification-item\" \n    :class=\"{ unread: isUnread }\"\n    @click=\"handleClick\"\n  >\n    <div class=\"notification-icon\">\n      {{ notificationIcon }}\n    </div>\n    <div class=\"notification-content\">\n      <h3 class=\"notification-title\">{{ notification.title }}</h3>\n      <p class=\"notification-body\">{{ notification.body }}</p>\n      <span class=\"notification-time\">{{ formattedDate }}</span>\n    </div>\n    <div v-if=\"isUnread\" class=\"unread-indicator\"></div>\n  </div>\n</template>\n\n<style scoped>\n.notification-item {\n  display: flex;\n  padding: 1rem;\n  border-radius: 8px;\n  background-color: #fff;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  cursor: pointer;\n  transition: background-color 0.2s;\n}\n\n.notification-item:hover {\n  background-color: #f9f9f9;\n}\n\n.notification-item.unread {\n  background-color: #f0f7ff;\n}\n\n.notification-icon {\n  flex-shrink: 0;\n  margin-right: 1rem;\n  font-size: 1.5rem;\n}\n\n.notification-content {\n  flex: 1;\n}\n\n.notification-title {\n  margin: 0 0 0.25rem;\n  font-weight: 600;\n  font-size: 1rem;\n}\n\n.notification-body {\n  margin: 0 0 0.5rem;\n  color: #666;\n  font-size: 0.9rem;\n}\n\n.notification-time {\n  font-size: 0.8rem;\n  color: #999;\n}\n\n.unread-indicator {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background-color: var(--primary-color, #0066cc);\n  align-self: center;\n  margin-left: 0.5rem;\n}\n</style>"],"names":["computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIA,UAAM,QAAQ;AAQd,UAAM,WAAWA,IAAQ,SAAC,MAAM,MAAM,aAAa,WAAW,MAAM;AAGpE,UAAM,gBAAgBA,IAAQ,SAAC,MAAM;AACnC,YAAM,OAAO,IAAI,KAAK,MAAM,aAAa,SAAS;AAClD,YAAM,MAAM,oBAAI,KAAM;AACtB,YAAM,SAAS,MAAM;AACrB,YAAM,UAAU,KAAK,MAAM,SAAS,GAAI;AACxC,YAAM,UAAU,KAAK,MAAM,UAAU,EAAE;AACvC,YAAM,YAAY,KAAK,MAAM,UAAU,EAAE;AACzC,YAAM,WAAW,KAAK,MAAM,YAAY,EAAE;AAE1C,UAAI,UAAU,IAAI;AAChB,eAAO;AAAA,MACX,WAAa,UAAU,IAAI;AACvB,eAAO,GAAG,OAAO;AAAA,MACrB,WAAa,YAAY,IAAI;AACzB,eAAO,GAAG,SAAS;AAAA,MACvB,WAAa,WAAW,GAAG;AACvB,eAAO,GAAG,QAAQ;AAAA,MACtB,OAAS;AACL,eAAO,KAAK,mBAAoB;AAAA,MACpC;AAAA,IACA,CAAC;AAGD,UAAM,mBAAmBA,IAAQ,SAAC,MAAM;AACtC,cAAQ,MAAM,aAAa,MAAI;AAAA,QAC7B,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AAAA,QACL;AACE,iBAAO;AAAA,MACb;AAAA,IACA,CAAC;AAGD,UAAM,OAAO;AACb,UAAM,cAAc,MAAM;AACxB,WAAK,SAAS,MAAM,YAAY;AAAA,IAClC;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NotificationItem.vue.cjs","sources":["../../../../../../../src/modules/notifications/components/blocks/NotificationItem.vue"],"sourcesContent":["<script setup>\nimport { computed } from 'vue';\n\n// Props\nconst props = defineProps({\n  notification: {\n    type: Object,\n    required: true\n  }\n});\n\n// Compute if notification is unread\nconst isUnread = computed(() => props.notification.status !== 'read');\n\n// Format date\nconst formattedDate = computed(() => {\n  const date = new Date(props.notification.createdAt);\n  const now = new Date();\n  const diffMs = now - date;\n  const diffSec = Math.floor(diffMs / 1000);\n  const diffMin = Math.floor(diffSec / 60);\n  const diffHours = Math.floor(diffMin / 60);\n  const diffDays = Math.floor(diffHours / 24);\n  \n  if (diffSec < 60) {\n    return 'Just now';\n  } else if (diffMin < 60) {\n    return `${diffMin}m ago`;\n  } else if (diffHours < 24) {\n    return `${diffHours}h ago`;\n  } else if (diffDays < 7) {\n    return `${diffDays}d ago`;\n  } else {\n    return date.toLocaleDateString();\n  }\n});\n\n// Get icon based on notification type\nconst notificationIcon = computed(() => {\n  switch (props.notification.type) {\n    case 'alert':\n      return '⚠️';\n    case 'success':\n      return '✅';\n    case 'error':\n      return '❌';\n    case 'info':\n    default:\n      return 'ℹ️';\n  }\n});\n\n// Emit click event\nconst emit = defineEmits(['click']);\nconst handleClick = () => {\n  emit('click', props.notification);\n};\n</script>\n\n<template>\n  <div \n    class=\"notification-item gap-thin flex pd-small radius-small bg-light\" \n    :class=\"{ 'bg-second-small': isUnread }\"\n    @click=\"handleClick\"\n  >\n    <div class=\"notification-icon\">\n      {{ notificationIcon }}\n    </div>\n    <div class=\"notification-content\">\n      <p class=\"p-medium t-medium mn-b-small\">{{ notification.title }}</p>\n      <p class=\"p-small mn-b-small\">{{ notification.body }}</p>\n      <p class=\"pd-thin w-max radius-thin bg-white\">{{ formattedDate }}</p>\n    </div>\n    <div v-if=\"isUnread\" class=\"flex-child-default unread-indicator\"></div>\n  </div>\n</template>\n\n<style scoped>\n.unread-indicator {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background-color: var(--primary-color, #0066cc);\n  align-self: center;\n  margin-left: 0.5rem;\n}\n</style>"],"names":["computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIA,UAAM,QAAQ;AAQd,UAAM,WAAWA,IAAQ,SAAC,MAAM,MAAM,aAAa,WAAW,MAAM;AAGpE,UAAM,gBAAgBA,IAAQ,SAAC,MAAM;AACnC,YAAM,OAAO,IAAI,KAAK,MAAM,aAAa,SAAS;AAClD,YAAM,MAAM,oBAAI,KAAM;AACtB,YAAM,SAAS,MAAM;AACrB,YAAM,UAAU,KAAK,MAAM,SAAS,GAAI;AACxC,YAAM,UAAU,KAAK,MAAM,UAAU,EAAE;AACvC,YAAM,YAAY,KAAK,MAAM,UAAU,EAAE;AACzC,YAAM,WAAW,KAAK,MAAM,YAAY,EAAE;AAE1C,UAAI,UAAU,IAAI;AAChB,eAAO;AAAA,MACX,WAAa,UAAU,IAAI;AACvB,eAAO,GAAG,OAAO;AAAA,MACrB,WAAa,YAAY,IAAI;AACzB,eAAO,GAAG,SAAS;AAAA,MACvB,WAAa,WAAW,GAAG;AACvB,eAAO,GAAG,QAAQ;AAAA,MACtB,OAAS;AACL,eAAO,KAAK,mBAAoB;AAAA,MACpC;AAAA,IACA,CAAC;AAGD,UAAM,mBAAmBA,IAAQ,SAAC,MAAM;AACtC,cAAQ,MAAM,aAAa,MAAI;AAAA,QAC7B,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AAAA,QACL;AACE,iBAAO;AAAA,MACb;AAAA,IACA,CAAC;AAGD,UAAM,OAAO;AACb,UAAM,cAAc,MAAM;AACxB,WAAK,SAAS,MAAM,YAAY;AAAA,IAClC;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/notifications/components/blocks/NotificationItem.vue.js

@@ -2,12 +2,12 @@ import { computed, createElementBlock, openBlock, normalizeClass, createElementV
 import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "notification-icon" };
 const _hoisted_2 = { class: "notification-content" };
-const _hoisted_3 = { class: "notification-title" };
-const _hoisted_4 = { class: "notification-body" };
-const _hoisted_5 = { class: "notification-time" };
+const _hoisted_3 = { class: "p-medium t-medium mn-b-small" };
+const _hoisted_4 = { class: "p-small mn-b-small" };
+const _hoisted_5 = { class: "pd-thin w-max radius-thin bg-white" };
 const _hoisted_6 = {
   key: 0,
-  class: "unread-indicator"
+  class: "flex-child-default unread-indicator"
 };
 const _sfc_main = {
   __name: "NotificationItem",
@@ -60,21 +60,21 @@ const _sfc_main = {
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["notification-item", { unread: isUnread.value }]),
+        class: normalizeClass(["notification-item gap-thin flex pd-small radius-small bg-light", { "bg-second-small": isUnread.value }]),
         onClick: handleClick
       }, [
         createElementVNode("div", _hoisted_1, toDisplayString(notificationIcon.value), 1),
         createElementVNode("div", _hoisted_2, [
-          createElementVNode("h3", _hoisted_3, toDisplayString(__props.notification.title), 1),
+          createElementVNode("p", _hoisted_3, toDisplayString(__props.notification.title), 1),
           createElementVNode("p", _hoisted_4, toDisplayString(__props.notification.body), 1),
-          createElementVNode("span", _hoisted_5, toDisplayString(formattedDate.value), 1)
+          createElementVNode("p", _hoisted_5, toDisplayString(formattedDate.value), 1)
         ]),
         isUnread.value ? (openBlock(), createElementBlock("div", _hoisted_6)) : createCommentVNode("", true)
       ], 2);
     };
   }
 };
-const NotificationItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c57c48a6"]]);
+const NotificationItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8aa96de9"]]);
 export {
   NotificationItem as default
 };

package/dist/martyrs/src/modules/notifications/components/blocks/NotificationItem.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationItem.vue.js","sources":["../../../../../../../src/modules/notifications/components/blocks/NotificationItem.vue"],"sourcesContent":["<script setup>\nimport { computed } from 'vue';\n\n// Props\nconst props = defineProps({\n  notification: {\n    type: Object,\n    required: true\n  }\n});\n\n// Compute if notification is unread\nconst isUnread = computed(() => props.notification.status !== 'read');\n\n// Format date\nconst formattedDate = computed(() => {\n  const date = new Date(props.notification.createdAt);\n  const now = new Date();\n  const diffMs = now - date;\n  const diffSec = Math.floor(diffMs / 1000);\n  const diffMin = Math.floor(diffSec / 60);\n  const diffHours = Math.floor(diffMin / 60);\n  const diffDays = Math.floor(diffHours / 24);\n  \n  if (diffSec < 60) {\n    return 'Just now';\n  } else if (diffMin < 60) {\n    return `${diffMin}m ago`;\n  } else if (diffHours < 24) {\n    return `${diffHours}h ago`;\n  } else if (diffDays < 7) {\n    return `${diffDays}d ago`;\n  } else {\n    return date.toLocaleDateString();\n  }\n});\n\n// Get icon based on notification type\nconst notificationIcon = computed(() => {\n  switch (props.notification.type) {\n    case 'alert':\n      return '⚠️';\n    case 'success':\n      return '✅';\n    case 'error':\n      return '❌';\n    case 'info':\n    default:\n      return 'ℹ️';\n  }\n});\n\n// Emit click event\nconst emit = defineEmits(['click']);\nconst handleClick = () => {\n  emit('click', props.notification);\n};\n</script>\n\n<template>\n  <div \n    class=\"notification-item\" \n    :class=\"{ unread: isUnread }\"\n    @click=\"handleClick\"\n  >\n    <div class=\"notification-icon\">\n      {{ notificationIcon }}\n    </div>\n    <div class=\"notification-content\">\n      <h3 class=\"notification-title\">{{ notification.title }}</h3>\n      <p class=\"notification-body\">{{ notification.body }}</p>\n      <span class=\"notification-time\">{{ formattedDate }}</span>\n    </div>\n    <div v-if=\"isUnread\" class=\"unread-indicator\"></div>\n  </div>\n</template>\n\n<style scoped>\n.notification-item {\n  display: flex;\n  padding: 1rem;\n  border-radius: 8px;\n  background-color: #fff;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  cursor: pointer;\n  transition: background-color 0.2s;\n}\n\n.notification-item:hover {\n  background-color: #f9f9f9;\n}\n\n.notification-item.unread {\n  background-color: #f0f7ff;\n}\n\n.notification-icon {\n  flex-shrink: 0;\n  margin-right: 1rem;\n  font-size: 1.5rem;\n}\n\n.notification-content {\n  flex: 1;\n}\n\n.notification-title {\n  margin: 0 0 0.25rem;\n  font-weight: 600;\n  font-size: 1rem;\n}\n\n.notification-body {\n  margin: 0 0 0.5rem;\n  color: #666;\n  font-size: 0.9rem;\n}\n\n.notification-time {\n  font-size: 0.8rem;\n  color: #999;\n}\n\n.unread-indicator {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background-color: var(--primary-color, #0066cc);\n  align-self: center;\n  margin-left: 0.5rem;\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAIA,UAAM,QAAQ;AAQd,UAAM,WAAW,SAAS,MAAM,MAAM,aAAa,WAAW,MAAM;AAGpE,UAAM,gBAAgB,SAAS,MAAM;AACnC,YAAM,OAAO,IAAI,KAAK,MAAM,aAAa,SAAS;AAClD,YAAM,MAAM,oBAAI,KAAM;AACtB,YAAM,SAAS,MAAM;AACrB,YAAM,UAAU,KAAK,MAAM,SAAS,GAAI;AACxC,YAAM,UAAU,KAAK,MAAM,UAAU,EAAE;AACvC,YAAM,YAAY,KAAK,MAAM,UAAU,EAAE;AACzC,YAAM,WAAW,KAAK,MAAM,YAAY,EAAE;AAE1C,UAAI,UAAU,IAAI;AAChB,eAAO;AAAA,MACX,WAAa,UAAU,IAAI;AACvB,eAAO,GAAG,OAAO;AAAA,MACrB,WAAa,YAAY,IAAI;AACzB,eAAO,GAAG,SAAS;AAAA,MACvB,WAAa,WAAW,GAAG;AACvB,eAAO,GAAG,QAAQ;AAAA,MACtB,OAAS;AACL,eAAO,KAAK,mBAAoB;AAAA,MACpC;AAAA,IACA,CAAC;AAGD,UAAM,mBAAmB,SAAS,MAAM;AACtC,cAAQ,MAAM,aAAa,MAAI;AAAA,QAC7B,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AAAA,QACL;AACE,iBAAO;AAAA,MACb;AAAA,IACA,CAAC;AAGD,UAAM,OAAO;AACb,UAAM,cAAc,MAAM;AACxB,WAAK,SAAS,MAAM,YAAY;AAAA,IAClC;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NotificationItem.vue.js","sources":["../../../../../../../src/modules/notifications/components/blocks/NotificationItem.vue"],"sourcesContent":["<script setup>\nimport { computed } from 'vue';\n\n// Props\nconst props = defineProps({\n  notification: {\n    type: Object,\n    required: true\n  }\n});\n\n// Compute if notification is unread\nconst isUnread = computed(() => props.notification.status !== 'read');\n\n// Format date\nconst formattedDate = computed(() => {\n  const date = new Date(props.notification.createdAt);\n  const now = new Date();\n  const diffMs = now - date;\n  const diffSec = Math.floor(diffMs / 1000);\n  const diffMin = Math.floor(diffSec / 60);\n  const diffHours = Math.floor(diffMin / 60);\n  const diffDays = Math.floor(diffHours / 24);\n  \n  if (diffSec < 60) {\n    return 'Just now';\n  } else if (diffMin < 60) {\n    return `${diffMin}m ago`;\n  } else if (diffHours < 24) {\n    return `${diffHours}h ago`;\n  } else if (diffDays < 7) {\n    return `${diffDays}d ago`;\n  } else {\n    return date.toLocaleDateString();\n  }\n});\n\n// Get icon based on notification type\nconst notificationIcon = computed(() => {\n  switch (props.notification.type) {\n    case 'alert':\n      return '⚠️';\n    case 'success':\n      return '✅';\n    case 'error':\n      return '❌';\n    case 'info':\n    default:\n      return 'ℹ️';\n  }\n});\n\n// Emit click event\nconst emit = defineEmits(['click']);\nconst handleClick = () => {\n  emit('click', props.notification);\n};\n</script>\n\n<template>\n  <div \n    class=\"notification-item gap-thin flex pd-small radius-small bg-light\" \n    :class=\"{ 'bg-second-small': isUnread }\"\n    @click=\"handleClick\"\n  >\n    <div class=\"notification-icon\">\n      {{ notificationIcon }}\n    </div>\n    <div class=\"notification-content\">\n      <p class=\"p-medium t-medium mn-b-small\">{{ notification.title }}</p>\n      <p class=\"p-small mn-b-small\">{{ notification.body }}</p>\n      <p class=\"pd-thin w-max radius-thin bg-white\">{{ formattedDate }}</p>\n    </div>\n    <div v-if=\"isUnread\" class=\"flex-child-default unread-indicator\"></div>\n  </div>\n</template>\n\n<style scoped>\n.unread-indicator {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background-color: var(--primary-color, #0066cc);\n  align-self: center;\n  margin-left: 0.5rem;\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAIA,UAAM,QAAQ;AAQd,UAAM,WAAW,SAAS,MAAM,MAAM,aAAa,WAAW,MAAM;AAGpE,UAAM,gBAAgB,SAAS,MAAM;AACnC,YAAM,OAAO,IAAI,KAAK,MAAM,aAAa,SAAS;AAClD,YAAM,MAAM,oBAAI,KAAM;AACtB,YAAM,SAAS,MAAM;AACrB,YAAM,UAAU,KAAK,MAAM,SAAS,GAAI;AACxC,YAAM,UAAU,KAAK,MAAM,UAAU,EAAE;AACvC,YAAM,YAAY,KAAK,MAAM,UAAU,EAAE;AACzC,YAAM,WAAW,KAAK,MAAM,YAAY,EAAE;AAE1C,UAAI,UAAU,IAAI;AAChB,eAAO;AAAA,MACX,WAAa,UAAU,IAAI;AACvB,eAAO,GAAG,OAAO;AAAA,MACrB,WAAa,YAAY,IAAI;AACzB,eAAO,GAAG,SAAS;AAAA,MACvB,WAAa,WAAW,GAAG;AACvB,eAAO,GAAG,QAAQ;AAAA,MACtB,OAAS;AACL,eAAO,KAAK,mBAAoB;AAAA,MACpC;AAAA,IACA,CAAC;AAGD,UAAM,mBAAmB,SAAS,MAAM;AACtC,cAAQ,MAAM,aAAa,MAAI;AAAA,QAC7B,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AAAA,QACL;AACE,iBAAO;AAAA,MACb;AAAA,IACA,CAAC;AAGD,UAAM,OAAO;AACb,UAAM,cAAc,MAAM;AACxB,WAAK,SAAS,MAAM,YAAY;AAAA,IAClC;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/notifications/components/elements/NotificationBadge.vue.cjs

@@ -2,6 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const vueRouter = require("vue-router");
+const Popup = require("../../../../components/Popup/Popup.vue2.cjs");
 const NotificationItem = require("../blocks/NotificationItem.vue.cjs");
 const auth = require("../../../auth/views/store/auth.cjs");
 const IconBell = require("../../../icons/entities/IconBell.vue.cjs");
@@ -12,30 +13,26 @@ const _hoisted_3 = {
   key: 0,
   class: "button-counter flex-center"
 };
-const _hoisted_4 = {
-  key: 0,
-  class: "notifications-dropdown"
-};
-const _hoisted_5 = { class: "notifications-header" };
-const _hoisted_6 = {
+const _hoisted_4 = { class: "cols-1 gap-thin o-y-scroll" };
+const _hoisted_5 = {
   key: 0,
   class: "notifications-loading"
 };
-const _hoisted_7 = {
+const _hoisted_6 = {
   key: 1,
   class: "notifications-empty"
 };
-const _hoisted_8 = {
+const _hoisted_7 = {
   key: 2,
-  class: "notifications-list"
+  class: "flex-column flex gap-thin"
 };
-const _hoisted_9 = { class: "notifications-footer" };
+const _hoisted_8 = { class: "flex-nowrap flex gap-thin" };
 const _sfc_main = {
   __name: "NotificationBadge",
   props: {
     maxNotifications: {
       type: Number,
-      default: 5
+      default: 10
     },
     fill: {
       type: String,
@@ -53,6 +50,9 @@ const _sfc_main = {
     const toggleNotifications = () => {
       isOpen.value = !isOpen.value;
     };
+    const closeNotifications = () => {
+      isOpen.value = false;
+    };
     const handleNotificationClick = (notification) => {
       isOpen.value = false;
       if (notification._id) {
@@ -62,22 +62,12 @@ const _sfc_main = {
         });
       }
     };
-    const handleClickOutside = (event) => {
-      const container = document.querySelector(".notification-badge-container");
-      if (container && !container.contains(event.target)) {
-        isOpen.value = false;
-      }
-    };
     vue.onMounted(() => {
-      document.addEventListener("click", handleClickOutside);
       const userId = auth.state.user._id;
       if (userId) {
         getNotifications(userId);
       }
     });
-    vue.onUnmounted(() => {
-      document.removeEventListener("click", handleClickOutside);
-    });
     return (_ctx, _cache) => {
       const _component_router_link = vue.resolveComponent("router-link");
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
@@ -94,40 +84,49 @@ const _sfc_main = {
             vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(unreadCount) > 99 ? "99+" : vue.unref(unreadCount)), 1)
           ])) : vue.createCommentVNode("", true)
         ], 8, _hoisted_2),
-        isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
-          vue.createElementVNode("div", _hoisted_5, [
-            _cache[2] || (_cache[2] = vue.createElementVNode("h3", null, "Notifications", -1)),
-            vue.unref(unreadCount) > 0 ? (vue.openBlock(), vue.createElementBlock("button", {
-              key: 0,
-              class: "mark-all-read-btn",
-              onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(markAllAsRead) && vue.unref(markAllAsRead)(...args))
-            }, " Mark all read ")) : vue.createCommentVNode("", true)
+        vue.createVNode(Popup.default, {
+          title: "Notifications",
+          onClosePopup: closeNotifications,
+          isPopupOpen: isOpen.value,
+          align: "center right",
+          class: "bg-white h-min-100 w-100 w-max-30r pd-medium"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_4, [
+              vue.unref(loading) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, " Loading... ")) : vue.unref(notifications).length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, " No notifications ")) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(recentNotifications.value, (notification) => {
+                  return vue.openBlock(), vue.createBlock(NotificationItem.default, {
+                    key: notification._id,
+                    notification,
+                    onClick: ($event) => handleNotificationClick(notification)
+                  }, null, 8, ["notification", "onClick"]);
+                }), 128)),
+                vue.createElementVNode("div", _hoisted_8, [
+                  vue.unref(unreadCount) > 0 ? (vue.openBlock(), vue.createElementBlock("button", {
+                    key: 0,
+                    class: "w-100 bg-second t-white radius-small button",
+                    onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(markAllAsRead) && vue.unref(markAllAsRead)(...args))
+                  }, " Mark all read ")) : vue.createCommentVNode("", true),
+                  vue.createVNode(_component_router_link, {
+                    class: "w-100 bg-black t-white radius-small button",
+                    to: "/notifications",
+                    onClick: closeNotifications
+                  }, {
+                    default: vue.withCtx(() => _cache[1] || (_cache[1] = [
+                      vue.createTextVNode(" View all ")
+                    ])),
+                    _: 1
+                  })
+                ])
+              ]))
+            ])
           ]),
-          vue.unref(loading) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, " Loading... ")) : vue.unref(notifications).length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, " No notifications ")) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(recentNotifications.value, (notification) => {
-              return vue.openBlock(), vue.createBlock(NotificationItem.default, {
-                key: notification._id,
-                notification,
-                onClick: ($event) => handleNotificationClick(notification)
-              }, null, 8, ["notification", "onClick"]);
-            }), 128))
-          ])),
-          vue.createElementVNode("div", _hoisted_9, [
-            vue.createVNode(_component_router_link, {
-              to: "/notifications",
-              onClick: _cache[1] || (_cache[1] = ($event) => isOpen.value = false)
-            }, {
-              default: vue.withCtx(() => _cache[3] || (_cache[3] = [
-                vue.createTextVNode(" View all notifications ")
-              ])),
-              _: 1
-            })
-          ])
-        ])) : vue.createCommentVNode("", true)
+          _: 1
+        }, 8, ["isPopupOpen"])
       ]);
     };
   }
 };
-const NotificationBadge = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-a7d7de5f"]]);
+const NotificationBadge = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-26b93994"]]);
 exports.default = NotificationBadge;
 //# sourceMappingURL=NotificationBadge.vue.cjs.map

package/dist/martyrs/src/modules/notifications/components/elements/NotificationBadge.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationBadge.vue.cjs","sources":["../../../../../../../src/modules/notifications/components/elements/NotificationBadge.vue"],"sourcesContent":["<template>\n  <div class=\"notification-badge-container\">\n    <button \n      class=\"i-semi notification-button\"\n      @click=\"toggleNotifications\"\n      :aria-label=\"unreadCount > 0 ? `${unreadCount} unread notifications` : 'No unread notifications'\"\n    >\n      <IconBell class=\"notification-icon i-medium\" :fill=\"fill\"/>\n      <div  \n        v-if=\"unreadCount > 0\" \n        class=\"button-counter flex-center\"\n      >\n        <span>{{ unreadCount > 99 ? '99+' : unreadCount }}</span>\n      </div>\n    </button>\n    <div v-if=\"isOpen\" class=\"notifications-dropdown\">\n      <div class=\"notifications-header\">\n        <h3>Notifications</h3>\n        <button \n          v-if=\"unreadCount > 0\" \n          class=\"mark-all-read-btn\" \n          @click=\"markAllAsRead\"\n        >\n          Mark all read\n        </button>\n      </div>\n      <div v-if=\"loading\" class=\"notifications-loading\">\n        Loading...\n      </div>\n      <div v-else-if=\"notifications.length === 0\" class=\"notifications-empty\">\n        No notifications\n      </div>\n      <div v-else class=\"notifications-list\">\n        <notification-item \n          v-for=\"notification in recentNotifications\" \n          :key=\"notification._id\" \n          :notification=\"notification\"\n          @click=\"handleNotificationClick(notification)\"\n        />\n      </div>\n      <div class=\"notifications-footer\">\n        <router-link to=\"/notifications\" @click=\"isOpen = false\">\n          View all notifications\n        </router-link>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, onUnmounted, inject } from 'vue';\nimport { useRouter } from 'vue-router';\nimport NotificationItem from '../blocks/NotificationItem.vue';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\nimport IconBell from '@martyrs/src/modules/icons/entities/IconBell.vue';\n\nconst props = defineProps({\n  maxNotifications: {\n    type: Number,\n    default: 5\n  },\n  fill: {\n    type: String,\n    default: 'rgb(var(--white))'\n  }\n});\n\n// Get router and notification functionality\nconst router = useRouter();\nconst { notifications, unreadCount, loading, markAllAsRead, getNotifications } = inject('useNotifications')();\n\n// Local state\nconst isOpen = ref(false);\n\n// Computed properties\nconst recentNotifications = computed(() => {\n  return notifications.value\n    .slice()\n    .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))\n    .slice(0, props.maxNotifications);\n});\n\n// Methods\nconst toggleNotifications = () => {\n  isOpen.value = !isOpen.value;\n};\n\nconst handleNotificationClick = (notification) => {\n  isOpen.value = false;\n  \n  if (notification._id) {\n    // Handle in store\n    actions.handleNotificationAction({\n      notificationId: notification._id,\n      ...notification.metadata\n    });\n  }\n};\n\n// Close dropdown when clicking outside\nconst handleClickOutside = (event) => {\n  const container = document.querySelector('.notification-badge-container');\n  if (container && !container.contains(event.target)) {\n    isOpen.value = false;\n  }\n};\n\n// Lifecycle hooks\nonMounted(() => {\n  document.addEventListener('click', handleClickOutside);\n\n  // Load notifications when component mounts\n  const userId = auth.state.user._id;\n  if (userId) {\n    getNotifications(userId);\n  }\n});\n\nonUnmounted(() => {\n  document.removeEventListener('click', handleClickOutside);\n});\n</script>\n\n<style scoped>\n.notification-badge-container {\n  position: relative;\n  display: inline-block;\n}\n\n.notification-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: relative;\n  font-size: 1.2rem;\n}\n\n.notification-icon {\n  font-size: 1.4rem;\n}\n.button-counter {\n  position: absolute;\n  right: -8px;\n  bottom: -8px;\n  background: rgb(var(--fourth));\n  color: rgb(var(--white));\n  height: 16px;\n  border-radius: 16px;\n  width: 16px;\n  font-weight: 500;\n  text-align: center;\n  line-height: 16px;\n  font-size: 10px;\n}\n.notifications-dropdown {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  width: 320px;\n  max-height: 400px;\n  overflow-y: auto;\n  background-color: white;\n  border-radius: 4px;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n}\n\n.notifications-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  border-bottom: 1px solid #eee;\n}\n\n.notifications-header h3 {\n  margin: 0;\n  font-size: 1rem;\n}\n\n.mark-all-read-btn {\n  background: none;\n  border: none;\n  color: #2196f3;\n  font-size: 0.8rem;\n  cursor: pointer;\n}\n\n.notifications-loading,\n.notifications-empty {\n  padding: 24px;\n  text-align: center;\n  color: #666;\n}\n\n.notifications-list {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.notifications-footer {\n  padding: 12px 16px;\n  text-align: center;\n  border-top: 1px solid #eee;\n}\n\n.notifications-footer a {\n  color: #2196f3;\n  text-decoration: none;\n  font-size: 0.9rem;\n}\n</style>"],"names":["useRouter","inject","ref","computed","onMounted","auth.state","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,UAAM,QAAQ;AAYCA,cAAS,UAAA;AACxB,UAAM,EAAE,eAAe,aAAa,SAAS,eAAe,qBAAqBC,IAAAA,OAAO,kBAAkB,EAAG;AAG7G,UAAM,SAASC,IAAG,IAAC,KAAK;AAGxB,UAAM,sBAAsBC,IAAQ,SAAC,MAAM;AACzC,aAAO,cAAc,MAClB,MAAK,EACL,KAAK,CAAC,GAAG,MAAM,IAAI,KAAK,EAAE,SAAS,IAAI,IAAI,KAAK,EAAE,SAAS,CAAC,EAC5D,MAAM,GAAG,MAAM,gBAAgB;AAAA,IACpC,CAAC;AAGD,UAAM,sBAAsB,MAAM;AAChC,aAAO,QAAQ,CAAC,OAAO;AAAA,IACzB;AAEA,UAAM,0BAA0B,CAAC,iBAAiB;AAChD,aAAO,QAAQ;AAEf,UAAI,aAAa,KAAK;AAEpB,gBAAQ,yBAAyB;AAAA,UAC/B,gBAAgB,aAAa;AAAA,UAC7B,GAAG,aAAa;AAAA,QACtB,CAAK;AAAA,MACL;AAAA,IACA;AAGA,UAAM,qBAAqB,CAAC,UAAU;AACpC,YAAM,YAAY,SAAS,cAAc,+BAA+B;AACxE,UAAI,aAAa,CAAC,UAAU,SAAS,MAAM,MAAM,GAAG;AAClD,eAAO,QAAQ;AAAA,MACnB;AAAA,IACA;AAGAC,QAAAA,UAAU,MAAM;AACd,eAAS,iBAAiB,SAAS,kBAAkB;AAGrD,YAAM,SAASC,WAAW,KAAK;AAC/B,UAAI,QAAQ;AACV,yBAAiB,MAAM;AAAA,MAC3B;AAAA,IACA,CAAC;AAEDC,QAAAA,YAAY,MAAM;AAChB,eAAS,oBAAoB,SAAS,kBAAkB;AAAA,IAC1D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NotificationBadge.vue.cjs","sources":["../../../../../../../src/modules/notifications/components/elements/NotificationBadge.vue"],"sourcesContent":["<template>\n  <div class=\"notification-badge-container\">\n    <button \n      class=\"i-semi notification-button\"\n      @click=\"toggleNotifications\"\n      :aria-label=\"unreadCount > 0 ? `${unreadCount} unread notifications` : 'No unread notifications'\"\n    >\n      <IconBell class=\"notification-icon i-medium\" :fill=\"fill\"/>\n      <div  \n        v-if=\"unreadCount > 0\" \n        class=\"button-counter flex-center\"\n      >\n        <span>{{ unreadCount > 99 ? '99+' : unreadCount }}</span>\n      </div>\n    </button>\n    \n    <Popup\n      title=\"Notifications\"\n      @close-popup=\"closeNotifications\"\n      :isPopupOpen=\"isOpen\"\n      align=\"center right\"\n      class=\"bg-white h-min-100 w-100 w-max-30r pd-medium\"\n    >\n      <div class=\"cols-1 gap-thin o-y-scroll\">\n        <div v-if=\"loading\" class=\"notifications-loading\">\n          Loading...\n        </div>\n        \n        <div v-else-if=\"notifications.length === 0\" class=\"notifications-empty\">\n          No notifications\n        </div>\n        \n        <div v-else class=\"flex-column flex gap-thin\">\n          <notification-item \n            v-for=\"notification in recentNotifications\" \n            :key=\"notification._id\" \n            :notification=\"notification\"\n            @click=\"handleNotificationClick(notification)\"\n          />\n\n          <div class=\"flex-nowrap flex gap-thin\">\n            <button \n              v-if=\"unreadCount > 0\"\n              class=\"w-100 bg-second t-white radius-small  button\" \n              @click=\"markAllAsRead\"\n            >\n              Mark all read\n            </button>\n\n            <router-link class=\"w-100 bg-black t-white radius-small button\" to=\"/notifications\" @click=\"closeNotifications\">\n              View all \n            </router-link>\n          </div>\n\n        </div>\n\n      </div>\n    </Popup>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, inject } from 'vue';\nimport { useRouter } from 'vue-router';\n\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\n\nimport NotificationItem from '../blocks/NotificationItem.vue';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\nimport IconBell from '@martyrs/src/modules/icons/entities/IconBell.vue';\n\nconst props = defineProps({\n  maxNotifications: {\n    type: Number,\n    default: 10\n  },\n  fill: {\n    type: String,\n    default: 'rgb(var(--white))'\n  }\n});\n\n// Get router and notification functionality\nconst router = useRouter();\nconst { notifications, unreadCount, loading, markAllAsRead, getNotifications } = inject('useNotifications')();\n\n// Local state\nconst isOpen = ref(false);\n\n// Computed properties\nconst recentNotifications = computed(() => {\n  return notifications.value\n    .slice()\n    .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))\n    .slice(0, props.maxNotifications);\n});\n\n// Methods\nconst toggleNotifications = () => {\n  isOpen.value = !isOpen.value;\n};\n\nconst closeNotifications = () => {\n  isOpen.value = false;\n};\n\nconst handleNotificationClick = (notification) => {\n  isOpen.value = false;\n  \n  if (notification._id) {\n    // Handle in store\n    actions.handleNotificationAction({\n      notificationId: notification._id,\n      ...notification.metadata\n    });\n  }\n};\n\n// Lifecycle hooks\nonMounted(() => {\n  // Load notifications when component mounts\n  const userId = auth.state.user._id;\n  if (userId) {\n    getNotifications(userId);\n  }\n});\n</script>\n\n<style scoped>\n.notification-badge-container {\n  position: relative;\n  display: inline-block;\n}\n\n.notification-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: relative;\n  font-size: 1.2rem;\n}\n\n.notification-icon {\n  font-size: 1.4rem;\n}\n\n.button-counter {\n  position: absolute;\n  right: -8px;\n  bottom: -8px;\n  background: rgb(var(--fourth));\n  color: rgb(var(--white));\n  height: 16px;\n  border-radius: 16px;\n  width: 16px;\n  font-weight: 500;\n  text-align: center;\n  line-height: 16px;\n  font-size: 10px;\n}\n\n\n.notifications-loading,\n.notifications-empty {\n  padding: 24px;\n  text-align: center;\n  color: rgb(var(--text-light));\n}\n</style>"],"names":["useRouter","inject","ref","computed","onMounted","auth.state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,UAAM,QAAQ;AAYCA,cAAS,UAAA;AACxB,UAAM,EAAE,eAAe,aAAa,SAAS,eAAe,qBAAqBC,IAAAA,OAAO,kBAAkB,EAAG;AAG7G,UAAM,SAASC,IAAG,IAAC,KAAK;AAGxB,UAAM,sBAAsBC,IAAQ,SAAC,MAAM;AACzC,aAAO,cAAc,MAClB,MAAK,EACL,KAAK,CAAC,GAAG,MAAM,IAAI,KAAK,EAAE,SAAS,IAAI,IAAI,KAAK,EAAE,SAAS,CAAC,EAC5D,MAAM,GAAG,MAAM,gBAAgB;AAAA,IACpC,CAAC;AAGD,UAAM,sBAAsB,MAAM;AAChC,aAAO,QAAQ,CAAC,OAAO;AAAA,IACzB;AAEA,UAAM,qBAAqB,MAAM;AAC/B,aAAO,QAAQ;AAAA,IACjB;AAEA,UAAM,0BAA0B,CAAC,iBAAiB;AAChD,aAAO,QAAQ;AAEf,UAAI,aAAa,KAAK;AAEpB,gBAAQ,yBAAyB;AAAA,UAC/B,gBAAgB,aAAa;AAAA,UAC7B,GAAG,aAAa;AAAA,QACtB,CAAK;AAAA,MACL;AAAA,IACA;AAGAC,QAAAA,UAAU,MAAM;AAEd,YAAM,SAASC,WAAW,KAAK;AAC/B,UAAI,QAAQ;AACV,yBAAiB,MAAM;AAAA,MAC3B;AAAA,IACA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/notifications/components/elements/NotificationBadge.vue.js

@@ -1,5 +1,6 @@
-import { inject, ref, computed, onMounted, onUnmounted, resolveComponent, createElementBlock, openBlock, createElementVNode, createCommentVNode, unref, createVNode, toDisplayString, Fragment, renderList, createBlock, withCtx, createTextVNode } from "vue";
+import { inject, ref, computed, onMounted, resolveComponent, createElementBlock, openBlock, createElementVNode, createVNode, unref, createCommentVNode, toDisplayString, withCtx, Fragment, renderList, createBlock, createTextVNode } from "vue";
 import { useRouter } from "vue-router";
+import _sfc_main$2 from "../../../../components/Popup/Popup.vue2.js";
 import NotificationItem from "../blocks/NotificationItem.vue.js";
 import { state } from "../../../auth/views/store/auth.js";
 import _sfc_main$1 from "../../../icons/entities/IconBell.vue.js";
@@ -10,30 +11,26 @@ const _hoisted_3 = {
   key: 0,
   class: "button-counter flex-center"
 };
-const _hoisted_4 = {
-  key: 0,
-  class: "notifications-dropdown"
-};
-const _hoisted_5 = { class: "notifications-header" };
-const _hoisted_6 = {
+const _hoisted_4 = { class: "cols-1 gap-thin o-y-scroll" };
+const _hoisted_5 = {
   key: 0,
   class: "notifications-loading"
 };
-const _hoisted_7 = {
+const _hoisted_6 = {
   key: 1,
   class: "notifications-empty"
 };
-const _hoisted_8 = {
+const _hoisted_7 = {
   key: 2,
-  class: "notifications-list"
+  class: "flex-column flex gap-thin"
 };
-const _hoisted_9 = { class: "notifications-footer" };
+const _hoisted_8 = { class: "flex-nowrap flex gap-thin" };
 const _sfc_main = {
   __name: "NotificationBadge",
   props: {
     maxNotifications: {
       type: Number,
-      default: 5
+      default: 10
     },
     fill: {
       type: String,
@@ -51,6 +48,9 @@ const _sfc_main = {
     const toggleNotifications = () => {
       isOpen.value = !isOpen.value;
     };
+    const closeNotifications = () => {
+      isOpen.value = false;
+    };
     const handleNotificationClick = (notification) => {
       isOpen.value = false;
       if (notification._id) {
@@ -60,22 +60,12 @@ const _sfc_main = {
         });
       }
     };
-    const handleClickOutside = (event) => {
-      const container = document.querySelector(".notification-badge-container");
-      if (container && !container.contains(event.target)) {
-        isOpen.value = false;
-      }
-    };
     onMounted(() => {
-      document.addEventListener("click", handleClickOutside);
       const userId = state.user._id;
       if (userId) {
         getNotifications(userId);
       }
     });
-    onUnmounted(() => {
-      document.removeEventListener("click", handleClickOutside);
-    });
     return (_ctx, _cache) => {
       const _component_router_link = resolveComponent("router-link");
       return openBlock(), createElementBlock("div", _hoisted_1, [
@@ -92,41 +82,50 @@ const _sfc_main = {
             createElementVNode("span", null, toDisplayString(unref(unreadCount) > 99 ? "99+" : unref(unreadCount)), 1)
           ])) : createCommentVNode("", true)
         ], 8, _hoisted_2),
-        isOpen.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
-          createElementVNode("div", _hoisted_5, [
-            _cache[2] || (_cache[2] = createElementVNode("h3", null, "Notifications", -1)),
-            unref(unreadCount) > 0 ? (openBlock(), createElementBlock("button", {
-              key: 0,
-              class: "mark-all-read-btn",
-              onClick: _cache[0] || (_cache[0] = (...args) => unref(markAllAsRead) && unref(markAllAsRead)(...args))
-            }, " Mark all read ")) : createCommentVNode("", true)
+        createVNode(_sfc_main$2, {
+          title: "Notifications",
+          onClosePopup: closeNotifications,
+          isPopupOpen: isOpen.value,
+          align: "center right",
+          class: "bg-white h-min-100 w-100 w-max-30r pd-medium"
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_4, [
+              unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_5, " Loading... ")) : unref(notifications).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_6, " No notifications ")) : (openBlock(), createElementBlock("div", _hoisted_7, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(recentNotifications.value, (notification) => {
+                  return openBlock(), createBlock(NotificationItem, {
+                    key: notification._id,
+                    notification,
+                    onClick: ($event) => handleNotificationClick(notification)
+                  }, null, 8, ["notification", "onClick"]);
+                }), 128)),
+                createElementVNode("div", _hoisted_8, [
+                  unref(unreadCount) > 0 ? (openBlock(), createElementBlock("button", {
+                    key: 0,
+                    class: "w-100 bg-second t-white radius-small button",
+                    onClick: _cache[0] || (_cache[0] = (...args) => unref(markAllAsRead) && unref(markAllAsRead)(...args))
+                  }, " Mark all read ")) : createCommentVNode("", true),
+                  createVNode(_component_router_link, {
+                    class: "w-100 bg-black t-white radius-small button",
+                    to: "/notifications",
+                    onClick: closeNotifications
+                  }, {
+                    default: withCtx(() => _cache[1] || (_cache[1] = [
+                      createTextVNode(" View all ")
+                    ])),
+                    _: 1
+                  })
+                ])
+              ]))
+            ])
           ]),
-          unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_6, " Loading... ")) : unref(notifications).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_7, " No notifications ")) : (openBlock(), createElementBlock("div", _hoisted_8, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(recentNotifications.value, (notification) => {
-              return openBlock(), createBlock(NotificationItem, {
-                key: notification._id,
-                notification,
-                onClick: ($event) => handleNotificationClick(notification)
-              }, null, 8, ["notification", "onClick"]);
-            }), 128))
-          ])),
-          createElementVNode("div", _hoisted_9, [
-            createVNode(_component_router_link, {
-              to: "/notifications",
-              onClick: _cache[1] || (_cache[1] = ($event) => isOpen.value = false)
-            }, {
-              default: withCtx(() => _cache[3] || (_cache[3] = [
-                createTextVNode(" View all notifications ")
-              ])),
-              _: 1
-            })
-          ])
-        ])) : createCommentVNode("", true)
+          _: 1
+        }, 8, ["isPopupOpen"])
       ]);
     };
   }
 };
-const NotificationBadge = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a7d7de5f"]]);
+const NotificationBadge = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-26b93994"]]);
 export {
   NotificationBadge as default
 };

package/dist/martyrs/src/modules/notifications/components/elements/NotificationBadge.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationBadge.vue.js","sources":["../../../../../../../src/modules/notifications/components/elements/NotificationBadge.vue"],"sourcesContent":["<template>\n  <div class=\"notification-badge-container\">\n    <button \n      class=\"i-semi notification-button\"\n      @click=\"toggleNotifications\"\n      :aria-label=\"unreadCount > 0 ? `${unreadCount} unread notifications` : 'No unread notifications'\"\n    >\n      <IconBell class=\"notification-icon i-medium\" :fill=\"fill\"/>\n      <div  \n        v-if=\"unreadCount > 0\" \n        class=\"button-counter flex-center\"\n      >\n        <span>{{ unreadCount > 99 ? '99+' : unreadCount }}</span>\n      </div>\n    </button>\n    <div v-if=\"isOpen\" class=\"notifications-dropdown\">\n      <div class=\"notifications-header\">\n        <h3>Notifications</h3>\n        <button \n          v-if=\"unreadCount > 0\" \n          class=\"mark-all-read-btn\" \n          @click=\"markAllAsRead\"\n        >\n          Mark all read\n        </button>\n      </div>\n      <div v-if=\"loading\" class=\"notifications-loading\">\n        Loading...\n      </div>\n      <div v-else-if=\"notifications.length === 0\" class=\"notifications-empty\">\n        No notifications\n      </div>\n      <div v-else class=\"notifications-list\">\n        <notification-item \n          v-for=\"notification in recentNotifications\" \n          :key=\"notification._id\" \n          :notification=\"notification\"\n          @click=\"handleNotificationClick(notification)\"\n        />\n      </div>\n      <div class=\"notifications-footer\">\n        <router-link to=\"/notifications\" @click=\"isOpen = false\">\n          View all notifications\n        </router-link>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, onUnmounted, inject } from 'vue';\nimport { useRouter } from 'vue-router';\nimport NotificationItem from '../blocks/NotificationItem.vue';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\nimport IconBell from '@martyrs/src/modules/icons/entities/IconBell.vue';\n\nconst props = defineProps({\n  maxNotifications: {\n    type: Number,\n    default: 5\n  },\n  fill: {\n    type: String,\n    default: 'rgb(var(--white))'\n  }\n});\n\n// Get router and notification functionality\nconst router = useRouter();\nconst { notifications, unreadCount, loading, markAllAsRead, getNotifications } = inject('useNotifications')();\n\n// Local state\nconst isOpen = ref(false);\n\n// Computed properties\nconst recentNotifications = computed(() => {\n  return notifications.value\n    .slice()\n    .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))\n    .slice(0, props.maxNotifications);\n});\n\n// Methods\nconst toggleNotifications = () => {\n  isOpen.value = !isOpen.value;\n};\n\nconst handleNotificationClick = (notification) => {\n  isOpen.value = false;\n  \n  if (notification._id) {\n    // Handle in store\n    actions.handleNotificationAction({\n      notificationId: notification._id,\n      ...notification.metadata\n    });\n  }\n};\n\n// Close dropdown when clicking outside\nconst handleClickOutside = (event) => {\n  const container = document.querySelector('.notification-badge-container');\n  if (container && !container.contains(event.target)) {\n    isOpen.value = false;\n  }\n};\n\n// Lifecycle hooks\nonMounted(() => {\n  document.addEventListener('click', handleClickOutside);\n\n  // Load notifications when component mounts\n  const userId = auth.state.user._id;\n  if (userId) {\n    getNotifications(userId);\n  }\n});\n\nonUnmounted(() => {\n  document.removeEventListener('click', handleClickOutside);\n});\n</script>\n\n<style scoped>\n.notification-badge-container {\n  position: relative;\n  display: inline-block;\n}\n\n.notification-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: relative;\n  font-size: 1.2rem;\n}\n\n.notification-icon {\n  font-size: 1.4rem;\n}\n.button-counter {\n  position: absolute;\n  right: -8px;\n  bottom: -8px;\n  background: rgb(var(--fourth));\n  color: rgb(var(--white));\n  height: 16px;\n  border-radius: 16px;\n  width: 16px;\n  font-weight: 500;\n  text-align: center;\n  line-height: 16px;\n  font-size: 10px;\n}\n.notifications-dropdown {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  width: 320px;\n  max-height: 400px;\n  overflow-y: auto;\n  background-color: white;\n  border-radius: 4px;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n}\n\n.notifications-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  border-bottom: 1px solid #eee;\n}\n\n.notifications-header h3 {\n  margin: 0;\n  font-size: 1rem;\n}\n\n.mark-all-read-btn {\n  background: none;\n  border: none;\n  color: #2196f3;\n  font-size: 0.8rem;\n  cursor: pointer;\n}\n\n.notifications-loading,\n.notifications-empty {\n  padding: 24px;\n  text-align: center;\n  color: #666;\n}\n\n.notifications-list {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.notifications-footer {\n  padding: 12px 16px;\n  text-align: center;\n  border-top: 1px solid #eee;\n}\n\n.notifications-footer a {\n  color: #2196f3;\n  text-decoration: none;\n  font-size: 0.9rem;\n}\n</style>"],"names":["auth.state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,UAAM,QAAQ;AAYC,cAAS;AACxB,UAAM,EAAE,eAAe,aAAa,SAAS,eAAe,qBAAqB,OAAO,kBAAkB,EAAG;AAG7G,UAAM,SAAS,IAAI,KAAK;AAGxB,UAAM,sBAAsB,SAAS,MAAM;AACzC,aAAO,cAAc,MAClB,MAAK,EACL,KAAK,CAAC,GAAG,MAAM,IAAI,KAAK,EAAE,SAAS,IAAI,IAAI,KAAK,EAAE,SAAS,CAAC,EAC5D,MAAM,GAAG,MAAM,gBAAgB;AAAA,IACpC,CAAC;AAGD,UAAM,sBAAsB,MAAM;AAChC,aAAO,QAAQ,CAAC,OAAO;AAAA,IACzB;AAEA,UAAM,0BAA0B,CAAC,iBAAiB;AAChD,aAAO,QAAQ;AAEf,UAAI,aAAa,KAAK;AAEpB,gBAAQ,yBAAyB;AAAA,UAC/B,gBAAgB,aAAa;AAAA,UAC7B,GAAG,aAAa;AAAA,QACtB,CAAK;AAAA,MACL;AAAA,IACA;AAGA,UAAM,qBAAqB,CAAC,UAAU;AACpC,YAAM,YAAY,SAAS,cAAc,+BAA+B;AACxE,UAAI,aAAa,CAAC,UAAU,SAAS,MAAM,MAAM,GAAG;AAClD,eAAO,QAAQ;AAAA,MACnB;AAAA,IACA;AAGA,cAAU,MAAM;AACd,eAAS,iBAAiB,SAAS,kBAAkB;AAGrD,YAAM,SAASA,MAAW,KAAK;AAC/B,UAAI,QAAQ;AACV,yBAAiB,MAAM;AAAA,MAC3B;AAAA,IACA,CAAC;AAED,gBAAY,MAAM;AAChB,eAAS,oBAAoB,SAAS,kBAAkB;AAAA,IAC1D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NotificationBadge.vue.js","sources":["../../../../../../../src/modules/notifications/components/elements/NotificationBadge.vue"],"sourcesContent":["<template>\n  <div class=\"notification-badge-container\">\n    <button \n      class=\"i-semi notification-button\"\n      @click=\"toggleNotifications\"\n      :aria-label=\"unreadCount > 0 ? `${unreadCount} unread notifications` : 'No unread notifications'\"\n    >\n      <IconBell class=\"notification-icon i-medium\" :fill=\"fill\"/>\n      <div  \n        v-if=\"unreadCount > 0\" \n        class=\"button-counter flex-center\"\n      >\n        <span>{{ unreadCount > 99 ? '99+' : unreadCount }}</span>\n      </div>\n    </button>\n    \n    <Popup\n      title=\"Notifications\"\n      @close-popup=\"closeNotifications\"\n      :isPopupOpen=\"isOpen\"\n      align=\"center right\"\n      class=\"bg-white h-min-100 w-100 w-max-30r pd-medium\"\n    >\n      <div class=\"cols-1 gap-thin o-y-scroll\">\n        <div v-if=\"loading\" class=\"notifications-loading\">\n          Loading...\n        </div>\n        \n        <div v-else-if=\"notifications.length === 0\" class=\"notifications-empty\">\n          No notifications\n        </div>\n        \n        <div v-else class=\"flex-column flex gap-thin\">\n          <notification-item \n            v-for=\"notification in recentNotifications\" \n            :key=\"notification._id\" \n            :notification=\"notification\"\n            @click=\"handleNotificationClick(notification)\"\n          />\n\n          <div class=\"flex-nowrap flex gap-thin\">\n            <button \n              v-if=\"unreadCount > 0\"\n              class=\"w-100 bg-second t-white radius-small  button\" \n              @click=\"markAllAsRead\"\n            >\n              Mark all read\n            </button>\n\n            <router-link class=\"w-100 bg-black t-white radius-small button\" to=\"/notifications\" @click=\"closeNotifications\">\n              View all \n            </router-link>\n          </div>\n\n        </div>\n\n      </div>\n    </Popup>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, inject } from 'vue';\nimport { useRouter } from 'vue-router';\n\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\n\nimport NotificationItem from '../blocks/NotificationItem.vue';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\nimport IconBell from '@martyrs/src/modules/icons/entities/IconBell.vue';\n\nconst props = defineProps({\n  maxNotifications: {\n    type: Number,\n    default: 10\n  },\n  fill: {\n    type: String,\n    default: 'rgb(var(--white))'\n  }\n});\n\n// Get router and notification functionality\nconst router = useRouter();\nconst { notifications, unreadCount, loading, markAllAsRead, getNotifications } = inject('useNotifications')();\n\n// Local state\nconst isOpen = ref(false);\n\n// Computed properties\nconst recentNotifications = computed(() => {\n  return notifications.value\n    .slice()\n    .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))\n    .slice(0, props.maxNotifications);\n});\n\n// Methods\nconst toggleNotifications = () => {\n  isOpen.value = !isOpen.value;\n};\n\nconst closeNotifications = () => {\n  isOpen.value = false;\n};\n\nconst handleNotificationClick = (notification) => {\n  isOpen.value = false;\n  \n  if (notification._id) {\n    // Handle in store\n    actions.handleNotificationAction({\n      notificationId: notification._id,\n      ...notification.metadata\n    });\n  }\n};\n\n// Lifecycle hooks\nonMounted(() => {\n  // Load notifications when component mounts\n  const userId = auth.state.user._id;\n  if (userId) {\n    getNotifications(userId);\n  }\n});\n</script>\n\n<style scoped>\n.notification-badge-container {\n  position: relative;\n  display: inline-block;\n}\n\n.notification-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: relative;\n  font-size: 1.2rem;\n}\n\n.notification-icon {\n  font-size: 1.4rem;\n}\n\n.button-counter {\n  position: absolute;\n  right: -8px;\n  bottom: -8px;\n  background: rgb(var(--fourth));\n  color: rgb(var(--white));\n  height: 16px;\n  border-radius: 16px;\n  width: 16px;\n  font-weight: 500;\n  text-align: center;\n  line-height: 16px;\n  font-size: 10px;\n}\n\n\n.notifications-loading,\n.notifications-empty {\n  padding: 24px;\n  text-align: center;\n  color: rgb(var(--text-light));\n}\n</style>"],"names":["auth.state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,UAAM,QAAQ;AAYC,cAAS;AACxB,UAAM,EAAE,eAAe,aAAa,SAAS,eAAe,qBAAqB,OAAO,kBAAkB,EAAG;AAG7G,UAAM,SAAS,IAAI,KAAK;AAGxB,UAAM,sBAAsB,SAAS,MAAM;AACzC,aAAO,cAAc,MAClB,MAAK,EACL,KAAK,CAAC,GAAG,MAAM,IAAI,KAAK,EAAE,SAAS,IAAI,IAAI,KAAK,EAAE,SAAS,CAAC,EAC5D,MAAM,GAAG,MAAM,gBAAgB;AAAA,IACpC,CAAC;AAGD,UAAM,sBAAsB,MAAM;AAChC,aAAO,QAAQ,CAAC,OAAO;AAAA,IACzB;AAEA,UAAM,qBAAqB,MAAM;AAC/B,aAAO,QAAQ;AAAA,IACjB;AAEA,UAAM,0BAA0B,CAAC,iBAAiB;AAChD,aAAO,QAAQ;AAEf,UAAI,aAAa,KAAK;AAEpB,gBAAQ,yBAAyB;AAAA,UAC/B,gBAAgB,aAAa;AAAA,UAC7B,GAAG,aAAa;AAAA,QACtB,CAAK;AAAA,MACL;AAAA,IACA;AAGA,cAAU,MAAM;AAEd,YAAM,SAASA,MAAW,KAAK;AAC/B,UAAI,QAAQ;AACV,yBAAiB,MAAM;AAAA,MAC3B;AAAA,IACA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/orders/components/pages/OrderBackoffice.vue.cjs

@@ -4,7 +4,7 @@ const vue = require("vue");
 const vueRouter = require("vue-router");
 const Button = require("../../../../components/Button/Button.vue2.cjs");
 const Select = require("../../../../components/Select/Select.vue.cjs");
-const Popup = require("../../../../components/Popup/Popup.vue.cjs");
+const Popup = require("../../../../components/Popup/Popup.vue2.cjs");
 const IconTime = require("../../../icons/entities/IconTime.vue.cjs");
 const CardOrderItem = require("../blocks/CardOrderItem.vue.cjs");
 const CardOrganization = require("../../../organizations/components/blocks/CardOrganization.vue.cjs");

package/dist/martyrs/src/modules/orders/components/pages/OrderBackoffice.vue.js

@@ -2,7 +2,7 @@ import { ref, onMounted, computed, createElementBlock, createCommentVNode, openB
 import { useRouter, useRoute } from "vue-router";
 import _sfc_main$2 from "../../../../components/Button/Button.vue2.js";
 import Select from "../../../../components/Select/Select.vue.js";
-import _sfc_main$1 from "../../../../components/Popup/Popup.vue.js";
+import _sfc_main$1 from "../../../../components/Popup/Popup.vue2.js";
 import IconTime from "../../../icons/entities/IconTime.vue.js";
 import _sfc_main$3 from "../blocks/CardOrderItem.vue.js";
 import _sfc_main$5 from "../../../organizations/components/blocks/CardOrganization.vue.js";

package/dist/martyrs/src/modules/orders/components/pages/OrderCreateBackoffice.vue.cjs

@@ -4,7 +4,7 @@ const vue = require("vue");
 const vueRouter = require("vue-router");
 const Button = require("../../../../components/Button/Button.vue2.cjs");
 const Tab = require("../../../../components/Tab/Tab.vue2.cjs");
-const Popup = require("../../../../components/Popup/Popup.vue.cjs");
+const Popup = require("../../../../components/Popup/Popup.vue2.cjs");
 const Block = require("../../../../components/Block/Block.vue.cjs");
 const Feed = require("../../../../components/Feed/Feed.vue.cjs");
 const CardOrderItem = require("../blocks/CardOrderItem.vue.cjs");

package/dist/martyrs/src/modules/orders/components/pages/OrderCreateBackoffice.vue.js

@@ -2,7 +2,7 @@ import { computed, ref, onMounted, createElementBlock, openBlock, createVNode, c
 import { useRoute, useRouter } from "vue-router";
 import _sfc_main$2 from "../../../../components/Button/Button.vue2.js";
 import _sfc_main$3 from "../../../../components/Tab/Tab.vue2.js";
-import _sfc_main$4 from "../../../../components/Popup/Popup.vue.js";
+import _sfc_main$4 from "../../../../components/Popup/Popup.vue2.js";
 import _sfc_main$1 from "../../../../components/Block/Block.vue.js";
 import _sfc_main$5 from "../../../../components/Feed/Feed.vue.js";
 import _sfc_main$6 from "../blocks/CardOrderItem.vue.js";

package/dist/martyrs/src/modules/organizations/components/blocks/CardOrganization.vue.cjs

@@ -3,7 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const vueRouter = require("vue-router");
 const CardOrderItem = require("../../../orders/components/blocks/CardOrderItem.vue.cjs");
-const Chips = require("../../../../components/Chips/Chips.vue.cjs");
+const Chips = require("../../../../components/Chips/Chips.vue2.cjs");
 const PlaceholderOrganizationPic = require("../../../icons/placeholders/PlaceholderOrganizationPic.vue.cjs");
 const IconShopcart = require("../../../icons/entities/IconShopcart.vue.cjs");
 const IconTime = require("../../../icons/entities/IconTime.vue.cjs");

package/dist/martyrs/src/modules/organizations/components/blocks/CardOrganization.vue.js

@@ -1,7 +1,7 @@
 import { createElementBlock, openBlock, createElementVNode, createCommentVNode, createBlock, toDisplayString, withCtx, createVNode, Fragment, renderList, withModifiers } from "vue";
 import { useRouter } from "vue-router";
 import _sfc_main$4 from "../../../orders/components/blocks/CardOrderItem.vue.js";
-import _sfc_main$1 from "../../../../components/Chips/Chips.vue.js";
+import _sfc_main$1 from "../../../../components/Chips/Chips.vue2.js";
 import PlaceholderOrganizationPic from "../../../icons/placeholders/PlaceholderOrganizationPic.vue.js";
 import _sfc_main$3 from "../../../icons/entities/IconShopcart.vue.js";
 import IconTime from "../../../icons/entities/IconTime.vue.js";

package/dist/martyrs/src/modules/organizations/components/pages/DepartmentEdit.vue.cjs

@@ -14,7 +14,7 @@ require("../../../../../../node_modules/.pnpm/@googlemaps_js-api-loader@1.16.8/n
 ;/* empty css                                         */
 ;/* empty css                                                         */
 const Button = require("../../../../components/Button/Button.vue2.cjs");
-const Popup = require("../../../../components/Popup/Popup.vue.cjs");
+const Popup = require("../../../../components/Popup/Popup.vue2.cjs");
 const Block = require("../../../../components/Block/Block.vue.cjs");
 const Feed = require("../../../../components/Feed/Feed.vue.cjs");
 const IconDelete = require("../../../icons/navigation/IconDelete.vue.cjs");

package/dist/martyrs/src/modules/organizations/components/pages/DepartmentEdit.vue.js

@@ -12,7 +12,7 @@ import "../../../../../../node_modules/.pnpm/@googlemaps_js-api-loader@1.16.8/no
 /* empty css                                       */
 /* empty css                                                       */
 import _sfc_main$1 from "../../../../components/Button/Button.vue2.js";
-import _sfc_main$6 from "../../../../components/Popup/Popup.vue.js";
+import _sfc_main$6 from "../../../../components/Popup/Popup.vue2.js";
 import _sfc_main$2 from "../../../../components/Block/Block.vue.js";
 import _sfc_main$7 from "../../../../components/Feed/Feed.vue.js";
 import _sfc_main$5 from "../../../icons/navigation/IconDelete.vue.js";

package/dist/martyrs/src/modules/organizations/components/pages/Members.vue.cjs

@@ -5,10 +5,10 @@ const vueRouter = require("vue-router");
 const Feed = require("../../../../components/Feed/Feed.vue.cjs");
 ;/* empty css                                   */
 ;/* empty css                                           */
-const Popup = require("../../../../components/Popup/Popup.vue.cjs");
+const Popup = require("../../../../components/Popup/Popup.vue2.cjs");
 const SectionPageTitle = require("../../../globals/views/components/sections/SectionPageTitle.vue.cjs");
 const MembersAdd = require("../sections/MembersAdd.vue.cjs");
-;/* empty css                                      */
+;/* empty css                                     */
 require("../../../../components/Menu/MenuItem.vue.cjs");
 const CardUser = require("../../../auth/views/components/blocks/CardUser.vue.cjs");
 const CardDepartment = require("../blocks/CardDepartment.vue.cjs");