@sfxcode/nuxt-ui-formkit 1.2.2 → 1.2.4

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.2",
+  "version": "1.2.4",
   "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": {