vant components

packages/steps/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

packages/steps/README.md

@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)

packages/steps/index.js

@@ -0,0 +1,3 @@
+import Steps from './src/steps';
+
+export default Steps;

packages/steps/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/steps/src/step.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="van-step" :class="statusClass">
+    <div class="van-step__circle-container">
+      <i class="van-step__circle" v-if="status !== 'process'"></i>
+      <i class="van-icon van-icon-checked" v-else></i>
+    </div>
+    <p class="van-step__title">
+      <slot></slot>
+    </p>
+    <div class="van-step__line"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'van-step',
+
+  beforeCreate() {
+    this.$parent.steps.push(this);
+  },
+
+  computed: {
+    status() {
+      const index = this.$parent.steps.indexOf(this);
+      const active = this.$parent.active;
+
+      if (index < active) {
+        return 'finish';
+      } else if (index === active) {
+        return 'process';
+      }
+    },
+    statusClass() {
+      const status = this.status;
+      return status ? 'van-step--' + status : '';
+    }
+  }
+};
+</script>

packages/steps/src/steps.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="van-steps" :class="`van-steps--${steps.length}`">
+    <div class="van-steps__status" v-if="title || description">
+      <div class="van-steps__icon" v-if="icon || $slot.icon">
+        <slot name="icon">
+          <van-icon :name="icon" :class="iconClass"></van-icon>
+        </slot>
+      </div>
+      <div class="van-steps__message">
+        <div class="van-steps__message-wrapper">
+          <h4 class="van-steps__title" v-text="title"></h4>
+          <p class="van-steps__desc" v-text="description"></p>
+        </div>
+      </div>
+      <slot name="message-extra">
+      </slot>
+    </div>
+    <div class="van-steps__items" :class="{
+      'van-steps__items--alone': !title && !description
+    }">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from 'packages/icon';
+
+export default {
+  name: 'van-steps',
+
+  components: {
+    'van-icon': Icon
+  },
+
+  props: {
+    active: Number,
+    icon: String,
+    iconClass: {
+      type: String,
+      default: ''
+    },
+    title: String,
+    description: String
+  },
+
+  data() {
+    return {
+      steps: []
+    };
+  }
+};
+</script>