@xleddyl/nuxt-cms 0.1.61 → 0.2.1

package/dist/module.json

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

package/dist/module.mjs

@@ -11,7 +11,7 @@ import { minifyIntrospection, outputIntrospectionFile } from 'gql.tada/internal'
 import { createJiti } from 'jiti';
 import { typeName, blockTypeName, blocksFieldTypeName, renderGraphqlSdl } from '../dist/runtime/shared/graphql-sdl.js';
 import { migrationsDirFor } from '../dist/runtime/shared/migrations-dir.js';
-import { pageColumnFields, isTranslatableField, isTranslatableMediaField, isMultiSelect, pageAllFields, PAGE_PATH_FIELD, pageRoutes, mobileMediaKey, fieldConditions, pageFieldsTableName, pageMediaTableName, isRequiredField, pageFields, isPrivateField, entryFieldsFor, mediaTypeFilter, DEFAULT_MEDIA_MAX_FILE_SIZE, expandMobileMedia } from '../dist/runtime/shared/index.js';
+import { pageColumnFields, isTranslatableField, isTranslatableMediaField, isMultiSelect, pageAllFields, PAGE_PATH_FIELD, pageRoutes, layoutErrors, listErrors, mobileMediaKey, fieldConditions, pageFieldsTableName, pageMediaTableName, isRequiredField, pageFields, isPrivateField, entryFieldsFor, mediaTypeFilter, DEFAULT_MEDIA_MAX_FILE_SIZE, expandMobileMedia } from '../dist/runtime/shared/index.js';
 import { scanMediaDirectory, readMediaFileMeta } from '../dist/runtime/server/utils/media-sync.js';
 import { createHash } from 'node:crypto';
 import { readFile } from 'node:fs/promises';
@@ -80,7 +80,17 @@ function renderMigrationsTypes(typesPath) {
 }
 
 const IDENTIFIER = /^[a-z_]\w*$/i;
-const RESERVED_ENTRY_KEYS = ["admin", "auth", "login", "media", "graphql", "cms_media"];
+const RESERVED_ENTRY_KEYS = [
+  "admin",
+  "auth",
+  "login",
+  "media",
+  "graphql",
+  "settings",
+  "cms_media",
+  "cms_settings",
+  "cms_users"
+];
 const RESERVED_COLUMNS = ["id", "status", "created_at", "updated_at"];
 const TITLE_FIELD_TYPES = ["text", "slug", "email", "number", "date", "select"];
 const TRANSLATABLE_FIELD_TYPES = ["text", "richtext", "media"];
@@ -225,6 +235,12 @@ function validateConfig(config, i18n) {
       }
     }
     const allFields = entry.kind === "page" ? pageAllFields(entry) : entry.fields ?? {};
+    errors.push(...layoutErrors(at, allFields, entry.layout));
+    errors.push(...listErrors(at, allFields, entry.list, entry.drafts ? ["status"] : []));
+    if (entry.list && entry.kind !== "collection")
+      errors.push(`${at}: list needs kind 'collection'`);
+    if (entry.icon !== void 0 && (typeof entry.icon !== "string" || !entry.icon))
+      errors.push(`${at}: icon must be a non-empty string`);
     const columnNames = /* @__PURE__ */ new Set();
     for (const [key, field] of Object.entries(allFields)) {
       const fat = `${at}, field '${key}'`;
@@ -364,7 +380,7 @@ function validateConfig(config, i18n) {
             errors.push(`${fat}: relation target '${field.to}' must be a collection`);
           if (!entry.table && target.table)
             errors.push(
-              `${fat}: relation target '${field.to}' uses a custom table \u2014 derived relations can only target derived entries`
+              `${fat}: relation target '${field.to}' uses a custom table: derived relations can only target derived entries`
             );
         }
         if (field.cardinality && !["many-to-one", "one-to-one", "many-to-many"].includes(field.cardinality)) {
@@ -383,7 +399,11 @@ function validateConfig(config, i18n) {
       }
     }
   }
-  const sqlTableNames = /* @__PURE__ */ new Map([["cms_media", "the built-in media table"]]);
+  const sqlTableNames = /* @__PURE__ */ new Map([
+    ["cms_media", "the built-in media table"],
+    ["cms_settings", "the built-in settings table"],
+    ["cms_users", "the built-in users table"]
+  ]);
   for (const [name, entry] of Object.entries(config)) {
     if (entry.table) continue;
     const registerTable = (sqlName, source) => {
@@ -535,6 +555,30 @@ function pageRowsTableExprs(name, dialect) {
     rowsTable(pageMediaTableName(name), `mediaKey: text('media_key').notNull()`)
   ];
 }
+function settingsTableExpr(dialect) {
+  const pg = dialect === "postgres";
+  const tableFn = pg ? "pgTable" : "sqliteTable";
+  return `export const cms_settings = ${tableFn}('cms_settings', {
+  key: text('key').primaryKey(),
+  value: text('value').notNull(),
+  updatedAt: ${nowExpr(pg, "updated_at")},
+})`;
+}
+function usersTableExpr(dialect) {
+  const pg = dialect === "postgres";
+  const tableFn = pg ? "pgTable" : "sqliteTable";
+  return `export const cms_users = ${tableFn}('cms_users', {
+  id: text('id').primaryKey(),
+  email: text('email').notNull().unique(),
+  name: text('name'),
+  role: text('role').notNull().default('admin'),
+  passwordHash: text('password_hash').notNull(),
+  mustChangePassword: ${pg ? `boolean('must_change_password')` : `integer('must_change_password', { mode: 'boolean' })`}.notNull().default(true),
+  lastLoginAt: text('last_login_at'),
+  createdAt: ${nowExpr(pg, "created_at")},
+  updatedAt: ${nowExpr(pg, "updated_at")},
+})`;
+}
 function mediaTableExpr(dialect) {
   const pg = dialect === "postgres";
   const tableFn = pg ? "pgTable" : "sqliteTable";
@@ -561,7 +605,7 @@ function renderSchemaFile(config, dialect, resolveImport = (s) => s) {
   if (fields.some((f) => f.type === "number" && !f.integer))
     core.add(pg ? "doublePrecision" : "real");
   if (pg && fields.some((f) => f.type === "date")) core.add("date");
-  if (pg && fields.some((f) => f.type === "boolean")) core.add("boolean");
+  if (pg) core.add("boolean");
   if (pg && fields.some(
     (f) => f.type === "json" || f.type === "blocks" || isTranslatableField(f) && !isTranslatableMediaField(f) || isMultiSelect(f)
   ))
@@ -581,9 +625,14 @@ function renderSchemaFile(config, dialect, resolveImport = (s) => s) {
   const rows = rowsEntries.flatMap(([name]) => pageRowsTableExprs(name, dialect));
   return `${imports.join("\n")}
 
-${[mediaTableExpr(dialect), ...tables, ...joins, ...rows].join(
-    "\n\n"
-  )}
+${[
+    mediaTableExpr(dialect),
+    settingsTableExpr(dialect),
+    usersTableExpr(dialect),
+    ...tables,
+    ...joins,
+    ...rows
+  ].join("\n\n")}
 `;
 }
 
@@ -786,7 +835,12 @@ ${lines.join(
 function pageTypesTs(name, entry) {
   const auto = `${typeName(name)}Auto`;
   const lines = pageRoutes(entry).map((route) => {
-    const keys = ["id", "path", "updatedAt", ...Object.keys(pageFields(entry, route.path))];
+    const keys = [
+      "id",
+      "path",
+      "updatedAt",
+      ...Object.entries(pageFields(entry, route.path)).filter(([, field]) => !isPrivateField(field)).map(([key]) => key)
+    ];
     return `  ${JSON.stringify(route.path)}: Pick<${auto}, ${quotedKeys(keys)}>`;
   });
   return [
@@ -978,7 +1032,7 @@ async function loadCmsConfig(nuxt, resolver, configPathOption, i18n, logger) {
     cmsConfig = expandMobileMedia(await jiti.import(configPath, { default: true }));
   } else {
     logger.warn(
-      `[nuxt-cms] Config file not found: ${configPath}. Using an empty registry \u2014 create a ${configPathOption}.ts with defineCmsConfig().`
+      `[nuxt-cms] Config file not found: ${configPath}. Using an empty registry. Create a ${configPathOption}.ts with defineCmsConfig().`
     );
     nuxt.options.alias["#cms-config"] = resolver.resolve("./runtime/shared/empty-config");
   }
@@ -1239,7 +1293,13 @@ const module$1 = defineNuxtModule({
         `  dialect: '${dialect}',`,
         `  schema: '${toPosix(schemaTemplate.dst)}',`,
         `  out: '${toPosix(relativeMigrationsDir)}',`,
-        driver === "postgres" ? `  dbCredentials: { url: process.env.NUXT_CMS_DATABASE_URL ?? '${databaseUrl}' },` : driver === "libsql" ? `  dbCredentials: { url: process.env.NUXT_CMS_DATABASE_URL ?? '${databaseUrl || `file:${toPosix(resolvedDbPath)}`}', authToken: (process.env.NUXT_CMS_DATABASE_AUTH_TOKEN ?? '${databaseAuthToken}') || undefined },` : driver === "d1" ? `` : `  dbCredentials: { url: '${toPosix(resolvedDbPath)}' },`,
+        driver === "postgres" ? `  dbCredentials: { url: process.env.NUXT_CMS_DATABASE_URL ?? ${JSON.stringify(
+          databaseUrl
+        )} },` : driver === "libsql" ? `  dbCredentials: { url: process.env.NUXT_CMS_DATABASE_URL ?? ${JSON.stringify(
+          databaseUrl || `file:${toPosix(resolvedDbPath)}`
+        )}, authToken: (process.env.NUXT_CMS_DATABASE_AUTH_TOKEN ?? ${JSON.stringify(
+          databaseAuthToken
+        )}) || undefined },` : driver === "d1" ? `` : `  dbCredentials: { url: ${JSON.stringify(toPosix(resolvedDbPath))} },`,
         `}`,
         ``
       ].join("\n")
@@ -1256,7 +1316,7 @@ const module$1 = defineNuxtModule({
         const migrations = await collectMigrations(migrationsDir);
         if (!migrations && !nuxt.options.dev && Object.keys(cmsConfig).length) {
           logger.warn(
-            `[nuxt-cms] No migrations found at ${migrationsDir}. The CMS tables will not be created \u2014 run the dev server once to generate them and commit ${toPosix(
+            `[nuxt-cms] No migrations found at ${migrationsDir}. The CMS tables will not be created. Run the dev server once to generate them and commit ${toPosix(
               relativeMigrationsDir
             )}.`
           );
@@ -1302,6 +1362,7 @@ const module$1 = defineNuxtModule({
         driver === "postgres" ? "./runtime/server/plugins/migrate-postgres" : driver === "libsql" ? "./runtime/server/plugins/migrate-libsql" : driver === "d1" ? "./runtime/server/plugins/d1-binding" : "./runtime/server/plugins/migrate-sqlite"
       )
     );
+    addServerPlugin(resolver.resolve("./runtime/server/plugins/session-validate"));
     if (!nuxt.options.dev) {
       addServerPlugin(resolver.resolve("./runtime/server/plugins/session-check"));
     }
@@ -1382,13 +1443,21 @@ const module$1 = defineNuxtModule({
           "",
           "declare module '#auth-utils' {",
           "  interface User {",
+          "    id?: string",
           "    email: string",
+          "    name?: string | null",
+          "    role?: 'superadmin' | 'admin'",
+          "    firstLogin?: boolean",
+          "    passwordStamp?: string",
           "  }",
           "}",
           "",
           "declare module '#imports' {",
           "  function getUserSession(event: H3Event): Promise<{ user?: import('#auth-utils').User }>",
           "  function setUserSession(event: H3Event, session: { user: import('#auth-utils').User }): Promise<unknown>",
+          "  function replaceUserSession(event: H3Event, session: { user: import('#auth-utils').User }): Promise<unknown>",
+          "  function clearUserSession(event: H3Event): Promise<boolean>",
+          "  const sessionHooks: { hook(name: 'fetch', fn: (session: { user?: import('#auth-utils').User }, event: H3Event) => void | Promise<void>): () => void }",
           "  function useStorage(base?: string): {",
           "    getItem<T>(key: string): Promise<T | null>",
           "    setItem<T>(key: string, value: T, options?: { ttl?: number }): Promise<void>",
@@ -1406,8 +1475,8 @@ const module$1 = defineNuxtModule({
     addVitePlugin(tailwindcss());
     addVitePlugin(svgLoader({ defaultImport: "url", svgoConfig: { plugins: ["prefixIds"] } }));
     nuxt.options.css.push(
-      resolveImport("@fontsource-variable/hanken-grotesk/index.css"),
-      resolveImport("@fontsource/fragment-mono/index.css"),
+      resolveImport("@fontsource-variable/geist/index.css"),
+      resolveImport("@fontsource-variable/geist-mono/index.css"),
       resolver.resolve("./runtime/assets/main.css")
     );
     nuxt.hook("app:templates", (app) => {
@@ -1526,6 +1595,56 @@ const module$1 = defineNuxtModule({
         handler: resolver.resolve("./runtime/server/routes/media-file")
       });
     }
+    addServerHandler({
+      route: "/api/cms/users",
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/users.get")
+    });
+    addServerHandler({
+      route: "/api/cms/users",
+      method: "post",
+      handler: resolver.resolve("./runtime/server/api/users.post")
+    });
+    addServerHandler({
+      route: "/api/cms/users/:id",
+      method: "put",
+      handler: resolver.resolve("./runtime/server/api/user.put")
+    });
+    addServerHandler({
+      route: "/api/cms/users/:id",
+      method: "delete",
+      handler: resolver.resolve("./runtime/server/api/user.delete")
+    });
+    addServerHandler({
+      route: "/api/cms/account",
+      method: "put",
+      handler: resolver.resolve("./runtime/server/api/account.put")
+    });
+    addServerHandler({
+      route: "/api/cms/account/password",
+      method: "put",
+      handler: resolver.resolve("./runtime/server/api/account-password.put")
+    });
+    addServerHandler({
+      route: "/api/cms/account/welcome",
+      method: "post",
+      handler: resolver.resolve("./runtime/server/api/account-welcome.post")
+    });
+    addServerHandler({
+      route: "/api/cms/admin/settings",
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/settings.get")
+    });
+    addServerHandler({
+      route: "/api/cms/admin/settings/:key",
+      method: "put",
+      handler: resolver.resolve("./runtime/server/api/settings.put")
+    });
+    addServerHandler({
+      route: "/api/cms/admin/settings/:key",
+      method: "delete",
+      handler: resolver.resolve("./runtime/server/api/settings.delete")
+    });
     const api = "/api/cms/admin/:collection";
     addServerHandler({
       route: api,

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

@@ -9,20 +9,25 @@
   'is-muted': isHidden(item),
   'is-dragging': dragIndex === index,
   'is-drop-target': dropIndex === index && dragIndex !== index,
-  'is-missing': hasMissingMedia(item)
+  'is-missing': hasMissingMedia(item),
+  'is-media-only': mediaOnly
 }"
             draggable="true"
+            :tabindex="mediaOnly ? 0 : void 0"
+            :aria-label="mediaOnly ? `${barTitle(item)}, use the arrow keys to reorder` : void 0"
             @dragstart="onDragStart(index, $event)"
             @dragover.prevent="dropIndex = index"
             @dragleave="onDragLeave(index)"
             @drop.prevent="onDrop(index)"
             @dragend="onDragEnd"
+            @keydown.self="onTileKey($event, index)"
          >
-            <button
-               type="button"
+            <component
+               :is="mediaOnly ? 'div' : 'button'"
+               :type="mediaOnly ? void 0 : 'button'"
                class="cms-block-preview"
-               :aria-label="`Edit ${labelOf(item)}`"
-               @click="openEditor(index)"
+               :aria-label="mediaOnly ? void 0 : `Edit ${labelOf(item)}`"
+               @click="onPreviewClick(index)"
             >
                <img
                   v-if="previewOf(item)?.kind === 'image'"
@@ -43,9 +48,28 @@
                <CmsIcon v-else :name="iconOf(item)" class="size-7" />
 
                <CmsIcon v-if="isHidden(item)" name="eye-slash" class="cms-block-hidden size-4" />
-            </button>
 
-            <div class="cms-block-bar">
+               <template v-if="mediaOnly">
+                  <span
+                     v-if="hasMissingMedia(item)"
+                     class="cms-block-missing"
+                     title="Not found in the media library"
+                  >
+                     <CmsIcon name="exclamation-triangle" class="size-3.5" />
+                  </span>
+                  <button
+                     type="button"
+                     class="cms-block-remove"
+                     :aria-label="`Remove ${barTitle(item)}`"
+                     title="Remove"
+                     @click.stop="remove(index)"
+                  >
+                     <CmsIcon name="x-mark" class="size-3.5" />
+                  </button>
+               </template>
+            </component>
+
+            <div v-if="!mediaOnly" class="cms-block-bar">
                <button
                   type="button"
                   class="cms-block-grip"
@@ -84,10 +108,22 @@
          </CmsDropdownMenu>
          <button v-else type="button" class="cms-block-add" @click="addFirst">
             <CmsIcon name="plus" class="size-5" />
-            <span>Add</span>
+            <span>{{ mediaOnly ? addMediaLabel : "Add" }}</span>
          </button>
       </div>
 
+      <CmsModal v-if="mediaOnly" v-model:open="pickerOpen" title="Media" size="lg">
+         <template #body>
+            <CmsMediaGallery
+               v-model:folder="pickerFolder"
+               selectable
+               :media-type="mediaOnly.field.mediaType"
+               :accept="mediaOnly.field.accept"
+               @select="addMedia"
+            />
+         </template>
+      </CmsModal>
+
       <CmsModal v-model:open="editorOpen" :title="editorTitle">
          <template #body>
             <div class="flex flex-col gap-4">
@@ -95,6 +131,7 @@
                   v-for="(blockField, blockKey) in editorFields"
                   :key="blockKey"
                   :label="blockField.label"
+                  :icon="fieldIcon(blockField)"
                   :required="blockField.required"
                >
                   <CmsFieldInput
@@ -157,9 +194,10 @@ import {
   mediaTypeForKey,
   pickTranslatedMedia
 } from "#nuxt-cms";
-import { computed, ref } from "#imports";
+import { computed, ref, useState } from "#imports";
 import { useCmsMediaKeys } from "../../composables/cms-media-keys";
 import { useCmsRuntime } from "../../composables/cms-runtime";
+import { fieldIcon } from "../../utils/ui";
 const props = defineProps({
   field: { type: Object, required: true },
   locale: { type: String, required: false }
@@ -169,6 +207,29 @@ const { mediaBaseUrl, i18n } = useCmsRuntime();
 const mediaKeys = useCmsMediaKeys();
 const blocks = computed(() => props.field.blocks ?? {});
 const items = computed(() => Array.isArray(model.value) ? model.value : []);
+const mediaOnly = computed(() => {
+  const types = Object.entries(blocks.value);
+  if (types.length !== 1) return null;
+  const [type, block] = types[0];
+  const fields = Object.entries(block.fields);
+  if (fields.length !== 1) return null;
+  const [key, field] = fields[0];
+  if (field.type !== "media" || isTranslatableMediaField(field)) return null;
+  return { type, key, field };
+});
+const addMediaLabel = computed(() => {
+  const types = [mediaOnly.value?.field.mediaType ?? []].flat();
+  return types.length === 1 && types[0] === "image" ? "Add photo" : "Add media";
+});
+const pickerOpen = ref(false);
+const pickerFolder = useState("cms-media-picker-folder", () => null);
+function addMedia(media) {
+  const target = mediaOnly.value;
+  if (!target) return;
+  mediaKeys.remember(media.key);
+  model.value = [...items.value, { type: target.type, [target.key]: media.key }];
+  pickerOpen.value = false;
+}
 let uidCounter = 0;
 const uids = /* @__PURE__ */ new WeakMap();
 function uidFor(item) {
@@ -245,10 +306,25 @@ function add(type) {
   const block = blocks.value[type];
   if (!block) return;
   const empty = Object.fromEntries(Object.keys(block.fields).map((k) => [k, null]));
+  const index = items.value.length;
   model.value = [...items.value, { type, ...empty }];
-  openEditor(items.value.length - 1);
+  openEditor(index);
+}
+function onTileKey(event, index) {
+  if (!mediaOnly.value) return;
+  const action = event.key === "ArrowLeft" ? () => move(index, -1) : event.key === "ArrowRight" ? () => move(index, 1) : event.key === "Delete" || event.key === "Backspace" ? () => remove(index) : null;
+  if (!action) return;
+  event.preventDefault();
+  action();
+}
+function onPreviewClick(index) {
+  if (!mediaOnly.value) openEditor(index);
 }
 function addFirst() {
+  if (mediaOnly.value) {
+    pickerOpen.value = true;
+    return;
+  }
   const first = Object.keys(blocks.value)[0];
   if (first) add(first);
 }

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    size?: 'md' | 'lg';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,19 @@
+<template>
+   <span class="cms-brand-mark" :class="{ 'is-lg': size === 'lg' }" aria-hidden="true">
+      <svg viewBox="0 0 16 16" fill="none">
+         <path
+            d="M4.25 12.25V7.5a3.75 3.75 0 0 1 7.5 0v4.75"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+         />
+         <circle cx="8" cy="12.25" r="1.25" fill="currentColor" />
+      </svg>
+   </span>
+</template>
+
+<script setup>
+defineProps({
+  size: { type: String, required: false }
+});
+</script>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    size?: 'md' | 'lg';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    checked?: boolean;
+    indeterminate?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,21 @@
+<template>
+   <button
+      type="button"
+      role="checkbox"
+      :aria-checked="indeterminate ? 'mixed' : checked"
+      class="cms-checkbox"
+      :class="{ 'is-on': checked || indeterminate }"
+      @click.stop="emit('toggle')"
+   >
+      <CmsIcon v-if="indeterminate" name="minus" class="size-3" />
+      <CmsIcon v-else-if="checked" name="check" class="size-3" />
+   </button>
+</template>
+
+<script setup>
+defineProps({
+  checked: { type: Boolean, required: false },
+  indeterminate: { type: Boolean, required: false }
+});
+const emit = defineEmits(["toggle"]);
+</script>

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

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    checked?: boolean;
+    indeterminate?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -35,6 +35,7 @@
 
 <script setup>
 import { onBeforeUnmount, watch } from "#imports";
+import { useCmsOverlay } from "../../composables/cms-overlay";
 defineProps({
   title: { type: String, required: false }
 });
@@ -43,23 +44,18 @@ const emit = defineEmits(["close"]);
 function close() {
   emit("close");
 }
-function onKeydown(event) {
-  if (event.key === "Escape") close();
-}
+const overlay = useCmsOverlay(close);
 watch(open, (value) => {
   if (import.meta.server) return;
   if (value) {
-    document.addEventListener("keydown", onKeydown);
+    overlay.activate();
     document.body.style.overflow = "hidden";
   } else {
-    document.removeEventListener("keydown", onKeydown);
+    overlay.deactivate();
     document.body.style.overflow = "";
   }
 });
 onBeforeUnmount(() => {
-  if (import.meta.client) {
-    document.removeEventListener("keydown", onKeydown);
-    document.body.style.overflow = "";
-  }
+  if (import.meta.client) document.body.style.overflow = "";
 });
 </script>

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

@@ -1,7 +1,9 @@
 <template>
    <div class="cms-empty" :class="{ 'is-fill': fill }">
-      <CmsIcon :name="icon" class="cms-empty-icon size-6" />
-      <p class="cms-title cms-title-sm">{{ title }}<span class="cms-accent">.</span></p>
+      <span class="cms-empty-icon">
+         <CmsIcon :name="icon" class="size-5" />
+      </span>
+      <p class="cms-title cms-title-sm">{{ title }}</p>
       <p v-if="body" class="cms-subtitle max-w-md">
          {{ body }}
       </p>

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

@@ -11,6 +11,7 @@
          v-model="formState"
          :fields="config.fields"
          :tabs="config.tabs"
+         :entry-name="collection"
          :drafts="drafts"
          :form-id="FORM_ID"
          :loading="saving"
@@ -120,16 +121,23 @@ function revertStatus() {
   if (!drafts.value) return;
   formState.value.status = JSON.parse(snapshot.value).status ?? null;
 }
+let loadRequest = 0;
 async function load() {
-  if (props.entryId === null) {
+  const request = ++loadRequest;
+  const id = props.entryId;
+  if (id === null) {
+    loading.value = false;
     setState(emptyState());
     return;
   }
+  const isStale = () => request !== loadRequest || props.entryId !== id || !open.value;
   loading.value = true;
   try {
-    const entry = await cmsApi(`${endpoint.value}/${props.entryId}`);
+    const entry = await cmsApi(`${endpoint.value}/${id}`);
+    if (isStale()) return;
     setState(pickFields(entry));
   } catch (error) {
+    if (isStale()) return;
     toast.add({
       title: "Could not load entry",
       description: errorMessage(error),
@@ -137,7 +145,7 @@ async function load() {
     });
     open.value = false;
   } finally {
-    loading.value = false;
+    if (request === loadRequest) loading.value = false;
   }
 }
 watch(
@@ -164,6 +172,7 @@ async function save() {
     emit("saved");
     open.value = false;
   } catch (error) {
+    revertStatus();
     toast.add({
       title: "Save failed",
       description: errorMessage(error),

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

@@ -2,6 +2,7 @@ import type { CmsEntry, CmsTab } from '#nuxt-cms';
 type __VLS_Props = {
     fields: CmsEntry['fields'];
     tabs?: CmsTab[];
+    entryName?: string;
     drafts?: boolean;
     loading?: boolean;
     formId?: string;