vue-datocms 3.0.1 → 3.0.3

package/dist/index.cjs.js

@@ -27,8 +27,7 @@ const useInView = ({ threshold, rootMargin }) => {
     if (isIntersectionObserverAvailable()) {
       observer.value = new IntersectionObserver(
         (entries) => {
-          const image = entries[0];
-          if (image.isIntersecting && observer.value) {
+          if (entries.some(({ isIntersecting }) => isIntersecting) && observer.value) {
             inView.value = true;
             observer.value.disconnect();
           }
@@ -51,22 +50,6 @@ 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: {
@@ -80,36 +63,23 @@ const Source = vueDemi.defineComponent({
     }
   },
   setup({ srcset, sizes, type }) {
-    return () => vueDemi.h("source", __spreadValues$4(__spreadValues$4({}, vueDemi.isVue2 && {
-      attrs: {
+    return () => vueDemi.h("source", {
+      ...vueDemi.isVue2 && {
+        attrs: {
+          srcset,
+          sizes,
+          type
+        }
+      },
+      ...vueDemi.isVue3 && {
         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: {
@@ -132,43 +102,27 @@ 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", __spreadValues$3(__spreadValues$3({
+    return () => vueDemi.h("img", {
       class: sizerClass,
-      style: __spreadValues$3({
+      style: {
         display: "block",
-        width: explicitWidth ? `${width}px` : "100%"
-      }, sizerStyle)
-    }, vueDemi.isVue2 && {
-      attrs: {
+        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"
       }
-    }), 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;");
@@ -314,62 +268,74 @@ const Image = vueDemi.defineComponent({
       inView: this.inView,
       loaded: this.loaded
     });
-    const webpSource = this.data.webpSrcSet && vueDemi.h(Source, __spreadValues$2(__spreadValues$2({}, vueDemi.isVue2 && {
-      props: {
+    const webpSource = this.data.webpSrcSet && vueDemi.h(Source, {
+      ...vueDemi.isVue2 && {
+        props: {
+          srcset: this.data.webpSrcSet,
+          sizes: this.data.sizes,
+          type: "image/webp"
+        }
+      },
+      ...vueDemi.isVue3 && {
         srcset: this.data.webpSrcSet,
         sizes: this.data.sizes,
         type: "image/webp"
       }
-    }), vueDemi.isVue3 && {
-      srcset: this.data.webpSrcSet,
-      sizes: this.data.sizes,
-      type: "image/webp"
-    }));
-    const regularSource = this.data.srcSet && vueDemi.h(Source, __spreadValues$2(__spreadValues$2({}, vueDemi.isVue2 && {
-      props: {
+    });
+    const regularSource = this.data.srcSet && vueDemi.h(Source, {
+      ...vueDemi.isVue2 && {
+        props: {
+          srcset: this.data.srcSet,
+          sizes: this.data.sizes
+        }
+      },
+      ...vueDemi.isVue3 && {
         srcset: this.data.srcSet,
         sizes: this.data.sizes
       }
-    }), vueDemi.isVue3 && {
-      srcset: this.data.srcSet,
-      sizes: this.data.sizes
-    }));
+    });
     const transition = typeof this.fadeInDuration === "undefined" || this.fadeInDuration > 0 ? `opacity ${this.fadeInDuration || 500}ms ${this.fadeInDuration || 500}ms` : void 0;
     const placeholder = vueDemi.h("div", {
-      style: __spreadValues$2({
+      style: {
         backgroundImage: this.data.base64 ? `url(${this.data.base64})` : null,
         backgroundColor: this.data.bgColor,
         backgroundSize: "cover",
         opacity: showImage ? 0 : 1,
         objectFit: this.objectFit,
         objectPosition: this.objectPosition,
-        transition
-      }, absolutePositioning)
+        transition,
+        ...absolutePositioning
+      }
     });
     const { width, aspectRatio } = this.data;
     const height = this.data.height || width / aspectRatio;
-    const sizer = this.layout !== "fill" ? vueDemi.h(Sizer, __spreadValues$2(__spreadValues$2({}, vueDemi.isVue2 && {
-      props: {
+    const sizer = this.layout !== "fill" ? vueDemi.h(Sizer, {
+      ...vueDemi.isVue2 && {
+        props: {
+          sizerClass: this.pictureClass,
+          sizerStyle: this.pictureStyle,
+          width,
+          height,
+          explicitWidth: this.explicitWidth
+        }
+      },
+      ...vueDemi.isVue3 && {
         sizerClass: this.pictureClass,
         sizerStyle: this.pictureStyle,
         width,
         height,
         explicitWidth: this.explicitWidth
       }
-    }), vueDemi.isVue3 && {
-      sizerClass: this.pictureClass,
-      sizerStyle: this.pictureStyle,
-      width,
-      height,
-      explicitWidth: this.explicitWidth
-    })) : null;
+    }) : null;
     return vueDemi.h(
       "div",
       {
-        style: __spreadValues$2(__spreadValues$2({
+        style: {
           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"
       },
       [
@@ -378,32 +344,59 @@ const Image = vueDemi.defineComponent({
         addImage && vueDemi.h("picture", null, [
           webpSource,
           regularSource,
-          this.data.src && vueDemi.h("img", __spreadProps$2(__spreadValues$2(__spreadValues$2({}, vueDemi.isVue2 && {
-            attrs: {
+          this.data.src && vueDemi.h("img", {
+            ...vueDemi.isVue2 && {
+              attrs: {
+                src: this.data.src,
+                alt: this.data.alt,
+                title: this.data.title
+              },
+              on: {
+                load: this.handleLoad
+              }
+            },
+            ...vueDemi.isVue3 && {
               src: this.data.src,
               alt: this.data.alt,
-              title: this.data.title
+              title: this.data.title,
+              onLoad: this.handleLoad
             },
-            on: {
-              load: this.handleLoad
-            }
-          }), vueDemi.isVue3 && {
-            src: this.data.src,
-            alt: this.data.alt,
-            title: this.data.title,
-            onLoad: this.handleLoad
-          }), {
             class: this.pictureClass,
-            style: __spreadProps$2(__spreadValues$2(__spreadValues$2({}, absolutePositioning), this.pictureStyle), {
+            style: {
+              ...absolutePositioning,
+              ...this.pictureStyle,
               opacity: showImage ? 1 : 0,
               transition,
               objectFit: this.objectFit,
               objectPosition: this.objectPosition
-            })
-          }))
+            }
+          })
         ]),
-        vueDemi.h("noscript", __spreadValues$2(__spreadValues$2({}, vueDemi.isVue2 && {
-          domProps: {
+        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({ ...this.pictureStyle, ...absolutePositioning }),
+                  loading: "lazy"
+                })
+              ])
+            }
+          },
+          ...vueDemi.isVue3 && {
             innerHTML: tag("picture", {}, [
               this.data.webpSrcSet && tag("source", {
                 srcset: this.data.webpSrcSet,
@@ -419,32 +412,12 @@ const Image = vueDemi.defineComponent({
                 alt: this.data.alt,
                 title: this.data.title,
                 class: this.pictureClass,
-                style: toCss(__spreadValues$2(__spreadValues$2({}, this.pictureStyle), absolutePositioning)),
+                style: toCss({ ...this.pictureStyle, ...absolutePositioning }),
                 loading: "lazy"
               })
             ])
           }
-        }), 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: "lazy"
-            })
-          ])
-        }))
+        })
       ]
     );
   }
@@ -616,59 +589,8 @@ const DatocmsStructuredTextPlugin = {
   }
 };
 
-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());
-  });
-};
 function useQuerySubscription(options) {
-  const _a = options, { enabled, initialData } = _a, other = __objRest(_a, ["enabled", "initialData"]);
+  const { enabled, initialData, ...other } = options;
   const error = vueDemi.ref(null);
   const data = vueDemi.ref(null);
   const status = vueDemi.ref(
@@ -682,21 +604,20 @@ function useQuerySubscription(options) {
       };
     }
     let unsubscribe;
-    function subscribe() {
-      return __async$1(this, null, function* () {
-        unsubscribe = yield datocmsListen.subscribeToQuery(__spreadProps$1(__spreadValues$1({}, subscribeToQueryOptions), {
-          onStatusChange: (connectionStatus) => {
-            status.value = connectionStatus;
-          },
-          onUpdate: (updateData) => {
-            error.value = null;
-            data.value = updateData.response.data;
-          },
-          onChannelError: (errorData) => {
-            data.value = null;
-            error.value = errorData;
-          }
-        }));
+    async function subscribe() {
+      unsubscribe = await datocmsListen.subscribeToQuery({
+        ...subscribeToQueryOptions,
+        onStatusChange: (connectionStatus) => {
+          status.value = connectionStatus;
+        },
+        onUpdate: (updateData) => {
+          error.value = null;
+          data.value = updateData.response.data;
+        },
+        onChannelError: (errorData) => {
+          data.value = null;
+          error.value = errorData;
+        }
       });
     }
     subscribe();
@@ -709,26 +630,6 @@ function useQuerySubscription(options) {
   return { error, status, data: data || initialData };
 }
 
-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,
@@ -736,11 +637,10 @@ const highlightPieces = (textWithHighlightMarker) => {
   }));
 };
 function useSiteSearch(config) {
-  var _a, _b, _c;
   const state = vueDemi.reactive({
-    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
+    query: config.initialState?.query || "",
+    page: config.initialState?.page || 0,
+    locale: config.initialState?.locale
   });
   const error = vueDemi.ref();
   const response = vueDemi.reactive({
@@ -751,7 +651,7 @@ function useSiteSearch(config) {
   const resultsPerPage = config.resultsPerPage || 8;
   vueDemi.watchEffect((onCleanup) => {
     let isCancelled = false;
-    const run = () => __async(this, null, function* () {
+    const run = async () => {
       try {
         if (!state.query) {
           response.data = [];
@@ -772,7 +672,7 @@ function useSiteSearch(config) {
         if (config.fuzzySearch) {
           request.fuzzy = "true";
         }
-        const results = yield config.client.searchResults.rawList(request);
+        const results = await config.client.searchResults.rawList(request);
         if (!isCancelled) {
           response.data = results.data;
           response.meta.total_count = results.meta.total_count;
@@ -787,7 +687,7 @@ function useSiteSearch(config) {
           error.value = "Unknown error!";
         }
       }
-    });
+    };
     run();
     onCleanup(() => {
       isCancelled = true;
@@ -819,25 +719,6 @@ 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");
@@ -845,20 +726,16 @@ const toHead = (...args) => {
   const linkTags = tags ? tags.filter((t) => t.tag === "link") : [];
   return {
     title: titleTag && titleTag.content,
-    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}`
-      });
-    })
+    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}`
+    }))
   };
 };
 

package/dist/index.esm.mjs

@@ -21,8 +21,7 @@ const useInView = ({ threshold, rootMargin }) => {
     if (isIntersectionObserverAvailable()) {
       observer.value = new IntersectionObserver(
         (entries) => {
-          const image = entries[0];
-          if (image.isIntersecting && observer.value) {
+          if (entries.some(({ isIntersecting }) => isIntersecting) && observer.value) {
             inView.value = true;
             observer.value.disconnect();
           }
@@ -45,22 +44,6 @@ 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: {
@@ -74,36 +57,23 @@ const Source = defineComponent({
     }
   },
   setup({ srcset, sizes, type }) {
-    return () => h("source", __spreadValues$4(__spreadValues$4({}, isVue2 && {
-      attrs: {
+    return () => h("source", {
+      ...isVue2 && {
+        attrs: {
+          srcset,
+          sizes,
+          type
+        }
+      },
+      ...isVue3 && {
         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: {
@@ -126,43 +96,27 @@ 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", __spreadValues$3(__spreadValues$3({
+    return () => h("img", {
       class: sizerClass,
-      style: __spreadValues$3({
+      style: {
         display: "block",
-        width: explicitWidth ? `${width}px` : "100%"
-      }, sizerStyle)
-    }, isVue2 && {
-      attrs: {
+        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"
       }
-    }), 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;");
@@ -308,62 +262,74 @@ const Image = defineComponent({
       inView: this.inView,
       loaded: this.loaded
     });
-    const webpSource = this.data.webpSrcSet && h(Source, __spreadValues$2(__spreadValues$2({}, isVue2 && {
-      props: {
+    const webpSource = this.data.webpSrcSet && h(Source, {
+      ...isVue2 && {
+        props: {
+          srcset: this.data.webpSrcSet,
+          sizes: this.data.sizes,
+          type: "image/webp"
+        }
+      },
+      ...isVue3 && {
         srcset: this.data.webpSrcSet,
         sizes: this.data.sizes,
         type: "image/webp"
       }
-    }), isVue3 && {
-      srcset: this.data.webpSrcSet,
-      sizes: this.data.sizes,
-      type: "image/webp"
-    }));
-    const regularSource = this.data.srcSet && h(Source, __spreadValues$2(__spreadValues$2({}, isVue2 && {
-      props: {
+    });
+    const regularSource = this.data.srcSet && h(Source, {
+      ...isVue2 && {
+        props: {
+          srcset: this.data.srcSet,
+          sizes: this.data.sizes
+        }
+      },
+      ...isVue3 && {
         srcset: this.data.srcSet,
         sizes: this.data.sizes
       }
-    }), isVue3 && {
-      srcset: this.data.srcSet,
-      sizes: this.data.sizes
-    }));
+    });
     const transition = typeof this.fadeInDuration === "undefined" || this.fadeInDuration > 0 ? `opacity ${this.fadeInDuration || 500}ms ${this.fadeInDuration || 500}ms` : void 0;
     const placeholder = h("div", {
-      style: __spreadValues$2({
+      style: {
         backgroundImage: this.data.base64 ? `url(${this.data.base64})` : null,
         backgroundColor: this.data.bgColor,
         backgroundSize: "cover",
         opacity: showImage ? 0 : 1,
         objectFit: this.objectFit,
         objectPosition: this.objectPosition,
-        transition
-      }, absolutePositioning)
+        transition,
+        ...absolutePositioning
+      }
     });
     const { width, aspectRatio } = this.data;
     const height = this.data.height || width / aspectRatio;
-    const sizer = this.layout !== "fill" ? h(Sizer, __spreadValues$2(__spreadValues$2({}, isVue2 && {
-      props: {
+    const sizer = this.layout !== "fill" ? h(Sizer, {
+      ...isVue2 && {
+        props: {
+          sizerClass: this.pictureClass,
+          sizerStyle: this.pictureStyle,
+          width,
+          height,
+          explicitWidth: this.explicitWidth
+        }
+      },
+      ...isVue3 && {
         sizerClass: this.pictureClass,
         sizerStyle: this.pictureStyle,
         width,
         height,
         explicitWidth: this.explicitWidth
       }
-    }), isVue3 && {
-      sizerClass: this.pictureClass,
-      sizerStyle: this.pictureStyle,
-      width,
-      height,
-      explicitWidth: this.explicitWidth
-    })) : null;
+    }) : null;
     return h(
       "div",
       {
-        style: __spreadValues$2(__spreadValues$2({
+        style: {
           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"
       },
       [
@@ -372,32 +338,59 @@ const Image = defineComponent({
         addImage && h("picture", null, [
           webpSource,
           regularSource,
-          this.data.src && h("img", __spreadProps$2(__spreadValues$2(__spreadValues$2({}, isVue2 && {
-            attrs: {
+          this.data.src && h("img", {
+            ...isVue2 && {
+              attrs: {
+                src: this.data.src,
+                alt: this.data.alt,
+                title: this.data.title
+              },
+              on: {
+                load: this.handleLoad
+              }
+            },
+            ...isVue3 && {
               src: this.data.src,
               alt: this.data.alt,
-              title: this.data.title
+              title: this.data.title,
+              onLoad: this.handleLoad
             },
-            on: {
-              load: this.handleLoad
-            }
-          }), isVue3 && {
-            src: this.data.src,
-            alt: this.data.alt,
-            title: this.data.title,
-            onLoad: this.handleLoad
-          }), {
             class: this.pictureClass,
-            style: __spreadProps$2(__spreadValues$2(__spreadValues$2({}, absolutePositioning), this.pictureStyle), {
+            style: {
+              ...absolutePositioning,
+              ...this.pictureStyle,
               opacity: showImage ? 1 : 0,
               transition,
               objectFit: this.objectFit,
               objectPosition: this.objectPosition
-            })
-          }))
+            }
+          })
         ]),
-        h("noscript", __spreadValues$2(__spreadValues$2({}, isVue2 && {
-          domProps: {
+        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({ ...this.pictureStyle, ...absolutePositioning }),
+                  loading: "lazy"
+                })
+              ])
+            }
+          },
+          ...isVue3 && {
             innerHTML: tag("picture", {}, [
               this.data.webpSrcSet && tag("source", {
                 srcset: this.data.webpSrcSet,
@@ -413,32 +406,12 @@ const Image = defineComponent({
                 alt: this.data.alt,
                 title: this.data.title,
                 class: this.pictureClass,
-                style: toCss(__spreadValues$2(__spreadValues$2({}, this.pictureStyle), absolutePositioning)),
+                style: toCss({ ...this.pictureStyle, ...absolutePositioning }),
                 loading: "lazy"
               })
             ])
           }
-        }), 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: "lazy"
-            })
-          ])
-        }))
+        })
       ]
     );
   }
@@ -610,59 +583,8 @@ const DatocmsStructuredTextPlugin = {
   }
 };
 
-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());
-  });
-};
 function useQuerySubscription(options) {
-  const _a = options, { enabled, initialData } = _a, other = __objRest(_a, ["enabled", "initialData"]);
+  const { enabled, initialData, ...other } = options;
   const error = ref(null);
   const data = ref(null);
   const status = ref(
@@ -676,21 +598,20 @@ function useQuerySubscription(options) {
       };
     }
     let unsubscribe;
-    function subscribe() {
-      return __async$1(this, null, function* () {
-        unsubscribe = yield subscribeToQuery(__spreadProps$1(__spreadValues$1({}, subscribeToQueryOptions), {
-          onStatusChange: (connectionStatus) => {
-            status.value = connectionStatus;
-          },
-          onUpdate: (updateData) => {
-            error.value = null;
-            data.value = updateData.response.data;
-          },
-          onChannelError: (errorData) => {
-            data.value = null;
-            error.value = errorData;
-          }
-        }));
+    async function subscribe() {
+      unsubscribe = await subscribeToQuery({
+        ...subscribeToQueryOptions,
+        onStatusChange: (connectionStatus) => {
+          status.value = connectionStatus;
+        },
+        onUpdate: (updateData) => {
+          error.value = null;
+          data.value = updateData.response.data;
+        },
+        onChannelError: (errorData) => {
+          data.value = null;
+          error.value = errorData;
+        }
       });
     }
     subscribe();
@@ -703,26 +624,6 @@ function useQuerySubscription(options) {
   return { error, status, data: data || initialData };
 }
 
-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,
@@ -730,11 +631,10 @@ const highlightPieces = (textWithHighlightMarker) => {
   }));
 };
 function useSiteSearch(config) {
-  var _a, _b, _c;
   const state = reactive({
-    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
+    query: config.initialState?.query || "",
+    page: config.initialState?.page || 0,
+    locale: config.initialState?.locale
   });
   const error = ref();
   const response = reactive({
@@ -745,7 +645,7 @@ function useSiteSearch(config) {
   const resultsPerPage = config.resultsPerPage || 8;
   watchEffect((onCleanup) => {
     let isCancelled = false;
-    const run = () => __async(this, null, function* () {
+    const run = async () => {
       try {
         if (!state.query) {
           response.data = [];
@@ -766,7 +666,7 @@ function useSiteSearch(config) {
         if (config.fuzzySearch) {
           request.fuzzy = "true";
         }
-        const results = yield config.client.searchResults.rawList(request);
+        const results = await config.client.searchResults.rawList(request);
         if (!isCancelled) {
           response.data = results.data;
           response.meta.total_count = results.meta.total_count;
@@ -781,7 +681,7 @@ function useSiteSearch(config) {
           error.value = "Unknown error!";
         }
       }
-    });
+    };
     run();
     onCleanup(() => {
       isCancelled = true;
@@ -813,25 +713,6 @@ 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");
@@ -839,20 +720,16 @@ const toHead = (...args) => {
   const linkTags = tags ? tags.filter((t) => t.tag === "link") : [];
   return {
     title: titleTag && titleTag.content,
-    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}`
-      });
-    })
+    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}`
+    }))
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-datocms",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
   "keywords": [
     "datocms",