@xleddyl/nuxt-cms 0.1.26 → 0.1.28

package/dist/module.json

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

package/dist/module.mjs

@@ -702,7 +702,11 @@ const module$1 = defineNuxtModule({
     );
     addVitePlugin(tailwindcss());
     addVitePlugin(svgLoader({ defaultImport: "url", svgoConfig: { plugins: ["prefixIds"] } }));
-    nuxt.options.css.push(resolver.resolve("./runtime/assets/main.css"));
+    nuxt.options.css.push(
+      resolveImport("@fontsource-variable/hanken-grotesk/index.css"),
+      resolveImport("@fontsource/fragment-mono/index.css"),
+      resolver.resolve("./runtime/assets/main.css")
+    );
     nuxt.hook("app:templates", (app) => {
       app.layouts["cms-admin"] = {
         name: "cms-admin",

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

@@ -1,6 +1,5 @@
 type __VLS_Props = {
-    color?: 'error';
-    variant?: string;
+    color?: 'error' | 'success' | 'warning' | 'neutral';
     title?: string;
 };
 declare var __VLS_1: {};

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

@@ -1,6 +1,6 @@
 <template>
-   <div class="cms-alert" :class="`cms-alert-${color ?? 'error'}`">
-      <p v-if="title" class="font-medium">{{ title }}</p>
+   <div class="cms-alert" :class="`cms-alert-${color ?? 'neutral'}`" role="alert">
+      <p v-if="title" class="cms-alert-title">{{ title }}</p>
       <slot />
    </div>
 </template>
@@ -8,7 +8,6 @@
 <script setup>
 defineProps({
   color: { type: String, required: false },
-  variant: { type: String, required: false },
   title: { type: String, required: false }
 });
 </script>

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

@@ -1,6 +1,5 @@
 type __VLS_Props = {
-    color?: 'error';
-    variant?: string;
+    color?: 'error' | 'success' | 'warning' | 'neutral';
     title?: string;
 };
 declare var __VLS_1: {};

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

@@ -8,7 +8,7 @@
          <div class="flex items-center gap-1">
             <button
                type="button"
-               class="cms-kicker flex grow items-center gap-1.5 text-left"
+               class="cms-block-label flex grow items-center gap-1.5 text-left"
                :aria-label="isCollapsed(item) ? 'Expand block' : 'Collapse block'"
                @click="toggleCollapsed(item)"
             >
@@ -69,7 +69,7 @@
          </template>
       </div>
       <CmsDropdownMenu :items="addItems" class="self-start">
-         <CmsButton label="Add block" icon="plus" variant="subtle" />
+         <CmsButton label="Add block" icon="plus" variant="soft" />
       </CmsDropdownMenu>
    </div>
 </template>

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

@@ -6,7 +6,7 @@ type __VLS_Props = {
     trailingIcon?: boolean;
     size?: 'xs' | 'sm' | 'md' | 'lg';
     color?: 'primary' | 'neutral' | 'error' | 'success';
-    variant?: 'solid' | 'subtle' | 'soft' | 'ghost';
+    variant?: 'solid' | 'soft' | 'ghost';
     disabled?: boolean;
     loading?: boolean;
     block?: boolean;

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

@@ -6,7 +6,7 @@ type __VLS_Props = {
     trailingIcon?: boolean;
     size?: 'xs' | 'sm' | 'md' | 'lg';
     color?: 'primary' | 'neutral' | 'error' | 'success';
-    variant?: 'solid' | 'subtle' | 'soft' | 'ghost';
+    variant?: 'solid' | 'soft' | 'ghost';
     disabled?: boolean;
     loading?: boolean;
     block?: boolean;

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

@@ -9,7 +9,7 @@
          <div class="cms-form">
             <p class="text-sm">{{ state.message }}</p>
             <div class="cms-actions is-end">
-               <CmsButton label="Cancel" variant="subtle" color="neutral" @click="finish(false)" />
+               <CmsButton label="Cancel" variant="soft" color="neutral" @click="finish(false)" />
                <CmsButton
                   :label="state.confirmLabel ?? 'Confirm'"
                   color="error"

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

@@ -34,7 +34,7 @@
                type="submit"
                :form="FORM_ID"
                :label="published ? 'Make draft' : 'Publish'"
-               variant="subtle"
+               variant="soft"
                :loading="saving"
                :disabled="loading"
                @click="togglePublished"

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

@@ -1,31 +1,33 @@
 <template>
-   <div v-if="model" class="cms-card cms-media-tile">
-      <img v-if="kind === 'image' && url" :src="url" alt="" class="cms-media-preview-large" />
-      <video
-         v-else-if="kind === 'video' && url"
-         :src="url"
-         controls
-         preload="metadata"
-         playsinline
-         class="cms-media-preview-large"
-      />
-      <div class="cms-media-bar">
+   <div v-if="model" class="cms-card cms-media-field">
+      <div class="cms-media-field-preview">
+         <img v-if="kind === 'image' && url" :src="url" alt="" />
+         <video
+            v-else-if="kind === 'video' && url"
+            :src="url"
+            controls
+            preload="metadata"
+            playsinline
+         />
+         <CmsIcon v-else :name="icon" class="size-10" />
+      </div>
+      <div class="cms-media-field-bar">
          <CmsIcon :name="icon" class="cms-media-bar-icon size-4" />
          <span class="cms-media-bar-name" :title="model">{{ mediaFilename(model) }}</span>
          <CmsButton
-            icon="photo"
-            variant="ghost"
+            label="Replace"
+            icon="arrow-path"
+            variant="soft"
             color="neutral"
             size="xs"
-            aria-label="Change"
             @click="openGallery"
          />
          <CmsButton
-            icon="x-mark"
-            variant="ghost"
-            color="neutral"
+            label="Remove"
+            icon="trash"
+            variant="soft"
+            color="error"
             size="xs"
-            aria-label="Remove"
             @click="clear"
          />
       </div>

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    folders: string[];
+};
+type __VLS_ModelProps = {
+    modelValue?: string | null;
+};
+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

@@ -0,0 +1,65 @@
+<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>
+   </div>
+</template>
+
+<script setup>
+import { computed, ref } from "#imports";
+import { normalizeMediaFolder } from "#nuxt-cms";
+defineProps({
+  folders: { type: Array, required: true }
+});
+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();
+}
+</script>

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    folders: string[];
+};
+type __VLS_ModelProps = {
+    modelValue?: string | null;
+};
+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.vue

@@ -7,39 +7,58 @@
    />
 
    <div v-else class="cms-media-gallery">
-      <CmsMediaUpload
-         v-if="!readOnly"
-         :multiple="!selectable"
-         :dense="selectable"
-         :media-type="mediaType"
-         :accept="accept"
-         @uploaded="onUploaded"
-      />
+      <CmsInput v-model="search" icon="magnifying-glass" placeholder="Search media…" />
 
-      <div v-if="!restricted && items.length" class="cms-media-filters">
-         <button
-            v-for="f in filters"
-            :key="f"
-            type="button"
-            class="cms-pill"
-            :class="{ 'is-active': filter === f }"
-            @click="filter = f"
-         >
-            {{ filterLabels[f] }}
-         </button>
-         <template v-if="folders.length">
-            <span class="cms-media-filter-separator" />
+      <div v-if="showTypeFilters || folderChips.length || !readOnly" class="cms-media-filters">
+         <template v-if="showTypeFilters">
             <button
-               v-for="f in folders"
+               v-for="f in filters"
                :key="f"
                type="button"
                class="cms-pill"
-               :class="{ 'is-active': folder === f }"
-               @click="folder = folder === f ? null : f"
+               :class="{ 'is-active': filter === f }"
+               @click="filter = f"
             >
-               <CmsIcon name="folder" class="size-3" />{{ f }}
+               {{ filterLabels[f] }}
             </button>
          </template>
+         <template v-if="folderChips.length">
+            <span v-if="showTypeFilters" class="cms-media-filter-separator" />
+            <span
+               v-for="chip in folderChips"
+               :key="chip.name"
+               class="cms-pill-group"
+               :class="{ 'is-active': folder === chip.name }"
+            >
+               <button
+                  type="button"
+                  class="cms-pill"
+                  :class="{ 'is-active': folder === chip.name, 'is-empty': chip.empty }"
+                  @click="folder = folder === chip.name ? null : chip.name"
+               >
+                  <CmsIcon name="folder" class="size-3" />{{ chip.name }}
+               </button>
+               <button
+                  v-if="chip.empty && !readOnly"
+                  type="button"
+                  class="cms-pill-discard"
+                  aria-label="Discard empty folder"
+                  @click="discardFolder(chip.name)"
+               >
+                  <CmsIcon name="x-mark" class="size-3" />
+               </button>
+            </span>
+         </template>
+         <div v-if="!readOnly" class="cms-media-filters-actions">
+            <CmsButton
+               label="New folder"
+               icon="folder-plus"
+               variant="soft"
+               size="sm"
+               @click="openNewFolder"
+            />
+            <CmsButton icon="plus" size="sm" aria-label="Upload media" @click="uploadOpen = true" />
+         </div>
       </div>
 
       <CmsSpinner v-if="loading" />
@@ -50,9 +69,12 @@
             v-for="item in paged"
             :key="item.key"
             :type="selectable ? 'button' : void 0"
+            :role="!selectable && !readOnly ? 'button' : void 0"
+            :tabindex="!selectable && !readOnly ? 0 : void 0"
             class="cms-card cms-media-tile"
-            :class="{ 'is-selectable': selectable }"
-            @click="selectable && emit('select', { key: item.key, url: item.url })"
+            :class="{ 'is-selectable': selectable || !readOnly }"
+            @click="onTileClick(item)"
+            @keydown.enter="!selectable && !readOnly && openEdit(item)"
          >
             <div class="cms-media-preview">
                <img
@@ -69,24 +91,14 @@
                   playsinline
                />
                <CmsIcon v-else :name="mediaIconFor(item.type)" class="size-8" />
-               <div v-if="!selectable" class="cms-media-actions">
-                  <CmsButton
-                     v-if="!readOnly"
-                     icon="pencil-square"
-                     size="xs"
-                     color="neutral"
-                     variant="solid"
-                     aria-label="Edit details"
-                     @click="openEdit(item)"
-                  />
+               <div v-if="!selectable && !readOnly" class="cms-media-actions">
                   <CmsButton
-                     v-if="!readOnly"
                      icon="trash"
                      size="xs"
                      color="error"
                      variant="solid"
                      aria-label="Delete"
-                     @click="remove(item)"
+                     @click.stop="remove(item)"
                   />
                </div>
                <div class="cms-media-info">
@@ -100,20 +112,38 @@
                <div class="cms-media-name" :title="item.key">
                   {{ mediaFilename(item.key) }}
                </div>
+               <div v-if="item.folder" class="cms-media-folder">
+                  <CmsIcon name="folder" class="size-3" />{{ item.folder }}
+               </div>
             </div>
          </component>
       </div>
 
       <CmsEmptyState v-else-if="loadError" icon="exclamation-triangle" title="Could not load media">
-         <CmsButton label="Retry" icon="arrow-path" variant="subtle" @click="reload" />
+         <CmsButton label="Retry" icon="arrow-path" variant="soft" @click="reload" />
       </CmsEmptyState>
 
+      <CmsEmptyState
+         v-else-if="items.length"
+         icon="magnifying-glass"
+         title="No matching media"
+         body="Try a different search or filter."
+      />
+
       <CmsEmptyState
          v-else
          icon="photo"
          :title="readOnly ? 'No media' : 'No media yet'"
          :body="readOnly ? 'No media registered.' : 'Files you upload will show up here.'"
-      />
+      >
+         <CmsButton
+            v-if="!readOnly"
+            label="Upload"
+            icon="plus"
+            variant="soft"
+            @click="uploadOpen = true"
+         />
+      </CmsEmptyState>
 
       <CmsPagination
          v-if="!loading && visible.length"
@@ -122,11 +152,60 @@
          :items-per-page="PAGE_SIZE"
       />
 
+      <CmsModal v-if="!readOnly" v-model:open="uploadOpen" title="Upload media">
+         <template #body>
+            <div class="cms-form">
+               <CmsFormField label="Destination folder">
+                  <CmsMediaFolderPicker
+                     v-model="uploadFolder"
+                     :folders="folderNames"
+                     @create="registerFolder"
+                  />
+               </CmsFormField>
+               <CmsMediaUpload
+                  :multiple="!selectable"
+                  :media-type="mediaType"
+                  :accept="accept"
+                  :folder="uploadFolder"
+                  @uploaded="onUploaded"
+               />
+            </div>
+         </template>
+      </CmsModal>
+
+      <CmsModal v-if="!readOnly" v-model:open="newFolderOpen" title="New folder" size="sm">
+         <template #body>
+            <div class="cms-form">
+               <CmsFormField label="Name">
+                  <CmsInput
+                     v-model="newFolderName"
+                     autofocus
+                     placeholder="e.g. blog/covers"
+                     @keydown.enter.prevent="createFolder"
+                  />
+                  <p class="cms-form-hint">
+                     {{
+                        newFolderSlug ? `Files uploaded here are stored under ${newFolderSlug}/` : "Letters, numbers and dashes. Use / for nesting."
+                     }}
+                  </p>
+               </CmsFormField>
+               <div class="cms-actions is-end">
+                  <CmsButton
+                     label="Cancel"
+                     variant="ghost"
+                     color="neutral"
+                     @click="newFolderOpen = false"
+                  />
+                  <CmsButton label="Create" :disabled="!newFolderSlug" @click="createFolder" />
+               </div>
+            </div>
+         </template>
+      </CmsModal>
+
       <CmsModal
          v-if="!readOnly"
          :open="!!editing"
          :title="editing ? mediaFilename(editing.key) : ''"
-         size="lg"
          @update:open="
   (open) => {
     if (!open) editing = null;
@@ -139,9 +218,19 @@
                   <CmsInput v-model="editAlt" />
                </CmsFormField>
                <CmsFormField label="Folder">
-                  <CmsInput v-model="editFolder" />
+                  <CmsMediaFolderPicker
+                     v-model="editFolder"
+                     :folders="folderNames"
+                     @create="registerFolder"
+                  />
                </CmsFormField>
                <div class="cms-actions is-end">
+                  <CmsButton
+                     label="Cancel"
+                     variant="ghost"
+                     color="neutral"
+                     @click="editing = null"
+                  />
                   <CmsButton label="Save" :loading="editSaving" @click="saveEdit" />
                </div>
             </div>
@@ -152,7 +241,7 @@
 
 <script setup>
 import { computed, onMounted, ref, watch } from "#imports";
-import { MEDIA_TYPES, mediaFilename, mediaIconFor } from "#nuxt-cms";
+import { MEDIA_TYPES, mediaFilename, mediaIconFor, normalizeMediaFolder } from "#nuxt-cms";
 import { useCmsConfirm } from "../../composables/cms-confirm";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { useCmsToast } from "../../composables/cms-toast";
@@ -173,6 +262,7 @@ const toast = useCmsToast();
 const runtime = useCmsRuntime();
 const readOnly = computed(() => runtime.mediaStorage === "local");
 const endpoint = "/api/cms/admin/media";
+const DRAFT_FOLDERS_KEY = "nuxt-cms:media-folders";
 const items = ref([]);
 const loading = ref(true);
 const errorCode = ref(null);
@@ -196,20 +286,67 @@ const restricted = computed(
 );
 const filters = ["all", ...MEDIA_TYPES];
 const filter = ref("all");
-const folders = computed(() => {
+const showTypeFilters = computed(() => !restricted.value && items.value.length > 0);
+const search = ref("");
+const draftFolders = ref([]);
+onMounted(() => {
+  try {
+    const stored = JSON.parse(localStorage.getItem(DRAFT_FOLDERS_KEY) ?? "[]");
+    if (Array.isArray(stored)) draftFolders.value = stored.filter((f) => typeof f === "string");
+  } catch {
+    draftFolders.value = [];
+  }
+});
+function persistDraftFolders() {
+  try {
+    localStorage.setItem(DRAFT_FOLDERS_KEY, JSON.stringify(draftFolders.value));
+  } catch {
+  }
+}
+const usedFolders = computed(() => {
   const set = new Set(items.value.map((item) => item.folder).filter((f) => !!f));
   return [...set].sort();
 });
+const folderNames = computed(
+  () => [.../* @__PURE__ */ new Set([...usedFolders.value, ...draftFolders.value])].sort()
+);
+const folderChips = computed(
+  () => folderNames.value.map((name) => ({ name, empty: !usedFolders.value.includes(name) }))
+);
 const folder = ref(null);
+function registerFolder(name) {
+  if (!draftFolders.value.includes(name) && !usedFolders.value.includes(name)) {
+    draftFolders.value = [...draftFolders.value, name];
+    persistDraftFolders();
+  }
+}
+function discardFolder(name) {
+  draftFolders.value = draftFolders.value.filter((f) => f !== name);
+  persistDraftFolders();
+  if (folder.value === name) folder.value = null;
+}
+watch(usedFolders, (used) => {
+  const next = draftFolders.value.filter((f) => !used.includes(f));
+  if (next.length !== draftFolders.value.length) {
+    draftFolders.value = next;
+    persistDraftFolders();
+  }
+});
 const visible = computed(() => {
   const active = restricted.value ?? (filter.value === "all" ? null : filter.value);
   let list = active ? items.value.filter((item) => item.type === active) : items.value;
   if (folder.value) list = list.filter((item) => item.folder === folder.value);
+  const query = search.value.trim().toLowerCase();
+  if (query) {
+    list = list.filter(
+      (item) => [item.key, item.alt, item.folder].some((value) => value?.toLowerCase().includes(query))
+    );
+  }
   return list;
 });
 const PAGE_SIZE = 24;
 const page = ref(1);
-watch([filter, folder], () => {
+watch([filter, folder, search], () => {
   page.value = 1;
 });
 watch(visible, (list) => {
@@ -219,21 +356,48 @@ watch(visible, (list) => {
 const paged = computed(
   () => visible.value.slice((page.value - 1) * PAGE_SIZE, page.value * PAGE_SIZE)
 );
+const uploadOpen = ref(false);
+const uploadFolder = ref(null);
+watch(uploadOpen, (open) => {
+  if (open) uploadFolder.value = folder.value;
+});
 function onUploaded(uploaded) {
+  uploadOpen.value = false;
   if (props.selectable && uploaded[0]) {
     emit("select", uploaded[0]);
     return;
   }
   void reload();
 }
+const newFolderOpen = ref(false);
+const newFolderName = ref("");
+const newFolderSlug = computed(() => normalizeMediaFolder(newFolderName.value));
+function openNewFolder() {
+  newFolderName.value = "";
+  newFolderOpen.value = true;
+}
+function createFolder() {
+  const name = newFolderSlug.value;
+  if (!name) return;
+  registerFolder(name);
+  folder.value = name;
+  newFolderOpen.value = false;
+}
 const editing = ref(null);
 const editAlt = ref("");
-const editFolder = ref("");
+const editFolder = ref(null);
 const editSaving = ref(false);
+function onTileClick(item) {
+  if (props.selectable) {
+    emit("select", { key: item.key, url: item.url });
+    return;
+  }
+  if (!readOnly.value) openEdit(item);
+}
 function openEdit(item) {
   editing.value = item;
   editAlt.value = item.alt ?? "";
-  editFolder.value = item.folder ?? "";
+  editFolder.value = item.folder ?? null;
 }
 async function saveEdit() {
   if (!editing.value) return;
@@ -244,7 +408,7 @@ async function saveEdit() {
       body: {
         id: editing.value.id,
         alt: editAlt.value.trim() || null,
-        folder: editFolder.value.trim() || null
+        folder: editFolder.value
       }
     });
     editing.value = null;