@redseed/redseed-ui-vue3 8.33.3 → 8.35.0

package/package.json

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import FormFieldSlot from './FormFieldSlot.vue'
 import { CheckIcon } from '@heroicons/vue/24/outline'
 import { useFormFieldA11y } from '../../composables/useFormFieldA11y.js'
@@ -8,6 +8,22 @@ defineOptions({
     inheritAttrs: false,
 })
 
+const props = defineProps({
+    // Smaller variants for dense surfaces. Default (no flag) is the 24px size;
+    // only the smallest enabled flag applies (xs wins over sm).
+    sm: {
+        type: Boolean,
+        default: false,
+    },
+    xs: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+// Resolve to a single size modifier so only one applies at a time.
+const size = computed(() => props.xs ? 'xs' : props.sm ? 'sm' : null)
+
 const model = defineModel()
 
 const checked = ref(false)
@@ -35,7 +51,7 @@ function check(event) {
 >
     <template #label>
         <div class="rsui-form-field-checkbox__checkbox">
-            <div class="rsui-form-field-checkbox__check">
+            <div :class="['rsui-form-field-checkbox__check', size && `rsui-form-field-checkbox__check--${size}`]">
                 <CheckIcon v-if="checked" aria-hidden="true"></CheckIcon>
                 <input
                     :checked="checked"
@@ -52,7 +68,7 @@ function check(event) {
                 >
             </div>
             <div v-if="$slots.label"
-                class="rsui-form-field-checkbox__label"
+                :class="['rsui-form-field-checkbox__label', size && `rsui-form-field-checkbox__label--${size}`]"
             >
                 <slot name="label"></slot>
                 <span

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">

package/src/components/Table/ColumnPicker.vue

@@ -1,9 +1,11 @@
 <script setup>
 import { computed } from 'vue'
 import DropdownMenu from '../DropdownMenu/DropdownMenu.vue'
+import ButtonSecondary from '../Button/ButtonSecondary.vue'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
 import Icon from '../Icon/Icon.vue'
-import { AdjustmentsHorizontalIcon, CheckIcon } from '@heroicons/vue/24/outline'
+import FormFieldCheckbox from '../FormField/FormFieldCheckbox.vue'
+import { AdjustmentsHorizontalIcon } from '@heroicons/vue/24/outline'
 
 const props = defineProps({
     columns: {
@@ -19,9 +21,22 @@ const props = defineProps({
 
 const visibleKeys = defineModel('visibleKeys', { type: Array, required: true })
 
-const isVisible = (key) => visibleKeys.value.includes(key)
+// Columns shown in the picker — `pickerHidden` columns are omitted entirely.
+const pickerColumns = computed(() => props.columns.filter(c => !c.pickerHidden))
+
+// Required columns are always rendered by the table (Table.vue), so the picker
+// treats them as visible regardless of `visibleKeys` — keeps the locked-on
+// checkbox checked and the count consistent even when a controlled
+// `visibleKeys` omits the required key.
+const isVisible = (key) => {
+    const column = props.columns.find(c => c.key === key)
+    if (column?.required) return true
+    return visibleKeys.value.includes(key)
+}
 
 function toggle(key) {
+    const column = props.columns.find(c => c.key === key)
+    if (column?.required) return
     if (visibleKeys.value.includes(key)) {
         visibleKeys.value = visibleKeys.value.filter(k => k !== key)
     } else {
@@ -29,37 +44,53 @@ function toggle(key) {
     }
 }
 
-const visibleCount = computed(() => visibleKeys.value.length)
-const totalCount = computed(() => props.columns.length)
+const visibleCount = computed(() => pickerColumns.value.filter(c => isVisible(c.key)).length)
+const totalCount = computed(() => pickerColumns.value.length)
 </script>
 
 <template>
 <DropdownMenu right class="rsui-column-picker">
     <template #trigger="{ open, isOpen }">
-        <ButtonTertiary :aria-expanded="isOpen" @click="open">
+        <ButtonTertiary :aria-expanded="isOpen"
+            class="rsui-column-picker__trigger--desktop"
+            @click="open"
+        >
             <Icon sm><AdjustmentsHorizontalIcon /></Icon>
             {{ label }}
             <span class="rsui-column-picker__count">{{ visibleCount }}/{{ totalCount }}</span>
         </ButtonTertiary>
+        <ButtonSecondary :aria-expanded="isOpen"
+            class="rsui-column-picker__trigger--mobile"
+            @click="open"
+        >
+            <Icon sm><AdjustmentsHorizontalIcon /></Icon>
+            {{ label }}
+            <span class="rsui-column-picker__count">{{ visibleCount }}/{{ totalCount }}</span>
+        </ButtonSecondary>
     </template>
 
     <ul class="rsui-column-picker__list" role="none">
-        <li v-for="column in columns"
+        <li v-for="column in pickerColumns"
             :key="column.key"
-            class="rsui-column-picker__item"
+            :class="['rsui-column-picker__item', { 'rsui-column-picker__item--disabled': column.required }]"
             role="menuitemcheckbox"
             :aria-checked="isVisible(column.key)"
-            tabindex="0"
+            :aria-disabled="column.required ? 'true' : undefined"
+            :aria-label="column.name || column.key"
+            :tabindex="column.required ? -1 : 0"
             @click.stop="toggle(column.key)"
             @keydown.enter.self.prevent="toggle(column.key)"
             @keydown.space.self.prevent="toggle(column.key)"
         >
-            <span :class="['rsui-column-picker__check', { 'rsui-column-picker__check--on': isVisible(column.key) }]"
-                aria-hidden="true"
-            >
-                <CheckIcon v-if="isVisible(column.key)" />
+            <!-- The row owns the click, keyboard and aria state; this rsui
+                 checkbox is purely presentational, controlled by the row's
+                 visible state. `inert` keeps its input out of the tab order
+                 and a11y tree (the row carries the label via aria-label). -->
+            <span class="rsui-column-picker__checkbox" inert>
+                <FormFieldCheckbox sm :disabled="column.required" :model-value="isVisible(column.key)">
+                    <template #label>{{ column.name || column.key }}</template>
+                </FormFieldCheckbox>
             </span>
-            <span class="rsui-column-picker__label">{{ column.name || column.key }}</span>
         </li>
     </ul>
 </DropdownMenu>

package/src/components/Table/Table.vue

@@ -81,7 +81,11 @@ const effectiveVisibleKeys = computed({
 })
 
 const visibleColumns = computed(() => {
-    return props.columns.filter(column => effectiveVisibleKeys.value.includes(column.key))
+    return props.columns.filter(column => {
+        // `required` and `pickerHidden` columns are always rendered, regardless of visibleKeys.
+        if (column.required || column.pickerHidden) return true
+        return effectiveVisibleKeys.value.includes(column.key)
+    })
 })
 </script>