@xleddyl/nuxt-cms 0.1.32 → 0.1.34

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@xleddyl/nuxt-cms",
   "configKey": "cms",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "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, isPrivateField, DEFAULT_MEDIA_MAX_FILE_SIZE } from '../dist/runtime/shared/index.js';
+import { isMultiSelect, fieldConditions, 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,8 @@ 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 CONDITION_FIELD_TYPES = ["select", "boolean", "text", "number", "date", "email", "slug"];
 const RESERVED_TYPE_NAMES = [
   "Query",
   "Mutation",
@@ -124,7 +126,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`
           );
@@ -137,6 +139,48 @@ function validateConfig(config, i18n) {
         else if (new Set(field.options).size !== field.options.length)
           errors.push(`${fat}: select options must be unique`);
       }
+      if (field.showIf) {
+        if (entry.titleField === key)
+          errors.push(`${fat}: the titleField cannot be conditional`);
+        for (const condition of fieldConditions(field)) {
+          const cat = `${fat}, showIf on '${condition.field}'`;
+          const target = entry.fields?.[condition.field];
+          if (!condition.field || !target) {
+            errors.push(`${cat}: '${condition.field}' is not a declared field`);
+            continue;
+          }
+          if (condition.field === key) {
+            errors.push(`${cat}: a field cannot depend on itself`);
+            continue;
+          }
+          if (!CONDITION_FIELD_TYPES.includes(target.type) || isMultiSelect(target)) {
+            errors.push(
+              `${cat}: showIf can only depend on ${CONDITION_FIELD_TYPES.join(
+                ", "
+              )} fields (got '${target.type}')`
+            );
+            continue;
+          }
+          if (isTranslatableField(target)) {
+            errors.push(`${cat}: showIf cannot depend on a translatable field`);
+            continue;
+          }
+          const values = condition.in ?? (condition.eq === void 0 ? null : [condition.eq]);
+          if (!values || !values.length) {
+            errors.push(`${cat}: showIf requires 'eq' or a non-empty 'in'`);
+            continue;
+          }
+          if (condition.in && condition.eq !== void 0)
+            errors.push(`${cat}: showIf accepts either 'eq' or 'in', not both`);
+          if (target.type === "select") {
+            const unknown = values.filter((value) => !target.options?.includes(String(value)));
+            if (unknown.length)
+              errors.push(
+                `${cat}: ${unknown.map((value) => `'${String(value)}'`).join(", ")} not in the options of '${condition.field}'`
+              );
+          }
+        }
+      }
       if (field.type === "slug" && field.from) {
         const source = entry.fields?.[field.from];
         if (!source) errors.push(`${fat}: slug source '${field.from}' is not a declared field`);
@@ -167,10 +211,20 @@ 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.showIf)
+              errors.push(`${bfat}: showIf is not supported inside blocks`);
             if (blockField.type === "select" && !blockField.options?.length) {
               errors.push(`${bfat}: select requires a non-empty options array`);
             }

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

@@ -7,16 +7,18 @@
       @error="emit('error')"
    >
       <CmsFormField
-         v-for="(field, key) in fields"
+         v-for="(field, key) in visibleFields"
          :key="key"
          :label="field.label"
          :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, isFieldVisible, isTranslatableField } from "#nuxt-cms";
 import { computed, ref } from "#imports";
 import { buildEntrySchema } from "../../../shared/validation";
 import { useCmsRuntime } from "../../composables/cms-runtime";
@@ -56,6 +58,14 @@ const state = defineModel({ type: Object, ...{ required: true } });
 const emit = defineEmits(["submit", "error"]);
 const { i18n } = useCmsRuntime();
 const activeLocale = ref({});
+const visibleFields = computed(
+  () => Object.fromEntries(
+    Object.entries(props.fields).filter(([, field]) => isFieldVisible(field, state.value))
+  )
+);
+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

@@ -42,6 +42,12 @@ export interface BlockConfig {
     label: string;
     fields: Record<string, FieldConfig>;
 }
+export type ConditionValue = string | number | boolean;
+export interface FieldCondition {
+    field: string;
+    eq?: ConditionValue;
+    in?: ConditionValue[];
+}
 export interface FieldConfig {
     label: string;
     type: FieldType;
@@ -59,11 +65,15 @@ export interface FieldConfig {
     to?: string;
     cardinality?: 'many-to-one' | 'one-to-one' | 'many-to-many';
     onDelete?: 'set null' | 'cascade' | 'restrict';
+    showIf?: FieldCondition | FieldCondition[];
 }
 export declare function isPrivateField(field: FieldConfig): boolean;
+export declare function fieldConditions(field: FieldConfig): FieldCondition[];
+export declare function isFieldVisible(field: FieldConfig, values: Record<string, unknown> | null | undefined): 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 +81,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;
@@ -85,6 +99,7 @@ interface FieldInputBase {
     label: string;
     required?: boolean;
     private?: boolean;
+    showIf?: FieldCondition | FieldCondition[];
 }
 export interface TextFieldInput extends FieldInputBase {
     type: 'text';
@@ -132,7 +147,8 @@ 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'>;
+type BlockField<T> = Omit<T, 'private' | 'showIf'>;
+export type BlockFieldInput = BlockField<TextFieldInput> | BlockField<RichtextFieldInput> | BlockField<NumberFieldInput> | BlockField<BooleanFieldInput> | BlockField<DateFieldInput> | BlockField<EmailFieldInput> | BlockField<SelectFieldInput> | BlockField<JsonFieldInput> | BlockField<MediaFieldInput>;
 export interface BlockInput {
     label: string;
     fields: Record<string, BlockFieldInput>;

package/dist/runtime/shared/index.js

@@ -64,6 +64,19 @@ export function normalizeMediaFolder(value) {
 export function isPrivateField(field) {
   return !!field.private;
 }
+export function fieldConditions(field) {
+  if (!field.showIf) return [];
+  return Array.isArray(field.showIf) ? field.showIf : [field.showIf];
+}
+function matchesCondition(condition, value) {
+  if (condition.in) return condition.in.some((option) => option === value);
+  return condition.eq === value;
+}
+export function isFieldVisible(field, values) {
+  const conditions = fieldConditions(field);
+  if (!conditions.length) return true;
+  return conditions.every((condition) => matchesCondition(condition, values?.[condition.field]));
+}
 export function isTranslatableField(field) {
   return !!field.translatable && (field.type === "text" || field.type === "richtext" || field.type === "media");
 }
@@ -81,13 +94,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 +145,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

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { isTranslatableField } from "./index.js";
+import { isFieldVisible, isTranslatableField } from "./index.js";
 export const objectKeySchema = z.string().min(1).max(1024).refine((k) => !k.includes("..") && !k.startsWith("/"), "Invalid object key");
 const DEFAULT_MESSAGES = {
   required: "Required field",
@@ -34,25 +34,47 @@ 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)
         ])
       )
     })
   );
   return z.array(z.discriminatedUnion("type", variants));
 }
+function isEmptyValue(field, value, defaultLocale) {
+  if (value == null) return true;
+  if (Array.isArray(value)) return !value.length;
+  if (isTranslatableField(field)) {
+    const values = value;
+    return !values[defaultLocale]?.trim();
+  }
+  if (typeof value === "string") return !value.trim();
+  return false;
+}
 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)) {
+  const conditional = [];
+  for (const [key, declared] of Object.entries(entry.fields)) {
+    const field = declared.showIf ? { ...declared, required: false } : declared;
+    if (declared.showIf && declared.required) conditional.push([key, declared]);
     if (field.type === "relation" && field.cardinality === "many-to-many") {
       const list = z.array(z.string().min(1));
       shape[key] = field.required ? list.min(1, m.required) : list.nullish().transform((v) => v ?? []);
@@ -64,13 +86,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") {
@@ -83,5 +104,14 @@ export function buildEntrySchema(entry, i18n, messages) {
   if (entry.drafts) {
     shape.status = z.enum(["draft", "published"]).nullish().transform((v) => v ?? void 0);
   }
-  return z.object(shape);
+  const schema = z.object(shape);
+  if (!conditional.length) return schema;
+  return schema.superRefine((values, ctx) => {
+    for (const [key, field] of conditional) {
+      if (!isFieldVisible(field, values)) continue;
+      if (!isEmptyValue(field, values[key], i18n.defaultLocale))
+        continue;
+      ctx.addIssue({ code: "custom", path: [key], message: m.required });
+    }
+  });
 }

package/package.json

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