<span
	on:click="toggle()"
	class="{isCurrentlySelected ? 'selected' : ''}"
>
	<slot></slot>
</span>

<script>
export default {
	computed: {
		isCurrentlySelected: ({ currentIdentifier, identifier }) => currentIdentifier === identifier
	},
	methods: {
		toggle() {
			const isCurrentlySelected = this.get().isCurrentlySelected

			this.set({
				currentIdentifier: isCurrentlySelected ? null : this.get().identifier
			})
		}
	}
}
</script>