@teamnovu/nuxt-statamic-formbuilder 1.4.2 → 1.4.3

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/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.2",
+  "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"
   }
 }