@kiva/kv-components 6.22.0 → 6.22.1

package/dist/vue/KvSideSheet.js

@@ -1,11 +1,11 @@
-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 = {
+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 h, 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 = {
   name: "KvSideSheet",
   components: {
-    KvMaterialIcon: le
+    KvMaterialIcon: ie
   },
   props: {
     /**
@@ -81,12 +81,12 @@ const se = {
       visible: t,
       kvTrackFunction: V,
       trackEventCategory: K,
-      animationSourceElement: h,
+      animationSourceElement: f,
       widthDimensions: i
-    } = 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({
+    } = 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({
       headline: 0,
       controls: 0
-    }), G = z(() => {
+    }), A = z(() => {
       const e = M.value - v.headline - v.controls;
       return Math.max(e, 0);
     }), C = z(() => {
@@ -100,14 +100,14 @@ const se = {
         "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%";
-    }), X = (e, n) => {
+    }), G = (e, n) => {
       let o;
       return (...d) => {
         clearTimeout(o), o = setTimeout(() => e(...d), n);
       };
     }, E = () => {
       M.value = window.innerHeight, D.value = window.innerWidth, setTimeout(() => {
-        te(() => {
+        ee(() => {
           var e;
           if (y.value) {
             const n = y.value.getBoundingClientRect();
@@ -121,30 +121,30 @@ const se = {
             v.controls = 0;
         });
       }, 300);
-    }, R = X(E, 100), O = () => {
+    }, T = G(E, 100), O = () => {
       const e = "tw-overflow-hidden";
-      w.value ? document.body.classList.add(e) : document.body.classList.remove(e);
+      u.value ? document.body.classList.add(e) : document.body.classList.remove(e);
     }, F = () => {
-      w.value = !1, O(), V.value(K.value, "click", "side-sheet-closed"), setTimeout(() => {
+      u.value = !1, O(), V.value(K.value, "click", "side-sheet-closed"), setTimeout(() => {
         a("side-sheet-closed");
       }, 300), document.removeEventListener("keyup", H);
-    }, q = () => {
+    }, X = () => {
       a("go-to-link");
     }, H = (e) => {
       (e == null ? void 0 : e.key) === "Escape" && F();
     };
-    Y(() => {
+    Q(() => {
       if (setTimeout(() => {
         E();
       }, 100), m.value) {
-        const e = new ResizeObserver(R);
+        const e = new ResizeObserver(T);
         e.observe(m.value), j(() => e.disconnect());
       }
       if (y.value) {
-        const e = new ResizeObserver(R);
+        const e = new ResizeObserver(T);
         e.observe(y.value), j(() => e.disconnect());
       }
-      window.addEventListener("resize", R), j(() => window.removeEventListener("resize", R));
+      window.addEventListener("resize", T), j(() => window.removeEventListener("resize", T));
     }), p(() => {
       var e;
       return (e = r.controls) == null ? void 0 : e.call(r);
@@ -153,21 +153,21 @@ const se = {
         E();
       }, 100);
     }, { deep: !0, immediate: !0 });
-    const J = z(() => ({
+    const q = z(() => ({
       width: C.value
     }));
     p(t, (e) => {
       var n;
       if (e) {
         document.addEventListener("keyup", H), s.value = {}, setTimeout(() => {
-          w.value = !0, O(), E();
+          u.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, T = (o == null ? void 0 : o.height) ?? 0;
-        o && (d || g || c || T) && (B.value = {
+        const o = (n = f.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 = {
           position: "fixed",
           top: `${d}px`,
           width: `${c}px`,
-          height: `${T}px`,
+          height: `${R}px`,
           transform: `translateX(${C.value})`
         }, s.value = {
           ...B.value,
@@ -182,12 +182,12 @@ const se = {
           };
         }, 10));
       } else
-        w.value = !1, O(), document.removeEventListener("keyup", H), h.value && Object.keys(B.value).length > 0 ? s.value = {
+        u.value = !1, O(), document.removeEventListener("keyup", H), f.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) => {
-      w.value && t.value && s.value && Object.keys(s.value).length > 0 && (s.value = {
+      u.value && t.value && s.value && Object.keys(s.value).length > 0 && (s.value = {
         ...s.value,
         width: e,
         transition: "none"
@@ -210,9 +210,9 @@ const se = {
           lg: "1024px",
           xl: "1280px",
           "2xl": "1536px"
-        }, g = Object.keys(i.value).filter((c) => c !== "default").sort((c, T) => {
+        }, g = Object.keys(i.value).filter((c) => c !== "default").sort((c, R) => {
           const N = ["sm", "md", "lg", "xl", "2xl"];
-          return N.indexOf(c) - N.indexOf(T);
+          return N.indexOf(c) - N.indexOf(R);
         }).map((c) => `
 						@media (min-width: ${o[c]}) {
 							#side-sheet-${l.trackEventCategory || "default"} {
@@ -226,37 +226,36 @@ const se = {
       }
     };
     return p(i, () => {
-      w.value && I();
-    }, { immediate: !0 }), p(w, (e) => {
+      u.value && I();
+    }, { immediate: !0 }), p(u, (e) => {
       e && I();
     }), {
       closeSideSheet: F,
-      contentHeight: G,
+      contentHeight: A,
       controlsRef: m,
       headlineRef: y,
-      contentRef: A,
       sideSheetRef: L,
-      sideSheetStyles: J,
-      goToLink: q,
-      mdiArrowLeft: oe,
-      mdiClose: ne,
-      mdiExportVariant: ie,
+      sideSheetStyles: q,
+      goToLink: X,
+      mdiArrowLeft: te,
+      mdiClose: oe,
+      mdiExportVariant: ne,
       modalStyles: s,
-      open: w
+      open: u
     };
   }
-}, 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");
+}, 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 f = Y("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] = $((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
+    onClick: a[3] || (a[3] = Z((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
   }, [
-    f("div", {
+    h("div", {
       ref: "sideSheetRef",
       class: x(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto", {
         "tw-translate-x-full": !t.open,
@@ -265,11 +264,11 @@ function ue(l, a, r, t, V, K) {
       }]),
       style: W(t.sideSheetStyles)
     }, [
-      f("div", {
+      h("div", {
         class: "tw-flex tw-flex-col tw-h-full",
         style: W(t.modalStyles)
       }, [
-        f("div", {
+        h("div", {
           ref: "headlineRef",
           class: x(["tw-flex tw-justify-between tw-transition-opacity tw-duration-200 tw-px-3 tw-py-2 tw-border-tertiary", {
             "tw-opacity-0": !t.open,
@@ -277,48 +276,47 @@ function ue(l, a, r, t, V, K) {
             "tw-border-b": r.showHeadlineBorder
           }])
         }, [
-          f("div", re, [
+          h("div", se, [
             r.showBackButton ? (k(), b("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
               onClick: a[0] || (a[0] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
             }, [
-              _(h, {
+              _(f, {
                 class: "tw-w-3 tw-h-3",
                 icon: t.mdiArrowLeft
               }, null, 8, ["icon"])
             ])) : S("", !0),
-            r.headline ? (k(), b("h2", de, ee(r.headline), 1)) : S("", !0)
+            r.headline ? (k(), b("h2", re, $(r.headline), 1)) : S("", !0)
           ]),
-          f("div", ce, [
+          h("div", de, [
             r.showGoToLink ? (k(), b("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
               onClick: a[1] || (a[1] = (...i) => t.goToLink && t.goToLink(...i))
             }, [
-              _(h, {
+              _(f, {
                 class: "tw-w-3 tw-h-3",
                 icon: t.mdiExportVariant
               }, null, 8, ["icon"])
             ])) : S("", !0),
-            f("button", {
+            h("button", {
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
               onClick: a[2] || (a[2] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
             }, [
-              _(h, {
+              _(f, {
                 class: "tw-w-3 tw-h-3",
                 icon: t.mdiClose
               }, null, 8, ["icon"])
             ])
           ])
         ], 2),
-        f("div", {
+        h("div", {
           id: "sidesheet-content",
-          ref: "contentRef",
           class: "tw-overflow-y-auto tw-overscroll-y-contain",
           style: W({ height: t.contentHeight + "px" })
         }, [
-          f("div", {
+          h("div", {
             class: x(["tw-p-2 tw-transition-opacity tw-duration-200", {
               "tw-opacity-0": !t.open,
               "tw-opacity-full": t.open
@@ -342,7 +340,7 @@ function ue(l, a, r, t, V, K) {
     ], 6)
   ], 2)) : S("", !0);
 }
-const me = /* @__PURE__ */ ae(se, [["render", ue]]);
+const ve = /* @__PURE__ */ le(ae, [["render", ce]]);
 export {
-  me as default
+  ve as default
 };

package/package.json

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