@kiva/kv-components 6.17.0 → 6.19.0

package/dist/vue/KvSideSheet.js

@@ -1,4 +1,4 @@
-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 { 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";
@@ -14,6 +14,13 @@ const G = {
       type: Boolean,
       default: !1
     },
+    /**
+     * Show the go to link button
+     * */
+    showBackButton: {
+      type: Boolean,
+      default: !1
+    },
     /**
      * Show the go to link button
      * */
@@ -55,35 +62,35 @@ const G = {
   ],
   setup(w, { emit: o }) {
     const {
-      visible: s,
+      visible: l,
       kvTrackFunction: t,
       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 = {
+    } = 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,
         transition: "all 0.5s ease-in-out"
       }), setTimeout(() => {
         o("side-sheet-closed");
-      }, "700"), document.removeEventListener("keyup", m);
-    }, E = () => {
+      }, "700"), document.removeEventListener("keyup", h);
+    }, B = () => {
       o("go-to-link");
     };
-    return m = (n) => {
-      n && n.key === "Escape" && k();
-    }, B(s, () => {
-      var n;
-      if (s.value) {
-        document.addEventListener("keyup", m), setTimeout(() => {
-          l.value = !0, g();
+    return h = (a) => {
+      a && a.key === "Escape" && g();
+    }, T(l, () => {
+      var a;
+      if (l.value) {
+        document.addEventListener("keyup", h), setTimeout(() => {
+          n.value = !0, k();
         }, 100);
-        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 = {
+        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 = {
           position: "fixed",
           top: `${S}px`,
           width: `${b}px`,
@@ -104,86 +111,87 @@ const G = {
       mdiClose: F,
       mdiArrowLeft: K,
       mdiExportVariant: N,
-      open: l,
-      closeSideSheet: k,
-      goToLink: E,
+      open: n,
+      closeSideSheet: g,
+      goToLink: B,
       modalStyles: c
     };
   }
-}, 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", {
+}, 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", {
     key: 0,
-    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", {
+    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
     }]),
     onClick: o[3] || (o[3] = j((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
   }, [
-    a("div", {
-      class: r(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto", {
+    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
       }])
     }, [
-      a("div", {
+      s("div", {
         class: "tw-relative tw-h-full",
         style: V(t.modalStyles)
       }, [
-        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", {
+        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
           }])
         }, [
-          a("div", M, [
-            a("button", {
+          s("div", M, [
+            l.showBackButton ? (r(), d("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))
             }, [
-              v(l, {
+              v(n, {
                 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)
+            ])) : u("", !0),
+            l.headline ? (r(), d("h2", D, z(l.headline), 1)) : u("", !0)
           ]),
-          a("div", I, [
-            s.showGoToLink ? (d(), f("button", {
+          s("div", I, [
+            l.showGoToLink ? (r(), d("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, {
+              v(n, {
                 class: "tw-w-3 tw-h-3",
                 icon: t.mdiExportVariant
               }, null, 8, ["icon"])
             ])) : u("", !0),
-            a("button", {
+            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))
             }, [
-              v(l, {
+              v(n, {
                 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", {
+        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
           }])
         }, [
           C(w.$slots, "default")
         ], 2),
-        w.$slots.controls ? (d(), f("div", {
+        w.$slots.controls ? (r(), d("div", {
           key: 0,
           ref: "controlsRef",
-          class: r(["tw-absolute tw-border-t tw-border-tertiary tw-w-full tw-bottom-0 tw-bg-white", {
+          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
           }])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.17.0",
+  "version": "6.19.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -111,5 +111,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "a1edf8cf5d70ab233c93d312548a73475308a33a"
+  "gitHead": "25df6cf6f667f7505721e33dee5a1f09d30b7883"
 }