@redseed/redseed-ui-vue3 11.0.0 → 11.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "11.0.0",
+    "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/Section/SectionHeader.vue

@@ -1,11 +1,12 @@
 <script setup>
 import { ref, computed, useAttrs, useSlots } from 'vue'
-import { rendersContent } from '../../helpers/slots'
+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,7 +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)
+
+/**
+ * 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'])
 
@@ -225,7 +255,11 @@ 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': !responsiveWidth.specific,
+            '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.
+            'rsui-section-header--narrow-column': !responsiveWidth.specific,
         }
     ]"
     :role="isClickable ? 'button' : undefined"
@@ -300,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="responsiveWidth.specific && $slots.actions"
+                v-if="keepsActionsInline() && $slots.actions"
             >
                 <slot name="actions"></slot>
             </div>
@@ -329,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 && !responsiveWidth.specific && $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
+}