@sfxcode/nuxt-ui-formkit 1.2.2 → 1.2.4

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
 
@@ -72,6 +75,7 @@ FormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerf
 - `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`)
+- `useFormKitOverlay` - Promise-based modal/slideover forms: `await overlay.edit({ data, schema, title })` (or `.auto(...)` for a schema-free version), resolving to the saved data or `null` on cancel
 - `colorConverter` - Color format conversion utilities
 - `durationConverter` - Duration format conversion utilities
 
@@ -339,6 +343,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.4",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -0,0 +1,82 @@
+import type { PropType } from 'vue';
+import type { AutoFormOverrides, ValibotLikeSchema, ZodLikeSchema } from '../composables/useFormKitAutoForm.js';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    valibotSchema: {
+        type: PropType<ValibotLikeSchema>;
+        default: undefined;
+    };
+    zodSchema: {
+        type: PropType<ZodLikeSchema>;
+        default: undefined;
+    };
+    overrides: {
+        type: PropType<AutoFormOverrides>;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"modal" | "slideover">;
+        default: string;
+    };
+    open: {
+        type: PropType<boolean>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value: unknown) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    valibotSchema: {
+        type: PropType<ValibotLikeSchema>;
+        default: undefined;
+    };
+    zodSchema: {
+        type: PropType<ZodLikeSchema>;
+        default: undefined;
+    };
+    overrides: {
+        type: PropType<AutoFormOverrides>;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"modal" | "slideover">;
+        default: string;
+    };
+    open: {
+        type: PropType<boolean>;
+    };
+}>> & Readonly<{
+    onClose?: ((value: unknown) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    data: Record<string, any>;
+    title: string;
+    overrides: AutoFormOverrides;
+    valibotSchema: ValibotLikeSchema;
+    zodSchema: ZodLikeSchema;
+    as: "modal" | "slideover";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/FUAutoFormOverlay.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { useOverlayCloseResolution } from "../utils/useOverlayCloseResolution";
+import FUAutoForm from "./FUAutoForm.vue";
+defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  data: {
+    type: Object,
+    default: null
+  },
+  valibotSchema: {
+    type: Object,
+    default: void 0
+  },
+  zodSchema: {
+    type: Object,
+    default: void 0
+  },
+  overrides: {
+    type: Object,
+    default: void 0
+  },
+  title: {
+    type: String,
+    default: void 0
+  },
+  as: {
+    type: String,
+    default: "modal"
+  }
+});
+const emit = defineEmits(["close"]);
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const { resolveOnce } = useOverlayCloseResolution(open, emit);
+function handleSaved(savedData) {
+  resolveOnce(savedData);
+}
+function handleCancel() {
+  resolveOnce(null);
+}
+</script>
+
+<template>
+  <UModal
+    v-if="as === 'modal'"
+    v-model:open="open"
+    :title="title"
+  >
+    <template #body>
+      <FUAutoForm
+        :id="id"
+        :data="data"
+        :valibot-schema="valibotSchema"
+        :zod-schema="zodSchema"
+        :overrides="overrides"
+        @data-saved="handleSaved"
+      >
+        <template #submit>
+          <UButton
+            type="submit"
+            label="Save"
+          />
+          <UButton
+            type="button"
+            label="Cancel"
+            color="neutral"
+            variant="outline"
+            @click="handleCancel"
+          />
+        </template>
+      </FUAutoForm>
+    </template>
+  </UModal>
+  <USlideover
+    v-else
+    v-model:open="open"
+    :title="title"
+  >
+    <template #body>
+      <FUAutoForm
+        :id="id"
+        :data="data"
+        :valibot-schema="valibotSchema"
+        :zod-schema="zodSchema"
+        :overrides="overrides"
+        @data-saved="handleSaved"
+      >
+        <template #submit>
+          <UButton
+            type="submit"
+            label="Save"
+          />
+          <UButton
+            type="button"
+            label="Cancel"
+            color="neutral"
+            variant="outline"
+            @click="handleCancel"
+          />
+        </template>
+      </FUAutoForm>
+    </template>
+  </USlideover>
+</template>

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

@@ -0,0 +1,82 @@
+import type { PropType } from 'vue';
+import type { AutoFormOverrides, ValibotLikeSchema, ZodLikeSchema } from '../composables/useFormKitAutoForm.js';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    valibotSchema: {
+        type: PropType<ValibotLikeSchema>;
+        default: undefined;
+    };
+    zodSchema: {
+        type: PropType<ZodLikeSchema>;
+        default: undefined;
+    };
+    overrides: {
+        type: PropType<AutoFormOverrides>;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"modal" | "slideover">;
+        default: string;
+    };
+    open: {
+        type: PropType<boolean>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value: unknown) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    valibotSchema: {
+        type: PropType<ValibotLikeSchema>;
+        default: undefined;
+    };
+    zodSchema: {
+        type: PropType<ZodLikeSchema>;
+        default: undefined;
+    };
+    overrides: {
+        type: PropType<AutoFormOverrides>;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"modal" | "slideover">;
+        default: string;
+    };
+    open: {
+        type: PropType<boolean>;
+    };
+}>> & Readonly<{
+    onClose?: ((value: unknown) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    data: Record<string, any>;
+    title: string;
+    overrides: AutoFormOverrides;
+    valibotSchema: ValibotLikeSchema;
+    zodSchema: ZodLikeSchema;
+    as: "modal" | "slideover";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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) => {
@@ -84,7 +95,8 @@ if (props.data) {
   formData.value = props.data;
 }
 function handleSave() {
-  emit("dataSaved", formData.value);
+  const { slots: _slots, ...data } = formData.value ?? {};
+  emit("dataSaved", data);
 }
 function handleReset() {
   reset(props.id);

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/components/FUDataEditOverlay.d.vue.ts

@@ -0,0 +1,64 @@
+import type { FormKitSchemaDefinition } from '@formkit/core';
+import type { PropType } from 'vue';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    schema: {
+        type: PropType<FormKitSchemaDefinition>;
+        default: null;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"modal" | "slideover">;
+        default: string;
+    };
+    open: {
+        type: PropType<boolean>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value: unknown) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    schema: {
+        type: PropType<FormKitSchemaDefinition>;
+        default: null;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"modal" | "slideover">;
+        default: string;
+    };
+    open: {
+        type: PropType<boolean>;
+    };
+}>> & Readonly<{
+    onClose?: ((value: unknown) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    schema: FormKitSchemaDefinition;
+    data: Record<string, any>;
+    title: string;
+    as: "modal" | "slideover";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/FUDataEditOverlay.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { useOverlayCloseResolution } from "../utils/useOverlayCloseResolution";
+import FUDataEdit from "./FUDataEdit.vue";
+defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  data: {
+    type: Object,
+    default: null
+  },
+  schema: {
+    type: Object,
+    default: null
+  },
+  title: {
+    type: String,
+    default: void 0
+  },
+  as: {
+    type: String,
+    default: "modal"
+  }
+});
+const emit = defineEmits(["close"]);
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const { resolveOnce } = useOverlayCloseResolution(open, emit);
+function handleSaved(savedData) {
+  resolveOnce(savedData);
+}
+function handleCancel() {
+  resolveOnce(null);
+}
+</script>
+
+<template>
+  <UModal
+    v-if="as === 'modal'"
+    v-model:open="open"
+    :title="title"
+  >
+    <template #body>
+      <FUDataEdit
+        :id="id"
+        :data="data"
+        :schema="schema"
+        @data-saved="handleSaved"
+      >
+        <template #submit>
+          <UButton
+            type="submit"
+            label="Save"
+          />
+          <UButton
+            type="button"
+            label="Cancel"
+            color="neutral"
+            variant="outline"
+            @click="handleCancel"
+          />
+        </template>
+      </FUDataEdit>
+    </template>
+  </UModal>
+  <USlideover
+    v-else
+    v-model:open="open"
+    :title="title"
+  >
+    <template #body>
+      <FUDataEdit
+        :id="id"
+        :data="data"
+        :schema="schema"
+        @data-saved="handleSaved"
+      >
+        <template #submit>
+          <UButton
+            type="submit"
+            label="Save"
+          />
+          <UButton
+            type="button"
+            label="Cancel"
+            color="neutral"
+            variant="outline"
+            @click="handleCancel"
+          />
+        </template>
+      </FUDataEdit>
+    </template>
+  </USlideover>
+</template>

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

@@ -0,0 +1,64 @@
+import type { FormKitSchemaDefinition } from '@formkit/core';
+import type { PropType } from 'vue';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    schema: {
+        type: PropType<FormKitSchemaDefinition>;
+        default: null;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"modal" | "slideover">;
+        default: string;
+    };
+    open: {
+        type: PropType<boolean>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value: unknown) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    schema: {
+        type: PropType<FormKitSchemaDefinition>;
+        default: null;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"modal" | "slideover">;
+        default: string;
+    };
+    open: {
+        type: PropType<boolean>;
+    };
+}>> & Readonly<{
+    onClose?: ((value: unknown) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    schema: FormKitSchemaDefinition;
+    data: Record<string, any>;
+    title: string;
+    as: "modal" | "slideover";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/inputs/FUCalendar.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from "vue";
 import { useFormKitInput } from "../../utils/useFormKitInput";
+import { createContainerBlurHandler } from "../../utils/useFormKitContainerBlur";
 import { toDateValue, toDateValueOrRangeOrArray, fromDateValueOrRangeOrArray } from "../../utils/dateValueConversion";
 const props = defineProps({
   context: {
@@ -9,6 +10,7 @@ const props = defineProps({
   }
 });
 const { handleInput, styleClass, color, validSlotNames } = useFormKitInput(props.context);
+const handleContainerBlur = createContainerBlurHandler(props.context);
 const conversionOptions = computed(() => ({ timeZone: props.context.timeZone }));
 const modelValue = computed({
   get: () => toDateValueOrRangeOrArray(props.context._value, conversionOptions.value),
@@ -46,6 +48,7 @@ const maxValue = computed(() => toDateValue(props.context.maxValue, conversionOp
     :is-date-unavailable="context.isDateUnavailable"
     :ui="context.ui"
     @update:model-value="handleInput"
+    @focusout="handleContainerBlur"
   >
     <template
       v-for="slotName in validSlotNames"

package/dist/runtime/components/inputs/FUCheckbox.vue

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, styleClass, modelValue, color, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, handleBlur, styleClass, modelValue, color, validSlotNames } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -31,6 +31,7 @@ const { handleInput, handleChange, styleClass, modelValue, color, validSlotNames
     :ui="context.ui"
     @change="handleChange"
     @update:model-value="handleInput"
+    @blur="handleBlur"
   >
     <template
       v-for="slotName in validSlotNames"