@redseed/redseed-ui-vue3 8.52.0 → 8.52.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.52.0",
+    "version": "8.52.1",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/CardGroup/CardGroup.vue

@@ -80,7 +80,11 @@ const emit = defineEmits([
     'reorder'
 ])
 
-// Drag and drop
+// Drag and drop.
+// Two engines cooperate by input type and share the state + classes below:
+//   mouse     -> native HTML5 DnD (draggable attr + drag* handlers on the container)
+//   touch/pen -> Pointer Events engine (see onHandlePointerDown and friends)
+// A single gesture is only ever handled by one engine, so they never collide.
 const dragFromIndex = ref(null)
 let dragOverChild = null
 let childObserver = null
@@ -125,7 +129,18 @@ function getChildIndex(el) {
     return Array.from(cardsContainerElement.value.children).indexOf(child)
 }
 
+// True while a touch/pen pointer drag owns the shared drag state (dragFromIndex /
+// dragOverChild). The native mouse engine must bail out of EVERY handler when this
+// holds: returning from a dragstart listener does not cancel the browser's native
+// drag (only preventDefault would), so dragover/dragleave/drop/dragend still fire on
+// a hybrid device (finger on one handle, mouse on another) and would otherwise emit a
+// reorder mixing the touch source with the mouse target.
+function pointerDragOwnsState() {
+    return activePointerId !== null
+}
+
 function onHandleMouseDown(e) {
+    if (pointerDragOwnsState()) return
     const child = getCardChild(e.target)
     if (child) {
         child.setAttribute('draggable', 'true')
@@ -142,7 +157,7 @@ function onHandleMouseUp(e) {
 }
 
 function onDragStart(e) {
-    if (!props.reorderable) return
+    if (!props.reorderable || pointerDragOwnsState()) return
     const index = getChildIndex(e.target)
     if (index === -1) return
     dragFromIndex.value = index
@@ -152,7 +167,7 @@ function onDragStart(e) {
 }
 
 function onDragOver(e) {
-    if (!props.reorderable || dragFromIndex.value === null) return
+    if (!props.reorderable || pointerDragOwnsState() || dragFromIndex.value === null) return
     e.preventDefault()
     e.dataTransfer.dropEffect = 'move'
     const child = getCardChild(e.target)
@@ -167,7 +182,7 @@ function onDragOver(e) {
 }
 
 function onDragLeave(e) {
-    if (!props.reorderable) return
+    if (!props.reorderable || pointerDragOwnsState()) return
     const child = getCardChild(e.target)
     if (child && !child.contains(e.relatedTarget)) {
         child.classList.remove('rsui-card-group__card--drag-over')
@@ -175,7 +190,7 @@ function onDragLeave(e) {
 }
 
 function onDrop(e) {
-    if (!props.reorderable) return
+    if (!props.reorderable || pointerDragOwnsState()) return
     e.preventDefault()
     const toIndex = getChildIndex(e.target)
     if (toIndex !== -1 && dragFromIndex.value !== null && dragFromIndex.value !== toIndex) {
@@ -185,12 +200,237 @@ function onDrop(e) {
 }
 
 function onDragEnd() {
+    if (pointerDragOwnsState()) return
     cleanupDragState()
 }
 
+// Pointer-driven drag engine — TOUCH and PEN only. Mouse is deliberately left to
+// the native HTML5 DnD path above: browsers give mouse users a real drag image and
+// drop semantics for free, but they never START native DnD from a touch gesture, so
+// the handle was inert on touch (#238). onHandlePointerDown early-returns for mouse
+// before any preventDefault/setPointerCapture — either would cancel the browser's
+// native dragstart — so a single gesture is only ever handled by one engine. On a
+// touch/pen press we setPointerCapture, which routes every later move/up for that
+// pointer back to the handle; because capture makes e.target always the handle,
+// elementFromPoint (not e.target) resolves the card under the pointer.
+const DRAG_THRESHOLD_PX = 4
+
+// Native DnD auto-scrolls a long list for mouse users near the viewport edge for
+// free; the pointer engine has to do it by hand, or a touch user can only reorder
+// within the cards already on screen (e.g. can't move item 1 to item 12 in a long
+// meeting agenda). While a touch/pen drag is near an edge we scroll the nearest
+// scrollable ancestor (or the window) each frame and re-run the hit-test, since the
+// finger is stationary while content moves under it.
+const AUTO_SCROLL_ZONE_PX = 64
+const AUTO_SCROLL_MAX_SPEED_PX = 14
+
+let activePointerId = null
+let capturedHandle = null
+let dragStartX = 0
+let dragStartY = 0
+let hasDragMoved = false
+let lastPointerX = 0
+let lastPointerY = 0
+let scrollContainer = null
+let autoScrollVelocity = 0
+let autoScrollFrame = null
+
+function getChildFromPoint(x, y) {
+    return getCardChild(document.elementFromPoint(x, y))
+}
+
+// Resolve and highlight the drop target under a viewport point. Shared by
+// pointermove and the auto-scroll frame. Moving off any droppable card (or back
+// onto the source) clears the highlight, mirroring native dragleave.
+function updateDropTarget(x, y) {
+    const child = getChildFromPoint(x, y)
+    const index = child ? Array.from(cardsContainerElement.value.children).indexOf(child) : -1
+    if (index === -1 || index === dragFromIndex.value) {
+        if (dragOverChild) {
+            dragOverChild.classList.remove('rsui-card-group__card--drag-over')
+            dragOverChild = null
+        }
+        return
+    }
+    if (dragOverChild && dragOverChild !== child) {
+        dragOverChild.classList.remove('rsui-card-group__card--drag-over')
+    }
+    child.classList.add('rsui-card-group__card--drag-over')
+    dragOverChild = child
+}
+
+// Nearest scrollable ancestor of the cards, or null to scroll the window.
+function findScrollContainer(el) {
+    let node = el?.parentElement
+    while (node && node !== document.body && node !== document.documentElement) {
+        const { overflowY } = window.getComputedStyle(node)
+        // Only a genuinely scrollable box qualifies as the scroll target.
+        if ((overflowY === 'auto' || overflowY === 'scroll') && node.scrollHeight > node.clientHeight) {
+            return node
+        }
+        node = node.parentElement
+    }
+    return null
+}
+
+function updateAutoScroll(clientY) {
+    // Edges come from the scroll container's box, or the viewport when scrolling
+    // the window.
+    const top = scrollContainer ? scrollContainer.getBoundingClientRect().top : 0
+    const bottom = scrollContainer ? scrollContainer.getBoundingClientRect().bottom : window.innerHeight
+
+    let velocity = 0
+    if (clientY < top + AUTO_SCROLL_ZONE_PX) {
+        const depth = Math.min(1, (top + AUTO_SCROLL_ZONE_PX - clientY) / AUTO_SCROLL_ZONE_PX)
+        velocity = -Math.ceil(depth * AUTO_SCROLL_MAX_SPEED_PX)
+    } else if (clientY > bottom - AUTO_SCROLL_ZONE_PX) {
+        const depth = Math.min(1, (clientY - (bottom - AUTO_SCROLL_ZONE_PX)) / AUTO_SCROLL_ZONE_PX)
+        velocity = Math.ceil(depth * AUTO_SCROLL_MAX_SPEED_PX)
+    }
+
+    autoScrollVelocity = velocity
+    if (velocity !== 0) {
+        startAutoScroll()
+    } else {
+        stopAutoScroll()
+    }
+}
+
+function startAutoScroll() {
+    if (autoScrollFrame !== null) return
+    const step = () => {
+        if (autoScrollVelocity === 0 || dragFromIndex.value === null) {
+            autoScrollFrame = null
+            return
+        }
+        if (scrollContainer) {
+            scrollContainer.scrollTop += autoScrollVelocity
+        } else {
+            window.scrollBy(0, autoScrollVelocity)
+        }
+        // Content moved under the stationary finger — re-resolve the drop target.
+        updateDropTarget(lastPointerX, lastPointerY)
+        autoScrollFrame = requestAnimationFrame(step)
+    }
+    autoScrollFrame = requestAnimationFrame(step)
+}
+
+function stopAutoScroll() {
+    if (autoScrollFrame !== null) {
+        cancelAnimationFrame(autoScrollFrame)
+        autoScrollFrame = null
+    }
+    autoScrollVelocity = 0
+}
+
+function onHandlePointerDown(e) {
+    if (!props.reorderable) return
+    // Mouse is served by the native DnD engine. Return BEFORE preventDefault or
+    // setPointerCapture — either would suppress the browser's native dragstart and
+    // break desktop reordering.
+    if (e.pointerType === 'mouse') return
+    // A drag is already in flight — a second finger on another handle
+    // (activePointerId set), or a native mouse drag that already owns dragFromIndex
+    // (hybrid device). Ignore the new pointer so the first gesture keeps its state
+    // and nothing is left stuck in a grabbed/dragging class.
+    if (activePointerId !== null || dragFromIndex.value !== null) return
+    const index = getChildIndex(e.target)
+    if (index === -1) return
+    const child = getCardChild(e.target)
+
+    activePointerId = e.pointerId
+    capturedHandle = e.currentTarget
+    dragStartX = e.clientX
+    dragStartY = e.clientY
+    hasDragMoved = false
+    lastPointerX = e.clientX
+    lastPointerY = e.clientY
+    scrollContainer = findScrollContainer(cardsContainerElement.value)
+    dragFromIndex.value = index
+    child.classList.add('rsui-card-group__card--grabbed')
+
+    // Stop the press starting a text selection / page scroll, then keep the handle
+    // focused so the keyboard arrow-key path still works after a pointer grab.
+    e.preventDefault()
+    capturedHandle.focus()
+
+    // Route all further events for this pointer to the handle so touch and pen
+    // behave identically. Guarded for environments without the API.
+    if (typeof capturedHandle.setPointerCapture === 'function') {
+        capturedHandle.setPointerCapture(e.pointerId)
+    }
+}
+
+function onHandlePointerMove(e) {
+    if (dragFromIndex.value === null || e.pointerId !== activePointerId) return
+
+    // Wait until the pointer clears a small threshold before treating it as a
+    // drag — mirrors native DnD, which only starts after a few px of movement.
+    if (!hasDragMoved) {
+        const movedX = Math.abs(e.clientX - dragStartX)
+        const movedY = Math.abs(e.clientY - dragStartY)
+        if (movedX < DRAG_THRESHOLD_PX && movedY < DRAG_THRESHOLD_PX) return
+        hasDragMoved = true
+        const draggedChild = cardsContainerElement.value?.children[dragFromIndex.value]
+        if (draggedChild) draggedChild.classList.add('rsui-card-group__card--dragging')
+    }
+
+    e.preventDefault()
+
+    lastPointerX = e.clientX
+    lastPointerY = e.clientY
+    updateDropTarget(e.clientX, e.clientY)
+    updateAutoScroll(e.clientY)
+}
+
+function onHandlePointerUp(e) {
+    if (dragFromIndex.value === null || e.pointerId !== activePointerId) return
+    // Drop onto the currently highlighted target — what the user sees. Releasing
+    // off any card leaves dragOverChild null, so no reorder fires, matching a
+    // native drop outside the list.
+    const toIndex = dragOverChild
+        ? Array.from(cardsContainerElement.value.children).indexOf(dragOverChild)
+        : -1
+    if (toIndex !== -1 && toIndex !== dragFromIndex.value) {
+        emit('reorder', { fromIndex: dragFromIndex.value, toIndex })
+    }
+    releasePointerCapture()
+    cleanupDragState()
+}
+
+function onHandlePointerCancel(e) {
+    if (e.pointerId !== activePointerId) return
+    releasePointerCapture()
+    cleanupDragState()
+}
+
+function onHandleLostPointerCapture(e) {
+    // Capture can be taken away without a pointerup/pointercancel — an OS-level
+    // gesture, or the captured handle being detached mid-drag. Reset so the drag
+    // does not strand activePointerId (which would dead-lock every future touch
+    // drag on the guard at the top of onHandlePointerDown). No-op once a normal
+    // pointerup/cancel has already cleaned up, since activePointerId is then null.
+    if (e.pointerId !== activePointerId) return
+    cleanupDragState()
+}
+
+function releasePointerCapture() {
+    if (
+        capturedHandle &&
+        activePointerId !== null &&
+        typeof capturedHandle.hasPointerCapture === 'function' &&
+        capturedHandle.hasPointerCapture(activePointerId)
+    ) {
+        capturedHandle.releasePointerCapture(activePointerId)
+    }
+}
+
 function cleanupDragState() {
     const container = cardsContainerElement.value
     if (container) {
+        // Clear every drag-state class and the native draggable flag in one pass.
+        // Only the native mouse path sets draggable, so removeAttribute is a
+        // harmless no-op after a touch/pen drag.
         Array.from(container.children).forEach(child => {
             child.classList.remove('rsui-card-group__card--drag-over', 'rsui-card-group__card--dragging', 'rsui-card-group__card--grabbed')
             child.removeAttribute('draggable')
@@ -198,6 +438,13 @@ function cleanupDragState() {
     }
     dragFromIndex.value = null
     dragOverChild = null
+    // Pointer-engine state. The native mouse path never sets these, so resetting
+    // them here is a no-op for a mouse drag.
+    stopAutoScroll()
+    scrollContainer = null
+    activePointerId = null
+    capturedHandle = null
+    hasDragMoved = false
 }
 
 function onHandleKeyDown(e) {
@@ -237,6 +484,27 @@ function onHandleKeyDown(e) {
     }
 }
 
+// Every listener a drag handle carries, so add and remove stay in lockstep — the
+// native mouse engine, the touch/pen pointer engine, and the shared keyboard path.
+const handleListeners = [
+    ['mousedown', onHandleMouseDown],
+    ['mouseup', onHandleMouseUp],
+    ['pointerdown', onHandlePointerDown],
+    ['pointermove', onHandlePointerMove],
+    ['pointerup', onHandlePointerUp],
+    ['pointercancel', onHandlePointerCancel],
+    ['lostpointercapture', onHandleLostPointerCapture],
+    ['keydown', onHandleKeyDown],
+]
+
+function addHandleListeners(handle) {
+    handleListeners.forEach(([type, listener]) => handle.addEventListener(type, listener))
+}
+
+function removeHandleListeners(handle) {
+    handleListeners.forEach(([type, listener]) => handle.removeEventListener(type, listener))
+}
+
 function syncHandles() {
     const container = cardsContainerElement.value
     if (!container) return
@@ -249,30 +517,32 @@ function syncHandles() {
             handle.setAttribute('role', 'button')
             handle.setAttribute('tabindex', '0')
             handle.setAttribute('aria-label', 'Reorder')
-            handle.addEventListener('mousedown', onHandleMouseDown)
-            handle.addEventListener('mouseup', onHandleMouseUp)
-            handle.addEventListener('keydown', onHandleKeyDown)
+            addHandleListeners(handle)
             handle.appendChild(createHandleSvg())
             child.style.position = 'relative'
             child.prepend(handle)
         } else if (!props.reorderable && hasHandle) {
-            hasHandle.removeEventListener('mousedown', onHandleMouseDown)
-            hasHandle.removeEventListener('mouseup', onHandleMouseUp)
-            hasHandle.removeEventListener('keydown', onHandleKeyDown)
+            removeHandleListeners(hasHandle)
             hasHandle.remove()
         }
     })
 }
 
 function cleanupHandles() {
+    // A touch/pen drag may still be in flight when handles are torn down — e.g.
+    // reorderable toggled off mid-gesture, or an unmount. Once the handle is
+    // removed it can no longer receive pointerup/pointercancel, so release capture
+    // and reset drag state here. Otherwise activePointerId stays non-null and the
+    // guard at the top of onHandlePointerDown makes every future touch/pen drag
+    // early-return, silently killing touch reordering after a re-enable.
+    releasePointerCapture()
+    cleanupDragState()
     const container = cardsContainerElement.value
     if (!container) return
     Array.from(container.children).forEach(child => {
         const handle = child.querySelector('.rsui-card-group__drag-handle')
         if (handle) {
-            handle.removeEventListener('mousedown', onHandleMouseDown)
-            handle.removeEventListener('mouseup', onHandleMouseUp)
-            handle.removeEventListener('keydown', onHandleKeyDown)
+            removeHandleListeners(handle)
             handle.remove()
         }
         child.removeAttribute('draggable')