@gxp-dev/mod-ui 2.0.10 → 2.0.12

package/dist/pages/ShowPage.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,155 @@
+import e from "../components/ui/button/Button.js";
+import "../components/ui/button/index.js";
+import t from "../components/ui/tabs/Tabs.js";
+import n from "../components/ui/tabs/TabsContent.js";
+import r from "../components/ui/tabs/TabsList.js";
+import i from "../components/ui/tabs/TabsTrigger.js";
+import "../components/ui/tabs/index.js";
+import { provideFormId as a } from "../engine/useFormData.js";
+import o from "../engine/CardRenderer.js";
+import { normalisePageConfig as s } from "../adapters/detect.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, openBlock as _, provide as v, renderList as y, toDisplayString as b, unref as x, withCtx as S } from "vue";
+//#region src/pages/ShowPage.vue?vue&type=script&setup=true&lang.ts
+var C = {
+	class: "gxp-show-page flex flex-col gap-4",
+	"data-testid": "show-page"
+}, w = {
+	class: "flex flex-col gap-2",
+	"data-testid": "show-page-header"
+}, T = {
+	key: 0,
+	"aria-label": "Breadcrumb",
+	class: "text-sm text-muted-foreground",
+	"data-testid": "show-page-breadcrumbs"
+}, E = { class: "flex flex-wrap items-center gap-1" }, D = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "opacity-60"
+}, O = { class: "flex flex-col gap-0.5" }, k = {
+	key: 0,
+	class: "text-xs font-medium uppercase tracking-wide text-muted-foreground",
+	"data-testid": "show-page-section"
+}, A = {
+	class: "text-2xl font-semibold tracking-tight",
+	"data-testid": "show-page-title"
+}, j = {
+	class: "gxp-show-page__body",
+	"data-testid": "show-page-body"
+}, M = {
+	key: 1,
+	class: "flex flex-col gap-4",
+	"data-testid": "show-page-flat-cards"
+}, N = {
+	key: 0,
+	class: "flex items-center justify-end gap-2 border-t pt-4",
+	"data-testid": "show-page-actions"
+}, P = Symbol("gx-modui:pageEventHandlers"), F = /* @__PURE__ */ g({
+	__name: "ShowPage",
+	props: {
+		config: {},
+		item: { default: () => ({}) },
+		formId: { default: "show-page-default" }
+	},
+	emits: [
+		"save",
+		"delete",
+		"tab-change"
+	],
+	setup(g, { emit: F }) {
+		let I = g, L = l(() => s(I.config)), R = F;
+		a(I.formId), v(P, l(() => L.value.eventHandlers ?? {}).value);
+		let z = l(() => L.value.breadCrumbs ?? []), B = l(() => L.value.tabsList ?? []), V = l(() => L.value.cards ? Object.values(L.value.cards) : []), H = l(() => B.value.length > 0), U = l(() => B.value[0]?.tabId), W = l(() => {
+			let e = L.value.updateConfig;
+			return e ? e.showSaveButton !== !1 : !1;
+		}), G = l(() => !!L.value.deleteConfig), K = l(() => L.value.elements ?? {}), q = l(() => L.value.cards ?? {});
+		function J() {
+			let e = L.value.eventHandlers?.save;
+			typeof e == "function" && e(), R("save");
+		}
+		function Y() {
+			let e = L.value.eventHandlers?.delete;
+			typeof e == "function" && e(), R("delete");
+		}
+		function X(e) {
+			let t = String(e), n = L.value.eventHandlers?.["tab-change"];
+			typeof n == "function" && n(t), R("tab-change", t);
+		}
+		return (a, s) => (_(), f("div", C, [
+			p("header", w, [z.value.length ? (_(), f("nav", T, [p("ol", E, [(_(!0), f(c, null, y(z.value, (e, t) => (_(), f("li", {
+				key: `${e.title}-${t}`,
+				class: "flex items-center gap-1"
+			}, [p("span", null, b(e.title), 1), t < z.value.length - 1 ? (_(), f("span", D, " / ")) : d("", !0)]))), 128))])])) : d("", !0), p("div", O, [L.value.section ? (_(), f("p", k, b(L.value.section), 1)) : d("", !0), p("h1", A, b(L.value.title), 1)])]),
+			p("section", j, [H.value && U.value ? (_(), u(x(t), {
+				key: 0,
+				"default-value": U.value,
+				class: "flex flex-col gap-4",
+				"data-testid": "show-page-tabs",
+				"onUpdate:modelValue": X
+			}, {
+				default: S(() => [h(x(r), { variant: "underline" }, {
+					default: S(() => [(_(!0), f(c, null, y(B.value, (e) => (_(), u(x(i), {
+						key: e.tabId,
+						variant: "underline",
+						value: e.tabId,
+						"data-testid": `show-page-tab-${e.tabId}`
+					}, {
+						default: S(() => [m(b(e.title), 1)]),
+						_: 2
+					}, 1032, ["value", "data-testid"]))), 128))]),
+					_: 1
+				}), (_(!0), f(c, null, y(B.value, (e) => (_(), u(x(n), {
+					key: e.tabId,
+					value: e.tabId,
+					class: "flex flex-col gap-4",
+					"data-testid": `show-page-tab-content-${e.tabId}`
+				}, {
+					default: S(() => [(_(!0), f(c, null, y(e.cards, (e) => (_(), u(o, {
+						key: e.id,
+						card: e,
+						item: g.item,
+						elements: K.value,
+						cards: q.value
+					}, null, 8, [
+						"card",
+						"item",
+						"elements",
+						"cards"
+					]))), 128))]),
+					_: 2
+				}, 1032, ["value", "data-testid"]))), 128))]),
+				_: 1
+			}, 8, ["default-value"])) : (_(), f("div", M, [(_(!0), f(c, null, y(V.value, (e) => (_(), u(o, {
+				key: e.id,
+				card: e,
+				item: g.item,
+				elements: K.value,
+				cards: q.value
+			}, null, 8, [
+				"card",
+				"item",
+				"elements",
+				"cards"
+			]))), 128))]))]),
+			W.value || G.value ? (_(), f("footer", N, [G.value ? (_(), u(x(e), {
+				key: 0,
+				variant: "destructive",
+				"data-testid": "show-page-delete-button",
+				onClick: Y
+			}, {
+				default: S(() => [...s[0] ||= [m(" Delete ", -1)]]),
+				_: 1
+			})) : d("", !0), W.value ? (_(), u(x(e), {
+				key: 1,
+				"data-testid": "show-page-save-button",
+				onClick: J
+			}, {
+				default: S(() => [...s[1] ||= [m(" Save ", -1)]]),
+				_: 1
+			})) : d("", !0)])) : d("", !0)
+		]));
+	}
+});
+//#endregion
+export { P as PAGE_EVENT_HANDLERS_KEY, F as default };
+
+//# sourceMappingURL=ShowPage.vue_vue_type_script_setup_true_lang.js.map

package/dist/pages/ShowPage.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowPage.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/pages/ShowPage.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Public runtime exports for ShowPage. These live in a non-setup\n * `<script>` block because `<script setup>` disallows ES module\n * value exports — the InjectionKey symbol is a runtime value.\n */\nimport type { InjectionKey } from \"vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport type { DisplayCard } from \"@/definitions/cards\"\nimport type {\n  CreateConfig,\n  DeleteConfig,\n  UpdateConfig,\n} from \"@/definitions/shared/crud\"\n\n/**\n * Inject key used by elements / cards rendered under a ShowPage or\n * IndexPage to read the page-level eventHandlers map.\n */\nexport const PAGE_EVENT_HANDLERS_KEY = Symbol(\n  \"gx-modui:pageEventHandlers\",\n) as InjectionKey<Record<string, (...args: unknown[]) => void>>\n\nexport interface BreadCrumb {\n  title: string\n}\n\nexport interface TabConfig {\n  title: string\n  tabId: string\n  cards: DisplayCard[]\n  nextTab?: { id: string; text: string }\n}\n\nexport interface ShowPageConfig {\n  title: string\n  breadCrumbs?: BreadCrumb[]\n  section?: string\n  tabsList?: TabConfig[]\n  cards?: Record<string, DisplayCard>\n  elements?: Record<string, CardElement>\n  updateConfig?: UpdateConfig\n  createConfig?: CreateConfig\n  deleteConfig?: DeleteConfig\n  eventHandlers?: Record<string, (...args: unknown[]) => void>\n}\n\nexport interface ShowPageProps {\n  config: ShowPageConfig\n  /**\n   * The data model rendered by the page. Each card / element receives\n   * this as `item`.\n   */\n  item?: Record<string, unknown>\n  /**\n   * Override the form-data store ID. Defaults to `show-page-default`.\n   */\n  formId?: string\n}\n</script>\n\n<script setup lang=\"ts\">\n/**\n * ShowPage — top-level templating consumer for detail / edit views.\n *\n * Renders:\n *   - page header (title, breadcrumbs, section)\n *   - either a tab list (when `config.tabsList` is provided) where each\n *     tab is a stack of CardRenderer instances, OR a flat stack of\n *     CardRenderer when only `config.cards` is provided\n *   - an optional save / delete action bar at the bottom when an\n *     `updateConfig` / `deleteConfig` is set\n *\n * Calls `provideFormId('show-page-default')` at the root so every\n * input element nested below binds to the same form-data store entry.\n *\n * Like IndexPage, exposes `config.eventHandlers` via provide/inject\n * under `PAGE_EVENT_HANDLERS_KEY` so deep descendants can `inject` and\n * emit named page-level events.\n */\nimport { computed, provide } from \"vue\"\nimport CardRenderer from \"@/engine/CardRenderer.vue\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/components/ui/tabs\"\nimport { provideFormId } from \"@/engine/useFormData\"\nimport { normalisePageConfig } from \"@/adapters/detect\"\n\nconst props = withDefaults(defineProps<ShowPageProps>(), {\n  item: () => ({}),\n  formId: \"show-page-default\",\n})\n\n/**\n * Normalised v2-shape config. Detects v1 JSON at the boundary and\n * runs it through `v1ToV2` so consumers can pass either shape.\n */\nconst normalisedConfig = computed<ShowPageConfig>(\n  () =>\n    normalisePageConfig(\n      props.config as unknown as Parameters<typeof normalisePageConfig>[0],\n    ) as unknown as ShowPageConfig,\n)\n\nconst emit = defineEmits<{\n  (e: \"save\"): void\n  (e: \"delete\"): void\n  (e: \"tab-change\", tabId: string): void\n}>()\n\nprovideFormId(props.formId)\nprovide(\n  PAGE_EVENT_HANDLERS_KEY,\n  computed(() => normalisedConfig.value.eventHandlers ?? {}).value,\n)\n\nconst breadCrumbs = computed<BreadCrumb[]>(\n  () => normalisedConfig.value.breadCrumbs ?? [],\n)\n\nconst tabsList = computed<TabConfig[]>(() => normalisedConfig.value.tabsList ?? [])\n\nconst flatCards = computed<DisplayCard[]>(() => {\n  if (!normalisedConfig.value.cards) {\n    return []\n  }\n  return Object.values(normalisedConfig.value.cards)\n})\n\nconst showTabs = computed<boolean>(() => tabsList.value.length > 0)\n\nconst defaultTab = computed<string | undefined>(() => tabsList.value[0]?.tabId)\n\nconst showSaveButton = computed<boolean>(() => {\n  const u = normalisedConfig.value.updateConfig\n  if (!u) {\n    return false\n  }\n  return u.showSaveButton !== false\n})\n\nconst showDeleteButton = computed<boolean>(() => Boolean(normalisedConfig.value.deleteConfig))\n\nconst elementsMap = computed<Record<string, CardElement>>(\n  () => normalisedConfig.value.elements ?? {},\n)\n\nconst cardsMap = computed<Record<string, DisplayCard>>(\n  () => normalisedConfig.value.cards ?? {},\n)\n\nfunction onSave(): void {\n  const handler = normalisedConfig.value.eventHandlers?.save\n  if (typeof handler === \"function\") {\n    handler()\n  }\n  emit(\"save\")\n}\n\nfunction onDelete(): void {\n  const handler = normalisedConfig.value.eventHandlers?.delete\n  if (typeof handler === \"function\") {\n    handler()\n  }\n  emit(\"delete\")\n}\n\nfunction onTabChange(value: string | number): void {\n  const id = String(value)\n  const handler = normalisedConfig.value.eventHandlers?.[\"tab-change\"]\n  if (typeof handler === \"function\") {\n    handler(id)\n  }\n  emit(\"tab-change\", id)\n}\n</script>\n\n<template>\n  <div class=\"gxp-show-page flex flex-col gap-4\" data-testid=\"show-page\">\n    <header class=\"flex flex-col gap-2\" data-testid=\"show-page-header\">\n      <nav\n        v-if=\"breadCrumbs.length\"\n        aria-label=\"Breadcrumb\"\n        class=\"text-sm text-muted-foreground\"\n        data-testid=\"show-page-breadcrumbs\"\n      >\n        <ol class=\"flex flex-wrap items-center gap-1\">\n          <li\n            v-for=\"(crumb, index) in breadCrumbs\"\n            :key=\"`${crumb.title}-${index}`\"\n            class=\"flex items-center gap-1\"\n          >\n            <span>{{ crumb.title }}</span>\n            <span\n              v-if=\"index < breadCrumbs.length - 1\"\n              aria-hidden=\"true\"\n              class=\"opacity-60\"\n            >\n              /\n            </span>\n          </li>\n        </ol>\n      </nav>\n      <div class=\"flex flex-col gap-0.5\">\n        <p\n          v-if=\"normalisedConfig.section\"\n          class=\"text-xs font-medium uppercase tracking-wide text-muted-foreground\"\n          data-testid=\"show-page-section\"\n        >\n          {{ normalisedConfig.section }}\n        </p>\n        <h1\n          class=\"text-2xl font-semibold tracking-tight\"\n          data-testid=\"show-page-title\"\n        >\n          {{ normalisedConfig.title }}\n        </h1>\n      </div>\n    </header>\n\n    <section class=\"gxp-show-page__body\" data-testid=\"show-page-body\">\n      <Tabs\n        v-if=\"showTabs && defaultTab\"\n        :default-value=\"defaultTab\"\n        class=\"flex flex-col gap-4\"\n        data-testid=\"show-page-tabs\"\n        @update:model-value=\"onTabChange\"\n      >\n        <TabsList variant=\"underline\">\n          <TabsTrigger\n            v-for=\"tab in tabsList\"\n            :key=\"tab.tabId\"\n            variant=\"underline\"\n            :value=\"tab.tabId\"\n            :data-testid=\"`show-page-tab-${tab.tabId}`\"\n          >\n            {{ tab.title }}\n          </TabsTrigger>\n        </TabsList>\n        <TabsContent\n          v-for=\"tab in tabsList\"\n          :key=\"tab.tabId\"\n          :value=\"tab.tabId\"\n          class=\"flex flex-col gap-4\"\n          :data-testid=\"`show-page-tab-content-${tab.tabId}`\"\n        >\n          <CardRenderer\n            v-for=\"card in tab.cards\"\n            :key=\"card.id\"\n            :card=\"card\"\n            :item=\"item\"\n            :elements=\"elementsMap\"\n            :cards=\"cardsMap\"\n          />\n        </TabsContent>\n      </Tabs>\n\n      <div\n        v-else\n        class=\"flex flex-col gap-4\"\n        data-testid=\"show-page-flat-cards\"\n      >\n        <CardRenderer\n          v-for=\"card in flatCards\"\n          :key=\"card.id\"\n          :card=\"card\"\n          :item=\"item\"\n          :elements=\"elementsMap\"\n          :cards=\"cardsMap\"\n        />\n      </div>\n    </section>\n\n    <footer\n      v-if=\"showSaveButton || showDeleteButton\"\n      class=\"flex items-center justify-end gap-2 border-t pt-4\"\n      data-testid=\"show-page-actions\"\n    >\n      <Button\n        v-if=\"showDeleteButton\"\n        variant=\"destructive\"\n        data-testid=\"show-page-delete-button\"\n        @click=\"onDelete\"\n      >\n        Delete\n      </Button>\n      <Button\n        v-if=\"showSaveButton\"\n        data-testid=\"show-page-save-button\"\n        @click=\"onSave\"\n      >\n        Save\n      </Button>\n    </footer>\n  </div>\n</template>\n"],"mappings":"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"}