@xleddyl/nuxt-cms 0.9.3 → 0.10.0

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

@@ -1,19 +1,34 @@
 <template>
-   <KDrawer
+   <KFormDrawer
       :open="!!item"
       :title="shown ? mediaFilename(shown.key) : ''"
       size="lg"
+      :form="form"
+      :readonly="!canEdit"
+      :deletable="!readOnly && canDelete"
       @update:open="(value) => !value && emit('close')"
+      @delete="item && emit('delete', item)"
    >
-      <div v-if="shown" class="cms-media-detail">
-         <div class="cms-media-detail-preview">
-            <img
-               v-if="shown.type === 'image' && shown.url"
+      <KStack v-if="shown" gap="lg">
+         <KFormField
+            v-if="shown.type === 'image' && shown.url"
+            label="Focal point"
+            :description="
+  focalEditable ? 'Click or drag on the image to mark the part that must stay visible when it is cropped.' : void 0
+"
+         >
+            <KFocalPointInput
+               v-model="focal"
                :src="shown.url"
                :alt="shown.alt ?? ''"
+               :readonly="!focalEditable"
+               empty-text="Center (default)"
+               clearable
             />
+         </KFormField>
+         <div v-else class="cms-media-detail-preview">
             <video
-               v-else-if="shown.type === 'video' && shown.url"
+               v-if="shown.type === 'video' && shown.url"
                :src="shown.url"
                controls
                preload="metadata"
@@ -54,102 +69,100 @@
             />
          </KStack>
 
-         <div class="cms-media-detail-facts">
-            <KDescriptionList :items="facts">
-               <template #value="{ item: fact }">
-                  <span
-                     class="cms-media-detail-fact"
-                     :class="{ 'k-mono': fact.key === 'key' }"
-                     :title="fact.value == null ? void 0 : String(fact.value)"
-                     >{{ fact.value }}</span
-                  >
+         <KCard variant="subtle" padding="sm">
+            <KDescriptionList :items="facts" layout="inline">
+               <template #value-key="{ item: fact }">
+                  <span class="k-mono">{{ fact.value }}</span>
                </template>
             </KDescriptionList>
-         </div>
+         </KCard>
 
          <KStack gap="md">
-            <KFormField label="Alt text">
+            <KFormField label="Alt text" name="alt">
                <KInput
-                  v-model="alt"
+                  v-model="draft.alt"
                   placeholder="Describe the image for screen readers"
-                  @keydown.enter.prevent="save"
+                  :maxlength="ALT_MAX"
                />
             </KFormField>
-            <KFormField v-if="!readOnly" label="Folder">
-               <CmsMediaFolderPicker v-model="folder" :folders="folders" />
+            <KFormField v-if="!readOnly && canEdit" label="Folder" name="folder">
+               <CmsMediaFolderPicker v-model="draft.folder" :folders="folders" />
             </KFormField>
          </KStack>
 
-         <section class="cms-media-detail-usage">
-            <h3 class="cms-media-section-title">Used in</h3>
-            <div v-if="usageLoading" class="cms-media-loading">
-               <KSpinner size="sm" />
-            </div>
-            <p v-else-if="usageList === null" class="cms-media-hint">
-               Could not check where this file is used.
-            </p>
-            <p v-else-if="!usageList.length" class="cms-media-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>
-         <KButton
-            v-if="!readOnly"
-            label="Delete"
-            :icon="cmsIcon('trash')"
-            variant="ghost"
-            tone="danger"
-            @click="item && emit('delete', item)"
-         />
-         <span v-else />
-         <KStack direction="row" gap="sm" align="center">
-            <KButton label="Close" variant="ghost" tone="neutral" @click="emit('close')" />
-            <KButton label="Save" :loading="saving" :disabled="!dirty" @click="save" />
+         <KStack as="section" gap="sm">
+            <KSeparator variant="heading" label="Used in" :level="3" />
+            <KFieldMessage
+               v-if="!usageLoading && usageList === null"
+               tone="neutral"
+               :icon="false"
+               message="Could not check where this file is used."
+            />
+            <KRecordList
+               v-else-if="usageLoading || usageItems.length || !hiddenUsage"
+               :items="usageItems"
+               :loading="usageLoading"
+               :skeleton-rows="2"
+               label="Used in"
+               empty-text="Not used in any entry."
+               empty-variant="hint"
+            />
+            <KFieldMessage
+               v-if="!usageLoading && hiddenUsage"
+               tone="neutral"
+               :icon="false"
+               :message="otherEntriesLabel(hiddenUsage)"
+            />
          </KStack>
-      </template>
-   </KDrawer>
+      </KStack>
+   </KFormDrawer>
 </template>
 
 <script setup>
 import { computed, ref, useRequestURL, watch } from "#imports";
 import {
   Button as KButton,
+  Card as KCard,
   CopyButton as KCopyButton,
   DescriptionList as KDescriptionList,
-  Drawer as KDrawer,
+  FieldMessage as KFieldMessage,
+  FocalPointInput as KFocalPointInput,
+  FormDrawer as KFormDrawer,
   FormField as KFormField,
   Icon as KIcon,
   Input as KInput,
-  Spinner as KSpinner,
-  Stack as KStack
+  RecordList as KRecordList,
+  Separator as KSeparator,
+  Stack as KStack,
+  toast,
+  useForm
 } from "@xleddyl/443-components-vue";
-import { formatFileSize, mediaFilename, mediaIconFor } from "#nuxt-cms";
-import { usageLink } from "../../composables/cms-media-library";
+import {
+  focalPointOf,
+  formatFileSize,
+  groupMediaUsage,
+  mediaFilename,
+  mediaIconFor,
+  otherEntriesLabel
+} from "#nuxt-cms";
+import { usageItem } from "../../composables/cms-media-library";
 import { cmsIcon } from "../../utils/ui";
 const props = defineProps({
   item: { type: [Object, null], required: true },
   library: { type: null, required: true },
-  readOnly: { type: Boolean, required: true }
+  readOnly: { type: Boolean, required: true },
+  canEdit: { type: Boolean, required: false, default: true },
+  canDelete: { type: Boolean, required: false, default: 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 ALT_MAX = 1024;
+const draft = ref({ alt: "", folder: null, focalX: null, focalY: null });
+const form = useForm({ values: draft, onSubmit: save });
 const usageList = ref([]);
+const hiddenUsage = ref(0);
 const usageLoading = ref(false);
+const usageItems = computed(() => groupMediaUsage(usageList.value ?? []).map(usageItem));
 const requestUrl = useRequestURL();
 const lastItem = ref(props.item);
 watch(
@@ -163,19 +176,35 @@ watch(
   () => props.item?.key,
   async (key) => {
     if (!props.item || !key) return;
-    alt.value = props.item.alt ?? "";
-    folder.value = props.item.folder ?? null;
+    const point = focalPointOf(props.item);
+    form.reset({
+      alt: props.item.alt ?? "",
+      folder: props.item.folder ?? null,
+      focalX: point?.x ?? null,
+      focalY: point?.y ?? null
+    });
     usageLoading.value = true;
     const usage = await props.library.usage([key]);
     if (props.item?.key !== key) return;
-    usageList.value = usage ? usage[key] ?? [] : null;
+    usageList.value = usage ? usage.usage[key] ?? [] : null;
+    hiddenUsage.value = usage?.hidden[key] ?? 0;
     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 focal = computed({
+  get: () => draft.value.focalX == null || draft.value.focalY == null ? null : { x: draft.value.focalX, y: draft.value.focalY },
+  set: (point) => {
+    draft.value.focalX = point?.x ?? null;
+    draft.value.focalY = point?.y ?? null;
+  }
+});
+const focalEditable = computed(() => props.canEdit && !!props.item);
+const focalChanged = computed(() => {
+  const saved = focalPointOf(props.item);
+  const current = focal.value;
+  if (!saved || !current) return saved !== current;
+  return saved.x !== current.x || saved.y !== current.y;
 });
 const downloadHref = computed(
   () => shown.value ? `/api/cms/admin/media/download?key=${encodeURIComponent(shown.value.key)}` : ""
@@ -206,14 +235,14 @@ const facts = computed(() => {
   list.push({ key: "key", label: "Key", value: item.key });
   return list;
 });
-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 }
+async function save(values) {
+  if (!props.item) return;
+  await props.library.updateItem(props.item.key, {
+    alt: values.alt.trim() || null,
+    ...props.readOnly ? {} : { folder: values.folder },
+    ...focalChanged.value ? { focalX: values.focalX, focalY: values.focalY } : {}
   });
-  saving.value = false;
-  if (ok) emit("close");
+  toast.success("Saved");
+  emit("close");
 }
 </script>

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

@@ -4,6 +4,8 @@ type __VLS_Props = {
     item: MediaItem | null;
     library: CmsMediaLibrary;
     readOnly: boolean;
+    canEdit?: boolean;
+    canDelete?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: (item: MediaItem) => any;

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

@@ -4,27 +4,29 @@
       variant="outline"
       padding="none"
       class="cms-media-single"
-      :class="{ 'is-missing': missing }"
+      :class="{ 'is-disabled': disabled }"
    >
       <button
          type="button"
-         class="cms-media-single-preview"
+         class="cms-tile-preview"
          aria-label="Replace media"
+         :disabled="disabled || void 0"
          @click="openGallery"
       >
-         <img v-if="kind === 'image' && url" :src="url" alt="" loading="lazy" />
-         <video
-            v-else-if="kind === 'video' && url"
-            :src="url"
-            preload="metadata"
-            muted
-            playsinline
+         <KThumbnail
+            :src="url ?? void 0"
+            :kind="kind"
+            aspect="4/3"
+            rounded="none"
+            :missing="missing"
+            missing-text="Not found in the media library"
          />
-         <KIcon v-else :name="cmsIcon(icon)" />
       </button>
-      <div class="cms-media-single-bar">
-         <span class="cms-media-single-name" :title="model">{{ mediaFilename(model) }}</span>
-         <KStack direction="row" gap="none" align="center">
+      <div class="cms-tile-bar">
+         <KTooltip :text="model">
+            <span class="cms-tile-name">{{ mediaFilename(model) }}</span>
+         </KTooltip>
+         <KStack v-if="!disabled" direction="row" gap="none" align="center">
             <KButton
                :icon="cmsIcon('arrow-path')"
                size="xs"
@@ -45,15 +47,18 @@
       </div>
    </KCard>
 
-   <button v-else type="button" class="cms-media-single-add" @click="openGallery">
-      <KIcon :name="cmsIcon('photo')" />
-      <span>Choose</span>
-   </button>
+   <KCard
+      v-else
+      variant="dashed"
+      as="button"
+      :icon="cmsIcon('photo')"
+      title="Choose"
+      :disabled="disabled"
+      class="cms-media-single-add"
+      @click="openGallery"
+   />
 
-   <p v-if="missing" class="cms-media-missing">
-      <KIcon :name="cmsIcon('exclamation-triangle')" />
-      <span>Not found in the media library</span>
-   </p>
+   <KFieldMessage v-if="missing" tone="warning" message="Not found in the media library" />
 
    <KModal v-model:open="galleryOpen" title="Media" size="lg">
       <CmsMediaGallery
@@ -71,11 +76,14 @@ import { computed, ref, useState } from "#imports";
 import {
   Button as KButton,
   Card as KCard,
-  Icon as KIcon,
+  FieldMessage as KFieldMessage,
   Modal as KModal,
-  Stack as KStack
+  Stack as KStack,
+  Thumbnail as KThumbnail,
+  Tooltip as KTooltip,
+  useFieldControl
 } from "@xleddyl/443-components-vue";
-import { mediaFilename, mediaIconFor, mediaPublicUrl, mediaTypeForKey } from "#nuxt-cms";
+import { mediaFilename, mediaPublicUrl, mediaTypeForKey } from "#nuxt-cms";
 import { useCmsMediaKeys } from "../../composables/cms-media-keys";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { cmsIcon } from "../../utils/ui";
@@ -86,6 +94,7 @@ defineProps({
 const model = defineModel({ type: [String, null], ...{ required: true } });
 const { mediaBaseUrl } = useCmsRuntime();
 const mediaKeys = useCmsMediaKeys();
+const { disabled } = useFieldControl();
 const galleryOpen = ref(false);
 const pickerFolder = useState("cms-media-picker-folder", () => null);
 function onSelect(item) {
@@ -94,13 +103,14 @@ function onSelect(item) {
   galleryOpen.value = false;
 }
 function openGallery() {
+  if (disabled.value) return;
   galleryOpen.value = true;
 }
 function clear() {
+  if (disabled.value) return;
   model.value = null;
 }
 const missing = computed(() => mediaKeys.isMissing(model.value));
 const url = computed(() => model.value ? mediaPublicUrl(mediaBaseUrl, model.value) : null);
 const kind = computed(() => model.value ? mediaTypeForKey(model.value) : "file");
-const icon = computed(() => mediaIconFor(kind.value));
 </script>

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

@@ -1,37 +1,17 @@
 <template>
-   <div class="cms-media-folder-picker">
-      <KFieldBoundary v-if="folders.length > 8" auxiliary>
-         <KInput
-            v-model="query"
-            size="sm"
-            :icon="cmsIcon('magnifying-glass')"
-            placeholder="Find a folder…"
-            aria-label="Find a folder"
-            clearable
-         />
-      </KFieldBoundary>
-      <div class="cms-media-folder-picker-list">
-         <KTree
-            v-model:selected="selected"
-            v-model:expanded="expanded"
-            :nodes="nodes"
-            :bordered="false"
-            :label="label"
-            size="sm"
-            checkmark
-            empty-text="No matching folders"
-         />
-      </div>
-   </div>
+   <KTreeSelect
+      v-model="selected"
+      :nodes="nodes"
+      :icon="cmsIcon(model === null ? 'home' : 'folder')"
+      :aria-label="label"
+      search-placeholder="Find a folder…"
+      empty-text="No matching folders"
+   />
 </template>
 
 <script setup>
-import { computed, ref } from "#imports";
-import {
-  FieldBoundary as KFieldBoundary,
-  Input as KInput,
-  Tree as KTree
-} from "@xleddyl/443-components-vue";
+import { computed } from "#imports";
+import { TreeSelect as KTreeSelect } from "@xleddyl/443-components-vue";
 import { isWithinMediaFolder, mediaFolderName, mediaFolderParent } from "#nuxt-cms";
 import { cmsIcon } from "../../utils/ui";
 const ROOT_ID = ":root";
@@ -41,51 +21,26 @@ const props = defineProps({
   label: { type: String, required: false }
 });
 const model = defineModel({ type: [String, null], ...{ default: null } });
-const query = ref("");
-const term = computed(() => query.value.trim().toLowerCase());
-const visible = computed(
-  () => term.value ? props.folders.filter((folder) => folder.includes(term.value)) : props.folders
-);
-function isDisabled(folder) {
-  return !!props.exclude && isWithinMediaFolder(folder, props.exclude);
+function folderNodes(parent) {
+  return props.folders.filter((folder) => mediaFolderParent(folder) === parent).map((folder) => {
+    const children = folderNodes(folder);
+    return {
+      id: folder,
+      label: mediaFolderName(folder),
+      icon: cmsIcon("folder"),
+      disabled: !!props.exclude && isWithinMediaFolder(folder, props.exclude),
+      children: children.length ? children : void 0
+    };
+  });
 }
-function folderNode(folder, label, children) {
-  return {
-    id: folder,
-    label,
-    icon: cmsIcon(model.value === folder ? "folder-open" : "folder"),
-    disabled: isDisabled(folder),
-    children: children?.length ? children : void 0
-  };
-}
-const nodes = computed(() => {
-  if (term.value) return visible.value.map((folder) => folderNode(folder, folder));
-  const build = (parent) => props.folders.filter((folder) => mediaFolderParent(folder) === parent).map((folder) => folderNode(folder, mediaFolderName(folder), build(folder)));
-  return [{ id: ROOT_ID, label: "Library root", icon: cmsIcon("home"), children: build(null) }];
-});
-const parentIds = computed(() => {
-  const ids = [];
-  const walk = (list) => {
-    for (const node of list) {
-      if (!node.children) continue;
-      ids.push(node.id);
-      walk(node.children);
-    }
-  };
-  walk(nodes.value);
-  return ids;
-});
-const collapsed = ref([]);
-const expanded = computed({
-  get: () => parentIds.value.filter((id) => !collapsed.value.includes(id)),
-  set: (ids) => {
-    collapsed.value = parentIds.value.filter((id) => !ids.includes(id));
-  }
-});
+const nodes = computed(() => [
+  { id: ROOT_ID, label: "Library root", icon: cmsIcon("home") },
+  ...folderNodes(null)
+]);
 const selected = computed({
   get: () => model.value === null ? ROOT_ID : model.value,
   set: (id) => {
-    if (id === null) return;
+    if (id === null || id === void 0) return;
     model.value = id === ROOT_ID ? null : String(id);
   }
 });

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

@@ -1,6 +1,7 @@
 import type { MediaType } from '#nuxt-cms';
 type __VLS_Props = {
     selectable?: boolean;
+    fill?: boolean;
     mediaType?: MediaType | MediaType[];
     accept?: string[];
 };