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

package/dist/index.cjs

@@ -59,6 +59,11 @@ const PrismicEmbedImpl = /* @__PURE__ */ vue.defineComponent({
 });
 const PrismicEmbed = PrismicEmbedImpl;
 
+if (typeof process === "undefined") {
+  globalThis.process = { env: {} };
+}
+const __PRODUCTION__ = process.env.NODE_ENV === "production";
+
 const prismicKey = Symbol("prismic");
 
 const usePrismic = () => {
@@ -81,18 +86,13 @@ const usePrismicImage = (props) => {
     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" ? (_a = options.components) == null ? void 0 : _a.imageWidthSrcSetDefaults : widths
-        });
+      if (!__PRODUCTION__ && pixelDensities) {
+        console.warn("[PrismicImage] Only one of `widths` or `pixelDensities` props can be provided. You can resolve this warning by removing either the `widths` or `pixelDensities` prop. `widths` will be used in this case.", props);
       }
+      return helpers.asImageWidthSrcSet(field, {
+        ...imgixParams,
+        widths: widths === "defaults" ? (_a = options.components) == null ? void 0 : _a.imageWidthSrcSetDefaults : widths
+      });
     } else if (pixelDensities) {
       return helpers.asImagePixelDensitySrcSet(field, {
         ...imgixParams,
@@ -312,7 +312,12 @@ 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)) || "";
+    var _a;
+    const field = vue.unref(props.field);
+    if (!helpers.isFilled.richText(field)) {
+      return (_a = vue.unref(props.fallback)) != null ? _a : "";
+    }
+    return helpers.asText(vue.unref(field), vue.unref(props.separator));
   });
   return {
     text
@@ -334,12 +339,14 @@ const PrismicTextImpl = /* @__PURE__ */ vue.defineComponent({
       type: [String, Object, Function],
       default: void 0,
       required: false
+    },
+    fallback: {
+      type: String,
+      default: void 0,
+      required: false
     }
   },
   setup(props) {
-    if (!props.field) {
-      return () => null;
-    }
     const { text } = usePrismicText(props);
     return () => {
       const parent = simplyResolveComponent(props.wrapper || defaultWrapper$1);
@@ -355,10 +362,14 @@ const defaultWrapper = "div";
 const usePrismicRichText = (props) => {
   const { options } = usePrismic();
   const html = vue.computed(() => {
-    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) || "";
+    var _a, _b, _c;
+    const field = vue.unref(props.field);
+    if (!helpers.isFilled.richText(field)) {
+      return (_a = vue.unref(props.fallback)) != null ? _a : "";
+    }
+    const linkResolver = (_b = vue.unref(props.linkResolver)) != null ? _b : options.linkResolver;
+    const htmlSerializer = (_c = vue.unref(props.htmlSerializer)) != null ? _c : options.htmlSerializer;
+    return helpers.asHTML(vue.unref(field), linkResolver, htmlSerializer);
   });
   return {
     html
@@ -385,16 +396,18 @@ const PrismicRichTextImpl = /* @__PURE__ */ vue.defineComponent({
       type: [String, Object, Function],
       default: void 0,
       required: false
+    },
+    fallback: {
+      type: String,
+      default: void 0,
+      required: false
     }
   },
   setup(props) {
-    if (!props.field) {
-      return () => null;
-    }
     const { html } = usePrismicRichText(props);
     const root = vue.ref(null);
     const maybeRouter = vue.inject(vueRouter.routerKey, null);
-    if (maybeRouter) {
+    if (maybeRouter && html.value) {
       let links = [];
       const navigate = function(event) {
         event.preventDefault();
@@ -437,11 +450,6 @@ const PrismicRichTextImpl = /* @__PURE__ */ vue.defineComponent({
 });
 const PrismicRichText = PrismicRichTextImpl;
 
-if (typeof process === "undefined") {
-  globalThis.process = { env: {} };
-}
-const __PRODUCTION__ = process.env.NODE_ENV === "production";
-
 const getSliceComponentProps = (propsHint) => ({
   slice: {
     type: Object,
@@ -464,16 +472,15 @@ const TODOSliceComponent = __PRODUCTION__ ? () => null : /* @__PURE__ */ vue.def
   name: "TODOSliceComponent",
   props: getSliceComponentProps(),
   setup(props) {
+    const type = vue.computed(() => "slice_type" in props.slice ? props.slice.slice_type : props.slice.type);
     vue.watchEffect(() => {
-      console.warn(`[SliceZone] Could not find a component for Slice type "${props.slice.slice_type}"`, props.slice);
+      console.warn(`[SliceZone] Could not find a component for Slice type "${type.value}"`, props.slice);
     });
     return () => {
       return vue.h("section", {
         "data-slice-zone-todo-component": "",
-        "data-slice-type": props.slice.slice_type
-      }, [
-        `Could not find a component for Slice type "${props.slice.slice_type}"`
-      ]);
+        "data-slice-type": type.value
+      }, [`Could not find a component for Slice type "${type.value}"`]);
     };
   }
 });
@@ -527,11 +534,12 @@ const SliceZoneImpl = /* @__PURE__ */ vue.defineComponent({
     const renderedSlices = vue.computed(() => {
       return props.slices.map((slice, index) => {
         var _a;
-        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;
+        const type = "slice_type" in slice ? slice.slice_type : slice.type;
+        let component = props.components && type in props.components ? props.components[type] : props.defaultComponent || ((_a = options.components) == null ? void 0 : _a.sliceZoneDefaultComponent) || TODOSliceComponent;
         if (props.resolver) {
           const resolvedComponent = props.resolver({
             slice,
-            sliceName: slice.slice_type,
+            sliceName: type,
             i: index
           });
           if (resolvedComponent) {
@@ -539,7 +547,7 @@ const SliceZoneImpl = /* @__PURE__ */ vue.defineComponent({
           }
         }
         const p = {
-          key: `${slice.slice_type}-${index}`,
+          key: `${index}-${JSON.stringify(slice)}`,
           slice,
           index,
           context: props.context,
@@ -621,34 +629,34 @@ const createPrismic = (options) => {
   return prismic;
 };
 
-exports.PrismicClientComposableState = void 0;
-(function(PrismicClientComposableState2) {
+var PrismicClientComposableState = /* @__PURE__ */ ((PrismicClientComposableState2) => {
   PrismicClientComposableState2["Idle"] = "idle";
   PrismicClientComposableState2["Pending"] = "pending";
   PrismicClientComposableState2["Success"] = "success";
   PrismicClientComposableState2["Error"] = "error";
-})(exports.PrismicClientComposableState || (exports.PrismicClientComposableState = {}));
+  return PrismicClientComposableState2;
+})(PrismicClientComposableState || {});
 
 const isParams = (value) => {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 };
 const useStatefulPrismicClientMethod = (methodName, args) => {
   const { client } = usePrismic();
-  const state = vue.ref(exports.PrismicClientComposableState.Idle);
+  const state = vue.ref(PrismicClientComposableState.Idle);
   const data = vue.shallowRef(null);
   const error = vue.ref(null);
   const refresh = async () => {
     const lastArg = vue.unref(args[args.length - 1]);
     const { client: explicitClient, ...params } = isParams(lastArg) ? lastArg : {};
     const argsWithoutParams = isParams(lastArg) ? args.slice(0, -1) : args;
-    state.value = exports.PrismicClientComposableState.Pending;
+    state.value = PrismicClientComposableState.Pending;
     data.value = null;
     error.value = null;
     try {
       data.value = await (vue.unref(explicitClient) || client)[methodName](...argsWithoutParams.map((arg) => vue.unref(arg)), params);
-      state.value = exports.PrismicClientComposableState.Success;
+      state.value = PrismicClientComposableState.Success;
     } catch (err) {
-      state.value = exports.PrismicClientComposableState.Error;
+      state.value = PrismicClientComposableState.Error;
       error.value = err;
     }
   };
@@ -679,6 +687,7 @@ const usePrismicDocumentsBySomeTags = (...args) => useStatefulPrismicClientMetho
 const useAllPrismicDocumentsBySomeTags = (...args) => useStatefulPrismicClientMethod("getAllBySomeTags", args);
 const dangerouslyUseAllPrismicDocuments = (...args) => useStatefulPrismicClientMethod("dangerouslyGetAll", args);
 
+exports.PrismicClientComposableState = PrismicClientComposableState;
 exports.PrismicEmbed = PrismicEmbed;
 exports.PrismicImage = PrismicImage;
 exports.PrismicLink = PrismicLink;