@sfxcode/formkit-openvue 0.8.1 → 0.9.1

package/dist/definitions/repeater.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.formRepeaterDefinition = void 0;
 var _vue = require("@formkit/vue");
 var _composables = require("../composables");
+var _clonePlain = require("../utils/clonePlain");
 const {
   addList,
   addElement,
@@ -13,18 +14,21 @@ const {
   addComponent
 } = (0, _composables.useFormKitSchema)();
 function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", buttonSize, render = "true") {
-  const addActionButtonComponent = (onClick = "", icon = "", severity = "", render2 = "true", disabled = "false") => {
+  const addActionButtonComponent = (onClick = "", icon = "", severity = "", render2 = "true", disabled = "false", label = "") => {
+    const name = `${label} + " " + ($index + 1)`;
     return addElement("div", [addComponent("Button", {
-      onClick,
+      "onClick": onClick,
       icon,
       severity,
       disabled,
-      size: buttonSize
+      "size": buttonSize,
+      "aria-label": name,
+      "title": name
     })], {
       class: buttonGroupItemClass
     }, render2);
   };
-  return addElement("div", [addActionButtonComponent("$moveNodeUp($node.parent, $index)", "oi oi-arrow-up", "secondary", "$renderMoveButtons", "$index === 0"), addActionButtonComponent("$removeNode($node.parent, $index)", "oi oi-trash", "danger", "$displayDeleteButton", "$node.parent.value.length === $minItems"), addActionButtonComponent("$cloneNode($node.parent, $index)", "oi oi-clone", "", "$displayCloneButton", "$node.parent.value.length > $maxItems -1"), addActionButtonComponent("$addNode($node.parent, $index)", "oi oi-plus", "", "$displayAddButton", "$node.parent.value.length > $maxItems -1"), addActionButtonComponent("$moveNodeDown($node.parent, $index)", "oi oi-arrow-down", "secondary", "$renderMoveButtons", "$index === $node.parent.value.length -1")], {
+  return addElement("div", [addActionButtonComponent("$moveNodeUp($node.parent, $index)", "oi oi-arrow-up", "secondary", "$renderMoveButtons", "$index === 0", "$moveUpLabel"), addActionButtonComponent("$removeNode($node.parent, $index)", "oi oi-trash", "danger", "$displayDeleteButton", "$node.parent.value.length === $minItems", "$deleteLabel"), addActionButtonComponent("$cloneNode($node.parent, $index)", "oi oi-clone", "", "$displayCloneButton", "$node.parent.value.length > $maxItems -1", "$cloneLabel"), addActionButtonComponent("$addNode($node.parent, $index)", "oi oi-plus", "", "$displayAddButton", "$node.parent.value.length > $maxItems -1", "$addLabel"), addActionButtonComponent("$moveNodeDown($node.parent, $index)", "oi oi-arrow-down", "secondary", "$renderMoveButtons", "$index === $node.parent.value.length -1", "$moveDownLabel")], {
     class: buttonGroupClass
   }, render);
 }
@@ -39,6 +43,19 @@ function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass
     class: styleClass
   }, render);
 }
+function addUndoBar(render = "true") {
+  return addElement("div", [addElement("div", [addElement("span", ["$deletedLabel"]), addComponent("Button", {
+    onClick: "$undoRemoveNode($node)",
+    label: "$undoLabel",
+    size: "small",
+    variant: "text"
+  })], {
+    class: "formkit-repeater-undo"
+  }, "$removedItem")], {
+    "role": "status",
+    "aria-live": "polite"
+  }, render);
+}
 function addDragHandle(handleClass = "", iconClass = "", render = "true") {
   return addElement("span", [addElement("i", [], {
     class: iconClass
@@ -58,13 +75,14 @@ const formRepeaterDefinition = exports.formRepeaterDefinition = (0, _vue.createI
   onDragleave: "$dragNodeLeave($index)",
   onDrop: "$dropNode($node.parent, $index)",
   onDragend: "$dragNodeEnd"
-})], true, {})], true, "true", {
-  value: "$value"
+})], true, {}), addUndoBar("$undoDelete")], true, "true", {
+  value: "$value",
+  validation: "$repeaterValidation"
 })], {
   class: "$internalListClass",
   id: "$internalListId"
 }, true), {
-  props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton", "minItems", "maxItems", "displayDragHandle", "draggable", "dragHandleClass", "dragHandleIconClass"],
+  props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton", "minItems", "maxItems", "moveUpLabel", "moveDownLabel", "deleteLabel", "cloneLabel", "addLabel", "undoDelete", "undoLabel", "deletedLabel", "undoTimeout", "displayDragHandle", "draggable", "dragHandleClass", "dragHandleIconClass"],
   features: [addRepeaterHandler]
 });
 function addRepeaterHandler(node) {
@@ -72,12 +90,20 @@ function addRepeaterHandler(node) {
     array.splice(index2, 0, array.splice(index1, 1)[0]);
     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 || {};
+      const makeNewItem = () => (0, _clonePlain.clonePlain)(node.context?.newItem || {});
+      const instanceId = String(node.props.id ?? node.name);
+      const context = node.context;
+      context.dragOverIndex = null;
+      let undoTimer;
+      const forgetRemoved = () => {
+        clearTimeout(undoTimer);
+        undoTimer = void 0;
+        context.removedItem = void 0;
+      };
+      node.on("destroying", () => clearTimeout(undoTimer));
       node.context.listName = node.name;
       node.context.renderButtons = !node.context.hideButtonGroup;
       node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "";
@@ -89,39 +115,68 @@ function addRepeaterHandler(node) {
       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.moveUpLabel = node.context.moveUpLabel || "Move item up";
+      node.context.moveDownLabel = node.context.moveDownLabel || "Move item down";
+      node.context.deleteLabel = node.context.deleteLabel || "Delete item";
+      node.context.cloneLabel = node.context.cloneLabel || "Clone item";
+      node.context.addLabel = node.context.addLabel || "Add item below";
+      node.context.undoDelete = !!node.context.undoDelete;
+      node.context.undoLabel = node.context.undoLabel || "Undo";
+      node.context.deletedLabel = node.context.deletedLabel || "Item deleted";
+      node.context.undoTimeout = node.context.undoTimeout !== void 0 ? Number(node.context.undoTimeout) : 8e3;
+      node.context.removedItem = void 0;
+      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.repeaterValidation = [["+length", node.context.minItems, node.context.maxItems]];
+      node.context.internalListId = `formkit-items-${instanceId}`;
       node.context.getListItemClass = index => {
-        if (dragOverIndex === index && dragStartIndex !== index) return `${node.context?.internalListItemClass} formkit-repeater-drop-target`;
+        if (context.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}`;
+        return `formkit-item-${index}-${instanceId}`;
       };
       node.context.insertNode = parentNode => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
-          const newArray = [{
-            ...newItem
-          }, ...parentNode.value];
+          const newArray = [makeNewItem(), ...parentNode.value];
           parentNode.input(newArray, false);
         }
       };
       node.context.removeNode = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
+          const removed = (0, _clonePlain.clonePlain)(parentNode._value[index]);
           parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
+          if (context.undoDelete) {
+            clearTimeout(undoTimer);
+            context.removedItem = {
+              index,
+              item: removed
+            };
+            const timeout = Number(context.undoTimeout);
+            undoTimer = timeout > 0 ? setTimeout(forgetRemoved, timeout) : void 0;
+          }
+        }
+      };
+      node.context.undoRemoveNode = parentNode => () => {
+        const removed = context.removedItem;
+        if (removed && parentNode && Array.isArray(parentNode._value) && parentNode._value.length < Number(context.maxItems)) {
+          const array = [...parentNode.value];
+          array.splice(Math.min(removed.index, array.length), 0, (0, _clonePlain.clonePlain)(removed.item));
+          parentNode.input(array, false);
         }
+        forgetRemoved();
       };
       node.context.addNode = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
           const array = parentNode.value;
-          array.splice(index + 1, 0, newItem);
+          array.splice(index + 1, 0, makeNewItem());
           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);
+          array.splice(index + 1, 0, (0, _clonePlain.clonePlain)(array[index]));
           parentNode.input(array, false);
         }
       };
@@ -144,35 +199,35 @@ function addRepeaterHandler(node) {
       };
       node.context.dragNodeOver = targetIndex => event => {
         event?.preventDefault();
-        dragOverIndex = targetIndex;
+        context.dragOverIndex = targetIndex;
         if (event?.dataTransfer) event.dataTransfer.dropEffect = "move";
       };
       node.context.dragNodeLeave = targetIndex => () => {
-        if (dragOverIndex === targetIndex) dragOverIndex = null;
+        if (context.dragOverIndex === targetIndex) context.dragOverIndex = null;
       };
       node.context.dropNode = (parentNode, targetIndex) => event => {
         event?.preventDefault();
         if (!parentNode || !Array.isArray(parentNode._value)) {
-          dragOverIndex = null;
+          context.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;
+          context.dragOverIndex = null;
           return;
         }
         if (sourceIndex < 0 || sourceIndex >= parentNode.value.length) {
-          dragOverIndex = null;
+          context.dragOverIndex = null;
           return;
         }
         parentNode.input(swapElements(parentNode.value, sourceIndex, targetIndex), false);
         dragStartIndex = null;
-        dragOverIndex = null;
+        context.dragOverIndex = null;
       };
       node.context.dragNodeEnd = () => {
         dragStartIndex = null;
-        dragOverIndex = null;
+        context.dragOverIndex = null;
       };
     }
   });

package/dist/definitions/repeater.mjs

@@ -1,23 +1,54 @@
 import { createInput } from "@formkit/vue";
 import { useFormKitSchema } from "../composables/index.mjs";
+import { clonePlain } from "../utils/clonePlain.mjs";
 const { addList, addElement, addListGroup, addComponent } = useFormKitSchema();
 function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", buttonSize, render = "true") {
-  const addActionButtonComponent = (onClick = "", icon = "", severity = "", render2 = "true", disabled = "false") => {
-    return addElement("div", [addComponent("Button", { onClick, icon, severity, disabled, size: buttonSize })], { class: buttonGroupItemClass }, render2);
+  const addActionButtonComponent = (onClick = "", icon = "", severity = "", render2 = "true", disabled = "false", label = "") => {
+    const name = `${label} + " " + ($index + 1)`;
+    return addElement("div", [
+      addComponent("Button", {
+        "onClick": onClick,
+        icon,
+        severity,
+        disabled,
+        "size": buttonSize,
+        "aria-label": name,
+        "title": name
+      })
+    ], { class: buttonGroupItemClass }, render2);
   };
   return addElement("div", [
-    addActionButtonComponent("$moveNodeUp($node.parent, $index)", "oi oi-arrow-up", "secondary", "$renderMoveButtons", "$index === 0"),
-    addActionButtonComponent("$removeNode($node.parent, $index)", "oi oi-trash", "danger", "$displayDeleteButton", "$node.parent.value.length === $minItems"),
-    addActionButtonComponent("$cloneNode($node.parent, $index)", "oi oi-clone", "", "$displayCloneButton", "$node.parent.value.length > $maxItems -1"),
-    addActionButtonComponent("$addNode($node.parent, $index)", "oi oi-plus", "", "$displayAddButton", "$node.parent.value.length > $maxItems -1"),
-    addActionButtonComponent("$moveNodeDown($node.parent, $index)", "oi oi-arrow-down", "secondary", "$renderMoveButtons", "$index === $node.parent.value.length -1")
+    addActionButtonComponent("$moveNodeUp($node.parent, $index)", "oi oi-arrow-up", "secondary", "$renderMoveButtons", "$index === 0", "$moveUpLabel"),
+    addActionButtonComponent("$removeNode($node.parent, $index)", "oi oi-trash", "danger", "$displayDeleteButton", "$node.parent.value.length === $minItems", "$deleteLabel"),
+    addActionButtonComponent("$cloneNode($node.parent, $index)", "oi oi-clone", "", "$displayCloneButton", "$node.parent.value.length > $maxItems -1", "$cloneLabel"),
+    addActionButtonComponent("$addNode($node.parent, $index)", "oi oi-plus", "", "$displayAddButton", "$node.parent.value.length > $maxItems -1", "$addLabel"),
+    addActionButtonComponent("$moveNodeDown($node.parent, $index)", "oi oi-arrow-down", "secondary", "$renderMoveButtons", "$index === $node.parent.value.length -1", "$moveDownLabel")
   ], { class: buttonGroupClass }, render);
 }
 function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", buttonSize, render = "true") {
   return addElement("div", [
-    addComponent("Button", { onClick: "$insertNode($node)", label, icon, size: buttonSize, disabled: "$node.value.length > $maxItems -1" })
+    addComponent("Button", {
+      onClick: "$insertNode($node)",
+      label,
+      icon,
+      size: buttonSize,
+      disabled: "$node.value.length > $maxItems -1"
+    })
   ], { class: styleClass }, render);
 }
+function addUndoBar(render = "true") {
+  return addElement("div", [
+    addElement("div", [
+      addElement("span", ["$deletedLabel"]),
+      addComponent("Button", {
+        onClick: "$undoRemoveNode($node)",
+        label: "$undoLabel",
+        size: "small",
+        variant: "text"
+      })
+    ], { class: "formkit-repeater-undo" }, "$removedItem")
+  ], { "role": "status", "aria-live": "polite" }, render);
+}
 function addDragHandle(handleClass = "", iconClass = "", render = "true") {
   return addElement("span", [
     addElement("i", [], { class: iconClass })
@@ -45,11 +76,43 @@ export const formRepeaterDefinition = createInput(
           onDrop: "$dropNode($node.parent, $index)",
           onDragend: "$dragNodeEnd"
         })
-      ], true, {})
-    ], true, "true", { value: "$value" })
+      ], true, {}),
+      addUndoBar("$undoDelete")
+    ], true, "true", { value: "$value", validation: "$repeaterValidation" })
   ], { class: "$internalListClass", id: "$internalListId" }, true),
   {
-    props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton", "minItems", "maxItems", "displayDragHandle", "draggable", "dragHandleClass", "dragHandleIconClass"],
+    props: [
+      "insertButtonLabel",
+      "insertButtonClass",
+      "insertButtonSize",
+      "alwaysDisplayInsertButton",
+      "newItem",
+      "listClass",
+      "listItemClass",
+      "hideButtonGroup",
+      "hideMoveButtons",
+      "buttonGroupClass",
+      "buttonGroupItemClass",
+      "buttonSize",
+      "displayCloneButton",
+      "displayAddButton",
+      "displayDeleteButton",
+      "minItems",
+      "maxItems",
+      "moveUpLabel",
+      "moveDownLabel",
+      "deleteLabel",
+      "cloneLabel",
+      "addLabel",
+      "undoDelete",
+      "undoLabel",
+      "deletedLabel",
+      "undoTimeout",
+      "displayDragHandle",
+      "draggable",
+      "dragHandleClass",
+      "dragHandleIconClass"
+    ],
     features: [addRepeaterHandler]
   }
 );
@@ -58,12 +121,20 @@ function addRepeaterHandler(node) {
     array.splice(index2, 0, array.splice(index1, 1)[0]);
     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 || {};
+      const makeNewItem = () => clonePlain(node.context?.newItem || {});
+      const instanceId = String(node.props.id ?? node.name);
+      const context = node.context;
+      context.dragOverIndex = null;
+      let undoTimer;
+      const forgetRemoved = () => {
+        clearTimeout(undoTimer);
+        undoTimer = void 0;
+        context.removedItem = void 0;
+      };
+      node.on("destroying", () => clearTimeout(undoTimer));
       node.context.listName = node.name;
       node.context.renderButtons = !node.context.hideButtonGroup;
       node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "";
@@ -75,38 +146,71 @@ function addRepeaterHandler(node) {
       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.moveUpLabel = node.context.moveUpLabel || "Move item up";
+      node.context.moveDownLabel = node.context.moveDownLabel || "Move item down";
+      node.context.deleteLabel = node.context.deleteLabel || "Delete item";
+      node.context.cloneLabel = node.context.cloneLabel || "Clone item";
+      node.context.addLabel = node.context.addLabel || "Add item below";
+      node.context.undoDelete = !!node.context.undoDelete;
+      node.context.undoLabel = node.context.undoLabel || "Undo";
+      node.context.deletedLabel = node.context.deletedLabel || "Item deleted";
+      node.context.undoTimeout = node.context.undoTimeout !== void 0 ? Number(node.context.undoTimeout) : 8e3;
+      node.context.removedItem = void 0;
+      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.repeaterValidation = [
+        ["+length", node.context.minItems, node.context.maxItems]
+      ];
+      node.context.internalListId = `formkit-items-${instanceId}`;
       node.context.getListItemClass = (index) => {
-        if (dragOverIndex === index && dragStartIndex !== index)
+        if (context.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}`;
+        return `formkit-item-${index}-${instanceId}`;
       };
       node.context.insertNode = (parentNode) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
-          const newArray = [{ ...newItem }, ...parentNode.value];
+          const newArray = [
+            makeNewItem(),
+            ...parentNode.value
+          ];
           parentNode.input(newArray, false);
         }
       };
       node.context.removeNode = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
+          const removed = clonePlain(parentNode._value[index]);
           parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
+          if (context.undoDelete) {
+            clearTimeout(undoTimer);
+            context.removedItem = { index, item: removed };
+            const timeout = Number(context.undoTimeout);
+            undoTimer = timeout > 0 ? setTimeout(forgetRemoved, timeout) : void 0;
+          }
+        }
+      };
+      node.context.undoRemoveNode = (parentNode) => () => {
+        const removed = context.removedItem;
+        if (removed && parentNode && Array.isArray(parentNode._value) && parentNode._value.length < Number(context.maxItems)) {
+          const array = [...parentNode.value];
+          array.splice(Math.min(removed.index, array.length), 0, clonePlain(removed.item));
+          parentNode.input(array, false);
         }
+        forgetRemoved();
       };
       node.context.addNode = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
           const array = parentNode.value;
-          array.splice(index + 1, 0, newItem);
+          array.splice(index + 1, 0, makeNewItem());
           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);
+          array.splice(index + 1, 0, clonePlain(array[index]));
           parentNode.input(array, false);
         }
       };
@@ -131,37 +235,37 @@ function addRepeaterHandler(node) {
       };
       node.context.dragNodeOver = (targetIndex) => (event) => {
         event?.preventDefault();
-        dragOverIndex = targetIndex;
+        context.dragOverIndex = targetIndex;
         if (event?.dataTransfer)
           event.dataTransfer.dropEffect = "move";
       };
       node.context.dragNodeLeave = (targetIndex) => () => {
-        if (dragOverIndex === targetIndex)
-          dragOverIndex = null;
+        if (context.dragOverIndex === targetIndex)
+          context.dragOverIndex = null;
       };
       node.context.dropNode = (parentNode, targetIndex) => (event) => {
         event?.preventDefault();
         if (!parentNode || !Array.isArray(parentNode._value)) {
-          dragOverIndex = null;
+          context.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;
+          context.dragOverIndex = null;
           return;
         }
         if (sourceIndex < 0 || sourceIndex >= parentNode.value.length) {
-          dragOverIndex = null;
+          context.dragOverIndex = null;
           return;
         }
         parentNode.input(swapElements(parentNode.value, sourceIndex, targetIndex), false);
         dragStartIndex = null;
-        dragOverIndex = null;
+        context.dragOverIndex = null;
       };
       node.context.dragNodeEnd = () => {
         dragStartIndex = null;
-        dragOverIndex = null;
+        context.dragOverIndex = null;
       };
     }
   });

package/dist/plugins/autoAnimate.d.ts

@@ -0,0 +1,9 @@
+import type { AutoAnimateOptions } from '@formkit/auto-animate';
+import type { FormKitNode } from '@formkit/core';
+/** Sections to animate, per input type. `global` applies to every input. */
+export type AutoAnimateTargets = Record<string, string[]>;
+/**
+ * Drop-in replacement for `createAutoAnimatePlugin` from `@formkit/addons` with the same
+ * arguments, that does not stack animations on an element after inputs are added to it.
+ */
+export declare function createAutoAnimatePlugin(options?: Partial<AutoAnimateOptions>, targets?: AutoAnimateTargets): (node: FormKitNode) => void;

package/dist/plugins/autoAnimate.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAutoAnimatePlugin = createAutoAnimatePlugin;
+var _autoAnimate = _interopRequireDefault(require("@formkit/auto-animate"));
+var _core = require("@formkit/core");
+var _inputs = require("@formkit/inputs");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DEFAULT_KEY = "true";
+const optionsByKey = /* @__PURE__ */new Map();
+const attached = /* @__PURE__ */new WeakSet();
+const pendingIds = /* @__PURE__ */new Set();
+let observer = null;
+let attachTimer;
+function attachNewTargets() {
+  if (typeof document === "undefined") return;
+  document.querySelectorAll("[data-auto-animate]").forEach(target => {
+    if (attached.has(target)) return;
+    attached.add(target);
+    (0, _autoAnimate.default)(target, optionsByKey.get(target.getAttribute("data-auto-animate") ?? "") ?? {});
+  });
+}
+function checkPendingIds() {
+  if (typeof document === "undefined") return;
+  pendingIds.forEach(id => {
+    if (!document.getElementById(id)) return;
+    pendingIds.delete(id);
+    clearTimeout(attachTimer);
+    attachTimer = setTimeout(attachNewTargets, 250);
+  });
+}
+function observeUntilRendered() {
+  if (observer || typeof document === "undefined") return;
+  checkPendingIds();
+  if (!pendingIds.size) return;
+  observer = new MutationObserver(() => {
+    checkPendingIds();
+    if (!pendingIds.size) {
+      observer?.disconnect();
+      observer = null;
+    }
+  });
+  observer.observe(document, {
+    childList: true,
+    subtree: true
+  });
+}
+function createAutoAnimatePlugin(options = {}, targets = {}) {
+  optionsByKey.set(DEFAULT_KEY, options);
+  return node => {
+    node.on("created", () => {
+      if (typeof node.props.definition?.schema !== "function") return;
+      const typeTargets = targets[node.props.type] ?? [];
+      const originalSchema = node.props.definition.schema;
+      node.props.definition.schema = extensions => {
+        const schema = originalSchema(extensions);
+        const finalSchema = Array.isArray(schema) ? schema[0] : schema;
+        let marked = false;
+        (0, _inputs.eachSection)(finalSchema, section => {
+          if (!(0, _core.isDOM)(section)) return;
+          let key;
+          const meta = section.meta;
+          if (meta?.autoAnimate) {
+            key = DEFAULT_KEY;
+            if (typeof meta.autoAnimate === "object") {
+              key = `${node.props.id}-${meta.section ?? "section"}`;
+              optionsByKey.set(key, {
+                ...options,
+                ...meta.autoAnimate
+              });
+            }
+          } else {
+            const sectionName = meta?.section;
+            if (typeof sectionName === "string" && (targets.global?.includes(sectionName) || typeTargets.includes(sectionName))) key = DEFAULT_KEY;
+          }
+          if (key === void 0) return;
+          section.attrs = {
+            ...section.attrs,
+            "data-auto-animate": key
+          };
+          marked = true;
+        });
+        if (marked && node.props.id && typeof window !== "undefined") {
+          pendingIds.add(node.props.id);
+          observeUntilRendered();
+        }
+        return finalSchema;
+      };
+    });
+  };
+}