npm - vue-datocms - Versions diffs - 4.0.7 → 5.0.1 - Mend

vue-datocms 4.0.7 → 5.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -1,21 +1,21 @@
+<!--datocms-autoinclude-header start-->
+<a href="https://www.datocms.com/"><img src="https://www.datocms.com/images/full_logo.svg" height="60"></a>
+👉 [Visit the DatoCMS homepage](https://www.datocms.com) or see [What is DatoCMS?](#what-is-datocms)
+<!--datocms-autoinclude-header end-->
 # vue-datocms
-![MIT](https://img.shields.io/npm/l/vue-datocms?style=for-the-badge) ![NPM](https://img.shields.io/npm/v/vue-datocms?style=for-the-badge) [![Build Status](https://img.shields.io/github/actions/workflow/status/datocms/vue-datocms/node.js.yml?branch=master&style=for-the-badge)](https://github.com/datocms/vue-datocms/actions/workflows/node.js.yml)
+[![MIT](https://img.shields.io/npm/l/vue-datocms?style=for-the-badge)](https://github.com/datocms/vue-datocms/blob/master/LICENSE) [![NPM](https://img.shields.io/npm/v/vue-datocms?style=for-the-badge)](https://www.npmjs.com/package/vue-datocms) [![Build Status](https://img.shields.io/github/actions/workflow/status/datocms/vue-datocms/node.js.yml?branch=master&style=for-the-badge)](https://github.com/datocms/vue-datocms/actions/workflows/node.js.yml)
 A set of components and utilities to work faster with [DatoCMS](https://www.datocms.com/) in Vue.js environments. Integrates seamlessly with [DatoCMS's GraphQL Content Delivery API](https://www.datocms.com/docs/content-delivery-api).
-- Works with Vue 3 and Vue 2;
+- Works with Vue 3 (version 4 is maintained for compatibility with Vue 2);
 - TypeScript ready;
 - Compatible with any data-fetching library (axios, Apollo);
 - Usable both client and server side;
 - Compatible with vanilla Vue and pretty much any other Vue-based solution.
-<br /><br />
-<a href="https://www.datocms.com/">
-<img src="https://www.datocms.com/images/full_logo.svg" height="60">
-</a>
-<br /><br />
 ## Table of Contents
 - [Features](#features)
@@ -53,7 +53,6 @@ npm install vue-datocms
 This repository contains a number of examples. You can use them to locally test your changes to the package:
 - [Vue 3 + TypeScript + Vite](examples/vite-typescript-vue3/) ([running demo](https://vue-datocms-vite-typescript-vue3-example.vercel.app/))
-- [Vue 2 + Javacript + Vue CLI](examples/vue-cli-babel-javascript-vue2/) ([running demo](https://vue-datocms-vue-cli-babel-javascript-vue2-example.vercel.app/))
 - [Query subscription](examples/query-subscription/) ([running demo](https://vue-datocms-query-subscription-example.vercel.app/))
 - [Site search](examples/site-search/) ([running demo](https://vue-datocms-site-search-example.vercel.app/))
@@ -66,4 +65,31 @@ npm run setup
 npm run dev
 ```
-Due to the way Vue and VueDemi work, it's not recommended to leverage `npm link` to use the working copy from the examples: that would complicate the structure of each example and it would not replicate a real-world installation. Therefore the `npm run setup` available in each example packs and installs the local copy of `vue-datocms` via a `.tgz` compressed tarball.
+It's not recommended to leverage `npm link` to use the working copy from the examples: that would complicate the structure of each example and it would not replicate a real-world installation. Therefore the `npm run setup` available in each example packs and installs the local copy of `vue-datocms` via a `.tgz` compressed tarball.
+<!--datocms-autoinclude-footer start-->
+-----------------
+# What is DatoCMS?
+<a href="https://www.datocms.com/"><img src="https://www.datocms.com/images/full_logo.svg" height="60"></a>
+[DatoCMS](https://www.datocms.com/) is the REST & GraphQL Headless CMS for the modern web.
+Trusted by over 25,000 enterprise businesses, agency partners, and individuals across the world, DatoCMS users create online content at scale from a central hub and distribute it via API. We ❤️ our [developers](https://www.datocms.com/team/best-cms-for-developers), [content editors](https://www.datocms.com/team/content-creators) and [marketers](https://www.datocms.com/team/cms-digital-marketing)!
+**Quick links:**
+- ⚡️ Get started with a [free DatoCMS account](https://dashboard.datocms.com/signup)
+- 🔖 Go through the [docs](https://www.datocms.com/docs)
+- ⚙️ Get [support from us and the community](https://community.datocms.com/)
+- 🆕 Stay up to date on new features and fixes on the [changelog](https://www.datocms.com/product-updates)
+**Our featured repos:**
+- [datocms/react-datocms](https://github.com/datocms/react-datocms): React helper components for images, Structured Text rendering, and more
+- [datocms/js-rest-api-clients](https://github.com/datocms/js-rest-api-clients): Node and browser JavaScript clients for updating and administering your content. For frontend fetches, we recommend using our [GraphQL Content Delivery API](https://www.datocms.com/docs/content-delivery-api) instead.
+- [datocms/cli](https://github.com/datocms/cli): Command-line interface that includes our [Contentful importer](https://github.com/datocms/cli/tree/main/packages/cli-plugin-contentful) and [Wordpress importer](https://github.com/datocms/cli/tree/main/packages/cli-plugin-wordpress)
+- [datocms/plugins](https://github.com/datocms/plugins): Example plugins we've made that extend the editor/admin dashboard
+- [datocms/gatsby-source-datocms](https://github.com/datocms/gatsby-source-datocms): Our Gatsby source plugin to pull data from DatoCMS
+- Frontend examples in different frameworks: [Next.js](https://github.com/datocms/nextjs-demo), [Vue](https://github.com/datocms/vue-datocms) and [Nuxt](https://github.com/datocms/nuxtjs-demo), [Svelte](https://github.com/datocms/datocms-svelte) and [SvelteKit](https://github.com/datocms/sveltekit-demo), [Astro](https://github.com/datocms/datocms-astro-blog-demo), [Remix](https://github.com/datocms/remix-example). See [all our starter templates](https://www.datocms.com/marketplace/starters).
+Or see [all our public repos](https://github.com/orgs/datocms/repositories?q=&type=public&language=&sort=stargazers)
+<!--datocms-autoinclude-footer end-->

package/dist/index.cjs.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var hypenateStyleName = require('hyphenate-style-name');
-var vueDemi = require('vue-demi');
+var vue = require('vue');
 var datocmsStructuredTextGenericHtmlRenderer = require('datocms-structured-text-generic-html-renderer');
 var datocmsStructuredTextUtils = require('datocms-structured-text-utils');
 var datocmsListen = require('datocms-listen');
@@ -20,10 +20,10 @@ const isIntersectionObserverAvailable = () => {
 };
 const useInView = ({ threshold, rootMargin }) => {
-  const observer = vueDemi.ref(null);
-  const elRef = vueDemi.ref(null);
-  const inView = vueDemi.ref(false);
-  vueDemi.onMounted(() => {
+  const observer = vue.ref(null);
+  const elRef = vue.ref(null);
+  const inView = vue.ref(false);
+  vue.onMounted(() => {
     if (isIntersectionObserverAvailable()) {
       observer.value = new IntersectionObserver(
         (entries) => {
@@ -42,7 +42,7 @@ const useInView = ({ threshold, rootMargin }) => {
       }
     }
   });
-  vueDemi.onBeforeUnmount(() => {
+  vue.onBeforeUnmount(() => {
     if (isIntersectionObserverAvailable() && observer.value) {
       observer.value.disconnect();
     }
@@ -50,23 +50,7 @@ const useInView = ({ threshold, rootMargin }) => {
   return { inView, elRef };
 };
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = 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$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
-    }
-  return a;
-};
-const Source = vueDemi.defineComponent({
+const Source = vue.defineComponent({
   props: {
     srcset: {
       type: String
@@ -79,38 +63,32 @@ const Source = vueDemi.defineComponent({
     }
   },
   setup({ srcset, sizes, type }) {
-    return () => vueDemi.h("source", __spreadValues$5(__spreadValues$5({}, vueDemi.isVue2 && {
-      attrs: {
-        srcset,
-        sizes,
-        type
-      }
-    }), vueDemi.isVue3 && {
+    return () => vue.h("source", {
       srcset,
       sizes,
       type
-    }));
+    });
   }
 });
-var __defProp$4 = Object.defineProperty;
+var __defProp$3 = 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) => {
+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$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
+      __defNormalProp$3(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]);
+        __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({
+const Sizer = vue.defineComponent({
   props: {
     sizerClass: {
       type: String
@@ -131,39 +109,33 @@ 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$4(__spreadValues$4({
+    return () => vue.h("img", {
       class: sizerClass,
-      style: __spreadValues$4({
+      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 && {
+      }, sizerStyle),
       src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
       role: "presentation"
-    }));
+    });
   }
 });
-var __defProp$3 = Object.defineProperty;
+var __defProp$2 = Object.defineProperty;
 var __defProps$2 = Object.defineProperties;
 var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
 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) => {
+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$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
+      __defNormalProp$2(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]);
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
@@ -265,7 +237,7 @@ const buildSrcSet = (src, width, candidateMultipliers) => {
     return `${url.toString()} ${finalWidth}w`;
   }).filter(Boolean).join(",");
 };
-const Image = vueDemi.defineComponent({
+const Image = vue.defineComponent({
   name: "DatocmsImage",
   props: {
     data: {
@@ -335,7 +307,7 @@ const Image = vueDemi.defineComponent({
     }
   },
   setup(props) {
-    const loaded = vueDemi.ref(false);
+    const loaded = vue.ref(false);
     function handleLoad() {
       loaded.value = true;
     }
@@ -343,9 +315,9 @@ const Image = vueDemi.defineComponent({
       threshold: props.intersectionThreshold || props.intersectionTreshold || 0,
       rootMargin: props.intersectionMargin || "0px 0px 0px 0px"
     });
-    const computedLazyLoad = vueDemi.ref(props.priority ? false : props.lazyLoad);
-    const imageRef = vueDemi.ref();
-    vueDemi.watchEffect(() => {
+    const computedLazyLoad = vue.ref(props.priority ? false : props.lazyLoad);
+    const imageRef = vue.ref();
+    vue.watchEffect(() => {
       if (!imageRef.value) {
         return;
       }
@@ -363,7 +335,7 @@ const Image = vueDemi.defineComponent({
     };
   },
   render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    var _a, _b, _c, _d, _e, _f;
     const addImage = imageAddStrategy({
       lazyLoad: this.computedLazyLoad,
       inView: this.inView,
@@ -374,28 +346,17 @@ const Image = vueDemi.defineComponent({
       inView: this.inView,
       loaded: this.loaded
     });
-    const webpSource = this.data.webpSrcSet && vueDemi.h(Source, __spreadValues$3(__spreadValues$3({}, vueDemi.isVue2 && {
-      props: {
-        srcset: this.data.webpSrcSet,
-        sizes: (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : void 0,
-        type: "image/webp"
-      }
-    }), vueDemi.isVue3 && {
+    const webpSource = this.data.webpSrcSet && vue.h(Source, {
       srcset: this.data.webpSrcSet,
-      sizes: (_d = (_c = this.sizes) != null ? _c : this.data.sizes) != null ? _d : 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, __spreadValues$3(__spreadValues$3({}, 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 regularSource = this.data.srcSet && vue.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) ? vueDemi.h("div", {
+    const placeholder = this.usePlaceholder && (this.data.bgColor || this.data.base64) ? vue.h("div", {
       "aria-hidden": "true",
       style: {
         backgroundImage: this.data.base64 ? `url(${this.data.base64})` : null,
@@ -413,26 +374,18 @@ const Image = vueDemi.defineComponent({
       }
     }) : null;
     const { width, aspectRatio } = this.data;
-    const height = (_k = this.data.height) != null ? _k : aspectRatio ? width / aspectRatio : 0;
-    const sizer = this.layout !== "fill" ? vueDemi.h(Sizer, __spreadValues$3(__spreadValues$3({}, vueDemi.isVue2 && {
-      props: {
-        sizerClass: this.pictureClass,
-        sizerStyle: this.pictureStyle,
-        width,
-        height,
-        explicitWidth: this.explicitWidth
-      }
-    }), vueDemi.isVue3 && {
+    const height = (_f = this.data.height) != null ? _f : aspectRatio ? width / aspectRatio : 0;
+    const sizer = this.layout !== "fill" ? vue.h(Sizer, {
       sizerClass: this.pictureClass,
       sizerStyle: this.pictureStyle,
       width,
       height,
       explicitWidth: this.explicitWidth
-    })) : null;
-    return vueDemi.h(
+    }) : null;
+    return vue.h(
       "div",
       {
-        style: __spreadValues$3(__spreadValues$3({
+        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),
@@ -441,64 +394,27 @@ const Image = vueDemi.defineComponent({
       [
         sizer,
         placeholder,
-        addImage && vueDemi.h("picture", null, [
+        addImage && vue.h("picture", null, [
           webpSource,
           regularSource,
-          this.data.src && vueDemi.h("img", __spreadProps$2(__spreadValues$3(__spreadValues$3({}, 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 && vue.h("img", {
             src: this.data.src,
             alt: this.data.alt,
             title: this.data.title,
             fetchpriority: this.priority ? "high" : void 0,
-            onLoad: this.handleLoad
-          }), {
+            onLoad: this.handleLoad,
             ref: "imageRef",
             class: this.pictureClass,
-            style: __spreadValues$3(__spreadProps$2(__spreadValues$3({
+            style: __spreadValues$2(__spreadProps$2(__spreadValues$2({
               opacity: showImage ? 1 : 0,
               transition
             }, absolutePositioning), {
               objectFit: this.objectFit,
               objectPosition: this.objectPosition
             }), this.pictureStyle)
-          }))
+          })
         ]),
-        vueDemi.h("noscript", __spreadValues$3(__spreadValues$3({}, 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(__spreadValues$3(__spreadProps$2(__spreadValues$3({}, absolutePositioning), {
-                  objectFit: this.objectFit,
-                  objectPosition: this.objectPosition
-                }), this.pictureStyle)),
-                loading: this.computedLazyLoad ? "lazy" : void 0,
-                fetchpriority: this.priority ? "high" : void 0
-              })
-            ])
-          }
-        }), vueDemi.isVue3 && {
+        vue.h("noscript", {
           innerHTML: tag("picture", {}, [
             this.data.webpSrcSet && tag("source", {
               srcset: this.data.webpSrcSet,
@@ -514,12 +430,12 @@ const Image = vueDemi.defineComponent({
               alt: this.data.alt,
               title: this.data.title,
               class: this.pictureClass,
-              style: toCss(__spreadValues$3(__spreadValues$3({}, this.pictureStyle), absolutePositioning)),
+              style: toCss(__spreadValues$2(__spreadValues$2({}, this.pictureStyle), absolutePositioning)),
               loading: this.computedLazyLoad ? "lazy" : void 0,
               fetchpriority: this.priority ? "high" : void 0
             })
           ])
-        }))
+        })
       ]
     );
   }
@@ -530,22 +446,9 @@ const DatocmsImagePlugin = {
   }
 };
-var __defProp$2 = Object.defineProperty;
 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 __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -559,10 +462,10 @@ var __objRest$1 = (source, exclude) => {
   return target;
 };
 const hAdapter = (tagName, props, childOrChildren) => {
-  const _a = props || {}, { href, target, rel } = _a, rest = __objRest$1(_a, ["href", "target", "rel"]);
-  return vueDemi.h(
+  const _a = props || {}; __objRest$1(_a, ["href", "target", "rel"]);
+  return vue.h(
     tagName,
-    __spreadValues$2(__spreadValues$2({}, vueDemi.isVue2 && __spreadValues$2({ attrs: { href, target, rel } }, rest)), vueDemi.isVue3 && props),
+    props,
     typeof childOrChildren === "undefined" || Array.isArray(childOrChildren) ? childOrChildren : [childOrChildren]
   );
 };
@@ -578,7 +481,7 @@ function appendKeyToValidElement(element, key) {
   }
   return element;
 }
-const StructuredText = vueDemi.defineComponent({
+const StructuredText = vue.defineComponent({
   name: "DatocmsStructuredText",
   props: {
     data: {
@@ -773,12 +676,12 @@ 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"]);
-  const error = vueDemi.ref(null);
-  const data = vueDemi.ref(vueDemi.unref(initialData) || null);
-  const status = vueDemi.ref(vueDemi.unref(enabled) ? "connecting" : "closed");
+  const error = vue.ref(null);
+  const data = vue.ref(vue.unref(initialData) || null);
+  const status = vue.ref(vue.unref(enabled) ? "connecting" : "closed");
   const subscribeToQueryOptions = other;
-  vueDemi.watchEffect((onCleanup) => __async$1(void 0, null, function* () {
-    if (query && token && vueDemi.unref(enabled)) {
+  vue.watchEffect((onCleanup) => __async$1(void 0, null, function* () {
+    if (query && token && vue.unref(enabled)) {
       const unsubscribe = yield datocmsListen.subscribeToQuery(__spreadProps$1(__spreadValues$1({}, subscribeToQueryOptions), {
         query,
         token,
@@ -828,19 +731,19 @@ const highlightPieces = (textWithHighlightMarker) => {
 };
 function useSiteSearch(config) {
   var _a, _b, _c;
-  const state = vueDemi.reactive({
+  const state = vue.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
   });
-  const error = vueDemi.ref();
-  const response = vueDemi.reactive({
+  const error = vue.ref();
+  const response = vue.reactive({
     data: [],
     meta: { total_count: 0 }
   });
   error.value = void 0;
   const resultsPerPage = config.resultsPerPage || 8;
-  vueDemi.watchEffect((onCleanup) => {
+  vue.watchEffect((onCleanup) => {
     let isCancelled = false;
     const run = () => __async(this, null, function* () {
       try {
@@ -884,7 +787,7 @@ function useSiteSearch(config) {
       isCancelled = true;
     });
   });
-  const data = vueDemi.computed(() => {
+  const data = vue.computed(() => {
     return state.query && response.data.length > 0 ? {
       pageResults: response.data.map((rawSearchResult) => ({
         id: rawSearchResult.id,
@@ -893,7 +796,7 @@ function useSiteSearch(config) {
         titleHighlights: rawSearchResult.attributes.highlight.title ? rawSearchResult.attributes.highlight.title.map(highlightPieces) : [],
         bodyExcerpt: rawSearchResult.attributes.body_excerpt,
         bodyHighlights: rawSearchResult.attributes.highlight.body ? rawSearchResult.attributes.highlight.body.map(highlightPieces) : [],
-        raw: vueDemi.toRaw(rawSearchResult)
+        raw: vue.toRaw(rawSearchResult)
       })),
       totalResults: response.meta.total_count,
       totalPages: Math.ceil(response.meta.total_count / resultsPerPage)

package/dist/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import * as vue_demi from 'vue-demi';
-import { PropType, VNodeProps, VNode, Ref, UnwrapRef } from 'vue-demi';
+import * as vue from 'vue';
+import { PropType, VNodeProps, VNode, Ref, UnwrapRef } from 'vue';
 import { TransformedMeta, RenderMarkRule, TransformMetaFn } from 'datocms-structured-text-generic-html-renderer';
 export { renderMarkRule, renderNodeRule, renderNodeRule as renderRule } from 'datocms-structured-text-generic-html-renderer';
 import { Record as Record$1, RenderResult, StructuredText as StructuredText$1, Document, Node, RenderRule } from 'datocms-structured-text-utils';
@@ -30,7 +30,7 @@ type ResponsiveImageType = {
     /** Title attribute (`title`) for the image */
     title?: string;
 };
-declare const Image: vue_demi.DefineComponent<{
+declare const Image: vue.DefineComponent<{
     /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
     data: {
         type: PropType<ResponsiveImageType>;
@@ -135,13 +135,13 @@ declare const Image: vue_demi.DefineComponent<{
         default: () => number[];
     };
 }, {
-    inView: vue_demi.Ref<boolean>;
-    elRef: vue_demi.Ref<HTMLElement | null>;
-    loaded: vue_demi.Ref<boolean>;
+    inView: vue.Ref<boolean>;
+    elRef: vue.Ref<HTMLElement | null>;
+    loaded: vue.Ref<boolean>;
     handleLoad: () => void;
-    computedLazyLoad: vue_demi.Ref<boolean>;
-    imageRef: vue_demi.Ref<HTMLImageElement | undefined>;
-}, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+    computedLazyLoad: vue.Ref<boolean>;
+    imageRef: vue.Ref<HTMLImageElement | undefined>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
     data: {
         type: PropType<ResponsiveImageType>;
@@ -283,7 +283,7 @@ type RenderRecordLinkContext = {
 type RenderBlockContext = {
     record: Record$1;
 };
-declare const StructuredText: vue_demi.DefineComponent<{
+declare const StructuredText: vue.DefineComponent<{
     /** The actual field value you get from DatoCMS **/
     data: {
         type: PropType<StructuredText$1<Record$1, Record$1> | Document | Node | null | undefined>;
@@ -328,7 +328,7 @@ declare const StructuredText: vue_demi.DefineComponent<{
     renderFragment: {
         type: PropType<(children: AdapterReturn[], key: string) => AdapterReturn>;
     };
-}, () => RenderResult<(tagName: string, props?: VNodeProps, childOrChildren?: AdapterReturn | AdapterReturn[]) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+}, () => RenderResult<(tagName: string, props?: VNodeProps, childOrChildren?: AdapterReturn | AdapterReturn[]) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     /** The actual field value you get from DatoCMS **/
     data: {
         type: PropType<StructuredText$1<Record$1, Record$1> | Document | Node | null | undefined>;
@@ -410,7 +410,7 @@ type SearchResultInstancesHrefSchema = {
         [k: string]: unknown;
     };
     filter: {
-        fuzzy?: string;
+        fuzzy?: string | boolean;
         query: string;
         build_trigger_id?: string;
         locale?: string;

package/dist/index.esm.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import hypenateStyleName from 'hyphenate-style-name';
-import { ref, onMounted, onBeforeUnmount, defineComponent, h, isVue2, isVue3, watchEffect, unref, reactive, computed, toRaw } from 'vue-demi';
+import { ref, onMounted, onBeforeUnmount, defineComponent, h, watchEffect, unref, reactive, computed, toRaw } from 'vue';
 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';
@@ -44,22 +44,6 @@ const useInView = ({ threshold, rootMargin }) => {
   return { inView, elRef };
 };
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = 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$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
-    }
-  return a;
-};
 const Source = defineComponent({
   props: {
     srcset: {
@@ -73,33 +57,27 @@ const Source = defineComponent({
     }
   },
   setup({ srcset, sizes, type }) {
-    return () => h("source", __spreadValues$5(__spreadValues$5({}, isVue2 && {
-      attrs: {
-        srcset,
-        sizes,
-        type
-      }
-    }), isVue3 && {
+    return () => h("source", {
       srcset,
       sizes,
       type
-    }));
+    });
   }
 });
-var __defProp$4 = Object.defineProperty;
+var __defProp$3 = 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) => {
+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$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
+      __defNormalProp$3(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]);
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
@@ -125,39 +103,33 @@ 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$4(__spreadValues$4({
+    return () => h("img", {
       class: sizerClass,
-      style: __spreadValues$4({
+      style: __spreadValues$3({
         display: "block",
         width: explicitWidth ? `${width}px` : "100%"
-      }, sizerStyle)
-    }, isVue2 && {
-      attrs: {
-        src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
-        role: "presentation"
-      }
-    }), isVue3 && {
+      }, sizerStyle),
       src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
       role: "presentation"
-    }));
+    });
   }
 });
-var __defProp$3 = Object.defineProperty;
+var __defProp$2 = Object.defineProperty;
 var __defProps$2 = Object.defineProperties;
 var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
 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) => {
+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$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
+      __defNormalProp$2(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]);
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
@@ -357,7 +329,7 @@ const Image = defineComponent({
     };
   },
   render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    var _a, _b, _c, _d, _e, _f;
     const addImage = imageAddStrategy({
       lazyLoad: this.computedLazyLoad,
       inView: this.inView,
@@ -368,26 +340,15 @@ const Image = defineComponent({
       inView: this.inView,
       loaded: this.loaded
     });
-    const webpSource = this.data.webpSrcSet && h(Source, __spreadValues$3(__spreadValues$3({}, isVue2 && {
-      props: {
-        srcset: this.data.webpSrcSet,
-        sizes: (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : void 0,
-        type: "image/webp"
-      }
-    }), isVue3 && {
+    const webpSource = this.data.webpSrcSet && h(Source, {
       srcset: this.data.webpSrcSet,
-      sizes: (_d = (_c = this.sizes) != null ? _c : this.data.sizes) != null ? _d : 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, __spreadValues$3(__spreadValues$3({}, 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 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", {
       "aria-hidden": "true",
@@ -407,26 +368,18 @@ const Image = defineComponent({
       }
     }) : null;
     const { width, aspectRatio } = this.data;
-    const height = (_k = this.data.height) != null ? _k : aspectRatio ? width / aspectRatio : 0;
-    const sizer = this.layout !== "fill" ? h(Sizer, __spreadValues$3(__spreadValues$3({}, isVue2 && {
-      props: {
-        sizerClass: this.pictureClass,
-        sizerStyle: this.pictureStyle,
-        width,
-        height,
-        explicitWidth: this.explicitWidth
-      }
-    }), isVue3 && {
+    const height = (_f = this.data.height) != null ? _f : aspectRatio ? width / aspectRatio : 0;
+    const sizer = this.layout !== "fill" ? h(Sizer, {
       sizerClass: this.pictureClass,
       sizerStyle: this.pictureStyle,
       width,
       height,
       explicitWidth: this.explicitWidth
-    })) : null;
+    }) : null;
     return h(
       "div",
       {
-        style: __spreadValues$3(__spreadValues$3({
+        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),
@@ -438,61 +391,24 @@ const Image = defineComponent({
         addImage && h("picture", null, [
           webpSource,
           regularSource,
-          this.data.src && h("img", __spreadProps$2(__spreadValues$3(__spreadValues$3({}, 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", {
             src: this.data.src,
             alt: this.data.alt,
             title: this.data.title,
             fetchpriority: this.priority ? "high" : void 0,
-            onLoad: this.handleLoad
-          }), {
+            onLoad: this.handleLoad,
             ref: "imageRef",
             class: this.pictureClass,
-            style: __spreadValues$3(__spreadProps$2(__spreadValues$3({
+            style: __spreadValues$2(__spreadProps$2(__spreadValues$2({
               opacity: showImage ? 1 : 0,
               transition
             }, absolutePositioning), {
               objectFit: this.objectFit,
               objectPosition: this.objectPosition
             }), this.pictureStyle)
-          }))
+          })
         ]),
-        h("noscript", __spreadValues$3(__spreadValues$3({}, 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(__spreadValues$3(__spreadProps$2(__spreadValues$3({}, absolutePositioning), {
-                  objectFit: this.objectFit,
-                  objectPosition: this.objectPosition
-                }), this.pictureStyle)),
-                loading: this.computedLazyLoad ? "lazy" : void 0,
-                fetchpriority: this.priority ? "high" : void 0
-              })
-            ])
-          }
-        }), isVue3 && {
+        h("noscript", {
           innerHTML: tag("picture", {}, [
             this.data.webpSrcSet && tag("source", {
               srcset: this.data.webpSrcSet,
@@ -508,12 +424,12 @@ const Image = defineComponent({
               alt: this.data.alt,
               title: this.data.title,
               class: this.pictureClass,
-              style: toCss(__spreadValues$3(__spreadValues$3({}, this.pictureStyle), absolutePositioning)),
+              style: toCss(__spreadValues$2(__spreadValues$2({}, this.pictureStyle), absolutePositioning)),
               loading: this.computedLazyLoad ? "lazy" : void 0,
               fetchpriority: this.priority ? "high" : void 0
             })
           ])
-        }))
+        })
       ]
     );
   }
@@ -524,22 +440,9 @@ const DatocmsImagePlugin = {
   }
 };
-var __defProp$2 = Object.defineProperty;
 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 __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -553,10 +456,10 @@ var __objRest$1 = (source, exclude) => {
   return target;
 };
 const hAdapter = (tagName, props, childOrChildren) => {
-  const _a = props || {}, { href, target, rel } = _a, rest = __objRest$1(_a, ["href", "target", "rel"]);
+  const _a = props || {}; __objRest$1(_a, ["href", "target", "rel"]);
   return h(
     tagName,
-    __spreadValues$2(__spreadValues$2({}, isVue2 && __spreadValues$2({ attrs: { href, target, rel } }, rest)), isVue3 && props),
+    props,
     typeof childOrChildren === "undefined" || Array.isArray(childOrChildren) ? childOrChildren : [childOrChildren]
   );
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vue-datocms",
-  "version": "4.0.7",
+  "version": "5.0.1",
   "description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
   "keywords": [
     "datocms",
@@ -24,7 +24,8 @@
   "exports": {
     ".": {
       "import": "./dist/index.esm.mjs",
-      "require": "./dist/index.cjs.js"
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
     }
   },
   "files": [
@@ -41,17 +42,10 @@
     "datocms-listen": "^0.1.15",
     "datocms-structured-text-generic-html-renderer": "^2.0.4",
     "datocms-structured-text-utils": "^2.0.4",
-    "hyphenate-style-name": "^1.0.4",
-    "vue-demi": "^0.13.11"
+    "hyphenate-style-name": "^1.0.4"
   },
   "peerDependencies": {
-    "@vue/composition-api": "^1.7.1",
-    "vue": ">= 2.5 < 2.7 || >=3.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    }
+    "vue": "^3.0.0"
   },
   "devDependencies": {
     "@types/hyphenate-style-name": "^1.0.2",
@@ -71,7 +65,6 @@
     "ts-jest": "^29.1.1",
     "tslib": "^2.6.2",
     "typescript": "^4.9.5",
-    "vue": "^3.2.40",
     "vue-tsc": "^0.37.9"
   }
 }