@xleddyl/nuxt-cms 0.1.61 → 0.2.0

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

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

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

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

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

@@ -1,6 +1,13 @@
 <template>
    <div class="cms-page" :class="{ 'is-fill': config.kind === 'collection' && !error }">
-      <CmsPageHeader :title="config.label">
+      <CmsPageHeader
+         :title="config.label"
+         :icon="kindMeta.icon"
+         :description="kindMeta.description"
+      >
+         <template v-if="config.kind !== 'single' && total" #badge>
+            <span :key="total" class="cms-count">{{ total }}</span>
+         </template>
          <CmsButton
             v-if="config.kind === 'single'"
             type="submit"
@@ -25,6 +32,7 @@
             v-model="formState"
             :fields="config.fields"
             :tabs="config.tabs"
+            :entry-name="name"
             :form-id="FORM_ID"
             :loading="saving"
             @submit="saveSingle"
@@ -42,27 +50,33 @@
             />
          </div>
 
-         <div v-if="pageTree.length" class="cms-card divide-y divide-(--cms-line)">
+         <div v-if="pageTree.length" class="cms-card cms-tree">
             <NuxtLink
-               v-for="node in pageTree"
+               v-for="(node, index) in pageTree"
                :key="String(node.row.id)"
                :to="`/cms/${name}/${node.row.id}`"
                class="cms-tree-row"
-               :style="{ paddingLeft: `${1 + node.depth * 1.5}rem` }"
+               :style="{
+  paddingLeft: `${1 + node.depth * 1.5}rem`,
+  '--cms-row-delay': `${Math.min(index, 14) * 24}ms`
+}"
             >
                <CmsIcon
                   v-if="node.depth"
                   name="arrow-turn-left-up"
                   class="cms-tree-branch size-3.5"
                />
+               <span class="cms-tree-doc">
+                  <CmsIcon name="document-text" class="size-4" />
+               </span>
                <div class="min-w-0 flex-1">
-                  <div class="truncate font-medium text-(--ui-text-highlighted)">
+                  <div class="cms-tree-title">
                      {{ node.row.label }}
                   </div>
-                  <div class="cms-label truncate">{{ node.row.path }}</div>
+                  <div class="cms-tree-path">{{ node.row.path }}</div>
                </div>
-               <span class="cms-label shrink-0">{{ lastEdit(node.row.updatedAt) }}</span>
-               <CmsIcon name="chevron-right" class="size-4 shrink-0 text-(--ui-text-dimmed)" />
+               <span class="cms-tree-meta">{{ lastEdit(node.row.updatedAt) }}</span>
+               <CmsIcon name="chevron-right" class="cms-tree-chevron size-4" />
             </NuxtLink>
          </div>
 
@@ -89,22 +103,54 @@
                placeholder="Search…"
                class="flex-1"
             />
-            <div class="cms-toolbar-actions">
-               <CmsDropdownMenu v-if="rows.length" :items="columnItems" :content="{ align: 'end' }">
-                  <CmsButton label="Columns" icon="view-columns" variant="soft" />
-               </CmsDropdownMenu>
+            <div v-if="selected.length" :key="'bulk'" class="cms-toolbar-actions cms-bulk-actions">
+               <span class="cms-bulk-count">{{ selected.length }} selected</span>
+               <CmsButton
+                  icon="x-mark"
+                  variant="ghost"
+                  color="neutral"
+                  size="sm"
+                  aria-label="Clear selection"
+                  title="Clear selection"
+                  @click="selected = []"
+               />
+               <template v-if="drafts">
+                  <CmsButton
+                     label="Draft"
+                     icon="pencil-square"
+                     variant="soft"
+                     :disabled="saving"
+                     @click="bulkStatus('draft')"
+                  />
+                  <CmsButton
+                     label="Publish"
+                     icon="check-circle"
+                     variant="soft"
+                     :disabled="saving"
+                     @click="bulkStatus('published')"
+                  />
+               </template>
+               <CmsButton
+                  label="Delete"
+                  icon="trash"
+                  color="error"
+                  :loading="saving"
+                  @click="bulkDelete"
+               />
+            </div>
+            <div v-else :key="'default'" class="cms-toolbar-actions">
                <CmsButton label="New entry" icon="plus" @click="openCreate" />
             </div>
          </div>
 
          <CmsTable
             v-if="rows.length"
-            v-model:column-visibility="columnVisibility"
+            v-model:selected="selected"
+            selectable
             v-model:sort="sort"
             :data="rows"
             :columns="columns"
             @select="onSelect"
-            @reorder="reorderColumns"
          >
             <template v-for="key in mediaKeys" #[`${key}-cell`]="{ row }" :key="key">
                <CmsMediaThumb :value="mediaThumbValue(key, row.original[key])" />
@@ -112,17 +158,6 @@
             <template v-if="drafts" #status-cell="{ row }">
                <CmsStatusBadge :published="row.original.status === 'published'" />
             </template>
-            <template #actions-cell="{ row }">
-               <div class="cms-table-cell-actions">
-                  <CmsButton
-                     icon="trash"
-                     variant="ghost"
-                     color="error"
-                     size="xs"
-                     @click.stop="deleteRow(row.original)"
-                  />
-               </div>
-            </template>
          </CmsTable>
 
          <CmsSpinner v-else-if="status === 'pending'" />
@@ -178,6 +213,7 @@ import {
 import cmsConfig from "#cms-config";
 import { useCmsConfirm } from "../composables/cms-confirm";
 import { useCmsRuntime } from "../composables/cms-runtime";
+import { entryListColumns, useCmsSettingsState } from "../composables/cms-settings";
 import { useCmsToast } from "../composables/cms-toast";
 import { cmsApi } from "../utils/api";
 import { errorMessage } from "../utils/ui";
@@ -195,6 +231,12 @@ const config = cmsConfig[name];
 if (!config) {
   throw createError({ statusCode: 404, statusMessage: "Unknown collection", fatal: true });
 }
+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." }
+};
+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;
@@ -347,82 +389,20 @@ function displayValue(field, key, value) {
       return truncate(String(value));
   }
 }
-const columnOrder = ref([...fieldKeys]);
-const orderedKeys = computed(() => {
-  const known = columnOrder.value.filter((key) => fieldKeys.includes(key));
-  return [...known, ...fieldKeys.filter((key) => !known.includes(key))];
-});
 function isSortable(field) {
   if (field.type === "blocks") return false;
   return !(field.type === "relation" && field.cardinality === "many-to-many");
 }
-const columns = computed(() => [
-  ...orderedKeys.value.map((key) => ({
-    id: key,
-    accessorFn: (row) => displayValue(config.fields[key], key, row[key]),
-    header: config.fields[key].label,
-    reorderable: true,
-    sortable: isSortable(config.fields[key])
-  })),
-  ...drafts ? [{ accessorKey: "status", header: "Status", sortable: true }] : [],
-  { id: "actions", header: "" }
-]);
-function reorderColumns(from, to) {
-  const next = [...orderedKeys.value];
-  const fromIndex = next.indexOf(from);
-  const toIndex = next.indexOf(to);
-  if (fromIndex === -1 || toIndex === -1) return;
-  next.splice(toIndex, 0, ...next.splice(fromIndex, 1));
-  columnOrder.value = next;
-}
-const DEFAULT_VISIBLE_COLUMNS = 4;
-const columnStorageKey = `cms:columns:${name}`;
-const columnOrderStorageKey = `cms:column-order:${name}`;
-const columnVisibility = ref(
-  Object.fromEntries(fieldKeys.map((key, index) => [key, index < DEFAULT_VISIBLE_COLUMNS]))
-);
-function readStored(key) {
-  const stored = localStorage.getItem(key);
-  if (!stored) return void 0;
-  try {
-    return JSON.parse(stored);
-  } catch {
-    return void 0;
-  }
-}
-onMounted(() => {
-  const storedVisibility = readStored(columnStorageKey);
-  if (storedVisibility) {
-    columnVisibility.value = Object.fromEntries(
-      fieldKeys.map((key) => [
-        key,
-        storedVisibility[key] ?? columnVisibility.value[key] ?? false
-      ])
-    );
-  }
-  const storedOrder = readStored(columnOrderStorageKey);
-  if (Array.isArray(storedOrder)) {
-    columnOrder.value = storedOrder.filter((key) => typeof key === "string");
-  }
-  watch(
-    columnVisibility,
-    (value) => localStorage.setItem(columnStorageKey, JSON.stringify(value)),
-    { deep: true }
-  );
-  watch(orderedKeys, (value) => localStorage.setItem(columnOrderStorageKey, JSON.stringify(value)));
-});
-const columnItems = computed(
-  () => orderedKeys.value.map((key) => ({
-    label: config.fields[key].label,
-    type: "checkbox",
-    checked: columnVisibility.value[key],
-    onUpdateChecked(checked) {
-      columnVisibility.value = { ...columnVisibility.value, [key]: checked };
-    },
-    onSelect(event) {
-      event.preventDefault();
+const settings = useCmsSettingsState();
+const columns = computed(
+  () => entryListColumns(name, settings.value).map(
+    (key) => key === "status" && !config.fields.status ? { accessorKey: "status", header: "Status", sortable: true } : {
+      id: key,
+      accessorFn: (row) => displayValue(config.fields[key], key, row[key]),
+      header: config.fields[key].label,
+      sortable: isSortable(config.fields[key])
     }
-  }))
+  )
 );
 const drawerOpen = ref(false);
 const drawerEntryId = ref(null);
@@ -439,10 +419,56 @@ async function onDrawerDeleted() {
   else await refresh();
 }
 const confirmAction = useCmsConfirm();
-async function deleteRow(row) {
-  if (!await confirmAction("Delete this row?")) return;
-  const lastOnPage = rows.value.length === 1 && page.value > 1;
-  const ok = await submit(() => cmsApi(`${endpoint}/${row.id}`, { method: "DELETE" }));
-  if (ok && lastOnPage) page.value -= 1;
+const selected = ref([]);
+watch(rows, (current) => {
+  const ids = new Set(current.map((row) => String(row.id)));
+  selected.value = selected.value.filter((id) => ids.has(id));
+});
+function entriesLabel(count) {
+  return `${count} ${count === 1 ? "entry" : "entries"}`;
+}
+async function runBulk(ids, action) {
+  saving.value = true;
+  try {
+    const results = await Promise.allSettled(ids.map(action));
+    const failed = results.flatMap(
+      (result, index) => result.status === "rejected" ? [{ id: ids[index], reason: result.reason }] : []
+    );
+    await refresh();
+    selected.value = failed.map((f) => f.id);
+    return failed;
+  } finally {
+    saving.value = false;
+  }
+}
+function reportBulk(done, total2, failed) {
+  const succeeded = total2 - failed.length;
+  if (succeeded) toast.add({ title: `${done}: ${entriesLabel(succeeded)}`, color: "success" });
+  if (failed.length) {
+    toast.add({
+      title: `${entriesLabel(failed.length)} not changed`,
+      description: errorMessage(failed[0].reason),
+      color: "error"
+    });
+  }
+}
+async function bulkDelete() {
+  const ids = [...selected.value];
+  if (!ids.length || saving.value) return;
+  if (!await confirmAction(`Delete ${entriesLabel(ids.length)}?`)) return;
+  const emptiesPage = ids.length >= rows.value.length && page.value > 1;
+  const failed = await runBulk(ids, (id) => cmsApi(`${endpoint}/${id}`, { method: "DELETE" }));
+  reportBulk("Deleted", ids.length, failed);
+  if (!failed.length && emptiesPage) page.value -= 1;
+}
+async function bulkStatus(status2) {
+  const ids = [...selected.value];
+  if (!ids.length || saving.value) return;
+  const failed = await runBulk(ids, async (id) => {
+    const entry = await cmsApi(`${endpoint}/${id}`);
+    const body = Object.fromEntries(formKeys.map((key) => [key, entry[key] ?? null]));
+    return cmsApi(`${endpoint}/${id}`, { method: "PUT", body: { ...body, status: status2 } });
+  });
+  reportBulk(status2 === "published" ? "Published" : "Moved to draft", ids.length, failed);
 }
 </script>

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

@@ -23,6 +23,7 @@
             v-model="formState"
             :fields="fields"
             :tabs="config.tabs"
+            :entry-name="name"
             :drafts="drafts"
             :form-id="FORM_ID"
             :loading="saving"

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

@@ -1,8 +1,9 @@
 <template>
-   <div class="cms-scope cms-canvas cms-auth">
+   <div class="cms-scope cms-canvas cms-auth" :data-theme="theme">
       <div class="cms-auth-panel cms-rise">
          <header class="cms-auth-header">
-            <h1 class="cms-title cms-title-lg">Welcome back<span class="cms-accent">.</span></h1>
+            <CmsBrandMark size="lg" />
+            <h1 class="cms-title cms-title-lg">Welcome back</h1>
             <p class="cms-subtitle">Sign in to manage your content.</p>
          </header>
 
@@ -13,6 +14,7 @@
                   <CmsInput
                      v-model="state.email"
                      type="email"
+                     icon="envelope"
                      autocomplete="username"
                      placeholder="you@example.com"
                   />
@@ -21,13 +23,24 @@
                   <CmsInput
                      v-model="state.password"
                      type="password"
+                     icon="key"
                      autocomplete="current-password"
                      placeholder="••••••••"
                   />
                </CmsFormField>
-               <CmsButton type="submit" label="Sign in" block :loading="loading" />
+               <CmsButton
+                  type="submit"
+                  label="Sign in"
+                  icon="arrow-right"
+                  trailing-icon
+                  size="lg"
+                  block
+                  :loading="loading"
+               />
             </CmsForm>
          </div>
+
+         <p class="cms-auth-footer">Powered by nuxt-cms</p>
       </div>
    </div>
 </template>
@@ -35,7 +48,9 @@
 <script setup>
 import { definePageMeta, navigateTo, ref, useUserSession } from "#imports";
 import { errorMessage } from "../utils/ui";
+import { useCmsTheme } from "../composables/cms-theme";
 definePageMeta({ layout: false });
+const theme = useCmsTheme();
 const { loggedIn } = useUserSession();
 if (loggedIn.value) {
   await navigateTo("/cms", { replace: true });

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

@@ -1,6 +1,10 @@
 <template>
    <div class="cms-page">
-      <CmsPageHeader title="Media">
+      <CmsPageHeader
+         title="Media"
+         icon="photo"
+         description="Images, videos and files used across your content."
+      >
          <template #badge>
             <span class="cms-badge is-muted">{{ runtime.mediaStorage }}</span>
          </template>

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

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

package/dist/runtime/app/utils/ui.js

@@ -3,3 +3,21 @@ export function errorMessage(error) {
   const err = error;
   return err.data?.message ?? err.message;
 }
+const FIELD_ICONS = {
+  text: "bars-3-bottom-left",
+  richtext: "document-text",
+  number: "hashtag",
+  boolean: "check-circle",
+  date: "calendar",
+  email: "at-symbol",
+  slug: "link",
+  select: "chevron-up-down",
+  json: "code-bracket",
+  media: "photo",
+  relation: "arrows-right-left",
+  blocks: "squares-2x2"
+};
+export function fieldIcon(field) {
+  if (field.type === "select" && field.multiple) return "list-bullet";
+  return FIELD_ICONS[field.type];
+}