deemixer/src/components/settings/TemplateVariablesList.vue
2021-01-31 22:30:06 +01:00

32 lines
755 B
Vue

<template>
<BaseAccordion style="--arrow-v-align: baseline; margin-bottom: 3rem;">
<template #title>
<slot name="title"></slot>
</template>
<div class="flex flex-wrap p-4 space-x-2 rounded-2xl bg-background-secondary">
<span
v-for="templateVariable in templateVariables"
class="inline-block p-2 mt-2 tracking-wider rounded cursor-pointer bg-panels-bg first:ml-2 hover:shadow-outline"
@click="$emit('variable-click', templateVariable)"
>
{{ templateVariable }}
</span>
</div>
</BaseAccordion>
</template>
<script>
import BaseAccordion from '@components/globals/BaseAccordion.vue'
export default {
components: { BaseAccordion },
props: {
templateVariables: {
type: Array,
required: true
}
}
}
</script>