I have created a Toolbar Item component as follows:
<template>
<div
class="flex cursor-pointer items-center justify-center rounded-full border-2 border-gray-300 p-1 shadow-sm transition-all duration-300 hover:scale-110 hover:bg-black hover:text-white"
@click="$emit('event')"
:class="isActive ? 'bg-black text-white' : ''"
>
<Icon @click="setActive()" :icon="icon" />
</div>
</template>
<script setup>
import { Icon } from '@iconify/vue'
import { defineProps, defineEmits } from 'vue'
import { ref } from 'vue'
const props = defineProps({
icon: String
})
const emits = defineEmits({
event: String
})
const isActive = ref(false)
function setActive() {
isActive.value = !isActive.value
console.log(isActive.value)
}
</script>
<style scoped></style>
This component is nested inside a Toolbar parent component:
<template>
<div class="flex gap-2 rounded-3xl border-2 border-gray-300 p-2 shadow-md">
<TipTapToolbarItem icon="ooui:bold-b"></TipTapToolbarItem>
<TipTapToolbarItem icon="clarity:italic-line"></TipTapToolbarItem>
<TipTapToolbarItem icon="fa-solid:strikethrough"></TipTapToolbarItem>
<TipTapToolbarItem icon="mingcute:heading-1-fill"></TipTapToolbarItem>
<TipTapToolbarItem icon="mingcute:code-fill"></TipTapToolbarItem>
<TipTapToolbarItem icon="tabler:blockquote"></TipTapToolbarItem>
<TipTapToolbarItem icon="octicon:horizontal-rule-16"></TipTapToolbarItem>
</div>
</template>
<script setup>
import TipTapToolbarItem from './TipTapToolbarItem.vue'
</script>
<style scoped></style>
I am aware that v-for can be used...
and then the Toolbar is utilized
<template>
<TipTapToolbar></TipTapToolbar>
<editor-content class="h-[200px] w-[200px] bg-blue-500" placeholder="tiptap" :editor="editor" />
</template>
The hierarchy is as follows: ToolbarItem -> Toolbar -> EditorCompontn
I am wondering how to handle emits in this structure where the Toolbar Item component is a child of Toolbar which in turn is a child of a component where it is implemented. Each item requires a different function...
I am considering using the global store, but are there any other alternatives?