@xleddyl/nuxt-cms 0.1.32 → 0.1.33

package/dist/module.json

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

package/dist/module.mjs

@@ -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,16 @@ 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) {

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,8 +21,10 @@ import * as cmsTables from "#cms-tables";
 import { useRuntimeConfig } from "#imports";
 import {
   decodeTranslatableMedia,
+  hasTranslatableBlockFields,
   isPrivateField,
   isTranslatableMediaField,
+  localizeBlocks,
   mediaPublicUrl,
   mediaTypeFor,
   pickTranslatedMedia,
@@ -104,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 = {

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

@@ -63,7 +63,8 @@ export interface FieldConfig {
 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[];
@@ -71,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;
@@ -132,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' | 'private'> | Omit<RichtextFieldInput, 'translatable' | 'private'> | Omit<NumberFieldInput, 'private'> | Omit<BooleanFieldInput, 'private'> | Omit<DateFieldInput, 'private'> | Omit<EmailFieldInput, 'private'> | Omit<SelectFieldInput, 'private'> | Omit<JsonFieldInput, 'private'> | Omit<MediaFieldInput, 'translatable' | 'private'>;
+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

@@ -81,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;
@@ -131,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.32",
+  "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)",