51 lines
2.2 KiB
Vue
51 lines
2.2 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'
|
|
},
|
|
{
|
|
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>
|