@kiva/kv-components 5.0.0 → 5.1.1

package/dist/vue/KvIntroductionLoanCard.css

@@ -1 +1 @@
-.loan-callouts[data-v-f5ebb270] span{background-color:transparent!important;--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1))}.loan-card-use[data-v-f5ebb270]:hover,.loan-card-use[data-v-f5ebb270]:focus{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1))}.loan-card-active-hover:hover .loan-card-use[data-v-f5ebb270],.loan-card-active-hover:hover .loan-card-name[data-v-f5ebb270]{text-decoration-line:underline}.loan-card-progress[data-v-f5ebb270],.loan-card-progress[data-v-f5ebb270]:hover,.loan-card-progress[data-v-f5ebb270]:focus{text-decoration-line:none}.loan-card-name[data-v-f5ebb270]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;cursor:pointer;overflow:hidden;text-overflow:ellipsis;padding-left:1.5rem;padding-right:1.5rem;padding-top:.5rem}.loan-bookmark[data-v-f5ebb270] button{border-top-left-radius:0!important;border-top-right-radius:0!important}
+.loan-callouts[data-v-a9f870f5] span{background-color:transparent!important;--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1))}.loan-card-use[data-v-a9f870f5]:hover,.loan-card-use[data-v-a9f870f5]:focus{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1))}.loan-card-active-hover:hover .loan-card-use[data-v-a9f870f5],.loan-card-active-hover:hover .loan-card-name[data-v-a9f870f5]{text-decoration-line:underline}.loan-card-progress[data-v-a9f870f5],.loan-card-progress[data-v-a9f870f5]:hover,.loan-card-progress[data-v-a9f870f5]:focus{text-decoration-line:none}.loan-card-name[data-v-a9f870f5]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;cursor:pointer;overflow:hidden;text-overflow:ellipsis;padding-left:1.5rem;padding-right:1.5rem;padding-top:.5rem}.loan-bookmark[data-v-a9f870f5] button{border-top-left-radius:0!important;border-top-right-radius:0!important}

package/dist/vue/KvIntroductionLoanCard.js

@@ -89,9 +89,9 @@ const $ = {
       distributionModel: g,
       formattedLocation: y,
       fundraisingPercent: k,
-      hasProgressData: b,
-      imageHash: v,
-      isLoading: _,
+      hasProgressData: v,
+      imageHash: _,
+      isLoading: b,
       loanAmount: p,
       loanBorrowerCount: r,
       loanCallouts: x,
@@ -114,9 +114,9 @@ const $ = {
       distributionModel: g,
       formattedLocation: y,
       fundraisingPercent: k,
-      hasProgressData: b,
-      imageHash: v,
-      isLoading: _,
+      hasProgressData: v,
+      imageHash: _,
+      isLoading: b,
       loanAmount: p,
       loanBorrowerCount: r,
       loanCallouts: x,
@@ -182,7 +182,7 @@ const $ = {
   style: { "font-weight": "bold", "font-size": "13px", "border-radius": "8px" }
 };
 function ue(n, o, i, e, C, w) {
-  const l = m("kv-loading-placeholder"), g = m("kv-borrower-image"), y = m("kv-flag"), k = m("kv-loan-bookmark"), b = m("kv-loan-callouts"), v = m("kv-loan-use"), _ = m("kv-loan-progress-group"), p = m("kv-loan-tag");
+  const l = m("kv-loading-placeholder"), g = m("kv-borrower-image"), y = m("kv-flag"), k = m("kv-loan-bookmark"), v = m("kv-loan-callouts"), _ = m("kv-loan-use"), b = m("kv-loan-progress-group"), p = m("kv-loan-tag");
   return t(), d("div", {
     class: L(["tw-flex tw-flex-col tw-bg-white tw-rounded tw-w-full tw-pb-2", { "tw-pointer-events-none": e.isLoading }]),
     "data-testid": "loan-card",
@@ -219,9 +219,10 @@ function ue(n, o, i, e, C, w) {
                       s(y, {
                         class: "tw-ml-0.5 tw-mr-1",
                         country: e.countryCode,
+                        name: e.countryName,
                         "width-override": "16px",
                         "hide-border": ""
-                      }, null, 8, ["country"])
+                      }, null, 8, ["country", "name"])
                     ]),
                     _: 1
                   })),
@@ -285,7 +286,7 @@ function ue(n, o, i, e, C, w) {
           onClick: o[3] || (o[3] = (r) => e.clickReadMore("Tag", r))
         }, {
           default: h(() => [
-            s(b, {
+            s(v, {
               callouts: e.loanCallouts,
               "add-bg-color": !1,
               class: "loan-callouts"
@@ -312,7 +313,7 @@ function ue(n, o, i, e, C, w) {
                   s(l)
                 ]))), 128))
               ])) : (t(), d("div", ie, [
-                s(v, {
+                s(_, {
                   use: e.loanUse,
                   "loan-amount": e.loanAmount,
                   status: e.loanStatus,
@@ -356,7 +357,7 @@ function ue(n, o, i, e, C, w) {
           onClick: o[5] || (o[5] = (r) => e.clickReadMore("Progress", r))
         }, {
           default: h(() => [
-            s(_, {
+            s(b, {
               id: "loanProgress",
               "money-left": `${e.unreservedAmount}`,
               "amount-goal": `${e.loanAmount}`,
@@ -381,7 +382,7 @@ function ue(n, o, i, e, C, w) {
     ])
   ], 6);
 }
-const Me = /* @__PURE__ */ Z($, [["render", ue], ["__scopeId", "data-v-f5ebb270"]]);
+const Me = /* @__PURE__ */ Z($, [["render", ue], ["__scopeId", "data-v-a9f870f5"]]);
 export {
   Me as default
 };

package/dist/vue/KvSideSheet.js

@@ -1,10 +1,10 @@
-import { toRefs as C, ref as r, watch as T, resolveComponent as L, openBlock as p, createElementBlock as g, normalizeClass as s, withModifiers as E, createElementVNode as c, normalizeStyle as B, createVNode as k, createCommentVNode as S, renderSlot as _ } from "vue";
-import { mdiClose as z, mdiLaunch as F } from "@mdi/js";
-import N from "./KvMaterialIcon.js";
-import V from "../_virtual/_plugin-vue_export-helper.js";
-const j = {
+import { toRefs as T, ref as u, watch as L, resolveComponent as B, openBlock as p, createElementBlock as g, normalizeClass as c, withModifiers as E, createElementVNode as d, normalizeStyle as _, createVNode as k, createCommentVNode as S, renderSlot as z } from "vue";
+import { mdiClose as F, mdiLaunch as N } from "@mdi/js";
+import V from "./KvMaterialIcon.js";
+import j from "../_virtual/_plugin-vue_export-helper.js";
+const G = {
   components: {
-    KvMaterialIcon: N
+    KvMaterialIcon: V
   },
   props: {
     /**
@@ -46,42 +46,43 @@ const j = {
   emits: [
     "side-sheet-closed"
   ],
-  setup(w, { emit: o }) {
+  setup(w, { emit: e }) {
     const {
       visible: n,
       kvTrackFunction: t,
       trackEventCategory: f,
-      animationSourceElement: d
-    } = C(w), l = r(!1), i = r({}), a = r({}), b = () => {
-      l.value = !1, t.value(f.value, "click", "side-sheet-closed"), d.value && (a.value = {
+      animationSourceElement: r
+    } = T(w), l = u(!1), i = u({}), a = u({}), v = () => {
+      const s = "tw-overflow-hidden";
+      l.value ? document.body.classList.add(s) : document.body.classList.remove(s);
+    }, b = () => {
+      l.value = !1, v(), t.value(f.value, "click", "side-sheet-closed"), r.value && (a.value = {
         ...i.value,
         transition: "all 0.5s ease-in-out"
       }), setTimeout(() => {
-        o("side-sheet-closed");
+        e("side-sheet-closed");
       }, "700");
-    }, x = () => {
-      o("go-to-link");
+    }, C = () => {
+      e("go-to-link");
     };
-    return T(n, () => {
-      var u;
+    return L(n, () => {
+      var s;
       if (n.value) {
         setTimeout(() => {
-          l.value = !0;
+          l.value = !0, v();
         }, 100);
-        const e = (u = d.value) == null ? void 0 : u.getBoundingClientRect(), m = (e == null ? void 0 : e.top) ?? 0, v = (e == null ? void 0 : e.left) ?? 0, h = (e == null ? void 0 : e.width) ?? 0, y = (e == null ? void 0 : e.height) ?? 0;
-        m || v || h || y ? (i.value = {
+        const o = (s = r.value) == null ? void 0 : s.getBoundingClientRect(), m = (o == null ? void 0 : o.top) ?? 0, x = (o == null ? void 0 : o.left) ?? 0, y = (o == null ? void 0 : o.width) ?? 0, h = (o == null ? void 0 : o.height) ?? 0;
+        m || x || y || h ? (i.value = {
           position: "fixed",
           top: `${m}px`,
-          left: `${v}px`,
-          width: `${h}px`,
-          height: `${y}px`
+          width: `${y}px`,
+          height: `${h}px`
         }, a.value = {
           ...i.value,
           transition: "none"
         }, setTimeout(() => {
           a.value = {
             top: "0",
-            left: "0",
             width: "100vw",
             height: "100%",
             transition: "all 0.5s ease-in-out"
@@ -89,41 +90,41 @@ const j = {
         }, 10)) : a.value = {};
       }
     }), {
-      mdiClose: z,
-      mdiLaunch: F,
+      mdiClose: F,
+      mdiLaunch: N,
       open: l,
       closeSideSheet: b,
-      goToLink: x,
+      goToLink: C,
       modalStyles: a
     };
   }
 };
-function G(w, o, n, t, f, d) {
-  const l = L("kv-material-icon");
+function K(w, e, n, t, f, r) {
+  const l = B("kv-material-icon");
   return n.visible ? (p(), g("div", {
     key: 0,
-    class: s(["tw-block lg:tw-mt-0 tw-fixed tw-inset-0 tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal", {
+    class: c(["tw-block lg:tw-mt-0 tw-fixed tw-inset-0 tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal", {
       "tw-bg-opacity-0 tw-delay-300": !t.open,
       "tw-bg-opacity-low": t.open
     }]),
-    onClick: o[2] || (o[2] = E((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
+    onClick: e[2] || (e[2] = E((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
   }, [
-    c("div", {
-      class: s(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto tw-p-2", {
+    d("div", {
+      class: c(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto tw-p-2", {
         "tw-w-0 tw-delay-200 tw-opacity-0": !t.open,
         "lg:tw-w-1/2 tw-w-full tw-opacity-full": t.open
       }]),
-      style: B(t.modalStyles)
+      style: _(t.modalStyles)
     }, [
-      c("div", {
-        class: s(["tw-flex tw-justify-between tw-transition-opacity tw-duration-500 tw-delay-200", {
+      d("div", {
+        class: c(["tw-flex tw-justify-between tw-transition-opacity tw-duration-500 tw-delay-200", {
           "tw-opacity-0": !t.open,
           "tw-opacity-full": t.open
         }])
       }, [
-        c("button", {
+        d("button", {
           class: "hover:tw-text-action-highlight",
-          onClick: o[0] || (o[0] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
+          onClick: e[0] || (e[0] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
         }, [
           k(l, {
             class: "tw-w-3 tw-h-3",
@@ -133,7 +134,7 @@ function G(w, o, n, t, f, d) {
         n.showGoToLink ? (p(), g("button", {
           key: 0,
           class: "hover:tw-text-action-highlight",
-          onClick: o[1] || (o[1] = (...i) => t.goToLink && t.goToLink(...i))
+          onClick: e[1] || (e[1] = (...i) => t.goToLink && t.goToLink(...i))
         }, [
           k(l, {
             class: "tw-w-3 tw-h-3",
@@ -141,18 +142,18 @@ function G(w, o, n, t, f, d) {
           }, null, 8, ["icon"])
         ])) : S("", !0)
       ], 2),
-      c("div", {
-        class: s(["tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200 tw-overscroll-y-contain", {
+      d("div", {
+        class: c(["tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200 tw-overscroll-y-contain", {
           "tw-opacity-0": !t.open,
           "tw-opacity-full": t.open
         }])
       }, [
-        _(w.$slots, "default")
+        z(w.$slots, "default")
       ], 2)
     ], 6)
   ], 2)) : S("", !0);
 }
-const O = /* @__PURE__ */ V(j, [["render", G]]);
+const q = /* @__PURE__ */ j(G, [["render", K]]);
 export {
-  O as default
+  q as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "5.0.0",
+  "version": "5.1.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -89,7 +89,7 @@
     "postbuild": "mkdir -p ../../dist/kvui && mv -v dist/kvui/* ../../dist/kvui/"
   },
   "peerDependencies": {
-    "@kiva/kv-tokens": "2.x",
+    "@kiva/kv-tokens": "3.x",
     "@mdi/js": "7.x",
     "@vueuse/integrations": "9.x",
     "change-case": "4.x",
@@ -106,5 +106,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "a49e957d5d021aa4adec079b12f8a06b2b2c7b63"
+  "gitHead": "bfc4f96c62eca4208e7323961c9d55067a622e79"
 }