@redseed/redseed-ui-vue3 8.33.2 → 8.34.0

package/package.json

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

package/src/components/Card/CardHeader.vue

@@ -108,12 +108,6 @@ function handleMoreActionsClick() {
 
 
             </div>
-                <!-- Badge slot, optional -->
-                <div class="rsui-card-header__badge"
-                    v-if="showBadge && $slots.badge"
-                >
-                    <slot name="badge"></slot>
-                </div>
             <!-- Subtitle slot, optional -->
             <div :class="[
                 'rsui-card-header__subtitle',
@@ -125,6 +119,13 @@ function handleMoreActionsClick() {
             >
                 <slot name="subtitle"></slot>
             </div>
+
+            <!-- Badge slot, optional -->
+            <div class="rsui-card-header__badge"
+                v-if="showBadge && $slots.badge"
+            >
+                <slot name="badge"></slot>
+            </div>
         </div>
 
         <!-- Actions slot, optional -->

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