@burh/nuxt-core 1.0.503 → 1.0.505

package/components/burh-ds/Tabs/Tabs.vue

@@ -1,188 +1,188 @@
-<template>
-    <div>
-        <div
-            :class="[
-                { 'col-md-4': vertical && !tabNavWrapperClasses },
-                { 'col-12': centered && !tabNavWrapperClasses },
-                tabNavWrapperClasses
-            ]"
-        >
-            <ul
-                class="nav nav-pills"
-                role="tablist"
-                :class="[
-                    `nav-pills-${type}`,
-                    { 'flex-column': vertical },
-                    { 'justify-content-center': centered },
-                    tabNavClasses
-                ]"
-                :title="navTitle"
-            >
-                <li
-                    v-for="tab in tabs"
-                    class="nav-item active"
-                    data-toggle="tab"
-                    role="tablist"
-                    aria-expanded="true"
-                    :key="tab.id"
-                >
-                    <a
-                        data-toggle="tab"
-                        role="tablist"
-                        :href="`#${tab.id}`"
-                        @click.prevent="activateTab(tab)"
-                        :aria-expanded="tab.active"
-                        class="nav-link"
-                        :class="{ active: tab.active }"
-                    >
-                        <tab-item-content :tab="tab"> </tab-item-content>
-                    </a>
-                </li>
-            </ul>
-        </div>
-        <div
-            class="tab-content"
-            :class="[
-                { 'tab-space': !vertical },
-                { 'col-md-8': vertical && !tabContentClasses },
-                tabContentClasses
-            ]"
-        >
-            <slot></slot>
-        </div>
-    </div>
-</template>
-
-<script>
-import { isMobile, isMobileOnly } from 'mobile-device-detect';
-
-export default {
-    name: 'tabs',
-    components: {
-        TabItemContent: {
-            props: ['tab'],
-            render(h) {
-                return h('div', [this.tab.$slots.title || this.tab.title]);
-            }
-        }
-    },
-    provide() {
-        return {
-            addTab: this.addTab,
-            removeTab: this.removeTab
-        };
-    },
-    props: {
-        type: {
-            type: String,
-            default: 'primary',
-            validator: value => {
-                let acceptedValues = [
-                    'primary',
-                    'info',
-                    'success',
-                    'warning',
-                    'danger'
-                ];
-                return acceptedValues.indexOf(value) !== -1;
-            }
-        },
-        activeTab: {
-            type: String,
-            default: '',
-            description: 'Active tab name'
-        },
-        noActiveTabOnStart: {
-            type: Boolean,
-            default: true,
-            description: 'Start with no active tab'
-        },
-        tabNavWrapperClasses: {
-            type: [String, Object],
-            default: '',
-            description: 'ul wrapper css classes'
-        },
-        tabNavClasses: {
-            type: [String, Object],
-            default: '',
-            description: 'ul css classes'
-        },
-        tabContentClasses: {
-            type: [String, Object],
-            default: '',
-            description: 'tab content css classes'
-        },
-        vertical: Boolean,
-        centered: Boolean,
-        value: String,
-        navTitle: String
-    },
-    data() {
-        return {
-            tabs: [],
-            isMobileOnlyWatch: isMobileOnly
-        };
-    },
-    methods: {
-        findAndActivateTab(title) {
-            let tabToActivate = this.tabs.find(t => t.title === title);
-            if (tabToActivate) {
-                this.activateTab(tabToActivate);
-            }
-        },
-        activateTab(tab) {
-            if (this.handleClick) {
-                this.handleClick(tab);
-            }
-            this.deactivateTabs();
-            tab.active = true;
-
-            if (this.isMobileOnlyWatch) {
-                if (
-                    !document
-                        .querySelector('html')
-                        .classList.contains('no-scroll')
-                ) {
-                    document.querySelector('html').classList.add('no-scroll');
-                }
-            }
-        },
-        deactivateTabs() {
-            this.tabs.forEach(tab => {
-                tab.active = false;
-            });
-        },
-        addTab(tab) {
-            const index = this.$slots.default.indexOf(tab.$vnode);
-            if (!this.activeTab && index === 0 && !this.noActiveTabOnStart) {
-                tab.active = true;
-            }
-            if (this.activeTab === tab.name && !this.noActiveTabOnStart) {
-                tab.active = true;
-            }
-            this.tabs.splice(index, 0, tab);
-        },
-        removeTab(tab) {
-            const tabs = this.tabs;
-            const index = tabs.indexOf(tab);
-            if (index > -1) {
-                tabs.splice(index, 1);
-            }
-        }
-    },
-    mounted() {
-        this.$nextTick(() => {
-            if (this.value) {
-                this.findAndActivateTab(this.value);
-            }
-        });
-    },
-    watch: {
-        value(newVal) {
-            this.findAndActivateTab(newVal);
-        }
-    }
-};
-</script>
-
-<style scoped></style>
+<template>
+    <div>
+        <div
+            :class="[
+                { 'col-md-4': vertical && !tabNavWrapperClasses },
+                { 'col-12': centered && !tabNavWrapperClasses },
+                tabNavWrapperClasses
+            ]"
+        >
+            <ul
+                class="nav nav-pills"
+                role="tablist"
+                :class="[
+                    `nav-pills-${type}`,
+                    { 'flex-column': vertical },
+                    { 'justify-content-center': centered },
+                    tabNavClasses
+                ]"
+                :title="navTitle"
+            >
+                <li
+                    v-for="tab in tabs"
+                    class="nav-item active"
+                    data-toggle="tab"
+                    role="tablist"
+                    aria-expanded="true"
+                    :key="tab.id"
+                >
+                    <a
+                        data-toggle="tab"
+                        role="tablist"
+                        :href="`#${tab.id}`"
+                        @click.prevent="activateTab(tab)"
+                        :aria-expanded="tab.active"
+                        class="nav-link"
+                        :class="{ active: tab.active }"
+                    >
+                        <tab-item-content :tab="tab"> </tab-item-content>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div
+            class="tab-content"
+            :class="[
+                { 'tab-space': !vertical },
+                { 'col-md-8': vertical && !tabContentClasses },
+                tabContentClasses
+            ]"
+        >
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+import { isMobile, isMobileOnly } from 'mobile-device-detect';
+
+export default {
+    name: 'tabs',
+    components: {
+        TabItemContent: {
+            props: ['tab'],
+            render(h) {
+                return h('div', [this.tab.$slots.title || this.tab.title]);
+            }
+        }
+    },
+    provide() {
+        return {
+            addTab: this.addTab,
+            removeTab: this.removeTab
+        };
+    },
+    props: {
+        type: {
+            type: String,
+            default: 'primary',
+            validator: value => {
+                let acceptedValues = [
+                    'primary',
+                    'info',
+                    'success',
+                    'warning',
+                    'danger'
+                ];
+                return acceptedValues.indexOf(value) !== -1;
+            }
+        },
+        activeTab: {
+            type: String,
+            default: '',
+            description: 'Active tab name'
+        },
+        noActiveTabOnStart: {
+            type: Boolean,
+            default: true,
+            description: 'Start with no active tab'
+        },
+        tabNavWrapperClasses: {
+            type: [String, Object],
+            default: '',
+            description: 'ul wrapper css classes'
+        },
+        tabNavClasses: {
+            type: [String, Object],
+            default: '',
+            description: 'ul css classes'
+        },
+        tabContentClasses: {
+            type: [String, Object],
+            default: '',
+            description: 'tab content css classes'
+        },
+        vertical: Boolean,
+        centered: Boolean,
+        value: String,
+        navTitle: String
+    },
+    data() {
+        return {
+            tabs: [],
+            isMobileOnlyWatch: isMobileOnly
+        };
+    },
+    methods: {
+        findAndActivateTab(title) {
+            let tabToActivate = this.tabs.find(t => t.title === title);
+            if (tabToActivate) {
+                this.activateTab(tabToActivate);
+            }
+        },
+        activateTab(tab) {
+            if (this.handleClick) {
+                this.handleClick(tab);
+            }
+            this.deactivateTabs();
+            tab.active = true;
+
+            if (this.isMobileOnlyWatch) {
+                if (
+                    !document
+                        .querySelector('html')
+                        .classList.contains('no-scroll')
+                ) {
+                    document.querySelector('html').classList.add('no-scroll');
+                }
+            }
+        },
+        deactivateTabs() {
+            this.tabs.forEach(tab => {
+                tab.active = false;
+            });
+        },
+        addTab(tab) {
+            const index = this.$slots.default.indexOf(tab.$vnode);
+            if (!this.activeTab && index === 0 && !this.noActiveTabOnStart) {
+                tab.active = true;
+            }
+            if (this.activeTab === tab.name && !this.noActiveTabOnStart) {
+                tab.active = true;
+            }
+            this.tabs.splice(index, 0, tab);
+        },
+        removeTab(tab) {
+            const tabs = this.tabs;
+            const index = tabs.indexOf(tab);
+            if (index > -1) {
+                tabs.splice(index, 1);
+            }
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            if (this.value) {
+                this.findAndActivateTab(this.value);
+            }
+        });
+    },
+    watch: {
+        value(newVal) {
+            this.findAndActivateTab(newVal);
+        }
+    }
+};
+</script>
+
+<style scoped></style>

package/components/burh-ds/Tabs/TesteTab.vue

@@ -1,132 +1,132 @@
-<template>
-	<li class="custom__tab tab tab-primary" :class="active && 'tab--active'"
-		@click="$emit('tab-click')">
-		<span class="tab__title" :class="tabTitleClass">{{title}}</span>
-		<span v-if="icon > 0" class="tab__icon" :class="tabIconClass">{{icon}}</span>
-	</li>
-</template>
-<script>
-export default {
-	name: 'teste-tab',
-	props: {
-		title: {
-			type: String,
-			default: 'Testes',
-			description: 'Title for tab',
-		},
-		icon: {
-			type: Number,
-			default: 0,
-			description: 'Number for tab icon',
-		},
-		active: {
-			type: Boolean,
-			default: false,
-			description: 'Define if tab is active',
-		},
-		tabIconClass: {
-			type: String,
-			default: '',
-			description: 'Define css class for tab\'s icon',
-		},
-		tabTitleClass: {
-			type: String,
-			default: '',
-			description: 'Define css class for tab\'s title',
-		},
-		link: {
-			type: String,
-			default: '/',
-			description: 'Define nuxt-link link',
-		}
-	},
-	methods: {
-		redirect(link){
-			this.$router.push(link);
-		}
-	}
-};
-</script>
-<style lang="scss" scoped>
-@import "@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
-
-@media (max-width: 1195px) {
-	.tab__title {
-		white-space: nowrap;
-		width: 50px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-}
-
-@media (max-width: 1422px) {
-	.tab__title {
-		white-space: nowrap;
-		width: 50px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-}
-
-@media (max-width: 1215px) {
-	.custom__tab {
-		padding: .75rem .50rem !important;
-	}
-}
-
-.custom__tab {
-    &.tab {
-    position: relative;
-    padding: .75rem 2rem;
-    margin: 0 1rem;
-
-        &:hover {
-        cursor: pointer;
-            .tab__title,  .tab__icon {
-                color: $primary;
-            }
-        }
-
-        &__title {
-        color: #3C4858;
-        font-weight: 600;
-        }
-
-        &__icon {
-            color: #ffffff;
-            border-radius: 50% !important;
-            background-color: #3C4858;;
-            padding: 0 .4rem;
-            font-weight: bold;
-        }
-
-        @media screen and (min-width: 992px){
-            &.tab{
-                padding: .75 2rem;
-            }
-        }
-
-        &.tab--active {
-            .tab__title {
-                color:$primary;
-            }
-
-            .tab__icon {
-                background-color: $primary;
-                color: #FFF
-            }
-        }
-
-        &.tab--active::after {
-            content:'';
-            position:absolute;
-            bottom:0;
-            left:0;
-            right:0;
-            background: $primary;
-            height: 5px;
-            border-radius:5px 5px 0px 0px;
-        }
-    }
-}
-</style>
+<template>
+	<li class="custom__tab tab tab-primary" :class="active && 'tab--active'"
+		@click="$emit('tab-click')">
+		<span class="tab__title" :class="tabTitleClass">{{title}}</span>
+		<span v-if="icon > 0" class="tab__icon" :class="tabIconClass">{{icon}}</span>
+	</li>
+</template>
+<script>
+export default {
+	name: 'teste-tab',
+	props: {
+		title: {
+			type: String,
+			default: 'Testes',
+			description: 'Title for tab',
+		},
+		icon: {
+			type: Number,
+			default: 0,
+			description: 'Number for tab icon',
+		},
+		active: {
+			type: Boolean,
+			default: false,
+			description: 'Define if tab is active',
+		},
+		tabIconClass: {
+			type: String,
+			default: '',
+			description: 'Define css class for tab\'s icon',
+		},
+		tabTitleClass: {
+			type: String,
+			default: '',
+			description: 'Define css class for tab\'s title',
+		},
+		link: {
+			type: String,
+			default: '/',
+			description: 'Define nuxt-link link',
+		}
+	},
+	methods: {
+		redirect(link){
+			this.$router.push(link);
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+@import "@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
+
+@media (max-width: 1195px) {
+	.tab__title {
+		white-space: nowrap;
+		width: 50px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+@media (max-width: 1422px) {
+	.tab__title {
+		white-space: nowrap;
+		width: 50px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+@media (max-width: 1215px) {
+	.custom__tab {
+		padding: .75rem .50rem !important;
+	}
+}
+
+.custom__tab {
+    &.tab {
+    position: relative;
+    padding: .75rem 2rem;
+    margin: 0 1rem;
+
+        &:hover {
+        cursor: pointer;
+            .tab__title,  .tab__icon {
+                color: $primary;
+            }
+        }
+
+        &__title {
+        color: #3C4858;
+        font-weight: 600;
+        }
+
+        &__icon {
+            color: #ffffff;
+            border-radius: 50% !important;
+            background-color: #3C4858;;
+            padding: 0 .4rem;
+            font-weight: bold;
+        }
+
+        @media screen and (min-width: 992px){
+            &.tab{
+                padding: .75 2rem;
+            }
+        }
+
+        &.tab--active {
+            .tab__title {
+                color:$primary;
+            }
+
+            .tab__icon {
+                background-color: $primary;
+                color: #FFF
+            }
+        }
+
+        &.tab--active::after {
+            content:'';
+            position:absolute;
+            bottom:0;
+            left:0;
+            right:0;
+            background: $primary;
+            height: 5px;
+            border-radius:5px 5px 0px 0px;
+        }
+    }
+}
+</style>