@sfxcode/nuxt-ui-formkit 1.2.1 → 1.2.2

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

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

@@ -6,6 +6,7 @@ export interface DateConversionOptions {
     hideTimeZone?: boolean;
     timeZone?: string;
 }
+export declare function isDateValue(value: unknown): value is DateValue;
 /**
  * Converts an external value (JS `Date`, ISO 8601 string, or an already-native
  * `DateValue`) into the `DateValue` that `UInputDate`/`UCalendar` require.
@@ -24,12 +25,12 @@ export declare function toDateValueOrRangeOrArray(value: unknown, options?: Date
 /** Converts a `DateValue` emitted by `UInputDate`/`UCalendar` back into the shape the form value should take. */
 export declare function fromDateValue(value: DateValue | undefined, valueType: DateValueType, timeZone?: string): DateValue | Date | string | undefined;
 /** Same as {@link fromDateValue}, but also handles the `{ start, end }` range shape. */
-export declare function fromDateValueOrRange(value: unknown, valueType: DateValueType, timeZone?: string): string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | {
-    start: string | Date | DateValue | undefined;
-    end: string | Date | DateValue | undefined;
+export declare function fromDateValueOrRange(value: unknown, valueType: DateValueType, timeZone?: string): string | CalendarDate | CalendarDateTime | ZonedDateTime | Date | {
+    start: string | DateValue | Date | undefined;
+    end: string | DateValue | Date | undefined;
 } | undefined;
 /** Same as {@link fromDateValueOrRange}, but also handles arrays (multiple-selection mode). */
-export declare function fromDateValueOrRangeOrArray(value: unknown, valueType: DateValueType, timeZone?: string): string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | {
-    start: string | Date | DateValue | undefined;
-    end: string | Date | DateValue | undefined;
-} | (string | Date | DateValue | undefined)[] | undefined;
+export declare function fromDateValueOrRangeOrArray(value: unknown, valueType: DateValueType, timeZone?: string): string | CalendarDate | CalendarDateTime | ZonedDateTime | Date | {
+    start: string | DateValue | Date | undefined;
+    end: string | DateValue | Date | undefined;
+} | (string | DateValue | Date | undefined)[] | undefined;

package/dist/runtime/utils/dateValueConversion.js

@@ -1,7 +1,7 @@
 import { CalendarDate, CalendarDateTime, ZonedDateTime, fromDate, getLocalTimeZone, parseAbsolute, parseDate, parseDateTime, toCalendarDate, toCalendarDateTime } from "@internationalized/date";
 const ISO_DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
 const ISO_HAS_ZONE = /(?:Z|[+-]\d{2}:\d{2})(?:\[[^\]]+\])?$/;
-function isDateValue(value) {
+export function isDateValue(value) {
   return value instanceof CalendarDate || value instanceof CalendarDateTime || value instanceof ZonedDateTime;
 }
 function isRangeLike(value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sfxcode/nuxt-ui-formkit",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "FormKit integration for Nuxt UI - Seamlessly connect FormKit form handling with Nuxt UI components",
   "author": {
     "name": "Tom",
@@ -109,6 +109,7 @@
     "@nuxt/test-utils": "^4.0.3",
     "@types/node": "latest",
     "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/test-utils": "^2.4.11",
     "changelogen": "^0.6.2",
     "codemirror": "^6.0.2",
     "eslint": "^10.6.0",
@@ -118,11 +119,13 @@
     "sass-embedded": "^1.100.0",
     "typescript": "~6.0.3",
     "unbuild": "^3.6.1",
+    "valibot": "^1.4.2",
     "vitepress": "2.0.0-alpha.17",
     "vitest": "^4.1.9",
     "vue": "^3.5.39",
     "vue-i18n": "^11.4.6",
-    "vue-tsc": "^3.3.6"
+    "vue-tsc": "^3.3.6",
+    "zod": "^4.4.3"
   },
   "packageManager": "pnpm@11.1.2+sha512.415a1cc25974731e75455c1468371be74c5aa5fb7621b50d4056d222451609f11412f23fd602e6169f1e060466641f798597e1be961a10688836a67b16569499"
 }