@xleddyl/nuxt-cms 0.2.1 → 0.2.3

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

@@ -1,4 +1,10 @@
-import { cmsCollectionQueries, cmsPageQueries, cmsSingleQueries } from "#cms-queries";
+import {
+  cmsCollectionQueries,
+  cmsContentItemQueries,
+  cmsContentQueries,
+  cmsPageQueries,
+  cmsSingleQueries
+} from "#cms-queries";
 import { useAsyncData } from "#imports";
 import { $cmsQuery } from "./cms-query.js";
 function unknownEntry(name) {
@@ -48,6 +54,50 @@ export function useCmsCollection(name, options = {}) {
     }
   );
 }
+export function useCmsContents(name, options = {}) {
+  const {
+    locale,
+    filters,
+    sort,
+    limit,
+    offset,
+    key,
+    default: fallback,
+    ...asyncDataOptions
+  } = options;
+  const entryName = String(name);
+  const query = cmsContentQueries[entryName];
+  const variables = { locale, filters, sort, limit, offset };
+  return useAsyncData(
+    key ?? `cms-contents:${entryName}:${JSON.stringify(variables)}`,
+    async () => {
+      if (!query) unknownEntry(entryName);
+      const result = await $cmsQuery(query, variables);
+      return result?.[entryName] ?? [];
+    },
+    {
+      default: fallback ?? (() => []),
+      ...asyncDataOptions
+    }
+  );
+}
+export function useCmsContent(name, slug, options = {}) {
+  const { locale, key, default: fallback, ...asyncDataOptions } = options;
+  const entryName = String(name);
+  const query = cmsContentItemQueries[entryName];
+  return useAsyncData(
+    key ?? `cms-content:${entryName}:${slug}:${locale ?? ""}`,
+    async () => {
+      if (!query) unknownEntry(entryName);
+      const result = await $cmsQuery(query, { slug, locale });
+      return result?.item ?? null;
+    },
+    {
+      default: fallback ?? (() => null),
+      ...asyncDataOptions
+    }
+  );
+}
 export function useCmsPage(path, options = {}) {
   const { locale, key, default: fallback, ...asyncDataOptions } = options;
   const pagePath = String(path);

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

@@ -9,6 +9,7 @@ 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([]);
@@ -106,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;
     }
@@ -136,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-runtime.d.ts

@@ -4,4 +4,5 @@ export declare function useCmsRuntime(): {
     mediaStorage: MediaStorageMode;
     mediaMaxFileSize: number;
     i18n: CmsI18n;
+    previewPath?: string;
 };

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

@@ -1,4 +1,10 @@
-import { layoutFromConfig, pageAllFields, resolveFormLayout, resolveListColumns } from "#nuxt-cms";
+import {
+  isCollectionKind,
+  layoutFromConfig,
+  pageAllFields,
+  resolveFormLayout,
+  resolveListColumns
+} from "#nuxt-cms";
 import { useFetch, useState } from "#imports";
 import cmsConfig from "#cms-config";
 import { cmsApi } from "../utils/api.js";
@@ -45,7 +51,7 @@ export function entryFormLayout(name, settings, fields = entryFields(name)) {
 }
 export function listExtraColumns(name) {
   const entry = entryOf(name);
-  return entry?.kind === "collection" && entry.drafts ? ["status"] : [];
+  return entry && isCollectionKind(entry) && entry.drafts ? ["status"] : [];
 }
 export function entryListColumns(name, settings) {
   const entry = entryOf(name);

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

@@ -109,6 +109,11 @@ const groups = computed(
       icon: "document-text",
       links: links.filter((l) => l.kind === "single")
     },
+    {
+      title: "Content",
+      icon: "newspaper",
+      links: links.filter((l) => l.kind === "content")
+    },
     {
       title: "Pages",
       icon: "window",

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

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,14 @@
+<template>
+   <div class="cms-scope cms-canvas" :data-theme="theme">
+      <slot />
+      <CmsToaster />
+      <CmsConfirmModal />
+   </div>
+</template>
+
+<script setup>
+import { useCmsTheme } from "../composables/cms-theme";
+import { loadCmsSettings } from "../composables/cms-settings";
+const theme = useCmsTheme();
+await loadCmsSettings();
+</script>

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

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,5 +1,5 @@
 <template>
-   <div class="cms-page" :class="{ 'is-fill': config.kind === 'collection' && !error }">
+   <div class="cms-page" :class="{ 'is-fill': isCollectionKind(config) && !error }">
       <CmsPageHeader
          :title="config.label"
          :icon="kindMeta.icon"
@@ -156,7 +156,11 @@
                <CmsMediaThumb :value="mediaThumbValue(key, row.original[key])" />
             </template>
             <template v-if="drafts" #status-cell="{ row }">
-               <CmsStatusBadge :published="row.original.status === 'published'" />
+               <CmsStatusBadge
+                  :published="row.original.status === 'published'"
+                  :scheduled="mounted && isContent && isScheduledContent(row.original)"
+                  :at="formatDateTime(row.original.publishedAt)"
+               />
             </template>
          </CmsTable>
 
@@ -182,6 +186,7 @@
          <CmsPagination v-model:page="page" :total="total" :items-per-page="PAGE_SIZE" />
 
          <CmsEntryDrawer
+            v-if="!isContent"
             v-model:open="drawerOpen"
             :collection="name"
             :config="config"
@@ -195,6 +200,8 @@
 
 <script setup>
 import {
+  isCollectionKind,
+  isScheduledContent,
   isTranslatableField,
   isTranslatableMediaField,
   pageParentPath,
@@ -204,6 +211,7 @@ import {
   computed,
   createError,
   definePageMeta,
+  navigateTo,
   onMounted,
   ref,
   useFetch,
@@ -234,12 +242,14 @@ if (!config) {
 const KIND_META = {
   collection: { icon: "square-3-stack-3d", description: "Collection of entries." },
   single: { icon: "document-text", description: "Single entry, edited in place." },
-  page: { icon: "window", description: "Content for the routes of your app." }
+  page: { icon: "window", description: "Content for the routes of your app." },
+  content: { icon: "newspaper", description: "Items built from blocks, with scheduling." }
 };
 const kindMeta = { ...KIND_META[config.kind], icon: config.icon ?? KIND_META[config.kind].icon };
 const fieldKeys = Object.keys(config.fields);
 const mediaKeys = fieldKeys.filter((key) => config.fields[key].type === "media");
-const drafts = config.kind === "collection" && !!config.drafts;
+const isContent = config.kind === "content";
+const drafts = isCollectionKind(config) && !!config.drafts;
 const formKeys = drafts ? [...fieldKeys, "status"] : fieldKeys;
 const endpoint = `/api/cms/admin/${name}`;
 const PAGE_SIZE = 25;
@@ -357,6 +367,15 @@ function mediaThumbValue(key, value) {
   const locale = contentI18n.defaultLocale;
   return pickTranslatedMedia(value, locale, locale);
 }
+function formatDateTime(value) {
+  if (typeof value !== "string" || !value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime()) || !mounted.value) return value.slice(0, 16).replace("T", " ");
+  return `${date.toLocaleDateString()} ${date.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit"
+  })}`;
+}
 function relationLabel(field, key, id) {
   const title = relations.value[key]?.[String(id)];
   if (title == null || title === "") return `#${id}`;
@@ -378,6 +397,8 @@ function displayValue(field, key, value) {
       return truncate(stripHtml(String(value)));
     case "json":
       return truncate(JSON.stringify(value));
+    case "datetime":
+      return formatDateTime(value);
     case "blocks":
       return `${value.length} \u25A4`;
     case "relation": {
@@ -407,10 +428,18 @@ const columns = computed(
 const drawerOpen = ref(false);
 const drawerEntryId = ref(null);
 function onSelect(_event, row) {
+  if (isContent) {
+    void navigateTo(`/cms/${name}/${row.original.id}`);
+    return;
+  }
   drawerEntryId.value = String(row.original.id);
   drawerOpen.value = true;
 }
 function openCreate() {
+  if (isContent) {
+    void navigateTo(`/cms/${name}/new`);
+    return;
+  }
   drawerEntryId.value = null;
   drawerOpen.value = true;
 }

package/dist/runtime/app/pages/admin-content.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,284 @@
+<template>
+   <CmsVisualEditor
+      ref="editor"
+      v-model:state="formState"
+      :entry-name="name"
+      :field-key="CONTENT_BODY_FIELD"
+      :fields="config.fields"
+      :title="headerTitle"
+      content
+   >
+      <template #start>
+         <CmsButton
+            icon="arrow-left"
+            size="sm"
+            variant="ghost"
+            color="neutral"
+            :aria-label="`Back to ${config.label}`"
+            :title="`Back to ${config.label}`"
+            @click="goBack"
+         />
+      </template>
+
+      <template #status>
+         <CmsStatusBadge :published="published" :scheduled="scheduled" :at="scheduledAt" />
+         <span v-if="dirty" class="cms-editor-dirty">Unsaved changes</span>
+      </template>
+
+      <template #actions>
+         <CmsPopover v-model:open="scheduleOpen" class="cms-editor-schedule">
+            <CmsButton
+               icon="clock"
+               size="sm"
+               variant="ghost"
+               color="neutral"
+               :label="scheduled ? 'Reschedule' : 'Schedule'"
+               :disabled="saving"
+               aria-haspopup="dialog"
+               :aria-expanded="scheduleOpen"
+            />
+            <template #content>
+               <div class="cms-editor-schedule-panel" role="dialog" aria-label="Schedule">
+                  <CmsFormField
+                     label="Publish at"
+                     description="The item stays hidden from the site until this moment."
+                  >
+                     <CmsFieldInput v-model="scheduleDraft" :field="publishedAtField" />
+                  </CmsFormField>
+                  <div class="cms-actions is-end">
+                     <CmsButton
+                        label="Cancel"
+                        size="sm"
+                        variant="ghost"
+                        color="neutral"
+                        @click="scheduleOpen = false"
+                     />
+                     <CmsButton
+                        label="Schedule"
+                        size="sm"
+                        :disabled="!scheduleDraft"
+                        :loading="saving"
+                        @click="schedule"
+                     />
+                  </div>
+               </div>
+            </template>
+         </CmsPopover>
+         <CmsButton
+            label="Save"
+            size="sm"
+            variant="soft"
+            color="neutral"
+            :loading="saving"
+            @click="save()"
+         />
+         <CmsButton
+            :label="published ? 'Unpublish' : 'Publish'"
+            size="sm"
+            :variant="published ? 'soft' : 'solid'"
+            :color="published ? 'neutral' : 'primary'"
+            :loading="saving"
+            @click="save(published ? 'draft' : 'published')"
+         />
+         <CmsDropdownMenu
+            v-if="!isNew"
+            :items="[{ label: 'Delete', onSelect: remove }]"
+            :content="{ align: 'end' }"
+         >
+            <CmsButton
+               icon="ellipsis-horizontal"
+               size="sm"
+               variant="ghost"
+               color="neutral"
+               aria-label="More actions"
+               title="More actions"
+            />
+         </CmsDropdownMenu>
+      </template>
+   </CmsVisualEditor>
+</template>
+
+<script setup>
+import {
+  CONTENT_BODY_FIELD,
+  CONTENT_PUBLISHED_AT_FIELD,
+  CONTENT_TITLE_FIELD,
+  isScheduledContent
+} from "#nuxt-cms";
+import {
+  computed,
+  createError,
+  definePageMeta,
+  navigateTo,
+  onBeforeRouteLeave,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useFetch,
+  useHead,
+  useRoute,
+  watch
+} from "#imports";
+import cmsConfig from "#cms-config";
+import { useCmsConfirm } from "../composables/cms-confirm";
+import { useCmsRuntime } from "../composables/cms-runtime";
+import { useCmsToast } from "../composables/cms-toast";
+import { cmsApi } from "../utils/api";
+import { errorMessage } from "../utils/ui";
+definePageMeta({
+  layout: "cms-editor",
+  middleware: "cms-auth",
+  key: (route2) => route2.fullPath
+});
+const route = useRoute();
+const toast = useCmsToast();
+const confirmAction = useCmsConfirm();
+const { i18n } = useCmsRuntime();
+const name = String(route.meta.cmsEntry ?? route.path.split("/")[2] ?? "");
+const config = cmsConfig[name];
+if (!config || config.kind !== "content") {
+  throw createError({ statusCode: 404, statusMessage: "Unknown content entry", fatal: true });
+}
+const id = route.params.id;
+const isNew = id === void 0;
+const endpoint = `/api/cms/admin/${name}`;
+const formKeys = [...Object.keys(config.fields), "status"];
+const editor = ref(null);
+function pickFields(row) {
+  return Object.fromEntries(formKeys.map((key) => [key, row[key] ?? null]));
+}
+const formState = ref(
+  Object.fromEntries(formKeys.map((key) => [key, key === "status" ? "draft" : null]))
+);
+if (!isNew) {
+  const { data, error } = await useFetch(`${endpoint}/${id}`);
+  if (error.value || !data.value) {
+    const statusCode = error.value?.statusCode ?? 404;
+    throw createError({
+      statusCode,
+      statusMessage: statusCode === 404 ? "Entry not found" : "Failed to load entry",
+      fatal: true
+    });
+  }
+  formState.value = pickFields(data.value);
+}
+const snapshot = ref(JSON.stringify(formState.value));
+const dirty = computed(() => JSON.stringify(formState.value) !== snapshot.value);
+const titleText = computed(() => {
+  const value = formState.value[CONTENT_TITLE_FIELD];
+  if (typeof value === "string") return value;
+  if (value && typeof value === "object") {
+    const values = value;
+    return values[i18n.defaultLocale] || Object.values(values).find(Boolean) || "";
+  }
+  return "";
+});
+const headerTitle = computed(() => titleText.value || (isNew ? "New item" : "Untitled"));
+useHead({ title: computed(() => `${headerTitle.value} \xB7 ${config.label}`) });
+const published = computed(() => formState.value.status === "published");
+const mounted = ref(false);
+const scheduled = computed(() => mounted.value && isScheduledContent(formState.value));
+const scheduledAt = computed(() => {
+  const value = formState.value[CONTENT_PUBLISHED_AT_FIELD];
+  if (!mounted.value || typeof value !== "string" || !value) return "";
+  return new Date(value).toLocaleString();
+});
+const publishedAtField = computed(() => ({
+  ...config.fields[CONTENT_PUBLISHED_AT_FIELD],
+  required: true
+}));
+const saving = ref(false);
+const scheduleOpen = ref(false);
+const scheduleDraft = ref(null);
+watch(scheduleOpen, (open) => {
+  if (!open) return;
+  const current = formState.value[CONTENT_PUBLISHED_AT_FIELD];
+  const future = typeof current === "string" && new Date(current).getTime() > Date.now();
+  scheduleDraft.value = future ? current : new Date(Math.ceil(Date.now() / 36e5) * 36e5 + 36e5).toISOString();
+});
+function onBeforeUnload(event) {
+  event.preventDefault();
+}
+watch(dirty, (value) => {
+  if (value) window.addEventListener("beforeunload", onBeforeUnload);
+  else window.removeEventListener("beforeunload", onBeforeUnload);
+});
+onMounted(() => {
+  mounted.value = true;
+});
+onBeforeUnmount(() => window.removeEventListener("beforeunload", onBeforeUnload));
+onBeforeRouteLeave(async () => {
+  if (dirty.value && !await confirmAction("You have unsaved changes. Leave anyway?"))
+    return false;
+});
+function goBack() {
+  navigateTo(`/cms/${name}`);
+}
+const SUCCESS = {
+  save: "Saved",
+  published: "Published",
+  draft: "Moved to drafts",
+  scheduled: "Scheduled"
+};
+async function save(status, changes = {}, notice) {
+  const before = formState.value;
+  formState.value = { ...before, ...changes, ...status ? { status } : {} };
+  if (!editor.value?.validate()) {
+    formState.value = {
+      ...formState.value,
+      status: before.status,
+      ...pickRevert(before, changes)
+    };
+    toast.add({ title: "Check the highlighted fields", color: "error" });
+    return false;
+  }
+  saving.value = true;
+  try {
+    const row = await (isNew ? cmsApi(endpoint, { method: "POST", body: formState.value }) : cmsApi(`${endpoint}/${id}`, {
+      method: "PUT",
+      body: formState.value
+    }));
+    formState.value = pickFields(row);
+    snapshot.value = JSON.stringify(formState.value);
+    toast.add({ title: SUCCESS[notice ?? status ?? "save"] ?? "Saved", color: "success" });
+    if (isNew && row.id) await navigateTo(`/cms/${name}/${row.id}`, { replace: true });
+    return true;
+  } catch (error) {
+    formState.value = {
+      ...formState.value,
+      status: before.status,
+      ...pickRevert(before, changes)
+    };
+    toast.add({ title: "Save failed", description: errorMessage(error), color: "error" });
+    return false;
+  } finally {
+    saving.value = false;
+  }
+}
+function pickRevert(before, changes) {
+  return Object.fromEntries(Object.keys(changes).map((key) => [key, before[key] ?? null]));
+}
+async function schedule() {
+  if (!scheduleDraft.value) return;
+  const saved = await save(
+    "published",
+    { [CONTENT_PUBLISHED_AT_FIELD]: scheduleDraft.value },
+    new Date(scheduleDraft.value).getTime() > Date.now() ? "scheduled" : "published"
+  );
+  if (saved) scheduleOpen.value = false;
+}
+async function remove() {
+  if (!await confirmAction("Delete this item?")) return;
+  saving.value = true;
+  try {
+    await cmsApi(`${endpoint}/${id}`, { method: "DELETE" });
+    snapshot.value = JSON.stringify(formState.value);
+    toast.add({ title: "Deleted", color: "success" });
+    goBack();
+  } catch (error) {
+    toast.add({ title: "Delete failed", description: errorMessage(error), color: "error" });
+  } finally {
+    saving.value = false;
+  }
+}
+</script>

package/dist/runtime/app/pages/admin-content.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/admin-preview.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;