@xleddyl/nuxt-cms 0.2.0 → 0.2.2

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

@@ -224,11 +224,15 @@ async function create() {
 }
 async function copyCredentials() {
   if (!created.value) return;
-  await navigator.clipboard.writeText(
-    `Email: ${created.value.email}
+  try {
+    await navigator.clipboard.writeText(
+      `Email: ${created.value.email}
 Password: ${created.value.password}`
-  );
-  copied.value = true;
+    );
+    copied.value = true;
+  } catch {
+    copied.value = false;
+  }
 }
 const resetting = ref(null);
 const reset = ref({ password: "" });

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

@@ -4,7 +4,6 @@ interface Column {
     accessorKey?: string;
     accessorFn?: (row: Row) => unknown;
     header?: string;
-    reorderable?: boolean;
     sortable?: boolean;
 }
 interface TableSort {
@@ -15,11 +14,9 @@ type __VLS_Props = {
     data: Row[];
     columns: Column[];
     selectable?: boolean;
-    rowKey?: string;
 };
 type __VLS_ModelProps = {
     'selected'?: string[];
-    'columnVisibility'?: Record<string, boolean>;
     'sort'?: TableSort | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
@@ -35,17 +32,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     select: (event: Event, row: {
         original: Row;
     }) => any;
-    reorder: (from: string, to: string) => any;
     "update:selected": (value: string[]) => any;
-    "update:columnVisibility": (value: Record<string, boolean>) => any;
     "update:sort": (value: TableSort | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((event: Event, row: {
         original: Row;
     }) => any) | undefined;
-    onReorder?: ((from: string, to: string) => any) | undefined;
     "onUpdate:selected"?: ((value: string[]) => any) | undefined;
-    "onUpdate:columnVisibility"?: ((value: Record<string, boolean>) => any) | undefined;
     "onUpdate:sort"?: ((value: TableSort | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -13,22 +13,14 @@
                      />
                   </th>
                   <th
-                     v-for="column in visibleColumns"
+                     v-for="column in columns"
                      :key="columnId(column)"
                      :class="{
-  'is-dragging': draggingId === columnId(column),
-  'is-drop-target': dropTargetId === columnId(column),
   'is-sortable': column.sortable,
   'is-sorted': sort?.key === columnId(column)
 }"
-                     :draggable="column.reorderable || void 0"
                      :aria-sort="ariaSort(column)"
                      @click="toggleSort(column)"
-                     @dragstart="onDragStart($event, column)"
-                     @dragover="onDragOver($event, column)"
-                     @dragleave="onDragLeave(column)"
-                     @drop="onDrop($event, column)"
-                     @dragend="resetDrag"
                   >
                      <span class="cms-th-label">
                         {{ column.header }}
@@ -44,7 +36,7 @@
             <tbody>
                <tr
                   v-for="(row, index) in data"
-                  :key="index"
+                  :key="keyOf(row)"
                   class="__clickable"
                   :class="{ 'is-selected': isSelected(row) }"
                   :style="{ '--cms-row-delay': `${Math.min(index, 14) * 24}ms` }"
@@ -57,7 +49,7 @@
                         @toggle="toggleRow(row)"
                      />
                   </td>
-                  <td v-for="column in visibleColumns" :key="columnId(column)">
+                  <td v-for="column in columns" :key="columnId(column)">
                      <slot :name="`${columnId(column)}-cell`" :row="{ original: row }">
                         {{ cellValue(column, row) }}
                      </slot>
@@ -70,16 +62,15 @@
 </template>
 
 <script setup>
-import { computed, ref } from "#imports";
+import { computed } from "#imports";
 const props = defineProps({
   data: { type: Array, required: true },
   columns: { type: Array, required: true },
-  selectable: { type: Boolean, required: false },
-  rowKey: { type: String, required: false }
+  selectable: { type: Boolean, required: false }
 });
 const selected = defineModel("selected", { type: Array, ...{ default: () => [] } });
 function keyOf(row) {
-  return String(row[props.rowKey ?? "id"]);
+  return String(row.id);
 }
 function isSelected(row) {
   return selected.value.includes(keyOf(row));
@@ -95,9 +86,8 @@ const someSelected = computed(() => !allSelected.value && selected.value.length
 function toggleAll() {
   selected.value = allSelected.value ? [] : props.data.map(keyOf);
 }
-const visibility = defineModel("columnVisibility", { type: Object, ...{ default: () => ({}) } });
 const sort = defineModel("sort", { type: [Object, null], ...{ default: null } });
-const emit = defineEmits(["select", "reorder"]);
+const emit = defineEmits(["select"]);
 function columnId(column) {
   return column.id ?? column.accessorKey ?? "";
 }
@@ -117,38 +107,6 @@ function ariaSort(column) {
   if (sort.value?.key !== columnId(column)) return "none";
   return sort.value.order === "asc" ? "ascending" : "descending";
 }
-const draggingId = ref(null);
-const dropTargetId = ref(null);
-function resetDrag() {
-  draggingId.value = null;
-  dropTargetId.value = null;
-}
-function onDragStart(event, column) {
-  if (!column.reorderable) return;
-  draggingId.value = columnId(column);
-  event.dataTransfer?.setData("text/plain", columnId(column));
-  if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
-}
-function onDragOver(event, column) {
-  if (!draggingId.value || !column.reorderable) return;
-  event.preventDefault();
-  if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
-  dropTargetId.value = columnId(column);
-}
-function onDragLeave(column) {
-  if (dropTargetId.value === columnId(column)) dropTargetId.value = null;
-}
-function onDrop(event, column) {
-  if (!draggingId.value || !column.reorderable) return;
-  event.preventDefault();
-  const from = draggingId.value;
-  const to = columnId(column);
-  resetDrag();
-  if (from !== to) emit("reorder", from, to);
-}
-const visibleColumns = computed(
-  () => props.columns.filter((column) => visibility.value[columnId(column)] !== false)
-);
 function cellValue(column, row) {
   if (column.accessorFn) return column.accessorFn(row);
   if (column.accessorKey) return row[column.accessorKey];

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

@@ -4,7 +4,6 @@ interface Column {
     accessorKey?: string;
     accessorFn?: (row: Row) => unknown;
     header?: string;
-    reorderable?: boolean;
     sortable?: boolean;
 }
 interface TableSort {
@@ -15,11 +14,9 @@ type __VLS_Props = {
     data: Row[];
     columns: Column[];
     selectable?: boolean;
-    rowKey?: string;
 };
 type __VLS_ModelProps = {
     'selected'?: string[];
-    'columnVisibility'?: Record<string, boolean>;
     'sort'?: TableSort | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
@@ -35,17 +32,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     select: (event: Event, row: {
         original: Row;
     }) => any;
-    reorder: (from: string, to: string) => any;
     "update:selected": (value: string[]) => any;
-    "update:columnVisibility": (value: Record<string, boolean>) => any;
     "update:sort": (value: TableSort | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((event: Event, row: {
         original: Row;
     }) => any) | undefined;
-    onReorder?: ((from: string, to: string) => any) | undefined;
     "onUpdate:selected"?: ((value: string[]) => any) | undefined;
-    "onUpdate:columnVisibility"?: ((value: Record<string, boolean>) => any) | undefined;
     "onUpdate:sort"?: ((value: TableSort | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,6 +1,5 @@
 type __VLS_Props = {
     rows?: number;
-    size?: 'sm' | 'md' | 'lg';
     color?: 'error';
 };
 type __VLS_ModelProps = {

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

@@ -2,7 +2,7 @@
    <textarea
       :rows="rows ?? 3"
       :value="model ?? ''"
-      :class="['cms-field', `cms-field-${size ?? 'md'}`, { 'is-error': color === 'error' }]"
+      :class="['cms-field', 'cms-field-md', { 'is-error': color === 'error' }]"
       @input="model = $event.target.value"
    />
 </template>
@@ -10,7 +10,6 @@
 <script setup>
 defineProps({
   rows: { type: Number, required: false },
-  size: { type: String, required: false },
   color: { type: String, required: false }
 });
 const model = defineModel({ type: [String, null] });

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

@@ -1,6 +1,5 @@
 type __VLS_Props = {
     rows?: number;
-    size?: 'sm' | 'md' | 'lg';
     color?: 'error';
 };
 type __VLS_ModelProps = {

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

@@ -1,12 +1,21 @@
-export interface CmsConfirmState {
-    open: boolean;
-    message: string;
+export interface CmsConfirmLink {
+    title: string;
+    meta: string;
+    to: string;
+}
+export interface CmsConfirmGroup {
+    title: string;
+    links: CmsConfirmLink[];
+}
+export interface CmsConfirmOptions {
     title?: string;
     confirmLabel?: string;
+    groups?: CmsConfirmGroup[];
+}
+export interface CmsConfirmState extends CmsConfirmOptions {
+    open: boolean;
+    message: string;
     resolve?: (value: boolean) => void;
 }
 export declare function useCmsConfirmState(): import("vue").Ref<CmsConfirmState, CmsConfirmState>;
-export declare function useCmsConfirm(): (message: string, options?: {
-    title?: string;
-    confirmLabel?: string;
-}) => Promise<boolean>;
+export declare function useCmsConfirm(): (message: string, options?: CmsConfirmOptions) => Promise<boolean>;

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

@@ -10,6 +10,7 @@ export function useCmsConfirm() {
       message,
       title: options?.title,
       confirmLabel: options?.confirmLabel,
+      groups: options?.groups,
       resolve
     };
   });

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.d.ts

@@ -71,5 +71,4 @@ export declare function useCmsMediaLibrary(): {
     usage: (keys: string[]) => Promise<Record<string, MediaUsage[]> | null>;
 };
 export type CmsMediaLibrary = ReturnType<typeof useCmsMediaLibrary>;
-export declare function usageSummary(usage: Record<string, MediaUsage[]> | null, keys: string[]): string;
-export declare function usageLink(usage: MediaUsage): string;
+export declare function usageLink(usage: Pick<MediaUsage, 'collection' | 'id'>): string;

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

@@ -6,8 +6,10 @@ 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";
+const USAGE_CHUNK = 1e3;
 export function useCmsMediaLibrary() {
   const toast = useCmsToast();
   const items = ref([]);
@@ -81,6 +83,7 @@ export function useCmsMediaLibrary() {
         method: "DELETE",
         query: { name, recursive: "true" }
       });
+      invalidateCmsMediaKeys();
       await reload({ quiet: true });
     });
   }
@@ -93,6 +96,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 });
     });
   }
@@ -103,13 +107,18 @@ export function useCmsMediaLibrary() {
     });
   }
   async function usage(keys) {
-    if (!keys.length) return {};
+    const unique = [...new Set(keys)];
+    if (!unique.length) return {};
     try {
-      const result = await $fetch(`${endpoint}/usage`, {
-        method: "POST",
-        body: { keys }
-      });
-      return result.usage;
+      const merged = {};
+      for (let index = 0; index < unique.length; index += USAGE_CHUNK) {
+        const result = await $fetch(
+          `${endpoint}/usage`,
+          { method: "POST", body: { keys: unique.slice(index, index + USAGE_CHUNK) } }
+        );
+        Object.assign(merged, result.usage);
+      }
+      return merged;
     } catch {
       return null;
     }
@@ -133,19 +142,6 @@ export function useCmsMediaLibrary() {
     usage
   };
 }
-export function usageSummary(usage, keys) {
-  if (!usage) return "";
-  const entries = /* @__PURE__ */ new Set();
-  let used = 0;
-  for (const key of keys) {
-    const list = usage[key] ?? [];
-    if (list.length) used++;
-    for (const item of list) entries.add(`${item.collection}:${item.id ?? ""}`);
-  }
-  if (!used) return "";
-  const files = keys.length === 1 ? "It is" : `${used} of them are`;
-  return `${files} used in ${entries.size} entr${entries.size === 1 ? "y" : "ies"}, which will keep a broken link.`;
-}
 export function usageLink(usage) {
   return usage.id === null ? `/cms/${usage.collection}` : `/cms/${usage.collection}/${usage.id}`;
 }

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

@@ -1,5 +1,4 @@
 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;

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

@@ -39,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();

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

@@ -7,7 +7,6 @@ export declare function useCmsSettings(): {
     reset: (name: string) => Promise<void>;
 };
 export declare function entryFields(name: string): Record<string, import("#nuxt-cms").FieldConfig>;
-export declare function defaultFormLayout(name: string, fields?: Record<string, import("#nuxt-cms").FieldConfig>): CmsFormLayout;
 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

@@ -36,7 +36,7 @@ export function entryFields(name) {
   if (!entry) return {};
   return entry.kind === "page" ? pageAllFields(entry) : entry.fields;
 }
-export function defaultFormLayout(name, fields = entryFields(name)) {
+function defaultFormLayout(name, fields = entryFields(name)) {
   return resolveFormLayout(fields, layoutFromConfig(entryOf(name)?.layout));
 }
 export function entryFormLayout(name, settings, fields = entryFields(name)) {

package/dist/runtime/app/pages/admin-entry.vue

@@ -154,6 +154,7 @@ async function save() {
     toast.add({ title: "Saved", color: "success" });
     goBack();
   } catch (error) {
+    revertStatus();
     toast.add({
       title: "Save failed",
       description: errorMessage(error),

package/dist/runtime/app/utils/ui.d.ts

@@ -1,7 +1,5 @@
 import type { InjectionKey, Reactive } from 'vue';
 import type { FieldConfig } from '#nuxt-cms';
-/** Shared reactive map of field-name -> error message, provided by CmsForm and
- *  read by CmsFormField to render inline validation errors. */
 export declare const CMS_FORM_ERRORS: InjectionKey<Reactive<Record<string, string>>>;
 export declare function errorMessage(error: unknown): string | undefined;
 export declare function fieldIcon(field: FieldConfig): string;