vue-nav-tabs - npm Package Compare versions

Comparing version 0.3.1 to 0.5.0

dist/vue-tabs.js

@@ -1,1 +0,332 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueTabs=e():t.VueTabs=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return t[i].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=5)}([function(t,e){t.exports=function(t,e,n,i){var a,o=t=t||{},s=typeof t.default;"object"!==s&&"function"!==s||(a=t,o=t.default);var r="function"==typeof o?o.options:o;if(e&&(r.render=e.render,r.staticRenderFns=e.staticRenderFns),n&&(r._scopeId=n),i){var u=Object.create(r.computed||null);Object.keys(i).forEach(function(t){var e=i[t];u[t]=function(){return e}}),r.computed=u}return{esModule:a,exports:o,options:r}}},function(t,e,n){var i=n(0)(n(3),n(8),null,null);i.options.__file="C:\\work\\Github\\vue-tabs\\src\\components\\TabContent.vue",i.esModule&&Object.keys(i.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),i.options.functional&&console.error("[vue-loader] TabContent.vue: functional components are not supported with templates, they should use render functions."),t.exports=i.exports},function(t,e,n){n(7),n(6);var i=n(0)(n(4),n(9),null,null);i.options.__file="C:\\work\\Github\\vue-tabs\\src\\components\\VueTabs.vue",i.esModule&&Object.keys(i.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),i.options.functional&&console.error("[vue-loader] VueTabs.vue: functional components are not supported with templates, they should use render functions."),t.exports=i.exports},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"v-tab",props:{title:{type:String,default:""},icon:{type:String,default:""},beforeChange:{type:Function},id:String,route:{type:[String,Object]},transitionName:String,transitionMode:String},computed:{isValidParent:function(){return"vue-tabs"===this.$parent.$options.name},hash:function(){return"#"+this.id}},data:function(){return{active:!1,validationError:null}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"vue-tabs",props:{activeTabColor:String,activeTextColor:String,textPosition:{type:String,default:"center"},type:{type:String,default:"tabs"},direction:{type:String,default:"horizontal"},centered:Boolean,startIndex:{type:Number,default:0}},data:function(){return{activeTabIndex:0,tabs:[]}},computed:{tabCount:function(){return this.tabs.length},isTabShape:function(){return"tabs"===this.type},isStacked:function(){return"vertical"===this.direction},classList:function(){return"nav "+(this.isTabShape?"nav-tabs":"nav-pills")+" "+(this.centered?"nav-justified":"")+" "+(this.isStacked?"nav-stacked":"")},stackedClass:function(){return this.isStacked?"stacked":""},activeTabStyle:function(){return{backgroundColor:this.activeTabColor,color:this.activeTextColor}},activeTitleColor:function(){return{color:this.activeTabColor}}},methods:{navigateToTab:function(t){var e=this;this.beforeTabChange(this.activeTabIndex,function(){e.changeTab(e.activeTabIndex,t)})},setLoading:function(t){this.loading=t,this.$emit("on-loading",t)},setValidationError:function(t,e){this.tabs[this.activeTabIndex].validationError=e,this.$emit("on-error",e),e&&t.$emit&&t.$emit("on-error",e)},validateBeforeChange:function(t,e,n){var i=this;if(this.setValidationError(e,null),t.then&&"function"==typeof t.then)this.setLoading(!0),t.then(function(t){i.setLoading(!1);var e=!0===t;i.executeBeforeChange(e,n)}).catch(function(t){i.setLoading(!1),i.setValidationError(e,t)});else{var a=!0===t;this.executeBeforeChange(a,n)}},executeBeforeChange:function(t,e){this.$emit("on-validate",t,this.activeTabIndex),t?e():this.tabs[this.activeTabIndex].validationError="error"},beforeTabChange:function(t,e){if(!this.loading){var n=this.tabs[t];if(n&&void 0!==n.beforeChange){var i=n.beforeChange();this.validateBeforeChange(i,n,e)}else e()}},changeTab:function(t,e){if(!(e<0||e>=this.tabCount)){var n=this.tabs[t],i=this.tabs[e];n&&(n.active=!1,i&&(i.active=!0)),this.activeTabIndex=e,this.$emit("tab-change",e,i,n),this.tryChangeRoute(i)}},tryChangeRoute:function(t){this.$router&&t&&t.route&&this.$router.push(t.route)},getTabs:function(){return this.$slots.default?this.$slots.default.filter(function(t){return t.componentOptions}).map(function(t){return t.componentInstance}):[]},initTabs:function(){if(this.tabs.length>0&&0===this.startIndex){var t=this.tabs[this.activeTabIndex];t.active=!0,this.tryChangeRoute(t)}if(this.startIndex<this.tabs.length){var e=this.tabs[this.startIndex];this.activeTabIndex=this.startIndex,e.active=!0,this.tryChangeRoute(this.tabs[this.startIndex])}}},updated:function(){var t=this.getTabs();this.tabs.length!==t.length&&(this.tabs=t,this.initTabs())},mounted:function(){this.tabs=this.getTabs(),this.initTabs()}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(2),a=n.n(i),o=n(1),s=n.n(o),r={VueTabs:a.a,VTab:s.a,install:function(t){t.component("vue-tabs",a.a),t.component("v-tab",s.a)}};"undefined"!=typeof window&&window.Vue&&window.Vue.use(r),e.default=r},function(t,e){},function(t,e){},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("section",{staticClass:"tab-container",attrs:{role:"tabpanel",id:t.hash,"aria-hidden":!t.active}},[t._t("title"),t._v(" "),t._t("default")],2)},staticRenderFns:[]},t.exports.render._withStripped=!0},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-tabs",class:t.stackedClass},[n("ul",{class:t.classList,attrs:{role:"tablist"}},[t._l(t.tabs,function(e,i){return t._t("tab",[n("li",{key:e,staticClass:"tab",class:{active:e.active},attrs:{role:"presentation"}},["top"===t.textPosition?n("span",{staticClass:"title title_top",style:e.active?t.activeTitleColor:{}},[t._v("\n            "+t._s(e.title)+"\n        ")]):t._e(),t._v(" "),n("a",{style:e.active?t.activeTabStyle:{},attrs:{href:"#"+e.id,"aria-selected":e.active,"aria-controls":"#"+e.id,role:"tab"},on:{click:function(e){e.preventDefault(),t.navigateToTab(i)}}},[n("i",{class:e.icon},["center"===t.textPosition?n("span",[t._v("\n               "+t._s(e.title)+"\n            ")]):t._e()])]),t._v(" "),"bottom"===t.textPosition?n("span",{staticClass:"title title_bottom",style:e.active?t.activeTitleColor:{}},[t._v("\n            "+t._s(e.title)+"\n        ")]):t._e()])],{tab:e,index:i,clickHandler:t.navigateToTab})})],2),t._v(" "),n("div",{staticClass:"tab-content"},[t._t("default")],2)])},staticRenderFns:[]},t.exports.render._withStripped=!0}])});
+/*!
+ * vue-nav-tabs v0.5.0
+ * (c) 2017-present cristij <[e-mail]>
+ * Released under the MIT License.
+ */
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (factory((global.vueTabs = global.vueTabs || {})));
+}(this, (function (exports) { 'use strict';
+
+var VueTabs = {
+    name: 'vue-tabs',
+    props: {
+        activeTabColor: String,
+        activeTextColor: String,
+        /**
+         * Tab title position: center | bottom | top
+         */
+        textPosition: {
+            type: String,
+            default: 'center'
+        },
+        /**
+         * Tab type: tabs | pills
+         */
+        type: {
+            type: String,
+            default: 'tabs'
+        },
+        direction: {
+            type: String,
+            default: 'horizontal'
+        },
+        /**
+         * Centers the tabs and makes the container div full width
+         */
+        centered: Boolean,
+        value: [String, Number, Object]
+    },
+    data: function data() {
+        return {
+            activeTabIndex: 0,
+            tabs: []
+        };
+    },
+
+    computed: {
+        isTabShape: function isTabShape() {
+            return this.type === 'tabs';
+        },
+        isStacked: function isStacked() {
+            return this.direction === 'vertical';
+        },
+        classList: function classList() {
+            var navType = this.isTabShape ? 'nav-tabs' : 'nav-pills';
+            var centerClass = this.centered ? 'nav-justified' : '';
+            var isStacked = this.isStacked ? 'nav-stacked' : '';
+            return 'nav ' + navType + ' ' + centerClass + ' ' + isStacked;
+        },
+        stackedClass: function stackedClass() {
+            return this.isStacked ? 'stacked' : '';
+        },
+        activeTabStyle: function activeTabStyle() {
+            return {
+                backgroundColor: this.activeTabColor,
+                color: this.activeTextColor
+            };
+        }
+    },
+    methods: {
+        navigateToTab: function navigateToTab(index, route) {
+            this.changeTab(this.activeTabIndex, index, route);
+        },
+        activateTab: function activateTab(index) {
+            this.activeTabIndex = index;
+            var tab = this.tabs[index];
+            tab.active = true;
+            this.$emit('input', tab.title);
+        },
+        changeTab: function changeTab(oldIndex, newIndex, route) {
+            this.activeTabIndex = newIndex;
+            var oldTab = this.tabs[oldIndex];
+            var newTab = this.tabs[newIndex];
+            oldTab.active = false;
+            newTab.active = true;
+            this.$emit('input', this.tabs[newIndex].title);
+            this.$emit('tab-change', newIndex, newTab, oldTab);
+            this.tryChangeRoute(route);
+        },
+        tryChangeRoute: function tryChangeRoute(route) {
+            if (this.$router && route) {
+                this.$router.push(route);
+            }
+        },
+        addTab: function addTab(item) {
+            var index = this.$slots.default.indexOf(item.$vnode);
+            this.tabs.splice(index, 0, item);
+        },
+        removeTab: function removeTab(item) {
+            var tabs = this.tabs;
+            var index = tabs.indexOf(item);
+            if (index > -1) {
+                tabs.splice(index, 1);
+            }
+        },
+        getTabs: function getTabs() {
+            if (this.$slots.default) {
+                return this.$slots.default.filter(function (comp) {
+                    return comp.componentOptions;
+                });
+            }
+            return [];
+        },
+        findTabAndActivate: function findTabAndActivate(tabName) {
+            var indexToActivate = this.tabs.findIndex(function (tab) {
+                return tab.title === tabName;
+            });
+            if (indexToActivate != -1) {
+                this.changeTab(this.activeTabIndex, indexToActivate);
+            } else {
+                this.changeTab(this.activeTabIndex, 0);
+            }
+        },
+        renderTabTitle: function renderTabTitle(index) {
+            var position = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
+            var h = this.$createElement;
+
+            if (this.tabs.length === 0) return;
+            var tab = this.tabs[index];
+            var active = tab.active,
+                title = tab.title;
+
+            var titleStyles = { color: this.activeTabColor };
+            if (position === 'center') titleStyles.color = this.activeTextColor;
+            var simpleTitle = h(
+                'span',
+                { 'class': 'title title_' + position, style: active ? titleStyles : {} },
+                [position === 'center' && this.renderIcon(index), '\xA0', title]
+            );
+
+            if (tab.$slots.title) return tab.$slots.title;
+            return simpleTitle;
+        },
+        renderIcon: function renderIcon(index) {
+            var h = this.$createElement;
+
+            if (this.tabs.length === 0) return;
+            var tab = this.tabs[index];
+            var icon = tab.icon;
+
+            var simpleIcon = h(
+                'i',
+                { 'class': icon },
+                []
+            );
+            if (!tab.$slots.title && icon) return simpleIcon;
+        },
+        renderTabs: function renderTabs() {
+            var _this = this;
+
+            var h = this.$createElement;
+
+            return this.tabs.map(function (tab, index) {
+                if (!tab) return;
+                var route = tab.route,
+                    id = tab.id,
+                    title = tab.title,
+                    icon = tab.icon;
+
+                var active = _this.activeTabIndex === index;
+                return h(
+                    'li',
+                    {
+                        attrs: { name: 'tab',
+                            role: 'presentation' },
+                        on: {
+                            'click': function click() {
+                                return _this.navigateToTab(index, route);
+                            }
+                        },
+                        'class': ['tab', { active: active }],
+                        key: title },
+                    [_this.textPosition === 'top' && _this.renderTabTitle(index, _this.textPosition), h(
+                        'a',
+                        {
+                            attrs: { href: 'javascript:void(0)',
+
+                                'aria-selected': active,
+                                'aria-controls': '#' + id,
+                                role: 'tab' },
+                            on: {
+                                'click': function click() {
+                                    return _this.navigateToTab(index);
+                                }
+                            },
+
+                            style: active ? _this.activeTabStyle : {},
+                            'class': { 'active_tab': active } },
+                        [_this.textPosition !== 'center' && !tab.$slots.title && _this.renderIcon(index), _this.textPosition === 'center' && _this.renderTabTitle(index, _this.textPosition)]
+                    ), _this.textPosition === 'bottom' && _this.renderTabTitle(index, _this.textPosition)]
+                );
+            });
+        }
+    },
+    render: function render() {
+        var h = arguments[0];
+
+        var tabList = this.renderTabs();
+        return h(
+            'div',
+            { 'class': ['vue-tabs', this.stackedClass] },
+            [h(
+                'div',
+                { 'class': [{ 'nav-tabs-navigation': !this.isStacked }, { 'left-vertical-tabs': this.isStacked }] },
+                [h(
+                    'div',
+                    { 'class': ['nav-tabs-wrapper', this.stackedClass] },
+                    [h(
+                        'ul',
+                        { 'class': this.classList, attrs: { role: 'tablist' }
+                        },
+                        [tabList]
+                    )]
+                )]
+            ), h(
+                'div',
+                { 'class': ['tab-content', { 'right-text-tabs': this.isStacked }] },
+                [this.$slots.default]
+            )]
+        );
+    },
+
+    watch: {
+        tabs: function tabs(newList) {
+            if (newList.length > 0 && !this.value) {
+                this.activateTab(this.activeTabIndex);
+            }
+            if (newList.length > 0 && this.value) {
+                this.findTabAndActivate(this.value);
+            }
+        }
+    },
+    value: function value(newVal) {
+        this.findTabAndActivate(newVal);
+    }
+};
+
+var VTab = {
+    name: 'v-tab',
+    props: {
+        title: {
+            type: String,
+            default: ''
+        },
+        icon: {
+            type: String,
+            default: ''
+        },
+        /***
+         * Function to execute before tab switch. Return value must be boolean
+         * If the return result is false, tab switch is restricted
+         */
+        beforeChange: {
+            type: Function
+        },
+        id: String,
+        route: {
+            type: [String, Object]
+        },
+        transitionName: String,
+        transitionMode: String
+    },
+    computed: {
+        isValidParent: function isValidParent() {
+            return this.$parent.$options.name === 'vue-tabs';
+        },
+        hash: function hash() {
+            return '#' + this.id;
+        }
+    },
+    data: function data() {
+        return {
+            active: false,
+            validationError: null
+        };
+    },
+    mounted: function mounted() {
+        this.$parent.addTab(this);
+    },
+    destroyed: function destroyed() {
+        if (this.$el && this.$el.parentNode) {
+            this.$el.parentNode.removeChild(this.$el);
+        }
+        this.$parent.removeTab(this);
+    },
+    render: function render() {
+        var h = arguments[0];
+
+        return h(
+            'section',
+            { 'class': 'tab-container',
+                attrs: { role: 'tabpanel' },
+                directives: [{
+                    name: 'show',
+                    value: this.active
+                }]
+            },
+            [this.$slots.default]
+        );
+    }
+};
+
+var VueTabsPlugin = {
+  install: function install(Vue) {
+    Vue.component('vue-tabs', VueTabs);
+    Vue.component('v-tab', VTab);
+  }
+};
+// Automatic installation if Vue has been added to the global scope.
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.use(VueTabsPlugin);
+  window.VueTabs = VueTabsPlugin;
+}
+
+exports['default'] = VueTabsPlugin;
+exports.VueTabs = VueTabs;
+exports.VTab = VTab;
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+})));

package.json

 {
   "name": "vue-nav-tabs",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "A vue based tab component",
-  "main": "dist/vue-tabs.js",
-  "homepage": "https://github.com/cristijora/vue-tabs",
-  "scripts": {
-    "dev": "node build/dev-server.js",
-    "start": "node build/dev-server.js",
-    "build": "cross-env FULL_BUNDLE=false webpack --progress --config webpack.build.config.js",
-    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
-    "e2e": "node test/e2e/runner.js",
-    "test": "npm run unit && npm run e2e",
-    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
+  "repository": {
+    "url": "cristijora/vue-tabs",
+    "type": "git"
   },
-  "keywords": [
-    "vue",
-    "vuejs",
-    "tabs",
-    "nav",
-    "tab management"
+  "main": "dist/vue-tabs.common.js",
+  "unpkg": "dist/vue-tabs",
+  "poi": {
+    "entry": "dev/main.js",
+    "dist": "dev/dist",
+    "homepage": "/vue-tabs/"
+  },
+  "files": [
+    "dist",
+    "themes"
   ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/cristijora/vue-tabs"
+  "scripts": {
+    "test": "echo 'no tests!' && npm run lint",
+    "prepublish": "npm run build",
+    "lint": "xo",
+    "build:css": "node-sass themes/ -o themes/ && node-sass themes/vue-tabs.scss dist/vue-tabs.min.css --output-style compressed",
+    "build": "bili --name Vue-Tabs --format cjs --format umd --compress --banner --js babel && npm run build:css",
+    "build:example": "poi build",
+    "dev": "poi --port 5000",
+    "deploy": "npm run build:example && gh-pages -d example/dist"
   },
+  "author": "cristij <[e-mail]>",
+  "license": "MIT",
+  "dependencies": {},
   "devDependencies": {
-    "autoprefixer": "^6.7.2",
-    "babel-core": "^6.22.1",
-    "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.2.10",
-    "babel-plugin-istanbul": "^3.1.2",
-    "babel-plugin-transform-runtime": "^6.22.0",
-    "babel-preset-env": "^1.2.1",
-    "babel-preset-stage-2": "^6.22.0",
-    "babel-register": "^6.22.0",
-    "chai": "^3.5.0",
-    "chalk": "^1.1.3",
-    "chromedriver": "^2.27.2",
-    "connect-history-api-fallback": "^1.3.0",
-    "copy-webpack-plugin": "^4.0.1",
-    "cross-env": "^3.1.4",
-    "cross-spawn": "^5.0.1",
-    "css-loader": "^0.26.1",
-    "eslint": "^3.14.1",
-    "eslint-config-standard": "^6.2.1",
-    "eslint-friendly-formatter": "^2.0.7",
-    "eslint-loader": "^1.6.1",
-    "eslint-plugin-html": "^2.0.0",
-    "eslint-plugin-promise": "^3.4.0",
-    "eslint-plugin-standard": "^2.0.1",
-    "eventsource-polyfill": "^0.9.6",
-    "express": "^4.14.1",
-    "extract-text-webpack-plugin": "^2.0.0",
-    "file-loader": "^0.10.0",
-    "friendly-errors-webpack-plugin": "^1.1.3",
-    "html-webpack-plugin": "^2.28.0",
-    "http-proxy-middleware": "^0.17.3",
-    "inject-loader": "^2.0.1",
-    "karma": "^1.4.1",
-    "karma-coverage": "^1.1.1",
-    "karma-mocha": "^1.3.0",
-    "karma-phantomjs-launcher": "^1.0.2",
-    "karma-phantomjs-shim": "^1.4.0",
-    "karma-sinon-chai": "^1.2.4",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.26",
-    "karma-webpack": "^2.0.2",
-    "lolex": "^1.5.2",
-    "mocha": "^3.2.0",
-    "nightwatch": "^0.9.12",
-    "node-sass": "^4.5.2",
-    "opn": "^4.0.2",
-    "optimize-css-assets-webpack-plugin": "^1.3.0",
-    "ora": "^1.1.0",
-    "phantomjs-prebuilt": "^2.1.14",
-    "rimraf": "^2.6.0",
-    "sass-loader": "^6.0.3",
-    "selenium-server": "^3.0.1",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
-    "sinon": "^2.1.0",
-    "sinon-chai": "^2.8.0",
-    "stats-webpack-plugin": "^0.6.0",
-    "url-loader": "^0.5.8",
-    "vue": "^2.2.2",
-    "vue-loader": "^11.1.4",
-    "vue-router": "^2.4.0",
-    "vue-style-loader": "^2.0.0",
-    "vue-template-compiler": "^2.2.4",
-    "webpack": "^2.2.1",
-    "webpack-bundle-analyzer": "^2.2.1",
-    "webpack-dev-middleware": "^1.10.0",
-    "webpack-hot-middleware": "^2.16.1",
-    "webpack-merge": "^2.6.1"
+    "babel-preset-stage-2": "^6.24.1",
+    "bili": "^0.16.0-rc.2",
+    "bootstrap": "^3.3.7",
+    "eslint-config-rem": "^3.0.0",
+    "gh-pages": "^1.0.0",
+    "node-sass": "^4.5.3",
+    "poi": "^9.1.0",
+    "rollup-plugin-babel": "^2.7.1",
+    "sass-loader": "^6.0.6",
+    "vue": "^2.3.4",
+    "vue-github-badge": "^1.0.0",
+    "vue-router": "^2.7.0",
+    "xo": "^0.18.0"
   },
-  "engines": {
-    "node": ">= 4.0.0",
-    "npm": ">= 3.0.0"
+  "xo": {
+    "extends": "rem/prettier",
+    "ignores": [
+      "dev/**"
+    ]
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ]
+  "babel": {
+    "presets": [
+      [
+        "vue-app",
+        {
+          "useBuiltIns": true
+        }
+      ]
+    ]
+  }
 }

README.md

@@ -5,8 +5,14 @@ # Vue-tabs
 ## Demos
-* [Basic demo](https://jsfiddle.net/CristiJ/b44cc4dq/22/)
-* [Icons and colors](https://jsfiddle.net/CristiJ/b44cc4dq/26/)
-* [Full width centered tabs with text bellow](https://jsfiddle.net/CristiJ/b44cc4dq/29/)
-* [Vertical tabs](https://jsfiddle.net/CristiJ/b44cc4dq/32/)
+* [Basic demo](https://jsfiddle.net/b44cc4dq/187/)
+* [Icons and colors](https://jsfiddle.net/b44cc4dq/188/)
+* [Full width centered tabs with text bellow](https://jsfiddle.net/b44cc4dq/189/)
+* [Vertical tabs](https://jsfiddle.net/b44cc4dq/190/)
 
+# Theming
+Vue-tabs supports 3 different themes by default:
+* [Default (bootstrap)](https://jsfiddle.net/CristiJ/b44cc4dq/22/)
+* [Paper](https://jsfiddle.net/b44cc4dq/191/)
+* [Material](https://jsfiddle.net/b44cc4dq/198/)
+
 ## [Documentation](https://cristijora.github.io/vue-tabs/#/)
 

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Shell access

Supply chain risk

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 3 instances in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

13

decreased by-80.88%

Number of low maintenance alerts

2

decreased by-33.33%

Number of lines in readme file

18

increased by50%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

111472

decreased by-87.81%

Number of package files

21

decreased by-68.66%

Lines of code

1151

decreased by-39.93%

Number of low quality alerts

3

increased by200%

No dependency changes