import { defineComponent, h } from "vue";
import { cx, iconNode } from "../utils.js";

export default defineComponent({
	name: "GnInputGroup",
	props: {
		compact: { type: Boolean, default: false },
		addon: { type: String, default: "" },
		icon: { type: String, default: "" }
	},
	setup(props, { attrs, slots }) {
		return () => h("div", {
			...attrs,
			class: cx("input-group", { "input-group-compact": props.compact }, attrs.class)
		}, [
			(props.addon || props.icon || slots.addon) && h("span", { class: "input-group-addon" }, slots.addon?.() || iconNode(props.icon) || props.addon),
			slots.default?.(),
			slots.action && h("span", { class: "input-group-action" }, slots.action())
		]);
	}
});