vue-datocms 4.0.1 → 4.0.2

package/README.md

@@ -43,9 +43,11 @@ Helpers:
 ## Installation
 
 ```
+# First, install Vue
+npm install vue
+# Then install vue-datocms
 npm install vue-datocms
 ```
-
 ## Development
 
 This repository contains a number of examples. You can use them to locally test your changes to the package:

package/dist/index.cjs.js

@@ -50,6 +50,22 @@ const useInView = ({ threshold, rootMargin }) => {
   return { inView, elRef };
 };
 
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = 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$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
 const Source = vueDemi.defineComponent({
   props: {
     srcset: {
@@ -63,23 +79,36 @@ const Source = vueDemi.defineComponent({
     }
   },
   setup({ srcset, sizes, type }) {
-    return () => vueDemi.h("source", {
-      ...vueDemi.isVue2 && {
-        attrs: {
-          srcset,
-          sizes,
-          type
-        }
-      },
-      ...vueDemi.isVue3 && {
+    return () => vueDemi.h("source", __spreadValues$4(__spreadValues$4({}, vueDemi.isVue2 && {
+      attrs: {
         srcset,
         sizes,
         type
       }
-    });
+    }), vueDemi.isVue3 && {
+      srcset,
+      sizes,
+      type
+    }));
   }
 });
 
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
+    }
+  return a;
+};
 const universalBtoa = (str) => isSsr() ? Buffer.from(str.toString(), "binary").toString("base64") : window.btoa(str);
 const Sizer = vueDemi.defineComponent({
   props: {
@@ -102,27 +131,43 @@ const Sizer = vueDemi.defineComponent({
   },
   setup({ sizerClass, sizerStyle, width, height, explicitWidth }) {
     const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
-    return () => vueDemi.h("img", {
+    return () => vueDemi.h("img", __spreadValues$3(__spreadValues$3({
       class: sizerClass,
-      style: {
+      style: __spreadValues$3({
         display: "block",
-        width: explicitWidth ? `${width}px` : "100%",
-        ...sizerStyle
-      },
-      ...vueDemi.isVue2 && {
-        attrs: {
-          src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
-          role: "presentation"
-        }
-      },
-      ...vueDemi.isVue3 && {
+        width: explicitWidth ? `${width}px` : "100%"
+      }, sizerStyle)
+    }, vueDemi.isVue2 && {
+      attrs: {
         src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
         role: "presentation"
       }
-    });
+    }), vueDemi.isVue3 && {
+      src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
+      role: "presentation"
+    }));
   }
 });
 
+var __defProp$2 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 const escape = (s) => {
   s = "" + s;
   s = s.replace(/&/g, "&amp;");
@@ -318,6 +363,7 @@ const Image = vueDemi.defineComponent({
     };
   },
   render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     const addImage = imageAddStrategy({
       lazyLoad: this.computedLazyLoad,
       inView: this.inView,
@@ -328,32 +374,26 @@ const Image = vueDemi.defineComponent({
       inView: this.inView,
       loaded: this.loaded
     });
-    const webpSource = this.data.webpSrcSet && vueDemi.h(Source, {
-      ...vueDemi.isVue2 && {
-        props: {
-          srcset: this.data.webpSrcSet,
-          sizes: this.sizes ?? this.data.sizes ?? void 0,
-          type: "image/webp"
-        }
-      },
-      ...vueDemi.isVue3 && {
+    const webpSource = this.data.webpSrcSet && vueDemi.h(Source, __spreadValues$2(__spreadValues$2({}, vueDemi.isVue2 && {
+      props: {
         srcset: this.data.webpSrcSet,
-        sizes: this.sizes ?? this.data.sizes ?? void 0,
+        sizes: (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : void 0,
         type: "image/webp"
       }
-    });
-    const regularSource = this.data.srcSet && vueDemi.h(Source, {
-      ...vueDemi.isVue2 && {
-        props: {
-          srcset: this.data.srcSet ?? buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
-          sizes: this.sizes ?? this.data.sizes ?? void 0
-        }
-      },
-      ...vueDemi.isVue3 && {
-        srcset: this.data.srcSet ?? buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
-        sizes: this.sizes ?? this.data.sizes ?? void 0
+    }), vueDemi.isVue3 && {
+      srcset: this.data.webpSrcSet,
+      sizes: (_d = (_c = this.sizes) != null ? _c : this.data.sizes) != null ? _d : void 0,
+      type: "image/webp"
+    }));
+    const regularSource = this.data.srcSet && vueDemi.h(Source, __spreadValues$2(__spreadValues$2({}, vueDemi.isVue2 && {
+      props: {
+        srcset: (_e = this.data.srcSet) != null ? _e : buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
+        sizes: (_g = (_f = this.sizes) != null ? _f : this.data.sizes) != null ? _g : void 0
       }
-    });
+    }), vueDemi.isVue3 && {
+      srcset: (_h = this.data.srcSet) != null ? _h : buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
+      sizes: (_j = (_i = this.sizes) != null ? _i : this.data.sizes) != null ? _j : 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) ? vueDemi.h("div", {
       style: {
@@ -372,34 +412,29 @@ const Image = vueDemi.defineComponent({
       }
     }) : null;
     const { width, aspectRatio } = this.data;
-    const height = this.data.height ?? (aspectRatio ? width / aspectRatio : 0);
-    const sizer = this.layout !== "fill" ? vueDemi.h(Sizer, {
-      ...vueDemi.isVue2 && {
-        props: {
-          sizerClass: this.pictureClass,
-          sizerStyle: this.pictureStyle,
-          width,
-          height,
-          explicitWidth: this.explicitWidth
-        }
-      },
-      ...vueDemi.isVue3 && {
+    const height = (_k = this.data.height) != null ? _k : aspectRatio ? width / aspectRatio : 0;
+    const sizer = this.layout !== "fill" ? vueDemi.h(Sizer, __spreadValues$2(__spreadValues$2({}, vueDemi.isVue2 && {
+      props: {
         sizerClass: this.pictureClass,
         sizerStyle: this.pictureStyle,
         width,
         height,
         explicitWidth: this.explicitWidth
       }
-    }) : null;
+    }), vueDemi.isVue3 && {
+      sizerClass: this.pictureClass,
+      sizerStyle: this.pictureStyle,
+      width,
+      height,
+      explicitWidth: this.explicitWidth
+    })) : null;
     return vueDemi.h(
       "div",
       {
-        style: {
+        style: __spreadValues$2(__spreadValues$2({
           display: this.explicitWidth ? "inline-block" : "block",
-          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
-        },
+          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"
       },
       [
@@ -408,68 +443,36 @@ const Image = vueDemi.defineComponent({
         addImage && vueDemi.h("picture", null, [
           webpSource,
           regularSource,
-          this.data.src && vueDemi.h("img", {
-            ...vueDemi.isVue2 && {
-              attrs: {
-                src: this.data.src,
-                alt: this.data.alt,
-                title: this.data.title,
-                fetchpriority: this.priority ? "high" : void 0
-              },
-              on: {
-                load: this.handleLoad
-              }
-            },
-            ...vueDemi.isVue3 && {
+          this.data.src && vueDemi.h("img", __spreadProps$2(__spreadValues$2(__spreadValues$2({}, vueDemi.isVue2 && {
+            attrs: {
               src: this.data.src,
               alt: this.data.alt,
               title: this.data.title,
-              fetchpriority: this.priority ? "high" : void 0,
-              onLoad: this.handleLoad
+              fetchpriority: this.priority ? "high" : void 0
             },
+            on: {
+              load: this.handleLoad
+            }
+          }), vueDemi.isVue3 && {
+            src: this.data.src,
+            alt: this.data.alt,
+            title: this.data.title,
+            fetchpriority: this.priority ? "high" : void 0,
+            onLoad: this.handleLoad
+          }), {
             ref: "imageRef",
             class: this.pictureClass,
-            style: {
+            style: __spreadValues$2(__spreadProps$2(__spreadValues$2({
               opacity: showImage ? 1 : 0,
-              transition,
-              ...absolutePositioning,
+              transition
+            }, absolutePositioning), {
               objectFit: this.objectFit,
-              objectPosition: this.objectPosition,
-              ...this.pictureStyle
-            }
-          })
+              objectPosition: this.objectPosition
+            }), this.pictureStyle)
+          }))
         ]),
-        vueDemi.h("noscript", {
-          ...vueDemi.isVue2 && {
-            domProps: {
-              innerHTML: tag("picture", {}, [
-                this.data.webpSrcSet && tag("source", {
-                  srcset: this.data.webpSrcSet,
-                  sizes: this.data.sizes,
-                  type: "image/webp"
-                }),
-                this.data.srcSet && tag("source", {
-                  srcset: this.data.srcSet,
-                  sizes: this.data.sizes
-                }),
-                tag("img", {
-                  src: this.data.src,
-                  alt: this.data.alt,
-                  title: this.data.title,
-                  class: this.pictureClass,
-                  style: toCss({
-                    ...absolutePositioning,
-                    objectFit: this.objectFit,
-                    objectPosition: this.objectPosition,
-                    ...this.pictureStyle
-                  }),
-                  loading: this.computedLazyLoad ? "lazy" : void 0,
-                  fetchpriority: this.priority ? "high" : void 0
-                })
-              ])
-            }
-          },
-          ...vueDemi.isVue3 && {
+        vueDemi.h("noscript", __spreadValues$2(__spreadValues$2({}, vueDemi.isVue2 && {
+          domProps: {
             innerHTML: tag("picture", {}, [
               this.data.webpSrcSet && tag("source", {
                 srcset: this.data.webpSrcSet,
@@ -485,13 +488,37 @@ const Image = vueDemi.defineComponent({
                 alt: this.data.alt,
                 title: this.data.title,
                 class: this.pictureClass,
-                style: toCss({ ...this.pictureStyle, ...absolutePositioning }),
+                style: toCss(__spreadValues$2(__spreadProps$2(__spreadValues$2({}, absolutePositioning), {
+                  objectFit: this.objectFit,
+                  objectPosition: this.objectPosition
+                }), this.pictureStyle)),
                 loading: this.computedLazyLoad ? "lazy" : void 0,
                 fetchpriority: this.priority ? "high" : void 0
               })
             ])
           }
-        })
+        }), vueDemi.isVue3 && {
+          innerHTML: tag("picture", {}, [
+            this.data.webpSrcSet && tag("source", {
+              srcset: this.data.webpSrcSet,
+              sizes: this.data.sizes,
+              type: "image/webp"
+            }),
+            this.data.srcSet && tag("source", {
+              srcset: this.data.srcSet,
+              sizes: this.data.sizes
+            }),
+            tag("img", {
+              src: this.data.src,
+              alt: this.data.alt,
+              title: this.data.title,
+              class: this.pictureClass,
+              style: toCss(__spreadValues$2(__spreadValues$2({}, this.pictureStyle), absolutePositioning)),
+              loading: this.computedLazyLoad ? "lazy" : void 0,
+              fetchpriority: this.priority ? "high" : void 0
+            })
+          ])
+        }))
       ]
     );
   }
@@ -663,15 +690,66 @@ const DatocmsStructuredTextPlugin = {
   }
 };
 
-const useQuerySubscription = ({ enabled = true, initialData, query, token, ...other }) => {
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async$1 = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const useQuerySubscription = (_a) => {
+  var _b = _a, { enabled = true, initialData, query, token } = _b, other = __objRest(_b, ["enabled", "initialData", "query", "token"]);
   const error = vueDemi.ref(null);
   const data = vueDemi.ref(vueDemi.unref(initialData) || null);
   const status = vueDemi.ref(vueDemi.unref(enabled) ? "connecting" : "closed");
   const subscribeToQueryOptions = other;
-  vueDemi.watchEffect(async (onCleanup) => {
+  vueDemi.watchEffect((onCleanup) => __async$1(void 0, null, function* () {
     if (query && token && vueDemi.unref(enabled)) {
-      const unsubscribe = await datocmsListen.subscribeToQuery({
-        ...subscribeToQueryOptions,
+      const unsubscribe = yield datocmsListen.subscribeToQuery(__spreadProps$1(__spreadValues$1({}, subscribeToQueryOptions), {
         query,
         token,
         onStatusChange: (connectionStatus) => {
@@ -685,13 +763,33 @@ const useQuerySubscription = ({ enabled = true, initialData, query, token, ...ot
           data.value = null;
           error.value = errorData;
         }
-      });
+      }));
       onCleanup(unsubscribe);
     }
-  });
+  }));
   return { data, status, error };
 };
 
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 const highlightPieces = (textWithHighlightMarker) => {
   return textWithHighlightMarker.split(/\[h\](.+?)\[\/h\]/g).map((text, index) => ({
     text,
@@ -699,10 +797,11 @@ const highlightPieces = (textWithHighlightMarker) => {
   }));
 };
 function useSiteSearch(config) {
+  var _a, _b, _c;
   const state = vueDemi.reactive({
-    query: config.initialState?.query || "",
-    page: config.initialState?.page || 0,
-    locale: config.initialState?.locale
+    query: ((_a = config.initialState) == null ? void 0 : _a.query) || "",
+    page: ((_b = config.initialState) == null ? void 0 : _b.page) || 0,
+    locale: (_c = config.initialState) == null ? void 0 : _c.locale
   });
   const error = vueDemi.ref();
   const response = vueDemi.reactive({
@@ -713,7 +812,7 @@ function useSiteSearch(config) {
   const resultsPerPage = config.resultsPerPage || 8;
   vueDemi.watchEffect((onCleanup) => {
     let isCancelled = false;
-    const run = async () => {
+    const run = () => __async(this, null, function* () {
       try {
         if (!state.query) {
           response.data = [];
@@ -734,7 +833,7 @@ function useSiteSearch(config) {
         if (config.fuzzySearch) {
           request.fuzzy = "true";
         }
-        const results = await config.client.searchResults.rawList(request);
+        const results = yield config.client.searchResults.rawList(request);
         if (!isCancelled) {
           response.data = results.data;
           response.meta.total_count = results.meta.total_count;
@@ -749,7 +848,7 @@ function useSiteSearch(config) {
           error.value = "Unknown error!";
         }
       }
-    };
+    });
     run();
     onCleanup(() => {
       isCancelled = true;
@@ -781,6 +880,25 @@ function useSiteSearch(config) {
   };
 }
 
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const toHead = (...args) => {
   const tags = [].concat(...args);
   const titleTag = tags && tags.find((t) => t.tag === "title");
@@ -788,16 +906,20 @@ const toHead = (...args) => {
   const linkTags = tags ? tags.filter((t) => t.tag === "link") : [];
   return {
     title: titleTag && titleTag.content,
-    meta: metaTags.map((tag) => ({
-      ...tag.attributes,
-      hid: tag.attributes?.name || tag.attributes?.property,
-      vmid: tag.attributes?.name || tag.attributes?.property
-    })),
-    link: linkTags.map((tag) => ({
-      ...tag.attributes,
-      hid: tag.attributes?.name || `${tag.attributes?.rel}-${tag.attributes?.sizes}`,
-      vmid: tag.attributes?.name || `${tag.attributes?.rel}-${tag.attributes?.sizes}`
-    }))
+    meta: metaTags.map((tag) => {
+      var _a, _b, _c, _d;
+      return __spreadProps(__spreadValues({}, tag.attributes), {
+        hid: ((_a = tag.attributes) == null ? void 0 : _a.name) || ((_b = tag.attributes) == null ? void 0 : _b.property),
+        vmid: ((_c = tag.attributes) == null ? void 0 : _c.name) || ((_d = tag.attributes) == null ? void 0 : _d.property)
+      });
+    }),
+    link: linkTags.map((tag) => {
+      var _a, _b, _c, _d, _e, _f;
+      return __spreadProps(__spreadValues({}, tag.attributes), {
+        hid: ((_a = tag.attributes) == null ? void 0 : _a.name) || `${(_b = tag.attributes) == null ? void 0 : _b.rel}-${(_c = tag.attributes) == null ? void 0 : _c.sizes}`,
+        vmid: ((_d = tag.attributes) == null ? void 0 : _d.name) || `${(_e = tag.attributes) == null ? void 0 : _e.rel}-${(_f = tag.attributes) == null ? void 0 : _f.sizes}`
+      });
+    })
   };
 };
 

package/dist/index.d.ts

@@ -387,7 +387,7 @@ declare type EnabledQueryListenerOptions<QueryResult, QueryVariables> = {
 } & SubscribeToQueryOptions<QueryResult, QueryVariables>;
 declare type DisabledQueryListenerOptions<QueryResult, QueryVariables> = {
     /** Whether the subscription has to be performed or not */
-    enabled: false | Ref<boolean>;
+    enabled: false | Ref<false>;
     /** The initial data to use while the initial request is being performed */
     initialData?: QueryResult;
 } & Partial<SubscribeToQueryOptions<QueryResult, QueryVariables>>;

package/dist/index.esm.mjs

@@ -44,6 +44,22 @@ const useInView = ({ threshold, rootMargin }) => {
   return { inView, elRef };
 };
 
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = 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$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
 const Source = defineComponent({
   props: {
     srcset: {
@@ -57,23 +73,36 @@ const Source = defineComponent({
     }
   },
   setup({ srcset, sizes, type }) {
-    return () => h("source", {
-      ...isVue2 && {
-        attrs: {
-          srcset,
-          sizes,
-          type
-        }
-      },
-      ...isVue3 && {
+    return () => h("source", __spreadValues$4(__spreadValues$4({}, isVue2 && {
+      attrs: {
         srcset,
         sizes,
         type
       }
-    });
+    }), isVue3 && {
+      srcset,
+      sizes,
+      type
+    }));
   }
 });
 
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
+    }
+  return a;
+};
 const universalBtoa = (str) => isSsr() ? Buffer.from(str.toString(), "binary").toString("base64") : window.btoa(str);
 const Sizer = defineComponent({
   props: {
@@ -96,27 +125,43 @@ const Sizer = defineComponent({
   },
   setup({ sizerClass, sizerStyle, width, height, explicitWidth }) {
     const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
-    return () => h("img", {
+    return () => h("img", __spreadValues$3(__spreadValues$3({
       class: sizerClass,
-      style: {
+      style: __spreadValues$3({
         display: "block",
-        width: explicitWidth ? `${width}px` : "100%",
-        ...sizerStyle
-      },
-      ...isVue2 && {
-        attrs: {
-          src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
-          role: "presentation"
-        }
-      },
-      ...isVue3 && {
+        width: explicitWidth ? `${width}px` : "100%"
+      }, sizerStyle)
+    }, isVue2 && {
+      attrs: {
         src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
         role: "presentation"
       }
-    });
+    }), isVue3 && {
+      src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
+      role: "presentation"
+    }));
   }
 });
 
+var __defProp$2 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 const escape = (s) => {
   s = "" + s;
   s = s.replace(/&/g, "&amp;");
@@ -312,6 +357,7 @@ const Image = defineComponent({
     };
   },
   render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     const addImage = imageAddStrategy({
       lazyLoad: this.computedLazyLoad,
       inView: this.inView,
@@ -322,32 +368,26 @@ const Image = defineComponent({
       inView: this.inView,
       loaded: this.loaded
     });
-    const webpSource = this.data.webpSrcSet && h(Source, {
-      ...isVue2 && {
-        props: {
-          srcset: this.data.webpSrcSet,
-          sizes: this.sizes ?? this.data.sizes ?? void 0,
-          type: "image/webp"
-        }
-      },
-      ...isVue3 && {
+    const webpSource = this.data.webpSrcSet && h(Source, __spreadValues$2(__spreadValues$2({}, isVue2 && {
+      props: {
         srcset: this.data.webpSrcSet,
-        sizes: this.sizes ?? this.data.sizes ?? void 0,
+        sizes: (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : void 0,
         type: "image/webp"
       }
-    });
-    const regularSource = this.data.srcSet && h(Source, {
-      ...isVue2 && {
-        props: {
-          srcset: this.data.srcSet ?? buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
-          sizes: this.sizes ?? this.data.sizes ?? void 0
-        }
-      },
-      ...isVue3 && {
-        srcset: this.data.srcSet ?? buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
-        sizes: this.sizes ?? this.data.sizes ?? void 0
+    }), isVue3 && {
+      srcset: this.data.webpSrcSet,
+      sizes: (_d = (_c = this.sizes) != null ? _c : this.data.sizes) != null ? _d : void 0,
+      type: "image/webp"
+    }));
+    const regularSource = this.data.srcSet && h(Source, __spreadValues$2(__spreadValues$2({}, isVue2 && {
+      props: {
+        srcset: (_e = this.data.srcSet) != null ? _e : buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
+        sizes: (_g = (_f = this.sizes) != null ? _f : this.data.sizes) != null ? _g : void 0
       }
-    });
+    }), isVue3 && {
+      srcset: (_h = this.data.srcSet) != null ? _h : buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
+      sizes: (_j = (_i = this.sizes) != null ? _i : this.data.sizes) != null ? _j : 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", {
       style: {
@@ -366,34 +406,29 @@ const Image = defineComponent({
       }
     }) : null;
     const { width, aspectRatio } = this.data;
-    const height = this.data.height ?? (aspectRatio ? width / aspectRatio : 0);
-    const sizer = this.layout !== "fill" ? h(Sizer, {
-      ...isVue2 && {
-        props: {
-          sizerClass: this.pictureClass,
-          sizerStyle: this.pictureStyle,
-          width,
-          height,
-          explicitWidth: this.explicitWidth
-        }
-      },
-      ...isVue3 && {
+    const height = (_k = this.data.height) != null ? _k : aspectRatio ? width / aspectRatio : 0;
+    const sizer = this.layout !== "fill" ? h(Sizer, __spreadValues$2(__spreadValues$2({}, isVue2 && {
+      props: {
         sizerClass: this.pictureClass,
         sizerStyle: this.pictureStyle,
         width,
         height,
         explicitWidth: this.explicitWidth
       }
-    }) : null;
+    }), isVue3 && {
+      sizerClass: this.pictureClass,
+      sizerStyle: this.pictureStyle,
+      width,
+      height,
+      explicitWidth: this.explicitWidth
+    })) : null;
     return h(
       "div",
       {
-        style: {
+        style: __spreadValues$2(__spreadValues$2({
           display: this.explicitWidth ? "inline-block" : "block",
-          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
-        },
+          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"
       },
       [
@@ -402,68 +437,36 @@ const Image = defineComponent({
         addImage && h("picture", null, [
           webpSource,
           regularSource,
-          this.data.src && h("img", {
-            ...isVue2 && {
-              attrs: {
-                src: this.data.src,
-                alt: this.data.alt,
-                title: this.data.title,
-                fetchpriority: this.priority ? "high" : void 0
-              },
-              on: {
-                load: this.handleLoad
-              }
-            },
-            ...isVue3 && {
+          this.data.src && h("img", __spreadProps$2(__spreadValues$2(__spreadValues$2({}, isVue2 && {
+            attrs: {
               src: this.data.src,
               alt: this.data.alt,
               title: this.data.title,
-              fetchpriority: this.priority ? "high" : void 0,
-              onLoad: this.handleLoad
+              fetchpriority: this.priority ? "high" : void 0
             },
+            on: {
+              load: this.handleLoad
+            }
+          }), isVue3 && {
+            src: this.data.src,
+            alt: this.data.alt,
+            title: this.data.title,
+            fetchpriority: this.priority ? "high" : void 0,
+            onLoad: this.handleLoad
+          }), {
             ref: "imageRef",
             class: this.pictureClass,
-            style: {
+            style: __spreadValues$2(__spreadProps$2(__spreadValues$2({
               opacity: showImage ? 1 : 0,
-              transition,
-              ...absolutePositioning,
+              transition
+            }, absolutePositioning), {
               objectFit: this.objectFit,
-              objectPosition: this.objectPosition,
-              ...this.pictureStyle
-            }
-          })
+              objectPosition: this.objectPosition
+            }), this.pictureStyle)
+          }))
         ]),
-        h("noscript", {
-          ...isVue2 && {
-            domProps: {
-              innerHTML: tag("picture", {}, [
-                this.data.webpSrcSet && tag("source", {
-                  srcset: this.data.webpSrcSet,
-                  sizes: this.data.sizes,
-                  type: "image/webp"
-                }),
-                this.data.srcSet && tag("source", {
-                  srcset: this.data.srcSet,
-                  sizes: this.data.sizes
-                }),
-                tag("img", {
-                  src: this.data.src,
-                  alt: this.data.alt,
-                  title: this.data.title,
-                  class: this.pictureClass,
-                  style: toCss({
-                    ...absolutePositioning,
-                    objectFit: this.objectFit,
-                    objectPosition: this.objectPosition,
-                    ...this.pictureStyle
-                  }),
-                  loading: this.computedLazyLoad ? "lazy" : void 0,
-                  fetchpriority: this.priority ? "high" : void 0
-                })
-              ])
-            }
-          },
-          ...isVue3 && {
+        h("noscript", __spreadValues$2(__spreadValues$2({}, isVue2 && {
+          domProps: {
             innerHTML: tag("picture", {}, [
               this.data.webpSrcSet && tag("source", {
                 srcset: this.data.webpSrcSet,
@@ -479,13 +482,37 @@ const Image = defineComponent({
                 alt: this.data.alt,
                 title: this.data.title,
                 class: this.pictureClass,
-                style: toCss({ ...this.pictureStyle, ...absolutePositioning }),
+                style: toCss(__spreadValues$2(__spreadProps$2(__spreadValues$2({}, absolutePositioning), {
+                  objectFit: this.objectFit,
+                  objectPosition: this.objectPosition
+                }), this.pictureStyle)),
                 loading: this.computedLazyLoad ? "lazy" : void 0,
                 fetchpriority: this.priority ? "high" : void 0
               })
             ])
           }
-        })
+        }), isVue3 && {
+          innerHTML: tag("picture", {}, [
+            this.data.webpSrcSet && tag("source", {
+              srcset: this.data.webpSrcSet,
+              sizes: this.data.sizes,
+              type: "image/webp"
+            }),
+            this.data.srcSet && tag("source", {
+              srcset: this.data.srcSet,
+              sizes: this.data.sizes
+            }),
+            tag("img", {
+              src: this.data.src,
+              alt: this.data.alt,
+              title: this.data.title,
+              class: this.pictureClass,
+              style: toCss(__spreadValues$2(__spreadValues$2({}, this.pictureStyle), absolutePositioning)),
+              loading: this.computedLazyLoad ? "lazy" : void 0,
+              fetchpriority: this.priority ? "high" : void 0
+            })
+          ])
+        }))
       ]
     );
   }
@@ -657,15 +684,66 @@ const DatocmsStructuredTextPlugin = {
   }
 };
 
-const useQuerySubscription = ({ enabled = true, initialData, query, token, ...other }) => {
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async$1 = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const useQuerySubscription = (_a) => {
+  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 subscribeToQueryOptions = other;
-  watchEffect(async (onCleanup) => {
+  watchEffect((onCleanup) => __async$1(void 0, null, function* () {
     if (query && token && unref(enabled)) {
-      const unsubscribe = await subscribeToQuery({
-        ...subscribeToQueryOptions,
+      const unsubscribe = yield subscribeToQuery(__spreadProps$1(__spreadValues$1({}, subscribeToQueryOptions), {
         query,
         token,
         onStatusChange: (connectionStatus) => {
@@ -679,13 +757,33 @@ const useQuerySubscription = ({ enabled = true, initialData, query, token, ...ot
           data.value = null;
           error.value = errorData;
         }
-      });
+      }));
       onCleanup(unsubscribe);
     }
-  });
+  }));
   return { data, status, error };
 };
 
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 const highlightPieces = (textWithHighlightMarker) => {
   return textWithHighlightMarker.split(/\[h\](.+?)\[\/h\]/g).map((text, index) => ({
     text,
@@ -693,10 +791,11 @@ const highlightPieces = (textWithHighlightMarker) => {
   }));
 };
 function useSiteSearch(config) {
+  var _a, _b, _c;
   const state = reactive({
-    query: config.initialState?.query || "",
-    page: config.initialState?.page || 0,
-    locale: config.initialState?.locale
+    query: ((_a = config.initialState) == null ? void 0 : _a.query) || "",
+    page: ((_b = config.initialState) == null ? void 0 : _b.page) || 0,
+    locale: (_c = config.initialState) == null ? void 0 : _c.locale
   });
   const error = ref();
   const response = reactive({
@@ -707,7 +806,7 @@ function useSiteSearch(config) {
   const resultsPerPage = config.resultsPerPage || 8;
   watchEffect((onCleanup) => {
     let isCancelled = false;
-    const run = async () => {
+    const run = () => __async(this, null, function* () {
       try {
         if (!state.query) {
           response.data = [];
@@ -728,7 +827,7 @@ function useSiteSearch(config) {
         if (config.fuzzySearch) {
           request.fuzzy = "true";
         }
-        const results = await config.client.searchResults.rawList(request);
+        const results = yield config.client.searchResults.rawList(request);
         if (!isCancelled) {
           response.data = results.data;
           response.meta.total_count = results.meta.total_count;
@@ -743,7 +842,7 @@ function useSiteSearch(config) {
           error.value = "Unknown error!";
         }
       }
-    };
+    });
     run();
     onCleanup(() => {
       isCancelled = true;
@@ -775,6 +874,25 @@ function useSiteSearch(config) {
   };
 }
 
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const toHead = (...args) => {
   const tags = [].concat(...args);
   const titleTag = tags && tags.find((t) => t.tag === "title");
@@ -782,16 +900,20 @@ const toHead = (...args) => {
   const linkTags = tags ? tags.filter((t) => t.tag === "link") : [];
   return {
     title: titleTag && titleTag.content,
-    meta: metaTags.map((tag) => ({
-      ...tag.attributes,
-      hid: tag.attributes?.name || tag.attributes?.property,
-      vmid: tag.attributes?.name || tag.attributes?.property
-    })),
-    link: linkTags.map((tag) => ({
-      ...tag.attributes,
-      hid: tag.attributes?.name || `${tag.attributes?.rel}-${tag.attributes?.sizes}`,
-      vmid: tag.attributes?.name || `${tag.attributes?.rel}-${tag.attributes?.sizes}`
-    }))
+    meta: metaTags.map((tag) => {
+      var _a, _b, _c, _d;
+      return __spreadProps(__spreadValues({}, tag.attributes), {
+        hid: ((_a = tag.attributes) == null ? void 0 : _a.name) || ((_b = tag.attributes) == null ? void 0 : _b.property),
+        vmid: ((_c = tag.attributes) == null ? void 0 : _c.name) || ((_d = tag.attributes) == null ? void 0 : _d.property)
+      });
+    }),
+    link: linkTags.map((tag) => {
+      var _a, _b, _c, _d, _e, _f;
+      return __spreadProps(__spreadValues({}, tag.attributes), {
+        hid: ((_a = tag.attributes) == null ? void 0 : _a.name) || `${(_b = tag.attributes) == null ? void 0 : _b.rel}-${(_c = tag.attributes) == null ? void 0 : _c.sizes}`,
+        vmid: ((_d = tag.attributes) == null ? void 0 : _d.name) || `${(_e = tag.attributes) == null ? void 0 : _e.rel}-${(_f = tag.attributes) == null ? void 0 : _f.sizes}`
+      });
+    })
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-datocms",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
   "keywords": [
     "datocms",
@@ -46,7 +46,7 @@
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.7.1",
-    "vue": "^2.0.0 || >=3.0.0"
+    "vue": ">= 2.5 < 2.7 || >=3.0.0"
   },
   "peerDependenciesMeta": {
     "@vue/composition-api": {