├── .gitignore
├── src
    ├── index.js
    ├── TabList.vue
    ├── TabPane.vue
    └── Tabs.vue
├── package.json
├── README.md
└── LICENSE


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Tabs from './Tabs'
 2 | import TabList from './TabList'
 3 | import TabPane from './TabPane'
 4 | 
 5 | export {
 6 |   Tabs,
 7 |   TabList,
 8 |   TabPane
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/TabList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul :class="classObject" role="tablist">
 3 |     <slot></slot>
 4 |   </ul>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: {
10 |     alignment: {
11 |       type: String,
12 |       default: ''
13 |     }
14 |   },
15 | 
16 |   computed: {
17 |     classObject () {
18 |       const { alignment } = this
19 |       return {
20 |         'tab-list': true,
21 |         'is-flex': true,
22 |         [`is-${alignment}`]: alignment
23 |       }
24 |     }
25 |   }
26 | }
27 | </script>
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-bulma-tabs",
 3 |   "version": "1.1.3",
 4 |   "description": "Tabs component for Vue Bulma",
 5 |   "main": "src/index.js",
 6 |   "peerDependencies": {
 7 |     "bulma": ">=0.6",
 8 |     "vue": ">=2"
 9 |   },
10 |   "scripts": {},
11 |   "repository": "vue-bulma/tabs",
12 |   "keywords": [
13 |     "vue",
14 |     "bulma",
15 |     "vue-bulma",
16 |     "vue-bulma-component",
17 |     "vue-bulma-tabs",
18 |     "tabs"
19 |   ],
20 |   "author": "Fangdun Cai <cfddream@gmail.com>",
21 |   "license": "MIT"
22 | }
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tabs
 2 | 
 3 | [Tabs](http://bulma.io/documentation/components/tabs) component for Vue Bulma.
 4 | 
 5 | 
 6 | ## Installation
 7 | 
 8 | ```console
 9 | $ npm install vue-bulma-tabs --save
10 | ```
11 | 
12 | 
13 | ## Examples
14 | 
15 | ```vue
16 | <template>
17 |   <tabs animation="slide" :only-fade="false">
18 |     <tab-pane label="Pictures">Pictures Tab</tab-pane>
19 |     <tab-pane label="Music">Music Tab</tab-pane>
20 |     <tab-pane label="Videos" selected>Video Tab</tab-pane>
21 |     <tab-pane label="Documents" disabled>Document Tab</tab-pane>
22 |   </tabs>
23 | </template>
24 | 
25 | <script>
26 | import { Tabs, TabPane } from 'vue-bulma-tabs'
27 | 
28 | export default {
29 |   components: {
30 |     Tabs,
31 |     TabPane
32 |   }
33 | }
34 | </script>
35 | ```
36 | 
37 | 
38 | ## Badges
39 | 
40 | ![](https://img.shields.io/badge/license-MIT-blue.svg)
41 | ![](https://img.shields.io/badge/status-stable-green.svg)
42 | 
43 | ---
44 | 
45 | > [fundon.me](https://fundon.me) &nbsp;&middot;&nbsp;
46 | > GitHub [@fundon](https://github.com/fundon) &nbsp;&middot;&nbsp;
47 | > Twitter [@_fundon](https://twitter.com/_fundon)
48 | 
49 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | (The MIT License)
 2 | 
 3 | Copyright (c) 2016 fundon &lt;cfddream@gmail.com&lt;
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/TabPane.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition
  3 |     :name="animation"
  4 |     mode="out-in"
  5 |     appear
  6 |     :appear-active-class="transition.enterClass"
  7 |     :enter-active-class="transition.enterClass"
  8 |     :leave-active-class="transition.leaveClass"
  9 |   >
 10 |     <div
 11 |       role="tabpanel"
 12 |       v-show="realSelected"
 13 |       :class="classObject"
 14 |       :aria-labelledby="label"
 15 |       :aria-hidden="hidden"
 16 |     >
 17 |       <slot></slot>
 18 |     </div>
 19 |   </transition>
 20 | </template>
 21 | 
 22 | <script>
 23 | const TS = {
 24 |   'fade': {
 25 |     enterClass: 'fadeIn',
 26 |     leaveClass: 'fadeOut'
 27 |   },
 28 |   'fade-horizontal-rtl': {
 29 |     enterClass: 'fadeInRight',
 30 |     leaveClass: 'fadeOutLeft'
 31 |   },
 32 |   'fade-horizontal-ltr': {
 33 |     enterClass: 'fadeInLeft',
 34 |     leaveClass: 'fadeOutRight'
 35 |   },
 36 |   'slide-horizontal-rtl': {
 37 |     enterClass: 'slideInRight',
 38 |     leaveClass: 'slideOutLeft'
 39 |   },
 40 |   'slide-horizontal-ltr': {
 41 |     enterClass: 'slideInLeft',
 42 |     leaveClass: 'slideOutRight'
 43 |   },
 44 |   'fade-vertical-dtu': {
 45 |     enterClass: 'fadeInUp',
 46 |     leaveClass: 'fadeOutUp'
 47 |   },
 48 |   'fade-vertical-utd': {
 49 |     enterClass: 'fadeInDown',
 50 |     leaveClass: 'fadeOutDown'
 51 |   },
 52 |   'slide-vertical-dtu': {
 53 |     enterClass: 'slideInUp',
 54 |     leaveClass: 'slideOutUp'
 55 |   },
 56 |   'slide-vertical-utd': {
 57 |     enterClass: 'slideInDown',
 58 |     leaveClass: 'slideOutDown'
 59 |   }
 60 | }
 61 | 
 62 | export default {
 63 |   props: {
 64 |     icon: String,
 65 |     selected: Boolean,
 66 |     disabled: Boolean,
 67 |     label: {
 68 |       type: String,
 69 |       required: true
 70 |     },
 71 |     mode: {
 72 |       type: String,
 73 |       default: 'out-in'
 74 |     }
 75 |   },
 76 | 
 77 |   data () {
 78 |     return {
 79 |       realSelected: this.selected,
 80 |       transition: TS['fade']
 81 |     }
 82 |   },
 83 | 
 84 |   created () {
 85 |     this.$parent.tabPanes.push(this)
 86 |   },
 87 | 
 88 |   beforeDestroy () {
 89 |     this.$parent.tabPanes.splice(this.index, 1)
 90 |   },
 91 | 
 92 |   computed: {
 93 |     classObject () {
 94 |       const { realSelected } = this
 95 |       return {
 96 |         'tab-pane': true,
 97 |         'animated': true,
 98 |         'is-active': realSelected,
 99 |         'is-deactive': !realSelected
100 |       }
101 |     },
102 |     layout () {
103 |       return this.$parent.layout
104 |     },
105 |     direction () {
106 |       if (this.layout === 'top' || this.layout === 'bottom') {
107 |         return 'horizontal'
108 |       } else if (this.layout === 'left' || this.layout === 'right') {
109 |         return 'vertical'
110 |       }
111 |       return ''
112 |     },
113 |     animation () {
114 |       return this.$parent.animation
115 |     },
116 |     onlyFade () {
117 |       return this.$parent.onlyFade
118 |     },
119 |     gte () {
120 |       if (this.direction === 'vertical') {
121 |         return 'utd'
122 |       } else if (this.direction === 'horizontal') {
123 |         return 'ltr'
124 |       }
125 |       return ''
126 |     },
127 |     lt () {
128 |       if (this.direction === 'vertical') {
129 |         return 'dtu'
130 |       } else if (this.direction === 'horizontal') {
131 |         return 'rtl'
132 |       }
133 |       return ''
134 |     },
135 |     hidden () {
136 |       return this.realSelected ? 'false' : 'true'
137 |     },
138 |     index () {
139 |       return this.$parent.tabPanes.indexOf(this)
140 |     }
141 |   },
142 | 
143 |   watch: {
144 |     '$parent.realSelectedIndex' (index, prevIndex) {
145 |       if (!this.onlyFade) {
146 |         let transition
147 |         if (prevIndex === -1 || prevIndex > index) {
148 |           transition = `${this.animation}${this.layout ? `-${this.direction}` : ''}${this.gte ? `-${this.gte}` : ''}`
149 |         } else {
150 |           transition = `${this.animation}${this.layout ? `-${this.direction}` : ''}${this.lt ? `-${this.lt}` : ''}`
151 |         }
152 |         this.transition = TS[transition] || TS['fade']
153 |       }
154 |       this.realSelected = this.index === index
155 |     }
156 |   }
157 | }
158 | </script>
159 | 


--------------------------------------------------------------------------------
/src/Tabs.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :class="{ 'vue-bulma-tabs': true, [`is-layout-${layout}`]: true }">
  3 |     <div  :class="{ tabs: true, [`is-${size}`]: size, [`is-${alignment}`]: alignment, [`is-${type}`]: type, 'is-fullwidth': isFullwidth }">
  4 |       <slot name="left-tab-list"></slot>
  5 |       <tab-list>
  6 |         <li v-for="(tab, index) in tabPanes"
  7 |           role="tab"
  8 |           :class="{ 'is-active': isActived(index), 'is-disabled': tab.disabled, 'is-flex': true }"
  9 |           :aria-selected="isActived(index) ? 'true' : 'false'"
 10 |           :aria-expanded="isActived(index) ? 'true' : 'false'"
 11 |           :aria-disabled="tab.disabled ? 'true' : 'false'"
 12 |           :selected="isActived(index)"
 13 |           :disabled="tab.disabled"
 14 |           @click="select(index)">
 15 |           <a class="is-unselectable">
 16 |             <span :class="['icon', { 'is-small': size !== 'large' }]" v-if="tab.icon"><i :class="tab.icon"></i></span>
 17 |             <span>{{ tab.label }}</span>
 18 |           </a>
 19 |         </li>
 20 |       </tab-list>
 21 |       <slot name="right-tab-list"></slot>
 22 |     </div>
 23 |     <div class="tab-content is-flex">
 24 |       <slot></slot>
 25 |     </div>
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script>
 30 | import TabList from './TabList'
 31 | 
 32 | export default {
 33 |   components: {
 34 |     TabList
 35 |   },
 36 | 
 37 |   props: {
 38 |     isFullwidth: Boolean,
 39 |     layout: {
 40 |       type: String,
 41 |       default: 'top',
 42 |       validator (val) {
 43 |         return ['top', 'bottom', 'left', 'right'].indexOf(val) > -1
 44 |       }
 45 |     },
 46 |     type: {
 47 |       type: String,
 48 |       default: ''
 49 |     },
 50 |     size: {
 51 |       type: String,
 52 |       default: ''
 53 |     },
 54 |     alignment: {
 55 |       type: String,
 56 |       default: ''
 57 |     },
 58 |     selectedIndex: {
 59 |       type: Number,
 60 |       default: -1
 61 |     },
 62 |     animation: {
 63 |       type: String,
 64 |       default: 'fade'
 65 |     },
 66 |     onlyFade: {
 67 |       type: Boolean,
 68 |       default: true
 69 |     }
 70 |   },
 71 | 
 72 |   data () {
 73 |     return {
 74 |       realSelectedIndex: this.selectedIndex,
 75 |       tabPanes: []
 76 |     }
 77 |   },
 78 | 
 79 |   mounted () {
 80 |     this.update()
 81 |     if (this.realSelectedIndex === -1) {
 82 |       this.select(0)
 83 |     }
 84 |   },
 85 | 
 86 |   methods: {
 87 |     update () {
 88 |       for (const tabPane of this.tabPanes) {
 89 |         if (!tabPane.disabled && tabPane.realSelected) {
 90 |           this.select(tabPane.index)
 91 |           break
 92 |         }
 93 |       }
 94 |     },
 95 | 
 96 |     isActived (index) {
 97 |       return index === this.realSelectedIndex
 98 |     },
 99 | 
100 |     select (index) {
101 |       this.$emit('tab-selected', index)
102 |       this.realSelectedIndex = index
103 |     }
104 |   },
105 |   watch: {
106 |     selectedIndex (newIndex) {
107 |       this.select(newIndex)
108 |     }
109 |   }
110 | }
111 | </script>
112 | 
113 | <style lang="scss">
114 | @import '~bulma/sass/utilities/initial-variables';
115 | 
116 | .vue-bulma-tabs {
117 |   position: relative;
118 |   display: flex;
119 |   flex: 1;
120 | 
121 |   &.is-layout-top {
122 |     flex-direction: column;
123 |   }
124 |   &.is-layout-bottom {
125 |     flex-direction: column-reverse;
126 |   }
127 |   &.is-layout-left {
128 |     flex-direction: row;
129 |     overflow-x: hidden;
130 |     overflow-y: auto;
131 | 
132 |     .tab-list {
133 |       flex-direction: column;
134 |       align-items: flex-start;
135 |       // max-width: calc(100% / 6);
136 |       border-bottom: none;
137 |       border-right: 1px solid $grey-light;
138 |     }
139 | 
140 |     li {
141 |       width: 100%;
142 | 
143 |       a {
144 |         border-bottom: none;
145 |         border-right: 1px solid $grey-light;
146 |         margin-bottom: 0;
147 |         margin-right: -1px;
148 |         justify-content: flex-end;
149 | 
150 |         &:hover {
151 |           border-right-color: $grey-darker;
152 |         }
153 |       }
154 | 
155 |       &.is-active {
156 |         a {
157 |           border-right-color: $turquoise;
158 |         }
159 |       }
160 |     }
161 | 
162 |     .tab-content {
163 |       margin: 30px 10px;
164 |     }
165 |   }
166 |   &.is-layout-right {
167 |     flex-direction: row-reverse;
168 |     overflow-x: hidden;
169 |     overflow-y: auto;
170 | 
171 |     .tab-list {
172 |       flex-direction: column;
173 |       align-items: flex-end;
174 |       justify-content: flex-start;
175 |       // max-width: calc(100% / 6);
176 |       border-bottom: none;
177 |       border-left: 1px solid $grey-light;
178 | 
179 |       li {
180 |         width: 100%;
181 | 
182 |         a {
183 |           border-bottom: none;
184 |           border-left: 1px solid $grey-light;
185 |           margin-bottom: 0;
186 |           margin-left: -1px;
187 |           justify-content: flex-start;
188 | 
189 |           &:hover {
190 |             border-left-color: $grey-darker;
191 |           }
192 |         }
193 | 
194 |         &.is-active {
195 |           a {
196 |             border-left-color: $turquoise;
197 |           }
198 |         }
199 |       }
200 |     }
201 | 
202 |     .tab-content {
203 |       margin: 30px 10px;
204 |     }
205 |   }
206 | 
207 |   .tab-content {
208 |     flex-direction: column;
209 |     overflow: hidden;
210 |     position: relative;
211 |     margin: 10px 30px;
212 |     flex: 1 1;
213 |   }
214 | 
215 |   .tab-pane {
216 |     width: 100%;
217 |     flex: 1 1;
218 | 
219 |     &.is-active {
220 |       transform: translateZ(0);
221 |     }
222 | 
223 |     &[class*="Out"] {
224 |       overflow: hidden;
225 |       position: absolute;
226 |       top: 0;
227 |       left: 0;
228 |       right: 0;
229 |       bottom: 0;
230 |       transform: translateX(0);
231 |       transform: translateY(0);
232 |     }
233 |   }
234 | }
235 | </style>
236 | 


--------------------------------------------------------------------------------