@kiva/kv-components 7.2.2 → 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/package.json

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