236fef5682
Some checks are pending
build-gate / build (push) Waiting to run
Two composites nested a child by tag and URL without a profile-config. Those children do not render a component directly — their bundle entry mounts ProfileLoader, which reads profile-config.profile to choose which view to load. With none, the element still mounts and still reports its tag, so every structural check said both children were present, while the loader rendered "missing or invalid profile-config prop" where the map should be. The grid half of each page worked, which is how it survived. Found by reading a regenerated README screenshot, not by any gate. The mobile screenshot showed an error card and an empty pane; the fixed one shows the real research map with its data, controls and progress figures. research-map-plus-grid was mine, shipped that way. stack-demo predates it and had the same defect against research-dashboard. Both now pass the shape their own generated leaf pages use, so nested and standalone mounts ask for the same thing. check:composite-srcs now requires a profile-config on any child whose bundle mounts ProfileLoader, derived from which entries import it rather than a list. The first version of that check tested for the word and passed on its own explanatory comment; it now matches the quoted attribute key, and a negative test that mutates only the key fails as it should. Also regenerates three derived artifacts that had drifted behind this flight's changes: the library index, the capability exemplars table, and all twelve README screenshots.
67 lines
3.1 KiB
Vue
67 lines
3.1 KiB
Vue
<script setup>
|
|
/**
|
|
* stack-demo.vue — Capability-4 composite demonstrating the shared StackLayout (scroll-stack).
|
|
*
|
|
* @element stack-demo
|
|
* @description Groups TWO independent elements TOP-TO-BOTTOM so you can embed the pair on a page and
|
|
* SCROLL down through all of it (the doxa-life / nuxtinator page-flow model), instead of switching
|
|
* between them with tabs. Section 1 = the rich <research-dashboard-map> (facets + map + charts +
|
|
* table); section 2 = the cap-2 <people-groups-grid> (live pray.doxa.life). Each renders at its
|
|
* NATURAL height; the host page scrolls.
|
|
*
|
|
* This is the STACK counterpart to big-picture (which TABS/couples). Both reuse the shared library
|
|
* layouts in library/layouts/. StackLayout mounts each section's `element` eagerly (all visible to
|
|
* scroll) via the same element/src/attrs contract VerticalTabsLayout uses.
|
|
*/
|
|
import StackLayout from '@map/layouts/StackLayout.vue'
|
|
|
|
// The two elements to stack. `src` is TREE-RELATIVE at build; the leaf pages resolve it against the
|
|
// bundle tree root. Both elements ship their own bundles in the same catalog.
|
|
const sections = [
|
|
// src is resolved by the browser relative to THIS leaf page, which is served two levels deep
|
|
// (doxa-maps/stack-demo/stack-demo/index.html) — so go UP TWO to reach a sibling bundle's tree
|
|
// (doxa-maps/<bundle>/<bundle>.js). (Off-by-one here = a 404 + an empty section, caught silently.)
|
|
{
|
|
key: 'dashboard',
|
|
title: 'Research Dashboard',
|
|
sub: 'facets · map · charts · table (live)',
|
|
element: 'research-dashboard-map',
|
|
src: '../../research-dashboard/research-dashboard.js',
|
|
// ★ REQUIRED, and its absence was a live defect (found + fixed 2026-09-22). research-dashboard's
|
|
// entry mounts ProfileLoader, which reads profile-config.profile to choose WHICH .vue to load.
|
|
// With none, the element still mounted at its full 844px and still reported its tag — so every
|
|
// structural check said "present" — while ProfileLoader rendered "missing or invalid
|
|
// profile-config prop" where the dashboard should be. The grid section below was fine, which is
|
|
// what made it survive: half the page worked.
|
|
// Shape copied verbatim from this bundle's own generated leaf (its BASE_CONFIG), so the nested
|
|
// and standalone mounts ask for the identical thing. Now gated by check:composite-srcs.
|
|
attrs: {
|
|
'profile-config': JSON.stringify({
|
|
profile: 'research-dashboard',
|
|
dataSource: 'pray-tools',
|
|
instanceId: 'stack-demo-research-dashboard',
|
|
assetsBase: '../../assets'
|
|
})
|
|
}
|
|
},
|
|
{
|
|
key: 'grid',
|
|
title: 'People Groups',
|
|
sub: 'the full searchable list (live)',
|
|
element: 'people-groups-grid',
|
|
src: '../../people-groups-grid/people-groups-grid.js'
|
|
}
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<StackLayout title="Stacked view" :sections="sections">
|
|
<template #meta>scroll ↓</template>
|
|
</StackLayout>
|
|
</template>
|
|
|
|
<style>
|
|
/* stack-demo is a thin composition: the shell + its scroll behaviour live in the shared StackLayout
|
|
(which self-injects its own shadow CSS). Nothing to add here beyond making the host fill width. */
|
|
:host { display:block; width:100%; }
|
|
</style>
|