@redseed/redseed-ui-vue3 8.38.0 → 8.39.0

package/package.json

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

package/src/components/Table/Table.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { Card, CardHeader } from '../Card'
 import Tr from './Tr.vue'
 import Th from './Th.vue'
@@ -49,6 +49,15 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    // Opt-in click-and-drag horizontal scrolling. When true, the user can grab
+    // the scrollable columns and drag left/right to pan the table from anywhere,
+    // not just the bottom scrollbar. A plain click still emits `click:row`; only a
+    // drag past a small threshold scrolls (and suppresses the trailing click).
+    // Mouse only — native touch panning is left untouched.
+    dragScroll: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 // v-model:visibleKeys — undefined means "uncontrolled" / use internal default (all visible).
@@ -87,6 +96,80 @@ const visibleColumns = computed(() => {
         return effectiveVisibleKeys.value.includes(column.key)
     })
 })
+
+// --- Drag-to-scroll (opt-in via `dragScroll`) --------------------------------
+const scrollContainer = ref(null)
+const isScrollable = ref(false) // does the container actually overflow horizontally?
+const isDragging = ref(false)   // true once a press crosses the drag threshold
+
+const DRAG_THRESHOLD = 5 // px of movement before a press becomes a drag, not a click
+
+let pressX = 0
+let pressScrollLeft = 0
+let pressing = false
+let dragged = false
+
+function updateScrollable() {
+    const el = scrollContainer.value
+    isScrollable.value = !!el && el.scrollWidth > el.clientWidth
+}
+
+function onPointerDown(event) {
+    if (!props.dragScroll) return
+    // Mouse only — leave native touch panning alone — and primary button only.
+    if (event.pointerType !== 'mouse' || event.button !== 0) return
+    const el = scrollContainer.value
+    if (!el || el.scrollWidth <= el.clientWidth) return
+    // The pinned column is the anchor: grab the scrollable columns, not it.
+    if (event.target.closest?.('.rsui-td--pinned, .rsui-th--pinned')) return
+    pressing = true
+    dragged = false
+    pressX = event.clientX
+    pressScrollLeft = el.scrollLeft
+}
+
+function onPointerMove(event) {
+    if (!pressing) return
+    const dx = event.clientX - pressX
+    if (!dragged) {
+        if (Math.abs(dx) < DRAG_THRESHOLD) return
+        dragged = true
+        isDragging.value = true
+        scrollContainer.value?.setPointerCapture?.(event.pointerId)
+    }
+    event.preventDefault() // suppress text selection while dragging
+    scrollContainer.value.scrollLeft = pressScrollLeft - dx
+}
+
+function endPress(event) {
+    if (!pressing) return
+    pressing = false
+    isDragging.value = false
+    const el = scrollContainer.value
+    if (el?.hasPointerCapture?.(event.pointerId)) el.releasePointerCapture(event.pointerId)
+    // `dragged` stays true so the click-capture handler swallows the click the
+    // browser fires after a drag; it resets on the next press.
+}
+
+function onClickCapture(event) {
+    // Swallow the click that trails a drag so a row isn't activated by scrolling.
+    if (dragged) {
+        event.stopPropagation()
+        event.preventDefault()
+        dragged = false
+    }
+}
+
+let resizeObserver = null
+onMounted(() => {
+    updateScrollable()
+    if (window.ResizeObserver && scrollContainer.value) {
+        resizeObserver = new ResizeObserver(updateScrollable)
+        resizeObserver.observe(scrollContainer.value)
+    }
+})
+onBeforeUnmount(() => resizeObserver?.disconnect())
+watch([() => props.rows, visibleColumns], () => nextTick(updateScrollable), { deep: true })
 </script>
 
 <template>
@@ -138,7 +221,20 @@ const visibleColumns = computed(() => {
             },
         ]"
     >
-        <div class="rsui-table__container">
+        <div ref="scrollContainer"
+            :class="[
+                'rsui-table__container',
+                {
+                    'rsui-table__container--draggable': dragScroll && isScrollable,
+                    'rsui-table__container--dragging': isDragging,
+                },
+            ]"
+            @pointerdown="onPointerDown"
+            @pointermove="onPointerMove"
+            @pointerup="endPress"
+            @pointercancel="endPress"
+            @click.capture="onClickCapture"
+        >
             <table
                 :aria-labelledby="showHeader && $slots.title ? titleId : undefined"
                 :aria-label="!showHeader || !$slots.title ? ariaLabel : undefined"