@xleddyl/nuxt-cms 0.1.31 → 0.1.33

package/README.md

@@ -5,7 +5,7 @@ nuxt-cms is a Nuxt module that leverages the Nitro server to ship a lightweight
 - **Zero extra infrastructure**: the CMS runs inside your app's Nitro server; you deploy one thing.
 - **Content types in code**: a `cms.config.ts` with `defineCmsConfig()` declares collections, single documents, relations, blocks and translatable fields; database schema, migrations and TypeScript types are generated from it.
 - **Admin panel at `/cms`**: entry editing with validation, drafts, media library (S3-compatible storage, or a local mode backed directly by your `public/` folder), single-admin auth from env credentials.
-- **Public GraphQL API**: read-only, typed end-to-end via gql.tada, with filtering, sorting and pagination.
+- **Public GraphQL API**: read-only, typed end-to-end via gql.tada, with filtering, sorting and pagination; fields marked `private` stay out of it.
 - **SQLite, Postgres or libSQL/Turso**: a local file database by default, one config line to switch (including remote SQLite over the network).
 
 ## Installation

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@xleddyl/nuxt-cms",
   "configKey": "cms",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "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, isTranslatableMediaField, DEFAULT_MEDIA_MAX_FILE_SIZE } from '../dist/runtime/shared/index.js';
+import { isMultiSelect, isTranslatableField, isTranslatableMediaField, isPrivateField, DEFAULT_MEDIA_MAX_FILE_SIZE } from '../dist/runtime/shared/index.js';
 import { scanMediaDirectory, readMediaFileMeta } from '../dist/runtime/server/utils/media-sync.js';
 
 async function collectMediaManifest(root) {
@@ -44,6 +44,7 @@ const IDENTIFIER = /^[a-z_]\w*$/i;
 const RESERVED_ENTRY_KEYS = ["admin", "auth", "login", "media", "graphql", "cms_media"];
 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"];
 const RESERVED_TYPE_NAMES = [
   "Query",
   "Mutation",
@@ -124,7 +125,7 @@ function validateConfig(config, i18n) {
         columnNames.add(column);
       }
       if (field.translatable) {
-        if (field.type !== "text" && field.type !== "richtext" && field.type !== "media")
+        if (!TRANSLATABLE_FIELD_TYPES.includes(field.type))
           errors.push(
             `${fat}: translatable is only supported on text, richtext and media fields`
           );
@@ -167,8 +168,18 @@ function validateConfig(config, i18n) {
                 `${bfat}: ${blockField.type} fields are not supported inside blocks`
               );
             }
-            if (blockField.translatable)
-              errors.push(`${bfat}: translatable fields are not supported inside blocks`);
+            if (blockField.translatable) {
+              if (!TRANSLATABLE_FIELD_TYPES.includes(blockField.type))
+                errors.push(
+                  `${bfat}: translatable is only supported on text, richtext and media fields`
+                );
+              if (!locales.length)
+                errors.push(
+                  `${bfat}: translatable requires cms.i18n.locales in nuxt.config`
+                );
+            }
+            if (blockField.private)
+              errors.push(`${bfat}: private fields are not supported inside blocks`);
             if (blockField.type === "select" && !blockField.options?.length) {
               errors.push(`${bfat}: select requires a non-empty options array`);
             }
@@ -416,6 +427,7 @@ ${lines.join("\n")}
 function entryTs(config, name, entry) {
   const lines = ["  id: string"];
   for (const [key, field] of Object.entries(entry.fields)) {
+    if (isPrivateField(field)) continue;
     lines.push(`  ${key}: ${fieldTsType(config, name, key, field)}`);
   }
   if (entry.kind === "collection") lines.push("  createdAt: string");
@@ -440,7 +452,8 @@ function renderTypesFile(config) {
   ];
   for (const [name, entry] of Object.entries(config)) {
     for (const [key, field] of Object.entries(entry.fields)) {
-      if (field.type === "blocks") parts.push(...blockTypesTs(name, key, field));
+      if (field.type === "blocks" && !isPrivateField(field))
+        parts.push(...blockTypesTs(name, key, field));
     }
     parts.push(entryTs(config, name, entry));
   }

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

@@ -1,6 +1,7 @@
 import type { FieldConfig } from '#nuxt-cms';
 type __VLS_Props = {
     field: FieldConfig;
+    locale?: string;
 };
 type __VLS_ModelProps = {
     modelValue: Record<string, unknown>[] | null;

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

@@ -63,6 +63,7 @@
                <CmsFieldInput
                   :model-value="item[blockKey]"
                   :field="blockField"
+                  :locale="locale"
                   @update:model-value="(value) => updateField(index, blockKey, value)"
                />
             </CmsFormField>
@@ -77,7 +78,8 @@
 <script setup>
 import { computed, ref } from "#imports";
 const props = defineProps({
-  field: { type: Object, required: true }
+  field: { type: Object, required: true },
+  locale: { type: String, required: false }
 });
 const model = defineModel({ type: [Array, null], ...{ required: true } });
 const blocks = computed(() => props.field.blocks ?? {});

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

@@ -1,6 +1,7 @@
 import type { FieldConfig } from '#nuxt-cms';
 type __VLS_Props = {
     field: FieldConfig;
+    locale?: string;
 };
 type __VLS_ModelProps = {
     modelValue: Record<string, unknown>[] | null;

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

@@ -13,10 +13,12 @@
          :name="key"
          :required="field.required"
       >
-         <template v-if="isTranslatableField(field) && i18n.locales.length > 1" #label-actions>
+         <template v-if="hasLocaleSwitch(field) && i18n.locales.length > 1" #label-actions>
             <CmsLocaleSwitch
                :model-value="localeFor(key)"
-               :value="state[key]"
+               :value="
+  isTranslatableField(field) ? state[key] : null
+"
                @update:model-value="(locale) => setLocale(key, locale)"
             />
          </template>
@@ -41,7 +43,7 @@
 </template>
 
 <script setup>
-import { isTranslatableField } from "#nuxt-cms";
+import { hasTranslatableBlockFields, isTranslatableField } from "#nuxt-cms";
 import { computed, ref } from "#imports";
 import { buildEntrySchema } from "../../../shared/validation";
 import { useCmsRuntime } from "../../composables/cms-runtime";
@@ -56,6 +58,9 @@ const state = defineModel({ type: Object, ...{ required: true } });
 const emit = defineEmits(["submit", "error"]);
 const { i18n } = useCmsRuntime();
 const activeLocale = ref({});
+function hasLocaleSwitch(field) {
+  return isTranslatableField(field) || hasTranslatableBlockFields(field);
+}
 function localeFor(key) {
   return activeLocale.value[key] ?? i18n.defaultLocale;
 }

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

@@ -5,7 +5,12 @@
       :field="field"
       :locale="locale"
    />
-   <CmsBlocksField v-else-if="field.type === 'blocks'" v-model="blocksValue" :field="field" />
+   <CmsBlocksField
+      v-else-if="field.type === 'blocks'"
+      v-model="blocksValue"
+      :field="field"
+      :locale="locale"
+   />
    <CmsRichTextField v-else-if="field.type === 'richtext'" v-model="strOrNull" />
    <CmsTextarea v-else-if="field.type === 'text' && field.textarea" v-model="str" :rows="8" />
    <CmsInput v-else-if="field.type === 'text'" v-model="str" />

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

@@ -21,7 +21,10 @@ import * as cmsTables from "#cms-tables";
 import { useRuntimeConfig } from "#imports";
 import {
   decodeTranslatableMedia,
+  hasTranslatableBlockFields,
+  isPrivateField,
   isTranslatableMediaField,
+  localizeBlocks,
   mediaPublicUrl,
   mediaTypeFor,
   pickTranslatedMedia,
@@ -103,6 +106,10 @@ function localizeRow(entry, row, locale) {
     const value = row[key];
     result[key] = value?.[locale] ?? value?.[defaultLocale] ?? null;
   }
+  for (const [key, field] of Object.entries(entry.fields)) {
+    if (isPrivateField(field) || !hasTranslatableBlockFields(field)) continue;
+    result[key] = localizeBlocks(field, result[key], locale, defaultLocale);
+  }
   return result;
 }
 const OPERATORS = {
@@ -257,6 +264,7 @@ function mediaObject(key, row) {
 function entryResolvers(config, name, entry) {
   const resolvers = {};
   for (const [key, field] of Object.entries(entry.fields)) {
+    if (isPrivateField(field)) continue;
     if (field.type === "relation" && field.cardinality === "many-to-many") {
       resolvers[key] = async (parent, _args, ctx) => {
         const rows = await loadManyToMany(ctx, name, key, field).load(parent.id);
@@ -301,7 +309,8 @@ export function buildCmsSchema() {
     const fieldLevel = entryResolvers(config, name, entry);
     if (Object.keys(fieldLevel).length) typeResolvers[gqlType] = fieldLevel;
     for (const [key, field] of Object.entries(entry.fields)) {
-      if (field.type === "blocks") Object.assign(typeResolvers, blockResolvers(name, key, field));
+      if (field.type === "blocks" && !isPrivateField(field))
+        Object.assign(typeResolvers, blockResolvers(name, key, field));
     }
     if (entry.kind === "single") {
       queryResolvers[name] = async (_, args) => {

package/dist/runtime/shared/graphql-sdl.js

@@ -1,4 +1,4 @@
-import { isTranslatableField } from "./index.js";
+import { isPrivateField, isTranslatableField } from "./index.js";
 export function typeName(name) {
   return name.replace(/(?:^|_)([a-z0-9])/gi, (_, c) => c.toUpperCase());
 }
@@ -21,7 +21,7 @@ function scalarFor(field) {
   }
 }
 function filterScalarFor(field) {
-  if (isTranslatableField(field)) return null;
+  if (isPrivateField(field) || isTranslatableField(field)) return null;
   switch (field.type) {
     case "json":
       return null;
@@ -64,6 +64,7 @@ function fieldSdl(config, entryName, key, field) {
 function entrySdl(config, name, entry) {
   const lines = ["  id: ID!"];
   for (const [key, field] of Object.entries(entry.fields)) {
+    if (isPrivateField(field)) continue;
     lines.push(fieldSdl(config, name, key, field));
   }
   if (entry.kind === "collection") lines.push("  createdAt: String!");
@@ -127,7 +128,8 @@ export function renderGraphqlSdl(config) {
     const gqlType = typeName(name);
     types.push(entrySdl(config, name, entry));
     for (const [key, field] of Object.entries(entry.fields)) {
-      if (field.type === "blocks") types.push(...blocksSdl(name, key, field));
+      if (field.type === "blocks" && !isPrivateField(field))
+        types.push(...blocksSdl(name, key, field));
     }
     if (entry.kind === "single") {
       queryLines.push(`  ${name}(locale: String): ${gqlType}`);

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

@@ -46,6 +46,7 @@ export interface FieldConfig {
     label: string;
     type: FieldType;
     required?: boolean;
+    private?: boolean;
     textarea?: boolean;
     integer?: boolean;
     translatable?: boolean;
@@ -59,9 +60,11 @@ export interface FieldConfig {
     cardinality?: 'many-to-one' | 'one-to-one' | 'many-to-many';
     onDelete?: 'set null' | 'cascade' | 'restrict';
 }
+export declare function isPrivateField(field: FieldConfig): boolean;
 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 decodeTranslatableValue(value: unknown, defaultLocale: string): Record<string, string> | null;
+export declare const decodeTranslatableMedia: typeof decodeTranslatableValue;
 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[];
@@ -69,6 +72,10 @@ export declare function encodeEntryTranslatableMedia(entry: Pick<CmsEntry, 'fiel
 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 declare function translatableBlockFieldKeys(block: BlockConfig): string[];
+export declare function hasTranslatableBlockFields(field: FieldConfig): boolean;
+export declare function localizeBlock(field: FieldConfig, item: unknown, locale: string, defaultLocale: string): unknown;
+export declare function localizeBlocks(field: FieldConfig, value: unknown, locale: string, defaultLocale: string): unknown;
 export interface CmsEntry {
     id: string;
     label: string;
@@ -82,6 +89,7 @@ export type CmsConfig = Record<string, CmsEntry>;
 interface FieldInputBase {
     label: string;
     required?: boolean;
+    private?: boolean;
 }
 export interface TextFieldInput extends FieldInputBase {
     type: 'text';
@@ -129,7 +137,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 | Omit<MediaFieldInput, 'translatable'>;
+export type BlockFieldInput = Omit<TextFieldInput, 'private'> | Omit<RichtextFieldInput, 'private'> | Omit<NumberFieldInput, 'private'> | Omit<BooleanFieldInput, 'private'> | Omit<DateFieldInput, 'private'> | Omit<EmailFieldInput, 'private'> | Omit<SelectFieldInput, 'private'> | Omit<JsonFieldInput, 'private'> | Omit<MediaFieldInput, 'private'>;
 export interface BlockInput {
     label: string;
     fields: Record<string, BlockFieldInput>;

package/dist/runtime/shared/index.js

@@ -61,6 +61,9 @@ export function normalizeMediaFolder(value) {
   const segments = value.split("/").map(slugify).filter(Boolean).slice(0, MEDIA_FOLDER_MAX_DEPTH);
   return segments.length ? segments.join("/") : null;
 }
+export function isPrivateField(field) {
+  return !!field.private;
+}
 export function isTranslatableField(field) {
   return !!field.translatable && (field.type === "text" || field.type === "richtext" || field.type === "media");
 }
@@ -78,13 +81,14 @@ function parseJsonObject(raw) {
   }
   return null;
 }
-export function decodeTranslatableMedia(value, defaultLocale) {
+export function decodeTranslatableValue(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 const decodeTranslatableMedia = decodeTranslatableValue;
 export function encodeTranslatableMedia(value) {
   if (value == null) return null;
   if (typeof value === "string") return value.trim() || null;
@@ -128,6 +132,32 @@ export function isMultiSelect(field) {
 export function translatableFieldKeys(entry) {
   return Object.entries(entry.fields).filter(([, field]) => isTranslatableField(field)).map(([key]) => key);
 }
+export function translatableBlockFieldKeys(block) {
+  return Object.entries(block.fields).filter(([, field]) => isTranslatableField(field)).map(([key]) => key);
+}
+export function hasTranslatableBlockFields(field) {
+  if (field.type !== "blocks") return false;
+  return Object.values(field.blocks ?? {}).some(
+    (block) => Object.values(block.fields).some(isTranslatableField)
+  );
+}
+export function localizeBlock(field, item, locale, defaultLocale) {
+  if (!item || typeof item !== "object") return item;
+  const block = field.blocks?.[String(item.type)];
+  if (!block) return item;
+  const keys = translatableBlockFieldKeys(block);
+  if (!keys.length) return item;
+  const localized = { ...item };
+  for (const key of keys) {
+    const values = decodeTranslatableValue(localized[key], defaultLocale);
+    localized[key] = isTranslatableMediaField(block.fields[key]) ? pickTranslatedMedia(values, locale, defaultLocale) : values?.[locale] ?? values?.[defaultLocale] ?? null;
+  }
+  return localized;
+}
+export function localizeBlocks(field, value, locale, defaultLocale) {
+  if (!Array.isArray(value)) return value;
+  return value.map((item) => localizeBlock(field, item, locale, defaultLocale));
+}
 export function defineCmsConfig(config) {
   return config;
 }

package/dist/runtime/shared/validation.js

@@ -34,14 +34,24 @@ function scalarSchema(field, m) {
 function optionalize(field, base) {
   return field.required ? base : base.nullish().transform((v) => v ?? null);
 }
-function blocksSchema(field, m) {
+function translatableSchema(field, i18n, m) {
+  const { locales, defaultLocale } = i18n;
+  const record = z.record(z.string(), field.type === "media" ? objectKeySchema : z.string()).refine((v) => Object.keys(v).every((k) => locales.includes(k)), m.unknownLocale);
+  return field.required ? record.refine((v) => !!v[defaultLocale]?.trim(), m.requiredLocale(defaultLocale)) : record.nullish().transform((v) => v ?? null);
+}
+function blockFieldSchema(blockField, i18n, m) {
+  if (isTranslatableField(blockField) && i18n.locales.length)
+    return translatableSchema(blockField, i18n, m);
+  return optionalize(blockField, scalarSchema(blockField, m));
+}
+function blocksSchema(field, i18n, m) {
   const variants = Object.entries(field.blocks ?? {}).map(
     ([type, block]) => z.object({
       type: z.literal(type),
       ...Object.fromEntries(
         Object.entries(block.fields).map(([key, blockField]) => [
           key,
-          optionalize(blockField, scalarSchema(blockField, m))
+          blockFieldSchema(blockField, i18n, m)
         ])
       )
     })
@@ -50,7 +60,6 @@ function blocksSchema(field, m) {
 }
 export function buildEntrySchema(entry, i18n, messages) {
   const m = { ...DEFAULT_MESSAGES, ...messages };
-  const { locales, defaultLocale } = i18n;
   const shape = {};
   for (const [key, field] of Object.entries(entry.fields)) {
     if (field.type === "relation" && field.cardinality === "many-to-many") {
@@ -64,13 +73,12 @@ export function buildEntrySchema(entry, i18n, messages) {
       continue;
     }
     if (field.type === "blocks") {
-      const list = blocksSchema(field, m);
+      const list = blocksSchema(field, i18n, m);
       shape[key] = field.required ? list.min(1, m.required) : list.nullish().transform((v) => v ?? null);
       continue;
     }
-    if (isTranslatableField(field) && locales.length) {
-      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);
+    if (isTranslatableField(field) && i18n.locales.length) {
+      shape[key] = translatableSchema(field, i18n, m);
       continue;
     }
     if (field.type === "json") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xleddyl/nuxt-cms",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "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)",