<script setup>
// 可以在插槽中使用 t-toggle-button 来实现链接和按钮的点击返回之前的状态

import Inplace from "primevue/inplace";
import {onMounted, onUpdated, ref} from "vue";
import T from "./T.js"

const rootRef = ref(null)
const active = ref(false)

function processToggleLinks() {
	const toggleButtons = rootRef.value.$el.querySelectorAll("*[t-toggle-button]")
	if (!T.isNull(toggleButtons)) {
		toggleButtons.forEach(function (button) {
			button.addEventListener("click", (e) => {
				active.value = !active.value
				e.preventDefault()
			})
		})
	}
}

onMounted(() => {
	processToggleLinks()
})
onUpdated(() => {
	processToggleLinks()
})
</script>

<template>
	<Inplace ref="rootRef" v-model:active="active">
		<template #display>
			<slot name="before"></slot>
		</template>
		<template #content>
			<slot name="after"></slot>
		</template>
	</Inplace>
</template>

<style scoped>

</style>