@kiva/kv-components 6.40.1 → 6.40.2

package/dist/vue/KvWwwHeader/LendMenu/KvLendMegaMenu.js

@@ -0,0 +1,263 @@
+import { mdiArrowRight as N, mdiChevronLeft as T } from "@mdi/js";
+import { ref as L, computed as k, resolveComponent as u, resolveDirective as R, openBlock as n, createElementBlock as s, createElementVNode as t, normalizeStyle as A, createVNode as w, withCtx as K, Fragment as c, renderList as h, withDirectives as d, createTextVNode as m, toDisplayString as x, createCommentVNode as C, normalizeClass as O } from "vue";
+import I from "../../KvLoadingPlaceholder.js";
+import M from "../../KvGrid.js";
+import B from "../../KvMaterialIcon.js";
+import V from "./KvLendMenuCountryList.js";
+import D from "./KvLendMenuSearchList.js";
+import "./KvLendMegaMenu.css";
+import F from "../../../_virtual/_plugin-vue_export-helper.js";
+const z = {
+  components: {
+    KvGrid: M,
+    KvLendMenuCountryList: V,
+    KvLendMenuSearchList: D,
+    KvLoadingPlaceholder: I,
+    KvMaterialIcon: B
+  },
+  props: {
+    categories: {
+      type: Array,
+      default: () => []
+    },
+    favorites: {
+      type: Number,
+      default: 0
+    },
+    isRegionsLoading: {
+      type: Boolean,
+      default: !0
+    },
+    isChannelsLoading: {
+      type: Boolean,
+      default: !0
+    },
+    userId: {
+      type: Number,
+      default: null
+    },
+    regions: {
+      type: Array,
+      default: () => []
+    },
+    searches: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(p) {
+    const e = L(null), i = L(""), l = k(() => i.value !== ""), y = (a) => i.value === a, b = (a) => {
+      i.value = a;
+    }, v = k(() => {
+      var r;
+      const a = { width: "150%" };
+      if (l.value) {
+        const o = ((r = e.value) == null ? void 0 : r.clientWidth) ?? 0;
+        a.transform = `translateX(${o * -1}px)`;
+      }
+      return a;
+    }), f = k(() => p.regions.filter((a) => y(a.name))), _ = k(() => p.searches.length > 0);
+    return {
+      mdiArrowRight: N,
+      mdiChevronLeft: T,
+      categoriesSection: e,
+      openedSection: i,
+      sectionOpen: l,
+      isOpenSection: y,
+      openSection: b,
+      onClose: () => {
+        i.value = "";
+      },
+      openRegions: f,
+      computedStyle: v,
+      hasSearches: _,
+      savedSearchesTitle: "Saved searches"
+    };
+  }
+}, E = { class: "lend-mega-menu tw-overflow-hidden tw-pb-3 lg:tw-pt-3" }, W = {
+  ref: "categoriesSection",
+  class: "tw-col-span-7"
+}, G = { class: "tw-flex tw-gap-4 tw-whitespace-nowrap" }, P = { class: "tw-columns-2 tw-gap-4 tw-font-book" }, X = ["href"], j = { class: "tw-font-book" }, q = { class: "link-item" }, H = {
+  href: "/lend-by-category/recommended-by-lenders",
+  class: "mega-menu-link"
+}, J = { class: "link-item" }, Q = {
+  href: "/categories",
+  class: "mega-menu-link"
+}, U = { class: "link-item" }, Y = {
+  class: "mega-menu-link",
+  href: "/lend"
+}, Z = { key: 0 }, $ = { class: "tw-font-book" }, ee = ["href"], te = {
+  key: 1,
+  class: "tw-text-secondary tw-py-1 tw-inline-block"
+}, ne = ["aria-pressed"], se = {
+  key: 1,
+  class: "tw-text-secondary tw-py-1 tw-inline-block"
+}, oe = {
+  href: "/lend/countries-not-lent",
+  class: "tw-text-primary tw-text-left hover:tw-text-action-highlight tw-py-1 tw-inline-block"
+}, le = { class: "tw-col-span-2" }, ie = { class: "tw-col-span-8 tw-flex tw-flex-col" }, ae = { class: "tw-flex tw-whitespace-nowrap tw-h-full" }, re = { class: "tw-font-book" }, ce = ["aria-pressed", "onClick"];
+function de(p, e, i, l, y, b) {
+  const v = u("kv-loading-placeholder"), f = u("kv-material-icon"), _ = u("kv-lend-menu-search-list"), S = u("kv-lend-menu-country-list"), a = u("kv-grid"), r = R("kv-track-event");
+  return n(), s("div", E, [
+    t("div", {
+      style: A(l.computedStyle),
+      class: "tw-transition tw-duration-1000 tw-ease-in-out"
+    }, [
+      w(a, { style: { "grid-template-columns": "repeat(18, minmax(0, 1fr))" } }, {
+        default: K(() => [
+          t("div", W, [
+            e[10] || (e[10] = t("h2", { class: "menu-heading tw-mb-2" }, " Categories ", -1)),
+            t("div", G, [
+              t("ul", P, [
+                i.isChannelsLoading ? (n(), s(c, { key: 0 }, h(14, (o) => t("li", {
+                  key: o,
+                  class: "link-item"
+                }, [
+                  w(v, {
+                    class: "tw-inline-block tw-align-middle",
+                    style: { height: "1.25rem" }
+                  }),
+                  e[2] || (e[2] = t("span", { class: "tw-py-1 tw-inline-block" }, " ", -1))
+                ])), 64)) : (n(!0), s(c, { key: 1 }, h(i.categories, (o, g) => (n(), s("li", {
+                  key: g,
+                  class: "link-item"
+                }, [
+                  d((n(), s("a", {
+                    href: o.url,
+                    class: "tw-text-primary tw-text-left hover:tw-text-action-highlight tw-py-1 tw-inline-block"
+                  }, [
+                    m(x(o.name), 1)
+                  ], 8, X)), [
+                    [r, ["TopNav", "click-Lend-Category", o.name, g + 1]]
+                  ])
+                ]))), 128))
+              ]),
+              t("div", null, [
+                t("ul", j, [
+                  t("li", q, [
+                    d((n(), s("a", H, e[3] || (e[3] = [
+                      m(" Recommended by lenders ")
+                    ]))), [
+                      [r, ["TopNav", "click-Lend-Recommended-by-lenders"]]
+                    ])
+                  ]),
+                  t("li", J, [
+                    d((n(), s("a", Q, e[4] || (e[4] = [
+                      m(" All categories ")
+                    ]))), [
+                      [r, ["TopNav", "click-Lend-All_Categories"]]
+                    ])
+                  ]),
+                  t("li", U, [
+                    d((n(), s("a", Y, e[5] || (e[5] = [
+                      m(" All loans ")
+                    ]))), [
+                      [r, ["TopNav", "click-Lend-All_Loans"]]
+                    ])
+                  ])
+                ]),
+                i.userId ? (n(), s("div", Z, [
+                  e[8] || (e[8] = t("span", { class: "tw-inline-block tw-py-1" }, " ", -1)),
+                  e[9] || (e[9] = t("h2", { class: "menu-heading tw-my-1" }, " My Kiva ", -1)),
+                  t("ul", $, [
+                    t("li", null, [
+                      i.favorites > 0 ? d((n(), s("a", {
+                        key: 0,
+                        href: `/lend?lenderFavorite=${i.userId}`,
+                        class: "tw-text-primary tw-text-left hover:tw-text-action-highlight tw-py-1 tw-inline-block"
+                      }, e[6] || (e[6] = [
+                        m(" Saved loans ")
+                      ]), 8, ee)), [
+                        [r, ["TopNav", "click-Lend-Favorites"]]
+                      ]) : (n(), s("span", te, " Saved loans "))
+                    ]),
+                    t("li", null, [
+                      l.hasSearches ? (n(), s("button", {
+                        key: 0,
+                        "aria-pressed": l.isOpenSection(l.savedSearchesTitle) ? "true" : "false",
+                        class: "tw-text-primary tw-text-left tw-py-1 tw-inline-block hover:tw-text-action-highlight hover:tw-underline",
+                        onClick: e[0] || (e[0] = (o) => l.openSection(l.savedSearchesTitle))
+                      }, x(l.savedSearchesTitle), 9, ne)) : (n(), s("span", se, " Saved searches "))
+                    ]),
+                    t("li", null, [
+                      d((n(), s("a", oe, e[7] || (e[7] = [
+                        m(" Countries I haven't lent to ")
+                      ]))), [
+                        [r, ["TopNav", "click-Lend-Countries_Not_Lent"]]
+                      ])
+                    ])
+                  ])
+                ])) : C("", !0)
+              ])
+            ])
+          ], 512),
+          t("div", le, [
+            l.sectionOpen ? (n(), s("button", {
+              key: 0,
+              class: "tw-flex",
+              onClick: e[1] || (e[1] = (o) => l.openedSection = "")
+            }, [
+              w(f, {
+                class: "tw-flex-shrink-0 tw-w-3 tw-h-3",
+                icon: l.mdiChevronLeft
+              }, null, 8, ["icon"]),
+              e[11] || (e[11] = t("span", { class: "tw-text-base" }, " Back ", -1))
+            ])) : C("", !0)
+          ]),
+          t("div", ie, [
+            l.isOpenSection(l.savedSearchesTitle) ? (n(), s(c, { key: 0 }, [
+              e[12] || (e[12] = t("h2", { class: "menu-heading tw-mb-2" }, " Saved Searches ", -1)),
+              w(_, {
+                class: "search-list tw-h-full",
+                searches: i.searches
+              }, null, 8, ["searches"])
+            ], 64)) : (n(), s(c, { key: 1 }, [
+              e[14] || (e[14] = t("h2", { class: "menu-heading tw-mb-2" }, " Regions ", -1)),
+              t("div", ae, [
+                t("ul", re, [
+                  i.isRegionsLoading ? (n(), s(c, { key: 0 }, h(8, (o) => t("li", {
+                    key: o,
+                    class: "link-item"
+                  }, [
+                    w(v, {
+                      class: "tw-inline-block tw-align-middle",
+                      style: { height: "1.25rem" }
+                    }),
+                    e[13] || (e[13] = t("span", { class: "tw-py-1 tw-inline-block" }, " ", -1))
+                  ])), 64)) : (n(!0), s(c, { key: 1 }, h(i.regions, (o) => (n(), s("li", {
+                    key: o.name,
+                    class: "link-item tw-mr-4"
+                  }, [
+                    d((n(), s("button", {
+                      "aria-pressed": l.isOpenSection(o.name) ? "true" : "false",
+                      class: O(["tw-text-primary tw-text-left tw-py-1 hover:tw-text-action-highlight hover:tw-underline", { "tw-text-action": l.isOpenSection(o.name) }]),
+                      onClick: (g) => l.openSection(o.name)
+                    }, [
+                      m(x(o.name), 1)
+                    ], 10, ce)), [
+                      [r, ["TopNav", "click-Lend-Region", o.name]]
+                    ])
+                  ]))), 128))
+                ]),
+                (n(!0), s(c, null, h(l.openRegions, (o) => (n(), s("div", {
+                  key: o.name,
+                  class: "tw-h-full"
+                }, [
+                  w(S, {
+                    countries: o.countries,
+                    class: "region-list tw-h-full"
+                  }, null, 8, ["countries"])
+                ]))), 128))
+              ])
+            ], 64))
+          ])
+        ]),
+        _: 1
+      })
+    ], 4)
+  ]);
+}
+const _e = /* @__PURE__ */ F(z, [["render", de], ["__scopeId", "data-v-28ab9362"]]);
+export {
+  _e as default
+};

package/dist/vue/KvWwwHeader/LendMenu/KvLendMenu.js

@@ -0,0 +1,155 @@
+import { gql as v } from "@apollo/client/core";
+import { toRefs as S, ref as a, computed as f, onMounted as x, resolveComponent as L, openBlock as A, createElementBlock as O, createVNode as I } from "vue";
+import R from "./KvLendListMenu.js";
+import B from "./KvLendMegaMenu.js";
+import { indexIn as E } from "../../../utils/comparators.js";
+import { groupBy as F, sortBy as M } from "../../../utils/arrayUtils.js";
+import N from "../../../_virtual/_plugin-vue_export-helper.js";
+const D = {
+  components: {
+    KvLendListMenu: R,
+    KvLendMegaMenu: B
+  },
+  emits: ["load-lend-menu-data"],
+  setup(y, { emit: h }) {
+    const {
+      userId: c
+    } = S(y), e = a([]), d = a([]), g = a(0), l = a([]), m = [
+      "North America",
+      "Central America",
+      "South America",
+      "Africa",
+      "Eastern Europe",
+      "Middle East",
+      "Asia",
+      "Oceania"
+    ], C = a(!0), p = a(!0), b = f(() => !!c.value), k = async (t) => {
+      var r, s, o, u;
+      if (t.watchQuery({
+        query: v`query countryFacets {
+					lend {
+						countryFacets {
+							count
+							country {
+								name
+								region
+								isoCode
+							}
+						}
+					}
+
+				}`
+      }).subscribe({
+        next: ({ data: n }) => {
+          var i;
+          d.value = ((i = n == null ? void 0 : n.lend) == null ? void 0 : i.countryFacets) ?? [], C.value = !1;
+        }
+      }), t.watchQuery({
+        query: v`
+					query lendMenuData {
+						lend {
+							loanChannels(popular: true, applyMinLoanCount: true, limit: 50) {
+								values {
+									id
+									name
+									url
+								}
+							}
+						}
+					}
+				`
+      }).subscribe({
+        next: ({ data: n }) => {
+          var i, _;
+          e.value = ((_ = (i = n == null ? void 0 : n.lend) == null ? void 0 : i.loanChannels) == null ? void 0 : _.values) ?? [], p.value = !1;
+        }
+      }), b.value) {
+        const { data: n } = await t.query({
+          query: v`
+						query lendMenuPrivateData($userId: Int!) {
+							lend {
+								loans(userId: $userId, limit: 0) {
+									totalCount
+								}
+							}
+							my {
+								savedSearches {
+									values {
+										id
+										name
+										url
+									}
+								}
+							}
+						}
+					`,
+          variables: {
+            userId: c
+          },
+          fetchPolicy: "network-only"
+        });
+        g.value = ((s = (r = n == null ? void 0 : n.lend) == null ? void 0 : r.loans) == null ? void 0 : s.totalCount) ?? 0, l.value = ((u = (o = n == null ? void 0 : n.my) == null ? void 0 : o.savedSearches) == null ? void 0 : u.values) ?? [];
+      }
+    }, q = f(() => {
+      const t = d.value.map((o) => ({
+        name: o.country.name,
+        region: o.country.region,
+        isoCode: o.country.isoCode.toLowerCase(),
+        count: o.count || 0
+      })), r = F(t, "region"), s = [];
+      for (const [o, u] of Object.entries(r))
+        s.push({
+          name: o,
+          countries: u.sort(M("name"))
+        });
+      return s.sort(E(m, "name"));
+    }), w = f(() => {
+      var r;
+      return ((r = e.value) == null ? void 0 : r.map((s) => {
+        const o = JSON.parse(JSON.stringify(s));
+        return o.url = o.url.replace("lend", "lend-by-category"), o;
+      })).sort(M("name"));
+    });
+    return x(() => {
+      h("load-lend-menu-data");
+    }), {
+      onLoad: k,
+      regions: q,
+      computedCategories: w,
+      userId: c,
+      isChannelsLoading: p,
+      isRegionsLoading: C,
+      savedSearches: l,
+      favoritesCount: g
+    };
+  }
+};
+function K(y, h, c, e, d, g) {
+  const l = L("kv-lend-list-menu"), m = L("kv-lend-mega-menu");
+  return A(), O("div", null, [
+    I(l, {
+      class: "lg:tw-hidden",
+      categories: e.computedCategories,
+      regions: e.regions,
+      "user-id": e.userId,
+      favorites: e.favoritesCount,
+      searches: e.savedSearches,
+      "is-regions-loading": e.isRegionsLoading,
+      "is-channels-loading": e.isChannelsLoading
+    }, null, 8, ["categories", "regions", "user-id", "favorites", "searches", "is-regions-loading", "is-channels-loading"]),
+    I(m, {
+      class: "tw-hidden lg:tw-block",
+      categories: e.computedCategories,
+      regions: e.regions,
+      "user-id": e.userId,
+      favorites: e.favoritesCount,
+      searches: e.savedSearches,
+      "is-regions-loading": e.isRegionsLoading,
+      "is-channels-loading": e.isChannelsLoading
+    }, null, 8, ["categories", "regions", "user-id", "favorites", "searches", "is-regions-loading", "is-channels-loading"])
+  ]);
+}
+const G = /* @__PURE__ */ N(D, [["render", K]]);
+export {
+  G as default
+};

package/dist/vue/KvWwwHeader/LendMenu/KvLendMenuCountryList.css

@@ -0,0 +1 @@
+.country-list-item[data-v-219fb066]{width:11rem}

package/dist/vue/KvWwwHeader/LendMenu/KvLendMenuCountryList.js

@@ -0,0 +1,38 @@
+import { resolveDirective as n, openBlock as e, createElementBlock as o, Fragment as c, renderList as a, withDirectives as l, createTextVNode as p, toDisplayString as r } from "vue";
+import "./KvLendMenuCountryList.css";
+import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+const d = {
+  name: "CountryList",
+  props: {
+    countries: {
+      type: Array,
+      default: () => []
+    }
+  }
+}, m = { class: "tw-whitespace-nowrap tw-font-medium" }, u = ["href"], f = {
+  key: 1,
+  class: "tw-block tw-py-1 tw-text-tertiary"
+};
+function w(h, k, s, v, y, x) {
+  const i = n("kv-track-event");
+  return e(), o("ul", m, [
+    (e(!0), o(c, null, a(s.countries, (t) => (e(), o("li", {
+      key: t.isoCode,
+      class: "country-list-item"
+    }, [
+      t.count > 0 ? l((e(), o("a", {
+        key: 0,
+        href: `/lend/filter?country=${t.isoCode}`,
+        class: "tw-text-primary hover:tw-text-action-highlight tw-block tw-w-full tw-py-1"
+      }, [
+        p(r(t.name) + " (" + r(t.count) + ") ", 1)
+      ], 8, u)), [
+        [i, ["TopNav", "click-Lend-Country", t.name]]
+      ]) : (e(), o("span", f, r(t.name) + " (0) ", 1))
+    ]))), 128))
+  ]);
+}
+const $ = /* @__PURE__ */ _(d, [["render", w], ["__scopeId", "data-v-219fb066"]]);
+export {
+  $ as default
+};

package/dist/vue/KvWwwHeader/LendMenu/KvLendMenuSearchList.js

@@ -0,0 +1,32 @@
+import { openBlock as e, createElementBlock as r, Fragment as a, renderList as l, createElementVNode as o, toDisplayString as i } from "vue";
+import c from "../../../_virtual/_plugin-vue_export-helper.js";
+const h = {
+  props: {
+    searches: {
+      type: Array,
+      default: () => []
+    }
+  }
+}, p = { class: "tw-font-book" }, d = ["href"];
+function f(u, s, n, w, m, _) {
+  return e(), r("ul", p, [
+    (e(!0), r(a, null, l(n.searches, (t) => (e(), r("li", {
+      key: t.id
+    }, [
+      o("a", {
+        class: "tw-text-primary hover:tw-text-action-highlight tw-block tw-w-full tw-py-1",
+        href: t.url
+      }, i(t.name), 9, d)
+    ]))), 128)),
+    s[0] || (s[0] = o("li", null, [
+      o("a", {
+        class: "tw-text-primary hover:tw-text-action-highlight tw-block tw-w-full tw-py-1",
+        href: "/lend/saved-search"
+      }, " Manage saved searches ")
+    ], -1))
+  ]);
+}
+const x = /* @__PURE__ */ c(h, [["render", f]]);
+export {
+  x as default
+};

package/dist/vue/KvWwwHeader.css

@@ -0,0 +1 @@
+.header-margins[data-v-a88a61eb]{margin:0 auto;max-width:1400px}.header-fade-enter-active[data-v-a88a61eb]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-a88a61eb]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-a88a61eb],.header-fade-leave-to[data-v-a88a61eb]{opacity:0}.header-fade-leave[data-v-a88a61eb],.header-fade-enter-to[data-v-a88a61eb]{opacity:1}.bg-opacity-50[data-v-a88a61eb]{background-color:rgba(var(--bg-action-highlight),.5)}