vue-datocms 4.0.7 → 5.0.0
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.
- package/README.md +35 -9
- package/dist/index.cjs.js +66 -163
- package/dist/index.d.ts +12 -12
- package/dist/index.esm.mjs +38 -135
- package/package.json +3 -11
package/README.md
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
+
<!--datocms-autoinclude-header start-->
|
|
2
|
+
<a href="https://www.datocms.com/"><img src="https://www.datocms.com/images/full_logo.svg" height="60"></a>
|
|
3
|
+
|
|
4
|
+
👉 [Visit the DatoCMS homepage](https://www.datocms.com) or see [What is DatoCMS?](#what-is-datocms)
|
|
5
|
+
<!--datocms-autoinclude-header end-->
|
|
6
|
+
|
|
1
7
|
# vue-datocms
|
|
2
8
|
|
|
3
9
|
  [](https://github.com/datocms/vue-datocms/actions/workflows/node.js.yml)
|
|
4
10
|
|
|
5
11
|
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).
|
|
6
12
|
|
|
7
|
-
- Works with Vue 3
|
|
13
|
+
- Works with Vue 3 (version 4 is maintaind for compatibility with Vue 2);
|
|
8
14
|
- TypeScript ready;
|
|
9
15
|
- Compatible with any data-fetching library (axios, Apollo);
|
|
10
16
|
- Usable both client and server side;
|
|
11
17
|
- Compatible with vanilla Vue and pretty much any other Vue-based solution.
|
|
12
18
|
|
|
13
|
-
<br /><br />
|
|
14
|
-
<a href="https://www.datocms.com/">
|
|
15
|
-
<img src="https://www.datocms.com/images/full_logo.svg" height="60">
|
|
16
|
-
</a>
|
|
17
|
-
<br /><br />
|
|
18
|
-
|
|
19
19
|
## Table of Contents
|
|
20
20
|
|
|
21
21
|
- [Features](#features)
|
|
@@ -53,7 +53,6 @@ npm install vue-datocms
|
|
|
53
53
|
This repository contains a number of examples. You can use them to locally test your changes to the package:
|
|
54
54
|
|
|
55
55
|
- [Vue 3 + TypeScript + Vite](examples/vite-typescript-vue3/) ([running demo](https://vue-datocms-vite-typescript-vue3-example.vercel.app/))
|
|
56
|
-
- [Vue 2 + Javacript + Vue CLI](examples/vue-cli-babel-javascript-vue2/) ([running demo](https://vue-datocms-vue-cli-babel-javascript-vue2-example.vercel.app/))
|
|
57
56
|
- [Query subscription](examples/query-subscription/) ([running demo](https://vue-datocms-query-subscription-example.vercel.app/))
|
|
58
57
|
- [Site search](examples/site-search/) ([running demo](https://vue-datocms-site-search-example.vercel.app/))
|
|
59
58
|
|
|
@@ -66,4 +65,31 @@ npm run setup
|
|
|
66
65
|
npm run dev
|
|
67
66
|
```
|
|
68
67
|
|
|
69
|
-
|
|
68
|
+
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.
|
|
69
|
+
|
|
70
|
+
<!--datocms-autoinclude-footer start-->
|
|
71
|
+
-----------------
|
|
72
|
+
# What is DatoCMS?
|
|
73
|
+
<a href="https://www.datocms.com/"><img src="https://www.datocms.com/images/full_logo.svg" height="60"></a>
|
|
74
|
+
|
|
75
|
+
[DatoCMS](https://www.datocms.com/) is the REST & GraphQL Headless CMS for the modern web.
|
|
76
|
+
|
|
77
|
+
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)!
|
|
78
|
+
|
|
79
|
+
**Quick links:**
|
|
80
|
+
|
|
81
|
+
- ⚡️ Get started with a [free DatoCMS account](https://dashboard.datocms.com/signup)
|
|
82
|
+
- 🔖 Go through the [docs](https://www.datocms.com/docs)
|
|
83
|
+
- ⚙️ Get [support from us and the community](https://community.datocms.com/)
|
|
84
|
+
- 🆕 Stay up to date on new features and fixes on the [changelog](https://www.datocms.com/product-updates)
|
|
85
|
+
|
|
86
|
+
**Our featured repos:**
|
|
87
|
+
- [datocms/react-datocms](https://github.com/datocms/react-datocms): React helper components for images, Structured Text rendering, and more
|
|
88
|
+
- [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.
|
|
89
|
+
- [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)
|
|
90
|
+
- [datocms/plugins](https://github.com/datocms/plugins): Example plugins we've made that extend the editor/admin dashboard
|
|
91
|
+
- [datocms/gatsby-source-datocms](https://github.com/datocms/gatsby-source-datocms): Our Gatsby source plugin to pull data from DatoCMS
|
|
92
|
+
- 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).
|
|
93
|
+
|
|
94
|
+
Or see [all our public repos](https://github.com/orgs/datocms/repositories?q=&type=public&language=&sort=stargazers)
|
|
95
|
+
<!--datocms-autoinclude-footer end-->
|
package/dist/index.cjs.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var hypenateStyleName = require('hyphenate-style-name');
|
|
6
|
-
var
|
|
6
|
+
var vue = require('vue');
|
|
7
7
|
var datocmsStructuredTextGenericHtmlRenderer = require('datocms-structured-text-generic-html-renderer');
|
|
8
8
|
var datocmsStructuredTextUtils = require('datocms-structured-text-utils');
|
|
9
9
|
var datocmsListen = require('datocms-listen');
|
|
@@ -20,10 +20,10 @@ const isIntersectionObserverAvailable = () => {
|
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
const useInView = ({ threshold, rootMargin }) => {
|
|
23
|
-
const observer =
|
|
24
|
-
const elRef =
|
|
25
|
-
const inView =
|
|
26
|
-
|
|
23
|
+
const observer = vue.ref(null);
|
|
24
|
+
const elRef = vue.ref(null);
|
|
25
|
+
const inView = vue.ref(false);
|
|
26
|
+
vue.onMounted(() => {
|
|
27
27
|
if (isIntersectionObserverAvailable()) {
|
|
28
28
|
observer.value = new IntersectionObserver(
|
|
29
29
|
(entries) => {
|
|
@@ -42,7 +42,7 @@ const useInView = ({ threshold, rootMargin }) => {
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
});
|
|
45
|
-
|
|
45
|
+
vue.onBeforeUnmount(() => {
|
|
46
46
|
if (isIntersectionObserverAvailable() && observer.value) {
|
|
47
47
|
observer.value.disconnect();
|
|
48
48
|
}
|
|
@@ -50,23 +50,7 @@ const useInView = ({ threshold, rootMargin }) => {
|
|
|
50
50
|
return { inView, elRef };
|
|
51
51
|
};
|
|
52
52
|
|
|
53
|
-
|
|
54
|
-
var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
|
|
55
|
-
var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
|
|
56
|
-
var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
|
|
57
|
-
var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
58
|
-
var __spreadValues$5 = (a, b) => {
|
|
59
|
-
for (var prop in b || (b = {}))
|
|
60
|
-
if (__hasOwnProp$5.call(b, prop))
|
|
61
|
-
__defNormalProp$5(a, prop, b[prop]);
|
|
62
|
-
if (__getOwnPropSymbols$5)
|
|
63
|
-
for (var prop of __getOwnPropSymbols$5(b)) {
|
|
64
|
-
if (__propIsEnum$5.call(b, prop))
|
|
65
|
-
__defNormalProp$5(a, prop, b[prop]);
|
|
66
|
-
}
|
|
67
|
-
return a;
|
|
68
|
-
};
|
|
69
|
-
const Source = vueDemi.defineComponent({
|
|
53
|
+
const Source = vue.defineComponent({
|
|
70
54
|
props: {
|
|
71
55
|
srcset: {
|
|
72
56
|
type: String
|
|
@@ -79,38 +63,32 @@ const Source = vueDemi.defineComponent({
|
|
|
79
63
|
}
|
|
80
64
|
},
|
|
81
65
|
setup({ srcset, sizes, type }) {
|
|
82
|
-
return () =>
|
|
83
|
-
attrs: {
|
|
84
|
-
srcset,
|
|
85
|
-
sizes,
|
|
86
|
-
type
|
|
87
|
-
}
|
|
88
|
-
}), vueDemi.isVue3 && {
|
|
66
|
+
return () => vue.h("source", {
|
|
89
67
|
srcset,
|
|
90
68
|
sizes,
|
|
91
69
|
type
|
|
92
|
-
})
|
|
70
|
+
});
|
|
93
71
|
}
|
|
94
72
|
});
|
|
95
73
|
|
|
96
|
-
var __defProp$
|
|
74
|
+
var __defProp$3 = Object.defineProperty;
|
|
97
75
|
var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
|
|
98
76
|
var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
|
|
99
77
|
var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
|
|
100
|
-
var __defNormalProp$
|
|
101
|
-
var __spreadValues$
|
|
78
|
+
var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
79
|
+
var __spreadValues$3 = (a, b) => {
|
|
102
80
|
for (var prop in b || (b = {}))
|
|
103
81
|
if (__hasOwnProp$4.call(b, prop))
|
|
104
|
-
__defNormalProp$
|
|
82
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
105
83
|
if (__getOwnPropSymbols$4)
|
|
106
84
|
for (var prop of __getOwnPropSymbols$4(b)) {
|
|
107
85
|
if (__propIsEnum$4.call(b, prop))
|
|
108
|
-
__defNormalProp$
|
|
86
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
109
87
|
}
|
|
110
88
|
return a;
|
|
111
89
|
};
|
|
112
90
|
const universalBtoa = (str) => isSsr() ? Buffer.from(str.toString(), "binary").toString("base64") : window.btoa(str);
|
|
113
|
-
const Sizer =
|
|
91
|
+
const Sizer = vue.defineComponent({
|
|
114
92
|
props: {
|
|
115
93
|
sizerClass: {
|
|
116
94
|
type: String
|
|
@@ -131,39 +109,33 @@ const Sizer = vueDemi.defineComponent({
|
|
|
131
109
|
},
|
|
132
110
|
setup({ sizerClass, sizerStyle, width, height, explicitWidth }) {
|
|
133
111
|
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
|
|
134
|
-
return () =>
|
|
112
|
+
return () => vue.h("img", {
|
|
135
113
|
class: sizerClass,
|
|
136
|
-
style: __spreadValues$
|
|
114
|
+
style: __spreadValues$3({
|
|
137
115
|
display: "block",
|
|
138
116
|
width: explicitWidth ? `${width}px` : "100%"
|
|
139
|
-
}, sizerStyle)
|
|
140
|
-
}, vueDemi.isVue2 && {
|
|
141
|
-
attrs: {
|
|
142
|
-
src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
|
|
143
|
-
role: "presentation"
|
|
144
|
-
}
|
|
145
|
-
}), vueDemi.isVue3 && {
|
|
117
|
+
}, sizerStyle),
|
|
146
118
|
src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
|
|
147
119
|
role: "presentation"
|
|
148
|
-
})
|
|
120
|
+
});
|
|
149
121
|
}
|
|
150
122
|
});
|
|
151
123
|
|
|
152
|
-
var __defProp$
|
|
124
|
+
var __defProp$2 = Object.defineProperty;
|
|
153
125
|
var __defProps$2 = Object.defineProperties;
|
|
154
126
|
var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
|
|
155
127
|
var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
|
|
156
128
|
var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
|
|
157
129
|
var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
|
|
158
|
-
var __defNormalProp$
|
|
159
|
-
var __spreadValues$
|
|
130
|
+
var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
131
|
+
var __spreadValues$2 = (a, b) => {
|
|
160
132
|
for (var prop in b || (b = {}))
|
|
161
133
|
if (__hasOwnProp$3.call(b, prop))
|
|
162
|
-
__defNormalProp$
|
|
134
|
+
__defNormalProp$2(a, prop, b[prop]);
|
|
163
135
|
if (__getOwnPropSymbols$3)
|
|
164
136
|
for (var prop of __getOwnPropSymbols$3(b)) {
|
|
165
137
|
if (__propIsEnum$3.call(b, prop))
|
|
166
|
-
__defNormalProp$
|
|
138
|
+
__defNormalProp$2(a, prop, b[prop]);
|
|
167
139
|
}
|
|
168
140
|
return a;
|
|
169
141
|
};
|
|
@@ -265,7 +237,7 @@ const buildSrcSet = (src, width, candidateMultipliers) => {
|
|
|
265
237
|
return `${url.toString()} ${finalWidth}w`;
|
|
266
238
|
}).filter(Boolean).join(",");
|
|
267
239
|
};
|
|
268
|
-
const Image =
|
|
240
|
+
const Image = vue.defineComponent({
|
|
269
241
|
name: "DatocmsImage",
|
|
270
242
|
props: {
|
|
271
243
|
data: {
|
|
@@ -335,7 +307,7 @@ const Image = vueDemi.defineComponent({
|
|
|
335
307
|
}
|
|
336
308
|
},
|
|
337
309
|
setup(props) {
|
|
338
|
-
const loaded =
|
|
310
|
+
const loaded = vue.ref(false);
|
|
339
311
|
function handleLoad() {
|
|
340
312
|
loaded.value = true;
|
|
341
313
|
}
|
|
@@ -343,9 +315,9 @@ const Image = vueDemi.defineComponent({
|
|
|
343
315
|
threshold: props.intersectionThreshold || props.intersectionTreshold || 0,
|
|
344
316
|
rootMargin: props.intersectionMargin || "0px 0px 0px 0px"
|
|
345
317
|
});
|
|
346
|
-
const computedLazyLoad =
|
|
347
|
-
const imageRef =
|
|
348
|
-
|
|
318
|
+
const computedLazyLoad = vue.ref(props.priority ? false : props.lazyLoad);
|
|
319
|
+
const imageRef = vue.ref();
|
|
320
|
+
vue.watchEffect(() => {
|
|
349
321
|
if (!imageRef.value) {
|
|
350
322
|
return;
|
|
351
323
|
}
|
|
@@ -363,7 +335,7 @@ const Image = vueDemi.defineComponent({
|
|
|
363
335
|
};
|
|
364
336
|
},
|
|
365
337
|
render() {
|
|
366
|
-
var _a, _b, _c, _d, _e, _f
|
|
338
|
+
var _a, _b, _c, _d, _e, _f;
|
|
367
339
|
const addImage = imageAddStrategy({
|
|
368
340
|
lazyLoad: this.computedLazyLoad,
|
|
369
341
|
inView: this.inView,
|
|
@@ -374,28 +346,17 @@ const Image = vueDemi.defineComponent({
|
|
|
374
346
|
inView: this.inView,
|
|
375
347
|
loaded: this.loaded
|
|
376
348
|
});
|
|
377
|
-
const webpSource = this.data.webpSrcSet &&
|
|
378
|
-
props: {
|
|
379
|
-
srcset: this.data.webpSrcSet,
|
|
380
|
-
sizes: (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : void 0,
|
|
381
|
-
type: "image/webp"
|
|
382
|
-
}
|
|
383
|
-
}), vueDemi.isVue3 && {
|
|
349
|
+
const webpSource = this.data.webpSrcSet && vue.h(Source, {
|
|
384
350
|
srcset: this.data.webpSrcSet,
|
|
385
|
-
sizes: (
|
|
351
|
+
sizes: (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : void 0,
|
|
386
352
|
type: "image/webp"
|
|
387
|
-
})
|
|
388
|
-
const regularSource = this.data.srcSet &&
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
}
|
|
393
|
-
}), vueDemi.isVue3 && {
|
|
394
|
-
srcset: (_h = this.data.srcSet) != null ? _h : buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
|
|
395
|
-
sizes: (_j = (_i = this.sizes) != null ? _i : this.data.sizes) != null ? _j : void 0
|
|
396
|
-
}));
|
|
353
|
+
});
|
|
354
|
+
const regularSource = this.data.srcSet && vue.h(Source, {
|
|
355
|
+
srcset: (_c = this.data.srcSet) != null ? _c : buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
|
|
356
|
+
sizes: (_e = (_d = this.sizes) != null ? _d : this.data.sizes) != null ? _e : void 0
|
|
357
|
+
});
|
|
397
358
|
const transition = typeof this.fadeInDuration === "undefined" || this.fadeInDuration > 0 ? `opacity ${this.fadeInDuration || 500}ms ${this.fadeInDuration || 500}ms` : void 0;
|
|
398
|
-
const placeholder = this.usePlaceholder && (this.data.bgColor || this.data.base64) ?
|
|
359
|
+
const placeholder = this.usePlaceholder && (this.data.bgColor || this.data.base64) ? vue.h("div", {
|
|
399
360
|
"aria-hidden": "true",
|
|
400
361
|
style: {
|
|
401
362
|
backgroundImage: this.data.base64 ? `url(${this.data.base64})` : null,
|
|
@@ -413,26 +374,18 @@ const Image = vueDemi.defineComponent({
|
|
|
413
374
|
}
|
|
414
375
|
}) : null;
|
|
415
376
|
const { width, aspectRatio } = this.data;
|
|
416
|
-
const height = (
|
|
417
|
-
const sizer = this.layout !== "fill" ?
|
|
418
|
-
props: {
|
|
419
|
-
sizerClass: this.pictureClass,
|
|
420
|
-
sizerStyle: this.pictureStyle,
|
|
421
|
-
width,
|
|
422
|
-
height,
|
|
423
|
-
explicitWidth: this.explicitWidth
|
|
424
|
-
}
|
|
425
|
-
}), vueDemi.isVue3 && {
|
|
377
|
+
const height = (_f = this.data.height) != null ? _f : aspectRatio ? width / aspectRatio : 0;
|
|
378
|
+
const sizer = this.layout !== "fill" ? vue.h(Sizer, {
|
|
426
379
|
sizerClass: this.pictureClass,
|
|
427
380
|
sizerStyle: this.pictureStyle,
|
|
428
381
|
width,
|
|
429
382
|
height,
|
|
430
383
|
explicitWidth: this.explicitWidth
|
|
431
|
-
})
|
|
432
|
-
return
|
|
384
|
+
}) : null;
|
|
385
|
+
return vue.h(
|
|
433
386
|
"div",
|
|
434
387
|
{
|
|
435
|
-
style: __spreadValues$
|
|
388
|
+
style: __spreadValues$2(__spreadValues$2({
|
|
436
389
|
display: this.explicitWidth ? "inline-block" : "block",
|
|
437
390
|
overflow: "hidden"
|
|
438
391
|
}, 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({
|
|
|
441
394
|
[
|
|
442
395
|
sizer,
|
|
443
396
|
placeholder,
|
|
444
|
-
addImage &&
|
|
397
|
+
addImage && vue.h("picture", null, [
|
|
445
398
|
webpSource,
|
|
446
399
|
regularSource,
|
|
447
|
-
this.data.src &&
|
|
448
|
-
attrs: {
|
|
449
|
-
src: this.data.src,
|
|
450
|
-
alt: this.data.alt,
|
|
451
|
-
title: this.data.title,
|
|
452
|
-
fetchpriority: this.priority ? "high" : void 0
|
|
453
|
-
},
|
|
454
|
-
on: {
|
|
455
|
-
load: this.handleLoad
|
|
456
|
-
}
|
|
457
|
-
}), vueDemi.isVue3 && {
|
|
400
|
+
this.data.src && vue.h("img", {
|
|
458
401
|
src: this.data.src,
|
|
459
402
|
alt: this.data.alt,
|
|
460
403
|
title: this.data.title,
|
|
461
404
|
fetchpriority: this.priority ? "high" : void 0,
|
|
462
|
-
onLoad: this.handleLoad
|
|
463
|
-
}), {
|
|
405
|
+
onLoad: this.handleLoad,
|
|
464
406
|
ref: "imageRef",
|
|
465
407
|
class: this.pictureClass,
|
|
466
|
-
style: __spreadValues$
|
|
408
|
+
style: __spreadValues$2(__spreadProps$2(__spreadValues$2({
|
|
467
409
|
opacity: showImage ? 1 : 0,
|
|
468
410
|
transition
|
|
469
411
|
}, absolutePositioning), {
|
|
470
412
|
objectFit: this.objectFit,
|
|
471
413
|
objectPosition: this.objectPosition
|
|
472
414
|
}), this.pictureStyle)
|
|
473
|
-
})
|
|
415
|
+
})
|
|
474
416
|
]),
|
|
475
|
-
|
|
476
|
-
domProps: {
|
|
477
|
-
innerHTML: tag("picture", {}, [
|
|
478
|
-
this.data.webpSrcSet && tag("source", {
|
|
479
|
-
srcset: this.data.webpSrcSet,
|
|
480
|
-
sizes: this.data.sizes,
|
|
481
|
-
type: "image/webp"
|
|
482
|
-
}),
|
|
483
|
-
this.data.srcSet && tag("source", {
|
|
484
|
-
srcset: this.data.srcSet,
|
|
485
|
-
sizes: this.data.sizes
|
|
486
|
-
}),
|
|
487
|
-
tag("img", {
|
|
488
|
-
src: this.data.src,
|
|
489
|
-
alt: this.data.alt,
|
|
490
|
-
title: this.data.title,
|
|
491
|
-
class: this.pictureClass,
|
|
492
|
-
style: toCss(__spreadValues$3(__spreadProps$2(__spreadValues$3({}, absolutePositioning), {
|
|
493
|
-
objectFit: this.objectFit,
|
|
494
|
-
objectPosition: this.objectPosition
|
|
495
|
-
}), this.pictureStyle)),
|
|
496
|
-
loading: this.computedLazyLoad ? "lazy" : void 0,
|
|
497
|
-
fetchpriority: this.priority ? "high" : void 0
|
|
498
|
-
})
|
|
499
|
-
])
|
|
500
|
-
}
|
|
501
|
-
}), vueDemi.isVue3 && {
|
|
417
|
+
vue.h("noscript", {
|
|
502
418
|
innerHTML: tag("picture", {}, [
|
|
503
419
|
this.data.webpSrcSet && tag("source", {
|
|
504
420
|
srcset: this.data.webpSrcSet,
|
|
@@ -514,12 +430,12 @@ const Image = vueDemi.defineComponent({
|
|
|
514
430
|
alt: this.data.alt,
|
|
515
431
|
title: this.data.title,
|
|
516
432
|
class: this.pictureClass,
|
|
517
|
-
style: toCss(__spreadValues$
|
|
433
|
+
style: toCss(__spreadValues$2(__spreadValues$2({}, this.pictureStyle), absolutePositioning)),
|
|
518
434
|
loading: this.computedLazyLoad ? "lazy" : void 0,
|
|
519
435
|
fetchpriority: this.priority ? "high" : void 0
|
|
520
436
|
})
|
|
521
437
|
])
|
|
522
|
-
})
|
|
438
|
+
})
|
|
523
439
|
]
|
|
524
440
|
);
|
|
525
441
|
}
|
|
@@ -530,22 +446,9 @@ const DatocmsImagePlugin = {
|
|
|
530
446
|
}
|
|
531
447
|
};
|
|
532
448
|
|
|
533
|
-
var __defProp$2 = Object.defineProperty;
|
|
534
449
|
var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
|
|
535
450
|
var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
|
|
536
451
|
var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
|
|
537
|
-
var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
538
|
-
var __spreadValues$2 = (a, b) => {
|
|
539
|
-
for (var prop in b || (b = {}))
|
|
540
|
-
if (__hasOwnProp$2.call(b, prop))
|
|
541
|
-
__defNormalProp$2(a, prop, b[prop]);
|
|
542
|
-
if (__getOwnPropSymbols$2)
|
|
543
|
-
for (var prop of __getOwnPropSymbols$2(b)) {
|
|
544
|
-
if (__propIsEnum$2.call(b, prop))
|
|
545
|
-
__defNormalProp$2(a, prop, b[prop]);
|
|
546
|
-
}
|
|
547
|
-
return a;
|
|
548
|
-
};
|
|
549
452
|
var __objRest$1 = (source, exclude) => {
|
|
550
453
|
var target = {};
|
|
551
454
|
for (var prop in source)
|
|
@@ -559,10 +462,10 @@ var __objRest$1 = (source, exclude) => {
|
|
|
559
462
|
return target;
|
|
560
463
|
};
|
|
561
464
|
const hAdapter = (tagName, props, childOrChildren) => {
|
|
562
|
-
const _a = props || {}
|
|
563
|
-
return
|
|
465
|
+
const _a = props || {}; __objRest$1(_a, ["href", "target", "rel"]);
|
|
466
|
+
return vue.h(
|
|
564
467
|
tagName,
|
|
565
|
-
|
|
468
|
+
props,
|
|
566
469
|
typeof childOrChildren === "undefined" || Array.isArray(childOrChildren) ? childOrChildren : [childOrChildren]
|
|
567
470
|
);
|
|
568
471
|
};
|
|
@@ -578,7 +481,7 @@ function appendKeyToValidElement(element, key) {
|
|
|
578
481
|
}
|
|
579
482
|
return element;
|
|
580
483
|
}
|
|
581
|
-
const StructuredText =
|
|
484
|
+
const StructuredText = vue.defineComponent({
|
|
582
485
|
name: "DatocmsStructuredText",
|
|
583
486
|
props: {
|
|
584
487
|
data: {
|
|
@@ -773,12 +676,12 @@ var __async$1 = (__this, __arguments, generator) => {
|
|
|
773
676
|
};
|
|
774
677
|
const useQuerySubscription = (_a) => {
|
|
775
678
|
var _b = _a, { enabled = true, initialData, query, token } = _b, other = __objRest(_b, ["enabled", "initialData", "query", "token"]);
|
|
776
|
-
const error =
|
|
777
|
-
const data =
|
|
778
|
-
const status =
|
|
679
|
+
const error = vue.ref(null);
|
|
680
|
+
const data = vue.ref(vue.unref(initialData) || null);
|
|
681
|
+
const status = vue.ref(vue.unref(enabled) ? "connecting" : "closed");
|
|
779
682
|
const subscribeToQueryOptions = other;
|
|
780
|
-
|
|
781
|
-
if (query && token &&
|
|
683
|
+
vue.watchEffect((onCleanup) => __async$1(void 0, null, function* () {
|
|
684
|
+
if (query && token && vue.unref(enabled)) {
|
|
782
685
|
const unsubscribe = yield datocmsListen.subscribeToQuery(__spreadProps$1(__spreadValues$1({}, subscribeToQueryOptions), {
|
|
783
686
|
query,
|
|
784
687
|
token,
|
|
@@ -828,19 +731,19 @@ const highlightPieces = (textWithHighlightMarker) => {
|
|
|
828
731
|
};
|
|
829
732
|
function useSiteSearch(config) {
|
|
830
733
|
var _a, _b, _c;
|
|
831
|
-
const state =
|
|
734
|
+
const state = vue.reactive({
|
|
832
735
|
query: ((_a = config.initialState) == null ? void 0 : _a.query) || "",
|
|
833
736
|
page: ((_b = config.initialState) == null ? void 0 : _b.page) || 0,
|
|
834
737
|
locale: (_c = config.initialState) == null ? void 0 : _c.locale
|
|
835
738
|
});
|
|
836
|
-
const error =
|
|
837
|
-
const response =
|
|
739
|
+
const error = vue.ref();
|
|
740
|
+
const response = vue.reactive({
|
|
838
741
|
data: [],
|
|
839
742
|
meta: { total_count: 0 }
|
|
840
743
|
});
|
|
841
744
|
error.value = void 0;
|
|
842
745
|
const resultsPerPage = config.resultsPerPage || 8;
|
|
843
|
-
|
|
746
|
+
vue.watchEffect((onCleanup) => {
|
|
844
747
|
let isCancelled = false;
|
|
845
748
|
const run = () => __async(this, null, function* () {
|
|
846
749
|
try {
|
|
@@ -884,7 +787,7 @@ function useSiteSearch(config) {
|
|
|
884
787
|
isCancelled = true;
|
|
885
788
|
});
|
|
886
789
|
});
|
|
887
|
-
const data =
|
|
790
|
+
const data = vue.computed(() => {
|
|
888
791
|
return state.query && response.data.length > 0 ? {
|
|
889
792
|
pageResults: response.data.map((rawSearchResult) => ({
|
|
890
793
|
id: rawSearchResult.id,
|
|
@@ -893,7 +796,7 @@ function useSiteSearch(config) {
|
|
|
893
796
|
titleHighlights: rawSearchResult.attributes.highlight.title ? rawSearchResult.attributes.highlight.title.map(highlightPieces) : [],
|
|
894
797
|
bodyExcerpt: rawSearchResult.attributes.body_excerpt,
|
|
895
798
|
bodyHighlights: rawSearchResult.attributes.highlight.body ? rawSearchResult.attributes.highlight.body.map(highlightPieces) : [],
|
|
896
|
-
raw:
|
|
799
|
+
raw: vue.toRaw(rawSearchResult)
|
|
897
800
|
})),
|
|
898
801
|
totalResults: response.meta.total_count,
|
|
899
802
|
totalPages: Math.ceil(response.meta.total_count / resultsPerPage)
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import { PropType, VNodeProps, VNode, Ref, UnwrapRef } from 'vue
|
|
1
|
+
import * as vue from 'vue';
|
|
2
|
+
import { PropType, VNodeProps, VNode, Ref, UnwrapRef } from 'vue';
|
|
3
3
|
import { TransformedMeta, RenderMarkRule, TransformMetaFn } from 'datocms-structured-text-generic-html-renderer';
|
|
4
4
|
export { renderMarkRule, renderNodeRule, renderNodeRule as renderRule } from 'datocms-structured-text-generic-html-renderer';
|
|
5
5
|
import { Record as Record$1, RenderResult, StructuredText as StructuredText$1, Document, Node, RenderRule } from 'datocms-structured-text-utils';
|
|
@@ -30,7 +30,7 @@ type ResponsiveImageType = {
|
|
|
30
30
|
/** Title attribute (`title`) for the image */
|
|
31
31
|
title?: string;
|
|
32
32
|
};
|
|
33
|
-
declare const Image:
|
|
33
|
+
declare const Image: vue.DefineComponent<{
|
|
34
34
|
/** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
|
|
35
35
|
data: {
|
|
36
36
|
type: PropType<ResponsiveImageType>;
|
|
@@ -135,13 +135,13 @@ declare const Image: vue_demi.DefineComponent<{
|
|
|
135
135
|
default: () => number[];
|
|
136
136
|
};
|
|
137
137
|
}, {
|
|
138
|
-
inView:
|
|
139
|
-
elRef:
|
|
140
|
-
loaded:
|
|
138
|
+
inView: vue.Ref<boolean>;
|
|
139
|
+
elRef: vue.Ref<HTMLElement | null>;
|
|
140
|
+
loaded: vue.Ref<boolean>;
|
|
141
141
|
handleLoad: () => void;
|
|
142
|
-
computedLazyLoad:
|
|
143
|
-
imageRef:
|
|
144
|
-
}, unknown, {}, {},
|
|
142
|
+
computedLazyLoad: vue.Ref<boolean>;
|
|
143
|
+
imageRef: vue.Ref<HTMLImageElement | undefined>;
|
|
144
|
+
}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
|
|
145
145
|
/** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
|
|
146
146
|
data: {
|
|
147
147
|
type: PropType<ResponsiveImageType>;
|
|
@@ -283,7 +283,7 @@ type RenderRecordLinkContext = {
|
|
|
283
283
|
type RenderBlockContext = {
|
|
284
284
|
record: Record$1;
|
|
285
285
|
};
|
|
286
|
-
declare const StructuredText:
|
|
286
|
+
declare const StructuredText: vue.DefineComponent<{
|
|
287
287
|
/** The actual field value you get from DatoCMS **/
|
|
288
288
|
data: {
|
|
289
289
|
type: PropType<StructuredText$1<Record$1, Record$1> | Document | Node | null | undefined>;
|
|
@@ -328,7 +328,7 @@ declare const StructuredText: vue_demi.DefineComponent<{
|
|
|
328
328
|
renderFragment: {
|
|
329
329
|
type: PropType<(children: AdapterReturn[], key: string) => AdapterReturn>;
|
|
330
330
|
};
|
|
331
|
-
}, () => RenderResult<(tagName: string, props?: VNodeProps, childOrChildren?: AdapterReturn | AdapterReturn[]) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>, unknown, {}, {},
|
|
331
|
+
}, () => 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<{
|
|
332
332
|
/** The actual field value you get from DatoCMS **/
|
|
333
333
|
data: {
|
|
334
334
|
type: PropType<StructuredText$1<Record$1, Record$1> | Document | Node | null | undefined>;
|
|
@@ -410,7 +410,7 @@ type SearchResultInstancesHrefSchema = {
|
|
|
410
410
|
[k: string]: unknown;
|
|
411
411
|
};
|
|
412
412
|
filter: {
|
|
413
|
-
fuzzy?: string;
|
|
413
|
+
fuzzy?: string | boolean;
|
|
414
414
|
query: string;
|
|
415
415
|
build_trigger_id?: string;
|
|
416
416
|
locale?: string;
|
package/dist/index.esm.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import hypenateStyleName from 'hyphenate-style-name';
|
|
2
|
-
import { ref, onMounted, onBeforeUnmount, defineComponent, h,
|
|
2
|
+
import { ref, onMounted, onBeforeUnmount, defineComponent, h, watchEffect, unref, reactive, computed, toRaw } from 'vue';
|
|
3
3
|
import { render, renderNodeRule, defaultMetaTransformer } from 'datocms-structured-text-generic-html-renderer';
|
|
4
4
|
export { renderMarkRule, renderNodeRule, renderNodeRule as renderRule } from 'datocms-structured-text-generic-html-renderer';
|
|
5
5
|
import { isRoot, isInlineItem, RenderError, isStructuredText, isItemLink, isBlock } from 'datocms-structured-text-utils';
|
|
@@ -44,22 +44,6 @@ const useInView = ({ threshold, rootMargin }) => {
|
|
|
44
44
|
return { inView, elRef };
|
|
45
45
|
};
|
|
46
46
|
|
|
47
|
-
var __defProp$5 = Object.defineProperty;
|
|
48
|
-
var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
|
|
49
|
-
var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
|
|
50
|
-
var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
|
|
51
|
-
var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
52
|
-
var __spreadValues$5 = (a, b) => {
|
|
53
|
-
for (var prop in b || (b = {}))
|
|
54
|
-
if (__hasOwnProp$5.call(b, prop))
|
|
55
|
-
__defNormalProp$5(a, prop, b[prop]);
|
|
56
|
-
if (__getOwnPropSymbols$5)
|
|
57
|
-
for (var prop of __getOwnPropSymbols$5(b)) {
|
|
58
|
-
if (__propIsEnum$5.call(b, prop))
|
|
59
|
-
__defNormalProp$5(a, prop, b[prop]);
|
|
60
|
-
}
|
|
61
|
-
return a;
|
|
62
|
-
};
|
|
63
47
|
const Source = defineComponent({
|
|
64
48
|
props: {
|
|
65
49
|
srcset: {
|
|
@@ -73,33 +57,27 @@ const Source = defineComponent({
|
|
|
73
57
|
}
|
|
74
58
|
},
|
|
75
59
|
setup({ srcset, sizes, type }) {
|
|
76
|
-
return () => h("source",
|
|
77
|
-
attrs: {
|
|
78
|
-
srcset,
|
|
79
|
-
sizes,
|
|
80
|
-
type
|
|
81
|
-
}
|
|
82
|
-
}), isVue3 && {
|
|
60
|
+
return () => h("source", {
|
|
83
61
|
srcset,
|
|
84
62
|
sizes,
|
|
85
63
|
type
|
|
86
|
-
})
|
|
64
|
+
});
|
|
87
65
|
}
|
|
88
66
|
});
|
|
89
67
|
|
|
90
|
-
var __defProp$
|
|
68
|
+
var __defProp$3 = Object.defineProperty;
|
|
91
69
|
var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
|
|
92
70
|
var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
|
|
93
71
|
var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
|
|
94
|
-
var __defNormalProp$
|
|
95
|
-
var __spreadValues$
|
|
72
|
+
var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
73
|
+
var __spreadValues$3 = (a, b) => {
|
|
96
74
|
for (var prop in b || (b = {}))
|
|
97
75
|
if (__hasOwnProp$4.call(b, prop))
|
|
98
|
-
__defNormalProp$
|
|
76
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
99
77
|
if (__getOwnPropSymbols$4)
|
|
100
78
|
for (var prop of __getOwnPropSymbols$4(b)) {
|
|
101
79
|
if (__propIsEnum$4.call(b, prop))
|
|
102
|
-
__defNormalProp$
|
|
80
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
103
81
|
}
|
|
104
82
|
return a;
|
|
105
83
|
};
|
|
@@ -125,39 +103,33 @@ const Sizer = defineComponent({
|
|
|
125
103
|
},
|
|
126
104
|
setup({ sizerClass, sizerStyle, width, height, explicitWidth }) {
|
|
127
105
|
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
|
|
128
|
-
return () => h("img",
|
|
106
|
+
return () => h("img", {
|
|
129
107
|
class: sizerClass,
|
|
130
|
-
style: __spreadValues$
|
|
108
|
+
style: __spreadValues$3({
|
|
131
109
|
display: "block",
|
|
132
110
|
width: explicitWidth ? `${width}px` : "100%"
|
|
133
|
-
}, sizerStyle)
|
|
134
|
-
}, isVue2 && {
|
|
135
|
-
attrs: {
|
|
136
|
-
src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
|
|
137
|
-
role: "presentation"
|
|
138
|
-
}
|
|
139
|
-
}), isVue3 && {
|
|
111
|
+
}, sizerStyle),
|
|
140
112
|
src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
|
|
141
113
|
role: "presentation"
|
|
142
|
-
})
|
|
114
|
+
});
|
|
143
115
|
}
|
|
144
116
|
});
|
|
145
117
|
|
|
146
|
-
var __defProp$
|
|
118
|
+
var __defProp$2 = Object.defineProperty;
|
|
147
119
|
var __defProps$2 = Object.defineProperties;
|
|
148
120
|
var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
|
|
149
121
|
var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
|
|
150
122
|
var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
|
|
151
123
|
var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
|
|
152
|
-
var __defNormalProp$
|
|
153
|
-
var __spreadValues$
|
|
124
|
+
var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
125
|
+
var __spreadValues$2 = (a, b) => {
|
|
154
126
|
for (var prop in b || (b = {}))
|
|
155
127
|
if (__hasOwnProp$3.call(b, prop))
|
|
156
|
-
__defNormalProp$
|
|
128
|
+
__defNormalProp$2(a, prop, b[prop]);
|
|
157
129
|
if (__getOwnPropSymbols$3)
|
|
158
130
|
for (var prop of __getOwnPropSymbols$3(b)) {
|
|
159
131
|
if (__propIsEnum$3.call(b, prop))
|
|
160
|
-
__defNormalProp$
|
|
132
|
+
__defNormalProp$2(a, prop, b[prop]);
|
|
161
133
|
}
|
|
162
134
|
return a;
|
|
163
135
|
};
|
|
@@ -357,7 +329,7 @@ const Image = defineComponent({
|
|
|
357
329
|
};
|
|
358
330
|
},
|
|
359
331
|
render() {
|
|
360
|
-
var _a, _b, _c, _d, _e, _f
|
|
332
|
+
var _a, _b, _c, _d, _e, _f;
|
|
361
333
|
const addImage = imageAddStrategy({
|
|
362
334
|
lazyLoad: this.computedLazyLoad,
|
|
363
335
|
inView: this.inView,
|
|
@@ -368,26 +340,15 @@ const Image = defineComponent({
|
|
|
368
340
|
inView: this.inView,
|
|
369
341
|
loaded: this.loaded
|
|
370
342
|
});
|
|
371
|
-
const webpSource = this.data.webpSrcSet && h(Source,
|
|
372
|
-
props: {
|
|
373
|
-
srcset: this.data.webpSrcSet,
|
|
374
|
-
sizes: (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : void 0,
|
|
375
|
-
type: "image/webp"
|
|
376
|
-
}
|
|
377
|
-
}), isVue3 && {
|
|
343
|
+
const webpSource = this.data.webpSrcSet && h(Source, {
|
|
378
344
|
srcset: this.data.webpSrcSet,
|
|
379
|
-
sizes: (
|
|
345
|
+
sizes: (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : void 0,
|
|
380
346
|
type: "image/webp"
|
|
381
|
-
})
|
|
382
|
-
const regularSource = this.data.srcSet && h(Source,
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
}
|
|
387
|
-
}), isVue3 && {
|
|
388
|
-
srcset: (_h = this.data.srcSet) != null ? _h : buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
|
|
389
|
-
sizes: (_j = (_i = this.sizes) != null ? _i : this.data.sizes) != null ? _j : void 0
|
|
390
|
-
}));
|
|
347
|
+
});
|
|
348
|
+
const regularSource = this.data.srcSet && h(Source, {
|
|
349
|
+
srcset: (_c = this.data.srcSet) != null ? _c : buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
|
|
350
|
+
sizes: (_e = (_d = this.sizes) != null ? _d : this.data.sizes) != null ? _e : void 0
|
|
351
|
+
});
|
|
391
352
|
const transition = typeof this.fadeInDuration === "undefined" || this.fadeInDuration > 0 ? `opacity ${this.fadeInDuration || 500}ms ${this.fadeInDuration || 500}ms` : void 0;
|
|
392
353
|
const placeholder = this.usePlaceholder && (this.data.bgColor || this.data.base64) ? h("div", {
|
|
393
354
|
"aria-hidden": "true",
|
|
@@ -407,26 +368,18 @@ const Image = defineComponent({
|
|
|
407
368
|
}
|
|
408
369
|
}) : null;
|
|
409
370
|
const { width, aspectRatio } = this.data;
|
|
410
|
-
const height = (
|
|
411
|
-
const sizer = this.layout !== "fill" ? h(Sizer,
|
|
412
|
-
props: {
|
|
413
|
-
sizerClass: this.pictureClass,
|
|
414
|
-
sizerStyle: this.pictureStyle,
|
|
415
|
-
width,
|
|
416
|
-
height,
|
|
417
|
-
explicitWidth: this.explicitWidth
|
|
418
|
-
}
|
|
419
|
-
}), isVue3 && {
|
|
371
|
+
const height = (_f = this.data.height) != null ? _f : aspectRatio ? width / aspectRatio : 0;
|
|
372
|
+
const sizer = this.layout !== "fill" ? h(Sizer, {
|
|
420
373
|
sizerClass: this.pictureClass,
|
|
421
374
|
sizerStyle: this.pictureStyle,
|
|
422
375
|
width,
|
|
423
376
|
height,
|
|
424
377
|
explicitWidth: this.explicitWidth
|
|
425
|
-
})
|
|
378
|
+
}) : null;
|
|
426
379
|
return h(
|
|
427
380
|
"div",
|
|
428
381
|
{
|
|
429
|
-
style: __spreadValues$
|
|
382
|
+
style: __spreadValues$2(__spreadValues$2({
|
|
430
383
|
display: this.explicitWidth ? "inline-block" : "block",
|
|
431
384
|
overflow: "hidden"
|
|
432
385
|
}, 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({
|
|
|
438
391
|
addImage && h("picture", null, [
|
|
439
392
|
webpSource,
|
|
440
393
|
regularSource,
|
|
441
|
-
this.data.src && h("img",
|
|
442
|
-
attrs: {
|
|
443
|
-
src: this.data.src,
|
|
444
|
-
alt: this.data.alt,
|
|
445
|
-
title: this.data.title,
|
|
446
|
-
fetchpriority: this.priority ? "high" : void 0
|
|
447
|
-
},
|
|
448
|
-
on: {
|
|
449
|
-
load: this.handleLoad
|
|
450
|
-
}
|
|
451
|
-
}), isVue3 && {
|
|
394
|
+
this.data.src && h("img", {
|
|
452
395
|
src: this.data.src,
|
|
453
396
|
alt: this.data.alt,
|
|
454
397
|
title: this.data.title,
|
|
455
398
|
fetchpriority: this.priority ? "high" : void 0,
|
|
456
|
-
onLoad: this.handleLoad
|
|
457
|
-
}), {
|
|
399
|
+
onLoad: this.handleLoad,
|
|
458
400
|
ref: "imageRef",
|
|
459
401
|
class: this.pictureClass,
|
|
460
|
-
style: __spreadValues$
|
|
402
|
+
style: __spreadValues$2(__spreadProps$2(__spreadValues$2({
|
|
461
403
|
opacity: showImage ? 1 : 0,
|
|
462
404
|
transition
|
|
463
405
|
}, absolutePositioning), {
|
|
464
406
|
objectFit: this.objectFit,
|
|
465
407
|
objectPosition: this.objectPosition
|
|
466
408
|
}), this.pictureStyle)
|
|
467
|
-
})
|
|
409
|
+
})
|
|
468
410
|
]),
|
|
469
|
-
h("noscript",
|
|
470
|
-
domProps: {
|
|
471
|
-
innerHTML: tag("picture", {}, [
|
|
472
|
-
this.data.webpSrcSet && tag("source", {
|
|
473
|
-
srcset: this.data.webpSrcSet,
|
|
474
|
-
sizes: this.data.sizes,
|
|
475
|
-
type: "image/webp"
|
|
476
|
-
}),
|
|
477
|
-
this.data.srcSet && tag("source", {
|
|
478
|
-
srcset: this.data.srcSet,
|
|
479
|
-
sizes: this.data.sizes
|
|
480
|
-
}),
|
|
481
|
-
tag("img", {
|
|
482
|
-
src: this.data.src,
|
|
483
|
-
alt: this.data.alt,
|
|
484
|
-
title: this.data.title,
|
|
485
|
-
class: this.pictureClass,
|
|
486
|
-
style: toCss(__spreadValues$3(__spreadProps$2(__spreadValues$3({}, absolutePositioning), {
|
|
487
|
-
objectFit: this.objectFit,
|
|
488
|
-
objectPosition: this.objectPosition
|
|
489
|
-
}), this.pictureStyle)),
|
|
490
|
-
loading: this.computedLazyLoad ? "lazy" : void 0,
|
|
491
|
-
fetchpriority: this.priority ? "high" : void 0
|
|
492
|
-
})
|
|
493
|
-
])
|
|
494
|
-
}
|
|
495
|
-
}), isVue3 && {
|
|
411
|
+
h("noscript", {
|
|
496
412
|
innerHTML: tag("picture", {}, [
|
|
497
413
|
this.data.webpSrcSet && tag("source", {
|
|
498
414
|
srcset: this.data.webpSrcSet,
|
|
@@ -508,12 +424,12 @@ const Image = defineComponent({
|
|
|
508
424
|
alt: this.data.alt,
|
|
509
425
|
title: this.data.title,
|
|
510
426
|
class: this.pictureClass,
|
|
511
|
-
style: toCss(__spreadValues$
|
|
427
|
+
style: toCss(__spreadValues$2(__spreadValues$2({}, this.pictureStyle), absolutePositioning)),
|
|
512
428
|
loading: this.computedLazyLoad ? "lazy" : void 0,
|
|
513
429
|
fetchpriority: this.priority ? "high" : void 0
|
|
514
430
|
})
|
|
515
431
|
])
|
|
516
|
-
})
|
|
432
|
+
})
|
|
517
433
|
]
|
|
518
434
|
);
|
|
519
435
|
}
|
|
@@ -524,22 +440,9 @@ const DatocmsImagePlugin = {
|
|
|
524
440
|
}
|
|
525
441
|
};
|
|
526
442
|
|
|
527
|
-
var __defProp$2 = Object.defineProperty;
|
|
528
443
|
var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
|
|
529
444
|
var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
|
|
530
445
|
var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
|
|
531
|
-
var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
532
|
-
var __spreadValues$2 = (a, b) => {
|
|
533
|
-
for (var prop in b || (b = {}))
|
|
534
|
-
if (__hasOwnProp$2.call(b, prop))
|
|
535
|
-
__defNormalProp$2(a, prop, b[prop]);
|
|
536
|
-
if (__getOwnPropSymbols$2)
|
|
537
|
-
for (var prop of __getOwnPropSymbols$2(b)) {
|
|
538
|
-
if (__propIsEnum$2.call(b, prop))
|
|
539
|
-
__defNormalProp$2(a, prop, b[prop]);
|
|
540
|
-
}
|
|
541
|
-
return a;
|
|
542
|
-
};
|
|
543
446
|
var __objRest$1 = (source, exclude) => {
|
|
544
447
|
var target = {};
|
|
545
448
|
for (var prop in source)
|
|
@@ -553,10 +456,10 @@ var __objRest$1 = (source, exclude) => {
|
|
|
553
456
|
return target;
|
|
554
457
|
};
|
|
555
458
|
const hAdapter = (tagName, props, childOrChildren) => {
|
|
556
|
-
const _a = props || {}
|
|
459
|
+
const _a = props || {}; __objRest$1(_a, ["href", "target", "rel"]);
|
|
557
460
|
return h(
|
|
558
461
|
tagName,
|
|
559
|
-
|
|
462
|
+
props,
|
|
560
463
|
typeof childOrChildren === "undefined" || Array.isArray(childOrChildren) ? childOrChildren : [childOrChildren]
|
|
561
464
|
);
|
|
562
465
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-datocms",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.0",
|
|
4
4
|
"description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"datocms",
|
|
@@ -41,17 +41,10 @@
|
|
|
41
41
|
"datocms-listen": "^0.1.15",
|
|
42
42
|
"datocms-structured-text-generic-html-renderer": "^2.0.4",
|
|
43
43
|
"datocms-structured-text-utils": "^2.0.4",
|
|
44
|
-
"hyphenate-style-name": "^1.0.4"
|
|
45
|
-
"vue-demi": "^0.13.11"
|
|
44
|
+
"hyphenate-style-name": "^1.0.4"
|
|
46
45
|
},
|
|
47
46
|
"peerDependencies": {
|
|
48
|
-
"
|
|
49
|
-
"vue": ">= 2.5 < 2.7 || >=3.0.0"
|
|
50
|
-
},
|
|
51
|
-
"peerDependenciesMeta": {
|
|
52
|
-
"@vue/composition-api": {
|
|
53
|
-
"optional": true
|
|
54
|
-
}
|
|
47
|
+
"vue": "^3.0.0"
|
|
55
48
|
},
|
|
56
49
|
"devDependencies": {
|
|
57
50
|
"@types/hyphenate-style-name": "^1.0.2",
|
|
@@ -71,7 +64,6 @@
|
|
|
71
64
|
"ts-jest": "^29.1.1",
|
|
72
65
|
"tslib": "^2.6.2",
|
|
73
66
|
"typescript": "^4.9.5",
|
|
74
|
-
"vue": "^3.2.40",
|
|
75
67
|
"vue-tsc": "^0.37.9"
|
|
76
68
|
}
|
|
77
69
|
}
|