@kiva/kv-components 7.2.1 → 7.2.3

package/dist/vue/KvImpactVerticalSelector.js

@@ -1,11 +1,11 @@
-import { ref as E, onMounted as N, computed as y, resolveComponent as x, openBlock as r, createElementBlock as d, createElementVNode as o, Fragment as B, renderList as K, createBlock as I, withCtx as V, createCommentVNode as L, toDisplayString as S } from "vue";
-import W from "./KvCardFrame.js";
-import A from "./KvContentfulImg.js";
-import D from "../_virtual/_plugin-vue_export-helper.js";
-const F = {
+import { ref as M, onMounted as V, computed as o, resolveComponent as N, openBlock as r, createElementBlock as l, createElementVNode as a, Fragment as W, renderList as z, createBlock as K, withCtx as D, normalizeClass as d, createCommentVNode as f, toDisplayString as C } from "vue";
+import F from "./KvCardFrame.js";
+import j from "./KvContentfulImg.js";
+import q from "../_virtual/_plugin-vue_export-helper.js";
+const G = {
   components: {
-    KvCardFrame: W,
-    KvContentfulImg: A
+    KvCardFrame: F,
+    KvContentfulImg: j
   },
   props: {
     // Expects an array of categories from our API
@@ -26,84 +26,111 @@ const F = {
     preSelectedCategory: {
       type: String,
       default: null
+    },
+    // Use compact horizontal layout on tablet and up (keeps image to the left)
+    useCompactCard: {
+      type: Boolean,
+      default: !1
+    },
+    // Array of category ids that the user has already selected
+    existingCategories: {
+      type: Array,
+      default: () => []
+    },
+    // Message to show for categories that are in the existingCategories list
+    existingCategoryMessage: {
+      type: String,
+      default: "Already selected"
     }
   },
   emits: ["category-selected"],
-  setup(l, { emit: u }) {
-    const s = E(null), n = (e) => {
-      s.value = e, u("category-selected", e);
+  setup(s, { emit: g }) {
+    const i = M(null), n = (e) => {
+      i.value = e, g("category-selected", e);
     };
-    N(() => {
-      l.preSelectedCategory && n(l.preSelectedCategory);
+    V(() => {
+      s.preSelectedCategory && n(s.preSelectedCategory);
     });
-    const f = (e) => {
-      var i, t, c, _, h, g, C, p, k;
+    const _ = (e) => {
+      var k, p, b, v, y, I, S, E, L;
       if (e.contentfulEntry) {
-        const a = (_ = (c = (t = (i = e == null ? void 0 : e.contentfulEntry) == null ? void 0 : i.entry) == null ? void 0 : t.fields) == null ? void 0 : c.content) == null ? void 0 : _.find(
-          (m) => {
-            var v, b;
-            return (b = (v = m == null ? void 0 : m.fields) == null ? void 0 : v.key) == null ? void 0 : b.includes("category-icon");
+        const u = (v = (b = (p = (k = e == null ? void 0 : e.contentfulEntry) == null ? void 0 : k.entry) == null ? void 0 : p.fields) == null ? void 0 : b.content) == null ? void 0 : v.find(
+          (w) => {
+            var A, B;
+            return (B = (A = w == null ? void 0 : w.fields) == null ? void 0 : A.key) == null ? void 0 : B.includes("category-icon");
           }
         );
-        return ((k = (p = (C = (g = (h = a == null ? void 0 : a.fields) == null ? void 0 : h.contentLight) == null ? void 0 : g[0]) == null ? void 0 : C.fields) == null ? void 0 : p.file) == null ? void 0 : k.url) ?? null;
+        return ((L = (E = (S = (I = (y = u == null ? void 0 : u.fields) == null ? void 0 : y.contentLight) == null ? void 0 : I[0]) == null ? void 0 : S.fields) == null ? void 0 : E.file) == null ? void 0 : L.url) ?? null;
       }
       return null;
-    }, w = y(() => !l.categoryList || l.categoryList.length === 0 ? [] : l.categoryList.filter((e) => !l.hiddenCategories.includes(e.id)).map((e) => ({
+    }, h = o(() => s.useCompactCard ? "tw-p-2 md:tw-p-3 tw-flex tw-flex-row tw-items-center tw-cursor-pointer" : "tw-p-2 tw-flex tw-flex-row md:tw-flex-col tw-items-center tw-cursor-pointer"), c = o(() => s.useCompactCard ? "tw-shrink-0 tw-mr-2" : "tw-shrink-0 tw-mr-2 md:tw-mr-0 md:tw-mb-2"), m = o(() => s.useCompactCard ? "" : "md:tw-text-center"), t = (e) => s.existingCategories.includes(e), x = o(() => !s.categoryList || s.categoryList.length === 0 ? [] : s.categoryList.filter((e) => !s.hiddenCategories.includes(e.id)).map((e) => ({
       id: e.id,
       name: e.name,
       description: e.description,
       customImage: e.customImage || null,
-      contentfulImage: f(e) || null
+      contentfulImage: _(e) || null
     })));
     return {
-      selectedCategory: s,
-      formattedCategories: w,
-      selectCategory: n
+      selectedCategory: i,
+      formattedCategories: x,
+      selectCategory: n,
+      cardContainerClasses: h,
+      imageClasses: c,
+      textContainerClasses: m,
+      isCategoryExisting: t
     };
   }
-}, M = { class: "tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3" }, j = { class: "tw-p-2 tw-flex tw-flex-row md:tw-flex-col tw-items-center tw-cursor-pointer" }, q = ["alt", "src", "width"], z = { class: "md:tw-text-center" }, G = { class: "tw-mb-0.5 tw-font-medium" }, H = { class: "tw-text-small" }, J = {
+}, H = { class: "tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3" }, J = ["alt", "src", "width"], O = { class: "tw-mb-0.5 tw-font-medium" }, P = { class: "tw-text-small" }, Q = {
+  key: 0,
+  class: "tw-text-small tw-py-1 tw-px-2 tw-mt-1 tw-bg-brand-200 tw-rounded tw-inline-block"
+}, R = {
   key: 0,
   class: "tw-text-gray-500 tw-italic"
 };
-function O(l, u, s, n, f, w) {
-  const e = x("kv-contentful-img"), i = x("kv-card-frame");
-  return r(), d("div", null, [
-    o("div", M, [
-      (r(!0), d(B, null, K(n.formattedCategories, (t) => (r(), I(i, {
+function T(s, g, i, n, _, h) {
+  const c = N("kv-contentful-img"), m = N("kv-card-frame");
+  return r(), l("div", null, [
+    a("div", H, [
+      (r(!0), l(W, null, z(n.formattedCategories, (t) => (r(), K(m, {
         key: t.id,
         "bg-color-class": n.selectedCategory === t.id ? "tw-bg-secondary" : "tw-bg-white",
         "border-class": n.selectedCategory === t.id ? "tw-border-2 tw-border-action" : "tw-border-2 tw-border-transparent",
         class: "tw-transition-all tw-duration-200 hover:tw-shadow-lg",
-        onClick: (c) => n.selectCategory(t.id)
+        onClick: (x) => n.selectCategory(t.id)
       }, {
-        default: V(() => [
-          o("div", j, [
-            t != null && t.contentfulImage ? (r(), I(e, {
+        default: D(() => [
+          a("div", {
+            class: d(n.cardContainerClasses)
+          }, [
+            t != null && t.contentfulImage ? (r(), K(c, {
               key: 0,
-              class: "tw-shrink-0 tw-mr-2 md:tw-mr-0 md:tw-mb-2",
+              class: d(n.imageClasses),
               alt: `${t.name} image`,
               "contentful-src": t.contentfulImage,
-              width: s.imageWidth
-            }, null, 8, ["alt", "contentful-src", "width"])) : t != null && t.customImage ? (r(), d("img", {
+              width: i.imageWidth
+            }, null, 8, ["class", "alt", "contentful-src", "width"])) : t != null && t.customImage ? (r(), l("img", {
               key: 1,
-              class: "tw-shrink-0 tw-mr-2 md:tw-mr-0 md:tw-mb-2",
+              class: d(n.imageClasses),
               alt: `${t.name} image`,
               src: t.customImage,
-              width: s.imageWidth
-            }, null, 8, q)) : L("", !0),
-            o("div", z, [
-              o("p", G, S(t.name), 1),
-              o("p", H, S(t.description), 1)
-            ])
-          ])
+              width: i.imageWidth
+            }, null, 10, J)) : f("", !0),
+            a("div", {
+              class: d(n.textContainerClasses)
+            }, [
+              a("p", O, C(t.name), 1),
+              a("p", P, C(t.description), 1),
+              n.isCategoryExisting(t.id) ? (r(), l("p", Q, C(i.existingCategoryMessage), 1)) : f("", !0)
+            ], 2)
+          ], 2)
         ]),
         _: 2
       }, 1032, ["bg-color-class", "border-class", "onClick"]))), 128))
     ]),
-    n.formattedCategories.length === 0 ? (r(), d("p", J, " No categories available ")) : L("", !0)
+    n.formattedCategories.length === 0 ? (r(), l("p", R, " No categories available ")) : f("", !0)
   ]);
 }
-const U = /* @__PURE__ */ D(F, [["render", O]]);
+const $ = /* @__PURE__ */ q(G, [["render", T]]);
 export {
-  U as default
+  $ as default
 };

package/dist/vue/KvUtilityMenu.js

@@ -1,8 +1,8 @@
-import { ref as a, onMounted as f, onBeforeUnmount as g, resolveComponent as h, resolveDirective as y, openBlock as s, createElementBlock as d, normalizeClass as u, withDirectives as m, withModifiers as k, createVNode as p, createElementVNode as b, normalizeStyle as C, renderSlot as M, vShow as S } from "vue";
+import { ref as r, onMounted as f, onBeforeUnmount as g, resolveComponent as h, resolveDirective as y, openBlock as s, createElementBlock as d, normalizeClass as u, withDirectives as m, withModifiers as b, createVNode as k, createElementVNode as S, normalizeStyle as C, renderSlot as M, vShow as z } from "vue";
 import { mdiDotsVertical as w } from "@mdi/js";
 import _ from "./KvMaterialIcon.js";
-import z from "../_virtual/_plugin-vue_export-helper.js";
-const A = {
+import B from "../_virtual/_plugin-vue_export-helper.js";
+const p = {
   name: "KvUtilityMenu",
   components: {
     KvMaterialIcon: _
@@ -22,11 +22,12 @@ const A = {
     },
     buttonSize: {
       type: String,
-      default: "medium",
+      default: "large",
       validator(n) {
         return [
           "small",
-          "medium"
+          "medium",
+          "large"
         ].includes(n);
       }
     },
@@ -34,6 +35,14 @@ const A = {
       type: String,
       default: w
     },
+    menuBorderClass: {
+      type: String,
+      default: "tw-border tw-border-tertiary"
+    },
+    menuRadiusClass: {
+      type: String,
+      default: "tw-rounded"
+    },
     menuPosition: {
       type: String,
       default: "left-aligned",
@@ -49,8 +58,8 @@ const A = {
     "kv-utility-menu-clicked"
   ],
   setup(n, { emit: i }) {
-    const t = a(null), e = a(!1), c = a(null), l = (r) => {
-      t.value && !t.value.contains(r.target) && (e.value = !1);
+    const t = r(null), e = r(!1), c = r(null), l = (a) => {
+      t.value && !t.value.contains(a.target) && (e.value = !1);
     }, o = () => {
       e.value = !e.value, i("kv-utility-menu-clicked", { open: e.value });
     };
@@ -68,11 +77,15 @@ const A = {
     };
   }
 };
-function B(n, i, t, e, c, l) {
-  const o = h("KvMaterialIcon"), r = y("kv-track-event");
+function A(n, i, t, e, c, l) {
+  const o = h("KvMaterialIcon"), a = y("kv-track-event");
   return s(), d("div", {
     class: u(["tw-relative utility-menu-wrapper", [
-      t.buttonSize === "small" ? "tw-w-4 tw-h-4" : "tw-w-6 tw-h-6"
+      {
+        "tw-w-4 tw-h-4": t.buttonSize === "small",
+        "tw-w-5 tw-h-5": t.buttonSize === "medium",
+        "tw-w-6 tw-h-6": t.buttonSize === "large"
+      }
     ]])
   }, [
     m((s(), d("button", {
@@ -80,28 +93,36 @@ function B(n, i, t, e, c, l) {
       class: u(["tw-absolute tw-bg-white tw-flex tw-items-center tw-justify-center menu-trigger", [
         t.buttonBorderClass,
         t.buttonRadiusClass,
-        t.buttonSize === "small" ? "tw-w-4 tw-h-4" : "tw-w-6 tw-h-6"
+        {
+          "tw-w-4 tw-h-4": t.buttonSize === "small",
+          "tw-w-5 tw-h-5": t.buttonSize === "medium",
+          "tw-w-6 tw-h-6": t.buttonSize === "large"
+        }
       ]]),
-      onClick: i[0] || (i[0] = k((...v) => e.handleMenuAnchorClick && e.handleMenuAnchorClick(...v), ["stop"]))
+      onClick: i[0] || (i[0] = b((...v) => e.handleMenuAnchorClick && e.handleMenuAnchorClick(...v), ["stop"]))
     }, [
-      p(o, { icon: t.icon }, null, 8, ["icon"])
+      k(o, { icon: t.icon }, null, 8, ["icon"])
     ], 2)), [
-      [r, [t.analyticsCategory, "click", "utility-menu"]]
+      [a, [t.analyticsCategory, "click", "utility-menu"]]
     ]),
-    m(b("div", {
+    m(S("div", {
       ref: "optionsMenu",
-      class: u(["tw-absolute tw-rounded tw-border tw-border-tertiary tw-bg-white tw-z-1 tw-shadow-lg vertical-menu", [{
-        "tw-right-0": t.menuPosition === "right-aligned"
-      }]]),
+      class: u(["tw-absolute tw-bg-white tw-z-1 tw-shadow-lg vertical-menu", [
+        t.menuBorderClass,
+        t.menuRadiusClass,
+        {
+          "tw-right-0": t.menuPosition === "right-aligned"
+        }
+      ]]),
       style: C(`width: 236px; top: ${t.buttonSize === "small" ? "2.5rem" : "3.5rem"};`)
     }, [
       M(n.$slots, "default")
     ], 6), [
-      [S, e.menuOpen]
+      [z, e.menuOpen]
     ])
   ], 2);
 }
-const I = /* @__PURE__ */ z(A, [["render", B]]);
+const D = /* @__PURE__ */ B(p, [["render", A]]);
 export {
-  I as default
+  D as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "7.2.1",
+  "version": "7.2.3",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -114,5 +114,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "2ba609a200516c70a984b3c44105b96befa92a3c"
+  "gitHead": "50e5dc38a0640b6fab10cf490c57825edac585a9"
 }