vue-datocms 8.1.14 → 8.1.16

package/README.md

@@ -84,42 +84,20 @@ npm run dev
 
 <a href="https://www.datocms.com/"><img src="https://www.datocms.com/images/full_logo.svg" height="60" alt="DatoCMS - The Headless CMS for the Modern Web"></a>
 
-[DatoCMS](https://www.datocms.com/) is the REST & GraphQL Headless CMS for the modern web.
+[DatoCMS](https://www.datocms.com/) is Headless CMS for the modern web. Trusted by 25,000+ businesses, agencies, and individuals, it gives your team one place to manage content and ship it to any website, app, or device via API.
 
-Trusted by over 25,000 enterprise businesses, agencies, and individuals across the world, DatoCMS users create online content at scale from a central hub and distribute it via API. We ❤️ our [developers](https://www.datocms.com/team/best-cms-for-developers), [content editors](https://www.datocms.com/team/content-creators) and [marketers](https://www.datocms.com/team/cms-digital-marketing)!
+**New here?** Start with [Create free account](https://dashboard.datocms.com/signup) and the [Documentation](https://www.datocms.com/docs). Stuck? Ask the [Community](https://community.datocms.com/). Curious what's new? [Product Updates](https://www.datocms.com/product-updates).
 
-**Why DatoCMS?**
+**Building with AI:** [Agent Skills](https://www.datocms.com/docs/agent-skills) turn coding assistants (Claude Code, Cursor) into expert DatoCMS developers, with full read/write via the auto-installed CLI. No local terminal? Use the [MCP Server](https://www.datocms.com/docs/mcp-server) instead.
 
-- **API-First Architecture**: Built for both REST and GraphQL, enabling flexible content delivery
-- **Just Enough Features**: We believe in keeping things simple, and giving you [the right feature-set tools](https://www.datocms.com/features) to get the job done
-- **Developer Experience**: First-class TypeScript support with powerful developer tools
+**Talking to DatoCMS from code:**
+- [Content Delivery API](https://www.datocms.com/docs/content-delivery-api) (CDA) — the fast, read-only GraphQL API your website/app uses to **fetch** published content.
+- [Content Management API](https://www.datocms.com/docs/content-management-api) (CMA) — the REST API for **creating and updating** content, models, and project settings (think scripts, migrations, integrations).
+- [CLI](https://www.datocms.com/docs/scripting-migrations/installing-the-cli) — terminal tool for schema migrations and importing from Contentful/WordPress.
 
-**Getting Started:**
+**Framework guides:** end-to-end recipes for fetching content, rendering Structured Text, optimizing images/video, handling SEO, and setting up live preview with visual editing in [Next.js](https://www.datocms.com/docs/next-js), [Nuxt](https://www.datocms.com/docs/nuxt), [Svelte](https://www.datocms.com/docs/svelte), and [Astro](https://www.datocms.com/docs/astro).
 
-- ⚡️ [Create Free Account](https://dashboard.datocms.com/signup) - Get started with DatoCMS in minutes
-- 🔖 [Documentation](https://www.datocms.com/docs) - Comprehensive guides and API references
-- ⚙️ [Community Support](https://community.datocms.com/) - Get help from our team and community
-- 🆕 [Changelog](https://www.datocms.com/product-updates) - Latest features and improvements
+**Want a head start?** Browse our [starter projects](https://www.datocms.com/marketplace/starters) — ready-to-deploy example sites for popular frameworks.
 
-**Official Libraries:**
-
-- [**Content Delivery Client**](https://github.com/datocms/cda-client) - TypeScript GraphQL client for content fetching
-- [**REST API Clients**](https://github.com/datocms/js-rest-api-clients) - Node.js/Browser clients for content management
-- [**CLI Tools**](https://github.com/datocms/cli) - Command-line utilities for schema migrations (includes [Contentful](https://github.com/datocms/cli/tree/main/packages/cli-plugin-contentful) and [WordPress](https://github.com/datocms/cli/tree/main/packages/cli-plugin-wordpress) importers)
-
-**Official Framework Integrations**
-
-Helpers to manage SEO, images, video and Structured Text coming from your DatoCMS projects:
-
-- [**React Components**](https://github.com/datocms/react-datocms)
-- [**Vue Components**](https://github.com/datocms/vue-datocms)
-- [**Svelte Components**](https://github.com/datocms/datocms-svelte)
-- [**Astro Components**](https://github.com/datocms/astro-datocms)
-
-**Additional Resources:**
-
-- [**Plugin Examples**](https://github.com/datocms/plugins) - Example plugins we've made that extend the editor/admin dashboard
-- [**Starter Projects**](https://www.datocms.com/marketplace/starters) - Example website implementations for popular frameworks
-- [**All Public Repositories**](https://github.com/orgs/datocms/repositories?q=&type=public&language=&sort=stargazers)
 
 <!--datocms-autoinclude-footer end-->

package/dist/index.cjs.js

@@ -8,7 +8,7 @@ var datocmsStructuredTextUtils = require('datocms-structured-text-utils');
 var datocmsListen = require('datocms-listen');
 
 function useContentLink(options = {}) {
-  const { enabled = true, onNavigateTo, root } = options;
+  const { enabled = true, onNavigateTo, root, hue } = options;
   const controller = vue.ref(null);
   const onNavigateToRef = vue.ref(onNavigateTo);
   vue.watch(
@@ -36,6 +36,9 @@ function useContentLink(options = {}) {
     if (root == null ? void 0 : root.value) {
       controllerOptions.root = root.value;
     }
+    if (hue !== void 0) {
+      controllerOptions.hue = hue;
+    }
     controller.value = contentLink.createController(controllerOptions);
   };
   vue.onMounted(() => {
@@ -153,13 +156,23 @@ const ContentLink = vue.defineComponent({
     stripStega: {
       type: Boolean,
       required: false
+    },
+    /**
+     * Hue (0–359) of the overlay accent color.
+     *
+     * @default 17 (orange)
+     */
+    hue: {
+      type: Number,
+      required: false
     }
   },
   setup(props) {
     const { enableClickToEdit: enableClickToEditFn, setCurrentPath } = useContentLink({
       enabled: props.stripStega !== void 0 ? { stripStega: props.stripStega } : true,
       onNavigateTo: props.onNavigateTo,
-      root: props.root
+      root: props.root,
+      hue: props.hue
     });
     vue.onMounted(() => {
       if (!props.enableClickToEdit) {
@@ -591,7 +604,7 @@ const Image$1 = vue.defineComponent({
     };
   },
   render() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     const addImage = imageAddStrategy({
       priority: this.priority,
       inView: this.inView,
@@ -602,10 +615,11 @@ const Image$1 = vue.defineComponent({
       inView: this.inView,
       loaded: this.loaded
     });
-    const webpSource = buildWebpSource(this.data, this.sizes);
+    const resolvedSizes = (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : this.priority ? void 0 : "auto, 100vw";
+    const webpSource = buildWebpSource(this.data, resolvedSizes);
     const regularSource = buildRegularSource(
       this.data,
-      this.sizes,
+      resolvedSizes,
       this.srcSetCandidates
     );
     const transition = typeof this.fadeInDuration === "undefined" || this.fadeInDuration > 0 ? `opacity ${this.fadeInDuration || 500}ms` : void 0;
@@ -639,7 +653,7 @@ const Image$1 = vue.defineComponent({
       }, basePlaceholderStyle)
     }) : null;
     const { width, aspectRatio } = this.data;
-    const height = (_a = this.data.height) != null ? _a : aspectRatio ? width / aspectRatio : 0;
+    const height = (_c = this.data.height) != null ? _c : aspectRatio ? width / aspectRatio : 0;
     const sizer = this.layout !== "fill" ? vue.h(Sizer, {
       sizerClass: this.imgClass,
       sizerStyle: this.imgStyle,
@@ -665,6 +679,8 @@ const Image$1 = vue.defineComponent({
             src: this.data.src,
             alt: this.data.alt,
             title: this.data.title,
+            sizes: resolvedSizes,
+            loading: this.priority ? void 0 : "lazy",
             fetchpriority: this.priority ? "high" : void 0,
             onLoad: this.handleLoad,
             ref: "imageRef",
@@ -686,7 +702,7 @@ const Image$1 = vue.defineComponent({
             [
               this.data.webpSrcSet && tag("source", {
                 srcset: this.data.webpSrcSet,
-                sizes: (_c = (_b = this.sizes) != null ? _b : this.data.sizes) != null ? _c : void 0,
+                sizes: resolvedSizes,
                 type: "image/webp"
               }),
               tag("source", {
@@ -695,13 +711,14 @@ const Image$1 = vue.defineComponent({
                   this.data.width,
                   this.srcSetCandidates
                 ),
-                sizes: (_f = (_e = this.sizes) != null ? _e : this.data.sizes) != null ? _f : void 0
+                sizes: resolvedSizes
               }),
               tag("img", {
                 src: this.data.src,
                 alt: this.data.alt,
                 title: this.data.title,
                 class: this.imgClass,
+                sizes: resolvedSizes,
                 style: toCss(__spreadValues$5(__spreadProps$3(__spreadValues$5({}, absolutePositioning), {
                   objectFit: this.objectFit,
                   objectPosition: this.objectPosition
@@ -838,15 +855,16 @@ const NakedImage = vue.defineComponent({
     };
   },
   render() {
-    var _a;
-    const webpSource = buildWebpSource(this.data, this.sizes);
+    var _a, _b, _c;
+    const resolvedSizes = (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : this.priority ? void 0 : "auto, 100vw";
+    const webpSource = buildWebpSource(this.data, resolvedSizes);
     const regularSource = buildRegularSource(
       this.data,
-      this.sizes,
+      resolvedSizes,
       this.srcSetCandidates
     );
     const { width } = this.data;
-    const height = (_a = this.data.height) != null ? _a : Math.round(this.data.aspectRatio ? width / this.data.aspectRatio : 0);
+    const height = (_c = this.data.height) != null ? _c : Math.round(this.data.aspectRatio ? width / this.data.aspectRatio : 0);
     const sizingStyle = {
       aspectRatio: `${width} / ${height}`,
       width: "100%",
@@ -878,6 +896,7 @@ const NakedImage = vue.defineComponent({
           alt: this.data.alt,
           onLoad: this.handleLoad,
           title: this.data.title,
+          sizes: resolvedSizes,
           fetchpriority: this.priority ? "high" : void 0,
           loading: this.priority ? void 0 : "lazy",
           style: __spreadValues$4(__spreadValues$4(__spreadValues$4({}, placeholderStyle), sizingStyle), this.imgStyle || {}),

package/dist/index.d.ts

@@ -56,6 +56,12 @@ type UseContentLinkOptions = {
     onNavigateTo?: (path: string) => void;
     /** Root element to limit scanning to (instead of document) */
     root?: Ref<ParentNode | null | undefined>;
+    /**
+     * Hue (0–359) of the overlay accent color.
+     *
+     * @default 17 (orange)
+     */
+    hue?: number;
 };
 type UseContentLinkResult = {
     /** The controller instance, or null if disabled */
@@ -112,7 +118,7 @@ type UseContentLinkResult = {
  */
 declare function useContentLink(options?: UseContentLinkOptions): UseContentLinkResult;
 
-type ContentLinkProps = Omit<UseContentLinkOptions, 'enabled'> & {
+type ContentLinkProps = Omit<UseContentLinkOptions, 'enabled' | 'hue'> & {
     /** Current pathname to sync with Web Previews plugin */
     currentPath?: string;
     /**
@@ -133,6 +139,12 @@ type ContentLinkProps = Omit<UseContentLinkOptions, 'enabled'> & {
     enableClickToEdit?: boolean | ClickToEditOptions;
     /** Whether to strip stega encoding from text nodes after stamping. */
     stripStega?: boolean;
+    /**
+     * Hue (0–359) of the overlay accent color.
+     *
+     * @default 17 (orange)
+     */
+    hue?: number;
 };
 /**
  * ContentLink component enables Visual Editing for DatoCMS content.
@@ -283,6 +295,15 @@ declare const ContentLink: vue.DefineComponent<{
         type: BooleanConstructor;
         required: false;
     };
+    /**
+     * Hue (0–359) of the overlay accent color.
+     *
+     * @default 17 (orange)
+     */
+    hue: {
+        type: NumberConstructor;
+        required: false;
+    };
 }, () => null, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     /**
      * Callback when Web Previews plugin requests navigation.
@@ -342,6 +363,15 @@ declare const ContentLink: vue.DefineComponent<{
         type: BooleanConstructor;
         required: false;
     };
+    /**
+     * Hue (0–359) of the overlay accent color.
+     *
+     * @default 17 (orange)
+     */
+    hue: {
+        type: NumberConstructor;
+        required: false;
+    };
 }>>, {
     stripStega: boolean;
 }, {}>;

package/dist/index.esm.mjs

@@ -9,7 +9,7 @@ export { RenderError } from 'datocms-structured-text-utils';
 import { subscribeToQuery } from 'datocms-listen';
 
 function useContentLink(options = {}) {
-  const { enabled = true, onNavigateTo, root } = options;
+  const { enabled = true, onNavigateTo, root, hue } = options;
   const controller = ref(null);
   const onNavigateToRef = ref(onNavigateTo);
   watch(
@@ -37,6 +37,9 @@ function useContentLink(options = {}) {
     if (root == null ? void 0 : root.value) {
       controllerOptions.root = root.value;
     }
+    if (hue !== void 0) {
+      controllerOptions.hue = hue;
+    }
     controller.value = createController(controllerOptions);
   };
   onMounted(() => {
@@ -154,13 +157,23 @@ const ContentLink = defineComponent({
     stripStega: {
       type: Boolean,
       required: false
+    },
+    /**
+     * Hue (0–359) of the overlay accent color.
+     *
+     * @default 17 (orange)
+     */
+    hue: {
+      type: Number,
+      required: false
     }
   },
   setup(props) {
     const { enableClickToEdit: enableClickToEditFn, setCurrentPath } = useContentLink({
       enabled: props.stripStega !== void 0 ? { stripStega: props.stripStega } : true,
       onNavigateTo: props.onNavigateTo,
-      root: props.root
+      root: props.root,
+      hue: props.hue
     });
     onMounted(() => {
       if (!props.enableClickToEdit) {
@@ -592,7 +605,7 @@ const Image$1 = defineComponent({
     };
   },
   render() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     const addImage = imageAddStrategy({
       priority: this.priority,
       inView: this.inView,
@@ -603,10 +616,11 @@ const Image$1 = defineComponent({
       inView: this.inView,
       loaded: this.loaded
     });
-    const webpSource = buildWebpSource(this.data, this.sizes);
+    const resolvedSizes = (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : this.priority ? void 0 : "auto, 100vw";
+    const webpSource = buildWebpSource(this.data, resolvedSizes);
     const regularSource = buildRegularSource(
       this.data,
-      this.sizes,
+      resolvedSizes,
       this.srcSetCandidates
     );
     const transition = typeof this.fadeInDuration === "undefined" || this.fadeInDuration > 0 ? `opacity ${this.fadeInDuration || 500}ms` : void 0;
@@ -640,7 +654,7 @@ const Image$1 = defineComponent({
       }, basePlaceholderStyle)
     }) : null;
     const { width, aspectRatio } = this.data;
-    const height = (_a = this.data.height) != null ? _a : aspectRatio ? width / aspectRatio : 0;
+    const height = (_c = this.data.height) != null ? _c : aspectRatio ? width / aspectRatio : 0;
     const sizer = this.layout !== "fill" ? h(Sizer, {
       sizerClass: this.imgClass,
       sizerStyle: this.imgStyle,
@@ -666,6 +680,8 @@ const Image$1 = defineComponent({
             src: this.data.src,
             alt: this.data.alt,
             title: this.data.title,
+            sizes: resolvedSizes,
+            loading: this.priority ? void 0 : "lazy",
             fetchpriority: this.priority ? "high" : void 0,
             onLoad: this.handleLoad,
             ref: "imageRef",
@@ -687,7 +703,7 @@ const Image$1 = defineComponent({
             [
               this.data.webpSrcSet && tag("source", {
                 srcset: this.data.webpSrcSet,
-                sizes: (_c = (_b = this.sizes) != null ? _b : this.data.sizes) != null ? _c : void 0,
+                sizes: resolvedSizes,
                 type: "image/webp"
               }),
               tag("source", {
@@ -696,13 +712,14 @@ const Image$1 = defineComponent({
                   this.data.width,
                   this.srcSetCandidates
                 ),
-                sizes: (_f = (_e = this.sizes) != null ? _e : this.data.sizes) != null ? _f : void 0
+                sizes: resolvedSizes
               }),
               tag("img", {
                 src: this.data.src,
                 alt: this.data.alt,
                 title: this.data.title,
                 class: this.imgClass,
+                sizes: resolvedSizes,
                 style: toCss(__spreadValues$5(__spreadProps$3(__spreadValues$5({}, absolutePositioning), {
                   objectFit: this.objectFit,
                   objectPosition: this.objectPosition
@@ -839,15 +856,16 @@ const NakedImage = defineComponent({
     };
   },
   render() {
-    var _a;
-    const webpSource = buildWebpSource(this.data, this.sizes);
+    var _a, _b, _c;
+    const resolvedSizes = (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : this.priority ? void 0 : "auto, 100vw";
+    const webpSource = buildWebpSource(this.data, resolvedSizes);
     const regularSource = buildRegularSource(
       this.data,
-      this.sizes,
+      resolvedSizes,
       this.srcSetCandidates
     );
     const { width } = this.data;
-    const height = (_a = this.data.height) != null ? _a : Math.round(this.data.aspectRatio ? width / this.data.aspectRatio : 0);
+    const height = (_c = this.data.height) != null ? _c : Math.round(this.data.aspectRatio ? width / this.data.aspectRatio : 0);
     const sizingStyle = {
       aspectRatio: `${width} / ${height}`,
       width: "100%",
@@ -879,6 +897,7 @@ const NakedImage = defineComponent({
           alt: this.data.alt,
           onLoad: this.handleLoad,
           title: this.data.title,
+          sizes: resolvedSizes,
           fetchpriority: this.priority ? "high" : void 0,
           loading: this.priority ? void 0 : "lazy",
           style: __spreadValues$4(__spreadValues$4(__spreadValues$4({}, placeholderStyle), sizingStyle), this.imgStyle || {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-datocms",
-  "version": "8.1.14",
+  "version": "8.1.16",
   "type": "module",
   "description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
   "keywords": [
@@ -42,7 +42,7 @@
     "toc": "doctoc --github src/components src/lib"
   },
   "dependencies": {
-    "@datocms/content-link": "^0.3.13",
+    "@datocms/content-link": "^0.3.19",
     "datocms-listen": "^1.0.2",
     "hls.js": "^1.5.17",
     "datocms-structured-text-generic-html-renderer": "^5.0.0",