@kiva/kv-components 10.2.1 → 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/dist/vue/KvSwitch.js

@@ -1,17 +1,17 @@
-import s from "./KvSwitch2.js";
-import { openBlock as w, createElementBlock as a, normalizeStyle as d, normalizeClass as r, createElementVNode as i, mergeProps as c, toHandlers as f, withModifiers as u, renderSlot as h } from "vue";
+import n from "./KvSwitch2.js";
+import { openBlock as a, createElementBlock as c, normalizeStyle as d, normalizeClass as i, createElementVNode as t, mergeProps as w, toHandlers as f, withModifiers as u, renderSlot as h } from "vue";
 import m from "../_virtual/_plugin-vue_export-helper.js";
-const b = ["for"], v = ["id", "checked", "disabled"], p = { class: "tw-flex-1 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action" };
-function g(o, t, l, e, k, x) {
-  return w(), a("div", {
-    class: r(e.classes),
+const b = ["for"], v = ["id", "checked", "disabled"], g = { class: "tw-flex-1 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action" };
+function _(r, o, l, e, p, k) {
+  return a(), c("div", {
+    class: i(e.classes),
     style: d(e.styles)
   }, [
-    i("label", {
-      class: r(["tw-inline-flex tw-gap-2 tw-items-center tw-relative hover:tw-cursor-pointer", { "tw-opacity-low": l.disabled }]),
+    t("label", {
+      class: i(["tw-inline-flex tw-gap-2 tw-items-center tw-relative hover:tw-cursor-pointer", { "tw-opacity-low": l.disabled }]),
       for: e.uuid
     }, [
-      i("input", c({ id: e.uuid }, e.inputAttrs, {
+      t("input", w({ id: e.uuid }, e.inputAttrs, {
         ref: "switchRef",
         class: "tw-sr-only tw-peer",
         type: "checkbox",
@@ -19,17 +19,21 @@ function g(o, t, l, e, k, x) {
         checked: l.modelValue,
         disabled: l.disabled
       }, f(e.inputListeners, !0), {
-        onChange: t[0] || (t[0] = u((...n) => e.onChange && e.onChange(...n), ["prevent"]))
+        onChange: o[0] || (o[0] = u((...s) => e.onChange && e.onChange(...s), ["prevent"]))
       }), null, 16, v),
-      t[1] || (t[1] = i("div", { class: "tw-w-7 tw-h-4 tw-rounded-full tw-relative tw-overflow-hidden peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action tw-bg-tertiary peer-checked:tw-bg-action tw-transition-all tw-ease-in-out" }, null, -1)),
-      t[2] || (t[2] = i("div", { class: "tw-flex-shrink-0 tw-w-3 tw-h-3 tw-absolute tw-m-0.5 tw-top-0 tw-rounded-full tw-bg-white tw-transform tw-transition-all tw-ease-in-out peer-checked:tw-translate-x-3" }, null, -1)),
-      i("div", p, [
-        h(o.$slots, "default")
+      t("div", {
+        class: i(["tw-rounded-full tw-relative tw-overflow-hidden peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action tw-bg-tertiary peer-checked:tw-bg-action tw-transition-all tw-ease-in-out", e.trackSizeClasses])
+      }, null, 2),
+      t("div", {
+        class: i(["tw-flex-shrink-0 tw-absolute tw-m-0.5 tw-top-0 tw-rounded-full tw-bg-white tw-transform tw-transition-all tw-ease-in-out", e.knobSizeClasses])
+      }, null, 2),
+      t("div", g, [
+        h(r.$slots, "default")
       ])
     ], 10, b)
   ], 6);
 }
-const S = /* @__PURE__ */ m(s, [["render", g]]);
+const S = /* @__PURE__ */ m(n, [["render", _]]);
 export {
   S as default
 };

package/dist/vue/KvSwitch.vue.d.ts

@@ -7,6 +7,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator(value: string): boolean;
+    };
 }>, {
     uuid: import('vue').Ref<string, string>;
     onChange: (event: any) => void;
@@ -16,6 +21,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     styles: any[];
     inputAttrs: any;
     inputListeners: any;
+    trackSizeClasses: import('vue').ComputedRef<"tw-w-6 tw-h-3.5" | "tw-w-7 tw-h-4">;
+    knobSizeClasses: import('vue').ComputedRef<"tw-w-2.5 tw-h-2.5 peer-checked:tw-translate-x-2.5" | "tw-w-3 tw-h-3 peer-checked:tw-translate-x-3">;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, string[], string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
@@ -25,10 +32,16 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator(value: string): boolean;
+    };
 }>> & Readonly<{
     [x: `on${Capitalize<string>}`]: (...args: any[]) => any;
 }>, {
     disabled: boolean;
+    size: string;
     modelValue: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/vue/KvSwitch2.js

@@ -1,7 +1,7 @@
-import { ref as o, onMounted as v } from "vue";
-import { nanoid as l } from "nanoid";
+import { ref as a, computed as o, onMounted as z } from "vue";
+import { nanoid as u } from "nanoid";
 import { useAttrs as V } from "../utils/attrs.js";
-const u = [
+const n = [
   "update:modelValue"
 ], A = {
   inheritAttrs: !1,
@@ -24,33 +24,49 @@ const u = [
     disabled: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Size of the switch.
+     * `default` renders a 56x32px track (`tw-w-7 tw-h-4`) with a 24px
+     * knob (`tw-w-3 tw-h-3`) travelling 24px when checked.
+     * `small` renders a 48x28px track (`tw-w-6 tw-h-3.5`) with a 20px
+     * knob (`tw-w-2.5 tw-h-2.5`) travelling 20px when checked.
+     */
+    size: {
+      type: String,
+      default: "default",
+      validator(e) {
+        return ["default", "small"].includes(e);
+      }
     }
   },
-  emits: u,
-  setup(h, e) {
-    const { emit: a } = e, t = o(`kvs-${l(10)}`), s = o(null), {
-      classes: n,
-      styles: r,
-      inputAttrs: d,
-      inputListeners: p
-    } = V(e, u), c = (f) => {
-      a("update:modelValue", f.target.checked);
-    }, i = () => {
-      s.value.focus();
-    }, m = () => {
-      s.value.blur();
+  emits: n,
+  setup(e, t) {
+    const { emit: r } = t, s = a(`kvs-${u(10)}`), l = a(null), {
+      classes: d,
+      styles: c,
+      inputAttrs: i,
+      inputListeners: m
+    } = V(t, n), p = o(() => e.size === "small" ? "tw-w-6 tw-h-3.5" : "tw-w-7 tw-h-4"), f = o(() => e.size === "small" ? "tw-w-2.5 tw-h-2.5 peer-checked:tw-translate-x-2.5" : "tw-w-3 tw-h-3 peer-checked:tw-translate-x-3"), w = (v) => {
+      r("update:modelValue", v.target.checked);
+    }, h = () => {
+      l.value.focus();
+    }, k = () => {
+      l.value.blur();
     };
-    return v(() => {
-      t.value = `kvs-${l(10)}`;
+    return z(() => {
+      s.value = `kvs-${u(10)}`;
     }), {
-      uuid: t,
-      onChange: c,
-      focus: i,
-      blur: m,
-      classes: n,
-      styles: r,
-      inputAttrs: d,
-      inputListeners: p
+      uuid: s,
+      onChange: w,
+      focus: h,
+      blur: k,
+      classes: d,
+      styles: c,
+      inputAttrs: i,
+      inputListeners: m,
+      trackSizeClasses: p,
+      knobSizeClasses: f
     };
   }
 };

package/package.json

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