@oneb/ui-vue 0.3.32 → 0.4.0

package/dist/notifications/index.js

@@ -0,0 +1,477 @@
+import { openBlock as o, createElementBlock as l, createElementVNode as n, defineComponent as N, ref as E, watch as z, onMounted as L, onBeforeUnmount as I, normalizeClass as p, createBlock as $, resolveDynamicComponent as V, unref as c, toDisplayString as b, computed as M, createVNode as v, renderSlot as C, createCommentVNode as x, Fragment as S, withCtx as B, renderList as j, createSlots as H, mergeProps as U, reactive as F } from "vue";
+import k from "dayjs";
+import { r as P } from "../ChevronLeftIcon-bb9adb5b.js";
+import { r as W } from "../XMarkIcon-51ef0691.js";
+import { OneButton as q } from "../button/index.js";
+import { OneSkeleton as D } from "../skeleton/index.js";
+import { OneTabs as G, OneTab as A } from "../tabs/index.js";
+import { useOnebI18n as J } from "../i18n/index.js";
+import { r as K } from "../ChevronRightIcon-b0585768.js";
+import { _ as Q } from "../OneAvatar.vue_vue_type_script_setup_true_lang-08ab80dd.js";
+import { OneDateTime as R } from "../dateTime/index.js";
+import "../SpinnerIcon-516264ba.js";
+import "../_plugin-vue_export-helper-dad06003.js";
+import "dayjs/plugin/relativeTime";
+import "dayjs/plugin/utc";
+import "dayjs/plugin/timezone";
+function X(t, e) {
+  return o(), l("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.8",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    n("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"
+    })
+  ]);
+}
+function Y(t, e) {
+  return o(), l("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.8",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    n("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
+    })
+  ]);
+}
+function Z(t, e) {
+  return o(), l("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.8",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    n("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+    })
+  ]);
+}
+function ee(t, e) {
+  return o(), l("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.8",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    n("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
+    })
+  ]);
+}
+const Fe = /* @__PURE__ */ N({
+  __name: "OneNotificationsBell",
+  props: {
+    feed: {
+      type: Object,
+      required: !0
+    },
+    /** Poll interval while the window is focused; 0 disables polling. */
+    pollMs: {
+      type: Number,
+      default: 15e3
+    }
+  },
+  setup(t) {
+    const e = t, r = E(null);
+    let m, h;
+    z(
+      () => e.feed.state.unread_total,
+      () => {
+        var s;
+        clearTimeout(h), (s = r.value) == null || s.style.setProperty("transform", "scale(1.5)"), h = setTimeout(() => {
+          var u;
+          (u = r.value) == null || u.style.setProperty("transform", "scale(1)");
+        }, 500);
+      }
+    );
+    const d = () => {
+      clearInterval(m), e.feed.getUpdates(), e.pollMs > 0 && (m = setInterval(e.feed.getUpdates, e.pollMs));
+    }, f = () => d(), g = () => clearInterval(m);
+    return L(() => {
+      d(), window.addEventListener("focus", f), window.addEventListener("blur", g);
+    }), I(() => {
+      clearTimeout(h), clearInterval(m), window.removeEventListener("focus", f), window.removeEventListener("blur", g);
+    }), (s, u) => (o(), l("button", {
+      class: p(["p-2.5 rounded-md relative z-10 hover:bg-secondary-10 text-secondary-base hover:text-blue-600", [t.feed.state.show_widget ? "!bg-blue-100 !text-blue-600" : ""]]),
+      "data-test": "notifications-bell",
+      onClick: u[0] || (u[0] = (w) => t.feed.toggleWidget())
+    }, [
+      (o(), $(V(t.feed.state.unread_total ? c(X) : c(Y)), { class: "w-6 h-6" })),
+      n("span", {
+        ref_key: "counterEl",
+        ref: r,
+        class: p(["absolute top-1 right-1 text-[8px] bg-blue-700 text-white px-1 rounded-full transition min-w-4 h-4 flex items-center justify-center font-bold", [t.feed.state.unread_total ? "opacity-100" : "opacity-0"]]),
+        "data-test": "unread-badge"
+      }, b(t.feed.state.unread_total > 99 ? "99+" : t.feed.state.unread_total), 3)
+    ], 2));
+  }
+}), te = {
+  blue: { bg: "bg-blue-50", text: "text-blue-500" },
+  orange: { bg: "bg-orange-50", text: "text-orange-500" },
+  green: { bg: "bg-green-50", text: "text-green-500" },
+  red: { bg: "bg-red-50", text: "text-red-500" },
+  purple: { bg: "bg-purple-50", text: "text-purple-500" },
+  gray: { bg: "bg-gray-100", text: "text-gray-500" },
+  indigo: { bg: "bg-indigo-50", text: "text-indigo-500" },
+  amber: { bg: "bg-amber-50", text: "text-amber-500" }
+}, se = { class: "pt-6 flex-shrink-0" }, ae = { class: "relative w-10 h-10 flex-shrink-0" }, ne = { class: "flex-grow min-w-0 space-y-1" }, oe = { class: "flex items-center gap-1.5 text-xs" }, re = { class: "font-medium text-gray-900" }, le = { class: "group text-gray-500" }, ie = ["innerHTML"], de = /* @__PURE__ */ N({
+  __name: "OneNotificationItem",
+  props: {
+    message: {
+      type: Object,
+      required: !0
+    },
+    /** App-specific message-type -> icon/tint map. */
+    typeResolver: {
+      type: Function,
+      default: void 0
+    },
+    /** Marks the row clickable and enables the `open` event + chevron. */
+    clickable: {
+      type: Boolean,
+      default: !1
+    },
+    /** Fallback actor name (system messages), e.g. "Finance". */
+    appName: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["seen", "open"],
+  setup(t, { emit: e }) {
+    const r = t, m = e, h = M(() => {
+      var g;
+      return ((g = r.typeResolver) == null ? void 0 : g.call(r, r.message)) ?? {};
+    }), d = M(() => te[h.value.tint ?? "gray"]), f = () => {
+      r.clickable && m("open", r.message);
+    };
+    return (g, s) => {
+      var u, w, _;
+      return o(), l("div", {
+        class: "flex items-start gap-2 px-2 pb-2",
+        onMouseenter: s[0] || (s[0] = (i) => m("seen", t.message))
+      }, [
+        n("div", se, [
+          n("div", {
+            class: p(["w-2 h-2 rounded-full", t.message.is_seen ? "bg-gray-300" : "bg-blue-600"]),
+            "data-test": "read-dot"
+          }, null, 2)
+        ]),
+        n("div", {
+          class: p(["flex-grow min-w-0 flex items-start gap-3 bg-white rounded-lg border border-gray-100 p-3 hover:bg-gray-50 select-none transition-colors", { "cursor-pointer": t.clickable }]),
+          "data-test": "notification-body",
+          onClick: f
+        }, [
+          n("div", ae, [
+            v(c(Q), {
+              src: (u = t.message.actor) == null ? void 0 : u.photo_url,
+              text: ((w = t.message.actor) == null ? void 0 : w.name) ?? t.appName,
+              rounded: !0,
+              size: "40"
+            }, null, 8, ["src", "text"]),
+            n("div", {
+              class: p(["absolute -bottom-0.5 -right-0.5 w-5 h-5 rounded-full ring-2 ring-white flex items-center justify-center", d.value.bg])
+            }, [
+              (o(), $(V(h.value.icon ?? c(Z)), {
+                class: p(["w-3 h-3", d.value.text])
+              }, null, 8, ["class"]))
+            ], 2)
+          ]),
+          n("div", ne, [
+            n("div", oe, [
+              n("span", re, b(((_ = t.message.actor) == null ? void 0 : _.name) || t.appName), 1),
+              s[1] || (s[1] = n("span", { class: "text-gray-400" }, "·", -1)),
+              n("span", le, [
+                v(c(R), {
+                  class: "group-hover:hidden",
+                  value: t.message.created_at,
+                  mode: "relative"
+                }, null, 8, ["value"]),
+                v(c(R), {
+                  class: "hidden group-hover:inline",
+                  value: t.message.created_at,
+                  "with-time": ""
+                }, null, 8, ["value"])
+              ])
+            ]),
+            n("div", {
+              class: "font-thin text-sm",
+              innerHTML: t.message.body
+            }, null, 8, ie),
+            C(g.$slots, "extra", { message: t.message })
+          ]),
+          t.clickable ? (o(), $(c(K), {
+            key: 0,
+            class: "w-4 h-4 text-gray-400 flex-shrink-0 mt-3 ml-auto"
+          })) : x("", !0)
+        ], 2)
+      ], 32);
+    };
+  }
+}), ce = { class: "flex flex-col bg-gray-50 rounded-xl border overflow-hidden" }, ue = {
+  key: 0,
+  class: "flex gap-3 items-center px-3 py-1 bg-gray-50 border-b"
+}, me = { class: "font-medium !text-[16px]" }, fe = {
+  key: 1,
+  class: "flex items-center justify-between px-4 py-3"
+}, ge = { class: "flex items-baseline gap-1.5" }, ve = { class: "text-base font-semibold" }, he = {
+  key: 0,
+  class: "text-base font-semibold text-blue-600",
+  "data-test": "unread-count"
+}, ye = { class: "flex items-center gap-1" }, be = ["title"], xe = {
+  key: 0,
+  class: "px-3 pt-1"
+}, pe = {
+  key: 1,
+  class: "p-6 text-center"
+}, we = { class: "text-sm text-gray-500" }, ke = { class: "px-4 py-1 text-xs font-medium text-gray-400 uppercase" }, _e = {
+  key: 2,
+  class: "p-4 space-y-2"
+}, $e = {
+  key: 2,
+  class: "border-t bg-gray-50 px-4 py-2 space-y-1"
+}, Me = { class: "text-xs text-gray-500" }, Pe = /* @__PURE__ */ N({
+  __name: "OneNotificationsPanel",
+  props: {
+    feed: {
+      type: Object,
+      required: !0
+    },
+    typeResolver: {
+      type: Function,
+      default: void 0
+    },
+    clickableMessages: {
+      type: Boolean,
+      default: !1
+    },
+    appName: {
+      type: String,
+      default: ""
+    },
+    t: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: ["open"],
+  setup(t, { emit: e }) {
+    const r = t, m = e, h = J(), d = M(() => r.t ?? h), f = E(!1);
+    r.feed.reload(!1);
+    const g = (i) => {
+      const a = typeof i.created_at == "number" ? k.unix(i.created_at) : k(i.created_at);
+      return a.isSame(k(), "day") ? "today" : a.isSame(k().subtract(1, "day"), "day") ? "yesterday" : a.isAfter(k().subtract(7, "day")) ? "week" : "earlier";
+    }, s = M(() => {
+      const i = {
+        today: [],
+        yesterday: [],
+        week: [],
+        earlier: []
+      };
+      return r.feed.state.messages.items.forEach((a) => i[g(a)].push(a)), Object.keys(i).filter((a) => i[a].length > 0).map((a) => ({ key: a, items: i[a] }));
+    });
+    let u;
+    const w = (i) => {
+      r.feed.markSeen(i), clearTimeout(u), u = setTimeout(() => r.feed.sendReadState(), 1500);
+    }, _ = (i) => {
+      const a = i.target;
+      r.feed.state.messages.has_more && !r.feed.state.messages.loading && a.scrollTop + a.clientHeight >= a.scrollHeight - 100 && r.feed.loadMessages();
+    };
+    return L(() => {
+    }), I(() => {
+      clearTimeout(u), r.feed.sendReadState();
+    }), (i, a) => (o(), l("div", ce, [
+      f.value ? (o(), l("div", ue, [
+        v(c(q), {
+          label: d.value("ui.back"),
+          size: "lg",
+          variant: "touch",
+          icon: c(P),
+          "data-test": "settings-back",
+          onClick: a[0] || (a[0] = (y) => f.value = !1)
+        }, null, 8, ["label", "icon"]),
+        n("span", me, b(d.value("ui.notifyfeed.settings")), 1)
+      ])) : (o(), l("div", fe, [
+        n("div", ge, [
+          n("span", ve, b(d.value("ui.notifyfeed.notifications")), 1),
+          t.feed.state.unread_total ? (o(), l("span", he, " +" + b(t.feed.state.unread_total), 1)) : x("", !0)
+        ]),
+        n("div", ye, [
+          i.$slots.settings ? (o(), l("button", {
+            key: 0,
+            class: "p-1.5 rounded-full hover:bg-gray-100 text-gray-500 hover:text-gray-700 transition-colors",
+            title: d.value("ui.notifyfeed.settings"),
+            "data-test": "open-settings",
+            onClick: a[1] || (a[1] = (y) => f.value = !0)
+          }, [
+            v(c(ee), { class: "w-5 h-5" })
+          ], 8, be)) : x("", !0),
+          n("button", {
+            class: "p-1.5 rounded-full hover:bg-gray-100 text-gray-500 hover:text-gray-700 transition-colors",
+            "data-test": "close-panel",
+            onClick: a[2] || (a[2] = (y) => t.feed.closeWidget())
+          }, [
+            v(c(W), { class: "w-5 h-5" })
+          ])
+        ])
+      ])),
+      n("div", {
+        class: "flex-grow min-h-0 overflow-y-auto",
+        onScroll: _
+      }, [
+        f.value ? C(i.$slots, "settings", {
+          key: 0,
+          close: () => f.value = !1
+        }) : (o(), l(S, { key: 1 }, [
+          t.feed.state.messages.has_archive || t.feed.state.show_archive ? (o(), l("div", xe, [
+            v(c(G), {
+              "model-value": t.feed.state.show_archive ? "archive" : "main",
+              "onUpdate:modelValue": a[3] || (a[3] = (y) => t.feed.reload(y === "archive"))
+            }, {
+              default: B(() => [
+                v(c(A), {
+                  value: "main",
+                  label: d.value("ui.notifyfeed.tab_main")
+                }, null, 8, ["label"]),
+                v(c(A), {
+                  value: "archive",
+                  label: d.value("ui.notifyfeed.tab_archive")
+                }, null, 8, ["label"])
+              ]),
+              _: 1
+            }, 8, ["model-value"])
+          ])) : x("", !0),
+          s.value.length === 0 && !t.feed.state.messages.loading ? (o(), l("div", pe, [
+            n("p", we, b(d.value("ui.notifyfeed.empty")), 1)
+          ])) : x("", !0),
+          (o(!0), l(S, null, j(s.value, (y) => (o(), l("div", {
+            key: y.key,
+            class: "pt-2"
+          }, [
+            n("div", ke, b(d.value(`ui.notifyfeed.group_${y.key}`)), 1),
+            (o(!0), l(S, null, j(y.items, (T) => (o(), $(de, {
+              key: T.id,
+              message: T,
+              "type-resolver": t.typeResolver,
+              clickable: t.clickableMessages,
+              "app-name": t.appName,
+              onSeen: w,
+              onOpen: a[4] || (a[4] = (O) => m("open", O))
+            }, H({ _: 2 }, [
+              i.$slots.extra ? {
+                name: "extra",
+                fn: B((O) => [
+                  C(i.$slots, "extra", U({ ref_for: !0 }, O))
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["message", "type-resolver", "clickable", "app-name"]))), 128))
+          ]))), 128)),
+          t.feed.state.messages.loading ? (o(), l("div", _e, [
+            v(c(D), {
+              count: 3,
+              height: "h-14"
+            })
+          ])) : x("", !0)
+        ], 64))
+      ], 32),
+      f.value ? x("", !0) : (o(), l("div", $e, [
+        n("div", Me, b(d.value("ui.notifyfeed.archive_hint")), 1),
+        n("button", {
+          class: "text-sm text-blue-600 hover:text-blue-700 font-medium",
+          "data-test": "read-all",
+          onClick: a[5] || (a[5] = (y) => t.feed.onReadAll())
+        }, b(d.value("ui.notifyfeed.mark_all")), 1)
+      ]))
+    ]));
+  }
+});
+function We(t) {
+  const e = F({
+    unread_total: 0,
+    show_widget: !1,
+    show_archive: !1,
+    update_cursor: null,
+    messages: {
+      items: [],
+      has_more: !1,
+      cursor: null,
+      loading: !1,
+      has_archive: !1
+    },
+    read_ids: []
+  }), r = () => {
+    t.getUpdates({ cursor: e.update_cursor }).then((s) => {
+      e.update_cursor = s.cursor ?? null, e.unread_total = Math.max(0, s.unread_total - e.read_ids.length);
+    }).catch(() => {
+    });
+  }, m = () => {
+    e.messages.loading || (e.messages.loading = !0, t.getMessages({ cursor: e.messages.cursor, archive: e.show_archive }).then((s) => {
+      e.messages.cursor == null ? e.messages.items = s.items : e.messages.items = [...e.messages.items, ...s.items], e.messages.has_more = s.has_more, e.messages.cursor = s.cursor, e.messages.has_archive = s.has_archive ?? !1;
+    }).catch(() => {
+    }).finally(() => {
+      e.messages.loading = !1;
+    }));
+  };
+  return {
+    state: e,
+    getUpdates: r,
+    loadMessages: m,
+    reload: (s = !1) => {
+      e.show_archive = s, e.messages.cursor = null, m();
+    },
+    markSeen: (s) => {
+      s.is_seen || e.read_ids.includes(s.id) || (s.is_seen = !0, e.read_ids.push(s.id), e.unread_total = Math.max(0, e.unread_total - 1));
+    },
+    sendReadState: () => {
+      if (e.read_ids.length === 0)
+        return;
+      const s = [...e.read_ids];
+      t.readMessages({ message_ids: s }).then(() => {
+        e.read_ids = e.read_ids.filter((u) => !s.includes(u));
+      }).catch(() => {
+      });
+    },
+    onReadAll: () => {
+      t.readMessages({ all: !0 }).then(() => {
+        e.read_ids = [], e.unread_total = 0, e.messages.items.forEach((s) => {
+          s.is_seen = !0;
+        });
+      }).catch(() => {
+      });
+    },
+    toggleWidget: () => {
+      e.show_widget = !e.show_widget;
+    },
+    closeWidget: () => {
+      e.show_widget = !1;
+    }
+  };
+}
+export {
+  de as OneNotificationItem,
+  Fe as OneNotificationsBell,
+  Pe as OneNotificationsPanel,
+  te as notifyTintClasses,
+  We as useNotifyfeed
+};

package/dist/notifications/notifications.d.ts

@@ -0,0 +1,53 @@
+import type { Component } from 'vue';
+export interface NotifyActor {
+    name?: string;
+    photo_url?: string | null;
+}
+export interface NotifyMessage {
+    id: string | number;
+    /** HTML body (rendered with v-html, as in finance/invoice/voicecall). */
+    body: string;
+    created_at: string | number;
+    is_seen: boolean;
+    type?: string | number;
+    actor?: NotifyActor | null;
+    data?: Record<string, unknown>;
+}
+export interface NotifyfeedPage {
+    items: NotifyMessage[];
+    has_more: boolean;
+    cursor: string | null;
+    has_archive?: boolean;
+}
+/**
+ * Backend contract of the notifyfeed module — method names mirror the rpc
+ * calls that are already identical across finance/invoice/voicecall
+ * (GetNotifyfeedUpdates / GetNotifyfeedMessages / ReadNotifyfeedMessages).
+ */
+export interface NotifyfeedTransport {
+    getUpdates(query: {
+        cursor?: string | null;
+    }): Promise<{
+        unread_total: number;
+        cursor?: string | null;
+    }>;
+    getMessages(query: {
+        cursor?: string | null;
+        archive?: boolean;
+    }): Promise<NotifyfeedPage>;
+    readMessages(query: {
+        message_ids?: (string | number)[];
+        all?: boolean;
+    }): Promise<unknown>;
+}
+export type NotifyTint = 'blue' | 'orange' | 'green' | 'red' | 'purple' | 'gray' | 'indigo' | 'amber';
+export interface NotifyTypeMeta {
+    icon?: Component;
+    tint?: NotifyTint;
+}
+/** Maps a message to its icon/tint; app-specific (finance had ~12 types). */
+export type NotifyTypeResolver = (message: NotifyMessage) => NotifyTypeMeta;
+export declare const notifyTintClasses: Record<NotifyTint, {
+    bg: string;
+    text: string;
+}>;

package/dist/notifications/useNotifyfeed.d.ts

@@ -0,0 +1,32 @@
+import type { NotifyfeedTransport, NotifyMessage } from './notifications';
+export interface NotifyfeedState {
+    unread_total: number;
+    show_widget: boolean;
+    show_archive: boolean;
+    update_cursor: string | null;
+    messages: {
+        items: NotifyMessage[];
+        has_more: boolean;
+        cursor: string | null;
+        loading: boolean;
+        has_archive: boolean;
+    };
+    read_ids: (string | number)[];
+}
+export interface UseNotifyfeedReturn {
+    state: NotifyfeedState;
+    getUpdates: () => void;
+    loadMessages: () => void;
+    reload: (archive?: boolean) => void;
+    markSeen: (message: NotifyMessage) => void;
+    sendReadState: () => void;
+    onReadAll: () => void;
+    toggleWidget: () => void;
+    closeWidget: () => void;
+}
+/**
+ * Notifyfeed store, ported from finance useNotifyfeedState (the richest of
+ * the three copies) as a factory: the backend is injected via `transport`
+ * instead of a hardwired rpc client, so each app plugs its own.
+ */
+export declare function useNotifyfeed(transport: NotifyfeedTransport): UseNotifyfeedReturn;