@sfxcode/nuxt-ui-formkit 1.2.2 → 1.2.3

package/README.md

@@ -61,6 +61,9 @@ FormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerf
 - `FUDataDebug` - Development tool for form debugging
 - `FUAutoForm` - Schema-free forms: inputs inferred from your data's value shapes, or a Valibot/Zod schema, with an override map for fine-tuning
 
+🛡️ **Standard Schema Validation** - Validate against Zod/Valibot/ArkType instead of hand-written validation strings
+- `FUDataEdit`'s `standardSchema` prop, or `useFormKitForm`'s `standardSchema` option - errors land on the exact field (including inside a repeater row), respecting each field's own validation-visibility timing
+
 ⚙️ **Config Helper** - One-line `formkit.config.ts` setup
 - `createNuxtUiFormkitConfig` - Assembles all `nuxtUIXxx` inputs/outputs and this module's plugins into `{ inputs, plugins }` you spread into your own config
 
@@ -339,6 +342,9 @@ The playground includes comprehensive examples for all components:
 ### Form Composable
 - [useFormKitForm](./playground/app/pages/form/form-composable.vue)
 
+### Standard Schema Validation
+- [Standard Schema Validation](./playground/app/pages/form/standard-schema.vue)
+
 ## Development
 
 <details>

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "1.2.2",
+  "version": "1.2.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/FUDataEdit.d.vue.ts

@@ -1,4 +1,5 @@
 import type { FormKitSchemaDefinition } from '@formkit/core';
+import type { StandardSchemaV1 } from '@standard-schema/spec';
 import type { PropType } from 'vue';
 declare var __VLS_15: {}, __VLS_18: {}, __VLS_26: {};
 type __VLS_Slots = {} & {
@@ -21,6 +22,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<FormKitSchemaDefinition>;
         default: null;
     };
+    standardSchema: {
+        type: PropType<StandardSchemaV1>;
+        default: null;
+    };
     formClass: {
         type: StringConstructor;
         default: string;
@@ -91,6 +96,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<FormKitSchemaDefinition>;
         default: null;
     };
+    standardSchema: {
+        type: PropType<StandardSchemaV1>;
+        default: null;
+    };
     formClass: {
         type: StringConstructor;
         default: string;
@@ -152,6 +161,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     schema: FormKitSchemaDefinition;
     data: Record<string, any>;
     id: string;
+    standardSchema: StandardSchemaV1<unknown, unknown>;
     formClass: string;
     actionsClass: string;
     submitSeverity: string;

package/dist/runtime/components/FUDataEdit.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { reset } from "@formkit/core";
-import { FormKit, FormKitMessages, FormKitSchema } from "@formkit/vue";
-import { ref, watch } from "vue";
+import { FormKit, FormKitMessages, FormKitSchema, useFormKitContextById } from "@formkit/vue";
+import { onScopeDispose, ref, watch } from "vue";
+import { attachStandardSchema } from "../composables/useFormKitStandardSchema";
 import FUDataDebug from "./FUDataDebug.vue";
 const props = defineProps({
   id: {
@@ -16,6 +17,10 @@ const props = defineProps({
     type: Object,
     default: null
   },
+  standardSchema: {
+    type: Object,
+    default: null
+  },
   formClass: {
     type: String,
     default: ""
@@ -70,6 +75,12 @@ const props = defineProps({
   }
 });
 const emit = defineEmits(["dataSaved", "onReset"]);
+let detachStandardSchema;
+useFormKitContextById(props.id, (context) => {
+  if (props.standardSchema)
+    detachStandardSchema = attachStandardSchema(context.node, props.standardSchema);
+});
+onScopeDispose(() => detachStandardSchema?.());
 const formSchema = ref(props.schema);
 const formData = defineModel({ type: [Object, String, Array] });
 watch(() => props.schema, (newSchema) => {

package/dist/runtime/components/FUDataEdit.vue.d.ts

@@ -1,4 +1,5 @@
 import type { FormKitSchemaDefinition } from '@formkit/core';
+import type { StandardSchemaV1 } from '@standard-schema/spec';
 import type { PropType } from 'vue';
 declare var __VLS_15: {}, __VLS_18: {}, __VLS_26: {};
 type __VLS_Slots = {} & {
@@ -21,6 +22,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<FormKitSchemaDefinition>;
         default: null;
     };
+    standardSchema: {
+        type: PropType<StandardSchemaV1>;
+        default: null;
+    };
     formClass: {
         type: StringConstructor;
         default: string;
@@ -91,6 +96,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<FormKitSchemaDefinition>;
         default: null;
     };
+    standardSchema: {
+        type: PropType<StandardSchemaV1>;
+        default: null;
+    };
     formClass: {
         type: StringConstructor;
         default: string;
@@ -152,6 +161,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     schema: FormKitSchemaDefinition;
     data: Record<string, any>;
     id: string;
+    standardSchema: StandardSchemaV1<unknown, unknown>;
     formClass: string;
     actionsClass: string;
     submitSeverity: string;

package/dist/runtime/composables/useFormKitForm.d.ts

@@ -1,5 +1,9 @@
 import type { ErrorMessages } from '@formkit/core';
-export declare function useFormKitForm(id: string): {
+import type { StandardSchemaV1 } from '@standard-schema/spec';
+export interface UseFormKitFormOptions {
+    standardSchema?: StandardSchemaV1;
+}
+export declare function useFormKitForm(id: string, options?: UseFormKitFormOptions): {
     submit: (handler?: () => unknown | Promise<unknown>) => void;
     reset: (resetTo?: unknown) => void;
     setErrors: (localErrors: ErrorMessages, childErrors?: ErrorMessages) => void;

package/dist/runtime/composables/useFormKitForm.js

@@ -1,8 +1,14 @@
 import { clearErrors, reset, setErrors, submitForm } from "@formkit/core";
 import { useFormKitContextById } from "@formkit/vue";
-import { computed, ref } from "vue";
-export function useFormKitForm(id) {
-  const context = useFormKitContextById(id);
+import { computed, onScopeDispose, ref } from "vue";
+import { attachStandardSchema } from "./useFormKitStandardSchema.js";
+export function useFormKitForm(id, options) {
+  let detachStandardSchema;
+  const context = useFormKitContextById(id, (formContext) => {
+    if (options?.standardSchema)
+      detachStandardSchema = attachStandardSchema(formContext.node, options.standardSchema);
+  });
+  onScopeDispose(() => detachStandardSchema?.());
   const isLoading = ref(false);
   const isValid = computed(() => context.value?.state.valid ?? false);
   const isSubmitted = computed(() => context.value?.state.submitted ?? false);

package/dist/runtime/composables/useFormKitStandardSchema.d.ts

@@ -0,0 +1,20 @@
+import type { FormKitNode } from '@formkit/core';
+import type { StandardSchemaV1 } from '@standard-schema/spec';
+/**
+ * Runs `schema` against `node`'s live value and applies the resulting issues
+ * as `type: 'validation'` messages - to `node` itself for root-level issues,
+ * and to the addressed descendant (`resolveAddress(node, address)`) for
+ * every `childErrors` entry - so they respect each target's own
+ * `validationVisibility` timing exactly like FormKit's native rule-derived
+ * errors, instead of appearing instantly like `setErrors` does. See phase 1
+ * of the standard-schema-validation-bridge plan for why.
+ *
+ * Re-validates on the node's own `commit` event, which already fires once
+ * per settled change regardless of which descendant triggered it (a child's
+ * `calm()` cascades synchronously up through every ancestor's own `commit`),
+ * so this doesn't need a second debounce layer.
+ *
+ * Returns a detach function that stops re-validating and clears every
+ * schema-derived message this call ever applied.
+ */
+export declare function attachStandardSchema(node: FormKitNode, schema: StandardSchemaV1): () => void;

package/dist/runtime/composables/useFormKitStandardSchema.js

@@ -0,0 +1,68 @@
+import { createMessage, isNode } from "@formkit/core";
+import { issuesToFormKitErrors } from "../utils/standardSchemaErrors.js";
+const STANDARD_SCHEMA_SOURCE = "standard-schema";
+function isStandardSchemaMessage(message) {
+  return message.meta.source === STANDARD_SCHEMA_SOURCE;
+}
+function clearStandardSchemaMessages(node) {
+  node.store.filter((message) => !isStandardSchemaMessage(message), "validation");
+}
+function setStandardSchemaMessages(node, values) {
+  clearStandardSchemaMessages(node);
+  values.forEach((value, index) => {
+    node.store.set(createMessage({
+      key: `standard_schema_${index}`,
+      type: "validation",
+      blocking: true,
+      value,
+      meta: { source: STANDARD_SCHEMA_SOURCE }
+    }));
+  });
+}
+function resolveAddress(root, address) {
+  let pointer = root;
+  for (const segment of address.split(root.config.delimiter)) {
+    if (!pointer)
+      return void 0;
+    const matches = pointer.children.filter(isNode).filter((child) => String(child.name) === segment);
+    pointer = matches.find((child) => child.type !== "input") ?? matches[0];
+  }
+  return pointer;
+}
+export function attachStandardSchema(node, schema) {
+  let previousAddresses = /* @__PURE__ */ new Set();
+  let runToken = 0;
+  async function validate() {
+    const token = ++runToken;
+    const result = await schema["~standard"].validate(node.value);
+    if (token !== runToken)
+      return;
+    const { localErrors, childErrors } = issuesToFormKitErrors(result.issues ?? []);
+    setStandardSchemaMessages(node, localErrors);
+    const currentAddresses = new Set(Object.keys(childErrors));
+    for (const address of previousAddresses) {
+      if (currentAddresses.has(address))
+        continue;
+      const target = resolveAddress(node, address);
+      if (target)
+        clearStandardSchemaMessages(target);
+    }
+    for (const [address, messages] of Object.entries(childErrors)) {
+      const target = resolveAddress(node, address);
+      if (target)
+        setStandardSchemaMessages(target, messages);
+    }
+    previousAddresses = currentAddresses;
+  }
+  const receipt = node.on("commit", () => void validate());
+  void validate();
+  return function detachStandardSchema() {
+    node.off(receipt);
+    clearStandardSchemaMessages(node);
+    for (const address of previousAddresses) {
+      const target = resolveAddress(node, address);
+      if (target)
+        clearStandardSchemaMessages(target);
+    }
+  };
+}

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

@@ -0,0 +1,14 @@
+import type { StandardSchemaV1 } from '@standard-schema/spec';
+export interface FormKitStandardSchemaErrors {
+    localErrors: string[];
+    childErrors: Record<string, string[]>;
+}
+/**
+ * Normalizes a Standard Schema `Issue[]` array into FormKit's
+ * `setErrors`/`clearErrors` address shape. Mirrors `@nuxt/ui`'s own
+ * `validateStandardSchema()` path-flattening exactly (`item.key` for object
+ * path segments, the bare value otherwise, joined with `.`) so a Zod/Valibot
+ * issue at `items[2].email` resolves to the same FormKit node address
+ * (`"items.2.email"`) Nuxt UI's own forms would use for the same schema.
+ */
+export declare function issuesToFormKitErrors(issues: readonly StandardSchemaV1.Issue[]): FormKitStandardSchemaErrors;

package/dist/runtime/utils/standardSchemaErrors.js

@@ -0,0 +1,15 @@
+export function issuesToFormKitErrors(issues) {
+  const localErrors = [];
+  const childErrors = {};
+  for (const issue of issues) {
+    const address = issue.path?.map((item) => typeof item === "object" ? item.key : item).join(".");
+    if (!address) {
+      localErrors.push(issue.message);
+      continue;
+    }
+    if (!childErrors[address])
+      childErrors[address] = [];
+    childErrors[address].push(issue.message);
+  }
+  return { localErrors, childErrors };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sfxcode/nuxt-ui-formkit",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "FormKit integration for Nuxt UI - Seamlessly connect FormKit form handling with Nuxt UI components",
   "author": {
     "name": "Tom",
@@ -92,6 +92,7 @@
     "@formkit/nuxt": "^2.1.0",
     "@nuxt/kit": "4.4.8",
     "@nuxt/ui": "^4.9.0",
+    "@standard-schema/spec": "^1.1.0",
     "@vue/compiler-dom": "^3.5.39"
   },
   "devDependencies": {