@sfxcode/nuxt-ui-formkit 1.2.3 → 1.2.4

package/README.md

@@ -75,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
 

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "1.2.3",
+  "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.vue

@@ -95,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/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"

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

@@ -1,5 +1,6 @@
 <script setup>
 import { useFormKitInput } from "../../utils/useFormKitInput";
+import { createContainerBlurHandler } from "../../utils/useFormKitContainerBlur";
 const props = defineProps({
   context: {
     type: Object,
@@ -7,6 +8,7 @@ const props = defineProps({
   }
 });
 const { handleInput, handleChange, styleClass, color, modelValue, items, validSlotNames } = useFormKitInput(props.context);
+const handleContainerBlur = createContainerBlurHandler(props.context);
 </script>
 
 <template>
@@ -31,6 +33,7 @@ const { handleInput, handleChange, styleClass, color, modelValue, items, validSl
     :name="context.name"
     @change="handleChange"
     @update:model-value="handleInput"
+    @focusout="handleContainerBlur"
   >
     <template
       v-for="slotName in validSlotNames"

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

@@ -1,5 +1,6 @@
 <script setup>
 import { useFormKitInput } from "../../utils/useFormKitInput";
+import { createContainerBlurHandler } from "../../utils/useFormKitContainerBlur";
 const DEFAULT_EDITOR_TOOLBAR_ITEMS = [
   [
     { kind: "undo", icon: "i-lucide-undo", tooltip: { text: "Undo" } },
@@ -61,61 +62,64 @@ const props = defineProps({
   }
 });
 const { handleInput, styleClass, modelValue } = useFormKitInput(props.context);
+const handleContainerBlur = createContainerBlurHandler(props.context);
 </script>
 
 <template>
-  <UEditor
-    :id="context.id"
-    v-model="modelValue"
-    v-bind="{ ...context?.attrs }"
-    :class="styleClass"
-    :editable="!context?.disabled"
-    :style="context?.attrs.style"
-    :content-type="context.contentType"
-    :starter-kit="context.starterKit"
-    :placeholder="context.placeholder"
-    :markdown="context.markdown"
-    :image="context.image"
-    :mention="context.mention"
-    :handlers="context.editorHandlers"
-    :extensions="context.extensions"
-    :autofocus="context.autofocus"
-    :ui="context.ui"
-    @update:model-value="handleInput"
-  >
-    <template #default="{ editor, handlers }">
-      <UEditorToolbar
-        v-if="context.toolbar !== false"
-        :editor="editor"
-        :items="context.toolbarItems ?? DEFAULT_EDITOR_TOOLBAR_ITEMS"
-        class="border-b border-default px-2 py-1 mb-2 flex-wrap"
-      />
-      <UEditorToolbar
-        v-if="context.bubbleToolbar !== false"
-        :editor="editor"
-        :items="context.bubbleToolbarItems ?? DEFAULT_BUBBLE_TOOLBAR_ITEMS"
-        layout="bubble"
-        :should-show="bubbleToolbarShouldShow"
-      />
-      <UEditorDragHandle
-        v-if="context.dragHandle"
-        :editor="editor"
-      />
-      <UEditorSuggestionMenu
-        v-if="context.suggestionMenu"
-        :editor="editor"
-        :items="context.suggestionMenuItems ?? DEFAULT_SUGGESTION_MENU_ITEMS"
-      />
-      <UEditorMentionMenu
-        v-if="context.mentionItems?.length"
-        :editor="editor"
-        :items="context.mentionItems"
-      />
-      <component
-        :is="context.slots.default"
-        v-if="context?.slots?.default"
-        v-bind="{ ...context, editor, handlers }"
-      />
-    </template>
-  </UEditor>
+  <div @focusout="handleContainerBlur">
+    <UEditor
+      :id="context.id"
+      v-model="modelValue"
+      v-bind="{ ...context?.attrs }"
+      :class="styleClass"
+      :editable="!context?.disabled"
+      :style="context?.attrs.style"
+      :content-type="context.contentType"
+      :starter-kit="context.starterKit"
+      :placeholder="context.placeholder"
+      :markdown="context.markdown"
+      :image="context.image"
+      :mention="context.mention"
+      :handlers="context.editorHandlers"
+      :extensions="context.extensions"
+      :autofocus="context.autofocus"
+      :ui="context.ui"
+      @update:model-value="handleInput"
+    >
+      <template #default="{ editor, handlers }">
+        <UEditorToolbar
+          v-if="context.toolbar !== false"
+          :editor="editor"
+          :items="context.toolbarItems ?? DEFAULT_EDITOR_TOOLBAR_ITEMS"
+          class="border-b border-default px-2 py-1 mb-2 flex-wrap"
+        />
+        <UEditorToolbar
+          v-if="context.bubbleToolbar !== false"
+          :editor="editor"
+          :items="context.bubbleToolbarItems ?? DEFAULT_BUBBLE_TOOLBAR_ITEMS"
+          layout="bubble"
+          :should-show="bubbleToolbarShouldShow"
+        />
+        <UEditorDragHandle
+          v-if="context.dragHandle"
+          :editor="editor"
+        />
+        <UEditorSuggestionMenu
+          v-if="context.suggestionMenu"
+          :editor="editor"
+          :items="context.suggestionMenuItems ?? DEFAULT_SUGGESTION_MENU_ITEMS"
+        />
+        <UEditorMentionMenu
+          v-if="context.mentionItems?.length"
+          :editor="editor"
+          :items="context.mentionItems"
+        />
+        <component
+          :is="context.slots.default"
+          v-if="context?.slots?.default"
+          v-bind="{ ...context, editor, handlers }"
+        />
+      </template>
+    </UEditor>
+  </div>
 </template>

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

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

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

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

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

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from "vue";
 import { useFormKitInput } from "../../utils/useFormKitInput";
+import { createContainerBlurHandler } from "../../utils/useFormKitContainerBlur";
 import { fromDateValueOrRange, toDateValue, toDateValueOrRange } from "../../utils/dateValueConversion";
 const props = defineProps({
   context: {
@@ -8,7 +9,8 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, handleBlur, isInvalid, styleClass, color, validSlotNames } = useFormKitInput(props.context);
+const handleContainerBlur = createContainerBlurHandler(props.context);
 const conversionOptions = computed(() => ({
   granularity: props.context.granularity,
   hideTimeZone: props.context.hideTimeZone,
@@ -66,6 +68,8 @@ const minValue = computed(() => toDateValue(props.context.minValue, conversionOp
     :ui="context.ui"
     @change="handleChange"
     @update:model-value="handleInput"
+    @blur="handleBlur"
+    @focusout="handleContainerBlur"
   >
     <template
       v-for="slotName in validSlotNames"

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

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

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

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

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

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

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

@@ -1,12 +1,14 @@
 <script setup>
 import { useFormKitInput } from "../../utils/useFormKitInput";
+import { createContainerBlurHandler } from "../../utils/useFormKitContainerBlur";
 const props = defineProps({
   context: {
     type: Object,
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, handleBlur, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
+const handleContainerBlur = createContainerBlurHandler(props.context);
 </script>
 
 <template>
@@ -46,6 +48,8 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, val
     :ui="context.ui"
     @change="handleChange"
     @update:model-value="handleInput"
+    @blur="handleBlur"
+    @focusout="handleContainerBlur"
   >
     <template
       v-for="slotName in validSlotNames"

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

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, nextTick, ref, watch } from "vue";
 import { useFormKitInput } from "../../utils/useFormKitInput";
+import { createContainerBlurHandler } from "../../utils/useFormKitContainerBlur";
 const props = defineProps({
   context: {
     type: Object,
@@ -8,6 +9,7 @@ const props = defineProps({
   }
 });
 const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, items, validSlotNames } = useFormKitInput(props.context);
+const handleContainerBlur = createContainerBlurHandler(props.context);
 const targetItems = ref(modelValue.value || []);
 const sourceSelection = ref([]);
 const targetSelection = ref([]);
@@ -240,6 +242,7 @@ watch(targetItems, (newVal) => {
     :ui="context.ui"
     @change="handleChange"
     @update:model-value="handleInput"
+    @focusout="handleContainerBlur"
   >
     <template
       v-for="slotName in validSlotNames"
@@ -255,6 +258,7 @@ watch(targetItems, (newVal) => {
   <div
     v-if="context.displayMode === 'transfer'"
     class="flex items-stretch gap-4 w-full"
+    @focusout="handleContainerBlur"
   >
     <div
       ref="sourceContainerRef"

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

@@ -1,12 +1,17 @@
 <script setup>
 import { useFormKitInput } from "../../utils/useFormKitInput";
+import { createContainerBlurHandler } from "../../utils/useFormKitContainerBlur";
 const props = defineProps({
   context: {
     type: Object,
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
+const { handleInput, handleChange, handleBlur, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
+const handleContainerBlur = createContainerBlurHandler(props.context);
+function handlePinBlur(event) {
+  handleBlur(event);
+}
 </script>
 
 <template>
@@ -35,5 +40,7 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } =
     :ui="context.ui"
     @change="handleChange"
     @update:model-value="handleInput"
+    @blur="handlePinBlur"
+    @focusout="handleContainerBlur"
   />
 </template>

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

@@ -1,5 +1,6 @@
 <script setup>
 import { useFormKitInput } from "../../utils/useFormKitInput";
+import { createContainerBlurHandler } from "../../utils/useFormKitContainerBlur";
 const props = defineProps({
   context: {
     type: Object,
@@ -7,6 +8,7 @@ const props = defineProps({
   }
 });
 const { handleInput, handleChange, styleClass, color, modelValue, items, validSlotNames } = useFormKitInput(props.context);
+const handleContainerBlur = createContainerBlurHandler(props.context);
 </script>
 
 <template>
@@ -31,6 +33,7 @@ const { handleInput, handleChange, styleClass, color, modelValue, items, validSl
     :ui="context.ui"
     @change="handleChange"
     @update:model-value="handleInput"
+    @focusout="handleContainerBlur"
   >
     <template
       v-for="slotName in validSlotNames"

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

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

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

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

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

@@ -0,0 +1,20 @@
+import type { FormKitSchemaDefinition } from '@formkit/core';
+import type { AutoFormOverrides, ValibotLikeSchema, ZodLikeSchema } from './useFormKitAutoForm.js';
+export interface FormKitOverlayEditOptions {
+    data: unknown;
+    schema: FormKitSchemaDefinition;
+    title?: string;
+    as?: 'modal' | 'slideover';
+}
+export interface FormKitOverlayAutoOptions {
+    data?: unknown;
+    valibotSchema?: ValibotLikeSchema;
+    zodSchema?: ZodLikeSchema;
+    overrides?: AutoFormOverrides;
+    title?: string;
+    as?: 'modal' | 'slideover';
+}
+export declare function useFormKitOverlay(): {
+    edit: (options: FormKitOverlayEditOptions) => Promise<unknown>;
+    auto: (options: FormKitOverlayAutoOptions) => Promise<unknown>;
+};

package/dist/runtime/composables/useFormKitOverlay.js

@@ -0,0 +1,42 @@
+import { useOverlay } from "@nuxt/ui/composables";
+import FUAutoFormOverlay from "../components/FUAutoFormOverlay.vue";
+import FUDataEditOverlay from "../components/FUDataEditOverlay.vue";
+const registeredOverlays = /* @__PURE__ */ new WeakMap();
+const registeredAutoOverlays = /* @__PURE__ */ new WeakMap();
+let formIdCounter = 0;
+export function useFormKitOverlay() {
+  const overlay = useOverlay();
+  let registeredOverlay = registeredOverlays.get(overlay);
+  if (!registeredOverlay) {
+    registeredOverlay = overlay.create(FUDataEditOverlay);
+    registeredOverlays.set(overlay, registeredOverlay);
+  }
+  let registeredAutoOverlay = registeredAutoOverlays.get(overlay);
+  if (!registeredAutoOverlay) {
+    registeredAutoOverlay = overlay.create(FUAutoFormOverlay);
+    registeredAutoOverlays.set(overlay, registeredAutoOverlay);
+  }
+  function edit(options) {
+    const id = `formkit-overlay-${++formIdCounter}`;
+    return registeredOverlay.open({
+      id,
+      data: options.data,
+      schema: options.schema,
+      title: options.title,
+      as: options.as ?? "modal"
+    });
+  }
+  function auto(options) {
+    const id = `formkit-autoform-overlay-${++formIdCounter}`;
+    return registeredAutoOverlay.open({
+      id,
+      data: options.data,
+      valibotSchema: options.valibotSchema,
+      zodSchema: options.zodSchema,
+      overrides: options.overrides,
+      title: options.title,
+      as: options.as ?? "modal"
+    });
+  }
+  return { edit, auto };
+}

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

@@ -0,0 +1,37 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+/**
+ * For an input whose real focusable sub-elements live inside one container
+ * - a Reka UI `DateField`'s day/month/year segments, a checkbox/radio
+ * group's individual items, a listbox's options - `context.handlers.blur`
+ * must only fire once focus has genuinely left the whole container, not
+ * just moved between its own children. Native `blur` doesn't bubble, so a
+ * plain `@blur` on the container never sees a child's blur at all; this
+ * binds to `focusout` (which does bubble) instead, and uses
+ * `relatedTarget` to tell "moved to a sibling inside" apart from "left
+ * entirely."
+ *
+ * Discovered while wiring `FUInputDate`/`FUInputTime`: Nuxt UI's own
+ * `InputDate.vue`/`InputTime.vue` bind `@blur` on their internal
+ * `DateField.Root`, assuming Reka UI aggregates blur across segments the
+ * same way - it doesn't (`DateField.Root` doesn't declare `blur` as its own
+ * emit, so that binding is a native fallthrough on a never-focused
+ * container div, and silently never fires). This helper is what actually
+ * fixes it, bound to `@focusout` on the outer `<UInputDate>`/`<UInputTime>`
+ * component instead.
+ *
+ * Uses `event.currentTarget` (the element the listener is actually attached
+ * to) as the container, rather than a template ref to the component's own
+ * `$el` - `UInputDate`/`UInputTime` render a multi-root template (a
+ * `createReusableTemplate`-style definition block plus the real
+ * `DateField.Root`), so `$el` resolves to that definition block's own
+ * placeholder node, not the visible container (confirmed empirically).
+ * `currentTarget` has no such ambiguity: it's always the exact node the
+ * `focusout` listener is bound to.
+ *
+ * Returns a plain `(event: Event) => void`, not `(event: FocusEvent) =>
+ * void` - some Nuxt UI components (e.g. `UPinInput`) type their own `blur`
+ * emit as generic `Event`, and a stricter parameter type isn't assignable
+ * to a listener bound there. It's genuinely a `FocusEvent` at runtime
+ * (`focusout` always is), so it's cast internally.
+ */
+export declare function createContainerBlurHandler(context: FormKitFrameworkContext): (event: Event) => void;

package/dist/runtime/utils/useFormKitContainerBlur.js

@@ -0,0 +1,9 @@
+export function createContainerBlurHandler(context) {
+  return (event) => {
+    const focusEvent = event;
+    const container = focusEvent.currentTarget;
+    const related = focusEvent.relatedTarget;
+    if (!container || !related || !container.contains(related))
+      context.handlers.blur(focusEvent);
+  };
+}

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

@@ -0,0 +1,20 @@
+import type { Ref } from 'vue';
+/**
+ * Shared by `FUDataEditOverlay.vue`/`FUAutoFormOverlay.vue`: both need to
+ * resolve their `useOverlay` `close` emit exactly once per open cycle, from
+ * whichever of several sources fires first - an explicit Save/Cancel button,
+ * or `UModal`/`USlideover`'s own Esc/backdrop dismissal, which only ever
+ * surfaces as their `open` v-model transitioning to `false` with no
+ * dedicated event of its own.
+ *
+ * `useOverlay` reuses the same wrapper instance across sequential `edit()`/
+ * `auto()` calls (its registered `id` is fixed at `.create()` time, not
+ * per-`open()` call), so "has this open cycle already resolved" has to reset
+ * on every reopen, not just be set once ever - otherwise a *later* call's
+ * Esc/backdrop dismissal would see the flag still `true` from a previous
+ * cycle's Save/Cancel and silently no-op, leaving that later promise pending
+ * forever.
+ */
+export declare function useOverlayCloseResolution(open: Ref<boolean>, emit: (event: 'close', value: unknown) => void): {
+    resolveOnce: (value: unknown) => void;
+};

package/dist/runtime/utils/useOverlayCloseResolution.js

@@ -0,0 +1,17 @@
+import { watch } from "vue";
+export function useOverlayCloseResolution(open, emit) {
+  let hasResolved = false;
+  function resolveOnce(value) {
+    if (hasResolved)
+      return;
+    hasResolved = true;
+    emit("close", value);
+  }
+  watch(open, (isOpen) => {
+    if (isOpen)
+      hasResolved = false;
+    else
+      resolveOnce(null);
+  });
+  return { resolveOnce };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sfxcode/nuxt-ui-formkit",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "FormKit integration for Nuxt UI - Seamlessly connect FormKit form handling with Nuxt UI components",
   "author": {
     "name": "Tom",