@dotcms/vue 1.5.5-next.2350

package/lib/composables/useEditableDotCMSPage.d.ts

@@ -0,0 +1,37 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+import { DotCMSComposedPageResponse, DotCMSExtendedPageResponse } from '@dotcms/types';
+/**
+ * Composable to manage the editable state of a dotCMS page inside the Universal
+ * Visual Editor (UVE).
+ *
+ * It initializes the UVE, keeps the navigation in sync, and subscribes to
+ * content changes so the returned page response updates live while an editor is
+ * working. Outside of the UVE it is a pass-through: the returned ref simply
+ * holds the initial response.
+ *
+ * This is the Vue analog of the React SDK's `useEditableDotCMSPage` hook and the
+ * Angular SDK's `DotCMSEditablePageService.listen()`.
+ *
+ * @example
+ * ```ts
+ * import { useEditableDotCMSPage } from '@dotcms/vue';
+ * import { createDotCMSClient } from '@dotcms/client';
+ *
+ * const client = createDotCMSClient({
+ *   dotcmsUrl: 'https://your-dotcms-instance.com',
+ *   authToken: 'your-auth-token'
+ * });
+ *
+ * const pageResponse = await client.page.get('/');
+ * const page = useEditableDotCMSPage(pageResponse);
+ *
+ * // page.value.pageAsset — reactive; re-renders on UVE content changes.
+ * ```
+ *
+ * @param pageResponse the page response from `client.page.get()`. May be a plain
+ * value, a `ref`, or a getter — when it's reactive, the composable re-initializes
+ * the UVE for the new page (e.g. on client-side route changes) so no manual
+ * component remount is needed.
+ * @returns a reactive ref holding the (possibly live-updating) page response
+ */
+export declare function useEditableDotCMSPage<T extends DotCMSExtendedPageResponse>(pageResponse: MaybeRefOrGetter<DotCMSComposedPageResponse<T>>): Ref<DotCMSComposedPageResponse<T>>;

package/lib/composables/useIsAnalyticsActive.d.ts

@@ -0,0 +1,14 @@
+import { Ref } from 'vue';
+/**
+ * @internal
+ *
+ * Composable that tracks whether dotCMS Analytics is active on the page.
+ *
+ * Analytics may initialize after the page renders, so in addition to reading the
+ * current state on mount we subscribe to the `dotcms:analytics:ready` window
+ * event and re-evaluate when it fires. Used in live mode to decide whether the
+ * minimal contentlet attributes Analytics needs should be kept.
+ *
+ * @returns a ref that is `true` when Analytics is active
+ */
+export declare function useIsAnalyticsActive(): Ref<boolean>;

package/lib/composables/useIsDevMode.d.ts

@@ -0,0 +1,23 @@
+import { ComputedRef, MaybeRefOrGetter } from 'vue';
+import { DotCMSPageRendererMode } from '@dotcms/types';
+/**
+ * @internal
+ *
+ * Resolve whether we are rendering in "development" mode — i.e. whether editor
+ * metadata (`data-dot-*` attributes, empty-state placeholders, fallback
+ * components) should be emitted. Inside the UVE it follows the UVE state (dev
+ * when mode is EDIT); otherwise it follows the renderer `mode`.
+ */
+export declare function resolveDevMode(mode: DotCMSPageRendererMode | undefined): boolean;
+/**
+ * @internal
+ *
+ * Computed development-mode flag. `getUVEState()` and the renderer `mode` are
+ * both available synchronously, so this resolves during setup — the editor
+ * `data-dot-*` attributes are present on the first render (which the UVE relies
+ * on to attach its tooling) with no per-instance `onMounted`.
+ *
+ * Called once at the layout root ({@link DotCMSLayoutBody}); the result is
+ * shared with the whole tree via the page context.
+ */
+export declare function useIsDevMode(mode: MaybeRefOrGetter<DotCMSPageRendererMode | undefined>): ComputedRef<boolean>;

package/lib/contexts/dotcms-page.context.d.ts

@@ -0,0 +1,74 @@
+import { Component, ComputedRef, InjectionKey, Slot } from 'vue';
+import { DotCMSPageAsset, DotCMSPageRendererMode } from '@dotcms/types';
+/**
+ * The value carried by the dotCMS page context.
+ *
+ * This is the Vue analog of the React SDK's `DotCMSPageContext`. It is provided
+ * once by {@link DotCMSLayoutBody} and consumed by the layout tree (Container,
+ * Contentlet). It is also part of the public API: a custom content-type
+ * component rendered deep in the tree can read it via {@link useDotCMSPageContext}
+ * to access the page asset without prop drilling. This shape is stable.
+ */
+export interface DotCMSPageContextValue {
+    /** The dotCMS page asset containing the layout and containers. */
+    pageAsset: DotCMSPageAsset;
+    /** The renderer mode: `production` or `development`. */
+    mode: DotCMSPageRendererMode;
+    /**
+     * Map of content-type variable name to the Vue component that renders it.
+     * The special `CustomNoComponent` key is used as the fallback for unmatched
+     * content types.
+     */
+    userComponents: Record<string, Component>;
+    /**
+     * Whether editor metadata (`data-dot-*`, placeholders, fallbacks) should be
+     * emitted. Resolved once at the layout root and shared with the whole tree
+     * so it isn't recomputed per contentlet.
+     */
+    isDevMode: boolean;
+    /**
+     * Whether dotCMS Analytics is active. Resolved once at the layout root (a
+     * single `dotcms:analytics:ready` listener) and shared with the tree.
+     */
+    isAnalyticsActive: boolean;
+    /**
+     * Named slots passed to {@link DotCMSLayoutBody}, keyed by contentlet
+     * identifier (the `contentlet-<identifier>` slot name, with the prefix
+     * stripped). When a contentlet has a matching slot, that slot content is
+     * rendered instead of the mapped component — the Vue analog of the React
+     * SDK's `slots` prop. Empty (or omitted) when no per-contentlet slots were
+     * provided; {@link DotCMSLayoutBody} always sets it.
+     */
+    slots?: Record<string, Slot>;
+}
+/**
+ * Injection key for the dotCMS page context.
+ *
+ * The value is a `ComputedRef` so that live UVE updates to the page (a new page
+ * asset arriving via `uve-set-page-data`) propagate to every consumer that reads
+ * `ctx.value` — the whole layout tree re-renders reactively.
+ *
+ * Advanced: exported so consumers can `inject` directly, but prefer
+ * {@link useDotCMSPageContext}.
+ */
+export declare const DOTCMS_PAGE_CONTEXT: InjectionKey<ComputedRef<DotCMSPageContextValue>>;
+/**
+ * Provides the dotCMS page context to descendant components.
+ *
+ * Advanced: {@link DotCMSLayoutBody} already provides this for the rendered tree,
+ * so most applications never call it. Exposed for consumers that render the
+ * layout tree themselves.
+ *
+ * @param value a computed producing the current context value
+ */
+export declare function provideDotCMSPageContext(value: ComputedRef<DotCMSPageContextValue>): void;
+/**
+ * Injects the dotCMS page context as a reactive `ComputedRef`.
+ *
+ * Public: use this from a custom content-type component to read the current
+ * `pageAsset`, renderer `mode`, or editor state without prop drilling. Falls back
+ * to an empty context when used outside of a {@link DotCMSLayoutBody}.
+ *
+ * @returns the current page context value as a computed ref
+ */
+export declare function useDotCMSPageContext(): ComputedRef<DotCMSPageContextValue>;

package/lib/utils/imageLoader.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Options for a single {@link DotCMSImageLoader} call.
+ */
+export interface DotCMSImageLoaderOptions {
+    /** Target width in pixels. Requests a resized image from the dotCMS image API. */
+    width?: number;
+    /**
+     * JPEG quality (1-100).
+     * @default 50
+     */
+    quality?: number;
+    /**
+     * Language id for the asset.
+     * @default '1'
+     */
+    languageId?: string;
+}
+/**
+ * A function that turns a dotCMS asset identifier (or path) into an image URL.
+ * Returned by {@link createDotCMSImageLoader}.
+ */
+export type DotCMSImageLoader = (src: string, options?: DotCMSImageLoaderOptions) => string;
+/**
+ * Creates a dotCMS image URL builder.
+ *
+ * dotCMS serves images through its image API (the `/dA/` route), which handles
+ * on-the-fly resizing and optimization. This is the Vue analog of Angular's
+ * `provideDotCMSImageLoader`: Angular wires the same URL math into its
+ * `IMAGE_LOADER` token, while Vue has no such token, so this returns a plain
+ * function you call from a template.
+ *
+ * Absolute URLs (already `http(s)://…`) are returned unchanged, so mixing dotCMS
+ * assets with external/stock imagery just works.
+ *
+ * @param dotcmsUrl - Base URL of the dotCMS instance. When omitted (empty), URLs
+ *   are site-relative (`/dA/…`), which is what you want behind a dev proxy.
+ * @returns a loader function `(src, options?) => url`
+ * @throws if `dotcmsUrl` is a non-empty, invalid URL
+ *
+ * @example
+ * ```ts
+ * import { createDotCMSImageLoader } from '@dotcms/vue';
+ *
+ * // Absolute (production): points at the dotCMS host.
+ * const image = createDotCMSImageLoader(import.meta.env.VITE_DOTCMS_HOST);
+ * image(contentlet.inode, { width: 800 });
+ * // → https://demo.dotcms.com/dA/<inode>/800w/50q?language_id=1
+ *
+ * // Relative (dev proxy): omit the host so the Vite proxy handles /dA.
+ * const proxied = createDotCMSImageLoader();
+ * proxied(contentlet.inode, { width: 800 }); // → /dA/<inode>/800w/50q?language_id=1
+ * ```
+ */
+export declare function createDotCMSImageLoader(dotcmsUrl?: string): DotCMSImageLoader;

package/lib/utils/toPlain.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Recursively unwrap Vue reactivity (refs / reactive proxies) into a plain,
+ * structured-clone-safe object.
+ *
+ * The UVE bridge sends data to the editor via `postMessage`, which uses the
+ * structured clone algorithm — and that throws a `DataCloneError` on Vue
+ * reactive Proxies. Values passed to UVE actions (`initUVE`, `editContentlet`,
+ * `enableBlockEditorInline`, …) commonly come through reactive props or
+ * `reactive()`, so unwrap them first. Plain values pass through untouched;
+ * cycles are guarded and non-plain objects (e.g. `Date`) are preserved as-is.
+ */
+export declare function toPlain<T>(value: T): T;

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@dotcms/vue",
+  "version": "1.5.5-next.2350",
+  "peerDependencies": {
+    "vue": ">=3.4"
+  },
+  "dependencies": {
+    "@dotcms/uve": "latest",
+    "@dotcms/client": "latest",
+    "@tinymce/tinymce-vue": "^6.1.0"
+  },
+  "devDependencies": {
+    "@dotcms/types": "latest"
+  },
+  "description": "Official Vue components library to render a dotCMS page.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dotCMS/core.git#main"
+  },
+  "keywords": [
+    "dotCMS",
+    "CMS",
+    "Content Management",
+    "API Client",
+    "REST API",
+    "Vue",
+    "Vue 3",
+    "Components"
+  ],
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    }
+  },
+  "author": "dotcms <dev@dotcms.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dotCMS/core/issues"
+  },
+  "homepage": "https://github.com/dotCMS/core/tree/main/core-web/libs/sdk/vue/README.md"
+}