@xleddyl/nuxt-cms 0.4.3 → 0.5.0

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

@@ -1,73 +1,94 @@
 <template>
-   <CmsDrawer :open="!!item" :title="item ? mediaFilename(item.key) : ''" @close="emit('close')">
-      <div v-if="item" class="cms-media-detail">
+   <KDrawer
+      :open="!!item"
+      :title="shown ? mediaFilename(shown.key) : ''"
+      size="lg"
+      @update:open="(value) => !value && emit('close')"
+   >
+      <div v-if="shown" class="cms-media-detail">
          <div class="cms-media-detail-preview">
-            <img v-if="item.type === 'image' && item.url" :src="item.url" :alt="item.alt ?? ''" />
+            <img
+               v-if="shown.type === 'image' && shown.url"
+               :src="shown.url"
+               :alt="shown.alt ?? ''"
+            />
             <video
-               v-else-if="item.type === 'video' && item.url"
-               :src="item.url"
+               v-else-if="shown.type === 'video' && shown.url"
+               :src="shown.url"
                controls
                preload="metadata"
                playsinline
             />
-            <CmsIcon v-else :name="mediaIconFor(item.type)" class="size-12" />
+            <KIcon v-else :name="cmsIcon(mediaIconFor(shown.type))" />
          </div>
 
-         <div class="cms-actions">
-            <template v-if="item.url">
-               <CmsButton
-                  :label="copied ? 'Copied' : 'Copy URL'"
-                  :icon="copied ? 'check' : 'clipboard-document'"
+         <KStack direction="row" gap="sm" align="center" wrap>
+            <template v-if="absoluteUrl">
+               <KCopyButton
+                  :value="absoluteUrl"
+                  label="Copy URL"
+                  copied-label="Copied"
+                  show-label
                   variant="soft"
-                  color="neutral"
+                  tone="neutral"
                   size="sm"
-                  @click="copyUrl"
                />
-               <a
-                  :href="item.url"
+               <KButton
+                  :href="shown.url ?? void 0"
                   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>
+                  label="Open"
+                  :icon="cmsIcon('arrow-top-right-on-square')"
+                  variant="ghost"
+                  tone="neutral"
+                  size="sm"
+               />
             </template>
-            <a
+            <KButton
                :href="downloadHref"
                download
-               class="cms-btn cms-btn-sm cms-btn-neutral cms-btn-ghost"
-            >
-               <CmsIcon name="arrow-down-tray" class="size-4 shrink-0" />Download
-            </a>
-         </div>
+               label="Download"
+               :icon="cmsIcon('arrow-down-tray')"
+               variant="ghost"
+               tone="neutral"
+               size="sm"
+            />
+         </KStack>
 
-         <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-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
+                  >
+               </template>
+            </KDescriptionList>
+         </div>
 
-         <div class="cms-form">
-            <CmsFormField label="Alt text">
-               <CmsInput
+         <KStack gap="md">
+            <KFormField label="Alt text">
+               <KInput
                   v-model="alt"
                   placeholder="Describe the image for screen readers"
                   @keydown.enter.prevent="save"
                />
-            </CmsFormField>
-            <CmsFormField v-if="!readOnly" label="Folder">
+            </KFormField>
+            <KFormField v-if="!readOnly" label="Folder">
                <CmsMediaFolderPicker v-model="folder" :folders="folders" />
-            </CmsFormField>
-         </div>
+            </KFormField>
+         </KStack>
 
          <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">
+            <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-form-hint">Not used in any entry.</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
@@ -84,27 +105,39 @@
       </div>
 
       <template #footer>
-         <CmsButton
+         <KButton
             v-if="!readOnly"
             label="Delete"
-            icon="trash"
+            :icon="cmsIcon('trash')"
             variant="ghost"
-            color="error"
+            tone="danger"
             @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>
+         <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>
       </template>
-   </CmsDrawer>
+   </KDrawer>
 </template>
 
 <script setup>
-import { computed, ref, watch } from "#imports";
+import { computed, ref, useRequestURL, watch } from "#imports";
+import {
+  Button as KButton,
+  CopyButton as KCopyButton,
+  DescriptionList as KDescriptionList,
+  Drawer as KDrawer,
+  FormField as KFormField,
+  Icon as KIcon,
+  Input as KInput,
+  Spinner as KSpinner,
+  Stack as KStack
+} from "@xleddyl/443-components-vue";
 import { formatFileSize, mediaFilename, mediaIconFor } from "#nuxt-cms";
 import { usageLink } from "../../composables/cms-media-library";
+import { cmsIcon } from "../../utils/ui";
 const props = defineProps({
   item: { type: [Object, null], required: true },
   library: { type: null, required: true },
@@ -115,16 +148,23 @@ 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);
+const requestUrl = useRequestURL();
+const lastItem = ref(props.item);
+watch(
+  () => props.item,
+  (value) => {
+    if (value) lastItem.value = value;
+  }
+);
+const shown = computed(() => props.item ?? lastItem.value);
 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;
@@ -138,36 +178,34 @@ const dirty = computed(() => {
   return (alt.value.trim() || null) !== (props.item.alt ?? null) || !props.readOnly && folder.value !== (props.item.folder ?? null);
 });
 const downloadHref = computed(
-  () => props.item ? `/api/cms/admin/media/download?key=${encodeURIComponent(props.item.key)}` : ""
+  () => shown.value ? `/api/cms/admin/media/download?key=${encodeURIComponent(shown.value.key)}` : ""
+);
+const absoluteUrl = computed(
+  () => shown.value?.url ? new URL(shown.value.url, requestUrl.origin).toString() : null
 );
 const facts = computed(() => {
-  const item = props.item;
+  const item = shown.value;
   if (!item) return [];
   const list = [
-    { label: "Folder", value: item.folder ?? "Library root" },
-    { label: "Type", value: item.mime ?? item.type }
+    { key: "folder", label: "Folder", value: item.folder ?? "Library root" },
+    { key: "type", label: "Type", value: item.mime ?? item.type }
   ];
-  if (item.size != null) list.push({ label: "Size", value: formatFileSize(item.size) });
+  if (item.size != null) {
+    list.push({ key: "size", label: "Size", value: formatFileSize(item.size) });
+  }
   if (item.width && item.height) {
-    list.push({ label: "Dimensions", value: `${item.width} \xD7 ${item.height}` });
+    list.push({ key: "dimensions", label: "Dimensions", value: `${item.width} \xD7 ${item.height}` });
   }
   if (item.createdAt) {
-    list.push({ label: "Uploaded", value: new Date(item.createdAt).toLocaleString() });
+    list.push({
+      key: "uploaded",
+      label: "Uploaded",
+      value: new Date(item.createdAt).toLocaleString()
+    });
   }
-  list.push({ label: "Key", value: item.key, mono: true });
+  list.push({ key: "key", label: "Key", value: item.key });
   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;

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

@@ -1,12 +1,14 @@
 <template>
-   <div
+   <KCard
       v-if="model"
-      class="cms-card cms-block-tile cms-media-single"
+      variant="outline"
+      padding="none"
+      class="cms-media-single"
       :class="{ 'is-missing': missing }"
    >
       <button
          type="button"
-         class="cms-block-preview"
+         class="cms-media-single-preview"
          aria-label="Replace media"
          @click="openGallery"
       >
@@ -18,59 +20,65 @@
             muted
             playsinline
          />
-         <CmsIcon v-else :name="icon" class="size-7" />
+         <KIcon v-else :name="cmsIcon(icon)" />
       </button>
-      <div class="cms-block-bar">
-         <span class="cms-block-bar-name" :title="model">{{ mediaFilename(model) }}</span>
-         <div class="cms-block-bar-actions">
-            <CmsButton
-               icon="arrow-path"
+      <div class="cms-media-single-bar">
+         <span class="cms-media-single-name" :title="model">{{ mediaFilename(model) }}</span>
+         <KStack direction="row" gap="none" align="center">
+            <KButton
+               :icon="cmsIcon('arrow-path')"
                size="xs"
                variant="ghost"
-               color="neutral"
+               tone="neutral"
                aria-label="Replace"
                @click="openGallery"
             />
-            <CmsButton
-               icon="trash"
+            <KButton
+               :icon="cmsIcon('trash')"
                size="xs"
                variant="ghost"
-               color="error"
+               tone="danger"
                aria-label="Remove"
                @click="clear"
             />
-         </div>
+         </KStack>
       </div>
-   </div>
+   </KCard>
 
-   <button v-else type="button" class="cms-block-add cms-media-single" @click="openGallery">
-      <CmsIcon name="photo" class="size-5" />
+   <button v-else type="button" class="cms-media-single-add" @click="openGallery">
+      <KIcon :name="cmsIcon('photo')" />
       <span>Choose</span>
    </button>
 
    <p v-if="missing" class="cms-media-missing">
-      <CmsIcon name="exclamation-triangle" class="size-4" />
+      <KIcon :name="cmsIcon('exclamation-triangle')" />
       <span>Not found in the media library</span>
    </p>
 
-   <CmsModal v-model:open="galleryOpen" title="Media" size="lg">
-      <template #body>
-         <CmsMediaGallery
-            v-model:folder="pickerFolder"
-            selectable
-            :media-type="mediaType"
-            :accept="accept"
-            @select="onSelect"
-         />
-      </template>
-   </CmsModal>
+   <KModal v-model:open="galleryOpen" title="Media" size="lg">
+      <CmsMediaGallery
+         v-model:folder="pickerFolder"
+         selectable
+         :media-type="mediaType"
+         :accept="accept"
+         @select="onSelect"
+      />
+   </KModal>
 </template>
 
 <script setup>
 import { computed, ref, useState } from "#imports";
+import {
+  Button as KButton,
+  Card as KCard,
+  Icon as KIcon,
+  Modal as KModal,
+  Stack as KStack
+} from "@xleddyl/443-components-vue";
 import { mediaFilename, mediaIconFor, mediaPublicUrl, mediaTypeForKey } from "#nuxt-cms";
 import { useCmsMediaKeys } from "../../composables/cms-media-keys";
 import { useCmsRuntime } from "../../composables/cms-runtime";
+import { cmsIcon } from "../../utils/ui";
 defineProps({
   mediaType: { type: null, required: false },
   accept: { type: Array, required: false }

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

@@ -1,6 +1,7 @@
 type __VLS_Props = {
     folders: string[];
     exclude?: string | null;
+    label?: string;
 };
 type __VLS_ModelProps = {
     modelValue?: string | null;

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

@@ -1,64 +1,92 @@
 <template>
-   <div class="cms-folder-picker">
-      <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 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>
 </template>
 
 <script setup>
 import { computed, ref } from "#imports";
-import { isWithinMediaFolder, mediaFolderDepth, mediaFolderName } from "#nuxt-cms";
+import {
+  FieldBoundary as KFieldBoundary,
+  Input as KInput,
+  Tree as KTree
+} from "@xleddyl/443-components-vue";
+import { isWithinMediaFolder, mediaFolderName, mediaFolderParent } from "#nuxt-cms";
+import { cmsIcon } from "../../utils/ui";
+const ROOT_ID = ":root";
 const props = defineProps({
   folders: { type: Array, required: true },
-  exclude: { type: [String, null], required: false }
+  exclude: { type: [String, null], required: false },
+  label: { type: String, required: false }
 });
 const model = defineModel({ type: [String, null], ...{ default: null } });
 const query = ref("");
-const visible = computed(() => {
-  const term = query.value.trim().toLowerCase();
-  return term ? props.folders.filter((folder) => folder.includes(term)) : props.folders;
-});
+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 && !!folder && isWithinMediaFolder(folder, props.exclude);
+  return !!props.exclude && isWithinMediaFolder(folder, props.exclude);
+}
+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 selected = computed({
+  get: () => model.value === null ? ROOT_ID : model.value,
+  set: (id) => {
+    if (id === null) return;
+    model.value = id === ROOT_ID ? null : String(id);
+  }
+});
 </script>

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

@@ -1,6 +1,7 @@
 type __VLS_Props = {
     folders: string[];
     exclude?: string | null;
+    label?: string;
 };
 type __VLS_ModelProps = {
     modelValue?: string | null;