@kiva/kv-components 6.4.1 → 6.5.0

package/dist/vue/KvCartModal.css

@@ -1 +1 @@
-.screen[data-v-b40bef0e]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1400;background-color:#0003}.modal[data-v-b40bef0e]{width:100%;border-bottom-right-radius:.875rem;border-bottom-left-radius:.875rem;--tw-bg-opacity: 1;background-color:rgba(var(--bg-primary),var(--tw-bg-opacity, 1))}@media (min-width: 45.875rem){.modal[data-v-b40bef0e]{position:absolute;right:0}}.modal[data-v-b40bef0e]{max-height:90%}.container[data-v-b40bef0e]{position:absolute;top:0;right:0;bottom:0;left:0}@media (min-width: 45.875rem){.modal[data-v-b40bef0e]{max-width:24.5rem}}
+.screen[data-v-4af12153]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1400;background-color:#0003}.modal[data-v-4af12153]{width:100%;border-bottom-right-radius:.875rem;border-bottom-left-radius:.875rem;--tw-bg-opacity: 1;background-color:rgba(var(--bg-primary),var(--tw-bg-opacity, 1))}@media (min-width: 45.875rem){.modal[data-v-4af12153]{position:absolute;right:0}}.modal[data-v-4af12153]{max-height:90%}.container[data-v-4af12153]{position:absolute;top:0;right:0;bottom:0;left:0}@media (min-width: 45.875rem){.modal[data-v-4af12153]{max-width:24.5rem}}

package/dist/vue/KvCartModal.js

@@ -1,4 +1,4 @@
-import { toRefs as I, ref as w, computed as b, watch as K, onMounted as F, onBeforeUnmount as P, resolveComponent as x, openBlock as k, createBlock as R, Transition as j, withCtx as h, withDirectives as D, createElementVNode as o, withModifiers as C, renderSlot as g, createVNode as y, createElementBlock as S, createCommentVNode as M, createTextVNode as L, toDisplayString as O, vShow as U, nextTick as q } from "vue";
+import { toRefs as I, ref as w, computed as p, watch as K, onMounted as F, onBeforeUnmount as P, resolveComponent as g, openBlock as C, createBlock as R, Transition as j, withCtx as h, withDirectives as D, createElementVNode as o, withModifiers as y, renderSlot as S, createVNode as b, createElementBlock as M, createCommentVNode as T, createTextVNode as L, toDisplayString as B, vShow as U, nextTick as q } from "vue";
 import { mdiClose as z, mdiCheckCircle as G } from "@mdi/js";
 import { useFocusTrap as H } from "@vueuse/integrations/useFocusTrap";
 import { hideOthers as J } from "../vendor/aria-hidden/dist/es2015/index.js";
@@ -35,77 +35,84 @@ const et = {
     basketCount: {
       type: Number,
       default: 0
+    },
+    /**
+     * Category name for the CTA button
+     * */
+    categoryName: {
+      type: String,
+      default: ""
     }
   },
   emits: [
     "cart-modal-closed"
   ],
-  setup(d, { emit: t, slots: i }) {
+  setup(a, { emit: t }) {
     const {
-      visible: e,
-      preventClose: r
-    } = I(d), c = w(null), l = w(null), m = w(null), n = w(), _ = b(() => [
+      visible: l,
+      preventClose: e
+    } = I(a), c = w(null), i = w(null), d = w(null), u = w(), n = p(() => [
       c.value
       // This cart modal
-    ]), B = b(() => !!i.content), {
-      activate: T,
+    ]), x = p(() => !!a.categoryName), N = p(() => x.value ? `Support another ${a.categoryName}` : `View basket (${a.basketCount})`), {
+      activate: _,
       deactivate: E
-    } = H(_, {
+    } = H(n, {
       allowOutsideClick: !0
       // allow clicking outside the cart modal to close it
     });
-    let u = null, v = null;
-    const a = (s = "") => {
-      c.value && l.value && (E(), l.value.scrollTop = 0, X(l.value)), Q(), u && (u(), u = null), document.removeEventListener("keyup", v), t("cart-modal-closed", { type: s });
+    let v = null, m = null;
+    const s = (r = "") => {
+      c.value && i.value && (E(), i.value.scrollTop = 0, X(i.value)), Q(), v && (v(), v = null), document.removeEventListener("keyup", m), t("cart-modal-closed", { type: r });
     };
-    v = (s) => {
-      s && s.key === "Escape" && !r.value && a();
+    m = (r) => {
+      r && r.key === "Escape" && !e.value && s();
     };
     const A = () => {
-      r.value || a("background");
+      e.value || s("background");
     }, f = () => {
-      e.value && (document.addEventListener("keyup", v), q(() => {
-        c.value && l.value && (T(), u = J(c.value), Y(l.value)), W();
+      l.value && (document.addEventListener("keyup", m), q(() => {
+        c.value && i.value && (_(), v = J(c.value), Y(i.value)), W();
       }));
-    }, N = (s) => {
-      a(s);
-    }, p = () => {
-      r.value || (n.value = setTimeout(() => {
+    }, O = (r) => {
+      s(r);
+    }, k = () => {
+      e.value || (u.value = setTimeout(() => {
         t("cart-modal-closed", { type: "time" });
       }, 1e4));
     }, V = () => {
-      r.value || clearTimeout(n.value);
+      e.value || clearTimeout(u.value);
     };
-    return K(e, () => {
-      e.value ? (f(), p()) : a();
+    return K(l, () => {
+      l.value ? (f(), k()) : s();
     }), F(() => {
-      e.value && (f(), p());
-    }), P(() => a()), {
+      l.value && (f(), k());
+    }), P(() => s()), {
       mdiClose: z,
       mdiCheckCircle: G,
-      onKeyUp: v,
+      onKeyUp: m,
       onScreenClick: A,
-      hide: a,
+      hide: s,
       show: f,
-      controlsRef: m,
-      handleClick: N,
+      controlsRef: d,
+      handleClick: O,
       clearAutomaticClose: V,
-      setAutomaticClose: p,
-      showContentSlot: B
+      setAutomaticClose: k,
+      ctaText: N,
+      showCategoryOption: x
     };
   }
 }, ot = { class: "container" }, lt = { class: "tw-flex tw-pt-2 tw-px-2.5" }, nt = { class: "tw-flex tw-flex-grow tw-gap-1 tw-items-center tw-pb-2" }, at = {
-  key: 0,
   id: "kvCartModalBody",
   ref: "kvCartModalBody",
-  class: "tw-flex tw-gap-2 tw-mx-2.5 tw-border-t tw-border-tertiary tw-py-2"
-}, st = {
+  class: "tw-flex tw-gap-2"
+}, it = {
   ref: "controlsRef",
   class: "tw-flex-shrink-0 tw-flex tw-justify-end tw-gap-x-2.5 tw-px-2.5 tw-pb-2 tw-flex-col tw-gap-1"
 };
-function it(d, t, i, e, r, c) {
-  const l = x("kv-material-icon"), m = x("kv-button");
-  return k(), R(j, {
+function st(a, t, l, e, c, i) {
+  const d = g("kv-material-icon"), u = g("kv-button");
+  return C(), R(j, {
     "enter-active-class": "tw-transition-opacity tw-duration-300",
     "leave-active-class": "tw-transition-opacity tw-duration-300",
     "enter-class": "tw-opacity-0",
@@ -116,7 +123,7 @@ function it(d, t, i, e, r, c) {
     default: h(() => [
       D(o("div", {
         class: "screen",
-        onClick: t[5] || (t[5] = C((...n) => e.onScreenClick && e.onScreenClick(...n), ["stop", "prevent"]))
+        onClick: t[6] || (t[6] = y((...n) => e.onScreenClick && e.onScreenClick(...n), ["stop", "prevent"]))
       }, [
         o("div", null, [
           o("div", ot, [
@@ -127,58 +134,65 @@ function it(d, t, i, e, r, c) {
               class: "modal",
               "aria-modal": "true",
               "aria-label": "Added to basket",
-              onClick: t[2] || (t[2] = C(() => {
+              onClick: t[3] || (t[3] = y(() => {
               }, ["stop"])),
-              onMouseenter: t[3] || (t[3] = (n) => e.clearAutomaticClose()),
-              onMouseleave: t[4] || (t[4] = (n) => e.setAutomaticClose())
+              onMouseenter: t[4] || (t[4] = (n) => e.clearAutomaticClose()),
+              onMouseleave: t[5] || (t[5] = (n) => e.setAutomaticClose())
             }, [
               o("div", lt, [
                 o("div", nt, [
-                  g(d.$slots, "header", {}, () => [
-                    y(l, {
+                  S(a.$slots, "header", {}, () => [
+                    b(d, {
                       class: "tw-w-3.5 tw-h-3.5 tw-text-brand",
                       icon: e.mdiCheckCircle
                     }, null, 8, ["icon"]),
-                    t[6] || (t[6] = o("p", { class: "tw-flex-1 tw-font-medium tw-text-center" }, " Added to basket ", -1))
+                    t[7] || (t[7] = o("p", { class: "tw-flex-1 tw-font-medium tw-text-center" }, " Added to basket ", -1))
                   ], !0),
-                  i.preventClose ? M("", !0) : (k(), S("button", {
+                  l.preventClose ? T("", !0) : (C(), M("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: t[0] || (t[0] = C((n) => e.hide("x-button"), ["stop"]))
+                    onClick: t[0] || (t[0] = y((n) => e.hide("x-button"), ["stop"]))
                   }, [
-                    y(l, {
+                    b(d, {
                       class: "tw-w-3.5 tw-h-3.5",
                       icon: e.mdiClose
                     }, null, 8, ["icon"]),
-                    t[7] || (t[7] = o("span", { class: "tw-sr-only" }, "Close", -1))
+                    t[8] || (t[8] = o("span", { class: "tw-sr-only" }, "Close", -1))
                   ]))
                 ])
               ]),
-              e.showContentSlot ? (k(), S("div", at, [
-                g(d.$slots, "content", {}, void 0, !0)
-              ], 512)) : M("", !0),
-              o("div", st, [
-                y(m, {
+              o("div", at, [
+                S(a.$slots, "content", {}, void 0, !0)
+              ], 512),
+              o("div", it, [
+                b(u, {
                   class: "tw-w-full",
-                  onClick: t[1] || (t[1] = (n) => e.handleClick("view-basket"))
+                  onClick: t[1] || (t[1] = (n) => e.handleClick(
+                    e.showCategoryOption ? "support-another" : "view-basket"
+                  ))
                 }, {
                   default: h(() => [
-                    L(" View basket (" + O(i.basketCount) + ") ", 1)
+                    L(B(e.ctaText), 1)
                   ]),
                   _: 1
-                })
+                }),
+                e.showCategoryOption ? (C(), M("button", {
+                  key: 0,
+                  class: "tw-text-action tw-pt-1.5 tw-font-medium",
+                  onClick: t[2] || (t[2] = (n) => e.handleClick("view-basket"))
+                }, " No thanks, go to basket (" + B(l.basketCount) + ") ", 1)) : T("", !0)
               ], 512)
             ], 544)
           ])
         ])
       ], 512), [
-        [U, i.visible]
+        [U, l.visible]
       ])
     ]),
     _: 3
   });
 }
-const Ct = /* @__PURE__ */ tt(et, [["render", it], ["__scopeId", "data-v-b40bef0e"]]);
+const Ct = /* @__PURE__ */ tt(et, [["render", st], ["__scopeId", "data-v-4af12153"]]);
 export {
   Ct as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.4.1",
+  "version": "6.5.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -107,5 +107,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "c48711e01a00c355cafbf20f47114c3d2716d2d0"
+  "gitHead": "d7bbbf5fc30ed4b8c955c8603b6784e36f143344"
 }