45 lines
No EOL
1.6 KiB
Vue
45 lines
No EOL
1.6 KiB
Vue
<template>
|
|
<template v-for="(element, elementIndex) in elements">
|
|
<div class="container flex justify-end">
|
|
<button v-if="this.$root.modeEdit" type="button" class="text-white bg-blue-700 hover:bg-blue-800 outline-none rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 absolute top-2 right-2" title="Edit Element">
|
|
<i class="ti ti-edit mx-3 my-2 block"></i>
|
|
</button>
|
|
</div>
|
|
<tailwind-jumbotron v-if="element.type == 'jumbotron'" :title="element.title">
|
|
{{ element.text }}
|
|
</tailwind-jumbotron>
|
|
<tailwind-grid v-if="element.type == 'grid'" :columns="element.columns" :title="element.title">
|
|
<dynamic-root :elements="element.elements"></dynamic-root>
|
|
</tailwind-grid>
|
|
<tailwind-link v-if="element.type == 'link'" :link="element.link" :title="element.title" :description="element.description">
|
|
|
|
</tailwind-link>
|
|
</template>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
props: {
|
|
elements: Array
|
|
},
|
|
components: {
|
|
TailwindJumbotron: Vue.defineAsyncComponent(() =>
|
|
loadModule('/vue/jumbotron.vue', options)
|
|
),
|
|
TailwindGrid: Vue.defineAsyncComponent(() =>
|
|
loadModule('/vue/grid.vue', options)
|
|
),
|
|
TailwindLink: Vue.defineAsyncComponent(() =>
|
|
loadModule('/vue/link.vue', options)
|
|
),
|
|
DynamicRoot: Vue.defineAsyncComponent(() =>
|
|
loadModule('/vue/root.vue', options)
|
|
),
|
|
},
|
|
};
|
|
</script> |