@sfxcode/formkit-primevue 4.2.0 → 4.2.2

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

@@ -35,6 +35,7 @@ export interface FormKitPrimeListboxProps {
     transferContainerClass?: string;
     transferListContainerClass?: string;
     transferButtonClass?: string;
+    transferDragDrop?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/components/PrimeListbox.vue

@@ -39,6 +39,7 @@ export interface FormKitPrimeListboxProps {
   transferContainerClass?: string
   transferListContainerClass?: string
   transferButtonClass?: string
+  transferDragDrop?: boolean
 }
 
 const props = defineProps({
@@ -67,6 +68,14 @@ const transferButtonSeverity = computed(() => {
   return props.context.transferButtonSeverity || 'secondary'
 })
 
+const transferDragDrop = computed(() => {
+  return props.context.transferDragDrop ?? true
+})
+
+const transferSlotNames = computed(() => {
+  return validSlotNames.value.filter((slotName: string) => slotName !== 'option')
+})
+
 // Transfer List functionality
 const optionValueKey = computed(() => {
   const key = props.context.optionValue
@@ -109,6 +118,121 @@ const sourceItems = computed(() => {
   })
 })
 
+type TransferList = 'source' | 'target'
+
+const dragSource = ref<TransferList | null>(null)
+const draggedItems = ref<any[]>([])
+const activeDropzone = ref<TransferList | null>(null)
+
+function getComparableValue(item: any): any {
+  const valueKey = optionValueKey.value
+  return valueKey && typeof item === 'object' ? item?.[valueKey] : item
+}
+
+function isSameOption(left: any, right: any): boolean {
+  return getComparableValue(left) === getComparableValue(right)
+}
+
+function getUniqueItems(items: any[]): any[] {
+  return items.filter((item, index) => items.findIndex(candidate => isSameOption(candidate, item)) === index)
+}
+
+function mergeUniqueItems(base: any[], toAdd: any[]): any[] {
+  return [...base, ...toAdd.filter(item => !base.some(candidate => isSameOption(candidate, item)))]
+}
+
+function getDraggableItems(origin: TransferList, option: any): any[] {
+  const selection = origin === 'source' ? sourceSelection.value : targetSelection.value
+  if (!selection.length)
+    return [option]
+
+  const hasOptionSelected = selection.some(item => isSameOption(item, option))
+  return hasOptionSelected ? getUniqueItems(selection) : [option]
+}
+
+function clearDragState() {
+  dragSource.value = null
+  draggedItems.value = []
+  activeDropzone.value = null
+}
+
+function canDropInto(target: TransferList): boolean {
+  return transferDragDrop.value
+    && !props.context.disabled
+    && !!dragSource.value
+    && dragSource.value !== target
+    && draggedItems.value.length > 0
+}
+
+function handleOptionDragStart(origin: TransferList, option: any, event: DragEvent) {
+  if (!transferDragDrop.value || props.context.disabled)
+    return
+
+  draggedItems.value = getDraggableItems(origin, option)
+  dragSource.value = origin
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('text/plain', 'formkit-primevue-transfer')
+  }
+}
+
+function handleOptionDragEnd() {
+  clearDragState()
+}
+
+function handleDropzoneDragOver(target: TransferList, event: DragEvent) {
+  if (!canDropInto(target))
+    return
+
+  event.preventDefault()
+  activeDropzone.value = target
+  if (event.dataTransfer)
+    event.dataTransfer.dropEffect = 'move'
+}
+
+function handleDropzoneDragLeave(target: TransferList) {
+  if (activeDropzone.value === target)
+    activeDropzone.value = null
+}
+
+function handleDropzoneDrop(target: TransferList, event: DragEvent) {
+  if (!canDropInto(target)) {
+    clearDragState()
+    return
+  }
+
+  event.preventDefault()
+  if (target === 'target') {
+    targetItems.value = mergeUniqueItems(targetItems.value, draggedItems.value)
+    sourceSelection.value = []
+  }
+  else {
+    targetItems.value = targetItems.value.filter(item => !draggedItems.value.some(dragged => isSameOption(dragged, item)))
+    targetSelection.value = []
+  }
+
+  clearDragState()
+}
+
+function resolveOptionDisabled(option: any): boolean {
+  const optionDisabled = props.context.optionDisabled
+  if (!optionDisabled)
+    return false
+  if (typeof optionDisabled === 'function')
+    return !!optionDisabled(option)
+  if (typeof optionDisabled === 'string')
+    return !!option?.[optionDisabled]
+  return !!optionDisabled
+}
+
+function resolveOptionLabel(option: any): string {
+  if (!props.context.optionLabel)
+    return String(option)
+  if (typeof props.context.optionLabel === 'function')
+    return String(props.context.optionLabel(option))
+  return String(option?.[props.context.optionLabel] ?? option)
+}
+
 function transferSelected() {
   if (sourceSelection.value.length === 0)
     return
@@ -216,7 +340,12 @@ watch(() => modelValue.value, (newVal) => {
     :class="transferContainerClass"
   >
     <!-- Source List -->
-    <div :class="transferListContainerClass">
+    <div
+      :class="[transferListContainerClass, { 'p-formkit-transfer-dropzone-active': activeDropzone === 'source' }]"
+      @dragover="handleDropzoneDragOver('source', $event)"
+      @dragleave="handleDropzoneDragLeave('source')"
+      @drop="handleDropzoneDrop('source', $event)"
+    >
       <span
         v-if="context.transferLeftHeaderText"
         :class="transferHeaderClass"
@@ -254,7 +383,23 @@ watch(() => modelValue.value, (newVal) => {
         :unstyled="unstyled"
         @blur="handleBlur"
       >
-        <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <template #option="slotProps">
+          <div
+            :draggable="transferDragDrop && !context.disabled && !resolveOptionDisabled(slotProps.option)"
+            class="p-formkit-transfer-option"
+            :class="{ 'p-formkit-transfer-option-draggable': transferDragDrop && !context.disabled && !resolveOptionDisabled(slotProps.option) }"
+            @dragstart="handleOptionDragStart('source', slotProps.option, $event)"
+            @dragend="handleOptionDragEnd"
+          >
+            <component
+              :is="context?.slots.option"
+              v-if="context?.slots?.option"
+              v-bind="{ ...context, ...slotProps }"
+            />
+            <span v-else>{{ resolveOptionLabel(slotProps.option) }}</span>
+          </div>
+        </template>
+        <template v-for="slotName in transferSlotNames" :key="slotName" #[slotName]="slotProps">
           <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
         </template>
       </Listbox>
@@ -303,7 +448,12 @@ watch(() => modelValue.value, (newVal) => {
     </div>
 
     <!-- Target List -->
-    <div :class="transferListContainerClass">
+    <div
+      :class="[transferListContainerClass, { 'p-formkit-transfer-dropzone-active': activeDropzone === 'target' }]"
+      @dragover="handleDropzoneDragOver('target', $event)"
+      @dragleave="handleDropzoneDragLeave('target')"
+      @drop="handleDropzoneDrop('target', $event)"
+    >
       <span
         v-if="context.transferRightHeaderText"
         :class="transferHeaderClass"
@@ -341,7 +491,23 @@ watch(() => modelValue.value, (newVal) => {
         :unstyled="unstyled"
         @blur="handleBlur"
       >
-        <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <template #option="slotProps">
+          <div
+            :draggable="transferDragDrop && !context.disabled && !resolveOptionDisabled(slotProps.option)"
+            class="p-formkit-transfer-option"
+            :class="{ 'p-formkit-transfer-option-draggable': transferDragDrop && !context.disabled && !resolveOptionDisabled(slotProps.option) }"
+            @dragstart="handleOptionDragStart('target', slotProps.option, $event)"
+            @dragend="handleOptionDragEnd"
+          >
+            <component
+              :is="context?.slots.option"
+              v-if="context?.slots?.option"
+              v-bind="{ ...context, ...slotProps }"
+            />
+            <span v-else>{{ resolveOptionLabel(slotProps.option) }}</span>
+          </div>
+        </template>
+        <template v-for="slotName in transferSlotNames" :key="slotName" #[slotName]="slotProps">
           <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
         </template>
       </Listbox>
@@ -350,10 +516,6 @@ watch(() => modelValue.value, (newVal) => {
 </template>
 
 <style scoped>
-.p-formkit-transfer {
-  min-width: 600px;
-}
-
 .p-formkit-transfer :deep(.p-listbox) {
   width: 100%;
   height: 100%;
@@ -362,4 +524,9 @@ watch(() => modelValue.value, (newVal) => {
 .p-formkit-transfer :deep(.p-listbox-list-container) {
   max-height: none;
 }
+
+.p-formkit-transfer-dropzone-active :deep(.p-listbox) {
+  outline: 2px dashed var(--p-primary-color);
+  outline-offset: 2px;
+}
 </style>

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

@@ -35,6 +35,7 @@ export interface FormKitPrimeListboxProps {
     transferContainerClass?: string;
     transferListContainerClass?: string;
     transferButtonClass?: string;
+    transferDragDrop?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/definitions/input.js

@@ -73,7 +73,7 @@ const primeMultiSelectDefinition = exports.primeMultiSelectDefinition = (0, _vue
   family: "PrimeInput"
 });
 const primeListboxDefinition = exports.primeListboxDefinition = (0, _vue.createInput)(_PrimeListbox.default, {
-  props: ["pt", "ptOptions", "unstyled", "options", "optionLabel", "optionValue", "multiple", "filter", "filterIcon", "filterPlaceholder", "filterLocale", "filterMatchMode", "autoOptionFocus", "selectOnFocus", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "dataKey", "metaKeySelection", "virtualScrollerOptions", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferHeaderClass", "transferAll"],
+  props: ["pt", "ptOptions", "unstyled", "options", "optionLabel", "optionValue", "multiple", "filter", "filterIcon", "filterPlaceholder", "filterLocale", "filterMatchMode", "autoOptionFocus", "selectOnFocus", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "dataKey", "metaKeySelection", "virtualScrollerOptions", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferHeaderClass", "transferAll", "transferButtonSeverity", "transferContainerClass", "transferListContainerClass", "transferButtonClass", "transferDragDrop"],
   family: "PrimeInput"
 });
 const primeDatePickerDefinition = exports.primeDatePickerDefinition = (0, _vue.createInput)(_PrimeDatePicker.default, {

package/dist/definitions/input.mjs

@@ -66,7 +66,7 @@ export const primeMultiSelectDefinition = createInput(PrimeMultiSelect, {
   family: "PrimeInput"
 });
 export const primeListboxDefinition = createInput(PrimeListbox, {
-  props: ["pt", "ptOptions", "unstyled", "options", "optionLabel", "optionValue", "multiple", "filter", "filterIcon", "filterPlaceholder", "filterLocale", "filterMatchMode", "autoOptionFocus", "selectOnFocus", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "dataKey", "metaKeySelection", "virtualScrollerOptions", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferHeaderClass", "transferAll"],
+  props: ["pt", "ptOptions", "unstyled", "options", "optionLabel", "optionValue", "multiple", "filter", "filterIcon", "filterPlaceholder", "filterLocale", "filterMatchMode", "autoOptionFocus", "selectOnFocus", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "dataKey", "metaKeySelection", "virtualScrollerOptions", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferHeaderClass", "transferAll", "transferButtonSeverity", "transferContainerClass", "transferListContainerClass", "transferButtonClass", "transferDragDrop"],
   family: "PrimeInput"
 });
 export const primeDatePickerDefinition = createInput(PrimeDatePicker, {

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", {
@@ -39,14 +39,30 @@ function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass
     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"
+  id: "$getListItemId($index)",
+  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", "minItems", "maxItems"],
+  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) {
@@ -54,16 +70,30 @@ 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 || {};
       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-items-${uuid}`;
+      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 = [{
@@ -102,6 +132,45 @@ function addRepeaterHandler(node) {
           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") => {
@@ -18,17 +18,38 @@ function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass
     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")
+        ], {
+          id: "$getListItemId($index)",
+          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", "minItems", "maxItems"],
+    props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton", "minItems", "maxItems", "displayDragHandle", "dragHandleClass", "dragHandleIconClass"],
     features: [addRepeaterHandler]
   }
 );
@@ -37,16 +58,31 @@ 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 || {};
       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-items-${uuid}`;
+      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];
@@ -85,6 +121,47 @@ function addRepeaterHandler(node) {
             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
@@ -312,6 +333,20 @@ $grid-breakpoints: (
   gap: 0.5rem;
 }
 
+.p-formkit-transfer-option {
+  width: 100%;
+}
+
+.p-formkit-transfer-option-draggable {
+  cursor: grab;
+}
+
+.p-formkit-transfer-option-draggable:active {
+  cursor: grabbing;
+}
+
+
+
 
 // Debug
 .p-formkit-data-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-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}}
+: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-transfer-option{width:100%}.p-formkit-transfer-option-draggable{cursor:grab}.p-formkit-transfer-option-draggable:active{cursor:grabbing}.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.2.0",
+  "version": "4.2.2",
   "packageManager": "pnpm@11.0.9+sha512.34ce82e6780233cf9cad8685029a8f81d2e06196c5a9bad98879f7424940c6817c4e4524fb7d38b8553ceed48b9758b8ebaf1abd3600c232c4c8cf7366086f38",
   "author": {
     "name": "Tom",
@@ -79,7 +79,7 @@
     "dev": "vite serve dev",
     "dev:build": "vite build dev",
     "dev:preview": "vite preview dev",
-    "release": "npm run lint && npm run build && changelogen --minor --release  && npm publish --access public && git push --follow-tags",
+    "release": "npm run lint && npm run build && changelogen --patch --release  && npm publish --access public && git push --follow-tags",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "prepublishOnly": "pnpm build",
@@ -107,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",