feat(Ruler):add new component (didi#382)

components/index.js

@@ -58,6 +58,7 @@ import Transition from './transition'
 import DetailItem from './detail-item'
 import Slider from './slider'
 import Progress from './progress'
+import Ruler from './ruler'
 /* @init<%import ${componentNameUpper} from './${componentName}'%> */
 
 // Totally importing reminder
@@ -125,6 +126,7 @@ export const components = {
   DetailItem,
   Slider,
   Progress,
+  Ruler,
   /* @init<%${componentNameUpper},%> */
 }
 
@@ -213,6 +215,7 @@ export {
   DetailItem,
   Slider,
   Progress,
+  Ruler,
   /* @init<%${componentNameUpper},%> */
 }
 

components/ruler/README.en-US.md

@@ -0,0 +1,34 @@
+---
+title: Ruler
+preview: https://didi.github.io/mand-mobile/examples/#/ruler
+---
+
+Sliding selection
+
+### Import
+
+```javascript
+import { Ruler } from 'mand-mobile'
+
+Vue.component(Ruler.name, Ruler)
+```
+
+### Code Examples
+<!-- DEMO -->
+
+### API
+
+#### [Ruler] Props
+|Props | Description | Type | Default | Note|
+|----|-----|------|------|------|
+|v-model|current value|Number|0|-|
+|scope|ruler scope|Number[]|[0, 100]|-|
+|step|each large distance of the scale|Number|10|-|
+|unit|scale each small distance|Number|1|-|
+|min|minimum|Number|0|-|
+|max|maximum|Number|100|-|
+
+#### [Ruler] Events
+
+##### @change(currentValue)
+Change value

components/ruler/README.md

@@ -0,0 +1,34 @@
+---
+title: Ruler 刻度尺
+preview: https://didi.github.io/mand-mobile/examples/#/ruler
+---
+
+滑动选择
+
+### 引入
+
+```javascript
+import { Ruler } from 'mand-mobile'
+
+Vue.component(Ruler.name, Ruler)
+```
+
+### 代码演示
+<!-- DEMO -->
+
+### API
+
+#### [Ruler] Props
+|属性 | 说明 | 类型 | 默认值 | 备注 |
+|----|-----|------|------|------|
+|v-model|双向绑定的值|Number|0|-|
+|scope|刻度尺范围|Number[]|[0, 100]|-|
+|step|刻度尺每一大格步数|Number|10|-|
+|unit|刻度尺每一小格步数|Number|1|-|
+|min|最小可滑动位置|Number|0|-|
+|max|最大可滑动位置|Number|100|-|
+
+#### [Ruler] Events
+
+##### @change(currentValue)
+值发生变化事件

components/ruler/component.js

@@ -0,0 +1,7 @@
+export default {
+  "name": "ruler",
+  "text": "刻度尺",
+  "category": "form",
+  "description": "刻度尺",
+  "author": "supergaojian <[email protected]>"
+}

components/ruler/demo/cases/demo0.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="md-example-child md-example-child-single-component">
+    <p>当前值：{{ value }}</p>
+    <div class="container">
+      <md-ruler
+        :scope="scope"
+        :step="100"
+        :unit="10"
+        v-model="value"
+      ></md-ruler>
+    </div>
+	</div>
+</template>
+
+<script>import {Ruler} from 'mand-mobile'
+
+export default {
+  name: 'ruler-demo',
+  title: '基本',
+  components: {
+    [Ruler.name]: Ruler,
+  },
+  data() {
+    return {
+      value: 1000,
+      scope: [1000, 2000],
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.md-example-child-single-component
+  .container
+    margin 0 auto
+    width 640px
+</style>

components/ruler/demo/cases/demo1.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="md-example-child md-example-child-single-component">
+    <p>当前值：{{ value }}</p>
+    <div class="container">
+      <md-ruler
+        :scope="scope"
+        :step="100"
+        :unit="10"
+        :max="1800"
+        :min="1200"
+        v-model="value"
+      ></md-ruler>
+    </div>
+  </div>
+</template>
+
+<script>import {Ruler} from 'mand-mobile'
+
+export default {
+  name: 'ruler-demo',
+  title: '最大1800，最小1200',
+  components: {
+    [Ruler.name]: Ruler,
+  },
+  data() {
+    return {
+      value: 1305,
+      scope: [1000, 2000],
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+  .md-example-child-single-component
+    .container
+      margin 0 auto
+      width 640px
+</style>

components/ruler/demo/cases/demo2.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="md-example-child md-example-child-single-component">
+    <p>当前值：{{ value }}</p>
+    <div class="container">
+      <md-ruler
+        :scope="scope"
+        :step="100"
+        :unit="10"
+        :max="2000"
+        :min="1000"
+        v-model="value"
+      ></md-ruler>
+    </div>
+  </div>
+</template>
+
+<script>import {Ruler} from 'mand-mobile'
+
+export default {
+  name: 'ruler-demo',
+  /* DELETE */
+  title: '触发 <a href="javascript:window.triggerRuler2()">Change to 1500</a>',
+  titleEnUS: 'trigger <a href="javascript:window.triggerRuler2()">Change to 1500</a>',
+  describe: '只在滚动停止时有效',
+  describeEnUS: 'only valid when scroll is stopped',
+  /* DELETE */
+  components: {
+    [Ruler.name]: Ruler,
+  },
+  data() {
+    return {
+      value: 1300,
+      scope: [1000, 2000],
+    }
+  },
+  mounted() {
+    window.triggerRuler2 = () => {
+      this.value = 1500
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+  .md-example-child-single-component
+    .container
+      margin 0 auto
+      width 640px
+</style>

components/ruler/demo/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="md-example single-component">
+    <section class="md-example-section" v-for="(demo, index) in demos" :key="index">
+      <div class="md-example-title" v-html="demo.title"></div>
+      <div class="md-example-describe" v-html="demo.describe"></div>
+      <div class="md-example-content">
+        <component :is="demo"></component>
+      </div>
+    </section>
+	</div>
+</template>
+
+<script>import createDemoModule from '../../../examples/create-demo-module'
+import Demo0 from './cases/demo0'
+import Demo1 from './cases/demo1'
+import Demo2 from './cases/demo2'
+
+export default {
+  ...createDemoModule('single-component', [Demo0, Demo1, Demo2]),
+}
+</script>
+
+<style lang="stylus">
+.md-example.single-component
+  position relative
+</style>