@sfxcode/nuxt-ui-formkit 1.2.1 → 1.2.3

package/dist/runtime/composables/useFormKitStandardSchema.js

@@ -0,0 +1,68 @@
+import { createMessage, isNode } from "@formkit/core";
+import { issuesToFormKitErrors } from "../utils/standardSchemaErrors.js";
+const STANDARD_SCHEMA_SOURCE = "standard-schema";
+function isStandardSchemaMessage(message) {
+  return message.meta.source === STANDARD_SCHEMA_SOURCE;
+}
+function clearStandardSchemaMessages(node) {
+  node.store.filter((message) => !isStandardSchemaMessage(message), "validation");
+}
+function setStandardSchemaMessages(node, values) {
+  clearStandardSchemaMessages(node);
+  values.forEach((value, index) => {
+    node.store.set(createMessage({
+      key: `standard_schema_${index}`,
+      type: "validation",
+      blocking: true,
+      value,
+      meta: { source: STANDARD_SCHEMA_SOURCE }
+    }));
+  });
+}
+function resolveAddress(root, address) {
+  let pointer = root;
+  for (const segment of address.split(root.config.delimiter)) {
+    if (!pointer)
+      return void 0;
+    const matches = pointer.children.filter(isNode).filter((child) => String(child.name) === segment);
+    pointer = matches.find((child) => child.type !== "input") ?? matches[0];
+  }
+  return pointer;
+}
+export function attachStandardSchema(node, schema) {
+  let previousAddresses = /* @__PURE__ */ new Set();
+  let runToken = 0;
+  async function validate() {
+    const token = ++runToken;
+    const result = await schema["~standard"].validate(node.value);
+    if (token !== runToken)
+      return;
+    const { localErrors, childErrors } = issuesToFormKitErrors(result.issues ?? []);
+    setStandardSchemaMessages(node, localErrors);
+    const currentAddresses = new Set(Object.keys(childErrors));
+    for (const address of previousAddresses) {
+      if (currentAddresses.has(address))
+        continue;
+      const target = resolveAddress(node, address);
+      if (target)
+        clearStandardSchemaMessages(target);
+    }
+    for (const [address, messages] of Object.entries(childErrors)) {
+      const target = resolveAddress(node, address);
+      if (target)
+        setStandardSchemaMessages(target, messages);
+    }
+    previousAddresses = currentAddresses;
+  }
+  const receipt = node.on("commit", () => void validate());
+  void validate();
+  return function detachStandardSchema() {
+    node.off(receipt);
+    clearStandardSchemaMessages(node);
+    for (const address of previousAddresses) {
+      const target = resolveAddress(node, address);
+      if (target)
+        clearStandardSchemaMessages(target);
+    }
+  };
+}

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

@@ -0,0 +1,19 @@
+import type { DefaultConfigOptions } from '@formkit/vue';
+export interface CreateNuxtUiFormkitConfigOptions {
+    /**
+     * Registers `createMultiStepPlugin()` so `nuxtUIMultiStep`/`nuxtUIStep`
+     * actually work. The input type registrations themselves are always
+     * included below regardless of this flag - they're inert for forms that
+     * don't use them, but the plugin has real runtime behavior (it hooks
+     * every node to check its type), so it's opt-in.
+     */
+    multiStep?: boolean;
+}
+/**
+ * Assembles the `inputs`/`plugins` this module needs into a plain object a
+ * consumer spreads into their own `defaultConfig({ ...createNuxtUiFormkitConfig(), ... })`
+ * call inside `formkit.config.ts` - it doesn't call `defaultConfig` itself,
+ * so it stays composable with whatever else that config already does
+ * (locales, `iconLoader`, other plugins like `createAutoAnimatePlugin`).
+ */
+export declare function createNuxtUiFormkitConfig(options?: CreateNuxtUiFormkitConfigOptions): Pick<DefaultConfigOptions, 'inputs' | 'plugins'>;

package/dist/runtime/formkit/createNuxtUiFormkitConfig.js

@@ -0,0 +1,12 @@
+import { createMultiStepPlugin } from "@formkit/addons";
+import { nuxtUIInputs, nuxtUIOutputs } from "./definitions/index.js";
+import { addNuxtAsteriskPlugin } from "./plugins/index.js";
+export function createNuxtUiFormkitConfig(options = {}) {
+  const plugins = [addNuxtAsteriskPlugin];
+  if (options.multiStep)
+    plugins.push(createMultiStepPlugin());
+  return {
+    inputs: { ...nuxtUIInputs, ...nuxtUIOutputs },
+    plugins
+  };
+}

package/dist/runtime/formkit/createNuxtUiFormkitConfig.mjs

@@ -0,0 +1,12 @@
+import { createMultiStepPlugin } from "@formkit/addons";
+import { nuxtUIInputs, nuxtUIOutputs } from "./definitions/index.mjs";
+import { addNuxtAsteriskPlugin } from "./plugins/index.mjs";
+export function createNuxtUiFormkitConfig(options = {}) {
+  const plugins = [addNuxtAsteriskPlugin];
+  if (options.multiStep)
+    plugins.push(createMultiStepPlugin());
+  return {
+    inputs: { ...nuxtUIInputs, ...nuxtUIOutputs },
+    plugins
+  };
+}

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

@@ -1,4 +1,5 @@
 export * from './input.js';
+export * from './multiStep.js';
 export * from './output.js';
 export declare const nuxtUIInputs: {
     nuxtUICalendar: import("@formkit/core").FormKitTypeDefinition;
@@ -14,11 +15,13 @@ export declare const nuxtUIInputs: {
     nuxtUIInputTags: import("@formkit/core").FormKitTypeDefinition;
     nuxtUIInputTime: import("@formkit/core").FormKitTypeDefinition;
     nuxtUIListbox: import("@formkit/core").FormKitTypeDefinition;
+    nuxtUIMultiStep: import("@formkit/core").FormKitTypeDefinition;
     nuxtUIPinInput: import("@formkit/core").FormKitTypeDefinition;
     nuxtUIRadioGroup: import("@formkit/core").FormKitTypeDefinition;
     nuxtUISelect: import("@formkit/core").FormKitTypeDefinition;
     nuxtUISelectMenu: import("@formkit/core").FormKitTypeDefinition;
     nuxtUISlider: import("@formkit/core").FormKitTypeDefinition;
+    nuxtUIStep: import("@formkit/core").FormKitTypeDefinition;
     nuxtUISwitch: import("@formkit/core").FormKitTypeDefinition;
     nuxtUITextarea: import("@formkit/core").FormKitTypeDefinition;
     nuxtUIRepeater: import("@formkit/core").FormKitTypeDefinition;

package/dist/runtime/formkit/definitions/index.js

@@ -1,7 +1,9 @@
 import { nuxtUICalendarDefinition, nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIEditorDefinition, nuxtUIFileUploadDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIListboxDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "./input.js";
+import { nuxtUIMultiStepDefinition, nuxtUIStepDefinition } from "./multiStep.js";
 import { nuxtUIOutputBooleanDefinition, nuxtUIOutputDateDefinition, nuxtUIOutputLinkDefinition, nuxtUIOutputListDefinition, nuxtUIOutputNumberDefinition, nuxtUIOutputTextDefinition } from "./output.js";
 import { nuxtUIRepeaterDefinition } from "./repeater.js";
 export * from "./input.js";
+export * from "./multiStep.js";
 export * from "./output.js";
 export const nuxtUIInputs = {
   nuxtUICalendar: nuxtUICalendarDefinition,
@@ -17,11 +19,13 @@ export const nuxtUIInputs = {
   nuxtUIInputTags: nuxtUIInputTagsDefinition,
   nuxtUIInputTime: nuxtUIInputTimeDefinition,
   nuxtUIListbox: nuxtUIListboxDefinition,
+  nuxtUIMultiStep: nuxtUIMultiStepDefinition,
   nuxtUIPinInput: nuxtUIPinInputDefinition,
   nuxtUIRadioGroup: nuxtUIRadioGroupDefinition,
   nuxtUISelect: nuxtUISelectDefinition,
   nuxtUISelectMenu: nuxtUISelectMenuDefinition,
   nuxtUISlider: nuxtUISliderDefinition,
+  nuxtUIStep: nuxtUIStepDefinition,
   nuxtUISwitch: nuxtUISwitchDefinition,
   nuxtUITextarea: nuxtUITextareaDefinition,
   nuxtUIRepeater: nuxtUIRepeaterDefinition

package/dist/runtime/formkit/definitions/index.mjs

@@ -1,7 +1,9 @@
 import { nuxtUICalendarDefinition, nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIEditorDefinition, nuxtUIFileUploadDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIListboxDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "./input.mjs";
+import { nuxtUIMultiStepDefinition, nuxtUIStepDefinition } from "./multiStep.mjs";
 import { nuxtUIOutputBooleanDefinition, nuxtUIOutputDateDefinition, nuxtUIOutputLinkDefinition, nuxtUIOutputListDefinition, nuxtUIOutputNumberDefinition, nuxtUIOutputTextDefinition } from "./output.mjs";
 import { nuxtUIRepeaterDefinition } from "./repeater.mjs";
 export * from "./input.mjs";
+export * from "./multiStep.mjs";
 export * from "./output.mjs";
 export const nuxtUIInputs = {
   nuxtUICalendar: nuxtUICalendarDefinition,
@@ -17,11 +19,13 @@ export const nuxtUIInputs = {
   nuxtUIInputTags: nuxtUIInputTagsDefinition,
   nuxtUIInputTime: nuxtUIInputTimeDefinition,
   nuxtUIListbox: nuxtUIListboxDefinition,
+  nuxtUIMultiStep: nuxtUIMultiStepDefinition,
   nuxtUIPinInput: nuxtUIPinInputDefinition,
   nuxtUIRadioGroup: nuxtUIRadioGroupDefinition,
   nuxtUISelect: nuxtUISelectDefinition,
   nuxtUISelectMenu: nuxtUISelectMenuDefinition,
   nuxtUISlider: nuxtUISliderDefinition,
+  nuxtUIStep: nuxtUIStepDefinition,
   nuxtUISwitch: nuxtUISwitchDefinition,
   nuxtUITextarea: nuxtUITextareaDefinition,
   nuxtUIRepeater: nuxtUIRepeaterDefinition

package/dist/runtime/formkit/definitions/multiStep.d.ts

@@ -0,0 +1,3 @@
+import type { FormKitTypeDefinition } from '@formkit/core';
+export declare const nuxtUIStepDefinition: FormKitTypeDefinition;
+export declare const nuxtUIMultiStepDefinition: FormKitTypeDefinition;

package/dist/runtime/formkit/definitions/multiStep.js

@@ -0,0 +1,90 @@
+import { disablesChildren } from "@formkit/inputs";
+import { createInput } from "@formkit/vue";
+import { useFormKitMultiStep } from "../../composables/useFormKitMultiStep.js";
+import { useFormKitSchema } from "../../composables/useFormKitSchema.js";
+const { addElement, addComponent } = useFormKitSchema();
+const { addMultiStepHandler, addStepHandler } = useFormKitMultiStep();
+function addStepActionButton(label, onClick, bindAttrs, render, variant, disabled) {
+  return addElement("div", [
+    addComponent("UButton", { label, onClick, variant, disabled, ui: "$ui" }, true, { bind: bindAttrs })
+  ], {}, render);
+}
+export const nuxtUIStepDefinition = createInput(
+  addElement("div", [
+    addElement("div", "$slots.default", { class: "formkit-step-inner" }),
+    addElement("div", [
+      addStepActionButton(
+        { if: "$previousLabel", then: "$previousLabel", else: "Previous" },
+        "$handlers.previous",
+        "$previousAttrs",
+        "$isFirstStep === false",
+        "outline"
+      ),
+      addStepActionButton(
+        { if: "$nextLabel", then: "$nextLabel", else: "Next" },
+        "$handlers.next",
+        "$nextAttrs",
+        "$isLastStep === false || $stepIndex === 0",
+        void 0,
+        "$nextDisabled"
+      )
+    ], { class: "$internalStepActionsClass" })
+  ], {
+    "id": "$id",
+    "role": "tabpanel",
+    "aria-labelledby": '$node.parent.props.id + "_tab_" + $stepIndex'
+  }, true),
+  {
+    // The core node `type` (input|list|group) - not to be confused with
+    // `forceTypeProp` below, which is what makes `@formkit/addons`' own
+    // `createMultiStepPlugin` recognize this node as a `step`.
+    type: "group",
+    forceTypeProp: "step",
+    family: "NuxtUIInput",
+    props: ["beforeStepChange", "nextAttrs", "nextLabel", "previousAttrs", "previousLabel", "validStepIcon", "ui", "stepActionsClass"],
+    features: [disablesChildren, addStepHandler]
+  },
+  {
+    // `createInput()` always wraps the given schema in FormKit's standard
+    // outer/wrapper/label/inner/help/messages chrome (`useSchema()`) - the
+    // `hidden` attr on our own inner div (above) only hid *that* div, while
+    // the auto-generated `label` section (which renders whenever `$label`
+    // is set - and every step needs a `label` prop so `stepName` has
+    // something better than the raw step name to show in the tab strip)
+    // is a *sibling* of it, one level up, and stayed visible regardless -
+    // every inactive step's label text leaked into the page between the
+    // active step's "Next" button and the form's own submit button. Move
+    // `hidden` to the actual outermost element instead, and suppress the
+    // redundant label section entirely (a wizard step isn't a labeled
+    // field - its `label` prop only feeds the tab strip's text).
+    outer: {
+      attrs: {
+        hidden: "$isActiveStep === false || undefined"
+      }
+    },
+    label: {
+      if: "false"
+    }
+  }
+);
+export const nuxtUIMultiStepDefinition = createInput(
+  addElement("div", [
+    addElement("div", [
+      addComponent("UTabs", {
+        "items": "$tabItems",
+        "modelValue": "$activeStep",
+        "content": false,
+        "onUpdate:modelValue": "$handleTabChange",
+        "ui": "$ui"
+      })
+    ], { class: "formkit-multi-step-tabs" }),
+    addElement("div", "$slots.default", { class: "formkit-multi-step-steps" })
+  ], { id: "$id" }, true),
+  {
+    type: "group",
+    forceTypeProp: "multi-step",
+    family: "NuxtUIInput",
+    props: ["allowIncomplete", "tabStyle", "hideProgressLabels", "validStepIcon", "beforeStepChange", "ui"],
+    features: [disablesChildren, addMultiStepHandler]
+  }
+);

package/dist/runtime/formkit/definitions/multiStep.mjs

@@ -0,0 +1,90 @@
+import { disablesChildren } from "@formkit/inputs";
+import { createInput } from "@formkit/vue";
+import { useFormKitMultiStep } from "../../composables/useFormKitMultiStep";
+import { useFormKitSchema } from "../../composables/useFormKitSchema";
+const { addElement, addComponent } = useFormKitSchema();
+const { addMultiStepHandler, addStepHandler } = useFormKitMultiStep();
+function addStepActionButton(label, onClick, bindAttrs, render, variant, disabled) {
+  return addElement("div", [
+    addComponent("UButton", { label, onClick, variant, disabled, ui: "$ui" }, true, { bind: bindAttrs })
+  ], {}, render);
+}
+export const nuxtUIStepDefinition = createInput(
+  addElement("div", [
+    addElement("div", "$slots.default", { class: "formkit-step-inner" }),
+    addElement("div", [
+      addStepActionButton(
+        { if: "$previousLabel", then: "$previousLabel", else: "Previous" },
+        "$handlers.previous",
+        "$previousAttrs",
+        "$isFirstStep === false",
+        "outline"
+      ),
+      addStepActionButton(
+        { if: "$nextLabel", then: "$nextLabel", else: "Next" },
+        "$handlers.next",
+        "$nextAttrs",
+        "$isLastStep === false || $stepIndex === 0",
+        void 0,
+        "$nextDisabled"
+      )
+    ], { class: "$internalStepActionsClass" })
+  ], {
+    "id": "$id",
+    "role": "tabpanel",
+    "aria-labelledby": '$node.parent.props.id + "_tab_" + $stepIndex'
+  }, true),
+  {
+    // The core node `type` (input|list|group) - not to be confused with
+    // `forceTypeProp` below, which is what makes `@formkit/addons`' own
+    // `createMultiStepPlugin` recognize this node as a `step`.
+    type: "group",
+    forceTypeProp: "step",
+    family: "NuxtUIInput",
+    props: ["beforeStepChange", "nextAttrs", "nextLabel", "previousAttrs", "previousLabel", "validStepIcon", "ui", "stepActionsClass"],
+    features: [disablesChildren, addStepHandler]
+  },
+  {
+    // `createInput()` always wraps the given schema in FormKit's standard
+    // outer/wrapper/label/inner/help/messages chrome (`useSchema()`) - the
+    // `hidden` attr on our own inner div (above) only hid *that* div, while
+    // the auto-generated `label` section (which renders whenever `$label`
+    // is set - and every step needs a `label` prop so `stepName` has
+    // something better than the raw step name to show in the tab strip)
+    // is a *sibling* of it, one level up, and stayed visible regardless -
+    // every inactive step's label text leaked into the page between the
+    // active step's "Next" button and the form's own submit button. Move
+    // `hidden` to the actual outermost element instead, and suppress the
+    // redundant label section entirely (a wizard step isn't a labeled
+    // field - its `label` prop only feeds the tab strip's text).
+    outer: {
+      attrs: {
+        hidden: "$isActiveStep === false || undefined"
+      }
+    },
+    label: {
+      if: "false"
+    }
+  }
+);
+export const nuxtUIMultiStepDefinition = createInput(
+  addElement("div", [
+    addElement("div", [
+      addComponent("UTabs", {
+        "items": "$tabItems",
+        "modelValue": "$activeStep",
+        "content": false,
+        "onUpdate:modelValue": "$handleTabChange",
+        "ui": "$ui"
+      })
+    ], { class: "formkit-multi-step-tabs" }),
+    addElement("div", "$slots.default", { class: "formkit-multi-step-steps" })
+  ], { id: "$id" }, true),
+  {
+    type: "group",
+    forceTypeProp: "multi-step",
+    family: "NuxtUIInput",
+    props: ["allowIncomplete", "tabStyle", "hideProgressLabels", "validStepIcon", "beforeStepChange", "ui"],
+    features: [disablesChildren, addMultiStepHandler]
+  }
+);

package/dist/runtime/formkit/definitions/repeater.js

@@ -1,6 +1,8 @@
 import { createInput } from "@formkit/vue";
+import { useFormKitRepeater } from "../../composables/useFormKitRepeater.js";
 import { useFormKitSchema } from "../../composables/useFormKitSchema.js";
 const { addList, addElement, addListGroup, addComponent } = useFormKitSchema();
+const { addRepeaterHandler } = useFormKitRepeater();
 function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", buttonSize, render = "true") {
   const addActionButtonComponent = (onClick = "", icon = "", color = "", render2 = "true", disabled = "false") => {
     return addElement("div", [addComponent("UButton", { onClick, icon, color, disabled, size: buttonSize })], { class: buttonGroupItemClass }, render2);
@@ -53,7 +55,7 @@ export const nuxtUIRepeaterDefinition = createInput(
           onDragend: "$dragNodeEnd"
         })
       ], true, {})
-    ], true, "true", { value: "$value" })
+    ], true, "true", { value: "$value", validation: "$repeaterValidation" })
   ], { class: "$internalListClass", id: "$internalListId" }, true),
   {
     props: [
@@ -82,121 +84,3 @@ export const nuxtUIRepeaterDefinition = createInput(
     features: [addRepeaterHandler]
   }
 );
-function addRepeaterHandler(node) {
-  const swapElements = (array, index1, index2) => {
-    const [element] = array.splice(index1, 1);
-    if (element !== void 0) {
-      array.splice(index2, 0, element);
-    }
-    return array;
-  };
-  const uuid = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
-  node.on("created", () => {
-    if (node.context) {
-      let dragStartIndex = null;
-      let dragOverIndex = null;
-      const newItem = node.context.newItem || {};
-      node.context.listName = node.name;
-      node.context.renderButtons = !node.context.hideButtonGroup;
-      node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "md";
-      node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "md";
-      node.context.renderMoveButtons = !node.context.hideMoveButtons;
-      node.context.draggable = !!node.context.draggable;
-      node.context.renderDragHandle = !!node.context.displayDragHandle;
-      node.context.dragHandleIconName = node.context.dragHandleIconName || "i-lucide-grip-vertical";
-      node.context.internalDragHandleClass = node.context.dragHandleClass ? `formkit-repeater-drag-handle ${node.context.dragHandleClass}` : "formkit-repeater-drag-handle";
-      node.context.internalListClass = node.context.listClass ? `formkit-items ${node.context.listClass}` : "formkit-items";
-      node.context.internalListItemClass = node.context.listItemClass ? `formkit-item ${node.context.listItemClass}` : "formkit-item";
-      node.context.internalListId = `formkit-items-${uuid}`;
-      node.context.minItems = node.context.minItems !== void 0 ? node.context.minItems : 0;
-      node.context.maxItems = node.context.maxItems !== void 0 ? node.context.maxItems : Number.POSITIVE_INFINITY;
-      node.context.getListItemClass = (index) => {
-        if (dragOverIndex === index && dragStartIndex !== index)
-          return `${node.context?.internalListItemClass} formkit-repeater-drop-target`;
-        return node.context?.internalListItemClass?.toString() ?? "";
-      };
-      node.context.getListItemId = (index) => {
-        return `formkit-item-${index}-${uuid}`;
-      };
-      node.context.insertNode = (parentNode) => () => {
-        if (parentNode && Array.isArray(parentNode._value)) {
-          const newArray = [{ ...newItem }, ...parentNode.value];
-          parentNode.input(newArray, false);
-        }
-      };
-      node.context.removeNode = (parentNode, index) => () => {
-        if (parentNode && Array.isArray(parentNode._value)) {
-          parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
-        }
-      };
-      node.context.addNode = (parentNode, index) => () => {
-        if (parentNode && Array.isArray(parentNode._value)) {
-          const array = parentNode.value;
-          array.splice(index + 1, 0, { ...newItem });
-          parentNode.input(array, false);
-        }
-      };
-      node.context.cloneNode = (parentNode, index) => () => {
-        if (parentNode && Array.isArray(parentNode._value)) {
-          const item = parentNode.value[index];
-          const array = parentNode.value;
-          array.splice(index + 1, 0, { ...item });
-          parentNode.input(array, false);
-        }
-      };
-      node.context.moveNodeUp = (parentNode, index) => () => {
-        if (parentNode && Array.isArray(parentNode._value)) {
-          if (index > 0)
-            parentNode.input(swapElements(parentNode.value, index - 1, index), false);
-        }
-      };
-      node.context.moveNodeDown = (parentNode, index) => () => {
-        if (parentNode && Array.isArray(parentNode._value)) {
-          if (index < parentNode.value.length - 1)
-            parentNode.input(swapElements(parentNode.value, index, index + 1), false);
-        }
-      };
-      node.context.dragNodeStart = (_parentNode, index) => (event) => {
-        dragStartIndex = index;
-        if (event?.dataTransfer) {
-          event.dataTransfer.effectAllowed = "move";
-          event.dataTransfer.setData("text/plain", String(index));
-        }
-      };
-      node.context.dragNodeOver = (targetIndex) => (event) => {
-        event?.preventDefault();
-        dragOverIndex = targetIndex;
-        if (event?.dataTransfer)
-          event.dataTransfer.dropEffect = "move";
-      };
-      node.context.dragNodeLeave = (targetIndex) => () => {
-        if (dragOverIndex === targetIndex)
-          dragOverIndex = null;
-      };
-      node.context.dropNode = (parentNode, targetIndex) => (event) => {
-        event?.preventDefault();
-        if (!parentNode || !Array.isArray(parentNode._value)) {
-          dragOverIndex = null;
-          return;
-        }
-        const sourceFromEvent = Number.parseInt(event?.dataTransfer?.getData("text/plain") || "", 10);
-        const sourceIndex = Number.isInteger(sourceFromEvent) ? sourceFromEvent : dragStartIndex;
-        if (sourceIndex === null || sourceIndex === targetIndex) {
-          dragOverIndex = null;
-          return;
-        }
-        if (sourceIndex < 0 || sourceIndex >= parentNode.value.length) {
-          dragOverIndex = null;
-          return;
-        }
-        parentNode.input(swapElements(parentNode.value, sourceIndex, targetIndex), false);
-        dragStartIndex = null;
-        dragOverIndex = null;
-      };
-      node.context.dragNodeEnd = () => {
-        dragStartIndex = null;
-        dragOverIndex = null;
-      };
-    }
-  });
-}

package/dist/runtime/formkit/definitions/repeater.mjs

@@ -1,6 +1,8 @@
 import { createInput } from "@formkit/vue";
+import { useFormKitRepeater } from "../../composables/useFormKitRepeater";
 import { useFormKitSchema } from "../../composables/useFormKitSchema";
 const { addList, addElement, addListGroup, addComponent } = useFormKitSchema();
+const { addRepeaterHandler } = useFormKitRepeater();
 function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", buttonSize, render = "true") {
   const addActionButtonComponent = (onClick = "", icon = "", color = "", render2 = "true", disabled = "false") => {
     return addElement("div", [addComponent("UButton", { onClick, icon, color, disabled, size: buttonSize })], { class: buttonGroupItemClass }, render2);
@@ -53,7 +55,7 @@ export const nuxtUIRepeaterDefinition = createInput(
           onDragend: "$dragNodeEnd"
         })
       ], true, {})
-    ], true, "true", { value: "$value" })
+    ], true, "true", { value: "$value", validation: "$repeaterValidation" })
   ], { class: "$internalListClass", id: "$internalListId" }, true),
   {
     props: [
@@ -82,121 +84,3 @@ export const nuxtUIRepeaterDefinition = createInput(
     features: [addRepeaterHandler]
   }
 );
-function addRepeaterHandler(node) {
-  const swapElements = (array, index1, index2) => {
-    const [element] = array.splice(index1, 1);
-    if (element !== void 0) {
-      array.splice(index2, 0, element);
-    }
-    return array;
-  };
-  const uuid = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
-  node.on("created", () => {
-    if (node.context) {
-      let dragStartIndex = null;
-      let dragOverIndex = null;
-      const newItem = node.context.newItem || {};
-      node.context.listName = node.name;
-      node.context.renderButtons = !node.context.hideButtonGroup;
-      node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "md";
-      node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "md";
-      node.context.renderMoveButtons = !node.context.hideMoveButtons;
-      node.context.draggable = !!node.context.draggable;
-      node.context.renderDragHandle = !!node.context.displayDragHandle;
-      node.context.dragHandleIconName = node.context.dragHandleIconName || "i-lucide-grip-vertical";
-      node.context.internalDragHandleClass = node.context.dragHandleClass ? `formkit-repeater-drag-handle ${node.context.dragHandleClass}` : "formkit-repeater-drag-handle";
-      node.context.internalListClass = node.context.listClass ? `formkit-items ${node.context.listClass}` : "formkit-items";
-      node.context.internalListItemClass = node.context.listItemClass ? `formkit-item ${node.context.listItemClass}` : "formkit-item";
-      node.context.internalListId = `formkit-items-${uuid}`;
-      node.context.minItems = node.context.minItems !== void 0 ? node.context.minItems : 0;
-      node.context.maxItems = node.context.maxItems !== void 0 ? node.context.maxItems : Number.POSITIVE_INFINITY;
-      node.context.getListItemClass = (index) => {
-        if (dragOverIndex === index && dragStartIndex !== index)
-          return `${node.context?.internalListItemClass} formkit-repeater-drop-target`;
-        return node.context?.internalListItemClass?.toString() ?? "";
-      };
-      node.context.getListItemId = (index) => {
-        return `formkit-item-${index}-${uuid}`;
-      };
-      node.context.insertNode = (parentNode) => () => {
-        if (parentNode && Array.isArray(parentNode._value)) {
-          const newArray = [{ ...newItem }, ...parentNode.value];
-          parentNode.input(newArray, false);
-        }
-      };
-      node.context.removeNode = (parentNode, index) => () => {
-        if (parentNode && Array.isArray(parentNode._value)) {
-          parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
-        }
-      };
-      node.context.addNode = (parentNode, index) => () => {
-        if (parentNode && Array.isArray(parentNode._value)) {
-          const array = parentNode.value;
-          array.splice(index + 1, 0, { ...newItem });
-          parentNode.input(array, false);
-        }
-      };
-      node.context.cloneNode = (parentNode, index) => () => {
-        if (parentNode && Array.isArray(parentNode._value)) {
-          const item = parentNode.value[index];
-          const array = parentNode.value;
-          array.splice(index + 1, 0, { ...item });
-          parentNode.input(array, false);
-        }
-      };
-      node.context.moveNodeUp = (parentNode, index) => () => {
-        if (parentNode && Array.isArray(parentNode._value)) {
-          if (index > 0)
-            parentNode.input(swapElements(parentNode.value, index - 1, index), false);
-        }
-      };
-      node.context.moveNodeDown = (parentNode, index) => () => {
-        if (parentNode && Array.isArray(parentNode._value)) {
-          if (index < parentNode.value.length - 1)
-            parentNode.input(swapElements(parentNode.value, index, index + 1), false);
-        }
-      };
-      node.context.dragNodeStart = (_parentNode, index) => (event) => {
-        dragStartIndex = index;
-        if (event?.dataTransfer) {
-          event.dataTransfer.effectAllowed = "move";
-          event.dataTransfer.setData("text/plain", String(index));
-        }
-      };
-      node.context.dragNodeOver = (targetIndex) => (event) => {
-        event?.preventDefault();
-        dragOverIndex = targetIndex;
-        if (event?.dataTransfer)
-          event.dataTransfer.dropEffect = "move";
-      };
-      node.context.dragNodeLeave = (targetIndex) => () => {
-        if (dragOverIndex === targetIndex)
-          dragOverIndex = null;
-      };
-      node.context.dropNode = (parentNode, targetIndex) => (event) => {
-        event?.preventDefault();
-        if (!parentNode || !Array.isArray(parentNode._value)) {
-          dragOverIndex = null;
-          return;
-        }
-        const sourceFromEvent = Number.parseInt(event?.dataTransfer?.getData("text/plain") || "", 10);
-        const sourceIndex = Number.isInteger(sourceFromEvent) ? sourceFromEvent : dragStartIndex;
-        if (sourceIndex === null || sourceIndex === targetIndex) {
-          dragOverIndex = null;
-          return;
-        }
-        if (sourceIndex < 0 || sourceIndex >= parentNode.value.length) {
-          dragOverIndex = null;
-          return;
-        }
-        parentNode.input(swapElements(parentNode.value, sourceIndex, targetIndex), false);
-        dragStartIndex = null;
-        dragOverIndex = null;
-      };
-      node.context.dragNodeEnd = () => {
-        dragStartIndex = null;
-        dragOverIndex = null;
-      };
-    }
-  });
-}