<template> <routable-tabs :routes="routes_" v-bind="{ panels, forms, v: $v, ...$attrs }" v-on="$listeners" > <slot name="tab-top" slot="tab-top"></slot> <slot name="tab-before" slot="tab-before"></slot> <slot name="tab-after" slot="tab-after"></slot> </routable-tabs> </template> <script> import { validationMixin } from 'vuelidate' export default { name: 'ConfigPanels', components: { RoutableTabs: () => import('@/components/RoutableTabs.vue') }, mixins: [validationMixin], props: { panels: { type: Array, default: undefined }, forms: { type: Object, default: undefined }, validations: { type: Object, default: undefined }, errors: { type: Object, default: undefined }, // never used routes: { type: Array, default: null }, noRedirect: { type: Boolean, default: false } }, computed: { routes_ () { if (this.routes) return this.routes return this.panels.map(panel => ({ to: { params: { tabId: panel.id } }, text: panel.name, icon: panel.icon || 'wrench' })) } }, validations () { return { forms: this.validations } }, created () { if (!this.noRedirect && !this.$route.params.tabId) { this.$router.replace({ params: { tabId: this.panels[0].id } }) } } } </script>