@prismicio/vue 2.1.0-alpha.0 → 2.1.0-alpha.1

package/src/components/Link.js

@@ -73,13 +73,15 @@ export default ({ component = "a" }) => ({
 		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;
-			}
+		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);

package/src/components/RichText.js

@@ -30,8 +30,8 @@ export default {
 		}
 		const innerHTML = RichText.asHtml(
 			field,
-			linkResolver || parent.$prismic.linkResolver,
-			htmlSerializer || parent.$prismic.htmlSerializer
+			linkResolver ? linkResolver : parent.$prismic ? parent.$prismic.linkResolver : undefined,
+			htmlSerializer ? htmlSerializer : parent.$prismic ? parent.$prismic.htmlSerializer : undefined,
 		);
 
 		return h(wrapper, {

package/src/components/SliceZone.js

@@ -31,30 +31,31 @@ export const getSliceComponentProps = (propsHint) => ({
 });
 
 export const TODOSliceComponent = __PRODUCTION__
-	? () => null
+	? null
 	: {
 			name: "TODOSliceCOmponent",
 			functional: true,
 			props: getSliceComponentProps(),
-			renfer(h, { props, data }) {
+			render(h, { props, data }) {
 				console.warn(
 					`[SliceZone] Could not find a component for Slice type "${props.slice.slice_type}"`,
 					props.slice
 				);
 
-				return () => {
-					return h(
-						"section",
-						{
-							...data,
+				return h(
+					"section",
+					{
+						...data,
+						attrs: {
+							...data.attrs,
 							"data-slice-zone-todo-component": "",
-							"data-slice-type": props.slice.slice_type,
+							"data-slice-type": props.slice.slice_type
 						},
-						[
-							`Could not find a component for Slice type "${props.slice.slice_type}"`,
-						]
-					);
-				};
+					},
+					[
+						`Could not find a component for Slice type "${props.slice.slice_type}"`,
+					]
+				);
 			},
 	  };
 
@@ -63,7 +64,6 @@ export const defineSliceZoneComponents = (components) => components;
 
 export const SliceZone = {
 	name: "SliceZone",
-	functional: true,
 	props: {
 		slices: {
 			type: Array,
@@ -95,22 +95,21 @@ export const SliceZone = {
 			required: false,
 		},
 	},
-	render(h, { props, data }) {
-		// Prevent fatal if user didn't check for field, throws `Invalid prop` warn
-		if (!props.slices) {
-			return () => null;
-		}
+	computed:{
+		renderedSlices() {
+			if (!this.slices) {
+				return null;
+			}
 
-		const renderedSlices = computed(() => {
-			return props.slices.map((slice, index) => {
+			return this.slices.map((slice, index) => {
 				let component =
-					props.components && slice.slice_type in props.components
-						? props.components[slice.slice_type]
-						: props.defaultComponent || TODOSliceComponent;
+					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 (props.resolver) {
-					const resolvedComponent = props.resolver({
+				if (this.resolver) {
+					const resolvedComponent = this.resolver({
 						slice,
 						sliceName: slice.slice_type,
 						i: index,
@@ -123,22 +122,24 @@ export const SliceZone = {
 
 				const p = {
 					key: `${slice.slice_type}-${index}`,
-					slice,
-					index,
-					context: props.context,
-					slices: props.slices,
+					props: {
+						slice,
+						index,
+						context: this.context,
+						slices: this.slices,
+					}
 				};
 
-				return h(component, p);
+				return { component, p };
 			});
-		});
-
-		const parent = props.wrapper;
-
-		if (typeof parent === "string") {
-			return h(parent, data, renderedSlices.value);
-		} else {
-			return h(parent, data, { default: () => renderedSlices.value });
 		}
 	},
+	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(({ component, p }) => h(component, p)));
+	},
 };

package/src/index.js

@@ -1,46 +1,47 @@
 import prismicJS from "@prismicio/client";
+const { client } = prismicJS;
 
 import Components from "./components";
 import { asHtml, asText, asDate, asLink } from "./methods";
 
 function attachMethods(Vue, options) {
-	Vue.prototype.$prismic.asHtml = function(
+	Vue.prototype.$prismic.asHtml = function (
 		richText,
 		linkResolver,
-		htmlSerializer
+		htmlSerializer,
 	) {
 		return asHtml(
 			richText,
 			linkResolver || options.linkResolver,
-			htmlSerializer || options.htmlSerializer
+			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;
-	Vue.prototype.$prismic.asLink = function(link, linkResolver) {
+	Vue.prototype.$prismic.asLink = function (link, linkResolver) {
 		return asLink(link, linkResolver || options.linkResolver);
 	};
 }
 
 const PrismicVue = {
-	install: function(Vue, options) {
+	install: function (Vue, options) {
 		const { linkType = "vueRouter" } = options;
 		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(
+		Vue.prototype.$prismic.client = client(
 			options.endpoint,
-			options.apiOptions
+			options.apiOptions,
 		);
 
 		attachMethods(Vue, options);
 
 		const components = {
 			...Components.common,
-			...Components[linkType]
+			...Components[linkType],
 		};
 
 		/**
@@ -50,7 +51,7 @@ const PrismicVue = {
 		Object.entries(components).forEach(([_, c]) => {
 			Vue.component(c.name, c);
 		});
-	}
+	},
 };
 
 export default PrismicVue;

package/src/methods.js

@@ -1,31 +1,25 @@
-import PrismicDOM from 'prismic-dom'
+import PrismicDOM from "prismic-dom";
 
 export function asHtml(richText, linkResolver, htmlSerializer) {
-  if (richText) {
-    return PrismicDOM.RichText.asHtml(
-      richText,
-      linkResolver,
-      htmlSerializer
-    )
-  }
+	if (richText) {
+		return PrismicDOM.RichText.asHtml(richText, linkResolver, htmlSerializer);
+	}
 }
 export function asText(richText, joinString) {
-  if (richText) {
-    return PrismicDOM.RichText.asText(richText, joinString)
-  }
-  return ''
+	if (richText) {
+		return PrismicDOM.RichText.asText(richText, joinString);
+	}
+
+	return "";
 }
 
 export function asLink(link, linkResolver) {
-  if (link) {
-    return PrismicDOM.Link.url(
-      link,
-      linkResolver
-    )
-  }
+	if (link) {
+		return PrismicDOM.Link.url(link, linkResolver);
+	}
 }
 export function asDate(date) {
-  if (date) {
-    return PrismicDOM.Date(date)
-  }
-}
+	if (date) {
+		return PrismicDOM.Date(date);
+	}
+}

package/vetur/attributes.json

@@ -0,0 +1,86 @@
+{
+	"prismic-embed/field": {
+		"type": "object",
+		"description": "The Prismic embed field to render."
+	},
+	"prismic-embed/wrapper": {
+		"type": "string | object | function",
+		"description": "An HTML tag name, a component, or a functional component used to wrap the output. Defaults to `\"div\"`."
+	},
+
+	"prismic-image/field": {
+		"type": "object",
+		"description": "The Prismic image field to render."
+	},
+
+	"prismic-link/field": {
+		"type": "object",
+		"description": "The Prismic link field or document to render."
+	},
+	"prismic-link/link-resolver": {
+		"type": "function",
+		"description": "A link resolver function used to resolve links when not using the route resolver parameter with `@prismicio/client`. Defaults to the link resolver provided to `@prismicio/vue` plugin if configured."
+	},
+	"prismic-link/target": {
+		"type": "string",
+		"description": "An explicit `target` attribute to apply to the rendered link."
+	},
+	"prismic-link/rel": {
+		"type": "string",
+		"description": "An explicit `rel` attribute to apply to the rendered link."
+	},
+	"prismic-link/blank-target-rel-attribute": {
+		"type": "string",
+		"description": "Value of the `rel` attribute to use on links rendered with `target=\"_blank\"`. Defaults to the one provided to `@prismicio/vue` plugin if configured, `\"noopener noreferrer\"` otherwise."
+	},
+
+	"prismic-rich-text/field": {
+		"type": "array",
+		"description": "The Prismic rich text or title field to render."
+	},
+	"prismic-rich-text/link-resolver": {
+		"type": "function",
+		"description": "A link resolver function used to resolve links when not using the route resolver parameter with `@prismicio/client`. Defaults to the link resolver provided to `@prismicio/vue` plugin if configured."
+	},
+	"prismic-rich-text/html-serializer": {
+		"type": "function | object",
+		"description": "An HTML serializer to customize the way rich text fields are rendered. Defaults to the HTML serializer provided to `@prismicio/vue` plugin if configured."
+	},
+	"prismic-rich-text/wrapper": {
+		"type": "string | object | function",
+		"description": "An HTML tag name, a component, or a functional component used to wrap the output. Defaults to `\"div\"`."
+	},
+
+	"prismic-text/field": {
+		"type": "array",
+		"description": "The Prismic rich text or title field to render."
+	},
+	"prismic-text/separator": {
+		"type": "string",
+		"description": "Separator used to join each element. Defaults to `\" \"` (a space)"
+	},
+	"prismic-text/wrapper": {
+		"type": "string | object | function",
+		"description": "An HTML tag name, a component, or a functional component used to wrap the output. Defaults to `\"div\"`."
+	},
+
+	"slice-zone/slices": {
+		"type": "array",
+		"description": "List of Slice data from the Slice Zone."
+	},
+	"slice-zone/components": {
+		"type": "array",
+		"description": "A record mapping Slice types to Vue components."
+	},
+	"slice-zone/context": {
+		"description": "Arbitrary data made available to all Slice components."
+	},
+	"slice-zone/default-component": {
+		"type": "string | object | function",
+		"description": "A component or a functional component rendered if a component mapping from the `components` prop cannot be found. Defaults to the Slice Zone default component provided to `@prismicio/vue` plugin if configured, otherwise `null` when `process.env.NODE_ENV === \"production\"` else `\"todo-slice-component\"`"
+	},
+	"slice-zone/wrapper": {
+		"type": "string | object | function",
+		"description": "An HTML tag name, a component, or a functional component used to wrap the output. Defaults to `\"div\"`."
+	}
+}

package/vetur/tags.json

@@ -0,0 +1,38 @@
+{
+	"prismic-embed": {
+		"attributes": ["field", "wrapper"],
+		"description": "Component to render a Prismic embed field."
+	},
+	"prismic-image": {
+		"attributes": ["field"],
+		"description": "Component to render a Prismic image field."
+	},
+	"prismic-link": {
+		"attributes": [
+			"field",
+			"link-resolver",
+			"target",
+			"rel",
+			"blank-target-rel-attribute"
+		],
+		"description": "Component to render a Prismic link field."
+	},
+	"prismic-rich-text": {
+		"attributes": ["field", "link-resolver", "html-serializer", "wrapper"],
+		"description": "Component to render a Prismic rich text field as HTML."
+	},
+	"prismic-text": {
+		"attributes": ["field", "separator", "wrapper"],
+		"description": "Component to render a Prismic rich text field as plain text."
+	},
+	"slice-zone": {
+		"attributes": [
+			"slices",
+			"components",
+			"context",
+			"default-component",
+			"wrapper"
+		],
+		"description": "Component to render a Prismic Slice Zone."
+	}
+}