@redseed/redseed-ui-vue3 8.34.0 → 8.35.0

package/package.json

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

package/src/components/Card/Card.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, useSlots } from 'vue'
 import { useResponsiveWidth } from '../../helpers'
 
 const props = defineProps({
@@ -59,10 +59,16 @@ const props = defineProps({
         type: String,
         default: undefined,
     },
+    phComponent: {
+        type: String,
+        default: 'Card',
+    },
 })
 
 const emit = defineEmits(['click'])
 
+const slots = useSlots()
+
 const cardElement = ref(null)
 const { responsiveWidth } = useResponsiveWidth(cardElement)
 
@@ -91,6 +97,28 @@ const cardClass = computed(() => [
     }
 ])
 
+// PostHog autocapture reads the accessible name off the action layer. The
+// ariaLabel prop covers the prop path, but cards commonly supply their label
+// via the #aria-label slot (see ButtonCard / MetricCard), where the prop is
+// undefined. Mirror the slot's text so slot-labelled cards still emit a named
+// capture event instead of an unlabeled one.
+function slotText(nodes) {
+    if (!Array.isArray(nodes)) return ''
+    return nodes
+        .map((node) => {
+            if (typeof node.children === 'string') return node.children
+            if (Array.isArray(node.children)) return slotText(node.children)
+            return ''
+        })
+        .join('')
+}
+
+const captureLabel = computed(() => {
+    if (props.ariaLabel) return props.ariaLabel
+    if (slots['aria-label']) return slotText(slots['aria-label']()).trim() || undefined
+    return undefined
+})
+
 function onClick() {
     if (props.disabled) return
 
@@ -127,6 +155,8 @@ function onClick() {
             :title="$attrs.title"
             :aria-label="!$slots['aria-label'] ? ariaLabel : undefined"
             :aria-disabled="disabled ? true : undefined"
+            :data-ph-capture-attribute-component="phComponent"
+            :data-ph-capture-attribute-label="captureLabel"
             @click="onClick"
             @keydown.enter.prevent="!$event.repeat && onClick()"
             @keydown.space.prevent="!$event.repeat && onClick()"

package/src/components/Card/MetricCard.vue

@@ -27,6 +27,7 @@ const props = defineProps({
 <Card class="rsui-metric-card"
     :clickable="props.clickable"
     :hoverable="props.hoverable"
+    ph-component="MetricCard"
 >
     <template v-if="$slots['aria-label']" #aria-label>
         <slot name="aria-label"></slot>

package/src/components/Section/SectionSlider.vue

@@ -194,6 +194,9 @@ function showPreviousSlide() {
                     >
                         <button class="rsui-section-slider__action"
                             :disabled="disabledPrevButton"
+                            aria-label="Previous"
+                            data-ph-capture-attribute-component="SectionSliderAction"
+                            data-ph-capture-attribute-label="Previous"
                             @click="showPreviousSlide"
                         >
                             <Icon :invert="featured">
@@ -203,6 +206,9 @@ function showPreviousSlide() {
 
                         <button class="rsui-section-slider__action"
                             :disabled="disabledNextButton"
+                            aria-label="Next"
+                            data-ph-capture-attribute-component="SectionSliderAction"
+                            data-ph-capture-attribute-label="Next"
                             @click="showNextSlide"
                         >
                             <Icon :invert="featured">