@prismicio/vue 3.0.0-alpha.5 → 3.0.0-beta.2

package/README.md

@@ -52,7 +52,7 @@ For more clarity on this project and its structure you can also check out the de
 ## License
 
 ```
-   Copyright 2013-2021 Prismic <contact@prismic.io> (https://prismic.io)
+   Copyright 2013-2022 Prismic <contact@prismic.io> (https://prismic.io)
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/dist/index.cjs

@@ -66,6 +66,62 @@ const usePrismic = () => {
 };
 
 const defaultImageComponent = "img";
+const usePrismicImage = (props) => {
+  const asImage = vue.computed(() => {
+    const field = vue.unref(props.field);
+    if (!helpers.isFilled.image(field)) {
+      return {
+        src: null,
+        srcset: null
+      };
+    }
+    const imgixParams = vue.unref(props.imgixParams);
+    const widths = vue.unref(props.widths);
+    const pixelDensities = vue.unref(props.pixelDensities);
+    if (widths) {
+      if (pixelDensities) {
+        console.warn("[PrismicImage] `widths` and `pixelDensities` props should not be use alongside each others, only `widths` will be applied", props);
+      }
+      if (widths === "auto") {
+        return helpers.asImageWidthSrcSet(field, imgixParams);
+      } else {
+        const { url, dimensions, alt: alt2, copyright: copyright2 } = field;
+        return helpers.asImageWidthSrcSet({ url, dimensions, alt: alt2, copyright: copyright2 }, {
+          ...imgixParams,
+          widths: widths === "defaults" ? void 0 : widths
+        });
+      }
+    } else if (pixelDensities) {
+      return helpers.asImagePixelDensitySrcSet(field, {
+        ...imgixParams,
+        pixelDensities: pixelDensities === "defaults" ? void 0 : pixelDensities
+      });
+    } else {
+      return {
+        src: helpers.asImageSrc(field, imgixParams),
+        srcset: null
+      };
+    }
+  });
+  const src = vue.computed(() => {
+    return asImage.value.src;
+  });
+  const srcset = vue.computed(() => {
+    return asImage.value.srcset;
+  });
+  const alt = vue.computed(() => {
+    return vue.unref(props.field).alt || null;
+  });
+  const copyright = vue.computed(() => {
+    return vue.unref(props.field).copyright || null;
+  });
+  return {
+    src,
+    srcset,
+    alt,
+    copyright
+  };
+};
 const PrismicImageImpl = /* @__PURE__ */ vue.defineComponent({
   name: "PrismicImage",
   props: {
@@ -78,10 +134,20 @@ const PrismicImageImpl = /* @__PURE__ */ vue.defineComponent({
       default: void 0,
       required: false
     },
-    imageComponentAdditionalProps: {
+    imgixParams: {
       type: Object,
       default: void 0,
       required: false
+    },
+    widths: {
+      type: [String, Object],
+      default: void 0,
+      required: false
+    },
+    pixelDensities: {
+      type: [String, Object],
+      default: void 0,
+      required: false
     }
   },
   setup(props) {
@@ -93,10 +159,12 @@ const PrismicImageImpl = /* @__PURE__ */ vue.defineComponent({
       var _a;
       return props.imageComponent || ((_a = options.components) == null ? void 0 : _a.imageComponent) || defaultImageComponent;
     });
+    const { src, srcset, alt, copyright } = usePrismicImage(props);
     return () => {
       const attributes = {
-        src: props.field.url || null,
-        alt: props.field.alt || null
+        src: src.value,
+        srcset: srcset.value,
+        alt: alt.value
       };
       switch (type.value) {
         case "img":
@@ -104,8 +172,7 @@ const PrismicImageImpl = /* @__PURE__ */ vue.defineComponent({
         default:
           return vue.h(simplyResolveComponent(type.value), {
             ...attributes,
-            copyright: props.field.copyright || null,
-            ...props.imageComponentAdditionalProps
+            copyright: copyright.value
           });
       }
     };
@@ -154,11 +221,28 @@ const usePrismicLink = (props) => {
   });
   const target = vue.computed(() => {
     const field = vue.unref(props.field);
-    return vue.unref(props.target) || (field && "target" in field && field.target ? field.target : null);
+    const target2 = vue.unref(props.target);
+    if (typeof target2 !== "undefined") {
+      return target2;
+    } else {
+      return field && "target" in field && field.target ? field.target : null;
+    }
   });
   const rel = vue.computed(() => {
     var _a;
-    return vue.unref(props.rel) || (target.value === "_blank" ? vue.unref(props.blankTargetRelAttribute) || ((_a = options.components) == null ? void 0 : _a.linkBlankTargetRelAttribute) || defaultBlankTargetRelAttribute : null);
+    const rel2 = vue.unref(props.rel);
+    if (typeof rel2 !== "undefined") {
+      return rel2;
+    } else if (target.value === "_blank") {
+      const blankTargetRelAttribute = vue.unref(props.blankTargetRelAttribute);
+      if (typeof blankTargetRelAttribute !== "undefined") {
+        return blankTargetRelAttribute;
+      } else {
+        return typeof ((_a = options.components) == null ? void 0 : _a.linkBlankTargetRelAttribute) !== "undefined" ? options.components.linkBlankTargetRelAttribute : defaultBlankTargetRelAttribute;
+      }
+    } else {
+      return null;
+    }
   });
   return {
     type,
@@ -226,7 +310,7 @@ const PrismicLink = PrismicLinkImpl;
 const defaultWrapper$1 = "div";
 const usePrismicText = (props) => {
   const text = vue.computed(() => {
-    return helpers.asText(vue.unref(props.field), vue.unref(props.separator));
+    return helpers.asText(vue.unref(props.field), vue.unref(props.separator)) || "";
   });
   return {
     text
@@ -272,7 +356,7 @@ const usePrismicRichText = (props) => {
     var _a, _b;
     const linkResolver = (_a = vue.unref(props.linkResolver)) != null ? _a : options.linkResolver;
     const htmlSerializer = (_b = vue.unref(props.htmlSerializer)) != null ? _b : options.htmlSerializer;
-    return helpers.asHTML(vue.unref(props.field), linkResolver, htmlSerializer);
+    return helpers.asHTML(vue.unref(props.field), linkResolver, htmlSerializer) || "";
   });
   return {
     html
@@ -391,7 +475,7 @@ const TODOSliceComponent = __PRODUCTION__ ? () => null : /* @__PURE__ */ vue.def
     };
   }
 });
-const getSliceZoneComponents = (components) => {
+const defineSliceZoneComponents = (components) => {
   const result = {};
   let type;
   for (type in components) {
@@ -409,7 +493,13 @@ const SliceZoneImpl = /* @__PURE__ */ vue.defineComponent({
     },
     components: {
       type: Object,
-      required: true
+      default: void 0,
+      required: false
+    },
+    resolver: {
+      type: Function,
+      default: void 0,
+      required: false
     },
     context: {
       type: null,
@@ -435,8 +525,19 @@ const SliceZoneImpl = /* @__PURE__ */ vue.defineComponent({
     const renderedSlices = vue.computed(() => {
       return props.slices.map((slice, index) => {
         var _a;
-        const component = slice.slice_type in props.components ? props.components[slice.slice_type] : props.defaultComponent || ((_a = options.components) == null ? void 0 : _a.sliceZoneDefaultComponent) || TODOSliceComponent;
+        let component = props.components && slice.slice_type in props.components ? props.components[slice.slice_type] : props.defaultComponent || ((_a = options.components) == null ? void 0 : _a.sliceZoneDefaultComponent) || TODOSliceComponent;
+        if (props.resolver) {
+          const resolvedComponent = props.resolver({
+            slice,
+            sliceName: slice.slice_type,
+            i: index
+          });
+          if (resolvedComponent) {
+            component = resolvedComponent;
+          }
+        }
         const p = {
+          key: `${slice.slice_type}-${index}`,
           slice,
           index,
           context: props.context,
@@ -498,6 +599,9 @@ const createPrismic = (options) => {
       return helpers.asLink(linkField, linkResolver || options.linkResolver);
     },
     asDate: helpers.asDate,
+    asImageSrc: helpers.asImageSrc,
+    asImageWidthSrcSet: helpers.asImageWidthSrcSet,
+    asImagePixelDensitySrcSet: helpers.asImagePixelDensitySrcSet,
     documentToLinkField: helpers.documentToLinkField
   };
   const prismic = {
@@ -588,8 +692,8 @@ exports.SliceZoneImpl = SliceZoneImpl;
 exports.TODOSliceComponent = TODOSliceComponent;
 exports.createPrismic = createPrismic;
 exports.dangerouslyUseAllPrismicDocuments = dangerouslyUseAllPrismicDocuments;
+exports.defineSliceZoneComponents = defineSliceZoneComponents;
 exports.getSliceComponentProps = getSliceComponentProps;
-exports.getSliceZoneComponents = getSliceZoneComponents;
 exports.prismicKey = prismicKey;
 exports.useAllPrismicDocumentsByEveryTag = useAllPrismicDocumentsByEveryTag;
 exports.useAllPrismicDocumentsByIDs = useAllPrismicDocumentsByIDs;
@@ -608,6 +712,7 @@ exports.usePrismicDocumentsBySomeTags = usePrismicDocumentsBySomeTags;
 exports.usePrismicDocumentsByTag = usePrismicDocumentsByTag;
 exports.usePrismicDocumentsByType = usePrismicDocumentsByType;
 exports.usePrismicDocumentsByUIDs = usePrismicDocumentsByUIDs;
+exports.usePrismicImage = usePrismicImage;
 exports.usePrismicLink = usePrismicLink;
 exports.usePrismicRichText = usePrismicRichText;
 exports.usePrismicText = usePrismicText;