@sfxcode/formkit-primevue 4.2.3 → 4.3.0

package/dist/components/PrimeListbox.vue

@@ -123,6 +123,7 @@ type TransferList = 'source' | 'target'
 const dragSource = ref<TransferList | null>(null)
 const draggedItems = ref<any[]>([])
 const activeDropzone = ref<TransferList | null>(null)
+const dragOverIndex = ref<number | null>(null)
 
 function getComparableValue(item: any): any {
   const valueKey = optionValueKey.value
@@ -154,14 +155,17 @@ function clearDragState() {
   dragSource.value = null
   draggedItems.value = []
   activeDropzone.value = null
+  dragOverIndex.value = null
 }
 
 function canDropInto(target: TransferList): boolean {
-  return transferDragDrop.value
-    && !props.context.disabled
-    && !!dragSource.value
-    && dragSource.value !== target
-    && draggedItems.value.length > 0
+  if (!transferDragDrop.value || props.context.disabled || !dragSource.value || draggedItems.value.length === 0)
+    return false
+  // The target list accepts cross-list moves as well as same-list reordering.
+  if (target === 'target')
+    return true
+  // The source list only accepts items coming from the target (i.e. removal).
+  return dragSource.value !== target
 }
 
 function handleOptionDragStart(origin: TransferList, option: any, event: DragEvent) {
@@ -186,6 +190,8 @@ function handleDropzoneDragOver(target: TransferList, event: DragEvent) {
 
   event.preventDefault()
   activeDropzone.value = target
+  // Hovering empty space (not over a specific item) clears the per-item highlight.
+  dragOverIndex.value = null
   if (event.dataTransfer)
     event.dataTransfer.dropEffect = 'move'
 }
@@ -214,6 +220,57 @@ function handleDropzoneDrop(target: TransferList, event: DragEvent) {
   clearDragState()
 }
 
+function handleTargetItemDragOver(index: number, event: DragEvent) {
+  if (!canDropInto('target'))
+    return
+
+  // Handle the drop at the item level so it lands at a precise position.
+  event.preventDefault()
+  event.stopPropagation()
+  activeDropzone.value = 'target'
+  dragOverIndex.value = index
+  if (event.dataTransfer)
+    event.dataTransfer.dropEffect = 'move'
+}
+
+function handleTargetItemDrop(index: number, event: DragEvent) {
+  if (!canDropInto('target')) {
+    clearDragState()
+    return
+  }
+
+  event.preventDefault()
+  event.stopPropagation()
+
+  const referenceItem = targetItems.value[index]
+  const itemsToInsert = getUniqueItems(draggedItems.value)
+
+  if (dragSource.value === 'target') {
+    // Reorder within the target list: move the dragged items to the drop position.
+    if (itemsToInsert.some(dragged => isSameOption(dragged, referenceItem))) {
+      clearDragState()
+      return
+    }
+    const remaining = targetItems.value.filter(item => !itemsToInsert.some(dragged => isSameOption(dragged, item)))
+    let insertAt = remaining.findIndex(item => isSameOption(item, referenceItem))
+    if (insertAt === -1)
+      insertAt = remaining.length
+    remaining.splice(insertAt, 0, ...itemsToInsert)
+    targetItems.value = remaining
+    targetSelection.value = []
+  }
+  else {
+    // Cross-list move: insert the dragged source items at the drop position.
+    const additions = itemsToInsert.filter(item => !targetItems.value.some(candidate => isSameOption(candidate, item)))
+    const updated = [...targetItems.value]
+    updated.splice(index, 0, ...additions)
+    targetItems.value = updated
+    sourceSelection.value = []
+  }
+
+  clearDragState()
+}
+
 function resolveOptionDisabled(option: any): boolean {
   const optionDisabled = props.context.optionDisabled
   if (!optionDisabled)
@@ -495,9 +552,14 @@ watch(() => modelValue.value, (newVal) => {
           <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) }"
+            :class="{
+              'p-formkit-transfer-option-draggable': transferDragDrop && !context.disabled && !resolveOptionDisabled(slotProps.option),
+              'p-formkit-transfer-option-dragover': dragOverIndex === slotProps.index,
+            }"
             @dragstart="handleOptionDragStart('target', slotProps.option, $event)"
             @dragend="handleOptionDragEnd"
+            @dragover="handleTargetItemDragOver(slotProps.index, $event)"
+            @drop="handleTargetItemDrop(slotProps.index, $event)"
           >
             <component
               :is="context?.slots.option"
@@ -529,4 +591,8 @@ watch(() => modelValue.value, (newVal) => {
   outline: 2px dashed var(--p-primary-color);
   outline-offset: 2px;
 }
+
+.p-formkit-transfer-option-dragover {
+  box-shadow: inset 0 2px 0 0 var(--p-primary-color);
+}
 </style>

package/dist/components/PrimeOutputText.vue

@@ -23,9 +23,10 @@ const props = defineProps({
   },
 })
 
+const { t } = useI18n()
+
 const textValue = computed(() => {
   const value = props.context?._value
-  const { t } = useI18n()
   let result = ''
   if (value) {
     if (props.context?.isTranslationKey) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sfxcode/formkit-primevue",
   "type": "module",
-  "version": "4.2.3",
+  "version": "4.3.0",
   "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 --patch --release  && npm publish --access public && git push --follow-tags",
+    "release": "npm run lint && npm run build && changelogen --minor --release  && npm publish --access public && git push --follow-tags",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "prepublishOnly": "pnpm build",
@@ -94,28 +94,28 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "@formkit/addons": "^2.0.0",
+    "@formkit/addons": "^2.1.0",
     "@formkit/auto-animate": "^0.9.0",
-    "@formkit/core": "^2.0.0",
-    "@formkit/i18n": "^2.0.0",
-    "@formkit/inputs": "^2.0.0",
-    "@formkit/vue": "^2.0.0",
-    "@intlify/core": "^11.4.4",
+    "@formkit/core": "^2.1.0",
+    "@formkit/i18n": "^2.1.0",
+    "@formkit/inputs": "^2.1.0",
+    "@formkit/vue": "^2.1.0",
+    "@intlify/core": "^11.4.5",
     "primeicons": "^7.0.0",
     "primevue": "^4.5.5",
-    "vue-i18n": "^11.4.4"
+    "vue-i18n": "^11.4.5"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^9.0.0",
     "@primeuix/themes": "^2.0.3",
-    "@types/node": "^25.9.1",
+    "@types/node": "^25.9.3",
     "@unocss/preset-icons": "66.7.0",
     "@unocss/preset-uno": "66.7.0",
     "@vitejs/plugin-vue": "^6.0.7",
-    "@vitest/coverage-v8": "^4.1.8",
-    "@vitest/ui": "^4.1.8",
-    "@vue/compiler-sfc": "^3.5.35",
-    "@vue/server-renderer": "^3.5.35",
+    "@vitest/coverage-v8": "^4.1.9",
+    "@vitest/ui": "^4.1.9",
+    "@vue/compiler-sfc": "^3.5.38",
+    "@vue/server-renderer": "^3.5.38",
     "@vue/test-utils": "^2.4.11",
     "@vue/tsconfig": "^0.9.1",
     "@vueuse/core": "^14.3.0",
@@ -124,12 +124,12 @@
     "chart.js": "^4.5.1",
     "consola": "^3.4.2",
     "cookie": "^1.1.1",
-    "esbuild": "^0.28.0",
-    "eslint": "^10.4.1",
-    "happy-dom": "^20.10.1",
+    "esbuild": "^0.28.1",
+    "eslint": "^10.5.0",
+    "happy-dom": "^20.10.5",
     "json-editor-vue": "^0.18.1",
     "mkdist": "^2.4.1",
-    "sass": "^1.100.0",
+    "sass": "^1.101.0",
     "tslib": "^2.8.1",
     "typescript": "^6.0.3",
     "unbuild": "^3.6.1",
@@ -141,10 +141,10 @@
     "vite-plugin-pages": "^0.33.3",
     "vite-ssg": "^28.3.0",
     "vitepress": "2.0.0-alpha.16",
-    "vitest": "^4.1.8",
-    "vue": "^3.5.35",
+    "vitest": "^4.1.9",
+    "vue": "^3.5.38",
     "vue-demi": "^0.14.10",
     "vue-router": "^5.1.0",
-    "vue-tsc": "^3.3.3"
+    "vue-tsc": "^3.3.5"
   }
 }