@xleddyl/nuxt-cms 0.9.3 → 0.10.0

package/dist/runtime/app/composables/cms-history.js

@@ -0,0 +1,24 @@
+import { getCurrentScope, onScopeDispose, readonly, ref, watch } from "#imports";
+import { createCmsHistory } from "../../shared/history.js";
+export function useCmsHistory(options) {
+  const canUndo = ref(false);
+  const canRedo = ref(false);
+  const history = createCmsHistory({
+    ...options,
+    onUpdate: (status) => {
+      canUndo.value = status.canUndo;
+      canRedo.value = status.canRedo;
+    }
+  });
+  watch(options.state, history.observe);
+  if (getCurrentScope()) onScopeDispose(history.dispose);
+  return {
+    canUndo: readonly(canUndo),
+    canRedo: readonly(canRedo),
+    change: history.change,
+    release: history.release,
+    undo: history.undo,
+    redo: history.redo,
+    reset: history.reset
+  };
+}

package/dist/runtime/app/composables/cms-link-targets.d.ts

@@ -0,0 +1,10 @@
+import type { CmsConfig, CmsLinkValue } from '#nuxt-cms';
+type Row = Record<string, unknown>;
+export type CmsLinkTargetState = 'loading' | 'live' | 'draft' | 'scheduled' | 'missing';
+export declare function useCmsLinkTargets(config: CmsConfig): {
+    load: (entry: string, id: string) => void;
+    remember: (entry: string, row: Row) => void;
+    target: (entry: string, id: string) => Row | null | undefined;
+    state: (link: CmsLinkValue | null | undefined) => CmsLinkTargetState | null;
+};
+export {};

package/dist/runtime/app/composables/cms-link-targets.js

@@ -0,0 +1,40 @@
+import { isScheduledContent, linkTargetKey, pageLinkPath } from "#nuxt-cms";
+import { reactive } from "#imports";
+import { useCmsPermissions } from "./cms-permissions.js";
+const rows = reactive(/* @__PURE__ */ new Map());
+const pending = /* @__PURE__ */ new Set();
+function statusOf(error) {
+  return error?.statusCode ?? error?.status;
+}
+export function useCmsLinkTargets(config) {
+  const { can } = useCmsPermissions();
+  function load(entry, id) {
+    const key = linkTargetKey(entry, id);
+    if (!import.meta.client || rows.has(key) || pending.has(key)) return;
+    if (config[entry]?.kind !== "content" || !can(`${entry}.read`)) return;
+    pending.add(key);
+    $fetch(`/api/cms/admin/${entry}/${encodeURIComponent(id)}`).then((row) => rows.set(key, row)).catch((error) => {
+      if (statusOf(error) === 404) rows.set(key, null);
+    }).finally(() => pending.delete(key));
+  }
+  function remember(entry, row) {
+    if (row.id == null) return;
+    const key = linkTargetKey(entry, String(row.id));
+    rows.set(key, { ...rows.get(key), ...row });
+  }
+  function target(entry, id) {
+    return rows.get(linkTargetKey(entry, id));
+  }
+  function state(link) {
+    if (!link?.entry || !link.id || link.url) return null;
+    const entry = config[link.entry];
+    if (!entry) return "missing";
+    if (entry.kind === "page") return pageLinkPath(entry, link.id) ? "live" : "missing";
+    const row = target(link.entry, link.id);
+    if (row === void 0) return "loading";
+    if (row === null) return "missing";
+    if (row.status !== "published") return "draft";
+    return isScheduledContent(row) ? "scheduled" : "live";
+  }
+  return { load, remember, target, state };
+}

package/dist/runtime/app/composables/cms-link-usage.d.ts

@@ -0,0 +1 @@
+export declare function useCmsLinkedDelete(): (entry: string, ids: string[], question: string, titles?: Record<string, string>) => Promise<boolean>;

package/dist/runtime/app/composables/cms-link-usage.js

@@ -0,0 +1,45 @@
+import { groupMediaUsage, isLinkTargetEntry, linkTargetKey } from "#nuxt-cms";
+import cmsConfig from "#cms-config";
+import { cmsApi } from "../utils/api.js";
+import { useCmsConfirm } from "./cms-confirm.js";
+import { usageItem } from "./cms-media-library.js";
+function linksLabel(count) {
+  return `${count} ${count === 1 ? "entry" : "entries"}`;
+}
+async function loadUsage(entry, ids) {
+  try {
+    const { usage } = await cmsApi(
+      "/api/cms/link-usage",
+      { method: "POST", body: { targets: ids.map((id) => ({ entry, id })) } }
+    );
+    return usage;
+  } catch {
+    return null;
+  }
+}
+export function useCmsLinkedDelete() {
+  const confirmAction = useCmsConfirm();
+  return async (entry, ids, question, titles = {}) => {
+    if (!ids.length || !isLinkTargetEntry(cmsConfig[entry]))
+      return confirmAction({ title: question });
+    const usage = await loadUsage(entry, ids);
+    if (!usage)
+      return confirmAction({
+        title: question,
+        description: "Could not check where it is linked."
+      });
+    const groups = ids.map((id) => ({ id, entries: groupMediaUsage(usage[linkTargetKey(entry, id)] ?? []) })).filter((group) => group.entries.length > 0);
+    if (!groups.length) return confirmAction({ title: question });
+    const single = ids.length === 1;
+    const linked = single ? `It is linked from ${linksLabel(groups[0].entries.length)}.` : `${groups.length} of ${ids.length} are linked from your content.`;
+    return confirmAction({
+      title: single ? "Item is linked" : "Items are linked",
+      description: `${question} ${linked} Those links disappear from the site until they point somewhere else.`,
+      confirmLabel: "Delete anyway",
+      groups: groups.map((group) => ({
+        title: titles[group.id] ?? `#${group.id}`,
+        items: group.entries.map(usageItem)
+      }))
+    });
+  };
+}

package/dist/runtime/app/composables/cms-media-library.d.ts

@@ -1,4 +1,5 @@
-import type { MediaItem, MediaSourceInfo, MediaUsage } from '../../shared/index.js';
+import type { RecordListItem } from '@xleddyl/443-components-vue';
+import type { MediaItem, MediaSourceInfo, MediaUsage, MediaUsageEntry, MediaUsageReport } from '../../shared/index.js';
 export interface MediaFolderStats {
     files: number;
     folders: number;
@@ -13,8 +14,10 @@ export declare function useCmsMediaLibrary(): {
         size: number | null;
         width: number | null;
         height: number | null;
+        focalX: number | null;
+        focalY: number | null;
         createdAt: string | null;
-        type: import("../../shared/index.js").MediaType;
+        type: import("#nuxt-cms").MediaType;
         url: string | null;
     }[], MediaItem[] | {
         id?: number | undefined;
@@ -25,16 +28,18 @@ export declare function useCmsMediaLibrary(): {
         size: number | null;
         width: number | null;
         height: number | null;
+        focalX: number | null;
+        focalY: number | null;
         createdAt: string | null;
-        type: import("../../shared/index.js").MediaType;
+        type: import("#nuxt-cms").MediaType;
         url: string | null;
     }[]>;
     source: import("vue").Ref<{
-        kind: import("../../shared/index.js").MediaSourceKind;
+        kind: import("#nuxt-cms").MediaSourceKind;
         root: string;
         builtAt: string | null;
     } | null, MediaSourceInfo | {
-        kind: import("../../shared/index.js").MediaSourceKind;
+        kind: import("#nuxt-cms").MediaSourceKind;
         root: string;
         builtAt: string | null;
     } | null>;
@@ -55,8 +60,10 @@ export declare function useCmsMediaLibrary(): {
         size: number | null;
         width: number | null;
         height: number | null;
+        focalX: number | null;
+        focalY: number | null;
         createdAt: string | null;
-        type: import("../../shared/index.js").MediaType;
+        type: import("#nuxt-cms").MediaType;
         url: string | null;
     }[];
     createFolder: (name: string) => Promise<boolean>;
@@ -67,8 +74,11 @@ export declare function useCmsMediaLibrary(): {
     updateItem: (key: string, changes: {
         alt?: string | null;
         folder?: string | null;
-    }) => Promise<boolean>;
-    usage: (keys: string[]) => Promise<Record<string, MediaUsage[]> | null>;
+        focalX?: number | null;
+        focalY?: number | null;
+    }) => Promise<void>;
+    usage: (keys: string[]) => Promise<MediaUsageReport | null>;
 };
 export type CmsMediaLibrary = ReturnType<typeof useCmsMediaLibrary>;
-export declare function usageLink(usage: Pick<MediaUsage, 'collection' | 'id'>): string;
+export declare function usageLink(usage: Pick<MediaUsage, 'collection' | 'id' | 'kind'>): string;
+export declare function usageItem(entry: MediaUsageEntry, index: number): RecordListItem;

package/dist/runtime/app/composables/cms-media-library.js

@@ -1,3 +1,4 @@
+import { toast } from "@xleddyl/443-components-vue";
 import {
   expandMediaFolders,
   isWithinMediaFolder,
@@ -5,13 +6,13 @@ import {
   mediaFolderParent
 } from "../../shared/index.js";
 import { computed, ref } from "#imports";
-import { errorMessage } from "../utils/ui.js";
+import cmsConfig from "#cms-config";
+import { cmsIcon, cmsSettingsLink, errorMessage } from "../utils/ui.js";
+import { CMS_ENTRY_KIND_ICONS } from "./cms-entry-settings.js";
 import { invalidateCmsMediaKeys } from "./cms-media-keys.js";
-import { useCmsToast } from "./cms-toast.js";
 const endpoint = "/api/cms/admin/media";
 const USAGE_CHUNK = 1e3;
 export function useCmsMediaLibrary() {
-  const toast = useCmsToast();
   const items = ref([]);
   const serverFolders = ref([]);
   const source = ref(null);
@@ -61,7 +62,7 @@ export function useCmsMediaLibrary() {
       await action();
       return true;
     } catch (err) {
-      toast.add({ title, description: errorMessage(err), color: "error" });
+      toast.error(title, { description: errorMessage(err) });
       return false;
     }
   }
@@ -101,22 +102,23 @@ export function useCmsMediaLibrary() {
     });
   }
   function updateItem(key, changes) {
-    return attempt("Save failed", async () => {
+    return (async () => {
       await $fetch(endpoint, { method: "PUT", body: { key, ...changes } });
       await reload({ quiet: true });
-    });
+    })();
   }
   async function usage(keys) {
     const unique = [...new Set(keys)];
-    if (!unique.length) return {};
+    const merged = { usage: {}, hidden: {} };
+    if (!unique.length) return merged;
     try {
-      const merged = {};
       for (let index = 0; index < unique.length; index += USAGE_CHUNK) {
-        const result = await $fetch(
-          `${endpoint}/usage`,
-          { method: "POST", body: { keys: unique.slice(index, index + USAGE_CHUNK) } }
-        );
-        Object.assign(merged, result.usage);
+        const result = await $fetch(`${endpoint}/usage`, {
+          method: "POST",
+          body: { keys: unique.slice(index, index + USAGE_CHUNK) }
+        });
+        Object.assign(merged.usage, result.usage);
+        Object.assign(merged.hidden, result.hidden);
       }
       return merged;
     } catch {
@@ -143,5 +145,21 @@ export function useCmsMediaLibrary() {
   };
 }
 export function usageLink(usage) {
+  if (usage.kind === "site") return cmsSettingsLink("site", "/cms/media");
   return usage.id === null ? `/cms/${usage.collection}` : `/cms/${usage.collection}/${usage.id}`;
 }
+function usageIcon(usage) {
+  if (usage.kind === "site") return cmsIcon("globe-alt");
+  const entry = cmsConfig[usage.collection];
+  return cmsIcon(entry?.icon ?? CMS_ENTRY_KIND_ICONS[usage.kind]);
+}
+export function usageItem(entry, index) {
+  return {
+    id: index,
+    title: entry.title ?? entry.label,
+    description: entry.fields.join(", "),
+    meta: entry.title ? entry.label : void 0,
+    icon: usageIcon(entry),
+    to: usageLink(entry)
+  };
+}

package/dist/runtime/app/composables/cms-media-uploader.js

@@ -5,9 +5,8 @@ import {
   normalizeMediaFolder
 } from "../../shared/index.js";
 import { ref } from "#imports";
-import { readDroppedFiles } from "@xleddyl/443-components-vue";
+import { readDroppedFiles, toast } from "@xleddyl/443-components-vue";
 import { useCmsRuntime } from "./cms-runtime.js";
-import { useCmsToast } from "./cms-toast.js";
 async function imageDimensions(file) {
   try {
     const bitmap = await createImageBitmap(file);
@@ -105,7 +104,6 @@ function isWithinOrAbove(folder, other) {
   return other === folder || other.startsWith(`${folder}/`);
 }
 export function useCmsMediaUploader() {
-  const toast = useCmsToast();
   const { mediaMaxFileSize } = useCmsRuntime();
   const uploading = ref(false);
   const done = ref(0);
@@ -149,11 +147,7 @@ export function useCmsMediaUploader() {
       })
     );
     const failed = results.filter((r) => r.status === "rejected").length;
-    if (failed)
-      toast.add({
-        title: `${failed} folder${failed > 1 ? "s" : ""} could not be created`,
-        color: "error"
-      });
+    if (failed) toast.error(`${failed} folder${failed > 1 ? "s" : ""} could not be created`);
   }
   async function upload(source, options) {
     const tree = Array.isArray(source) || source instanceof FileList ? uploadTreeFromFiles(source) : source;
@@ -161,16 +155,10 @@ export function useCmsMediaUploader() {
     let files = all.filter((entry) => matchesAccept(entry.file, options.accept));
     const rejected = all.length - files.length;
     if (rejected) {
-      toast.add({
-        title: `${rejected} file${rejected > 1 ? "s" : ""} of an unsupported type skipped`,
-        color: "error"
-      });
+      toast.error(`${rejected} file${rejected > 1 ? "s" : ""} of an unsupported type skipped`);
     }
     for (const { file } of files.filter((entry) => entry.file.size > mediaMaxFileSize)) {
-      toast.add({
-        title: `File too large (max ${formatFileSize(mediaMaxFileSize)}): ${file.name}`,
-        color: "error"
-      });
+      toast.error(`File too large (max ${formatFileSize(mediaMaxFileSize)}): ${file.name}`);
     }
     files = files.filter((entry) => entry.file.size <= mediaMaxFileSize);
     const nested = options.multiple !== false;
@@ -188,8 +176,7 @@ export function useCmsMediaUploader() {
       )
     ].filter((folder) => !fileFolders.some((other) => isWithinOrAbove(folder, other)));
     if (planned.some((entry) => entry.flattened)) {
-      toast.add({
-        title: `Folders nest up to ${MEDIA_FOLDER_MAX_DEPTH} levels`,
+      toast(`Folders nest up to ${MEDIA_FOLDER_MAX_DEPTH} levels`, {
         description: "Files in deeper folders were uploaded to the deepest allowed folder."
       });
     }
@@ -205,8 +192,7 @@ export function useCmsMediaUploader() {
       );
       const ok = results.filter((r) => r.status === "fulfilled").map((r) => r.value);
       const failed = results.length - ok.length;
-      if (failed)
-        toast.add({ title: `${failed} upload${failed > 1 ? "s" : ""} failed`, color: "error" });
+      if (failed) toast.error(`${failed} upload${failed > 1 ? "s" : ""} failed`);
       return ok;
     } finally {
       uploading.value = false;

package/dist/runtime/app/composables/cms-permissions.d.ts

@@ -0,0 +1,18 @@
+import type { CmsEntry } from '#nuxt-cms';
+import type { CmsRoles } from '../../shared/roles.js';
+export interface CmsEntryLockOptions {
+    isNew: boolean;
+    status?: unknown;
+}
+export declare function useCmsPermissions(): {
+    role: import("vue").ComputedRef<import("#nuxt-cms").CmsUserRole | null | undefined>;
+    access: import("vue").ComputedRef<import("#nuxt-cms").CmsAccess | null>;
+    roles: CmsRoles;
+    can: (permission: string) => boolean;
+    entryLock: (name: string, entry: CmsEntry, options: CmsEntryLockOptions) => "Your role cannot create entries here." | "Your role can view this entry but not edit it." | "This entry is published. Your role can only edit drafts." | null;
+    firstPath: () => string | null;
+    roleLabel: (key: string | null | undefined) => string;
+    roleOptions: import("#nuxt-cms").CmsRoleOption[];
+    canGrant: (key: string) => boolean;
+    canManage: (key: string) => boolean;
+};

package/dist/runtime/app/composables/cms-permissions.js

@@ -0,0 +1,54 @@
+import { computed } from "#imports";
+import cmsConfig from "#cms-config";
+import cmsRoles from "#cms-roles";
+import {
+  can as canAccess,
+  canGrantRole,
+  canManageAccount,
+  cmsRoleLabel,
+  cmsRoleOptions,
+  CMS_SUPERADMIN_ROLE,
+  resolveCmsAccess
+} from "../../shared/roles.js";
+import { useCmsAccount } from "./cms-account.js";
+export function useCmsPermissions() {
+  const { user, isSuperAdmin } = useCmsAccount();
+  const roles = cmsRoles;
+  const config = cmsConfig;
+  const role = computed(
+    () => user.value ? isSuperAdmin.value ? CMS_SUPERADMIN_ROLE : user.value.role : null
+  );
+  const access = computed(
+    () => role.value === null ? null : resolveCmsAccess(role.value, roles, config)
+  );
+  function can(permission) {
+    return canAccess(access.value, permission);
+  }
+  function entryLock(name, entry, options) {
+    if (options.isNew) {
+      return can(`${name}.create`) ? null : "Your role cannot create entries here.";
+    }
+    if (!can(`${name}.update`)) return "Your role can view this entry but not edit it.";
+    if (entry.drafts && options.status === "published" && !can(`${name}.publish`)) {
+      return "This entry is published. Your role can only edit drafts.";
+    }
+    return null;
+  }
+  function firstPath() {
+    const first = Object.keys(config).find((name) => can(`${name}.read`));
+    if (first) return `/cms/${first}`;
+    return can("media.read") ? "/cms/media" : null;
+  }
+  return {
+    role,
+    access,
+    roles,
+    can,
+    entryLock,
+    firstPath,
+    roleLabel: (key) => cmsRoleLabel(key, roles),
+    roleOptions: cmsRoleOptions(roles),
+    canGrant: (key) => canGrantRole(access.value, key, roles, config),
+    canManage: (key) => canManageAccount(access.value, key, roles, config)
+  };
+}

package/dist/runtime/app/composables/cms-presets.d.ts

@@ -0,0 +1,11 @@
+import type { CmsBlockPreset } from '../../shared/presets.js';
+import type { CmsBlockValue } from '../../shared/preview.js';
+export declare function useCmsPresets(entryName: () => string | undefined, fieldKey: () => string | undefined): {
+    presets: import("vue").ComputedRef<CmsBlockPreset[]>;
+    load: () => Promise<void>;
+    create: (input: {
+        name: string;
+        description?: string;
+        items: CmsBlockValue[];
+    }) => Promise<CmsBlockPreset>;
+};

package/dist/runtime/app/composables/cms-presets.js

@@ -0,0 +1,40 @@
+import { computed, useState } from "#imports";
+import { cmsApi } from "../utils/api.js";
+const PRESETS_ENDPOINT = "/api/cms/presets";
+function usePresetCache() {
+  return useState("cms-presets", () => ({}));
+}
+function fieldEndpoint(entryName, fieldKey) {
+  return `${PRESETS_ENDPOINT}/${encodeURIComponent(entryName)}/${encodeURIComponent(fieldKey)}`;
+}
+export function useCmsPresets(entryName, fieldKey) {
+  const cache = usePresetCache();
+  const scope = computed(() => {
+    const entry = entryName();
+    const field = fieldKey();
+    return entry && field ? { entry, field, key: `${entry}.${field}` } : null;
+  });
+  const presets = computed(() => scope.value ? cache.value[scope.value.key] ?? [] : []);
+  async function load() {
+    const current = scope.value;
+    if (!current) return;
+    try {
+      const list = await cmsApi(fieldEndpoint(current.entry, current.field));
+      cache.value = { ...cache.value, [current.key]: list };
+    } catch {
+      cache.value = { ...cache.value, [current.key]: cache.value[current.key] ?? [] };
+    }
+  }
+  async function create(input) {
+    const current = scope.value;
+    if (!current) throw new Error("This field cannot hold presets");
+    const preset = await cmsApi(fieldEndpoint(current.entry, current.field), {
+      method: "POST",
+      body: input
+    });
+    cache.value = {};
+    await load();
+    return preset;
+  }
+  return { presets, load, create };
+}

package/dist/runtime/app/composables/cms-preview-mode.d.ts

@@ -0,0 +1,4 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { CmsPreviewMode } from '../../shared/index.js';
+export declare function useCmsPreviewState(): Ref<CmsPreviewMode | null>;
+export declare function useCmsPreviewMode(): ComputedRef<CmsPreviewMode | null>;

package/dist/runtime/app/composables/cms-preview-mode.js

@@ -0,0 +1,8 @@
+import { computed, useState } from "#imports";
+export function useCmsPreviewState() {
+  return useState("cms-preview-mode", () => null);
+}
+export function useCmsPreviewMode() {
+  const state = useCmsPreviewState();
+  return computed(() => state.value);
+}

package/dist/runtime/app/composables/cms-query.d.ts

@@ -4,6 +4,9 @@ export interface CmsAsyncDataOptions<ResT, DefaultT> extends Pick<AsyncDataOptio
     key?: string;
     default?: () => DefaultT;
 }
+export declare function cmsPreviewToken(): string | null;
+export declare function cmsPreviewKey(key: string, preview: string | null): string;
 export declare function cmsQueryKey(query: string, variables?: unknown): string;
+export declare function cmsQueryWithPreview<const Q extends string>(query: Q, variables: CmsVariables<Q> | undefined, preview: string | null): Promise<CmsResult<Q>>;
 export declare function $cmsQuery<const Q extends string>(query: Q, variables?: CmsVariables<Q>): Promise<CmsResult<Q>>;
 export declare function useCms<const Q extends string, DefaultT = undefined>(query: Q, variables?: CmsVariables<Q>, options?: CmsAsyncDataOptions<CmsResult<Q>, DefaultT>): AsyncData<CmsResult<Q> | DefaultT | undefined, Error | undefined>;

package/dist/runtime/app/composables/cms-query.js

@@ -1,28 +1,35 @@
-import { useAsyncData } from "#imports";
-import { CMS_GRAPHQL_BATCH_LIMIT } from "../../shared/index.js";
+import { tryUseNuxtApp, useAsyncData } from "#imports";
+import {
+  CMS_GRAPHQL_BATCH_LIMIT,
+  PREVIEW_HEADER,
+  PREVIEW_QUERY_PARAM,
+  previewTokenFrom
+} from "../../shared/index.js";
 const ENDPOINT = "/api/cms/graphql";
 const inFlight = /* @__PURE__ */ new Map();
-let queue = [];
+let queues = /* @__PURE__ */ new Map();
 let scheduled = false;
 function responseError(response) {
   return new Error(
     response?.errors?.map((e) => e.message).join("; ") || "Invalid batched GraphQL response"
   );
 }
-async function sendBatch(batch) {
+async function sendBatch(batch, preview) {
+  const headers = preview ? { headers: { [PREVIEW_HEADER]: preview } } : {};
   try {
     if (batch.length === 1) {
       batch[0].resolve(
         await $fetch(ENDPOINT, {
           method: "POST",
-          body: batch[0].body
+          body: batch[0].body,
+          ...headers
         })
       );
       return;
     }
     const responses = await $fetch(
       ENDPOINT,
-      { method: "POST", body: batch.map((pending) => pending.body) }
+      { method: "POST", body: batch.map((pending) => pending.body), ...headers }
     );
     if (!Array.isArray(responses)) throw responseError(responses);
     batch.forEach((pending, index) => {
@@ -35,42 +42,60 @@ async function sendBatch(batch) {
   }
 }
 function flushQueue() {
-  const pending = queue;
-  queue = [];
+  const pending = queues;
+  queues = /* @__PURE__ */ new Map();
   scheduled = false;
-  for (let index = 0; index < pending.length; index += CMS_GRAPHQL_BATCH_LIMIT) {
-    void sendBatch(pending.slice(index, index + CMS_GRAPHQL_BATCH_LIMIT));
+  for (const [preview, list] of pending) {
+    for (let index = 0; index < list.length; index += CMS_GRAPHQL_BATCH_LIMIT) {
+      void sendBatch(list.slice(index, index + CMS_GRAPHQL_BATCH_LIMIT), preview);
+    }
   }
 }
-function requestGraphql(body) {
-  const key = JSON.stringify(body);
-  const existing = inFlight.get(key);
-  if (existing) return existing;
-  const request = new Promise((resolve, reject) => {
+function enqueue(body, preview) {
+  return new Promise((resolve, reject) => {
+    const queue = queues.get(preview) ?? [];
     queue.push({ body, resolve, reject });
+    queues.set(preview, queue);
     if (!scheduled) {
       scheduled = true;
       setTimeout(flushQueue, 0);
     }
-  }).finally(() => inFlight.delete(key));
+  });
+}
+function requestGraphql(body, preview) {
+  if (preview) return enqueue(body, preview);
+  const key = JSON.stringify(body);
+  const existing = inFlight.get(key);
+  if (existing) return existing;
+  const request = enqueue(body, "").finally(() => inFlight.delete(key));
   inFlight.set(key, request);
   return request;
 }
+export function cmsPreviewToken() {
+  return previewTokenFrom(tryUseNuxtApp()?._route?.query?.[PREVIEW_QUERY_PARAM]);
+}
+export function cmsPreviewKey(key, preview) {
+  return preview ? `${key}:cms-preview` : key;
+}
 export function cmsQueryKey(query, variables) {
   return `cms-gql:${query}:${JSON.stringify(variables ?? {})}`;
 }
-export async function $cmsQuery(query, variables) {
-  const res = await requestGraphql({ query, variables });
+export async function cmsQueryWithPreview(query, variables, preview) {
+  const res = await requestGraphql({ query, variables }, preview);
   if (res.errors?.length) {
     throw new Error(res.errors.map((e) => e.message).join("; "));
   }
   return res.data;
 }
+export function $cmsQuery(query, variables) {
+  return cmsQueryWithPreview(query, variables, cmsPreviewToken());
+}
 export function useCms(query, variables, options = {}) {
   const { key, ...asyncDataOptions } = options;
+  const preview = cmsPreviewToken();
   return useAsyncData(
-    key ?? cmsQueryKey(query, variables),
-    () => $cmsQuery(query, variables),
+    key ?? cmsPreviewKey(cmsQueryKey(query, variables), preview),
+    () => cmsQueryWithPreview(query, variables, preview),
     asyncDataOptions
   );
 }

package/dist/runtime/app/composables/cms-record-list.d.ts

@@ -0,0 +1,31 @@
+export interface CmsListRecord {
+    id: string;
+}
+export interface CmsRecordListOptions<T> {
+    key: string;
+    url: string;
+    label: (item: T) => string;
+    compare?: (a: T, b: T) => number;
+    loadError: string;
+    confirmDelete?: (item: T) => {
+        title: string;
+        description?: string;
+    };
+    deleted?: string;
+    deleteError?: string;
+}
+export declare function useCmsRecordList<T extends CmsListRecord>(options: CmsRecordListOptions<T>): {
+    items: import("vue").Ref<T[], T[]>;
+    sorted: import("vue").ComputedRef<T[]>;
+    loaded: import("vue").Ref<boolean, boolean>;
+    loading: import("vue").Ref<boolean, boolean>;
+    load: () => Promise<void>;
+    ensureLoaded: () => Promise<void>;
+    find: (id: string | null | undefined) => T | undefined;
+    upsert: (record: T) => void;
+    removeLocal: (id: string) => void;
+    resolveLabel: (id: string) => Promise<string | undefined>;
+    remove: (record: T) => Promise<boolean>;
+    label: (item: T) => string;
+};
+export type CmsRecordList<T extends CmsListRecord> = ReturnType<typeof useCmsRecordList<T>>;