@kiva/kv-components 6.43.0 → 6.44.0

package/dist/vue/KvLightbox.js

@@ -1,4 +1,4 @@
-import { toRefs as L, ref as u, nextTick as y, computed as E, watch as K, onMounted as M, onBeforeUnmount as N, resolveComponent as P, openBlock as b, createBlock as R, Transition as V, withCtx as j, withDirectives as q, createElementVNode as o, withModifiers as g, normalizeClass as p, renderSlot as k, toDisplayString as z, createElementBlock as C, createVNode as D, createCommentVNode as S, vShow as I } from "vue";
+import { toRefs as L, ref as u, nextTick as C, computed as E, watch as K, onMounted as M, onBeforeUnmount as N, resolveComponent as P, openBlock as b, createBlock as R, Transition as V, withCtx as j, withDirectives as q, createElementVNode as i, withModifiers as x, createElementBlock as g, createCommentVNode as y, normalizeClass as S, renderSlot as p, toDisplayString as z, createVNode as D, vShow as I } from "vue";
 import { mdiClose as O } from "@mdi/js";
 import { useFocusTrap as T } from "@vueuse/integrations/useFocusTrap";
 import { hideOthers as U } from "../vendor/aria-hidden/dist/es2015/index.js";
@@ -11,6 +11,13 @@ const X = {
     KvMaterialIcon: Q
   },
   props: {
+    /**
+     * Whether to apply a blur to the background behind the lightbox
+     */
+    blurBackground: {
+      type: Boolean,
+      default: !1
+    },
     /**
      * Whether the dialog is open or not
      * */
@@ -25,8 +32,8 @@ const X = {
     variant: {
       type: String,
       default: "lightbox",
-      validator(i) {
-        return ["lightbox", "alert"].includes(i);
+      validator(n) {
+        return ["lightbox", "alert"].includes(n);
       }
     },
     /**
@@ -49,18 +56,18 @@ const X = {
   emits: [
     "lightbox-closed"
   ],
-  setup(i, { emit: e }) {
+  setup(n, { emit: e }) {
     const {
       visible: t,
-      variant: a,
-      preventClose: h
-    } = L(i), s = u(null), n = u(null), c = u(null), w = u(null), v = u(null);
-    y(() => {
+      variant: l,
+      preventClose: k
+    } = L(n), c = u(null), a = u(null), r = u(null), w = u(null), v = u(null);
+    C(() => {
       const {
-        activate: l,
-        deactivate: r
+        activate: o,
+        deactivate: s
       } = T([
-        s.value,
+        c.value,
         // This lightbox
         '[role="alert"]'
         // Any open toasts/alerts on the page
@@ -68,41 +75,41 @@ const X = {
         allowOutsideClick: !0
         // allow clicking outside the lightbox to close it
       });
-      w.value = l, v.value = r;
+      w.value = o, v.value = s;
     });
     let m = null, f = null;
-    const _ = E(() => a.value === "alert" ? "alertdialog" : "dialog"), d = (l = "") => {
-      var r;
-      s.value && n.value && ((r = v.value) == null || r.call(v), n.value.scrollTop = 0, H(n.value)), A(), m && (m(), m = null), document.removeEventListener("keyup", f), e("lightbox-closed", { type: l });
+    const B = E(() => l.value === "alert" ? "alertdialog" : "dialog"), d = (o = "") => {
+      var s;
+      c.value && a.value && ((s = v.value) == null || s.call(v), a.value.scrollTop = 0, H(a.value)), A(), m && (m(), m = null), document.removeEventListener("keyup", f), e("lightbox-closed", { type: o });
     };
-    f = (l) => {
-      l && l.key === "Escape" && !h.value && d();
+    f = (o) => {
+      o && o.key === "Escape" && !k.value && d();
     };
-    const B = () => {
-      h.value || d("background-click");
-    }, x = () => {
-      t.value && (document.addEventListener("keyup", f), y(() => {
-        var l;
-        if (s.value && n.value && ((l = w.value) == null || l.call(w), m = U(s.value), J(n.value)), G(), a.value === "alert") {
-          const r = c.value.querySelector("button");
-          r && r.focus();
+    const _ = () => {
+      k.value || d("background-click");
+    }, h = () => {
+      t.value && (document.addEventListener("keyup", f), C(() => {
+        var o;
+        if (c.value && a.value && ((o = w.value) == null || o.call(w), m = U(c.value), J(a.value)), G(), l.value === "alert") {
+          const s = r.value.querySelector("button");
+          s && s.focus();
         }
       }));
     };
     return K(t, () => {
-      t.value ? x() : d();
+      t.value ? h() : d();
     }), M(() => {
-      t.value && x();
+      t.value && h();
     }), N(() => d()), {
       mdiClose: O,
-      role: _,
-      kvLightbox: s,
-      kvLightboxBody: n,
+      role: B,
+      kvLightbox: c,
+      kvLightboxBody: a,
       onKeyUp: f,
-      onScreenClick: B,
+      onScreenClick: _,
       hide: d,
-      show: x,
-      controlsRef: c
+      show: h,
+      controlsRef: r
     };
   }
 }, Y = ["aria-label", "aria-describedby", "role"], Z = { class: "tw-flex tw-p-2.5 md:tw-px-4 md:tw-pt-4 md:tw-pb-3.5" }, F = { class: "tw-flex-grow" }, $ = { class: "tw-text-h3 tw-flex-1" }, tt = {
@@ -114,8 +121,8 @@ const X = {
   ref: "controlsRef",
   class: "tw-flex-shrink-0 tw-flex tw-justify-end tw-gap-x-2.5 tw-p-2.5 md:tw-px-4 md:tw-pb-4 md:tw-pt-1"
 };
-function lt(i, e, t, a, h, s) {
-  const n = P("kv-material-icon");
+function lt(n, e, t, l, k, c) {
+  const a = P("kv-material-icon");
   return b(), R(V, {
     "enter-active-class": "tw-transition-opacity tw-duration-300",
     "leave-active-class": "tw-transition-opacity tw-duration-300",
@@ -125,22 +132,27 @@ function lt(i, e, t, a, h, s) {
     "leave-to-class": "tw-opacity-0"
   }, {
     default: j(() => [
-      q(o("div", {
+      q(i("div", {
         class: "tw-z-modal tw-fixed tw-inset-0 tw-bg-black tw-bg-opacity-[75%]",
-        onClick: e[2] || (e[2] = g((...c) => a.onScreenClick && a.onScreenClick(...c), ["stop", "prevent"]))
+        onClick: e[3] || (e[3] = x((...r) => l.onScreenClick && l.onScreenClick(...r), ["stop", "prevent"]))
       }, [
-        o("div", null, [
-          o("div", {
-            class: p(["tw-flex tw-absolute tw-inset-0", {
+        i("div", null, [
+          t.blurBackground ? (b(), g("div", {
+            key: 0,
+            class: "tw-fixed tw-inset-0 tw-w-full tw-h-full tw-backdrop-blur-sm",
+            onClick: e[0] || (e[0] = x((...r) => l.onScreenClick && l.onScreenClick(...r), ["stop", "prevent"]))
+          })) : y("", !0),
+          i("div", {
+            class: S(["tw-flex tw-absolute tw-inset-0", {
               "md:tw-px-2": t.variant === "lightbox",
               "tw-px-2": t.variant === "alert"
             }])
           }, [
-            o("div", {
+            i("div", {
               ref: "kvLightbox",
               tabindex: "-1",
               "data-test": "kv-lightbox",
-              class: p(["tw-bg-primary tw-flex tw-flex-col tw-mx-auto md:tw-my-auto", {
+              class: S(["tw-bg-primary tw-flex tw-flex-col tw-mx-auto md:tw-my-auto", {
                 "tw-w-full md:tw-w-auto": t.variant === "lightbox",
                 "tw-mt-auto md:tw-my-auto": t.variant === "lightbox",
                 "tw-min-h-half-screen md:tw-min-h-0": t.variant === "lightbox",
@@ -151,34 +163,34 @@ function lt(i, e, t, a, h, s) {
               "aria-modal": "true",
               "aria-label": t.title ? t.title : null,
               "aria-describedby": t.variant === "alert" ? "kvLightboxBody" : null,
-              role: a.role,
-              onClick: e[1] || (e[1] = g(() => {
+              role: l.role,
+              onClick: e[2] || (e[2] = x(() => {
               }, ["stop"]))
             }, [
-              o("div", Z, [
-                o("div", F, [
-                  k(i.$slots, "header", {}, () => [
-                    o("h2", $, z(t.title), 1)
+              i("div", Z, [
+                i("div", F, [
+                  p(n.$slots, "header", {}, () => [
+                    i("h2", $, z(t.title), 1)
                   ])
                 ]),
-                t.preventClose ? S("", !0) : (b(), C("button", {
+                t.preventClose ? y("", !0) : (b(), g("button", {
                   key: 0,
                   class: "tw-grid tw-content-center tw-justify-center tw-ml-auto tw-w-6 tw-h-6 tw--m-2 hover:tw-text-action-highlight",
-                  onClick: e[0] || (e[0] = g((c) => a.hide("close-x"), ["stop"]))
+                  onClick: e[1] || (e[1] = x((r) => l.hide("close-x"), ["stop"]))
                 }, [
-                  D(n, {
+                  D(a, {
                     class: "tw-w-3 tw-h-3",
-                    icon: a.mdiClose
+                    icon: l.mdiClose
                   }, null, 8, ["icon"]),
-                  e[3] || (e[3] = o("span", { class: "tw-sr-only" }, "Close", -1))
+                  e[4] || (e[4] = i("span", { class: "tw-sr-only" }, "Close", -1))
                 ]))
               ]),
-              o("div", tt, [
-                k(i.$slots, "default")
+              i("div", tt, [
+                p(n.$slots, "default")
               ], 512),
-              i.$slots.controls ? (b(), C("div", et, [
-                k(i.$slots, "controls")
-              ], 512)) : S("", !0)
+              n.$slots.controls ? (b(), g("div", et, [
+                p(n.$slots, "controls")
+              ], 512)) : y("", !0)
             ], 10, Y)
           ], 2)
         ])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.43.0",
+  "version": "6.44.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -114,5 +114,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "c153687be5fd01c127a6c117eb061899d3da5105"
+  "gitHead": "1ef00287b2aff9739d729e4020218247921f931f"
 }