@redseed/redseed-ui-vue3 11.0.1 → 11.0.2

package/package.json

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

package/src/components/Card/CardHeader.vue

@@ -2,10 +2,11 @@
 import { computed, inject, ref, toRefs, useAttrs, useSlots } from 'vue'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
 import Icon from '../Icon/Icon.vue'
-import { rendersContent } from '../../helpers/slots'
+import { rendersContent, countsRenderedNodes } from '../../helpers/slots'
 import { useResponsiveWidth } from '../../helpers'
 import DisclosureTrigger from '../Disclosure/DisclosureTrigger.vue'
 import { useDisclosureTrigger } from '../../composables/useDisclosureTrigger'
+import { useColumnOnAWiderPage } from '../../composables/useColumnOnAWiderPage'
 import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline'
 
 const props = defineProps({
@@ -126,7 +127,38 @@ const isClickable = computed(() => !!attrs.onClick)
 
 const cardHeaderElement = ref(null)
 
-const { responsiveWidth } = useResponsiveWidth(cardHeaderElement, 640)
+const { responsiveWidth, width: cardHeaderWidth } = useResponsiveWidth(cardHeaderElement, 640)
+
+/*
+ * Whether this card is a column on a wider page rather than the page itself — a 425px card
+ * in a two-up grid on a 1000px page is a column, and a 425px card on a phone is not. Same
+ * rule and same reasoning as SectionHeader; see useColumnOnAWiderPage.
+ *
+ * 11 lms1 CardHeaders pass `#actions`.
+ */
+const isColumnOnAWiderPage = useColumnOnAWiderPage(cardHeaderWidth)
+
+/**
+ * The page rule applies to a SINGLE action only.
+ *
+ * One "View all" beside a wrapped title reads better in a narrow column than the same link
+ * dropped into a block of its own, and that is what the slot holds in practice — 12 of the
+ * 17 lms1 headers using `#actions` hold exactly that.
+ *
+ * Two controls is a different picture, and asserting otherwise put the #420 squeeze back:
+ * in a 400px card the toolbar took 244px of a 398px header and left the title 48px. So the
+ * count decides rather than an assumption about what consumers pass, and a header with a
+ * real toolbar falls back to its own width the way it always did.
+ *
+ * A plain function, not a computed: `useSlots()` is not reactive, so a computed over it
+ * caches its first answer and a conditionally-rendered action would never be counted. The
+ * refs read below are still tracked, because the render effect is what calls this.
+ */
+function keepsActionsInline() {
+    if (responsiveWidth.value.specific) return true
+
+    return isColumnOnAWiderPage.value && countsRenderedNodes(slots.actions) === 1
+}
 
 const emit = defineEmits(['click:more-actions'])
 
@@ -247,7 +279,7 @@ function handleMoreActionsClick() {
         >
             <!-- Desktop actions slot, optional -->
             <div class="rsui-card-header__actions-desktop"
-                v-if="responsiveWidth.specific && $slots.actions"
+                v-if="keepsActionsInline() && $slots.actions"
             >
                 <slot name="actions"></slot>
             </div>
@@ -282,7 +314,7 @@ function handleMoreActionsClick() {
 
     <!-- Mobile actions slot, optional -->
     <div class="rsui-card-header__actions-mobile"
-        v-if="showActions && !responsiveWidth.specific && $slots.actions"
+        v-if="showActions && !keepsActionsInline() && $slots.actions"
     >
         <slot name="actions"></slot>
     </div>

package/src/components/Layout/TwoColumnLayout.vue

@@ -1,7 +1,4 @@
 <script setup>
-import { computed, provide, ref } from 'vue'
-import { useResponsiveWidth } from '../../helpers'
-
 const props = defineProps({
     topAside: {
         type: Boolean,
@@ -17,41 +14,9 @@ const props = defineProps({
         default: false,
     },
 })
-
-const layoutElement = ref(null)
-
-/**
- * 896, because that is `@4xl` — the container query in `two_column_layout.css` that puts
- * the columns side by side. Measured here as well as queried there so components INSIDE a
- * column can ask the same question, which CSS alone cannot tell them.
- *
- * Kept honest by a test asserting the stylesheet still breaks at `@4xl`. Two numbers that
- * must agree is a drift risk; an unasserted one is a certainty.
- */
-const SIDE_BY_SIDE_WIDTH = 896
-
-const { responsiveWidth } = useResponsiveWidth(layoutElement, SIDE_BY_SIDE_WIDTH)
-
-/**
- * Whether the layout is showing two columns right now.
- *
- * Provided because a descendant cannot work this out for itself. `SectionHeader` needs it:
- * where its actions go depends on whether it is a COLUMN on a page or the page itself, and
- * a 330px aside and a 330px phone are the same measurement with opposite answers. Its own
- * container cannot tell them apart, and neither can a viewport breakpoint — this collapses
- * on its own width, so the viewport it collapses at moves with whatever chrome is around
- * it. In Storybook that is 32px of padding and the columns hold down to a 928px viewport.
- *
- * A ref rather than a value, through a slot boundary, same as `Card` provides
- * `rsuiCardHasBody` — slot content is compiled in the parent's scope but mounted with this
- * component as its parent instance, so inject resolves here.
- */
-provide('rsuiTwoColumnLayout', {
-    isSideBySide: computed(() => responsiveWidth.value.specific),
-})
 </script>
 <template>
-<div ref="layoutElement" class="rsui-two-column-layout">
+<div class="rsui-two-column-layout">
     <div
         :class="[
             'rsui-two-column-layout__container',

package/src/components/Section/SectionHeader.vue

@@ -1,11 +1,12 @@
 <script setup>
-import { ref, computed, inject, useAttrs, useSlots } from 'vue'
-import { rendersContent } from '../../helpers/slots'
+import { ref, computed, useAttrs, useSlots } from 'vue'
+import { rendersContent, countsRenderedNodes } from '../../helpers/slots'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
 import Icon from '../Icon/Icon.vue'
 import { useResponsiveWidth } from '../../helpers'
 import DisclosureTrigger from '../Disclosure/DisclosureTrigger.vue'
 import { useDisclosureTrigger } from '../../composables/useDisclosureTrigger'
+import { useColumnOnAWiderPage } from '../../composables/useColumnOnAWiderPage'
 import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline'
 
 const props = defineProps({
@@ -123,44 +124,36 @@ const props = defineProps({
 
 const sectionHeaderElement = ref(null)
 
-const { responsiveWidth } = useResponsiveWidth(sectionHeaderElement, 640)
+const { responsiveWidth, width: headerWidth } = useResponsiveWidth(sectionHeaderElement, 640)
+
+/*
+ * Where the actions go is a question about the PAGE; how much room the title has is a
+ * question about this column. See useColumnOnAWiderPage for why the two cannot share a
+ * measurement, and for the three answers that tried.
+ */
+const isColumnOnAWiderPage = useColumnOnAWiderPage(headerWidth)
 
 /**
- * Whether the enclosing `TwoColumnLayout` is currently showing two columns, or null when
- * there is no layout around this header.
+ * The page rule applies to a SINGLE action only.
  *
- * This is the question `responsiveWidth` cannot answer. The container says how much room
- * the header has — truncation, whether a badge fits — and that is the right question for
- * everything inside it. Where the ACTIONS go is a different question: a 330px aside on a
- * desktop wants its single "View all" beside the title, and the same 330px on a phone
- * wants it underneath. Identical container, opposite answers, so the container cannot
- * decide it.
+ * One "View all" beside a wrapped title reads better in a narrow column than the same link
+ * dropped into a block of its own, and that is what the slot holds in practice — 12 of the
+ * 17 lms1 headers using `#actions` hold exactly that.
  *
- * A viewport breakpoint cannot decide it either, which is what the first cut of this got
- * wrong. `TwoColumnLayout` collapses on a CONTAINER query — 896px of its own width — so
- * the viewport it collapses at moves with whatever chrome surrounds it. In Storybook that
- * is 32px of padding and the columns hold down to a 928px viewport, and the 64rem constant
- * stacked the actions across the whole 928–1023 band while the aside was still an aside.
- * More page furniture moves the boundary the other way. No constant fits.
+ * Two controls is a different picture, and asserting otherwise put the #420 squeeze back:
+ * in a 400px card the toolbar took 244px of a 398px header and left the title 48px. So the
+ * count decides rather than an assumption about what consumers pass, and a header with a
+ * real toolbar falls back to its own width the way it always did.
  *
- * So the header rides on the layout's own answer rather than approximating it, and the
- * two can never disagree.
+ * A plain function, not a computed: `useSlots()` is not reactive, so a computed over it
+ * caches its first answer and a conditionally-rendered action would never be counted. The
+ * refs read below are still tracked, because the render effect is what calls this.
  */
-const twoColumnLayout = inject('rsuiTwoColumnLayout', null)
-
-const isColumnBesideAnother = computed(() => twoColumnLayout?.isSideBySide.value ?? false)
+function keepsActionsInline() {
+    if (responsiveWidth.value.specific) return true
 
-/**
- * The actions stay in the header row while this header is one of two columns, however
- * narrow the column is. A single "View all" beside a wrapped title reads better in a 330px
- * aside than the same link dropped into a left-aligned block below it — and a view-all is
- * the only thing in this slot in practice: of 17 lms1 headers using `#actions`, 12 hold
- * exactly that and none renders two controls at once.
- *
- * Once the layout collapses, every column is the full width of the page and the container
- * measurement answers it correctly on its own, which is what it did before any of this.
- */
-const keepsActionsInline = computed(() => responsiveWidth.value.specific || isColumnBesideAnother.value)
+    return isColumnOnAWiderPage.value && countsRenderedNodes(slots.actions) === 1
+}
 
 const emit = defineEmits(['click:more-actions'])
 
@@ -262,7 +255,7 @@ const titleTag = computed(() => HEADING_LEVELS.includes(String(props.headingLeve
             // 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': !keepsActionsInline,
+            'rsui-section-header--narrow': !keepsActionsInline(),
             // Container only, deliberately NOT the one above. Where the actions go is a
             // question about the page; whether the title has room is a question about this
             // column, and the two want different answers in an aside on a wide screen.
@@ -341,7 +334,7 @@ const titleTag = computed(() => HEADING_LEVELS.includes(String(props.headingLeve
         >
             <!-- Desktop actions slot, optional -->
             <div class="rsui-section-header__actions-desktop"
-                v-if="keepsActionsInline && $slots.actions"
+                v-if="keepsActionsInline() && $slots.actions"
             >
                 <slot name="actions"></slot>
             </div>
@@ -370,7 +363,7 @@ const titleTag = computed(() => HEADING_LEVELS.includes(String(props.headingLeve
 
     <!-- Mobile actions slot, optional -->
     <div class="rsui-section-header__actions-mobile"
-        v-if="showMobileActions && !keepsActionsInline && $slots.actions"
+        v-if="showMobileActions && !keepsActionsInline() && $slots.actions"
     >
         <slot name="actions"></slot>
     </div>

package/src/composables/useColumnOnAWiderPage.js

@@ -0,0 +1,61 @@
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+/*
+ * A phone's worth of page beside it — enough room for a column this element is not in.
+ *
+ * Real gaps are nowhere near the threshold, in either direction: a two-up grid column on
+ * the LMS team overview leaves ~575px, a `TwoColumnLayout` aside 656px at the viewport
+ * where it used to break, and a full-bleed card on a phone leaves its page padding, 32px.
+ */
+const MIN_PAGE_BESIDE_A_COLUMN = 320
+
+/**
+ * Whether this element is a column on a wider page, rather than the page itself.
+ *
+ * This is the question a container measurement cannot answer. The container says how much
+ * room an element has — truncation, whether a badge fits — and that is the right question
+ * for everything inside it. Where a single ACTION goes is a different question: a 330px
+ * aside on a desktop wants its "View all" beside the title, and the same 330px on a phone
+ * wants it underneath. Identical container, opposite answers.
+ *
+ * Three earlier answers, each instructive.
+ *
+ * `md:flex-row` — a viewport query at 768 while the rest of the header read the container
+ * at 640, so a narrow column on a wide screen took the mobile contents and the desktop
+ * direction at once and the title was squeezed to 29px. That was #420.
+ *
+ * A 64rem viewport constant, chosen to match where `TwoColumnLayout` collapses. It
+ * collapses on a CONTAINER query at 896px of its own width, so the viewport that happens
+ * at moves with whatever chrome surrounds it — 928px in Storybook — and the actions
+ * stacked across the whole band in between while the aside was still an aside.
+ *
+ * Asking `TwoColumnLayout` itself, which was exact and almost never there: of 65 lms1
+ * files using `SectionHeader`, 6 are inside one. Six more use a `GridContainer`, one a
+ * `SidebarLayout`, and ~52 build their columns from a raw Tailwind grid or a page layout,
+ * which have nothing to ask. One LMS page uses both kinds at once.
+ *
+ * Measuring against the page needs no cooperation from whatever made the column, and
+ * cannot drift from it either.
+ *
+ * Takes the width rather than the element: both callers already measure themselves through
+ * `useResponsiveWidth`, and observing the same element twice would mean a second
+ * ResizeObserver per header for an answer the first one already has.
+ *
+ * @param {import('vue').Ref<number>} elementWidth — a live width, 0 until measured.
+ */
+export function useColumnOnAWiderPage(elementWidth) {
+    const { width: pageWidth } = useWindowSize()
+
+    const pageBesideElement = computed(() => pageWidth.value - elementWidth.value)
+
+    /*
+     * `useElementBounding` reports 0 until the element is measured, and 0 against any page
+     * width looks like the whole page is beside it. Unmeasured is not wide, so it has to be
+     * excluded explicitly — otherwise every header renders inline for a frame and settles
+     * afterwards, and in happy-dom never settles at all.
+     */
+    return computed(() =>
+        elementWidth.value > 0 && pageBesideElement.value >= MIN_PAGE_BESIDE_A_COLUMN
+    )
+}

package/src/helpers/ResponsiveWidth.js

@@ -53,5 +53,8 @@ export function useResponsiveWidth(elementRef, specific = null) {
 
     return {
         responsiveWidth,
+        // The raw measurement, for the questions the breakpoint buckets cannot answer —
+        // comparing this element against something other than a fixed number.
+        width,
     }
 }

package/src/helpers/slots.js

@@ -68,3 +68,34 @@ function rendersNode(node) {
 
     return true
 }
+
+/**
+ * How many things a slot actually renders.
+ *
+ * Same walk as `rendersContent` and the same caveats — call it from the template or a plain
+ * function, never a `computed`, and hand a scoped slot its scope.
+ *
+ * Exists because "does this render anything" is not always the question. A header keeps a
+ * single action beside its title in a narrow column, which reads better than dropping one
+ * small link into a block of its own. Two controls in a 400px column is a different
+ * picture: the toolbar took 244px of a 398px header and left the title 48px, which is the
+ * 29px squeeze of #420 arriving by another route. Counting is what tells those apart.
+ */
+export function countsRenderedNodes(slot, scope) {
+    const nodes = slot?.(scope)
+
+    if (!nodes) return 0
+
+    return nodes.reduce((total, node) => total + countsNode(node), 0)
+}
+
+function countsNode(node) {
+    if (node.type === Comment) return 0
+    if (node.type === Fragment) {
+        if (!Array.isArray(node.children)) return 0
+
+        return node.children.reduce((total, child) => total + countsNode(child), 0)
+    }
+
+    return 1
+}