@museumwnf/viewer-layout 2.16.0 → 2.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@museumwnf/viewer-layout",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "description": "Page structure for MWNF websites: PageShell composing seven optional, token-styled sections, the content components a page is made of, and the composed views a website names instead of writing a page.",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -40,7 +40,7 @@
     "vue-router": "^4.5.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@museumwnf/viewer-core": "^2.1.0",
+    "@museumwnf/viewer-core": "^2.2.0",
     "@vitejs/plugin-vue": "^6.0.8",
     "@vue/test-utils": "^2.4.11",
     "jsdom": "^30.0.1",

package/src/tokens.reference.css

@@ -338,7 +338,26 @@
   /* --mwnf-sheet-related-reference-gap: 0.5rem;     Gap in an outside-reference row */
   /* --mwnf-sheet-related-reference-padding: 0.1875rem 0; Padding of an outside-reference row */
   /* --mwnf-sheet-related-unresolved-color: #8a8a8a; "Not in this gallery/exhibition" note color */
-  /* --mwnf-sheet-related-unresolved-size: 0.75rem;  Its text size */
+  /* --mwnf-sheet-related-unresolved-size: 0.75rem;  Its text size (also OnDisplayIn's pending note) */
+
+  /* ---------- Content: item-page blocks ---------- */
+  /* --mwnf-special-features-gap: 1rem;              Space under one special feature */
+  /* --mwnf-special-features-name-gap: 0.25rem;      Space under its name and each meta line */
+  /* --mwnf-special-features-name-size: 0.9375rem;   Its name's size */
+  /* --mwnf-special-features-name-weight: 500;       Its name's weight */
+  /* --mwnf-special-features-name-color: inherit;    Its name's color */
+  /* --mwnf-special-features-meta-size: 0.75rem;     Location, dates and artists: size */
+  /* --mwnf-special-features-meta-color: #555555;    Their color */
+  /* --mwnf-related-media-gap: 0.375rem;             Space above one audio/video entry */
+  /* --mwnf-related-media-link-size: inherit;        Its title link's size */
+  /* --mwnf-related-media-link-weight: inherit;      Its title link's weight */
+  /* --mwnf-related-media-link-color: var(--mwnf-link-text, #0000ff); Its title link's color */
+  /* --mwnf-related-media-description-gap: 0.125rem; Space above its description */
+  /* --mwnf-related-media-description-size: 0.75rem; Its description's size */
+  /* --mwnf-related-media-description-color: #555555; Its description's color */
+  /* --mwnf-on-display-size: inherit;                On display in: the list's text size */
+  /* --mwnf-on-display-gap: 0.375rem;                Space above one place */
+  /* --mwnf-on-display-link-color: var(--mwnf-link-text, #0000ff); A place's link color */
   /* --mwnf-sheet-timeline-trigger-color: inherit;   The "timeline for this item" trigger line */
   /* --mwnf-sheet-timeline-popout-width: 40rem;      Timeline popout max width */
   /* --mwnf-sheet-timeline-popout-margin: 0.5rem 0 0.875rem; Timeline popout margin */
@@ -731,6 +750,7 @@
   /* --mwnf-back-bar-text: inherit;                  Back bar text color */
   /* --mwnf-back-bar-size: 0.9375rem;                Back bar text size */
   /* --mwnf-back-bar-hover-text: inherit;            Back bar hover text color */
+  /* --mwnf-back-bar-margin: 0;                      BackLink variant="bar": the link's margin */
 
   /* --mwnf-chip-padding: 0.0625rem 0.5rem;          Chip padding */
   /* --mwnf-chip-size: 0.75rem;                      Chip text size */

package/dist/BackLink-LfSIuXnL.js

@@ -1,45 +0,0 @@
-import { v as e } from "./TimelineEventList-D5Hot788.js";
-import { createBlock as t, createElementBlock as n, createTextVNode as r, openBlock as i, toDisplayString as a, withCtx as o } from "vue";
-import { useRouter as s } from "vue-router";
-//#region src/content/BackLink.vue
-var c = { class: "mwnf-back-link" }, l = {
-	__name: "BackLink",
-	props: {
-		label: {
-			type: String,
-			default: "core.action.back"
-		},
-		to: {
-			type: [String, Object],
-			default: null
-		},
-		href: {
-			type: String,
-			default: ""
-		}
-	},
-	setup(l) {
-		let u = s();
-		function d() {
-			return window.history.length > 1;
-		}
-		function f(e) {
-			d() && (e.preventDefault(), u.back());
-		}
-		return (s, u) => (i(), n("div", c, [!d() && (l.to || l.href) ? (i(), t(e, {
-			key: 0,
-			to: l.to,
-			href: l.href,
-			class: "mwnf-back-link__button"
-		}, {
-			default: o(() => [r(" ↩ " + a(s.$t(l.label)), 1)]),
-			_: 1
-		}, 8, ["to", "href"])) : (i(), n("button", {
-			key: 1,
-			class: "mwnf-back-link__button",
-			onClick: f
-		}, " ↩ " + a(s.$t(l.label)), 1))]));
-	}
-};
-//#endregion
-export { l as t };

package/dist/TimelineLookup-D-p1aQ_Z.js

@@ -1,444 +0,0 @@
-import { v as e } from "./TimelineEventList-D5Hot788.js";
-import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, normalizeClass as l, openBlock as u, ref as d, renderList as f, renderSlot as p, toDisplayString as m, unref as h, useSlots as g, vModelSelect as _, vModelText as v, watch as y, withCtx as b, withDirectives as x, withKeys as S } from "vue";
-import { useI18n as C } from "@museumwnf/viewer-core/i18n";
-import { md as w, mdInline as T, searchGlossary as E } from "@museumwnf/viewer-core";
-//#region src/content/SectionCards.vue
-var D = ["innerHTML"], O = ["innerHTML"], k = {
-	key: 1,
-	class: "mwnf-cards__action"
-}, A = {
-	key: 0,
-	class: "mwnf-cards__image-container"
-}, j = ["src", "alt"], ee = { class: "mwnf-cards__content" }, te = {
-	key: 0,
-	class: "mwnf-cards__number"
-}, ne = ["innerHTML"], M = ["innerHTML"], N = {
-	key: 0,
-	class: "mwnf-cards__image-container"
-}, P = ["src", "alt"], F = {
-	key: 1,
-	class: "mwnf-cards__number"
-}, I = ["innerHTML"], L = {
-	key: 3,
-	class: "mwnf-cards__details"
-}, R = { class: "mwnf-cards__summary" }, z = {
-	key: 0,
-	class: "mwnf-cards__number"
-}, B = ["innerHTML"], V = {
-	key: 0,
-	class: "mwnf-cards__children"
-}, H = {
-	__name: "SectionCards",
-	props: {
-		cards: {
-			type: Array,
-			default: () => []
-		},
-		variant: {
-			type: String,
-			default: "cards",
-			validate: (e) => [
-				"cards",
-				"rows",
-				"covers",
-				"accordion"
-			].includes(e)
-		}
-	},
-	setup(n) {
-		return (d, p) => n.cards.length ? (u(), a("ul", {
-			key: 0,
-			class: l(["mwnf-cards", `mwnf-cards--${n.variant}`])
-		}, [(u(!0), a(t, null, f(n.cards, (d) => (u(), a("li", {
-			key: d.href ?? d.title,
-			class: l(["mwnf-cards__card"])
-		}, [n.variant === "cards" ? (u(), r(e, {
-			key: 0,
-			class: "mwnf-cards__link",
-			to: d.to,
-			href: d.href
-		}, {
-			default: b(() => [
-				o("span", {
-					class: "mwnf-cards__title",
-					innerHTML: h(T)(d.title)
-				}, null, 8, D),
-				d.description ? (u(), a("span", {
-					key: 0,
-					class: "mwnf-cards__text",
-					innerHTML: h(T)(d.description)
-				}, null, 8, O)) : i("", !0),
-				d.action ? (u(), a("span", k, m(d.action) + " →", 1)) : i("", !0)
-			]),
-			_: 2
-		}, 1032, ["to", "href"])) : n.variant === "rows" ? (u(), r(e, {
-			key: 1,
-			class: "mwnf-cards__link",
-			to: d.to,
-			href: d.href
-		}, {
-			default: b(() => [d.image ? (u(), a("div", A, [o("img", {
-				class: "mwnf-cards__image",
-				src: d.image,
-				alt: d.alt || ""
-			}, null, 8, j)])) : i("", !0), o("div", ee, [
-				d.number ? (u(), a("span", te, m(d.number), 1)) : i("", !0),
-				o("span", {
-					class: "mwnf-cards__title",
-					innerHTML: h(T)(d.title)
-				}, null, 8, ne),
-				d.description ? (u(), a("span", {
-					key: 1,
-					class: "mwnf-cards__text",
-					innerHTML: h(T)(d.description)
-				}, null, 8, M)) : i("", !0)
-			])]),
-			_: 2
-		}, 1032, ["to", "href"])) : n.variant === "covers" ? (u(), r(e, {
-			key: 2,
-			class: "mwnf-cards__link",
-			to: d.to,
-			href: d.href
-		}, {
-			default: b(() => [
-				d.image ? (u(), a("div", N, [o("img", {
-					class: "mwnf-cards__image",
-					src: d.image,
-					alt: d.alt || ""
-				}, null, 8, P)])) : i("", !0),
-				d.number ? (u(), a("span", F, m(d.number), 1)) : i("", !0),
-				o("span", {
-					class: "mwnf-cards__title",
-					innerHTML: h(T)(d.title)
-				}, null, 8, I)
-			]),
-			_: 2
-		}, 1032, ["to", "href"])) : n.variant === "accordion" ? (u(), a("details", L, [o("summary", R, [d.number ? (u(), a("span", z, m(d.number), 1)) : i("", !0), o("span", {
-			class: "mwnf-cards__title",
-			innerHTML: h(T)(d.title)
-		}, null, 8, B)]), d.children?.length ? (u(), a("ul", V, [(u(!0), a(t, null, f(d.children, (t) => (u(), a("li", {
-			key: t.href ?? t.title,
-			class: "mwnf-cards__child"
-		}, [c(e, {
-			class: "mwnf-cards__child-link",
-			to: t.to,
-			href: t.href
-		}, {
-			default: b(() => [s(m(t.title), 1)]),
-			_: 2
-		}, 1032, ["to", "href"])]))), 128))])) : i("", !0)])) : i("", !0)]))), 128))], 2)) : i("", !0);
-	}
-}, U = {
-	key: 0,
-	class: "mwnf-featured"
-}, W = {
-	key: 0,
-	class: "mwnf-featured__heading"
-}, G = {
-	key: 0,
-	class: "mwnf-featured__media"
-}, K = ["src", "alt"], q = { class: "mwnf-featured__body" }, J = {
-	key: 0,
-	class: "mwnf-featured__eyebrow"
-}, Y = ["innerHTML"], X = {
-	key: 1,
-	class: "mwnf-featured__action"
-}, Z = {
-	__name: "FeaturedRecord",
-	props: {
-		image: {
-			type: String,
-			default: ""
-		},
-		imageAlt: {
-			type: String,
-			default: ""
-		},
-		eyebrow: {
-			type: String,
-			default: ""
-		},
-		name: {
-			type: String,
-			default: ""
-		},
-		meta: {
-			type: Array,
-			default: () => []
-		},
-		action: {
-			type: String,
-			default: ""
-		},
-		to: {
-			type: [String, Object],
-			default: null
-		},
-		href: {
-			type: String,
-			default: ""
-		},
-		heading: {
-			type: String,
-			default: ""
-		}
-	},
-	setup(r) {
-		let s = r, l = g(), d = n(() => !!(s.name || s.image || l.default));
-		return (n, s) => d.value ? (u(), a("section", U, [r.heading ? (u(), a("h2", W, m(r.heading), 1)) : i("", !0), p(n.$slots, "default", {}, () => [c(e, {
-			class: "mwnf-featured__link",
-			to: r.to,
-			href: r.href
-		}, {
-			default: b(() => [r.image ? (u(), a("span", G, [o("img", {
-				class: "mwnf-featured__image",
-				src: r.image,
-				alt: r.imageAlt,
-				loading: "eager"
-			}, null, 8, K)])) : i("", !0), o("span", q, [
-				r.eyebrow ? (u(), a("span", J, m(r.eyebrow), 1)) : i("", !0),
-				o("span", {
-					class: "mwnf-featured__name",
-					innerHTML: r.name
-				}, null, 8, Y),
-				(u(!0), a(t, null, f(r.meta, (e, t) => (u(), a("span", {
-					key: t,
-					class: "mwnf-featured__meta"
-				}, m(e), 1))), 128)),
-				r.action ? (u(), a("span", X, m(r.action) + " →", 1)) : i("", !0)
-			])]),
-			_: 1
-		}, 8, ["to", "href"])])])) : i("", !0);
-	}
-}, re = ["dir"], ie = { class: "mwnf-glossary-tool__toggle" }, ae = { class: "mwnf-glossary-tool__panel" }, oe = { class: "mwnf-glossary-tool__heading" }, se = { class: "mwnf-glossary-tool__instructions" }, ce = ["aria-expanded", "aria-label"], le = {
-	key: 0,
-	class: "mwnf-glossary-tool__hits",
-	role: "listbox"
-}, ue = [
-	"aria-selected",
-	"onClick",
-	"onKeydown"
-], de = {
-	key: 1,
-	class: "mwnf-glossary-tool__no-results"
-}, fe = {
-	key: 2,
-	class: "mwnf-glossary-tool__definition"
-}, pe = { class: "mwnf-glossary-tool__definition-label" }, me = ["innerHTML"], he = {
-	__name: "GlossaryTool",
-	props: {
-		language: {
-			type: String,
-			default: ""
-		},
-		entity: {
-			type: String,
-			default: "glossary"
-		},
-		labels: {
-			type: Object,
-			default: () => ({})
-		},
-		dir: {
-			type: String,
-			default: ""
-		}
-	},
-	setup(e) {
-		let r = e, s = {
-			tool: "record.glossary.tool",
-			heading: "record.glossary.heading",
-			instructions: "record.glossary.instructions",
-			definition: "record.glossary.definition",
-			close: "record.glossary.close",
-			...r.labels
-		}, { t: c } = C(), p = d(""), g = d(null), _ = d(-1), y = n(() => p.value.trim() ? E(p.value, r.language, { entity: r.entity }) : []), b = n(() => y.value.length > 0 && !g.value), T = n(() => g.value ? w(g.value.definition) : ""), D = n(() => s.noResults ? c(s.noResults) : ""), O = n(() => !!D.value && p.value.trim() && !g.value && y.value.length === 0);
-		function k() {
-			g.value = null, _.value = -1;
-		}
-		function A(e) {
-			g.value = e, p.value = e.spelling, _.value = -1;
-		}
-		function j(e) {
-			b.value && (e.key === "ArrowDown" ? (e.preventDefault(), _.value = (_.value + 1) % y.value.length) : e.key === "ArrowUp" ? (e.preventDefault(), _.value = (_.value - 1 + y.value.length) % y.value.length) : e.key === "Enter" && _.value >= 0 ? (e.preventDefault(), A(y.value[_.value])) : e.key === "Escape" && (_.value = -1));
-		}
-		return (n, r) => (u(), a("details", {
-			class: "mwnf-glossary-tool",
-			dir: e.dir || void 0
-		}, [o("summary", ie, m(h(c)(s.tool)), 1), o("div", ae, [
-			o("p", oe, m(h(c)(s.heading)), 1),
-			o("p", se, m(h(c)(s.instructions)), 1),
-			x(o("input", {
-				"onUpdate:modelValue": r[0] ||= (e) => p.value = e,
-				type: "text",
-				class: "mwnf-glossary-tool__input",
-				role: "combobox",
-				"aria-autocomplete": "list",
-				"aria-expanded": b.value,
-				"aria-label": h(c)(s.heading),
-				onInput: k,
-				onKeydown: j
-			}, null, 40, ce), [[v, p.value]]),
-			b.value ? (u(), a("ul", le, [(u(!0), a(t, null, f(y.value, (e, t) => (u(), a("li", {
-				key: e.id,
-				role: "option",
-				"aria-selected": t === _.value,
-				tabindex: "0",
-				class: l(["mwnf-glossary-tool__hit", { "mwnf-glossary-tool__hit--active": t === _.value }]),
-				onClick: (t) => A(e),
-				onKeydown: S((t) => A(e), ["enter"])
-			}, m(e.spelling), 43, ue))), 128))])) : O.value ? (u(), a("p", de, m(D.value), 1)) : i("", !0),
-			g.value ? (u(), a("div", fe, [o("p", pe, m(h(c)(s.definition)), 1), o("div", {
-				class: "mwnf-sheet__block",
-				innerHTML: T.value
-			}, null, 8, me)])) : i("", !0)
-		])], 8, re));
-	}
-}, ge = ["dir"], _e = ["innerHTML"], ve = { class: "mwnf-dynasty__body" }, ye = { class: "mwnf-dynasty__eyebrow" }, be = {
-	key: 0,
-	class: "mwnf-dynasty__field"
-}, xe = { class: "mwnf-dynasty__label" }, Se = {
-	key: 1,
-	class: "mwnf-dynasty__field"
-}, Ce = { class: "mwnf-dynasty__label" }, we = {
-	key: 2,
-	class: "mwnf-dynasty__dates"
-}, Te = {
-	key: 3,
-	class: "mwnf-dynasty__history"
-}, Ee = { class: "mwnf-dynasty__label" }, De = ["innerHTML"], Q = {
-	__name: "DynastyPopout",
-	props: {
-		dynasty: {
-			type: Object,
-			required: !0
-		},
-		text: {
-			type: Object,
-			default: () => ({})
-		},
-		dir: {
-			type: String,
-			default: ""
-		}
-	},
-	setup(e) {
-		let t = e, { t: r } = C(), c = n(() => {
-			let { from_ad: e, to_ad: n, from_ah: r, to_ah: i } = t.dynasty ?? {};
-			return e == null && n == null ? "" : `${r != null || i != null ? `AH ${r ?? "?"}–${i ?? "?"} / ` : ""}AD ${e ?? "?"}–${n ?? "?"}`;
-		});
-		return (t, n) => (u(), a("details", {
-			class: "mwnf-dynasty",
-			dir: e.dir || void 0
-		}, [o("summary", {
-			class: "mwnf-dynasty__summary",
-			innerHTML: h(T)(e.text.name || e.dynasty.id)
-		}, null, 8, _e), o("div", ve, [
-			o("p", ye, m(h(r)("record.dynasty.heading")), 1),
-			e.text.also_known_as ? (u(), a("p", be, [o("span", xe, m(h(r)("sheet.field.alsoKnownAs")) + ":", 1), s(" " + m(e.text.also_known_as), 1)])) : i("", !0),
-			e.text.area ? (u(), a("p", Se, [o("span", Ce, m(h(r)("sheet.field.area")) + ":", 1), s(" " + m(e.text.area), 1)])) : i("", !0),
-			c.value ? (u(), a("p", we, m(c.value), 1)) : i("", !0),
-			e.text.history ? (u(), a("div", Te, [o("p", Ee, m(h(r)("sheet.field.history")), 1), o("div", {
-				class: "mwnf-sheet__block",
-				innerHTML: h(w)(e.text.history)
-			}, null, 8, De)])) : i("", !0)
-		])], 8, ge));
-	}
-}, Oe = ["dir"], ke = {
-	key: 0,
-	class: "mwnf-dynasty-list__heading"
-}, Ae = {
-	__name: "DynastyList",
-	props: {
-		heading: {
-			type: String,
-			default: ""
-		},
-		dynasties: {
-			type: Array,
-			default: () => []
-		},
-		tr: {
-			type: Function,
-			default: null
-		},
-		dir: {
-			type: String,
-			default: ""
-		}
-	},
-	setup(e) {
-		return (n, o) => e.dynasties.length ? (u(), a("section", {
-			key: 0,
-			class: "mwnf-dynasty-list",
-			dir: e.dir || void 0
-		}, [e.heading ? (u(), a("h2", ke, m(e.heading), 1)) : i("", !0), (u(!0), a(t, null, f(e.dynasties, (t) => (u(), r(Q, {
-			key: t.id,
-			dynasty: t,
-			text: e.tr ? e.tr(t) : t,
-			dir: e.dir
-		}, null, 8, [
-			"dynasty",
-			"text",
-			"dir"
-		]))), 128))], 8, Oe)) : i("", !0);
-	}
-}, je = { class: "mwnf-sheet-timeline" }, Me = {
-	key: 0,
-	class: "mwnf-sheet-timeline__popout",
-	dir: "ltr"
-}, Ne = ["aria-label"], Pe = { class: "mwnf-sheet-timeline__title" }, $ = { class: "mwnf-sheet-timeline__option" }, Fe = ["value"], Ie = { class: "mwnf-sheet-timeline__scroll" }, Le = { class: "mwnf-sheet-timeline__subheader" }, Re = {
-	key: 0,
-	class: "mwnf-sheet-timeline__empty"
-}, ze = { class: "mwnf-sheet-timeline__date" }, Be = ["innerHTML"], Ve = {
-	__name: "TimelineLookup",
-	props: { info: {
-		type: Object,
-		required: !0
-	} },
-	setup(r) {
-		let l = r, { t: p } = C(), g = d(!1), v = d(l.info.defaultCountry ? l.info.defaultCountry() : "all");
-		y(() => l.info, (e) => {
-			v.value = e.defaultCountry ? e.defaultCountry() : "all";
-		});
-		let S = n(() => l.info.range ?? [null, null]), T = n(() => l.info.events(v.value)), E = n(() => l.info.countries.find((e) => e.value === v.value)?.label ?? ""), D = (e) => l.info.era ? l.info.era(e) : String(e ?? "");
-		return (n, l) => (u(), a("div", je, [o("p", {
-			class: "mwnf-sheet-timeline__trigger",
-			onClick: l[0] ||= (e) => g.value = !g.value
-		}, "➤ " + m(h(p)(r.info.trigger ?? "record.related.timelineForItem")), 1), g.value ? (u(), a("div", Me, [
-			o("button", {
-				type: "button",
-				class: "mwnf-sheet-timeline__close",
-				"aria-label": h(p)("core.action.close"),
-				onClick: l[1] ||= (e) => g.value = !1
-			}, "✕", 8, Ne),
-			o("p", Pe, m(h(p)(r.info.heading)), 1),
-			o("div", $, [x(o("select", {
-				"onUpdate:modelValue": l[2] ||= (e) => v.value = e,
-				class: "mwnf-sheet-timeline__select"
-			}, [(u(!0), a(t, null, f(r.info.countries, (e) => (u(), a("option", {
-				key: e.value,
-				value: e.value
-			}, m(e.label), 9, Fe))), 128))], 512), [[_, v.value]]), c(e, {
-				class: "mwnf-sheet-timeline__link",
-				to: r.info.searchTo(v.value, S.value)
-			}, {
-				default: b(() => [s("➤ " + m(h(p)("timeline.action.beginFullSearch")), 1)]),
-				_: 1
-			}, 8, ["to"])]),
-			o("div", Ie, [
-				o("p", Le, m(E.value) + ", " + m(D(S.value[0])) + " – " + m(D(S.value[1])), 1),
-				T.value.length ? i("", !0) : (u(), a("p", Re, m(h(p)("timeline.results.noEvents")), 1)),
-				(u(!0), a(t, null, f(T.value, (e, t) => (u(), a("div", {
-					key: e.id ?? t,
-					class: "mwnf-sheet-timeline__event"
-				}, [o("div", ze, m(D(e.year_from)), 1), o("div", {
-					class: "mwnf-sheet-timeline__description",
-					innerHTML: h(w)(e.text.description)
-				}, null, 8, Be)]))), 128))
-			])
-		])) : i("", !0)]));
-	}
-};
-//#endregion
-export { Z as a, he as i, Ae as n, H as o, Q as r, Ve as t };