vue-datocms 8.1.8 → 8.1.10

package/dist/index.cjs.js

@@ -124,8 +124,19 @@ const ContentLink = vue.defineComponent({
       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.
+     * Whether to enable click-to-edit overlays on mount, or options to configure them.
+     *
+     * - `true`: Enable click-to-edit mode immediately
+     * - `{ scrollToNearestTarget: true }`: Enable and scroll to nearest editable if none visible
+     * - `{ hoverOnly: true }`: Only enable on devices with hover capability (non-touch)
+     * - `false`/`undefined`: Don't enable automatically (use Alt/Option key to toggle)
+     *
+     * @example
+     * ```vue
+     * <ContentLink :enable-click-to-edit="true" />
+     * <ContentLink :enable-click-to-edit="{ scrollToNearestTarget: true }" />
+     * <ContentLink :enable-click-to-edit="{ hoverOnly: true, scrollToNearestTarget: true }" />
+     * ```
      */
     enableClickToEdit: {
       type: [Boolean, Object],
@@ -146,7 +157,7 @@ const ContentLink = vue.defineComponent({
       root: props.root
     });
     vue.onMounted(() => {
-      if (props.enableClickToEdit !== void 0) {
+      if (props.enableClickToEdit) {
         enableClickToEditFn(
           props.enableClickToEdit === true ? void 0 : props.enableClickToEdit
         );

package/dist/index.d.ts

@@ -11,6 +11,29 @@ import { StreamTypes, MaxResolutionValue, MinResolutionValue, CmcdTypes, Playbac
 import MuxPlayerElement, { Tokens } from '@mux/mux-player';
 import { Options, ConnectionStatus } from 'datocms-listen';
 
+interface ClickToEditOptions {
+    /**
+     * Whether to automatically scroll to the nearest editable element if none
+     * is currently visible in the viewport when click-to-edit mode is enabled.
+     *
+     * @default false
+     */
+    scrollToNearestTarget?: boolean;
+    /**
+     * Only enable click-to-edit on devices that support hover (i.e., non-touch devices).
+     * Uses `window.matchMedia('(hover: hover)')` to detect hover capability.
+     *
+     * This is useful to avoid showing overlays on touch devices where they may
+     * interfere with normal scrolling and tapping behavior.
+     *
+     * When set to `true` on a touch-only device, click-to-edit will not be
+     * automatically enabled, but users can still toggle it manually using
+     * the Alt/Option key.
+     *
+     * @default false
+     */
+    hoverOnly?: boolean;
+}
 type UseContentLinkOptions = {
     /**
      * Whether the controller is enabled, or an options object.
@@ -38,9 +61,7 @@ type UseContentLinkResult = {
     /** The controller instance, or null if disabled */
     controller: Ref<Controller | null>;
     /** Enable click-to-edit overlays */
-    enableClickToEdit: (options?: {
-        scrollToNearestTarget: boolean;
-    }) => void;
+    enableClickToEdit: (options?: ClickToEditOptions) => void;
     /** Disable click-to-edit overlays */
     disableClickToEdit: () => void;
     /** Check if click-to-edit is enabled */
@@ -94,10 +115,22 @@ declare function useContentLink(options?: UseContentLinkOptions): UseContentLink
 type ContentLinkProps = Omit<UseContentLinkOptions, 'enabled'> & {
     /** Current pathname to sync with Web Previews plugin */
     currentPath?: string;
-    /** Enable click-to-edit on mount. Pass true for default behavior or an object with scrollToNearestTarget. If undefined, click-to-edit is disabled. */
-    enableClickToEdit?: true | {
-        scrollToNearestTarget: true;
-    };
+    /**
+     * Whether to enable click-to-edit overlays on mount, or options to configure them.
+     *
+     * - `true`: Enable click-to-edit mode immediately
+     * - `{ scrollToNearestTarget: true }`: Enable and scroll to nearest editable if none visible
+     * - `{ hoverOnly: true }`: Only enable on devices with hover capability (non-touch)
+     * - `false`/`undefined`: Don't enable automatically (use Alt/Option key to toggle)
+     *
+     * @example
+     * ```vue
+     * <ContentLink :enable-click-to-edit="true" />
+     * <ContentLink :enable-click-to-edit="{ scrollToNearestTarget: true }" />
+     * <ContentLink :enable-click-to-edit="{ hoverOnly: true, scrollToNearestTarget: true }" />
+     * ```
+     */
+    enableClickToEdit?: boolean | ClickToEditOptions;
     /** Whether to strip stega encoding from text nodes after stamping. */
     stripStega?: boolean;
 };
@@ -225,13 +258,22 @@ declare const ContentLink: vue.DefineComponent<{
         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.
+     * Whether to enable click-to-edit overlays on mount, or options to configure them.
+     *
+     * - `true`: Enable click-to-edit mode immediately
+     * - `{ scrollToNearestTarget: true }`: Enable and scroll to nearest editable if none visible
+     * - `{ hoverOnly: true }`: Only enable on devices with hover capability (non-touch)
+     * - `false`/`undefined`: Don't enable automatically (use Alt/Option key to toggle)
+     *
+     * @example
+     * ```vue
+     * <ContentLink :enable-click-to-edit="true" />
+     * <ContentLink :enable-click-to-edit="{ scrollToNearestTarget: true }" />
+     * <ContentLink :enable-click-to-edit="{ hoverOnly: true, scrollToNearestTarget: true }" />
+     * ```
      */
     enableClickToEdit: {
-        type: PropType<true | {
-            scrollToNearestTarget: true;
-        }>;
+        type: PropType<boolean | ClickToEditOptions>;
         required: false;
     };
     /**
@@ -275,13 +317,22 @@ declare const ContentLink: vue.DefineComponent<{
         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.
+     * Whether to enable click-to-edit overlays on mount, or options to configure them.
+     *
+     * - `true`: Enable click-to-edit mode immediately
+     * - `{ scrollToNearestTarget: true }`: Enable and scroll to nearest editable if none visible
+     * - `{ hoverOnly: true }`: Only enable on devices with hover capability (non-touch)
+     * - `false`/`undefined`: Don't enable automatically (use Alt/Option key to toggle)
+     *
+     * @example
+     * ```vue
+     * <ContentLink :enable-click-to-edit="true" />
+     * <ContentLink :enable-click-to-edit="{ scrollToNearestTarget: true }" />
+     * <ContentLink :enable-click-to-edit="{ hoverOnly: true, scrollToNearestTarget: true }" />
+     * ```
      */
     enableClickToEdit: {
-        type: PropType<true | {
-            scrollToNearestTarget: true;
-        }>;
+        type: PropType<boolean | ClickToEditOptions>;
         required: false;
     };
     /**
@@ -1644,4 +1695,4 @@ declare const toHead: (...args: ToMetaTagsType[]) => {
     }[];
 };
 
-export { ContentLink, ContentLinkProps, DatocmsContentLinkPlugin, DatocmsImagePlugin, DatocmsNakedImagePlugin, DatocmsStructuredTextPlugin, DatocmsVideoPlayerPlugin, DisabledQueryListenerOptions, EnabledQueryListenerOptions, GenericClient, Image, NakedImage, QueryListenerOptions, RawSearchResult, RenderBlockContext, RenderInlineRecordContext, RenderRecordLinkContext, ResponsiveImageType, SeoMetaTagType, StructuredText, SubscribeToQueryOptions, ToMetaTagsType, UseContentLinkOptions, UseContentLinkResult, UseSiteSearchConfig, UseSiteSearchData, UseSiteSearchResult, Video, VideoPlayer, appendKeyToValidElement, defaultAdapter, isKeyOf, isNil, toHead, toNativeAttrName, toNativeAttrValue, useContentLink, useQuerySubscription, useSiteSearch, useVideoPlayer };
+export { ClickToEditOptions, ContentLink, ContentLinkProps, DatocmsContentLinkPlugin, DatocmsImagePlugin, DatocmsNakedImagePlugin, DatocmsStructuredTextPlugin, DatocmsVideoPlayerPlugin, DisabledQueryListenerOptions, EnabledQueryListenerOptions, GenericClient, Image, NakedImage, QueryListenerOptions, RawSearchResult, RenderBlockContext, RenderInlineRecordContext, RenderRecordLinkContext, ResponsiveImageType, SeoMetaTagType, StructuredText, SubscribeToQueryOptions, ToMetaTagsType, UseContentLinkOptions, UseContentLinkResult, UseSiteSearchConfig, UseSiteSearchData, UseSiteSearchResult, Video, VideoPlayer, appendKeyToValidElement, defaultAdapter, isKeyOf, isNil, toHead, toNativeAttrName, toNativeAttrValue, useContentLink, useQuerySubscription, useSiteSearch, useVideoPlayer };

package/dist/index.esm.mjs

@@ -125,8 +125,19 @@ const ContentLink = defineComponent({
       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.
+     * Whether to enable click-to-edit overlays on mount, or options to configure them.
+     *
+     * - `true`: Enable click-to-edit mode immediately
+     * - `{ scrollToNearestTarget: true }`: Enable and scroll to nearest editable if none visible
+     * - `{ hoverOnly: true }`: Only enable on devices with hover capability (non-touch)
+     * - `false`/`undefined`: Don't enable automatically (use Alt/Option key to toggle)
+     *
+     * @example
+     * ```vue
+     * <ContentLink :enable-click-to-edit="true" />
+     * <ContentLink :enable-click-to-edit="{ scrollToNearestTarget: true }" />
+     * <ContentLink :enable-click-to-edit="{ hoverOnly: true, scrollToNearestTarget: true }" />
+     * ```
      */
     enableClickToEdit: {
       type: [Boolean, Object],
@@ -147,7 +158,7 @@ const ContentLink = defineComponent({
       root: props.root
     });
     onMounted(() => {
-      if (props.enableClickToEdit !== void 0) {
+      if (props.enableClickToEdit) {
         enableClickToEditFn(
           props.enableClickToEdit === true ? void 0 : props.enableClickToEdit
         );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-datocms",
-  "version": "8.1.8",
+  "version": "8.1.10",
   "type": "module",
   "description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
   "keywords": [