@kiva/kv-components 6.56.2 → 6.57.0

package/dist/vue/KvSideSheet.js

@@ -1,11 +1,11 @@
-import { toRefs as P, ref as r, reactive as Q, computed as j, onMounted as X, onUnmounted as Y, watch as g, resolveComponent as Z, openBlock as p, createElementBlock as k, normalizeClass as b, withModifiers as $, createElementVNode as w, normalizeStyle as H, createVNode as z, createCommentVNode as x, toDisplayString as ee, renderSlot as U, nextTick as te } from "vue";
-import { mdiArrowLeft as ne, mdiClose as oe, mdiOpenInNew as ie } from "@mdi/js";
-import le from "./KvMaterialIcon.js";
-import se from "../_virtual/_plugin-vue_export-helper.js";
-const ae = {
+import { toRefs as P, ref as c, reactive as Q, computed as j, onMounted as X, onBeforeUnmount as Y, onUnmounted as Z, watch as g, resolveComponent as $, openBlock as p, createElementBlock as k, normalizeClass as b, withModifiers as ee, createElementVNode as w, normalizeStyle as H, createVNode as z, createCommentVNode as x, toDisplayString as te, renderSlot as F, nextTick as oe } from "vue";
+import { mdiArrowLeft as ne, mdiClose as ie, mdiOpenInNew as le } from "@mdi/js";
+import se from "./KvMaterialIcon.js";
+import ae from "../_virtual/_plugin-vue_export-helper.js";
+const de = {
   name: "KvSideSheet",
   components: {
-    KvMaterialIcon: le
+    KvMaterialIcon: se
   },
   props: {
     /**
@@ -65,7 +65,7 @@ const ae = {
     widthDimensions: {
       type: [String, Object],
       default: () => ({ default: "100%", md: "50%" }),
-      validator: (n) => typeof n == "string" ? /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(n) : typeof n == "object" ? Object.keys(n).every((o) => ["default", "sm", "md", "lg", "xl", "2xl"].includes(o) && /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(n[o])) : !1
+      validator: (o) => typeof o == "string" ? /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(o) : typeof o == "object" ? Object.keys(o).every((n) => ["default", "sm", "md", "lg", "xl", "2xl"].includes(n) && /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(o[n])) : !1
     },
     /**
      * Whether to hide the background of the headline section on mobile (e.g., in Borrower Profile Sidesheet)
@@ -76,14 +76,14 @@ const ae = {
     }
   },
   emits: ["side-sheet-closed", "go-to-link"],
-  setup(n, { emit: o, slots: i }) {
+  setup(o, { emit: n, slots: i }) {
     const {
       visible: t,
       kvTrackFunction: I,
       trackEventCategory: M,
       widthDimensions: l,
       hideHeadlineBgOnMobile: d
-    } = P(n), c = r(!1), a = r({}), O = r(null), m = r(null), y = r(null), _ = r(null), N = r(null), S = r(null), B = r(null), v = Q({
+    } = P(o), r = c(!1), a = c({}), O = c(null), m = c(null), y = c(null), _ = c(null), N = c(null), S = c(null), B = c(null), v = Q({
       headline: 0,
       controls: 0
     }), V = j(() => {
@@ -98,7 +98,7 @@ const ae = {
         lg: 1024,
         xl: 1280,
         "2xl": 1536
-      }, s = N.value || window.innerWidth, f = Object.keys(l.value).filter((u) => u !== "default").sort((u, L) => e[L] - e[u]).find((u) => s >= e[u]);
+      }, s = N.value || window.innerWidth, f = Object.keys(l.value).filter((u) => u !== "default").sort((u, R) => e[R] - e[u]).find((u) => s >= e[u]);
       return f ? l.value[f] : l.value.default || "100%";
     }), A = (e, s) => {
       let f;
@@ -107,7 +107,7 @@ const ae = {
       };
     }, C = () => {
       _.value = window.innerHeight, N.value = window.innerWidth, setTimeout(() => {
-        te(() => {
+        oe(() => {
           var e;
           if (y.value) {
             const s = y.value.getBoundingClientRect();
@@ -123,14 +123,14 @@ const ae = {
       }, 300);
     }, E = A(C, 100), T = () => {
       const e = "tw-overflow-hidden";
-      c.value ? document.body.classList.add(e) : document.body.classList.remove(e);
+      r.value ? document.body.classList.add(e) : document.body.classList.remove(e);
     }, K = () => {
-      c.value = !1, T(), I.value(M.value, "click", "side-sheet-closed"), setTimeout(() => {
-        o("side-sheet-closed");
-      }, 300), document.removeEventListener("keyup", R);
+      r.value = !1, T(), I.value(M.value, "click", "side-sheet-closed"), setTimeout(() => {
+        n("side-sheet-closed");
+      }, 300), document.removeEventListener("keyup", L);
     }, G = () => {
-      o("go-to-link");
-    }, R = (e) => {
+      n("go-to-link");
+    }, L = (e) => {
       (e == null ? void 0 : e.key) === "Escape" && K();
     };
     X(() => {
@@ -138,6 +138,8 @@ const ae = {
         C();
       }, 100), m.value && (S.value = new ResizeObserver(E), S.value.observe(m.value)), y.value && (B.value = new ResizeObserver(E), B.value.observe(y.value)), window.addEventListener("resize", E);
     }), Y(() => {
+      r.value && document.body.classList.remove("tw-overflow-hidden");
+    }), Z(() => {
       S.value && S.value.disconnect(), B.value && B.value.disconnect(), window.removeEventListener("resize", E);
       const e = document.getElementById("side-sheet-styles");
       e && e.remove();
@@ -153,11 +155,11 @@ const ae = {
       width: W.value
     }));
     g(t, (e) => {
-      typeof window < "u" && (e ? (document.addEventListener("keyup", R), a.value = {}, setTimeout(() => {
-        c.value = !0, T(), C();
-      }, 10)) : (c.value = !1, T(), document.removeEventListener("keyup", R), a.value = {}));
+      typeof window < "u" && (e ? (document.addEventListener("keyup", L), a.value = {}, setTimeout(() => {
+        r.value = !0, T(), C();
+      }, 10)) : (r.value = !1, T(), document.removeEventListener("keyup", L), a.value = {}));
     }, { immediate: !0 }), g(W, (e) => {
-      c.value && t.value && a.value && Object.keys(a.value).length > 0 && (a.value = {
+      r.value && t.value && a.value && Object.keys(a.value).length > 0 && (a.value = {
         ...a.value,
         width: e,
         transition: "none"
@@ -169,7 +171,7 @@ const ae = {
         });
       }, 50));
     });
-    const D = () => {
+    const U = () => {
       if (typeof l.value == "object" && O.value) {
         const e = "side-sheet-styles";
         let s = document.getElementById(e);
@@ -180,23 +182,23 @@ const ae = {
           lg: "1024px",
           xl: "1280px",
           "2xl": "1536px"
-        }, L = Object.keys(l.value).filter((h) => h !== "default").sort((h, J) => {
-          const F = ["sm", "md", "lg", "xl", "2xl"];
-          return F.indexOf(h) - F.indexOf(J);
+        }, R = Object.keys(l.value).filter((h) => h !== "default").sort((h, J) => {
+          const D = ["sm", "md", "lg", "xl", "2xl"];
+          return D.indexOf(h) - D.indexOf(J);
         }).map((h) => `
 						@media (min-width: ${f[h]}) {
-							#side-sheet-${n.trackEventCategory || "default"} {
+							#side-sheet-${o.trackEventCategory || "default"} {
 								width: ${l.value[h]} !important;
 							}
 						}
 					`).join("");
-        s.textContent = L, O.value.id = `side-sheet-${n.trackEventCategory || "default"}`;
+        s.textContent = R, O.value.id = `side-sheet-${o.trackEventCategory || "default"}`;
       }
     };
     return g(l, () => {
-      c.value && D();
-    }, { immediate: !0 }), g(c, (e) => {
-      e && D();
+      r.value && U();
+    }, { immediate: !0 }), g(r, (e) => {
+      e && U();
     }), {
       closeSideSheet: K,
       contentHeight: V,
@@ -206,29 +208,29 @@ const ae = {
       sideSheetStyles: q,
       goToLink: G,
       mdiArrowLeft: ne,
-      mdiClose: oe,
-      mdiOpenInNew: ie,
+      mdiClose: ie,
+      mdiOpenInNew: le,
       modalStyles: a,
-      open: c
+      open: r
     };
   }
-}, de = { class: "tw-flex tw-gap-1.5" }, re = { key: 1 }, ce = { class: "tw-flex tw-gap-1.5" };
-function ue(n, o, i, t, I, M) {
-  const l = Z("kv-material-icon");
+}, re = { class: "tw-flex tw-gap-1.5" }, ce = { key: 1 }, ue = { class: "tw-flex tw-gap-1.5" };
+function we(o, n, i, t, I, M) {
+  const l = $("kv-material-icon");
   return i.visible ? (p(), k("div", {
     key: 0,
     class: b(["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[3] || (o[3] = $((...d) => t.closeSideSheet && t.closeSideSheet(...d), ["self"]))
+    onClick: n[3] || (n[3] = ee((...d) => t.closeSideSheet && t.closeSideSheet(...d), ["self"]))
   }, [
     w("div", {
       ref: "sideSheetRef",
       class: b(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white", {
         "tw-translate-x-full": !t.open,
         "tw-translate-x-0": t.open,
-        "tw-h-full": n.$slots.controls
+        "tw-h-full": o.$slots.controls
       }]),
       style: H(t.sideSheetStyles)
     }, [
@@ -244,24 +246,24 @@ function ue(n, o, i, t, I, M) {
             "tw-border-b": i.showHeadlineBorder
           }])
         }, [
-          w("div", de, [
+          w("div", re, [
             i.showBackButton ? (p(), k("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: o[0] || (o[0] = (...d) => t.closeSideSheet && t.closeSideSheet(...d))
+              onClick: n[0] || (n[0] = (...d) => t.closeSideSheet && t.closeSideSheet(...d))
             }, [
               z(l, {
                 class: "tw-w-3 tw-h-3",
                 icon: t.mdiArrowLeft
               }, null, 8, ["icon"])
             ])) : x("", !0),
-            i.headline ? (p(), k("h3", re, ee(i.headline), 1)) : x("", !0)
+            i.headline ? (p(), k("h3", ce, te(i.headline), 1)) : x("", !0)
           ]),
-          w("div", ce, [
+          w("div", ue, [
             i.showGoToLink ? (p(), k("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: o[1] || (o[1] = (...d) => t.goToLink && t.goToLink(...d))
+              onClick: n[1] || (n[1] = (...d) => t.goToLink && t.goToLink(...d))
             }, [
               z(l, {
                 class: "tw-w-3 tw-h-3",
@@ -270,7 +272,7 @@ function ue(n, o, i, t, I, M) {
             ])) : x("", !0),
             w("button", {
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: o[2] || (o[2] = (...d) => t.closeSideSheet && t.closeSideSheet(...d))
+              onClick: n[2] || (n[2] = (...d) => t.closeSideSheet && t.closeSideSheet(...d))
             }, [
               z(l, {
                 class: "tw-w-3 tw-h-3",
@@ -290,10 +292,10 @@ function ue(n, o, i, t, I, M) {
               "tw-opacity-full": t.open
             }])
           }, [
-            U(n.$slots, "default")
+            F(o.$slots, "default")
           ], 2)
         ], 4),
-        n.$slots.controls ? (p(), k("div", {
+        o.$slots.controls ? (p(), k("div", {
           key: 0,
           ref: "controlsRef",
           class: b(["tw-absolute tw-bottom-0 tw-w-full tw-border-t tw-border-tertiary tw-bg-white tw-transition-opacity tw-duration-200", {
@@ -302,13 +304,13 @@ function ue(n, o, i, t, I, M) {
           }]),
           style: { "z-index": "999" }
         }, [
-          U(n.$slots, "controls")
+          F(o.$slots, "controls")
         ], 2)) : x("", !0)
       ], 4)
     ], 6)
   ], 2)) : x("", !0);
 }
-const me = /* @__PURE__ */ se(ae, [["render", ue]]);
+const ye = /* @__PURE__ */ ae(de, [["render", we]]);
 export {
-  me as default
+  ye as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.56.2",
+  "version": "6.57.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -21,7 +21,7 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@kiva/kv-tokens": "^3.4.1",
+    "@kiva/kv-tokens": "^3.5.0",
     "@kiva/vite-plugin-vue-lib-css": "^2.0.0",
     "@laynezh/vite-plugin-lib-assets": "^0.6.1",
     "@mdi/js": "^7.4.47",
@@ -114,5 +114,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "580254ec8b85927b0f438c36ab69df3603c206e4"
+  "gitHead": "15bdecc29426c24efdaafb35efc0aa4f19e5a56f"
 }