@sfxcode/nuxt-ui-formkit 1.2.0 → 1.2.2

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/input.js

@@ -20,7 +20,7 @@ import FUSlider from "../../../runtime/components/inputs/FUSlider.vue";
 import FUSwitch from "../../../runtime/components/inputs/FUSwitch.vue";
 import FUTextarea from "../../../runtime/components/inputs/FUTextarea.vue";
 export const nuxtUICalendarDefinition = createInput(FUCalendar, {
-  props: ["type", "range", "multiple", "color", "variant", "size", "weekNumbers", "monthControls", "yearControls", "viewControl", "defaultValue", "minValue", "maxValue", "isDateDisabled", "isDateUnavailable", "ui"],
+  props: ["type", "range", "multiple", "color", "variant", "size", "weekNumbers", "monthControls", "yearControls", "viewControl", "defaultValue", "minValue", "maxValue", "isDateDisabled", "isDateUnavailable", "ui", "valueType", "timeZone"],
   family: "NuxtUIInput"
 });
 export const nuxtUICheckboxDefinition = createInput(FUCheckbox, {
@@ -48,7 +48,7 @@ export const nuxtUIInputDefinition = createInput(FUInput, {
   family: "NuxtUIInput"
 });
 export const nuxtUIInputDateDefinition = createInput(FUInputDate, {
-  props: ["defaultValue", "color", "variant", "size", "highlight", "fixed", "autofocus", "autofocusDelay", "range", "separatorIcon", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "placeholder", "defaultPlaceholder", "hourCycle", "step", "granularity", "hideTimeZone", "maxValue", "minValue", "isDateUnavailable", "ui"],
+  props: ["defaultValue", "color", "variant", "size", "highlight", "fixed", "autofocus", "autofocusDelay", "range", "separatorIcon", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "placeholder", "defaultPlaceholder", "hourCycle", "step", "granularity", "hideTimeZone", "maxValue", "minValue", "isDateUnavailable", "ui", "valueType", "timeZone"],
   family: "NuxtUIInput"
 });
 export const nuxtUIInputMenuDefinition = createInput(FUInputMenu, {

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

@@ -20,7 +20,7 @@ import FUSlider from "../../../runtime/components/inputs/FUSlider.vue";
 import FUSwitch from "../../../runtime/components/inputs/FUSwitch.vue";
 import FUTextarea from "../../../runtime/components/inputs/FUTextarea.vue";
 export const nuxtUICalendarDefinition = createInput(FUCalendar, {
-  props: ["type", "range", "multiple", "color", "variant", "size", "weekNumbers", "monthControls", "yearControls", "viewControl", "defaultValue", "minValue", "maxValue", "isDateDisabled", "isDateUnavailable", "ui"],
+  props: ["type", "range", "multiple", "color", "variant", "size", "weekNumbers", "monthControls", "yearControls", "viewControl", "defaultValue", "minValue", "maxValue", "isDateDisabled", "isDateUnavailable", "ui", "valueType", "timeZone"],
   family: "NuxtUIInput"
 });
 export const nuxtUICheckboxDefinition = createInput(FUCheckbox, {
@@ -48,7 +48,7 @@ export const nuxtUIInputDefinition = createInput(FUInput, {
   family: "NuxtUIInput"
 });
 export const nuxtUIInputDateDefinition = createInput(FUInputDate, {
-  props: ["defaultValue", "color", "variant", "size", "highlight", "fixed", "autofocus", "autofocusDelay", "range", "separatorIcon", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "placeholder", "defaultPlaceholder", "hourCycle", "step", "granularity", "hideTimeZone", "maxValue", "minValue", "isDateUnavailable", "ui"],
+  props: ["defaultValue", "color", "variant", "size", "highlight", "fixed", "autofocus", "autofocusDelay", "range", "separatorIcon", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "placeholder", "defaultPlaceholder", "hourCycle", "step", "granularity", "hideTimeZone", "maxValue", "minValue", "isDateUnavailable", "ui", "valueType", "timeZone"],
   family: "NuxtUIInput"
 });
 export const nuxtUIInputMenuDefinition = createInput(FUInputMenu, {

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;
-      };
-    }
-  });
-}

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

@@ -1,5 +1,7 @@
+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';
+export * from './createNuxtUiFormkitConfig.js';
 export * from './definitions/index.js';
 export * from './plugins/index.js';
 /**
@@ -47,6 +49,9 @@ declare module '@formkit/inputs' {
         nuxtUIListbox: {
             type: 'nuxtUIListbox';
         };
+        nuxtUIMultiStep: {
+            type: 'nuxtUIMultiStep';
+        };
         nuxtUIPinInput: {
             type: 'nuxtUIPinInput';
         };
@@ -62,6 +67,9 @@ declare module '@formkit/inputs' {
         nuxtUISlider: {
             type: 'nuxtUISlider';
         };
+        nuxtUIStep: {
+            type: 'nuxtUIStep';
+        };
         nuxtUISwitch: {
             type: 'nuxtUISwitch';
         };
@@ -100,9 +108,11 @@ declare module '@formkit/inputs' {
         nuxtUIInputTags: MergeSlots<FormKitBaseSlots<Props>, InputTagsSlots>;
         nuxtUIInputTime: MergeSlots<FormKitBaseSlots<Props>, InputTimeSlots>;
         nuxtUIListbox: MergeSlots<FormKitBaseSlots<Props>, ListboxSlots>;
+        nuxtUIMultiStep: MergeSlots<FormKitBaseSlots<Props>, FormKitMultiStepSlots<Props>>;
         nuxtUIRadioGroup: MergeSlots<FormKitBaseSlots<Props>, RadioGroupSlots>;
         nuxtUISelect: MergeSlots<FormKitBaseSlots<Props>, SelectSlots>;
         nuxtUISelectMenu: MergeSlots<FormKitBaseSlots<Props>, SelectMenuSlots>;
+        nuxtUIStep: MergeSlots<FormKitBaseSlots<Props>, FormKitStepSlots<Props>>;
         nuxtUISwitch: MergeSlots<FormKitBaseSlots<Props>, SwitchSlots>;
         nuxtUITextarea: MergeSlots<FormKitBaseSlots<Props>, TextareaSlots>;
     }

package/dist/runtime/formkit/index.js

@@ -1,2 +1,3 @@
+export * from "./createNuxtUiFormkitConfig.js";
 export * from "./definitions/index.js";
 export * from "./plugins/index.js";

package/dist/runtime/formkit/index.mjs

@@ -1,2 +1,3 @@
+export * from "./createNuxtUiFormkitConfig.mjs";
 export * from "./definitions/index.mjs";
 export * from "./plugins/index.mjs";

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

@@ -1,3 +1,4 @@
 import type { FormKitNode } from '@formkit/core';
+export { createMultiStepPlugin } from '@formkit/addons';
 export declare function addNuxtAsteriskPlugin(node: FormKitNode): void;
 export declare function addNuxtLabelPlugin(node: FormKitNode): void;

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

@@ -1,3 +1,4 @@
+export { createMultiStepPlugin } from "@formkit/addons";
 export function addNuxtAsteriskPlugin(node) {
   if (!node.props.type.startsWith("nuxtUI") || node.props.type.startsWith("FUOutput"))
     return;

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

@@ -1,3 +1,4 @@
+export { createMultiStepPlugin } from "@formkit/addons";
 export function addNuxtAsteriskPlugin(node) {
   if (!node.props.type.startsWith("nuxtUI") || node.props.type.startsWith("FUOutput"))
     return;

package/dist/runtime/plugin.js

@@ -1,6 +1,7 @@
 import { defineNuxtPlugin } from "#app";
-import { UButton, UIcon } from "#components";
+import { UButton, UIcon, UTabs } from "#components";
 export default defineNuxtPlugin((_nuxtApp) => {
   _nuxtApp.vueApp.component("UButton", UButton);
   _nuxtApp.vueApp.component("UIcon", UIcon);
+  _nuxtApp.vueApp.component("UTabs", UTabs);
 });