@kiva/kv-components 5.2.2 → 5.3.0

package/dist/vue/KvSideSheet.js

@@ -1,5 +1,5 @@
-import { toRefs as T, ref as u, watch as L, resolveComponent as B, openBlock as p, createElementBlock as g, normalizeClass as c, withModifiers as E, createElementVNode as d, normalizeStyle as _, createVNode as k, createCommentVNode as S, renderSlot as z } from "vue";
-import { mdiClose as F, mdiLaunch as N } from "@mdi/js";
+import { toRefs as T, ref as v, 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";
 const G = {
@@ -46,75 +46,79 @@ const G = {
   emits: [
     "side-sheet-closed"
   ],
-  setup(w, { emit: e }) {
+  setup(w, { emit: o }) {
     const {
-      visible: n,
+      visible: a,
       kvTrackFunction: t,
       trackEventCategory: f,
       animationSourceElement: r
-    } = T(w), l = u(!1), i = u({}), a = u({}), v = () => {
-      const s = "tw-overflow-hidden";
-      l.value ? document.body.classList.add(s) : document.body.classList.remove(s);
-    }, b = () => {
-      l.value = !1, v(), t.value(f.value, "click", "side-sheet-closed"), r.value && (a.value = {
+    } = T(w), n = v(!1), i = v({}), s = v({});
+    let u = null;
+    const m = () => {
+      const l = "tw-overflow-hidden";
+      n.value ? document.body.classList.add(l) : document.body.classList.remove(l);
+    }, y = () => {
+      n.value = !1, m(), t.value(f.value, "click", "side-sheet-closed"), r.value && (s.value = {
         ...i.value,
         transition: "all 0.5s ease-in-out"
       }), setTimeout(() => {
-        e("side-sheet-closed");
-      }, "700");
-    }, C = () => {
-      e("go-to-link");
+        o("side-sheet-closed");
+      }, "700"), document.removeEventListener("keyup", u);
+    }, x = () => {
+      o("go-to-link");
     };
-    return L(n, () => {
-      var s;
-      if (n.value) {
-        setTimeout(() => {
-          l.value = !0, v();
+    return u = (l) => {
+      l && l.key === "Escape" && y();
+    }, E(a, () => {
+      var l;
+      if (a.value) {
+        document.addEventListener("keyup", u), setTimeout(() => {
+          n.value = !0, m();
         }, 100);
-        const o = (s = r.value) == null ? void 0 : s.getBoundingClientRect(), m = (o == null ? void 0 : o.top) ?? 0, x = (o == null ? void 0 : o.left) ?? 0, y = (o == null ? void 0 : o.width) ?? 0, h = (o == null ? void 0 : o.height) ?? 0;
-        m || x || y || h ? (i.value = {
+        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 = {
           position: "fixed",
-          top: `${m}px`,
-          width: `${y}px`,
-          height: `${h}px`
-        }, a.value = {
+          top: `${h}px`,
+          width: `${p}px`,
+          height: `${k}px`
+        }, s.value = {
           ...i.value,
           transition: "none"
         }, setTimeout(() => {
-          a.value = {
+          s.value = {
             top: "0",
             width: "100vw",
             height: "100%",
             transition: "all 0.5s ease-in-out"
           };
-        }, 10)) : a.value = {};
+        }, 10)) : s.value = {};
       }
     }), {
-      mdiClose: F,
+      mdiClose: K,
       mdiLaunch: N,
-      open: l,
-      closeSideSheet: b,
-      goToLink: C,
-      modalStyles: a
+      open: n,
+      closeSideSheet: y,
+      goToLink: x,
+      modalStyles: s
     };
   }
 };
-function K(w, e, n, t, f, r) {
-  const l = B("kv-material-icon");
-  return n.visible ? (p(), g("div", {
+function M(w, o, a, t, f, r) {
+  const n = B("kv-material-icon");
+  return a.visible ? (g(), S("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", {
       "tw-bg-opacity-0 tw-delay-300": !t.open,
       "tw-bg-opacity-low": t.open
     }]),
-    onClick: e[2] || (e[2] = E((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
+    onClick: o[2] || (o[2] = _((...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", {
         "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: _(t.modalStyles)
+      style: z(t.modalStyles)
     }, [
       d("div", {
         class: c(["tw-flex tw-justify-between tw-transition-opacity tw-duration-500 tw-delay-200", {
@@ -124,23 +128,23 @@ function K(w, e, n, t, f, r) {
       }, [
         d("button", {
           class: "hover:tw-text-action-highlight",
-          onClick: e[0] || (e[0] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
+          onClick: o[0] || (o[0] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
         }, [
-          k(l, {
+          b(n, {
             class: "tw-w-3 tw-h-3",
             icon: t.mdiClose
           }, null, 8, ["icon"])
         ]),
-        n.showGoToLink ? (p(), g("button", {
+        a.showGoToLink ? (g(), S("button", {
           key: 0,
           class: "hover:tw-text-action-highlight",
-          onClick: e[1] || (e[1] = (...i) => t.goToLink && t.goToLink(...i))
+          onClick: o[1] || (o[1] = (...i) => t.goToLink && t.goToLink(...i))
         }, [
-          k(l, {
+          b(n, {
             class: "tw-w-3 tw-h-3",
             icon: t.mdiLaunch
           }, null, 8, ["icon"])
-        ])) : S("", !0)
+        ])) : 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", {
@@ -148,12 +152,12 @@ function K(w, e, n, t, f, r) {
           "tw-opacity-full": t.open
         }])
       }, [
-        z(w.$slots, "default")
+        F(w.$slots, "default")
       ], 2)
     ], 6)
-  ], 2)) : S("", !0);
+  ], 2)) : C("", !0);
 }
-const q = /* @__PURE__ */ j(G, [["render", K]]);
+const q = /* @__PURE__ */ j(G, [["render", M]]);
 export {
   q as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "5.2.2",
+  "version": "5.3.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -106,5 +106,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "3e9d271029c51e2da39556b26570a333930801fe"
+  "gitHead": "0ae6ed1e95e7c01158eb795403c22fa2dba68c51"
 }