@kiva/kv-components 6.36.0 → 6.38.0

package/dist/vue/KvCheckbox.css

@@ -0,0 +1 @@
+[data-v-9958a4b0] .check-icon svg{transform:scale(1.2)}

package/dist/vue/KvCheckbox.js

@@ -1,11 +1,17 @@
-import { nanoid as h } from "nanoid";
-import { toRefs as B, ref as u, watch as L, onMounted as M, openBlock as m, createElementBlock as b, normalizeClass as f, normalizeStyle as R, createElementVNode as s, mergeProps as S, toHandlers as z, withModifiers as E, createCommentVNode as N, renderSlot as j } from "vue";
-import { useAttrs as H } from "../utils/attrs.js";
-import K from "../_virtual/_plugin-vue_export-helper.js";
-const k = [
+import { nanoid as k } from "nanoid";
+import { toRefs as L, ref as v, watch as M, onMounted as I, resolveComponent as K, openBlock as r, createElementBlock as s, normalizeClass as c, normalizeStyle as S, createElementVNode as d, mergeProps as q, toHandlers as R, withModifiers as j, createCommentVNode as b, createBlock as z, renderSlot as D } from "vue";
+import { mdiCheckCircle as E } from "@mdi/js";
+import N from "./KvMaterialIcon.js";
+import { useAttrs as O } from "../utils/attrs.js";
+import "./KvCheckbox.css";
+import H from "../_virtual/_plugin-vue_export-helper.js";
+const C = [
   "change",
   "update:modelValue"
 ], P = {
+  components: {
+    KvMaterialIcon: N
+  },
   inheritAttrs: !1,
   model: {
     prop: "modelValue",
@@ -40,62 +46,77 @@ const k = [
     valid: {
       type: Boolean,
       default: !0
+    },
+    /**
+     * Variant of the checkbox: 'square' (default) or 'round'
+     */
+    variant: {
+      type: String,
+      default: "square",
+      validator: (i) => ["square", "round"].includes(i)
+    },
+    blurOnDisabled: {
+      type: Boolean,
+      default: !0
     }
   },
-  emits: k,
+  emits: C,
   setup(i, l) {
     const {
       modelValue: t,
       value: e
-    } = B(i), { emit: n } = l, r = u(`kvc-${h(10)}`), o = u(!1), d = u(null), {
-      classes: C,
-      styles: g,
-      inputAttrs: y,
-      inputListeners: p
-    } = H(l, k), x = (w) => {
-      const v = w.target.checked;
-      let a;
-      Array.isArray(t.value) ? v ? a = [...t.value, w.target.value] : a = t.value.filter((V) => V !== e.value) : a = v, n("change", a), n("update:modelValue", a);
-    }, c = () => {
-      Array.isArray(t.value) ? o.value = t.value.includes(e.value) : o.value = t.value;
-    }, _ = () => {
-      d.focus();
+    } = L(i), { emit: u } = l, w = v(`kvc-${k(10)}`), a = v(!1), o = v(null), {
+      classes: g,
+      styles: y,
+      inputAttrs: x,
+      inputListeners: _
+    } = O(l, C), p = (h) => {
+      const m = h.target.checked;
+      let n;
+      Array.isArray(t.value) ? m ? n = [...t.value, h.target.value] : n = t.value.filter((V) => V !== e.value) : n = m, u("change", n), u("update:modelValue", n);
+    }, f = () => {
+      Array.isArray(t.value) ? a.value = t.value.includes(e.value) : a.value = t.value;
     }, A = () => {
-      d.blur();
+      o.focus();
+    }, B = () => {
+      o.blur();
     };
-    return c(), L(t, () => c()), M(() => {
-      r.value = `kvc-${h(10)}`;
+    return f(), M(t, () => f()), I(() => {
+      w.value = `kvc-${k(10)}`;
     }), {
-      uuid: r,
-      isChecked: o,
-      checkboxRef: d,
-      onChange: x,
-      setChecked: c,
-      focus: _,
-      blur: A,
-      classes: C,
-      styles: g,
-      inputAttrs: y,
-      inputListeners: p
+      uuid: w,
+      isChecked: a,
+      checkboxRef: o,
+      onChange: p,
+      setChecked: f,
+      focus: A,
+      blur: B,
+      classes: g,
+      styles: y,
+      inputAttrs: x,
+      inputListeners: _,
+      iconCheckCircle: E
+      // <-- just return the value
     };
   }
-}, Z = ["for"], q = ["id", "checked", "value", "disabled"], D = {
+}, Z = ["for"], F = ["id", "checked", "value", "disabled"], G = {
   key: 0,
   class: "tw-w-1.5 tw-h-auto",
   viewBox: "0 0 12 9",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, F = { class: "tw-flex-1 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action" };
-function G(i, l, t, e, n, r) {
-  return m(), b("div", {
-    class: f(e.classes),
-    style: R(e.styles)
+}, J = { class: "tw-flex-1 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action" };
+function Q(i, l, t, e, u, w) {
+  const a = K("KvMaterialIcon");
+  return r(), s("div", {
+    class: c(e.classes),
+    style: S(e.styles)
   }, [
-    s("label", {
-      class: f(["tw-inline-flex tw-items-center", { "tw-opacity-low": t.disabled }]),
+    d("label", {
+      class: c(["tw-inline-flex tw-items-center", { "tw-opacity-low": t.disabled && t.blurOnDisabled }]),
       for: e.uuid
     }, [
-      s("input", S(e.inputAttrs, {
+      d("input", q(e.inputAttrs, {
         id: e.uuid,
         ref: "checkboxRef",
         class: "tw-peer tw-appearance-none tw-w-max",
@@ -103,11 +124,12 @@ function G(i, l, t, e, n, r) {
         checked: e.isChecked,
         value: t.value,
         disabled: t.disabled
-      }, z(e.inputListeners, !0), {
-        onChange: l[0] || (l[0] = E((...o) => e.onChange && e.onChange(...o), ["prevent"]))
-      }), null, 16, q),
-      s("div", {
-        class: f(["tw-w-3 tw-h-3 tw-mr-2 tw-flex-shrink-0 tw-rounded-sm tw-border tw-flex tw-justify-center tw-items-center tw-overflow-hidden tw-transition-all tw-duration-100 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action", {
+      }, R(e.inputListeners, !0), {
+        onChange: l[0] || (l[0] = j((...o) => e.onChange && e.onChange(...o), ["prevent"]))
+      }), null, 16, F),
+      t.variant === "square" ? (r(), s("div", {
+        key: 0,
+        class: c(["tw-w-3 tw-h-3 tw-mr-2 tw-flex-shrink-0 tw-rounded-sm tw-border tw-flex tw-justify-center tw-items-center tw-overflow-hidden tw-transition-all tw-duration-100 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action", {
           "tw-bg-white": !e.isChecked,
           "tw-bg-action": e.isChecked,
           "tw-border-secondary": !e.isChecked && t.valid,
@@ -115,20 +137,43 @@ function G(i, l, t, e, n, r) {
           "tw-border-danger": !t.valid
         }])
       }, [
-        e.isChecked ? (m(), b("svg", D, l[1] || (l[1] = [
-          s("path", {
+        e.isChecked ? (r(), s("svg", G, l[1] || (l[1] = [
+          d("path", {
             d: "M3.99975 6.79988L1.66642 4.46655C1.40642 4.20655 0.993086 4.20655 0.733086 4.46655C0.473086 4.72655 0.473086 5.13988 0.733086 5.39988L3.52642 8.19322C3.78642 8.45322 4.20642 8.45322 4.46642 8.19322L11.5331 1.13322C11.7931 0.873216 11.7931 0.459883 11.5331 0.199883C11.2731 -0.0601172 10.8598 -0.0601172 10.5998 0.199883L3.99975 6.79988Z",
             fill: "white"
           }, null, -1)
-        ]))) : N("", !0)
-      ], 2),
-      s("div", F, [
-        j(i.$slots, "default")
+        ]))) : b("", !0)
+      ], 2)) : (r(), s("div", {
+        key: 1,
+        class: c([
+          "tw-w-3 tw-h-3 tw-mr-2",
+          "tw-flex-shrink-0",
+          "tw-rounded-full",
+          "tw-flex tw-justify-center tw-items-center",
+          "tw-overflow-hidden",
+          "tw-transition-all tw-duration-100",
+          "peer-focus-visible:tw-ring-2",
+          "peer-focus-visible:tw-ring-action",
+          e.isChecked ? "tw-text-brand-550 tw-bg-white" : "tw-bg-gray-200",
+          // Only show border if checked or invalid
+          !e.isChecked && !t.valid ? "tw-border-danger" : "",
+          e.isChecked && t.valid ? "tw-border-action" : "",
+          (!e.isChecked && t.valid, "")
+        ])
+      }, [
+        e.isChecked ? (r(), z(a, {
+          key: 0,
+          icon: e.iconCheckCircle,
+          class: "check-icon"
+        }, null, 8, ["icon"])) : b("", !0)
+      ], 2)),
+      d("div", J, [
+        D(i.$slots, "default", {}, void 0, !0)
       ])
     ], 10, Z)
   ], 6);
 }
-const T = /* @__PURE__ */ K(P, [["render", G]]);
+const te = /* @__PURE__ */ H(P, [["render", Q], ["__scopeId", "data-v-9958a4b0"]]);
 export {
-  T as default
+  te as default
 };

package/dist/vue/KvSideSheet.js

@@ -1,5 +1,5 @@
-import { toRefs as P, ref as r, reactive as Q, computed as j, onMounted as X, onUnmounted as Y, watch as g, resolveComponent as Z, openBlock as p, createElementBlock as k, normalizeClass as b, withModifiers as $, createElementVNode as w, normalizeStyle as H, createVNode as z, createCommentVNode as x, toDisplayString as ee, renderSlot as N, nextTick as te } from "vue";
-import { mdiArrowLeft as oe, mdiClose as ne, mdiExportVariant as ie } from "@mdi/js";
+import { toRefs as P, ref as r, reactive as Q, computed as j, onMounted as X, onUnmounted as Y, watch as g, resolveComponent as Z, openBlock as p, createElementBlock as k, normalizeClass as b, withModifiers as $, createElementVNode as w, normalizeStyle as H, createVNode as z, createCommentVNode as x, toDisplayString as ee, renderSlot as U, nextTick as te } from "vue";
+import { mdiArrowLeft as ne, mdiClose as oe, mdiOpenInNew as ie } from "@mdi/js";
 import le from "./KvMaterialIcon.js";
 import se from "../_virtual/_plugin-vue_export-helper.js";
 const ae = {
@@ -65,7 +65,7 @@ const ae = {
     widthDimensions: {
       type: [String, Object],
       default: () => ({ default: "100%", md: "50%" }),
-      validator: (o) => typeof o == "string" ? /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(o) : typeof o == "object" ? Object.keys(o).every((n) => ["default", "sm", "md", "lg", "xl", "2xl"].includes(n) && /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(o[n])) : !1
+      validator: (n) => typeof n == "string" ? /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(n) : typeof n == "object" ? Object.keys(n).every((o) => ["default", "sm", "md", "lg", "xl", "2xl"].includes(o) && /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(n[o])) : !1
     },
     /**
      * Whether to hide the background of the headline section on mobile (e.g., in Borrower Profile Sidesheet)
@@ -76,20 +76,20 @@ const ae = {
     }
   },
   emits: ["side-sheet-closed", "go-to-link"],
-  setup(o, { emit: n, slots: i }) {
+  setup(n, { emit: o, slots: i }) {
     const {
       visible: t,
-      kvTrackFunction: M,
-      trackEventCategory: _,
+      kvTrackFunction: I,
+      trackEventCategory: M,
       widthDimensions: l,
       hideHeadlineBgOnMobile: d
-    } = P(o), c = r(!1), a = r({}), T = r(null), m = r(null), y = r(null), V = r(null), W = r(null), S = r(null), B = r(null), v = Q({
+    } = P(n), c = r(!1), a = r({}), O = r(null), m = r(null), y = r(null), _ = r(null), N = r(null), S = r(null), B = r(null), v = Q({
       headline: 0,
       controls: 0
-    }), U = j(() => {
-      const e = V.value - (d.value ? 0 : v.headline) - v.controls;
+    }), V = j(() => {
+      const e = _.value - (d.value ? 0 : v.headline) - v.controls;
       return Math.max(e, 0);
-    }), I = j(() => {
+    }), W = j(() => {
       if (typeof l.value == "string")
         return l.value;
       const e = {
@@ -98,15 +98,15 @@ const ae = {
         lg: 1024,
         xl: 1280,
         "2xl": 1536
-      }, s = W.value || window.innerWidth, f = Object.keys(l.value).filter((u) => u !== "default").sort((u, O) => e[O] - e[u]).find((u) => s >= e[u]);
+      }, s = N.value || window.innerWidth, f = Object.keys(l.value).filter((u) => u !== "default").sort((u, L) => e[L] - e[u]).find((u) => s >= e[u]);
       return f ? l.value[f] : l.value.default || "100%";
     }), A = (e, s) => {
       let f;
       return (...u) => {
         clearTimeout(f), f = setTimeout(() => e(...u), s);
       };
-    }, E = () => {
-      V.value = window.innerHeight, W.value = window.innerWidth, setTimeout(() => {
+    }, C = () => {
+      _.value = window.innerHeight, N.value = window.innerWidth, setTimeout(() => {
         te(() => {
           var e;
           if (y.value) {
@@ -121,24 +121,24 @@ const ae = {
             v.controls = 0;
         });
       }, 300);
-    }, C = A(E, 100), R = () => {
+    }, E = A(C, 100), T = () => {
       const e = "tw-overflow-hidden";
       c.value ? document.body.classList.add(e) : document.body.classList.remove(e);
     }, K = () => {
-      c.value = !1, R(), M.value(_.value, "click", "side-sheet-closed"), setTimeout(() => {
-        n("side-sheet-closed");
-      }, 300), document.removeEventListener("keyup", L);
+      c.value = !1, T(), I.value(M.value, "click", "side-sheet-closed"), setTimeout(() => {
+        o("side-sheet-closed");
+      }, 300), document.removeEventListener("keyup", R);
     }, G = () => {
-      n("go-to-link");
-    }, L = (e) => {
+      o("go-to-link");
+    }, R = (e) => {
       (e == null ? void 0 : e.key) === "Escape" && K();
     };
     X(() => {
       setTimeout(() => {
-        E();
-      }, 100), m.value && (S.value = new ResizeObserver(C), S.value.observe(m.value)), y.value && (B.value = new ResizeObserver(C), B.value.observe(y.value)), window.addEventListener("resize", C);
+        C();
+      }, 100), m.value && (S.value = new ResizeObserver(E), S.value.observe(m.value)), y.value && (B.value = new ResizeObserver(E), B.value.observe(y.value)), window.addEventListener("resize", E);
     }), Y(() => {
-      S.value && S.value.disconnect(), B.value && B.value.disconnect(), window.removeEventListener("resize", C);
+      S.value && S.value.disconnect(), B.value && B.value.disconnect(), window.removeEventListener("resize", E);
       const e = document.getElementById("side-sheet-styles");
       e && e.remove();
     }), g(() => {
@@ -146,17 +146,17 @@ const ae = {
       return (e = i.controls) == null ? void 0 : e.call(i);
     }, () => {
       setTimeout(() => {
-        E();
+        C();
       }, 100);
     }, { deep: !0 });
     const q = j(() => ({
-      width: I.value
+      width: W.value
     }));
     g(t, (e) => {
-      typeof window < "u" && (e ? (document.addEventListener("keyup", L), a.value = {}, setTimeout(() => {
-        c.value = !0, R(), E();
-      }, 10)) : (c.value = !1, R(), document.removeEventListener("keyup", L), a.value = {}));
-    }, { immediate: !0 }), g(I, (e) => {
+      typeof window < "u" && (e ? (document.addEventListener("keyup", R), a.value = {}, setTimeout(() => {
+        c.value = !0, T(), C();
+      }, 10)) : (c.value = !1, T(), document.removeEventListener("keyup", R), a.value = {}));
+    }, { immediate: !0 }), g(W, (e) => {
       c.value && t.value && a.value && Object.keys(a.value).length > 0 && (a.value = {
         ...a.value,
         width: e,
@@ -170,7 +170,7 @@ const ae = {
       }, 50));
     });
     const D = () => {
-      if (typeof l.value == "object" && T.value) {
+      if (typeof l.value == "object" && O.value) {
         const e = "side-sheet-styles";
         let s = document.getElementById(e);
         s || (s = document.createElement("style"), s.id = e, document.head.appendChild(s));
@@ -180,17 +180,17 @@ const ae = {
           lg: "1024px",
           xl: "1280px",
           "2xl": "1536px"
-        }, O = Object.keys(l.value).filter((h) => h !== "default").sort((h, J) => {
+        }, L = Object.keys(l.value).filter((h) => h !== "default").sort((h, J) => {
           const F = ["sm", "md", "lg", "xl", "2xl"];
           return F.indexOf(h) - F.indexOf(J);
         }).map((h) => `
 						@media (min-width: ${f[h]}) {
-							#side-sheet-${o.trackEventCategory || "default"} {
+							#side-sheet-${n.trackEventCategory || "default"} {
 								width: ${l.value[h]} !important;
 							}
 						}
 					`).join("");
-        s.textContent = O, T.value.id = `side-sheet-${o.trackEventCategory || "default"}`;
+        s.textContent = L, O.value.id = `side-sheet-${n.trackEventCategory || "default"}`;
       }
     };
     return g(l, () => {
@@ -199,21 +199,21 @@ const ae = {
       e && D();
     }), {
       closeSideSheet: K,
-      contentHeight: U,
+      contentHeight: V,
       controlsRef: m,
       headlineRef: y,
-      sideSheetRef: T,
+      sideSheetRef: O,
       sideSheetStyles: q,
       goToLink: G,
-      mdiArrowLeft: oe,
-      mdiClose: ne,
-      mdiExportVariant: ie,
+      mdiArrowLeft: ne,
+      mdiClose: oe,
+      mdiOpenInNew: ie,
       modalStyles: a,
       open: c
     };
   }
 }, de = { class: "tw-flex tw-gap-1.5" }, re = { key: 1 }, ce = { class: "tw-flex tw-gap-1.5" };
-function ue(o, n, i, t, M, _) {
+function ue(n, o, i, t, I, M) {
   const l = Z("kv-material-icon");
   return i.visible ? (p(), k("div", {
     key: 0,
@@ -221,14 +221,14 @@ function ue(o, n, i, t, M, _) {
       "tw-bg-opacity-0 tw-delay-300": !t.open,
       "tw-bg-opacity-low": t.open
     }]),
-    onClick: n[3] || (n[3] = $((...d) => t.closeSideSheet && t.closeSideSheet(...d), ["self"]))
+    onClick: o[3] || (o[3] = $((...d) => t.closeSideSheet && t.closeSideSheet(...d), ["self"]))
   }, [
     w("div", {
       ref: "sideSheetRef",
       class: b(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white", {
         "tw-translate-x-full": !t.open,
         "tw-translate-x-0": t.open,
-        "tw-h-full": o.$slots.controls
+        "tw-h-full": n.$slots.controls
       }]),
       style: H(t.sideSheetStyles)
     }, [
@@ -248,7 +248,7 @@ function ue(o, n, i, t, M, _) {
             i.showBackButton ? (p(), k("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: n[0] || (n[0] = (...d) => t.closeSideSheet && t.closeSideSheet(...d))
+              onClick: o[0] || (o[0] = (...d) => t.closeSideSheet && t.closeSideSheet(...d))
             }, [
               z(l, {
                 class: "tw-w-3 tw-h-3",
@@ -261,16 +261,16 @@ function ue(o, n, i, t, M, _) {
             i.showGoToLink ? (p(), k("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: n[1] || (n[1] = (...d) => t.goToLink && t.goToLink(...d))
+              onClick: o[1] || (o[1] = (...d) => t.goToLink && t.goToLink(...d))
             }, [
               z(l, {
                 class: "tw-w-3 tw-h-3",
-                icon: t.mdiExportVariant
+                icon: t.mdiOpenInNew
               }, null, 8, ["icon"])
             ])) : x("", !0),
             w("button", {
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: n[2] || (n[2] = (...d) => t.closeSideSheet && t.closeSideSheet(...d))
+              onClick: o[2] || (o[2] = (...d) => t.closeSideSheet && t.closeSideSheet(...d))
             }, [
               z(l, {
                 class: "tw-w-3 tw-h-3",
@@ -290,10 +290,10 @@ function ue(o, n, i, t, M, _) {
               "tw-opacity-full": t.open
             }])
           }, [
-            N(o.$slots, "default")
+            U(n.$slots, "default")
           ], 2)
         ], 4),
-        o.$slots.controls ? (p(), k("div", {
+        n.$slots.controls ? (p(), k("div", {
           key: 0,
           ref: "controlsRef",
           class: b(["tw-absolute tw-bottom-0 tw-w-full tw-border-t tw-border-tertiary tw-bg-white tw-transition-opacity tw-duration-200", {
@@ -302,7 +302,7 @@ function ue(o, n, i, t, M, _) {
           }]),
           style: { "z-index": "999" }
         }, [
-          N(o.$slots, "controls")
+          U(n.$slots, "controls")
         ], 2)) : x("", !0)
       ], 4)
     ], 6)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.36.0",
+  "version": "6.38.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -111,5 +111,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "ed4128eca411de12daade544a5a2a417e5f75975"
+  "gitHead": "664b7df4d6a1ac8608eefcbf5e3b2387ea84052b"
 }