@xleddyl/nuxt-cms 0.1.60 → 0.1.61

package/dist/module.json

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

package/dist/module.mjs

@@ -1495,6 +1495,26 @@ const module$1 = defineNuxtModule({
       method: "delete",
       handler: resolver.resolve("./runtime/server/api/media-folder.delete")
     });
+    addServerHandler({
+      route: "/api/cms/admin/media/folders",
+      method: "patch",
+      handler: resolver.resolve("./runtime/server/api/media-folder.patch")
+    });
+    addServerHandler({
+      route: "/api/cms/admin/media/move",
+      method: "post",
+      handler: resolver.resolve("./runtime/server/api/media-move.post")
+    });
+    addServerHandler({
+      route: "/api/cms/admin/media/delete",
+      method: "post",
+      handler: resolver.resolve("./runtime/server/api/media-delete.post")
+    });
+    addServerHandler({
+      route: "/api/cms/admin/media/usage",
+      method: "post",
+      handler: resolver.resolve("./runtime/server/api/media-usage.post")
+    });
     if (mediaFilesystemBase) {
       addServerHandler({
         route: "/api/cms/admin/media/upload",

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

@@ -0,0 +1,16 @@
+import type { MediaItem } from '#nuxt-cms';
+import type { CmsMediaLibrary } from '../../composables/cms-media-library.js';
+type __VLS_Props = {
+    item: MediaItem | null;
+    library: CmsMediaLibrary;
+    readOnly: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (item: MediaItem) => any;
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: ((item: MediaItem) => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,169 @@
+<template>
+   <CmsDrawer :open="!!item" :title="item ? mediaFilename(item.key) : ''" @close="emit('close')">
+      <div v-if="item" class="cms-media-detail">
+         <div class="cms-media-detail-preview">
+            <img v-if="item.type === 'image' && item.url" :src="item.url" :alt="item.alt ?? ''" />
+            <video
+               v-else-if="item.type === 'video' && item.url"
+               :src="item.url"
+               controls
+               preload="metadata"
+               playsinline
+            />
+            <CmsIcon v-else :name="mediaIconFor(item.type)" class="size-12" />
+         </div>
+
+         <div v-if="item.url" class="cms-actions">
+            <CmsButton
+               :label="copied ? 'Copied' : 'Copy URL'"
+               :icon="copied ? 'check' : 'clipboard-document'"
+               variant="soft"
+               color="neutral"
+               size="sm"
+               @click="copyUrl"
+            />
+            <a
+               :href="item.url"
+               target="_blank"
+               rel="noopener"
+               class="cms-btn cms-btn-sm cms-btn-neutral cms-btn-ghost"
+            >
+               <CmsIcon name="arrow-top-right-on-square" class="size-4 shrink-0" />Open
+            </a>
+         </div>
+
+         <dl class="cms-media-detail-facts">
+            <template v-for="fact in facts" :key="fact.label">
+               <dt>{{ fact.label }}</dt>
+               <dd :class="{ 'is-mono': fact.mono }" :title="fact.value">{{ fact.value }}</dd>
+            </template>
+         </dl>
+
+         <div class="cms-form">
+            <CmsFormField label="Alt text">
+               <CmsInput
+                  v-model="alt"
+                  placeholder="Describe the image for screen readers"
+                  @keydown.enter.prevent="save"
+               />
+            </CmsFormField>
+            <CmsFormField v-if="!readOnly" label="Folder">
+               <CmsMediaFolderPicker v-model="folder" :folders="folders" />
+            </CmsFormField>
+         </div>
+
+         <section class="cms-media-detail-usage">
+            <h3 class="cms-media-section-title">Used in</h3>
+            <CmsSpinner v-if="usageLoading" />
+            <p v-else-if="usageList === null" class="cms-form-hint">
+               Could not check where this file is used.
+            </p>
+            <p v-else-if="!usageList.length" class="cms-form-hint">Not used in any entry.</p>
+            <ul v-else class="cms-media-usage-list">
+               <li v-for="(entry, index) in usageList" :key="index">
+                  <NuxtLink
+                     :to="usageLink(entry)"
+                     class="cms-media-usage-link"
+                     @click="emit('close')"
+                  >
+                     <span class="cms-media-usage-title">{{ entry.title ?? entry.label }}</span>
+                     <span class="cms-media-usage-meta">{{ entry.label }} · {{ entry.field }}</span>
+                  </NuxtLink>
+               </li>
+            </ul>
+         </section>
+      </div>
+
+      <template #footer>
+         <CmsButton
+            v-if="!readOnly"
+            label="Delete"
+            icon="trash"
+            variant="ghost"
+            color="error"
+            @click="item && emit('delete', item)"
+         />
+         <span v-else />
+         <div class="cms-actions">
+            <CmsButton label="Close" variant="ghost" color="neutral" @click="emit('close')" />
+            <CmsButton label="Save" :loading="saving" :disabled="!dirty" @click="save" />
+         </div>
+      </template>
+   </CmsDrawer>
+</template>
+
+<script setup>
+import { computed, ref, watch } from "#imports";
+import { formatFileSize, mediaFilename, mediaIconFor } from "#nuxt-cms";
+import { usageLink } from "../../composables/cms-media-library";
+const props = defineProps({
+  item: { type: [Object, null], required: true },
+  library: { type: null, required: true },
+  readOnly: { type: Boolean, required: true }
+});
+const emit = defineEmits(["close", "delete"]);
+const folders = computed(() => props.library.folders.value);
+const alt = ref("");
+const folder = ref(null);
+const saving = ref(false);
+const copied = ref(false);
+const usageList = ref([]);
+const usageLoading = ref(false);
+watch(
+  () => props.item?.key,
+  async (key) => {
+    if (!props.item || !key) return;
+    alt.value = props.item.alt ?? "";
+    folder.value = props.item.folder ?? null;
+    copied.value = false;
+    usageLoading.value = true;
+    const usage = await props.library.usage([key]);
+    if (props.item?.key !== key) return;
+    usageList.value = usage ? usage[key] ?? [] : null;
+    usageLoading.value = false;
+  },
+  { immediate: true }
+);
+const dirty = computed(() => {
+  if (!props.item) return false;
+  return (alt.value.trim() || null) !== (props.item.alt ?? null) || !props.readOnly && folder.value !== (props.item.folder ?? null);
+});
+const facts = computed(() => {
+  const item = props.item;
+  if (!item) return [];
+  const list = [
+    { label: "Folder", value: item.folder ?? "Library root" },
+    { label: "Type", value: item.mime ?? item.type }
+  ];
+  if (item.size != null) list.push({ label: "Size", value: formatFileSize(item.size) });
+  if (item.width && item.height) {
+    list.push({ label: "Dimensions", value: `${item.width} \xD7 ${item.height}` });
+  }
+  if (item.createdAt) {
+    list.push({ label: "Uploaded", value: new Date(item.createdAt).toLocaleString() });
+  }
+  list.push({ label: "Key", value: item.key, mono: true });
+  return list;
+});
+async function copyUrl() {
+  if (!props.item?.url) return;
+  const url = new URL(props.item.url, window.location.origin).toString();
+  try {
+    await navigator.clipboard.writeText(url);
+    copied.value = true;
+    setTimeout(() => copied.value = false, 1500);
+  } catch {
+    copied.value = false;
+  }
+}
+async function save() {
+  if (!props.item || !dirty.value || saving.value) return;
+  saving.value = true;
+  const ok = await props.library.updateItem(props.item.key, {
+    alt: alt.value.trim() || null,
+    ...props.readOnly ? {} : { folder: folder.value }
+  });
+  saving.value = false;
+  if (ok) emit("close");
+}
+</script>

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

@@ -0,0 +1,16 @@
+import type { MediaItem } from '#nuxt-cms';
+import type { CmsMediaLibrary } from '../../composables/cms-media-library.js';
+type __VLS_Props = {
+    item: MediaItem | null;
+    library: CmsMediaLibrary;
+    readOnly: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (item: MediaItem) => any;
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: ((item: MediaItem) => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -55,13 +55,19 @@
 
    <CmsModal v-model:open="galleryOpen" title="Media" size="lg">
       <template #body>
-         <CmsMediaGallery selectable :media-type="mediaType" :accept="accept" @select="onSelect" />
+         <CmsMediaGallery
+            v-model:folder="pickerFolder"
+            selectable
+            :media-type="mediaType"
+            :accept="accept"
+            @select="onSelect"
+         />
       </template>
    </CmsModal>
 </template>
 
 <script setup>
-import { computed, ref } from "#imports";
+import { computed, ref, useState } from "#imports";
 import { mediaFilename, mediaIconFor, mediaPublicUrl, mediaTypeForKey } from "#nuxt-cms";
 import { useCmsMediaKeys } from "../../composables/cms-media-keys";
 import { useCmsRuntime } from "../../composables/cms-runtime";
@@ -73,6 +79,7 @@ const model = defineModel({ type: [String, null], ...{ required: true } });
 const { mediaBaseUrl } = useCmsRuntime();
 const mediaKeys = useCmsMediaKeys();
 const galleryOpen = ref(false);
+const pickerFolder = useState("cms-media-picker-folder", () => null);
 function onSelect(item) {
   mediaKeys.remember(item.key);
   model.value = item.key;

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

@@ -1,5 +1,7 @@
 type __VLS_Props = {
     folders: string[];
+    exclude?: string | null;
+    disabled?: (string | null)[];
 };
 type __VLS_ModelProps = {
     modelValue?: string | null;
@@ -7,10 +9,8 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | null) => any;
-    create: (folder: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
-    onCreate?: ((folder: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,65 +1,66 @@
 <template>
    <div class="cms-folder-picker">
-      <button
-         type="button"
-         class="cms-pill"
-         :class="{ 'is-active': model === null }"
-         @click="model = null"
-      >
-         <CmsIcon name="circle-stack" class="size-3" />Root
-      </button>
-      <button
-         v-for="name in folders"
-         :key="name"
-         type="button"
-         class="cms-pill"
-         :class="{ 'is-active': model === name }"
-         @click="model = name"
-      >
-         <CmsIcon name="folder" class="size-3" />{{ name }}
-      </button>
-      <template v-if="creating">
-         <CmsInput
-            v-model="draft"
-            size="sm"
-            autofocus
-            placeholder="Folder name"
-            class="cms-folder-picker-input"
-            @keydown.enter.prevent="commit"
-            @keydown.esc="cancel"
-         />
-         <CmsButton label="Add" size="xs" :disabled="!normalized" @click="commit" />
-         <CmsButton label="Cancel" size="xs" variant="ghost" color="neutral" @click="cancel" />
-      </template>
-      <button v-else type="button" class="cms-pill" @click="startCreating">
-         <CmsIcon name="folder-plus" class="size-3" />New folder
-      </button>
+      <CmsInput
+         v-if="folders.length > 8"
+         v-model="query"
+         size="sm"
+         icon="magnifying-glass"
+         placeholder="Find a folder…"
+      />
+      <div class="cms-folder-picker-list" role="listbox">
+         <button
+            v-if="!query"
+            type="button"
+            role="option"
+            class="cms-folder-picker-row"
+            :class="{ 'is-active': model === null }"
+            :aria-selected="model === null"
+            :disabled="isDisabled(null)"
+            @click="model = null"
+         >
+            <CmsIcon name="home" class="size-4" />
+            <span class="truncate">Library root</span>
+            <CmsIcon v-if="model === null" name="check" class="cms-folder-picker-check size-4" />
+         </button>
+         <button
+            v-for="folder in visible"
+            :key="folder"
+            type="button"
+            role="option"
+            class="cms-folder-picker-row"
+            :class="{ 'is-active': model === folder }"
+            :style="
+  query ? void 0 : { paddingLeft: `${0.625 + mediaFolderDepth(folder) * 1}rem` }
+"
+            :aria-selected="model === folder"
+            :disabled="isDisabled(folder)"
+            @click="model = folder"
+         >
+            <CmsIcon :name="model === folder ? 'folder-open' : 'folder'" class="size-4" />
+            <span class="truncate">{{ query ? folder : mediaFolderName(folder) }}</span>
+            <CmsIcon v-if="model === folder" name="check" class="cms-folder-picker-check size-4" />
+         </button>
+         <p v-if="query && !visible.length" class="cms-folder-picker-empty">No matching folders</p>
+      </div>
    </div>
 </template>
 
 <script setup>
 import { computed, ref } from "#imports";
-import { normalizeMediaFolder } from "#nuxt-cms";
-defineProps({
-  folders: { type: Array, required: true }
+import { isWithinMediaFolder, mediaFolderDepth, mediaFolderName } from "#nuxt-cms";
+const props = defineProps({
+  folders: { type: Array, required: true },
+  exclude: { type: [String, null], required: false },
+  disabled: { type: Array, required: false }
 });
-const emit = defineEmits(["create"]);
 const model = defineModel({ type: [String, null], ...{ default: null } });
-const creating = ref(false);
-const draft = ref("");
-const normalized = computed(() => normalizeMediaFolder(draft.value));
-function startCreating() {
-  creating.value = true;
-}
-function cancel() {
-  creating.value = false;
-  draft.value = "";
-}
-function commit() {
-  const folder = normalized.value;
-  if (!folder) return;
-  emit("create", folder);
-  model.value = folder;
-  cancel();
+const query = ref("");
+const visible = computed(() => {
+  const term = query.value.trim().toLowerCase();
+  return term ? props.folders.filter((folder) => folder.includes(term)) : props.folders;
+});
+function isDisabled(folder) {
+  if (props.disabled?.includes(folder)) return true;
+  return !!props.exclude && !!folder && isWithinMediaFolder(folder, props.exclude);
 }
 </script>

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

@@ -1,5 +1,7 @@
 type __VLS_Props = {
     folders: string[];
+    exclude?: string | null;
+    disabled?: (string | null)[];
 };
 type __VLS_ModelProps = {
     modelValue?: string | null;
@@ -7,10 +9,8 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | null) => any;
-    create: (folder: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
-    onCreate?: ((folder: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/cms/MediaGallery.d.vue.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;