vue-datocms 6.0.4 → 7.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.cjs.js +79 -47
  2. package/dist/index.d.ts +63 -6
  3. package/dist/index.esm.mjs +79 -47
  4. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -286,6 +286,9 @@ const Image$1 = vue.defineComponent({
286
286
  pictureClass: {
287
287
  type: String
288
288
  },
289
+ imgClass: {
290
+ type: String
291
+ },
289
292
  placeholderClass: {
290
293
  type: String
291
294
  },
@@ -307,6 +310,10 @@ const Image$1 = vue.defineComponent({
307
310
  type: Object,
308
311
  default: () => ({})
309
312
  },
313
+ imgStyle: {
314
+ type: Object,
315
+ default: () => ({})
316
+ },
310
317
  placeholderStyle: {
311
318
  type: Object,
312
319
  default: () => ({})
@@ -419,8 +426,8 @@ const Image$1 = vue.defineComponent({
419
426
  const { width, aspectRatio } = this.data;
420
427
  const height = (_a = this.data.height) != null ? _a : aspectRatio ? width / aspectRatio : 0;
421
428
  const sizer = this.layout !== "fill" ? vue.h(Sizer, {
422
- sizerClass: this.pictureClass,
423
- sizerStyle: this.pictureStyle,
429
+ sizerClass: this.imgClass,
430
+ sizerStyle: this.imgStyle,
424
431
  width,
425
432
  height
426
433
  }) : null;
@@ -436,7 +443,7 @@ const Image$1 = vue.defineComponent({
436
443
  [
437
444
  sizer,
438
445
  placeholder,
439
- addImage && vue.h("picture", null, [
446
+ addImage && vue.h("picture", { class: this.pictureClass, style: this.pictureStyle }, [
440
447
  webpSource,
441
448
  regularSource,
442
449
  this.data.src && vue.h("img", {
@@ -446,44 +453,48 @@ const Image$1 = vue.defineComponent({
446
453
  fetchpriority: this.priority ? "high" : void 0,
447
454
  onLoad: this.handleLoad,
448
455
  ref: "imageRef",
449
- class: this.pictureClass,
456
+ class: this.imgClass,
450
457
  style: __spreadValues$5(__spreadProps$3(__spreadValues$5({
451
458
  opacity: showImage ? 1 : 0,
452
459
  transition
453
460
  }, absolutePositioning), {
454
461
  objectFit: this.objectFit,
455
462
  objectPosition: this.objectPosition
456
- }), this.pictureStyle)
463
+ }), this.imgStyle)
457
464
  })
458
465
  ]),
459
466
  vue.h("noscript", {
460
- innerHTML: tag("picture", {}, [
461
- this.data.webpSrcSet && tag("source", {
462
- srcset: this.data.webpSrcSet,
463
- sizes: (_c = (_b = this.sizes) != null ? _b : this.data.sizes) != null ? _c : void 0,
464
- type: "image/webp"
465
- }),
466
- tag("source", {
467
- srcset: (_d = this.data.srcSet) != null ? _d : buildSrcSet(
468
- this.data.src,
469
- this.data.width,
470
- this.srcSetCandidates
471
- ),
472
- sizes: (_f = (_e = this.sizes) != null ? _e : this.data.sizes) != null ? _f : void 0
473
- }),
474
- tag("img", {
475
- src: this.data.src,
476
- alt: this.data.alt,
477
- title: this.data.title,
478
- class: this.pictureClass,
479
- style: toCss(__spreadValues$5(__spreadProps$3(__spreadValues$5({}, absolutePositioning), {
480
- objectFit: this.objectFit,
481
- objectPosition: this.objectPosition
482
- }), this.pictureStyle)),
483
- loading: this.priority ? void 0 : "lazy",
484
- fetchpriority: this.priority ? "high" : void 0
485
- })
486
- ])
467
+ innerHTML: tag(
468
+ "picture",
469
+ { class: this.pictureClass, style: toCss(this.pictureStyle) },
470
+ [
471
+ this.data.webpSrcSet && tag("source", {
472
+ srcset: this.data.webpSrcSet,
473
+ sizes: (_c = (_b = this.sizes) != null ? _b : this.data.sizes) != null ? _c : void 0,
474
+ type: "image/webp"
475
+ }),
476
+ tag("source", {
477
+ srcset: (_d = this.data.srcSet) != null ? _d : buildSrcSet(
478
+ this.data.src,
479
+ this.data.width,
480
+ this.srcSetCandidates
481
+ ),
482
+ sizes: (_f = (_e = this.sizes) != null ? _e : this.data.sizes) != null ? _f : void 0
483
+ }),
484
+ tag("img", {
485
+ src: this.data.src,
486
+ alt: this.data.alt,
487
+ title: this.data.title,
488
+ class: this.imgClass,
489
+ style: toCss(__spreadValues$5(__spreadProps$3(__spreadValues$5({}, absolutePositioning), {
490
+ objectFit: this.objectFit,
491
+ objectPosition: this.objectPosition
492
+ }), this.imgStyle)),
493
+ loading: this.priority ? void 0 : "lazy",
494
+ fetchpriority: this.priority ? "high" : void 0
495
+ })
496
+ ]
497
+ )
487
498
  })
488
499
  ]
489
500
  );
@@ -536,6 +547,20 @@ const NakedImage = vue.defineComponent({
536
547
  return typeof value === "number";
537
548
  }),
538
549
  default: () => [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
550
+ },
551
+ pictureClass: {
552
+ type: String
553
+ },
554
+ pictureStyle: {
555
+ type: Object,
556
+ default: () => ({})
557
+ },
558
+ imgClass: {
559
+ type: String
560
+ },
561
+ imgStyle: {
562
+ type: Object,
563
+ default: () => ({})
539
564
  }
540
565
  },
541
566
  setup(_props, { emit, expose }) {
@@ -588,21 +613,28 @@ const NakedImage = vue.defineComponent({
588
613
  backgroundColor: this.data.bgColor,
589
614
  color: "transparent"
590
615
  } : void 0;
591
- return vue.h("picture", null, [
592
- webpSource,
593
- regularSource,
594
- this.data.src && vue.h("img", {
595
- ref: "imageRef",
596
- src: this.data.src,
597
- alt: this.data.alt,
598
- onLoad: this.handleLoad,
599
- title: this.data.title,
600
- fetchpriority: this.priority ? "high" : void 0,
601
- loading: this.priority ? void 0 : "lazy",
602
- style: __spreadValues$4(__spreadValues$4(__spreadValues$4({}, placeholderStyle), sizingStyle), this.$attrs.style || {}),
603
- class: this.$attrs.class
604
- })
605
- ]);
616
+ return vue.h(
617
+ "picture",
618
+ {
619
+ style: this.pictureStyle,
620
+ class: this.pictureClass
621
+ },
622
+ [
623
+ webpSource,
624
+ regularSource,
625
+ this.data.src && vue.h("img", {
626
+ ref: "imageRef",
627
+ src: this.data.src,
628
+ alt: this.data.alt,
629
+ onLoad: this.handleLoad,
630
+ title: this.data.title,
631
+ fetchpriority: this.priority ? "high" : void 0,
632
+ loading: this.priority ? void 0 : "lazy",
633
+ style: __spreadValues$4(__spreadValues$4(__spreadValues$4({}, placeholderStyle), sizingStyle), this.imgStyle || {}),
634
+ class: this.imgClass
635
+ })
636
+ ]
637
+ );
606
638
  }
607
639
  });
608
640
  const DatocmsNakedImagePlugin = {
package/dist/index.d.ts CHANGED
@@ -39,10 +39,14 @@ declare const Image: vue.DefineComponent<{
39
39
  type: PropType<ResponsiveImageType>;
40
40
  required: true;
41
41
  };
42
- /** Additional CSS class for the image inside the `<picture />` tag */
42
+ /** Additional CSS class for the `<picture />` tag */
43
43
  pictureClass: {
44
44
  type: StringConstructor;
45
45
  };
46
+ /** Additional CSS class for the image inside the `<picture />` tag */
47
+ imgClass: {
48
+ type: StringConstructor;
49
+ };
46
50
  /** Additional CSS class for the placeholder image */
47
51
  placeholderClass: {
48
52
  type: StringConstructor;
@@ -65,11 +69,16 @@ declare const Image: vue.DefineComponent<{
65
69
  type: StringConstructor;
66
70
  default: string;
67
71
  };
68
- /** Additional CSS rules to add to the image inside the `<picture />` tag */
72
+ /** Additional CSS rules to add to the `<picture />` tag */
69
73
  pictureStyle: {
70
74
  type: ObjectConstructor;
71
75
  default: () => {};
72
76
  };
77
+ /** Additional CSS rules to add to the image inside the `<picture />` tag */
78
+ imgStyle: {
79
+ type: ObjectConstructor;
80
+ default: () => {};
81
+ };
73
82
  /** Additional CSS rules to add to the placeholder image */
74
83
  placeholderStyle: {
75
84
  type: ObjectConstructor;
@@ -144,10 +153,14 @@ declare const Image: vue.DefineComponent<{
144
153
  type: PropType<ResponsiveImageType>;
145
154
  required: true;
146
155
  };
147
- /** Additional CSS class for the image inside the `<picture />` tag */
156
+ /** Additional CSS class for the `<picture />` tag */
148
157
  pictureClass: {
149
158
  type: StringConstructor;
150
159
  };
160
+ /** Additional CSS class for the image inside the `<picture />` tag */
161
+ imgClass: {
162
+ type: StringConstructor;
163
+ };
151
164
  /** Additional CSS class for the placeholder image */
152
165
  placeholderClass: {
153
166
  type: StringConstructor;
@@ -170,11 +183,16 @@ declare const Image: vue.DefineComponent<{
170
183
  type: StringConstructor;
171
184
  default: string;
172
185
  };
173
- /** Additional CSS rules to add to the image inside the `<picture />` tag */
186
+ /** Additional CSS rules to add to the `<picture />` tag */
174
187
  pictureStyle: {
175
188
  type: ObjectConstructor;
176
189
  default: () => {};
177
190
  };
191
+ /** Additional CSS rules to add to the image inside the `<picture />` tag */
192
+ imgStyle: {
193
+ type: ObjectConstructor;
194
+ default: () => {};
195
+ };
178
196
  /** Additional CSS rules to add to the placeholder image */
179
197
  placeholderStyle: {
180
198
  type: ObjectConstructor;
@@ -244,6 +262,7 @@ declare const Image: vue.DefineComponent<{
244
262
  intersectionTreshold: number;
245
263
  intersectionMargin: string;
246
264
  pictureStyle: Record<string, any>;
265
+ imgStyle: Record<string, any>;
247
266
  placeholderStyle: Record<string, any>;
248
267
  layout: string;
249
268
  usePlaceholder: boolean;
@@ -290,9 +309,27 @@ declare const NakedImage: vue.DefineComponent<{
290
309
  **/
291
310
  srcSetCandidates: {
292
311
  type: ArrayConstructor;
293
- validator: (values: any[]) => values is number[];
312
+ validator: (values: unknown[]) => values is number[];
294
313
  default: () => number[];
295
314
  };
315
+ /** Additional CSS class for the root `<picture />` tag */
316
+ pictureClass: {
317
+ type: StringConstructor;
318
+ };
319
+ /** Additional CSS rules to add to the root `<picture />` tag */
320
+ pictureStyle: {
321
+ type: ObjectConstructor;
322
+ default: () => {};
323
+ };
324
+ /** Additional CSS class for the `<img />` tag */
325
+ imgClass: {
326
+ type: StringConstructor;
327
+ };
328
+ /** Additional CSS rules to add to the `<img />` tag */
329
+ imgStyle: {
330
+ type: ObjectConstructor;
331
+ default: () => {};
332
+ };
296
333
  }, {
297
334
  loaded: vue.Ref<boolean>;
298
335
  handleLoad: () => void;
@@ -334,11 +371,31 @@ declare const NakedImage: vue.DefineComponent<{
334
371
  **/
335
372
  srcSetCandidates: {
336
373
  type: ArrayConstructor;
337
- validator: (values: any[]) => values is number[];
374
+ validator: (values: unknown[]) => values is number[];
338
375
  default: () => number[];
339
376
  };
377
+ /** Additional CSS class for the root `<picture />` tag */
378
+ pictureClass: {
379
+ type: StringConstructor;
380
+ };
381
+ /** Additional CSS rules to add to the root `<picture />` tag */
382
+ pictureStyle: {
383
+ type: ObjectConstructor;
384
+ default: () => {};
385
+ };
386
+ /** Additional CSS class for the `<img />` tag */
387
+ imgClass: {
388
+ type: StringConstructor;
389
+ };
390
+ /** Additional CSS rules to add to the `<img />` tag */
391
+ imgStyle: {
392
+ type: ObjectConstructor;
393
+ default: () => {};
394
+ };
340
395
  }>>, {
341
396
  priority: boolean;
397
+ pictureStyle: Record<string, any>;
398
+ imgStyle: Record<string, any>;
342
399
  usePlaceholder: boolean;
343
400
  srcSetCandidates: unknown[];
344
401
  }, {}>;
package/dist/index.esm.mjs CHANGED
@@ -262,6 +262,9 @@ const Image$1 = defineComponent({
262
262
  pictureClass: {
263
263
  type: String
264
264
  },
265
+ imgClass: {
266
+ type: String
267
+ },
265
268
  placeholderClass: {
266
269
  type: String
267
270
  },
@@ -283,6 +286,10 @@ const Image$1 = defineComponent({
283
286
  type: Object,
284
287
  default: () => ({})
285
288
  },
289
+ imgStyle: {
290
+ type: Object,
291
+ default: () => ({})
292
+ },
286
293
  placeholderStyle: {
287
294
  type: Object,
288
295
  default: () => ({})
@@ -395,8 +402,8 @@ const Image$1 = defineComponent({
395
402
  const { width, aspectRatio } = this.data;
396
403
  const height = (_a = this.data.height) != null ? _a : aspectRatio ? width / aspectRatio : 0;
397
404
  const sizer = this.layout !== "fill" ? h(Sizer, {
398
- sizerClass: this.pictureClass,
399
- sizerStyle: this.pictureStyle,
405
+ sizerClass: this.imgClass,
406
+ sizerStyle: this.imgStyle,
400
407
  width,
401
408
  height
402
409
  }) : null;
@@ -412,7 +419,7 @@ const Image$1 = defineComponent({
412
419
  [
413
420
  sizer,
414
421
  placeholder,
415
- addImage && h("picture", null, [
422
+ addImage && h("picture", { class: this.pictureClass, style: this.pictureStyle }, [
416
423
  webpSource,
417
424
  regularSource,
418
425
  this.data.src && h("img", {
@@ -422,44 +429,48 @@ const Image$1 = defineComponent({
422
429
  fetchpriority: this.priority ? "high" : void 0,
423
430
  onLoad: this.handleLoad,
424
431
  ref: "imageRef",
425
- class: this.pictureClass,
432
+ class: this.imgClass,
426
433
  style: __spreadValues$5(__spreadProps$3(__spreadValues$5({
427
434
  opacity: showImage ? 1 : 0,
428
435
  transition
429
436
  }, absolutePositioning), {
430
437
  objectFit: this.objectFit,
431
438
  objectPosition: this.objectPosition
432
- }), this.pictureStyle)
439
+ }), this.imgStyle)
433
440
  })
434
441
  ]),
435
442
  h("noscript", {
436
- innerHTML: tag("picture", {}, [
437
- this.data.webpSrcSet && tag("source", {
438
- srcset: this.data.webpSrcSet,
439
- sizes: (_c = (_b = this.sizes) != null ? _b : this.data.sizes) != null ? _c : void 0,
440
- type: "image/webp"
441
- }),
442
- tag("source", {
443
- srcset: (_d = this.data.srcSet) != null ? _d : buildSrcSet(
444
- this.data.src,
445
- this.data.width,
446
- this.srcSetCandidates
447
- ),
448
- sizes: (_f = (_e = this.sizes) != null ? _e : this.data.sizes) != null ? _f : void 0
449
- }),
450
- tag("img", {
451
- src: this.data.src,
452
- alt: this.data.alt,
453
- title: this.data.title,
454
- class: this.pictureClass,
455
- style: toCss(__spreadValues$5(__spreadProps$3(__spreadValues$5({}, absolutePositioning), {
456
- objectFit: this.objectFit,
457
- objectPosition: this.objectPosition
458
- }), this.pictureStyle)),
459
- loading: this.priority ? void 0 : "lazy",
460
- fetchpriority: this.priority ? "high" : void 0
461
- })
462
- ])
443
+ innerHTML: tag(
444
+ "picture",
445
+ { class: this.pictureClass, style: toCss(this.pictureStyle) },
446
+ [
447
+ this.data.webpSrcSet && tag("source", {
448
+ srcset: this.data.webpSrcSet,
449
+ sizes: (_c = (_b = this.sizes) != null ? _b : this.data.sizes) != null ? _c : void 0,
450
+ type: "image/webp"
451
+ }),
452
+ tag("source", {
453
+ srcset: (_d = this.data.srcSet) != null ? _d : buildSrcSet(
454
+ this.data.src,
455
+ this.data.width,
456
+ this.srcSetCandidates
457
+ ),
458
+ sizes: (_f = (_e = this.sizes) != null ? _e : this.data.sizes) != null ? _f : void 0
459
+ }),
460
+ tag("img", {
461
+ src: this.data.src,
462
+ alt: this.data.alt,
463
+ title: this.data.title,
464
+ class: this.imgClass,
465
+ style: toCss(__spreadValues$5(__spreadProps$3(__spreadValues$5({}, absolutePositioning), {
466
+ objectFit: this.objectFit,
467
+ objectPosition: this.objectPosition
468
+ }), this.imgStyle)),
469
+ loading: this.priority ? void 0 : "lazy",
470
+ fetchpriority: this.priority ? "high" : void 0
471
+ })
472
+ ]
473
+ )
463
474
  })
464
475
  ]
465
476
  );
@@ -512,6 +523,20 @@ const NakedImage = defineComponent({
512
523
  return typeof value === "number";
513
524
  }),
514
525
  default: () => [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
526
+ },
527
+ pictureClass: {
528
+ type: String
529
+ },
530
+ pictureStyle: {
531
+ type: Object,
532
+ default: () => ({})
533
+ },
534
+ imgClass: {
535
+ type: String
536
+ },
537
+ imgStyle: {
538
+ type: Object,
539
+ default: () => ({})
515
540
  }
516
541
  },
517
542
  setup(_props, { emit, expose }) {
@@ -564,21 +589,28 @@ const NakedImage = defineComponent({
564
589
  backgroundColor: this.data.bgColor,
565
590
  color: "transparent"
566
591
  } : void 0;
567
- return h("picture", null, [
568
- webpSource,
569
- regularSource,
570
- this.data.src && h("img", {
571
- ref: "imageRef",
572
- src: this.data.src,
573
- alt: this.data.alt,
574
- onLoad: this.handleLoad,
575
- title: this.data.title,
576
- fetchpriority: this.priority ? "high" : void 0,
577
- loading: this.priority ? void 0 : "lazy",
578
- style: __spreadValues$4(__spreadValues$4(__spreadValues$4({}, placeholderStyle), sizingStyle), this.$attrs.style || {}),
579
- class: this.$attrs.class
580
- })
581
- ]);
592
+ return h(
593
+ "picture",
594
+ {
595
+ style: this.pictureStyle,
596
+ class: this.pictureClass
597
+ },
598
+ [
599
+ webpSource,
600
+ regularSource,
601
+ this.data.src && h("img", {
602
+ ref: "imageRef",
603
+ src: this.data.src,
604
+ alt: this.data.alt,
605
+ onLoad: this.handleLoad,
606
+ title: this.data.title,
607
+ fetchpriority: this.priority ? "high" : void 0,
608
+ loading: this.priority ? void 0 : "lazy",
609
+ style: __spreadValues$4(__spreadValues$4(__spreadValues$4({}, placeholderStyle), sizingStyle), this.imgStyle || {}),
610
+ class: this.imgClass
611
+ })
612
+ ]
613
+ );
582
614
  }
583
615
  });
584
616
  const DatocmsNakedImagePlugin = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-datocms",
3
- "version": "6.0.4",
3
+ "version": "7.0.1",
4
4
  "description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
5
5
  "keywords": [
6
6
  "datocms",