@kiva/kv-components 8.8.0 → 8.9.0

package/dist/vue/KvContentfulImg.js

@@ -1,94 +1,95 @@
-import u from "./KvContentfulImg2.js";
-import { openBlock as e, createElementBlock as h, createElementVNode as f, Fragment as c, renderList as w, createCommentVNode as n, normalizeStyle as o, createTextVNode as r, toDisplayString as m } from "vue";
-import x from "../_virtual/_plugin-vue_export-helper.js";
+import w from "./KvContentfulImg2.js";
+import { openBlock as e, createElementBlock as a, createElementVNode as h, Fragment as c, renderList as o, createCommentVNode as r, normalizeStyle as f, createTextVNode as m, toDisplayString as s } from "vue";
+import u from "../_virtual/_plugin-vue_export-helper.js";
 const b = {
   key: 0,
   class: "tw-inline-block tw-not-prose"
-}, g = {
+}, x = {
   class: "tw-h-full tw-w-full",
   style: { "object-fit": "inherit" }
-}, y = ["media", "width", "height", "srcset"], s = ["media", "width", "height", "srcset"], _ = ["src", "alt", "loading"], k = ["srcset"], q = ["srcset", "src", "width", "height", "alt", "loading"], Q = {
+}, F = ["media", "width", "height", "srcset"], y = ["media", "width", "height", "srcset"], g = ["src", "alt", "loading"], k = ["srcset"], _ = ["srcset", "src", "width", "height", "alt", "loading"], P = {
   key: 0,
   class: "tw-inline-block tw-mr-0.5 tw-align-middle",
   "aria-hidden": "true",
   role: "img"
 };
-function U(F, a, t, i, S, v) {
-  return (t.width || t.height) && t.contentfulSrc ? (e(), h("figure", b, [
-    f("picture", g, [
-      t.sourceSizes.length > 0 ? (e(), h(c, { key: 0 }, [
-        (e(!0), h(c, null, w(t.sourceSizes, (l, d) => (e(), h("source", {
+function v(Q, n, i, t, U, S) {
+  return (i.width || i.height) && i.contentfulSrc ? (e(), a("figure", b, [
+    h("picture", x, [
+      i.sourceSizes.length > 0 ? (e(), a(c, { key: 0 }, [
+        t.isAnimatedGif ? r("", !0) : (e(!0), a(c, { key: 0 }, o(i.sourceSizes, (l, d) => (e(), a("source", {
           key: "webp-image" + d,
           media: "(" + l.media + ")",
           type: "image/webp",
           width: l.width ? l.width : null,
           height: l.height ? l.height : null,
           srcset: `
-						${i.buildUrl(l, 2)}&fit=${t.fit}&f=${t.focus}&fm=webp&q=${i.setQuality(l.width, "2x")} 2x,
-						${i.buildUrl(l)}&fit=${t.fit}&f=${t.focus}&fm=webp&q=${i.setQuality(l.width, "1x")} 1x`
-        }, null, 8, y))), 128)),
-        (e(!0), h(c, null, w(t.sourceSizes, (l, d) => (e(), h("source", {
+							${t.buildUrl(l, 2)}${t.fitFocusParams}&fm=webp&q=${t.setQuality(l.width, "2x")} 2x,
+							${t.buildUrl(l)}${t.fitFocusParams}&fm=webp&q=${t.setQuality(l.width, "1x")} 1x`
+        }, null, 8, F))), 128)),
+        (e(!0), a(c, null, o(i.sourceSizes, (l, d) => (e(), a("source", {
           key: "fallback-image" + d,
           media: "(" + l.media + ")",
           width: l.width ? l.width : null,
           height: l.height ? l.height : null,
           srcset: `
-						${i.buildUrl(l, 2)}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(l.width, "2x")} 2x,
-						${i.buildUrl(l)}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(l.width, "1x")} 1x`
-        }, null, 8, s))), 128)),
-        f("img", {
+						${t.buildUrl(l, 2)}${t.fitFocusParams}${t.buildFormatQualityParams(t.effectiveFallbackFormat, l.width, "2x")} 2x,
+						${t.buildUrl(l)}${t.fitFocusParams}${t.buildFormatQualityParams(t.effectiveFallbackFormat, l.width, "1x")} 1x`
+        }, null, 8, y))), 128)),
+        h("img", {
           class: "tw-max-w-full tw-max-h-full",
           style: { width: "inherit", height: "inherit", "object-fit": "inherit" },
-          src: `${i.buildUrl()}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(t.width, "1x")}`,
-          alt: i.caption || t.alt,
-          loading: t.loading
-        }, null, 8, _)
-      ], 64)) : n("", !0),
-      t.sourceSizes.length === 0 ? (e(), h(c, { key: 1 }, [
-        f("source", {
+          src: `${t.buildUrl()}${t.fitFocusParams}${t.buildFormatQualityParams(t.effectiveFallbackFormat, i.width, "1x")}`,
+          alt: t.caption || i.alt,
+          loading: i.loading
+        }, null, 8, g)
+      ], 64)) : r("", !0),
+      i.sourceSizes.length === 0 ? (e(), a(c, { key: 1 }, [
+        t.isAnimatedGif ? r("", !0) : (e(), a("source", {
+          key: 0,
           type: "image/webp",
           srcset: `
-						${i.buildUrl(null, 2)}&fit=${t.fit}&f=${t.focus}&fm=webp&q=${i.setQuality(t.width, "2x")} 2x,
-						${i.buildUrl()}&fit=${t.fit}&f=${t.focus}&fm=webp&q=${i.setQuality(t.width, "1x")} 1x`
-        }, null, 8, k),
-        f("img", {
+						${t.buildUrl(null, 2)}${t.fitFocusParams}&fm=webp&q=${t.setQuality(i.width, "2x")} 2x,
+						${t.buildUrl()}${t.fitFocusParams}&fm=webp&q=${t.setQuality(i.width, "1x")} 1x`
+        }, null, 8, k)),
+        h("img", {
           class: "tw-max-w-full tw-max-h-full",
           style: { width: "inherit", height: "inherit", "object-fit": "inherit" },
           srcset: `
-						${i.buildUrl(null, 2)}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(t.width, "2x")} 2x,
-						${i.buildUrl()}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(t.width, "1x")} 1x`,
-          src: `${i.buildUrl()}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(t.width, "1x")}`,
-          width: t.width ? t.width : null,
-          height: t.height ? t.height : null,
-          alt: i.caption || t.alt,
-          loading: t.loading
-        }, null, 8, q)
-      ], 64)) : n("", !0)
+						${t.buildUrl(null, 2)}${t.fitFocusParams}${t.buildFormatQualityParams(t.effectiveFallbackFormat, i.width, "2x")} 2x,
+						${t.buildUrl()}${t.fitFocusParams}${t.buildFormatQualityParams(t.effectiveFallbackFormat, i.width, "1x")} 1x`,
+          src: `${t.buildUrl()}${t.fitFocusParams}${t.buildFormatQualityParams(t.effectiveFallbackFormat, i.width, "1x")}`,
+          width: i.width ? i.width : null,
+          height: i.height ? i.height : null,
+          alt: t.caption || i.alt,
+          loading: i.loading
+        }, null, 8, _)
+      ], 64)) : r("", !0)
     ]),
-    i.caption ? (e(), h("figcaption", {
+    t.caption ? (e(), a("figcaption", {
       key: 0,
       class: "tw-italic tw-my-1.5 tw-break-words tw-max-w-full tw-font-book tw-text-action-highlight",
-      style: o({ maxWidth: t.width ? `${t.width}px` : void 0 })
+      style: f({ maxWidth: i.width ? `${i.width}px` : void 0 })
     }, [
-      i.removeLeafIcon ? n("", !0) : (e(), h("span", Q, a[0] || (a[0] = [
-        f("svg", {
+      t.removeLeafIcon ? r("", !0) : (e(), a("span", P, n[0] || (n[0] = [
+        h("svg", {
           width: "16",
           height: "12",
           viewBox: "0 0 16 12",
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          f("path", {
+          h("path", {
             d: "M1.04689 11.2079C13.06 11.2079 15.8778 1.63084 15.8778 -1.6347e-07L14.831 -1.52692e-07C2.82661 -2.91013e-08 9.85148e-08 9.56873 1.15391e-07 11.2079L1.04689 11.2079Z",
             fill: "currentColor"
           })
         ], -1)
       ]))),
-      r(" " + m(i.caption), 1)
-    ], 4)) : n("", !0)
-  ])) : n("", !0);
+      m(" " + s(t.caption), 1)
+    ], 4)) : r("", !0)
+  ])) : r("", !0);
 }
-const j = /* @__PURE__ */ x(u, [["render", U]]);
+const L = /* @__PURE__ */ u(w, [["render", v]]);
 export {
-  j as default
+  L as default
 };

package/dist/vue/KvContentfulImg.vue.d.ts

@@ -12,7 +12,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     fallbackFormat: {
         type: StringConstructor;
-        default: string;
+        default: any;
         validator(value: string): boolean;
     };
     width: {
@@ -48,8 +48,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: () => any[];
     };
 }>, {
-    buildUrl: (image?: any, multiplier?: number) => string;
+    buildFormatQualityParams: (format: string, imgWidth: string | number, scale: string) => string;
+    buildUrl: (image?: any, multiplier?: number) => any;
     caption: import('vue').ComputedRef<string>;
+    effectiveFallbackFormat: import('vue').ComputedRef<string>;
+    fitFocusParams: import('vue').ComputedRef<string>;
+    isAnimatedGif: import('vue').ComputedRef<boolean>;
     removeLeafIcon: import('vue').ComputedRef<boolean>;
     setQuality: (imgWidth: string | number, imgScale: string) => 65 | 95 | 80;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -59,7 +63,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     fallbackFormat: {
         type: StringConstructor;
-        default: string;
+        default: any;
         validator(value: string): boolean;
     };
     width: {

package/dist/vue/KvContentfulImg2.js

@@ -1,5 +1,5 @@
-import { toRefs as v, computed as f } from "vue";
-const S = {
+import { toRefs as x, computed as i } from "vue";
+const F = {
   props: {
     /**
      * Large, uncompressed image url that you get back from contentful.
@@ -10,11 +10,12 @@ const S = {
     },
     /**
      * If the browser can't support webp we fallback to this image format.
-     * `jpg, png, webp`
+     * Defaults to the format derived from the source URL: gif→gif, png→png, jpg→jpg, webp→jpg.
+     * `jpg, png, gif`
     * */
     fallbackFormat: {
       type: String,
-      default: "jpg",
+      default: null,
       validator(e) {
         return e === null || ["jpg", "png", "gif"].indexOf(e) !== -1;
       }
@@ -92,28 +93,42 @@ const S = {
   },
   setup(e) {
     const {
-      alt: n,
-      contentfulSrc: o,
-      width: c,
-      height: d
-    } = v(e), p = (t = null, u = 1) => {
-      let i = t && t.url ? `${t.url}?` : `${o.value}?`, r = t ? t.width : c.value, l = t ? t.height : d.value, a;
-      return r >= 2e3 && (a = r / 1999, r = 1999, l = Math.round(l / a)), l >= 2e3 && (a = l / 1999, l = 1999, r = Math.round(r / a)), r && (i += `w=${r * u}`), r && l && (i += "&"), l && (i += `h=${l * u}`), i;
-    }, s = (t, u) => u === "2x" ? 65 : t && parseInt(t.toString(), 10) < 200 ? 95 : 80, h = f(() => {
-      if (n.value && n.value.charAt(0) === "^") {
-        const t = n.value.charAt(1) === "#" ? 2 : 1;
-        return n.value.slice(t).trim();
+      alt: a,
+      contentfulSrc: s,
+      width: p,
+      height: h
+    } = x(e), f = i(() => {
+      var r;
+      return (((r = s.value) == null ? void 0 : r.split("?")[0]) ?? "").toLowerCase().endsWith(".gif");
+    }), g = i(() => {
+      var r, u;
+      if (e.fallbackFormat) return e.fallbackFormat;
+      const t = (u = (r = s.value) == null ? void 0 : r.split("?")[0].split(".").pop()) == null ? void 0 : u.toLowerCase();
+      return t === "png" ? "png" : t === "gif" ? "gif" : "jpg";
+    }), v = i(() => f.value ? "" : `&fit=${e.fit}&f=${e.focus}`), m = (t = null, r = 1) => {
+      const u = t && t.url ? t.url : s.value;
+      if (f.value) return u;
+      let o = `${u}?`, l = t ? t.width : p.value, n = t ? t.height : h.value, c;
+      return l >= 2e3 && (c = l / 1999, l = 1999, n = Math.round(n / c)), n >= 2e3 && (c = n / 1999, n = 1999, l = Math.round(l / c)), l && (o += `w=${l * r}`), l && n && (o += "&"), n && (o += `h=${n * r}`), o;
+    }, d = (t, r) => r === "2x" ? 65 : t && parseInt(t.toString(), 10) < 200 ? 95 : 80, b = (t, r, u) => f.value ? "" : `&fm=${t}&q=${d(r, u)}`, y = i(() => {
+      if (a.value && a.value.charAt(0) === "^") {
+        const t = a.value.charAt(1) === "#" ? 2 : 1;
+        return a.value.slice(t).trim();
       }
       return "";
-    }), g = f(() => !!(n.value && n.value.charAt(1) === "#"));
+    }), S = i(() => !!(a.value && a.value.charAt(1) === "#"));
     return {
-      buildUrl: p,
-      caption: h,
-      removeLeafIcon: g,
-      setQuality: s
+      buildFormatQualityParams: b,
+      buildUrl: m,
+      caption: y,
+      effectiveFallbackFormat: g,
+      fitFocusParams: v,
+      isAnimatedGif: f,
+      removeLeafIcon: S,
+      setQuality: d
     };
   }
 };
 export {
-  S as default
+  F as default
 };

package/dist/vue/KvImpactVerticalSelector.vue.d.ts

@@ -182,7 +182,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         };
         fallbackFormat: {
             type: StringConstructor;
-            default: string;
+            default: any;
             validator(value: string): boolean;
         };
         width: {
@@ -218,8 +218,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             default: () => any[];
         };
     }>, {
-        buildUrl: (image?: any, multiplier?: number) => string;
+        buildFormatQualityParams: (format: string, imgWidth: string | number, scale: string) => string;
+        buildUrl: (image?: any, multiplier?: number) => any;
         caption: import('vue').ComputedRef<string>;
+        effectiveFallbackFormat: import('vue').ComputedRef<string>;
+        fitFocusParams: import('vue').ComputedRef<string>;
+        isAnimatedGif: import('vue').ComputedRef<boolean>;
         removeLeafIcon: import('vue').ComputedRef<boolean>;
         setQuality: (imgWidth: string | number, imgScale: string) => 65 | 95 | 80;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -229,7 +233,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         };
         fallbackFormat: {
             type: StringConstructor;
-            default: string;
+            default: any;
             validator(value: string): boolean;
         };
         width: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "8.8.0",
+  "version": "8.9.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -125,5 +125,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "ad3a7e8530e8f47ad2a93e41c3307173755dbcde"
+  "gitHead": "8e1a9900d6e8e1c8307875aad711ffa5080e1dd9"
 }