relaton 3.0.7 → 3.1.0

data/lib/relaton/cli/frontend/src/components/DocumentDetail.test.ts

@@ -0,0 +1,142 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import DocumentDetail from "./DocumentDetail.vue";
+import type { IndexDocument } from "../lib/types";
+
+const rich: IndexDocument = {
+  id: "ISO 1234:2020",
+  title: "A standard about things",
+  doctype: "international-standard",
+  stage: "published",
+  date: "2020-05-01",
+  link: "https://www.iso.org/standard/1234.html",
+  yaml: "https://raw.example/data/iso-1234.yaml",
+  abstract: "This document specifies the things.",
+  edition: "2",
+  languages: ["en", "fr"],
+  keywords: ["metrology", "units"],
+  publisher: "International Organization for Standardization",
+  contributors: [
+    { name: "International Organization for Standardization", role: "publisher" },
+    { name: "Ada Lovelace", role: "author" },
+  ],
+  docids: [
+    { id: "ISO 1234:2020", type: "ISO", language: "en" },
+    { id: "10.1000/xyz", type: "DOI" },
+  ],
+  dates: [
+    { type: "published", value: "2020-05-01" },
+    { type: "created", value: "2019" },
+  ],
+  relations: [
+    { type: "obsoletes", id: "ISO 1234:2015" },
+    { type: "obsoletedBy", id: "ISO/IEC/IEEE 60559:2011" },
+  ],
+};
+
+// "ISO 1234:2015" is in this dataset; the ISO/IEC/IEEE one is not.
+const hasDoc = (id: string) => id === "ISO 1234:2015";
+
+const minimal: IndexDocument = {
+  id: "RAW 9",
+  title: "Just a title",
+  doctype: null,
+  stage: null,
+  date: null,
+  link: null,
+  yaml: null,
+};
+
+describe("DocumentDetail", () => {
+  it("renders the id, title and all enriched fields", () => {
+    const w = mount(DocumentDetail, { props: { doc: rich } });
+    const text = w.text();
+    expect(text).toContain("ISO 1234:2020");
+    expect(text).toContain("A standard about things");
+    expect(text).toContain("This document specifies the things.");
+    expect(text).toContain("Ada Lovelace");
+    expect(text).toContain("author");
+    expect(text).toContain("International Organization for Standardization");
+    expect(text).toContain("10.1000/xyz");
+    expect(text).toContain("metrology");
+    expect(text).toContain("2019");
+    expect(text).toContain("published");
+  });
+
+  it("links to the landing page and the raw YAML source", () => {
+    const w = mount(DocumentDetail, { props: { doc: rich } });
+    const hrefs = w.findAll("a").map((a) => a.attributes("href"));
+    expect(hrefs).toContain("https://www.iso.org/standard/1234.html");
+    expect(hrefs).toContain("https://raw.example/data/iso-1234.yaml");
+  });
+
+  it("emits back when the Back control is clicked", async () => {
+    const w = mount(DocumentDetail, { props: { doc: rich } });
+    await w.get('[aria-label="Back to index"]').trigger("click");
+    expect(w.emitted("back")).toBeTruthy();
+  });
+
+  it("degrades gracefully when only summary fields are present", () => {
+    const w = mount(DocumentDetail, { props: { doc: minimal } });
+    const text = w.text();
+    expect(text).toContain("RAW 9");
+    expect(text).toContain("Just a title");
+    // No enriched sections leak in.
+    expect(text).not.toContain("Abstract");
+    expect(text).not.toContain("Contributors");
+    expect(text).not.toContain("Identifiers");
+    expect(text).not.toContain("Relations");
+  });
+
+  describe("relations", () => {
+    it("lists every relation with a humanized type label", () => {
+      const w = mount(DocumentDetail, { props: { doc: rich, hasDoc } });
+      const text = w.text();
+      expect(text).toContain("Relations");
+      expect(text).toContain("Obsoletes");
+      expect(text).toContain("Obsoleted by");
+      expect(text).toContain("ISO 1234:2015");
+      expect(text).toContain("ISO/IEC/IEEE 60559:2011");
+    });
+
+    it("links a target that is in the dataset to its ?doc= page", () => {
+      const w = mount(DocumentDetail, { props: { doc: rich, hasDoc } });
+      const hrefs = w.findAll("a").map((a) => a.attributes("href"));
+      expect(hrefs).toContain("/doc/ISO%201234%3A2015");
+    });
+
+    it("renders a target outside the dataset as plain text, not a link", () => {
+      const w = mount(DocumentDetail, { props: { doc: rich, hasDoc } });
+      const linked = w.findAll("a").map((a) => a.text());
+      expect(linked).not.toContain("ISO/IEC/IEEE 60559:2011");
+      // …but it is still shown.
+      expect(w.text()).toContain("ISO/IEC/IEEE 60559:2011");
+    });
+
+    it("emits open with the target id when a linked relation is clicked", async () => {
+      const w = mount(DocumentDetail, { props: { doc: rich, hasDoc } });
+      const link = w.findAll("a").find((a) => a.text() === "ISO 1234:2015");
+      await link!.trigger("click");
+      expect(w.emitted("open")).toEqual([["ISO 1234:2015"]]);
+    });
+
+    // The anchor is a real ?doc= href precisely so it can be opened in a new
+    // tab; swallowing the modified click would break that.
+    it("lets a Cmd/Ctrl-click through to the browser instead of SPA-navigating", async () => {
+      const w = mount(DocumentDetail, { props: { doc: rich, hasDoc } });
+      const link = w.findAll("a").find((a) => a.text() === "ISO 1234:2015");
+      await link!.trigger("click", { metaKey: true });
+      expect(w.emitted("open")).toBeFalsy();
+      await link!.trigger("click", { ctrlKey: true });
+      expect(w.emitted("open")).toBeFalsy();
+    });
+
+    it("leaves every relation unlinked when no resolver is supplied", () => {
+      const w = mount(DocumentDetail, { props: { doc: rich } });
+      const linked = w.findAll("a").map((a) => a.text());
+      expect(linked).not.toContain("ISO 1234:2015");
+      expect(w.text()).toContain("ISO 1234:2015");
+    });
+  });
+});

data/lib/relaton/cli/frontend/src/components/DocumentDetail.vue

@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import type { IndexDocument } from "../lib/types";
+import { docHref } from "../lib/url";
+import Icon from "./Icon.vue";
+
+const props = defineProps<{
+  doc: IndexDocument;
+  // Does this DocID exist in the current dataset? Deliberately a predicate
+  // rather than a Set: App builds that set from the whole corpus, which is
+  // expensive at 166k documents, and passing the built value would materialize
+  // it for every detail panel — including the majority that have no relations.
+  // A function stays lazy while still registering the reactive dependency, so
+  // unresolved targets upgrade from plain text to links as summary shards land.
+  hasDoc?: (id: string) => boolean;
+}>();
+defineEmits<{ back: []; open: [id: string] }>();
+
+const copied = ref(false);
+async function copyId() {
+  try {
+    await navigator.clipboard.writeText(props.doc.id);
+    copied.value = true;
+    setTimeout(() => (copied.value = false), 1200);
+  } catch {
+    /* clipboard may be blocked; ignore */
+  }
+}
+
+// Each optional block renders only when it has content, so a summary-only
+// document (dom / static-json modes, which don't carry the detail fields) shows
+// just the header, core metadata and links — nothing empty leaks in.
+const languages = computed(() => (props.doc.languages ?? []).join(", "));
+const keywords = computed(() => props.doc.keywords ?? []);
+const contributors = computed(() => props.doc.contributors ?? []);
+const docids = computed(() => props.doc.docids ?? []);
+const dates = computed(() => props.doc.dates ?? []);
+// The single summary date is only worth showing when the full date list is
+// absent (e.g. a summary-only build), to avoid duplicating the Dates section.
+const showSummaryDate = computed(() => !!props.doc.date && dates.value.length === 0);
+const hasMeta = computed(
+  () =>
+    !!(
+      props.doc.doctype ||
+      props.doc.stage ||
+      props.doc.edition ||
+      languages.value ||
+      props.doc.publisher ||
+      showSummaryDate.value
+    ),
+);
+
+function docidLabel(d: { type?: string | null; language?: string | null }): string {
+  return [d.type, d.language].filter(Boolean).join(" · ");
+}
+
+// Relations, each paired with whether its target is a document in this dataset.
+// A target that isn't (it may live in another relaton-data repo) is still listed
+// — just as plain text, so nothing links to a page that doesn't exist here.
+const relations = computed(() =>
+  (props.doc.relations ?? []).map((r) => ({
+    ...r,
+    label: relationLabel(r.type),
+    href: props.hasDoc?.(r.id) ? docHref(r.id) : null,
+  })),
+);
+
+// "obsoletedBy" -> "Obsoleted by"; "partOf" -> "Part of".
+function relationLabel(type?: string | null): string {
+  if (!type) return "Related";
+  const words = type.replace(/([a-z0-9])([A-Z])/g, "$1 $2").toLowerCase();
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
+</script>
+
+<template>
+  <article class="py-2">
+    <button
+      type="button"
+      class="mb-6 inline-flex items-center gap-1.5 text-sm text-brand hover:underline dark:text-brand-dark"
+      aria-label="Back to index"
+      @click="$emit('back')"
+    >
+      <Icon name="arrow-left" class="h-4 w-4" />Back to index
+    </button>
+
+    <header class="mb-6">
+      <div class="flex items-center gap-2">
+        <h2 class="font-mono text-lg font-semibold text-brand dark:text-brand-dark">
+          {{ doc.id }}
+        </h2>
+        <button
+          type="button"
+          class="rounded p-0.5 text-slate-400 transition hover:text-brand"
+          :aria-label="`Copy DocID ${doc.id}`"
+          :title="copied ? 'Copied!' : 'Copy DocID'"
+          @click="copyId"
+        >
+          <Icon :name="copied ? 'check' : 'copy'" class="h-4 w-4" />
+        </button>
+      </div>
+      <h1 class="mt-1 text-2xl font-semibold tracking-tight">{{ doc.title }}</h1>
+    </header>
+
+    <section v-if="doc.abstract" class="mb-6">
+      <h3 class="mb-1 text-sm font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+        Abstract
+      </h3>
+      <p class="text-sm leading-relaxed text-slate-700 dark:text-slate-300">{{ doc.abstract }}</p>
+    </section>
+
+    <section v-if="hasMeta" class="mb-6">
+      <dl class="grid grid-cols-1 gap-x-6 gap-y-2 text-sm sm:grid-cols-2">
+        <div v-if="doc.doctype" class="flex gap-2">
+          <dt class="w-28 shrink-0 text-slate-500 dark:text-slate-400">Type</dt>
+          <dd>{{ doc.doctype }}</dd>
+        </div>
+        <div v-if="doc.stage" class="flex gap-2">
+          <dt class="w-28 shrink-0 text-slate-500 dark:text-slate-400">Stage</dt>
+          <dd>{{ doc.stage }}</dd>
+        </div>
+        <div v-if="doc.edition" class="flex gap-2">
+          <dt class="w-28 shrink-0 text-slate-500 dark:text-slate-400">Edition</dt>
+          <dd>{{ doc.edition }}</dd>
+        </div>
+        <div v-if="languages" class="flex gap-2">
+          <dt class="w-28 shrink-0 text-slate-500 dark:text-slate-400">Language</dt>
+          <dd>{{ languages }}</dd>
+        </div>
+        <div v-if="doc.publisher" class="flex gap-2">
+          <dt class="w-28 shrink-0 text-slate-500 dark:text-slate-400">Publisher</dt>
+          <dd>{{ doc.publisher }}</dd>
+        </div>
+        <div v-if="showSummaryDate" class="flex gap-2">
+          <dt class="w-28 shrink-0 text-slate-500 dark:text-slate-400">Date</dt>
+          <dd>{{ doc.date }}</dd>
+        </div>
+      </dl>
+    </section>
+
+    <section v-if="keywords.length" class="mb-6">
+      <h3 class="mb-2 text-sm font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+        Keywords
+      </h3>
+      <div class="flex flex-wrap gap-1.5">
+        <span
+          v-for="k in keywords"
+          :key="k"
+          class="rounded-full bg-slate-100 px-3 py-1 text-xs text-slate-600 dark:bg-slate-800 dark:text-slate-300"
+        >{{ k }}</span>
+      </div>
+    </section>
+
+    <section v-if="contributors.length" class="mb-6">
+      <h3 class="mb-2 text-sm font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+        Contributors
+      </h3>
+      <ul class="space-y-1 text-sm">
+        <li v-for="(c, i) in contributors" :key="i" class="flex flex-wrap items-baseline gap-2">
+          <span class="text-slate-700 dark:text-slate-300">{{ c.name }}</span>
+          <span v-if="c.role" class="text-xs text-slate-500 dark:text-slate-400">{{ c.role }}</span>
+        </li>
+      </ul>
+    </section>
+
+    <section v-if="docids.length" class="mb-6">
+      <h3 class="mb-2 text-sm font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+        Identifiers
+      </h3>
+      <ul class="space-y-1 text-sm">
+        <li v-for="(d, i) in docids" :key="i" class="flex flex-wrap items-baseline gap-2">
+          <span class="font-mono text-slate-700 dark:text-slate-300">{{ d.id }}</span>
+          <span v-if="docidLabel(d)" class="text-xs text-slate-500 dark:text-slate-400">{{ docidLabel(d) }}</span>
+        </li>
+      </ul>
+    </section>
+
+    <section v-if="relations.length" class="mb-6">
+      <h3 class="mb-2 text-sm font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+        Relations
+      </h3>
+      <ul class="space-y-1 text-sm">
+        <li v-for="(r, i) in relations" :key="i" class="flex flex-wrap items-baseline gap-2">
+          <span class="w-28 shrink-0 text-slate-500 dark:text-slate-400">{{ r.label }}</span>
+          <!-- A real ?doc= anchor whose plain click App.vue turns into an
+               in-page navigation. `.exact` leaves modified clicks (Cmd/Ctrl/Shift
+               = open in new tab/window) to the browser, so the href stays useful. -->
+          <a
+            v-if="r.href"
+            :href="r.href"
+            class="font-mono text-brand hover:underline dark:text-brand-dark"
+            @click.exact.prevent="$emit('open', r.id)"
+          >{{ r.id }}</a>
+          <span v-else class="font-mono text-slate-700 dark:text-slate-300">{{ r.id }}</span>
+        </li>
+      </ul>
+    </section>
+
+    <section v-if="dates.length" class="mb-6">
+      <h3 class="mb-2 text-sm font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+        Dates
+      </h3>
+      <ul class="space-y-1 text-sm">
+        <li v-for="(d, i) in dates" :key="i" class="flex flex-wrap items-baseline gap-2">
+          <span v-if="d.type" class="text-slate-500 dark:text-slate-400">{{ d.type }}</span>
+          <time class="text-slate-700 dark:text-slate-300">{{ d.value }}</time>
+        </li>
+      </ul>
+    </section>
+
+    <section v-if="doc.link || doc.yaml" class="flex flex-wrap gap-4 text-sm">
+      <a
+        v-if="doc.link"
+        :href="doc.link"
+        target="_blank"
+        rel="noopener"
+        class="inline-flex items-center gap-1 text-brand hover:underline dark:text-brand-dark"
+      ><Icon name="external" class="h-4 w-4" />Landing page</a>
+      <a
+        v-if="doc.yaml"
+        :href="doc.yaml"
+        target="_blank"
+        rel="noopener"
+        class="inline-flex items-center gap-1 text-brand hover:underline dark:text-brand-dark"
+      ><Icon name="document" class="h-4 w-4" />Raw YAML</a>
+    </section>
+  </article>
+</template>

data/lib/relaton/cli/frontend/src/components/DocumentRow.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import type { IndexDocument } from "../lib/types";
+import { docHref } from "../lib/url";
+import Icon from "./Icon.vue";
+
+const props = defineProps<{ doc: IndexDocument; view: "list" | "grid" }>();
+defineEmits<{ open: [id: string] }>();
+
+// A real, shareable link to the detail page (?doc=<id>) — crawlable and
+// middle-click/new-tab friendly — while a plain click is intercepted by App.vue
+// to SPA-navigate (preserving the current ?page= etc.).
+const detailHref = computed(() => docHref(props.doc.id));
+
+const copied = ref(false);
+async function copyId(id: string) {
+  try {
+    await navigator.clipboard.writeText(id);
+    copied.value = true;
+    setTimeout(() => (copied.value = false), 1200);
+  } catch {
+    /* clipboard may be blocked; ignore */
+  }
+}
+</script>
+
+<template>
+  <article
+    class="document group py-4"
+    :class="view === 'grid'
+      ? 'rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900'
+      : ''"
+  >
+    <div class="flex items-start justify-between gap-3">
+      <div class="min-w-0">
+        <div class="flex items-center gap-2">
+          <h2 class="truncate font-mono text-sm font-semibold text-brand dark:text-brand-dark">
+            <a
+              :href="detailHref"
+              class="hover:underline"
+              @click.exact.prevent="$emit('open', doc.id)"
+            >{{ doc.id }}</a>
+          </h2>
+          <button
+            type="button"
+            class="rounded p-0.5 text-slate-400 opacity-0 transition group-hover:opacity-100 hover:text-brand"
+            :aria-label="`Copy DocID ${doc.id}`"
+            :title="copied ? 'Copied!' : 'Copy DocID'"
+            @click="copyId(doc.id)"
+          >
+            <Icon :name="copied ? 'check' : 'copy'" class="h-4 w-4" />
+          </button>
+        </div>
+        <p class="mt-1 text-sm text-slate-700 dark:text-slate-300">
+          <a
+            :href="detailHref"
+            class="hover:underline"
+            tabindex="-1"
+            @click.exact.prevent="$emit('open', doc.id)"
+          >{{ doc.title }}</a>
+        </p>
+      </div>
+
+      <div class="flex shrink-0 items-start gap-2">
+        <div class="flex flex-col items-end gap-1 text-xs">
+          <div class="flex flex-wrap justify-end gap-1">
+            <span
+              v-if="doc.doctype"
+              class="rounded bg-slate-100 px-1.5 py-0.5 text-slate-600 dark:bg-slate-800 dark:text-slate-300"
+            >{{ doc.doctype }}</span>
+            <span
+              v-if="doc.stage"
+              class="rounded bg-emerald-100 px-1.5 py-0.5 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300"
+            >{{ doc.stage }}</span>
+          </div>
+          <time v-if="doc.date" class="text-slate-400">{{ doc.date }}</time>
+        </div>
+        <a
+          :href="detailHref"
+          class="mt-0.5 text-slate-300 transition group-hover:text-brand dark:text-slate-600 dark:group-hover:text-brand-dark"
+          aria-hidden="true"
+          tabindex="-1"
+          @click.exact.prevent="$emit('open', doc.id)"
+        ><Icon name="chevron-right" class="h-5 w-5" /></a>
+      </div>
+    </div>
+  </article>
+</template>

data/lib/relaton/cli/frontend/src/components/Icon.test.ts

@@ -0,0 +1,44 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import Icon from "./Icon.vue";
+
+describe("Icon", () => {
+  it("renders an inline SVG with a path for a known name", () => {
+    const w = mount(Icon, { props: { name: "search" } });
+    const svg = w.find("svg");
+    expect(svg.exists()).toBe(true);
+    expect(svg.find("path").exists()).toBe(true);
+  });
+
+  it("uses the CalConnect Heroicons-outline style", () => {
+    const svg = mount(Icon, { props: { name: "search" } }).find("svg");
+    expect(svg.attributes("stroke")).toBe("currentColor");
+    expect(svg.attributes("fill")).toBe("none");
+    expect(svg.attributes("viewBox")).toBe("0 0 24 24");
+    // Decorative — the parent control carries the accessible label.
+    expect(svg.attributes("aria-hidden")).toBe("true");
+  });
+
+  it("renders nothing for an unknown name", () => {
+    const w = mount(Icon, { props: { name: "not-a-real-icon" } });
+    expect(w.find("svg").exists()).toBe(false);
+  });
+
+  it("passes a caller-supplied class through to the svg root", () => {
+    const w = mount(Icon, { props: { name: "sun" }, attrs: { class: "h-5 w-5" } });
+    const svg = w.find("svg");
+    expect(svg.classes()).toContain("h-5");
+    expect(svg.classes()).toContain("w-5");
+  });
+
+  it("provides every icon the UI references", () => {
+    const names = [
+      "sun", "moon", "search", "chevron-up", "chevron-down",
+      "list", "grid", "copy", "check", "document",
+    ];
+    for (const name of names) {
+      expect(mount(Icon, { props: { name } }).find("path").exists()).toBe(true);
+    }
+  });
+});

data/lib/relaton/cli/frontend/src/components/Icon.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+// Inline Heroicons-outline SVG paths, matching the icon set used on
+// https://standards.calconnect.org/standards/ (fill=none, stroke=currentColor,
+// 24×24). Keeping the geometry here — instead of an icon dependency — mirrors
+// how CalConnect inlines the same paths, so the icons inherit text colour and
+// dark mode for free. Callers size the icon with a passthrough class (h-5 w-5…)
+// and provide the accessible label on the surrounding control; the glyph itself
+// stays aria-hidden.
+const PATHS: Record<string, string[]> = {
+  sun: [
+    "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z",
+  ],
+  moon: [
+    "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z",
+  ],
+  search: ["M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"],
+  "chevron-up": ["M5 15l7-7 7 7"],
+  "chevron-down": ["M19 9l-7 7-7-7"],
+  "chevron-right": ["M9 5l7 7-7 7"],
+  "arrow-left": ["M10 19l-7-7m0 0l7-7m-7 7h18"],
+  external: ["M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"],
+  list: ["M4 6h16M4 12h16M4 18h16"],
+  grid: [
+    "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z",
+  ],
+  copy: [
+    "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z",
+  ],
+  check: ["M5 13l4 4L19 7"],
+  document: [
+    "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z",
+  ],
+};
+
+const props = defineProps<{ name: string }>();
+const paths = computed(() => PATHS[props.name] ?? null);
+</script>
+
+<template>
+  <svg
+    v-if="paths"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+  >
+    <path v-for="(d, i) in paths" :key="i" :d="d" />
+  </svg>
+</template>

data/lib/relaton/cli/frontend/src/components/Pagination.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{ page: number; pageCount: number }>();
+const emit = defineEmits<{ go: [page: number] }>();
+</script>
+
+<template>
+  <nav
+    v-if="pageCount > 1"
+    class="flex items-center justify-center gap-2 text-sm"
+    aria-label="Pagination"
+  >
+    <button
+      type="button"
+      class="rounded-md border border-slate-300 px-3 py-1 disabled:opacity-40 dark:border-slate-700"
+      :disabled="page === 1"
+      @click="emit('go', page - 1)"
+    >Prev</button>
+    <span class="text-slate-500 dark:text-slate-400">Page {{ page }} of {{ pageCount }}</span>
+    <button
+      type="button"
+      class="rounded-md border border-slate-300 px-3 py-1 disabled:opacity-40 dark:border-slate-700"
+      :disabled="page === pageCount"
+      @click="emit('go', page + 1)"
+    >Next</button>
+  </nav>
+</template>