@kiva/kv-components 6.16.0 → 6.16.1

package/dist/vue/KvSideSheet.js

@@ -1,10 +1,10 @@
-import { toRefs as T, ref as f, watch as E, resolveComponent as B, openBlock as g, createElementBlock as S, normalizeClass as c, withModifiers as _, createElementVNode as d, normalizeStyle as z, createVNode as b, createCommentVNode as C, renderSlot as F } from "vue";
-import { mdiClose as K, mdiLaunch as N } from "@mdi/js";
-import V from "./KvMaterialIcon.js";
-import j from "../_virtual/_plugin-vue_export-helper.js";
+import { toRefs as T, ref as h, watch as B, resolveComponent as _, openBlock as d, createElementBlock as f, normalizeClass as r, withModifiers as j, createElementVNode as a, normalizeStyle as V, createVNode as v, toDisplayString as z, createCommentVNode as u, 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 = {
   components: {
-    KvMaterialIcon: V
+    KvMaterialIcon: R
   },
   props: {
     /**
@@ -41,6 +41,13 @@ const G = {
     animationSourceElement: {
       type: Object,
       default: () => ({})
+    },
+    /**
+     * The headline of the side sheet
+     */
+    headline: {
+      type: String,
+      default: ""
     }
   },
   emits: [
@@ -48,116 +55,146 @@ const G = {
   ],
   setup(w, { emit: o }) {
     const {
-      visible: a,
+      visible: s,
       kvTrackFunction: t,
-      trackEventCategory: m,
-      animationSourceElement: r
-    } = T(w), n = f(!1), i = f({}), s = f({});
-    let u = null;
-    const v = () => {
-      const l = "tw-overflow-hidden";
-      n.value ? document.body.classList.add(l) : document.body.classList.remove(l);
-    }, y = () => {
-      n.value = !1, v(), t.value(m.value, "click", "side-sheet-closed"), r.value && (s.value = {
+      trackEventCategory: p,
+      animationSourceElement: y
+    } = T(w), l = h(!1), i = h({}), c = h({});
+    let m = null;
+    const g = () => {
+      const n = "tw-overflow-hidden";
+      l.value ? document.body.classList.add(n) : document.body.classList.remove(n);
+    }, k = () => {
+      l.value = !1, g(), t.value(p.value, "click", "side-sheet-closed"), y.value && (c.value = {
         ...i.value,
         transition: "all 0.5s ease-in-out"
       }), setTimeout(() => {
         o("side-sheet-closed");
-      }, "700"), document.removeEventListener("keyup", u);
-    }, x = () => {
+      }, "700"), document.removeEventListener("keyup", m);
+    }, E = () => {
       o("go-to-link");
     };
-    return u = (l) => {
-      l && l.key === "Escape" && y();
-    }, E(a, () => {
-      var l;
-      if (a.value) {
-        document.addEventListener("keyup", u), setTimeout(() => {
-          n.value = !0, v();
+    return m = (n) => {
+      n && n.key === "Escape" && k();
+    }, B(s, () => {
+      var n;
+      if (s.value) {
+        document.addEventListener("keyup", m), setTimeout(() => {
+          l.value = !0, g();
         }, 100);
-        const e = (l = r.value) == null ? void 0 : l.getBoundingClientRect(), h = (e == null ? void 0 : e.top) ?? 0, L = (e == null ? void 0 : e.left) ?? 0, p = (e == null ? void 0 : e.width) ?? 0, k = (e == null ? void 0 : e.height) ?? 0;
-        h || L || p || k ? (i.value = {
+        const e = (n = y.value) == null ? void 0 : n.getBoundingClientRect(), S = (e == null ? void 0 : e.top) ?? 0, L = (e == null ? void 0 : e.left) ?? 0, b = (e == null ? void 0 : e.width) ?? 0, x = (e == null ? void 0 : e.height) ?? 0;
+        S || L || b || x ? (i.value = {
           position: "fixed",
-          top: `${h}px`,
-          width: `${p}px`,
-          height: `${k}px`
-        }, s.value = {
+          top: `${S}px`,
+          width: `${b}px`,
+          height: `${x}px`
+        }, c.value = {
           ...i.value,
           transition: "none"
         }, setTimeout(() => {
-          s.value = {
+          c.value = {
             top: "0",
             width: "100%",
             height: "100%",
             transition: "all 0.5s ease-in-out"
           };
-        }, 10)) : s.value = {};
+        }, 10)) : c.value = {};
       }
     }), {
-      mdiClose: K,
-      mdiLaunch: N,
-      open: n,
-      closeSideSheet: y,
-      goToLink: x,
-      modalStyles: s
+      mdiClose: F,
+      mdiArrowLeft: K,
+      mdiExportVariant: N,
+      open: l,
+      closeSideSheet: k,
+      goToLink: E,
+      modalStyles: c
     };
   }
-};
-function M(w, o, a, t, m, r) {
-  const n = B("kv-material-icon");
-  return a.visible ? (g(), S("div", {
+}, M = { class: "tw-flex tw-items-cente tw-gap-1.5" }, D = { key: 0 }, I = { class: "tw-flex tw-items-cente tw-gap-1.5" };
+function O(w, o, s, t, p, y) {
+  const l = _("kv-material-icon");
+  return s.visible ? (d(), f("div", {
     key: 0,
-    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", {
+    class: r(["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] = _((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
+    onClick: o[3] || (o[3] = j((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
   }, [
-    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", {
+    a("div", {
+      class: r(["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
-      }]),
-      style: z(t.modalStyles)
+        "lg:tw-w-1/2 tw-w-full tw-opacity-full": t.open,
+        "tw-h-full": w.$slots.controls
+      }])
     }, [
-      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
-        }])
+      a("div", {
+        class: "tw-relative tw-h-full",
+        style: V(t.modalStyles)
       }, [
-        d("button", {
-          class: "hover:tw-text-action-highlight",
-          onClick: o[0] || (o[0] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
+        a("div", {
+          class: r(["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
+          }])
         }, [
-          b(n, {
-            class: "tw-w-3 tw-h-3",
-            icon: t.mdiClose
-          }, null, 8, ["icon"])
-        ]),
-        a.showGoToLink ? (g(), S("button", {
+          a("div", M, [
+            a("button", {
+              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))
+            }, [
+              v(l, {
+                class: "tw-w-3 tw-h-3",
+                icon: t.mdiArrowLeft
+              }, null, 8, ["icon"])
+            ]),
+            s.headline ? (d(), f("h2", D, z(s.headline), 1)) : u("", !0)
+          ]),
+          a("div", I, [
+            s.showGoToLink ? (d(), f("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))
+            }, [
+              v(l, {
+                class: "tw-w-3 tw-h-3",
+                icon: t.mdiExportVariant
+              }, null, 8, ["icon"])
+            ])) : u("", !0),
+            a("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))
+            }, [
+              v(l, {
+                class: "tw-w-3 tw-h-3",
+                icon: t.mdiClose
+              }, null, 8, ["icon"])
+            ])
+          ])
+        ], 2),
+        a("div", {
+          class: r(["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
+          }])
+        }, [
+          C(w.$slots, "default")
+        ], 2),
+        w.$slots.controls ? (d(), f("div", {
           key: 0,
-          class: "hover:tw-text-action-highlight",
-          onClick: o[1] || (o[1] = (...i) => t.goToLink && t.goToLink(...i))
+          ref: "controlsRef",
+          class: r(["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
+          }])
         }, [
-          b(n, {
-            class: "tw-w-3 tw-h-3",
-            icon: t.mdiLaunch
-          }, null, 8, ["icon"])
-        ])) : C("", !0)
-      ], 2),
-      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
-        }])
-      }, [
-        F(w.$slots, "default")
-      ], 2)
-    ], 6)
-  ], 2)) : C("", !0);
+          C(w.$slots, "controls")
+        ], 2)) : u("", !0)
+      ], 4)
+    ], 2)
+  ], 2)) : u("", !0);
 }
-const q = /* @__PURE__ */ j(G, [["render", M]]);
+const P = /* @__PURE__ */ A(G, [["render", O]]);
 export {
-  q as default
+  P as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.16.0",
+  "version": "6.16.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -111,5 +111,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "6b563c82fd8270b4df50c76da70eed7f2c82b908"
+  "gitHead": "32f1282d50bf96e83e8c71163104588a5c1252f3"
 }