@leaflink/stash 44.6.1 → 44.8.0

package/dist/Image.js

@@ -1,29 +1,38 @@
-import { defineComponent as x, inject as C, computed as d, useAttrs as W, openBlock as D, createElementBlock as L, mergeProps as M } from "vue";
-import { IMAGE_PROVIDER_URLS as B, SCREEN_SIZES as P } from "./constants.js";
-import N from "lodash-es/merge";
-function j(t) {
-  return (e) => t[e] || e;
+import { defineComponent as M, inject as B, computed as o, useAttrs as D, openBlock as L, createElementBlock as k, mergeProps as C, unref as N } from "vue";
+import V from "@leaflink/snitch";
+import { IMAGE_PROVIDER_URLS as q, SCREEN_SIZES as y } from "./constants.js";
+import G from "lodash-es/merge";
+const w = {
+  xs: 160,
+  sm: 338,
+  md: 676,
+  lg: 1352,
+  xl: 2704
+};
+var P = /* @__PURE__ */ ((e) => (e.None = "none", e.Rounded = "rounded", e))(P || {}), z = /* @__PURE__ */ ((e) => (e.Cloudinary = "cloudinary", e.Static = "static", e))(z || {});
+function j(e) {
+  return (t) => e[t] || t;
 }
-function V({
-  formatter: t = (n, c) => `${n}=${c}`,
-  keyMap: e,
-  joinWith: f = "/",
-  valueMap: i = {}
+function Q({
+  formatter: e = (u, c) => `${u}=${c}`,
+  keyMap: t,
+  joinWith: d = "/",
+  valueMap: r = {}
 } = {}) {
-  const n = typeof e == "function" ? e : j(e || {});
-  return Object.keys(i).forEach((c) => {
-    typeof i[c] != "function" && (i[c] = j(i[c]));
-  }), (c = {}) => Object.entries(c).map(([g, v]) => {
-    const m = i[g], S = n(g);
-    let h = v;
-    return typeof m == "function" && (h = m(c[g])), t(S, h);
-  }).join(f);
+  const u = typeof t == "function" ? t : j(t || {});
+  return Object.keys(r).forEach((c) => {
+    typeof r[c] != "function" && (r[c] = j(r[c]));
+  }), (c = {}) => Object.entries(c).map(([f, g]) => {
+    const p = r[f], l = u(f);
+    let v = g;
+    return typeof p == "function" && (v = p(c[f])), e(l, v);
+  }).join(d);
 }
-function k(t = "", e = []) {
-  const i = new URL(t).host;
-  return e.some((n) => n === i ? !0 : n.endsWith(`.${i}`));
+function T(e = "", t = []) {
+  const r = new URL(e).host;
+  return t.some((u) => u === r ? !0 : u.endsWith(`.${r}`));
 }
-const q = B.CLOUDINARY, G = (t) => t.startsWith("#") ? t.replace("#", "rgb_") : t, E = V({
+const F = q.CLOUDINARY, H = (e) => e.startsWith("#") ? e.replace("#", "rgb_") : e, I = Q({
   keyMap: {
     fit: "c",
     width: "w",
@@ -44,153 +53,125 @@ const q = B.CLOUDINARY, G = (t) => t.startsWith("#") ? t.replace("#", "rgb_") :
     format: {
       jpeg: "jpg"
     },
-    background(t) {
-      return G(t);
+    background(e) {
+      return H(e);
     }
   },
   joinWith: ",",
-  formatter: (t, e) => `${t}_${e}`
-}), F = {
-  // defaulting to maintain original image format to reduce transformations
-  // format: 'auto',
-  quality: "auto"
+  formatter: (e, t) => `${e}_${t}`
+}), Y = {
+  format: "auto",
+  quality: "auto:best"
 };
-function Y(t, e = {}) {
-  const f = N(F, e), i = E(f);
-  return `${q}/${i}/${t}`;
+function Z(e, t = {}) {
+  const d = G(Y, t), r = I(d);
+  return `${F}/${r}/${e}`;
 }
-const Z = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const J = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  getImageUrl: Y,
-  operationsGenerator: E
+  getImageUrl: Z,
+  operationsGenerator: I
 }, Symbol.toStringTag, { value: "Module" }));
-function H(t = "") {
-  return t;
+function K(e = "") {
+  return e;
 }
-const K = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const X = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  getImageUrl: H
-}, Symbol.toStringTag, { value: "Module" })), J = {
-  cloudinary: Z,
-  static: K
-}, Q = ["src"], w = {
-  xsmall: {
-    alwaysIncluded: !1,
-    width: 160
-  },
-  small: {
-    alwaysIncluded: !0,
-    width: 338
-  },
-  medium: {
-    alwaysIncluded: !0,
-    width: 676
-  },
-  large: {
-    alwaysIncluded: !0,
-    width: 1352
-  },
-  xlarge: {
-    alwaysIncluded: !1,
-    width: 2704
-  }
-};
-var X = /* @__PURE__ */ ((t) => (t.None = "none", t.Rounded = "rounded", t))(X || {});
-const ne = /* @__PURE__ */ x({
+  getImageUrl: K
+}, Symbol.toStringTag, { value: "Module" })), tt = {
+  cloudinary: J,
+  static: X
+}, et = ["src"], it = /* @__PURE__ */ M({
   __name: "Image",
   props: {
     src: { default: "" },
-    srcset: { default: "" },
-    sizes: { default: "" },
+    srcset: { default: void 0 },
+    sizes: { default: void 0 },
     provider: { default: void 0 },
-    radius: { default: "none" }
+    radius: { default: "none" },
+    staticPath: { default: void 0 }
   },
-  setup(t) {
-    const e = t, f = {
-      CLOUDINARY: "cloudinary",
-      STATIC: "static"
-    }, i = {
-      md: P.md,
-      lg: P.lg
-    }, n = C("stashOptions"), c = d(() => {
-      const { src: r, ...s } = W();
-      return s.sizes = R.value, s.srcset = T.value, s;
-    }), _ = d(() => {
-      var r;
-      return ((r = n == null ? void 0 : n.images) == null ? void 0 : r.staticDomains) || [];
-    }), g = d(() => {
+  setup(e) {
+    const t = e, d = {
+      md: y.md,
+      lg: y.lg
+    }, r = B("stashOptions"), u = o(() => {
+      const { src: n, ...s } = D();
+      return s.sizes = U.value, s.srcset = E.value, s;
+    }), c = o(() => {
+      var n;
+      return ((n = r == null ? void 0 : r.images) == null ? void 0 : n.staticDomains) || [];
+    }), S = o(() => {
       try {
-        new URL(e.src);
+        return new URL(t.src), !0;
       } catch {
-        return !0;
+        return !1;
       }
-      return k(e.src, _.value);
-    }), v = d(() => {
-      var r;
-      return e.provider ? e.provider : (r = n == null ? void 0 : n.images) != null && r.provider && n.images.provider !== f.STATIC && !g.value ? n.images.provider : f.STATIC;
-    }), m = d(() => v.value === f.STATIC), S = d(() => J[v.value]), h = d(
-      () => m.value ? I() : I({ width: w.medium.width })
-    ), R = d(() => e.sizes || !m.value ? O() : void 0), T = d(() => e.sizes && !e.srcset && !m.value ? U() : e.srcset), y = d(() => e.sizes ? z(e.sizes) : m.value ? [] : z("lg:large"));
-    function I(r = {}) {
-      return S.value.getImageUrl(e.src, r);
+    }), f = o(() => S.value && T(t.src, c.value)), g = o(() => {
+      var n;
+      return t.provider || ((n = r == null ? void 0 : r.images) == null ? void 0 : n.provider) || z.Static;
+    }), p = o(() => t.staticPath || (r == null ? void 0 : r.staticPath)), l = o(() => g.value === z.Static), v = o(() => tt[g.value]), $ = o(() => l.value ? _() : _({ width: w.md })), U = o(() => t.sizes ? x() : t.sizes), E = o(() => t.sizes && !t.srcset && !l.value ? W() : t.srcset), R = o(() => t.sizes ? A(t.sizes) : []);
+    function _(n = {}) {
+      if (l.value && S.value && !f.value)
+        return V.error(`Image: ${t.src} is not from a whitelisted domain. See \`stashOptions.image.domains\`.`), "";
+      if (l.value && f.value)
+        return t.src;
+      const s = l.value && p.value ? `${p.value}/${t.src}` : t.src;
+      return v.value.getImageUrl(s, n);
     }
-    function U() {
-      const r = Object.entries(w).reduce((s, [l, a]) => ((!!y.value.find((o) => o.preset === l) || a.alwaysIncluded) && (s[l] = a), s), {});
-      return Object.values(r).map((s) => {
-        const l = s.width;
-        return `${I({ width: l })} ${s.width}w`;
-      }).join(", ");
+    function W() {
+      return Object.values(w).map((n) => `${_({ width: n })} ${n}w`).join(", ");
     }
-    function O() {
-      return y.value.map((r) => `${r.media ? r.media + " " : ""}${r.size}`).join(", ");
+    function x() {
+      var n;
+      return (n = t.sizes) != null && n.includes("(") ? t.sizes : R.value.map((s) => `${s.mediaQuery ? s.mediaQuery + " " : ""}${s.size}`).join(", ");
     }
-    function z(r) {
-      const s = [], l = {
+    function A(n = "") {
+      const s = [], h = {
         default: "100vw"
       };
-      if (typeof r == "string") {
-        const a = r.split(/[\s]+/).filter((u) => u);
-        for (const u of a) {
-          const o = u.split(":");
-          if (o.length !== 2) {
-            l.default = o[0].trim();
+      if (typeof n == "string") {
+        const m = n.split(/[\s]+/).filter((a) => a);
+        for (const a of m) {
+          const i = a.split(":");
+          if (i.length !== 2) {
+            h.default = i[0].trim();
             continue;
           }
-          l[o[0].trim()] = o[1].trim();
+          h[i[0].trim()] = i[1].trim();
         }
       } else
         throw new Error("`sizes` needs to be a string");
-      for (const a in l) {
-        const u = parseInt(i[a] || 0), o = l[a], $ = w[o] ? o : void 0;
-        let p = String($ ? w[o].width : o);
-        const b = p.endsWith("vw");
-        if (!b && /^\d+$/.test(p) && (p = `${p}px`), !b && !p.endsWith("px"))
-          continue;
-        const A = {
-          media: u ? `(min-width: ${u}px)` : "",
-          preset: $,
-          screenMinWidth: u,
-          size: p
+      for (const m in h) {
+        const a = parseInt(d[m] || 0);
+        let i = String(h[m]);
+        const b = i.endsWith("vw");
+        if (!b && /^\d+$/.test(i) && (i = `${i}px`), !b && i.endsWith("%"))
+          throw new Error("Image: `sizes` does not support percentage values");
+        const O = {
+          mediaQuery: a ? `(min-width: ${a}px)` : "",
+          screenMinWidth: a,
+          size: i
         };
-        s.push(A);
+        s.push(O);
       }
-      return s.sort((a, u) => a.screenMinWidth > u.screenMinWidth ? -1 : 1), s;
+      return s.sort((m, a) => m.screenMinWidth > a.screenMinWidth ? -1 : 1), s;
     }
-    return (r, s) => (D(), L("img", M({
+    return (n, s) => (L(), k("img", C({
       ref: "img",
-      key: h.value,
+      key: $.value,
       "data-test": "stash-image",
       class: ["stash-image", {
-        "tw-rounded": e.radius === "rounded"
-        /* Rounded */
+        "tw-rounded": t.radius === N(P).Rounded
       }],
-      src: h.value
-    }, c.value), null, 16, Q));
+      src: $.value
+    }, u.value), null, 16, et));
   }
 });
 export {
-  X as ImageRadiuses,
-  w as PRESET_SIZES,
-  ne as default
+  z as ImageProviders,
+  P as ImageRadius,
+  w as Screens,
+  it as default
 };
 //# sourceMappingURL=Image.js.map

package/dist/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../src/components/Image/providers/utils.ts","../src/components/Image/providers/cloudinary.ts","../src/components/Image/providers/static.ts","../src/components/Image/providers/index.ts","../src/components/Image/Image.vue"],"sourcesContent":["export interface ImageModifiers {\n  format?: string;\n  height?: number;\n  width?: number;\n  [key: string]: any /* eslint-disable-line @typescript-eslint/no-explicit-any */;\n}\n\nexport type ParamFormatter = (key: string, value: string) => string;\n\nexport type ParamMapper = { [key: string]: string } | ((key: string) => string);\n\nexport interface ProviderUrlBuilder {\n  keyMap?: ParamMapper;\n  formatter?: ParamFormatter;\n  joinWith?: string;\n  valueMap?: {\n    [key: string]: ParamMapper;\n  };\n}\n\nfunction createMapper(map: ParamMapper) {\n  return (key: string) => {\n    return map[key] || key;\n  };\n}\n\n/**\n * Builds the parameterized Cloudinary url\n */\nexport function buildProviderUrl({\n  formatter = (key, value) => `${key}=${value}`,\n  keyMap,\n  joinWith = '/',\n  valueMap = {},\n}: ProviderUrlBuilder = {}) {\n  const keyMapper = typeof keyMap === 'function' ? keyMap : createMapper(keyMap || {});\n\n  Object.keys(valueMap).forEach((valueKey) => {\n    if (typeof valueMap[valueKey] !== 'function') {\n      valueMap[valueKey] = createMapper(valueMap[valueKey]);\n    }\n  });\n\n  return (modifiers: { [key: string]: string } = {}) => {\n    const operations = Object.entries(modifiers).map(([key, value]) => {\n      const mapper = valueMap[key];\n      const newKey = keyMapper(key);\n      let newVal = value;\n\n      if (typeof mapper === 'function') {\n        newVal = mapper(modifiers[key]);\n      }\n\n      return formatter(newKey, newVal);\n    });\n\n    return operations.join(joinWith);\n  };\n}\n\n/**\n * Checks if a (sub)domain is included in a list of acceptable domains\n * @param str the (sub)domain to check\n * @param domains an array of valid domains\n */\nexport function isDomainValid(str = '', domains: string[] = []): boolean {\n  const url = new URL(str);\n  const host = url.host;\n\n  return domains.some((domain) => {\n    if (domain === host) {\n      return true;\n    }\n\n    return domain.endsWith(`.${host}`);\n  });\n}\n","import merge from 'lodash-es/merge';\n\nimport { IMAGE_PROVIDER_URLS } from '../../../constants';\nimport { buildProviderUrl, ImageModifiers } from './utils';\n\nconst BASE_URL = IMAGE_PROVIDER_URLS.CLOUDINARY;\n\nconst convertHextoRGBFormat = (value: string) => (value.startsWith('#') ? value.replace('#', 'rgb_') : value);\n\n/**\n * Parameters (option and value pairs) that can be used in the <transformations> segment of the Cloudinary transformation URL.\n * Options and their respective values are connected by an underscore (eg `w_250` for width of 250px.).\n * Multiple parameters are comma separated (eg. `w_250,h_250`).\n *\n * `keyMap` maps the option to its option prefix.\n * `valueMap` is used for grouping options using the same `keyMap` value under a 'category', allowing for easier usage and custom labelling in the component context.\n *\n * Transformation URL structure:\n * https://cloudinary.com/documentation/transformation_reference\n *\n * Transformation URL parameters (options and values):\n * https://cloudinary.com/documentation/image_transformations#transformation_url_syntax\n *\n */\nexport const operationsGenerator = buildProviderUrl({\n  keyMap: {\n    fit: 'c',\n    width: 'w',\n    height: 'h',\n    format: 'f',\n    quality: 'q',\n    background: 'b',\n    dpr: 'dpr',\n  },\n  valueMap: {\n    fit: {\n      fill: 'fill',\n      inside: 'pad',\n      outside: 'lpad',\n      cover: 'fit',\n      contain: 'scale',\n    },\n    format: {\n      jpeg: 'jpg',\n    },\n    background(value: string) {\n      return convertHextoRGBFormat(value);\n    },\n  },\n  joinWith: ',',\n  formatter: (key, value) => `${key}_${value}`,\n});\n\n// Note: Not configurable via Image props (for now).\nconst defaultModifiers = {\n  // defaulting to maintain original image format to reduce transformations\n  // format: 'auto',\n  quality: 'auto',\n};\n\nexport function getImageUrl(src: string, modifiers: Partial<ImageModifiers> = {}): string {\n  const mergeModifiers = merge(defaultModifiers, modifiers);\n  const operations = operationsGenerator(mergeModifiers);\n\n  return `${BASE_URL}/${operations}/${src}`;\n}\n","export function getImageUrl(src = ''): string {\n  return src;\n}\n","import * as cloudinary from './cloudinary';\nimport * as staticProvider from './static';\n\nexport default {\n  cloudinary,\n  static: staticProvider,\n};\n","<script lang=\"ts\">\n  export const PRESET_SIZES = {\n    xsmall: {\n      alwaysIncluded: false,\n      width: 160,\n    },\n    small: {\n      alwaysIncluded: true,\n      width: 338,\n    },\n    medium: {\n      alwaysIncluded: true,\n      width: 676,\n    },\n    large: {\n      alwaysIncluded: true,\n      width: 1352,\n    },\n    xlarge: {\n      alwaysIncluded: false,\n      width: 2704,\n    },\n  } as const;\n\n  export enum ImageRadiuses {\n    None = 'none',\n    Rounded = 'rounded',\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, useAttrs } from 'vue';\n\n  import { StashImageProviders, StashProvideState } from '../../../types/misc';\n  import { SCREEN_SIZES } from '../../constants';\n  import providers from './providers';\n  import { ImageModifiers, isDomainValid } from './providers/utils';\n\n  // interface ImagePresetSizes {\n  //   [size: string]: {\n  //     alwaysIncluded: boolean;\n  //     width: number;\n  //   }\n  // }\n\n  export interface ImageSizeVariant {\n    media: string;\n    preset?: keyof typeof PRESET_SIZES;\n    screenMinWidth: number;\n    size: string;\n  }\n\n  export type ImageRadius = `${ImageRadiuses}`;\n\n  export interface ImageProps {\n    /**\n     * The path to the image you want to embed.\n     */\n    src: string;\n\n    /**\n     * Native srcset attribute.\n     * One or more strings separated by commas, indicating possible image sources\n     * Can only be used with provider=static, otherwise it's ignored and auto-generated with `sizes` usage\n     */\n    srcset?: string;\n\n    /**\n     * For specifying responsive sizes\n     */\n    sizes?: string;\n\n    /**\n     * Where the image is served from.\n     * Optional, and when provided it forces the provider used.\n     *\n     * The provider is otherwise inherited from the Stash config `stashOptions.images.provider`, which defaults to `cloudinary`.\n     *\n     * When not provided, the provider is also inferred by `isStatic`:\n     *  - `static` for relative/absolute paths (`img/foo.jpg` or `/static/img/bar.jpg`), or when whitelisted absolute URLs are used (included in `staticOptions.images.staticDomains`).\n     */\n    provider?: StashImageProviders;\n\n    /**\n     * For applying border radius\n     */\n    radius?: ImageRadius;\n\n    /**\n     * TODO - https://leaflink.atlassian.net/browse/GRO-204\n     * A custom function used to resolve a URL string for the image\n     */\n    // loader?: () => string;\n  }\n\n  const PROVIDERS = {\n    CLOUDINARY: 'cloudinary',\n    STATIC: 'static',\n  };\n  const BREAKPOINTS = {\n    md: SCREEN_SIZES.md,\n    lg: SCREEN_SIZES.lg,\n  };\n  const stashOptions = inject<StashProvideState>('stashOptions');\n  const props = withDefaults(defineProps<ImageProps>(), {\n    src: '',\n    srcset: '',\n    sizes: '',\n    provider: undefined,\n    radius: 'none',\n    // loader: undefined, // TODO - https://leaflink.atlassian.net/browse/GRO-204\n  });\n\n  const attrs = computed(() => {\n    const { src, ...attrs } = useAttrs();\n\n    attrs.sizes = imgSizes.value;\n    attrs.srcset = imgSrcset.value;\n\n    return attrs;\n  });\n\n  const staticDomains = computed(() => stashOptions?.images?.staticDomains || []);\n\n  const isStaticUrl = computed(() => {\n    // return true if not an absolute url\n    try {\n      new URL(props.src);\n    } catch (e) {\n      return true;\n    }\n\n    // true if domain is whitelisted for static usage\n    return isDomainValid(props.src, staticDomains.value);\n  });\n\n  const computedProvider = computed(() => {\n    if (props.provider) {\n      return props.provider;\n    }\n\n    if (stashOptions?.images?.provider && stashOptions.images.provider !== PROVIDERS.STATIC && !isStaticUrl.value) {\n      return stashOptions.images.provider;\n    }\n\n    return PROVIDERS.STATIC;\n  });\n\n  const isStatic = computed(() => computedProvider.value === PROVIDERS.STATIC);\n\n  const imgProvider = computed(() => providers[computedProvider.value]);\n\n  const imgSrc = computed(() =>\n    isStatic.value ? getProviderImage() : getProviderImage({ width: PRESET_SIZES.medium.width }),\n  );\n\n  const imgSizes = computed(() => (props.sizes || !isStatic.value ? getSizes() : undefined));\n\n  const imgSrcset = computed(() => (props.sizes && !props.srcset && !isStatic.value ? getSources() : props.srcset));\n\n  const parsedSizes = computed(() => {\n    if (props.sizes) {\n      return parseSizes(props.sizes);\n    }\n\n    if (!isStatic.value) {\n      return parseSizes('lg:large');\n    }\n\n    return [];\n  });\n\n  function getProviderImage(modifiers: ImageModifiers = {}) {\n    return imgProvider.value.getImageUrl(props.src, modifiers);\n  }\n\n  function getSources() {\n    const appliedPresets = Object.entries(PRESET_SIZES).reduce((obj, [key, entry]) => {\n      const isPreset = !!parsedSizes.value.find((size) => size.preset === key);\n\n      if (isPreset || entry.alwaysIncluded) {\n        obj[key] = entry;\n      }\n\n      return obj;\n    }, {} as typeof PRESET_SIZES);\n\n    return Object.values(appliedPresets)\n      .map((size) => {\n        const width = size.width;\n        const src = getProviderImage({ width });\n\n        return `${src} ${size.width}w`;\n      })\n      .join(', ');\n  }\n\n  function getSizes() {\n    return parsedSizes.value.map((v) => `${v.media ? v.media + ' ' : ''}${v.size}`).join(', ');\n  }\n\n  function parseSizes(providedSizes: string) {\n    const variants: ImageSizeVariant[] = [];\n    const sizes = {\n      default: '100vw',\n    };\n\n    // parse sizes and convert to object\n    if (typeof providedSizes === 'string') {\n      const definitions = providedSizes.split(/[\\s]+/).filter((size) => size);\n\n      for (const entry of definitions) {\n        const size = entry.split(':');\n\n        if (size.length !== 2) {\n          sizes['default'] = size[0].trim();\n          continue;\n        }\n\n        sizes[size[0].trim()] = size[1].trim();\n      }\n    } else {\n      throw new Error('`sizes` needs to be a string');\n    }\n\n    for (const key in sizes) {\n      const screenMinWidth = parseInt(BREAKPOINTS[key] || 0);\n      const sizeValue = sizes[key];\n      const presetKey = PRESET_SIZES[sizeValue] ? sizeValue : undefined;\n      let size = String(presetKey ? PRESET_SIZES[sizeValue].width : sizeValue);\n      const isFluid = size.endsWith('vw');\n\n      // default integers to pixels\n      if (!isFluid && /^\\d+$/.test(size)) {\n        size = `${size}px`;\n      }\n\n      // ignore invalid size\n      if (!isFluid && !size.endsWith('px')) {\n        continue;\n      }\n\n      const variant = {\n        media: screenMinWidth ? `(min-width: ${screenMinWidth}px)` : '',\n        preset: presetKey,\n        screenMinWidth,\n        size,\n      };\n\n      variants.push(variant);\n    }\n\n    variants.sort((v1, v2) => (v1.screenMinWidth > v2.screenMinWidth ? -1 : 1));\n\n    return variants;\n  }\n</script>\n\n<template>\n  <img\n    ref=\"img\"\n    :key=\"imgSrc\"\n    data-test=\"stash-image\"\n    class=\"stash-image\"\n    :class=\"{\n      'tw-rounded': props.radius === ImageRadiuses.Rounded,\n    }\"\n    :src=\"imgSrc\"\n    v-bind=\"attrs\"\n  />\n</template>\n"],"names":["createMapper","map","key","buildProviderUrl","formatter","value","keyMap","joinWith","valueMap","keyMapper","valueKey","modifiers","mapper","newKey","newVal","isDomainValid","str","domains","host","domain","BASE_URL","IMAGE_PROVIDER_URLS","convertHextoRGBFormat","operationsGenerator","defaultModifiers","getImageUrl","src","mergeModifiers","merge","operations","providers","cloudinary","staticProvider","PRESET_SIZES","ImageRadiuses","PROVIDERS","BREAKPOINTS","SCREEN_SIZES","stashOptions","inject","attrs","computed","useAttrs","imgSizes","imgSrcset","staticDomains","_a","isStaticUrl","props","computedProvider","isStatic","imgProvider","imgSrc","getProviderImage","getSizes","getSources","parsedSizes","parseSizes","appliedPresets","obj","entry","size","width","v","providedSizes","variants","sizes","definitions","screenMinWidth","sizeValue","presetKey","isFluid","variant","v1","v2"],"mappings":"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"}
+{"version":3,"file":"Image.js","sources":["../src/components/Image/Image.types.ts","../src/components/Image/providers/utils.ts","../src/components/Image/providers/cloudinary.ts","../src/components/Image/providers/static.ts","../src/components/Image/providers/index.ts","../src/components/Image/Image.vue"],"sourcesContent":["// Sizes used to generate resized and optimized versions of an image.\n// Generated in `srcset`, and informed by `sizes`.\nexport const Screens = {\n  xs: 160,\n  sm: 338,\n  md: 676,\n  lg: 1352,\n  xl: 2704,\n} as const;\n\nexport interface ImageSizeCondition {\n  mediaQuery: string;\n  screenMinWidth: number;\n  size: string;\n}\n\nexport enum ImageRadius {\n  None = 'none',\n  Rounded = 'rounded',\n}\n\nexport type ImageRadii = `${ImageRadius}`;\n\nexport enum ImageProviders {\n  Cloudinary = 'cloudinary',\n  Static = 'static',\n}\n","export interface ImageModifiers {\n  format?: string;\n  height?: number;\n  width?: number;\n  [key: string]: any /* eslint-disable-line @typescript-eslint/no-explicit-any */;\n}\n\nexport type ParamFormatter = (key: string, value: string) => string;\n\nexport type ParamMapper = { [key: string]: string } | ((key: string) => string);\n\nexport interface ProviderUrlBuilder {\n  keyMap?: ParamMapper;\n  formatter?: ParamFormatter;\n  joinWith?: string;\n  valueMap?: {\n    [key: string]: ParamMapper;\n  };\n}\n\nfunction createMapper(map: ParamMapper) {\n  return (key: string) => {\n    return map[key] || key;\n  };\n}\n\n/**\n * Builds the parameterized Cloudinary url\n */\nexport function buildProviderUrl({\n  formatter = (key, value) => `${key}=${value}`,\n  keyMap,\n  joinWith = '/',\n  valueMap = {},\n}: ProviderUrlBuilder = {}) {\n  const keyMapper = typeof keyMap === 'function' ? keyMap : createMapper(keyMap || {});\n\n  Object.keys(valueMap).forEach((valueKey) => {\n    if (typeof valueMap[valueKey] !== 'function') {\n      valueMap[valueKey] = createMapper(valueMap[valueKey]);\n    }\n  });\n\n  return (modifiers: { [key: string]: string } = {}) => {\n    const operations = Object.entries(modifiers).map(([key, value]) => {\n      const mapper = valueMap[key];\n      const newKey = keyMapper(key);\n      let newVal = value;\n\n      if (typeof mapper === 'function') {\n        newVal = mapper(modifiers[key]);\n      }\n\n      return formatter(newKey, newVal);\n    });\n\n    return operations.join(joinWith);\n  };\n}\n\n/**\n * Checks if a (sub)domain is included in a list of acceptable domains\n * @param str the (sub)domain to check\n * @param domains an array of valid domains\n */\nexport function isDomainValid(str = '', domains: string[] = []): boolean {\n  const url = new URL(str);\n  const host = url.host;\n\n  return domains.some((domain) => {\n    if (domain === host) {\n      return true;\n    }\n\n    return domain.endsWith(`.${host}`);\n  });\n}\n","import merge from 'lodash-es/merge';\n\nimport { IMAGE_PROVIDER_URLS } from '../../../constants';\nimport { buildProviderUrl, ImageModifiers } from './utils';\n\nconst BASE_URL = IMAGE_PROVIDER_URLS.CLOUDINARY;\n\nconst convertHextoRGBFormat = (value: string) => (value.startsWith('#') ? value.replace('#', 'rgb_') : value);\n\n/**\n * Parameters (option and value pairs) that can be used in the <transformations> segment of the Cloudinary transformation URL.\n * Options and their respective values are connected by an underscore (eg `w_250` for width of 250px.).\n * Multiple parameters are comma separated (eg. `w_250,h_250`).\n *\n * `keyMap` maps the option to its option prefix.\n * `valueMap` is used for grouping options using the same `keyMap` value under a 'category', allowing for easier usage and custom labelling in the component context.\n *\n * Transformation URL structure:\n * https://cloudinary.com/documentation/transformation_reference\n *\n * Transformation URL parameters (options and values):\n * https://cloudinary.com/documentation/image_transformations#transformation_url_syntax\n *\n */\nexport const operationsGenerator = buildProviderUrl({\n  keyMap: {\n    fit: 'c',\n    width: 'w',\n    height: 'h',\n    format: 'f',\n    quality: 'q',\n    background: 'b',\n    dpr: 'dpr',\n  },\n  valueMap: {\n    fit: {\n      fill: 'fill',\n      inside: 'pad',\n      outside: 'lpad',\n      cover: 'fit',\n      contain: 'scale',\n    },\n    format: {\n      jpeg: 'jpg',\n    },\n    background(value: string) {\n      return convertHextoRGBFormat(value);\n    },\n  },\n  joinWith: ',',\n  formatter: (key, value) => `${key}_${value}`,\n});\n\n// Note: Not configurable via Image props (for now).\nconst defaultModifiers = {\n  format: 'auto',\n  quality: 'auto:best',\n};\n\nexport function getImageUrl(src: string, modifiers: Partial<ImageModifiers> = {}): string {\n  const mergeModifiers = merge(defaultModifiers, modifiers);\n  const operations = operationsGenerator(mergeModifiers);\n\n  return `${BASE_URL}/${operations}/${src}`;\n}\n","export function getImageUrl(src = ''): string {\n  return src;\n}\n","import * as cloudinary from './cloudinary';\nimport * as staticProvider from './static';\n\nexport default {\n  cloudinary,\n  static: staticProvider,\n};\n","<script lang=\"ts\">\n  export * from './Image.types';\n</script>\n\n<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, inject, useAttrs } from 'vue';\n\n  import { StashImageProviders, StashProvideState } from '../../../types/misc';\n  import { SCREEN_SIZES } from '../../constants';\n  import { ImageProviders, ImageRadii, ImageRadius, ImageSizeCondition, Screens } from './Image.types';\n  import providers from './providers';\n  import { ImageModifiers, isDomainValid } from './providers/utils';\n\n  export interface ImageProps {\n    /**\n     * The path to the image you want to embed.\n     */\n    src: string;\n\n    /**\n     * Native srcset attribute.\n     * One or more strings separated by commas, indicating possible image sources\n     * Can only be used with provider=static, otherwise it's ignored and auto-generated with `sizes` usage\n     */\n    srcset?: string;\n\n    /**\n     * For specifying responsive sizes\n     */\n    sizes?: string;\n\n    /**\n     * Where the image is served from.\n     * Optional, and when provided it forces the provider used.\n     *\n     * The provider is otherwise inherited from the Stash config `stashOptions.images.provider`, which defaults to `cloudinary`.\n     *\n     * When not provided, the provider is also inferred by `isStatic`:\n     *  - `static` for relative/absolute paths (`img/foo.jpg` or `/static/img/bar.jpg`), or when whitelisted absolute URLs are used (included in `staticOptions.images.staticDomains`).\n     */\n    provider?: StashImageProviders;\n\n    /**\n     * For applying border radius\n     */\n    radius?: ImageRadii;\n\n    /**\n     * A custom static path the image src will be appended onto when provider=static.\n     * Can be used to override the library-level default.\n     */\n    staticPath?: string;\n\n    /**\n     * TODO - https://leaflink.atlassian.net/browse/GRO-204\n     * A custom function used to resolve a URL string for the image\n     */\n    // loader?: () => string;\n  }\n\n  const BREAKPOINTS = {\n    md: SCREEN_SIZES.md,\n    lg: SCREEN_SIZES.lg,\n  };\n  const stashOptions = inject<StashProvideState>('stashOptions');\n  const props = withDefaults(defineProps<ImageProps>(), {\n    src: '',\n    srcset: undefined,\n    sizes: undefined,\n    staticPath: undefined,\n    provider: undefined,\n    radius: 'none',\n    // loader: undefined, // TODO - https://leaflink.atlassian.net/browse/GRO-204\n  });\n\n  const attrs = computed(() => {\n    const { src, ...attrs } = useAttrs();\n\n    attrs.sizes = imgSizes.value;\n    attrs.srcset = imgSrcset.value;\n\n    return attrs;\n  });\n\n  const staticDomains = computed(() => stashOptions?.images?.staticDomains || []);\n\n  const isAbsoluteUrl = computed(() => {\n    // return true if not an absolute url\n    try {\n      new URL(props.src);\n      return true;\n    } catch (e) {\n      return false;\n    }\n  });\n\n  const isValidStaticAbsoluteUrl = computed(() => {\n    return isAbsoluteUrl.value && isDomainValid(props.src, staticDomains.value);\n  });\n\n  const computedProvider = computed(() => props.provider || stashOptions?.images?.provider || ImageProviders.Static);\n\n  const computedStaticPath = computed(() => props.staticPath || stashOptions?.staticPath);\n\n  const isStatic = computed(() => computedProvider.value === ImageProviders.Static);\n\n  const imgProvider = computed(() => providers[computedProvider.value]);\n\n  const imgSrc = computed(() => (isStatic.value ? getProviderImage() : getProviderImage({ width: Screens.md })));\n\n  const imgSizes = computed(() => (props.sizes ? getSizes() : props.sizes));\n\n  const imgSrcset = computed(() => (props.sizes && !props.srcset && !isStatic.value ? getSources() : props.srcset));\n\n  const parsedSizes = computed(() => {\n    return props.sizes ? parseSizes(props.sizes) : [];\n  });\n\n  function getProviderImage(modifiers: ImageModifiers = {}) {\n    if (isStatic.value && isAbsoluteUrl.value && !isValidStaticAbsoluteUrl.value) {\n      // eslint-disable-next-line no-console\n      logger.error(`Image: ${props.src} is not from a whitelisted domain. See \\`stashOptions.image.domains\\`.`);\n      return '';\n    }\n\n    if (isStatic.value && isValidStaticAbsoluteUrl.value) {\n      return props.src;\n    }\n\n    const src = isStatic.value && computedStaticPath.value ? `${computedStaticPath.value}/${props.src}` : props.src;\n\n    return imgProvider.value.getImageUrl(src, modifiers);\n  }\n\n  function getSources() {\n    return Object.values(Screens)\n      .map((width) => {\n        const src = getProviderImage({ width });\n\n        return `${src} ${width}w`;\n      })\n      .join(', ');\n  }\n\n  function getSizes() {\n    // return if using native media conditions\n    if (props.sizes?.includes('(')) {\n      return props.sizes;\n    }\n\n    return parsedSizes.value.map((v) => `${v.mediaQuery ? v.mediaQuery + ' ' : ''}${v.size}`).join(', ');\n  }\n\n  function parseSizes(providedSizes = '') {\n    const conditions: ImageSizeCondition[] = [];\n    const sizes = {\n      default: '100vw',\n    };\n\n    // parse sizes and convert to object\n    if (typeof providedSizes === 'string') {\n      const definitions = providedSizes.split(/[\\s]+/).filter((size) => size);\n\n      for (const entry of definitions) {\n        const size = entry.split(':');\n\n        if (size.length !== 2) {\n          sizes['default'] = size[0].trim();\n          continue;\n        }\n\n        sizes[size[0].trim()] = size[1].trim();\n      }\n    } else {\n      throw new Error('`sizes` needs to be a string');\n    }\n\n    for (const key in sizes) {\n      const screenMinWidth = parseInt(BREAKPOINTS[key] || 0);\n      let size = String(sizes[key]);\n      const isFluidSize = size.endsWith('vw');\n\n      // convert integer to pixels\n      if (!isFluidSize && /^\\d+$/.test(size)) {\n        size = `${size}px`;\n      }\n\n      if (!isFluidSize && size.endsWith('%')) {\n        throw new Error('Image: `sizes` does not support percentage values');\n      }\n\n      const condition = {\n        mediaQuery: screenMinWidth ? `(min-width: ${screenMinWidth}px)` : '',\n        screenMinWidth,\n        size,\n      };\n\n      conditions.push(condition);\n    }\n\n    conditions.sort((v1, v2) => (v1.screenMinWidth > v2.screenMinWidth ? -1 : 1));\n\n    return conditions;\n  }\n</script>\n\n<template>\n  <img\n    ref=\"img\"\n    :key=\"imgSrc\"\n    data-test=\"stash-image\"\n    class=\"stash-image\"\n    :class=\"{\n      'tw-rounded': props.radius === ImageRadius.Rounded,\n    }\"\n    :src=\"imgSrc\"\n    v-bind=\"attrs\"\n  />\n</template>\n"],"names":["Screens","ImageRadius","ImageProviders","createMapper","map","key","buildProviderUrl","formatter","value","keyMap","joinWith","valueMap","keyMapper","valueKey","modifiers","mapper","newKey","newVal","isDomainValid","str","domains","host","domain","BASE_URL","IMAGE_PROVIDER_URLS","convertHextoRGBFormat","operationsGenerator","defaultModifiers","getImageUrl","src","mergeModifiers","merge","operations","providers","cloudinary","staticProvider","BREAKPOINTS","SCREEN_SIZES","stashOptions","inject","attrs","computed","useAttrs","imgSizes","imgSrcset","staticDomains","_a","isAbsoluteUrl","props","isValidStaticAbsoluteUrl","computedProvider","computedStaticPath","isStatic","imgProvider","imgSrc","getProviderImage","getSizes","getSources","parsedSizes","parseSizes","logger","width","v","providedSizes","conditions","sizes","definitions","size","entry","screenMinWidth","isFluidSize","condition","v1","v2"],"mappings":"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"}

package/dist/Image.vue.d.ts

@@ -29,17 +29,20 @@ declare type __VLS_WithDefaults<P, D> = {
 
 declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ImageProps>, {
     src: string;
-    srcset: string;
-    sizes: string;
+    srcset: undefined;
+    sizes: undefined;
+    staticPath: undefined;
     provider: undefined;
     radius: string;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ImageProps>, {
     src: string;
-    srcset: string;
-    sizes: string;
+    srcset: undefined;
+    sizes: undefined;
+    staticPath: undefined;
     provider: undefined;
     radius: string;
 }>>>, {
+    staticPath: string;
     src: string;
     radius: "none" | "rounded";
     srcset: string;
@@ -76,44 +79,38 @@ export declare interface ImageProps {
     /**
      * For applying border radius
      */
-    radius?: ImageRadius;
+    radius?: ImageRadii;
+    /**
+     * A custom static path the image src will be appended onto when provider=static.
+     * Can be used to override the library-level default.
+     */
+    staticPath?: string;
 }
 
-export declare type ImageRadius = `${ImageRadiuses}`;
+export declare enum ImageProviders {
+    Cloudinary = "cloudinary",
+    Static = "static"
+}
 
-export declare enum ImageRadiuses {
+export declare type ImageRadii = `${ImageRadius}`;
+
+export declare enum ImageRadius {
     None = "none",
     Rounded = "rounded"
 }
 
-export declare interface ImageSizeVariant {
-    media: string;
-    preset?: keyof typeof PRESET_SIZES;
+export declare interface ImageSizeCondition {
+    mediaQuery: string;
     screenMinWidth: number;
     size: string;
 }
 
-export declare const PRESET_SIZES: {
-    readonly xsmall: {
-        readonly alwaysIncluded: false;
-        readonly width: 160;
-    };
-    readonly small: {
-        readonly alwaysIncluded: true;
-        readonly width: 338;
-    };
-    readonly medium: {
-        readonly alwaysIncluded: true;
-        readonly width: 676;
-    };
-    readonly large: {
-        readonly alwaysIncluded: true;
-        readonly width: 1352;
-    };
-    readonly xlarge: {
-        readonly alwaysIncluded: false;
-        readonly width: 2704;
-    };
+export declare const Screens: {
+    readonly xs: 160;
+    readonly sm: 338;
+    readonly md: 676;
+    readonly lg: 1352;
+    readonly xl: 2704;
 };
 
 declare enum StashImageProvider {