@kiva/kv-components 6.50.0 → 6.50.2

package/dist/vue/KvWwwHeader/KvHeaderDropdownLink.js

@@ -65,7 +65,7 @@ function x(e, o, n, r, i, s) {
   const a = c("KvMaterialIcon");
   return m(), f("a", {
     ref: n.refName,
-    class: l(["tw-no-underline hover:tw-no-underline tw-text-primary hover:tw-text-action tw-items-center tw-rounded tw-cursor-pointer", r.computedClass]),
+    class: l(["tw-py-1 tw-no-underline hover:tw-no-underline tw-text-primary hover:tw-text-action tw-items-center tw-cursor-pointer", r.computedClass]),
     href: n.href,
     onMouseover: o[0] || (o[0] = (...t) => r.handleMouseOver && r.handleMouseOver(...t))
   }, [

package/dist/vue/KvWwwHeader/KvHeaderLinkBar.css

@@ -1 +1 @@
-.header-link[data-v-e43175cd]{cursor:pointer;padding-top:1rem;padding-bottom:1rem;--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.header-link[data-v-e43175cd]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}
+.header-link[data-v-80235e01]{cursor:pointer;padding-top:1rem;padding-bottom:1rem;--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.header-link[data-v-80235e01]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}

package/dist/vue/KvWwwHeader/KvHeaderLinkBar.js

@@ -1,4 +1,4 @@
-import { defineAsyncComponent as k, ref as l, computed as P, onMounted as z, onUnmounted as W, resolveComponent as g, resolveDirective as j, openBlock as i, createElementBlock as c, withDirectives as d, normalizeClass as b, createVNode as U, createBlock as h, withCtx as T, createTextVNode as w, createElementVNode as D, createCommentVNode as M, toDisplayString as F } from "vue";
+import { defineAsyncComponent as k, ref as l, computed as P, onMounted as z, onUnmounted as W, resolveComponent as b, resolveDirective as j, openBlock as i, createElementBlock as c, withDirectives as d, normalizeClass as g, createVNode as U, createBlock as h, withCtx as T, createTextVNode as w, createElementVNode as N, createCommentVNode as M, toDisplayString as F } from "vue";
 import { mdiAccountCircle as q, mdiChevronDown as G, mdiMagnify as J, mdiMenu as Q } from "@mdi/js";
 import X from "numeral";
 import Y from "../KvMaterialIcon.js";
@@ -8,7 +8,7 @@ import ee from "../KvUserAvatar.js";
 import { throttle as ne } from "../../utils/throttle.js";
 import "./KvHeaderLinkBar.css";
 import te from "../../_virtual/_plugin-vue_export-helper.js";
-const oe = k(() => import("./KvHeaderMobileMenu.js")), O = k(() => import("./KvHeaderMyKivaMenu.js")), re = k(() => import("./LendMenu/KvLendMenu.js")), le = k(() => import("./KvHeaderTakeActionMenu.js")), ie = k(() => import("./KvHeaderAboutMenu.js")), C = 118, y = "avatar-menu", ae = {
+const oe = k(() => import("./KvHeaderMobileMenu.js")), D = k(() => import("./KvHeaderMyKivaMenu.js")), re = k(() => import("./LendMenu/KvLendMenu.js")), le = k(() => import("./KvHeaderTakeActionMenu.js")), ie = k(() => import("./KvHeaderAboutMenu.js")), C = 118, p = "avatar-menu", ae = {
   components: {
     KvMaterialIcon: Y,
     KvIconBag: Z,
@@ -57,35 +57,37 @@ const oe = k(() => import("./KvHeaderMobileMenu.js")), O = k(() => import("./KvH
     "item-hover"
   ],
   setup(u, { emit: e }) {
-    const t = l(null), n = l(null), x = l(null), K = l(null), p = l(null), f = l(null), A = l(null), H = l(null), a = l(null), o = l(null), m = (r, v, s = null) => {
-      e("item-hover", r, v, s);
-    }, _ = (r, v, s = null) => {
-      u.isMobile || m(r, v, s);
+    const t = l(null), n = l(null), x = l(null), K = l(null), y = l(null), f = l(null), A = l(null), H = l(null), a = l(null), o = l(null), m = (r, s, v = null) => {
+      e("item-hover", r, s, v);
+    }, _ = (r, s, v = null) => {
+      u.isMobile || m(r, s, v);
     }, S = (r) => {
       o.value === r && (o.value = null, m());
     }, E = () => {
-      var B, N;
-      const r = (N = (B = t.value) == null ? void 0 : B.userAvatar) == null ? void 0 : N.getBoundingClientRect();
+      var B, O;
+      const r = (O = (B = t.value) == null ? void 0 : B.userAvatar) == null ? void 0 : O.getBoundingClientRect();
       if (!r) return null;
-      const s = r.left + r.width / 2 - C / 2;
+      const v = r.left + r.width / 2 - C / 2;
       return {
-        ...s + C > window.outerWidth ? { right: 0 } : { left: u.isMobile ? 0 : `${s}px` },
+        ...v + C > window.outerWidth ? { right: 0 } : { left: u.isMobile ? 0 : `${v}px` },
+        marginTop: "-2px",
+        // Avoid closing avatar menu on header edge
         borderRadius: u.isMobile ? "auto" : "0px 0px 8px 8px",
         width: u.isMobile ? "100%" : "auto"
       };
     }, I = () => {
-      o.value = y, m(t.value, O, E());
-    }, V = (r, v) => {
-      !o.value || o.value !== r ? (o.value = r, r === y ? I() : m(r, v)) : (o.value = null, m());
+      o.value = p, m(t.value, D, E());
+    }, V = (r, s) => {
+      !o.value || o.value !== r ? (o.value = r, r === p ? I() : m(r, s)) : (o.value = null, m());
     }, L = ne(() => {
-      o.value === y && I();
+      o.value === p && I();
     }, 50), R = P(() => u.isMobile ? void 0 : "/lend-by-category");
     return z(() => {
       import("./KvHeaderMobileMenu.js"), import("./KvHeaderMyKivaMenu.js"), import("./LendMenu/KvLendMenu.js"), import("./KvHeaderTakeActionMenu.js"), import("./KvHeaderAboutMenu.js"), window.addEventListener("resize", L);
     }), W(() => {
       window.removeEventListener("resize", L);
     }), {
-      AVATAR_MENU_ID: y,
+      AVATAR_MENU_ID: p,
       openMenuId: o,
       numeral: X,
       mdiAccountCircle: q,
@@ -97,7 +99,7 @@ const oe = k(() => import("./KvHeaderMobileMenu.js")), O = k(() => import("./KvH
       lendButton: n,
       aboutUsLink: x,
       partnerWithUsLink: K,
-      borrowLink: p,
+      borrowLink: y,
       supportKivaLink: f,
       basketLink: A,
       signInLink: H,
@@ -108,7 +110,7 @@ const oe = k(() => import("./KvHeaderMobileMenu.js")), O = k(() => import("./KvH
       handleMouseOut: S,
       handleAvatarMenuPosition: I,
       KvHeaderMobileMenu: oe,
-      KvHeaderMyKivaMenu: O,
+      KvHeaderMyKivaMenu: D,
       KvLendMenu: re,
       KvHeaderTakeActionMenu: le,
       KvHeaderAboutMenu: ie
@@ -117,31 +119,30 @@ const oe = k(() => import("./KvHeaderMobileMenu.js")), O = k(() => import("./KvH
 }, de = { class: "tw-h-full tw-flex tw-items-center tw-gap-2.5" }, ue = ["href"], me = {
   key: 0,
   class: "tw-bg-eco-green-1 tw-py-0.5 tw-px-1 tw-text-eco-green-4"
-}, ve = ["href"];
-function se(u, e, t, n, x, K) {
-  const p = g("kv-material-icon"), f = g("KvHeaderDropdownLink"), A = g("kv-icon-bag"), H = g("KvUserAvatar"), a = j("kv-track-event");
+}, se = ["href"];
+function ve(u, e, t, n, x, K) {
+  const y = b("kv-material-icon"), f = b("KvHeaderDropdownLink"), A = b("kv-icon-bag"), H = b("KvUserAvatar"), a = j("kv-track-event");
   return i(), c("div", de, [
     d((i(), c("button", {
       ref: "menuButton",
-      class: b(["header-link tw-inline-flex lg:tw-hidden", {
+      class: g(["header-link tw-inline-flex lg:tw-hidden", {
         "tw-text-tertiary": t.openMenuItem && t.openMenuItem !== n.KvHeaderMobileMenu
       }]),
       onMouseover: e[0] || (e[0] = (o) => n.handleOnHover(n.menuButton, n.KvHeaderMobileMenu)),
       onMouseout: e[1] || (e[1] = (o) => n.handleMouseOut("menuButton")),
       onTouchstart: e[2] || (e[2] = (o) => n.handleTouchStart("menuButton", n.KvHeaderMobileMenu))
     }, [
-      U(p, { icon: n.mdiMenu }, null, 8, ["icon"])
+      U(y, { icon: n.mdiMenu }, null, 8, ["icon"])
     ], 34)), [
       [a, t.openMenuItem === n.KvHeaderMobileMenu ? ["TopNav", "click-Hamburger-menu"] : null]
     ]),
     d((i(), h(f, {
-      class: "tw-border tw-rounded-md tw-px-1.5 tw-py-1",
       "ref-name": "lendButton",
       href: n.lendUrl,
       "menu-component": n.KvLendMenu,
       "open-menu-item": t.openMenuItem,
       "dropdown-icon": n.mdiChevronDown,
-      "base-class": "tw-inline-flex",
+      "base-class": "tw-inline-flex tw-border tw-rounded-md tw-px-1.5 tw-py-1",
       onOnHover: n.handleOnHover,
       onMouseout: e[3] || (e[3] = (o) => n.handleMouseOut("lendButton")),
       onTouchstart: e[4] || (e[4] = (o) => n.handleTouchStart("lendButton", n.KvLendMenu))
@@ -160,8 +161,8 @@ function se(u, e, t, n, x, K) {
       "open-menu-item": t.openMenuItem,
       "dropdown-icon": n.mdiChevronDown,
       "send-link-position": "",
-      onOnHover: n.onHover,
-      onMouseout: e[5] || (e[5] = (o) => n.onHover())
+      onOnHover: n.handleOnHover,
+      onMouseout: e[5] || (e[5] = (o) => n.handleMouseOut("takeActionButton"))
     }, {
       default: T(() => e[11] || (e[11] = [
         w(" Take action ")
@@ -172,13 +173,14 @@ function se(u, e, t, n, x, K) {
     ]),
     d((i(), h(f, {
       "ref-name": "aboutUsLink",
+      "test-id": "header-about",
       "base-class": "tw-hidden lg:tw-inline-flex tw-py-2",
       "menu-component": n.KvHeaderAboutMenu,
       "open-menu-item": t.openMenuItem,
       "dropdown-icon": n.mdiChevronDown,
       "send-link-position": "",
-      onOnHover: n.onHover,
-      onMouseout: e[6] || (e[6] = (o) => n.onHover())
+      onOnHover: n.handleOnHover,
+      onMouseout: e[6] || (e[6] = (o) => n.handleMouseOut("aboutUsLink"))
     }, {
       default: T(() => e[12] || (e[12] = [
         w(" About ")
@@ -187,12 +189,12 @@ function se(u, e, t, n, x, K) {
     }, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover"])), [
       [a, ["TopNav", "click-About"]]
     ]),
-    e[15] || (e[15] = D("div", { class: "tw-flex-1 tw-h-full" }, null, -1)),
+    e[15] || (e[15] = N("div", { class: "tw-flex-1 tw-h-full" }, null, -1)),
     t.loggedIn ? d((i(), c("a", {
       key: 0,
       ref: "dashboardLink",
       href: t.myDashboardUrl,
-      class: b(["header-link tw-hidden lg:tw-block", { "tw-text-tertiary": !!t.openMenuItem }])
+      class: g(["header-link tw-hidden lg:tw-block", { "tw-text-tertiary": !!t.openMenuItem }])
     }, e[13] || (e[13] = [
       w(" My dashboard ")
     ]), 10, ue)), [
@@ -202,7 +204,8 @@ function se(u, e, t, n, x, K) {
       key: 1,
       ref: "basketLink",
       href: "/basket",
-      class: b(["header-link tw-relative", { "tw-text-tertiary": !!t.openMenuItem }])
+      class: g(["header-link tw-relative", { "tw-text-tertiary": !!t.openMenuItem }]),
+      "test-id": "header-basket"
     }, [
       U(A, {
         class: "tw-w-3 tw-h-3 tw-pointer-events-none",
@@ -211,7 +214,7 @@ function se(u, e, t, n, x, K) {
     ], 2)), [
       [a, ["TopNav", "click-Basket"]]
     ]) : M("", !0),
-    D("div", {
+    N("div", {
       class: "tw-cursor-pointer tw-flex tw-items-center tw-gap-1 tw-py-1.5",
       onMouseover: e[7] || (e[7] = (...o) => n.handleAvatarMenuPosition && n.handleAvatarMenuPosition(...o)),
       onMouseout: e[8] || (e[8] = (o) => n.handleMouseOut(n.AVATAR_MENU_ID)),
@@ -230,15 +233,15 @@ function se(u, e, t, n, x, K) {
       key: 2,
       ref: "signInLink",
       href: t.loginUrl,
-      class: b(["header-link", { "tw-text-tertiary": !!t.openMenuItem }])
+      class: g(["header-link", { "tw-text-tertiary": !!t.openMenuItem }])
     }, e[14] || (e[14] = [
       w(" Sign in ")
-    ]), 10, ve)), [
+    ]), 10, se)), [
       [a, ["TopNav", "click-Sign-in"]]
     ])
   ]);
 }
-const He = /* @__PURE__ */ te(ae, [["render", se], ["__scopeId", "data-v-e43175cd"]]);
+const He = /* @__PURE__ */ te(ae, [["render", ve], ["__scopeId", "data-v-80235e01"]]);
 export {
   He as default
 };

package/dist/vue/KvWwwHeader.css

@@ -1 +1 @@
-.header-fade-enter-active[data-v-e1bd1f5d]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-e1bd1f5d]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-e1bd1f5d],.header-fade-leave-to[data-v-e1bd1f5d]{opacity:0}.header-fade-leave[data-v-e1bd1f5d],.header-fade-enter-to[data-v-e1bd1f5d]{opacity:1}.bg-opacity-50[data-v-e1bd1f5d]{background-color:rgba(var(--bg-action-highlight),.5)}
+.header-fade-enter-active[data-v-734ef2ba]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-734ef2ba]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-734ef2ba],.header-fade-leave-to[data-v-734ef2ba]{opacity:0}.header-fade-leave[data-v-734ef2ba],.header-fade-enter-to[data-v-734ef2ba]{opacity:1}.bg-opacity-50[data-v-734ef2ba]{background-color:rgba(var(--bg-action-highlight),.5)}

package/dist/vue/KvWwwHeader.js

@@ -146,7 +146,7 @@ function R(E, o, e, n, l, a) {
           }, [
             f("div", {
               class: "tw-bg-primary tw-overflow-y-auto",
-              style: g({ ...n.menuPosition, maxHeight: `calc(100vh - ${n.HEADER_HEIGHT})` }),
+              style: g({ ...n.menuPosition, maxHeight: `calc(100dvh - ${n.HEADER_HEIGHT})` }),
               onMouseover: o[0] || (o[0] = (y) => n.onHover(n.activeHeaderItem, n.menuComponent)),
               onMouseout: o[1] || (o[1] = (y) => n.onHover())
             }, [
@@ -172,7 +172,7 @@ function R(E, o, e, n, l, a) {
     _: 1
   });
 }
-const q = /* @__PURE__ */ N(S, [["render", R], ["__scopeId", "data-v-e1bd1f5d"]]);
+const q = /* @__PURE__ */ N(S, [["render", R], ["__scopeId", "data-v-734ef2ba"]]);
 export {
   q as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.50.0",
+  "version": "6.50.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -113,5 +113,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "07d21f4014a4d7b4b74ce90fbe9a92689a3725c0"
+  "gitHead": "5f2b1403458069ec1143a4e8fd917c9f7cff2ac1"
 }