@kiva/kv-components 5.0.0 → 5.1.0

package/dist/vue/KvSideSheet.js

@@ -1,10 +1,10 @@
-import { toRefs as C, ref as r, watch as T, resolveComponent as L, openBlock as p, createElementBlock as g, normalizeClass as s, withModifiers as E, createElementVNode as c, normalizeStyle as B, createVNode as k, createCommentVNode as S, renderSlot as _ } from "vue";
-import { mdiClose as z, mdiLaunch as F } from "@mdi/js";
-import N from "./KvMaterialIcon.js";
-import V from "../_virtual/_plugin-vue_export-helper.js";
-const j = {
+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 V from "./KvMaterialIcon.js";
+import j from "../_virtual/_plugin-vue_export-helper.js";
+const G = {
   components: {
-    KvMaterialIcon: N
+    KvMaterialIcon: V
   },
   props: {
     /**
@@ -46,42 +46,43 @@ const j = {
   emits: [
     "side-sheet-closed"
   ],
-  setup(w, { emit: o }) {
+  setup(w, { emit: e }) {
     const {
       visible: n,
       kvTrackFunction: t,
       trackEventCategory: f,
-      animationSourceElement: d
-    } = C(w), l = r(!1), i = r({}), a = r({}), b = () => {
-      l.value = !1, t.value(f.value, "click", "side-sheet-closed"), d.value && (a.value = {
+      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 = {
         ...i.value,
         transition: "all 0.5s ease-in-out"
       }), setTimeout(() => {
-        o("side-sheet-closed");
+        e("side-sheet-closed");
       }, "700");
-    }, x = () => {
-      o("go-to-link");
+    }, C = () => {
+      e("go-to-link");
     };
-    return T(n, () => {
-      var u;
+    return L(n, () => {
+      var s;
       if (n.value) {
         setTimeout(() => {
-          l.value = !0;
+          l.value = !0, v();
         }, 100);
-        const e = (u = d.value) == null ? void 0 : u.getBoundingClientRect(), m = (e == null ? void 0 : e.top) ?? 0, v = (e == null ? void 0 : e.left) ?? 0, h = (e == null ? void 0 : e.width) ?? 0, y = (e == null ? void 0 : e.height) ?? 0;
-        m || v || h || y ? (i.value = {
+        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 = {
           position: "fixed",
           top: `${m}px`,
-          left: `${v}px`,
-          width: `${h}px`,
-          height: `${y}px`
+          width: `${y}px`,
+          height: `${h}px`
         }, a.value = {
           ...i.value,
           transition: "none"
         }, setTimeout(() => {
           a.value = {
             top: "0",
-            left: "0",
             width: "100vw",
             height: "100%",
             transition: "all 0.5s ease-in-out"
@@ -89,41 +90,41 @@ const j = {
         }, 10)) : a.value = {};
       }
     }), {
-      mdiClose: z,
-      mdiLaunch: F,
+      mdiClose: F,
+      mdiLaunch: N,
       open: l,
       closeSideSheet: b,
-      goToLink: x,
+      goToLink: C,
       modalStyles: a
     };
   }
 };
-function G(w, o, n, t, f, d) {
-  const l = L("kv-material-icon");
+function K(w, e, n, t, f, r) {
+  const l = B("kv-material-icon");
   return n.visible ? (p(), g("div", {
     key: 0,
-    class: s(["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: 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: o[2] || (o[2] = E((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
+    onClick: e[2] || (e[2] = E((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
   }, [
-    c("div", {
-      class: s(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto tw-p-2", {
+    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: B(t.modalStyles)
+      style: _(t.modalStyles)
     }, [
-      c("div", {
-        class: s(["tw-flex tw-justify-between tw-transition-opacity tw-duration-500 tw-delay-200", {
+      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
         }])
       }, [
-        c("button", {
+        d("button", {
           class: "hover:tw-text-action-highlight",
-          onClick: o[0] || (o[0] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
+          onClick: e[0] || (e[0] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
         }, [
           k(l, {
             class: "tw-w-3 tw-h-3",
@@ -133,7 +134,7 @@ function G(w, o, n, t, f, d) {
         n.showGoToLink ? (p(), g("button", {
           key: 0,
           class: "hover:tw-text-action-highlight",
-          onClick: o[1] || (o[1] = (...i) => t.goToLink && t.goToLink(...i))
+          onClick: e[1] || (e[1] = (...i) => t.goToLink && t.goToLink(...i))
         }, [
           k(l, {
             class: "tw-w-3 tw-h-3",
@@ -141,18 +142,18 @@ function G(w, o, n, t, f, d) {
           }, null, 8, ["icon"])
         ])) : S("", !0)
       ], 2),
-      c("div", {
-        class: s(["tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200 tw-overscroll-y-contain", {
+      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
         }])
       }, [
-        _(w.$slots, "default")
+        z(w.$slots, "default")
       ], 2)
     ], 6)
   ], 2)) : S("", !0);
 }
-const O = /* @__PURE__ */ V(j, [["render", G]]);
+const q = /* @__PURE__ */ j(G, [["render", K]]);
 export {
-  O as default
+  q as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -89,7 +89,7 @@
     "postbuild": "mkdir -p ../../dist/kvui && mv -v dist/kvui/* ../../dist/kvui/"
   },
   "peerDependencies": {
-    "@kiva/kv-tokens": "2.x",
+    "@kiva/kv-tokens": "3.x",
     "@mdi/js": "7.x",
     "@vueuse/integrations": "9.x",
     "change-case": "4.x",
@@ -106,5 +106,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "a49e957d5d021aa4adec079b12f8a06b2b2c7b63"
+  "gitHead": "7030eb3308012c119d53219fbb732bd848bd29dd"
 }