@kiva/kv-components 6.50.3 → 6.50.5

package/dist/vue/KvTooltip.css

@@ -1 +1 @@
-.tooltip-pane[data-v-88820ac6],.tooltip-arrow[data-v-88820ac6]{box-shadow:0 4px 12px #00000014}.tooltip-arrow[data-v-88820ac6]{margin:.5rem;border-color:rgba(var(--bg-primary),var(--tw-bg-opacity, 1))}.tooltip-pane[x-placement^=top][data-v-88820ac6]{margin-bottom:.5rem}.tooltip-pane[x-placement^=top] .tooltip-arrow[data-v-88820ac6]{border-width:8px 8px 0 8px;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;left:calc(50% - 8px);bottom:-.5rem;margin-top:0;margin-bottom:0}.tooltip-pane[x-placement^=bottom][data-v-88820ac6]{margin-top:.5rem}.tooltip-pane[x-placement^=bottom] .tooltip-arrow[data-v-88820ac6]{border-width:0 8px 8px 8px;border-left-color:transparent;border-right-color:transparent;border-top-color:transparent;left:calc(50% - 8px);top:-.5rem;margin-bottom:0;margin-top:0}.tooltip-pane[x-placement^=right][data-v-88820ac6]{margin-left:.5rem}.tooltip-pane[x-placement^=right] .tooltip-arrow[data-v-88820ac6]{border-width:8px 8px 8px 0;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent;top:calc(50% - 8px);left:-.5rem;margin-left:0;margin-right:0}.tooltip-pane[x-placement^=left][data-v-88820ac6]{margin-right:.5rem}.tooltip-pane[x-placement^=left] .tooltip-arrow[data-v-88820ac6]{border-width:8px 0 8px 8px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;top:calc(50% - 8px);right:-.5rem;margin-left:0;margin-right:0}
+.tooltip-pane[data-v-89cfb447],.tooltip-arrow[data-v-89cfb447]{box-shadow:0 4px 12px #00000014}.tooltip-arrow[data-v-89cfb447]{margin:.5rem;border-color:rgba(var(--bg-primary),var(--tw-bg-opacity, 1))}.tooltip-pane[x-placement^=top][data-v-89cfb447]{margin-bottom:.5rem}.tooltip-pane[x-placement^=top] .tooltip-arrow[data-v-89cfb447]{border-width:8px 8px 0 8px;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;left:calc(50% - 8px);bottom:-.5rem;margin-top:0;margin-bottom:0}.tooltip-pane[x-placement^=bottom][data-v-89cfb447]{margin-top:.5rem}.tooltip-pane[x-placement^=bottom] .tooltip-arrow[data-v-89cfb447]{border-width:0 8px 8px 8px;border-left-color:transparent;border-right-color:transparent;border-top-color:transparent;left:calc(50% - 8px);top:-.5rem;margin-bottom:0;margin-top:0}.tooltip-pane[x-placement^=right][data-v-89cfb447]{margin-left:.5rem}.tooltip-pane[x-placement^=right] .tooltip-arrow[data-v-89cfb447]{border-width:8px 8px 8px 0;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent;top:calc(50% - 8px);left:-.5rem;margin-left:0;margin-right:0}.tooltip-pane[x-placement^=left][data-v-89cfb447]{margin-right:.5rem}.tooltip-pane[x-placement^=left] .tooltip-arrow[data-v-89cfb447]{border-width:8px 0 8px 8px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;top:calc(50% - 8px);right:-.5rem;margin-left:0;margin-right:0}

package/dist/vue/KvTooltip.js

@@ -1,16 +1,15 @@
-import { toRefs as T, computed as a, resolveComponent as p, openBlock as l, createBlock as L, withCtx as d, createVNode as S, createElementVNode as n, normalizeStyle as x, createElementBlock as M, renderSlot as m, createCommentVNode as b } from "vue";
-import { defaultTheme as s, greenLightTheme as c, greenDarkTheme as f, marigoldLightTheme as u, stoneLightTheme as h, stoneDarkTheme as v, mintTheme as w, darkTheme as g } from "@kiva/kv-tokens";
-import D from "./KvPopper.js";
-import E from "./KvThemeProvider.js";
+import { toRefs as M, computed as c, ref as K, watch as D, resolveComponent as u, openBlock as v, createBlock as V, withCtx as h, createVNode as B, createElementVNode as d, normalizeStyle as P, createElementBlock as C, renderSlot as w, createCommentVNode as G } from "vue";
+import { defaultTheme as g, greenLightTheme as y, greenDarkTheme as k, marigoldLightTheme as T, stoneLightTheme as b, stoneDarkTheme as _, mintTheme as S, darkTheme as L } from "@kiva/kv-tokens";
+import H from "./KvPopper.js";
+import O from "./KvThemeProvider.js";
 import "./KvTooltip.css";
-import G from "../_virtual/_plugin-vue_export-helper.js";
-const K = {
+import N from "../_virtual/_plugin-vue_export-helper.js";
+const R = {
   name: "KvTooltip",
   components: {
-    KvPopper: D,
-    KvThemeProvider: E
+    KvPopper: H,
+    KvThemeProvider: O
   },
-  // TODO: Add prop for tooltip placement, Currently defaults to 'top' but will flip to bottom when constrained
   props: {
     controller: {
       validator(e) {
@@ -30,6 +29,10 @@ const K = {
       type: String,
       default: "top"
     },
+    showTooltip: {
+      type: Boolean,
+      default: !1
+    },
     theme: {
       type: String,
       default: "default",
@@ -47,70 +50,88 @@ const K = {
       }
     }
   },
-  setup(e) {
+  defineEmits: ["tool-tip-visible"],
+  setup(e, { emit: t }) {
     const {
-      modifiers: t,
-      theme: o
-    } = T(e), r = a(() => ({
-      ...t.value,
+      modifiers: o,
+      showTooltip: r,
+      theme: s
+    } = M(e), m = c(() => ({
+      ...o.value,
       preventOverflow: {
-        ...t.value.preventOverflow,
+        ...o.value.preventOverflow,
         padding: 10
       }
-    })), i = a(() => ({
-      default: s,
-      ecoGreenLight: c,
-      ecoGreenDark: f,
-      ecoLightMarigold: u,
-      ecoStoneLight: h,
-      ecoStoneDark: v,
-      mint: w,
-      dark: g
-    })[o.value]);
-    return {
-      defaultTheme: s,
-      greenLightTheme: c,
-      greenDarkTheme: f,
-      marigoldLightTheme: u,
-      stoneLightTheme: h,
-      stoneDarkTheme: v,
-      mintTheme: w,
-      darkTheme: g,
-      popperModifiers: r,
-      themeStyle: i
+    })), i = K(null), l = () => typeof e.controller == "string" ? document.getElementById(e.controller) : e.controller, p = (n) => {
+      t("tool-tip-visible", n);
+    }, a = (n = !0) => {
+      const f = l();
+      if (f) {
+        const E = n ? "mouseover" : "mouseout";
+        f.dispatchEvent(new MouseEvent(E, { bubbles: !0 }));
+      }
+    }, x = c(() => ({
+      default: g,
+      ecoGreenLight: y,
+      ecoGreenDark: k,
+      ecoLightMarigold: T,
+      ecoStoneLight: b,
+      ecoStoneDark: _,
+      mint: S,
+      dark: L
+    })[s.value]);
+    return D(r, (n) => {
+      a(!!n);
+    }), {
+      defaultTheme: g,
+      greenLightTheme: y,
+      greenDarkTheme: k,
+      marigoldLightTheme: T,
+      stoneLightTheme: b,
+      stoneDarkTheme: _,
+      mintTheme: S,
+      darkTheme: L,
+      handleKvPopperVisibility: p,
+      popperModifiers: m,
+      popperRef: i,
+      themeStyle: x,
+      triggerHover: a
     };
   }
-}, O = {
+}, W = {
   key: 0,
   class: "tw-text-primary tw-font-medium tw-mb-1.5"
-}, B = { class: "tw-text-primary" };
-function C(e, t, o, r, i, k) {
-  const _ = p("kv-popper"), y = p("kv-theme-provider");
-  return l(), L(y, {
+}, z = { class: "tw-text-primary" };
+function I(e, t, o, r, s, m) {
+  const i = u("kv-popper"), l = u("kv-theme-provider");
+  return v(), V(l, {
     theme: r.themeStyle,
     class: "kv-tailwind"
   }, {
-    default: d(() => [
-      S(_, {
+    default: h(() => [
+      B(i, {
+        ref: "popperRef",
         controller: o.controller,
         "popper-modifiers": r.popperModifiers,
         "popper-placement": o.placement,
         "transition-type": "kvfastfade",
-        class: "tooltip-pane tw-absolute tw-bg-primary tw-rounded tw-z-popover"
+        class: "tooltip-pane tw-absolute tw-bg-primary tw-rounded tw-z-popover",
+        onHide: t[0] || (t[0] = (p) => r.handleKvPopperVisibility(!1)),
+        onShow: t[1] || (t[1] = (p) => r.handleKvPopperVisibility(!0))
       }, {
-        default: d(() => [
-          n("div", {
+        default: h(() => [
+          d("div", {
             class: "tw-p-2.5",
-            style: x({ maxWidth: o.maxWidth })
+            style: P({ maxWidth: o.maxWidth })
           }, [
-            e.$slots.title ? (l(), M("div", O, [
-              m(e.$slots, "title", {}, void 0, !0)
-            ])) : b("", !0),
-            n("div", B, [
-              m(e.$slots, "default", {}, void 0, !0)
+            e.$slots.title ? (v(), C("div", W, [
+              w(e.$slots, "title", {}, void 0, !0)
+            ])) : G("", !0),
+            d("div", z, [
+              w(e.$slots, "default", {}, void 0, !0)
             ])
           ], 4),
-          t[0] || (t[0] = n("div", {
+          t[2] || (t[2] = d("div", {
             class: "tooltip-arrow tw-absolute tw-w-0 tw-h-0 tw-border-solid",
             "x-arrow": ""
           }, null, -1))
@@ -121,7 +142,7 @@ function C(e, t, o, r, i, k) {
     _: 3
   }, 8, ["theme"]);
 }
-const $ = /* @__PURE__ */ G(K, [["render", C], ["__scopeId", "data-v-88820ac6"]]);
+const Q = /* @__PURE__ */ N(R, [["render", I], ["__scopeId", "data-v-89cfb447"]]);
 export {
-  $ as default
+  Q as default
 };

package/dist/vue/KvWwwHeader/KvHeaderLinkBar.css

@@ -1 +1 @@
-.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}
+.header-link[data-v-a0d88ce7]{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-a0d88ce7]: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,19 +1,19 @@
-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";
-import Z from "../KvIconBag.js";
-import $ from "./KvHeaderDropdownLink.js";
-import ee from "../KvUserAvatar.js";
-import { throttle as ne } from "../../utils/throttle.js";
+import { defineAsyncComponent as M, ref as l, computed as P, onMounted as z, onUnmounted as W, resolveComponent as k, resolveDirective as j, openBlock as i, createElementBlock as c, withDirectives as d, normalizeClass as b, createVNode as U, createBlock as g, withCtx as T, createTextVNode as w, createElementVNode as N, createCommentVNode as h, vShow as F, toDisplayString as q } from "vue";
+import { mdiAccountCircle as G, mdiChevronDown as J, mdiMagnify as Q, mdiMenu as X } from "@mdi/js";
+import Y from "numeral";
+import Z from "../KvMaterialIcon.js";
+import $ from "../KvIconBag.js";
+import ee from "./KvHeaderDropdownLink.js";
+import ne from "../KvUserAvatar.js";
+import { throttle as te } from "../../utils/throttle.js";
 import "./KvHeaderLinkBar.css";
-import te from "../../_virtual/_plugin-vue_export-helper.js";
-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 = {
+import oe from "../../_virtual/_plugin-vue_export-helper.js";
+const re = M(() => import("./KvHeaderMobileMenu.js")), D = M(() => import("./KvHeaderMyKivaMenu.js")), le = M(() => import("./LendMenu/KvLendMenu.js")), ie = M(() => import("./KvHeaderTakeActionMenu.js")), ae = M(() => import("./KvHeaderAboutMenu.js")), C = 118, p = "avatar-menu", de = {
   components: {
-    KvMaterialIcon: Y,
-    KvIconBag: Z,
-    KvHeaderDropdownLink: $,
-    KvUserAvatar: ee
+    KvMaterialIcon: Z,
+    KvIconBag: $,
+    KvHeaderDropdownLink: ee,
+    KvUserAvatar: ne
   },
   props: {
     loggedIn: {
@@ -79,7 +79,7 @@ const oe = k(() => import("./KvHeaderMobileMenu.js")), D = k(() => import("./KvH
       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(() => {
+    }, L = te(() => {
       o.value === p && I();
     }, 50), R = P(() => u.isMobile ? void 0 : "/lend-by-category");
     return z(() => {
@@ -89,11 +89,11 @@ const oe = k(() => import("./KvHeaderMobileMenu.js")), D = k(() => import("./KvH
     }), {
       AVATAR_MENU_ID: p,
       openMenuId: o,
-      numeral: X,
-      mdiAccountCircle: q,
-      mdiChevronDown: G,
-      mdiMagnify: J,
-      mdiMenu: Q,
+      numeral: Y,
+      mdiAccountCircle: G,
+      mdiChevronDown: J,
+      mdiMagnify: Q,
+      mdiMenu: X,
       onHover: m,
       avatar: t,
       lendButton: n,
@@ -109,23 +109,23 @@ const oe = k(() => import("./KvHeaderMobileMenu.js")), D = k(() => import("./KvH
       handleTouchStart: V,
       handleMouseOut: S,
       handleAvatarMenuPosition: I,
-      KvHeaderMobileMenu: oe,
+      KvHeaderMobileMenu: re,
       KvHeaderMyKivaMenu: D,
-      KvLendMenu: re,
-      KvHeaderTakeActionMenu: le,
-      KvHeaderAboutMenu: ie
+      KvLendMenu: le,
+      KvHeaderTakeActionMenu: ie,
+      KvHeaderAboutMenu: ae
     };
   }
-}, de = { class: "tw-h-full tw-flex tw-items-center tw-gap-2.5" }, ue = ["href"], me = {
+}, ue = { class: "tw-h-full tw-flex tw-items-center tw-gap-2.5" }, me = ["href"], se = {
   key: 0,
   class: "tw-bg-eco-green-1 tw-py-0.5 tw-px-1 tw-text-eco-green-4"
-}, 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, [
+}, ve = ["href"];
+function ce(u, e, t, n, x, K) {
+  const y = k("kv-material-icon"), f = k("KvHeaderDropdownLink"), A = k("kv-icon-bag"), H = k("KvUserAvatar"), a = j("kv-track-event");
+  return i(), c("div", ue, [
     d((i(), c("button", {
       ref: "menuButton",
-      class: g(["header-link tw-inline-flex lg:tw-hidden", {
+      class: b(["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)),
@@ -136,7 +136,7 @@ function ve(u, e, t, n, x, K) {
     ], 34)), [
       [a, t.openMenuItem === n.KvHeaderMobileMenu ? ["TopNav", "click-Hamburger-menu"] : null]
     ]),
-    d((i(), h(f, {
+    d((i(), g(f, {
       "ref-name": "lendButton",
       href: n.lendUrl,
       "menu-component": n.KvLendMenu,
@@ -154,7 +154,7 @@ function ve(u, e, t, n, x, K) {
     }, 8, ["href", "menu-component", "open-menu-item", "dropdown-icon", "onOnHover"])), [
       [a, ["TopNav", "click-Lend"]]
     ]),
-    d((i(), h(f, {
+    d((i(), g(f, {
       "ref-name": "takeActionButton",
       "base-class": "tw-hidden lg:tw-inline-flex tw-py-2",
       "menu-component": n.KvHeaderTakeActionMenu,
@@ -171,9 +171,9 @@ function ve(u, e, t, n, x, K) {
     }, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover"])), [
       [a, ["TopNav", "click-TakeAction"]]
     ]),
-    d((i(), h(f, {
+    d((i(), g(f, {
       "ref-name": "aboutUsLink",
-      "test-id": "header-about",
+      "data-testid": "header-about",
       "base-class": "tw-hidden lg:tw-inline-flex tw-py-2",
       "menu-component": n.KvHeaderAboutMenu,
       "open-menu-item": t.openMenuItem,
@@ -194,54 +194,54 @@ function ve(u, e, t, n, x, K) {
       key: 0,
       ref: "dashboardLink",
       href: t.myDashboardUrl,
-      class: g(["header-link tw-hidden lg:tw-block", { "tw-text-tertiary": !!t.openMenuItem }])
+      class: b(["header-link tw-hidden lg:tw-block", { "tw-text-tertiary": !!t.openMenuItem }])
     }, e[13] || (e[13] = [
       w(" My dashboard ")
-    ]), 10, ue)), [
+    ]), 10, me)), [
       [a, ["TopNav", "click-Dashboard"]]
-    ]) : M("", !0),
-    t.basketCount > 0 ? d((i(), c("a", {
-      key: 1,
+    ]) : h("", !0),
+    d((i(), c("a", {
       ref: "basketLink",
       href: "/basket",
-      class: g(["header-link tw-relative", { "tw-text-tertiary": !!t.openMenuItem }]),
-      "test-id": "header-basket"
+      class: b(["header-link tw-relative", { "tw-text-tertiary": !!t.openMenuItem }]),
+      "data-testid": "header-basket"
     }, [
       U(A, {
         class: "tw-w-3 tw-h-3 tw-pointer-events-none",
         count: t.basketCount
       }, null, 8, ["count"])
     ], 2)), [
+      [F, t.basketCount > 0],
       [a, ["TopNav", "click-Basket"]]
-    ]) : M("", !0),
+    ]),
     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)),
       onTouchstart: e[9] || (e[9] = (o) => n.handleTouchStart(n.AVATAR_MENU_ID))
     }, [
-      t.loggedIn ? (i(), c("span", me, F(n.numeral(t.balance).format("$0")), 1)) : M("", !0),
-      t.loggedIn ? (i(), h(H, {
+      t.loggedIn ? (i(), c("span", se, q(n.numeral(t.balance).format("$0")), 1)) : h("", !0),
+      t.loggedIn ? (i(), g(H, {
         key: 1,
         ref: "avatar",
         "lender-name": t.lenderName,
         "lender-image-url": t.lenderImageUrl,
         "is-small": ""
-      }, null, 8, ["lender-name", "lender-image-url"])) : M("", !0)
+      }, null, 8, ["lender-name", "lender-image-url"])) : h("", !0)
     ], 32),
-    t.loggedIn ? M("", !0) : d((i(), c("a", {
-      key: 2,
+    t.loggedIn ? h("", !0) : d((i(), c("a", {
+      key: 1,
       ref: "signInLink",
       href: t.loginUrl,
-      class: g(["header-link", { "tw-text-tertiary": !!t.openMenuItem }])
+      class: b(["header-link", { "tw-text-tertiary": !!t.openMenuItem }])
     }, e[14] || (e[14] = [
       w(" Sign in ")
-    ]), 10, se)), [
+    ]), 10, ve)), [
       [a, ["TopNav", "click-Sign-in"]]
     ])
   ]);
 }
-const He = /* @__PURE__ */ te(ae, [["render", ve], ["__scopeId", "data-v-80235e01"]]);
+const Ie = /* @__PURE__ */ oe(de, [["render", ce], ["__scopeId", "data-v-a0d88ce7"]]);
 export {
-  He as default
+  Ie as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.50.3",
+  "version": "6.50.5",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -113,5 +113,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "0b369f28a444966749668a69bfb2f1aab97a4824"
+  "gitHead": "25592bf2811c9b49ae6dec0395f0702dcbaee639"
 }