@prismicio/vue 2.0.11 → 2.1.0-alpha.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/LICENSE +202 -0
- package/README.md +81 -149
- package/components/common.js +275 -41
- package/components/index.js +269 -39
- package/components/umd.js +278 -43
- package/dist/prismic-vue.common.js +278 -48
- package/dist/prismic-vue.esm.js +270 -42
- package/dist/prismic-vue.js +282 -52
- package/dist/prismic-vue.min.js +1 -1
- package/package.json +51 -47
- package/src/components/Link.js +87 -51
- package/src/components/RichText.js +40 -41
- package/src/components/SliceZone.js +144 -0
- package/src/components/Text.js +37 -0
- package/src/components/index.js +26 -22
- package/src/components-bundler.js +10 -5
- package/src/index.js +46 -39
|
@@ -1,34 +1,25 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
var prismicJS = require('@prismicio/client');
|
|
5
4
|
var PrismicDOM = require('prismic-dom');
|
|
6
|
-
var PrismicDOM__default = _interopDefault(PrismicDOM);
|
|
7
|
-
var prismicJS = _interopDefault(require('@prismicio/client'));
|
|
8
5
|
|
|
9
|
-
function
|
|
10
|
-
if (key in obj) {
|
|
11
|
-
Object.defineProperty(obj, key, {
|
|
12
|
-
value: value,
|
|
13
|
-
enumerable: true,
|
|
14
|
-
configurable: true,
|
|
15
|
-
writable: true
|
|
16
|
-
});
|
|
17
|
-
} else {
|
|
18
|
-
obj[key] = value;
|
|
19
|
-
}
|
|
6
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
7
|
|
|
21
|
-
|
|
22
|
-
|
|
8
|
+
var prismicJS__default = /*#__PURE__*/_interopDefaultLegacy(prismicJS);
|
|
9
|
+
var PrismicDOM__default = /*#__PURE__*/_interopDefaultLegacy(PrismicDOM);
|
|
23
10
|
|
|
24
11
|
function ownKeys(object, enumerableOnly) {
|
|
25
12
|
var keys = Object.keys(object);
|
|
26
13
|
|
|
27
14
|
if (Object.getOwnPropertySymbols) {
|
|
28
15
|
var symbols = Object.getOwnPropertySymbols(object);
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
16
|
+
|
|
17
|
+
if (enumerableOnly) {
|
|
18
|
+
symbols = symbols.filter(function (sym) {
|
|
19
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
|
|
32
23
|
keys.push.apply(keys, symbols);
|
|
33
24
|
}
|
|
34
25
|
|
|
@@ -55,6 +46,21 @@ function _objectSpread2(target) {
|
|
|
55
46
|
return target;
|
|
56
47
|
}
|
|
57
48
|
|
|
49
|
+
function _defineProperty(obj, key, value) {
|
|
50
|
+
if (key in obj) {
|
|
51
|
+
Object.defineProperty(obj, key, {
|
|
52
|
+
value: value,
|
|
53
|
+
enumerable: true,
|
|
54
|
+
configurable: true,
|
|
55
|
+
writable: true
|
|
56
|
+
});
|
|
57
|
+
} else {
|
|
58
|
+
obj[key] = value;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
return obj;
|
|
62
|
+
}
|
|
63
|
+
|
|
58
64
|
function _slicedToArray(arr, i) {
|
|
59
65
|
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
60
66
|
}
|
|
@@ -64,14 +70,17 @@ function _arrayWithHoles(arr) {
|
|
|
64
70
|
}
|
|
65
71
|
|
|
66
72
|
function _iterableToArrayLimit(arr, i) {
|
|
67
|
-
|
|
73
|
+
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
74
|
+
|
|
75
|
+
if (_i == null) return;
|
|
68
76
|
var _arr = [];
|
|
69
77
|
var _n = true;
|
|
70
78
|
var _d = false;
|
|
71
|
-
|
|
79
|
+
|
|
80
|
+
var _s, _e;
|
|
72
81
|
|
|
73
82
|
try {
|
|
74
|
-
for (
|
|
83
|
+
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
|
|
75
84
|
_arr.push(_s.value);
|
|
76
85
|
|
|
77
86
|
if (i && _arr.length === i) break;
|
|
@@ -183,11 +192,24 @@ var Image = {
|
|
|
183
192
|
}
|
|
184
193
|
};
|
|
185
194
|
|
|
195
|
+
var isInternalURL = function isInternalURL(url) {
|
|
196
|
+
/**
|
|
197
|
+
* @see Regex101 expression: {@link https://regex101.com/r/1y7iod/1}
|
|
198
|
+
*/
|
|
199
|
+
var isInternal = /^\/(?!\/)/.test(url);
|
|
200
|
+
/**
|
|
201
|
+
* @see Regex101 expression: {@link https://regex101.com/r/RnUseS/1}
|
|
202
|
+
*/
|
|
203
|
+
|
|
204
|
+
var isSpecialLink = !isInternal && !/^https?:\/\//i.test(url);
|
|
205
|
+
return isInternal && !isSpecialLink;
|
|
206
|
+
};
|
|
207
|
+
|
|
186
208
|
var Link = (function (_ref) {
|
|
187
209
|
var _ref$component = _ref.component,
|
|
188
|
-
component = _ref$component === void 0 ?
|
|
210
|
+
component = _ref$component === void 0 ? "a" : _ref$component;
|
|
189
211
|
return {
|
|
190
|
-
name:
|
|
212
|
+
name: "PrismicLink",
|
|
191
213
|
functional: true,
|
|
192
214
|
props: {
|
|
193
215
|
field: {
|
|
@@ -197,6 +219,21 @@ var Link = (function (_ref) {
|
|
|
197
219
|
linkResolver: {
|
|
198
220
|
type: Function,
|
|
199
221
|
required: false
|
|
222
|
+
},
|
|
223
|
+
target: {
|
|
224
|
+
type: String,
|
|
225
|
+
"default": undefined,
|
|
226
|
+
required: false
|
|
227
|
+
},
|
|
228
|
+
rel: {
|
|
229
|
+
type: String,
|
|
230
|
+
"default": undefined,
|
|
231
|
+
required: false
|
|
232
|
+
},
|
|
233
|
+
blankTargetRelAttribute: {
|
|
234
|
+
type: String,
|
|
235
|
+
"default": "noopener",
|
|
236
|
+
required: false
|
|
200
237
|
}
|
|
201
238
|
},
|
|
202
239
|
render: function render(h, _ref2) {
|
|
@@ -211,11 +248,11 @@ var Link = (function (_ref) {
|
|
|
211
248
|
return null;
|
|
212
249
|
}
|
|
213
250
|
|
|
214
|
-
var url = parent.$prismic ? parent.$prismic.asLink(field, linkResolver) : PrismicDOM__default.Link.url(field, linkResolver || function () {
|
|
251
|
+
var url = parent.$prismic ? parent.$prismic.asLink(field, linkResolver) : PrismicDOM__default["default"].Link.url(field, linkResolver || function () {
|
|
215
252
|
return null;
|
|
216
253
|
});
|
|
217
254
|
|
|
218
|
-
if (url
|
|
255
|
+
if (isInternalURL(url) && !props.target) {
|
|
219
256
|
data.props = data.props || {};
|
|
220
257
|
data.props.to = url;
|
|
221
258
|
return h(component, data, children);
|
|
@@ -223,23 +260,33 @@ var Link = (function (_ref) {
|
|
|
223
260
|
|
|
224
261
|
data.attrs = _objectSpread2(_objectSpread2({}, data.attrs), {}, {
|
|
225
262
|
href: url
|
|
226
|
-
}, field.target && {
|
|
227
|
-
target: field.target,
|
|
228
|
-
rel: 'noopener'
|
|
229
263
|
});
|
|
230
|
-
|
|
264
|
+
|
|
265
|
+
if (typeof props.target !== "undefined" || field.target) {
|
|
266
|
+
data.attrs.target = typeof props.target !== "undefined" ? props.target : field.target;
|
|
267
|
+
|
|
268
|
+
if (data.attrs.target === "_blank") {
|
|
269
|
+
data.attrs.rel = typeof props.rel !== "undefined" ? props.rel : props.blankTargetRelAttribute;
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
return h("a", data, children);
|
|
231
274
|
}
|
|
232
275
|
};
|
|
233
276
|
});
|
|
234
277
|
|
|
235
278
|
var RichText = {
|
|
236
|
-
name:
|
|
279
|
+
name: "PrismicRichText",
|
|
237
280
|
functional: true,
|
|
238
281
|
props: {
|
|
239
282
|
field: {
|
|
240
283
|
type: Array,
|
|
241
284
|
required: true
|
|
242
285
|
},
|
|
286
|
+
linkResolver: {
|
|
287
|
+
type: Function,
|
|
288
|
+
required: false
|
|
289
|
+
},
|
|
243
290
|
htmlSerializer: {
|
|
244
291
|
type: Function,
|
|
245
292
|
required: false
|
|
@@ -247,15 +294,15 @@ var RichText = {
|
|
|
247
294
|
wrapper: {
|
|
248
295
|
type: String,
|
|
249
296
|
required: false,
|
|
250
|
-
"default":
|
|
297
|
+
"default": "div"
|
|
251
298
|
}
|
|
252
299
|
},
|
|
253
300
|
render: function render(h, _ref) {
|
|
254
301
|
var props = _ref.props,
|
|
255
302
|
data = _ref.data,
|
|
256
|
-
children = _ref.children,
|
|
257
303
|
parent = _ref.parent;
|
|
258
304
|
var field = props.field,
|
|
305
|
+
linkResolver = props.linkResolver,
|
|
259
306
|
htmlSerializer = props.htmlSerializer,
|
|
260
307
|
wrapper = props.wrapper;
|
|
261
308
|
|
|
@@ -263,7 +310,7 @@ var RichText = {
|
|
|
263
310
|
return null;
|
|
264
311
|
}
|
|
265
312
|
|
|
266
|
-
var innerHTML = PrismicDOM.RichText.asHtml(field, parent.$prismic.linkResolver, htmlSerializer || parent.$prismic.htmlSerializer);
|
|
313
|
+
var innerHTML = PrismicDOM.RichText.asHtml(field, linkResolver || parent.$prismic.linkResolver, htmlSerializer || parent.$prismic.htmlSerializer);
|
|
267
314
|
return h(wrapper, _objectSpread2(_objectSpread2({}, data), {}, {
|
|
268
315
|
domProps: {
|
|
269
316
|
innerHTML: innerHTML
|
|
@@ -272,17 +319,199 @@ var RichText = {
|
|
|
272
319
|
}
|
|
273
320
|
};
|
|
274
321
|
|
|
322
|
+
var Text = {
|
|
323
|
+
name: "PrismicText",
|
|
324
|
+
functional: true,
|
|
325
|
+
props: {
|
|
326
|
+
field: {
|
|
327
|
+
type: Array,
|
|
328
|
+
required: true
|
|
329
|
+
},
|
|
330
|
+
separator: {
|
|
331
|
+
type: String,
|
|
332
|
+
"default": undefined,
|
|
333
|
+
required: false
|
|
334
|
+
},
|
|
335
|
+
wrapper: {
|
|
336
|
+
type: String,
|
|
337
|
+
required: false,
|
|
338
|
+
"default": "div"
|
|
339
|
+
}
|
|
340
|
+
},
|
|
341
|
+
render: function render(h, _ref) {
|
|
342
|
+
var props = _ref.props,
|
|
343
|
+
data = _ref.data;
|
|
344
|
+
_ref.children;
|
|
345
|
+
_ref.parent;
|
|
346
|
+
var field = props.field,
|
|
347
|
+
separator = props.separator,
|
|
348
|
+
wrapper = props.wrapper;
|
|
349
|
+
|
|
350
|
+
if (!field) {
|
|
351
|
+
return null;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
var innerHTML = PrismicDOM.RichText.asText(field, separator);
|
|
355
|
+
return h(wrapper, _objectSpread2(_objectSpread2({}, data), {}, {
|
|
356
|
+
domProps: {
|
|
357
|
+
innerHTML: innerHTML
|
|
358
|
+
}
|
|
359
|
+
}));
|
|
360
|
+
}
|
|
361
|
+
};
|
|
362
|
+
|
|
363
|
+
// We need to polyfill process if it doesn't exist, such as in the browser.
|
|
364
|
+
if (typeof process === "undefined") {
|
|
365
|
+
globalThis.process = {
|
|
366
|
+
env: {}
|
|
367
|
+
};
|
|
368
|
+
}
|
|
369
|
+
/**
|
|
370
|
+
* `true` if in the production environment, `false` otherwise.
|
|
371
|
+
*
|
|
372
|
+
* This boolean can be used to perform actions only in development environments,
|
|
373
|
+
* such as logging.
|
|
374
|
+
*/
|
|
375
|
+
|
|
376
|
+
|
|
377
|
+
var __PRODUCTION__ = process.env.NODE_ENV === "production";
|
|
378
|
+
|
|
379
|
+
var getSliceComponentProps = function getSliceComponentProps(propsHint) {
|
|
380
|
+
return {
|
|
381
|
+
slice: {
|
|
382
|
+
type: Object,
|
|
383
|
+
required: true
|
|
384
|
+
},
|
|
385
|
+
index: {
|
|
386
|
+
type: Number,
|
|
387
|
+
required: true
|
|
388
|
+
},
|
|
389
|
+
slices: {
|
|
390
|
+
type: Array,
|
|
391
|
+
required: true
|
|
392
|
+
},
|
|
393
|
+
context: {
|
|
394
|
+
type: null,
|
|
395
|
+
required: true
|
|
396
|
+
}
|
|
397
|
+
};
|
|
398
|
+
};
|
|
399
|
+
var TODOSliceComponent = __PRODUCTION__ ? function () {
|
|
400
|
+
return null;
|
|
401
|
+
} : {
|
|
402
|
+
name: "TODOSliceCOmponent",
|
|
403
|
+
functional: true,
|
|
404
|
+
props: getSliceComponentProps(),
|
|
405
|
+
renfer: function renfer(h, _ref) {
|
|
406
|
+
var props = _ref.props,
|
|
407
|
+
data = _ref.data;
|
|
408
|
+
console.warn("[SliceZone] Could not find a component for Slice type \"".concat(props.slice.slice_type, "\""), props.slice);
|
|
409
|
+
return function () {
|
|
410
|
+
return h("section", _objectSpread2(_objectSpread2({}, data), {}, {
|
|
411
|
+
"data-slice-zone-todo-component": "",
|
|
412
|
+
"data-slice-type": props.slice.slice_type
|
|
413
|
+
}), ["Could not find a component for Slice type \"".concat(props.slice.slice_type, "\"")]);
|
|
414
|
+
};
|
|
415
|
+
}
|
|
416
|
+
}; // Just mimiced to prevent confusion but doesn't provide any value with version 2 of this kit
|
|
417
|
+
var SliceZone = {
|
|
418
|
+
name: "SliceZone",
|
|
419
|
+
functional: true,
|
|
420
|
+
props: {
|
|
421
|
+
slices: {
|
|
422
|
+
type: Array,
|
|
423
|
+
required: true
|
|
424
|
+
},
|
|
425
|
+
components: {
|
|
426
|
+
type: Object,
|
|
427
|
+
"default": undefined,
|
|
428
|
+
required: false
|
|
429
|
+
},
|
|
430
|
+
resolver: {
|
|
431
|
+
type: Function,
|
|
432
|
+
"default": undefined,
|
|
433
|
+
required: false
|
|
434
|
+
},
|
|
435
|
+
context: {
|
|
436
|
+
type: null,
|
|
437
|
+
"default": undefined,
|
|
438
|
+
required: false
|
|
439
|
+
},
|
|
440
|
+
defaultComponent: {
|
|
441
|
+
type: Object,
|
|
442
|
+
"default": undefined,
|
|
443
|
+
required: false
|
|
444
|
+
},
|
|
445
|
+
wrapper: {
|
|
446
|
+
type: [String, Object, Function],
|
|
447
|
+
"default": "div",
|
|
448
|
+
required: false
|
|
449
|
+
}
|
|
450
|
+
},
|
|
451
|
+
render: function render(h, _ref2) {
|
|
452
|
+
var props = _ref2.props,
|
|
453
|
+
data = _ref2.data;
|
|
454
|
+
|
|
455
|
+
// Prevent fatal if user didn't check for field, throws `Invalid prop` warn
|
|
456
|
+
if (!props.slices) {
|
|
457
|
+
return function () {
|
|
458
|
+
return null;
|
|
459
|
+
};
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
var renderedSlices = computed(function () {
|
|
463
|
+
return props.slices.map(function (slice, index) {
|
|
464
|
+
var component = props.components && slice.slice_type in props.components ? props.components[slice.slice_type] : props.defaultComponent || TODOSliceComponent; // TODO: Remove `resolver` in v3 in favor of `components`.
|
|
465
|
+
|
|
466
|
+
if (props.resolver) {
|
|
467
|
+
var resolvedComponent = props.resolver({
|
|
468
|
+
slice: slice,
|
|
469
|
+
sliceName: slice.slice_type,
|
|
470
|
+
i: index
|
|
471
|
+
});
|
|
472
|
+
|
|
473
|
+
if (resolvedComponent) {
|
|
474
|
+
component = resolvedComponent;
|
|
475
|
+
}
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
var p = {
|
|
479
|
+
key: "".concat(slice.slice_type, "-").concat(index),
|
|
480
|
+
slice: slice,
|
|
481
|
+
index: index,
|
|
482
|
+
context: props.context,
|
|
483
|
+
slices: props.slices
|
|
484
|
+
};
|
|
485
|
+
return h(component, p);
|
|
486
|
+
});
|
|
487
|
+
});
|
|
488
|
+
var parent = props.wrapper;
|
|
489
|
+
|
|
490
|
+
if (typeof parent === "string") {
|
|
491
|
+
return h(parent, data, renderedSlices.value);
|
|
492
|
+
} else {
|
|
493
|
+
return h(parent, data, {
|
|
494
|
+
"default": function _default() {
|
|
495
|
+
return renderedSlices.value;
|
|
496
|
+
}
|
|
497
|
+
});
|
|
498
|
+
}
|
|
499
|
+
}
|
|
500
|
+
};
|
|
501
|
+
|
|
275
502
|
var NuxtLink = Link({
|
|
276
|
-
component:
|
|
503
|
+
component: "nuxt-link"
|
|
277
504
|
});
|
|
278
505
|
var VueRouterLink = Link({
|
|
279
|
-
component:
|
|
506
|
+
component: "router-link"
|
|
280
507
|
});
|
|
281
508
|
var exp = {
|
|
282
509
|
common: {
|
|
283
510
|
Embed: Embed,
|
|
284
511
|
Image: Image,
|
|
285
|
-
RichText: RichText
|
|
512
|
+
RichText: RichText,
|
|
513
|
+
Text: Text,
|
|
514
|
+
SliceZone: SliceZone
|
|
286
515
|
},
|
|
287
516
|
nuxt: {
|
|
288
517
|
Link: NuxtLink
|
|
@@ -294,24 +523,24 @@ var exp = {
|
|
|
294
523
|
|
|
295
524
|
function asHtml(richText, linkResolver, htmlSerializer) {
|
|
296
525
|
if (richText) {
|
|
297
|
-
return PrismicDOM__default.RichText.asHtml(richText, linkResolver, htmlSerializer);
|
|
526
|
+
return PrismicDOM__default["default"].RichText.asHtml(richText, linkResolver, htmlSerializer);
|
|
298
527
|
}
|
|
299
528
|
}
|
|
300
529
|
function asText(richText, joinString) {
|
|
301
530
|
if (richText) {
|
|
302
|
-
return PrismicDOM__default.RichText.asText(richText, joinString);
|
|
531
|
+
return PrismicDOM__default["default"].RichText.asText(richText, joinString);
|
|
303
532
|
}
|
|
304
533
|
|
|
305
534
|
return '';
|
|
306
535
|
}
|
|
307
536
|
function asLink(link, linkResolver) {
|
|
308
537
|
if (link) {
|
|
309
|
-
return PrismicDOM__default.Link.url(link, linkResolver);
|
|
538
|
+
return PrismicDOM__default["default"].Link.url(link, linkResolver);
|
|
310
539
|
}
|
|
311
540
|
}
|
|
312
541
|
function asDate(date) {
|
|
313
542
|
if (date) {
|
|
314
|
-
return PrismicDOM__default.Date(date);
|
|
543
|
+
return PrismicDOM__default["default"].Date(date);
|
|
315
544
|
}
|
|
316
545
|
}
|
|
317
546
|
|
|
@@ -320,6 +549,7 @@ function attachMethods(Vue, options) {
|
|
|
320
549
|
return asHtml(richText, linkResolver || options.linkResolver, htmlSerializer || options.htmlSerializer);
|
|
321
550
|
};
|
|
322
551
|
|
|
552
|
+
Vue.prototype.$prismic.asHTML = Vue.prototype.$prismic.asHtml;
|
|
323
553
|
Vue.prototype.$prismic.asText = asText;
|
|
324
554
|
Vue.prototype.$prismic.richTextAsPlain = asText;
|
|
325
555
|
Vue.prototype.$prismic.asDate = asDate;
|
|
@@ -332,12 +562,12 @@ function attachMethods(Vue, options) {
|
|
|
332
562
|
var PrismicVue = {
|
|
333
563
|
install: function install(Vue, options) {
|
|
334
564
|
var _options$linkType = options.linkType,
|
|
335
|
-
linkType = _options$linkType === void 0 ?
|
|
336
|
-
Vue.prototype.$prismic =
|
|
565
|
+
linkType = _options$linkType === void 0 ? "vueRouter" : _options$linkType;
|
|
566
|
+
Vue.prototype.$prismic = prismicJS__default["default"];
|
|
337
567
|
Vue.prototype.$prismic.endpoint = options.endpoint;
|
|
338
568
|
Vue.prototype.$prismic.linkResolver = options.linkResolver;
|
|
339
569
|
Vue.prototype.$prismic.htmlSerializer = options.htmlSerializer;
|
|
340
|
-
Vue.prototype.$prismic.client =
|
|
570
|
+
Vue.prototype.$prismic.client = prismicJS__default["default"].client(options.endpoint, options.apiOptions);
|
|
341
571
|
attachMethods(Vue, options);
|
|
342
572
|
|
|
343
573
|
var components = _objectSpread2(_objectSpread2({}, exp.common), exp[linkType]);
|
|
@@ -348,9 +578,9 @@ var PrismicVue = {
|
|
|
348
578
|
|
|
349
579
|
|
|
350
580
|
Object.entries(components).forEach(function (_ref) {
|
|
351
|
-
var _ref2 = _slicedToArray(_ref, 2)
|
|
352
|
-
|
|
353
|
-
c = _ref2[1];
|
|
581
|
+
var _ref2 = _slicedToArray(_ref, 2);
|
|
582
|
+
_ref2[0];
|
|
583
|
+
var c = _ref2[1];
|
|
354
584
|
|
|
355
585
|
Vue.component(c.name, c);
|
|
356
586
|
});
|