Vue

by mpsingh2003

HTML

<div id="app">
  <navigation-tabs></navigation-tabs>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

Vue.component('navigation-tabs', {
    props: {
        tabs: Array,
        title: String,
        type: String
    },
    data() {
        return {
            navigationTabs: Vue.util.extend([], this.tabs),
            selectedTab: {},
            tabCounter: 0,
            tabType: this.type ? this.type : 'tabs'
        }
    },
    methods: {
        navItemClasses(selectedTab) {
            if (selectedTab.selected) {
                if (this.type) {
                    return 'bg-gradient-dark text-white';
                }
            } else if (selectedTab.disabled === true) {
                return 'text-danger';
            }
        },
        selectTab(selectedTab) {
            if (selectedTab.disabled !== true) {
                this.navigationTabs.forEach(tab => {
                    tab.selected = false;
                });
                selectedTab.selected = true;
            }
        }
    },
    computed: {
        activeComponent() {
            return this.navigationTabs.filter(x => x.selected === true)[0]
        }
    },
    template: `
        <div>
            <div>
                <ul class="text-md nav" :class="tabType === 'tabs' ? 'nav-tabs' : 'nav-pills'">
                    <li v-for="(tab, index) in navigationTabs" class="nav-item card-img-holder" v-if="tab.hideForSite !== $parent.site">
                         <img src="/shared/resources/images/circle.svg" class="card-img-absolute">
                         <a class="nav-link font-weight-bold" :class="navItemClasses(tab)" @click="selectTab(tab)">
                         {{ tabCounter++ + ': ' + tab.name }}
                         </a>
                    </li>   
                    <h3 v-if="title" class="nav-link font-weight-bold ml-auto pb-0">{{ title }}</h3>
                </ul>
            </div>
            <div v-if="tabType !== 'tabs'" class="border-top my-3"></div>
            <div class="my-4 mx-5">
                <component...