vue-datocms 4.0.0 → 4.0.2
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 +3 -1
- package/dist/index.cjs.js +271 -161
- package/dist/index.d.ts +5 -5
- package/dist/index.esm.mjs +272 -162
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -43,9 +43,11 @@ Helpers:
|
|
|
43
43
|
## Installation
|
|
44
44
|
|
|
45
45
|
```
|
|
46
|
+
# First, install Vue
|
|
47
|
+
npm install vue
|
|
48
|
+
# Then install vue-datocms
|
|
46
49
|
npm install vue-datocms
|
|
47
50
|
```
|
|
48
|
-
|
|
49
51
|
## Development
|
|
50
52
|
|
|
51
53
|
This repository contains a number of examples. You can use them to locally test your changes to the package:
|
package/dist/index.cjs.js
CHANGED
|
@@ -50,6 +50,22 @@ const useInView = ({ threshold, rootMargin }) => {
|
|
|
50
50
|
return { inView, elRef };
|
|
51
51
|
};
|
|
52
52
|
|
|
53
|
+
var __defProp$4 = Object.defineProperty;
|
|
54
|
+
var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
|
|
55
|
+
var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
|
|
56
|
+
var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
|
|
57
|
+
var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
58
|
+
var __spreadValues$4 = (a, b) => {
|
|
59
|
+
for (var prop in b || (b = {}))
|
|
60
|
+
if (__hasOwnProp$4.call(b, prop))
|
|
61
|
+
__defNormalProp$4(a, prop, b[prop]);
|
|
62
|
+
if (__getOwnPropSymbols$4)
|
|
63
|
+
for (var prop of __getOwnPropSymbols$4(b)) {
|
|
64
|
+
if (__propIsEnum$4.call(b, prop))
|
|
65
|
+
__defNormalProp$4(a, prop, b[prop]);
|
|
66
|
+
}
|
|
67
|
+
return a;
|
|
68
|
+
};
|
|
53
69
|
const Source = vueDemi.defineComponent({
|
|
54
70
|
props: {
|
|
55
71
|
srcset: {
|
|
@@ -63,23 +79,36 @@ const Source = vueDemi.defineComponent({
|
|
|
63
79
|
}
|
|
64
80
|
},
|
|
65
81
|
setup({ srcset, sizes, type }) {
|
|
66
|
-
return () => vueDemi.h("source", {
|
|
67
|
-
|
|
68
|
-
attrs: {
|
|
69
|
-
srcset,
|
|
70
|
-
sizes,
|
|
71
|
-
type
|
|
72
|
-
}
|
|
73
|
-
},
|
|
74
|
-
...vueDemi.isVue3 && {
|
|
82
|
+
return () => vueDemi.h("source", __spreadValues$4(__spreadValues$4({}, vueDemi.isVue2 && {
|
|
83
|
+
attrs: {
|
|
75
84
|
srcset,
|
|
76
85
|
sizes,
|
|
77
86
|
type
|
|
78
87
|
}
|
|
79
|
-
})
|
|
88
|
+
}), vueDemi.isVue3 && {
|
|
89
|
+
srcset,
|
|
90
|
+
sizes,
|
|
91
|
+
type
|
|
92
|
+
}));
|
|
80
93
|
}
|
|
81
94
|
});
|
|
82
95
|
|
|
96
|
+
var __defProp$3 = Object.defineProperty;
|
|
97
|
+
var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
|
|
98
|
+
var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
|
|
99
|
+
var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
|
|
100
|
+
var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
101
|
+
var __spreadValues$3 = (a, b) => {
|
|
102
|
+
for (var prop in b || (b = {}))
|
|
103
|
+
if (__hasOwnProp$3.call(b, prop))
|
|
104
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
105
|
+
if (__getOwnPropSymbols$3)
|
|
106
|
+
for (var prop of __getOwnPropSymbols$3(b)) {
|
|
107
|
+
if (__propIsEnum$3.call(b, prop))
|
|
108
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
109
|
+
}
|
|
110
|
+
return a;
|
|
111
|
+
};
|
|
83
112
|
const universalBtoa = (str) => isSsr() ? Buffer.from(str.toString(), "binary").toString("base64") : window.btoa(str);
|
|
84
113
|
const Sizer = vueDemi.defineComponent({
|
|
85
114
|
props: {
|
|
@@ -102,27 +131,43 @@ const Sizer = vueDemi.defineComponent({
|
|
|
102
131
|
},
|
|
103
132
|
setup({ sizerClass, sizerStyle, width, height, explicitWidth }) {
|
|
104
133
|
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
|
|
105
|
-
return () => vueDemi.h("img", {
|
|
134
|
+
return () => vueDemi.h("img", __spreadValues$3(__spreadValues$3({
|
|
106
135
|
class: sizerClass,
|
|
107
|
-
style: {
|
|
136
|
+
style: __spreadValues$3({
|
|
108
137
|
display: "block",
|
|
109
|
-
width: explicitWidth ? `${width}px` : "100%"
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
attrs: {
|
|
114
|
-
src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
|
|
115
|
-
role: "presentation"
|
|
116
|
-
}
|
|
117
|
-
},
|
|
118
|
-
...vueDemi.isVue3 && {
|
|
138
|
+
width: explicitWidth ? `${width}px` : "100%"
|
|
139
|
+
}, sizerStyle)
|
|
140
|
+
}, vueDemi.isVue2 && {
|
|
141
|
+
attrs: {
|
|
119
142
|
src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
|
|
120
143
|
role: "presentation"
|
|
121
144
|
}
|
|
122
|
-
})
|
|
145
|
+
}), vueDemi.isVue3 && {
|
|
146
|
+
src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
|
|
147
|
+
role: "presentation"
|
|
148
|
+
}));
|
|
123
149
|
}
|
|
124
150
|
});
|
|
125
151
|
|
|
152
|
+
var __defProp$2 = Object.defineProperty;
|
|
153
|
+
var __defProps$2 = Object.defineProperties;
|
|
154
|
+
var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
|
|
155
|
+
var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
|
|
156
|
+
var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
|
|
157
|
+
var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
|
|
158
|
+
var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
159
|
+
var __spreadValues$2 = (a, b) => {
|
|
160
|
+
for (var prop in b || (b = {}))
|
|
161
|
+
if (__hasOwnProp$2.call(b, prop))
|
|
162
|
+
__defNormalProp$2(a, prop, b[prop]);
|
|
163
|
+
if (__getOwnPropSymbols$2)
|
|
164
|
+
for (var prop of __getOwnPropSymbols$2(b)) {
|
|
165
|
+
if (__propIsEnum$2.call(b, prop))
|
|
166
|
+
__defNormalProp$2(a, prop, b[prop]);
|
|
167
|
+
}
|
|
168
|
+
return a;
|
|
169
|
+
};
|
|
170
|
+
var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
|
|
126
171
|
const escape = (s) => {
|
|
127
172
|
s = "" + s;
|
|
128
173
|
s = s.replace(/&/g, "&");
|
|
@@ -318,6 +363,7 @@ const Image = vueDemi.defineComponent({
|
|
|
318
363
|
};
|
|
319
364
|
},
|
|
320
365
|
render() {
|
|
366
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
|
|
321
367
|
const addImage = imageAddStrategy({
|
|
322
368
|
lazyLoad: this.computedLazyLoad,
|
|
323
369
|
inView: this.inView,
|
|
@@ -328,32 +374,26 @@ const Image = vueDemi.defineComponent({
|
|
|
328
374
|
inView: this.inView,
|
|
329
375
|
loaded: this.loaded
|
|
330
376
|
});
|
|
331
|
-
const webpSource = this.data.webpSrcSet && vueDemi.h(Source, {
|
|
332
|
-
|
|
333
|
-
props: {
|
|
334
|
-
srcset: this.data.webpSrcSet,
|
|
335
|
-
sizes: this.sizes ?? this.data.sizes ?? void 0,
|
|
336
|
-
type: "image/webp"
|
|
337
|
-
}
|
|
338
|
-
},
|
|
339
|
-
...vueDemi.isVue3 && {
|
|
377
|
+
const webpSource = this.data.webpSrcSet && vueDemi.h(Source, __spreadValues$2(__spreadValues$2({}, vueDemi.isVue2 && {
|
|
378
|
+
props: {
|
|
340
379
|
srcset: this.data.webpSrcSet,
|
|
341
|
-
sizes: this.sizes
|
|
380
|
+
sizes: (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : void 0,
|
|
342
381
|
type: "image/webp"
|
|
343
382
|
}
|
|
344
|
-
})
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
srcset: this.data.srcSet ?? buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
|
|
354
|
-
sizes: this.sizes ?? this.data.sizes ?? void 0
|
|
383
|
+
}), vueDemi.isVue3 && {
|
|
384
|
+
srcset: this.data.webpSrcSet,
|
|
385
|
+
sizes: (_d = (_c = this.sizes) != null ? _c : this.data.sizes) != null ? _d : void 0,
|
|
386
|
+
type: "image/webp"
|
|
387
|
+
}));
|
|
388
|
+
const regularSource = this.data.srcSet && vueDemi.h(Source, __spreadValues$2(__spreadValues$2({}, vueDemi.isVue2 && {
|
|
389
|
+
props: {
|
|
390
|
+
srcset: (_e = this.data.srcSet) != null ? _e : buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
|
|
391
|
+
sizes: (_g = (_f = this.sizes) != null ? _f : this.data.sizes) != null ? _g : void 0
|
|
355
392
|
}
|
|
356
|
-
})
|
|
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
|
+
}));
|
|
357
397
|
const transition = typeof this.fadeInDuration === "undefined" || this.fadeInDuration > 0 ? `opacity ${this.fadeInDuration || 500}ms ${this.fadeInDuration || 500}ms` : void 0;
|
|
358
398
|
const placeholder = this.usePlaceholder && (this.data.bgColor || this.data.base64) ? vueDemi.h("div", {
|
|
359
399
|
style: {
|
|
@@ -372,34 +412,29 @@ const Image = vueDemi.defineComponent({
|
|
|
372
412
|
}
|
|
373
413
|
}) : null;
|
|
374
414
|
const { width, aspectRatio } = this.data;
|
|
375
|
-
const height = this.data.height
|
|
376
|
-
const sizer = this.layout !== "fill" ? vueDemi.h(Sizer, {
|
|
377
|
-
|
|
378
|
-
props: {
|
|
379
|
-
sizerClass: this.pictureClass,
|
|
380
|
-
sizerStyle: this.pictureStyle,
|
|
381
|
-
width,
|
|
382
|
-
height,
|
|
383
|
-
explicitWidth: this.explicitWidth
|
|
384
|
-
}
|
|
385
|
-
},
|
|
386
|
-
...vueDemi.isVue3 && {
|
|
415
|
+
const height = (_k = this.data.height) != null ? _k : aspectRatio ? width / aspectRatio : 0;
|
|
416
|
+
const sizer = this.layout !== "fill" ? vueDemi.h(Sizer, __spreadValues$2(__spreadValues$2({}, vueDemi.isVue2 && {
|
|
417
|
+
props: {
|
|
387
418
|
sizerClass: this.pictureClass,
|
|
388
419
|
sizerStyle: this.pictureStyle,
|
|
389
420
|
width,
|
|
390
421
|
height,
|
|
391
422
|
explicitWidth: this.explicitWidth
|
|
392
423
|
}
|
|
393
|
-
})
|
|
424
|
+
}), vueDemi.isVue3 && {
|
|
425
|
+
sizerClass: this.pictureClass,
|
|
426
|
+
sizerStyle: this.pictureStyle,
|
|
427
|
+
width,
|
|
428
|
+
height,
|
|
429
|
+
explicitWidth: this.explicitWidth
|
|
430
|
+
})) : null;
|
|
394
431
|
return vueDemi.h(
|
|
395
432
|
"div",
|
|
396
433
|
{
|
|
397
|
-
style: {
|
|
434
|
+
style: __spreadValues$2(__spreadValues$2({
|
|
398
435
|
display: this.explicitWidth ? "inline-block" : "block",
|
|
399
|
-
overflow: "hidden"
|
|
400
|
-
|
|
401
|
-
...this.rootStyle
|
|
402
|
-
},
|
|
436
|
+
overflow: "hidden"
|
|
437
|
+
}, 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),
|
|
403
438
|
ref: "elRef"
|
|
404
439
|
},
|
|
405
440
|
[
|
|
@@ -408,68 +443,36 @@ const Image = vueDemi.defineComponent({
|
|
|
408
443
|
addImage && vueDemi.h("picture", null, [
|
|
409
444
|
webpSource,
|
|
410
445
|
regularSource,
|
|
411
|
-
this.data.src && vueDemi.h("img", {
|
|
412
|
-
|
|
413
|
-
attrs: {
|
|
414
|
-
src: this.data.src,
|
|
415
|
-
alt: this.data.alt,
|
|
416
|
-
title: this.data.title,
|
|
417
|
-
fetchpriority: this.priority ? "high" : void 0
|
|
418
|
-
},
|
|
419
|
-
on: {
|
|
420
|
-
load: this.handleLoad
|
|
421
|
-
}
|
|
422
|
-
},
|
|
423
|
-
...vueDemi.isVue3 && {
|
|
446
|
+
this.data.src && vueDemi.h("img", __spreadProps$2(__spreadValues$2(__spreadValues$2({}, vueDemi.isVue2 && {
|
|
447
|
+
attrs: {
|
|
424
448
|
src: this.data.src,
|
|
425
449
|
alt: this.data.alt,
|
|
426
450
|
title: this.data.title,
|
|
427
|
-
fetchpriority: this.priority ? "high" : void 0
|
|
428
|
-
onLoad: this.handleLoad
|
|
451
|
+
fetchpriority: this.priority ? "high" : void 0
|
|
429
452
|
},
|
|
453
|
+
on: {
|
|
454
|
+
load: this.handleLoad
|
|
455
|
+
}
|
|
456
|
+
}), vueDemi.isVue3 && {
|
|
457
|
+
src: this.data.src,
|
|
458
|
+
alt: this.data.alt,
|
|
459
|
+
title: this.data.title,
|
|
460
|
+
fetchpriority: this.priority ? "high" : void 0,
|
|
461
|
+
onLoad: this.handleLoad
|
|
462
|
+
}), {
|
|
430
463
|
ref: "imageRef",
|
|
431
464
|
class: this.pictureClass,
|
|
432
|
-
style: {
|
|
465
|
+
style: __spreadValues$2(__spreadProps$2(__spreadValues$2({
|
|
433
466
|
opacity: showImage ? 1 : 0,
|
|
434
|
-
transition
|
|
435
|
-
|
|
467
|
+
transition
|
|
468
|
+
}, absolutePositioning), {
|
|
436
469
|
objectFit: this.objectFit,
|
|
437
|
-
objectPosition: this.objectPosition
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
})
|
|
470
|
+
objectPosition: this.objectPosition
|
|
471
|
+
}), this.pictureStyle)
|
|
472
|
+
}))
|
|
441
473
|
]),
|
|
442
|
-
vueDemi.h("noscript", {
|
|
443
|
-
|
|
444
|
-
domProps: {
|
|
445
|
-
innerHTML: tag("picture", {}, [
|
|
446
|
-
this.data.webpSrcSet && tag("source", {
|
|
447
|
-
srcset: this.data.webpSrcSet,
|
|
448
|
-
sizes: this.data.sizes,
|
|
449
|
-
type: "image/webp"
|
|
450
|
-
}),
|
|
451
|
-
this.data.srcSet && tag("source", {
|
|
452
|
-
srcset: this.data.srcSet,
|
|
453
|
-
sizes: this.data.sizes
|
|
454
|
-
}),
|
|
455
|
-
tag("img", {
|
|
456
|
-
src: this.data.src,
|
|
457
|
-
alt: this.data.alt,
|
|
458
|
-
title: this.data.title,
|
|
459
|
-
class: this.pictureClass,
|
|
460
|
-
style: toCss({
|
|
461
|
-
...absolutePositioning,
|
|
462
|
-
objectFit: this.objectFit,
|
|
463
|
-
objectPosition: this.objectPosition,
|
|
464
|
-
...this.pictureStyle
|
|
465
|
-
}),
|
|
466
|
-
loading: this.computedLazyLoad ? "lazy" : void 0,
|
|
467
|
-
fetchpriority: this.priority ? "high" : void 0
|
|
468
|
-
})
|
|
469
|
-
])
|
|
470
|
-
}
|
|
471
|
-
},
|
|
472
|
-
...vueDemi.isVue3 && {
|
|
474
|
+
vueDemi.h("noscript", __spreadValues$2(__spreadValues$2({}, vueDemi.isVue2 && {
|
|
475
|
+
domProps: {
|
|
473
476
|
innerHTML: tag("picture", {}, [
|
|
474
477
|
this.data.webpSrcSet && tag("source", {
|
|
475
478
|
srcset: this.data.webpSrcSet,
|
|
@@ -485,13 +488,37 @@ const Image = vueDemi.defineComponent({
|
|
|
485
488
|
alt: this.data.alt,
|
|
486
489
|
title: this.data.title,
|
|
487
490
|
class: this.pictureClass,
|
|
488
|
-
style: toCss({
|
|
491
|
+
style: toCss(__spreadValues$2(__spreadProps$2(__spreadValues$2({}, absolutePositioning), {
|
|
492
|
+
objectFit: this.objectFit,
|
|
493
|
+
objectPosition: this.objectPosition
|
|
494
|
+
}), this.pictureStyle)),
|
|
489
495
|
loading: this.computedLazyLoad ? "lazy" : void 0,
|
|
490
496
|
fetchpriority: this.priority ? "high" : void 0
|
|
491
497
|
})
|
|
492
498
|
])
|
|
493
499
|
}
|
|
494
|
-
})
|
|
500
|
+
}), vueDemi.isVue3 && {
|
|
501
|
+
innerHTML: tag("picture", {}, [
|
|
502
|
+
this.data.webpSrcSet && tag("source", {
|
|
503
|
+
srcset: this.data.webpSrcSet,
|
|
504
|
+
sizes: this.data.sizes,
|
|
505
|
+
type: "image/webp"
|
|
506
|
+
}),
|
|
507
|
+
this.data.srcSet && tag("source", {
|
|
508
|
+
srcset: this.data.srcSet,
|
|
509
|
+
sizes: this.data.sizes
|
|
510
|
+
}),
|
|
511
|
+
tag("img", {
|
|
512
|
+
src: this.data.src,
|
|
513
|
+
alt: this.data.alt,
|
|
514
|
+
title: this.data.title,
|
|
515
|
+
class: this.pictureClass,
|
|
516
|
+
style: toCss(__spreadValues$2(__spreadValues$2({}, this.pictureStyle), absolutePositioning)),
|
|
517
|
+
loading: this.computedLazyLoad ? "lazy" : void 0,
|
|
518
|
+
fetchpriority: this.priority ? "high" : void 0
|
|
519
|
+
})
|
|
520
|
+
])
|
|
521
|
+
}))
|
|
495
522
|
]
|
|
496
523
|
);
|
|
497
524
|
}
|
|
@@ -663,47 +690,106 @@ const DatocmsStructuredTextPlugin = {
|
|
|
663
690
|
}
|
|
664
691
|
};
|
|
665
692
|
|
|
666
|
-
|
|
667
|
-
|
|
693
|
+
var __defProp$1 = Object.defineProperty;
|
|
694
|
+
var __defProps$1 = Object.defineProperties;
|
|
695
|
+
var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
|
|
696
|
+
var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
|
|
697
|
+
var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
|
|
698
|
+
var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
|
|
699
|
+
var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
700
|
+
var __spreadValues$1 = (a, b) => {
|
|
701
|
+
for (var prop in b || (b = {}))
|
|
702
|
+
if (__hasOwnProp$1.call(b, prop))
|
|
703
|
+
__defNormalProp$1(a, prop, b[prop]);
|
|
704
|
+
if (__getOwnPropSymbols$1)
|
|
705
|
+
for (var prop of __getOwnPropSymbols$1(b)) {
|
|
706
|
+
if (__propIsEnum$1.call(b, prop))
|
|
707
|
+
__defNormalProp$1(a, prop, b[prop]);
|
|
708
|
+
}
|
|
709
|
+
return a;
|
|
710
|
+
};
|
|
711
|
+
var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
|
|
712
|
+
var __objRest = (source, exclude) => {
|
|
713
|
+
var target = {};
|
|
714
|
+
for (var prop in source)
|
|
715
|
+
if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
716
|
+
target[prop] = source[prop];
|
|
717
|
+
if (source != null && __getOwnPropSymbols$1)
|
|
718
|
+
for (var prop of __getOwnPropSymbols$1(source)) {
|
|
719
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
|
|
720
|
+
target[prop] = source[prop];
|
|
721
|
+
}
|
|
722
|
+
return target;
|
|
723
|
+
};
|
|
724
|
+
var __async$1 = (__this, __arguments, generator) => {
|
|
725
|
+
return new Promise((resolve, reject) => {
|
|
726
|
+
var fulfilled = (value) => {
|
|
727
|
+
try {
|
|
728
|
+
step(generator.next(value));
|
|
729
|
+
} catch (e) {
|
|
730
|
+
reject(e);
|
|
731
|
+
}
|
|
732
|
+
};
|
|
733
|
+
var rejected = (value) => {
|
|
734
|
+
try {
|
|
735
|
+
step(generator.throw(value));
|
|
736
|
+
} catch (e) {
|
|
737
|
+
reject(e);
|
|
738
|
+
}
|
|
739
|
+
};
|
|
740
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
741
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
742
|
+
});
|
|
743
|
+
};
|
|
744
|
+
const useQuerySubscription = (_a) => {
|
|
745
|
+
var _b = _a, { enabled = true, initialData, query, token } = _b, other = __objRest(_b, ["enabled", "initialData", "query", "token"]);
|
|
668
746
|
const error = vueDemi.ref(null);
|
|
669
|
-
const data = vueDemi.ref(null);
|
|
670
|
-
const status = vueDemi.ref(
|
|
671
|
-
enabled ? "connecting" : "closed"
|
|
672
|
-
);
|
|
747
|
+
const data = vueDemi.ref(vueDemi.unref(initialData) || null);
|
|
748
|
+
const status = vueDemi.ref(vueDemi.unref(enabled) ? "connecting" : "closed");
|
|
673
749
|
const subscribeToQueryOptions = other;
|
|
674
|
-
vueDemi.watchEffect((onCleanup) => {
|
|
675
|
-
if (
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
}
|
|
680
|
-
let unsubscribe;
|
|
681
|
-
async function subscribe() {
|
|
682
|
-
unsubscribe = await datocmsListen.subscribeToQuery({
|
|
683
|
-
...subscribeToQueryOptions,
|
|
750
|
+
vueDemi.watchEffect((onCleanup) => __async$1(void 0, null, function* () {
|
|
751
|
+
if (query && token && vueDemi.unref(enabled)) {
|
|
752
|
+
const unsubscribe = yield datocmsListen.subscribeToQuery(__spreadProps$1(__spreadValues$1({}, subscribeToQueryOptions), {
|
|
753
|
+
query,
|
|
754
|
+
token,
|
|
684
755
|
onStatusChange: (connectionStatus) => {
|
|
685
756
|
status.value = connectionStatus;
|
|
686
757
|
},
|
|
687
|
-
onUpdate: (
|
|
758
|
+
onUpdate: ({ response }) => {
|
|
688
759
|
error.value = null;
|
|
689
|
-
data.value =
|
|
760
|
+
data.value = response.data;
|
|
690
761
|
},
|
|
691
762
|
onChannelError: (errorData) => {
|
|
692
763
|
data.value = null;
|
|
693
764
|
error.value = errorData;
|
|
694
765
|
}
|
|
695
|
-
});
|
|
766
|
+
}));
|
|
767
|
+
onCleanup(unsubscribe);
|
|
696
768
|
}
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
769
|
+
}));
|
|
770
|
+
return { data, status, error };
|
|
771
|
+
};
|
|
772
|
+
|
|
773
|
+
var __async = (__this, __arguments, generator) => {
|
|
774
|
+
return new Promise((resolve, reject) => {
|
|
775
|
+
var fulfilled = (value) => {
|
|
776
|
+
try {
|
|
777
|
+
step(generator.next(value));
|
|
778
|
+
} catch (e) {
|
|
779
|
+
reject(e);
|
|
701
780
|
}
|
|
702
|
-
}
|
|
781
|
+
};
|
|
782
|
+
var rejected = (value) => {
|
|
783
|
+
try {
|
|
784
|
+
step(generator.throw(value));
|
|
785
|
+
} catch (e) {
|
|
786
|
+
reject(e);
|
|
787
|
+
}
|
|
788
|
+
};
|
|
789
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
790
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
703
791
|
});
|
|
704
|
-
|
|
705
|
-
}
|
|
706
|
-
|
|
792
|
+
};
|
|
707
793
|
const highlightPieces = (textWithHighlightMarker) => {
|
|
708
794
|
return textWithHighlightMarker.split(/\[h\](.+?)\[\/h\]/g).map((text, index) => ({
|
|
709
795
|
text,
|
|
@@ -711,10 +797,11 @@ const highlightPieces = (textWithHighlightMarker) => {
|
|
|
711
797
|
}));
|
|
712
798
|
};
|
|
713
799
|
function useSiteSearch(config) {
|
|
800
|
+
var _a, _b, _c;
|
|
714
801
|
const state = vueDemi.reactive({
|
|
715
|
-
query: config.initialState
|
|
716
|
-
page: config.initialState
|
|
717
|
-
locale: config.initialState
|
|
802
|
+
query: ((_a = config.initialState) == null ? void 0 : _a.query) || "",
|
|
803
|
+
page: ((_b = config.initialState) == null ? void 0 : _b.page) || 0,
|
|
804
|
+
locale: (_c = config.initialState) == null ? void 0 : _c.locale
|
|
718
805
|
});
|
|
719
806
|
const error = vueDemi.ref();
|
|
720
807
|
const response = vueDemi.reactive({
|
|
@@ -725,7 +812,7 @@ function useSiteSearch(config) {
|
|
|
725
812
|
const resultsPerPage = config.resultsPerPage || 8;
|
|
726
813
|
vueDemi.watchEffect((onCleanup) => {
|
|
727
814
|
let isCancelled = false;
|
|
728
|
-
const run =
|
|
815
|
+
const run = () => __async(this, null, function* () {
|
|
729
816
|
try {
|
|
730
817
|
if (!state.query) {
|
|
731
818
|
response.data = [];
|
|
@@ -746,7 +833,7 @@ function useSiteSearch(config) {
|
|
|
746
833
|
if (config.fuzzySearch) {
|
|
747
834
|
request.fuzzy = "true";
|
|
748
835
|
}
|
|
749
|
-
const results =
|
|
836
|
+
const results = yield config.client.searchResults.rawList(request);
|
|
750
837
|
if (!isCancelled) {
|
|
751
838
|
response.data = results.data;
|
|
752
839
|
response.meta.total_count = results.meta.total_count;
|
|
@@ -761,7 +848,7 @@ function useSiteSearch(config) {
|
|
|
761
848
|
error.value = "Unknown error!";
|
|
762
849
|
}
|
|
763
850
|
}
|
|
764
|
-
};
|
|
851
|
+
});
|
|
765
852
|
run();
|
|
766
853
|
onCleanup(() => {
|
|
767
854
|
isCancelled = true;
|
|
@@ -793,6 +880,25 @@ function useSiteSearch(config) {
|
|
|
793
880
|
};
|
|
794
881
|
}
|
|
795
882
|
|
|
883
|
+
var __defProp = Object.defineProperty;
|
|
884
|
+
var __defProps = Object.defineProperties;
|
|
885
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
886
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
887
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
888
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
889
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
890
|
+
var __spreadValues = (a, b) => {
|
|
891
|
+
for (var prop in b || (b = {}))
|
|
892
|
+
if (__hasOwnProp.call(b, prop))
|
|
893
|
+
__defNormalProp(a, prop, b[prop]);
|
|
894
|
+
if (__getOwnPropSymbols)
|
|
895
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
896
|
+
if (__propIsEnum.call(b, prop))
|
|
897
|
+
__defNormalProp(a, prop, b[prop]);
|
|
898
|
+
}
|
|
899
|
+
return a;
|
|
900
|
+
};
|
|
901
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
796
902
|
const toHead = (...args) => {
|
|
797
903
|
const tags = [].concat(...args);
|
|
798
904
|
const titleTag = tags && tags.find((t) => t.tag === "title");
|
|
@@ -800,16 +906,20 @@ const toHead = (...args) => {
|
|
|
800
906
|
const linkTags = tags ? tags.filter((t) => t.tag === "link") : [];
|
|
801
907
|
return {
|
|
802
908
|
title: titleTag && titleTag.content,
|
|
803
|
-
meta: metaTags.map((tag) =>
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
909
|
+
meta: metaTags.map((tag) => {
|
|
910
|
+
var _a, _b, _c, _d;
|
|
911
|
+
return __spreadProps(__spreadValues({}, tag.attributes), {
|
|
912
|
+
hid: ((_a = tag.attributes) == null ? void 0 : _a.name) || ((_b = tag.attributes) == null ? void 0 : _b.property),
|
|
913
|
+
vmid: ((_c = tag.attributes) == null ? void 0 : _c.name) || ((_d = tag.attributes) == null ? void 0 : _d.property)
|
|
914
|
+
});
|
|
915
|
+
}),
|
|
916
|
+
link: linkTags.map((tag) => {
|
|
917
|
+
var _a, _b, _c, _d, _e, _f;
|
|
918
|
+
return __spreadProps(__spreadValues({}, tag.attributes), {
|
|
919
|
+
hid: ((_a = tag.attributes) == null ? void 0 : _a.name) || `${(_b = tag.attributes) == null ? void 0 : _b.rel}-${(_c = tag.attributes) == null ? void 0 : _c.sizes}`,
|
|
920
|
+
vmid: ((_d = tag.attributes) == null ? void 0 : _d.name) || `${(_e = tag.attributes) == null ? void 0 : _e.rel}-${(_f = tag.attributes) == null ? void 0 : _f.sizes}`
|
|
921
|
+
});
|
|
922
|
+
})
|
|
813
923
|
};
|
|
814
924
|
};
|
|
815
925
|
|
package/dist/index.d.ts
CHANGED
|
@@ -381,26 +381,26 @@ declare const DatocmsStructuredTextPlugin: {
|
|
|
381
381
|
declare type SubscribeToQueryOptions<QueryResult, QueryVariables> = Omit<Options<QueryResult, QueryVariables>, 'onStatusChange' | 'onUpdate' | 'onChannelError'>;
|
|
382
382
|
declare type EnabledQueryListenerOptions<QueryResult, QueryVariables> = {
|
|
383
383
|
/** Whether the subscription has to be performed or not */
|
|
384
|
-
enabled?: true
|
|
384
|
+
enabled?: true | Ref<boolean>;
|
|
385
385
|
/** The initial data to use while the initial request is being performed */
|
|
386
386
|
initialData?: QueryResult;
|
|
387
387
|
} & SubscribeToQueryOptions<QueryResult, QueryVariables>;
|
|
388
388
|
declare type DisabledQueryListenerOptions<QueryResult, QueryVariables> = {
|
|
389
389
|
/** Whether the subscription has to be performed or not */
|
|
390
|
-
enabled: false
|
|
390
|
+
enabled: false | Ref<false>;
|
|
391
391
|
/** The initial data to use while the initial request is being performed */
|
|
392
392
|
initialData?: QueryResult;
|
|
393
393
|
} & Partial<SubscribeToQueryOptions<QueryResult, QueryVariables>>;
|
|
394
394
|
declare type QueryListenerOptions<QueryResult, QueryVariables> = EnabledQueryListenerOptions<QueryResult, QueryVariables> | DisabledQueryListenerOptions<QueryResult, QueryVariables>;
|
|
395
|
-
declare
|
|
395
|
+
declare const useQuerySubscription: <QueryResult = any, QueryVariables = Record<string, any>>({ enabled, initialData, query, token, ...other }: QueryListenerOptions<QueryResult, QueryVariables>) => {
|
|
396
|
+
data: Ref<vue_demi.UnwrapRef<NonNullable<QueryResult>> | null>;
|
|
397
|
+
status: Ref<ConnectionStatus>;
|
|
396
398
|
error: Ref<{
|
|
397
399
|
code: string;
|
|
398
400
|
message: string;
|
|
399
401
|
fatal: boolean;
|
|
400
402
|
response?: any;
|
|
401
403
|
} | null>;
|
|
402
|
-
status: Ref<ConnectionStatus>;
|
|
403
|
-
data: Ref<QueryResult | null>;
|
|
404
404
|
};
|
|
405
405
|
|
|
406
406
|
declare type SearchResultInstancesHrefSchema = {
|
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, isVue2, isVue3, watchEffect, reactive, computed, toRaw } from 'vue-demi';
|
|
2
|
+
import { ref, onMounted, onBeforeUnmount, defineComponent, h, isVue2, isVue3, watchEffect, unref, reactive, computed, toRaw } from 'vue-demi';
|
|
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,6 +44,22 @@ const useInView = ({ threshold, rootMargin }) => {
|
|
|
44
44
|
return { inView, elRef };
|
|
45
45
|
};
|
|
46
46
|
|
|
47
|
+
var __defProp$4 = Object.defineProperty;
|
|
48
|
+
var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
|
|
49
|
+
var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
|
|
50
|
+
var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
|
|
51
|
+
var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
52
|
+
var __spreadValues$4 = (a, b) => {
|
|
53
|
+
for (var prop in b || (b = {}))
|
|
54
|
+
if (__hasOwnProp$4.call(b, prop))
|
|
55
|
+
__defNormalProp$4(a, prop, b[prop]);
|
|
56
|
+
if (__getOwnPropSymbols$4)
|
|
57
|
+
for (var prop of __getOwnPropSymbols$4(b)) {
|
|
58
|
+
if (__propIsEnum$4.call(b, prop))
|
|
59
|
+
__defNormalProp$4(a, prop, b[prop]);
|
|
60
|
+
}
|
|
61
|
+
return a;
|
|
62
|
+
};
|
|
47
63
|
const Source = defineComponent({
|
|
48
64
|
props: {
|
|
49
65
|
srcset: {
|
|
@@ -57,23 +73,36 @@ const Source = defineComponent({
|
|
|
57
73
|
}
|
|
58
74
|
},
|
|
59
75
|
setup({ srcset, sizes, type }) {
|
|
60
|
-
return () => h("source", {
|
|
61
|
-
|
|
62
|
-
attrs: {
|
|
63
|
-
srcset,
|
|
64
|
-
sizes,
|
|
65
|
-
type
|
|
66
|
-
}
|
|
67
|
-
},
|
|
68
|
-
...isVue3 && {
|
|
76
|
+
return () => h("source", __spreadValues$4(__spreadValues$4({}, isVue2 && {
|
|
77
|
+
attrs: {
|
|
69
78
|
srcset,
|
|
70
79
|
sizes,
|
|
71
80
|
type
|
|
72
81
|
}
|
|
73
|
-
})
|
|
82
|
+
}), isVue3 && {
|
|
83
|
+
srcset,
|
|
84
|
+
sizes,
|
|
85
|
+
type
|
|
86
|
+
}));
|
|
74
87
|
}
|
|
75
88
|
});
|
|
76
89
|
|
|
90
|
+
var __defProp$3 = Object.defineProperty;
|
|
91
|
+
var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
|
|
92
|
+
var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
|
|
93
|
+
var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
|
|
94
|
+
var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
95
|
+
var __spreadValues$3 = (a, b) => {
|
|
96
|
+
for (var prop in b || (b = {}))
|
|
97
|
+
if (__hasOwnProp$3.call(b, prop))
|
|
98
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
99
|
+
if (__getOwnPropSymbols$3)
|
|
100
|
+
for (var prop of __getOwnPropSymbols$3(b)) {
|
|
101
|
+
if (__propIsEnum$3.call(b, prop))
|
|
102
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
103
|
+
}
|
|
104
|
+
return a;
|
|
105
|
+
};
|
|
77
106
|
const universalBtoa = (str) => isSsr() ? Buffer.from(str.toString(), "binary").toString("base64") : window.btoa(str);
|
|
78
107
|
const Sizer = defineComponent({
|
|
79
108
|
props: {
|
|
@@ -96,27 +125,43 @@ const Sizer = defineComponent({
|
|
|
96
125
|
},
|
|
97
126
|
setup({ sizerClass, sizerStyle, width, height, explicitWidth }) {
|
|
98
127
|
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
|
|
99
|
-
return () => h("img", {
|
|
128
|
+
return () => h("img", __spreadValues$3(__spreadValues$3({
|
|
100
129
|
class: sizerClass,
|
|
101
|
-
style: {
|
|
130
|
+
style: __spreadValues$3({
|
|
102
131
|
display: "block",
|
|
103
|
-
width: explicitWidth ? `${width}px` : "100%"
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
attrs: {
|
|
108
|
-
src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
|
|
109
|
-
role: "presentation"
|
|
110
|
-
}
|
|
111
|
-
},
|
|
112
|
-
...isVue3 && {
|
|
132
|
+
width: explicitWidth ? `${width}px` : "100%"
|
|
133
|
+
}, sizerStyle)
|
|
134
|
+
}, isVue2 && {
|
|
135
|
+
attrs: {
|
|
113
136
|
src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
|
|
114
137
|
role: "presentation"
|
|
115
138
|
}
|
|
116
|
-
})
|
|
139
|
+
}), isVue3 && {
|
|
140
|
+
src: `data:image/svg+xml;base64,${universalBtoa(svg)}`,
|
|
141
|
+
role: "presentation"
|
|
142
|
+
}));
|
|
117
143
|
}
|
|
118
144
|
});
|
|
119
145
|
|
|
146
|
+
var __defProp$2 = Object.defineProperty;
|
|
147
|
+
var __defProps$2 = Object.defineProperties;
|
|
148
|
+
var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
|
|
149
|
+
var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
|
|
150
|
+
var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
|
|
151
|
+
var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
|
|
152
|
+
var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
153
|
+
var __spreadValues$2 = (a, b) => {
|
|
154
|
+
for (var prop in b || (b = {}))
|
|
155
|
+
if (__hasOwnProp$2.call(b, prop))
|
|
156
|
+
__defNormalProp$2(a, prop, b[prop]);
|
|
157
|
+
if (__getOwnPropSymbols$2)
|
|
158
|
+
for (var prop of __getOwnPropSymbols$2(b)) {
|
|
159
|
+
if (__propIsEnum$2.call(b, prop))
|
|
160
|
+
__defNormalProp$2(a, prop, b[prop]);
|
|
161
|
+
}
|
|
162
|
+
return a;
|
|
163
|
+
};
|
|
164
|
+
var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
|
|
120
165
|
const escape = (s) => {
|
|
121
166
|
s = "" + s;
|
|
122
167
|
s = s.replace(/&/g, "&");
|
|
@@ -312,6 +357,7 @@ const Image = defineComponent({
|
|
|
312
357
|
};
|
|
313
358
|
},
|
|
314
359
|
render() {
|
|
360
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
|
|
315
361
|
const addImage = imageAddStrategy({
|
|
316
362
|
lazyLoad: this.computedLazyLoad,
|
|
317
363
|
inView: this.inView,
|
|
@@ -322,32 +368,26 @@ const Image = defineComponent({
|
|
|
322
368
|
inView: this.inView,
|
|
323
369
|
loaded: this.loaded
|
|
324
370
|
});
|
|
325
|
-
const webpSource = this.data.webpSrcSet && h(Source, {
|
|
326
|
-
|
|
327
|
-
props: {
|
|
328
|
-
srcset: this.data.webpSrcSet,
|
|
329
|
-
sizes: this.sizes ?? this.data.sizes ?? void 0,
|
|
330
|
-
type: "image/webp"
|
|
331
|
-
}
|
|
332
|
-
},
|
|
333
|
-
...isVue3 && {
|
|
371
|
+
const webpSource = this.data.webpSrcSet && h(Source, __spreadValues$2(__spreadValues$2({}, isVue2 && {
|
|
372
|
+
props: {
|
|
334
373
|
srcset: this.data.webpSrcSet,
|
|
335
|
-
sizes: this.sizes
|
|
374
|
+
sizes: (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : void 0,
|
|
336
375
|
type: "image/webp"
|
|
337
376
|
}
|
|
338
|
-
})
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
srcset: this.data.srcSet ?? buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
|
|
348
|
-
sizes: this.sizes ?? this.data.sizes ?? void 0
|
|
377
|
+
}), isVue3 && {
|
|
378
|
+
srcset: this.data.webpSrcSet,
|
|
379
|
+
sizes: (_d = (_c = this.sizes) != null ? _c : this.data.sizes) != null ? _d : void 0,
|
|
380
|
+
type: "image/webp"
|
|
381
|
+
}));
|
|
382
|
+
const regularSource = this.data.srcSet && h(Source, __spreadValues$2(__spreadValues$2({}, isVue2 && {
|
|
383
|
+
props: {
|
|
384
|
+
srcset: (_e = this.data.srcSet) != null ? _e : buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
|
|
385
|
+
sizes: (_g = (_f = this.sizes) != null ? _f : this.data.sizes) != null ? _g : void 0
|
|
349
386
|
}
|
|
350
|
-
})
|
|
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
|
+
}));
|
|
351
391
|
const transition = typeof this.fadeInDuration === "undefined" || this.fadeInDuration > 0 ? `opacity ${this.fadeInDuration || 500}ms ${this.fadeInDuration || 500}ms` : void 0;
|
|
352
392
|
const placeholder = this.usePlaceholder && (this.data.bgColor || this.data.base64) ? h("div", {
|
|
353
393
|
style: {
|
|
@@ -366,34 +406,29 @@ const Image = defineComponent({
|
|
|
366
406
|
}
|
|
367
407
|
}) : null;
|
|
368
408
|
const { width, aspectRatio } = this.data;
|
|
369
|
-
const height = this.data.height
|
|
370
|
-
const sizer = this.layout !== "fill" ? h(Sizer, {
|
|
371
|
-
|
|
372
|
-
props: {
|
|
373
|
-
sizerClass: this.pictureClass,
|
|
374
|
-
sizerStyle: this.pictureStyle,
|
|
375
|
-
width,
|
|
376
|
-
height,
|
|
377
|
-
explicitWidth: this.explicitWidth
|
|
378
|
-
}
|
|
379
|
-
},
|
|
380
|
-
...isVue3 && {
|
|
409
|
+
const height = (_k = this.data.height) != null ? _k : aspectRatio ? width / aspectRatio : 0;
|
|
410
|
+
const sizer = this.layout !== "fill" ? h(Sizer, __spreadValues$2(__spreadValues$2({}, isVue2 && {
|
|
411
|
+
props: {
|
|
381
412
|
sizerClass: this.pictureClass,
|
|
382
413
|
sizerStyle: this.pictureStyle,
|
|
383
414
|
width,
|
|
384
415
|
height,
|
|
385
416
|
explicitWidth: this.explicitWidth
|
|
386
417
|
}
|
|
387
|
-
})
|
|
418
|
+
}), isVue3 && {
|
|
419
|
+
sizerClass: this.pictureClass,
|
|
420
|
+
sizerStyle: this.pictureStyle,
|
|
421
|
+
width,
|
|
422
|
+
height,
|
|
423
|
+
explicitWidth: this.explicitWidth
|
|
424
|
+
})) : null;
|
|
388
425
|
return h(
|
|
389
426
|
"div",
|
|
390
427
|
{
|
|
391
|
-
style: {
|
|
428
|
+
style: __spreadValues$2(__spreadValues$2({
|
|
392
429
|
display: this.explicitWidth ? "inline-block" : "block",
|
|
393
|
-
overflow: "hidden"
|
|
394
|
-
|
|
395
|
-
...this.rootStyle
|
|
396
|
-
},
|
|
430
|
+
overflow: "hidden"
|
|
431
|
+
}, 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),
|
|
397
432
|
ref: "elRef"
|
|
398
433
|
},
|
|
399
434
|
[
|
|
@@ -402,68 +437,36 @@ const Image = defineComponent({
|
|
|
402
437
|
addImage && h("picture", null, [
|
|
403
438
|
webpSource,
|
|
404
439
|
regularSource,
|
|
405
|
-
this.data.src && h("img", {
|
|
406
|
-
|
|
407
|
-
attrs: {
|
|
408
|
-
src: this.data.src,
|
|
409
|
-
alt: this.data.alt,
|
|
410
|
-
title: this.data.title,
|
|
411
|
-
fetchpriority: this.priority ? "high" : void 0
|
|
412
|
-
},
|
|
413
|
-
on: {
|
|
414
|
-
load: this.handleLoad
|
|
415
|
-
}
|
|
416
|
-
},
|
|
417
|
-
...isVue3 && {
|
|
440
|
+
this.data.src && h("img", __spreadProps$2(__spreadValues$2(__spreadValues$2({}, isVue2 && {
|
|
441
|
+
attrs: {
|
|
418
442
|
src: this.data.src,
|
|
419
443
|
alt: this.data.alt,
|
|
420
444
|
title: this.data.title,
|
|
421
|
-
fetchpriority: this.priority ? "high" : void 0
|
|
422
|
-
onLoad: this.handleLoad
|
|
445
|
+
fetchpriority: this.priority ? "high" : void 0
|
|
423
446
|
},
|
|
447
|
+
on: {
|
|
448
|
+
load: this.handleLoad
|
|
449
|
+
}
|
|
450
|
+
}), isVue3 && {
|
|
451
|
+
src: this.data.src,
|
|
452
|
+
alt: this.data.alt,
|
|
453
|
+
title: this.data.title,
|
|
454
|
+
fetchpriority: this.priority ? "high" : void 0,
|
|
455
|
+
onLoad: this.handleLoad
|
|
456
|
+
}), {
|
|
424
457
|
ref: "imageRef",
|
|
425
458
|
class: this.pictureClass,
|
|
426
|
-
style: {
|
|
459
|
+
style: __spreadValues$2(__spreadProps$2(__spreadValues$2({
|
|
427
460
|
opacity: showImage ? 1 : 0,
|
|
428
|
-
transition
|
|
429
|
-
|
|
461
|
+
transition
|
|
462
|
+
}, absolutePositioning), {
|
|
430
463
|
objectFit: this.objectFit,
|
|
431
|
-
objectPosition: this.objectPosition
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
})
|
|
464
|
+
objectPosition: this.objectPosition
|
|
465
|
+
}), this.pictureStyle)
|
|
466
|
+
}))
|
|
435
467
|
]),
|
|
436
|
-
h("noscript", {
|
|
437
|
-
|
|
438
|
-
domProps: {
|
|
439
|
-
innerHTML: tag("picture", {}, [
|
|
440
|
-
this.data.webpSrcSet && tag("source", {
|
|
441
|
-
srcset: this.data.webpSrcSet,
|
|
442
|
-
sizes: this.data.sizes,
|
|
443
|
-
type: "image/webp"
|
|
444
|
-
}),
|
|
445
|
-
this.data.srcSet && tag("source", {
|
|
446
|
-
srcset: this.data.srcSet,
|
|
447
|
-
sizes: this.data.sizes
|
|
448
|
-
}),
|
|
449
|
-
tag("img", {
|
|
450
|
-
src: this.data.src,
|
|
451
|
-
alt: this.data.alt,
|
|
452
|
-
title: this.data.title,
|
|
453
|
-
class: this.pictureClass,
|
|
454
|
-
style: toCss({
|
|
455
|
-
...absolutePositioning,
|
|
456
|
-
objectFit: this.objectFit,
|
|
457
|
-
objectPosition: this.objectPosition,
|
|
458
|
-
...this.pictureStyle
|
|
459
|
-
}),
|
|
460
|
-
loading: this.computedLazyLoad ? "lazy" : void 0,
|
|
461
|
-
fetchpriority: this.priority ? "high" : void 0
|
|
462
|
-
})
|
|
463
|
-
])
|
|
464
|
-
}
|
|
465
|
-
},
|
|
466
|
-
...isVue3 && {
|
|
468
|
+
h("noscript", __spreadValues$2(__spreadValues$2({}, isVue2 && {
|
|
469
|
+
domProps: {
|
|
467
470
|
innerHTML: tag("picture", {}, [
|
|
468
471
|
this.data.webpSrcSet && tag("source", {
|
|
469
472
|
srcset: this.data.webpSrcSet,
|
|
@@ -479,13 +482,37 @@ const Image = defineComponent({
|
|
|
479
482
|
alt: this.data.alt,
|
|
480
483
|
title: this.data.title,
|
|
481
484
|
class: this.pictureClass,
|
|
482
|
-
style: toCss({
|
|
485
|
+
style: toCss(__spreadValues$2(__spreadProps$2(__spreadValues$2({}, absolutePositioning), {
|
|
486
|
+
objectFit: this.objectFit,
|
|
487
|
+
objectPosition: this.objectPosition
|
|
488
|
+
}), this.pictureStyle)),
|
|
483
489
|
loading: this.computedLazyLoad ? "lazy" : void 0,
|
|
484
490
|
fetchpriority: this.priority ? "high" : void 0
|
|
485
491
|
})
|
|
486
492
|
])
|
|
487
493
|
}
|
|
488
|
-
})
|
|
494
|
+
}), isVue3 && {
|
|
495
|
+
innerHTML: tag("picture", {}, [
|
|
496
|
+
this.data.webpSrcSet && tag("source", {
|
|
497
|
+
srcset: this.data.webpSrcSet,
|
|
498
|
+
sizes: this.data.sizes,
|
|
499
|
+
type: "image/webp"
|
|
500
|
+
}),
|
|
501
|
+
this.data.srcSet && tag("source", {
|
|
502
|
+
srcset: this.data.srcSet,
|
|
503
|
+
sizes: this.data.sizes
|
|
504
|
+
}),
|
|
505
|
+
tag("img", {
|
|
506
|
+
src: this.data.src,
|
|
507
|
+
alt: this.data.alt,
|
|
508
|
+
title: this.data.title,
|
|
509
|
+
class: this.pictureClass,
|
|
510
|
+
style: toCss(__spreadValues$2(__spreadValues$2({}, this.pictureStyle), absolutePositioning)),
|
|
511
|
+
loading: this.computedLazyLoad ? "lazy" : void 0,
|
|
512
|
+
fetchpriority: this.priority ? "high" : void 0
|
|
513
|
+
})
|
|
514
|
+
])
|
|
515
|
+
}))
|
|
489
516
|
]
|
|
490
517
|
);
|
|
491
518
|
}
|
|
@@ -657,47 +684,106 @@ const DatocmsStructuredTextPlugin = {
|
|
|
657
684
|
}
|
|
658
685
|
};
|
|
659
686
|
|
|
660
|
-
|
|
661
|
-
|
|
687
|
+
var __defProp$1 = Object.defineProperty;
|
|
688
|
+
var __defProps$1 = Object.defineProperties;
|
|
689
|
+
var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
|
|
690
|
+
var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
|
|
691
|
+
var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
|
|
692
|
+
var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
|
|
693
|
+
var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
694
|
+
var __spreadValues$1 = (a, b) => {
|
|
695
|
+
for (var prop in b || (b = {}))
|
|
696
|
+
if (__hasOwnProp$1.call(b, prop))
|
|
697
|
+
__defNormalProp$1(a, prop, b[prop]);
|
|
698
|
+
if (__getOwnPropSymbols$1)
|
|
699
|
+
for (var prop of __getOwnPropSymbols$1(b)) {
|
|
700
|
+
if (__propIsEnum$1.call(b, prop))
|
|
701
|
+
__defNormalProp$1(a, prop, b[prop]);
|
|
702
|
+
}
|
|
703
|
+
return a;
|
|
704
|
+
};
|
|
705
|
+
var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
|
|
706
|
+
var __objRest = (source, exclude) => {
|
|
707
|
+
var target = {};
|
|
708
|
+
for (var prop in source)
|
|
709
|
+
if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
710
|
+
target[prop] = source[prop];
|
|
711
|
+
if (source != null && __getOwnPropSymbols$1)
|
|
712
|
+
for (var prop of __getOwnPropSymbols$1(source)) {
|
|
713
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
|
|
714
|
+
target[prop] = source[prop];
|
|
715
|
+
}
|
|
716
|
+
return target;
|
|
717
|
+
};
|
|
718
|
+
var __async$1 = (__this, __arguments, generator) => {
|
|
719
|
+
return new Promise((resolve, reject) => {
|
|
720
|
+
var fulfilled = (value) => {
|
|
721
|
+
try {
|
|
722
|
+
step(generator.next(value));
|
|
723
|
+
} catch (e) {
|
|
724
|
+
reject(e);
|
|
725
|
+
}
|
|
726
|
+
};
|
|
727
|
+
var rejected = (value) => {
|
|
728
|
+
try {
|
|
729
|
+
step(generator.throw(value));
|
|
730
|
+
} catch (e) {
|
|
731
|
+
reject(e);
|
|
732
|
+
}
|
|
733
|
+
};
|
|
734
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
735
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
736
|
+
});
|
|
737
|
+
};
|
|
738
|
+
const useQuerySubscription = (_a) => {
|
|
739
|
+
var _b = _a, { enabled = true, initialData, query, token } = _b, other = __objRest(_b, ["enabled", "initialData", "query", "token"]);
|
|
662
740
|
const error = ref(null);
|
|
663
|
-
const data = ref(null);
|
|
664
|
-
const status = ref(
|
|
665
|
-
enabled ? "connecting" : "closed"
|
|
666
|
-
);
|
|
741
|
+
const data = ref(unref(initialData) || null);
|
|
742
|
+
const status = ref(unref(enabled) ? "connecting" : "closed");
|
|
667
743
|
const subscribeToQueryOptions = other;
|
|
668
|
-
watchEffect((onCleanup) => {
|
|
669
|
-
if (
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
}
|
|
674
|
-
let unsubscribe;
|
|
675
|
-
async function subscribe() {
|
|
676
|
-
unsubscribe = await subscribeToQuery({
|
|
677
|
-
...subscribeToQueryOptions,
|
|
744
|
+
watchEffect((onCleanup) => __async$1(void 0, null, function* () {
|
|
745
|
+
if (query && token && unref(enabled)) {
|
|
746
|
+
const unsubscribe = yield subscribeToQuery(__spreadProps$1(__spreadValues$1({}, subscribeToQueryOptions), {
|
|
747
|
+
query,
|
|
748
|
+
token,
|
|
678
749
|
onStatusChange: (connectionStatus) => {
|
|
679
750
|
status.value = connectionStatus;
|
|
680
751
|
},
|
|
681
|
-
onUpdate: (
|
|
752
|
+
onUpdate: ({ response }) => {
|
|
682
753
|
error.value = null;
|
|
683
|
-
data.value =
|
|
754
|
+
data.value = response.data;
|
|
684
755
|
},
|
|
685
756
|
onChannelError: (errorData) => {
|
|
686
757
|
data.value = null;
|
|
687
758
|
error.value = errorData;
|
|
688
759
|
}
|
|
689
|
-
});
|
|
760
|
+
}));
|
|
761
|
+
onCleanup(unsubscribe);
|
|
690
762
|
}
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
763
|
+
}));
|
|
764
|
+
return { data, status, error };
|
|
765
|
+
};
|
|
766
|
+
|
|
767
|
+
var __async = (__this, __arguments, generator) => {
|
|
768
|
+
return new Promise((resolve, reject) => {
|
|
769
|
+
var fulfilled = (value) => {
|
|
770
|
+
try {
|
|
771
|
+
step(generator.next(value));
|
|
772
|
+
} catch (e) {
|
|
773
|
+
reject(e);
|
|
695
774
|
}
|
|
696
|
-
}
|
|
775
|
+
};
|
|
776
|
+
var rejected = (value) => {
|
|
777
|
+
try {
|
|
778
|
+
step(generator.throw(value));
|
|
779
|
+
} catch (e) {
|
|
780
|
+
reject(e);
|
|
781
|
+
}
|
|
782
|
+
};
|
|
783
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
784
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
697
785
|
});
|
|
698
|
-
|
|
699
|
-
}
|
|
700
|
-
|
|
786
|
+
};
|
|
701
787
|
const highlightPieces = (textWithHighlightMarker) => {
|
|
702
788
|
return textWithHighlightMarker.split(/\[h\](.+?)\[\/h\]/g).map((text, index) => ({
|
|
703
789
|
text,
|
|
@@ -705,10 +791,11 @@ const highlightPieces = (textWithHighlightMarker) => {
|
|
|
705
791
|
}));
|
|
706
792
|
};
|
|
707
793
|
function useSiteSearch(config) {
|
|
794
|
+
var _a, _b, _c;
|
|
708
795
|
const state = reactive({
|
|
709
|
-
query: config.initialState
|
|
710
|
-
page: config.initialState
|
|
711
|
-
locale: config.initialState
|
|
796
|
+
query: ((_a = config.initialState) == null ? void 0 : _a.query) || "",
|
|
797
|
+
page: ((_b = config.initialState) == null ? void 0 : _b.page) || 0,
|
|
798
|
+
locale: (_c = config.initialState) == null ? void 0 : _c.locale
|
|
712
799
|
});
|
|
713
800
|
const error = ref();
|
|
714
801
|
const response = reactive({
|
|
@@ -719,7 +806,7 @@ function useSiteSearch(config) {
|
|
|
719
806
|
const resultsPerPage = config.resultsPerPage || 8;
|
|
720
807
|
watchEffect((onCleanup) => {
|
|
721
808
|
let isCancelled = false;
|
|
722
|
-
const run =
|
|
809
|
+
const run = () => __async(this, null, function* () {
|
|
723
810
|
try {
|
|
724
811
|
if (!state.query) {
|
|
725
812
|
response.data = [];
|
|
@@ -740,7 +827,7 @@ function useSiteSearch(config) {
|
|
|
740
827
|
if (config.fuzzySearch) {
|
|
741
828
|
request.fuzzy = "true";
|
|
742
829
|
}
|
|
743
|
-
const results =
|
|
830
|
+
const results = yield config.client.searchResults.rawList(request);
|
|
744
831
|
if (!isCancelled) {
|
|
745
832
|
response.data = results.data;
|
|
746
833
|
response.meta.total_count = results.meta.total_count;
|
|
@@ -755,7 +842,7 @@ function useSiteSearch(config) {
|
|
|
755
842
|
error.value = "Unknown error!";
|
|
756
843
|
}
|
|
757
844
|
}
|
|
758
|
-
};
|
|
845
|
+
});
|
|
759
846
|
run();
|
|
760
847
|
onCleanup(() => {
|
|
761
848
|
isCancelled = true;
|
|
@@ -787,6 +874,25 @@ function useSiteSearch(config) {
|
|
|
787
874
|
};
|
|
788
875
|
}
|
|
789
876
|
|
|
877
|
+
var __defProp = Object.defineProperty;
|
|
878
|
+
var __defProps = Object.defineProperties;
|
|
879
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
880
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
881
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
882
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
883
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
884
|
+
var __spreadValues = (a, b) => {
|
|
885
|
+
for (var prop in b || (b = {}))
|
|
886
|
+
if (__hasOwnProp.call(b, prop))
|
|
887
|
+
__defNormalProp(a, prop, b[prop]);
|
|
888
|
+
if (__getOwnPropSymbols)
|
|
889
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
890
|
+
if (__propIsEnum.call(b, prop))
|
|
891
|
+
__defNormalProp(a, prop, b[prop]);
|
|
892
|
+
}
|
|
893
|
+
return a;
|
|
894
|
+
};
|
|
895
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
790
896
|
const toHead = (...args) => {
|
|
791
897
|
const tags = [].concat(...args);
|
|
792
898
|
const titleTag = tags && tags.find((t) => t.tag === "title");
|
|
@@ -794,16 +900,20 @@ const toHead = (...args) => {
|
|
|
794
900
|
const linkTags = tags ? tags.filter((t) => t.tag === "link") : [];
|
|
795
901
|
return {
|
|
796
902
|
title: titleTag && titleTag.content,
|
|
797
|
-
meta: metaTags.map((tag) =>
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
903
|
+
meta: metaTags.map((tag) => {
|
|
904
|
+
var _a, _b, _c, _d;
|
|
905
|
+
return __spreadProps(__spreadValues({}, tag.attributes), {
|
|
906
|
+
hid: ((_a = tag.attributes) == null ? void 0 : _a.name) || ((_b = tag.attributes) == null ? void 0 : _b.property),
|
|
907
|
+
vmid: ((_c = tag.attributes) == null ? void 0 : _c.name) || ((_d = tag.attributes) == null ? void 0 : _d.property)
|
|
908
|
+
});
|
|
909
|
+
}),
|
|
910
|
+
link: linkTags.map((tag) => {
|
|
911
|
+
var _a, _b, _c, _d, _e, _f;
|
|
912
|
+
return __spreadProps(__spreadValues({}, tag.attributes), {
|
|
913
|
+
hid: ((_a = tag.attributes) == null ? void 0 : _a.name) || `${(_b = tag.attributes) == null ? void 0 : _b.rel}-${(_c = tag.attributes) == null ? void 0 : _c.sizes}`,
|
|
914
|
+
vmid: ((_d = tag.attributes) == null ? void 0 : _d.name) || `${(_e = tag.attributes) == null ? void 0 : _e.rel}-${(_f = tag.attributes) == null ? void 0 : _f.sizes}`
|
|
915
|
+
});
|
|
916
|
+
})
|
|
807
917
|
};
|
|
808
918
|
};
|
|
809
919
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-datocms",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.2",
|
|
4
4
|
"description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"datocms",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"@vue/composition-api": "^1.7.1",
|
|
49
|
-
"vue": "
|
|
49
|
+
"vue": ">= 2.5 < 2.7 || >=3.0.0"
|
|
50
50
|
},
|
|
51
51
|
"peerDependenciesMeta": {
|
|
52
52
|
"@vue/composition-api": {
|