@museumwnf/viewer-layout 2.13.0 → 2.15.0

package/README.md

@@ -13,7 +13,7 @@ full slot list: [`docs/designer-contract.md`](docs/designer-contract.md) (the
 four roles — components, tokens/CSS, site designer, translator — and the
 token → overrides → slot → own-view decision ladder) and
 [`docs/slot-catalogue.md`](docs/slot-catalogue.md) (every prop and slot of
-`PageShell`, `SiteShell` and the nine composed views, plus a one-line purpose
+`PageShell`, `SiteShell` and the ten composed views, plus a one-line purpose
 for every `/content` component).
 
 ## Install
@@ -273,9 +273,15 @@ the application registered, without any router coupling here.
 | `DynastyPopout` | `dynasty` (record: `from_ah`/`to_ah`/`from_ad`/`to_ad`), `text` (its translation: `name`, `also_known_as`, `area`, `history`), `dir` | one dynasty, collapsed behind a native `<details>` toggle: name, also known as, area, AH/AD dates, history as Markdown |
 | `DynastyList` | `heading`, `dynasties`, `tr` (dynasty → its translation), `dir` | one `DynastyPopout` per dynasty of a record, `RelatedRecords`'s shape |
 | `TimelineEventList` | `events: [{ id, date, caption?, description? (block HTML), media?: [{ image, alt?, to? \| href?, caption? }], actions?: [{ label, to? \| href? }] }]` | one row per event; `caption`/`description` are rendered output, the same convention `RecordList`'s `name` follows; `#date`, `#caption`, `#media`, `#actions` slots (each given `{ event }`), `#empty` slot |
+| `PictureGallery` | `pictures: [{ id, image, imageAlt?, name (inline HTML), imageCaption?, detail?, fields?: [{ label, value }], to (route \| null), backRelated?: [{ picture, reciprocalText }] }]`, `selectedId` (v-model), `seeItemEntry`/`unresolvedEntry`/`emptyEntry`/`addRelatedEntry`/`hideRelatedEntry` (entry names) | a DXA exhibition theme page's curated-picture side panel + thumbnail strip: the selected picture large, its fields, a link to the parent record (or the "not in this exhibition" message when `to` is `null`); a picture that is the target of some other picture's related link (`backRelated`) starts hidden behind an "Add related works" toggle |
+| `PictureNarrative` | `picture` (the selected picture, `PictureGallery`'s shape plus `related: [{ picture, text }]` and `backRelated: [{ picture, reciprocalText }]`), `contextualDescription` (Markdown), `relatedHeadingEntry`/`reciprocalFallbackEntry` (entry names); emits `select(id)` | the same page's narrative body, below `EssayView`'s own prose: the selected picture's own curated text, then the pictures it relates to (forward) and, when one points at it, the one it is related to (backward) — either direction may cross a theme boundary, which is why the website resolves the target/source picture rather than this component |
+| `TimelineLookup` | `info: { trigger? (entry, default `record.related.timelineForItem`), heading (entry), countries: [{ value, label }], defaultCountry?() => value, events(value) => [{ id?, year_from, text: { description } }], range: [from, to], era?(year) => string, searchTo(value, range) => to }` | the timeline popout `RecordSheetView`'s related block opens onto (see below): a trigger line, a country select, the events for the chosen country within the record's own date range (rendered through `md()`), and a "begin a full search" link — the DXA gallery/exhibition pair's shared shape, parameterized by the site's own timeline composable |
 
 The record contract `RecordList`, `RecordGrid` and `RelatedRecords` share:
 `{ id, image?, imageAlt?, name (inline HTML), meta: [string], badge?, href? | to? }`.
+`PictureGallery` and `PictureNarrative` share a narrower one — a curated
+picture is not a catalogue record (several can share one parent, or none) —
+documented above and in [`docs/theme-components.md`](docs/theme-components.md).
 
 The texts they read — `core.action.apply`, `.reset`, `.close`,
 `core.pagination.*`, `catalogue.pagination.*`, `record.action.*ShortDescription`,
@@ -286,8 +292,13 @@ every bundle of `@museumwnf/viewer-i18n` from 1.7.0. `GlossaryTool` also reads
 (2.3.0); `DynastyPopout` reads `record.dynasty.heading` (2.3.0) and
 `sheet.field.alsoKnownAs`, `.area`, `.history`. `SourceCredit` reads
 `record.source.label` (2.5.0); the footer attribution (`SiteShell`) reads
-`record.source.rightsHolder` and `.termsOfUse` (2.5.0). Every other text is a
-prop.
+`record.source.rightsHolder` and `.termsOfUse` (2.5.0). `PictureGallery`/
+`PictureNarrative` default to `exhibition.theme.seeItemEntry`, `.recordNotInSite`,
+`.additionalContent`, `.addRelatedWorks`, `.hideRelatedWorks` and
+`exhibition.related.items`, `.reciprocal` — already in every bundle of
+`@museumwnf/viewer-i18n`'s `exhibition` namespace, the same entries
+the-use-of-colours-in-art's and water-in-islam's `Theme.vue` already read.
+Every other text is a prop.
 
 ## Content classes
 
@@ -308,7 +319,7 @@ Building blocks copied from the legacy sites' own `site.css` files, available as
 
 ## Composed views
 
-Nine whole pages, made of the content components on viewer-core's
+Ten whole pages, made of the content components on viewer-core's
 composables and driven by a declaration the website writes instead of a
 page. They are exported from `@museumwnf/viewer-layout/views` — and only from
 there: they read the records and the engine from `@museumwnf/viewer-core`
@@ -353,6 +364,7 @@ export default {
 | `HomeView` | `config.home` or the same as props: `title`, `intro` (Markdown), `cards: [{ title, description, action, to \| href }]`, `featured: { entity, heading, action, route, eyebrow, meta, seed }` — the pick is `useFeaturedRecord` | `before`, default, `after` |
 | `CatalogueResultsView` | `spec`: `entity`, `keys`, `facets` (viewer-core's facet spec), `facetScope: 'all' \| 'matching'`, `controls: [{ key, type: 'select' \| 'year' \| 'query' \| 'checkbox', label, placeholder, anyLabel, hideEmpty }]`, `filterMode: 'apply' \| 'immediate'`, `scope(record, filters)`, `match(record, filters)`, `narrow(list, filters, helpers)` (a rule over the whole list — a keyword index, say), `dates: { mode, begin, end }`, `sort`, `pageSize`, `variant: 'list' \| 'grid'`, `record(record, helpers)`, `recordRoute`, `summary(context)`, `title`, `filterTitle`, `empty`, `actionLabel`, `pagination` | `before`, `filters`, `actions`, `aside`, `empty`, `after` — each given `{ filters, active, apply, reset, goToPage, matching, pageInfo, options }`, enough to compose the panel in the aside or a second pagination |
 | `RecordView` | `spec` and `id`: `entity`, `translations`, `attribution`, `fields` (viewer-core's `sheetRows` spec, or a function of the context), `sections`, `layout`, `shortDescription`, `media(record, ctx)`, `mediaVariant`, `credits`, `workingNumber`, `citation: { project, permalink: true \| false \| string, heading } \| false` (the permalink is `sourceUrl(currentRoute)` — null, so no address, until the website declares `site.origin` — unless the spec disables it with `false` or overrides it with a string), `related: { variant, heading, record, route } \| false`, `back: { label, to \| href }`, `title(ctx)` | `header`, `before-sheet`, `after-sheet`, `aside`, `source` (under the citation; default `SourceCredit`), `related`, `after`, and one named after every `custom` or `link` row — each given `{ record, text, language, languages, select, dir, glossary, ready, attribution, t, tr }`; `related` also `records` (the rows) and `outside` (the related records the package does not carry) |
+| `RecordSheetView` | Every `RecordView` prop (`spec`, `id`, `entity`) plus `dataGetter(id) => record \| null \| undefined` — a website's own language-subset record lookup (an exhibition's per-build `itemById.get`); omitted, every `id` `RecordView` itself finds is treated as present (the gallery shape); supplied and it reports `id` missing, `NotFoundView` renders before `RecordView` ever mounts (the exhibition shape's per-language-build 404), and it also narrows the related block's `records`/outside-reference split the same way. The DXA gallery/exhibition item sheet's own blocks, on top of `spec`: `sourceDatabase: { label?, chipClass(record, ctx), addToCollection: { label? } \| false } \| false` (the source-database line + `backward_compatibility` code + "add to my collection" link — `chipClass` is a site's own project→colour map, the name comes from `useProjects()`), `notice: { show(record, ctx), label } \| false` (the Explore-partner notice), `museum: { route(partnerId, ctx), label(partnerId, ctx) } \| false` (the holding-museum row — a site's own partner lookup; `route` returning null renders plain text, for a hidden partner), and on `spec.related`: `title`, `description` (entries, above the block), `notInPackageLabel`, `outsideChip(ref, ctx)` (an outside reference's chip — `TODO(#1727)`, no `project_id` on a stub yet), `artisticIntroductionLabel` (with `useProjects().links(record.project_id).artisticIntroductionUrl`), `databaseLabel` (ditto, `.relatedDatabaseUrl`), `overallDatabase: { label, linkLabel } \| false` (`mwnfLinks.overallDatabase`), `onDisplayIn: { linkPendingLabel } \| false` (`record.gallery_references`, by `kind`), `download: false` (default on, `record.action.download`/`.downloadPdf`, prints), `glossary: false` (default on, `GlossaryTool`), `dynasties(record, language, ctx) => { records, tr } \| null` (`DynastyList`), `media: false` (default on, `record.media`, a `SheetSection`), `timeline(record, ctx) => TimelineInfo \| null` (`TimelineLookup` — see `docs/slot-catalogue.md`) | Every `RecordView` slot, forwarded straight through by name, unmodified, **except** `before-sheet`/`museum`/`related`: each always has this view's own default content (above), which a website's own slot still replaces entirely — "a slot fills, the default content renders otherwise" |
 | `EssayView` | `spec` and `id`: `tree` (a `useCollectionTree` result, or `{ purpose \| rootId, childType?, entity?, order? }` / `{ themes: true \| 'themes', childType? }` for the view to build one), `entity` (the tree's items — also the tree's own translations entity when `tree` carries none of its own, a pre-built tree or a declarative form with no `entity`/`themes`; falls back to `'collections'`), `route` (a node's own page: a route name or `(node, ctx) => to \| href`), `heading(ctx)`, `placeholder` (a regex a synthesized title matches, falling back to the English title, then the internal name), `quote` / `body` (a field of the node's translation, a dotted path into it such as `'extra.intro_text'`, or a function `(ctx) => Markdown`; default `'quote'`/`'description'`, `false` to drop), `glossary`, `items: { of(node) => ids, caption(item, node, ctx) => override, meta(item, ctx) => [string] (the grid's caption lines), badge(item, ctx) => string, route }`, `panel: { variants(item, ctx) => [{ id, image, alt, caption: { title, justification, fields: [{ label (entry name), value }] } }], fields(item, node, ctx) => [{ label, value }] (the fallback when a variant carries no fields of its own) } \| false`, `navigation: 'tree' \| 'siblings' \| false` (`tree` crosses a branch boundary, `siblings` stays inside the parent), `breadcrumb`, `tabs: true \| 'siblings' \| 'children'` (the strip: `true`/`'siblings'` — the node's own siblings, the default; `'children'` — the node's own children, e.g. a theme's chapters), `about(node) => boolean \| { panel?, navigation? }` (essay only; a plain boolean drops both the picture panel and the navigation, an object keeps the named piece instead), `aboutKeeps: ['panel' \| 'navigation']` (the spec-wide equivalent, when every about page in this spec keeps the same piece), `numbering: 'roman' \| 'decimal' \| false` (counts a node among its true siblings — for a themes-package tree, whose `root` is `null`, that's every node whose own `tree.parents(id)` is also empty, so a themes tree numbers its top-level themes I, II, III); `previous`, `next`, `backTo`, `inThisTheme`, `seeAll` (entry names, defaulting to `exhibition.theme.previous`/`.next`/`.inThisTheme`/`.seeAllInTheme` and `record.action.backToResults`) | `header`, `before-body`, `after-body`, `panel`, `thumbnails`, `aside`, `justifications`, `navigation`, `after` (default `SourceCredit` — nothing until the website declares `site.origin`) — each given `{ node, text, language, tree, items, selected, select, selectedVariant, selectVariant, breadcrumb, previous, next, t, tr }` |
 | `LinkListView` | `spec`: `title` (entry), `groups: [{ heading (entry), links: [{ label, href \| to, note? }] }] \| (ctx) => groups` (`label`/`note` are Markdown, rendered inline through `mdInline`), `back: { label, to \| href } \| false`, `empty` (entry) | `before`, `group` (given `{ group }`; the default renders the heading and its links — replace it for a citation list that is not link-shaped), `after` |
 | `PartnerListView` | `spec`: `entity` (default `'partners'`), `scope(partner, ctx)` (a site's own axis — museum/institution, a curated project — filtered before grouping), `group: { tier: 'level' \| false, order: 'country' \| 'name' }` (over viewer-core's `groupByCountry`; `'name'`: one flat, alphabetical group, no country carries this today), `orderToggle` (an A-Z/Z-A control, mirrored in the query as `order`; every tier is always sorted by name, the toggle reverses the country order or the one flat list), `nested` (an associated partner rendered under its own parent through `partnerHierarchy`, instead of the flat tier column; one whose parent is missing or in another group stays flat), `label(countryId, ctx)` (a group's own country label, required when `group.order` is `'country'`), `record(partner, ctx) => { name, city, logo, count, route }` (the row), `route` (a route name or `(partner, ctx) => to \| href`, read by the default row only), `variant: 'accordion' \| 'open'`, `count` (the "Partners found: N" line), `associatedLabel`/`foundLabel`/`objectsLabel`/`sortAscendingLabel`/`sortDescendingLabel`/`empty`/`title` (entry names, overriding the shared `partner.*` defaults) | `before`, `group-heading` (given `{ group }`; the default renders `group.label`), `row` (given `{ group, partner, row }`, once per partner — main, associated and, when nested, a child row too), `after` — every slot also given `{ t, locale, groups, orderDir, toggleOrder }` |
@@ -411,6 +423,30 @@ except where noted:
 | islamicart/baroqueart `TimelineEntrance`/`TimelineResults` | the same controls, `event: (event, ctx) => ({ ..., actions: [{ label: 'timeline.action.viewItemsFromPeriod', to: itemsLink(event) }] })` for the per-event "View items from this period" link |
 | sharinghistory `TimelineResults` (no separate entrance page in legacy; `entrance: true` on the same spec shape covers it) | `scope: 'collection'`, `controls` adding `{ key: 'collection', label: 'sharinghistory.nav.timeline' }` fed by `collections: (ctx) => [{ value: 'pc', label: t('sharinghistory.nav.permanentCollection') }, ...exhibitions]`, `event(...)` composing the "Country \| Theme" `caption` and the image/item strip as `media` |
 
+## DXA family pages
+
+`@museumwnf/viewer-layout/dxa` ships the gallery/exhibition thin pages
+confirmed byte-identical within each DXA site pair on `origin/main` —
+11 gallery pages (from carpets/amulets), 9 exhibition pages (from
+the-use-of-colours-in-art/water-in-islam) — plus `standardRoutes(family,
+config)`, the RouteRecord factory a site spreads into `extraViews`:
+
+```js
+import { standardRoutes } from '@museumwnf/viewer-layout/dxa'
+
+extraViews: [
+  ...standardRoutes('gallery', { creditsBody: 'carpets.credits.body' }),
+  // + this gallery's own routes: home, item, collection entrance,
+  // timeline entrance, partners entrance
+]
+```
+
+Route names and paths are pinned to what every live DXA site already
+registers, so adopting the factory keeps every existing deep link (and
+every `legacyRoutes` resolver targeting those names) working unmodified.
+Full page-by-page prop/slot/entry table in
+[`docs/slot-catalogue.md`](docs/slot-catalogue.md#dxa-family-pages-museumwnfviewer-layoutdxa).
+
 ## Theming
 
 Every color, font, spacing, radius comes from a `--mwnf-*` CSS custom property with a neutral fallback. Full list: [`tokens.reference.css`](src/tokens.reference.css) (also exported as `@museumwnf/viewer-layout/tokens.reference.css`) — copy it into your website as `theme/tokens.css` and set values.

package/dist/BackLink-BJ16COHd.js

@@ -0,0 +1,106 @@
+import { g as e } from "./TimelineEventList-BmfLBaTT.js";
+import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, openBlock as s, toDisplayString as c, withCtx as l } from "vue";
+import { useRouter as u } from "vue-router";
+//#region src/content/PartnerMap.vue
+var d = {
+	key: 0,
+	class: "mwnf-partner-map"
+}, f = { class: "mwnf-partner-map__title" }, p = ["src", "title"], m = { class: "mwnf-partner-map__link" }, h = ["href"], g = {
+	__name: "PartnerMap",
+	props: {
+		latitude: {
+			type: Number,
+			default: null
+		},
+		longitude: {
+			type: Number,
+			default: null
+		},
+		zoom: {
+			type: Number,
+			default: 15
+		},
+		mapTitleEntry: {
+			type: String,
+			default: "partner.map.map"
+		},
+		mapOfEntry: {
+			type: String,
+			default: "partner.map.mapOf"
+		},
+		openMapLinkEntry: {
+			type: String,
+			default: "partner.map.openInOpenStreetMap"
+		},
+		label: {
+			type: String,
+			default: ""
+		}
+	},
+	setup(e) {
+		let n = e, o = t(() => Number.isFinite(n.latitude) && Number.isFinite(n.longitude)), l = t(() => {
+			let e = 360 / 2 ** Math.max(1, Math.min(19, n.zoom || 15)), [t, r] = [n.latitude, n.longitude];
+			return [
+				r - e,
+				t - e / 2,
+				r + e,
+				t + e / 2
+			].join("%2C");
+		}), u = t(() => `https://www.openstreetmap.org/export/embed.html?bbox=${l.value}&layer=mapnik&marker=${n.latitude}%2C${n.longitude}`), g = t(() => `https://www.openstreetmap.org/?mlat=${n.latitude}&mlon=${n.longitude}#map=${n.zoom || 15}/${n.latitude}/${n.longitude}`);
+		return (t, n) => o.value ? (s(), i("div", d, [
+			a("p", f, c(t.$t(e.mapTitleEntry)), 1),
+			a("iframe", {
+				src: u.value,
+				title: e.label ? t.$t(e.mapOfEntry, { label: e.label }) : t.$t(e.mapTitleEntry),
+				loading: "lazy",
+				referrerpolicy: "no-referrer",
+				class: "mwnf-partner-map__embed"
+			}, null, 8, p),
+			a("p", m, [a("a", {
+				href: g.value,
+				target: "_blank",
+				rel: "noopener"
+			}, "↗ " + c(t.$t(e.openMapLinkEntry)), 9, h)])
+		])) : r("", !0);
+	}
+}, _ = { class: "mwnf-back-link" }, v = {
+	__name: "BackLink",
+	props: {
+		label: {
+			type: String,
+			default: "core.action.back"
+		},
+		to: {
+			type: [String, Object],
+			default: null
+		},
+		href: {
+			type: String,
+			default: ""
+		}
+	},
+	setup(t) {
+		let r = u();
+		function a() {
+			return window.history.length > 1;
+		}
+		function d(e) {
+			a() && (e.preventDefault(), r.back());
+		}
+		return (r, u) => (s(), i("div", _, [!a() && (t.to || t.href) ? (s(), n(e, {
+			key: 0,
+			to: t.to,
+			href: t.href,
+			class: "mwnf-back-link__button"
+		}, {
+			default: l(() => [o(" ↩ " + c(r.$t(t.label)), 1)]),
+			_: 1
+		}, 8, ["to", "href"])) : (s(), i("button", {
+			key: 1,
+			class: "mwnf-back-link__button",
+			onClick: d
+		}, " ↩ " + c(r.$t(t.label)), 1))]));
+	}
+};
+//#endregion
+export { g as n, v as t };