@xleddyl/nuxt-cms 0.1.61 → 0.2.1

package/dist/runtime/app/composables/cms-account.js

@@ -0,0 +1,23 @@
+import { computed, useUserSession } from "#imports";
+const PASSWORD_ALPHABET = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789";
+export function generatePassword(length = 16) {
+  const values = new Uint32Array(length);
+  crypto.getRandomValues(values);
+  return Array.from(values, (value) => PASSWORD_ALPHABET[value % PASSWORD_ALPHABET.length]).join(
+    ""
+  );
+}
+export function initialOf(name, email) {
+  return (name?.trim() || email).charAt(0).toUpperCase() || "A";
+}
+export function useCmsAccount() {
+  const session = useUserSession();
+  const user = computed(() => session.user.value ?? null);
+  const email = computed(() => user.value?.email ?? "");
+  const isSuperAdmin = computed(() => !!user.value && !user.value.id);
+  const displayName = computed(
+    () => user.value?.name?.trim() || (isSuperAdmin.value ? "Super admin" : email.value)
+  );
+  const initial = computed(() => initialOf(user.value?.name, email.value));
+  return { user, email, isSuperAdmin, displayName, initial, refresh: session.fetch };
+}

package/dist/runtime/app/composables/cms-entry-disabled.js

@@ -17,7 +17,7 @@ export function useCmsCollection(name, options = {}) {
 export function useCmsPage(path, options = {}) {
   const { locale, key, default: fallback } = options;
   return useAsyncData(
-    `cms-page:${String(path)}:${locale ?? ""}`,
+    key ?? `cms-page:${String(path)}:${locale ?? ""}`,
     async () => fallback ? fallback() : null
   );
 }

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

@@ -1,3 +1,4 @@
+export declare function invalidateCmsMediaKeys(): void;
 export declare function useCmsMediaKeys(): {
     isMissing: (key: unknown) => boolean;
     remember: (key: string) => void;

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

@@ -6,9 +6,14 @@ function load() {
     known.value = result.source.kind === "none" ? null : new Set(result.items.map((item) => item.key));
   }).catch(() => {
     known.value = null;
+    loading = null;
   });
   return loading;
 }
+export function invalidateCmsMediaKeys() {
+  loading = null;
+  known.value = null;
+}
 export function useCmsMediaKeys() {
   if (import.meta.client) void load();
   function isMissing(key) {

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

@@ -6,6 +6,7 @@ import {
 } from "../../shared/index.js";
 import { computed, ref } from "#imports";
 import { errorMessage } from "../utils/ui.js";
+import { invalidateCmsMediaKeys } from "./cms-media-keys.js";
 import { useCmsToast } from "./cms-toast.js";
 const endpoint = "/api/cms/admin/media";
 export function useCmsMediaLibrary() {
@@ -81,6 +82,7 @@ export function useCmsMediaLibrary() {
         method: "DELETE",
         query: { name, recursive: "true" }
       });
+      invalidateCmsMediaKeys();
       await reload({ quiet: true });
     });
   }
@@ -93,6 +95,7 @@ export function useCmsMediaLibrary() {
   function deleteItems(keys) {
     return attempt("Delete failed", async () => {
       await $fetch(`${endpoint}/delete`, { method: "POST", body: { keys } });
+      invalidateCmsMediaKeys();
       await reload({ quiet: true });
     });
   }

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

@@ -1,7 +1,16 @@
 import type { MediaItem } from '../../shared/index.js';
-export declare function matchesAccept(file: File, accept: string | undefined): boolean;
+export interface UploadEntry {
+    file: File;
+    directory: string | null;
+}
+export interface UploadTree {
+    files: UploadEntry[];
+    directories: string[];
+}
+export declare function uploadTreeFromFiles(list: FileList | File[]): UploadTree;
+export declare function uploadTreeFromDrop(dataTransfer: DataTransfer): Promise<UploadTree>;
 export declare function useCmsMediaUploader(): {
-    upload: (list: FileList | File[], options: {
+    upload: (source: FileList | File[] | UploadTree, options: {
         folder: string | null;
         accept?: string;
         multiple?: boolean;

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

@@ -1,4 +1,9 @@
-import { formatFileSize } from "../../shared/index.js";
+import {
+  formatFileSize,
+  MEDIA_FOLDER_MAX_DEPTH,
+  mediaFolderSegments,
+  normalizeMediaFolder
+} from "../../shared/index.js";
 import { ref } from "#imports";
 import { useCmsRuntime } from "./cms-runtime.js";
 import { useCmsToast } from "./cms-toast.js";
@@ -34,7 +39,7 @@ async function mediaDimensions(file) {
   if (file.type.startsWith("video/")) return videoDimensions(file);
   return {};
 }
-export function matchesAccept(file, accept) {
+function matchesAccept(file, accept) {
   if (!accept) return true;
   return accept.split(",").some((raw) => {
     const pattern = raw.trim().toLowerCase();
@@ -43,6 +48,90 @@ export function matchesAccept(file, accept) {
     return file.type.toLowerCase() === pattern;
   });
 }
+const UPLOAD_CONCURRENCY = 4;
+function isHiddenName(name) {
+  return name.startsWith(".");
+}
+function joinPath(parent, name) {
+  return parent ? `${parent}/${name}` : name;
+}
+export function uploadTreeFromFiles(list) {
+  const files = [];
+  const directories = /* @__PURE__ */ new Set();
+  for (const file of Array.from(list)) {
+    const segments = (file.webkitRelativePath || file.name).split("/").filter(Boolean);
+    if (segments.some(isHiddenName)) continue;
+    const directory = segments.slice(0, -1).join("/") || null;
+    if (directory) directories.add(directory);
+    files.push({ file, directory });
+  }
+  return { files, directories: [...directories] };
+}
+function readDirectory(entry) {
+  const reader = entry.createReader();
+  const all = [];
+  return new Promise((resolve, reject) => {
+    const next = () => reader.readEntries((batch) => {
+      if (!batch.length) return resolve(all);
+      all.push(...batch);
+      next();
+    }, reject);
+    next();
+  });
+}
+function entryFile(entry) {
+  return new Promise((resolve, reject) => entry.file(resolve, reject));
+}
+async function walkEntry(entry, parent, tree) {
+  if (isHiddenName(entry.name)) return;
+  if (entry.isFile) {
+    tree.files.push({ file: await entryFile(entry), directory: parent });
+    return;
+  }
+  if (!entry.isDirectory) return;
+  const directory = joinPath(parent, entry.name);
+  tree.directories.push(directory);
+  const children = await readDirectory(entry);
+  for (const child of children) await walkEntry(child, directory, tree);
+}
+export function uploadTreeFromDrop(dataTransfer) {
+  const files = Array.from(dataTransfer.files);
+  const entries = Array.from(dataTransfer.items ?? []).filter((item) => item.kind === "file").map((item) => item.webkitGetAsEntry?.() ?? null).filter((entry) => !!entry);
+  if (!entries.some((entry) => entry.isDirectory)) {
+    return Promise.resolve(uploadTreeFromFiles(files));
+  }
+  return (async () => {
+    const tree = { files: [], directories: [] };
+    for (const entry of entries) await walkEntry(entry, null, tree);
+    return tree;
+  })();
+}
+async function mapWithConcurrency(list, limit, task) {
+  const results = new Array(list.length);
+  let cursor = 0;
+  const worker = async () => {
+    while (cursor < list.length) {
+      const index = cursor++;
+      try {
+        results[index] = { status: "fulfilled", value: await task(list[index]) };
+      } catch (reason) {
+        results[index] = { status: "rejected", reason };
+      }
+    }
+  };
+  await Promise.all(Array.from({ length: Math.min(limit, list.length) }, worker));
+  return results;
+}
+function targetFolder(base, directory) {
+  const joined = [base, directory].filter(Boolean).join("/");
+  return {
+    folder: normalizeMediaFolder(joined),
+    flattened: mediaFolderSegments(joined).length > MEDIA_FOLDER_MAX_DEPTH
+  };
+}
+function isWithinOrAbove(folder, other) {
+  return other === folder || other.startsWith(`${folder}/`);
+}
 export function useCmsMediaUploader() {
   const toast = useCmsToast();
   const { mediaMaxFileSize } = useCmsRuntime();
@@ -78,9 +167,26 @@ export function useCmsMediaUploader() {
     done.value++;
     return item;
   }
-  async function upload(list, options) {
-    const all = Array.from(list);
-    let files = all.filter((file) => matchesAccept(file, options.accept));
+  async function createFolders(folders) {
+    const results = await mapWithConcurrency(
+      folders,
+      UPLOAD_CONCURRENCY,
+      (name) => $fetch("/api/cms/admin/media/folders", {
+        method: "POST",
+        body: { name }
+      })
+    );
+    const failed = results.filter((r) => r.status === "rejected").length;
+    if (failed)
+      toast.add({
+        title: `${failed} folder${failed > 1 ? "s" : ""} could not be created`,
+        color: "error"
+      });
+  }
+  async function upload(source, options) {
+    const tree = Array.isArray(source) || source instanceof FileList ? uploadTreeFromFiles(source) : source;
+    const all = tree.files;
+    let files = all.filter((entry) => matchesAccept(entry.file, options.accept));
     const rejected = all.length - files.length;
     if (rejected) {
       toast.add({
@@ -88,21 +194,42 @@ export function useCmsMediaUploader() {
         color: "error"
       });
     }
-    for (const file of files.filter((file2) => file2.size > mediaMaxFileSize)) {
+    for (const { file } of files.filter((entry) => entry.file.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 [];
+    files = files.filter((entry) => entry.file.size <= mediaMaxFileSize);
+    const nested = options.multiple !== false;
+    if (!nested) files = files.slice(0, 1).map((entry) => ({ ...entry, directory: null }));
+    const directories = nested ? tree.directories : [];
+    if (!files.length && !directories.length || uploading.value) return [];
+    const planned = files.map((entry) => ({
+      file: entry.file,
+      ...targetFolder(options.folder, entry.directory)
+    }));
+    const fileFolders = planned.map((entry) => entry.folder).filter((f) => !!f);
+    const emptyFolders = [
+      ...new Set(
+        directories.map((directory) => targetFolder(options.folder, directory).folder).filter((folder) => !!folder)
+      )
+    ].filter((folder) => !fileFolders.some((other) => isWithinOrAbove(folder, other)));
+    if (planned.some((entry) => entry.flattened)) {
+      toast.add({
+        title: `Folders nest up to ${MEDIA_FOLDER_MAX_DEPTH} levels`,
+        description: "Files in deeper folders were uploaded to the deepest allowed folder."
+      });
+    }
     uploading.value = true;
     done.value = 0;
-    total.value = files.length;
+    total.value = planned.length;
     try {
-      const results = await Promise.allSettled(
-        files.map((file) => uploadOne(file, options.folder))
+      if (emptyFolders.length) await createFolders(emptyFolders);
+      const results = await mapWithConcurrency(
+        planned,
+        UPLOAD_CONCURRENCY,
+        (entry) => uploadOne(entry.file, entry.folder)
       );
       const ok = results.filter((r) => r.status === "fulfilled").map((r) => r.value);
       const failed = results.length - ok.length;

package/dist/runtime/app/composables/cms-overlay.d.ts

@@ -0,0 +1,4 @@
+export declare function useCmsOverlay(close: () => void): {
+    activate: () => void;
+    deactivate: () => void;
+};

package/dist/runtime/app/composables/cms-overlay.js

@@ -0,0 +1,23 @@
+import { onBeforeUnmount } from "#imports";
+const stack = [];
+function onKeydown(event) {
+  if (event.key !== "Escape") return;
+  stack[stack.length - 1]?.close();
+}
+export function useCmsOverlay(close) {
+  const entry = { close };
+  function activate() {
+    if (import.meta.server || stack.includes(entry)) return;
+    stack.push(entry);
+    if (stack.length === 1) document.addEventListener("keydown", onKeydown);
+  }
+  function deactivate() {
+    if (import.meta.server) return;
+    const index = stack.indexOf(entry);
+    if (index === -1) return;
+    stack.splice(index, 1);
+    if (stack.length === 0) document.removeEventListener("keydown", onKeydown);
+  }
+  onBeforeUnmount(deactivate);
+  return { activate, deactivate };
+}

package/dist/runtime/app/composables/cms-settings.d.ts

@@ -0,0 +1,12 @@
+import type { CmsEntrySettings, CmsFormLayout, CmsSettingsMap } from '#nuxt-cms';
+export declare function useCmsSettingsState(): import("vue").Ref<CmsSettingsMap, CmsSettingsMap>;
+export declare function loadCmsSettings(): Promise<void>;
+export declare function useCmsSettings(): {
+    settings: import("vue").Ref<CmsSettingsMap, CmsSettingsMap>;
+    save: (name: string, value: CmsEntrySettings) => Promise<void>;
+    reset: (name: string) => Promise<void>;
+};
+export declare function entryFields(name: string): Record<string, import("#nuxt-cms").FieldConfig>;
+export declare function entryFormLayout(name: string, settings: CmsSettingsMap, fields?: Record<string, import("#nuxt-cms").FieldConfig>): CmsFormLayout;
+export declare function listExtraColumns(name: string): string[];
+export declare function entryListColumns(name: string, settings: CmsSettingsMap): string[];

package/dist/runtime/app/composables/cms-settings.js

@@ -0,0 +1,59 @@
+import { layoutFromConfig, pageAllFields, resolveFormLayout, resolveListColumns } from "#nuxt-cms";
+import { useFetch, useState } from "#imports";
+import cmsConfig from "#cms-config";
+import { cmsApi } from "../utils/api.js";
+const SETTINGS_ENDPOINT = "/api/cms/admin/settings";
+export function useCmsSettingsState() {
+  return useState("cms-settings", () => ({}));
+}
+export async function loadCmsSettings() {
+  const state = useCmsSettingsState();
+  const { data } = await useFetch(SETTINGS_ENDPOINT, { key: "cms-settings" });
+  if (data.value) state.value = data.value;
+}
+export function useCmsSettings() {
+  const settings = useCmsSettingsState();
+  async function save(name, value) {
+    const saved = await cmsApi(`${SETTINGS_ENDPOINT}/${name}`, {
+      method: "PUT",
+      body: value
+    });
+    settings.value = { ...settings.value, [name]: saved };
+  }
+  async function reset(name) {
+    await cmsApi(`${SETTINGS_ENDPOINT}/${name}`, { method: "DELETE" });
+    const next = { ...settings.value };
+    delete next[name];
+    settings.value = next;
+  }
+  return { settings, save, reset };
+}
+function entryOf(name) {
+  return cmsConfig[name];
+}
+export function entryFields(name) {
+  const entry = entryOf(name);
+  if (!entry) return {};
+  return entry.kind === "page" ? pageAllFields(entry) : entry.fields;
+}
+function defaultFormLayout(name, fields = entryFields(name)) {
+  return resolveFormLayout(fields, layoutFromConfig(entryOf(name)?.layout));
+}
+export function entryFormLayout(name, settings, fields = entryFields(name)) {
+  const saved = settings[name]?.layout;
+  return saved ? resolveFormLayout(fields, saved) : defaultFormLayout(name, fields);
+}
+export function listExtraColumns(name) {
+  const entry = entryOf(name);
+  return entry?.kind === "collection" && entry.drafts ? ["status"] : [];
+}
+export function entryListColumns(name, settings) {
+  const entry = entryOf(name);
+  if (!entry) return [];
+  return resolveListColumns(
+    entry.fields,
+    settings[name]?.columns,
+    entry.list,
+    listExtraColumns(name)
+  );
+}

package/dist/runtime/app/composables/cms-theme.d.ts

@@ -0,0 +1,9 @@
+import type { Ref } from 'vue';
+export type CmsTheme = 'light' | 'dark' | 'system';
+export declare const CMS_THEMES: {
+    value: CmsTheme;
+    label: string;
+    icon: string;
+}[];
+export declare function useCmsTheme(): import("nuxt/app").CookieRef<CmsTheme>;
+export declare function setCmsTheme(theme: Ref<CmsTheme>, value: CmsTheme): void;

package/dist/runtime/app/composables/cms-theme.js

@@ -0,0 +1,27 @@
+import { nextTick, useCookie } from "#imports";
+export const CMS_THEMES = [
+  { value: "light", label: "Light", icon: "sun" },
+  { value: "dark", label: "Dark", icon: "moon" },
+  { value: "system", label: "System", icon: "computer-desktop" }
+];
+export function useCmsTheme() {
+  return useCookie("cms-theme", {
+    default: () => "system",
+    maxAge: 60 * 60 * 24 * 365,
+    sameSite: "lax",
+    path: "/"
+  });
+}
+export function setCmsTheme(theme, value) {
+  if (value === theme.value) return;
+  const doc = document;
+  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  if (!doc.startViewTransition || reduced) {
+    theme.value = value;
+    return;
+  }
+  doc.startViewTransition(async () => {
+    theme.value = value;
+    await nextTick();
+  });
+}

package/dist/runtime/app/layouts/cms-admin.d.vue.ts

@@ -1,6 +1,6 @@
-declare var __VLS_19: {};
+declare var __VLS_34: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_34) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/layouts/cms-admin.vue

@@ -1,8 +1,14 @@
 <template>
-   <div class="cms-scope cms-canvas min-h-screen">
-      <div class="cms-shell">
+   <div class="cms-scope cms-canvas min-h-screen" :data-theme="theme">
+      <div class="cms-shell" :class="{ 'is-nav-open': navOpen }">
          <aside class="cms-sidebar">
-            <div class="cms-sidebar-brand">nuxt<span class="cms-accent">·</span>cms</div>
+            <div class="cms-sidebar-brand">
+               <CmsBrandMark />
+               <div class="cms-brand-text">
+                  <span class="cms-brand-name">nuxt-cms</span>
+                  <span class="cms-brand-meta">Content studio</span>
+               </div>
+            </div>
 
             <nav class="cms-sidebar-nav">
                <div v-for="group in groups" :key="group.title" class="cms-sidebar-group">
@@ -14,49 +20,81 @@
                      :key="link.name"
                      :to="link.to"
                      class="cms-navlink"
-                     :class="{ 'is-active': route.path === link.to }"
+                     :class="{ 'is-active': isActive(link.to) }"
                   >
-                     <CmsIcon :name="group.icon" class="cms-navlink-icon size-4 shrink-0" />
+                     <CmsIcon
+                        :name="link.icon ?? group.icon"
+                        class="cms-navlink-icon size-4 shrink-0"
+                     />
                      <span class="truncate">{{ link.label }}</span>
                   </NuxtLink>
                </div>
             </nav>
 
             <div class="cms-sidebar-footer">
-               <CmsButton
-                  label="Sign out"
-                  icon="arrow-right-on-rectangle"
-                  trailing-icon
-                  block
-                  variant="ghost"
-                  color="neutral"
-                  size="xs"
-                  @click="logout"
-               />
+               <button
+                  type="button"
+                  class="cms-account"
+                  :class="{ 'is-open': settingsOpen }"
+                  aria-label="Open settings"
+                  @click="openSettings"
+               >
+                  <span class="cms-avatar">{{ initial }}</span>
+                  <span class="cms-account-text">
+                     <span class="cms-account-name">{{ displayName }}</span>
+                     <span class="cms-account-email" :title="email">{{ email }}</span>
+                  </span>
+                  <CmsIcon name="ellipsis-horizontal" class="cms-account-more size-4" />
+               </button>
             </div>
          </aside>
 
+         <div class="cms-sidebar-scrim" @click="navOpen = false" />
+
          <main class="cms-main">
+            <header class="cms-topbar">
+               <CmsButton
+                  icon="bars-3"
+                  variant="ghost"
+                  color="neutral"
+                  size="sm"
+                  aria-label="Open navigation"
+                  @click="navOpen = true"
+               />
+               <CmsBrandMark />
+               <span class="cms-brand-name">nuxt-cms</span>
+            </header>
             <div class="cms-main-inner">
                <slot />
             </div>
          </main>
       </div>
 
+      <CmsSettingsModal v-model:open="settingsOpen" v-model:theme="theme" @logout="logout" />
+      <CmsWelcomeModal />
       <CmsToaster />
       <CmsConfirmModal />
    </div>
 </template>
 
 <script setup>
-import { computed, navigateTo, useRoute, useUserSession } from "#imports";
+import { computed, navigateTo, ref, useRoute, useUserSession, watch } from "#imports";
 import cmsConfig from "#cms-config";
+import { useCmsTheme } from "../composables/cms-theme";
+import { useCmsAccount } from "../composables/cms-account";
+import { loadCmsSettings } from "../composables/cms-settings";
 const route = useRoute();
 const { clear } = useUserSession();
+const { email, displayName, initial } = useCmsAccount();
+const theme = useCmsTheme();
+const navOpen = ref(false);
+const settingsOpen = ref(false);
+await loadCmsSettings();
 const links = Object.entries(cmsConfig).map(([name, entry]) => ({
   name,
   label: entry.label,
   kind: entry.kind,
+  icon: entry.icon,
   to: `/cms/${name}`
 }));
 const groups = computed(
@@ -79,11 +117,27 @@ const groups = computed(
     {
       title: "Library",
       icon: "photo",
-      links: [{ name: "media", label: "Media", kind: "media", to: "/cms/media" }]
+      links: [
+        { name: "media", label: "Media", kind: "media", icon: void 0, to: "/cms/media" }
+      ]
     }
   ].filter((g) => g.links.length)
 );
+function isActive(to) {
+  return route.path === to || route.path.startsWith(`${to}/`);
+}
+watch(
+  () => route.fullPath,
+  () => {
+    navOpen.value = false;
+  }
+);
+function openSettings() {
+  navOpen.value = false;
+  settingsOpen.value = true;
+}
 async function logout() {
+  settingsOpen.value = false;
   await clear();
   await navigateTo("/cms/login");
 }

package/dist/runtime/app/layouts/cms-admin.vue.d.ts

@@ -1,6 +1,6 @@
-declare var __VLS_19: {};
+declare var __VLS_34: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_34) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;