@kiva/kv-components 6.18.0 → 6.19.1

package/dist/vue/KvSideSheet.js

@@ -1,10 +1,10 @@
-import { toRefs as L, ref as m, watch as T, resolveComponent as _, openBlock as r, createElementBlock as d, normalizeClass as f, withModifiers as j, createElementVNode as s, normalizeStyle as V, createVNode as v, createCommentVNode as u, toDisplayString as z, renderSlot as C } from "vue";
-import { mdiClose as F, mdiArrowLeft as K, mdiExportVariant as N } from "@mdi/js";
-import R from "./KvMaterialIcon.js";
-import A from "../_virtual/_plugin-vue_export-helper.js";
-const G = {
+import { toRefs as U, ref as w, reactive as A, computed as G, onMounted as D, onUnmounted as T, watch as j, resolveComponent as I, openBlock as v, createElementBlock as m, normalizeClass as y, withModifiers as q, createElementVNode as s, normalizeStyle as O, createVNode as C, createCommentVNode as g, toDisplayString as J, renderSlot as V, nextTick as P } from "vue";
+import { mdiArrowLeft as Q, mdiClose as W, mdiExportVariant as X } from "@mdi/js";
+import Y from "./KvMaterialIcon.js";
+import Z from "../_virtual/_plugin-vue_export-helper.js";
+const $ = {
   components: {
-    KvMaterialIcon: R
+    KvMaterialIcon: Y
   },
   props: {
     /**
@@ -15,7 +15,7 @@ const G = {
       default: !1
     },
     /**
-     * Show the go to link button
+     * Show the back button
      * */
     showBackButton: {
       type: Boolean,
@@ -28,6 +28,13 @@ const G = {
       type: Boolean,
       default: !1
     },
+    /**
+     * Show the border of the headline section
+     * */
+    showHeadlineBorder: {
+      type: Boolean,
+      default: !0
+    },
     /**
      * Tracking event function
      * */
@@ -44,165 +51,219 @@ const G = {
     },
     /**
      * Source element position for expand animation
-     */
+     * */
     animationSourceElement: {
       type: Object,
       default: () => ({})
     },
     /**
      * The headline of the side sheet
-     */
+     * */
     headline: {
       type: String,
       default: ""
     }
   },
-  emits: [
-    "side-sheet-closed"
-  ],
-  setup(w, { emit: o }) {
+  emits: ["side-sheet-closed", "go-to-link"],
+  setup(c, { emit: l, slots: n }) {
     const {
-      visible: l,
-      kvTrackFunction: t,
-      trackEventCategory: p,
-      animationSourceElement: y
-    } = L(w), n = m(!1), i = m({}), c = m({});
-    let h = null;
-    const k = () => {
-      const a = "tw-overflow-hidden";
-      n.value ? document.body.classList.add(a) : document.body.classList.remove(a);
-    }, g = () => {
-      n.value = !1, k(), t.value(p.value, "click", "side-sheet-closed"), y.value && (c.value = {
-        ...i.value,
+      visible: e,
+      kvTrackFunction: E,
+      trackEventCategory: L,
+      animationSourceElement: r
+    } = U(c), i = w(!1), S = w({}), u = w({}), h = w(null), f = w(null), R = w(window.innerHeight), d = A({
+      headline: 0,
+      controls: 0
+    }), M = G(() => {
+      const t = R.value - d.headline - d.controls;
+      return Math.max(t, 0);
+    }), F = (t, a) => {
+      let o;
+      return (...b) => {
+        clearTimeout(o), o = setTimeout(() => t(...b), a);
+      };
+    }, p = () => {
+      R.value = window.innerHeight, setTimeout(() => {
+        P(() => {
+          var t;
+          if (f.value) {
+            const a = f.value.getBoundingClientRect();
+            d.headline = a.height;
+          } else
+            d.headline = 0;
+          if ((t = n.controls) != null && t.call(n) && h.value) {
+            const a = h.value.getBoundingClientRect();
+            d.controls = a.height;
+          } else
+            d.controls = 0;
+        });
+      }, 300);
+    }, k = F(p, 100), x = () => {
+      const t = "tw-overflow-hidden";
+      i.value ? document.body.classList.add(t) : document.body.classList.remove(t);
+    }, H = () => {
+      i.value = !1, x(), E.value(L.value, "click", "side-sheet-closed"), r.value && (u.value = {
+        ...S.value,
         transition: "all 0.5s ease-in-out"
       }), setTimeout(() => {
-        o("side-sheet-closed");
-      }, "700"), document.removeEventListener("keyup", h);
-    }, B = () => {
-      o("go-to-link");
+        l("side-sheet-closed");
+      }, 700), document.removeEventListener("keyup", B);
+    }, K = () => {
+      l("go-to-link");
+    }, B = (t) => {
+      (t == null ? void 0 : t.key) === "Escape" && H();
     };
-    return h = (a) => {
-      a && a.key === "Escape" && g();
-    }, T(l, () => {
+    return D(() => {
+      if (setTimeout(() => {
+        p();
+      }, 100), h.value) {
+        const t = new ResizeObserver(k);
+        t.observe(h.value), T(() => t.disconnect());
+      }
+      if (f.value) {
+        const t = new ResizeObserver(k);
+        t.observe(f.value), T(() => t.disconnect());
+      }
+      window.addEventListener("resize", k), T(() => window.removeEventListener("resize", k));
+    }), j(() => {
+      var t;
+      return (t = n.controls) == null ? void 0 : t.call(n);
+    }, () => {
+      setTimeout(() => {
+        p();
+      }, 100);
+    }, { deep: !0, immediate: !0 }), j(e, (t) => {
       var a;
-      if (l.value) {
-        document.addEventListener("keyup", h), setTimeout(() => {
-          n.value = !0, k();
+      if (t) {
+        document.addEventListener("keyup", B), setTimeout(() => {
+          i.value = !0, x(), p();
         }, 100);
-        const e = (a = y.value) == null ? void 0 : a.getBoundingClientRect(), S = (e == null ? void 0 : e.top) ?? 0, E = (e == null ? void 0 : e.left) ?? 0, b = (e == null ? void 0 : e.width) ?? 0, x = (e == null ? void 0 : e.height) ?? 0;
-        S || E || b || x ? (i.value = {
+        const o = (a = r.value) == null ? void 0 : a.getBoundingClientRect(), b = (o == null ? void 0 : o.top) ?? 0, N = (o == null ? void 0 : o.left) ?? 0, z = (o == null ? void 0 : o.width) ?? 0, _ = (o == null ? void 0 : o.height) ?? 0;
+        b || N || z || _ ? (S.value = {
           position: "fixed",
-          top: `${S}px`,
-          width: `${b}px`,
-          height: `${x}px`
-        }, c.value = {
-          ...i.value,
+          top: `${b}px`,
+          width: `${z}px`,
+          height: `${_}px`
+        }, u.value = {
+          ...S.value,
           transition: "none"
         }, setTimeout(() => {
-          c.value = {
+          u.value = {
             top: "0",
             width: "100%",
             height: "100%",
             transition: "all 0.5s ease-in-out"
           };
-        }, 10)) : c.value = {};
-      }
+        }, 10)) : u.value = {};
+      } else
+        i.value = !1, x(), document.removeEventListener("keyup", B);
     }), {
-      mdiClose: F,
-      mdiArrowLeft: K,
-      mdiExportVariant: N,
-      open: n,
-      closeSideSheet: g,
-      goToLink: B,
-      modalStyles: c
+      closeSideSheet: H,
+      contentHeight: M,
+      controlsRef: h,
+      headlineRef: f,
+      goToLink: K,
+      mdiArrowLeft: Q,
+      mdiClose: W,
+      mdiExportVariant: X,
+      modalStyles: u,
+      open: i
     };
   }
-}, M = { class: "tw-flex tw-gap-1.5" }, D = { key: 1 }, I = { class: "tw-flex tw-gap-1.5" };
-function O(w, o, l, t, p, y) {
-  const n = _("kv-material-icon");
-  return l.visible ? (r(), d("div", {
+}, ee = { class: "tw-flex tw-gap-1.5" }, te = { key: 1 }, oe = { class: "tw-flex tw-gap-1.5" };
+function ne(c, l, n, e, E, L) {
+  const r = I("kv-material-icon");
+  return n.visible ? (v(), m("div", {
     key: 0,
-    class: f(["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
+    class: y(["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": !e.open,
+      "tw-bg-opacity-low": e.open
     }]),
-    onClick: o[3] || (o[3] = j((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
+    onClick: l[3] || (l[3] = q((...i) => e.closeSideSheet && e.closeSideSheet(...i), ["self"]))
   }, [
     s("div", {
-      class: f(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto", {
-        "tw-w-0 tw-delay-200 tw-opacity-0": !t.open,
-        "lg:tw-w-1/2 tw-w-full tw-opacity-full": t.open,
-        "tw-h-full": w.$slots.controls
+      class: y(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto", {
+        "tw-w-0 tw-delay-200 tw-opacity-0": !e.open,
+        "lg:tw-w-1/2 tw-w-full tw-opacity-full": e.open,
+        "tw-h-full": c.$slots.controls
       }])
     }, [
       s("div", {
-        class: "tw-relative tw-h-full",
-        style: V(t.modalStyles)
+        class: "tw-flex tw-flex-col tw-h-full",
+        style: O(e.modalStyles)
       }, [
         s("div", {
-          class: f(["tw-flex tw-justify-between tw-transition-opacity tw-duration-500 tw-delay-200 tw-px-3 tw-py-2 tw-border-b tw-border-tertiary", {
-            "tw-opacity-0": !t.open,
-            "tw-opacity-full": t.open
+          ref: "headlineRef",
+          class: y(["tw-flex tw-justify-between tw-transition-opacity tw-duration-500 tw-delay-200 tw-px-3 tw-py-2 tw-border-tertiary", {
+            "tw-opacity-0": !e.open,
+            "tw-opacity-full": e.open,
+            "tw-border-b": n.showHeadlineBorder
           }])
         }, [
-          s("div", M, [
-            l.showBackButton ? (r(), d("button", {
+          s("div", ee, [
+            n.showBackButton ? (v(), m("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: o[0] || (o[0] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
+              onClick: l[0] || (l[0] = (...i) => e.closeSideSheet && e.closeSideSheet(...i))
             }, [
-              v(n, {
+              C(r, {
                 class: "tw-w-3 tw-h-3",
-                icon: t.mdiArrowLeft
+                icon: e.mdiArrowLeft
               }, null, 8, ["icon"])
-            ])) : u("", !0),
-            l.headline ? (r(), d("h2", D, z(l.headline), 1)) : u("", !0)
+            ])) : g("", !0),
+            n.headline ? (v(), m("h2", te, J(n.headline), 1)) : g("", !0)
           ]),
-          s("div", I, [
-            l.showGoToLink ? (r(), d("button", {
+          s("div", oe, [
+            n.showGoToLink ? (v(), m("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: o[1] || (o[1] = (...i) => t.goToLink && t.goToLink(...i))
+              onClick: l[1] || (l[1] = (...i) => e.goToLink && e.goToLink(...i))
             }, [
-              v(n, {
+              C(r, {
                 class: "tw-w-3 tw-h-3",
-                icon: t.mdiExportVariant
+                icon: e.mdiExportVariant
               }, null, 8, ["icon"])
-            ])) : u("", !0),
+            ])) : g("", !0),
             s("button", {
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: o[2] || (o[2] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
+              onClick: l[2] || (l[2] = (...i) => e.closeSideSheet && e.closeSideSheet(...i))
             }, [
-              v(n, {
+              C(r, {
                 class: "tw-w-3 tw-h-3",
-                icon: t.mdiClose
+                icon: e.mdiClose
               }, null, 8, ["icon"])
             ])
           ])
         ], 2),
         s("div", {
-          class: f(["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
-          }])
+          class: "tw-overflow-y-auto tw-overscroll-y-contain",
+          style: O({ height: e.contentHeight + "px" })
         }, [
-          C(w.$slots, "default")
-        ], 2),
-        w.$slots.controls ? (r(), d("div", {
+          s("div", {
+            class: y(["tw-p-2 tw-transition-opacity tw-duration-500 tw-delay-200", {
+              "tw-opacity-0": !e.open,
+              "tw-opacity-full": e.open
+            }])
+          }, [
+            V(c.$slots, "default")
+          ], 2)
+        ], 4),
+        c.$slots.controls ? (v(), m("div", {
           key: 0,
           ref: "controlsRef",
-          class: f(["tw-absolute tw-border-t tw-border-tertiary tw-w-full tw-bottom-0 tw-bg-white", {
-            "tw-opacity-0": !t.open,
-            "tw-opacity-full": t.open
-          }])
+          class: y(["tw-absolute tw-bottom-0 tw-w-full tw-border-t tw-border-tertiary tw-bg-white", {
+            "tw-opacity-0": !e.open,
+            "tw-opacity-full": e.open
+          }]),
+          style: { "z-index": "999" }
         }, [
-          C(w.$slots, "controls")
-        ], 2)) : u("", !0)
+          V(c.$slots, "controls")
+        ], 2)) : g("", !0)
       ], 4)
     ], 2)
-  ], 2)) : u("", !0);
+  ], 2)) : g("", !0);
 }
-const P = /* @__PURE__ */ A(G, [["render", O]]);
+const ce = /* @__PURE__ */ Z($, [["render", ne]]);
 export {
-  P as default
+  ce as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.18.0",
+  "version": "6.19.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -111,5 +111,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "9251c08f08f522b6661854385895a9957144d5a7"
+  "gitHead": "deed239da39c2b792f12ce798a1311b68e45aff0"
 }