@redseed/redseed-ui-vue3 8.39.0 → 8.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.39.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,