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