@kiva/kv-components 10.3.0 → 10.4.0

package/dist/vue/KvSecondaryNav.css

@@ -1 +1 @@
-.kv-secondary-nav-holder[data-v-230060bf]{height:62px}.kv-secondary-nav[data-v-230060bf]{min-height:62px}
+.kv-secondary-nav-holder[data-v-0dd9683b]{height:62px}.kv-secondary-nav[data-v-0dd9683b]{min-height:62px}

package/dist/vue/KvSecondaryNav.js

@@ -1,69 +1,74 @@
 import x from "./KvSecondaryNav2.js";
-import { resolveComponent as l, openBlock as i, createBlock as d, withCtx as o, createElementVNode as r, normalizeClass as a, createVNode as v, createElementBlock as c, resolveDynamicComponent as s, createTextVNode as m, toDisplayString as _, createCommentVNode as u, Fragment as y, renderList as b } from "vue";
+import { resolveComponent as d, openBlock as a, createBlock as c, withCtx as l, createElementVNode as r, normalizeClass as i, createVNode as s, createElementBlock as o, resolveDynamicComponent as v, Fragment as m, createTextVNode as g, toDisplayString as h, createCommentVNode as y, renderList as b } from "vue";
 import "./KvSecondaryNav.css";
 import C from "../_virtual/_plugin-vue_export-helper.js";
-const L = { class: "kv-secondary-nav__links tw-flex tw-flex-col md:tw-flex-row tw-items-center tw-gap-3" };
-function N(p, w, t, e, E, A) {
-  const g = l("kv-material-icon"), h = l("kv-page-container"), k = l("kv-theme-provider");
-  return i(), d(k, { theme: e.themeStyle }, {
-    default: o(() => [
+const L = ["src", "alt"], N = { class: "kv-secondary-nav__links tw-flex tw-flex-col md:tw-flex-row tw-items-center tw-gap-3" };
+function E(I, w, t, e, A, H) {
+  const _ = d("kv-material-icon"), k = d("kv-page-container"), f = d("kv-theme-provider");
+  return a(), c(f, { theme: e.themeStyle }, {
+    default: l(() => [
       r("div", {
-        class: a(["tw-z-1 tw-w-full kv-secondary-nav-holder relative tw-text-primary", e.bgClass])
+        class: i(["tw-z-1 tw-w-full kv-secondary-nav-holder relative tw-text-primary", e.bgClass])
       }, [
         r("div", {
-          class: a(["tw-w-full tw-overflow-x-auto kv-secondary-nav tw-absolute tw-top-0 tw-left-0 tw-right-0", e.bgClass])
+          class: i(["tw-w-full tw-overflow-x-auto kv-secondary-nav tw-absolute tw-top-0 tw-left-0 tw-right-0", e.bgClass])
         }, [
-          v(h, null, {
-            default: o(() => [
+          s(k, null, {
+            default: l(() => [
               r("div", {
                 ref: "navInner",
-                class: a(["kv-secondary-nav__inner tw-flex tw-gap-2 md:tw-gap-4 tw-items-center tw-flex-wrap tw-py-2", e.navAlignmentClass])
+                class: i(["kv-secondary-nav__inner tw-flex tw-gap-2 md:tw-gap-4 tw-items-center tw-flex-wrap tw-py-2", e.navAlignmentClass])
               }, [
-                t.heading && t.heading.length > 0 ? (i(), c("div", {
+                e.hasHeadingContent ? (a(), o("div", {
                   key: 0,
-                  class: a(["kv-secondary-nav__heading-container", { "tw-block md:tw-hidden": t.linkAlignment === "left" || t.linkAlignment === "center" }])
+                  class: i(["kv-secondary-nav__heading-container", { "tw-block md:tw-hidden": t.linkAlignment === "left" || t.linkAlignment === "center" }])
                 }, [
-                  (i(), d(s(e.hasHeadingLink ? t.headingLink.isExternal ? "a" : "router-link" : "div"), {
+                  (a(), c(v(e.hasHeadingLink ? t.headingLink.isExternal ? "a" : "router-link" : "div"), {
                     to: e.hasHeadingLink ? t.headingLink.isExternal ? void 0 : t.headingLink.href : void 0,
                     href: e.hasHeadingLink && t.headingLink.isExternal ? t.headingLink.href : void 0,
-                    class: a(["kv-secondary-nav__heading tw-text-h3 tw-text-primary tw-bg-transparent tw-border-none tw-no-underline", {
-                      "tw-cursor-pointer": e.hasHeadingLink
-                    }])
+                    class: i(["kv-secondary-nav__heading tw-text-h3 tw-text-primary tw-bg-transparent tw-border-none tw-no-underline", { "tw-cursor-pointer": e.hasHeadingLink }])
                   }, {
-                    default: o(() => [
-                      m(_(t.heading), 1)
+                    default: l(() => [
+                      t.headingImage && t.headingImage.url ? (a(), o("img", {
+                        key: 0,
+                        src: t.headingImage.url,
+                        alt: t.headingImage.alt || t.heading,
+                        class: "tw-max-h-2.5 tw-w-auto"
+                      }, null, 8, L)) : (a(), o(m, { key: 1 }, [
+                        g(h(t.heading), 1)
+                      ], 64))
                     ]),
                     _: 1
                   }, 8, ["to", "href", "class"]))
-                ], 2)) : u("", !0),
+                ], 2)) : y("", !0),
                 r("button", {
                   class: "kv-secondary-nav__toggle tw-flex md:tw-hidden tw-text-primary tw-bg-transparent tw-border-none tw-cursor-pointer",
                   onClick: w[0] || (w[0] = (...n) => e.toggleSubNavigation && e.toggleSubNavigation(...n))
                 }, [
-                  v(g, {
+                  s(_, {
                     icon: e.subNavigationOpen ? e.mdiChevronUp : e.mdiChevronDown
                   }, null, 8, ["icon"])
                 ]),
                 r("div", {
                   ref: "subNavigation",
-                  class: a(["kv-secondary-nav__links-container tw-pt-1 md:tw-pt-0 md:tw-block tw-w-full md:tw-w-auto", { "tw-hidden": !e.subNavigationOpen }])
+                  class: i(["kv-secondary-nav__links-container tw-pt-1 md:tw-pt-0 md:tw-block tw-w-full md:tw-w-auto", { "tw-hidden": !e.subNavigationOpen }])
                 }, [
-                  r("ul", L, [
-                    (i(!0), c(y, null, b(t.links, (n, f) => (i(), c("li", {
-                      key: f,
+                  r("ul", N, [
+                    (a(!0), o(m, null, b(t.links, (n, u) => (a(), o("li", {
+                      key: u,
                       class: "kv-secondary-nav__link-item tw-w-full md:tw-w-auto"
                     }, [
-                      (i(), d(s(n.isExternal ? "a" : "router-link"), {
+                      (a(), c(v(n.isExternal ? "a" : "router-link"), {
                         to: n.isExternal ? void 0 : n.href,
                         href: n.isExternal ? n.href : void 0,
-                        class: a([{
+                        class: i([{
                           "tw-underline": n.isActive,
                           "tw-no-underline": !n.isActive
                         }, "kv-secondary-nav__link tw-py-2 md:tw-py-n tw-text-primary tw-font-medium hover:tw-underline hover:tw-text-primary tw-cursor-pointer"]),
                         onClick: (S) => e.handleLinkClick(n)
                       }, {
-                        default: o(() => [
-                          m(_(n.text), 1)
+                        default: l(() => [
+                          g(h(n.text), 1)
                         ]),
                         _: 2
                       }, 1032, ["to", "href", "class", "onClick"]))
@@ -80,7 +85,7 @@ function N(p, w, t, e, E, A) {
     _: 1
   }, 8, ["theme"]);
 }
-const z = /* @__PURE__ */ C(x, [["render", N], ["__scopeId", "data-v-230060bf"]]);
+const O = /* @__PURE__ */ C(x, [["render", E], ["__scopeId", "data-v-0dd9683b"]]);
 export {
-  z as default
+  O as default
 };

package/dist/vue/KvSecondaryNav.vue.d.ts

@@ -32,8 +32,16 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: string;
         validator(value: string): boolean;
     };
+    headingImage: {
+        type: PropType<{
+            url?: string;
+            alt?: string;
+        }>;
+        default: () => {};
+    };
 }>, {
     hasHeadingLink: import('vue').ComputedRef<string>;
+    hasHeadingContent: import('vue').ComputedRef<boolean>;
     navAlignmentClass: import('vue').ComputedRef<"" | "tw-justify-between" | "tw-justify-between md:tw-justify-end" | "tw-justify-between md:tw-justify-start" | "tw-justify-between md:tw-justify-center">;
     toggleSubNavigation: () => void;
     subNavigationOpen: import('vue').Ref<boolean, boolean>;
@@ -69,6 +77,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: string;
         validator(value: string): boolean;
     };
+    headingImage: {
+        type: PropType<{
+            url?: string;
+            alt?: string;
+        }>;
+        default: () => {};
+    };
 }>> & Readonly<{
     onSubnavLinkClicked?: (...args: any[]) => any;
 }>, {
@@ -77,6 +92,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     heading: string;
     headingLink: NavLink;
     linkAlignment: string;
+    headingImage: {
+        url?: string;
+        alt?: string;
+    };
 }, {}, {
     KvThemeProvider: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
         tag: {

package/dist/vue/KvSecondaryNav2.js

@@ -1,15 +1,15 @@
-import { toRefs as c, ref as g, computed as n } from "vue";
-import { stoneLightTheme as y, marigoldLightTheme as p, greenDarkTheme as b, greenLightTheme as v, defaultTheme as w } from "@kiva/kv-tokens";
-import { mdiChevronDown as k, mdiChevronUp as L } from "@mdi/js";
-import C from "./KvThemeProvider.js";
-import j from "./KvMaterialIcon.js";
-import O from "./KvPageContainer.js";
+import { toRefs as p, computed as n, ref as g } from "vue";
+import { stoneLightTheme as b, marigoldLightTheme as v, greenDarkTheme as w, greenLightTheme as k, defaultTheme as C } from "@kiva/kv-tokens";
+import { mdiChevronDown as L, mdiChevronUp as j } from "@mdi/js";
+import O from "./KvThemeProvider.js";
+import S from "./KvMaterialIcon.js";
+import P from "./KvPageContainer.js";
 const _ = {
   name: "KvSecondaryNav",
   components: {
-    KvThemeProvider: C,
-    KvMaterialIcon: j,
-    KvPageContainer: O
+    KvThemeProvider: O,
+    KvMaterialIcon: S,
+    KvPageContainer: P
   },
   props: {
     heading: {
@@ -52,6 +52,10 @@ const _ = {
           "stoneLight"
         ].includes(e);
       }
+    },
+    headingImage: {
+      type: Object,
+      default: () => ({})
     }
   },
   emits: [
@@ -59,34 +63,39 @@ const _ = {
   ],
   setup(e, { emit: r }) {
     const {
-      heading: l,
-      linkAlignment: a,
-      theme: s
-    } = c(e), u = g(null), i = g(!1), m = n(() => e.headingLink && e.headingLink.href), d = n(() => a.value === "right" ? l.value && l.value.length > 0 ? "tw-justify-between" : "tw-justify-between md:tw-justify-end" : a.value === "left" ? "tw-justify-between md:tw-justify-start" : a.value === "center" ? "tw-justify-between md:tw-justify-center" : ""), o = {
-      default: { style: w, bgClass: "tw-bg-secondary" },
-      greenLight: { style: v, bgClass: "tw-bg-secondary" },
-      greenDark: { style: b, bgClass: "tw-bg-primary" },
-      marigoldLight: { style: p, bgClass: "tw-bg-primary" },
-      stoneLight: { style: y, bgClass: "tw-bg-primary" }
-    }, h = n(() => {
+      heading: a,
+      linkAlignment: i,
+      theme: s,
+      headingImage: u
+    } = p(e), d = n(() => {
+      var t;
+      return a.value && a.value.length > 0 || !!((t = u.value) != null && t.url);
+    }), h = g(null), l = g(!1), m = n(() => e.headingLink && e.headingLink.href), c = n(() => i.value === "right" ? a.value && a.value.length > 0 ? "tw-justify-between" : "tw-justify-between md:tw-justify-end" : i.value === "left" ? "tw-justify-between md:tw-justify-start" : i.value === "center" ? "tw-justify-between md:tw-justify-center" : ""), o = {
+      default: { style: C, bgClass: "tw-bg-secondary" },
+      greenLight: { style: k, bgClass: "tw-bg-secondary" },
+      greenDark: { style: w, bgClass: "tw-bg-primary" },
+      marigoldLight: { style: v, bgClass: "tw-bg-primary" },
+      stoneLight: { style: b, bgClass: "tw-bg-primary" }
+    }, f = n(() => {
       var t;
       return (t = o[s.value]) == null ? void 0 : t.style;
-    }), f = n(() => {
+    }), y = n(() => {
       var t;
       return ((t = o[s.value]) == null ? void 0 : t.bgClass) ?? "tw-bg-primary";
     });
     return {
       hasHeadingLink: m,
-      navAlignmentClass: d,
+      hasHeadingContent: d,
+      navAlignmentClass: c,
       toggleSubNavigation: () => {
-        i.value = !i.value;
+        l.value = !l.value;
       },
-      subNavigationOpen: i,
-      mdiChevronUp: L,
-      mdiChevronDown: k,
-      subNavigation: u,
-      themeStyle: h,
-      bgClass: f,
+      subNavigationOpen: l,
+      mdiChevronUp: j,
+      mdiChevronDown: L,
+      subNavigation: h,
+      themeStyle: f,
+      bgClass: y,
       handleLinkClick: (t) => {
         r("subnavLinkClicked", t);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "10.3.0",
+  "version": "10.4.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -112,5 +112,5 @@
   "dependencies": {
     "fuse.js": "^7.1.0"
   },
-  "gitHead": "85947c6f6991c7ef893d142a4aac78afe3017d06"
+  "gitHead": "85f612013133d5c2488e0ea23e81c576d1d1663f"
 }