@redseed/redseed-ui-vue3 8.62.0 → 8.64.0

package/src/components/Section/SectionFooter.vue

@@ -1,25 +1,215 @@
 <script setup>
-defineProps({
+import { computed, watchEffect, useSlots, Comment, Fragment } from 'vue'
+
+const props = defineProps({
     showContent: {
         type: Boolean,
         default: true,
     },
+    /**
+     * Label for the trailing "view all" link. Setting it, together with
+     * `viewAllHref`, is what puts the link in the footer.
+     *
+     * A prop rather than a slot: it is the link's accessible name, and a prop
+     * cannot be present-but-empty the way a slot can. Slot presence read through
+     * `useSlots()` is also not reactive, so a link gated on it would never appear
+     * for a consumer rendering it conditionally.
+     */
+    viewAllLabel: {
+        type: String,
+        default: '',
+    },
+    /**
+     * Where the view-all link goes. Required alongside the label — an anchor
+     * without an href is not a link, and is skipped by keyboard navigation.
+     */
+    viewAllHref: {
+        type: String,
+        default: '',
+    },
+})
+
+/**
+ * Coerced, not dereferenced. `default: ''` only applies to `undefined` — Vue
+ * skips type checking entirely for a `null` on a non-required prop, so `null`
+ * arrives with no warning at all and `.trim()` on it throws out of setup, taking
+ * the whole parent subtree down with it. An absent URL serialises to `null`, not
+ * `undefined`, so that is the likely wiring rather than the exotic one. The type
+ * validator cannot be relied on either; it is stripped from production builds.
+ */
+const viewAllLabelText = computed(() => String(props.viewAllLabel ?? '').trim())
+
+const rawViewAllHref = computed(() => String(props.viewAllHref ?? '').trim())
+
+/**
+ * Schemes an anchor may safely carry. `javascript:` and `data:` in an href are
+ * script execution, and this is a declared prop on a design-system component
+ * rather than an attribute passthrough — a consuming app can reasonably expect
+ * the anchor it did not write to be safe. Anything else is refused loudly, since
+ * a link that quietly stops working is the failure this component exists to
+ * avoid.
+ */
+const SAFE_HREF_SCHEME = /^(https?:|mailto:|tel:)/i
+
+/**
+ * `//evil.com` is protocol-relative: it starts with a slash but navigates to
+ * another host entirely, so a leading-slash test alone would wave it through.
+ */
+const PROTOCOL_RELATIVE = /^\/\//
+
+/**
+ * Anything with a scheme has one before the first slash. No colon in that span
+ * means a relative path — `courses/1`, `./x`, `../x`, `#anchor`, `?q=1` — which
+ * cannot leave the site and so needs no allow-list of its own. This is what the
+ * warning text has always told consumers to use; the previous check only accepted
+ * paths beginning with `/`, and refused the rest while telling them they were
+ * fine.
+ */
+function isRelativeHref(href) {
+    const beforeFirstSlash = href.split('/')[0]
+
+    return !beforeFirstSlash.includes(':')
+}
+
+const isViewAllHrefSafe = computed(() => {
+    const href = rawViewAllHref.value
+
+    if (href === '') return true
+    if (PROTOCOL_RELATIVE.test(href)) return false
+    if (SAFE_HREF_SCHEME.test(href)) return true
+
+    return isRelativeHref(href)
+})
+
+const hasViewAllLabel = computed(() => viewAllLabelText.value !== '')
+
+const hasViewAllHref = computed(() => rawViewAllHref.value !== '' && isViewAllHrefSafe.value)
+
+const showViewAll = computed(() => hasViewAllLabel.value && hasViewAllHref.value)
+
+const slots = useSlots()
+
+/**
+ * Whether a slot renders anything at all. Slot *presence* is not the same
+ * question: `<template #default><Button v-if="canManage" /></template>` leaves a
+ * truthy slot function that renders a comment placeholder, which would still
+ * claim a `flex-1` region and shove the centred link into one half of the footer.
+ */
+function rendersContent(slot) {
+    const nodes = slot?.()
+
+    if (!nodes) return false
+
+    // Comment vnodes are what a falsy `v-if` leaves behind. Fragments wrap lists
+    // and `<template v-if>` blocks, so a truthy wrapper around a falsy child is a
+    // Fragment whose only child is a Comment — counting its length would call that
+    // content and render an empty region claiming `flex-1`.
+    return nodes.some(rendersNode)
+}
+
+function rendersNode(node) {
+    if (node.type === Comment) return false
+    if (node.type === Fragment) return Array.isArray(node.children) && node.children.some(rendersNode)
+
+    return true
+}
+
+/**
+ * Whether the view-all has the footer to itself, which is the case that wants
+ * centring. With anything alongside it, a greedy region would split the row with
+ * `content-start` and squeeze the buttons towards the middle rather than the
+ * right edge, so it stays content-sized and sits at the end instead.
+ */
+/*
+ * Plain functions, not computeds. `useSlots()` returns a non-reactive object, so
+ * a computed wrapping it caches its first answer forever — a consumer putting a
+ * `v-if` on the slot itself would never see the region appear or disappear. Called
+ * from the template instead, so they are re-evaluated on every render, which is
+ * what makes them track.
+ */
+function hasDefaultContent() {
+    return rendersContent(slots.default)
+}
+
+function hasStartContent() {
+    return props.showContent && rendersContent(slots.content)
+}
+
+function isViewAllAlone() {
+    return !hasDefaultContent() && !hasStartContent()
+}
+
+/**
+ * Half a link is not a link, so say so rather than rendering nothing. A label
+ * with no href would be an anchor the keyboard skips; an href with no label
+ * would be one a screen reader announces as its own URL.
+ *
+ * Deferred by a tick, and cancelled if the effect re-runs. The two values often
+ * arrive separately — a literal label beside an href that is empty until a fetch
+ * resolves — and warning about a state that corrects itself a tick later trains
+ * everyone to ignore the channel, which costs more than it catches.
+ *
+ * Dev-only, matching LinkSlot, ButtonSlot, Pill and InlineEditableText. This
+ * package ships raw `.vue` source, so an ungated warn reaches real users'
+ * consoles.
+ */
+watchEffect((onCleanup) => {
+    if (process.env.NODE_ENV === 'production') return
+    if (showViewAll.value) return
+
+    const isUnsafeHref = rawViewAllHref.value !== '' && !isViewAllHrefSafe.value
+    const isHalfConfigured = hasViewAllLabel.value !== hasViewAllHref.value
+
+    if (!isUnsafeHref && !isHalfConfigured) return
+
+    const message = isUnsafeHref
+        ? `[RSUI] SectionFooter: refused an unsafe \`viewAllHref\` ("${rawViewAllHref.value}"). Use an http(s), mailto, tel, or relative URL.`
+        : `[RSUI] SectionFooter: the view-all link needs both \`viewAllLabel\` and \`viewAllHref\`; \`${hasViewAllLabel.value ? 'viewAllHref' : 'viewAllLabel'}\` is missing, so no link has been rendered.`
+
+    const timer = setTimeout(() => console.warn(message), 0)
+
+    onCleanup(() => clearTimeout(timer))
 })
 </script>
 <template>
 <div class="rsui-section-footer">
     <div class="rsui-section-footer__content-start"
-        v-if="showContent && $slots.content"
+        v-if="hasStartContent()"
     >
         <slot name="content"></slot>
     </div>
-    <div :class="[
-        'rsui-section-footer__content-end',
-        {
-            'rsui-section-footer__content-end--full': !showContent || !$slots.content,
-        }
-    ]">
+    <div v-if="hasDefaultContent()"
+        :class="[
+            'rsui-section-footer__content-end',
+            {
+                'rsui-section-footer__content-end--full': !hasStartContent(),
+            }
+        ]"
+    >
         <slot></slot>
     </div>
+
+    <!--
+        Its own centred region rather than tucked into `content-end`, which is
+        right-aligned for action buttons. A view-all is not a form action sitting
+        at the end of a row — it is the way out of the section, and it usually has
+        the footer to itself.
+    -->
+    <div v-if="showViewAll"
+        :class="[
+            'rsui-section-footer__view-all-region',
+            {
+                'rsui-section-footer__view-all-region--full': isViewAllAlone(),
+            }
+        ]"
+    >
+        <a class="rsui-section-footer__view-all"
+            :href="rawViewAllHref"
+            data-ph-capture-attribute-component="SectionFooterViewAll"
+            data-ph-capture-attribute-label="View all"
+        >
+            {{ viewAllLabelText }}
+        </a>
+    </div>
 </div>
 </template>

package/src/components/Section/SectionHeader.vue

@@ -22,9 +22,14 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    // Default false. It was true, but no CSS rule existed behind the --divider class,
+    // so every consumer has been seeing no rule regardless. The rule exists now; keeping
+    // the default at true would make hairlines appear under every section header in every
+    // app off the back of a spacing fix. False preserves what they actually see today and
+    // makes the prop work for anyone who opts in. Matches CardHeader.
     showDivider: {
         type: Boolean,
-        default: true,
+        default: false,
     },
     noClamp: {
         type: Boolean,