@xleddyl/nuxt-cms 0.1.28 → 0.1.29

package/README.md

@@ -20,10 +20,6 @@ Register the module and configure it under the `cms` key in `nuxt.config.ts`:
 export default defineNuxtConfig({
    modules: ['@xleddyl/nuxt-cms'],
    cms: {
-      database: {
-         driver: 'sqlite', // 'sqlite' | 'postgres' (with `url`) | 'libsql' (Turso/remote, with `url` + `authToken`)
-         path: 'data/cms.db',
-      },
       i18n: {
          locales: ['en', 'it'],
          defaultLocale: 'en',
@@ -32,6 +28,11 @@ export default defineNuxtConfig({
 })
 ```
 
+`database` defaults to SQLite (`{ driver: 'sqlite', path: 'data/cms.db' }`) and can be omitted
+entirely. Switch it to `{ driver: 'postgres', url: '...' }` or
+`{ driver: 'libsql', url: '...', authToken: '...' }` (Turso/remote); see
+[Configuration](docs/configuration.md) for every option.
+
 Then declare your content types in a `cms.config.ts` at the project root with `defineCmsConfig()`.
 
 ### Disabling the CMS

package/dist/module.d.mts

@@ -1,41 +1,48 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { MediaStorageMode } from '../dist/runtime/shared/index.js';
-
-type Dialect = 'sqlite' | 'postgres';
-type Driver = Dialect | 'libsql';
 
+type ModuleOptionsDatabase = {
+    driver?: 'sqlite';
+    path?: string;
+} | {
+    driver: 'postgres';
+    url?: string;
+} | {
+    driver: 'libsql';
+    url?: string;
+    authToken?: string;
+};
+type ModuleOptionsMedia = {
+    storage?: 's3';
+    endpoint?: string;
+    region?: string;
+    bucket?: string;
+    accessKeyId?: string;
+    secretAccessKey?: string;
+    publicBaseUrl?: string;
+    presignExpiry?: number;
+    maxFileSize?: number;
+} | {
+    storage: 'local';
+    publicBaseUrl: string;
+};
 interface ModuleOptions {
     enabled?: boolean;
-    configPath: string;
-    admin: {
-        email: string;
-        password: string;
-    };
-    database: {
-        driver?: Driver;
-        path?: string;
-        url?: string;
-        authToken?: string;
-    };
-    media: {
-        storage: MediaStorageMode;
-        endpoint: string;
-        region: string;
-        bucket: string;
-        publicBaseUrl: string;
-        presignExpiry: number;
-        accessKeyId: string;
-        secretAccessKey: string;
+    configPath?: string;
+    admin?: {
+        email?: string;
+        password?: string;
     };
-    i18n: {
-        locales: string[];
-        defaultLocale: string;
+    database?: ModuleOptionsDatabase;
+    media?: ModuleOptionsMedia;
+    i18n?: {
+        locales?: string[];
+        defaultLocale?: string;
     };
-    graphql: {
-        maxDepth: number;
+    graphql?: {
+        maxDepth?: number;
     };
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { _default as default };
-export type { ModuleOptions };
+export type { ModuleOptions, ModuleOptionsDatabase, ModuleOptionsMedia };

package/dist/module.json

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

package/dist/module.mjs

@@ -10,7 +10,7 @@ import { introspectionFromSchema, buildSchema } from 'graphql';
 import { minifyIntrospection, outputIntrospectionFile } from 'gql.tada/internal';
 import { createJiti } from 'jiti';
 import { typeName, blockTypeName, blockUnionName, renderGraphqlSdl } from '../dist/runtime/shared/graphql-sdl.js';
-import { isMultiSelect, isTranslatableField } from '../dist/runtime/shared/index.js';
+import { isMultiSelect, isTranslatableField, isTranslatableMediaField, DEFAULT_MEDIA_MAX_FILE_SIZE } from '../dist/runtime/shared/index.js';
 
 const IDENTIFIER = /^[a-z_]\w*$/i;
 const RESERVED_ENTRY_KEYS = ["admin", "auth", "login", "media", "graphql", "cms_media"];
@@ -96,8 +96,10 @@ function validateConfig(config, i18n) {
         columnNames.add(column);
       }
       if (field.translatable) {
-        if (field.type !== "text" && field.type !== "richtext")
-          errors.push(`${fat}: translatable is only supported on text and richtext fields`);
+        if (field.type !== "text" && field.type !== "richtext" && field.type !== "media")
+          errors.push(
+            `${fat}: translatable is only supported on text, richtext and media fields`
+          );
         if (!locales.length)
           errors.push(`${fat}: translatable requires cms.i18n.locales in nuxt.config`);
       }
@@ -207,7 +209,7 @@ function columnExpr(key, field, dialect) {
   const col = snakeCase(key);
   let expr;
   if (isTranslatableField(field)) {
-    expr = jsonExpr(col, dialect);
+    expr = isTranslatableMediaField(field) ? `text('${col}')` : jsonExpr(col, dialect);
     if (field.required) expr += ".notNull()";
     return `  ${key}: ${expr},`;
   }
@@ -304,7 +306,7 @@ function renderSchemaFile(config, dialect, resolveImport = (s) => s) {
   if (pg && fields.some((f) => f.type === "date")) core.add("date");
   if (pg && fields.some((f) => f.type === "boolean")) core.add("boolean");
   if (pg && fields.some(
-    (f) => f.type === "json" || f.type === "blocks" || isTranslatableField(f) || isMultiSelect(f)
+    (f) => f.type === "json" || f.type === "blocks" || isTranslatableField(f) && !isTranslatableMediaField(f) || isMultiSelect(f)
   ))
     core.add("jsonb");
   if (pg) core.add("timestamp");
@@ -428,6 +430,64 @@ function resolveCmsEnabled(explicit, envValue) {
   return true;
 }
 
+function resolveDatabaseOptions(database) {
+  if (database?.driver === "postgres") {
+    return { driver: "postgres", path: "data/cms.db", url: database.url ?? "", authToken: "" };
+  }
+  if (database?.driver === "libsql") {
+    return {
+      driver: "libsql",
+      path: "data/cms.db",
+      url: database.url ?? "",
+      authToken: database.authToken ?? ""
+    };
+  }
+  return { driver: "sqlite", path: database?.path ?? "data/cms.db", url: "", authToken: "" };
+}
+function resolveMediaOptions(media) {
+  if (media?.storage === "local") {
+    return {
+      storage: "local",
+      endpoint: "",
+      region: "auto",
+      bucket: "",
+      accessKeyId: "",
+      secretAccessKey: "",
+      presignExpiry: 600,
+      maxFileSize: DEFAULT_MEDIA_MAX_FILE_SIZE,
+      publicBaseUrl: media.publicBaseUrl
+    };
+  }
+  return {
+    storage: "s3",
+    endpoint: media?.endpoint ?? "",
+    region: media?.region ?? "auto",
+    bucket: media?.bucket ?? "",
+    accessKeyId: media?.accessKeyId ?? "",
+    secretAccessKey: media?.secretAccessKey ?? "",
+    presignExpiry: media?.presignExpiry ?? 600,
+    maxFileSize: media?.maxFileSize ?? DEFAULT_MEDIA_MAX_FILE_SIZE,
+    publicBaseUrl: media?.publicBaseUrl ?? ""
+  };
+}
+function resolveModuleOptions(options) {
+  return {
+    configPath: options.configPath ?? "cms.config",
+    admin: {
+      email: options.admin?.email ?? "",
+      password: options.admin?.password ?? ""
+    },
+    database: resolveDatabaseOptions(options.database),
+    media: resolveMediaOptions(options.media),
+    i18n: {
+      locales: options.i18n?.locales ?? [],
+      defaultLocale: options.i18n?.defaultLocale ?? "en"
+    },
+    graphql: {
+      maxDepth: options.graphql?.maxDepth ?? 8
+    }
+  };
+}
 const module$1 = defineNuxtModule({
   meta: {
     name: "@xleddyl/nuxt-cms",
@@ -445,9 +505,7 @@ const module$1 = defineNuxtModule({
     },
     database: {
       driver: "sqlite",
-      path: "data/cms.db",
-      url: "",
-      authToken: ""
+      path: "data/cms.db"
     },
     media: {
       storage: "s3",
@@ -456,6 +514,7 @@ const module$1 = defineNuxtModule({
       bucket: "",
       publicBaseUrl: "",
       presignExpiry: 600,
+      maxFileSize: DEFAULT_MEDIA_MAX_FILE_SIZE,
       accessKeyId: "",
       secretAccessKey: ""
     },
@@ -470,6 +529,7 @@ const module$1 = defineNuxtModule({
   async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
     const logger = useLogger("nuxt-cms");
+    const resolved = resolveModuleOptions(options);
     if (!resolveCmsEnabled(options.enabled, process.env[CMS_ENABLED_ENV])) {
       const stub = resolver.resolve("./runtime/app/composables/cms-query-disabled");
       addImports([
@@ -477,16 +537,38 @@ const module$1 = defineNuxtModule({
         { name: "$cmsQuery", from: stub }
       ]);
       nuxt.options.runtimeConfig.public.cms = {
-        mediaBaseUrl: options.media.publicBaseUrl,
-        mediaStorage: options.media.storage,
-        i18n: options.i18n
+        mediaBaseUrl: resolved.media.publicBaseUrl,
+        mediaStorage: resolved.media.storage,
+        mediaMaxFileSize: resolved.media.maxFileSize,
+        i18n: resolved.i18n
       };
       logger.info(
         "[nuxt-cms] disabled: registering no-op useCms/$cmsQuery stubs, skipping admin, server and database setup"
       );
       return;
     }
-    const configPath = await resolvePath(options.configPath, { cwd: nuxt.options.rootDir });
+    if ((resolved.database.driver === "postgres" || resolved.database.driver === "libsql") && !resolved.database.url && !process.env.NUXT_CMS_DATABASE_URL) {
+      logger.warn(
+        `[nuxt-cms] database.driver is '${resolved.database.driver}' but no url is configured (database.url or NUXT_CMS_DATABASE_URL); the app will fail to connect unless one is provided before the server starts.`
+      );
+    }
+    if (!Number.isInteger(resolved.media.maxFileSize) || resolved.media.maxFileSize <= 0) {
+      throw new Error(
+        `[nuxt-cms] media.maxFileSize must be a positive integer number of bytes, got ${resolved.media.maxFileSize}`
+      );
+    }
+    const s3KeysConfigured = [
+      resolved.media.endpoint,
+      resolved.media.bucket,
+      resolved.media.accessKeyId,
+      resolved.media.secretAccessKey
+    ].some(Boolean);
+    if (resolved.media.storage === "s3" && s3KeysConfigured && !resolved.media.publicBaseUrl && !process.env.NUXT_PUBLIC_CMS_MEDIA_BASE_URL) {
+      logger.warn(
+        "[nuxt-cms] media.storage is 's3' with credentials configured but no publicBaseUrl (media.publicBaseUrl or NUXT_PUBLIC_CMS_MEDIA_BASE_URL); uploaded media URLs will be null."
+      );
+    }
+    const configPath = await resolvePath(resolved.configPath, { cwd: nuxt.options.rootDir });
     nuxt.options.alias["#nuxt-cms"] = resolver.resolve("./runtime/shared/index");
     nuxt.options.watch.push(configPath);
     let cmsConfig = {};
@@ -499,11 +581,11 @@ const module$1 = defineNuxtModule({
       cmsConfig = await jiti.import(configPath, { default: true });
     } else {
       logger.warn(
-        `[nuxt-cms] Config file not found: ${configPath}. Using an empty registry \u2014 create a ${options.configPath}.ts with defineCmsConfig().`
+        `[nuxt-cms] Config file not found: ${configPath}. Using an empty registry \u2014 create a ${resolved.configPath}.ts with defineCmsConfig().`
       );
       nuxt.options.alias["#cms-config"] = resolver.resolve("./runtime/shared/empty-config");
     }
-    const configErrors = validateConfig(cmsConfig, options.i18n);
+    const configErrors = validateConfig(cmsConfig, resolved.i18n);
     if (configErrors.length) {
       for (const error of configErrors) logger.error(error);
       throw new Error(
@@ -523,7 +605,7 @@ const module$1 = defineNuxtModule({
       write: true,
       getContents: () => renderSchemaFile(
         cmsConfig,
-        options.database.driver === "postgres" ? "postgres" : "sqlite",
+        resolved.database.driver === "postgres" ? "postgres" : "sqlite",
         resolveImport
       )
     });
@@ -588,11 +670,11 @@ const module$1 = defineNuxtModule({
       { name: "$cmsQuery", from: resolver.resolve("./runtime/app/composables/cms-query") }
     ]);
     const {
-      driver = "sqlite",
-      path: dbPath = "data/cms.db",
-      url: databaseUrl = "",
-      authToken: databaseAuthToken = ""
-    } = options.database;
+      driver,
+      path: dbPath,
+      url: databaseUrl,
+      authToken: databaseAuthToken
+    } = resolved.database;
     nuxt.options.alias["#cms-db"] = resolver.resolve(
       driver === "postgres" ? "./runtime/server/utils/db-postgres" : driver === "libsql" ? "./runtime/server/utils/db-libsql" : "./runtime/server/utils/db-sqlite"
     );
@@ -645,11 +727,11 @@ const module$1 = defineNuxtModule({
       });
     }
     const publicDir = resolve(nuxt.options.rootDir, nuxt.options.dir?.public ?? "public");
-    const mediaLocalRoot = options.media.storage === "local" && options.media.publicBaseUrl.startsWith("/") ? join(publicDir, ...options.media.publicBaseUrl.split("/").filter(Boolean)) : "";
+    const mediaLocalRoot = resolved.media.storage === "local" && resolved.media.publicBaseUrl.startsWith("/") ? join(publicDir, ...resolved.media.publicBaseUrl.split("/").filter(Boolean)) : "";
     const existingConfig = nuxt.options.runtimeConfig.cms ?? {};
     nuxt.options.runtimeConfig.cms = {
-      adminEmail: options.admin.email,
-      adminPassword: options.admin.password,
+      adminEmail: resolved.admin.email,
+      adminPassword: resolved.admin.password,
       databaseUrl,
       databaseAuthToken,
       dbPath: resolvedDbPath,
@@ -657,25 +739,27 @@ const module$1 = defineNuxtModule({
       ...existingConfig,
       graphql: {
         graphiql: nuxt.options.dev,
-        maxDepth: options.graphql.maxDepth,
+        maxDepth: resolved.graphql.maxDepth,
         ...existingConfig.graphql ?? {}
       },
       media: {
-        storage: options.media.storage,
-        endpoint: options.media.endpoint,
-        region: options.media.region,
-        bucket: options.media.bucket,
-        presignExpiry: options.media.presignExpiry,
-        accessKeyId: options.media.accessKeyId,
-        secretAccessKey: options.media.secretAccessKey,
+        storage: resolved.media.storage,
+        endpoint: resolved.media.endpoint,
+        region: resolved.media.region,
+        bucket: resolved.media.bucket,
+        presignExpiry: resolved.media.presignExpiry,
+        maxFileSize: resolved.media.maxFileSize,
+        accessKeyId: resolved.media.accessKeyId,
+        secretAccessKey: resolved.media.secretAccessKey,
         localRoot: mediaLocalRoot,
         ...existingConfig.media ?? {}
       }
     };
     nuxt.options.runtimeConfig.public.cms = {
-      mediaBaseUrl: options.media.publicBaseUrl,
-      mediaStorage: options.media.storage,
-      i18n: options.i18n
+      mediaBaseUrl: resolved.media.publicBaseUrl,
+      mediaStorage: resolved.media.storage,
+      mediaMaxFileSize: resolved.media.maxFileSize,
+      i18n: resolved.i18n
     };
     addTypeTemplate(
       {

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

@@ -36,7 +36,9 @@
 </template>
 
 <script setup>
+import { formatFileSize } from "#nuxt-cms";
 import { computed, ref } from "#imports";
+import { useCmsRuntime } from "../../composables/cms-runtime";
 import { useCmsToast } from "../../composables/cms-toast";
 const props = defineProps({
   multiple: { type: Boolean, required: false },
@@ -46,6 +48,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["uploaded"]);
 const toast = useCmsToast();
+const { mediaMaxFileSize } = useCmsRuntime();
 async function imageDimensions(file) {
   if (!file.type.startsWith("image/")) return {};
   try {
@@ -74,7 +77,6 @@ function matchesAccept(file) {
     return file.type.toLowerCase() === pattern;
   });
 }
-const MAX_FILE_SIZE = 10 * 1024 * 1024;
 async function uploadOne(file) {
   const presign = await $fetch("/api/cms/admin/media/presign", {
     method: "POST",
@@ -106,11 +108,14 @@ async function uploadOne(file) {
 }
 async function handleFiles(list) {
   let files = Array.from(list).filter(matchesAccept);
-  const tooLarge = files.filter((file) => file.size > MAX_FILE_SIZE);
+  const tooLarge = files.filter((file) => file.size > mediaMaxFileSize);
   for (const file of tooLarge) {
-    toast.add({ title: `File too large (max 10 MB): ${file.name}`, color: "error" });
+    toast.add({
+      title: `File too large (max ${formatFileSize(mediaMaxFileSize)}): ${file.name}`,
+      color: "error"
+    });
   }
-  files = files.filter((file) => file.size <= MAX_FILE_SIZE);
+  files = files.filter((file) => file.size <= mediaMaxFileSize);
   if (!props.multiple) files = files.slice(0, 1);
   if (!files.length || uploading.value) return;
   uploading.value = true;

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

@@ -1,5 +1,11 @@
 <template>
-   <CmsRichTextField v-if="props.field.type === 'richtext'" v-model="current" />
+   <CmsMediaField
+      v-if="props.field.type === 'media'"
+      v-model="currentMedia"
+      :media-type="props.field.mediaType"
+      :accept="props.field.accept"
+   />
+   <CmsRichTextField v-else-if="props.field.type === 'richtext'" v-model="current" />
    <CmsTextarea v-else-if="props.field.textarea" v-model="current" :rows="8" />
    <CmsInput v-else v-model="current" />
 </template>
@@ -14,14 +20,19 @@ const props = defineProps({
 const model = defineModel({ type: [Object, null], ...{ required: true } });
 const { i18n } = useCmsRuntime();
 const active = computed(() => props.locale ?? i18n.defaultLocale);
+function write(value) {
+  const next = Object.fromEntries(
+    Object.entries(model.value ?? {}).filter(([locale]) => locale !== active.value)
+  );
+  if (value != null && value !== "") next[active.value] = value;
+  model.value = Object.keys(next).length ? next : null;
+}
 const current = computed({
   get: () => model.value?.[active.value] ?? "",
-  set: (value) => {
-    const next = Object.fromEntries(
-      Object.entries(model.value ?? {}).filter(([locale]) => locale !== active.value)
-    );
-    if (value != null && value !== "") next[active.value] = value;
-    model.value = Object.keys(next).length ? next : null;
-  }
+  set: write
+});
+const currentMedia = computed({
+  get: () => model.value?.[active.value] ?? null,
+  set: write
 });
 </script>

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

@@ -2,5 +2,6 @@ import type { CmsI18n, MediaStorageMode } from '../../shared/index.js';
 export declare function useCmsRuntime(): {
     mediaBaseUrl: string;
     mediaStorage: MediaStorageMode;
+    mediaMaxFileSize: number;
     i18n: CmsI18n;
 };

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

@@ -57,7 +57,7 @@
             @reorder="reorderColumns"
          >
             <template v-for="key in mediaKeys" #[`${key}-cell`]="{ row }" :key="key">
-               <CmsMediaThumb :value="row.original[key]" />
+               <CmsMediaThumb :value="mediaThumbValue(key, row.original[key])" />
             </template>
             <template v-if="drafts" #status-cell="{ row }">
                <CmsStatusBadge :published="row.original.status === 'published'" />
@@ -109,7 +109,7 @@
 </template>
 
 <script setup>
-import { isTranslatableField } from "#nuxt-cms";
+import { isTranslatableField, isTranslatableMediaField, pickTranslatedMedia } from "#nuxt-cms";
 import {
   computed,
   createError,
@@ -226,6 +226,12 @@ function localized(value) {
   const record = value;
   return record[contentI18n.defaultLocale] ?? Object.values(record)[0] ?? "";
 }
+function mediaThumbValue(key, value) {
+  const field = config?.fields[key];
+  if (!field || !isTranslatableMediaField(field)) return value ?? null;
+  const locale = contentI18n.defaultLocale;
+  return pickTranslatedMedia(value, locale, locale);
+}
 function relationLabel(field, key, id) {
   const title = relations.value[key]?.[String(id)];
   if (title == null || title === "") return `#${id}`;

package/dist/runtime/server/api/collection.get.d.ts

@@ -1,4 +1,2 @@
-declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<{
-    [x: string]: any;
-} | null>>;
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<Record<string, unknown> | null>>;
 export default _default;

package/dist/runtime/server/api/collection.get.js

@@ -2,7 +2,7 @@ import { asc, count, desc, sql } from "drizzle-orm";
 import { defineEventHandler, getValidatedQuery } from "h3";
 import { z } from "zod";
 import { useDb } from "#cms-db";
-import { getRegistryEntry, idColumn, tableColumns } from "../utils/registry.js";
+import { decodeRows, getRegistryEntry, idColumn, tableColumns } from "../utils/registry.js";
 import { attachManyToMany, relationTitles } from "../utils/relations.js";
 import { requireAdmin } from "../utils/require-admin.js";
 const querySchema = z.object({
@@ -23,7 +23,7 @@ export default defineEventHandler(async (event) => {
   if (entry.kind === "single") {
     const rows = await db.select().from(table).limit(1);
     await attachManyToMany(db, name, entry, rows);
-    return rows[0] ?? null;
+    return decodeRows(entry, rows)[0] ?? null;
   }
   const { limit, offset, search, sort, order, light } = await getValidatedQuery(
     event,
@@ -52,6 +52,7 @@ export default defineEventHandler(async (event) => {
   const [counted] = await (where ? db.select({ total: count() }).from(table).where(where) : db.select({ total: count() }).from(table));
   if (light) return { items, total: counted?.total ?? 0, relations: {} };
   await attachManyToMany(db, name, entry, items);
+  decodeRows(entry, items);
   return {
     items,
     total: counted?.total ?? 0,

package/dist/runtime/server/api/collection.post.js

@@ -2,7 +2,7 @@ import { createError, defineEventHandler, readValidatedBody } from "h3";
 import { withTransaction } from "#cms-db";
 import { customId } from "../utils/custom-id.js";
 import { mapConstraintErrors } from "../utils/db-errors.js";
-import { buildValidator, getRegistryEntry } from "../utils/registry.js";
+import { buildValidator, decodeRows, encodeColumnValues, getRegistryEntry } from "../utils/registry.js";
 import {
   assertRelationTargets,
   attachManyToMany,
@@ -17,7 +17,7 @@ export default defineEventHandler(async (event) => {
     throw createError({ statusCode: 405, statusMessage: "Single objects are updated with PUT" });
   }
   const body = await readValidatedBody(event, buildValidator(entry).parse);
-  const { values, lists } = splitRelationValues(entry, body);
+  const { values, lists } = splitRelationValues(entry, encodeColumnValues(entry, body));
   await assertRelationTargets(entry, lists);
   if (entry.drafts) values.status ??= "draft";
   values.id = customId(entry.id);
@@ -28,7 +28,7 @@ export default defineEventHandler(async (event) => {
       const [attached] = await attachManyToMany(db, name, entry, [
         row
       ]);
-      return attached;
+      return decodeRows(entry, [attached])[0];
     })
   );
 });

package/dist/runtime/server/api/collection.put.js

@@ -1,7 +1,14 @@
 import { createError, defineEventHandler, readValidatedBody } from "h3";
 import { withTransaction } from "#cms-db";
 import { mapConstraintErrors } from "../utils/db-errors.js";
-import { buildValidator, getRegistryEntry, idColumn, withUpdatedAt } from "../utils/registry.js";
+import {
+  buildValidator,
+  decodeRows,
+  encodeColumnValues,
+  getRegistryEntry,
+  idColumn,
+  withUpdatedAt
+} from "../utils/registry.js";
 import {
   assertRelationTargets,
   attachManyToMany,
@@ -16,7 +23,10 @@ export default defineEventHandler(async (event) => {
     throw createError({ statusCode: 405, statusMessage: "Collections are updated with PUT /:id" });
   }
   const body = await readValidatedBody(event, buildValidator(entry).parse);
-  const { values, lists } = splitRelationValues(entry, body);
+  const { values, lists } = splitRelationValues(
+    entry,
+    encodeColumnValues(entry, body)
+  );
   await assertRelationTargets(entry, lists);
   const set = withUpdatedAt(table, values);
   return mapConstraintErrors(
@@ -26,7 +36,7 @@ export default defineEventHandler(async (event) => {
       const [attached] = await attachManyToMany(db, name, entry, [
         row
       ]);
-      return attached;
+      return decodeRows(entry, [attached])[0];
     })
   );
 });

package/dist/runtime/server/api/item.get.js

@@ -1,7 +1,7 @@
 import { eq } from "drizzle-orm";
 import { createError, defineEventHandler } from "h3";
 import { useDb } from "#cms-db";
-import { getRegistryEntry, idColumn, parseId } from "../utils/registry.js";
+import { decodeRows, getRegistryEntry, idColumn, parseId } from "../utils/registry.js";
 import { attachManyToMany } from "../utils/relations.js";
 import { requireAdmin } from "../utils/require-admin.js";
 export default defineEventHandler(async (event) => {
@@ -15,5 +15,5 @@ export default defineEventHandler(async (event) => {
   const rows = await db.select().from(table).where(eq(idColumn(table), id)).limit(1);
   if (!rows[0]) throw createError({ statusCode: 404, statusMessage: "Row not found" });
   const [attached] = await attachManyToMany(db, name, entry, [rows[0]]);
-  return attached;
+  return decodeRows(entry, [attached])[0];
 });

package/dist/runtime/server/api/item.put.js

@@ -3,6 +3,8 @@ import { createError, defineEventHandler, readValidatedBody } from "h3";
 import { withTransaction } from "#cms-db";
 import {
   buildValidator,
+  decodeRows,
+  encodeColumnValues,
   getRegistryEntry,
   idColumn,
   parseId,
@@ -27,7 +29,10 @@ export default defineEventHandler(async (event) => {
   }
   const id = parseId(event);
   const body = await readValidatedBody(event, buildValidator(entry).parse);
-  const { values, lists } = splitRelationValues(entry, body);
+  const { values, lists } = splitRelationValues(
+    entry,
+    encodeColumnValues(entry, body)
+  );
   await assertRelationTargets(entry, lists);
   const set = withUpdatedAt(table, values);
   return mapConstraintErrors(
@@ -38,7 +43,7 @@ export default defineEventHandler(async (event) => {
       const [attached] = await attachManyToMany(db, name, entry, [
         row
       ]);
-      return attached;
+      return decodeRows(entry, [attached])[0];
     })
   );
 });

package/dist/runtime/server/api/media-presign.post.js

@@ -1,12 +1,11 @@
 import { randomUUID } from "node:crypto";
-import { createError, defineEventHandler, readValidatedBody } from "h3";
+import { defineEventHandler, readValidatedBody } from "h3";
 import { z } from "zod";
 import { normalizeMediaFolder, slugify } from "../../shared/index.js";
-import { assertUploadContentType, useMediaStorage } from "../utils/media.js";
+import { assertUploadContentType, assertUploadSize, useMediaStorage } from "../utils/media.js";
 import { requireAdmin } from "../utils/require-admin.js";
 const MAX_BASE_LENGTH = 80;
 const MAX_EXT_LENGTH = 10;
-const MAX_FILE_SIZE = 10 * 1024 * 1024;
 const bodySchema = z.object({
   filename: z.string().trim().min(1).max(255),
   contentType: z.string().regex(/^[-\w.+]+\/[-\w.+]+$/, "Invalid content type"),
@@ -24,12 +23,7 @@ export default defineEventHandler(async (event) => {
   const { media, client, bucketUrl, publicUrl } = useMediaStorage(event);
   const { filename, contentType, size, folder } = await readValidatedBody(event, bodySchema.parse);
   assertUploadContentType(contentType);
-  if (size > MAX_FILE_SIZE) {
-    throw createError({
-      statusCode: 413,
-      statusMessage: "File exceeds the maximum size of 10 MB"
-    });
-  }
+  assertUploadSize(size, media.maxFileSize);
   const now = /* @__PURE__ */ new Date();
   const normalizedFolder = normalizeMediaFolder(folder);
   const prefix = normalizedFolder ?? `${now.getUTCFullYear()}/${String(now.getUTCMonth() + 1).padStart(2, "0")}`;

package/dist/runtime/server/utils/graphql.js

@@ -19,7 +19,14 @@ import cmsConfig from "#cms-config";
 import { useDb } from "#cms-db";
 import * as cmsTables from "#cms-tables";
 import { useRuntimeConfig } from "#imports";
-import { mediaPublicUrl, mediaTypeFor, translatableFieldKeys } from "../../shared/index.js";
+import {
+  decodeTranslatableMedia,
+  isTranslatableMediaField,
+  mediaPublicUrl,
+  mediaTypeFor,
+  pickTranslatedMedia,
+  translatableFieldKeys
+} from "../../shared/index.js";
 import { blockTypeName, blockUnionName, renderGraphqlSdl, typeName } from "../../shared/graphql-sdl.js";
 import { getContentI18n, resolveTable, tableColumns } from "./registry.js";
 const MAX_LIMIT = 100;
@@ -87,6 +94,11 @@ function localizeRow(entry, row, locale) {
   const { defaultLocale } = getContentI18n();
   const result = { ...row, [LOCALE]: locale };
   for (const key of translatableFieldKeys(entry)) {
+    if (isTranslatableMediaField(entry.fields[key])) {
+      const media = decodeTranslatableMedia(row[key], defaultLocale);
+      result[key] = pickTranslatedMedia(media, locale, defaultLocale);
+      continue;
+    }
     const value = row[key];
     result[key] = value?.[locale] ?? value?.[defaultLocale] ?? null;
   }

package/dist/runtime/server/utils/media.d.ts

@@ -7,10 +7,12 @@ interface MediaConfig {
     region: string;
     bucket: string;
     presignExpiry: number;
+    maxFileSize: number;
     accessKeyId: string;
     secretAccessKey: string;
 }
 export declare function assertUploadContentType(contentType: string): void;
+export declare function assertUploadSize(size: number, maxFileSize: number): void;
 export declare function encodeKey(key: string): string;
 export declare function assertMediaConfigured(media: MediaConfig): void;
 export declare function assertMediaWritable(media: MediaConfig): void;

package/dist/runtime/server/utils/media.js

@@ -1,7 +1,7 @@
 import { AwsClient } from "aws4fetch";
 import { createError } from "h3";
 import { useRuntimeConfig } from "#imports";
-import { mediaPublicUrl, mediaTypeFor } from "../../shared/index.js";
+import { formatFileSize, mediaPublicUrl, mediaTypeFor } from "../../shared/index.js";
 const UPLOAD_TYPE_PREFIXES = ["image/", "video/", "audio/", "font/"];
 const UPLOAD_TYPE_BLOCKLIST = /* @__PURE__ */ new Set(["image/svg+xml"]);
 const UPLOAD_TYPES = /* @__PURE__ */ new Set([
@@ -29,6 +29,14 @@ export function assertUploadContentType(contentType) {
     });
   }
 }
+export function assertUploadSize(size, maxFileSize) {
+  if (size > maxFileSize) {
+    throw createError({
+      statusCode: 413,
+      statusMessage: `File exceeds the maximum size of ${formatFileSize(maxFileSize)}`
+    });
+  }
+}
 export function encodeKey(key) {
   return key.split("/").map(encodeURIComponent).join("/");
 }

package/dist/runtime/server/utils/registry.d.ts

@@ -17,4 +17,6 @@ export declare function getRegistryEntry(event: H3Event): {
 export declare function buildValidator(entry: CmsEntry): z.ZodObject<{
     [x: string]: z.ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>;
 }, z.core.$strip>;
+export declare function encodeColumnValues(entry: CmsEntry, values: Record<string, unknown>): Record<string, unknown>;
+export declare function decodeRows<T extends Record<string, unknown>>(entry: CmsEntry, rows: T[]): T[];
 export declare function parseId(event: H3Event): string;

package/dist/runtime/server/utils/registry.js

@@ -3,6 +3,7 @@ import { z } from "zod";
 import cmsConfig from "#cms-config";
 import * as cmsTables from "#cms-tables";
 import { useRuntimeConfig } from "#imports";
+import { decodeEntryTranslatableMedia, encodeEntryTranslatableMedia } from "../../shared/index.js";
 import { buildEntrySchema } from "../../shared/validation.js";
 let contentI18n;
 export function getContentI18n() {
@@ -42,6 +43,12 @@ export function getRegistryEntry(event) {
 export function buildValidator(entry) {
   return buildEntrySchema(entry, getContentI18n());
 }
+export function encodeColumnValues(entry, values) {
+  return encodeEntryTranslatableMedia(entry, values);
+}
+export function decodeRows(entry, rows) {
+  return decodeEntryTranslatableMedia(entry, rows, getContentI18n().defaultLocale);
+}
 export function parseId(event) {
   return z.string().min(1).parse(getRouterParam(event, "id"));
 }

package/dist/runtime/shared/index.d.ts

@@ -14,6 +14,8 @@ export declare function mediaFilename(key: string): string;
 export declare function mediaTypeFor(mime: string | null | undefined, key: string): MediaType;
 export declare function mediaIconFor(type: MediaType): string;
 export declare function mediaPublicUrl(baseUrl: string | null | undefined, key: string): string | null;
+export declare const DEFAULT_MEDIA_MAX_FILE_SIZE: number;
+export declare function formatFileSize(bytes: number): string;
 export declare function slugify(value: string): string;
 export declare const MEDIA_FOLDER_MAX_DEPTH = 4;
 export declare function normalizeMediaFolder(value: string | null | undefined): string | null;
@@ -52,6 +54,13 @@ export interface FieldConfig {
     onDelete?: 'set null' | 'cascade' | 'restrict';
 }
 export declare function isTranslatableField(field: FieldConfig): boolean;
+export declare function isTranslatableMediaField(field: FieldConfig): boolean;
+export declare function decodeTranslatableMedia(value: unknown, defaultLocale: string): Record<string, string> | null;
+export declare function encodeTranslatableMedia(value: unknown): string | null;
+export declare function pickTranslatedMedia(values: Record<string, string> | null | undefined, locale: string, defaultLocale: string): string | null;
+export declare function translatableMediaKeys(entry: Pick<CmsEntry, 'fields'>): string[];
+export declare function encodeEntryTranslatableMedia(entry: Pick<CmsEntry, 'fields'>, values: Record<string, unknown>): Record<string, unknown>;
+export declare function decodeEntryTranslatableMedia<T extends Record<string, unknown>>(entry: Pick<CmsEntry, 'fields'>, rows: T[], defaultLocale: string): T[];
 export declare function isMultiSelect(field: FieldConfig): boolean;
 export declare function translatableFieldKeys(entry: CmsEntry): string[];
 export interface CmsEntry {
@@ -106,6 +115,7 @@ export interface MediaFieldInput extends FieldInputBase {
     type: 'media';
     mediaType?: MediaType;
     accept?: string[];
+    translatable?: boolean;
 }
 export interface RelationFieldInput extends FieldInputBase {
     type: 'relation';
@@ -113,7 +123,7 @@ export interface RelationFieldInput extends FieldInputBase {
     cardinality?: 'many-to-one' | 'one-to-one' | 'many-to-many';
     onDelete?: 'set null' | 'cascade' | 'restrict';
 }
-export type BlockFieldInput = Omit<TextFieldInput, 'translatable'> | Omit<RichtextFieldInput, 'translatable'> | NumberFieldInput | BooleanFieldInput | DateFieldInput | EmailFieldInput | SelectFieldInput | JsonFieldInput | MediaFieldInput;
+export type BlockFieldInput = Omit<TextFieldInput, 'translatable'> | Omit<RichtextFieldInput, 'translatable'> | NumberFieldInput | BooleanFieldInput | DateFieldInput | EmailFieldInput | SelectFieldInput | JsonFieldInput | Omit<MediaFieldInput, 'translatable'>;
 export interface BlockInput {
     label: string;
     fields: Record<string, BlockFieldInput>;

package/dist/runtime/shared/index.js

@@ -41,6 +41,17 @@ export function mediaIconFor(type) {
 export function mediaPublicUrl(baseUrl, key) {
   return baseUrl ? `${baseUrl.replace(/\/+$/, "")}/${key}` : null;
 }
+export const DEFAULT_MEDIA_MAX_FILE_SIZE = 10 * 1024 * 1024;
+const FILE_SIZE_UNITS = ["B", "KB", "MB", "GB", "TB"];
+export function formatFileSize(bytes) {
+  let value = Math.max(0, bytes);
+  let unit = 0;
+  while (value >= 1024 && unit < FILE_SIZE_UNITS.length - 1) {
+    value /= 1024;
+    unit++;
+  }
+  return `${Math.round(value * 10) / 10} ${FILE_SIZE_UNITS[unit]}`;
+}
 export function slugify(value) {
   return value.toLowerCase().normalize("NFKD").replace(/[\u0300-\u036F]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
@@ -51,7 +62,65 @@ export function normalizeMediaFolder(value) {
   return segments.length ? segments.join("/") : null;
 }
 export function isTranslatableField(field) {
-  return !!field.translatable && (field.type === "text" || field.type === "richtext");
+  return !!field.translatable && (field.type === "text" || field.type === "richtext" || field.type === "media");
+}
+export function isTranslatableMediaField(field) {
+  return !!field.translatable && field.type === "media";
+}
+function parseJsonObject(raw) {
+  try {
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+      return parsed;
+    }
+  } catch {
+    return null;
+  }
+  return null;
+}
+export function decodeTranslatableMedia(value, defaultLocale) {
+  if (value == null) return null;
+  if (typeof value === "object") return value;
+  const raw = String(value).trim();
+  if (!raw) return null;
+  return (raw.startsWith("{") ? parseJsonObject(raw) : null) ?? { [defaultLocale]: raw };
+}
+export function encodeTranslatableMedia(value) {
+  if (value == null) return null;
+  if (typeof value === "string") return value.trim() || null;
+  if (typeof value !== "object") return null;
+  const entries = Object.entries(value).filter(
+    (pair) => typeof pair[1] === "string" && pair[1].trim() !== ""
+  );
+  return entries.length ? JSON.stringify(Object.fromEntries(entries)) : null;
+}
+export function pickTranslatedMedia(values, locale, defaultLocale) {
+  if (!values) return null;
+  return values[locale] || values[defaultLocale] || Object.values(values).find(Boolean) || null;
+}
+export function translatableMediaKeys(entry) {
+  return Object.entries(entry.fields).filter(([, field]) => isTranslatableMediaField(field)).map(([key]) => key);
+}
+export function encodeEntryTranslatableMedia(entry, values) {
+  const keys = translatableMediaKeys(entry);
+  if (!keys.length) return values;
+  const encoded = { ...values };
+  for (const key of keys) {
+    if (Object.hasOwn(encoded, key)) encoded[key] = encodeTranslatableMedia(encoded[key]);
+  }
+  return encoded;
+}
+export function decodeEntryTranslatableMedia(entry, rows, defaultLocale) {
+  const keys = translatableMediaKeys(entry);
+  if (!keys.length) return rows;
+  for (const row of rows) {
+    for (const key of keys) {
+      if (Object.hasOwn(row, key)) {
+        row[key] = decodeTranslatableMedia(row[key], defaultLocale);
+      }
+    }
+  }
+  return rows;
 }
 export function isMultiSelect(field) {
   return field.type === "select" && !!field.multiple;

package/dist/runtime/shared/validation.js

@@ -69,7 +69,7 @@ export function buildEntrySchema(entry, i18n, messages) {
       continue;
     }
     if (isTranslatableField(field) && locales.length) {
-      const record = z.record(z.string(), z.string()).refine((v) => Object.keys(v).every((k) => locales.includes(k)), m.unknownLocale);
+      const record = z.record(z.string(), field.type === "media" ? objectKeySchema : z.string()).refine((v) => Object.keys(v).every((k) => locales.includes(k)), m.unknownLocale);
       shape[key] = field.required ? record.refine((v) => !!v[defaultLocale]?.trim(), m.requiredLocale(defaultLocale)) : record.nullish().transform((v) => v ?? null);
       continue;
     }

package/dist/types.d.mts

@@ -1,3 +1,3 @@
 export { default } from './module.mjs'
 
-export { type ModuleOptions } from './module.mjs'
+export { type ModuleOptions, type ModuleOptionsDatabase, type ModuleOptionsMedia } from './module.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xleddyl/nuxt-cms",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "description": "Lightweight CMS that ships with your Nuxt app: runs on the Nitro server, content types defined in code, /cms admin panel, GraphQL API, SQLite or Postgres. No external CMS needed!",
   "license": "MIT",
   "author": "Edoardo Alberti (https://github.com/xleddyl)",