@sfxcode/nuxt-ui-formkit 1.2.3 → 1.2.5

package/dist/runtime/formkit/index.d.ts

@@ -1,6 +1,6 @@
 import type { FormKitMultiStepSlots, FormKitStepSlots } from '@formkit/addons';
 import type { FormKitBaseSlots, FormKitInputs } from '@formkit/inputs';
-import type { CalendarSlots, CheckboxSlots, CheckboxGroupSlots, EditorSlots, FileUploadSlots, RadioGroupSlots, InputSlots, TextareaSlots, SelectSlots, SelectMenuSlots, InputDateSlots, InputMenuSlots, InputNumberSlots, InputTagsSlots, InputTimeSlots, ListboxSlots, SwitchSlots } from '@nuxt/ui';
+import type { CalendarSlots, CheckboxSlots, CheckboxGroupSlots, EditorSlots, FileUploadSlots, RadioGroupSlots, InputSlots, TextareaSlots, SelectSlots, SelectMenuSlots, InputDateSlots, InputMenuSlots, InputNumberSlots, InputTagsSlots, InputTimeSlots, ListboxSlots, PinInputSlots, SwitchSlots } from '@nuxt/ui';
 export * from './createNuxtUiFormkitConfig.js';
 export * from './definitions/index.js';
 export * from './plugins/index.js';
@@ -58,6 +58,9 @@ declare module '@formkit/inputs' {
         nuxtUIRadioGroup: {
             type: 'nuxtUIRadioGroup';
         };
+        nuxtUIRepeater: {
+            type: 'nuxtUIRepeater';
+        };
         nuxtUISelect: {
             type: 'nuxtUISelect';
         };
@@ -109,7 +112,9 @@ declare module '@formkit/inputs' {
         nuxtUIInputTime: MergeSlots<FormKitBaseSlots<Props>, InputTimeSlots>;
         nuxtUIListbox: MergeSlots<FormKitBaseSlots<Props>, ListboxSlots>;
         nuxtUIMultiStep: MergeSlots<FormKitBaseSlots<Props>, FormKitMultiStepSlots<Props>>;
+        nuxtUIPinInput: MergeSlots<FormKitBaseSlots<Props>, PinInputSlots>;
         nuxtUIRadioGroup: MergeSlots<FormKitBaseSlots<Props>, RadioGroupSlots>;
+        nuxtUIRepeater: FormKitBaseSlots<Props>;
         nuxtUISelect: MergeSlots<FormKitBaseSlots<Props>, SelectSlots>;
         nuxtUISelectMenu: MergeSlots<FormKitBaseSlots<Props>, SelectMenuSlots>;
         nuxtUIStep: MergeSlots<FormKitBaseSlots<Props>, FormKitStepSlots<Props>>;

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/useFormKitInput.d.ts

@@ -10,4 +10,5 @@ export declare function useFormKitInput(context: FormKitFrameworkContext): {
     handleSelect: (e: unknown) => void;
     modelValue: import("vue").WritableComputedRef<any, any>;
     items: import("vue").ComputedRef<any[]>;
+    ui: import("vue").Ref<any, any>;
 };

package/dist/runtime/utils/useFormKitInput.js

@@ -1,5 +1,13 @@
-import { computed } from "vue";
+import { computed, onBeforeUnmount, ref } from "vue";
 export function useFormKitInput(context) {
+  const ui = ref(context?.node?.props?.ui);
+  const uiReceipt = context?.node?.on?.("prop:ui", ({ payload }) => {
+    ui.value = payload;
+  });
+  onBeforeUnmount(() => {
+    if (uiReceipt !== void 0)
+      context?.node?.off?.(uiReceipt);
+  });
   const isInvalid = computed(() => {
     return context?.state?.validationVisible && !context?.state?.valid;
   });
@@ -38,5 +46,5 @@ export function useFormKitInput(context) {
     }
     return [];
   });
-  return { isInvalid, validSlotNames, styleClass, color, handleBlur, handleChange, handleInput, handleSelect, modelValue, items };
+  return { isInvalid, validSlotNames, styleClass, color, handleBlur, handleChange, handleInput, handleSelect, modelValue, items, ui };
 }

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

@@ -1,4 +1,12 @@
 import type { FormKitFrameworkContext } from '@formkit/core';
+export interface FormKitOutputUi {
+    /** Merged into `containerClass` - Output components have no themeable Nuxt UI root to forward to. */
+    root?: string;
+    /** Merged into `iconClass`, applied to every `FUIcon` an Output component renders. */
+    icon?: string;
+    /** Forwarded unmodified to `UBadge`'s own `:ui` prop (`FUOutputList`'s badge display mode only). */
+    badge?: Record<string, unknown>;
+}
 export declare function useFormKitOutput(context: FormKitFrameworkContext): {
     colorClass: import("vue").ComputedRef<string>;
     sizeClass: import("vue").ComputedRef<string>;
@@ -7,4 +15,21 @@ export declare function useFormKitOutput(context: FormKitFrameworkContext): {
     iconClass: import("vue").ComputedRef<string>;
     leadingIconName: import("vue").ComputedRef<string | null>;
     trailingIconName: import("vue").ComputedRef<string | null>;
+    ui: import("vue").Ref<{
+        root?: string
+        /** Merged into `iconClass`, applied to every `FUIcon` an Output component renders. */
+         | undefined;
+        icon?: string
+        /** Forwarded unmodified to `UBadge`'s own `:ui` prop (`FUOutputList`'s badge display mode only). */
+         | undefined;
+        badge?: Record<string, unknown> | undefined;
+    } | undefined, FormKitOutputUi | {
+        root?: string
+        /** Merged into `iconClass`, applied to every `FUIcon` an Output component renders. */
+         | undefined;
+        icon?: string
+        /** Forwarded unmodified to `UBadge`'s own `:ui` prop (`FUOutputList`'s badge display mode only). */
+         | undefined;
+        badge?: Record<string, unknown> | undefined;
+    } | undefined>;
 };

package/dist/runtime/utils/useFormKitOutput.js

@@ -1,5 +1,13 @@
-import { computed } from "vue";
+import { computed, onBeforeUnmount, ref } from "vue";
 export function useFormKitOutput(context) {
+  const ui = ref(context?.node?.props?.ui);
+  const uiReceipt = context?.node?.on?.("prop:ui", ({ payload }) => {
+    ui.value = payload;
+  });
+  onBeforeUnmount(() => {
+    if (uiReceipt !== void 0)
+      context?.node?.off?.(uiReceipt);
+  });
   const colorClass = computed(() => {
     const color = context.color ?? "neutral";
     const colorMap = {
@@ -41,6 +49,7 @@ export function useFormKitOutput(context) {
       colorClass.value,
       sizeClass.value,
       variantClass.value,
+      ui.value?.root,
       context?.attrs?.class
     ].filter(Boolean).join(" ");
   });
@@ -53,13 +62,19 @@ export function useFormKitOutput(context) {
       lg: "h-6 w-6",
       xl: "h-7 w-7"
     };
-    return iconSizeMap[size] || iconSizeMap.md;
+    return [iconSizeMap[size] || iconSizeMap.md, ui.value?.icon].filter(Boolean).join(" ");
   });
   const leadingIconName = computed(() => {
-    return context.leadingIcon || context.leading && context.icon || null;
+    const leadingIcon = context.leadingIcon;
+    const leading = context.leading;
+    const icon = context.icon;
+    return leadingIcon || leading && icon || null;
   });
   const trailingIconName = computed(() => {
-    return context.trailingIcon || context.trailing && context.icon || null;
+    const trailingIcon = context.trailingIcon;
+    const trailing = context.trailing;
+    const icon = context.icon;
+    return trailingIcon || trailing && icon || null;
   });
   return {
     colorClass,
@@ -68,6 +83,7 @@ export function useFormKitOutput(context) {
     containerClass,
     iconClass,
     leadingIconName,
-    trailingIconName
+    trailingIconName,
+    ui
   };
 }

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.5",
   "description": "FormKit integration for Nuxt UI - Seamlessly connect FormKit form handling with Nuxt UI components",
   "author": {
     "name": "Tom",
@@ -97,12 +97,12 @@
   },
   "devDependencies": {
     "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/state": "^6.7.0",
+    "@codemirror/state": "^6.7.1",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.43.4",
+    "@codemirror/view": "^6.43.6",
     "@iconify-json/heroicons": "^1.2.3",
     "@iconify-json/lucide": "^1.2.116",
-    "@iconify-json/simple-icons": "^1.2.88",
+    "@iconify-json/simple-icons": "^1.2.89",
     "@nuxt/devtools": "4.0.0-alpha.7",
     "@nuxt/eslint-config": "^1.16.0",
     "@nuxt/module-builder": "^1.0.2",
@@ -122,10 +122,10 @@
     "unbuild": "^3.6.1",
     "valibot": "^1.4.2",
     "vitepress": "2.0.0-alpha.17",
-    "vitest": "^4.1.9",
+    "vitest": "^4.1.10",
     "vue": "^3.5.39",
     "vue-i18n": "^11.4.6",
-    "vue-tsc": "^3.3.6",
+    "vue-tsc": "^3.3.7",
     "zod": "^4.4.3"
   },
   "packageManager": "pnpm@11.1.2+sha512.415a1cc25974731e75455c1468371be74c5aa5fb7621b50d4056d222451609f11412f23fd602e6169f1e060466641f798597e1be961a10688836a67b16569499"