@redseed/redseed-ui-vue3 10.0.0 → 10.3.0

package/src/components/FormField/FormFieldSlot.vue

@@ -15,6 +15,21 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    /**
+     * Set by a field component to say "the id I handed you is already on my own control".
+     *
+     * It is what lets `useFormFieldA11y()` tell two identical-looking nestings apart. A
+     * field renders this slot as its own root and puts the id on its own input, so anything
+     * appearing in the slots below is a SEPARATE control and must mint its own id. A bare
+     * FormFieldSlot written by a consumer owns no control, so whatever it wraps is the
+     * control this label belongs to and should adopt the id.
+     *
+     * Injection alone cannot distinguish those — both cases simply see a provider above.
+     */
+    idClaimed: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 defineOptions({
@@ -39,11 +54,13 @@ const ariaDescribedby = computed(() => {
 // aria-invalid when error slot is present
 const ariaInvalid = computed(() => slots.error ? true : undefined)
 
-// Provide a11y values for child components to inject
+// Provide a11y values for child components to inject. `idClaimed` travels with them so a
+// nested field can tell whether the id above it is already spoken for.
 provide(FormFieldA11yKey, {
     inputId,
     ariaDescribedby,
     ariaInvalid,
+    idClaimed: computed(() => props.idClaimed),
 })
 
 const formFieldSlotClass = computed(() => [

package/src/components/FormField/FormFieldText.vue

@@ -23,7 +23,8 @@ defineExpose({
 </script>
 <template>
 <FormFieldSlot
-    :id="$attrs.id"
+    :id="inputId"
+    id-claimed
     :class="[$attrs.class, 'rsui-form-field-text']"
     :required="$attrs.required"
     :showAsterisk="$attrs.showAsterisk"
@@ -47,7 +48,7 @@ defineExpose({
             :autocomplete="$attrs.autocomplete"
             :autofocus="$attrs.autofocus"
             :disabled="$attrs.disabled"
-            :id="inputId || $attrs.id"
+            :id="inputId"
             :inputmode="$attrs.inputmode"
             :max="$attrs.max"
             :maxlength="$attrs.maxlength"

package/src/components/FormField/FormFieldTextarea.vue

@@ -50,7 +50,8 @@ defineExpose({
 </script>
 <template>
     <FormFieldSlot
-        :id="$attrs.id"
+        :id="inputId"
+    id-claimed
         :class="[$attrs.class, 'rsui-form-field-textarea']"
         :required="$attrs.required"
         :showAsterisk="$attrs.showAsterisk"
@@ -69,7 +70,7 @@ defineExpose({
             :autocomplete="$attrs.autocomplete"
             :autofocus="$attrs.autofocus"
             :disabled="$attrs.disabled"
-            :id="inputId || $attrs.id"
+            :id="inputId"
             :maxlength="$attrs.maxlength"
             :minlength="$attrs.minlength"
             :name="$attrs.name"

package/src/components/FormField/FormFieldTreeSelect.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, useAttrs } from 'vue'
+import { ref, computed } from 'vue'
 import { useFuse } from '@vueuse/integrations/useFuse'
 import FormFieldSlot from './FormFieldSlot.vue'
 import FormFieldSearch from './FormFieldSearch.vue'
@@ -49,7 +49,6 @@ const props = defineProps({
 
 const emit = defineEmits(['change'])
 
-const attrs = useAttrs()
 const { inputId, ariaDescribedby, ariaInvalid } = useFormFieldA11y()
 
 const model = defineModel({
@@ -57,8 +56,6 @@ const model = defineModel({
     validator: () => true,
 })
 
-const effectiveId = computed(() => inputId.value || attrs.id)
-
 const show = ref(false)
 function openModal() {
     if (props.disabled) return
@@ -181,7 +178,8 @@ function deselectOption(node) {
 
 <template>
 <FormFieldSlot
-    :id="$attrs.id"
+    :id="inputId"
+    id-claimed
     :class="[$attrs.class, 'rsui-form-field-tree-select']"
     :required="$attrs.required"
     :showAsterisk="$attrs.showAsterisk"
@@ -199,7 +197,7 @@ function deselectOption(node) {
                 { 'rsui-form-field-tree-select__trigger--full': fullWidth },
                 { 'rsui-form-field-tree-select__trigger--disabled': disabled },
             ]"
-            :id="effectiveId"
+            :id="inputId"
             :aria-describedby="ariaDescribedby"
             :aria-invalid="ariaInvalid"
             :aria-required="$attrs.required || undefined"
@@ -222,7 +220,14 @@ function deselectOption(node) {
         </template>
 
         <div class="rsui-form-field-tree-select__search">
+            <!--
+                Its own id. This search box lives inside the tree select's own
+                FormFieldSlot, so without one it would adopt the outer field's id and two
+                controls would answer to it — the trigger and this input. `id-claimed`
+                above makes it mint its own, and naming it explicitly keeps it legible.
+            -->
             <FormFieldSearch
+                :id="`${inputId}-search`"
                 v-model="searchInput"
                 :placeholder="searchPlaceholder"
             ></FormFieldSearch>

package/src/components/Layout/PageHeader.vue

@@ -46,6 +46,26 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    /*
+     * The heading level of the title.
+     *
+     * Defaults to 1, which is right for a real page and was the hardcoded behaviour.
+     * It is wrong everywhere else, and there was no way to say so: a PageHeader in a
+     * drawer, a preview or a docs page emitted a second <h1> that no care in the
+     * surrounding markup could correct. Any page that demonstrates the component more than
+     * once emits one <h1> per instance — the Storybook autodocs page for PageHeader
+     * renders 21 stories, so 21 of them on one page.
+     *
+     * Same shape and validator as SectionHeader.headingLevel, deliberately — the two
+     * header components disagreeing about whether their level is the consumer's business
+     * is what #337 started closing and this finishes. `null` renders a <span>, for a
+     * title that is styled as one but is not a heading at all.
+     */
+    headingLevel: {
+        type: [Number, String],
+        default: 1,
+        validator: (value) => value === null || ['1', '2', '3', '4', '5', '6'].includes(String(value)),
+    },
 })
 
 /**
@@ -108,6 +128,28 @@ onBeforeUnmount(() => {
     metaObserver = null
 })
 
+/*
+ * Shared with the tag below but NOT with the validator in defineProps, which is forced to
+ * repeat the list: defineProps() is hoisted outside setup() and cannot close over a local.
+ * A test asserts the two agree.
+ */
+const HEADING_LEVELS = ['1', '2', '3', '4', '5', '6']
+
+/*
+ * Falls back to a span for anything that is not a real heading level, rather than
+ * interpolating whatever it was handed.
+ *
+ * The validator only warns, and Vue strips validators from production builds — so before
+ * this, `heading-level="null"` (the string, an easy slip when the correct form needs a
+ * binding) rendered <hnull>, and `:heading-level="7"` rendered <h7>. Both are invalid
+ * elements, both shipped silently, and both LOOKED correct because the styling hook is a
+ * class rather than the tag. Rendered and verified, not assumed.
+ *
+ * A span is the safe direction: it never corrupts the document outline, where <h7> is
+ * simply broken markup.
+ */
+const titleTag = computed(() => HEADING_LEVELS.includes(String(props.headingLevel)) ? `h${props.headingLevel}` : 'span')
+
 const pageHeaderClass = computed(() => [
     'rsui-page-header',
     {
@@ -143,9 +185,9 @@ const pageHeaderClass = computed(() => [
                     </div>
 
                     <div class="rsui-page-header__title-text-container">
-                        <h1>
+                        <component :is="titleTag" class="rsui-page-header__heading">
                             <slot name="title"></slot>
-                        </h1>
+                        </component>
                         <div v-if="$slots.status" class="rsui-page-header__status">
                             <slot name="status"></slot>
                         </div>

package/src/components/MetaInfo/MetaInfo.vue

@@ -85,5 +85,17 @@ const emit = defineEmits(['click'])
     <div class="rsui-meta-info__value">
         <slot></slot>
     </div>
+
+    <!--
+        A second, subordinate line UNDER the value — "Repeats weekly on Tuesday" beneath
+        a date, rather than a fourth field beside it.
+
+        A sibling of __value rather than a child of it: __value is a flex ROW (it lines an
+        avatar up beside its text), so a subtitle dropped inside it lands next to the value
+        instead of below. The root is the column, and its gap-y already spaces this.
+    -->
+    <div v-if="$slots.subtitle" class="rsui-meta-info__subtitle">
+        <slot name="subtitle"></slot>
+    </div>
 </div>
 </template>

package/src/components/Section/SectionHeader.vue

@@ -139,7 +139,27 @@ function showsToolbar() {
  * Element used to render the title — a real heading when a level is supplied,
  * otherwise a non-heading <span>, which now requires passing null explicitly.
  */
-const titleTag = computed(() => props.headingLevel ? `h${props.headingLevel}` : 'span')
+/*
+ * Shared with the tag below but NOT with the validator in defineProps, which is forced to
+ * repeat the list: defineProps() is hoisted outside setup() and cannot close over a local.
+ * A test asserts the two agree.
+ */
+const HEADING_LEVELS = ['1', '2', '3', '4', '5', '6']
+
+/*
+ * Falls back to a span for anything that is not a real heading level, rather than
+ * interpolating whatever it was handed.
+ *
+ * The validator only warns, and Vue strips validators from production builds — so before
+ * this, `heading-level="null"` (the string, an easy slip when the correct form needs a
+ * binding) rendered <hnull>, and `:heading-level="7"` rendered <h7>. Both are invalid
+ * elements, both shipped silently, and both LOOKED correct because the styling hook is a
+ * class rather than the tag. Rendered and verified, not assumed.
+ *
+ * A span is the safe direction: it never corrupts the document outline, where <h7> is
+ * simply broken markup.
+ */
+const titleTag = computed(() => HEADING_LEVELS.includes(String(props.headingLevel)) ? `h${props.headingLevel}` : 'span')
 </script>
 <template>
 <div ref="sectionHeaderElement"

package/src/components/Table/Table.vue

@@ -5,6 +5,7 @@ import Tr from './Tr.vue'
 import Th from './Th.vue'
 import Td from './Td.vue'
 import ColumnPicker from './ColumnPicker.vue'
+import FormFieldCheckbox from '../FormField/FormFieldCheckbox.vue'
 
 const titleId = _.uniqueId('table-title-')
 
@@ -58,8 +59,96 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    /**
+     * Row selection: a checkbox column, and a select-all in the header.
+     *
+     * Opt-in, so no existing table changes. Use with `v-model:selected`, which holds the
+     * ids of the selected rows.
+     *
+     * Exists because the alternative was consumers hand-rolling it, and the LMS shows what
+     * that costs: bare `<input type="checkbox">` elements with the select-all reconciled
+     * through `document.getElementById`, no indeterminate state, no accessible names, and
+     * the select-all stranded in the `#title` slot because there was no header cell to put
+     * it in — which is why it landed on its own line on a phone (#390).
+     */
+    selectable: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Accessible name for the select-all checkbox.
+     *
+     * A prop rather than a slot because it is an accessible name, not content — there is
+     * nothing to render, and a slot would invite markup into a `<th>` that holds only a
+     * control.
+     */
+    selectAllLabel: {
+        type: String,
+        default: 'Select all rows',
+    },
+})
+
+/*
+ * v-model:selected — the ids of the selected rows.
+ *
+ * The consumer owns the array, which is the whole point: the LMS version kept the truth in
+ * the DOM and wrote `.checked` directly, so two tables on one page collided on the id and
+ * nothing could read the selection back out.
+ */
+const selected = defineModel('selected', {
+    type: Array,
+    default: () => [],
 })
 
+const selectableRowIds = computed(() => props.rows.map((row) => row.id))
+
+const isRowSelected = (row) => selected.value.includes(row.id)
+
+/*
+ * Every row, none, or some. The third is the state a select-all exists to report and the
+ * one the hand-rolled version could not: with a plain boolean, a partial selection renders
+ * identically to an empty one.
+ */
+const allSelected = computed(() =>
+    selectableRowIds.value.length > 0
+    && selectableRowIds.value.every((id) => selected.value.includes(id))
+)
+
+const someSelected = computed(() =>
+    selectableRowIds.value.some((id) => selected.value.includes(id))
+)
+
+function toggleRow(row) {
+    // Rebuilt rather than mutated, so a consumer holding the array in a readonly store or
+    // watching it shallowly still sees the change.
+    selected.value = isRowSelected(row)
+        ? selected.value.filter((id) => id !== row.id)
+        : [...selected.value, row.id]
+}
+
+/*
+ * Select-all acts on THESE rows, not on everything the consumer might have.
+ *
+ * A paginated or filtered table only knows the page it was handed, so "all" can only
+ * honestly mean "all of these". Clearing removes just this page's ids and leaves any
+ * selection made on another page intact.
+ */
+function toggleAll() {
+    selected.value = allSelected.value
+        ? selected.value.filter((id) => !selectableRowIds.value.includes(id))
+        : [...new Set([...selected.value, ...selectableRowIds.value])]
+}
+
+/*
+ * Names the row, not the control. A column of boxes all called "Select row" is a column of
+ * identical announcements with nothing to tell them apart, which is what the LMS shipped.
+ * `row.selectionLabel` wins; `row.ariaLabel` is the fallback because rows already carry it
+ * for the clickable case, so most consumers get a real name for free.
+ */
+function rowSelectionLabel(row) {
+    return row.selectionLabel ?? row.ariaLabel ?? 'Select row'
+}
+
 // v-model:visibleKeys — undefined means "uncontrolled" / use internal default (all visible).
 const visibleKeys = defineModel('visibleKeys', {
     type: Array,
@@ -242,6 +331,29 @@ watch([() => props.rows, visibleColumns], () => nextTick(updateScrollable), { de
                 <caption v-if="!showHeader && $slots.title"><slot name="title"></slot></caption>
                 <thead v-if="visibleColumns.length">
                     <Tr>
+                        <!--
+                            A real header cell for the select-all, which is the point.
+                            It used to have nowhere to go but the #title slot, and
+                            CardHeader stacks title and actions on separate rows when
+                            narrow — so on a phone it was stranded on a line of its own
+                            above the search (#390).
+
+                            scope="col" like any other header cell; the checkbox carries
+                            the accessible name, so the cell needs no text of its own.
+                        -->
+                        <Th v-if="selectable"
+                            scope="col"
+                            :fixed="fixedColumns"
+                            class="rsui-table__select-cell"
+                        >
+                            <FormFieldCheckbox sm
+                                :model-value="allSelected"
+                                :indeterminate="someSelected && !allSelected"
+                                :aria-label="selectAllLabel"
+                                @update:model-value="toggleAll"
+                            ></FormFieldCheckbox>
+                        </Th>
+
                         <Th v-for="column in visibleColumns"
                             :key="column.key"
                             scope="col"
@@ -268,6 +380,24 @@ watch([() => props.rows, visibleColumns], () => nextTick(updateScrollable), { de
                         :aria-label="row.ariaLabel"
                         @click="$emit('click:row', row)"
                     >
+                        <!--
+                            @click.stop so ticking a box on a clickable row does not also
+                            open the row. Selecting and navigating are different intents,
+                            and the whole reason to select is to act on rows without
+                            visiting them.
+                        -->
+                        <Td v-if="selectable"
+                            :fixed="fixedColumns"
+                            class="rsui-table__select-cell"
+                            @click.stop
+                        >
+                            <FormFieldCheckbox sm
+                                :model-value="isRowSelected(row)"
+                                :aria-label="rowSelectionLabel(row)"
+                                @update:model-value="toggleRow(row)"
+                            ></FormFieldCheckbox>
+                        </Td>
+
                         <Td v-for="column in visibleColumns"
                             :key="column.key"
                             :alignment="column?.alignment"