63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
Vue
<template>
|
|
<div v-if="row" class="dl-row" ref="container">
|
|
<span class="label">{{ row.label }}:</span>
|
|
|
|
<strapi-content class="content" :content="row.content" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
|
|
|
const props = defineProps({ row: Object })
|
|
|
|
const container = ref()
|
|
const links = ref([])
|
|
|
|
const onLinkClick = (e) => {
|
|
window?.umami?.track(`${props.row.label} link clicked`, {
|
|
linkText: e.target?.innerText,
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
links.value = Array.from(container.value?.querySelectorAll('a'))
|
|
|
|
links.value.forEach((link) => {
|
|
link.addEventListener('click', onLinkClick)
|
|
})
|
|
})
|
|
onBeforeUnmount(() => {
|
|
links.value.forEach((link) => {
|
|
link.removeEventListener('click', onLinkClick)
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.dl-row {
|
|
grid-template-columns: desktop-vw(40px) 1fr;
|
|
display: grid;
|
|
align-items: flex-start;
|
|
padding-top: desktop-vw(8px);
|
|
border-top: 1px dashed currentColor;
|
|
|
|
.label {
|
|
padding-top: 0.4em;
|
|
}
|
|
.content {
|
|
p,
|
|
a {
|
|
@include h6;
|
|
}
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
@include mobile() {
|
|
grid-template-columns: mobile-vw(60px) 1fr;
|
|
padding-top: mobile-vw(8px);
|
|
}
|
|
}
|
|
</style>
|