@gxp-dev/mod-ui 2.0.10 → 2.0.14

package/dist/chunks/PullRequestsList-Dg-zowrz.js

@@ -0,0 +1,253 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./utils-DAErOi9O.js";
+import { i as n, n as r, r as i } from "./avatar-D__e2bNE.js";
+import { n as a } from "./badge-4iQG4kuk.js";
+import { n as o, o as s, r as ee, s as te } from "./card-DAfWnvro.js";
+import { t as ne } from "./input-tw5ZQGKQ.js";
+import { t as c } from "./skeleton-DG95C9ZP.js";
+import { Fragment as l, computed as re, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, normalizeClass as _, onMounted as ie, openBlock as v, ref as y, renderList as b, resolveDynamicComponent as ae, toDisplayString as x, unref as S, watch as oe, withCtx as C } from "vue";
+import { ArrowRight as se, GitMerge as ce, GitPullRequest as w, GitPullRequestDraft as le, Search as ue, XCircle as de } from "@lucide/vue";
+//#region src/components/compositions/elements/code/PullRequestsList.vue?vue&type=script&setup=true&lang.ts
+var fe = { class: "flex flex-wrap items-center gap-2" }, pe = { class: "flex flex-wrap items-center gap-1" }, T = [
+	"data-testid",
+	"aria-pressed",
+	"onClick"
+], E = { class: "relative flex-1 min-w-48" }, D = {
+	key: 0,
+	class: "text-sm text-muted-foreground",
+	"data-testid": "pull-requests-list-help"
+}, O = {
+	key: 0,
+	class: "flex flex-col gap-2 px-2 py-2",
+	"data-testid": "pull-requests-list-loading"
+}, k = {
+	key: 1,
+	class: "px-2 py-2 text-sm text-destructive",
+	"data-testid": "pull-requests-list-error",
+	role: "alert"
+}, A = {
+	key: 2,
+	class: "px-2 py-4 text-center text-sm text-muted-foreground",
+	"data-testid": "pull-requests-list-empty"
+}, j = {
+	key: 3,
+	class: "flex flex-col",
+	role: "list",
+	"data-testid": "pull-requests-list-rows"
+}, M = [
+	"data-testid",
+	"aria-selected",
+	"onClick"
+], N = { class: "flex min-w-0 flex-1 flex-col gap-0.5" }, P = { class: "flex items-center gap-2" }, F = { class: "truncate text-sm font-medium" }, I = {
+	key: 0,
+	class: "text-xs text-muted-foreground"
+}, L = { class: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground" }, R = {
+	key: 0,
+	class: "flex items-center gap-1.5"
+}, z = {
+	key: 1,
+	class: "flex items-center gap-1"
+}, B = {
+	key: 0,
+	class: "font-mono"
+}, me = {
+	key: 2,
+	class: "font-mono"
+}, he = { key: 2 }, ge = {
+	key: 4,
+	class: "px-2 pt-2 text-sm text-destructive",
+	"data-testid": "pull-requests-list-errors",
+	role: "alert"
+}, V = /* @__PURE__ */ g({
+	__name: "PullRequestsList",
+	props: {
+		onLoadPullRequests: {},
+		defaultFilter: {},
+		selectedId: {},
+		onSelect: {},
+		label: { default: "Pull Requests" },
+		name: {},
+		helpText: {},
+		errors: { default: () => [] },
+		classList: {}
+	},
+	emits: ["update:selectedId"],
+	setup(e, { expose: g, emit: V }) {
+		let H = e, U = V, W = y(H.defaultFilter?.status ?? "all"), G = y(H.defaultFilter?.query ?? ""), K = y([]), q = y(!1), J = y(null), Y = 0, _e = [
+			{
+				value: "all",
+				label: "All"
+			},
+			{
+				value: "open",
+				label: "Open"
+			},
+			{
+				value: "draft",
+				label: "Draft"
+			},
+			{
+				value: "merged",
+				label: "Merged"
+			},
+			{
+				value: "closed",
+				label: "Closed"
+			}
+		];
+		function ve(e) {
+			switch (e) {
+				case "open": return "success";
+				case "merged": return "info";
+				case "closed": return "destructive";
+				default: return "secondary";
+			}
+		}
+		function ye(e) {
+			return e === "merged" ? ce : e === "closed" ? de : e === "draft" ? le : w;
+		}
+		function be(e) {
+			if (!e) return "";
+			let t = e instanceof Date ? e : new Date(e), n = Date.now() - t.getTime();
+			if (Number.isNaN(n)) return "";
+			let r = Math.round(n / 1e3);
+			if (r < 60) return `${r}s ago`;
+			let i = Math.round(r / 60);
+			if (i < 60) return `${i}m ago`;
+			let a = Math.round(i / 60);
+			if (a < 24) return `${a}h ago`;
+			let o = Math.round(a / 24);
+			if (o < 30) return `${o}d ago`;
+			let s = Math.round(o / 30);
+			return s < 12 ? `${s}mo ago` : `${Math.round(s / 12)}y ago`;
+		}
+		function xe() {
+			let e = {};
+			return W.value !== "all" && (e.status = W.value), G.value && (e.query = G.value), e;
+		}
+		async function X() {
+			let e = ++Y;
+			q.value = !0, J.value = null;
+			try {
+				let t = await H.onLoadPullRequests(xe());
+				if (e !== Y) return;
+				K.value = Array.isArray(t) ? t : [];
+			} catch (t) {
+				if (e !== Y) return;
+				J.value = t instanceof Error ? t.message : String(t), K.value = [];
+			} finally {
+				e === Y && (q.value = !1);
+			}
+		}
+		let Z = null;
+		function Q() {
+			Z !== null && clearTimeout(Z), Z = setTimeout(() => {
+				Z = null, X();
+			}, 200);
+		}
+		function Se(e) {
+			W.value !== e && (W.value = e, X());
+		}
+		function Ce(e) {
+			G.value = e.target.value, Q();
+		}
+		function we(e) {
+			U("update:selectedId", e.id), H.onSelect && H.onSelect(e);
+		}
+		function Te(e) {
+			return e ? e.split(/\s+/).filter(Boolean).slice(0, 2).map((e) => e[0]?.toUpperCase() ?? "").join("") : "?";
+		}
+		let $ = re(() => H.selectedId);
+		return ie(() => {
+			X();
+		}), oe(() => H.defaultFilter, (e) => {
+			e && (W.value = e.status ?? "all", G.value = e.query ?? "", X());
+		}, { deep: !0 }), g({ reload: X }), (e, re) => (v(), u(S(te), {
+			class: _(S(t)(H.classList)),
+			"data-element-name": H.name ?? void 0,
+			"data-testid": "pull-requests-list"
+		}, {
+			default: C(() => [h(S(ee), { class: "flex flex-col gap-3 pb-3" }, {
+				default: C(() => [
+					h(S(o), { class: "flex items-center gap-2 text-base" }, {
+						default: C(() => [h(S(w), { class: "size-5 text-muted-foreground" }), p("span", null, x(H.label), 1)]),
+						_: 1
+					}),
+					p("div", fe, [p("div", pe, [(v(), f(l, null, b(_e, (e) => p("button", {
+						key: e.value,
+						type: "button",
+						class: _(S(t)("rounded-full border px-3 py-1 text-xs font-medium transition-colors", W.value === e.value ? "border-primary bg-primary text-primary-foreground" : "border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground")),
+						"data-testid": `pull-requests-list-chip-${e.value}`,
+						"aria-pressed": W.value === e.value,
+						onClick: (t) => Se(e.value)
+					}, x(e.label), 11, T)), 64))]), p("div", E, [h(S(ue), { class: "absolute left-2 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" }), h(S(ne), {
+						"model-value": G.value,
+						placeholder: "Search…",
+						class: "pl-8",
+						"data-testid": "pull-requests-list-search",
+						onInput: Ce
+					}, null, 8, ["model-value"])])]),
+					H.helpText ? (v(), f("p", D, x(H.helpText), 1)) : d("", !0)
+				]),
+				_: 1
+			}), h(S(s), { class: "flex flex-col gap-1 p-2" }, {
+				default: C(() => [q.value ? (v(), f("div", O, [
+					h(S(c), { class: "h-12 w-full" }),
+					h(S(c), { class: "h-12 w-full" }),
+					h(S(c), { class: "h-12 w-full" })
+				])) : J.value ? (v(), f("p", k, x(J.value), 1)) : K.value.length === 0 ? (v(), f("p", A, " No pull requests. ")) : (v(), f("ul", j, [(v(!0), f(l, null, b(K.value, (e) => (v(), f("li", {
+					key: e.id,
+					class: _(S(t)("flex cursor-pointer items-center gap-3 rounded-md border border-transparent px-2 py-2 hover:bg-accent", $.value === e.id ? "border-primary bg-accent" : "")),
+					"data-testid": `pull-requests-list-row-${e.id}`,
+					"aria-selected": $.value === e.id,
+					onClick: (t) => we(e)
+				}, [
+					(v(), u(ae(ye(e.status)), { class: "size-4 shrink-0 text-muted-foreground" })),
+					p("div", N, [p("div", P, [
+						p("span", F, x(e.title), 1),
+						e.number === void 0 ? d("", !0) : (v(), f("span", I, " #" + x(e.number), 1)),
+						h(S(a), {
+							variant: ve(e.status),
+							size: "sm",
+							class: "capitalize"
+						}, {
+							default: C(() => [m(x(e.status), 1)]),
+							_: 2
+						}, 1032, ["variant"])
+					]), p("div", L, [
+						e.authorName ? (v(), f("span", R, [h(S(n), {
+							size: "sm",
+							class: "size-5 text-[10px]"
+						}, {
+							default: C(() => [e.authorAvatarUrl ? (v(), u(S(r), {
+								key: 0,
+								src: e.authorAvatarUrl,
+								alt: e.authorName
+							}, null, 8, ["src", "alt"])) : d("", !0), h(S(i), null, {
+								default: C(() => [m(x(Te(e.authorName)), 1)]),
+								_: 2
+							}, 1024)]),
+							_: 2
+						}, 1024), p("span", null, x(e.authorName), 1)])) : d("", !0),
+						e.branchName || e.targetBranch ? (v(), f("span", z, [
+							e.branchName ? (v(), f("span", B, x(e.branchName), 1)) : d("", !0),
+							e.branchName && e.targetBranch ? (v(), u(S(se), {
+								key: 1,
+								class: "size-3"
+							})) : d("", !0),
+							e.targetBranch ? (v(), f("span", me, x(e.targetBranch), 1)) : d("", !0)
+						])) : d("", !0),
+						e.updatedAt || e.createdAt ? (v(), f("span", he, x(be(e.updatedAt ?? e.createdAt)), 1)) : d("", !0)
+					])]),
+					d("", !0)
+				], 10, M))), 128))])), H.errors.length ? (v(), f("ul", ge, [(v(!0), f(l, null, b(H.errors, (e, t) => (v(), f("li", { key: t }, x(e), 1))), 128))])) : d("", !0)]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["class", "data-element-name"]));
+	}
+}), H = /* @__PURE__ */ e({ default: () => U }), U = V;
+//#endregion
+export { H as n, U as t };
+
+//# sourceMappingURL=PullRequestsList-Dg-zowrz.js.map

package/dist/chunks/PullRequestsList-Dg-zowrz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PullRequestsList-Dg-zowrz.js","names":[],"sources":["../../src/components/compositions/elements/code/PullRequestsList.vue","../../src/components/compositions/elements/code/PullRequestsList.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven pull-request list composition. Renders a toolbar with\n * status-filter chips + a search input, then a list of PR rows. The\n * composition makes no HTTP calls — the consumer supplies a single\n * Promise-returning `onLoadPullRequests` callback that receives the\n * current filter object.\n *\n *   <PullRequestsList\n *     :on-load-pull-requests=\"(f) => fetch(`/api/prs?...`).then(r => r.json())\"\n *     v-model:selected-id=\"selectedPr\"\n *     @select=\"(pr) => router.push(pr.url)\"\n *   />\n */\nimport { computed, onMounted, ref, watch } from \"vue\"\nimport {\n  ArrowRight,\n  GitMerge,\n  GitPullRequest,\n  GitPullRequestDraft,\n  Loader2,\n  Search,\n  XCircle,\n} from \"@lucide/vue\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport { cn } from \"@/lib/utils\"\n\nexport type PullRequestStatus =\n  | \"open\"\n  | \"closed\"\n  | \"merged\"\n  | \"draft\"\n\nexport interface PullRequest {\n  id: string\n  number?: number\n  title: string\n  authorName?: string\n  authorAvatarUrl?: string\n  status: PullRequestStatus\n  createdAt?: string | Date\n  updatedAt?: string | Date\n  branchName?: string\n  targetBranch?: string\n  url?: string\n}\n\nexport interface PullRequestsListFilter {\n  status?: PullRequestStatus\n  query?: string\n}\n\nexport interface PullRequestsListProps {\n  /** REQUIRED loader, invoked on mount and whenever the filter changes. */\n  onLoadPullRequests: (\n    filter?: PullRequestsListFilter,\n  ) => Promise<PullRequest[]>\n  /** Initial filter applied on mount. */\n  defaultFilter?: PullRequestsListFilter\n  /** Currently selected PR id (v-modelable as `selectedId`). */\n  selectedId?: string\n  /** Fired when a PR row is clicked. */\n  onSelect?: (pr: PullRequest) => void\n  label?: string\n  name?: string | null\n  helpText?: string\n  errors?: string[]\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<PullRequestsListProps>(), {\n  errors: () => [],\n  label: \"Pull Requests\",\n})\n\nconst emit = defineEmits<{\n  \"update:selectedId\": [value: string]\n}>()\n\nconst status = ref<PullRequestStatus | \"all\">(\n  props.defaultFilter?.status ?? \"all\",\n)\nconst query = ref<string>(props.defaultFilter?.query ?? \"\")\n\nconst items = ref<PullRequest[]>([])\nconst loading = ref<boolean>(false)\nconst error = ref<string | null>(null)\nlet token = 0\n\nconst STATUS_CHIPS: { value: PullRequestStatus | \"all\"; label: string }[] = [\n  { value: \"all\", label: \"All\" },\n  { value: \"open\", label: \"Open\" },\n  { value: \"draft\", label: \"Draft\" },\n  { value: \"merged\", label: \"Merged\" },\n  { value: \"closed\", label: \"Closed\" },\n]\n\nfunction statusVariant(s: PullRequestStatus): string {\n  switch (s) {\n    case \"open\":\n      return \"success\"\n    case \"merged\":\n      return \"info\"\n    case \"closed\":\n      return \"destructive\"\n    case \"draft\":\n    default:\n      return \"secondary\"\n  }\n}\n\nfunction statusIcon(s: PullRequestStatus) {\n  if (s === \"merged\") {\n    return GitMerge\n  }\n  if (s === \"closed\") {\n    return XCircle\n  }\n  if (s === \"draft\") {\n    return GitPullRequestDraft\n  }\n  return GitPullRequest\n}\n\nfunction relativeTime(value: string | Date | undefined): string {\n  if (!value) {\n    return \"\"\n  }\n  const d = value instanceof Date ? value : new Date(value)\n  const diff = Date.now() - d.getTime()\n  if (Number.isNaN(diff)) {\n    return \"\"\n  }\n  const sec = Math.round(diff / 1000)\n  if (sec < 60) {\n    return `${sec}s ago`\n  }\n  const min = Math.round(sec / 60)\n  if (min < 60) {\n    return `${min}m ago`\n  }\n  const hr = Math.round(min / 60)\n  if (hr < 24) {\n    return `${hr}h ago`\n  }\n  const day = Math.round(hr / 24)\n  if (day < 30) {\n    return `${day}d ago`\n  }\n  const month = Math.round(day / 30)\n  if (month < 12) {\n    return `${month}mo ago`\n  }\n  const year = Math.round(month / 12)\n  return `${year}y ago`\n}\n\nfunction currentFilter(): PullRequestsListFilter {\n  const f: PullRequestsListFilter = {}\n  if (status.value !== \"all\") {\n    f.status = status.value\n  }\n  if (query.value) {\n    f.query = query.value\n  }\n  return f\n}\n\nasync function reload(): Promise<void> {\n  const myToken = ++token\n  loading.value = true\n  error.value = null\n  try {\n    const next = await props.onLoadPullRequests(currentFilter())\n    if (myToken !== token) {\n      return\n    }\n    items.value = Array.isArray(next) ? next : []\n  } catch (err) {\n    if (myToken !== token) {\n      return\n    }\n    error.value = err instanceof Error ? err.message : String(err)\n    items.value = []\n  } finally {\n    if (myToken === token) {\n      loading.value = false\n    }\n  }\n}\n\nlet debounceTimer: ReturnType<typeof setTimeout> | null = null\nfunction scheduleReload(): void {\n  if (debounceTimer !== null) {\n    clearTimeout(debounceTimer)\n  }\n  debounceTimer = setTimeout(() => {\n    debounceTimer = null\n    void reload()\n  }, 200)\n}\n\nfunction setStatus(next: PullRequestStatus | \"all\"): void {\n  if (status.value === next) {\n    return\n  }\n  status.value = next\n  void reload()\n}\n\nfunction onQueryInput(e: Event): void {\n  const next = (e.target as HTMLInputElement).value\n  query.value = next\n  scheduleReload()\n}\n\nfunction selectRow(pr: PullRequest): void {\n  emit(\"update:selectedId\", pr.id)\n  if (props.onSelect) {\n    props.onSelect(pr)\n  }\n}\n\nfunction authorFallback(name?: string): string {\n  if (!name) {\n    return \"?\"\n  }\n  return name\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((s) => s[0]?.toUpperCase() ?? \"\")\n    .join(\"\")\n}\n\nconst selectedIdRef = computed<string | undefined>(() => props.selectedId)\n\nonMounted(() => {\n  void reload()\n})\n\nwatch(\n  () => props.defaultFilter,\n  (next) => {\n    if (!next) {\n      return\n    }\n    status.value = next.status ?? \"all\"\n    query.value = next.query ?? \"\"\n    void reload()\n  },\n  { deep: true },\n)\n\ndefineExpose({ reload })\n</script>\n\n<template>\n  <Card\n    :class=\"cn(props.classList)\"\n    :data-element-name=\"props.name ?? undefined\"\n    data-testid=\"pull-requests-list\"\n  >\n    <CardHeader class=\"flex flex-col gap-3 pb-3\">\n      <CardTitle class=\"flex items-center gap-2 text-base\">\n        <GitPullRequest class=\"size-5 text-muted-foreground\" />\n        <span>{{ props.label }}</span>\n      </CardTitle>\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <div class=\"flex flex-wrap items-center gap-1\">\n          <button\n            v-for=\"chip in STATUS_CHIPS\"\n            :key=\"chip.value\"\n            type=\"button\"\n            :class=\"\n              cn(\n                'rounded-full border px-3 py-1 text-xs font-medium transition-colors',\n                status === chip.value\n                  ? 'border-primary bg-primary text-primary-foreground'\n                  : 'border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground',\n              )\n            \"\n            :data-testid=\"`pull-requests-list-chip-${chip.value}`\"\n            :aria-pressed=\"status === chip.value\"\n            @click=\"setStatus(chip.value)\"\n          >\n            {{ chip.label }}\n          </button>\n        </div>\n        <div class=\"relative flex-1 min-w-48\">\n          <Search\n            class=\"absolute left-2 top-1/2 -translate-y-1/2 size-4 text-muted-foreground\"\n          />\n          <Input\n            :model-value=\"query\"\n            placeholder=\"Search…\"\n            class=\"pl-8\"\n            data-testid=\"pull-requests-list-search\"\n            @input=\"onQueryInput\"\n          />\n        </div>\n      </div>\n      <p\n        v-if=\"props.helpText\"\n        class=\"text-sm text-muted-foreground\"\n        data-testid=\"pull-requests-list-help\"\n      >\n        {{ props.helpText }}\n      </p>\n    </CardHeader>\n    <CardContent class=\"flex flex-col gap-1 p-2\">\n      <div\n        v-if=\"loading\"\n        class=\"flex flex-col gap-2 px-2 py-2\"\n        data-testid=\"pull-requests-list-loading\"\n      >\n        <Skeleton class=\"h-12 w-full\" />\n        <Skeleton class=\"h-12 w-full\" />\n        <Skeleton class=\"h-12 w-full\" />\n      </div>\n      <p\n        v-else-if=\"error\"\n        class=\"px-2 py-2 text-sm text-destructive\"\n        data-testid=\"pull-requests-list-error\"\n        role=\"alert\"\n      >\n        {{ error }}\n      </p>\n      <p\n        v-else-if=\"items.length === 0\"\n        class=\"px-2 py-4 text-center text-sm text-muted-foreground\"\n        data-testid=\"pull-requests-list-empty\"\n      >\n        No pull requests.\n      </p>\n      <ul\n        v-else\n        class=\"flex flex-col\"\n        role=\"list\"\n        data-testid=\"pull-requests-list-rows\"\n      >\n        <li\n          v-for=\"pr in items\"\n          :key=\"pr.id\"\n          :class=\"\n            cn(\n              'flex cursor-pointer items-center gap-3 rounded-md border border-transparent px-2 py-2 hover:bg-accent',\n              selectedIdRef === pr.id\n                ? 'border-primary bg-accent'\n                : '',\n            )\n          \"\n          :data-testid=\"`pull-requests-list-row-${pr.id}`\"\n          :aria-selected=\"selectedIdRef === pr.id\"\n          @click=\"selectRow(pr)\"\n        >\n          <component\n            :is=\"statusIcon(pr.status)\"\n            class=\"size-4 shrink-0 text-muted-foreground\"\n          />\n          <div class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n            <div class=\"flex items-center gap-2\">\n              <span class=\"truncate text-sm font-medium\">{{ pr.title }}</span>\n              <span\n                v-if=\"pr.number !== undefined\"\n                class=\"text-xs text-muted-foreground\"\n              >\n                #{{ pr.number }}\n              </span>\n              <Badge\n                :variant=\"(statusVariant(pr.status) as 'success' | 'info' | 'destructive' | 'secondary')\"\n                size=\"sm\"\n                class=\"capitalize\"\n              >\n                {{ pr.status }}\n              </Badge>\n            </div>\n            <div\n              class=\"flex flex-wrap items-center gap-2 text-xs text-muted-foreground\"\n            >\n              <span\n                v-if=\"pr.authorName\"\n                class=\"flex items-center gap-1.5\"\n              >\n                <Avatar size=\"sm\" class=\"size-5 text-[10px]\">\n                  <AvatarImage\n                    v-if=\"pr.authorAvatarUrl\"\n                    :src=\"pr.authorAvatarUrl\"\n                    :alt=\"pr.authorName\"\n                  />\n                  <AvatarFallback>{{ authorFallback(pr.authorName) }}</AvatarFallback>\n                </Avatar>\n                <span>{{ pr.authorName }}</span>\n              </span>\n              <span\n                v-if=\"pr.branchName || pr.targetBranch\"\n                class=\"flex items-center gap-1\"\n              >\n                <span v-if=\"pr.branchName\" class=\"font-mono\">{{ pr.branchName }}</span>\n                <ArrowRight v-if=\"pr.branchName && pr.targetBranch\" class=\"size-3\" />\n                <span v-if=\"pr.targetBranch\" class=\"font-mono\">{{ pr.targetBranch }}</span>\n              </span>\n              <span v-if=\"pr.updatedAt || pr.createdAt\">\n                {{ relativeTime(pr.updatedAt ?? pr.createdAt) }}\n              </span>\n            </div>\n          </div>\n          <Loader2\n            v-if=\"false\"\n            class=\"size-3 animate-spin text-muted-foreground\"\n          />\n        </li>\n      </ul>\n      <ul\n        v-if=\"props.errors.length\"\n        class=\"px-2 pt-2 text-sm text-destructive\"\n        data-testid=\"pull-requests-list-errors\"\n        role=\"alert\"\n      >\n        <li v-for=\"(err, i) in props.errors\" :key=\"i\">{{ err }}</li>\n      </ul>\n    </CardContent>\n  </Card>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven pull-request list composition. Renders a toolbar with\n * status-filter chips + a search input, then a list of PR rows. The\n * composition makes no HTTP calls — the consumer supplies a single\n * Promise-returning `onLoadPullRequests` callback that receives the\n * current filter object.\n *\n *   <PullRequestsList\n *     :on-load-pull-requests=\"(f) => fetch(`/api/prs?...`).then(r => r.json())\"\n *     v-model:selected-id=\"selectedPr\"\n *     @select=\"(pr) => router.push(pr.url)\"\n *   />\n */\nimport { computed, onMounted, ref, watch } from \"vue\"\nimport {\n  ArrowRight,\n  GitMerge,\n  GitPullRequest,\n  GitPullRequestDraft,\n  Loader2,\n  Search,\n  XCircle,\n} from \"@lucide/vue\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport { cn } from \"@/lib/utils\"\n\nexport type PullRequestStatus =\n  | \"open\"\n  | \"closed\"\n  | \"merged\"\n  | \"draft\"\n\nexport interface PullRequest {\n  id: string\n  number?: number\n  title: string\n  authorName?: string\n  authorAvatarUrl?: string\n  status: PullRequestStatus\n  createdAt?: string | Date\n  updatedAt?: string | Date\n  branchName?: string\n  targetBranch?: string\n  url?: string\n}\n\nexport interface PullRequestsListFilter {\n  status?: PullRequestStatus\n  query?: string\n}\n\nexport interface PullRequestsListProps {\n  /** REQUIRED loader, invoked on mount and whenever the filter changes. */\n  onLoadPullRequests: (\n    filter?: PullRequestsListFilter,\n  ) => Promise<PullRequest[]>\n  /** Initial filter applied on mount. */\n  defaultFilter?: PullRequestsListFilter\n  /** Currently selected PR id (v-modelable as `selectedId`). */\n  selectedId?: string\n  /** Fired when a PR row is clicked. */\n  onSelect?: (pr: PullRequest) => void\n  label?: string\n  name?: string | null\n  helpText?: string\n  errors?: string[]\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<PullRequestsListProps>(), {\n  errors: () => [],\n  label: \"Pull Requests\",\n})\n\nconst emit = defineEmits<{\n  \"update:selectedId\": [value: string]\n}>()\n\nconst status = ref<PullRequestStatus | \"all\">(\n  props.defaultFilter?.status ?? \"all\",\n)\nconst query = ref<string>(props.defaultFilter?.query ?? \"\")\n\nconst items = ref<PullRequest[]>([])\nconst loading = ref<boolean>(false)\nconst error = ref<string | null>(null)\nlet token = 0\n\nconst STATUS_CHIPS: { value: PullRequestStatus | \"all\"; label: string }[] = [\n  { value: \"all\", label: \"All\" },\n  { value: \"open\", label: \"Open\" },\n  { value: \"draft\", label: \"Draft\" },\n  { value: \"merged\", label: \"Merged\" },\n  { value: \"closed\", label: \"Closed\" },\n]\n\nfunction statusVariant(s: PullRequestStatus): string {\n  switch (s) {\n    case \"open\":\n      return \"success\"\n    case \"merged\":\n      return \"info\"\n    case \"closed\":\n      return \"destructive\"\n    case \"draft\":\n    default:\n      return \"secondary\"\n  }\n}\n\nfunction statusIcon(s: PullRequestStatus) {\n  if (s === \"merged\") {\n    return GitMerge\n  }\n  if (s === \"closed\") {\n    return XCircle\n  }\n  if (s === \"draft\") {\n    return GitPullRequestDraft\n  }\n  return GitPullRequest\n}\n\nfunction relativeTime(value: string | Date | undefined): string {\n  if (!value) {\n    return \"\"\n  }\n  const d = value instanceof Date ? value : new Date(value)\n  const diff = Date.now() - d.getTime()\n  if (Number.isNaN(diff)) {\n    return \"\"\n  }\n  const sec = Math.round(diff / 1000)\n  if (sec < 60) {\n    return `${sec}s ago`\n  }\n  const min = Math.round(sec / 60)\n  if (min < 60) {\n    return `${min}m ago`\n  }\n  const hr = Math.round(min / 60)\n  if (hr < 24) {\n    return `${hr}h ago`\n  }\n  const day = Math.round(hr / 24)\n  if (day < 30) {\n    return `${day}d ago`\n  }\n  const month = Math.round(day / 30)\n  if (month < 12) {\n    return `${month}mo ago`\n  }\n  const year = Math.round(month / 12)\n  return `${year}y ago`\n}\n\nfunction currentFilter(): PullRequestsListFilter {\n  const f: PullRequestsListFilter = {}\n  if (status.value !== \"all\") {\n    f.status = status.value\n  }\n  if (query.value) {\n    f.query = query.value\n  }\n  return f\n}\n\nasync function reload(): Promise<void> {\n  const myToken = ++token\n  loading.value = true\n  error.value = null\n  try {\n    const next = await props.onLoadPullRequests(currentFilter())\n    if (myToken !== token) {\n      return\n    }\n    items.value = Array.isArray(next) ? next : []\n  } catch (err) {\n    if (myToken !== token) {\n      return\n    }\n    error.value = err instanceof Error ? err.message : String(err)\n    items.value = []\n  } finally {\n    if (myToken === token) {\n      loading.value = false\n    }\n  }\n}\n\nlet debounceTimer: ReturnType<typeof setTimeout> | null = null\nfunction scheduleReload(): void {\n  if (debounceTimer !== null) {\n    clearTimeout(debounceTimer)\n  }\n  debounceTimer = setTimeout(() => {\n    debounceTimer = null\n    void reload()\n  }, 200)\n}\n\nfunction setStatus(next: PullRequestStatus | \"all\"): void {\n  if (status.value === next) {\n    return\n  }\n  status.value = next\n  void reload()\n}\n\nfunction onQueryInput(e: Event): void {\n  const next = (e.target as HTMLInputElement).value\n  query.value = next\n  scheduleReload()\n}\n\nfunction selectRow(pr: PullRequest): void {\n  emit(\"update:selectedId\", pr.id)\n  if (props.onSelect) {\n    props.onSelect(pr)\n  }\n}\n\nfunction authorFallback(name?: string): string {\n  if (!name) {\n    return \"?\"\n  }\n  return name\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((s) => s[0]?.toUpperCase() ?? \"\")\n    .join(\"\")\n}\n\nconst selectedIdRef = computed<string | undefined>(() => props.selectedId)\n\nonMounted(() => {\n  void reload()\n})\n\nwatch(\n  () => props.defaultFilter,\n  (next) => {\n    if (!next) {\n      return\n    }\n    status.value = next.status ?? \"all\"\n    query.value = next.query ?? \"\"\n    void reload()\n  },\n  { deep: true },\n)\n\ndefineExpose({ reload })\n</script>\n\n<template>\n  <Card\n    :class=\"cn(props.classList)\"\n    :data-element-name=\"props.name ?? undefined\"\n    data-testid=\"pull-requests-list\"\n  >\n    <CardHeader class=\"flex flex-col gap-3 pb-3\">\n      <CardTitle class=\"flex items-center gap-2 text-base\">\n        <GitPullRequest class=\"size-5 text-muted-foreground\" />\n        <span>{{ props.label }}</span>\n      </CardTitle>\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <div class=\"flex flex-wrap items-center gap-1\">\n          <button\n            v-for=\"chip in STATUS_CHIPS\"\n            :key=\"chip.value\"\n            type=\"button\"\n            :class=\"\n              cn(\n                'rounded-full border px-3 py-1 text-xs font-medium transition-colors',\n                status === chip.value\n                  ? 'border-primary bg-primary text-primary-foreground'\n                  : 'border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground',\n              )\n            \"\n            :data-testid=\"`pull-requests-list-chip-${chip.value}`\"\n            :aria-pressed=\"status === chip.value\"\n            @click=\"setStatus(chip.value)\"\n          >\n            {{ chip.label }}\n          </button>\n        </div>\n        <div class=\"relative flex-1 min-w-48\">\n          <Search\n            class=\"absolute left-2 top-1/2 -translate-y-1/2 size-4 text-muted-foreground\"\n          />\n          <Input\n            :model-value=\"query\"\n            placeholder=\"Search…\"\n            class=\"pl-8\"\n            data-testid=\"pull-requests-list-search\"\n            @input=\"onQueryInput\"\n          />\n        </div>\n      </div>\n      <p\n        v-if=\"props.helpText\"\n        class=\"text-sm text-muted-foreground\"\n        data-testid=\"pull-requests-list-help\"\n      >\n        {{ props.helpText }}\n      </p>\n    </CardHeader>\n    <CardContent class=\"flex flex-col gap-1 p-2\">\n      <div\n        v-if=\"loading\"\n        class=\"flex flex-col gap-2 px-2 py-2\"\n        data-testid=\"pull-requests-list-loading\"\n      >\n        <Skeleton class=\"h-12 w-full\" />\n        <Skeleton class=\"h-12 w-full\" />\n        <Skeleton class=\"h-12 w-full\" />\n      </div>\n      <p\n        v-else-if=\"error\"\n        class=\"px-2 py-2 text-sm text-destructive\"\n        data-testid=\"pull-requests-list-error\"\n        role=\"alert\"\n      >\n        {{ error }}\n      </p>\n      <p\n        v-else-if=\"items.length === 0\"\n        class=\"px-2 py-4 text-center text-sm text-muted-foreground\"\n        data-testid=\"pull-requests-list-empty\"\n      >\n        No pull requests.\n      </p>\n      <ul\n        v-else\n        class=\"flex flex-col\"\n        role=\"list\"\n        data-testid=\"pull-requests-list-rows\"\n      >\n        <li\n          v-for=\"pr in items\"\n          :key=\"pr.id\"\n          :class=\"\n            cn(\n              'flex cursor-pointer items-center gap-3 rounded-md border border-transparent px-2 py-2 hover:bg-accent',\n              selectedIdRef === pr.id\n                ? 'border-primary bg-accent'\n                : '',\n            )\n          \"\n          :data-testid=\"`pull-requests-list-row-${pr.id}`\"\n          :aria-selected=\"selectedIdRef === pr.id\"\n          @click=\"selectRow(pr)\"\n        >\n          <component\n            :is=\"statusIcon(pr.status)\"\n            class=\"size-4 shrink-0 text-muted-foreground\"\n          />\n          <div class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n            <div class=\"flex items-center gap-2\">\n              <span class=\"truncate text-sm font-medium\">{{ pr.title }}</span>\n              <span\n                v-if=\"pr.number !== undefined\"\n                class=\"text-xs text-muted-foreground\"\n              >\n                #{{ pr.number }}\n              </span>\n              <Badge\n                :variant=\"(statusVariant(pr.status) as 'success' | 'info' | 'destructive' | 'secondary')\"\n                size=\"sm\"\n                class=\"capitalize\"\n              >\n                {{ pr.status }}\n              </Badge>\n            </div>\n            <div\n              class=\"flex flex-wrap items-center gap-2 text-xs text-muted-foreground\"\n            >\n              <span\n                v-if=\"pr.authorName\"\n                class=\"flex items-center gap-1.5\"\n              >\n                <Avatar size=\"sm\" class=\"size-5 text-[10px]\">\n                  <AvatarImage\n                    v-if=\"pr.authorAvatarUrl\"\n                    :src=\"pr.authorAvatarUrl\"\n                    :alt=\"pr.authorName\"\n                  />\n                  <AvatarFallback>{{ authorFallback(pr.authorName) }}</AvatarFallback>\n                </Avatar>\n                <span>{{ pr.authorName }}</span>\n              </span>\n              <span\n                v-if=\"pr.branchName || pr.targetBranch\"\n                class=\"flex items-center gap-1\"\n              >\n                <span v-if=\"pr.branchName\" class=\"font-mono\">{{ pr.branchName }}</span>\n                <ArrowRight v-if=\"pr.branchName && pr.targetBranch\" class=\"size-3\" />\n                <span v-if=\"pr.targetBranch\" class=\"font-mono\">{{ pr.targetBranch }}</span>\n              </span>\n              <span v-if=\"pr.updatedAt || pr.createdAt\">\n                {{ relativeTime(pr.updatedAt ?? pr.createdAt) }}\n              </span>\n            </div>\n          </div>\n          <Loader2\n            v-if=\"false\"\n            class=\"size-3 animate-spin text-muted-foreground\"\n          />\n        </li>\n      </ul>\n      <ul\n        v-if=\"props.errors.length\"\n        class=\"px-2 pt-2 text-sm text-destructive\"\n        data-testid=\"pull-requests-list-errors\"\n        role=\"alert\"\n      >\n        <li v-for=\"(err, i) in props.errors\" :key=\"i\">{{ err }}</li>\n      </ul>\n    </CardContent>\n  </Card>\n</template>\n"],"mappings":"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"}

package/dist/chunks/QrCodeDisplay-xmSCGxgu.js

@@ -0,0 +1,47 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, onMounted as s, openBlock as c, ref as l, toDisplayString as u, useTemplateRef as d, watch as f } from "vue";
+//#region src/components/compositions/elements/display/QrCodeDisplay.vue?vue&type=script&setup=true&lang.ts
+var p = ["aria-label"], m = {
+	key: 0,
+	class: "mt-1 text-xs text-destructive",
+	"data-testid": "qrcode-error"
+}, h = /* @__PURE__ */ a({
+	__name: "QrCodeDisplay",
+	props: {
+		value: {},
+		classList: {}
+	},
+	setup(e) {
+		let a = typeof document < "u" && !(typeof navigator < "u" && /jsdom/i.test(navigator.userAgent)), h = e, g = t(() => h.value === void 0 || h.value === null ? "" : String(h.value)), _ = t(() => {
+			let e = h.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		}), v = d("canvasRef"), y = l("");
+		async function b() {
+			if (!(!a || !v.value || !g.value)) try {
+				await (await import("qrcode")).default.toCanvas(v.value, g.value, {
+					margin: 1,
+					width: 160
+				}), y.value = "";
+			} catch (e) {
+				y.value = e instanceof Error ? e.message : "Failed to render QR code";
+			}
+		}
+		return s(() => {
+			b();
+		}), f(g, () => {
+			b();
+		}), (e, t) => (c(), r("div", {
+			class: o(["inline-block", _.value]),
+			"data-testid": "qrcode-display"
+		}, [i("canvas", {
+			ref_key: "canvasRef",
+			ref: v,
+			"aria-label": `QR code: ${g.value}`,
+			role: "img"
+		}, null, 8, p), y.value ? (c(), r("p", m, u(y.value), 1)) : n("", !0)], 2));
+	}
+}), g = /* @__PURE__ */ e({ default: () => _ }), _ = h;
+//#endregion
+export { g as n, _ as t };
+
+//# sourceMappingURL=QrCodeDisplay-xmSCGxgu.js.map

package/dist/chunks/QrCodeDisplay-xmSCGxgu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QrCodeDisplay-xmSCGxgu.js","names":[],"sources":["../../src/components/compositions/elements/display/QrCodeDisplay.vue","../../src/components/compositions/elements/display/QrCodeDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven QR code display.\n *\n * Generates a QR code into a `<canvas>` via the `qrcode` library,\n * lazy-imported on mount.\n *\n * When the host environment can't paint to a canvas (jsdom, SSR, or\n * hardened browsers), `renderQr` short-circuits — keeping consumer\n * tests in jsdom-based environments quiet and crash-free.\n */\nimport { computed, onMounted, ref, useTemplateRef, watch } from \"vue\"\n\n// True only in real browsers — skipping the canvas detection call avoids\n// jsdom's \"Not implemented: getContext()\" warning. See ChartDisplay.vue\n// for the longer rationale.\nconst CANVAS_SUPPORTED: boolean =\n  typeof document !== \"undefined\" &&\n  !(typeof navigator !== \"undefined\" && /jsdom/i.test(navigator.userAgent))\n\nexport interface QrCodeDisplayProps {\n  value?: string | number | null\n  classList?: string[] | string\n}\n\nconst props = defineProps<QrCodeDisplayProps>()\n\nconst content = computed<string>(() => {\n  if (props.value === undefined || props.value === null) {\n    return \"\"\n  }\n  return String(props.value)\n})\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n\nconst canvasRef = useTemplateRef<HTMLCanvasElement>(\"canvasRef\")\nconst error = ref<string>(\"\")\n\nasync function renderQr(): Promise<void> {\n  if (!CANVAS_SUPPORTED || !canvasRef.value || !content.value) {\n    return\n  }\n  try {\n    const mod = await import(\"qrcode\")\n    const QRCode = (mod as unknown as { default: { toCanvas: (canvas: HTMLCanvasElement, text: string, opts?: Record<string, unknown>) => Promise<void> } }).default\n    await QRCode.toCanvas(canvasRef.value, content.value, {\n      margin: 1,\n      width: 160,\n    })\n    error.value = \"\"\n  } catch (e) {\n    error.value = e instanceof Error ? e.message : \"Failed to render QR code\"\n  }\n}\n\nonMounted(() => {\n  void renderQr()\n})\n\nwatch(content, () => {\n  void renderQr()\n})\n</script>\n\n<template>\n  <div\n    class=\"inline-block\"\n    :class=\"rootClass\"\n    data-testid=\"qrcode-display\"\n  >\n    <canvas\n      ref=\"canvasRef\"\n      :aria-label=\"`QR code: ${content}`\"\n      role=\"img\"\n    />\n    <p\n      v-if=\"error\"\n      class=\"mt-1 text-xs text-destructive\"\n      data-testid=\"qrcode-error\"\n    >\n      {{ error }}\n    </p>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven QR code display.\n *\n * Generates a QR code into a `<canvas>` via the `qrcode` library,\n * lazy-imported on mount.\n *\n * When the host environment can't paint to a canvas (jsdom, SSR, or\n * hardened browsers), `renderQr` short-circuits — keeping consumer\n * tests in jsdom-based environments quiet and crash-free.\n */\nimport { computed, onMounted, ref, useTemplateRef, watch } from \"vue\"\n\n// True only in real browsers — skipping the canvas detection call avoids\n// jsdom's \"Not implemented: getContext()\" warning. See ChartDisplay.vue\n// for the longer rationale.\nconst CANVAS_SUPPORTED: boolean =\n  typeof document !== \"undefined\" &&\n  !(typeof navigator !== \"undefined\" && /jsdom/i.test(navigator.userAgent))\n\nexport interface QrCodeDisplayProps {\n  value?: string | number | null\n  classList?: string[] | string\n}\n\nconst props = defineProps<QrCodeDisplayProps>()\n\nconst content = computed<string>(() => {\n  if (props.value === undefined || props.value === null) {\n    return \"\"\n  }\n  return String(props.value)\n})\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n\nconst canvasRef = useTemplateRef<HTMLCanvasElement>(\"canvasRef\")\nconst error = ref<string>(\"\")\n\nasync function renderQr(): Promise<void> {\n  if (!CANVAS_SUPPORTED || !canvasRef.value || !content.value) {\n    return\n  }\n  try {\n    const mod = await import(\"qrcode\")\n    const QRCode = (mod as unknown as { default: { toCanvas: (canvas: HTMLCanvasElement, text: string, opts?: Record<string, unknown>) => Promise<void> } }).default\n    await QRCode.toCanvas(canvasRef.value, content.value, {\n      margin: 1,\n      width: 160,\n    })\n    error.value = \"\"\n  } catch (e) {\n    error.value = e instanceof Error ? e.message : \"Failed to render QR code\"\n  }\n}\n\nonMounted(() => {\n  void renderQr()\n})\n\nwatch(content, () => {\n  void renderQr()\n})\n</script>\n\n<template>\n  <div\n    class=\"inline-block\"\n    :class=\"rootClass\"\n    data-testid=\"qrcode-display\"\n  >\n    <canvas\n      ref=\"canvasRef\"\n      :aria-label=\"`QR code: ${content}`\"\n      role=\"img\"\n    />\n    <p\n      v-if=\"error\"\n      class=\"mt-1 text-xs text-destructive\"\n      data-testid=\"qrcode-error\"\n    >\n      {{ error }}\n    </p>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAgBA,IAAM,IACJ,OAAO,WAAa,OACpB,EAAE,OAAO,YAAc,OAAe,SAAS,KAAK,UAAU,SAAS,IAOnE,IAAQ,GAER,IAAU,QACV,EAAM,UAAU,KAAA,KAAa,EAAM,UAAU,OACxC,KAEF,OAAO,EAAM,KAAK,CAC1B,GAEK,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC,GAEK,IAAY,EAAkC,WAAW,GACzD,IAAQ,EAAY,EAAE;EAE5B,eAAe,IAA0B;GACnC,OAAC,KAAoB,CAAC,EAAU,SAAS,CAAC,EAAQ,QAGtD,IAAI;IAOF,AAJA,OADgB,MADE,OAAO,WACgI,QAC5I,SAAS,EAAU,OAAO,EAAQ,OAAO;KACpD,QAAQ;KACR,OAAO;IACT,CAAC,GACD,EAAM,QAAQ;GAChB,SAAS,GAAG;IACV,EAAM,QAAQ,aAAa,QAAQ,EAAE,UAAU;GACjD;EACF;SAEA,QAAgB;GACd,EAAc;EAChB,CAAC,GAED,EAAM,SAAe;GACnB,EAAc;EAChB,CAAC,mBAIC,EAiBM,OAAA;GAhBJ,OAAK,EAAA,CAAC,gBACE,EAAA,KAAS,CAAA;GACjB,eAAY;MAEZ,EAIE,UAAA;YAHI;GAAJ,KAAI;GACH,cAAU,YAAc,EAAA;GACzB,MAAK;kBAGC,EAAA,SAAA,EAAA,GADR,EAMI,KANJ,GAMI,EADC,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,CAAA"}