@redseed/redseed-ui-vue3 10.4.1 → 10.5.1

package/package.json

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

package/src/components/Chart/BarChart.vue

@@ -33,6 +33,9 @@ const props = defineProps({
     },
 })
 
+// A percentage height sizes the chart from its wrapper, so the wrapper grows to give it one.
+const isFill = computed(() => typeof props.height === 'string' && props.height.endsWith('%'))
+
 const root = ref(null)
 const mounted = ref(false)
 const theme = ref(resolveTheme(null))
@@ -56,7 +59,10 @@ const chartOptions = computed(() =>
 )
 </script>
 <template>
-    <div ref="root" class="rsui-chart">
+    <div
+        ref="root"
+        :class="['rsui-chart', { 'rsui-chart--fill': isFill }]"
+    >
         <VueApexCharts
             v-if="mounted"
             type="bar"

package/src/components/Layout/TwoColumnLayout.vue

@@ -8,6 +8,11 @@ const props = defineProps({
         type: Boolean,
         required: false,
     },
+    // Grow each column's content to the row's height, so side-by-side cards end level.
+    stretch: {
+        type: Boolean,
+        default: false,
+    },
 })
 </script>
 <template>
@@ -18,6 +23,7 @@ const props = defineProps({
             {
                 'rsui-two-column-layout__container--top-aside': topAside,
                 'rsui-two-column-layout__container--left-aside': leftAside,
+                'rsui-two-column-layout__container--stretch': stretch,
             }
         ]"
     >

package/src/components/Section/Section.vue

@@ -28,7 +28,12 @@ const props = defineProps({
     showGap: {
         type: Boolean,
         default: true,
-    }
+    },
+    // Let the content region grow into spare height, e.g. in a stretched TwoColumnLayout row.
+    fill: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 const showGapDelayed = ref(props.showGap)
@@ -52,6 +57,7 @@ const variantClass = computed(() => [
         'rsui-section--padded': props.padded,
         'rsui-section--header-padded': props.headerPadded,
         'rsui-section--content-padded': props.contentPadded,
+        'rsui-section--fill': props.fill,
         'rsui-section--show-gap': showGapDelayed.value,
         'rsui-section--primary': props.variant === 'primary',
         'rsui-section--secondary': props.variant === 'secondary',

package/src/components/Section/SectionHeader.vue

@@ -213,6 +213,11 @@ const titleTag = computed(() => HEADING_LEVELS.includes(String(props.headingLeve
         {
             'rsui-section-header--divider': showDivider,
             'rsui-section-header--clickable': isClickable,
+            // Direction driven by the SAME measurement as everything else in here.
+            // It used to come from `md:` — a viewport query at 768 — while the icon
+            // gate, the actions swap and the badge stacking all read the container at
+            // 640, so a narrow column on a wide screen got both layouts at once. #420.
+            'rsui-section-header--narrow': !responsiveWidth.specific,
         }
     ]"
     :role="isClickable ? 'button' : undefined"
@@ -222,6 +227,27 @@ const titleTag = computed(() => HEADING_LEVELS.includes(String(props.headingLeve
 >
     <div class="rsui-section-header__header">
 
+        <!--
+            The chevron takes the LEADING position, beside the text block rather than
+            inside the title — the same spot `#icon` occupies, and the same shape
+            `CardHeader` and `PageHeader` both use for `#avatar`.
+
+            It used to sit inside `__title`, copied from the coaching index prototype,
+            which hand-rolled it into a span in the title because it had no slot to use.
+            That indented the title and left the subtitle at the header's own edge, 46px
+            adrift from the heading it belongs to — three edges where there should be two.
+            Here the whole of `__text` (title, badge, subtitle) indents past it together.
+
+            Its own element, NOT the `#icon` slot: that slot is width-gated and a control
+            must not vanish on a narrow header (#372). `__header` is already `items-start`,
+            so it lands on the title's line rather than centring against the block. #407.
+        -->
+        <div v-if="rendersTrigger()"
+            class="rsui-section-header__trigger"
+        >
+            <DisclosureTrigger sm />
+        </div>
+
         <!-- Icon slot, optional — hidden on narrow sections -->
         <div class="rsui-section-header__icon"
             v-if="$slots.icon && responsiveWidth.specific"
@@ -238,23 +264,7 @@ const titleTag = computed(() => HEADING_LEVELS.includes(String(props.headingLeve
             <div :class="[
                 'rsui-section-header__title',
                 { 'rsui-section-header__title--stacked': !responsiveWidth.specific && !inlineBadge },
-                // --stacked gives the title text `basis-full`, which takes the whole row and
-                // strands the trigger on the line above it. Same class of defect CardHeader
-                // had, and it carries the same modifier name.
-                { 'rsui-section-header__title--with-trigger': rendersTrigger() },
             ]">
-                <!--
-                    First child of the TITLE row, not a sibling of the whole text block
-                    the way `#icon` is: `__icon` centres against title AND subtitle
-                    together, so with a subtitle present the chevron drifts off the line
-                    it belongs to. `sm` matches the ACTION SIZE guidance in
-                    section_header.css.
-                -->
-                <div v-if="rendersTrigger()"
-                    class="rsui-section-header__trigger"
-                >
-                    <DisclosureTrigger sm />
-                </div>
                 <component :is="titleTag"
                     :class="[
                         'rsui-section-header__title-text',