@prismicio/vue 2.0.9 → 2.1.0-alpha.1

package/components/index.js

@@ -1,28 +1,17 @@
-import PrismicDom, { RichText } from 'prismic-dom';
-
-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);
   }
 
@@ -49,6 +38,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;
+}
+
 var Embed = {
   name: 'PrismicEmbed',
   functional: true,
@@ -107,10 +111,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,
@@ -121,11 +130,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: {
@@ -134,10 +156,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) {
@@ -152,9 +186,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);
@@ -162,23 +198,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
@@ -186,15 +234,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;
 
@@ -202,7 +250,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
@@ -211,17 +300,161 @@ 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 defineSliceZoneComponents = function defineSliceZoneComponents(components) {
+  return components;
+};
+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
@@ -230,10 +463,12 @@ var exp = {
     Link: VueRouterLink
   }
 };
+exp.common;
+exp.nuxt;
+exp.vueRouter;
 
-var common$1 = exp.common;
-var nuxt$1 = exp.nuxt;
-var vueRouter$1 = exp.vueRouter;
+var common = exp.common;
+var nuxt = exp.nuxt;
+var vueRouter = exp.vueRouter;
 
-export default exp;
-export { common$1 as common, nuxt$1 as nuxt, vueRouter$1 as vueRouter };
+export { common, exp as default, defineSliceZoneComponents, getSliceComponentProps, nuxt, vueRouter };