@prismicio/vue 2.0.9 → 2.1.0-alpha.1

package/dist/prismic-vue.esm.js

@@ -1,29 +1,18 @@
-import PrismicDOM, { RichText } from 'prismic-dom';
 import prismicJS from '@prismicio/client';
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
+import PrismicDOM, { RichText as RichText$1 } from 'prismic-dom';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
+
+    if (enumerableOnly) {
+      symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+
     keys.push.apply(keys, symbols);
   }
 
@@ -50,6 +39,21 @@ function _objectSpread2(target) {
   return target;
 }
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
 function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -59,14 +63,17 @@ function _arrayWithHoles(arr) {
 }
 
 function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+  if (_i == null) return;
   var _arr = [];
   var _n = true;
   var _d = false;
-  var _e = undefined;
+
+  var _s, _e;
 
   try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
       _arr.push(_s.value);
 
       if (i && _arr.length === i) break;
@@ -164,10 +171,15 @@ var Image = {
   render: function render(h, _ref) {
     var props = _ref.props,
         data = _ref.data;
-    var _props$field = props.field,
-        url = _props$field.url,
-        alt = _props$field.alt,
-        copyright = _props$field.copyright;
+    var field = props.field;
+
+    if (!field) {
+      return null;
+    }
+
+    var url = field.url,
+        alt = field.alt,
+        copyright = field.copyright;
     return h('img', Object.assign(data, {
       attrs: _objectSpread2(_objectSpread2({}, data.attrs), {}, {
         src: url,
@@ -178,11 +190,24 @@ var Image = {
   }
 };
 
+var isInternalURL = function isInternalURL(url) {
+  /**
+   * @see Regex101 expression: {@link https://regex101.com/r/1y7iod/1}
+   */
+  var isInternal = /^\/(?!\/)/.test(url);
+  /**
+   * @see Regex101 expression: {@link https://regex101.com/r/RnUseS/1}
+   */
+
+  var isSpecialLink = !isInternal && !/^https?:\/\//i.test(url);
+  return isInternal && !isSpecialLink;
+};
+
 var Link = (function (_ref) {
   var _ref$component = _ref.component,
-      component = _ref$component === void 0 ? 'a' : _ref$component;
+      component = _ref$component === void 0 ? "a" : _ref$component;
   return {
-    name: 'PrismicLink',
+    name: "PrismicLink",
     functional: true,
     props: {
       field: {
@@ -191,10 +216,22 @@ var Link = (function (_ref) {
       },
       linkResolver: {
         type: Function,
-        required: false,
-        "default": function _default() {
-          return null;
-        }
+        required: false
+      },
+      target: {
+        type: String,
+        "default": undefined,
+        required: false
+      },
+      rel: {
+        type: String,
+        "default": undefined,
+        required: false
+      },
+      blankTargetRelAttribute: {
+        type: String,
+        "default": "noopener",
+        required: false
       }
     },
     render: function render(h, _ref2) {
@@ -209,9 +246,11 @@ var Link = (function (_ref) {
         return null;
       }
 
-      var url = parent.$prismic ? parent.$prismic.asLink(field, linkResolver) : PrismicDOM.Link.url(field, linkResolver);
+      var url = parent.$prismic ? parent.$prismic.asLink(field, linkResolver) : PrismicDOM.Link.url(field, linkResolver || function () {
+        return null;
+      });
 
-      if (url.indexOf('/') === 0) {
+      if (isInternalURL(url) && !props.target) {
         data.props = data.props || {};
         data.props.to = url;
         return h(component, data, children);
@@ -219,23 +258,35 @@ var Link = (function (_ref) {
 
       data.attrs = _objectSpread2(_objectSpread2({}, data.attrs), {}, {
         href: url
-      }, field.target && {
-        target: field.target,
-        rel: 'noopener'
       });
-      return h('a', data, children);
+
+      if (typeof props.target !== "undefined" || field.target) {
+        data.attrs.target = typeof props.target !== "undefined" ? props.target : field.target;
+      }
+
+      if (data.attrs.target === "_blank") {
+        data.attrs.rel = typeof props.rel !== "undefined" ? props.rel : props.blankTargetRelAttribute;
+      } else if (typeof props.rel !== "undefined") {
+        data.attrs.rel = props.rel;
+      }
+
+      return h("a", data, children);
     }
   };
 });
 
-var RichText$1 = {
-  name: 'PrismicRichText',
+var RichText = {
+  name: "PrismicRichText",
   functional: true,
   props: {
     field: {
       type: Array,
       required: true
     },
+    linkResolver: {
+      type: Function,
+      required: false
+    },
     htmlSerializer: {
       type: Function,
       required: false
@@ -243,15 +294,15 @@ var RichText$1 = {
     wrapper: {
       type: String,
       required: false,
-      "default": 'div'
+      "default": "div"
     }
   },
   render: function render(h, _ref) {
     var props = _ref.props,
         data = _ref.data,
-        children = _ref.children,
         parent = _ref.parent;
     var field = props.field,
+        linkResolver = props.linkResolver,
         htmlSerializer = props.htmlSerializer,
         wrapper = props.wrapper;
 
@@ -259,7 +310,48 @@ var RichText$1 = {
       return null;
     }
 
-    var innerHTML = RichText.asHtml(field, parent.$prismic.linkResolver, htmlSerializer || parent.$prismic.htmlSerializer);
+    var innerHTML = RichText$1.asHtml(field, linkResolver ? linkResolver : parent.$prismic ? parent.$prismic.linkResolver : undefined, htmlSerializer ? htmlSerializer : parent.$prismic ? parent.$prismic.htmlSerializer : undefined);
+    return h(wrapper, _objectSpread2(_objectSpread2({}, data), {}, {
+      domProps: {
+        innerHTML: innerHTML
+      }
+    }));
+  }
+};
+
+var Text = {
+  name: "PrismicText",
+  functional: true,
+  props: {
+    field: {
+      type: Array,
+      required: true
+    },
+    separator: {
+      type: String,
+      "default": undefined,
+      required: false
+    },
+    wrapper: {
+      type: String,
+      required: false,
+      "default": "div"
+    }
+  },
+  render: function render(h, _ref) {
+    var props = _ref.props,
+        data = _ref.data;
+        _ref.children;
+        _ref.parent;
+    var field = props.field,
+        separator = props.separator,
+        wrapper = props.wrapper;
+
+    if (!field) {
+      return null;
+    }
+
+    var innerHTML = RichText$1.asText(field, separator);
     return h(wrapper, _objectSpread2(_objectSpread2({}, data), {}, {
       domProps: {
         innerHTML: innerHTML
@@ -268,17 +360,157 @@ var RichText$1 = {
   }
 };
 
+// We need to polyfill process if it doesn't exist, such as in the browser.
+if (typeof process === "undefined") {
+  globalThis.process = {
+    env: {}
+  };
+}
+/**
+ * `true` if in the production environment, `false` otherwise.
+ *
+ * This boolean can be used to perform actions only in development environments,
+ * such as logging.
+ */
+
+
+var __PRODUCTION__ = process.env.NODE_ENV === "production";
+
+var getSliceComponentProps = function getSliceComponentProps(propsHint) {
+  return {
+    slice: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    slices: {
+      type: Array,
+      required: true
+    },
+    context: {
+      type: null,
+      required: true
+    }
+  };
+};
+var TODOSliceComponent = __PRODUCTION__ ? null : {
+  name: "TODOSliceCOmponent",
+  functional: true,
+  props: getSliceComponentProps(),
+  render: function render(h, _ref) {
+    var props = _ref.props,
+        data = _ref.data;
+    console.warn("[SliceZone] Could not find a component for Slice type \"".concat(props.slice.slice_type, "\""), props.slice);
+    return h("section", _objectSpread2(_objectSpread2({}, data), {}, {
+      attrs: _objectSpread2(_objectSpread2({}, data.attrs), {}, {
+        "data-slice-zone-todo-component": "",
+        "data-slice-type": props.slice.slice_type
+      })
+    }), ["Could not find a component for Slice type \"".concat(props.slice.slice_type, "\"")]);
+  }
+}; // Just mimiced to prevent confusion but doesn't provide any value with version 2 of this kit
+var SliceZone = {
+  name: "SliceZone",
+  props: {
+    slices: {
+      type: Array,
+      required: true
+    },
+    components: {
+      type: Object,
+      "default": undefined,
+      required: false
+    },
+    resolver: {
+      type: Function,
+      "default": undefined,
+      required: false
+    },
+    context: {
+      type: null,
+      "default": undefined,
+      required: false
+    },
+    defaultComponent: {
+      type: Object,
+      "default": undefined,
+      required: false
+    },
+    wrapper: {
+      type: [String, Object, Function],
+      "default": "div",
+      required: false
+    }
+  },
+  computed: {
+    renderedSlices: function renderedSlices() {
+      var _this = this;
+
+      if (!this.slices) {
+        return null;
+      }
+
+      return this.slices.map(function (slice, index) {
+        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`.
+
+        if (_this.resolver) {
+          var resolvedComponent = _this.resolver({
+            slice: slice,
+            sliceName: slice.slice_type,
+            i: index
+          });
+
+          if (resolvedComponent) {
+            component = resolvedComponent;
+          }
+        }
+
+        var p = {
+          key: "".concat(slice.slice_type, "-").concat(index),
+          props: {
+            slice: slice,
+            index: index,
+            context: _this.context,
+            slices: _this.slices
+          }
+        };
+        return {
+          component: component,
+          p: p
+        };
+      });
+    }
+  },
+  render: function render(h) {
+    // Prevent fatal if user didn't check for field, throws `Invalid prop` warn
+    if (!this.slices) {
+      return null;
+    }
+
+    return h(this.wrapper, this.renderedSlices.map(function (_ref2) {
+      var component = _ref2.component,
+          p = _ref2.p;
+      return h(component, p);
+    }));
+  }
+};
+
 var NuxtLink = Link({
-  component: 'nuxt-link'
+  component: "nuxt-link"
 });
 var VueRouterLink = Link({
-  component: 'router-link'
+  component: "router-link"
 });
 var exp = {
   common: {
     Embed: Embed,
     Image: Image,
-    RichText: RichText$1
+    RichText: RichText,
+    Text: Text,
+    SliceZone: SliceZone
   },
   nuxt: {
     Link: NuxtLink
@@ -298,7 +530,7 @@ function asText(richText, joinString) {
     return PrismicDOM.RichText.asText(richText, joinString);
   }
 
-  return '';
+  return "";
 }
 function asLink(link, linkResolver) {
   if (link) {
@@ -311,11 +543,14 @@ function asDate(date) {
   }
 }
 
+var client = prismicJS.client;
+
 function attachMethods(Vue, options) {
   Vue.prototype.$prismic.asHtml = function (richText, linkResolver, htmlSerializer) {
     return asHtml(richText, linkResolver || options.linkResolver, htmlSerializer || options.htmlSerializer);
   };
 
+  Vue.prototype.$prismic.asHTML = Vue.prototype.$prismic.asHtml;
   Vue.prototype.$prismic.asText = asText;
   Vue.prototype.$prismic.richTextAsPlain = asText;
   Vue.prototype.$prismic.asDate = asDate;
@@ -328,12 +563,12 @@ function attachMethods(Vue, options) {
 var PrismicVue = {
   install: function install(Vue, options) {
     var _options$linkType = options.linkType,
-        linkType = _options$linkType === void 0 ? 'vueRouter' : _options$linkType;
+        linkType = _options$linkType === void 0 ? "vueRouter" : _options$linkType;
     Vue.prototype.$prismic = prismicJS;
     Vue.prototype.$prismic.endpoint = options.endpoint;
     Vue.prototype.$prismic.linkResolver = options.linkResolver;
     Vue.prototype.$prismic.htmlSerializer = options.htmlSerializer;
-    Vue.prototype.$prismic.client = prismicJS.client(options.endpoint, options.apiOptions);
+    Vue.prototype.$prismic.client = client(options.endpoint, options.apiOptions);
     attachMethods(Vue, options);
 
     var components = _objectSpread2(_objectSpread2({}, exp.common), exp[linkType]);
@@ -344,13 +579,13 @@ var PrismicVue = {
 
 
     Object.entries(components).forEach(function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 2),
-          _ = _ref2[0],
-          c = _ref2[1];
+      var _ref2 = _slicedToArray(_ref, 2);
+          _ref2[0];
+          var c = _ref2[1];
 
       Vue.component(c.name, c);
     });
   }
 };
 
-export default PrismicVue;
+export { PrismicVue as default };