@prismicio/vue 3.0.0-beta.6 → 3.0.0-beta.9

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,8 +86,8 @@ 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 (!__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,
@@ -307,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
@@ -318,7 +328,8 @@ const PrismicTextImpl = /* @__PURE__ */ vue.defineComponent({
   props: {
     field: {
       type: Array,
-      required: true
+      default: void 0,
+      required: false
     },
     separator: {
       type: String,
@@ -329,12 +340,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);
@@ -350,10 +363,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
@@ -364,7 +381,8 @@ const PrismicRichTextImpl = /* @__PURE__ */ vue.defineComponent({
   props: {
     field: {
       type: Array,
-      required: true
+      default: void 0,
+      required: false
     },
     linkResolver: {
       type: Function,
@@ -380,12 +398,14 @@ 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);
@@ -432,11 +452,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,
@@ -459,16 +474,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}"`]);
     };
   }
 });
@@ -522,11 +536,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) {
@@ -534,7 +549,7 @@ const SliceZoneImpl = /* @__PURE__ */ vue.defineComponent({
           }
         }
         const p = {
-          key: `${slice.slice_type}-${index}`,
+          key: `${index}-${JSON.stringify(slice)}`,
           slice,
           index,
           context: props.context,