import { n as __exportAll } from "./chunk-B-1-B7_t.js";
import { t as ElementRenderer_default } from "./ElementRenderer-DV1pZRd4.js";
import { t as CardRenderer_default } from "./CardRenderer-BVyy_sI2.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString } from "vue";
//#region src/components/compositions/cards/GridViewCard.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = {
	key: 0,
	class: "mb-3 flex flex-col gap-0.5"
};
var _hoisted_2 = {
	key: 0,
	class: "text-base font-semibold"
};
var _hoisted_3 = {
	key: 1,
	class: "text-sm text-muted-foreground"
};
var _hoisted_4 = ["data-grid-item-id"];
var _hoisted_5 = {
	key: 2,
	class: "text-sm text-muted-foreground italic",
	"data-testid": "grid-view-empty"
};
var GridViewCard_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "GridViewCard",
	props: {
		title: {},
		subtitle: {},
		showCard: {
			type: Boolean,
			default: true
		},
		gridLayout: {},
		rowHeight: { default: 150 },
		margin: { default: () => [10, 10] },
		containerPadding: { default: () => [10, 10] },
		cols: {},
		cards: { default: () => [] },
		gridElements: { default: () => [] },
		item: { default: () => ({}) }
	},
	setup(__props) {
		/**
		* Props-driven `grid-view` composition — a responsive CSS-grid layout
		* driven by `gridLayout`. Each `GridItem.i` is matched to one of the
		* resolved `cards` (or `gridElements`) by `id` and rendered into a CSS
		* grid cell using the item's `x`, `y`, `w`, `h` coordinates.
		*
		* Self-contained — directly mountable in any Vue app:
		*
		*   <GridViewCard
		*     :grid-layout="layout"
		*     :cards="[chartCard, feedCard]"
		*     :item="dataModel"
		*   />
		*
		* The full vue-grid-layout drag/resize behaviour from v2 is not yet
		* implemented; this composition focuses on the static visual layout.
		*/
		const props = __props;
		const BREAKPOINT_PRIORITY = [
			"xxl",
			"xl",
			"lg",
			"md",
			"sm",
			"xs",
			"xxs"
		];
		const items = computed(() => {
			const layout = props.gridLayout ?? {};
			for (const bp of BREAKPOINT_PRIORITY) {
				const entry = layout[bp];
				if (entry && entry.length > 0) return entry;
			}
			return [];
		});
		const columnCount = computed(() => {
			const cols = props.cols ?? {};
			for (const bp of BREAKPOINT_PRIORITY) if (typeof cols[bp] === "number") return cols[bp];
			return 12;
		});
		const gridStyle = computed(() => ({
			display: "grid",
			gridTemplateColumns: `repeat(${columnCount.value}, minmax(0, 1fr))`,
			gridAutoRows: `${props.rowHeight}px`,
			columnGap: `${props.margin[0]}px`,
			rowGap: `${props.margin[1]}px`,
			padding: `${props.containerPadding[1]}px ${props.containerPadding[0]}px`
		}));
		function cellStyle(slot) {
			return {
				gridColumn: `${slot.x + 1} / span ${slot.w}`,
				gridRow: `${slot.y + 1} / span ${slot.h}`
			};
		}
		const cardById = computed(() => {
			const out = {};
			for (const c of props.cards) out[c.id] = c;
			return out;
		});
		const elementById = computed(() => {
			const out = {};
			for (const e of props.gridElements) out[e.id] = e;
			return out;
		});
		function resolveCard(id) {
			return cardById.value[id];
		}
		function resolveElement(id) {
			return elementById.value[id];
		}
		const showChrome = computed(() => props.showCard !== false);
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("section", { class: normalizeClass(["gxp-grid-view", showChrome.value ? "rounded-lg border bg-card text-card-foreground shadow-sm p-4" : ""]) }, [__props.title || __props.subtitle ? (openBlock(), createElementBlock("header", _hoisted_1, [__props.title ? (openBlock(), createElementBlock("h3", _hoisted_2, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.subtitle ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), items.value.length > 0 ? (openBlock(), createElementBlock("div", {
				key: 1,
				style: normalizeStyle(gridStyle.value),
				"data-testid": "grid-view-container"
			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (slot) => {
				return openBlock(), createElementBlock("div", {
					key: slot.i,
					style: normalizeStyle(cellStyle(slot)),
					"data-grid-item-id": slot.i,
					class: normalizeClass(["gxp-grid-view__cell", slot.options?.displayBorder ? "border rounded-md p-2" : ""])
				}, [resolveCard(slot.i) ? (openBlock(), createBlock(CardRenderer_default, {
					key: 0,
					card: resolveCard(slot.i),
					item: __props.item
				}, null, 8, ["card", "item"])) : resolveElement(slot.i) ? (openBlock(), createBlock(ElementRenderer_default, {
					key: 1,
					element: resolveElement(slot.i),
					item: __props.item
				}, null, 8, ["element", "item"])) : createCommentVNode("", true)], 14, _hoisted_4);
			}), 128))], 4)) : (openBlock(), createElementBlock("p", _hoisted_5, " No grid items to display. "))], 2);
		};
	}
});
//#endregion
//#region src/components/compositions/cards/GridViewCard.vue
var GridViewCard_exports = /* @__PURE__ */ __exportAll({ default: () => GridViewCard_default });
var GridViewCard_default = GridViewCard_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { GridViewCard_exports as n, GridViewCard_default as t };

//# sourceMappingURL=GridViewCard-BXs73PQW.js.map