@prismicio/vue 2.0.10 → 2.1.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 +290 -49
- package/components/index.js +285 -48
- package/components/umd.js +293 -51
- package/dist/prismic-vue.common.js +300 -57
- package/dist/prismic-vue.esm.js +294 -53
- package/dist/prismic-vue.js +304 -61
- package/dist/prismic-vue.min.js +1 -1
- package/package.json +86 -46
- package/src/components/Embed.js +32 -32
- package/src/components/Image.js +27 -22
- package/src/components/Link.js +87 -51
- package/src/components/RichText.js +40 -41
- package/src/components/SliceZone.js +145 -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 +51 -39
- package/src/methods.js +16 -22
- package/vetur/attributes.json +86 -0
- package/vetur/tags.json +38 -0
package/components/umd.js
CHANGED
|
@@ -1,34 +1,25 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('prismic-dom')) :
|
|
3
3
|
typeof define === 'function' && define.amd ? define(['exports', 'prismic-dom'], factory) :
|
|
4
|
-
(factory(
|
|
5
|
-
}(this, (function (exports,PrismicDom) { 'use strict';
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PrismicVueComponents = {}, global.prismicDOM));
|
|
5
|
+
})(this, (function (exports, PrismicDom) { 'use strict';
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
8
|
|
|
9
|
-
|
|
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
|
-
}
|
|
20
|
-
|
|
21
|
-
return obj;
|
|
22
|
-
}
|
|
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 @@
|
|
|
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
|
var Embed = {
|
|
59
65
|
name: 'PrismicEmbed',
|
|
60
66
|
functional: true,
|
|
@@ -113,10 +119,15 @@
|
|
|
113
119
|
render: function render(h, _ref) {
|
|
114
120
|
var props = _ref.props,
|
|
115
121
|
data = _ref.data;
|
|
116
|
-
var
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
122
|
+
var field = props.field;
|
|
123
|
+
|
|
124
|
+
if (!field) {
|
|
125
|
+
return null;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
var url = field.url,
|
|
129
|
+
alt = field.alt,
|
|
130
|
+
copyright = field.copyright;
|
|
120
131
|
return h('img', Object.assign(data, {
|
|
121
132
|
attrs: _objectSpread2(_objectSpread2({}, data.attrs), {}, {
|
|
122
133
|
src: url,
|
|
@@ -127,11 +138,24 @@
|
|
|
127
138
|
}
|
|
128
139
|
};
|
|
129
140
|
|
|
141
|
+
var isInternalURL = function isInternalURL(url) {
|
|
142
|
+
/**
|
|
143
|
+
* @see Regex101 expression: {@link https://regex101.com/r/1y7iod/1}
|
|
144
|
+
*/
|
|
145
|
+
var isInternal = /^\/(?!\/)/.test(url);
|
|
146
|
+
/**
|
|
147
|
+
* @see Regex101 expression: {@link https://regex101.com/r/RnUseS/1}
|
|
148
|
+
*/
|
|
149
|
+
|
|
150
|
+
var isSpecialLink = !isInternal && !/^https?:\/\//i.test(url);
|
|
151
|
+
return isInternal && !isSpecialLink;
|
|
152
|
+
};
|
|
153
|
+
|
|
130
154
|
var Link = (function (_ref) {
|
|
131
155
|
var _ref$component = _ref.component,
|
|
132
|
-
component = _ref$component === void 0 ?
|
|
156
|
+
component = _ref$component === void 0 ? "a" : _ref$component;
|
|
133
157
|
return {
|
|
134
|
-
name:
|
|
158
|
+
name: "PrismicLink",
|
|
135
159
|
functional: true,
|
|
136
160
|
props: {
|
|
137
161
|
field: {
|
|
@@ -140,10 +164,22 @@
|
|
|
140
164
|
},
|
|
141
165
|
linkResolver: {
|
|
142
166
|
type: Function,
|
|
143
|
-
required: false
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
167
|
+
required: false
|
|
168
|
+
},
|
|
169
|
+
target: {
|
|
170
|
+
type: String,
|
|
171
|
+
"default": undefined,
|
|
172
|
+
required: false
|
|
173
|
+
},
|
|
174
|
+
rel: {
|
|
175
|
+
type: String,
|
|
176
|
+
"default": undefined,
|
|
177
|
+
required: false
|
|
178
|
+
},
|
|
179
|
+
blankTargetRelAttribute: {
|
|
180
|
+
type: String,
|
|
181
|
+
"default": "noopener noreferrer",
|
|
182
|
+
required: false
|
|
147
183
|
}
|
|
148
184
|
},
|
|
149
185
|
render: function render(h, _ref2) {
|
|
@@ -158,9 +194,11 @@
|
|
|
158
194
|
return null;
|
|
159
195
|
}
|
|
160
196
|
|
|
161
|
-
var url = parent.$prismic ? parent.$prismic.asLink(field, linkResolver) : PrismicDom__default.Link.url(field, linkResolver)
|
|
197
|
+
var url = parent.$prismic ? parent.$prismic.asLink(field, linkResolver) : PrismicDom__default["default"].Link.url(field, linkResolver || function () {
|
|
198
|
+
return null;
|
|
199
|
+
});
|
|
162
200
|
|
|
163
|
-
if (url
|
|
201
|
+
if (isInternalURL(url) && !props.target) {
|
|
164
202
|
data.props = data.props || {};
|
|
165
203
|
data.props.to = url;
|
|
166
204
|
return h(component, data, children);
|
|
@@ -168,23 +206,37 @@
|
|
|
168
206
|
|
|
169
207
|
data.attrs = _objectSpread2(_objectSpread2({}, data.attrs), {}, {
|
|
170
208
|
href: url
|
|
171
|
-
}, field.target && {
|
|
172
|
-
target: field.target,
|
|
173
|
-
rel: 'noopener'
|
|
174
209
|
});
|
|
175
|
-
|
|
210
|
+
|
|
211
|
+
if (typeof props.target !== "undefined") {
|
|
212
|
+
data.attrs.target = props.target;
|
|
213
|
+
} else if (field.target) {
|
|
214
|
+
data.attrs.target = field.target;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
if (typeof props.rel !== "undefined") {
|
|
218
|
+
data.attrs.rel = props.rel;
|
|
219
|
+
} else if (data.attrs.target === "_blank") {
|
|
220
|
+
data.attrs.rel = props.blankTargetRelAttribute;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
return h("a", data, children);
|
|
176
224
|
}
|
|
177
225
|
};
|
|
178
226
|
});
|
|
179
227
|
|
|
180
228
|
var RichText = {
|
|
181
|
-
name:
|
|
229
|
+
name: "PrismicRichText",
|
|
182
230
|
functional: true,
|
|
183
231
|
props: {
|
|
184
232
|
field: {
|
|
185
233
|
type: Array,
|
|
186
234
|
required: true
|
|
187
235
|
},
|
|
236
|
+
linkResolver: {
|
|
237
|
+
type: Function,
|
|
238
|
+
required: false
|
|
239
|
+
},
|
|
188
240
|
htmlSerializer: {
|
|
189
241
|
type: Function,
|
|
190
242
|
required: false
|
|
@@ -192,15 +244,15 @@
|
|
|
192
244
|
wrapper: {
|
|
193
245
|
type: String,
|
|
194
246
|
required: false,
|
|
195
|
-
"default":
|
|
247
|
+
"default": "div"
|
|
196
248
|
}
|
|
197
249
|
},
|
|
198
250
|
render: function render(h, _ref) {
|
|
199
251
|
var props = _ref.props,
|
|
200
252
|
data = _ref.data,
|
|
201
|
-
children = _ref.children,
|
|
202
253
|
parent = _ref.parent;
|
|
203
254
|
var field = props.field,
|
|
255
|
+
linkResolver = props.linkResolver,
|
|
204
256
|
htmlSerializer = props.htmlSerializer,
|
|
205
257
|
wrapper = props.wrapper;
|
|
206
258
|
|
|
@@ -208,7 +260,7 @@
|
|
|
208
260
|
return null;
|
|
209
261
|
}
|
|
210
262
|
|
|
211
|
-
var innerHTML = PrismicDom.RichText.asHtml(field, parent.$prismic.linkResolver, htmlSerializer
|
|
263
|
+
var innerHTML = PrismicDom.RichText.asHtml(field, linkResolver ? linkResolver : parent.$prismic ? parent.$prismic.linkResolver : undefined, htmlSerializer ? htmlSerializer : parent.$prismic ? parent.$prismic.htmlSerializer : undefined);
|
|
212
264
|
return h(wrapper, _objectSpread2(_objectSpread2({}, data), {}, {
|
|
213
265
|
domProps: {
|
|
214
266
|
innerHTML: innerHTML
|
|
@@ -217,17 +269,202 @@
|
|
|
217
269
|
}
|
|
218
270
|
};
|
|
219
271
|
|
|
272
|
+
var Text = {
|
|
273
|
+
name: "PrismicText",
|
|
274
|
+
functional: true,
|
|
275
|
+
props: {
|
|
276
|
+
field: {
|
|
277
|
+
type: Array,
|
|
278
|
+
required: true
|
|
279
|
+
},
|
|
280
|
+
separator: {
|
|
281
|
+
type: String,
|
|
282
|
+
"default": undefined,
|
|
283
|
+
required: false
|
|
284
|
+
},
|
|
285
|
+
wrapper: {
|
|
286
|
+
type: String,
|
|
287
|
+
required: false,
|
|
288
|
+
"default": "div"
|
|
289
|
+
}
|
|
290
|
+
},
|
|
291
|
+
render: function render(h, _ref) {
|
|
292
|
+
var props = _ref.props,
|
|
293
|
+
data = _ref.data;
|
|
294
|
+
_ref.children;
|
|
295
|
+
_ref.parent;
|
|
296
|
+
var field = props.field,
|
|
297
|
+
separator = props.separator,
|
|
298
|
+
wrapper = props.wrapper;
|
|
299
|
+
|
|
300
|
+
if (!field) {
|
|
301
|
+
return null;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
var innerHTML = PrismicDom.RichText.asText(field, separator);
|
|
305
|
+
return h(wrapper, _objectSpread2(_objectSpread2({}, data), {}, {
|
|
306
|
+
domProps: {
|
|
307
|
+
innerHTML: innerHTML
|
|
308
|
+
}
|
|
309
|
+
}));
|
|
310
|
+
}
|
|
311
|
+
};
|
|
312
|
+
|
|
313
|
+
// We need to polyfill process if it doesn't exist, such as in the browser.
|
|
314
|
+
if (typeof process === "undefined") {
|
|
315
|
+
globalThis.process = {
|
|
316
|
+
env: {}
|
|
317
|
+
};
|
|
318
|
+
}
|
|
319
|
+
/**
|
|
320
|
+
* `true` if in the production environment, `false` otherwise.
|
|
321
|
+
*
|
|
322
|
+
* This boolean can be used to perform actions only in development environments,
|
|
323
|
+
* such as logging.
|
|
324
|
+
*/
|
|
325
|
+
|
|
326
|
+
|
|
327
|
+
var __PRODUCTION__ = process.env.NODE_ENV === "production";
|
|
328
|
+
|
|
329
|
+
var getSliceComponentProps = function getSliceComponentProps(propsHint) {
|
|
330
|
+
return {
|
|
331
|
+
slice: {
|
|
332
|
+
type: Object,
|
|
333
|
+
required: true
|
|
334
|
+
},
|
|
335
|
+
index: {
|
|
336
|
+
type: Number,
|
|
337
|
+
required: true
|
|
338
|
+
},
|
|
339
|
+
slices: {
|
|
340
|
+
type: Array,
|
|
341
|
+
required: true
|
|
342
|
+
},
|
|
343
|
+
context: {
|
|
344
|
+
type: null,
|
|
345
|
+
required: true
|
|
346
|
+
}
|
|
347
|
+
};
|
|
348
|
+
};
|
|
349
|
+
var TODOSliceComponent = __PRODUCTION__ ? null : {
|
|
350
|
+
name: "TODOSliceCOmponent",
|
|
351
|
+
functional: true,
|
|
352
|
+
props: getSliceComponentProps(),
|
|
353
|
+
render: function render(h, _ref) {
|
|
354
|
+
var props = _ref.props,
|
|
355
|
+
data = _ref.data;
|
|
356
|
+
console.warn("[SliceZone] Could not find a component for Slice type \"".concat(props.slice.slice_type, "\""), props.slice);
|
|
357
|
+
return h("section", _objectSpread2(_objectSpread2({}, data), {}, {
|
|
358
|
+
attrs: _objectSpread2(_objectSpread2({}, data.attrs), {}, {
|
|
359
|
+
"data-slice-zone-todo-component": "",
|
|
360
|
+
"data-slice-type": props.slice.slice_type
|
|
361
|
+
})
|
|
362
|
+
}), ["Could not find a component for Slice type \"".concat(props.slice.slice_type, "\"")]);
|
|
363
|
+
}
|
|
364
|
+
}; // Just mimiced to prevent confusion but doesn't provide any value with version 2 of this kit
|
|
365
|
+
|
|
366
|
+
var defineSliceZoneComponents = function defineSliceZoneComponents(components) {
|
|
367
|
+
return components;
|
|
368
|
+
};
|
|
369
|
+
var SliceZone = {
|
|
370
|
+
name: "SliceZone",
|
|
371
|
+
props: {
|
|
372
|
+
slices: {
|
|
373
|
+
type: Array,
|
|
374
|
+
required: true
|
|
375
|
+
},
|
|
376
|
+
components: {
|
|
377
|
+
type: Object,
|
|
378
|
+
"default": undefined,
|
|
379
|
+
required: false
|
|
380
|
+
},
|
|
381
|
+
resolver: {
|
|
382
|
+
type: Function,
|
|
383
|
+
"default": undefined,
|
|
384
|
+
required: false
|
|
385
|
+
},
|
|
386
|
+
context: {
|
|
387
|
+
type: null,
|
|
388
|
+
"default": undefined,
|
|
389
|
+
required: false
|
|
390
|
+
},
|
|
391
|
+
defaultComponent: {
|
|
392
|
+
type: Object,
|
|
393
|
+
"default": undefined,
|
|
394
|
+
required: false
|
|
395
|
+
},
|
|
396
|
+
wrapper: {
|
|
397
|
+
type: [String, Object, Function],
|
|
398
|
+
"default": "div",
|
|
399
|
+
required: false
|
|
400
|
+
}
|
|
401
|
+
},
|
|
402
|
+
computed: {
|
|
403
|
+
renderedSlices: function renderedSlices() {
|
|
404
|
+
var _this = this;
|
|
405
|
+
|
|
406
|
+
if (!this.slices) {
|
|
407
|
+
return null;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
return this.slices.map(function (slice, index) {
|
|
411
|
+
var component = _this.components && slice.slice_type in _this.components ? _this.components[slice.slice_type] : _this.defaultComponent || TODOSliceComponent; // TODO: Remove `resolver` in v3 in favor of `components`.
|
|
412
|
+
|
|
413
|
+
if (_this.resolver) {
|
|
414
|
+
var resolvedComponent = _this.resolver({
|
|
415
|
+
slice: slice,
|
|
416
|
+
sliceName: slice.slice_type,
|
|
417
|
+
i: index
|
|
418
|
+
});
|
|
419
|
+
|
|
420
|
+
if (resolvedComponent) {
|
|
421
|
+
component = resolvedComponent;
|
|
422
|
+
}
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
var p = {
|
|
426
|
+
key: "".concat(slice.slice_type, "-").concat(index),
|
|
427
|
+
props: {
|
|
428
|
+
slice: slice,
|
|
429
|
+
index: index,
|
|
430
|
+
context: _this.context,
|
|
431
|
+
slices: _this.slices
|
|
432
|
+
}
|
|
433
|
+
};
|
|
434
|
+
return {
|
|
435
|
+
component: component,
|
|
436
|
+
p: p
|
|
437
|
+
};
|
|
438
|
+
});
|
|
439
|
+
}
|
|
440
|
+
},
|
|
441
|
+
render: function render(h) {
|
|
442
|
+
// Prevent fatal if user didn't check for field, throws `Invalid prop` warn
|
|
443
|
+
if (!this.slices) {
|
|
444
|
+
return null;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
return h(this.wrapper, this.renderedSlices.map(function (_ref2) {
|
|
448
|
+
var component = _ref2.component,
|
|
449
|
+
p = _ref2.p;
|
|
450
|
+
return h(component, p);
|
|
451
|
+
}));
|
|
452
|
+
}
|
|
453
|
+
};
|
|
454
|
+
|
|
220
455
|
var NuxtLink = Link({
|
|
221
|
-
component:
|
|
456
|
+
component: "nuxt-link"
|
|
222
457
|
});
|
|
223
458
|
var VueRouterLink = Link({
|
|
224
|
-
component:
|
|
459
|
+
component: "router-link"
|
|
225
460
|
});
|
|
226
461
|
var exp = {
|
|
227
462
|
common: {
|
|
228
463
|
Embed: Embed,
|
|
229
464
|
Image: Image,
|
|
230
|
-
RichText: RichText
|
|
465
|
+
RichText: RichText,
|
|
466
|
+
Text: Text,
|
|
467
|
+
SliceZone: SliceZone
|
|
231
468
|
},
|
|
232
469
|
nuxt: {
|
|
233
470
|
Link: NuxtLink
|
|
@@ -236,16 +473,21 @@
|
|
|
236
473
|
Link: VueRouterLink
|
|
237
474
|
}
|
|
238
475
|
};
|
|
476
|
+
exp.common;
|
|
477
|
+
exp.nuxt;
|
|
478
|
+
exp.vueRouter;
|
|
239
479
|
|
|
240
|
-
var common
|
|
241
|
-
var nuxt
|
|
242
|
-
var vueRouter
|
|
480
|
+
var common = exp.common;
|
|
481
|
+
var nuxt = exp.nuxt;
|
|
482
|
+
var vueRouter = exp.vueRouter;
|
|
243
483
|
|
|
244
|
-
exports.common = common
|
|
245
|
-
exports
|
|
246
|
-
exports.
|
|
247
|
-
exports.
|
|
484
|
+
exports.common = common;
|
|
485
|
+
exports["default"] = exp;
|
|
486
|
+
exports.defineSliceZoneComponents = defineSliceZoneComponents;
|
|
487
|
+
exports.getSliceComponentProps = getSliceComponentProps;
|
|
488
|
+
exports.nuxt = nuxt;
|
|
489
|
+
exports.vueRouter = vueRouter;
|
|
248
490
|
|
|
249
491
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
250
492
|
|
|
251
|
-
}))
|
|
493
|
+
}));
|