feat: make Repeater draggable by adding draggable prop and context handling

Author: sfxcode

dev/pages/inputs/Repeater.vue

@@ -29,6 +29,7 @@ const schema
       displayCloneButton: true,
       displayAddButton: true,
       displayDeleteButton: true,
+      draggable: true,
       displayDragHandle: true,
       insertButtonLabel: 'Add Attack',
       insertButtonClass: 'mb-2',

dev/pages/samples/Repeater.vue

@@ -31,6 +31,7 @@ const schema
       itemClass: '',
       hideButtonGroup: false,
       hideMoveButtons: false,
+      draggable: true,
       displayDragHandle: true,
       dragHandleClass: 'mt-3 me-2 cursor-move text-surface-500',
       dragHandleIconClass: 'pi pi-bars',

src/definitions/repeater.ts

@@ -45,7 +45,7 @@ export const primeRepeaterDefinition: FormKitTypeDefinition = createInput(
         ], {
           id: '$getListItemId($index)',
           class: '$getListItemClass($index)',
-          draggable: '$renderDragHandle',
+          draggable: '$draggable',
           onDragstart: '$dragNodeStart($node.parent, $index)',
           onDragover: '$dragNodeOver($index)',
           onDragleave: '$dragNodeLeave($index)',
@@ -56,7 +56,7 @@ export const primeRepeaterDefinition: FormKitTypeDefinition = createInput(
     ], true, 'true'),
   ], { class: '$internalListClass', id: '$internalListId' }, true),
   {
-    props: ['insertButtonLabel', 'insertButtonClass', 'insertButtonSize', 'alwaysDisplayInsertButton', 'newItem', 'listClass', 'listItemClass', 'hideButtonGroup', 'hideMoveButtons', 'buttonGroupClass', 'buttonGroupItemClass', 'buttonSize', 'displayCloneButton', 'displayAddButton', 'displayDeleteButton', 'minItems', 'maxItems', 'displayDragHandle', 'dragHandleClass', 'dragHandleIconClass'],
+    props: ['insertButtonLabel', 'insertButtonClass', 'insertButtonSize', 'alwaysDisplayInsertButton', 'newItem', 'listClass', 'listItemClass', 'hideButtonGroup', 'hideMoveButtons', 'buttonGroupClass', 'buttonGroupItemClass', 'buttonSize', 'displayCloneButton', 'displayAddButton', 'displayDeleteButton', 'minItems', 'maxItems', 'displayDragHandle', 'draggable', 'dragHandleClass', 'dragHandleIconClass'],
     features: [addRepeaterHandler],
   },
 )
@@ -80,6 +80,7 @@ function addRepeaterHandler(node: FormKitNode): void {
       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.draggable = !!node.context.draggable
       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'

test/definitions/repeater.test.ts

@@ -23,8 +23,9 @@ function createRepeaterNode(context: Record<string, any> = {}, props: Record<str
 
 describe('primeRepeaterDefinition', () => {
   it('enables drag handlers when drag handle is displayed', () => {
-    const node = createRepeaterNode({ displayDragHandle: true }, { id: 'attack-list' })
+    const node = createRepeaterNode({ draggable: true, displayDragHandle: true }, { id: 'attack-list' })
 
+    expect(node.context.draggable).toBe(true)
     expect(node.context.renderDragHandle).toBe(true)
     expect(node.context.dragHandleIconClass).toBe('pi pi-bars')
     expect(node.context.internalListId).toContain('formkit-items')