@xleddyl/nuxt-cms 0.1.33 → 0.1.35

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@xleddyl/nuxt-cms",
   "configKey": "cms",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "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, isRequiredField, 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) {
@@ -45,6 +45,7 @@ const RESERVED_ENTRY_KEYS = ["admin", "auth", "login", "media", "graphql", "cms_
 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",
@@ -138,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`);
@@ -180,6 +223,8 @@ function validateConfig(config, i18n) {
             }
             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`);
             }
@@ -249,7 +294,7 @@ function columnExpr(key, field, dialect) {
   let expr;
   if (isTranslatableField(field)) {
     expr = isTranslatableMediaField(field) ? `text('${col}')` : jsonExpr(col, dialect);
-    if (field.required) expr += ".notNull()";
+    if (isRequiredField(field)) expr += ".notNull()";
     return `  ${key}: ${expr},`;
   }
   switch (field.type) {
@@ -281,7 +326,7 @@ function columnExpr(key, field, dialect) {
     default:
       expr = `text('${col}')`;
   }
-  if (field.required) expr += ".notNull()";
+  if (isRequiredField(field)) expr += ".notNull()";
   return `  ${key}: ${expr},`;
 }
 function isManyToMany(field) {
@@ -386,7 +431,7 @@ function fieldTsType(config, entryName, key, field) {
   if (field.type === "relation") {
     const target = typeName(field.to);
     if (field.cardinality === "many-to-many") return `${target}[]`;
-    return field.required && !config[field.to]?.drafts ? target : `${target} | null`;
+    return isRequiredField(field) && !config[field.to]?.drafts ? target : `${target} | null`;
   }
   if (field.type === "media") return "CmsMedia | null";
   if (field.type === "select" && field.multiple) {
@@ -395,11 +440,11 @@ function fieldTsType(config, entryName, key, field) {
   }
   if (field.type === "blocks") {
     const union = blockUnionName(entryName, key);
-    return field.required ? `${union}[]` : `${union}[] | null`;
+    return isRequiredField(field) ? `${union}[]` : `${union}[] | null`;
   }
-  if (isTranslatableField(field)) return field.required ? "string" : "string | null";
+  if (isTranslatableField(field)) return isRequiredField(field) ? "string" : "string | null";
   const base = scalarTsType(field);
-  return field.required ? base : `${base} | null`;
+  return isRequiredField(field) ? base : `${base} | null`;
 }
 function blockTypesTs(entryName, key, field) {
   const defs = [];

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

@@ -7,7 +7,7 @@
       @error="emit('error')"
    >
       <CmsFormField
-         v-for="(field, key) in fields"
+         v-for="(field, key) in visibleFields"
          :key="key"
          :label="field.label"
          :name="key"
@@ -43,7 +43,7 @@
 </template>
 
 <script setup>
-import { hasTranslatableBlockFields, 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";
@@ -58,6 +58,11 @@ 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);
 }

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

@@ -1,4 +1,4 @@
-import { isPrivateField, isTranslatableField } from "./index.js";
+import { isPrivateField, isRequiredField, isTranslatableField } from "./index.js";
 export function typeName(name) {
   return name.replace(/(?:^|_)([a-z0-9])/gi, (_, c) => c.toUpperCase());
 }
@@ -52,14 +52,14 @@ function fieldSdl(config, entryName, key, field) {
   if (field.type === "relation") {
     const target = typeName(field.to);
     if (field.cardinality === "many-to-many") return `  ${key}: [${target}!]!`;
-    const nonNull = field.required && !config[field.to]?.drafts;
+    const nonNull = isRequiredField(field) && !config[field.to]?.drafts;
     return `  ${key}: ${target}${nonNull ? "!" : ""}`;
   }
   if (field.type === "media") return `  ${key}: CmsMedia`;
   if (field.type === "select" && field.multiple) return `  ${key}: [String!]!`;
   if (field.type === "blocks")
-    return `  ${key}: [${blockUnionName(entryName, key)}!]${field.required ? "!" : ""}`;
-  return `  ${key}: ${scalarFor(field)}${field.required ? "!" : ""}`;
+    return `  ${key}: [${blockUnionName(entryName, key)}!]${isRequiredField(field) ? "!" : ""}`;
+  return `  ${key}: ${scalarFor(field)}${isRequiredField(field) ? "!" : ""}`;
 }
 function entrySdl(config, name, entry) {
   const lines = ["  id: ID!"];

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,8 +65,12 @@ 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 isRequiredField(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 decodeTranslatableValue(value: unknown, defaultLocale: string): Record<string, string> | null;
@@ -90,6 +100,7 @@ interface FieldInputBase {
     label: string;
     required?: boolean;
     private?: boolean;
+    showIf?: FieldCondition | FieldCondition[];
 }
 export interface TextFieldInput extends FieldInputBase {
     type: 'text';
@@ -137,7 +148,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, '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'>;
+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,22 @@ export function normalizeMediaFolder(value) {
 export function isPrivateField(field) {
   return !!field.private;
 }
+export function isRequiredField(field) {
+  return !!field.required && !field.showIf;
+}
+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");
 }

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",
@@ -58,10 +58,23 @@ function blocksSchema(field, 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 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 ?? []);
@@ -91,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.33",
+  "version": "0.1.35",
   "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)",