@xleddyl/nuxt-cms 0.1.61 → 0.2.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@xleddyl/nuxt-cms",
   "configKey": "cms",
-  "version": "0.1.61",
+  "version": "0.2.0",
   "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}'`;
@@ -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")}
 `;
 }
 
@@ -1302,6 +1351,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 +1432,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 +1464,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 +1584,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/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"

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;