@sfxcode/formkit-primevue 4.1.10 → 4.2.1

package/dist/components/FormKitDataEdit.vue

@@ -3,7 +3,7 @@ import type { FormKitSchemaDefinition } from '@formkit/core'
 import type { PropType } from 'vue'
 import { reset } from '@formkit/core'
 import { FormKit, FormKitMessages, FormKitSchema } from '@formkit/vue'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import FormKitDataDebug from './FormKitDataDebug.vue'
 
 const props = defineProps({
@@ -82,6 +82,17 @@ if (props.data) {
 
 const formSchema = ref(props.schema)
 
+// Watch for changes to props and update internal refs
+watch(() => props.schema, (newSchema) => {
+  formSchema.value = newSchema
+}, { deep: true })
+
+watch(() => props.data, (newData) => {
+  if (newData && newData !== formData.value) {
+    formData.value = newData
+  }
+}, { deep: true })
+
 function handleSave() {
   emit('dataSaved', formData.value)
 }

package/dist/components/FormKitDataView.vue

@@ -3,7 +3,7 @@ import type { FormKitSchemaDefinition } from '@formkit/core'
 import type { PropType } from 'vue'
 
 import { FormKit, FormKitSchema } from '@formkit/vue'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import FormKitDataDebug from './FormKitDataDebug.vue'
 
 const props = defineProps({
@@ -33,6 +33,17 @@ const formSchema = ref(props.schema)
 
 const formData = defineModel<any>()
 
+// Watch for changes to props and update internal refs
+watch(() => props.schema, (newSchema) => {
+  formSchema.value = newSchema
+}, { deep: true })
+
+watch(() => props.data, (newData) => {
+  if (newData && newData !== formData.value) {
+    formData.value = newData
+  }
+}, { deep: true })
+
 if (props.data) {
   formData.value = props.data
 }

package/dist/components/PrimeListbox.d.vue.ts

@@ -31,6 +31,10 @@ export interface FormKitPrimeListboxProps {
     transferRightHeaderText?: string;
     transferHeaderClass?: string;
     transferAll?: boolean;
+    transferButtonSeverity?: string;
+    transferContainerClass?: string;
+    transferListContainerClass?: string;
+    transferButtonClass?: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/components/PrimeListbox.vue

@@ -35,6 +35,10 @@ export interface FormKitPrimeListboxProps {
   transferRightHeaderText?: string
   transferHeaderClass?: string
   transferAll?: boolean
+  transferButtonSeverity?: string
+  transferContainerClass?: string
+  transferListContainerClass?: string
+  transferButtonClass?: string
 }
 
 const props = defineProps({
@@ -44,7 +48,24 @@ const props = defineProps({
   },
 })
 
-const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, handleChange, modelValue } = useFormKitInput(props.context)
+
+// Computed properties for transfer mode styling
+const transferContainerClass = computed(() => {
+  return props.context.transferContainerClass || 'p-formkit-transfer'
+})
+
+const transferListContainerClass = computed(() => {
+  return props.context.transferListContainerClass || 'p-formkit-transfer-list-container'
+})
+
+const transferButtonClass = computed(() => {
+  return props.context.transferButtonClass || ''
+})
+
+const transferButtonSeverity = computed(() => {
+  return props.context.transferButtonSeverity || 'secondary'
+})
 
 // Transfer List functionality
 const optionValueKey = computed(() => {
@@ -89,22 +110,30 @@ const sourceItems = computed(() => {
 })
 
 function transferSelected() {
-  // sourceSelection now contains full objects since we removed optionValue
+  if (sourceSelection.value.length === 0)
+    return
+  // Use splice-based approach for better performance
   targetItems.value = [...targetItems.value, ...sourceSelection.value]
   sourceSelection.value = []
 }
 
 function transferAll() {
+  if (sourceItems.value.length === 0)
+    return
   targetItems.value = [...targetItems.value, ...sourceItems.value]
   sourceSelection.value = []
 }
 
 function removeSelected() {
-  // targetSelection now contains full objects since we removed optionValue
+  if (targetSelection.value.length === 0)
+    return
+
+  // Filter out selected items using splice-inspired logic
+  const valueKey = optionValueKey.value
   targetItems.value = targetItems.value.filter((item: any) => {
-    const itemValue = optionValueKey.value && typeof item === 'object' ? item[optionValueKey.value] : item
+    const itemValue = valueKey && typeof item === 'object' ? item[valueKey] : item
     return !targetSelection.value.some((sel: any) => {
-      const selValue = optionValueKey.value && typeof sel === 'object' ? sel[optionValueKey.value] : sel
+      const selValue = valueKey && typeof sel === 'object' ? sel[valueKey] : sel
       return selValue === itemValue
     })
   })
@@ -112,6 +141,8 @@ function removeSelected() {
 }
 
 function removeAll() {
+  if (targetItems.value.length === 0)
+    return
   targetItems.value = []
   targetSelection.value = []
 }
@@ -119,6 +150,7 @@ function removeAll() {
 watch(targetItems, (newVal) => {
   modelValue.value = newVal
   handleInput(newVal)
+  handleChange(newVal)
 }, { deep: true })
 
 // Watch for external changes to modelValue and update targetItems
@@ -168,7 +200,8 @@ watch(() => modelValue.value, (newVal) => {
       :pt="context.pt"
       :pt-options="context.ptOptions"
       :unstyled="unstyled"
-      @change="handleInput"
+      @update:model-value="handleInput"
+      @change="handleChange"
       @blur="handleBlur"
     >
       <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
@@ -180,11 +213,10 @@ watch(() => modelValue.value, (newVal) => {
   <!-- Transfer Mode -->
   <div
     v-if="context.displayMode === 'transfer'"
-    class="p-formkit-transfer"
-    style="display: flex; align-items: stretch; gap: 1rem; width: 100%;"
+    :class="transferContainerClass"
   >
     <!-- Source List -->
-    <div style="display: flex; flex-direction: column; flex: 1; gap: 0.5rem; min-width: 0;">
+    <div :class="transferListContainerClass">
       <span
         v-if="context.transferLeftHeaderText"
         :class="transferHeaderClass"
@@ -199,7 +231,7 @@ watch(() => modelValue.value, (newVal) => {
         :class="context?.attrs?.class"
         :invalid="isInvalid"
         :tabindex="context?.attrs.tabindex"
-        :aria-label="context?.attrs.ariaLabel"
+        :aria-label="context?.attrs.ariaLabel || 'Source list'"
         :aria-labelledby="context?.attrs.ariaLabelledby"
         :options="sourceItems"
         :option-label="context.optionLabel"
@@ -229,19 +261,21 @@ watch(() => modelValue.value, (newVal) => {
     </div>
 
     <!-- Transfer Buttons -->
-    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;">
+    <div class="p-formkit-transfer-buttons">
       <Button
         icon="pi pi-angle-right"
-        severity="secondary"
+        :severity="transferButtonSeverity"
+        :class="transferButtonClass"
         outlined
         :disabled="sourceSelection.length === 0"
-        aria-label="Move selected to target"
+        :aria-label="context.transferAll ? 'Move selected to target' : 'Move to target'"
         @click="transferSelected"
       />
       <Button
         v-if="context.transferAll"
         icon="pi pi-angle-double-right"
-        severity="secondary"
+        :severity="transferButtonSeverity"
+        :class="transferButtonClass"
         outlined
         :disabled="sourceItems.length === 0"
         aria-label="Move all to target"
@@ -249,16 +283,18 @@ watch(() => modelValue.value, (newVal) => {
       />
       <Button
         icon="pi pi-angle-left"
-        severity="secondary"
+        :severity="transferButtonSeverity"
+        :class="transferButtonClass"
         outlined
         :disabled="targetSelection.length === 0"
-        aria-label="Move selected to source"
+        :aria-label="context.transferAll ? 'Move selected to source' : 'Move to source'"
         @click="removeSelected"
       />
       <Button
         v-if="context.transferAll"
         icon="pi pi-angle-double-left"
-        severity="secondary"
+        :severity="transferButtonSeverity"
+        :class="transferButtonClass"
         outlined
         :disabled="targetItems.length === 0"
         aria-label="Move all to source"
@@ -267,7 +303,7 @@ watch(() => modelValue.value, (newVal) => {
     </div>
 
     <!-- Target List -->
-    <div style="display: flex; flex-direction: column; flex: 1; gap: 0.5rem; min-width: 0;">
+    <div :class="transferListContainerClass">
       <span
         v-if="context.transferRightHeaderText"
         :class="transferHeaderClass"
@@ -282,7 +318,7 @@ watch(() => modelValue.value, (newVal) => {
         :class="context?.attrs?.class"
         :invalid="isInvalid"
         :tabindex="context?.attrs.tabindex"
-        :aria-label="context?.attrs.ariaLabel"
+        :aria-label="context?.attrs.ariaLabel || 'Target list'"
         :aria-labelledby="context?.attrs.ariaLabelledby"
         :options="targetItems"
         :option-label="context.optionLabel"

package/dist/components/PrimeListbox.vue.d.ts

@@ -31,6 +31,10 @@ export interface FormKitPrimeListboxProps {
     transferRightHeaderText?: string;
     transferHeaderClass?: string;
     transferAll?: boolean;
+    transferButtonSeverity?: string;
+    transferContainerClass?: string;
+    transferListContainerClass?: string;
+    transferButtonClass?: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/definitions/repeater.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.primeRepeaterDefinition = void 0;
 var _vue = require("@formkit/vue");
-var _useFormKitSchema = require("../composables/useFormKitSchema");
+var _composables = require("../composables");
 const {
   addList,
   addElement,
   addListGroup,
   addComponent
-} = (0, _useFormKitSchema.useFormKitSchema)();
+} = (0, _composables.useFormKitSchema)();
 function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", buttonSize, render = "true") {
   const addActionButtonComponent = (onClick = "", icon = "", severity = "", render2 = "true", disabled = "false") => {
     return addElement("div", [addComponent("Button", {
@@ -24,7 +24,7 @@ function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", button
       class: buttonGroupItemClass
     }, render2);
   };
-  return addElement("div", [addActionButtonComponent("$moveNodeUp($node.parent, $index)", "pi pi-arrow-up", "secondary", "$renderMoveButtons", "$index === 0"), addActionButtonComponent("$removeNode($node.parent, $index)", "pi pi-trash", "danger", "$displayDeleteButton", "$false"), addActionButtonComponent("$cloneNode($node.parent, $index)", "pi pi-clone", "", "$displayCloneButton", "$false"), addActionButtonComponent("$addNode($node.parent, $index)", "pi pi-plus", "", "$displayAddButton", "$false"), addActionButtonComponent("$moveNodeDown($node.parent, $index)", "pi pi-arrow-down", "secondary", "$renderMoveButtons", "$index === $node.parent.value.length -1")], {
+  return addElement("div", [addActionButtonComponent("$moveNodeUp($node.parent, $index)", "pi pi-arrow-up", "secondary", "$renderMoveButtons", "$index === 0"), addActionButtonComponent("$removeNode($node.parent, $index)", "pi pi-trash", "danger", "$displayDeleteButton", "$node.parent.value.length === $minItems"), addActionButtonComponent("$cloneNode($node.parent, $index)", "pi pi-clone", "", "$displayCloneButton", "$node.parent.value.length > $maxItems -1"), addActionButtonComponent("$addNode($node.parent, $index)", "pi pi-plus", "", "$displayAddButton", "$node.parent.value.length > $maxItems -1"), addActionButtonComponent("$moveNodeDown($node.parent, $index)", "pi pi-arrow-down", "secondary", "$renderMoveButtons", "$index === $node.parent.value.length -1")], {
     class: buttonGroupClass
   }, render);
 }
@@ -33,39 +33,62 @@ function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass
     onClick: "$insertNode($node)",
     label,
     icon,
-    size: buttonSize
+    size: buttonSize,
+    disabled: "$node.value.length > $maxItems -1"
   })], {
     class: styleClass
   }, render);
 }
-const primeRepeaterDefinition = exports.primeRepeaterDefinition = (0, _vue.createInput)(addElement("div", [addList("$listName", [addInsertButton("$insertButtonLabel", "pi pi-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"), addListGroup([addElement("div", [{
+function addDragHandle(handleClass = "", iconClass = "", render = "true") {
+  return addElement("span", [addElement("i", [], {
+    class: iconClass
+  })], {
+    "class": handleClass,
+    "aria-label": "Drag to reorder"
+  }, render);
+}
+const primeRepeaterDefinition = exports.primeRepeaterDefinition = (0, _vue.createInput)(addElement("div", [addList("$listName", [addInsertButton("$insertButtonLabel", "pi pi-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"), addListGroup([addElement("div", [addDragHandle("$internalDragHandleClass", "$dragHandleIconClass", "$renderDragHandle"), {
   children: "$slots.default"
 }, addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")], {
-  class: "$internalListItemClass"
+  class: "$getListItemClass($index)",
+  draggable: "$renderDragHandle",
+  onDragstart: "$dragNodeStart($node.parent, $index)",
+  onDragover: "$dragNodeOver($index)",
+  onDragleave: "$dragNodeLeave($index)",
+  onDrop: "$dropNode($node.parent, $index)",
+  onDragend: "$dragNodeEnd"
 })], true, {})], true, "true")], {
-  class: "$internalListClass"
+  class: "$internalListClass",
+  id: "$internalListId"
 }, true), {
-  props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton"],
+  props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton", "minItems", "maxItems", "displayDragHandle", "dragHandleClass", "dragHandleIconClass"],
   features: [addRepeaterHandler]
 });
 function addRepeaterHandler(node) {
   const swapElements = (array, index1, index2) => {
-    const newArray = [...array];
-    const temp = newArray[index1];
-    newArray[index1] = newArray[index2];
-    newArray[index2] = temp;
-    return newArray;
+    array.splice(index2, 0, array.splice(index1, 1)[0]);
+    return array;
   };
   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 : "";
       node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "";
       node.context.renderMoveButtons = !node.context.hideMoveButtons;
+      node.context.renderDragHandle = !!node.context.displayDragHandle;
+      node.context.dragHandleIconClass = node.context.dragHandleIconClass || "pi pi-bars";
+      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-prime-repeater-${String(node.props.id || node.name || "list").replace(/[^\w-]/g, "-")}`;
+      node.context.getListItemClass = index => {
+        if (dragOverIndex === index && dragStartIndex !== index) return `${node.context?.internalListItemClass} formkit-repeater-drop-target`;
+        return node.context?.internalListItemClass?.toString() ?? "";
+      };
       node.context.insertNode = parentNode => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
           const newArray = [{
@@ -81,33 +104,68 @@ function addRepeaterHandler(node) {
       };
       node.context.addNode = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
-          const newArray = [...parentNode.value.slice(0, index + 1), {
-            ...newItem
-          }, ...parentNode.value.slice(index + 1)];
-          parentNode.input([...newArray], false);
+          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 newArray = [...parentNode.value.slice(0, index + 1), {
-            ...item
-          }, ...parentNode.value.slice(index + 1)];
-          parentNode.input([...newArray], false);
+          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)) {
-          const array = [...parentNode.value];
-          if (index > 0) parentNode.input(swapElements(array, index - 1, index), false);
+          if (index > 0) parentNode.input(swapElements(parentNode.value, index - 1, index), false);
         }
       };
       node.context.moveNodeDown = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
-          const array = [...parentNode.value];
-          if (index < array.length - 1) parentNode.input(swapElements(array, index, index + 1), false);
+          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/definitions/repeater.mjs

@@ -1,5 +1,5 @@
 import { createInput } from "@formkit/vue";
-import { useFormKitSchema } from "../composables/useFormKitSchema.mjs";
+import { useFormKitSchema } from "../composables/index.mjs";
 const { addList, addElement, addListGroup, addComponent } = useFormKitSchema();
 function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", buttonSize, render = "true") {
   const addActionButtonComponent = (onClick = "", icon = "", severity = "", render2 = "true", disabled = "false") => {
@@ -7,49 +7,77 @@ function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", button
   };
   return addElement("div", [
     addActionButtonComponent("$moveNodeUp($node.parent, $index)", "pi pi-arrow-up", "secondary", "$renderMoveButtons", "$index === 0"),
-    addActionButtonComponent("$removeNode($node.parent, $index)", "pi pi-trash", "danger", "$displayDeleteButton", "$false"),
-    addActionButtonComponent("$cloneNode($node.parent, $index)", "pi pi-clone", "", "$displayCloneButton", "$false"),
-    addActionButtonComponent("$addNode($node.parent, $index)", "pi pi-plus", "", "$displayAddButton", "$false"),
+    addActionButtonComponent("$removeNode($node.parent, $index)", "pi pi-trash", "danger", "$displayDeleteButton", "$node.parent.value.length === $minItems"),
+    addActionButtonComponent("$cloneNode($node.parent, $index)", "pi pi-clone", "", "$displayCloneButton", "$node.parent.value.length > $maxItems -1"),
+    addActionButtonComponent("$addNode($node.parent, $index)", "pi pi-plus", "", "$displayAddButton", "$node.parent.value.length > $maxItems -1"),
     addActionButtonComponent("$moveNodeDown($node.parent, $index)", "pi pi-arrow-down", "secondary", "$renderMoveButtons", "$index === $node.parent.value.length -1")
   ], { 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 })
+    addComponent("Button", { onClick: "$insertNode($node)", label, icon, size: buttonSize, disabled: "$node.value.length > $maxItems -1" })
   ], { class: styleClass }, render);
 }
+function addDragHandle(handleClass = "", iconClass = "", render = "true") {
+  return addElement("span", [
+    addElement("i", [], { class: iconClass })
+  ], {
+    "class": handleClass,
+    "aria-label": "Drag to reorder"
+  }, render);
+}
 export const primeRepeaterDefinition = createInput(
   addElement("div", [
     addList("$listName", [
       addInsertButton("$insertButtonLabel", "pi pi-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"),
       addListGroup([
-        addElement("div", [{ children: "$slots.default" }, addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")], { class: "$internalListItemClass" })
+        addElement("div", [
+          addDragHandle("$internalDragHandleClass", "$dragHandleIconClass", "$renderDragHandle"),
+          { children: "$slots.default" },
+          addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")
+        ], {
+          class: "$getListItemClass($index)",
+          draggable: "$renderDragHandle",
+          onDragstart: "$dragNodeStart($node.parent, $index)",
+          onDragover: "$dragNodeOver($index)",
+          onDragleave: "$dragNodeLeave($index)",
+          onDrop: "$dropNode($node.parent, $index)",
+          onDragend: "$dragNodeEnd"
+        })
       ], true, {})
     ], true, "true")
-  ], { class: "$internalListClass" }, true),
+  ], { class: "$internalListClass", id: "$internalListId" }, true),
   {
-    props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton"],
+    props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton", "minItems", "maxItems", "displayDragHandle", "dragHandleClass", "dragHandleIconClass"],
     features: [addRepeaterHandler]
   }
 );
 function addRepeaterHandler(node) {
   const swapElements = (array, index1, index2) => {
-    const newArray = [...array];
-    const temp = newArray[index1];
-    newArray[index1] = newArray[index2];
-    newArray[index2] = temp;
-    return newArray;
+    array.splice(index2, 0, array.splice(index1, 1)[0]);
+    return array;
   };
   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 : "";
       node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "";
       node.context.renderMoveButtons = !node.context.hideMoveButtons;
+      node.context.renderDragHandle = !!node.context.displayDragHandle;
+      node.context.dragHandleIconClass = node.context.dragHandleIconClass || "pi pi-bars";
+      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-prime-repeater-${String(node.props.id || node.name || "list").replace(/[^\w-]/g, "-")}`;
+      node.context.getListItemClass = (index) => {
+        if (dragOverIndex === index && dragStartIndex !== index)
+          return `${node.context?.internalListItemClass} formkit-repeater-drop-target`;
+        return node.context?.internalListItemClass?.toString() ?? "";
+      };
       node.context.insertNode = (parentNode) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
           const newArray = [{ ...newItem }, ...parentNode.value];
@@ -63,31 +91,72 @@ function addRepeaterHandler(node) {
       };
       node.context.addNode = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
-          const newArray = [...parentNode.value.slice(0, index + 1), { ...newItem }, ...parentNode.value.slice(index + 1)];
-          parentNode.input([...newArray], false);
+          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 newArray = [...parentNode.value.slice(0, index + 1), { ...item }, ...parentNode.value.slice(index + 1)];
-          parentNode.input([...newArray], false);
+          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)) {
-          const array = [...parentNode.value];
           if (index > 0)
-            parentNode.input(swapElements(array, index - 1, index), false);
+            parentNode.input(swapElements(parentNode.value, index - 1, index), false);
         }
       };
       node.context.moveNodeDown = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
-          const array = [...parentNode.value];
-          if (index < array.length - 1)
-            parentNode.input(swapElements(array, index, index + 1), false);
+          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/sass/formkit-primevue.scss

@@ -177,6 +177,27 @@ $grid-breakpoints: (
     border-radius: 1rem;
     padding: 0.2rem 0.5rem;
   }
+
+  .formkit-repeater-drag-handle {
+    display: inline-flex;
+    align-items: center;
+    cursor: grab;
+    user-select: none;
+  }
+
+  .formkit-item[draggable="true"] {
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    &.formkit-repeater-drop-target {
+      outline: 1px dashed var(--p-primary-color, #3b82f6);
+      outline-offset: 2px;
+      background: color-mix(in srgb, var(--p-primary-color, #3b82f6) 12%, transparent);
+    }
+  }
 }
 
 // data view only
@@ -287,6 +308,30 @@ $grid-breakpoints: (
     }
 }
 
+// Listbox Transfer
+.p-formkit-transfer {
+  display: flex;
+  align-items: stretch;
+  gap: 1rem;
+  width: 100%;
+  min-width: 600px;
+}
+
+.p-formkit-transfer-list-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.p-formkit-transfer-buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
 
 
 // Debug

package/dist/style.css

@@ -1 +1 @@
-:root{--formkit-error-color: #ef9a9a}.formkit-form .formkit-messages{margin:.125rem 0;padding-top:.5rem;padding-left:.5rem}.formkit-form .formkit-message{list-style:none;padding:0;margin:0;color:var(--formkit-error-color);font-size:.8rem}.formkit-form .formkit-outer{padding-bottom:.8rem}.formkit-form .formkit-outer .formkit-messages{margin:.125rem 0;padding-top:.25rem;padding-left:0}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-formkit-icon{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor.p-colorpicker-preview{width:2rem}.formkit-form .formkit-outer .formkit-help{margin:.25rem 0 0 0;font-size:.8rem;color:var(--text-color-secondary)}.formkit-form .formkit-label{display:block;margin:0;padding-bottom:.5rem;font-weight:bold;font-size:.8rem}.formkit-form .p-formkit>*{margin-right:.5rem}.formkit-form .p-formkit>*:last-child,.formkit-form .p-formkit>*:only-child{margin-right:0}.formkit-form .p-formkit-options{display:flex;flex-wrap:wrap;gap:.5rem}.formkit-form .p-formkit-options .p-formkit-option{display:flex;align-items:center}.formkit-form .p-formkit-options .p-formkit-option label{margin-left:.5rem}.formkit-form .formkit-fieldset{margin:0;padding:0;border-radius:0;border:0}.formkit-form .formkit-fieldset:focus-within{border:0}.formkit-form .formkit-fieldset>.formkit-help{margin-top:0;margin-bottom:0}.formkit-form .formkit-legend{display:block;margin:0;padding:0}.formkit-form .formkit-actions{padding-top:.5rem;display:flex}.formkit-form .formkit-actions button{margin-right:.5rem}.formkit-form .p-action-buttons{margin-top:.25rem}.formkit-form .p-action-buttons .p-button{margin-right:.5rem}.formkit-form .p-action-buttons span .p-space{margin-right:3rem}.formkit-form .p-chip-item{align-items:center;background:var(--p-surface-500);color:var(--p-surface-0);border-radius:1rem;padding:.2rem .5rem}.p-formkit-data-view .formkit-outer{padding-bottom:.5rem}.p-formkit-data-view.form-horizontal{padding-bottom:.8rem}.p-formkit-data-view .formkit-help{padding-top:.25rem;margin:0}.p-formkit-data-view ul,.p-formkit-data-view ol{padding-inline-start:1rem;margin-block-start:0;margin-block-end:0}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper{display:flex;flex-wrap:wrap}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .formkit-inner{width:auto !important}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label{width:auto;order:2;padding:.125rem 0}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:after{content:""}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label+.formkit-inner{margin-left:0 !important;order:1;flex-basis:2rem;flex-grow:0;flex-shrink:0;overflow:hidden}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label+.formkit-inner:has(label){flex-grow:1;flex-basis:100%}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3),.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)~label{width:auto}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3){order:1}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)+div.p-checkbox{order:2;width:auto}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)~label{order:3}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .formkit-inner:first-child{margin-left:0 !important}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .formkit-inner:first-child .p-formkit{display:flex}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .p-checkbox:not(:only-child){width:2rem;overflow:hidden}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-help{width:auto !important}.p-formkit-data-debug pre,.p-formkit-data-debug span{font-size:.75rem;line-height:1rem}@media(min-width: 1024px){.formkit-form{display:flex;flex-wrap:wrap;margin-left:-0.5rem;margin-right:-0.5rem}.formkit-form>*{flex-shrink:0;width:100%;max-width:100%;padding-left:.5rem;padding-right:.5rem}.col-1{width:8.3333333333%}.col-2{width:16.6666666667%}.col-3{width:25%}.col-4{width:33.3333333333%}.col-5{width:41.6666666667%}.col-6{width:50%}.col-7{width:58.3333333333%}.col-8{width:66.6666666667%}.col-9{width:75%}.col-10{width:83.3333333333%}.col-11{width:91.6666666667%}.col-12{width:100%}}@media(min-width: 768px){.formkit-form.form-horizontal .formkit-wrapper{display:flex}.formkit-form.form-horizontal .formkit-wrapper label{display:inline-block;padding:0 .25rem 0 0;font-size:inherit}.formkit-form.form-horizontal .formkit-wrapper label:after{content:":"}}@media(min-width: 768px)and (min-width: 768px){.formkit-form.form-horizontal.form-horizontal-checkbox-indent .formkit-outer[data-type=primeCheckbox]{padding-left:33.3333333333%}}@media(min-width: 768px){.p-formkit-data-view .formkit-form.form-horizontal label{white-space:nowrap}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer{width:100%}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer label{width:33.3333333333%;padding-top:.25rem;line-height:normal}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer .formkit-inner{width:66.6666666667%}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=primeCheckbox] .formkit-inner{margin-left:auto}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=primeCheckbox] .formkit-inner .p-formkit{display:flex}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=primeCheckbox] .formkit-inner label{width:auto;padding:0}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-help,.p-formkit-data-edit .formkit-form.form-horizontal .formkit-messages{width:66.6666666667%;margin-left:auto}}
+:root{--formkit-error-color: #ef9a9a}.formkit-form .formkit-messages{margin:.125rem 0;padding-top:.5rem;padding-left:.5rem}.formkit-form .formkit-message{list-style:none;padding:0;margin:0;color:var(--formkit-error-color);font-size:.8rem}.formkit-form .formkit-outer{padding-bottom:.8rem}.formkit-form .formkit-outer .formkit-messages{margin:.125rem 0;padding-top:.25rem;padding-left:0}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-formkit-icon{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor.p-colorpicker-preview{width:2rem}.formkit-form .formkit-outer .formkit-help{margin:.25rem 0 0 0;font-size:.8rem;color:var(--text-color-secondary)}.formkit-form .formkit-label{display:block;margin:0;padding-bottom:.5rem;font-weight:bold;font-size:.8rem}.formkit-form .p-formkit>*{margin-right:.5rem}.formkit-form .p-formkit>*:last-child,.formkit-form .p-formkit>*:only-child{margin-right:0}.formkit-form .p-formkit-options{display:flex;flex-wrap:wrap;gap:.5rem}.formkit-form .p-formkit-options .p-formkit-option{display:flex;align-items:center}.formkit-form .p-formkit-options .p-formkit-option label{margin-left:.5rem}.formkit-form .formkit-fieldset{margin:0;padding:0;border-radius:0;border:0}.formkit-form .formkit-fieldset:focus-within{border:0}.formkit-form .formkit-fieldset>.formkit-help{margin-top:0;margin-bottom:0}.formkit-form .formkit-legend{display:block;margin:0;padding:0}.formkit-form .formkit-actions{padding-top:.5rem;display:flex}.formkit-form .formkit-actions button{margin-right:.5rem}.formkit-form .p-action-buttons{margin-top:.25rem}.formkit-form .p-action-buttons .p-button{margin-right:.5rem}.formkit-form .p-action-buttons span .p-space{margin-right:3rem}.formkit-form .p-chip-item{align-items:center;background:var(--p-surface-500);color:var(--p-surface-0);border-radius:1rem;padding:.2rem .5rem}.formkit-form .formkit-repeater-drag-handle{display:inline-flex;align-items:center;cursor:grab;user-select:none}.formkit-form .formkit-item[draggable=true]{cursor:grab}.formkit-form .formkit-item[draggable=true]:active{cursor:grabbing}.formkit-form .formkit-item[draggable=true].formkit-repeater-drop-target{outline:1px dashed var(--p-primary-color, #3b82f6);outline-offset:2px;background:color-mix(in srgb, var(--p-primary-color, #3b82f6) 12%, transparent)}.p-formkit-data-view .formkit-outer{padding-bottom:.5rem}.p-formkit-data-view.form-horizontal{padding-bottom:.8rem}.p-formkit-data-view .formkit-help{padding-top:.25rem;margin:0}.p-formkit-data-view ul,.p-formkit-data-view ol{padding-inline-start:1rem;margin-block-start:0;margin-block-end:0}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper{display:flex;flex-wrap:wrap}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .formkit-inner{width:auto !important}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label{width:auto;order:2;padding:.125rem 0}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:after{content:""}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label+.formkit-inner{margin-left:0 !important;order:1;flex-basis:2rem;flex-grow:0;flex-shrink:0;overflow:hidden}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label+.formkit-inner:has(label){flex-grow:1;flex-basis:100%}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3),.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)~label{width:auto}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3){order:1}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)+div.p-checkbox{order:2;width:auto}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)~label{order:3}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .formkit-inner:first-child{margin-left:0 !important}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .formkit-inner:first-child .p-formkit{display:flex}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .p-checkbox:not(:only-child){width:2rem;overflow:hidden}.p-formkit-data-edit .formkit-outer[data-type=primeCheckbox] .formkit-help{width:auto !important}.p-formkit-transfer{display:flex;align-items:stretch;gap:1rem;width:100%;min-width:600px}.p-formkit-transfer-list-container{display:flex;flex-direction:column;flex:1;gap:.5rem;min-width:0}.p-formkit-transfer-buttons{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}.p-formkit-data-debug pre,.p-formkit-data-debug span{font-size:.75rem;line-height:1rem}@media(min-width: 1024px){.formkit-form{display:flex;flex-wrap:wrap;margin-left:-0.5rem;margin-right:-0.5rem}.formkit-form>*{flex-shrink:0;width:100%;max-width:100%;padding-left:.5rem;padding-right:.5rem}.col-1{width:8.3333333333%}.col-2{width:16.6666666667%}.col-3{width:25%}.col-4{width:33.3333333333%}.col-5{width:41.6666666667%}.col-6{width:50%}.col-7{width:58.3333333333%}.col-8{width:66.6666666667%}.col-9{width:75%}.col-10{width:83.3333333333%}.col-11{width:91.6666666667%}.col-12{width:100%}}@media(min-width: 768px){.formkit-form.form-horizontal .formkit-wrapper{display:flex}.formkit-form.form-horizontal .formkit-wrapper label{display:inline-block;padding:0 .25rem 0 0;font-size:inherit}.formkit-form.form-horizontal .formkit-wrapper label:after{content:":"}}@media(min-width: 768px)and (min-width: 768px){.formkit-form.form-horizontal.form-horizontal-checkbox-indent .formkit-outer[data-type=primeCheckbox]{padding-left:33.3333333333%}}@media(min-width: 768px){.p-formkit-data-view .formkit-form.form-horizontal label{white-space:nowrap}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer{width:100%}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer label{width:33.3333333333%;padding-top:.25rem;line-height:normal}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer .formkit-inner{width:66.6666666667%}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=primeCheckbox] .formkit-inner{margin-left:auto}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=primeCheckbox] .formkit-inner .p-formkit{display:flex}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=primeCheckbox] .formkit-inner label{width:auto;padding:0}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-help,.p-formkit-data-edit .formkit-form.form-horizontal .formkit-messages{width:66.6666666667%;margin-left:auto}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sfxcode/formkit-primevue",
   "type": "module",
-  "version": "4.1.10",
+  "version": "4.2.1",
   "packageManager": "pnpm@11.0.9+sha512.34ce82e6780233cf9cad8685029a8f81d2e06196c5a9bad98879f7424940c6817c4e4524fb7d38b8553ceed48b9758b8ebaf1abd3600c232c4c8cf7366086f38",
   "author": {
     "name": "Tom",
@@ -95,6 +95,7 @@
   },
   "dependencies": {
     "@formkit/addons": "^2.0.0",
+    "@formkit/auto-animate": "^0.9.0",
     "@formkit/core": "^2.0.0",
     "@formkit/i18n": "^2.0.0",
     "@formkit/inputs": "^2.0.0",
@@ -106,7 +107,6 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^9.0.0",
-    "@formkit/drag-and-drop": "^0.5.3",
     "@primeuix/themes": "^2.0.3",
     "@types/node": "^25.9.1",
     "@unocss/preset-icons": "66.7.0",
@@ -116,7 +116,7 @@
     "@vitest/ui": "^4.1.8",
     "@vue/compiler-sfc": "^3.5.35",
     "@vue/server-renderer": "^3.5.35",
-    "@vue/test-utils": "^2.4.10",
+    "@vue/test-utils": "^2.4.11",
     "@vue/tsconfig": "^0.9.1",
     "@vueuse/core": "^14.3.0",
     "@vueuse/head": "^2.0.0",
@@ -126,7 +126,7 @@
     "cookie": "^1.1.1",
     "esbuild": "^0.28.0",
     "eslint": "^10.4.1",
-    "happy-dom": "^20.9.0",
+    "happy-dom": "^20.10.1",
     "json-editor-vue": "^0.18.1",
     "mkdist": "^2.4.1",
     "sass": "^1.100.0",