├── .gitignore
├── src
    ├── index.js
    ├── StepItem.vue
    └── Tracker.vue
├── package.json
├── README.md
└── LICENSE


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


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export StepItem from './StepItem'
2 | export default from './Tracker'
3 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-bulma-progress-tracker",
 3 |   "version": "0.0.4",
 4 |   "description": "ProgressTracker component is based on progress-tracker for Vue Bulma",
 5 |   "repository": "vue-bulma/progress-tracker",
 6 |   "license": "MIT",
 7 |   "author": {
 8 |     "name": "Fangdun Cai",
 9 |     "email": "cfddream@gmail.com",
10 |     "url": "fundon.me"
11 |   },
12 |   "keywords": [
13 |     "vue",
14 |     "bulma",
15 |     "vue-bulma",
16 |     "vue-bulma-component",
17 |     "vue-bulma-progress-tracker",
18 |     "progress-tracker",
19 |     "progress",
20 |     "timeline",
21 |     "tracker"
22 |   ],
23 |   "main": "src/index.js",
24 |   "peerDependencies": {
25 |     "bulma": ">=0.2",
26 |     "vue": ">=2"
27 |   },
28 |   "dependencies": {
29 |     "progress-tracker": "1.0.0"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/StepItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li class="progress-step" :class="{ 'is-active': isActive, 'is-complete': isComplete }">
 3 |     <span class="progress-marker">{{ marker }}</span>
 4 |     <span class="progress-text" v-if="title">
 5 |       <h4 class="progress-title">{{ title }}</h4>{{ text }}
 6 |       <slot></slot>
 7 |     </span>
 8 |   </li>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   props: {
14 |     isActive: Boolean,
15 |     isComplete: Boolean,
16 |     marker: {
17 |       type: String,
18 |       default: ''
19 |     },
20 |     kind: String,
21 |     title: String,
22 |     text: String
23 |   },
24 | 
25 |   created () {
26 |     this._isStepItem = true
27 |   },
28 | 
29 |   computed: {
30 |     index () {
31 |       return this.$parent.$stepItems.indexOf(this)
32 |     }
33 |   }
34 | 
35 | }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ProgressTracker
 2 | 
 3 | ProgressTracker component is based on [progress-tracker](http://nigelotoole.github.io/progress-tracker/) for Vue Bulma.
 4 | 
 5 | 
 6 | ## Installation
 7 | 
 8 | ```
 9 | $ npm install vue-bulma-progress-tracker --save
10 | ```
11 | 
12 | 
13 | ## Examples
14 | 
15 | ```vue
16 | <template>
17 |   <progress-tracker>
18 |     <step-item v-for="n in [1, 2, 3, 4, 5]" :is-complete="n < 3" :is-active="n === 3"></step-item>
19 |   </progress-tracker>
20 | </template>
21 | 
22 | <script>
23 | import ProgressTracker, { StepItem } from 'vue-bulma-progress-tracker'
24 | 
25 | export default {
26 |   components: {
27 |     ProgressTracker,
28 |     StepItem
29 |   }
30 | }
31 | </script>
32 | ```
33 | 
34 | 
35 | ## Badges
36 | 
37 | ![](https://img.shields.io/badge/license-MIT-blue.svg)
38 | ![](https://img.shields.io/badge/status-stable-green.svg)
39 | 
40 | ---
41 | 
42 | > [fundon.me](https://fundon.me) &nbsp;&middot;&nbsp;
43 | > GitHub [@fundon](https://github.com/fundon) &nbsp;&middot;&nbsp;
44 | > Twitter [@_fundon](https://twitter.com/_fundon)
45 | 
46 | 


--------------------------------------------------------------------------------
/src/Tracker.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul :class="{
 3 |     'progress-tracker': true,
 4 |     [`progress-tracker--${alignment}`]: alignment,
 5 |     'progress-tracker--border': border,
 6 |     'progress-tracker--spaced': spaced,
 7 |     'progress-tracker--word': word,
 8 |     [`progress-tracker--word-${textAlign}`]: wordAlign,
 9 |     'progress-tracker--text': text
10 |   }">
11 |     <slot></slot>
12 |   </ul>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   props: {
18 |     alignment: String,
19 |     step: Number,
20 |     border: Boolean,
21 |     spaced: Boolean,
22 |     word: Boolean,
23 |     wordAlign: String,
24 |     text: Boolean,
25 |     textAlign: String
26 |   },
27 | 
28 |   computed: {
29 |     $stepItems () {
30 |       return this.$children.filter(child => child._isStepItem)
31 |     }
32 |   }
33 | }
34 | </script>
35 | 
36 | <style lang="scss">
37 | @import '~bulma/sass/utilities/variables';
38 | @import "~progress-tracker/app/styles/_progress-tracker.scss";
39 | 
40 | .progress-step:not(:last-child)::after {
41 |   z-index: 0;
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License
 2 | 
 3 | Copyright (c) Fangdun Cai <cfddream@gmail.com> (fundon.me)
 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
13 | all 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
21 | THE SOFTWARE.
22 | 


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