Minor fixes

README.md

@@ -18,9 +18,12 @@ A set of components and utilities to work faster with [DatoCMS](https://www.dato
 
 ## Table of Contents
 
-- [Features](#features)
-- [Installation](#installation)
-- [Development](#development)
+- [vue-datocms](#vue-datocms)
+  - [Table of Contents](#table-of-contents)
+  - [Features](#features)
+  - [Installation](#installation)
+  - [Development](#development)
+- [What is DatoCMS?](#what-is-datocms)
 
 ## Features
 
@@ -49,26 +52,24 @@ Helpers:
 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:
+# Demos
 
-- [Vue 3 + TypeScript + Vite](examples/vite-typescript-vue3/) ([running demo](https://vue-datocms-vite-typescript-vue3-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/))
+For fully working examples take a look at our [examples directory](https://github.com/datocms/vue-datocms/tree/master/examples).
 
-To use them, follow this recipe starting from the vue-datocms folder:
+Live demo: [https://vue-datocms-example.netlify.com/](https://vue-datocms-example.netlify.com/)
+
+```
+## Development
+
+This repository contains a number of demos/examples. You can use them to locally test your changes.
 
 ```bash
+cd examples
 npm install
-cd examples/vite-typescript-vue3
-npm run setup
 npm run dev
 ```
 
-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?

src/components/Image/__tests__/__snapshots__/index.test.ts.snap

@@ -3,7 +3,7 @@
 exports[`Image explicit sizes renders correctly 1`] = `
 <picture>
   <!---->
-  <source srcset="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=4 3000w" sizes="(max-width: 600px) 200px, 50vw"><img src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750" loading="lazy" style="color: transparent; width: 100%; max-width: 750px; height: auto;">
+  <source srcset="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=4 3000w" sizes="(max-width: 600px) 200px, 50vw"><img src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750" loading="lazy" style="width: 100%; max-width: 750px; height: auto;">
 </picture>
 `;
 
@@ -17,28 +17,28 @@ exports[`Image full data renders correctly 1`] = `
 exports[`Image minimal data renders correctly 1`] = `
 <picture>
   <!---->
-  <source srcset="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=4 3000w"><img src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750" loading="lazy" style="color: transparent; width: 100%; max-width: 750px; height: auto;">
+  <source srcset="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=4 3000w"><img src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750" loading="lazy" style="width: 100%; max-width: 750px; height: auto;">
 </picture>
 `;
 
 exports[`Image minimalDataWithRelativeUrl renders correctly 1`] = `
 <picture>
   <!---->
-  <source srcset="/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.25 187w,/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.5 375w,/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.75 562w,/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750 750w,/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=1.5 1125w,/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=2 1500w,/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=3 2250w,/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=4 3000w"><img src="/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750" loading="lazy" style="color: transparent; width: 100%; max-width: 750px; height: auto;">
+  <source srcset="/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.25 187w,/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.5 375w,/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.75 562w,/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750 750w,/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=1.5 1125w,/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=2 1500w,/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=3 2250w,/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=4 3000w"><img src="/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750" loading="lazy" style="width: 100%; max-width: 750px; height: auto;">
 </picture>
 `;
 
 exports[`Image passing className and/or style renders correctly 1`] = `
-<picture class="class-name" style="border: 1px solid red;">
+<picture>
   <!---->
-  <source srcset="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=4 3000w"><img src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750" loading="lazy" style="color: transparent; width: 100%; max-width: 750px; height: auto;">
+  <source srcset="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=4 3000w"><img src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750" loading="lazy" style="width: 100%; max-width: 750px; height: auto; border: 1px solid red;">
 </picture>
 `;
 
 exports[`Image priority=true renders correctly 1`] = `
 <picture>
   <!---->
-  <source srcset="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=4 3000w"><img src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750" fetchpriority="high" style="color: transparent; width: 100%; max-width: 750px; height: auto;">
+  <source srcset="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=4 3000w"><img src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750" fetchpriority="high" style="width: 100%; max-width: 750px; height: auto;">
 </picture>
 `;