import { n as __exportAll } from "./chunk-B-1-B7_t.js";
import { a as CardDescription_default, n as CardTitle_default, o as CardContent_default, r as CardHeader_default, s as Card_default } from "./card-X74FuL7B.js";
import { t as CardRenderer_default } from "./CardRenderer-BVyy_sI2.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
//#region src/components/compositions/cards/CardListCard.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = {
	key: 1,
	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 = {
	key: 0,
	class: "text-sm text-muted-foreground italic",
	"data-testid": "card-list-empty"
};
var _hoisted_5 = [
	"draggable",
	"data-card-list-item-id",
	"onDragstart",
	"onDrop"
];
var CardListCard_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "CardListCard",
	props: {
		title: {},
		subtitle: {},
		showCard: {
			type: Boolean,
			default: true
		},
		draggable: {
			type: Boolean,
			default: false
		},
		dragTargetData: {},
		gutterY: { default: "1rem" },
		gutterX: { default: "1rem" },
		cards: { default: () => [] },
		item: { default: () => ({}) },
		id: {}
	},
	emits: ["reorder"],
	setup(__props, { emit: __emit }) {
		/**
		* Props-driven `card-list` composition — renders a list of nested
		* DisplayCards via `CardRenderer`. Each child card is a fully-resolved
		* DisplayCard (not an ID lookup).
		*
		* Self-contained — directly mountable in any Vue app:
		*
		*   <CardListCard
		*     title="Settings"
		*     :cards="[generalCard, advancedCard]"
		*     :item="dataModel"
		*   />
		*
		* Drag-and-drop reordering is a lightweight HTML5 implementation when
		* `draggable === true`; on drop the new card order is emitted as
		* `reorder` so a parent (e.g. the FormBuilder) can persist it.
		*/
		const props = __props;
		const emit = __emit;
		const internalOrder = ref(null);
		const order = computed(() => internalOrder.value ?? props.cards);
		const showChrome = computed(() => props.showCard !== false);
		const gridStyle = computed(() => ({
			rowGap: props.gutterY,
			columnGap: props.gutterX
		}));
		const dragIndex = ref(null);
		function onDragStart(event, index) {
			if (!props.draggable) return;
			dragIndex.value = index;
			if (event.dataTransfer) {
				event.dataTransfer.effectAllowed = "move";
				event.dataTransfer.setData("text/plain", props.dragTargetData ?? props.id ?? "");
			}
		}
		function onDragOver(event) {
			if (!props.draggable) return;
			event.preventDefault();
			if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
		}
		function onDrop(event, targetIndex) {
			if (!props.draggable || dragIndex.value === null) return;
			event.preventDefault();
			const next = [...order.value];
			const [moved] = next.splice(dragIndex.value, 1);
			next.splice(targetIndex, 0, moved);
			internalOrder.value = next;
			dragIndex.value = null;
			emit("reorder", next);
		}
		function onDragEnd() {
			dragIndex.value = null;
		}
		return (_ctx, _cache) => {
			return openBlock(), createBlock(resolveDynamicComponent(showChrome.value ? unref(Card_default) : "section"), { class: normalizeClass(["gxp-card-list", showChrome.value ? "" : "flex flex-col bg-transparent border-0 shadow-none"]) }, {
				default: withCtx(() => [showChrome.value && (__props.title || __props.subtitle) ? (openBlock(), createBlock(unref(CardHeader_default), { key: 0 }, {
					default: withCtx(() => [__props.title ? (openBlock(), createBlock(unref(CardTitle_default), { key: 0 }, {
						default: withCtx(() => [createTextVNode(toDisplayString(__props.title), 1)]),
						_: 1
					})) : createCommentVNode("", true), __props.subtitle ? (openBlock(), createBlock(unref(CardDescription_default), { key: 1 }, {
						default: withCtx(() => [createTextVNode(toDisplayString(__props.subtitle), 1)]),
						_: 1
					})) : createCommentVNode("", true)]),
					_: 1
				})) : __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), (openBlock(), createBlock(resolveDynamicComponent(showChrome.value ? unref(CardContent_default) : "div"), {
					class: "flex flex-col",
					style: normalizeStyle(gridStyle.value)
				}, {
					default: withCtx(() => [order.value.length === 0 ? (openBlock(), createElementBlock("p", _hoisted_4, " No cards to display. ")) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(order.value, (child, index) => {
						return openBlock(), createElementBlock("div", {
							key: child.id,
							draggable: __props.draggable === true,
							"data-card-list-item-id": child.id,
							class: normalizeClass([
								"gxp-card-list__item",
								__props.draggable ? "cursor-move" : "",
								dragIndex.value === index ? "opacity-50" : ""
							]),
							onDragstart: ($event) => onDragStart($event, index),
							onDragover: onDragOver,
							onDrop: ($event) => onDrop($event, index),
							onDragend: onDragEnd
						}, [createVNode(CardRenderer_default, {
							card: child,
							item: __props.item
						}, null, 8, ["card", "item"])], 42, _hoisted_5);
					}), 128))]),
					_: 1
				}, 8, ["style"]))]),
				_: 1
			}, 8, ["class"]);
		};
	}
});
//#endregion
//#region src/components/compositions/cards/CardListCard.vue
var CardListCard_exports = /* @__PURE__ */ __exportAll({ default: () => CardListCard_default });
var CardListCard_default = CardListCard_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { CardListCard_exports as n, CardListCard_default as t };

//# sourceMappingURL=CardListCard-DXGL9GKo.js.map