@xleddyl/nuxt-cms 0.1.59 → 0.1.61

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

@@ -4,16 +4,22 @@ type __VLS_Props = {
     mediaType?: MediaType | MediaType[];
     accept?: string[];
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_ModelProps = {
+    'folder'?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (item: {
         key: string;
         url: string | null;
     }) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "update:folder": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((item: {
         key: string;
         url: string | null;
     }) => any) | undefined;
+    "onUpdate:folder"?: ((value: string | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -7,7 +7,7 @@
       @click="input?.click()"
       @dragover.prevent="dragOver = true"
       @dragleave.prevent="dragOver = false"
-      @drop.prevent="onDrop"
+      @drop.prevent.stop="onDrop"
    >
       <input
          ref="input"
@@ -36,10 +36,9 @@
 </template>
 
 <script setup>
-import { formatFileSize, mediaTypeAccept } from "#nuxt-cms";
+import { mediaTypeAccept } from "#nuxt-cms";
 import { computed, ref } from "#imports";
-import { useCmsRuntime } from "../../composables/cms-runtime";
-import { useCmsToast } from "../../composables/cms-toast";
+import { useCmsMediaUploader } from "../../composables/cms-media-uploader";
 const props = defineProps({
   multiple: { type: Boolean, required: false },
   mediaType: { type: null, required: false, default: "file" },
@@ -47,111 +46,19 @@ const props = defineProps({
   folder: { type: [String, null], required: false, default: null }
 });
 const emit = defineEmits(["uploaded"]);
-const toast = useCmsToast();
-const { mediaMaxFileSize } = useCmsRuntime();
-async function imageDimensions(file) {
-  try {
-    const bitmap = await createImageBitmap(file);
-    const dims = { width: bitmap.width, height: bitmap.height };
-    bitmap.close();
-    return dims;
-  } catch {
-    return {};
-  }
-}
-function videoDimensions(file) {
-  return new Promise((resolve) => {
-    const url = URL.createObjectURL(file);
-    const video = document.createElement("video");
-    const settle = (dims) => {
-      URL.revokeObjectURL(url);
-      resolve(dims);
-    };
-    video.preload = "metadata";
-    video.muted = true;
-    video.onloadedmetadata = () => settle(
-      video.videoWidth && video.videoHeight ? { width: video.videoWidth, height: video.videoHeight } : {}
-    );
-    video.onerror = () => settle({});
-    video.src = url;
-  });
-}
-async function mediaDimensions(file) {
-  if (file.type.startsWith("image/")) return imageDimensions(file);
-  if (file.type.startsWith("video/")) return videoDimensions(file);
-  return {};
-}
+const { upload, uploading, done, total } = useCmsMediaUploader();
 const input = ref(null);
 const dragOver = ref(false);
-const uploading = ref(false);
-const done = ref(0);
-const total = ref(0);
 const acceptAttr = computed(
   () => (props.accept?.length ? props.accept : mediaTypeAccept(props.mediaType))?.join(",")
 );
-function matchesAccept(file) {
-  if (!acceptAttr.value) return true;
-  return acceptAttr.value.split(",").some((raw) => {
-    const pattern = raw.trim().toLowerCase();
-    if (pattern.endsWith("/*")) return file.type.toLowerCase().startsWith(pattern.slice(0, -1));
-    if (pattern.startsWith(".")) return file.name.toLowerCase().endsWith(pattern);
-    return file.type.toLowerCase() === pattern;
-  });
-}
-async function uploadOne(file) {
-  const presign = await $fetch("/api/cms/admin/media/presign", {
-    method: "POST",
-    body: {
-      filename: file.name,
-      contentType: file.type || "application/octet-stream",
-      size: file.size,
-      folder: props.folder
-    }
-  });
-  const res = await fetch(presign.uploadUrl, {
-    method: "PUT",
-    headers: presign.headers,
-    body: file
-  });
-  if (!res.ok) throw new Error(`Upload failed (${res.status})`);
-  const item = await $fetch("/api/cms/admin/media", {
-    method: "POST",
-    body: {
-      key: presign.key,
-      folder: presign.folder,
-      mime: file.type || null,
-      size: file.size,
-      ...await mediaDimensions(file)
-    }
-  });
-  done.value++;
-  return item;
-}
 async function handleFiles(list) {
-  let files = Array.from(list).filter(matchesAccept);
-  const tooLarge = files.filter((file) => file.size > mediaMaxFileSize);
-  for (const file of tooLarge) {
-    toast.add({
-      title: `File too large (max ${formatFileSize(mediaMaxFileSize)}): ${file.name}`,
-      color: "error"
-    });
-  }
-  files = files.filter((file) => file.size <= mediaMaxFileSize);
-  if (!props.multiple) files = files.slice(0, 1);
-  if (!files.length || uploading.value) return;
-  uploading.value = true;
-  done.value = 0;
-  total.value = files.length;
-  try {
-    const results = await Promise.allSettled(files.map(uploadOne));
-    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 (ok.length) emit("uploaded", ok);
-  } finally {
-    uploading.value = false;
-  }
+  const items = await upload(list, {
+    folder: props.folder,
+    accept: acceptAttr.value,
+    multiple: props.multiple
+  });
+  if (items.length) emit("uploaded", items);
 }
 function onChange(event) {
   const el = event.target;

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

@@ -0,0 +1,75 @@
+import type { MediaItem, MediaSourceInfo, MediaUsage } from '../../shared/index.js';
+export interface MediaFolderStats {
+    files: number;
+    folders: number;
+}
+export declare function useCmsMediaLibrary(): {
+    items: import("vue").Ref<{
+        id?: number | undefined;
+        key: string;
+        alt: string | null;
+        folder: string | null;
+        mime: string | null;
+        size: number | null;
+        width: number | null;
+        height: number | null;
+        createdAt: string | null;
+        type: import("../../shared/index.js").MediaType;
+        url: string | null;
+    }[], MediaItem[] | {
+        id?: number | undefined;
+        key: string;
+        alt: string | null;
+        folder: string | null;
+        mime: string | null;
+        size: number | null;
+        width: number | null;
+        height: number | null;
+        createdAt: string | null;
+        type: import("../../shared/index.js").MediaType;
+        url: string | null;
+    }[]>;
+    source: import("vue").Ref<{
+        kind: import("../../shared/index.js").MediaSourceKind;
+        root: string;
+        builtAt: string | null;
+    } | null, MediaSourceInfo | {
+        kind: import("../../shared/index.js").MediaSourceKind;
+        root: string;
+        builtAt: string | null;
+    } | null>;
+    loading: import("vue").Ref<boolean, boolean>;
+    errorCode: import("vue").Ref<number | null, number | null>;
+    folders: import("vue").ComputedRef<string[]>;
+    stats: import("vue").ComputedRef<Map<string, MediaFolderStats>>;
+    reload: (options?: {
+        quiet?: boolean;
+    }) => Promise<void>;
+    childFolders: (parent: string | null) => string[];
+    itemsWithin: (folder: string) => {
+        id?: number | undefined;
+        key: string;
+        alt: string | null;
+        folder: string | null;
+        mime: string | null;
+        size: number | null;
+        width: number | null;
+        height: number | null;
+        createdAt: string | null;
+        type: import("../../shared/index.js").MediaType;
+        url: string | null;
+    }[];
+    createFolder: (name: string) => Promise<boolean>;
+    moveFolder: (from: string, to: string) => Promise<boolean>;
+    deleteFolder: (name: string) => Promise<boolean>;
+    moveItems: (keys: string[], folder: string | null) => Promise<boolean>;
+    deleteItems: (keys: string[]) => Promise<boolean>;
+    updateItem: (key: string, changes: {
+        alt?: string | null;
+        folder?: string | null;
+    }) => Promise<boolean>;
+    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;

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

@@ -0,0 +1,151 @@
+import {
+  expandMediaFolders,
+  isWithinMediaFolder,
+  mediaFolderAncestors,
+  mediaFolderParent
+} from "../../shared/index.js";
+import { computed, ref } from "#imports";
+import { errorMessage } from "../utils/ui.js";
+import { useCmsToast } from "./cms-toast.js";
+const endpoint = "/api/cms/admin/media";
+export function useCmsMediaLibrary() {
+  const toast = useCmsToast();
+  const items = ref([]);
+  const serverFolders = ref([]);
+  const source = ref(null);
+  const loading = ref(true);
+  const errorCode = ref(null);
+  async function reload(options = {}) {
+    if (!options.quiet) loading.value = true;
+    errorCode.value = null;
+    try {
+      const result = await $fetch(endpoint);
+      items.value = result.items;
+      serverFolders.value = result.folders ?? [];
+      source.value = result.source;
+    } catch (err) {
+      errorCode.value = err.statusCode ?? 500;
+    } finally {
+      loading.value = false;
+    }
+  }
+  const folders = computed(
+    () => expandMediaFolders([...serverFolders.value, ...items.value.map((item) => item.folder)])
+  );
+  const stats = computed(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const folder of folders.value) map.set(folder, { files: 0, folders: 0 });
+    for (const folder of folders.value) {
+      const parent = mediaFolderParent(folder);
+      if (parent) map.get(parent).folders++;
+    }
+    for (const item of items.value) {
+      if (!item.folder) continue;
+      for (const folder of mediaFolderAncestors(item.folder)) {
+        const entry = map.get(folder);
+        if (entry) entry.files++;
+      }
+    }
+    return map;
+  });
+  function childFolders(parent) {
+    return folders.value.filter((folder) => mediaFolderParent(folder) === parent);
+  }
+  function itemsWithin(folder) {
+    return items.value.filter((item) => isWithinMediaFolder(item.folder, folder));
+  }
+  async function attempt(title, action) {
+    try {
+      await action();
+      return true;
+    } catch (err) {
+      toast.add({ title, description: errorMessage(err), color: "error" });
+      return false;
+    }
+  }
+  function createFolder(name) {
+    return attempt("Could not create the folder", async () => {
+      await $fetch(`${endpoint}/folders`, { method: "POST", body: { name } });
+      await reload({ quiet: true });
+    });
+  }
+  function moveFolder(from, to) {
+    return attempt("Could not move the folder", async () => {
+      await $fetch(`${endpoint}/folders`, { method: "PATCH", body: { from, to } });
+      await reload({ quiet: true });
+    });
+  }
+  function deleteFolder(name) {
+    return attempt("Could not delete the folder", async () => {
+      await $fetch(`${endpoint}/folders`, {
+        method: "DELETE",
+        query: { name, recursive: "true" }
+      });
+      await reload({ quiet: true });
+    });
+  }
+  function moveItems(keys, folder) {
+    return attempt("Could not move the files", async () => {
+      await $fetch(`${endpoint}/move`, { method: "POST", body: { keys, folder } });
+      await reload({ quiet: true });
+    });
+  }
+  function deleteItems(keys) {
+    return attempt("Delete failed", async () => {
+      await $fetch(`${endpoint}/delete`, { method: "POST", body: { keys } });
+      await reload({ quiet: true });
+    });
+  }
+  function updateItem(key, changes) {
+    return attempt("Save failed", async () => {
+      await $fetch(endpoint, { method: "PUT", body: { key, ...changes } });
+      await reload({ quiet: true });
+    });
+  }
+  async function usage(keys) {
+    if (!keys.length) return {};
+    try {
+      const result = await $fetch(`${endpoint}/usage`, {
+        method: "POST",
+        body: { keys }
+      });
+      return result.usage;
+    } catch {
+      return null;
+    }
+  }
+  return {
+    items,
+    source,
+    loading,
+    errorCode,
+    folders,
+    stats,
+    reload,
+    childFolders,
+    itemsWithin,
+    createFolder,
+    moveFolder,
+    deleteFolder,
+    moveItems,
+    deleteItems,
+    updateItem,
+    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/composables/cms-media-uploader.d.ts

@@ -0,0 +1,12 @@
+import type { MediaItem } from '../../shared/index.js';
+export declare function matchesAccept(file: File, accept: string | undefined): boolean;
+export declare function useCmsMediaUploader(): {
+    upload: (list: FileList | File[], options: {
+        folder: string | null;
+        accept?: string;
+        multiple?: boolean;
+    }) => Promise<MediaItem[]>;
+    uploading: import("vue").Ref<boolean, boolean>;
+    done: import("vue").Ref<number, number>;
+    total: import("vue").Ref<number, number>;
+};

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

@@ -0,0 +1,117 @@
+import { formatFileSize } from "../../shared/index.js";
+import { ref } from "#imports";
+import { useCmsRuntime } from "./cms-runtime.js";
+import { useCmsToast } from "./cms-toast.js";
+async function imageDimensions(file) {
+  try {
+    const bitmap = await createImageBitmap(file);
+    const dims = { width: bitmap.width, height: bitmap.height };
+    bitmap.close();
+    return dims;
+  } catch {
+    return {};
+  }
+}
+function videoDimensions(file) {
+  return new Promise((resolve) => {
+    const url = URL.createObjectURL(file);
+    const video = document.createElement("video");
+    const settle = (dims) => {
+      URL.revokeObjectURL(url);
+      resolve(dims);
+    };
+    video.preload = "metadata";
+    video.muted = true;
+    video.onloadedmetadata = () => settle(
+      video.videoWidth && video.videoHeight ? { width: video.videoWidth, height: video.videoHeight } : {}
+    );
+    video.onerror = () => settle({});
+    video.src = url;
+  });
+}
+async function mediaDimensions(file) {
+  if (file.type.startsWith("image/")) return imageDimensions(file);
+  if (file.type.startsWith("video/")) return videoDimensions(file);
+  return {};
+}
+export function matchesAccept(file, accept) {
+  if (!accept) return true;
+  return accept.split(",").some((raw) => {
+    const pattern = raw.trim().toLowerCase();
+    if (pattern.endsWith("/*")) return file.type.toLowerCase().startsWith(pattern.slice(0, -1));
+    if (pattern.startsWith(".")) return file.name.toLowerCase().endsWith(pattern);
+    return file.type.toLowerCase() === pattern;
+  });
+}
+export function useCmsMediaUploader() {
+  const toast = useCmsToast();
+  const { mediaMaxFileSize } = useCmsRuntime();
+  const uploading = ref(false);
+  const done = ref(0);
+  const total = ref(0);
+  async function uploadOne(file, folder) {
+    const presign = await $fetch("/api/cms/admin/media/presign", {
+      method: "POST",
+      body: {
+        filename: file.name,
+        contentType: file.type || "application/octet-stream",
+        size: file.size,
+        folder
+      }
+    });
+    const res = await fetch(presign.uploadUrl, {
+      method: "PUT",
+      headers: presign.headers,
+      body: file
+    });
+    if (!res.ok) throw new Error(`Upload failed (${res.status})`);
+    const item = await $fetch("/api/cms/admin/media", {
+      method: "POST",
+      body: {
+        key: presign.key,
+        folder: presign.folder,
+        mime: file.type || null,
+        size: file.size,
+        ...await mediaDimensions(file)
+      }
+    });
+    done.value++;
+    return item;
+  }
+  async function upload(list, options) {
+    const all = Array.from(list);
+    let files = all.filter((file) => matchesAccept(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"
+      });
+    }
+    for (const file of files.filter((file2) => file2.size > mediaMaxFileSize)) {
+      toast.add({
+        title: `File too large (max ${formatFileSize(mediaMaxFileSize)}): ${file.name}`,
+        color: "error"
+      });
+    }
+    files = files.filter((file) => file.size <= mediaMaxFileSize);
+    if (options.multiple === false) files = files.slice(0, 1);
+    if (!files.length || uploading.value) return [];
+    uploading.value = true;
+    done.value = 0;
+    total.value = files.length;
+    try {
+      const results = await Promise.allSettled(
+        files.map((file) => uploadOne(file, options.folder))
+      );
+      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" });
+      return ok;
+    } finally {
+      uploading.value = false;
+    }
+  }
+  return { upload, uploading, done, total };
+}

package/dist/runtime/app/pages/admin-media.vue

@@ -6,13 +6,25 @@
          </template>
       </CmsPageHeader>
 
-      <CmsMediaGallery />
+      <CmsMediaGallery v-model:folder="folder" />
    </div>
 </template>
 
 <script setup>
-import { definePageMeta } from "#imports";
+import { computed, definePageMeta, navigateTo, useRoute } from "#imports";
+import { normalizeMediaFolder } from "#nuxt-cms";
 import { useCmsRuntime } from "../composables/cms-runtime";
 definePageMeta({ layout: "cms-admin", middleware: "cms-auth" });
 const runtime = useCmsRuntime();
+const route = useRoute();
+const folder = computed({
+  get: () => {
+    const value = route.query.folder;
+    return normalizeMediaFolder(typeof value === "string" ? value : null);
+  },
+  set: (value) => {
+    const { folder: _folder, ...query } = route.query;
+    void navigateTo({ query: value ? { ...query, folder: value } : query });
+  }
+});
 </script>