vue-datocms 8.1.5 → 8.1.7

package/README.md

@@ -35,12 +35,14 @@ A set of components and utilities to work faster with [DatoCMS](https://www.dato
 
 [Components](https://vuejs.org/guide/essentials/component-basics.html):
 
+- [`<ContentLink />`](src/components/ContentLink) for Visual Editing with click-to-edit overlays
 - [`<Image />` and `<NakedImage />`](src/components/Image)
 - [`<VideoPlayer />`](src/components/VideoPlayer)
 - [`<StructuredText />`](src/components/StructuredText)
 
 [Composables](https://vuejs.org/guide/reusability/composables.html):
 
+- [`useContentLink`](src/composables/useContentLink) for Visual Editing
 - [`useQuerySubscription`](src/composables/useQuerySubscription)
 - [`useSiteSearch`](src/composables/useSiteSearch)
 - [`useVideoPlayer`](src/composables/useVideoPlayer)

package/dist/index.cjs.js

@@ -1,34 +1,177 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var vue = require('vue');
+var contentLink = require('@datocms/content-link');
 var hypenateStyleName = require('hyphenate-style-name');
 var datocmsStructuredTextGenericHtmlRenderer = require('datocms-structured-text-generic-html-renderer');
 var datocmsStructuredTextUtils = require('datocms-structured-text-utils');
 var datocmsListen = require('datocms-listen');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function useContentLink(options = {}) {
+  const { enabled = true, onNavigateTo, root } = options;
+  const controller = vue.ref(null);
+  const onNavigateToRef = vue.ref(onNavigateTo);
+  vue.watch(
+    () => onNavigateTo,
+    (newCallback) => {
+      onNavigateToRef.value = newCallback;
+    }
+  );
+  const initializeController = () => {
+    const isEnabled = enabled === true || typeof enabled === "object" && enabled !== null;
+    if (!isEnabled) return;
+    if (controller.value) {
+      controller.value.dispose();
+    }
+    const controllerOptions = {};
+    if (typeof enabled === "object") {
+      controllerOptions.stripStega = enabled.stripStega;
+    }
+    if (onNavigateToRef.value) {
+      controllerOptions.onNavigateTo = (path) => {
+        var _a;
+        return (_a = onNavigateToRef.value) == null ? void 0 : _a.call(onNavigateToRef, path);
+      };
+    }
+    if (root == null ? void 0 : root.value) {
+      controllerOptions.root = root.value;
+    }
+    controller.value = contentLink.createController(controllerOptions);
+  };
+  vue.onMounted(() => {
+    initializeController();
+  });
+  vue.onUnmounted(() => {
+    if (controller.value) {
+      controller.value.dispose();
+      controller.value = null;
+    }
+  });
+  if (root) {
+    vue.watch(
+      root,
+      () => {
+        if (enabled) {
+          initializeController();
+        }
+      },
+      { flush: "post" }
+    );
+  }
+  const enableClickToEdit = (opts) => {
+    var _a;
+    (_a = controller.value) == null ? void 0 : _a.enableClickToEdit(opts);
+  };
+  const disableClickToEdit = () => {
+    var _a;
+    (_a = controller.value) == null ? void 0 : _a.disableClickToEdit();
+  };
+  const isClickToEditEnabled = () => {
+    var _a, _b;
+    return (_b = (_a = controller.value) == null ? void 0 : _a.isClickToEditEnabled()) != null ? _b : false;
+  };
+  const flashAll = (scrollToNearestTarget) => {
+    var _a;
+    (_a = controller.value) == null ? void 0 : _a.flashAll(scrollToNearestTarget);
+  };
+  const setCurrentPath = (path) => {
+    var _a;
+    (_a = controller.value) == null ? void 0 : _a.setCurrentPath(path);
+  };
+  return {
+    controller,
+    enableClickToEdit,
+    disableClickToEdit,
+    isClickToEditEnabled,
+    flashAll,
+    setCurrentPath
+  };
+}
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
+const ContentLink = vue.defineComponent({
+  name: "DatocmsContentLink",
+  props: {
+    /**
+     * Callback when Web Previews plugin requests navigation.
+     * Use this to integrate with your router.
+     *
+     * @example
+     * With Vue Router: `(path) => router.push(path)`
+     * With Nuxt: `(path) => navigateTo(path)`
+     */
+    onNavigateTo: {
+      type: Function,
+      required: false
+    },
+    /**
+     * Root element to limit scanning to (instead of document).
+     * Pass a ref to a parent element to limit the scope of content link scanning.
+     */
+    root: {
+      type: Object,
+      required: false
+    },
+    /**
+     * Current pathname to sync with Web Previews plugin.
+     * This keeps the plugin in sync with the current page being previewed.
+     *
+     * @example
+     * With Vue Router: `route.path`
+     * With Nuxt: `route.path`
+     */
+    currentPath: {
+      type: String,
+      required: false
+    },
+    /**
+     * Enable click-to-edit on mount. Pass true for default behavior or an object with scrollToNearestTarget.
+     * If undefined, click-to-edit is disabled and editors can use Alt/Option key for temporary activation.
+     */
+    enableClickToEdit: {
+      type: [Boolean, Object],
+      required: false
+    },
+    /**
+     * Whether to strip stega encoding from text nodes after stamping.
+     */
+    stripStega: {
+      type: Boolean,
+      required: false
+    }
+  },
+  setup(props) {
+    const {
+      enableClickToEdit: enableClickToEditFn,
+      setCurrentPath
+    } = useContentLink({
+      enabled: props.stripStega !== void 0 ? { stripStega: props.stripStega } : true,
+      onNavigateTo: props.onNavigateTo,
+      root: props.root
+    });
+    vue.onMounted(() => {
+      if (props.enableClickToEdit !== void 0) {
+        enableClickToEditFn(
+          props.enableClickToEdit === true ? void 0 : props.enableClickToEdit
+        );
       }
     });
+    vue.watch(
+      () => props.currentPath,
+      (newPath) => {
+        if (newPath !== void 0) {
+          setCurrentPath(newPath);
+        }
+      },
+      { immediate: true }
+    );
+    return () => null;
   }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var hypenateStyleName__default = /*#__PURE__*/_interopDefaultLegacy(hypenateStyleName);
+});
+const DatocmsContentLinkPlugin = {
+  install: (Vue) => {
+    Vue.component("DatocmsContentLink", ContentLink);
+  }
+};
 
 const isSsr = () => {
   return typeof window === "undefined";
@@ -60,7 +203,7 @@ const toCss = (object) => {
   let result = "";
   for (const styleName in object) {
     if (Object.prototype.hasOwnProperty.call(object, styleName) && object[styleName]) {
-      result += `${hypenateStyleName__default["default"](styleName)}: ${object[styleName]}; `;
+      result += `${hypenateStyleName(styleName)}: ${object[styleName]}; `;
     }
   }
   return result.length > 0 ? result : null;
@@ -279,67 +422,108 @@ const Image$1 = vue.defineComponent({
   inheritAttrs: false,
   emits: ["load"],
   props: {
+    /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
     data: {
       type: Object,
       required: true
     },
+    /** Additional CSS class for the `<picture />` tag */
     pictureClass: {
       type: String
     },
+    /** Additional CSS class for the image inside the `<picture />` tag */
     imgClass: {
       type: String
     },
+    /** Additional CSS class for the placeholder image */
     placeholderClass: {
       type: String
     },
+    /** Duration (in ms) of the fade-in transition effect upoad image loading */
     fadeInDuration: {
       type: Number
     },
+    /** @deprecated Use the intersectionThreshold prop */
     intersectionTreshold: {
       type: Number,
       default: 0
     },
+    /** Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't considered passed until every pixel is visible */
     intersectionThreshold: {
       type: Number
     },
+    /** Margin around the placeholder. Can have values similar to the CSS margin property (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the placeholder element's bounding box before computing intersections */
     intersectionMargin: {
       type: String,
       default: "0px 0px 0px 0px"
     },
+    /** Additional CSS rules to add to the `<picture />` tag */
     pictureStyle: {
       type: Object,
       default: () => ({})
     },
+    /** Additional CSS rules to add to the image inside the `<picture />` tag */
     imgStyle: {
       type: Object,
       default: () => ({})
     },
+    /** Additional CSS rules to add to the placeholder image */
     placeholderStyle: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * The layout behavior of the image as the viewport changes size
+     *
+     * Possible values:
+     *
+     * * `intrinsic`: the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports
+     * * `fixed`: the image dimensions will not change as the viewport changes (no responsiveness) similar to the native img element
+     * * `responsive` (default): the image will scale the dimensions down for smaller viewports and scale up for larger viewports
+     * * `fill`: image will stretch both width and height to the dimensions of the parent element, provided the parent element is `relative`
+     **/
     layout: {
       type: String,
       default: () => "intrinsic",
       validator: (value) => ["intrinsic", "fixed", "responsive", "fill"].includes(value)
     },
+    /** Defines how the image will fit into its parent container when using layout="fill" */
     objectFit: {
       type: String
     },
+    /** Defines how the image is positioned within its parent element when using layout="fill". */
     objectPosition: {
       type: String
     },
+    /** Whether the component should use a blurred image placeholder */
     usePlaceholder: {
       type: Boolean,
       default: true
     },
+    /**
+     * The HTML5 `sizes` attribute for the image
+     *
+     * Learn more about srcset and sizes:
+     * -> https://web.dev/learn/design/responsive-images/#sizes
+     * -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
+     **/
     sizes: {
       type: String
     },
+    /**
+     * When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.
+     * You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.
+     * Should only be used when the image is visible above the fold.
+     **/
     priority: {
       type: Boolean,
       default: false
     },
+    /**
+     * If `data` does not contain `srcSet`, the candidates for the `srcset` of the image will be auto-generated based on these width multipliers
+     *
+     * Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
+     **/
     srcSetCandidates: {
       type: Array,
       validator: (values) => values.every((value) => {
@@ -347,6 +531,12 @@ const Image$1 = vue.defineComponent({
       }),
       default: () => [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
     },
+    /**
+     * 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: String,
       default: "no-referrer-when-downgrade"
@@ -405,6 +595,10 @@ const Image$1 = vue.defineComponent({
     const basePlaceholderStyle = __spreadValues$5({
       transition,
       opacity: showImage ? 0 : 1,
+      // During the opacity transition of the placeholder to the definitive version,
+      // hardware acceleration is triggered. This results in the browser trying to render the
+      // placeholder with your GPU, causing blurred edges. Solution: style the placeholder
+      // so the edges overflow the container
       position: "absolute",
       left: "-5%",
       top: "-5%",
@@ -532,21 +726,40 @@ const NakedImage = vue.defineComponent({
   name: "DatocmsNakedImage",
   inheritAttrs: false,
   props: {
+    /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
     data: {
       type: Object,
       required: true
     },
+    /** Whether the component should use a blurred image placeholder */
     usePlaceholder: {
       type: Boolean,
       default: true
     },
+    /**
+     * The HTML5 `sizes` attribute for the image
+     *
+     * Learn more about srcset and sizes:
+     * -> https://web.dev/learn/design/responsive-images/#sizes
+     * -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
+     **/
     sizes: {
       type: String
     },
+    /**
+     * When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.
+     * You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.
+     * Should only be used when the image is visible above the fold.
+     **/
     priority: {
       type: Boolean,
       default: false
     },
+    /**
+     * If `data` does not contain `srcSet`, the candidates for the `srcset` of the image will be auto-generated based on these width multipliers
+     *
+     * Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
+     **/
     srcSetCandidates: {
       type: Array,
       validator: (values) => values.every((value) => {
@@ -554,20 +767,30 @@ const NakedImage = vue.defineComponent({
       }),
       default: () => [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
     },
+    /** Additional CSS class for the root `<picture />` tag */
     pictureClass: {
       type: String
     },
+    /** Additional CSS rules to add to the root `<picture />` tag */
     pictureStyle: {
       type: Object,
       default: () => ({})
     },
+    /** Additional CSS class for the `<img />` tag */
     imgClass: {
       type: String
     },
+    /** Additional CSS rules to add to the `<img />` tag */
     imgStyle: {
       type: Object,
       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: String,
       default: "no-referrer-when-downgrade"
@@ -669,33 +892,45 @@ function appendKeyToValidElement(element, key) {
 const StructuredText = vue.defineComponent({
   name: "DatocmsStructuredText",
   props: {
+    /** The actual field value you get from DatoCMS **/
     data: {
       type: Object
     },
+    /** @deprecated use customNodeRules **/
     customRules: {
       type: Array
     },
+    /** A set of additional rules to convert the document to JSX **/
     customNodeRules: {
       type: Array
     },
+    /** A set of additional rules to convert the document to JSX **/
     customMarkRules: {
       type: Array
     },
+    /** Fuction that converts an 'inlineItem' node into a Vue component **/
     renderInlineRecord: {
       type: Function
     },
+    /** Fuction that converts an 'itemLink' node into a Vue component **/
     renderLinkToRecord: {
       type: Function
     },
+    /** Fuction that converts a 'block' node into a Vue component **/
     renderBlock: {
       type: Function
     },
+    /** Fuction that converts an 'inlineBlock' node into a Vue component **/
     renderInlineBlock: {
       type: Function
     },
+    /** Function that converts 'link' and 'itemLink' `meta` into HTML props */
     metaTransformer: { type: Function },
+    /** Fuction that converts a simple string text into a Vue component **/
     renderText: { type: Function },
+    /** React.createElement-like function to use to convert a node into a Vue component **/
     renderNode: { type: Function },
+    /** Function to use to generate a Vue.Fragment **/
     renderFragment: { type: Function }
   },
   setup(props) {
@@ -858,13 +1093,11 @@ const computedTitle = (title) => {
   return title ? { title } : void 0;
 };
 const computedPlaybackId = (muxPlaybackId, playbackId) => {
-  if (!(muxPlaybackId || playbackId))
-    return void 0;
+  if (!(muxPlaybackId || playbackId)) return void 0;
   return { playbackId: `${muxPlaybackId || playbackId}` };
 };
 const computedStyle = (width, height) => {
-  if (!(width && height))
-    return void 0;
+  if (!(width && height)) return void 0;
   return {
     style: {
       aspectRatio: `${width} / ${height}`
@@ -878,8 +1111,7 @@ const useVideoPlayer = ({
   data
 }) => {
   const { title, width, height, playbackId, muxPlaybackId, blurUpThumb } = data || {};
-  if (data === void 0)
-    return {};
+  if (data === void 0) return {};
   return __spreadValues$3(__spreadValues$3(__spreadValues$3(__spreadValues$3({}, computedTitle(title) || {}), computedPlaybackId(muxPlaybackId, playbackId) || {}), computedStyle(width, height) || {}), computedPlaceholder(blurUpThumb) || {});
 };
 
@@ -916,8 +1148,7 @@ var __objRest$1 = (source, exclude) => {
 };
 const isNil = (x) => x == void 0;
 const isKeyOf = (k, o) => {
-  if (isNil(o))
-    return false;
+  if (isNil(o)) return false;
   return k in o;
 };
 const PropToAttrNameMap = {
@@ -930,21 +1161,15 @@ const PropToAttrNameMap = {
 };
 const toKebabCase = (string) => string.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 const toNativeAttrName = (propName, propValue) => {
-  if (typeof propValue === "boolean" && !propValue)
-    return void 0;
-  if (isKeyOf(propName, PropToAttrNameMap))
-    return PropToAttrNameMap[propName];
-  if (typeof propValue == void 0)
-    return void 0;
-  if (/[A-Z]/.test(propName))
-    return toKebabCase(propName);
+  if (typeof propValue === "boolean" && !propValue) return void 0;
+  if (isKeyOf(propName, PropToAttrNameMap)) return PropToAttrNameMap[propName];
+  if (typeof propValue == void 0) return void 0;
+  if (/[A-Z]/.test(propName)) return toKebabCase(propName);
   return propName;
 };
 const toNativeAttrValue = (propValue, propName) => {
-  if (Array.isArray(propValue))
-    return propValue.join(" ");
-  if (typeof propValue === "boolean")
-    return propValue;
+  if (Array.isArray(propValue)) return propValue.join(" ");
+  if (typeof propValue === "boolean") return propValue;
   return propValue;
 };
 const toHTMLAttrs = (props = {}) => {
@@ -1242,8 +1467,9 @@ const VideoPlayer = vue.defineComponent({
       "disableTracking",
       "preload"
     ]);
-    Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@mux/mux-player')); });
+    import('@mux/mux-player');
     const muxPlayerRef = vue.ref();
+    const { alt } = data;
     const computedProps = __spreadProps$2(__spreadValues$2({}, useVideoPlayer({ data })), {
       disableCookies,
       disableTracking,
@@ -1252,7 +1478,8 @@ const VideoPlayer = vue.defineComponent({
     return {
       muxPlayerRef,
       computedProps,
-      otherProps
+      otherProps,
+      alt
     };
   },
   mounted() {
@@ -1337,7 +1564,8 @@ const VideoPlayer = vue.defineComponent({
   render() {
     return vue.h("mux-player", __spreadValues$2(__spreadValues$2({
       ref: "muxPlayerRef",
-      "stream-type": "on-demand"
+      "stream-type": "on-demand",
+      "data-datocms-content-link-source": this.alt
     }, toHTMLAttrs(this.computedProps)), toHTMLAttrs(this.otherProps)));
   }
 });
@@ -1593,6 +1821,14 @@ const toHead = (...args) => {
   };
 };
 
+Object.defineProperty(exports, 'decodeStega', {
+  enumerable: true,
+  get: function () { return contentLink.decodeStega; }
+});
+Object.defineProperty(exports, 'stripStega', {
+  enumerable: true,
+  get: function () { return contentLink.stripStega; }
+});
 Object.defineProperty(exports, 'renderMarkRule', {
   enumerable: true,
   get: function () { return datocmsStructuredTextGenericHtmlRenderer.renderMarkRule; }
@@ -1609,6 +1845,8 @@ Object.defineProperty(exports, 'RenderError', {
   enumerable: true,
   get: function () { return datocmsStructuredTextUtils.RenderError; }
 });
+exports.ContentLink = ContentLink;
+exports.DatocmsContentLinkPlugin = DatocmsContentLinkPlugin;
 exports.DatocmsImagePlugin = DatocmsImagePlugin;
 exports.DatocmsNakedImagePlugin = DatocmsNakedImagePlugin;
 exports.DatocmsStructuredTextPlugin = DatocmsStructuredTextPlugin;
@@ -1624,6 +1862,7 @@ exports.isNil = isNil;
 exports.toHead = toHead;
 exports.toNativeAttrName = toNativeAttrName;
 exports.toNativeAttrValue = toNativeAttrValue;
+exports.useContentLink = useContentLink;
 exports.useQuerySubscription = useQuerySubscription;
 exports.useSiteSearch = useSiteSearch;
 exports.useVideoPlayer = useVideoPlayer;