vue-datocms 5.1.2 → 6.0.2

package/dist/index.esm.mjs

@@ -1,5 +1,5 @@
-import hypenateStyleName from 'hyphenate-style-name';
 import { ref, onMounted, onBeforeUnmount, defineComponent, h, watchEffect, unref, reactive, computed, toRaw } from 'vue';
+import hypenateStyleName from 'hyphenate-style-name';
 import { render, renderNodeRule, defaultMetaTransformer } from 'datocms-structured-text-generic-html-renderer';
 export { renderMarkRule, renderNodeRule, renderNodeRule as renderRule } from 'datocms-structured-text-generic-html-renderer';
 import { isRoot, isInlineItem, RenderError, isStructuredText, isItemLink, isBlock } from 'datocms-structured-text-utils';
@@ -12,8 +12,57 @@ const isSsr = () => {
 const isIntersectionObserverAvailable = () => {
   return isSsr() ? false : !!window.IntersectionObserver;
 };
+const universalBtoa = (str) => isSsr() ? Buffer.from(str.toString(), "binary").toString("base64") : window.btoa(str);
+const absolutePositioning = {
+  position: "absolute",
+  left: "0px",
+  top: "0px",
+  width: "100%",
+  height: "100%"
+};
+const escapeString = (s) => {
+  let result = `${s}`;
+  result = result.replace(/&/g, "&");
+  result = result.replace(/</g, "&lt;");
+  result = result.replace(/>/g, "&gt;");
+  result = result.replace(/"/g, "&quot;");
+  result = result.replace(/'/g, "&#39;");
+  return result;
+};
+const toCss = (object) => {
+  if (!object) {
+    return null;
+  }
+  let result = "";
+  for (const styleName in object) {
+    if (Object.prototype.hasOwnProperty.call(object, styleName) && object[styleName]) {
+      result += `${hypenateStyleName(styleName)}: ${object[styleName]}; `;
+    }
+  }
+  return result.length > 0 ? result : null;
+};
+const tag = (tagName, attrs, content) => {
+  const serializedAttrs = [];
+  if (attrs) {
+    for (const attrName in attrs) {
+      if (Object.prototype.hasOwnProperty.call(attrs, attrName)) {
+        const value = attrs[attrName];
+        if (value) {
+          serializedAttrs.push(
+            `${escapeString(attrName)}="${escapeString(value)}"`
+          );
+        }
+      }
+    }
+  }
+  const attrsString = serializedAttrs.length > 0 ? ` ${serializedAttrs.join(" ")}` : "";
+  return content ? `<${tagName}${attrsString}>${content.join("")}</${tagName}>` : `<${tagName}${attrsString} />`;
+};
 
-const useInView = ({ threshold, rootMargin }) => {
+const useInView = ({
+  threshold,
+  rootMargin
+}) => {
   const observer = ref(null);
   const elRef = ref(null);
   const inView = ref(false);
@@ -65,23 +114,69 @@ const Source = defineComponent({
   }
 });
 
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
+const bogusBaseUrl = "https://example.com/";
+const buildSrcSet = (src, width, candidateMultipliers) => {
+  if (!src || !width) {
+    return void 0;
+  }
+  return candidateMultipliers.map((multiplier) => {
+    const url = new URL(src, bogusBaseUrl);
+    if (multiplier !== 1) {
+      url.searchParams.set("dpr", `${multiplier}`);
+      const maxH = url.searchParams.get("max-h");
+      const maxW = url.searchParams.get("max-w");
+      if (maxH) {
+        url.searchParams.set(
+          "max-h",
+          `${Math.floor(Number.parseInt(maxH) * multiplier)}`
+        );
+      }
+      if (maxW) {
+        url.searchParams.set(
+          "max-w",
+          `${Math.floor(Number.parseInt(maxW) * multiplier)}`
+        );
+      }
+    }
+    const finalWidth = Math.floor(width * multiplier);
+    if (finalWidth < 50) {
+      return null;
+    }
+    return `${url.toString().replace(bogusBaseUrl, "/")} ${finalWidth}w`;
+  }).filter(Boolean).join(",");
+};
+function buildWebpSource(data, sizes) {
+  var _a;
+  return data.webpSrcSet && h(Source, {
+    srcset: data.webpSrcSet,
+    sizes: (_a = sizes != null ? sizes : data.sizes) != null ? _a : void 0,
+    type: "image/webp"
+  });
+}
+function buildRegularSource(data, sizes, srcSetCandidates) {
+  var _a, _b;
+  return h(Source, {
+    srcset: (_a = data.srcSet) != null ? _a : buildSrcSet(data.src, data.width, srcSetCandidates),
+    sizes: (_b = sizes != null ? sizes : data.sizes) != null ? _b : void 0
+  });
+}
+
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
 };
-const universalBtoa = (str) => isSsr() ? Buffer.from(str.toString(), "binary").toString("base64") : window.btoa(str);
 const Sizer = defineComponent({
   props: {
     sizerClass: {
@@ -96,89 +191,43 @@ const Sizer = defineComponent({
     },
     height: {
       type: Number
-    },
-    explicitWidth: {
-      type: Boolean
     }
   },
-  setup({ sizerClass, sizerStyle, width, height, explicitWidth }) {
+  setup({ sizerClass, sizerStyle, width, height }) {
     const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
     return () => h("img", {
       class: sizerClass,
-      style: __spreadValues$5({
+      style: __spreadValues$6({
         display: "block",
-        width: explicitWidth ? `${width}px` : "100%"
+        width: "100%"
       }, sizerStyle),
       src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
-      role: "presentation"
+      "aria-hidden": "true"
     });
   }
 });
 
-var __defProp$4 = Object.defineProperty;
+var __defProp$5 = Object.defineProperty;
 var __defProps$3 = Object.defineProperties;
 var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const escape = (s) => {
-  s = "" + s;
-  s = s.replace(/&/g, "&amp;");
-  s = s.replace(/</g, "&lt;");
-  s = s.replace(/>/g, "&gt;");
-  s = s.replace(/"/g, "&quot;");
-  s = s.replace(/'/g, "&#39;");
-  return s;
-};
-const toCss = (object) => {
-  if (!object) {
-    return null;
-  }
-  let result = "";
-  for (var styleName in object) {
-    if (Object.prototype.hasOwnProperty.call(object, styleName) && object[styleName]) {
-      result += `${hypenateStyleName(styleName)}: ${object[styleName]}; `;
-    }
-  }
-  return result.length > 0 ? result : null;
-};
-const tag = (tagName, attrs, content) => {
-  const serializedAttrs = [];
-  if (attrs) {
-    for (var attrName in attrs) {
-      if (Object.prototype.hasOwnProperty.call(attrs, attrName)) {
-        const value = attrs[attrName];
-        if (value) {
-          serializedAttrs.push(`${escape(attrName)}="${escape(value)}"`);
-        }
-      }
-    }
-  }
-  const attrsString = serializedAttrs.length > 0 ? ` ${serializedAttrs.join(" ")}` : "";
-  return content ? `<${tagName}${attrsString}>${content.join("")}</${tagName}>` : `<${tagName}${attrsString} />`;
-};
-const absolutePositioning = {
-  position: "absolute",
-  left: "0px",
-  top: "0px",
-  width: "100%",
-  height: "100%"
-};
-const imageAddStrategy = ({ lazyLoad, inView, loaded }) => {
-  if (!lazyLoad) {
+const imageAddStrategy = ({ priority, inView, loaded }) => {
+  if (priority) {
     return true;
   }
   if (isSsr()) {
@@ -189,8 +238,8 @@ const imageAddStrategy = ({ lazyLoad, inView, loaded }) => {
   }
   return true;
 };
-const imageShowStrategy = ({ lazyLoad, loaded }) => {
-  if (!lazyLoad) {
+const imageShowStrategy = ({ priority, loaded }) => {
+  if (priority) {
     return true;
   }
   if (isSsr()) {
@@ -201,38 +250,10 @@ const imageShowStrategy = ({ lazyLoad, loaded }) => {
   }
   return true;
 };
-const buildSrcSet = (src, width, candidateMultipliers) => {
-  if (!src || !width) {
-    return void 0;
-  }
-  return candidateMultipliers.map((multiplier) => {
-    const url = new URL(src);
-    if (multiplier !== 1) {
-      url.searchParams.set("dpr", `${multiplier}`);
-      const maxH = url.searchParams.get("max-h");
-      const maxW = url.searchParams.get("max-w");
-      if (maxH) {
-        url.searchParams.set(
-          "max-h",
-          `${Math.floor(parseInt(maxH) * multiplier)}`
-        );
-      }
-      if (maxW) {
-        url.searchParams.set(
-          "max-w",
-          `${Math.floor(parseInt(maxW) * multiplier)}`
-        );
-      }
-    }
-    const finalWidth = Math.floor(width * multiplier);
-    if (finalWidth < 50) {
-      return null;
-    }
-    return `${url.toString()} ${finalWidth}w`;
-  }).filter(Boolean).join(",");
-};
-const Image = defineComponent({
+const Image$1 = defineComponent({
   name: "DatocmsImage",
+  inheritAttrs: false,
+  emits: ["load"],
   props: {
     data: {
       type: Object,
@@ -241,6 +262,9 @@ const Image = defineComponent({
     pictureClass: {
       type: String
     },
+    placeholderClass: {
+      type: String
+    },
     fadeInDuration: {
       type: Number
     },
@@ -255,24 +279,17 @@ const Image = defineComponent({
       type: String,
       default: "0px 0px 0px 0px"
     },
-    lazyLoad: {
-      type: Boolean,
-      default: true
-    },
-    rootStyle: {
+    pictureStyle: {
       type: Object,
       default: () => ({})
     },
-    pictureStyle: {
+    placeholderStyle: {
       type: Object,
       default: () => ({})
     },
-    explicitWidth: {
-      type: Boolean
-    },
     layout: {
       type: String,
-      default: () => "responsive",
+      default: () => "intrinsic",
       validator: (value) => ["intrinsic", "fixed", "responsive", "fill"].includes(value)
     },
     objectFit: {
@@ -300,16 +317,16 @@ const Image = defineComponent({
       default: () => [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
     }
   },
-  setup(props) {
+  setup(props, { emit, expose }) {
     const loaded = ref(false);
     function handleLoad() {
+      emit("load");
       loaded.value = true;
     }
-    const { inView, elRef } = useInView({
+    const { inView, elRef: rootRef } = useInView({
       threshold: props.intersectionThreshold || props.intersectionTreshold || 0,
       rootMargin: props.intersectionMargin || "0px 0px 0px 0px"
     });
-    const computedLazyLoad = ref(props.priority ? false : props.lazyLoad);
     const imageRef = ref();
     watchEffect(() => {
       if (!imageRef.value) {
@@ -319,71 +336,78 @@ const Image = defineComponent({
         handleLoad();
       }
     });
+    expose({
+      rootRef,
+      imageRef
+    });
     return {
       inView,
-      elRef,
+      rootRef,
       loaded,
       handleLoad,
-      computedLazyLoad,
       imageRef
     };
   },
   render() {
     var _a, _b, _c, _d, _e, _f;
     const addImage = imageAddStrategy({
-      lazyLoad: this.computedLazyLoad,
+      priority: this.priority,
       inView: this.inView,
       loaded: this.loaded
     });
     const showImage = imageShowStrategy({
-      lazyLoad: this.computedLazyLoad,
+      priority: this.priority,
       inView: this.inView,
       loaded: this.loaded
     });
-    const webpSource = this.data.webpSrcSet && h(Source, {
-      srcset: this.data.webpSrcSet,
-      sizes: (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : void 0,
-      type: "image/webp"
-    });
-    const regularSource = this.data.srcSet && h(Source, {
-      srcset: (_c = this.data.srcSet) != null ? _c : buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
-      sizes: (_e = (_d = this.sizes) != null ? _d : this.data.sizes) != null ? _e : void 0
-    });
-    const transition = typeof this.fadeInDuration === "undefined" || this.fadeInDuration > 0 ? `opacity ${this.fadeInDuration || 500}ms ${this.fadeInDuration || 500}ms` : void 0;
-    const placeholder = this.usePlaceholder && (this.data.bgColor || this.data.base64) ? h("div", {
+    const webpSource = buildWebpSource(this.data, this.sizes);
+    const regularSource = buildRegularSource(
+      this.data,
+      this.sizes,
+      this.srcSetCandidates
+    );
+    const transition = typeof this.fadeInDuration === "undefined" || this.fadeInDuration > 0 ? `opacity ${this.fadeInDuration || 500}ms` : void 0;
+    const basePlaceholderStyle = __spreadValues$5({
+      transition,
+      opacity: showImage ? 0 : 1,
+      position: "absolute",
+      left: "-5%",
+      top: "-5%",
+      width: "110%",
+      height: "auto",
+      maxWidth: "none",
+      maxHeight: "none"
+    }, this.placeholderStyle);
+    const placeholder = this.usePlaceholder && this.data.base64 ? h("img", {
       "aria-hidden": "true",
-      style: {
-        backgroundImage: this.data.base64 ? `url(${this.data.base64})` : null,
-        backgroundColor: this.data.bgColor,
-        backgroundSize: "cover",
-        opacity: showImage ? 0 : 1,
+      src: this.data.base64,
+      class: this.placeholderClass,
+      style: __spreadValues$5({
         objectFit: this.objectFit,
-        objectPosition: this.objectPosition,
-        transition,
-        position: "absolute",
-        left: "-5%",
-        top: "-5%",
-        width: "110%",
-        height: "110%"
-      }
+        objectPosition: this.objectPosition
+      }, basePlaceholderStyle)
+    }) : this.usePlaceholder && this.data.bgColor ? h("div", {
+      class: this.placeholderClass,
+      style: __spreadValues$5({
+        backgroundColor: this.data.bgColor
+      }, basePlaceholderStyle)
     }) : null;
     const { width, aspectRatio } = this.data;
-    const height = (_f = this.data.height) != null ? _f : aspectRatio ? width / aspectRatio : 0;
+    const height = (_a = this.data.height) != null ? _a : aspectRatio ? width / aspectRatio : 0;
     const sizer = this.layout !== "fill" ? h(Sizer, {
       sizerClass: this.pictureClass,
       sizerStyle: this.pictureStyle,
       width,
-      height,
-      explicitWidth: this.explicitWidth
+      height
     }) : null;
     return h(
       "div",
       {
-        style: __spreadValues$4(__spreadValues$4({
-          display: this.explicitWidth ? "inline-block" : "block",
+        class: this.$attrs.class,
+        style: __spreadValues$5(__spreadValues$5({
           overflow: "hidden"
-        }, this.layout === "fill" ? absolutePositioning : this.layout === "intrinsic" ? { position: "relative", width: "100%", maxWidth: `${width}px` } : this.layout === "fixed" ? { position: "relative", width: `${width}px` } : { position: "relative" }), this.rootStyle),
-        ref: "elRef"
+        }, this.layout === "fill" ? absolutePositioning : this.layout === "intrinsic" ? { position: "relative", width: "100%", maxWidth: `${width}px` } : this.layout === "fixed" ? { position: "relative", width: `${width}px` } : { position: "relative", width: "100%" }), this.$attrs.style || {}),
+        ref: "rootRef"
       },
       [
         sizer,
@@ -399,7 +423,7 @@ const Image = defineComponent({
             onLoad: this.handleLoad,
             ref: "imageRef",
             class: this.pictureClass,
-            style: __spreadValues$4(__spreadProps$3(__spreadValues$4({
+            style: __spreadValues$5(__spreadProps$3(__spreadValues$5({
               opacity: showImage ? 1 : 0,
               transition
             }, absolutePositioning), {
@@ -412,20 +436,27 @@ const Image = defineComponent({
           innerHTML: tag("picture", {}, [
             this.data.webpSrcSet && tag("source", {
               srcset: this.data.webpSrcSet,
-              sizes: this.data.sizes,
+              sizes: (_c = (_b = this.sizes) != null ? _b : this.data.sizes) != null ? _c : void 0,
               type: "image/webp"
             }),
-            this.data.srcSet && tag("source", {
-              srcset: this.data.srcSet,
-              sizes: this.data.sizes
+            tag("source", {
+              srcset: (_d = this.data.srcSet) != null ? _d : buildSrcSet(
+                this.data.src,
+                this.data.width,
+                this.srcSetCandidates
+              ),
+              sizes: (_f = (_e = this.sizes) != null ? _e : this.data.sizes) != null ? _f : void 0
             }),
             tag("img", {
               src: this.data.src,
               alt: this.data.alt,
               title: this.data.title,
               class: this.pictureClass,
-              style: toCss(__spreadValues$4(__spreadValues$4({}, this.pictureStyle), absolutePositioning)),
-              loading: this.computedLazyLoad ? "lazy" : void 0,
+              style: toCss(__spreadValues$5(__spreadProps$3(__spreadValues$5({}, absolutePositioning), {
+                objectFit: this.objectFit,
+                objectPosition: this.objectPosition
+              }), this.pictureStyle)),
+              loading: this.priority ? void 0 : "lazy",
               fetchpriority: this.priority ? "high" : void 0
             })
           ])
@@ -436,7 +467,123 @@ const Image = defineComponent({
 });
 const DatocmsImagePlugin = {
   install: (Vue) => {
-    Vue.component("DatocmsImage", Image);
+    Vue.component("DatocmsImage", Image$1);
+  }
+};
+
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
+const NakedImage = defineComponent({
+  name: "DatocmsNakedImage",
+  inheritAttrs: false,
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    usePlaceholder: {
+      type: Boolean,
+      default: true
+    },
+    sizes: {
+      type: String
+    },
+    priority: {
+      type: Boolean,
+      default: false
+    },
+    srcSetCandidates: {
+      type: Array,
+      validator: (values) => values.every((value) => {
+        return typeof value === "number";
+      }),
+      default: () => [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
+    }
+  },
+  setup(_props, { emit, expose }) {
+    const loaded = ref(false);
+    function handleLoad() {
+      emit("load");
+      loaded.value = true;
+    }
+    const imageRef = ref();
+    watchEffect(() => {
+      if (!imageRef.value) {
+        return;
+      }
+      if (imageRef.value.complete && imageRef.value.naturalWidth) {
+        handleLoad();
+      }
+    });
+    expose({
+      imageRef
+    });
+    return {
+      loaded,
+      handleLoad,
+      imageRef
+    };
+  },
+  render() {
+    var _a;
+    const webpSource = buildWebpSource(this.data, this.sizes);
+    const regularSource = buildRegularSource(
+      this.data,
+      this.sizes,
+      this.srcSetCandidates
+    );
+    const { width } = this.data;
+    const height = (_a = this.data.height) != null ? _a : Math.round(this.data.aspectRatio ? width / this.data.aspectRatio : 0);
+    const sizingStyle = {
+      aspectRatio: `${width} / ${height}`,
+      width: "100%",
+      maxWidth: `${width}px`,
+      height: "auto"
+    };
+    const placeholderStyle = this.usePlaceholder && !this.loaded && this.data.base64 ? {
+      backgroundImage: `url("${this.data.base64}")`,
+      backgroundSize: "cover",
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "50% 50%",
+      color: "transparent"
+    } : this.usePlaceholder && !this.loaded && this.data.bgColor ? {
+      backgroundColor: this.data.bgColor,
+      color: "transparent"
+    } : void 0;
+    return h("picture", null, [
+      webpSource,
+      regularSource,
+      this.data.src && h("img", {
+        ref: "imageRef",
+        src: this.data.src,
+        alt: this.data.alt,
+        onLoad: this.handleLoad,
+        title: this.data.title,
+        fetchpriority: this.priority ? "high" : void 0,
+        loading: this.priority ? void 0 : "lazy",
+        style: __spreadValues$4(__spreadValues$4(__spreadValues$4({}, placeholderStyle), sizingStyle), this.$attrs.style || {}),
+        class: this.$attrs.class
+      })
+    ]);
+  }
+});
+const DatocmsNakedImagePlugin = {
+  install: (Vue) => {
+    Vue.component("DatocmsNakedImage", Image);
   }
 };
 
@@ -1005,7 +1152,15 @@ const VideoPlayer = defineComponent({
     "cuePointsChange"
   ],
   setup: (_a) => {
-    var _b = _a, { data = {}, disableCookies = true, preload = "metadata" } = _b, otherProps = __objRest$1(_b, ["data", "disableCookies", "preload"]);
+    var _b = _a, {
+      data = {},
+      disableCookies = true,
+      preload = "metadata"
+    } = _b, otherProps = __objRest$1(_b, [
+      "data",
+      "disableCookies",
+      "preload"
+    ]);
     import('@mux/mux-player');
     const muxPlayerRef = ref();
     const computedProps = __spreadProps$2(__spreadValues$2({}, useVideoPlayer({ data })), {
@@ -1162,10 +1317,22 @@ var __async$1 = (__this, __arguments, generator) => {
   });
 };
 const useQuerySubscription = (_a) => {
-  var _b = _a, { enabled = true, initialData, query, token } = _b, other = __objRest(_b, ["enabled", "initialData", "query", "token"]);
+  var _b = _a, {
+    enabled = true,
+    initialData,
+    query,
+    token
+  } = _b, other = __objRest(_b, [
+    "enabled",
+    "initialData",
+    "query",
+    "token"
+  ]);
   const error = ref(null);
   const data = ref(unref(initialData) || null);
-  const status = ref(unref(enabled) ? "connecting" : "closed");
+  const status = ref(
+    unref(enabled) ? "connecting" : "closed"
+  );
   const subscribeToQueryOptions = other;
   watchEffect((onCleanup) => __async$1(void 0, null, function* () {
     if (query && token && unref(enabled)) {
@@ -1343,4 +1510,4 @@ const toHead = (...args) => {
   };
 };
 
-export { DatocmsImagePlugin, DatocmsStructuredTextPlugin, DatocmsVideoPlayerPlugin, Image, StructuredText, VideoPlayer, appendKeyToValidElement, defaultAdapter, isKeyOf, isNil, toHead, toNativeAttrName, toNativeAttrValue, useQuerySubscription, useSiteSearch, useVideoPlayer };
+export { DatocmsImagePlugin, DatocmsNakedImagePlugin, DatocmsStructuredTextPlugin, DatocmsVideoPlayerPlugin, Image$1 as Image, NakedImage, StructuredText, VideoPlayer, appendKeyToValidElement, defaultAdapter, isKeyOf, isNil, toHead, toNativeAttrName, toNativeAttrValue, useQuerySubscription, useSiteSearch, useVideoPlayer };