@zealsolutions/zeal-ui 1.0.0-alpha.361 → 1.0.0-alpha.363

package/dist/Tooltip-CQjz2EXM.js

@@ -0,0 +1,115 @@
+import { ref as r, onUnmounted as M, openBlock as y, createElementBlock as L, Fragment as z, createElementVNode as m, renderSlot as B, createBlock as X, Teleport as D, withDirectives as N, normalizeStyle as $, createTextVNode as C, toDisplayString as F, normalizeClass as P, vShow as V, nextTick as Y } from "vue";
+const s = r(null);
+function q() {
+  function e(t) {
+    s.value && s.value !== t && s.value.hideImmediate(), s.value = t;
+  }
+  function n(t) {
+    s.value === t && (s.value = null);
+  }
+  return {
+    register: e,
+    unregister: n
+  };
+}
+function H({ rect: e, scrollX: n = 0, scrollY: t = 0, position: v = "top", offset: u = 20 }) {
+  const l = v === "bottom", c = e.left + n + e.width / 2, p = l ? e.bottom + t + u : e.top + t - u;
+  return {
+    top: `${Math.round(p)}px`,
+    left: `${Math.round(c)}px`,
+    transform: l ? "translateX(-50%)" : "translateX(-50%) translateY(-100%)",
+    position: "absolute",
+    pointerEvents: "none"
+  };
+}
+const I = { class: "px-4 py-2 text-center pointer-events-none" }, U = {
+  __name: "Tooltip",
+  props: {
+    text: {
+      type: String,
+      required: !0
+    },
+    position: {
+      type: String,
+      default: "top"
+      // 'top', 'bottom', 'left', 'right'
+    },
+    offset: {
+      type: Number,
+      default: 20
+      // Offset from the trigger element
+    }
+  },
+  setup(e) {
+    const n = e, { register: t, unregister: v } = q(), u = {
+      hideImmediate: w
+    }, l = r(!1);
+    let c = null, p = null;
+    const d = r(!1), b = r(null), T = r(null), g = r({ top: "0px", left: "0px" });
+    function h() {
+      const o = b.value, i = T.value;
+      if (!o || !i)
+        return;
+      const a = o.getBoundingClientRect(), k = window.scrollY || document.documentElement.scrollTop, S = window.scrollX || document.documentElement.scrollLeft;
+      g.value = H({ rect: a, scrollX: S, scrollY: k, position: n.position, offset: n.offset });
+    }
+    function f() {
+      clearTimeout(p), p = setTimeout(() => {
+        h();
+      }, 50);
+    }
+    function E() {
+      d.value || (clearTimeout(c), t(u), l.value = !0, d.value = !0, Y(() => {
+        setTimeout(() => {
+          h();
+        }, 0);
+      }), window.addEventListener("scroll", f), window.addEventListener("resize", f));
+    }
+    function x() {
+      l.value = !1, c = setTimeout(() => {
+        l.value || w();
+      }, 100);
+    }
+    function w() {
+      d.value = !1, v(u), window.removeEventListener("scroll", f), window.removeEventListener("resize", f);
+    }
+    return M(() => {
+      w();
+    }), (o, i) => (y(), L(z, null, [
+      m("span", {
+        ref_key: "triggerEl",
+        ref: b,
+        onMouseenter: E,
+        onMouseleave: x,
+        onFocus: i[0] || (i[0] = (...a) => o.showTooltip && o.showTooltip(...a)),
+        onBlur: i[1] || (i[1] = (...a) => o.hideTooltip && o.hideTooltip(...a)),
+        tabindex: "0",
+        class: "inline-block will-change"
+      }, [
+        B(o.$slots, "default")
+      ], 544),
+      (y(), X(D, { to: "body" }, [
+        N(m("div", {
+          class: "absolute z-50 bg-black-950 text-white font-semibold text-xs text-center rounded whitespace-nowrap pointer-events-none transition-none",
+          style: $(g.value),
+          ref_key: "tooltipEl",
+          ref: T,
+          onMouseenter: E,
+          onMouseleave: x
+        }, [
+          m("div", I, [
+            C(F(e.text) + " ", 1),
+            m("span", {
+              class: P(["absolute left-1/2 w-2 h-2 bg-black-950 rotate-45 -translate-x-1/2 pointer-events-none", e.position === "bottom" ? "-top-1" : "-bottom-1"])
+            }, null, 2)
+          ])
+        ], 36), [
+          [V, d.value]
+        ])
+      ]))
+    ], 64));
+  }
+};
+export {
+  U as _
+};

package/dist/components/header/index.js

@@ -1,7 +1,7 @@
-import { openBlock as a, createElementBlock as u, createVNode as T, createElementVNode as r, createTextVNode as j, mergeModels as ne, useModel as ke, getCurrentInstance as ce, ref as k, computed as $, watch as K, nextTick as oe, onMounted as ge, onBeforeUnmount as we, createBlock as I, Teleport as Ce, withModifiers as N, withDirectives as G, vModelText as $e, createCommentVNode as v, normalizeClass as M, toDisplayString as b, Fragment as H, renderList as P, normalizeStyle as q, pushScopeId as Se, popScopeId as _e, Transition as ue, withCtx as F, resolveDynamicComponent as de, unref as Q, vShow as pe, renderSlot as R } from "vue";
+import { openBlock as a, createElementBlock as u, createVNode as T, createElementVNode as r, createTextVNode as j, mergeModels as ne, useModel as ke, getCurrentInstance as ce, ref as k, computed as $, watch as K, nextTick as oe, onMounted as ge, onBeforeUnmount as we, createBlock as I, Teleport as Ce, withModifiers as N, withDirectives as G, vModelText as $e, createCommentVNode as m, normalizeClass as M, toDisplayString as b, Fragment as H, renderList as P, normalizeStyle as q, pushScopeId as Se, popScopeId as _e, Transition as ue, withCtx as F, resolveDynamicComponent as de, unref as Q, vShow as pe, renderSlot as R } from "vue";
 import Me from "../../HouseIcon-BxmNyxvv.js";
 import Te from "../../ArrowLeftIcon-Cgsy08pY.js";
-import { _ as Ae } from "../../Tooltip-9q1tA0wI.js";
+import { _ as Ae } from "../../Tooltip-CQjz2EXM.js";
 import fe from "../../MagnifyingGlassIcon-ChYNIA-H.js";
 import { _ as Ie } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import { o as xe } from "../../index-D9ihCfA2.js";
@@ -17,7 +17,7 @@ const He = /* @__PURE__ */ r("span", { class: "hidden whitespace-nowrap sm:inlin
   setup(e) {
     return (i, o) => (a(), u("button", {
       type: "button",
-      class: "zui-search-pill inline-flex h-[34px] cursor-pointer items-center justify-center gap-[7px] rounded-lg border-[1px] border-solid border-proclusteal-300 dark:border-line bg-surface-raised pl-[11px] pr-[9px] font-sans text-[13px] font-semibold text-proclusteal-600 dark:text-content-muted transition-[border-color,color,box-shadow] duration-150 hover:border-proclusteal-950 dark:hover:border-focus hover:text-proclusteal-800 dark:hover:text-content hover:shadow-[0_1px_3px_rgba(20,40,45,0.08)] focus:border-proclusteal-950 dark:focus:border-focus focus:text-proclusteal-800 dark:focus:text-content focus:outline-none",
+      class: "zui-search-pill inline-flex h-[34px] cursor-pointer items-center justify-center gap-[7px] rounded-lg border-[1px] border-solid border-proclusteal-950 dark:border-line bg-surface-raised pl-[11px] pr-[9px] font-sans text-[13px] font-semibold text-proclusteal-600 dark:text-content-muted transition-[border-color,color,box-shadow] duration-150 hover:border-proclusteal-900 dark:hover:border-focus hover:text-proclusteal-800 dark:hover:text-content hover:shadow-[0_1px_3px_rgba(20,40,45,0.08)] focus:border-proclusteal-900 dark:focus:border-focus focus:text-proclusteal-800 dark:focus:text-content focus:outline-none",
       title: "Search (Ctrl K)",
       "aria-label": "Search (Ctrl K)",
       onClick: o[0] || (o[0] = (y) => i.$emit("click"))
@@ -132,11 +132,11 @@ const Ue = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Be = { class: "zui-
   }),
   emits: /* @__PURE__ */ ne(["navigate"], ["update:open"]),
   setup(e, { emit: i }) {
-    const o = e, y = i, p = ke(e, "open"), x = ce(), w = k(null), _ = k(null), A = k(null), g = k(""), S = k(""), m = k([]), f = k("all"), n = k("zero"), c = k(-1);
+    const o = e, y = i, p = ke(e, "open"), x = ce(), w = k(null), _ = k(null), A = k(null), g = k(""), S = k(""), v = k([]), f = k("all"), n = k("zero"), c = k(-1);
     let d = null, C = 0, L = null, E = null;
     const Y = $(() => Pe(S.value)), X = (t) => De(t, o.types), J = $(() => {
       let t = 0;
-      return m.value.filter((s) => f.value === "all" || s.type === f.value).map((s) => {
+      return v.value.filter((s) => f.value === "all" || s.type === f.value).map((s) => {
         const l = X(s.type);
         return {
           type: s.type,
@@ -151,7 +151,7 @@ const Ue = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Be = { class: "zui-
           }))
         };
       });
-    }), W = $(() => J.value.flatMap((t) => t.items)), ye = $(() => m.value.reduce((t, s) => t + s.items.length, 0));
+    }), W = $(() => J.value.flatMap((t) => t.items)), ye = $(() => v.value.reduce((t, s) => t + s.items.length, 0));
     function U(t) {
       const s = W.value;
       if (!s.length) {
@@ -182,23 +182,23 @@ const Ue = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Be = { class: "zui-
         const l = await o.searchProvider(t);
         if (s !== C || !p.value)
           return;
-        m.value = l && l.groups || [], f.value = "all", n.value = m.value.length ? "results" : "empty", U(0);
+        v.value = l && l.groups || [], f.value = "all", n.value = v.value.length ? "results" : "empty", U(0);
       } catch {
         if (s !== C || !p.value)
           return;
-        m.value = [], n.value = "error", c.value = -1;
+        v.value = [], n.value = "error", c.value = -1;
       }
     }
     K(g, (t) => {
       clearTimeout(d);
       const s = t.trim();
       if (s.length < o.minChars) {
-        C++, m.value = [], n.value = s.length ? "hint" : "zero", c.value = -1;
+        C++, v.value = [], n.value = s.length ? "hint" : "zero", c.value = -1;
         return;
       }
       d = setTimeout(() => me(s), o.debounce);
     }), K(p, (t) => {
-      t ? (L = document.activeElement, g.value = "", S.value = "", m.value = [], f.value = "all", n.value = "zero", c.value = -1, E = document.body.style.overflow, document.body.style.overflow = "hidden", oe(() => {
+      t ? (L = document.activeElement, g.value = "", S.value = "", v.value = [], f.value = "all", n.value = "zero", c.value = -1, E = document.body.style.overflow, document.body.style.overflow = "hidden", oe(() => {
         var s;
         return (s = w.value) == null ? void 0 : s.focus();
       })) : (clearTimeout(d), C++, E !== null && (document.body.style.overflow = E, E = null), L != null && L.focus && L.focus());
@@ -291,7 +291,7 @@ const Ue = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Be = { class: "zui-
               onClick: z
             }, "×")
           ]),
-          n.value === "results" ? (a(), u("div", Ve, " Search results ")) : v("", !0),
+          n.value === "results" ? (a(), u("div", Ve, " Search results ")) : m("", !0),
           n.value === "results" ? (a(), u("div", Ke, [
             r("button", {
               type: "button",
@@ -303,7 +303,7 @@ const Ue = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Be = { class: "zui-
                 class: M(["font-bold", f.value === "all" ? "opacity-85" : "opacity-60"])
               }, "(" + b(ye.value) + ")", 3)
             ], 2),
-            (a(!0), u(H, null, P(m.value, (l) => (a(), u("button", {
+            (a(!0), u(H, null, P(v.value, (l) => (a(), u("button", {
               key: l.type,
               type: "button",
               class: M([le, f.value === l.type ? se : ""]),
@@ -314,7 +314,7 @@ const Ue = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Be = { class: "zui-
                 class: M(["font-bold", f.value === l.type ? "opacity-85" : "opacity-60"])
               }, "(" + b(l.items.length) + ")", 3)
             ], 10, qe))), 128))
-          ])) : v("", !0),
+          ])) : m("", !0),
           r("div", {
             ref_key: "resultsEl",
             ref: A,
@@ -377,7 +377,7 @@ const Ue = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Be = { class: "zui-
             ]))), 128))
           ], 512)
         ], 512)
-      ], 32)) : v("", !0)
+      ], 32)) : m("", !0)
     ]));
   }
 }, tt = /* @__PURE__ */ Ie(et, [["__scopeId", "data-v-80fd510b"]]), ie = {
@@ -482,7 +482,7 @@ const at = {
       const d = nt(n.AppTypeName);
       return d ? { component: null, path: d } : { component: ae, path: "" };
     }
-    const m = $(() => w.value.map((n) => ({
+    const v = $(() => w.value.map((n) => ({
       item: n,
       icon: S(n),
       date: ot(n),
@@ -506,7 +506,7 @@ const at = {
         onClick: A
       }, [
         T(ae, { class: "!h-[21px] !w-[21px]" }),
-        _.value ? (a(), u("span", at)) : v("", !0)
+        _.value ? (a(), u("span", at)) : m("", !0)
       ]),
       T(ue, {
         "enter-active-class": "transition-all ease-out duration-75",
@@ -519,8 +519,8 @@ const at = {
         default: F(() => [
           G(r("div", rt, [
             r("div", lt, [
-              e.notifications ? w.value.length ? v("", !0) : (a(), u("div", it, " No notifications. ")) : (a(), u("div", st, " Loading notifications… ")),
-              (a(!0), u(H, null, P(m.value, (d) => (a(), u("div", {
+              e.notifications ? w.value.length ? m("", !0) : (a(), u("div", it, " No notifications. ")) : (a(), u("div", st, " Loading notifications… ")),
+              (a(!0), u(H, null, P(v.value, (d) => (a(), u("div", {
                 key: d.item.NotifyID,
                 class: M(["flex cursor-pointer items-start gap-3 border-b-[1px] border-proclusteal-200 dark:border-line px-4 py-3", d.unread ? "bg-proclusteal-50 dark:bg-surface-hover" : "bg-surface-raised"]),
                 onClick: (C) => f(d.item.url)
@@ -544,7 +544,7 @@ const at = {
                 r("span", pt, [
                   r("span", ft, b(d.item.notifyname), 1),
                   r("span", xt, b(d.item.summary), 1),
-                  d.date ? (a(), u("span", ht, b(d.date), 1)) : v("", !0)
+                  d.date ? (a(), u("span", ht, b(d.date), 1)) : m("", !0)
                 ]),
                 r("span", yt, [
                   d.unread ? (a(), u("button", {
@@ -556,7 +556,7 @@ const at = {
                     onClick: N((C) => n.$emit("markAsRead", d.item.NotifyID), ["stop"])
                   }, [
                     T(Ee, { class: "!h-4 !w-4" })
-                  ], 8, mt)) : v("", !0),
+                  ], 8, mt)) : m("", !0),
                   r("button", {
                     type: "button",
                     class: "hover:text-[#dd3730]",
@@ -613,7 +613,7 @@ const at = {
     function g(S) {
       x.value = !1, y("select", S);
     }
-    return (S, m) => (a(), u("div", {
+    return (S, v) => (a(), u("div", {
       ref_key: "rootEl",
       ref: p,
       class: "relative font-sans"
@@ -623,14 +623,14 @@ const at = {
         class: "flex cursor-pointer items-center justify-center",
         title: "View Menu Options",
         "aria-label": "View Menu Options",
-        onClick: m[1] || (m[1] = (f) => x.value = !x.value)
+        onClick: v[1] || (v[1] = (f) => x.value = !x.value)
       }, [
         e.user.avatarUrl && !w.value ? (a(), u("img", {
           key: 0,
           src: e.user.avatarUrl,
           alt: "",
           class: "h-[34px] w-[34px] rounded-full object-cover",
-          onError: m[0] || (m[0] = (f) => w.value = !0)
+          onError: v[0] || (v[0] = (f) => w.value = !0)
         }, null, 40, gt)) : (a(), u("span", wt, b(A.value), 1))
       ]),
       T(ue, {
@@ -659,7 +659,7 @@ const at = {
                 f.icon ? (a(), I(de(f.icon), {
                   key: 0,
                   class: "!h-4 !w-4 flex-none"
-                })) : v("", !0),
+                })) : m("", !0),
                 r("span", null, b(f.label), 1)
               ], 8, It))
             ], 64))), 128))
@@ -744,6 +744,13 @@ const at = {
     searchTypes: {
       type: Object,
       default: () => ({})
+    },
+    // #479: gate for the three top-right icons (search pill, bell, profile). Default true so
+    // existing consumers are unaffected; an app that loads its header data asynchronously passes
+    // false until user + notifications + search have all settled, then true to reveal all at once.
+    ready: {
+      type: Boolean,
+      default: !0
     }
   },
   emits: [
@@ -766,7 +773,7 @@ const at = {
     function S() {
       y("home"), g(o.homeUrl);
     }
-    function m() {
+    function v() {
       window.history.back();
     }
     function f(n) {
@@ -777,14 +784,14 @@ const at = {
         R(n.$slots, "logo"),
         e.title ? (a(), u("span", Ot, [
           j(b(e.title), 1),
-          e.subtitle ? (a(), u("span", Lt, " " + b(e.subtitle), 1)) : v("", !0)
-        ])) : v("", !0),
+          e.subtitle ? (a(), u("span", Lt, " " + b(e.subtitle), 1)) : m("", !0)
+        ])) : m("", !0),
         _.value ? (a(), u("span", {
           key: 1,
           class: "h-[45px] w-[2px] shrink-0",
           style: q({ background: _.value }),
           "aria-hidden": "true"
-        }, null, 4)) : v("", !0),
+        }, null, 4)) : m("", !0),
         r("nav", {
           class: "flex items-center gap-7 text-proclusteal-600 dark:text-content-muted",
           style: q({ "--hdr-accent": A.value })
@@ -805,44 +812,46 @@ const at = {
               ], 8, zt)
             ]),
             _: 1
-          }, 8, ["text"])) : v("", !0),
+          }, 8, ["text"])) : m("", !0),
           e.showBack ? (a(), u("button", {
             key: 1,
             type: "button",
             class: "cursor-pointer hover:text-[var(--hdr-accent)]",
             title: "Go Back",
             "aria-label": "Go Back",
-            onClick: m
+            onClick: v
           }, [
             T(Te, { class: "!h-[22px] !w-[22px]" })
-          ])) : v("", !0),
+          ])) : m("", !0),
           R(n.$slots, "nav-extra")
         ], 4),
         R(n.$slots, "left")
       ]),
       r("div", Dt, [
         R(n.$slots, "right"),
-        e.searchProvider ? (a(), I(Le, {
-          key: 0,
-          onClick: c[0] || (c[0] = (d) => x.value = !0)
-        })) : v("", !0),
-        w.value ? (a(), I(kt, {
-          key: 1,
-          notifications: e.notifications,
-          "unread-count": e.unreadCount,
-          "notifications-url": e.notificationsUrl,
-          "icon-map": e.notificationIconMap,
-          onMarkAsRead: c[1] || (c[1] = (d) => n.$emit("markAsRead", d)),
-          onDeleteNotification: c[2] || (c[2] = (d) => n.$emit("deleteNotification", d)),
-          onOpen: c[3] || (c[3] = (d) => n.$emit("notifications-open")),
-          onNavigate: g
-        }, null, 8, ["notifications", "unread-count", "notifications-url", "icon-map"])) : v("", !0),
-        e.user ? (a(), I(Et, {
-          key: 2,
-          user: e.user,
-          "menu-items": e.menuItems,
-          onSelect: f
-        }, null, 8, ["user", "menu-items"])) : v("", !0)
+        e.ready ? (a(), u(H, { key: 0 }, [
+          e.searchProvider ? (a(), I(Le, {
+            key: 0,
+            onClick: c[0] || (c[0] = (d) => x.value = !0)
+          })) : m("", !0),
+          w.value ? (a(), I(kt, {
+            key: 1,
+            notifications: e.notifications,
+            "unread-count": e.unreadCount,
+            "notifications-url": e.notificationsUrl,
+            "icon-map": e.notificationIconMap,
+            onMarkAsRead: c[1] || (c[1] = (d) => n.$emit("markAsRead", d)),
+            onDeleteNotification: c[2] || (c[2] = (d) => n.$emit("deleteNotification", d)),
+            onOpen: c[3] || (c[3] = (d) => n.$emit("notifications-open")),
+            onNavigate: g
+          }, null, 8, ["notifications", "unread-count", "notifications-url", "icon-map"])) : m("", !0),
+          e.user ? (a(), I(Et, {
+            key: 2,
+            user: e.user,
+            "menu-items": e.menuItems,
+            onSelect: f
+          }, null, 8, ["user", "menu-items"])) : m("", !0)
+        ], 64)) : m("", !0)
       ]),
       e.searchProvider ? (a(), I(tt, {
         key: 0,
@@ -852,7 +861,7 @@ const at = {
         placeholder: e.searchPlaceholder,
         types: e.searchTypes,
         onNavigate: g
-      }, null, 8, ["open", "search-provider", "placeholder", "types"])) : v("", !0)
+      }, null, 8, ["open", "search-provider", "placeholder", "types"])) : m("", !0)
     ]));
   }
 };