@redseed/redseed-ui-vue3 8.38.0 → 8.40.0

package/package.json

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

package/src/components/Card/CardHorizontal.vue

@@ -0,0 +1,146 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useResizeObserver, useMutationObserver } from '@vueuse/core'
+import Card from './Card.vue'
+
+const props = defineProps({
+    clickable: {
+        type: Boolean,
+        default: true,
+    },
+    hoverable: {
+        type: Boolean,
+        default: true,
+    },
+    bordered: {
+        type: Boolean,
+        default: true,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    // Accessible name for the clickable action layer (forwarded to Card's ariaLabel prop).
+    // Equivalent to the #aria-label slot — use either form, not both.
+    ariaLabel: {
+        type: String,
+        default: undefined,
+    },
+    phComponent: {
+        type: String,
+        default: 'CardHorizontal',
+    },
+})
+
+defineEmits(['click'])
+
+/* ── Floating thumbnail detection ────────────────────────────────────────────
+   Adds --floating to the thumbnail whenever the image does not reach the card
+   bottom, so CSS can restore the image's bottom-right radius.
+
+   Two independent conditions trigger floating. clientHeight is integer-rounded, so
+   strict `<` comparisons are stable — sub-pixel gaps (< 0.5 px) round to 0 and
+   produce equal clientHeights, leaving truly-flush images unaffected:
+     1. imgH > 0 && imgH < thumbH
+        Landscape: the loaded img is shorter than the 160px rail.
+        The imgH > 0 guard avoids a false positive on square cards while the
+        Image component's picture is still v-show=false (img.clientHeight = 0).
+     2. thumbH < cardContentH
+        Tall-body: the body column is taller than the 160px thumbnail.
+
+   NOTE: thumbIsFloating applies --floating in both stacked (mobile) and rail
+   (≥512px container) layouts. In the stacked layout the --floating CSS rules are
+   scoped to the @container/card-horizontal block so they have no visual effect —
+   the flag may be true in the stacked layout but is intentionally not guarded here.
+
+   useResizeObserver watches three targets: the thumbnail element, its parent
+   (content wrapper), and the currently-rendered img (currentImg ref — auto-retargets
+   via vueuse's reactive watch when the img reference changes, replacing the manual
+   unobserve/observe swap in the previous hand-rolled implementation).
+   useMutationObserver fires updateFloating when DOM children change in the thumbnail
+   subtree — catches Image component adding its <img> when originalUrl is set after
+   the card has already mounted (skeleton-first / data-loaded-later pattern).
+   All observers auto-cleanup on scope dispose (no onMounted/onUnmounted needed).  */
+
+const thumbEl = ref(null)
+const thumbIsFloating = ref(false)
+const currentImg = ref(null)
+const thumbParent = computed(() => thumbEl.value?.parentElement ?? null)
+
+function updateFloating() {
+    const thumb = thumbEl.value
+    if (!thumb) return
+
+    // Scoped img lookup: prefer the img inside an rsui-image wrapper (the common
+    // case), then fall back to a raw direct-child img. The :scope > img limit
+    // prevents a badge or avatar img nested deeper in the slot from being measured.
+    const img =
+        thumb.querySelector('.rsui-image img') ||
+        thumb.querySelector(':scope > img')
+
+    // Keep currentImg in sync so useResizeObserver(currentImg) auto-retargets
+    // the img observer when a late-appearing element replaces the previous one.
+    currentImg.value = img ?? null
+
+    const imgH = img ? img.clientHeight : 0
+    const thumbH = thumb.clientHeight
+    const cardContentH = thumb.parentElement ? thumb.parentElement.clientHeight : thumbH
+    // imgH > 0 guard on condition 1: while the Image component's picture is v-show=false
+    // (loading / empty state), img.clientHeight is 0. Without the guard a square card would
+    // incorrectly receive --floating at mount; the class self-corrects once the image loads
+    // and condition 1 can be re-evaluated with the real rendered height.
+    //
+    // Strict comparison (no px tolerance): clientHeight is integer-rounded, so a truly-flush
+    // image (sub-pixel gap < 0.5 px) produces equal integer heights and the condition is
+    // false. ANY visible gap (≥ 1 integer px) correctly triggers floating.
+    thumbIsFloating.value = (imgH > 0 && imgH < thumbH) || (thumbH < cardContentH)
+}
+
+useResizeObserver(thumbEl, updateFloating)
+useResizeObserver(thumbParent, updateFloating)
+useResizeObserver(currentImg, updateFloating)
+useMutationObserver(thumbEl, updateFloating, { childList: true, subtree: true })
+</script>
+<template>
+<Card
+    class="rsui-card-horizontal"
+    :clickable="clickable"
+    :hoverable="hoverable"
+    :bordered="bordered"
+    :disabled="disabled"
+    :padded="false"
+    :aria-label="ariaLabel"
+    :ph-component="phComponent"
+    @click="$emit('click')"
+>
+    <template v-if="$slots['aria-label']" #aria-label>
+        <slot name="aria-label"></slot>
+    </template>
+
+    <!-- thumbnail slot: required for the horizontal rail layout.
+         Pass an Image component (originalUrl + alt) to populate the 160px column.
+         An empty slot renders a blank 160px rail gap in the rail layout. -->
+    <div
+        ref="thumbEl"
+        class="rsui-card-horizontal__thumbnail"
+        :class="{ 'rsui-card-horizontal__thumbnail--floating': thumbIsFloating }"
+    >
+        <slot name="thumbnail"></slot>
+    </div>
+
+    <div class="rsui-card-horizontal__body">
+        <div class="rsui-card-horizontal__content">
+            <div v-if="$slots.title" class="rsui-card-horizontal__title">
+                <slot name="title"></slot>
+            </div>
+            <div v-if="$slots.description" class="rsui-card-horizontal__description">
+                <slot name="description"></slot>
+            </div>
+        </div>
+
+        <div v-if="$slots.meta" class="rsui-card-horizontal__meta">
+            <slot name="meta"></slot>
+        </div>
+    </div>
+</Card>
+</template>

package/src/components/Card/index.js

@@ -2,6 +2,7 @@ import ButtonCard from './ButtonCard.vue'
 import CheckboxCard from './CheckboxCard.vue'
 import Card from './Card.vue'
 import CardHeader from './CardHeader.vue'
+import CardHorizontal from './CardHorizontal.vue'
 import CardResource from './CardResource.vue'
 import RadioCard from './RadioCard.vue'
 import MetricCard from './MetricCard.vue'
@@ -10,6 +11,7 @@ export {
     CheckboxCard,
     Card,
     CardHeader,
+    CardHorizontal,
     CardResource,
     RadioCard,
     MetricCard,

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"