@museumwnf/viewer-core 1.14.0 → 1.15.0

package/src/catalogue/listQuery.js

@@ -1,100 +1,100 @@
-import { computed, reactive, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-
-// The state of a list page lives in the URL, and the URL is what a visitor
-// shares, bookmarks and comes back to through history. Every results page of
-// every website therefore does the same four things: read the filters and the
-// page out of `route.query`, keep them in step when the route changes under
-// it, write them back when the visitor acts, and start again from page one
-// when a filter changes. Eleven views wrote those four things by hand before
-// this existed, each with its own idiom and its own small differences.
-//
-// The convention this encodes is rule R8 of the alignment pass: filters and
-// the page travel in the query, never in the path; `page` is dropped when it
-// is 1; a filter change is a new place in history (`push`), a page change
-// replaces the current one (`replace`), and either navigates on the route the
-// page is already on, by name, so no view writes a path.
-
-const PAGE = 'page'
-
-function firstValue(value) {
-  return Array.isArray(value) ? (value[0] ?? '') : value ?? ''
-}
-
-function pageOf(query) {
-  const parsed = Number.parseInt(firstValue(query[PAGE]), 10)
-  return Number.isFinite(parsed) && parsed > 0 ? parsed : 1
-}
-
-/**
- * Filters and page bound to the route query.
- *
- * `keys` names the filters this page knows. `filters` is a reactive object
- * with one string per key — bind a control to it, then `apply()` to navigate
- * with what it holds (or `apply(patch)` to change some and navigate at once,
- * for a control that navigates on change). `reset()` clears every filter and
- * navigates. `goToPage(n)` changes only the page. `page` is the current page,
- * read from the query. `active` says whether any filter is set.
- *
- * Query parameters the page does not own — `lang`, a parameter of another
- * component — are carried across every navigation untouched.
- */
-export function useListQuery({ keys = [], page = true } = {}) {
-  const route = useRoute()
-  const router = useRouter()
-
-  const filters = reactive(Object.fromEntries(keys.map((key) => [key, ''])))
-
-  function readFromRoute() {
-    for (const key of keys) filters[key] = String(firstValue(route.query[key]))
-  }
-  readFromRoute()
-  // The route changing under the page — back, forward, a link to the same
-  // page with other filters — is the URL speaking; the controls follow it.
-  watch(() => route.query, readFromRoute)
-
-  const current = computed(() => (page ? pageOf(route.query) : 1))
-  const active = computed(() => keys.some((key) => filters[key] !== ''))
-
-  function foreignQuery() {
-    const out = {}
-    for (const [key, value] of Object.entries(route.query)) {
-      if (!keys.includes(key) && key !== PAGE) out[key] = value
-    }
-    return out
-  }
-
-  function ownQuery() {
-    const out = {}
-    for (const key of keys) if (filters[key] !== '') out[key] = filters[key]
-    return out
-  }
-
-  function location(query) {
-    return { name: route.name, params: route.params, query }
-  }
-
-  /** Navigate with the filters as they are, or with `patch` applied first. Starts at page 1. */
-  function apply(patch = {}) {
-    for (const [key, value] of Object.entries(patch)) {
-      if (keys.includes(key)) filters[key] = value == null ? '' : String(value)
-    }
-    return router.push(location({ ...foreignQuery(), ...ownQuery() }))
-  }
-
-  /** Clear every filter and navigate. */
-  function reset() {
-    for (const key of keys) filters[key] = ''
-    return router.push(location(foreignQuery()))
-  }
-
-  /** Another page of the same results: the same place in history, so back leaves the list. */
-  function goToPage(n) {
-    const target = Math.max(1, Number.parseInt(n, 10) || 1)
-    const query = { ...foreignQuery(), ...ownQuery() }
-    if (target > 1) query[PAGE] = String(target)
-    return router.replace(location(query))
-  }
-
-  return { filters, page: current, active, apply, reset, goToPage }
-}
+import { computed, reactive, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+// The state of a list page lives in the URL, and the URL is what a visitor
+// shares, bookmarks and comes back to through history. Every results page of
+// every website therefore does the same four things: read the filters and the
+// page out of `route.query`, keep them in step when the route changes under
+// it, write them back when the visitor acts, and start again from page one
+// when a filter changes. Eleven views wrote those four things by hand before
+// this existed, each with its own idiom and its own small differences.
+//
+// The convention this encodes is rule R8 of the alignment pass: filters and
+// the page travel in the query, never in the path; `page` is dropped when it
+// is 1; a filter change is a new place in history (`push`), a page change
+// replaces the current one (`replace`), and either navigates on the route the
+// page is already on, by name, so no view writes a path.
+
+const PAGE = 'page'
+
+function firstValue(value) {
+  return Array.isArray(value) ? (value[0] ?? '') : value ?? ''
+}
+
+function pageOf(query) {
+  const parsed = Number.parseInt(firstValue(query[PAGE]), 10)
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : 1
+}
+
+/**
+ * Filters and page bound to the route query.
+ *
+ * `keys` names the filters this page knows. `filters` is a reactive object
+ * with one string per key — bind a control to it, then `apply()` to navigate
+ * with what it holds (or `apply(patch)` to change some and navigate at once,
+ * for a control that navigates on change). `reset()` clears every filter and
+ * navigates. `goToPage(n)` changes only the page. `page` is the current page,
+ * read from the query. `active` says whether any filter is set.
+ *
+ * Query parameters the page does not own — `lang`, a parameter of another
+ * component — are carried across every navigation untouched.
+ */
+export function useListQuery({ keys = [], page = true } = {}) {
+  const route = useRoute()
+  const router = useRouter()
+
+  const filters = reactive(Object.fromEntries(keys.map((key) => [key, ''])))
+
+  function readFromRoute() {
+    for (const key of keys) filters[key] = String(firstValue(route.query[key]))
+  }
+  readFromRoute()
+  // The route changing under the page — back, forward, a link to the same
+  // page with other filters — is the URL speaking; the controls follow it.
+  watch(() => route.query, readFromRoute)
+
+  const current = computed(() => (page ? pageOf(route.query) : 1))
+  const active = computed(() => keys.some((key) => filters[key] !== ''))
+
+  function foreignQuery() {
+    const out = {}
+    for (const [key, value] of Object.entries(route.query)) {
+      if (!keys.includes(key) && key !== PAGE) out[key] = value
+    }
+    return out
+  }
+
+  function ownQuery() {
+    const out = {}
+    for (const key of keys) if (filters[key] !== '') out[key] = filters[key]
+    return out
+  }
+
+  function location(query) {
+    return { name: route.name, params: route.params, query }
+  }
+
+  /** Navigate with the filters as they are, or with `patch` applied first. Starts at page 1. */
+  function apply(patch = {}) {
+    for (const [key, value] of Object.entries(patch)) {
+      if (keys.includes(key)) filters[key] = value == null ? '' : String(value)
+    }
+    return router.push(location({ ...foreignQuery(), ...ownQuery() }))
+  }
+
+  /** Clear every filter and navigate. */
+  function reset() {
+    for (const key of keys) filters[key] = ''
+    return router.push(location(foreignQuery()))
+  }
+
+  /** Another page of the same results: the same place in history, so back leaves the list. */
+  function goToPage(n) {
+    const target = Math.max(1, Number.parseInt(n, 10) || 1)
+    const query = { ...foreignQuery(), ...ownQuery() }
+    if (target > 1) query[PAGE] = String(target)
+    return router.replace(location(query))
+  }
+
+  return { filters, page: current, active, apply, reset, goToPage }
+}

package/src/catalogue/pagination.js

@@ -1,57 +1,57 @@
-import { computed, toValue } from 'vue'
-
-// One page arithmetic for every list. Five implementations existed — this
-// package's own ListView, a block inlined into six standalone views, a
-// component copied into four DXA sites, and two idioms for the count — and
-// they disagreed on nothing but shape. This is the DXA shape, which answers
-// everything a page needs to render itself: where it is, how far it goes,
-// and which rows it holds.
-
-const DEFAULT_SIZE = 20
-
-/**
- * `{ total, lastPage, currentPage, from, to, rows }` for one page of `list`.
- * A page past the end clamps to the last one; a page below one is the first;
- * `from`/`to` are 1-based and both 0 for an empty list. The size is the
- * caller's: twenty on the standalone sites and nine on the DXA sites are
- * both legacy facts, and neither is this function's to decide.
- */
-export function paginate(list, page, size = DEFAULT_SIZE) {
-  const rows = list ?? []
-  const total = rows.length
-  const perPage = Math.max(1, Number(size) || DEFAULT_SIZE)
-  const lastPage = Math.max(1, Math.ceil(total / perPage))
-  const requested = Number.parseInt(page, 10)
-  const currentPage = Math.min(Math.max(1, Number.isFinite(requested) ? requested : 1), lastPage)
-  const start = (currentPage - 1) * perPage
-  return {
-    total,
-    lastPage,
-    currentPage,
-    from: total === 0 ? 0 : start + 1,
-    to: Math.min(start + perPage, total),
-    rows: rows.slice(start, start + perPage),
-  }
-}
-
-/**
- * `paginate` over reactive sources: `list` and `page` may each be a ref, a
- * computed, a getter or a plain value — a `useListQuery().page`, typically.
- */
-export function usePagination(list, { page = 1, size = DEFAULT_SIZE } = {}) {
-  return computed(() => paginate(toValue(list), toValue(page), toValue(size)))
-}
-
-/**
- * Chronological order by `key` (a record's `start_date`), undated records
- * last — or first, with `undated: 'first'`. Stable: two records of the same
- * year keep the order they arrived in. Returns a new array.
- */
-export function sortChronological(list, { key = 'start_date', undated = 'last' } = {}) {
-  const missing = undated === 'first' ? -Infinity : Infinity
-  const year = (record) => {
-    const value = record?.[key]
-    return typeof value === 'number' && Number.isFinite(value) ? value : missing
-  }
-  return [...(list ?? [])].sort((a, b) => year(a) - year(b))
-}
+import { computed, toValue } from 'vue'
+
+// One page arithmetic for every list. Five implementations existed — this
+// package's own ListView, a block inlined into six standalone views, a
+// component copied into four DXA sites, and two idioms for the count — and
+// they disagreed on nothing but shape. This is the DXA shape, which answers
+// everything a page needs to render itself: where it is, how far it goes,
+// and which rows it holds.
+
+const DEFAULT_SIZE = 20
+
+/**
+ * `{ total, lastPage, currentPage, from, to, rows }` for one page of `list`.
+ * A page past the end clamps to the last one; a page below one is the first;
+ * `from`/`to` are 1-based and both 0 for an empty list. The size is the
+ * caller's: twenty on the standalone sites and nine on the DXA sites are
+ * both legacy facts, and neither is this function's to decide.
+ */
+export function paginate(list, page, size = DEFAULT_SIZE) {
+  const rows = list ?? []
+  const total = rows.length
+  const perPage = Math.max(1, Number(size) || DEFAULT_SIZE)
+  const lastPage = Math.max(1, Math.ceil(total / perPage))
+  const requested = Number.parseInt(page, 10)
+  const currentPage = Math.min(Math.max(1, Number.isFinite(requested) ? requested : 1), lastPage)
+  const start = (currentPage - 1) * perPage
+  return {
+    total,
+    lastPage,
+    currentPage,
+    from: total === 0 ? 0 : start + 1,
+    to: Math.min(start + perPage, total),
+    rows: rows.slice(start, start + perPage),
+  }
+}
+
+/**
+ * `paginate` over reactive sources: `list` and `page` may each be a ref, a
+ * computed, a getter or a plain value — a `useListQuery().page`, typically.
+ */
+export function usePagination(list, { page = 1, size = DEFAULT_SIZE } = {}) {
+  return computed(() => paginate(toValue(list), toValue(page), toValue(size)))
+}
+
+/**
+ * Chronological order by `key` (a record's `start_date`), undated records
+ * last — or first, with `undated: 'first'`. Stable: two records of the same
+ * year keep the order they arrived in. Returns a new array.
+ */
+export function sortChronological(list, { key = 'start_date', undated = 'last' } = {}) {
+  const missing = undated === 'first' ? -Infinity : Infinity
+  const year = (record) => {
+    const value = record?.[key]
+    return typeof value === 'number' && Number.isFinite(value) ? value : missing
+  }
+  return [...(list ?? [])].sort((a, b) => year(a) - year(b))
+}

package/src/catalogue/searchLanguage.js

@@ -1,32 +1,32 @@
-import { computed, ref, watch } from 'vue'
-import { useDataPackage } from '../composables/useDataPackage.js'
-
-/**
- * The search-language rule: a sorted list of languages the entity's
- * translations exist in, and a watcher that loads them when the selection
- * changes. Three Database pages carry this watch locally, reading three
- * different entity names.
- */
-export function useSearchLanguage(entity) {
-  const { availableLanguages, loadTranslations } = useDataPackage()
-
-  // The languages the entity actually carries translations in, sorted.
-  const languages = computed(() => {
-    const available = availableLanguages(entity)
-    return available.slice().sort()
-  })
-
-  // The user's current selection.
-  const language = ref('')
-
-  // Load translations when the selection changes; the watch runs immediately
-  // so the reference language (English, the index language) is always there.
-  watch(() => language.value, (lang) => {
-    if (lang) loadTranslations(entity, lang)
-  }, { immediate: true })
-
-  return {
-    languages,
-    language,
-  }
-}
+import { computed, ref, watch } from 'vue'
+import { useDataPackage } from '../composables/useDataPackage.js'
+
+/**
+ * The search-language rule: a sorted list of languages the entity's
+ * translations exist in, and a watcher that loads them when the selection
+ * changes. Three Database pages carry this watch locally, reading three
+ * different entity names.
+ */
+export function useSearchLanguage(entity) {
+  const { availableLanguages, loadTranslations } = useDataPackage()
+
+  // The languages the entity actually carries translations in, sorted.
+  const languages = computed(() => {
+    const available = availableLanguages(entity)
+    return available.slice().sort()
+  })
+
+  // The user's current selection.
+  const language = ref('')
+
+  // Load translations when the selection changes; the watch runs immediately
+  // so the reference language (English, the index language) is always there.
+  watch(() => language.value, (lang) => {
+    if (lang) loadTranslations(entity, lang)
+  }, { immediate: true })
+
+  return {
+    languages,
+    language,
+  }
+}