@sfxcode/nuxt-ui-formkit 1.2.1 → 1.2.3

package/README.md

@@ -43,6 +43,10 @@ FormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerf
 🔁 **Repeater Component** - Dynamic repeatable form sections
 - `nuxtUIRepeater` - Create dynamic lists with add, remove, clone, and reorder functionality
 
+🧭 **Multi-Step Forms** - Wizard-style forms with tab navigation and validation gating
+- `nuxtUIMultiStep` - Tab-strip wizard container built on `@formkit/addons`' `createMultiStepPlugin`
+- `nuxtUIStep` - A single step's content, with Nuxt UI-styled previous/next actions
+
 📊 **6 Output Components** - Display-only components for read-only data
 - `nuxtUIOutputBoolean` - Boolean display with custom icons
 - `nuxtUIOutputDate` - Formatted date/time display
@@ -55,11 +59,22 @@ FormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerf
 - `FUDataEdit` - Edit forms with schema-based configuration
 - `FUDataView` - Read-only data display with schema support
 - `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
 
 🔧 **Composables & Utilities** - Reusable form logic
 - `useFormKitSchema` - Schema-based form generation with element builders
 - `useFormKitInput` - Input component utilities and prop handling
 - `useFormKitOutput` - Output component utilities and prop handling
+- `useFormKitRepeater` - Repeater insert/remove/clone/move/drag handlers
+- `useFormKitMultiStep` - Multi-step tab-item mapping and navigation bridging
+- `useFormKitForm` - Submit/reset/error-management wrapper for a form's imperative APIs, callable from outside the form
+- `useFormKitAutoForm` - Schema inference from data value shapes, Valibot, or Zod schemas (`inferFormSchema`/`inferFormSchemaFromValibot`/`inferFormSchemaFromZod`)
 - `colorConverter` - Color format conversion utilities
 - `durationConverter` - Duration format conversion utilities
 
@@ -321,6 +336,15 @@ The playground includes comprehensive examples for all components:
 - [Repeater](./playground/app/pages/form/repeater-sample.vue)
 - [Drag-and-Drop Repeater](./playground/app/pages/form/repeater-drag.vue)
 
+### Multi-Step
+- [Multi-Step Form](./playground/app/pages/form/multi-step.vue)
+
+### 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.1",
+  "version": "1.2.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -15,7 +15,7 @@ const module$1 = defineNuxtModule({
     addPlugin(resolver.resolve("./runtime/plugin"));
     addImportsDir(resolver.resolve("./runtime/composables"));
     const NPM_PCK_FORMKIT_NUXT_UI = "@sfxcode/nuxt-ui-formkit";
-    const componentNames = ["FUDataView", "FUDataEdit", "FUDataDebug"];
+    const componentNames = ["FUDataView", "FUDataEdit", "FUDataDebug", "FUAutoForm"];
     componentNames.forEach(
       (name) => addComponent({
         name,

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

@@ -0,0 +1,65 @@
+import type { FormKitSchemaDefinition } from '@formkit/core';
+import type { PropType } from 'vue';
+import type { AutoFormOverrides, ValibotLikeSchema, ZodLikeSchema } from '../composables/useFormKitAutoForm.js';
+declare var __VLS_10: string, __VLS_11: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    overrides: {
+        type: PropType<AutoFormOverrides>;
+        default: undefined;
+    };
+    valibotSchema: {
+        type: PropType<ValibotLikeSchema>;
+        default: undefined;
+    };
+    zodSchema: {
+        type: PropType<ZodLikeSchema>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<FormKitSchemaDefinition>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: FormKitSchemaDefinition | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    overrides: {
+        type: PropType<AutoFormOverrides>;
+        default: undefined;
+    };
+    valibotSchema: {
+        type: PropType<ValibotLikeSchema>;
+        default: undefined;
+    };
+    zodSchema: {
+        type: PropType<ZodLikeSchema>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<FormKitSchemaDefinition>;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
+}>, {
+    data: Record<string, any>;
+    overrides: AutoFormOverrides;
+    valibotSchema: ValibotLikeSchema;
+    zodSchema: ZodLikeSchema;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FUAutoForm.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { ref, watch } from "vue";
+import { inferFormSchema, inferFormSchemaFromValibot, inferFormSchemaFromZod } from "../composables/useFormKitAutoForm";
+import FUDataEdit from "./FUDataEdit.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null
+  },
+  overrides: {
+    type: Object,
+    default: void 0
+  },
+  valibotSchema: {
+    type: Object,
+    default: void 0
+  },
+  zodSchema: {
+    type: Object,
+    default: void 0
+  }
+});
+const formData = defineModel({ type: [Object, String, Array] });
+if (!formData.value && props.data) {
+  formData.value = props.data;
+}
+function buildSchema(data) {
+  if (props.valibotSchema) {
+    return inferFormSchemaFromValibot(props.valibotSchema, props.overrides);
+  }
+  if (props.zodSchema) {
+    return inferFormSchemaFromZod(props.zodSchema, props.overrides);
+  }
+  return inferFormSchema(data ?? formData.value ?? {}, props.overrides);
+}
+const formSchema = ref(buildSchema(props.data));
+watch([() => props.data, () => props.overrides, () => props.valibotSchema, () => props.zodSchema], ([data]) => {
+  formSchema.value = buildSchema(data);
+});
+</script>
+
+<template>
+  <FUDataEdit
+    v-bind="$attrs"
+    v-model="formData"
+    :schema="formSchema"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      #[name]="slotProps"
+    >
+      <slot
+        :name="name"
+        v-bind="slotProps ?? {}"
+      />
+    </template>
+  </FUDataEdit>
+</template>

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

@@ -0,0 +1,65 @@
+import type { FormKitSchemaDefinition } from '@formkit/core';
+import type { PropType } from 'vue';
+import type { AutoFormOverrides, ValibotLikeSchema, ZodLikeSchema } from '../composables/useFormKitAutoForm.js';
+declare var __VLS_10: string, __VLS_11: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    overrides: {
+        type: PropType<AutoFormOverrides>;
+        default: undefined;
+    };
+    valibotSchema: {
+        type: PropType<ValibotLikeSchema>;
+        default: undefined;
+    };
+    zodSchema: {
+        type: PropType<ZodLikeSchema>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<FormKitSchemaDefinition>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: FormKitSchemaDefinition | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    overrides: {
+        type: PropType<AutoFormOverrides>;
+        default: undefined;
+    };
+    valibotSchema: {
+        type: PropType<ValibotLikeSchema>;
+        default: undefined;
+    };
+    zodSchema: {
+        type: PropType<ZodLikeSchema>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<FormKitSchemaDefinition>;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
+}>, {
+    data: Record<string, any>;
+    overrides: AutoFormOverrides;
+    valibotSchema: ValibotLikeSchema;
+    zodSchema: ZodLikeSchema;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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;
@@ -149,9 +158,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
 }>, {
+    schema: FormKitSchemaDefinition;
     data: Record<string, any>;
     id: string;
-    schema: FormKitSchemaDefinition;
+    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;
@@ -149,9 +158,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
 }>, {
+    schema: FormKitSchemaDefinition;
     data: Record<string, any>;
     id: string;
-    schema: FormKitSchemaDefinition;
+    standardSchema: StandardSchemaV1<unknown, unknown>;
     formClass: string;
     actionsClass: string;
     submitSeverity: string;

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

@@ -57,8 +57,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
 }>, {
-    data: Record<string, any>;
     schema: FormKitSchemaDefinition;
+    data: Record<string, any>;
     formClass: string;
     debugData: boolean;
     debugSchema: boolean;

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

@@ -57,8 +57,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
 }>, {
-    data: Record<string, any>;
     schema: FormKitSchemaDefinition;
+    data: Record<string, any>;
     formClass: string;
     debugData: boolean;
     debugSchema: boolean;

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

@@ -0,0 +1,38 @@
+import type { FormKitSchemaNode } from '@formkit/core';
+export type AutoFormOverrides = Record<string, Record<string, unknown> | boolean>;
+export declare function inferFormSchema(data: Record<string, unknown>, overrides?: AutoFormOverrides): FormKitSchemaNode[];
+export interface ValibotLikePipeEntry {
+    kind: string;
+    type: string;
+    requirement?: unknown;
+}
+export interface ValibotLikeSchema {
+    kind: 'schema';
+    type: string;
+    entries?: Record<string, ValibotLikeSchema>;
+    item?: ValibotLikeSchema;
+    wrapped?: ValibotLikeSchema;
+    default?: unknown;
+    pipe?: readonly ValibotLikePipeEntry[];
+}
+export declare function inferFormSchemaFromValibot(schema: object, overrides?: AutoFormOverrides): FormKitSchemaNode[];
+export interface ZodLikeSchema {
+    type: string;
+    shape?: Record<string, ZodLikeSchema>;
+    element?: ZodLikeSchema;
+    minLength?: number | null;
+    maxLength?: number | null;
+    minValue?: number | null;
+    maxValue?: number | null;
+    format?: string | null;
+    unwrap?: () => ZodLikeSchema;
+    def?: {
+        defaultValue?: unknown;
+    };
+}
+export declare function inferFormSchemaFromZod(schema: object, overrides?: AutoFormOverrides): FormKitSchemaNode[];
+export declare function useFormKitAutoForm(): {
+    inferFormSchema: typeof inferFormSchema;
+    inferFormSchemaFromValibot: typeof inferFormSchemaFromValibot;
+    inferFormSchemaFromZod: typeof inferFormSchemaFromZod;
+};