@xleddyl/nuxt-cms 0.2.0 → 0.2.2

package/dist/module.json

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

package/dist/module.mjs

@@ -380,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)) {
@@ -835,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 [
@@ -1027,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");
   }
@@ -1121,7 +1126,7 @@ function addCmsTypeTemplates(nuxt, cmsConfig) {
       ``,
       `declare const graphql: CmsGraphql`,
       ``,
-      `// @ts-ignore: gql.tada's cache overload rejects this instantiation, but the parse overload still resolves`,
+      `// @ts-ignore`,
       `export type CmsDocument<Query extends string> = ReturnType<typeof graphql<Query, []>>`,
       ``,
       `export type CmsResult<Query extends string> = string extends Query`,
@@ -1288,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")
@@ -1305,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
             )}.`
           );

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

@@ -2,12 +2,11 @@
    <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"
+            d="M4.5 5.5h7M4.5 8h7M4.5 10.5h4"
             stroke="currentColor"
-            stroke-width="2"
+            stroke-width="1.5"
             stroke-linecap="round"
          />
-         <circle cx="8" cy="12.25" r="1.25" fill="currentColor" />
       </svg>
    </span>
 </template>

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

@@ -2,12 +2,25 @@
    <CmsModal
       v-model:open="state.open"
       :title="state.title ?? 'Are you sure?'"
-      size="sm"
+      :size="state.groups?.length ? void 0 : 'sm'"
       @after:leave="finish(false)"
    >
       <template #body>
          <div class="cms-form">
             <p class="text-sm">{{ state.message }}</p>
+            <div v-if="state.groups?.length" class="cms-confirm-groups">
+               <section v-for="group in state.groups" :key="group.title" class="cms-confirm-group">
+                  <h3 class="cms-confirm-group-title" :title="group.title">{{ group.title }}</h3>
+                  <ul class="cms-media-usage-list">
+                     <li v-for="link in group.links" :key="link.to + link.meta">
+                        <NuxtLink :to="link.to" class="cms-media-usage-link" @click="finish(false)">
+                           <span class="cms-media-usage-title">{{ link.title }}</span>
+                           <span class="cms-media-usage-meta">{{ link.meta }}</span>
+                        </NuxtLink>
+                     </li>
+                  </ul>
+               </section>
+            </div>
             <div class="cms-actions is-end">
                <CmsButton label="Cancel" variant="soft" color="neutral" @click="finish(false)" />
                <CmsButton

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/EntryDrawer.vue

@@ -121,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),
@@ -138,7 +145,7 @@ async function load() {
     });
     open.value = false;
   } finally {
-    loading.value = false;
+    if (request === loadRequest) loading.value = false;
   }
 }
 watch(
@@ -165,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.vue

@@ -125,7 +125,6 @@ watch(tabList, (tabs) => {
   if (!tabs.some((tab) => tab.id === activeTab.value)) activeTab.value = tabs[0]?.id ?? "";
 });
 const settings = useCmsSettingsState();
-const fields = computed(() => props.fields);
 const layout = computed(
   () => props.entryName ? entryFormLayout(props.entryName, settings.value, props.fields) : resolveFormLayout(props.fields, void 0)
 );

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

@@ -2,7 +2,6 @@ type __VLS_Props = {
     type?: string;
     size?: 'sm' | 'md' | 'lg';
     icon?: string;
-    color?: 'error';
 };
 type __VLS_ModelProps = {
     modelValue?: string | number | null;

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

@@ -1,5 +1,9 @@
 <template>
-   <div class="cms-input-wrap" :class="[$attrs.class, { 'has-lead': icon }]">
+   <div
+      class="cms-input-wrap"
+      :class="[$attrs.class, { 'has-lead': icon }]"
+      :style="$attrs.style"
+   >
       <span v-if="icon" class="cms-input-lead">
          <CmsIcon :name="icon" class="size-4" />
       </span>
@@ -7,7 +11,7 @@
          v-bind="inputAttrs"
          :type="type ?? 'text'"
          :value="model ?? ''"
-         :class="['cms-field', `cms-field-${size ?? 'md'}`, { 'is-error': color === 'error' }]"
+         :class="['cms-field', `cms-field-${size ?? 'md'}`]"
          @input="onInput"
       />
       <span v-if="$slots.trailing" class="cms-input-trail">
@@ -22,8 +26,7 @@ defineOptions({ inheritAttrs: false });
 defineProps({
   type: { type: String, required: false },
   size: { type: String, required: false },
-  icon: { type: String, required: false },
-  color: { type: String, required: false }
+  icon: { type: String, required: false }
 });
 const [model, modifiers] = defineModel({ type: [String, Number, null] });
 const attrs = useAttrs();

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

@@ -2,7 +2,6 @@ type __VLS_Props = {
     type?: string;
     size?: 'sm' | 'md' | 'lg';
     icon?: string;
-    color?: 'error';
 };
 type __VLS_ModelProps = {
     modelValue?: string | number | null;

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

@@ -6,7 +6,7 @@
          type="button"
          role="tab"
          :aria-selected="model === locale"
-         :title="filled(locale) ? locale : `${locale} \u2014 empty`"
+         :title="filled(locale) ? locale : `${locale}: empty`"
          class="cms-locale-option"
          :class="{ 'is-active': model === locale, 'is-empty': !filled(locale) }"
          @click="model = locale"

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

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

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

@@ -50,8 +50,7 @@ import { computed, ref } from "#imports";
 import { isWithinMediaFolder, mediaFolderDepth, mediaFolderName } from "#nuxt-cms";
 const props = defineProps({
   folders: { type: Array, required: true },
-  exclude: { type: [String, null], required: false },
-  disabled: { type: Array, required: false }
+  exclude: { type: [String, null], required: false }
 });
 const model = defineModel({ type: [String, null], ...{ default: null } });
 const query = ref("");
@@ -60,7 +59,6 @@ const visible = computed(() => {
   return term ? props.folders.filter((folder) => folder.includes(term)) : props.folders;
 });
 function isDisabled(folder) {
-  if (props.disabled?.includes(folder)) return true;
   return !!props.exclude && !!folder && isWithinMediaFolder(folder, props.exclude);
 }
 </script>

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

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

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

@@ -336,6 +336,19 @@
                      <div v-if="query && item.folder" class="cms-media-folder">
                         <CmsIcon name="folder" class="size-3" />{{ item.folder }}
                      </div>
+                     <span
+                        v-if="!selectable"
+                        class="cms-media-usage-badge"
+                        :class="{ 'is-unused': usageCount(item.key) === 0 }"
+                     >
+                        <template v-if="usageCount(item.key) !== null">
+                           <CmsIcon
+                              :name="usageCount(item.key) ? 'link' : 'link-slash'"
+                              class="size-3"
+                           />{{ usageLabel(item.key) }}
+                        </template>
+                        <template v-else>&nbsp;</template>
+                     </span>
                   </div>
                </div>
             </div>
@@ -378,6 +391,18 @@
                         <CmsIcon name="folder" class="size-3" />{{ item.folder }}
                      </span>
                   </span>
+                  <span v-if="!selectable" class="cms-media-row-cell is-usage">
+                     <span
+                        v-if="usageCount(item.key) !== null"
+                        class="cms-media-usage-badge"
+                        :class="{ 'is-unused': usageCount(item.key) === 0 }"
+                     >
+                        <CmsIcon
+                           :name="usageCount(item.key) ? 'link' : 'link-slash'"
+                           class="size-3"
+                        />{{ usageLabel(item.key) }}
+                     </span>
+                  </span>
                   <span class="cms-media-row-cell is-mono">{{ extension(item.key) }}</span>
                   <span class="cms-media-row-cell">{{
                      item.size != null ? formatFileSize(item.size) : ""
@@ -556,13 +581,15 @@ import {
   mediaFolderName,
   mediaFolderParent,
   mediaIconFor,
+  groupMediaUsage,
+  mediaUsageGroups,
   mediaTypeAccept,
   mediaTypeFilter,
   rebaseMediaFolder,
   slugify
 } from "#nuxt-cms";
 import { useCmsConfirm } from "../../composables/cms-confirm";
-import { useCmsMediaLibrary, usageSummary } from "../../composables/cms-media-library";
+import { useCmsMediaLibrary, usageLink } from "../../composables/cms-media-library";
 import {
   uploadTreeFromDrop,
   uploadTreeFromFiles,
@@ -707,6 +734,35 @@ watch(visibleFiles, (list) => {
 const paged = computed(
   () => visibleFiles.value.slice((page.value - 1) * PAGE_SIZE, page.value * PAGE_SIZE)
 );
+const usageByKey = ref({});
+let usageRequest = 0;
+watch(
+  () => [props.selectable, library.loading.value, paged.value],
+  async ([selectable, loading, items]) => {
+    const request = ++usageRequest;
+    if (selectable || loading || !items.length) return;
+    const usage = await library.usage(items.map((item) => item.key));
+    if (request !== usageRequest) return;
+    usageByKey.value = usage ?? {};
+  },
+  { immediate: true }
+);
+const usageCounts = computed(
+  () => new Map(
+    Object.entries(usageByKey.value).map(([key, list]) => [key, groupMediaUsage(list).length])
+  )
+);
+function usageCount(key) {
+  return usageCounts.value.get(key) ?? null;
+}
+function entriesLabel(count) {
+  return `${count} entr${count === 1 ? "y" : "ies"}`;
+}
+function usageLabel(key) {
+  const count = usageCount(key);
+  if (count === null) return "";
+  return count ? `Used in ${entriesLabel(count)}` : "Unused";
+}
 const emptyState = computed(() => {
   if (query.value) {
     return {
@@ -890,6 +946,31 @@ async function renameFolder() {
   renameOpen.value = false;
   openFolder(to);
 }
+async function confirmDelete(keys, question, title) {
+  const usage = await library.usage(keys);
+  const groups = usage ? mediaUsageGroups(usage, keys) : [];
+  if (!groups.length) {
+    const warning = usage ? "" : " Could not check where the files are used.";
+    return confirmAction(`${question}${warning}`, { title, confirmLabel: "Delete" });
+  }
+  const single = keys.length === 1;
+  const usedIn = single ? `This file is used in ${entriesLabel(groups[0].entries.length)}.` : `${groups.length} of ${keys.length} files are used in your content.`;
+  return confirmAction(
+    `${question} ${usedIn} Deleting ${single ? "it" : "them"} leaves broken links there.`,
+    {
+      title: single ? "File in use" : "Files in use",
+      confirmLabel: "Delete anyway",
+      groups: groups.map((group) => ({
+        title: group.key,
+        links: group.entries.map((entry) => ({
+          title: entry.title ?? entry.label,
+          meta: `${entry.label} \xB7 ${entry.fields.join(", ")}`,
+          to: usageLink(entry)
+        }))
+      }))
+    }
+  );
+}
 async function removeFolder(path) {
   const files = library.itemsWithin(path);
   const subfolders = library.folders.value.filter(
@@ -898,10 +979,12 @@ async function removeFolder(path) {
   const contents = [];
   if (subfolders) contents.push(`${subfolders} subfolder${subfolders > 1 ? "s" : ""}`);
   if (files.length) contents.push(`${files.length} file${files.length > 1 ? "s" : ""}`);
-  const keys = files.map((item) => item.key);
-  const summary = usageSummary(await library.usage(keys), keys);
-  const message = contents.length ? `Delete "${mediaFolderName(path)}" with ${contents.join(" and ")}? ${summary}` : `Delete the empty folder "${mediaFolderName(path)}"?`;
-  if (!await confirmAction(message.trim(), { title: "Delete folder", confirmLabel: "Delete" }))
+  const question = contents.length ? `Delete "${mediaFolderName(path)}" with ${contents.join(" and ")}?` : `Delete the empty folder "${mediaFolderName(path)}"?`;
+  if (!await confirmDelete(
+    files.map((item) => item.key),
+    question,
+    "Delete folder"
+  ))
     return;
   const ok = await run(() => library.deleteFolder(path));
   if (ok && folder.value && isWithinMediaFolder(folder.value, path)) {
@@ -911,13 +994,8 @@ async function removeFolder(path) {
 async function removeItems(items) {
   if (!items.length) return;
   const keys = items.map((item) => item.key);
-  const summary = usageSummary(await library.usage(keys), keys);
   const question = keys.length === 1 ? `Delete "${mediaFilename(keys[0])}"?` : `Delete ${keys.length} files?`;
-  if (!await confirmAction(`${question} ${summary}`.trim(), {
-    title: "Delete",
-    confirmLabel: "Delete"
-  }))
-    return;
+  if (!await confirmDelete(keys, question, "Delete")) return;
   const ok = await run(() => library.deleteItems(keys));
   if (!ok) return;
   if (detailKey.value && keys.includes(detailKey.value)) detailKey.value = null;

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

@@ -1,7 +1,5 @@
 <template>
    <Teleport to="body">
-      <!-- Wrapped in .cms-scope so the vendored Tailwind utilities still apply
-           once teleported outside the admin layout root. -->
       <Transition name="cms-modal">
          <div v-if="open" class="cms-scope cms-overlay" @click.self="close">
             <div
@@ -27,7 +25,8 @@
 </template>
 
 <script setup>
-import { onBeforeUnmount, watch } from "#imports";
+import { watch } from "#imports";
+import { useCmsOverlay } from "../../composables/cms-overlay";
 defineProps({
   title: { type: String, required: false },
   size: { type: String, required: false }
@@ -37,19 +36,14 @@ const emit = defineEmits(["after:leave"]);
 function close() {
   open.value = false;
 }
-function onKeydown(event) {
-  if (event.key === "Escape") close();
-}
+const overlay = useCmsOverlay(close);
 watch(open, (value, previous) => {
   if (import.meta.server) return;
   if (value) {
-    document.addEventListener("keydown", onKeydown);
+    overlay.activate();
   } else {
-    document.removeEventListener("keydown", onKeydown);
+    overlay.deactivate();
     if (previous) emit("after:leave");
   }
 });
-onBeforeUnmount(() => {
-  if (import.meta.client) document.removeEventListener("keydown", onKeydown);
-});
 </script>

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

@@ -67,11 +67,15 @@ function regenerate() {
 }
 async function copyPassword() {
   if (!model.value) return;
-  await navigator.clipboard.writeText(model.value);
-  copied.value = true;
-  clearTimeout(copiedTimer);
-  copiedTimer = setTimeout(() => {
+  try {
+    await navigator.clipboard.writeText(model.value);
+    copied.value = true;
+    clearTimeout(copiedTimer);
+    copiedTimer = setTimeout(() => {
+      copied.value = false;
+    }, 1600);
+  } catch {
     copied.value = false;
-  }, 1600);
+  }
 }
 </script>

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

@@ -22,7 +22,7 @@
 
 <script setup>
 import { isTranslatableField } from "#nuxt-cms";
-import { computed, onMounted, ref, watch } from "#imports";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "#imports";
 import cmsConfig from "#cms-config";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { useCmsToast } from "../../composables/cms-toast";
@@ -40,22 +40,26 @@ const fetched = ref([]);
 const selectedRows = ref(/* @__PURE__ */ new Map());
 const loading = ref(true);
 const searchTerm = ref("");
+let fetchRequest = 0;
 async function fetchOptions() {
+  const request = ++fetchRequest;
   loading.value = true;
   try {
     const term = searchTerm.value.trim();
     const page = await $fetch(endpoint, {
       query: { light: "true", limit: 25, ...term ? { search: term } : {} }
     });
+    if (request !== fetchRequest) return;
     fetched.value = page.items;
   } catch (err) {
+    if (request !== fetchRequest) return;
     toast.add({
       title: "Loading failed",
       description: errorMessage(err),
       color: "error"
     });
   } finally {
-    loading.value = false;
+    if (request === fetchRequest) loading.value = false;
   }
 }
 let searchTimer;
@@ -63,6 +67,7 @@ watch(searchTerm, () => {
   clearTimeout(searchTimer);
   searchTimer = setTimeout(() => void fetchOptions(), 300);
 });
+onBeforeUnmount(() => clearTimeout(searchTimer));
 const selectedIds = computed(() => {
   if (props.multiple) return model.value ?? [];
   return model.value ? [model.value] : [];

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

@@ -7,7 +7,6 @@ type __VLS_Props = {
     multiple?: boolean;
     ignoreFilter?: boolean;
     loading?: boolean;
-    size?: string;
     placeholder?: string;
 };
 type __VLS_ModelProps = {

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

@@ -1,10 +1,6 @@
 <template>
    <div ref="root" class="relative w-full">
-      <div
-         class="cms-field flex flex-wrap items-center gap-1"
-         :class="`cms-field-${size ?? 'md'}`"
-         @click="focusInput"
-      >
+      <div class="cms-field cms-field-md flex flex-wrap items-center gap-1" @click="focusInput">
          <template v-if="multiple">
             <span v-for="value in modelArray" :key="value" class="cms-tag">
                {{ labelFor(value) }}
@@ -70,7 +66,6 @@ const props = defineProps({
   multiple: { type: Boolean, required: false },
   ignoreFilter: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
-  size: { type: String, required: false },
   placeholder: { type: String, required: false }
 });
 const model = defineModel({ type: [String, Array, null] });

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

@@ -7,7 +7,6 @@ type __VLS_Props = {
     multiple?: boolean;
     ignoreFilter?: boolean;
     loading?: boolean;
-    size?: string;
     placeholder?: string;
 };
 type __VLS_ModelProps = {

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

@@ -55,7 +55,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from "#imports";
+import { computed, ref } from "#imports";
 import cmsConfig from "#cms-config";
 import {
   entryFields,
@@ -89,13 +89,6 @@ const parts = computed(() => [
   { id: "layout", label: "Form layout" }
 ]);
 const activePart = ref(parts.value[0].id);
-watch(
-  () => props.name,
-  () => {
-    activePart.value = parts.value[0].id;
-    status.value = "idle";
-  }
-);
 const columns = computed(() => entryListColumns(props.name, settings.value));
 const layout = computed(() => entryFormLayout(props.name, settings.value, fields.value));
 const isCustom = computed(() => {

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

@@ -132,10 +132,11 @@
 </template>
 
 <script setup>
-import { computed, onBeforeUnmount, ref, watch } from "#imports";
+import { computed, ref, watch } from "#imports";
 import cmsConfig from "#cms-config";
 import { CMS_THEMES, setCmsTheme } from "../../composables/cms-theme";
 import { useCmsAccount } from "../../composables/cms-account";
+import { useCmsOverlay } from "../../composables/cms-overlay";
 const { isSuperAdmin } = useCmsAccount();
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const theme = defineModel("theme", { type: String, ...{ required: true } });
@@ -165,15 +166,9 @@ function previewHalves(value) {
 function close() {
   open.value = false;
 }
-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);
-  else document.removeEventListener("keydown", onKeydown);
-});
-onBeforeUnmount(() => {
-  if (import.meta.client) document.removeEventListener("keydown", onKeydown);
+  if (value) overlay.activate();
+  else overlay.deactivate();
 });
 </script>