@kiva/kv-components 7.6.2 → 7.6.3

package/dist/vue/KvContentfulImg.js

@@ -1,6 +1,6 @@
-import { toRefs as _, computed as k, openBlock as h, createElementBlock as c, createElementVNode as r, Fragment as g, renderList as y, createCommentVNode as b, createTextVNode as S, toDisplayString as v } from "vue";
-import q from "../_virtual/_plugin-vue_export-helper.js";
-const Q = {
+import { toRefs as v, computed as y, openBlock as a, createElementBlock as r, createElementVNode as c, Fragment as m, renderList as _, createCommentVNode as o, normalizeStyle as S, createTextVNode as q, toDisplayString as Q } from "vue";
+import U from "../_virtual/_plugin-vue_export-helper.js";
+const F = {
   props: {
     /**
      * Large, uncompressed image url that you get back from contentful.
@@ -16,8 +16,8 @@ const Q = {
     fallbackFormat: {
       type: String,
       default: "jpg",
-      validator(e) {
-        return ["jpg", "png", "gif"].indexOf(e) !== -1;
+      validator(n) {
+        return ["jpg", "png", "gif"].indexOf(n) !== -1;
       }
     },
     /**
@@ -48,8 +48,8 @@ const Q = {
     loading: {
       type: String,
       default: null,
-      validator(e) {
-        return ["lazy", "eager"].indexOf(e) !== -1;
+      validator(n) {
+        return ["lazy", "eager"].indexOf(n) !== -1;
       }
     },
     /**
@@ -59,8 +59,8 @@ const Q = {
     focus: {
       type: String,
       default: "center",
-      validator(e) {
-        return ["center", "top", "right", "left", "bottom", "top_right", "top_left", "bottom_right", "bottom_left", "face", "faces"].indexOf(e) !== -1;
+      validator(n) {
+        return ["center", "top", "right", "left", "bottom", "top_right", "top_left", "bottom_right", "bottom_left", "face", "faces"].indexOf(n) !== -1;
       }
     },
     /**
@@ -70,8 +70,8 @@ const Q = {
     fit: {
       type: String,
       default: "fill",
-      validator(e) {
-        return ["pad", "fill", "scale", "crop", "thumb"].indexOf(e) !== -1;
+      validator(n) {
+        return ["pad", "fill", "scale", "crop", "thumb"].indexOf(n) !== -1;
       }
     },
     /**
@@ -91,106 +91,117 @@ const Q = {
       default: () => []
     }
   },
-  setup(e) {
+  setup(n) {
     const {
-      alt: u,
+      alt: f,
       contentfulSrc: t,
-      width: i,
-      height: x
-    } = _(e), m = (n = null, o = 1) => {
-      let w = n && n.url ? `${n.url}?` : `${t.value}?`, f = n ? n.width : i.value, a = n ? n.height : x.value, s;
-      return f >= 2e3 && (s = f / 1999, f = 1999, a = Math.round(a / s)), a >= 2e3 && (s = a / 1999, a = 1999, f = Math.round(f / s)), f && (w += `w=${f * o}`), f && a && (w += "&"), a && (w += `h=${a * o}`), w;
-    }, l = (n, o) => o === "2x" ? 65 : n && parseInt(n, 10) < 200 ? 95 : 80, d = k(() => u.value && u.value.charAt(0) === "^" ? u.value.slice(1).trim() : "");
+      width: e,
+      height: b
+    } = v(n), x = (l = null, w = 1) => {
+      let s = l && l.url ? `${l.url}?` : `${t.value}?`, h = l ? l.width : e.value, u = l ? l.height : b.value, g;
+      return h >= 2e3 && (g = h / 1999, h = 1999, u = Math.round(u / g)), u >= 2e3 && (g = u / 1999, u = 1999, h = Math.round(h / g)), h && (s += `w=${h * w}`), h && u && (s += "&"), u && (s += `h=${u * w}`), s;
+    }, i = (l, w) => w === "2x" ? 65 : l && parseInt(l, 10) < 200 ? 95 : 80, d = y(() => {
+      if (f.value && f.value.charAt(0) === "^") {
+        const l = f.value.charAt(1) === "#" ? 2 : 1;
+        return f.value.slice(l).trim();
+      }
+      return "";
+    }), k = y(() => !!(f.value && f.value.charAt(1) === "#"));
     return {
-      buildUrl: m,
+      buildUrl: x,
       caption: d,
-      setQuality: l
+      removeLeafIcon: k,
+      setQuality: i
     };
   }
-}, U = {
+}, z = {
   key: 0,
   class: "tw-inline-block tw-not-prose"
-}, F = {
+}, j = {
   class: "tw-h-full tw-w-full",
   style: { "object-fit": "inherit" }
-}, z = ["media", "width", "height", "srcset"], j = ["media", "width", "height", "srcset"], N = ["src", "alt", "loading"], O = ["srcset"], B = ["srcset", "src", "width", "height", "alt", "loading"], C = {
+}, C = ["media", "width", "height", "srcset"], I = ["media", "width", "height", "srcset"], L = ["src", "alt", "loading"], N = ["srcset"], A = ["srcset", "src", "width", "height", "alt", "loading"], M = {
   key: 0,
-  class: "tw-text-h4 tw-mt-2"
+  class: "tw-inline-block tw-mr-0.5 tw-align-middle",
+  "aria-hidden": "true",
+  role: "img"
 };
-function M(e, u, t, i, x, m) {
-  return (t.width || t.height) && t.contentfulSrc ? (h(), c("figure", U, [
-    r("picture", F, [
-      t.sourceSizes.length > 0 ? (h(), c(g, { key: 0 }, [
-        (h(!0), c(g, null, y(t.sourceSizes, (l, d) => (h(), c("source", {
+function O(n, f, t, e, b, x) {
+  return (t.width || t.height) && t.contentfulSrc ? (a(), r("figure", z, [
+    c("picture", j, [
+      t.sourceSizes.length > 0 ? (a(), r(m, { key: 0 }, [
+        (a(!0), r(m, null, _(t.sourceSizes, (i, d) => (a(), r("source", {
           key: "webp-image" + d,
-          media: "(" + l.media + ")",
+          media: "(" + i.media + ")",
           type: "image/webp",
-          width: l.width ? l.width : null,
-          height: l.height ? l.height : null,
+          width: i.width ? i.width : null,
+          height: i.height ? i.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, z))), 128)),
-        (h(!0), c(g, null, y(t.sourceSizes, (l, d) => (h(), c("source", {
+						${e.buildUrl(i, 2)}&fit=${t.fit}&f=${t.focus}&fm=webp&q=${e.setQuality(i.width, "2x")} 2x,
+						${e.buildUrl(i)}&fit=${t.fit}&f=${t.focus}&fm=webp&q=${e.setQuality(i.width, "1x")} 1x`
+        }, null, 8, C))), 128)),
+        (a(!0), r(m, null, _(t.sourceSizes, (i, d) => (a(), r("source", {
           key: "fallback-image" + d,
-          media: "(" + l.media + ")",
-          width: l.width ? l.width : null,
-          height: l.height ? l.height : null,
+          media: "(" + i.media + ")",
+          width: i.width ? i.width : null,
+          height: i.height ? i.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, j))), 128)),
-        r("img", {
+						${e.buildUrl(i, 2)}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${e.setQuality(i.width, "2x")} 2x,
+						${e.buildUrl(i)}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${e.setQuality(i.width, "1x")} 1x`
+        }, null, 8, I))), 128)),
+        c("img", {
           class: "tw-max-w-full tw-max-h-full",
           style: { width: "inherit", height: "inherit", "object-fit": "inherit" },
-          src: `${i.buildUrl(t.width, t.height)}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${i.setQuality(t.width, "1x")}`,
-          alt: i.caption || t.alt,
+          src: `${e.buildUrl(t.width, t.height)}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${e.setQuality(t.width, "1x")}`,
+          alt: e.caption || t.alt,
           loading: t.loading
-        }, null, 8, N)
-      ], 64)) : b("", !0),
-      t.sourceSizes.length === 0 ? (h(), c(g, { key: 1 }, [
-        r("source", {
+        }, null, 8, L)
+      ], 64)) : o("", !0),
+      t.sourceSizes.length === 0 ? (a(), r(m, { key: 1 }, [
+        c("source", {
           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, O),
-        r("img", {
+						${e.buildUrl(null, 2)}&fit=${t.fit}&f=${t.focus}&fm=webp&q=${e.setQuality(t.width, "2x")} 2x,
+						${e.buildUrl()}&fit=${t.fit}&f=${t.focus}&fm=webp&q=${e.setQuality(t.width, "1x")} 1x`
+        }, null, 8, N),
+        c("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")}`,
+						${e.buildUrl(null, 2)}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${e.setQuality(t.width, "2x")} 2x,
+						${e.buildUrl()}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${e.setQuality(t.width, "1x")} 1x`,
+          src: `${e.buildUrl()}&fit=${t.fit}&f=${t.focus}&fm=${t.fallbackFormat}&q=${e.setQuality(t.width, "1x")}`,
           width: t.width ? t.width : null,
           height: t.height ? t.height : null,
-          alt: i.caption || t.alt,
+          alt: e.caption || t.alt,
           loading: t.loading
-        }, null, 8, B)
-      ], 64)) : b("", !0)
+        }, null, 8, A)
+      ], 64)) : o("", !0)
     ]),
-    i.caption ? (h(), c("figcaption", C, [
-      u[0] || (u[0] = r("span", {
-        class: "tw-inline-flex tw-align-text-top",
-        "aria-hidden": "true",
-        role: "img"
-      }, [
-        r("svg", {
-          class: "tw-h-2 tw-w-2.5",
-          viewBox: "0 0 20 20",
+    e.caption ? (a(), r("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: S({ maxWidth: t.width ? `${t.width}px` : void 0 })
+    }, [
+      e.removeLeafIcon ? o("", !0) : (a(), r("span", M, f[0] || (f[0] = [
+        c("svg", {
+          width: "16",
+          height: "12",
+          viewBox: "0 0 16 12",
+          fill: "none",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          r("path", {
-            d: "m3.12088 18.7441c12.86212 0 15.87912-14.52631 15.87912-16.99996h-1.1209c-12.85272 0-15.8791 14.51376-15.8791 16.99996z",
+          c("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)),
-      S(" " + v(i.caption), 1)
-    ])) : b("", !0)
-  ])) : b("", !0);
+        ], -1)
+      ]))),
+      q(" " + Q(e.caption), 1)
+    ], 4)) : o("", !0)
+  ])) : o("", !0);
 }
-const E = /* @__PURE__ */ q(Q, [["render", M]]);
+const E = /* @__PURE__ */ U(F, [["render", O]]);
 export {
   E as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "7.6.2",
+  "version": "7.6.3",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -29,7 +29,7 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@kiva/kv-tokens": "^3.6.1",
+    "@kiva/kv-tokens": "^3.6.2",
     "@kiva/vite-plugin-vue-lib-css": "^2.0.0",
     "@laynezh/vite-plugin-lib-assets": "^0.6.1",
     "@mdi/js": "^7.4.47",
@@ -123,5 +123,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "f68de2ef6e9d2b237b7779a5cb0971a29c845e4a"
+  "gitHead": "139510f7b600b98f4f9655cf911ac08212952881"
 }