import ViewLayoutSection_default from "../../../../components/ViewLayout/ViewLayoutSection.vue.js";
import DataTable_default from "../../../components/data-table/DataTable.vue.js";
import DataTableInput_default from "../../../components/data-table/DataTableInput.vue.js";
import DataTableRow_default from "../../../components/data-table/DataTableRow.vue.js";
import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, openBlock, renderList, renderSlot, toDisplayString, unref, useId, withCtx } from "vue";
import { ScalarIcon } from "@scalar/components";
//#region src/v2/features/collection/components/Form.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { key: 0 };
var _hoisted_2 = { class: "flex flex-1 flex-col gap-1.5" };
var _hoisted_3 = ["for"];
var _hoisted_4 = { class: "centered-y bg-b-2 flex-center absolute right-1 z-1 rounded px-1 py-0.5" };
var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "Form",
	props: {
		title: {},
		options: {},
		data: {},
		onUpdate: { type: Function },
		environment: {}
	},
	setup(__props) {
		const id = useId();
		return (_ctx, _cache) => {
			return openBlock(), createBlock(ViewLayoutSection_default, { class: "last:rounded-b-lg" }, createSlots({
				default: withCtx(() => [createElementVNode("div", _hoisted_2, [Object.keys(__props.data).length > 0 ? (openBlock(), createBlock(DataTable_default, {
					key: 0,
					class: "rounded-b-lg",
					columns: [""]
				}, {
					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
						return openBlock(), createBlock(DataTableRow_default, { key: index }, {
							default: withCtx(() => [createVNode(DataTableInput_default, {
								id: unref(id),
								class: "pr-9",
								environment: __props.environment,
								lineWrapping: option.lineWrapping ?? false,
								modelValue: __props.data[option.key] ?? "",
								placeholder: option.placeholder,
								"onUpdate:modelValue": ($event) => __props.onUpdate(option.key, $event)
							}, createSlots({
								default: withCtx(() => [createElementVNode("label", { for: unref(id) }, toDisplayString(option.label), 9, _hoisted_3)]),
								_: 2
							}, [option.key === "description" ? {
								name: "icon",
								fn: withCtx(() => [createElementVNode("div", _hoisted_4, [createVNode(unref(ScalarIcon), {
									icon: "Markdown",
									size: "lg"
								})])]),
								key: "0"
							} : void 0]), 1032, [
								"id",
								"environment",
								"lineWrapping",
								"modelValue",
								"placeholder",
								"onUpdate:modelValue"
							])]),
							_: 2
						}, 1024);
					}), 128))]),
					_: 1
				})) : createCommentVNode("", true)])]),
				_: 2
			}, [__props.title || _ctx.$slots.title ? {
				name: "title",
				fn: withCtx(() => [__props.title ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.title), 1)) : renderSlot(_ctx.$slots, "title", { key: 1 })]),
				key: "0"
			} : void 0]), 1024);
		};
	}
});
//#endregion
export { Form_vue_vue_type_script_setup_true_lang_default as default };

//# sourceMappingURL=Form.vue.script.js.map