@xleddyl/nuxt-cms 0.2.1 → 0.2.2

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@xleddyl/nuxt-cms",
   "configKey": "cms",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1126,7 +1126,7 @@ function addCmsTypeTemplates(nuxt, cmsConfig) {
       ``,
       `declare const graphql: CmsGraphql`,
       ``,
-      `// @ts-ignore: gql.tada's cache overload rejects this instantiation, but the parse overload still resolves`,
+      `// @ts-ignore`,
       `export type CmsDocument<Query extends string> = ReturnType<typeof graphql<Query, []>>`,
       ``,
       `export type CmsResult<Query extends string> = string extends Query`,

package/dist/runtime/app/components/cms/BrandMark.vue

@@ -2,12 +2,11 @@
    <span class="cms-brand-mark" :class="{ 'is-lg': size === 'lg' }" aria-hidden="true">
       <svg viewBox="0 0 16 16" fill="none">
          <path
-            d="M4.25 12.25V7.5a3.75 3.75 0 0 1 7.5 0v4.75"
+            d="M4.5 5.5h7M4.5 8h7M4.5 10.5h4"
             stroke="currentColor"
-            stroke-width="2"
+            stroke-width="1.5"
             stroke-linecap="round"
          />
-         <circle cx="8" cy="12.25" r="1.25" fill="currentColor" />
       </svg>
    </span>
 </template>

package/dist/runtime/app/components/cms/ConfirmModal.vue

@@ -2,12 +2,25 @@
    <CmsModal
       v-model:open="state.open"
       :title="state.title ?? 'Are you sure?'"
-      size="sm"
+      :size="state.groups?.length ? void 0 : 'sm'"
       @after:leave="finish(false)"
    >
       <template #body>
          <div class="cms-form">
             <p class="text-sm">{{ state.message }}</p>
+            <div v-if="state.groups?.length" class="cms-confirm-groups">
+               <section v-for="group in state.groups" :key="group.title" class="cms-confirm-group">
+                  <h3 class="cms-confirm-group-title" :title="group.title">{{ group.title }}</h3>
+                  <ul class="cms-media-usage-list">
+                     <li v-for="link in group.links" :key="link.to + link.meta">
+                        <NuxtLink :to="link.to" class="cms-media-usage-link" @click="finish(false)">
+                           <span class="cms-media-usage-title">{{ link.title }}</span>
+                           <span class="cms-media-usage-meta">{{ link.meta }}</span>
+                        </NuxtLink>
+                     </li>
+                  </ul>
+               </section>
+            </div>
             <div class="cms-actions is-end">
                <CmsButton label="Cancel" variant="soft" color="neutral" @click="finish(false)" />
                <CmsButton

package/dist/runtime/app/components/cms/MediaGallery.vue

@@ -336,6 +336,19 @@
                      <div v-if="query && item.folder" class="cms-media-folder">
                         <CmsIcon name="folder" class="size-3" />{{ item.folder }}
                      </div>
+                     <span
+                        v-if="!selectable"
+                        class="cms-media-usage-badge"
+                        :class="{ 'is-unused': usageCount(item.key) === 0 }"
+                     >
+                        <template v-if="usageCount(item.key) !== null">
+                           <CmsIcon
+                              :name="usageCount(item.key) ? 'link' : 'link-slash'"
+                              class="size-3"
+                           />{{ usageLabel(item.key) }}
+                        </template>
+                        <template v-else>&nbsp;</template>
+                     </span>
                   </div>
                </div>
             </div>
@@ -378,6 +391,18 @@
                         <CmsIcon name="folder" class="size-3" />{{ item.folder }}
                      </span>
                   </span>
+                  <span v-if="!selectable" class="cms-media-row-cell is-usage">
+                     <span
+                        v-if="usageCount(item.key) !== null"
+                        class="cms-media-usage-badge"
+                        :class="{ 'is-unused': usageCount(item.key) === 0 }"
+                     >
+                        <CmsIcon
+                           :name="usageCount(item.key) ? 'link' : 'link-slash'"
+                           class="size-3"
+                        />{{ usageLabel(item.key) }}
+                     </span>
+                  </span>
                   <span class="cms-media-row-cell is-mono">{{ extension(item.key) }}</span>
                   <span class="cms-media-row-cell">{{
                      item.size != null ? formatFileSize(item.size) : ""
@@ -556,13 +581,15 @@ import {
   mediaFolderName,
   mediaFolderParent,
   mediaIconFor,
+  groupMediaUsage,
+  mediaUsageGroups,
   mediaTypeAccept,
   mediaTypeFilter,
   rebaseMediaFolder,
   slugify
 } from "#nuxt-cms";
 import { useCmsConfirm } from "../../composables/cms-confirm";
-import { useCmsMediaLibrary, usageSummary } from "../../composables/cms-media-library";
+import { useCmsMediaLibrary, usageLink } from "../../composables/cms-media-library";
 import {
   uploadTreeFromDrop,
   uploadTreeFromFiles,
@@ -707,6 +734,35 @@ watch(visibleFiles, (list) => {
 const paged = computed(
   () => visibleFiles.value.slice((page.value - 1) * PAGE_SIZE, page.value * PAGE_SIZE)
 );
+const usageByKey = ref({});
+let usageRequest = 0;
+watch(
+  () => [props.selectable, library.loading.value, paged.value],
+  async ([selectable, loading, items]) => {
+    const request = ++usageRequest;
+    if (selectable || loading || !items.length) return;
+    const usage = await library.usage(items.map((item) => item.key));
+    if (request !== usageRequest) return;
+    usageByKey.value = usage ?? {};
+  },
+  { immediate: true }
+);
+const usageCounts = computed(
+  () => new Map(
+    Object.entries(usageByKey.value).map(([key, list]) => [key, groupMediaUsage(list).length])
+  )
+);
+function usageCount(key) {
+  return usageCounts.value.get(key) ?? null;
+}
+function entriesLabel(count) {
+  return `${count} entr${count === 1 ? "y" : "ies"}`;
+}
+function usageLabel(key) {
+  const count = usageCount(key);
+  if (count === null) return "";
+  return count ? `Used in ${entriesLabel(count)}` : "Unused";
+}
 const emptyState = computed(() => {
   if (query.value) {
     return {
@@ -890,6 +946,31 @@ async function renameFolder() {
   renameOpen.value = false;
   openFolder(to);
 }
+async function confirmDelete(keys, question, title) {
+  const usage = await library.usage(keys);
+  const groups = usage ? mediaUsageGroups(usage, keys) : [];
+  if (!groups.length) {
+    const warning = usage ? "" : " Could not check where the files are used.";
+    return confirmAction(`${question}${warning}`, { title, confirmLabel: "Delete" });
+  }
+  const single = keys.length === 1;
+  const usedIn = single ? `This file is used in ${entriesLabel(groups[0].entries.length)}.` : `${groups.length} of ${keys.length} files are used in your content.`;
+  return confirmAction(
+    `${question} ${usedIn} Deleting ${single ? "it" : "them"} leaves broken links there.`,
+    {
+      title: single ? "File in use" : "Files in use",
+      confirmLabel: "Delete anyway",
+      groups: groups.map((group) => ({
+        title: group.key,
+        links: group.entries.map((entry) => ({
+          title: entry.title ?? entry.label,
+          meta: `${entry.label} \xB7 ${entry.fields.join(", ")}`,
+          to: usageLink(entry)
+        }))
+      }))
+    }
+  );
+}
 async function removeFolder(path) {
   const files = library.itemsWithin(path);
   const subfolders = library.folders.value.filter(
@@ -898,10 +979,12 @@ async function removeFolder(path) {
   const contents = [];
   if (subfolders) contents.push(`${subfolders} subfolder${subfolders > 1 ? "s" : ""}`);
   if (files.length) contents.push(`${files.length} file${files.length > 1 ? "s" : ""}`);
-  const keys = files.map((item) => item.key);
-  const summary = usageSummary(await library.usage(keys), keys);
-  const message = contents.length ? `Delete "${mediaFolderName(path)}" with ${contents.join(" and ")}? ${summary}` : `Delete the empty folder "${mediaFolderName(path)}"?`;
-  if (!await confirmAction(message.trim(), { title: "Delete folder", confirmLabel: "Delete" }))
+  const question = contents.length ? `Delete "${mediaFolderName(path)}" with ${contents.join(" and ")}?` : `Delete the empty folder "${mediaFolderName(path)}"?`;
+  if (!await confirmDelete(
+    files.map((item) => item.key),
+    question,
+    "Delete folder"
+  ))
     return;
   const ok = await run(() => library.deleteFolder(path));
   if (ok && folder.value && isWithinMediaFolder(folder.value, path)) {
@@ -911,13 +994,8 @@ async function removeFolder(path) {
 async function removeItems(items) {
   if (!items.length) return;
   const keys = items.map((item) => item.key);
-  const summary = usageSummary(await library.usage(keys), keys);
   const question = keys.length === 1 ? `Delete "${mediaFilename(keys[0])}"?` : `Delete ${keys.length} files?`;
-  if (!await confirmAction(`${question} ${summary}`.trim(), {
-    title: "Delete",
-    confirmLabel: "Delete"
-  }))
-    return;
+  if (!await confirmDelete(keys, question, "Delete")) return;
   const ok = await run(() => library.deleteItems(keys));
   if (!ok) return;
   if (detailKey.value && keys.includes(detailKey.value)) detailKey.value = null;

package/dist/runtime/app/components/cms/Modal.vue

@@ -1,7 +1,5 @@
 <template>
    <Teleport to="body">
-      <!-- Wrapped in .cms-scope so the vendored Tailwind utilities still apply
-           once teleported outside the admin layout root. -->
       <Transition name="cms-modal">
          <div v-if="open" class="cms-scope cms-overlay" @click.self="close">
             <div

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

@@ -1,12 +1,21 @@
-export interface CmsConfirmState {
-    open: boolean;
-    message: string;
+export interface CmsConfirmLink {
+    title: string;
+    meta: string;
+    to: string;
+}
+export interface CmsConfirmGroup {
+    title: string;
+    links: CmsConfirmLink[];
+}
+export interface CmsConfirmOptions {
     title?: string;
     confirmLabel?: string;
+    groups?: CmsConfirmGroup[];
+}
+export interface CmsConfirmState extends CmsConfirmOptions {
+    open: boolean;
+    message: string;
     resolve?: (value: boolean) => void;
 }
 export declare function useCmsConfirmState(): import("vue").Ref<CmsConfirmState, CmsConfirmState>;
-export declare function useCmsConfirm(): (message: string, options?: {
-    title?: string;
-    confirmLabel?: string;
-}) => Promise<boolean>;
+export declare function useCmsConfirm(): (message: string, options?: CmsConfirmOptions) => Promise<boolean>;

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

@@ -10,6 +10,7 @@ export function useCmsConfirm() {
       message,
       title: options?.title,
       confirmLabel: options?.confirmLabel,
+      groups: options?.groups,
       resolve
     };
   });

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

@@ -71,5 +71,4 @@ export declare function useCmsMediaLibrary(): {
     usage: (keys: string[]) => Promise<Record<string, MediaUsage[]> | null>;
 };
 export type CmsMediaLibrary = ReturnType<typeof useCmsMediaLibrary>;
-export declare function usageSummary(usage: Record<string, MediaUsage[]> | null, keys: string[]): string;
-export declare function usageLink(usage: MediaUsage): string;
+export declare function usageLink(usage: Pick<MediaUsage, 'collection' | 'id'>): string;

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

@@ -9,6 +9,7 @@ import { errorMessage } from "../utils/ui.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([]);
@@ -106,13 +107,18 @@ export function useCmsMediaLibrary() {
     });
   }
   async function usage(keys) {
-    if (!keys.length) return {};
+    const unique = [...new Set(keys)];
+    if (!unique.length) return {};
     try {
-      const result = await $fetch(`${endpoint}/usage`, {
-        method: "POST",
-        body: { keys }
-      });
-      return result.usage;
+      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);
+      }
+      return merged;
     } catch {
       return null;
     }
@@ -136,19 +142,6 @@ export function useCmsMediaLibrary() {
     usage
   };
 }
-export function usageSummary(usage, keys) {
-  if (!usage) return "";
-  const entries = /* @__PURE__ */ new Set();
-  let used = 0;
-  for (const key of keys) {
-    const list = usage[key] ?? [];
-    if (list.length) used++;
-    for (const item of list) entries.add(`${item.collection}:${item.id ?? ""}`);
-  }
-  if (!used) return "";
-  const files = keys.length === 1 ? "It is" : `${used} of them are`;
-  return `${files} used in ${entries.size} entr${entries.size === 1 ? "y" : "ies"}, which will keep a broken link.`;
-}
 export function usageLink(usage) {
   return usage.id === null ? `/cms/${usage.collection}` : `/cms/${usage.collection}/${usage.id}`;
 }

package/dist/runtime/app/utils/ui.d.ts

@@ -1,7 +1,5 @@
 import type { InjectionKey, Reactive } from 'vue';
 import type { FieldConfig } from '#nuxt-cms';
-/** Shared reactive map of field-name -> error message, provided by CmsForm and
- *  read by CmsFormField to render inline validation errors. */
 export declare const CMS_FORM_ERRORS: InjectionKey<Reactive<Record<string, string>>>;
 export declare function errorMessage(error: unknown): string | undefined;
 export declare function fieldIcon(field: FieldConfig): string;