@redseed/redseed-ui-vue3 10.4.0 → 10.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "10.4.0",
+    "version": "10.5.0",
     "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

@@ -238,6 +238,10 @@ 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