<script>
export default {
	inheritAttrs: false,
}
</script>
<script setup>
import Checkbox from "primevue/checkbox";
import {ref} from "vue";

const props = defineProps(["inputId"])

const inputId = ref("checkbox-" + Math.random().toString().replace(/\./, "").substring(0, 6))
if (typeof props.inputId === "string") {
	inputId.value = props.inputId
}

</script>

<template>
	<div class="inline-block">
		<div :class="{'flex flex-row gap-2 items-center':$slots.default}">
			<Checkbox v-bind="$attrs" :inputId="inputId"></Checkbox>
			<label :for="inputId" v-if="$slots.default">
				<slot></slot>
			</label>
		</div>
	</div>
</template>

<style scoped>
:deep(.p-checkbox) {
	vertical-align: middle;
	display: flex;
}
</style>