import { n as cn } from "./utils-DXzSsU1e.js";
import { n as CardTitle_default, o as CardContent_default, r as CardHeader_default, s as Card_default } from "./card-X74FuL7B.js";
import { t as ElementRenderer_default } from "./ElementRenderer-DV1pZRd4.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
//#region src/components/compositions/elements/card/GridCard.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = {
	key: 0,
	class: "col-span-full py-3 text-center text-sm text-muted-foreground"
};
//#endregion
//#region src/components/compositions/elements/card/GridCard.vue
var GridCard_default = /* @__PURE__ */ defineComponent({
	__name: "GridCard",
	props: {
		label: {},
		title: {},
		showCard: {
			type: Boolean,
			default: true
		},
		gridCols: { default: 3 },
		gridRowHeight: { default: 60 },
		nestedElements: { default: () => [] },
		item: { default: () => ({}) },
		classList: {}
	},
	setup(__props) {
		/**
		* `card.grid` element composition.
		*
		* Renders nested child elements in a CSS grid with configurable column
		* count and row height. Children are rendered via ElementRenderer; the
		* grid layout is controlled by `gridCols` and `gridRowHeight`.
		*
		* For a visual drag-and-drop grid designer use `builder.grid-builder`.
		* This element focuses on static configured layouts.
		*/
		const props = __props;
		const heading = computed(() => props.title ?? props.label);
		const children = computed(() => (props.nestedElements ?? []).filter((e) => typeof e === "object" && e !== null && typeof e.type === "string"));
		const gridStyle = computed(() => ({
			display: "grid",
			gridTemplateColumns: `repeat(${props.gridCols}, minmax(0, 1fr))`,
			gridAutoRows: `${props.gridRowHeight}px`,
			gap: "0.5rem"
		}));
		return (_ctx, _cache) => {
			return props.showCard !== false ? (openBlock(), createBlock(unref(Card_default), {
				key: 0,
				class: normalizeClass(unref(cn)(props.classList))
			}, {
				default: withCtx(() => [heading.value ? (openBlock(), createBlock(unref(CardHeader_default), { key: 0 }, {
					default: withCtx(() => [createVNode(unref(CardTitle_default), null, {
						default: withCtx(() => [createTextVNode(toDisplayString(heading.value), 1)]),
						_: 1
					})]),
					_: 1
				})) : createCommentVNode("", true), createVNode(unref(CardContent_default), null, {
					default: withCtx(() => [createElementVNode("div", { style: normalizeStyle(gridStyle.value) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(children.value, (child) => {
						return openBlock(), createBlock(ElementRenderer_default, {
							key: child.id,
							element: child,
							item: props.item
						}, null, 8, ["element", "item"]);
					}), 128)), !children.value.length ? (openBlock(), createElementBlock("p", _hoisted_1, " No elements configured. ")) : createCommentVNode("", true)], 4)]),
					_: 1
				})]),
				_: 1
			}, 8, ["class"])) : (openBlock(), createElementBlock("div", {
				key: 1,
				class: normalizeClass(unref(cn)(props.classList)),
				style: normalizeStyle(gridStyle.value)
			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(children.value, (child) => {
				return openBlock(), createBlock(ElementRenderer_default, {
					key: child.id,
					element: child,
					item: props.item
				}, null, 8, ["element", "item"]);
			}), 128))], 6));
		};
	}
});
//#endregion
export { GridCard_default as default };

//# sourceMappingURL=GridCard-BFGcxBYs.js.map