vue-datocms 8.0.0 → 8.1.1

package/dist/index.cjs.js

@@ -346,6 +346,10 @@ const Image$1 = vue.defineComponent({
         return typeof value === "number";
       }),
       default: () => [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
+    },
+    referrerPolicy: {
+      type: String,
+      default: "no-referrer-when-downgrade"
     }
   },
   setup(props, { emit, expose }) {
@@ -460,7 +464,8 @@ const Image$1 = vue.defineComponent({
             }, absolutePositioning), {
               objectFit: this.objectFit,
               objectPosition: this.objectPosition
-            }), this.imgStyle)
+            }), this.imgStyle),
+            referrerpolicy: this.referrerPolicy
           })
         ]),
         vue.h("noscript", {
@@ -491,7 +496,8 @@ const Image$1 = vue.defineComponent({
                   objectPosition: this.objectPosition
                 }), this.imgStyle)),
                 loading: this.priority ? void 0 : "lazy",
-                fetchpriority: this.priority ? "high" : void 0
+                fetchpriority: this.priority ? "high" : void 0,
+                referrerpolicy: this.referrerPolicy
               })
             ]
           )
@@ -561,6 +567,10 @@ const NakedImage = vue.defineComponent({
     imgStyle: {
       type: Object,
       default: () => ({})
+    },
+    referrerPolicy: {
+      type: String,
+      default: "no-referrer-when-downgrade"
     }
   },
   setup(_props, { emit, expose }) {
@@ -631,7 +641,8 @@ const NakedImage = vue.defineComponent({
           fetchpriority: this.priority ? "high" : void 0,
           loading: this.priority ? void 0 : "lazy",
           style: __spreadValues$4(__spreadValues$4(__spreadValues$4({}, placeholderStyle), sizingStyle), this.imgStyle || {}),
-          class: this.imgClass
+          class: this.imgClass,
+          referrerpolicy: this.referrerPolicy
         })
       ]
     );
@@ -679,6 +690,9 @@ const StructuredText = vue.defineComponent({
     renderBlock: {
       type: Function
     },
+    renderInlineBlock: {
+      type: Function
+    },
     metaTransformer: { type: Function },
     renderText: { type: Function },
     renderNode: { type: Function },
@@ -785,6 +799,33 @@ const StructuredText = vue.defineComponent({
               key
             );
           }),
+          datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isInlineBlock, ({ node, key }) => {
+            if (!props.renderInlineBlock) {
+              throw new datocmsStructuredTextUtils.RenderError(
+                `The Structured Text document contains an 'inlineBlock' node, but no 'renderInlineBlock' prop is specified!`,
+                node
+              );
+            }
+            if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.blocks) {
+              throw new datocmsStructuredTextUtils.RenderError(
+                `The Structured Text document contains an 'inlineBlock' node, but .blocks is not present!`,
+                node
+              );
+            }
+            const item = props.data.blocks.find(
+              (item2) => item2.id === node.item
+            );
+            if (!item) {
+              throw new datocmsStructuredTextUtils.RenderError(
+                `The Structured Text document contains a 'block' node, but cannot find a record with ID ${node.item} inside .blocks!`,
+                node
+              );
+            }
+            return appendKeyToValidElement(
+              props.renderInlineBlock({ record: item }),
+              key
+            );
+          }),
           ...props.customNodeRules || props.customRules || []
         ]
       });

package/dist/index.d.ts

@@ -142,6 +142,16 @@ declare const Image: vue.DefineComponent<{
         validator: (values: any[]) => values is number[];
         default: () => number[];
     };
+    /**
+     * Defines which referrer is sent when fetching the image
+     * Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy
+     *
+     * Defaults to `no-referrer-when-downgrade` to give more useful stats in DatoCMS Project Usages
+     **/
+    referrerPolicy: {
+        type: StringConstructor;
+        default: string;
+    };
 }, {
     inView: vue.Ref<boolean>;
     rootRef: vue.Ref<HTMLElement | null>;
@@ -256,6 +266,16 @@ declare const Image: vue.DefineComponent<{
         validator: (values: any[]) => values is number[];
         default: () => number[];
     };
+    /**
+     * Defines which referrer is sent when fetching the image
+     * Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy
+     *
+     * Defaults to `no-referrer-when-downgrade` to give more useful stats in DatoCMS Project Usages
+     **/
+    referrerPolicy: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & {
     onLoad?: ((...args: any[]) => any) | undefined;
 }, {
@@ -268,6 +288,7 @@ declare const Image: vue.DefineComponent<{
     layout: string;
     usePlaceholder: boolean;
     srcSetCandidates: unknown[];
+    referrerPolicy: string;
 }, {}>;
 declare const DatocmsImagePlugin: {
     install: (Vue: any) => void;
@@ -331,6 +352,16 @@ declare const NakedImage: vue.DefineComponent<{
         type: ObjectConstructor;
         default: () => {};
     };
+    /**
+     * Defines which referrer is sent when fetching the image
+     * Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy
+     *
+     * Defaults to `no-referrer-when-downgrade` to give more useful stats in DatoCMS Project Usages
+     **/
+    referrerPolicy: {
+        type: StringConstructor;
+        default: string;
+    };
 }, {
     loaded: vue.Ref<boolean>;
     handleLoad: () => void;
@@ -393,12 +424,23 @@ declare const NakedImage: vue.DefineComponent<{
         type: ObjectConstructor;
         default: () => {};
     };
+    /**
+     * Defines which referrer is sent when fetching the image
+     * Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy
+     *
+     * Defaults to `no-referrer-when-downgrade` to give more useful stats in DatoCMS Project Usages
+     **/
+    referrerPolicy: {
+        type: StringConstructor;
+        default: string;
+    };
 }>>, {
     priority: boolean;
     pictureStyle: Record<string, any>;
     imgStyle: Record<string, any>;
     usePlaceholder: boolean;
     srcSetCandidates: unknown[];
+    referrerPolicy: string;
 }, {}>;
 declare const DatocmsNakedImagePlugin: {
     install: (Vue: any) => void;
@@ -443,31 +485,35 @@ declare const StructuredText: vue.DefineComponent<{
     customMarkRules: {
         type: PropType<RenderMarkRule<typeof h, (text: string, _key: string) => AdapterReturn, (children: AdapterReturn[], _key: string) => AdapterReturn>[]>;
     };
-    /** Fuction that converts an 'inlineItem' node into React **/
+    /** Fuction that converts an 'inlineItem' node into a Vue component **/
     renderInlineRecord: {
         type: PropType<(context: RenderInlineRecordContext<any>) => AdapterReturn>;
     };
-    /** Fuction that converts an 'itemLink' node into React **/
+    /** Fuction that converts an 'itemLink' node into a Vue component **/
     renderLinkToRecord: {
         type: PropType<(context: RenderRecordLinkContext<any>) => AdapterReturn>;
     };
-    /** Fuction that converts a 'block' node into React **/
+    /** Fuction that converts a 'block' node into a Vue component **/
     renderBlock: {
         type: PropType<(context: RenderBlockContext<any>) => AdapterReturn>;
     };
+    /** Fuction that converts an 'inlineBlock' node into a Vue component **/
+    renderInlineBlock: {
+        type: PropType<(context: RenderBlockContext<any>) => AdapterReturn>;
+    };
     /** Function that converts 'link' and 'itemLink' `meta` into HTML props */
     metaTransformer: {
         type: PropType<TransformMetaFn>;
     };
-    /** Fuction that converts a simple string text into React **/
+    /** Fuction that converts a simple string text into a Vue component **/
     renderText: {
         type: PropType<(text: string, _key: string) => AdapterReturn>;
     };
-    /** React.createElement-like function to use to convert a node into React **/
+    /** React.createElement-like function to use to convert a node into a Vue component **/
     renderNode: {
         type: PropType<typeof h>;
     };
-    /** Function to use to generate a React.Fragment **/
+    /** Function to use to generate a Vue.Fragment **/
     renderFragment: {
         type: PropType<(children: AdapterReturn[], _key: string) => AdapterReturn>;
     };
@@ -488,31 +534,35 @@ declare const StructuredText: vue.DefineComponent<{
     customMarkRules: {
         type: PropType<RenderMarkRule<typeof h, (text: string, _key: string) => AdapterReturn, (children: AdapterReturn[], _key: string) => AdapterReturn>[]>;
     };
-    /** Fuction that converts an 'inlineItem' node into React **/
+    /** Fuction that converts an 'inlineItem' node into a Vue component **/
     renderInlineRecord: {
         type: PropType<(context: RenderInlineRecordContext<any>) => AdapterReturn>;
     };
-    /** Fuction that converts an 'itemLink' node into React **/
+    /** Fuction that converts an 'itemLink' node into a Vue component **/
     renderLinkToRecord: {
         type: PropType<(context: RenderRecordLinkContext<any>) => AdapterReturn>;
     };
-    /** Fuction that converts a 'block' node into React **/
+    /** Fuction that converts a 'block' node into a Vue component **/
     renderBlock: {
         type: PropType<(context: RenderBlockContext<any>) => AdapterReturn>;
     };
+    /** Fuction that converts an 'inlineBlock' node into a Vue component **/
+    renderInlineBlock: {
+        type: PropType<(context: RenderBlockContext<any>) => AdapterReturn>;
+    };
     /** Function that converts 'link' and 'itemLink' `meta` into HTML props */
     metaTransformer: {
         type: PropType<TransformMetaFn>;
     };
-    /** Fuction that converts a simple string text into React **/
+    /** Fuction that converts a simple string text into a Vue component **/
     renderText: {
         type: PropType<(text: string, _key: string) => AdapterReturn>;
     };
-    /** React.createElement-like function to use to convert a node into React **/
+    /** React.createElement-like function to use to convert a node into a Vue component **/
     renderNode: {
         type: PropType<typeof h>;
     };
-    /** Function to use to generate a React.Fragment **/
+    /** Function to use to generate a Vue.Fragment **/
     renderFragment: {
         type: PropType<(children: AdapterReturn[], _key: string) => AdapterReturn>;
     };

package/dist/index.esm.mjs

@@ -2,7 +2,7 @@ import { ref, onMounted, onBeforeUnmount, defineComponent, h, watchEffect, unref
 import hypenateStyleName from 'hyphenate-style-name';
 import { render, renderNodeRule, defaultMetaTransformer } from 'datocms-structured-text-generic-html-renderer';
 export { renderMarkRule, renderNodeRule, renderNodeRule as renderRule } from 'datocms-structured-text-generic-html-renderer';
-import { isRoot, isInlineItem, RenderError, isStructuredText, isItemLink, isBlock } from 'datocms-structured-text-utils';
+import { isRoot, isInlineItem, RenderError, isStructuredText, isItemLink, isBlock, isInlineBlock } from 'datocms-structured-text-utils';
 export { RenderError } from 'datocms-structured-text-utils';
 import { subscribeToQuery } from 'datocms-listen';
 
@@ -322,6 +322,10 @@ const Image$1 = defineComponent({
         return typeof value === "number";
       }),
       default: () => [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
+    },
+    referrerPolicy: {
+      type: String,
+      default: "no-referrer-when-downgrade"
     }
   },
   setup(props, { emit, expose }) {
@@ -436,7 +440,8 @@ const Image$1 = defineComponent({
             }, absolutePositioning), {
               objectFit: this.objectFit,
               objectPosition: this.objectPosition
-            }), this.imgStyle)
+            }), this.imgStyle),
+            referrerpolicy: this.referrerPolicy
           })
         ]),
         h("noscript", {
@@ -467,7 +472,8 @@ const Image$1 = defineComponent({
                   objectPosition: this.objectPosition
                 }), this.imgStyle)),
                 loading: this.priority ? void 0 : "lazy",
-                fetchpriority: this.priority ? "high" : void 0
+                fetchpriority: this.priority ? "high" : void 0,
+                referrerpolicy: this.referrerPolicy
               })
             ]
           )
@@ -537,6 +543,10 @@ const NakedImage = defineComponent({
     imgStyle: {
       type: Object,
       default: () => ({})
+    },
+    referrerPolicy: {
+      type: String,
+      default: "no-referrer-when-downgrade"
     }
   },
   setup(_props, { emit, expose }) {
@@ -607,7 +617,8 @@ const NakedImage = defineComponent({
           fetchpriority: this.priority ? "high" : void 0,
           loading: this.priority ? void 0 : "lazy",
           style: __spreadValues$4(__spreadValues$4(__spreadValues$4({}, placeholderStyle), sizingStyle), this.imgStyle || {}),
-          class: this.imgClass
+          class: this.imgClass,
+          referrerpolicy: this.referrerPolicy
         })
       ]
     );
@@ -655,6 +666,9 @@ const StructuredText = defineComponent({
     renderBlock: {
       type: Function
     },
+    renderInlineBlock: {
+      type: Function
+    },
     metaTransformer: { type: Function },
     renderText: { type: Function },
     renderNode: { type: Function },
@@ -761,6 +775,33 @@ const StructuredText = defineComponent({
               key
             );
           }),
+          renderNodeRule(isInlineBlock, ({ node, key }) => {
+            if (!props.renderInlineBlock) {
+              throw new RenderError(
+                `The Structured Text document contains an 'inlineBlock' node, but no 'renderInlineBlock' prop is specified!`,
+                node
+              );
+            }
+            if (!isStructuredText(props.data) || !props.data.blocks) {
+              throw new RenderError(
+                `The Structured Text document contains an 'inlineBlock' node, but .blocks is not present!`,
+                node
+              );
+            }
+            const item = props.data.blocks.find(
+              (item2) => item2.id === node.item
+            );
+            if (!item) {
+              throw new RenderError(
+                `The Structured Text document contains a 'block' node, but cannot find a record with ID ${node.item} inside .blocks!`,
+                node
+              );
+            }
+            return appendKeyToValidElement(
+              props.renderInlineBlock({ record: item }),
+              key
+            );
+          }),
           ...props.customNodeRules || props.customRules || []
         ]
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-datocms",
-  "version": "8.0.0",
+  "version": "8.1.1",
   "description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
   "keywords": [
     "datocms",
@@ -42,9 +42,9 @@
   },
   "dependencies": {
     "datocms-listen": "^0.1.15",
-    "datocms-structured-text-generic-html-renderer": "^4.0.1",
-    "datocms-structured-text-utils": "^4.0.1",
     "hls.js": "^1.5.17",
+    "datocms-structured-text-generic-html-renderer": "^4.1.2",
+    "datocms-structured-text-utils": "^4.1.2",
     "hyphenate-style-name": "^1.0.4"
   },
   "peerDependencies": {