├── .gitignore
├── postcss.config.js
├── .babelrc
├── example
    ├── index.js
    ├── genCode.js
    └── App.vue
├── src
    ├── index.test.js
    ├── style.css
    └── index.js
├── .editorconfig
├── circle.yml
├── package.json
└── README.md


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


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: [
3 |     require('postcss-cssnext')()
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["@babel/preset-env", {
4 |       "modules": false
5 |     }]
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | new Vue({
5 |   el: '#app',
6 |   render: h => h(App)
7 | })
8 | 


--------------------------------------------------------------------------------
/src/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import StepIndicator from './'
3 | 
4 | test('it works', () => {
5 |   const wrapper = mount(StepIndicator)
6 |   expect(wrapper.isVueInstance()).toBe(true)
7 | })
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 


--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | jobs:
 3 |   build:
 4 |     working_directory: ~/repo
 5 |     docker:
 6 |       - image: circleci/node:latest
 7 |     branches:
 8 |       ignore:
 9 |         - gh-pages # list of branches to ignore
10 |         - /release\/.*/ # or ignore regexes
11 |     steps:
12 |       - checkout
13 |       - restore_cache:
14 |           key: dependency-cache-{{ checksum "yarn.lock" }}
15 |       - run:
16 |           name: install dependences
17 |           command: yarn install
18 |       - save_cache:
19 |           key: dependency-cache-{{ checksum "yarn.lock" }}
20 |           paths:
21 |             - ./node_modules
22 |       - run:
23 |           name: test
24 |           command: yarn run test
25 | 


--------------------------------------------------------------------------------
/example/genCode.js:
--------------------------------------------------------------------------------
 1 | import StepIndicator from '../src'
 2 | 
 3 | const makeAttrs = ctx => {
 4 |   const attrs = ['current', 'total', 'currentColor', 'defaultColor']
 5 |   return attrs.map(key => {
 6 |     if (ctx[key] !== StepIndicator.props[key].default) {
 7 |       return `    ${key}="${ctx[key]}"`
 8 |     }
 9 |     return false
10 |   }).filter(Boolean).join('\n')
11 | }
12 | 
13 | export default ctx => `
14 | <template>
15 |   <step-indicator
16 | ${makeAttrs(ctx)}
17 |   />
18 | </template>
19 | 
20 | <script>
21 | import StepIndicator from 'vue-step-indiactor'
22 | 
23 | export default {
24 |   components: {
25 |     StepIndicator
26 |   }
27 | }
28 | </script>
29 | 
30 | <style src="vue-step-indicator/dist/vue-step-indicator.css"></style>
31 | `.trim()
32 | 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
 1 | .step-indicators {
 2 |   position: relative;
 3 |   display: flex;
 4 |   justify-content: space-between;
 5 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
 6 |     sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 7 | }
 8 | 
 9 | .step-indicator {
10 |   border: 2px solid;
11 |   border-radius: 50%;
12 |   height: 32px;
13 |   width: 32px;
14 |   display: flex;
15 |   justify-content: center;
16 |   align-items: center;
17 |   font-weight: 700;
18 |   z-index: 2;
19 |   background-color: white;
20 |   box-sizing: border-box;
21 | }
22 | 
23 | .step-indicators-line {
24 |   position: absolute;
25 |   height: 2px;
26 |   top: 50%;
27 |   left: 24px;
28 |   right: 24px;
29 |   transform: translateY(-50%);
30 |   z-index: 1;
31 |   background: rgb(223, 231, 239);
32 | }
33 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import assign from 'nano-assign'
 2 | import './style.css'
 3 | 
 4 | export default {
 5 |   name: 'StepIndicator',
 6 |   functional: true,
 7 |   props: {
 8 |     total: {
 9 |       type: Number,
10 |       required: true
11 |     },
12 |     current: {
13 |       type: Number,
14 |       required: true
15 |     },
16 |     currentColor: {
17 |       type: String,
18 |       default: 'rgb(68, 0, 204)'
19 |     },
20 |     defaultColor: {
21 |       type: String,
22 |       default: 'rgb(130, 140, 153)'
23 |     },
24 |     handleClick: {
25 |       type: Function
26 |     }
27 |   },
28 |   render(h, { props, data }) {
29 |     const steps = []
30 |     for (let i = 0; i < props.total; i++) {
31 |       const color = i === props.current ? props.currentColor : props.defaultColor
32 |       steps.push(h('div', {
33 |         class: 'step-indicator',
34 |         style: {color, borderColor: color},
35 |         on: {
36 |           click: () => props.handleClick && props.handleClick(i)
37 |         }
38 |       }, [i + 1]))
39 |     }
40 |     const attrs = assign({}, data, {
41 |       class: ['step-indicators', data.class]
42 |     })
43 |     return h('div', attrs, [
44 |       h('span', {class: 'step-indicators-line'}),
45 |       ...steps
46 |     ])
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-step-indicator",
 3 |   "version": "0.1.2",
 4 |   "description": "Simple step indicator for Vue.js",
 5 |   "repository": {
 6 |     "url": "egoist/vue-step-indicator",
 7 |     "type": "git"
 8 |   },
 9 |   "main": "dist/vue-step-indicator.cjs.js",
10 |   "module": "dist/vue-step-indicator.es.js",
11 |   "unpkg": "dist/vue-step-indicator.js",
12 |   "cdn": "dist/vue-step-indicator.js",
13 |   "jsdelivr": "dist/vue-step-indicator.js",
14 |   "files": [
15 |     "dist"
16 |   ],
17 |   "scripts": {
18 |     "prepublishOnly": "npm test && npm run build",
19 |     "test": "echo fine",
20 |     "build": "bili",
21 |     "example": "poi",
22 |     "build:example": "poi build"
23 |   },
24 |   "author": {
25 |     "name": "EGOIST",
26 |     "email": "0x142857@gmail.com"
27 |   },
28 |   "license": "MIT",
29 |   "poi": {
30 |     "entry": "example/index.js",
31 |     "outDir": "example/dist"
32 |   },
33 |   "bili": {
34 |     "format": [
35 |       "cjs",
36 |       "umd",
37 |       "es"
38 |     ],
39 |     "moduleName": "StepIndicator"
40 |   },
41 |   "devDependencies": {
42 |     "bili": "^3.0.0",
43 |     "poi": "^10.0.0-beta.6",
44 |     "postcss-cssnext": "^3.1.0",
45 |     "prismjs": "^1.13.0",
46 |     "vue-github-badge": "^1.0.1",
47 |     "vue-prism-component": "^1.0.1"
48 |   },
49 |   "dependencies": {
50 |     "nano-assign": "^1.0.0"
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-step-indicator
 2 | 
 3 | [![NPM version](https://img.shields.io/npm/v/vue-step-indicator.svg?style=flat)](https://npmjs.com/package/vue-step-indicator) [![NPM downloads](https://img.shields.io/npm/dm/vue-step-indicator.svg?style=flat)](https://npmjs.com/package/vue-step-indicator) [![CircleCI](https://circleci.com/gh/egoist/vue-step-indicator/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/vue-step-indicator/tree/master)
 4 | 
 5 | Simple step indicator for Vue.js
 6 | 
 7 | ## Install
 8 | 
 9 | ```bash
10 | yarn add vue-step-indicator
11 | ```
12 | 
13 | CDN: [UNPKG](https://unpkg.com/vue-step-indicator/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-step-indicator/dist/) (available as `window.StepIndicator`)
14 | 
15 | ## Usage
16 | 
17 | 👉👀 [Check out the demo!](https://vue-step-indicator.egoist.sh)
18 | 
19 | ```vue
20 | <template>
21 |   <step-indicator :current="1" :total="3"></step-indicator>
22 | </template>
23 | 
24 | <script>
25 | import StepIndicator from 'vue-step-indicator'
26 | 
27 | export default {
28 |   components: {
29 |     StepIndicator
30 |   }
31 | }
32 | </script>
33 | 
34 | <style src="vue-step-indicator/dist/vue-step-indicator.css"></style>
35 | ```
36 | 
37 | ## API
38 | 
39 | ### Props
40 | 
41 | |Prop|Type|Default|Description|
42 | |---|---|---|---|
43 | |current|number|(Required)|Index of current step|
44 | |total|number|(Required)|Total steps|
45 | |currentColor|string|`'rgb(68, 0, 204)'`|Color of current step|
46 | |defaultColor|string|`'rgb(130, 140, 153)'`|Default color of each step|
47 | |handleClick|function<index>||Triggered when an indicator is clicked|
48 | 
49 | ## License
50 | 
51 | MIT &copy; [EGOIST](https://github.com/egoist)
52 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <github-badge slug="egoist/vue-step-indicator" />
  4 |     <h1><span>👣</span> vue-step-indicator</h1>
  5 |     <label>
  6 |       Current step: <input type="number" v-model.number="current" min="0" :max="total - 1">
  7 |     </label>
  8 |     <label>
  9 |       Total steps: <input type="number" v-model.number="total" min="2" max="10">
 10 |     </label>
 11 |     <label>
 12 |       Current color: <input type="color" v-model="currentColor">
 13 |     </label>
 14 |     <label>
 15 |       Default color: <input type="color" v-model="defaultColor">
 16 |     </label>
 17 |     <div class="indicator">
 18 |       <step-indicator :handleClick="handleClick" :current="current" :total="total" :current-color="currentColor" :default-color="defaultColor"></step-indicator>
 19 |     </div>
 20 |     <div class="code">
 21 |       <prism language="html">{{ code }}</prism>
 22 |     </div>
 23 |   </div>
 24 | </template>
 25 | 
 26 | <script>
 27 | import 'prismjs'
 28 | import 'prismjs/themes/prism-solarizedlight.css'
 29 | import Prism from 'vue-prism-component'
 30 | import GithubBadge from 'vue-github-badge'
 31 | import StepIndicator from '../src'
 32 | import genCode from './genCode'
 33 | 
 34 | export default {
 35 |   components: {
 36 |     StepIndicator,
 37 |     Prism,
 38 |     GithubBadge
 39 |   },
 40 | 
 41 |   data() {
 42 |     return {
 43 |       current: 1,
 44 |       total: 3,
 45 |       currentColor: StepIndicator.props.currentColor.default,
 46 |       defaultColor: StepIndicator.props.defaultColor.default
 47 |     }
 48 |   },
 49 | 
 50 |   methods: {
 51 |     handleClick(index) {
 52 |       console.log('Clicked', index)
 53 |     }
 54 |   },
 55 | 
 56 |   computed: {
 57 |     code() {
 58 |       return genCode(this)
 59 |     }
 60 |   }
 61 | }
 62 | </script>
 63 | 
 64 | <style>
 65 | body {
 66 |   font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 67 | }
 68 | pre {
 69 |   background-color: transparent !important;
 70 |   border: 2px solid #dfe7ef;
 71 | }
 72 | 
 73 | pre code {
 74 |   white-space: pre-wrap !important;
 75 | }
 76 | 
 77 | h1 {
 78 |   font-weight: 300;
 79 | }
 80 | 
 81 | h1 span {
 82 |   font-size: 1rem;
 83 | }
 84 | </style>
 85 | 
 86 | <style scoped>
 87 | #app {
 88 |   max-width: 500px;
 89 |   margin: 30px auto;
 90 | }
 91 | label {
 92 |   display: flex;
 93 |   font-size: 1rem;
 94 | }
 95 | 
 96 | label input {
 97 |   margin-left: 10px;
 98 | }
 99 | 
100 | .indicator {
101 |   padding: 20px 0;
102 | }
103 | </style>
104 | 


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