@prismicio/vue 3.0.0-beta.1 → 3.0.0-beta.4

package/dist/index.js

@@ -1,5 +1,5 @@
-import { getEndpoint, createClient, predicate, cookie } from '@prismicio/client';
-import { asLink, asText, asHTML, asDate, documentToLinkField } from '@prismicio/helpers';
+import { createClient, predicate, cookie } from '@prismicio/client';
+import { isFilled, asImageWidthSrcSet, asImagePixelDensitySrcSet, asImageSrc, asLink, asText, asHTML, asDate, documentToLinkField } from '@prismicio/helpers';
 import { resolveDynamicComponent, defineComponent, h, inject, computed, unref, reactive, ref, watch, nextTick, onBeforeUnmount, watchEffect, markRaw, shallowRef, isRef } from 'vue';
 import { routerKey } from 'vue-router';
 
@@ -44,6 +44,64 @@ const usePrismic = () => {
 };
 
 const defaultImageComponent = "img";
+const usePrismicImage = (props) => {
+  const { options } = usePrismic();
+  const asImage = computed(() => {
+    var _a, _b;
+    const field = unref(props.field);
+    if (!isFilled.image(field)) {
+      return {
+        src: null,
+        srcset: null
+      };
+    }
+    const imgixParams = unref(props.imgixParams);
+    const widths = unref(props.widths);
+    const pixelDensities = 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 asImageWidthSrcSet(field, imgixParams);
+      } else {
+        const { url, dimensions, alt: alt2, copyright: copyright2 } = field;
+        return asImageWidthSrcSet({ url, dimensions, alt: alt2, copyright: copyright2 }, {
+          ...imgixParams,
+          widths: widths === "defaults" ? (_a = options.components) == null ? void 0 : _a.imageWidthSrcSetDefaults : widths
+        });
+      }
+    } else if (pixelDensities) {
+      return asImagePixelDensitySrcSet(field, {
+        ...imgixParams,
+        pixelDensities: pixelDensities === "defaults" ? (_b = options.components) == null ? void 0 : _b.imagePixelDensitySrcSetDefaults : pixelDensities
+      });
+    } else {
+      return {
+        src: asImageSrc(field, imgixParams),
+        srcset: null
+      };
+    }
+  });
+  const src = computed(() => {
+    return asImage.value.src;
+  });
+  const srcset = computed(() => {
+    return asImage.value.srcset;
+  });
+  const alt = computed(() => {
+    return unref(props.field).alt || "";
+  });
+  const copyright = computed(() => {
+    return unref(props.field).copyright || null;
+  });
+  return {
+    src,
+    srcset,
+    alt,
+    copyright
+  };
+};
 const PrismicImageImpl = /* @__PURE__ */ defineComponent({
   name: "PrismicImage",
   props: {
@@ -56,10 +114,20 @@ const PrismicImageImpl = /* @__PURE__ */ 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) {
@@ -71,10 +139,12 @@ const PrismicImageImpl = /* @__PURE__ */ 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":
@@ -82,8 +152,7 @@ const PrismicImageImpl = /* @__PURE__ */ defineComponent({
         default:
           return h(simplyResolveComponent(type.value), {
             ...attributes,
-            copyright: props.field.copyright || null,
-            ...props.imageComponentAdditionalProps
+            copyright: copyright.value
           });
       }
     };
@@ -221,7 +290,7 @@ const PrismicLink = PrismicLinkImpl;
 const defaultWrapper$1 = "div";
 const usePrismicText = (props) => {
   const text = computed(() => {
-    return asText(unref(props.field), unref(props.separator));
+    return asText(unref(props.field), unref(props.separator)) || "";
   });
   return {
     text
@@ -267,7 +336,7 @@ const usePrismicRichText = (props) => {
     var _a, _b;
     const linkResolver = (_a = unref(props.linkResolver)) != null ? _a : options.linkResolver;
     const htmlSerializer = (_b = unref(props.htmlSerializer)) != null ? _b : options.htmlSerializer;
-    return asHTML(unref(props.field), linkResolver, htmlSerializer);
+    return asHTML(unref(props.field), linkResolver, htmlSerializer) || "";
   });
   return {
     html
@@ -370,7 +439,7 @@ const getSliceComponentProps = (propsHint) => ({
   }
 });
 const TODOSliceComponent = __PRODUCTION__ ? () => null : /* @__PURE__ */ defineComponent({
-  name: "TODOSliceCOmponent",
+  name: "TODOSliceComponent",
   props: getSliceComponentProps(),
   setup(props) {
     watchEffect(() => {
@@ -478,23 +547,18 @@ const createPrismic = (options) => {
   if (options.client) {
     client = options.client;
   } else {
-    const endpoint = /^(https?:)?\/\//gim.test(options.endpoint) ? options.endpoint : getEndpoint(options.endpoint);
-    if (options.clientConfig && typeof options.clientConfig.fetch === "function") {
-      client = createClient(endpoint, options.clientConfig);
-    } else {
-      client = createClient(endpoint, {
-        ...options.clientConfig,
-        fetch: async (endpoint2, options2) => {
-          let fetchFunction;
-          if (typeof globalThis.fetch === "function") {
-            fetchFunction = globalThis.fetch;
-          } else {
-            fetchFunction = (await import('isomorphic-unfetch')).default;
-          }
-          return await fetchFunction(endpoint2, options2);
+    client = createClient(options.endpoint, {
+      fetch: async (endpoint, options2) => {
+        let fetchFunction;
+        if (typeof globalThis.fetch === "function") {
+          fetchFunction = globalThis.fetch;
+        } else {
+          fetchFunction = (await import('isomorphic-unfetch')).default;
         }
-      });
-    }
+        return await fetchFunction(endpoint, options2);
+      },
+      ...options.clientConfig
+    });
   }
   const prismicClient = {
     client,
@@ -510,6 +574,9 @@ const createPrismic = (options) => {
       return asLink(linkField, linkResolver || options.linkResolver);
     },
     asDate,
+    asImageSrc,
+    asImageWidthSrcSet,
+    asImagePixelDensitySrcSet,
     documentToLinkField
   };
   const prismic = {
@@ -590,5 +657,5 @@ const usePrismicDocumentsBySomeTags = (...args) => useStatefulPrismicClientMetho
 const useAllPrismicDocumentsBySomeTags = (...args) => useStatefulPrismicClientMethod("getAllBySomeTags", args);
 const dangerouslyUseAllPrismicDocuments = (...args) => useStatefulPrismicClientMethod("dangerouslyGetAll", args);
 
-export { PrismicClientComposableState, PrismicEmbed, PrismicImage, PrismicLink, PrismicRichText, PrismicText, SliceZone, SliceZoneImpl, TODOSliceComponent, createPrismic, dangerouslyUseAllPrismicDocuments, defineSliceZoneComponents, getSliceComponentProps, prismicKey, useAllPrismicDocumentsByEveryTag, useAllPrismicDocumentsByIDs, useAllPrismicDocumentsBySomeTags, useAllPrismicDocumentsByTag, useAllPrismicDocumentsByType, useAllPrismicDocumentsByUIDs, useFirstPrismicDocument, usePrismic, usePrismicDocumentByID, usePrismicDocumentByUID, usePrismicDocuments, usePrismicDocumentsByEveryTag, usePrismicDocumentsByIDs, usePrismicDocumentsBySomeTags, usePrismicDocumentsByTag, usePrismicDocumentsByType, usePrismicDocumentsByUIDs, usePrismicLink, usePrismicRichText, usePrismicText, useSinglePrismicDocument };
+export { PrismicClientComposableState, PrismicEmbed, PrismicImage, PrismicLink, PrismicRichText, PrismicText, SliceZone, TODOSliceComponent, createPrismic, dangerouslyUseAllPrismicDocuments, defineSliceZoneComponents, getSliceComponentProps, prismicKey, useAllPrismicDocumentsByEveryTag, useAllPrismicDocumentsByIDs, useAllPrismicDocumentsBySomeTags, useAllPrismicDocumentsByTag, useAllPrismicDocumentsByType, useAllPrismicDocumentsByUIDs, useFirstPrismicDocument, usePrismic, usePrismicDocumentByID, usePrismicDocumentByUID, usePrismicDocuments, usePrismicDocumentsByEveryTag, usePrismicDocumentsByIDs, usePrismicDocumentsBySomeTags, usePrismicDocumentsByTag, usePrismicDocumentsByType, usePrismicDocumentsByUIDs, usePrismicImage, usePrismicLink, usePrismicRichText, usePrismicText, useSinglePrismicDocument };
 //# sourceMappingURL=index.js.map