@prismicio/vue 2.0.8 → 2.1.0-alpha.0

package/components/index.js

@@ -0,0 +1,468 @@
+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;
+      });
+    }
+
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  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,
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    wrapper: {
+      type: String,
+      required: false,
+      "default": 'div'
+    }
+  },
+  render: function render(h, _ref) {
+    var props = _ref.props,
+        data = _ref.data;
+    var field = props.field,
+        wrapper = props.wrapper;
+
+    if (!field || !field.html) {
+      return null;
+    }
+
+    var embedUrl = field.embed_url,
+        type = field.type,
+        providerName = field.provider_name;
+
+    var attrs = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, data.attrs), embedUrl && {
+      'data-oembed': embedUrl
+    }), type && {
+      'data-oembed-type': type
+    }), providerName && {
+      'data-oembed-provider': providerName
+    });
+
+    return h(wrapper, _objectSpread2(_objectSpread2({}, Object.assign(data, {
+      attrs: attrs
+    })), {}, {
+      domProps: {
+        innerHTML: field.html
+      }
+    }));
+  }
+};
+
+var Image = {
+  name: 'PrismicImage',
+  functional: true,
+  props: {
+    field: {
+      type: Object,
+      required: true
+    }
+  },
+  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;
+    return h('img', Object.assign(data, {
+      attrs: _objectSpread2(_objectSpread2({}, data.attrs), {}, {
+        src: url,
+        alt: alt,
+        copyright: copyright
+      })
+    }));
+  }
+};
+
+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;
+  return {
+    name: "PrismicLink",
+    functional: true,
+    props: {
+      field: {
+        type: Object,
+        required: true
+      },
+      linkResolver: {
+        type: Function,
+        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) {
+      var props = _ref2.props,
+          data = _ref2.data,
+          children = _ref2.children,
+          parent = _ref2.parent;
+      var field = props.field,
+          linkResolver = props.linkResolver;
+
+      if (!field) {
+        return null;
+      }
+
+      var url = parent.$prismic ? parent.$prismic.asLink(field, linkResolver) : PrismicDom.Link.url(field, linkResolver || function () {
+        return null;
+      });
+
+      if (isInternalURL(url) && !props.target) {
+        data.props = data.props || {};
+        data.props.to = url;
+        return h(component, data, children);
+      }
+
+      data.attrs = _objectSpread2(_objectSpread2({}, data.attrs), {}, {
+        href: url
+      });
+
+      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;
+        }
+      }
+
+      return h("a", data, children);
+    }
+  };
+});
+
+var RichText = {
+  name: "PrismicRichText",
+  functional: true,
+  props: {
+    field: {
+      type: Array,
+      required: true
+    },
+    linkResolver: {
+      type: Function,
+      required: false
+    },
+    htmlSerializer: {
+      type: Function,
+      required: false
+    },
+    wrapper: {
+      type: String,
+      required: false,
+      "default": "div"
+    }
+  },
+  render: function render(h, _ref) {
+    var props = _ref.props,
+        data = _ref.data,
+        parent = _ref.parent;
+    var field = props.field,
+        linkResolver = props.linkResolver,
+        htmlSerializer = props.htmlSerializer,
+        wrapper = props.wrapper;
+
+    if (!field) {
+      return null;
+    }
+
+    var innerHTML = RichText$1.asHtml(field, linkResolver || parent.$prismic.linkResolver, htmlSerializer || parent.$prismic.htmlSerializer);
+    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
+      }
+    }));
+  }
+};
+
+// 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__ ? function () {
+  return null;
+} : {
+  name: "TODOSliceCOmponent",
+  functional: true,
+  props: getSliceComponentProps(),
+  renfer: function renfer(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 function () {
+      return h("section", _objectSpread2(_objectSpread2({}, data), {}, {
+        "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",
+  functional: true,
+  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
+    }
+  },
+  render: function render(h, _ref2) {
+    var props = _ref2.props,
+        data = _ref2.data;
+
+    // Prevent fatal if user didn't check for field, throws `Invalid prop` warn
+    if (!props.slices) {
+      return function () {
+        return null;
+      };
+    }
+
+    var renderedSlices = computed(function () {
+      return props.slices.map(function (slice, index) {
+        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`.
+
+        if (props.resolver) {
+          var resolvedComponent = props.resolver({
+            slice: slice,
+            sliceName: slice.slice_type,
+            i: index
+          });
+
+          if (resolvedComponent) {
+            component = resolvedComponent;
+          }
+        }
+
+        var p = {
+          key: "".concat(slice.slice_type, "-").concat(index),
+          slice: slice,
+          index: index,
+          context: props.context,
+          slices: props.slices
+        };
+        return h(component, p);
+      });
+    });
+    var parent = props.wrapper;
+
+    if (typeof parent === "string") {
+      return h(parent, data, renderedSlices.value);
+    } else {
+      return h(parent, data, {
+        "default": function _default() {
+          return renderedSlices.value;
+        }
+      });
+    }
+  }
+};
+
+var NuxtLink = Link({
+  component: "nuxt-link"
+});
+var VueRouterLink = Link({
+  component: "router-link"
+});
+var exp = {
+  common: {
+    Embed: Embed,
+    Image: Image,
+    RichText: RichText,
+    Text: Text,
+    SliceZone: SliceZone
+  },
+  nuxt: {
+    Link: NuxtLink
+  },
+  vueRouter: {
+    Link: VueRouterLink
+  }
+};
+exp.common;
+exp.nuxt;
+exp.vueRouter;
+
+var common = exp.common;
+var nuxt = exp.nuxt;
+var vueRouter = exp.vueRouter;
+
+export { common, exp as default, defineSliceZoneComponents, getSliceComponentProps, nuxt, vueRouter };