@kiva/kv-components 6.21.1 → 6.22.0

package/dist/vue/KvSideSheet.js

@@ -1,11 +1,11 @@
-import { toRefs as J, ref as w, reactive as P, computed as z, onMounted as Q, onUnmounted as j, watch as p, resolveComponent as Y, openBlock as k, createElementBlock as b, normalizeClass as x, withModifiers as Z, createElementVNode as f, normalizeStyle as W, createVNode as _, createCommentVNode as S, toDisplayString as $, renderSlot as U, nextTick as ee } from "vue";
-import { mdiArrowLeft as te, mdiClose as oe, mdiExportVariant as ne } from "@mdi/js";
-import ie from "./KvMaterialIcon.js";
-import le from "../_virtual/_plugin-vue_export-helper.js";
-const ae = {
+import { toRefs as P, ref as u, reactive as Q, computed as z, onMounted as Y, onUnmounted as j, watch as p, resolveComponent as Z, openBlock as k, createElementBlock as b, normalizeClass as x, withModifiers as $, createElementVNode as f, normalizeStyle as W, createVNode as _, createCommentVNode as S, toDisplayString as ee, renderSlot as U, nextTick as te } from "vue";
+import { mdiArrowLeft as oe, mdiClose as ne, mdiExportVariant as ie } from "@mdi/js";
+import le from "./KvMaterialIcon.js";
+import ae from "../_virtual/_plugin-vue_export-helper.js";
+const se = {
   name: "KvSideSheet",
   components: {
-    KvMaterialIcon: ie
+    KvMaterialIcon: le
   },
   props: {
     /**
@@ -83,10 +83,10 @@ const ae = {
       trackEventCategory: K,
       animationSourceElement: h,
       widthDimensions: i
-    } = J(l), u = w(!1), B = w({}), s = w({}), L = w(null), m = w(null), y = w(null), M = w(window.innerHeight), D = w(window.innerWidth), v = P({
+    } = P(l), w = u(!1), B = u({}), s = u({}), L = u(null), m = u(null), y = u(null), A = u(null), M = u(window.innerHeight), D = u(window.innerWidth), v = Q({
       headline: 0,
       controls: 0
-    }), A = z(() => {
+    }), G = z(() => {
       const e = M.value - v.headline - v.controls;
       return Math.max(e, 0);
     }), C = z(() => {
@@ -100,14 +100,14 @@ const ae = {
         "2xl": 1536
       }, n = D.value || window.innerWidth, o = Object.keys(i.value).filter((d) => d !== "default").sort((d, g) => e[g] - e[d]).find((d) => n >= e[d]);
       return o ? i.value[o] : i.value.default || "100%";
-    }), G = (e, n) => {
+    }), X = (e, n) => {
       let o;
       return (...d) => {
         clearTimeout(o), o = setTimeout(() => e(...d), n);
       };
     }, E = () => {
       M.value = window.innerHeight, D.value = window.innerWidth, setTimeout(() => {
-        ee(() => {
+        te(() => {
           var e;
           if (y.value) {
             const n = y.value.getBoundingClientRect();
@@ -121,30 +121,30 @@ const ae = {
             v.controls = 0;
         });
       }, 300);
-    }, T = G(E, 100), O = () => {
+    }, R = X(E, 100), O = () => {
       const e = "tw-overflow-hidden";
-      u.value ? document.body.classList.add(e) : document.body.classList.remove(e);
+      w.value ? document.body.classList.add(e) : document.body.classList.remove(e);
     }, F = () => {
-      u.value = !1, O(), V.value(K.value, "click", "side-sheet-closed"), setTimeout(() => {
+      w.value = !1, O(), V.value(K.value, "click", "side-sheet-closed"), setTimeout(() => {
         a("side-sheet-closed");
       }, 300), document.removeEventListener("keyup", H);
-    }, X = () => {
+    }, q = () => {
       a("go-to-link");
     }, H = (e) => {
       (e == null ? void 0 : e.key) === "Escape" && F();
     };
-    Q(() => {
+    Y(() => {
       if (setTimeout(() => {
         E();
       }, 100), m.value) {
-        const e = new ResizeObserver(T);
+        const e = new ResizeObserver(R);
         e.observe(m.value), j(() => e.disconnect());
       }
       if (y.value) {
-        const e = new ResizeObserver(T);
+        const e = new ResizeObserver(R);
         e.observe(y.value), j(() => e.disconnect());
       }
-      window.addEventListener("resize", T), j(() => window.removeEventListener("resize", T));
+      window.addEventListener("resize", R), j(() => window.removeEventListener("resize", R));
     }), p(() => {
       var e;
       return (e = r.controls) == null ? void 0 : e.call(r);
@@ -153,21 +153,21 @@ const ae = {
         E();
       }, 100);
     }, { deep: !0, immediate: !0 });
-    const q = z(() => ({
+    const J = z(() => ({
       width: C.value
     }));
     p(t, (e) => {
       var n;
       if (e) {
         document.addEventListener("keyup", H), s.value = {}, setTimeout(() => {
-          u.value = !0, O(), E();
+          w.value = !0, O(), E();
         }, 10);
-        const o = (n = h.value) == null ? void 0 : n.getBoundingClientRect(), d = (o == null ? void 0 : o.top) ?? 0, g = (o == null ? void 0 : o.left) ?? 0, c = (o == null ? void 0 : o.width) ?? 0, R = (o == null ? void 0 : o.height) ?? 0;
-        o && (d || g || c || R) && (B.value = {
+        const o = (n = h.value) == null ? void 0 : n.getBoundingClientRect(), d = (o == null ? void 0 : o.top) ?? 0, g = (o == null ? void 0 : o.left) ?? 0, c = (o == null ? void 0 : o.width) ?? 0, T = (o == null ? void 0 : o.height) ?? 0;
+        o && (d || g || c || T) && (B.value = {
           position: "fixed",
           top: `${d}px`,
           width: `${c}px`,
-          height: `${R}px`,
+          height: `${T}px`,
           transform: `translateX(${C.value})`
         }, s.value = {
           ...B.value,
@@ -182,12 +182,12 @@ const ae = {
           };
         }, 10));
       } else
-        u.value = !1, O(), document.removeEventListener("keyup", H), h.value && Object.keys(B.value).length > 0 ? s.value = {
+        w.value = !1, O(), document.removeEventListener("keyup", H), h.value && Object.keys(B.value).length > 0 ? s.value = {
           ...B.value,
           transition: "all 0.3s ease-in-out"
         } : s.value = {};
     }, { immediate: !0 }), p(C, (e) => {
-      u.value && t.value && s.value && Object.keys(s.value).length > 0 && (s.value = {
+      w.value && t.value && s.value && Object.keys(s.value).length > 0 && (s.value = {
         ...s.value,
         width: e,
         transition: "none"
@@ -210,9 +210,9 @@ const ae = {
           lg: "1024px",
           xl: "1280px",
           "2xl": "1536px"
-        }, g = Object.keys(i.value).filter((c) => c !== "default").sort((c, R) => {
+        }, g = Object.keys(i.value).filter((c) => c !== "default").sort((c, T) => {
           const N = ["sm", "md", "lg", "xl", "2xl"];
-          return N.indexOf(c) - N.indexOf(R);
+          return N.indexOf(c) - N.indexOf(T);
         }).map((c) => `
 						@media (min-width: ${o[c]}) {
 							#side-sheet-${l.trackEventCategory || "default"} {
@@ -226,34 +226,35 @@ const ae = {
       }
     };
     return p(i, () => {
-      u.value && I();
-    }, { immediate: !0 }), p(u, (e) => {
+      w.value && I();
+    }, { immediate: !0 }), p(w, (e) => {
       e && I();
     }), {
       closeSideSheet: F,
-      contentHeight: A,
+      contentHeight: G,
       controlsRef: m,
       headlineRef: y,
+      contentRef: A,
       sideSheetRef: L,
-      sideSheetStyles: q,
-      goToLink: X,
-      mdiArrowLeft: te,
-      mdiClose: oe,
-      mdiExportVariant: ne,
+      sideSheetStyles: J,
+      goToLink: q,
+      mdiArrowLeft: oe,
+      mdiClose: ne,
+      mdiExportVariant: ie,
       modalStyles: s,
-      open: u
+      open: w
     };
   }
-}, se = { class: "tw-flex tw-gap-1.5" }, re = { key: 1 }, de = { class: "tw-flex tw-gap-1.5" };
-function ce(l, a, r, t, V, K) {
-  const h = Y("kv-material-icon");
+}, re = { class: "tw-flex tw-gap-1.5" }, de = { key: 1 }, ce = { class: "tw-flex tw-gap-1.5" };
+function ue(l, a, r, t, V, K) {
+  const h = Z("kv-material-icon");
   return r.visible ? (k(), b("div", {
     key: 0,
     class: x(["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: a[3] || (a[3] = Z((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
+    onClick: a[3] || (a[3] = $((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
   }, [
     f("div", {
       ref: "sideSheetRef",
@@ -276,7 +277,7 @@ function ce(l, a, r, t, V, K) {
             "tw-border-b": r.showHeadlineBorder
           }])
         }, [
-          f("div", se, [
+          f("div", re, [
             r.showBackButton ? (k(), b("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
@@ -287,9 +288,9 @@ function ce(l, a, r, t, V, K) {
                 icon: t.mdiArrowLeft
               }, null, 8, ["icon"])
             ])) : S("", !0),
-            r.headline ? (k(), b("h2", re, $(r.headline), 1)) : S("", !0)
+            r.headline ? (k(), b("h2", de, ee(r.headline), 1)) : S("", !0)
           ]),
-          f("div", de, [
+          f("div", ce, [
             r.showGoToLink ? (k(), b("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
@@ -312,6 +313,8 @@ function ce(l, a, r, t, V, K) {
           ])
         ], 2),
         f("div", {
+          id: "sidesheet-content",
+          ref: "contentRef",
           class: "tw-overflow-y-auto tw-overscroll-y-contain",
           style: W({ height: t.contentHeight + "px" })
         }, [
@@ -339,7 +342,7 @@ function ce(l, a, r, t, V, K) {
     ], 6)
   ], 2)) : S("", !0);
 }
-const ve = /* @__PURE__ */ le(ae, [["render", ce]]);
+const me = /* @__PURE__ */ ae(se, [["render", ue]]);
 export {
-  ve as default
+  me as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.21.1",
+  "version": "6.22.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -111,5 +111,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "aa646dc5aeb545bca9a0dc5a574bebc9e438a4d2"
+  "gitHead": "a966746cbca329047a6c7f63f3a91af56857d7fb"
 }