@teamnovu/nuxt-statamic-formbuilder 1.4.1 → 1.4.3

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "1.4.1",
+  "version": "1.4.2",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/runtime/app/components/StatamicFormBuilderFields.vue

@@ -36,6 +36,7 @@
 <script setup>
 import { inject, ref } from "vue";
 import { formBuilderStateKey } from "../../injectionKeys";
+import { fieldHasRequiredRule } from "../../utils/fieldHasRequiredRule";
 import { useFieldConditions } from "../composables/useFieldConditions";
 import { resolveFormField } from "../composables/useFormFieldRegistry";
 const props = defineProps({
@@ -59,7 +60,10 @@ const slotBindings = (field) => ({
     id: field.handle,
     ariaLabel: field.display ?? field.handle,
     rules: {
-      required: props.form?.rules?.[field.handle]?.includes("required")
+      required: isVisible(field) && fieldHasRequiredRule(
+        props.form?.rules?.[field.handle],
+        state.value
+      )
     }
   },
   error: props.validationErrors?.[field.handle] ?? props.error?.[field.handle] ?? null

package/dist/runtime/app/composables/useFieldConditions.js

@@ -105,6 +105,32 @@ function resolveField(field, formValues) {
   }
   return dataGet(formValues, field);
 }
+function normalizeScalar(value) {
+  if (typeof value !== "string") return value;
+  const trimmed = value.trim();
+  return trimmed === "" ? null : trimmed;
+}
+function compareScalarAgainstArray(lhs, rhs, op) {
+  const rhsValue = normalizeScalar(rhs);
+  const comparePair = (left, right) => {
+    switch (op) {
+      // eslint-disable-next-line eqeqeq
+      case "==":
+        return normalizeScalar(left) == right;
+      // eslint-disable-next-line eqeqeq
+      case "!=":
+        return normalizeScalar(left) != right;
+      case "===":
+        return normalizeScalar(left) === right;
+      case "!==":
+        return normalizeScalar(left) !== right;
+    }
+  };
+  if (op === "==" || op === "===") {
+    return lhs.some((value) => comparePair(value, rhsValue));
+  }
+  return lhs.every((value) => comparePair(value, rhsValue));
+}
 function testCondition(condition, formValues) {
   const op = normalizeOperator(condition.operator);
   const rawLhs = resolveField(condition.field, formValues);
@@ -164,13 +190,20 @@ function testCondition(condition, formValues) {
         return lhsNum <= rhsNum;
     }
   }
-  if (rawLhs !== null && typeof rawLhs === "object") return false;
-  let lhs = rawLhs;
-  if (typeof lhs === "string") {
-    const trimmed = lhs.trim();
-    lhs = trimmed === "" ? null : trimmed;
+  if (Array.isArray(rawLhs)) {
+    switch (op) {
+      case "==":
+      case "!=":
+      case "===":
+      case "!==":
+        return compareScalarAgainstArray(rawLhs, rhs, op);
+      default:
+        return false;
+    }
   }
-  if (typeof rhs === "string") rhs = rhs.trim();
+  if (rawLhs !== null && typeof rawLhs === "object") return false;
+  const lhs = normalizeScalar(rawLhs);
+  rhs = normalizeScalar(rhs);
   switch (op) {
     // Loose equality intentional — mirrors the original eval() behaviour,
     // e.g. null == "null" should be false but null == null should be true.

package/dist/runtime/app/composables/useFormValidation.d.ts

@@ -1,7 +1,7 @@
 import * as v from 'valibot';
 import type { MaybeRefOrGetter, Ref } from 'vue';
 import type { FormBuilderConfiguration, FormBuilderField, InputRules } from '../../types.js';
-export declare function useFormValidation(fieldsInput: MaybeRefOrGetter<readonly FormBuilderField[]>, formRules: FormBuilderConfiguration['rules'], _state?: Ref<Record<string, unknown>>): {
+export declare function useFormValidation(fieldsInput: MaybeRefOrGetter<readonly FormBuilderField[]>, formRules: FormBuilderConfiguration['rules'], stateInput?: Ref<Record<string, unknown>>): {
     schema: import("vue").ComputedRef<v.ObjectSchema<Record<string, v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>>, undefined>>;
     validationErrors: Ref<Record<string, string>, Record<string, string>>;
     parseRules: (rulesInput?: string | string[]) => InputRules;

package/dist/runtime/app/composables/useFormValidation.js

@@ -2,10 +2,17 @@ import * as v from "valibot";
 import { useI18n } from "vue-i18n";
 import { computed, ref, toValue } from "vue";
 import { isDisplayOrSpacerField } from "../../types.js";
-export function useFormValidation(fieldsInput, formRules, _state) {
+import { fieldHasRequiredRule } from "../../utils/fieldHasRequiredRule.js";
+import { useFieldConditions } from "./useFieldConditions.js";
+export function useFormValidation(fieldsInput, formRules, stateInput) {
   const { t } = useI18n();
   const fields = computed(() => toValue(fieldsInput) ?? []);
   const validationErrors = ref({});
+  const formState = computed(() => toValue(stateInput) ?? {});
+  const { visibilityMap } = useFieldConditions(
+    () => [...fields.value],
+    formState
+  );
   const parseRules = (rulesInput) => {
     if (!rulesInput) {
       return {};
@@ -63,7 +70,7 @@ export function useFormValidation(fieldsInput, formRules, _state) {
   const buildFieldSchema = (field) => {
     const rules = getRulesForField(field);
     const normalizedType = normalizeFieldType(field, rules);
-    const isRequired = rules.required === true || rules.accepted === true;
+    const isRequired = rules.required === true || rules.accepted === true || fieldHasRequiredRule(formRules?.[field.handle], formState.value);
     const buildStringSchema = () => {
       let stringSchema2 = v.union([
         v.pipe(v.string()),
@@ -154,6 +161,9 @@ export function useFormValidation(fieldsInput, formRules, _state) {
       if (isDisplayOrSpacerField(field)) {
         return;
       }
+      if (stateInput && !visibilityMap.value[field.handle]) {
+        return;
+      }
       schemaEntries[field.handle] = buildFieldSchema(field);
     });
     return v.object(schemaEntries);

package/dist/runtime/types.d.ts

@@ -97,7 +97,7 @@ export type FormBuilderConfiguration = {
     title?: string | null;
     honeypot: string | null;
     rules: {
-        [key: string]: string;
+        [key: string]: string | string[];
     };
 } & ({
     sections: Array<{

package/dist/runtime/utils/fieldHasRequiredRule.d.ts

@@ -0,0 +1 @@
+export declare function fieldHasRequiredRule(rules?: string | string[], state?: Record<string, unknown>): boolean;

package/dist/runtime/utils/fieldHasRequiredRule.js

@@ -0,0 +1,23 @@
+export function fieldHasRequiredRule(rules, state = {}) {
+  if (!rules) {
+    return false;
+  }
+  const ruleList = Array.isArray(rules) ? rules : rules.split("|");
+  return ruleList.some((rule) => {
+    if (rule === "required") {
+      return true;
+    }
+    if (!rule.startsWith("required_if:")) {
+      return false;
+    }
+    const [field, ...values] = rule.slice("required_if:".length).split(",");
+    if (!field || values.length === 0) {
+      return false;
+    }
+    const fieldValue = state[field];
+    if (Array.isArray(fieldValue)) {
+      return fieldValue.some((value) => values.includes(String(value)));
+    }
+    return values.includes(String(fieldValue ?? ""));
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnovu/nuxt-statamic-formbuilder",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "Headless Nuxt form builder with Statamic submit adapter",
   "license": "MIT",
   "homepage": "https://github.com/teamnovu/nuxt-statamic-formbuilder#readme",
@@ -80,12 +80,15 @@
     "eslint": "^10.0.2",
     "nuxt": "^4.3.1",
     "typescript": "^5.9.3",
+    "vitest": "^5.0.1",
     "vue": "^3.5.13",
     "vue-i18n": "^11.4.6",
     "vue-tsc": "^3.3.7"
   },
   "scripts": {
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
 }