docs: add docs for carousel and config-provider (#8)

* docs: add docs for carousel and config-provider

one/docs/components/carousel.md

@@ -8,7 +8,7 @@
 
 [[ demo src="/demo/carousel/switch.vue" ]]
 
-### 进度指示器类型
+### 进度指示器
 
 使用 `indicator` 属性来指定进度指示器类型。
 
@@ -20,6 +20,28 @@
 
 [[ demo src="/demo/carousel/autoplay.vue" ]]
 
+### 切换效果
+
+指定 `effect` 属性来设置切换效果。
+
+[[ demo src="/demo/carousel/effect.vue" ]]
+
+### 纵向布局
+
+指定 `vertical` 属性来允许纵向布局的轮播。
+
+使用 `controls-position` 属性来切换按钮相对于布局方向的位置。
+
+[[ demo src="/demo/carousel/vertical.vue" ]]
+
+### 轮播项设置
+
+`slides-per-view` 属性来指定同时显示多少个轮播项。
+
+`slides-per-group` 属性来指定每次前后切换的一组包含多少个轮播项。
+
+[[ demo src="/demo/carousel/slides.vue" ]]
+
 ## API
 
 ### 属性
@@ -34,16 +56,26 @@
 | `pause-on-hover` | `boolean=` | `false` | 在自动轮播时，鼠标悬浮后是否暂停。 |
 | `interval` | `number=` | `3000` | 在自动轮播时，切换间隔的毫秒数。 |
 | `wrap` | `boolean=` | `false` | 是否可以循环播放。 |
+| `effect` | `'fade' | 'slide'` | `'fade'` | 指定轮播切换效果，其中 `fade` 仅在切换组个数与同时显示个数相同时生效。 |
+| `vertical` | `boolean=` | `false` | 是否是纵向布局的轮播。 |
+| `indicator-align` | `'start' | 'end'` | `start` | 用于支持指示器的相对于布局方向的位置。 |
+| `indicator-position` | `'outside' | 'inside'` | `inside` | 用于支持指示器显示在轮播容器的内部/外部。 |
+| `controls-position` | `'outside' | 'inside'` | `inside` | 用于支持切换按钮相对于布局方向的位置。 |
+| `slide-aspect-ratio` | `number= | '${number}/${number}'` | - | 指定不同轮播项类型的默认配置。 |
+| `options` | `Object=` | `{ video: { muted: true, autoplay: true, controls: true, loop: true } }` | 用于指定每个轮播项的纵横比。 |
+| `slides-per-view` | `number=` | `1` | 指定同时显示多少个轮播项。 |
+| `slides-per-group` | `number=` | `1` | 指定每次前后切换的一组包含多少个轮播项。 |
 
 ^^^datasource
-轮播图数据源，项目类型为：`{src, alt, label}`。
+轮播图数据源，项目类型为：`{src, alt, label, type}`。
 
 +++字段详情
 | 名称 | 类型 | 描述 |
 | -- | -- | -- |
-| `src` | `string` | 图片源地址。 |
+| `src` | `string` | 媒体源地址。 |
-| `alt` | `string` | 图片的降级描述文本。 |
+| `alt` | `string` | 媒体的降级描述文本。 |
-| `label` | `string` | 图片的描述性标题。 |
+| `label` | `string` | 媒体的描述性标题。 |
+| `type` | `string` | 媒体的描述性标题，视频需要指定 `video`。 |
 +++
 ^^^
 
@@ -61,8 +93,9 @@
 +++枚举值
 | 值 | 描述 |
 | -- | -- |
-| `radio` | 单选按钮型。 |
+| `bar` | 单选按钮型，用于替换之前的 `radio`（`radio` 也保持兼容支持）。 |
 | `number` | 显示「当前页数/全部页数」文字提示。 |
+| `dot` | 圆点型。 |
 | `none` | 不显示指示器。 |
 ^^^
 

one/docs/components/cascader.md

@@ -42,7 +42,6 @@
 | `placeholder` | `string` | `cascader.placeholder` | 未选择时的占位文本。 |
 | `clearable` | `boolean` | `false` | 是否可以清除已选内容。 |
 | `searchable` | `boolean` | `false` | 是否允许搜索选项。 |
-| `filter` | `function` | - | 选项过滤函数，签名为 `function(option: Object): boolean`。`option` 类型与 `options` 属性中的项相同。返回值表示是否将结果保留在下拉选项列表中。 |
 | `expanded` | `boolean=` | `false` | [^expanded] |
 | `column-trigger` | `hover | click` | `click` | [^column-trigger] |
 | `select-mode` | `'leaf-only' | 'any'` | `any` | [^select-mode] |

one/docs/components/config-provider.md

@@ -0,0 +1,22 @@
+# ConfigProvider <small>配置器</small>
+
+## 示例
+
+### 配置 `Select` 的 `placeholder`
+
+[[ demo src="/demo/config-provider/select.vue" ]]
+
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `value` | `Object` | - | 向其后代组件提供的配置值。 |
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 需要接收配置的内容，其中 VEUI 的组件会响应对应的配置值。 |

one/docs/demo/carousel/effect.vue

@@ -0,0 +1,67 @@
+<template>
+<article>
+  <section>
+    <h4>Effect type</h4>
+    <veui-radio-group
+      v-model="effect"
+      :items="effects"
+    />
+  </section>
+  <section>
+    <veui-carousel
+      :datasource="items"
+      :effect="effect"
+    />
+  </section>
+</article>
+</template>
+
+<script>
+import { Carousel, RadioGroup } from 'veui'
+
+export default {
+  components: {
+    'veui-carousel': Carousel,
+    'veui-radio-group': RadioGroup
+  },
+  data () {
+    return {
+      items: [
+        {
+          src:
+            'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
+          alt: 'A cute kitty looking at you with its greenish eyes.',
+          label: 'Cat'
+        },
+        {
+          src:
+            'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
+          alt: 'A common kingfisher flying above river.',
+          label: 'Kingfisher'
+        },
+        {
+          src:
+            'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
+          alt: 'A white and gray dolphin in blue water.',
+          label: 'Dolphin'
+        }
+      ],
+      effect: 'fade',
+      effects: [
+        { label: 'Fade', value: 'fade' },
+        { label: 'Slide', value: 'slide' }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+h4 {
+  margin: 0 0 10px;
+}
+
+section {
+  margin-bottom: 10px;
+}
+</style>

one/docs/demo/carousel/indicator.vue

@@ -6,11 +6,23 @@
       v-model="indicator"
       :items="indicators"
     />
+    <h4>Indicator position（仅在对齐方式是 end 时生效）</h4>
+    <veui-radio-group
+      v-model="indicatorPosition"
+      :items="positions"
+    />
+    <h4>Indicator alignment</h4>
+    <veui-radio-group
+      v-model="align"
+      :items="alignments"
+    />
   </section>
   <section>
     <veui-carousel
       :datasource="items"
       :indicator="indicator"
+      :indicator-position="indicatorPosition"
+      :indicator-alignment="align"
     />
   </section>
 </article>
@@ -19,6 +31,8 @@
 <script>
 import { Carousel, RadioGroup } from 'veui'
 
+// TODO update alignment
+
 export default {
   components: {
     'veui-carousel': Carousel,
@@ -46,11 +60,22 @@ export default {
           label: 'Dolphin'
         }
       ],
-      indicator: 'radio',
+      indicator: 'bar',
+      indicatorPosition: 'inside',
+      align: 'start',
       indicators: [
-        { label: 'Radio', value: 'radio' },
+        { label: 'Bar', value: 'bar' },
         { label: 'Number', value: 'number' },
+        { label: 'Dot', value: 'dot' },
         { label: 'None', value: 'none' }
+      ],
+      alignments: [
+        { value: 'start', label: 'start' },
+        { value: 'end', label: 'end' }
+      ],
+      positions: [
+        { label: 'Inside', value: 'inside' },
+        { label: 'Outside', value: 'outside' }
       ]
     }
   }
@@ -60,6 +85,9 @@ export default {
 <style lang="less" scoped docs>
 h4 {
   margin: 0 0 10px;
+  &:not(:first-child) {
+    margin-top: 10px;
+  }
 }
 
 section {

one/docs/demo/carousel/slides.vue

@@ -0,0 +1,76 @@
+<template>
+<article>
+  <section>
+    <h4>2 view, 2 group</h4>
+    <veui-carousel
+      :datasource="items"
+      :slides-per-group="2"
+      :slides-per-view="2"
+      effect="slide"
+      indicator-position="outside"
+      indicator-alignment="end"
+      wrap
+    />
+    <h4>2 view, 1 group</h4>
+    <veui-carousel
+      :datasource="items"
+      :slides-per-group="1"
+      :slides-per-view="2"
+      effect="slide"
+      indicator-position="outside"
+      indicator-alignment="end"
+      wrap
+    />
+  </section>
+</article>
+</template>
+
+<script>
+import { Carousel } from 'veui'
+
+export default {
+  components: {
+    'veui-carousel': Carousel
+  },
+  data () {
+    return {
+      items: [
+        {
+          src:
+            'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
+          alt: 'A cute kitty looking at you with its greenish eyes.',
+          label: 'Cat'
+        },
+        {
+          src:
+            'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
+          alt: 'A common kingfisher flying above river.',
+          label: 'Kingfisher'
+        },
+        {
+          src:
+            'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
+          alt: 'A white and gray dolphin in blue water.',
+          label: 'Dolphin'
+        },
+        {
+          src:
+            'https://ss3.bdstatic.com/yrwDcj7w0QhBkMak8IuT_XF5ehU5bvGh7c50/logopic/1b61ee88fdb4a4b918816ae1cfd84af1_fullsize.jpg',
+          alt: 'Tesla logo.',
+          label: '特斯拉'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+h4 {
+  margin: 0 0 10px;
+}
+
+section {
+  margin-bottom: 10px;
+}
+</style>

one/docs/demo/carousel/vertical.vue

@@ -0,0 +1,69 @@
+<template>
+<article>
+  <section>
+    <h4>Controls position</h4>
+    <veui-radio-group
+      v-model="position"
+      :items="positions"
+    />
+  </section>
+  <section>
+    <veui-carousel
+      :datasource="items"
+      effect="slide"
+      :controls-position="position"
+      vertical
+    />
+  </section>
+</article>
+</template>
+
+<script>
+import { Carousel, RadioGroup } from 'veui'
+
+export default {
+  components: {
+    'veui-carousel': Carousel,
+    'veui-radio-group': RadioGroup
+  },
+  data () {
+    return {
+      items: [
+        {
+          src:
+            'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
+          alt: 'A cute kitty looking at you with its greenish eyes.',
+          label: 'Cat'
+        },
+        {
+          src:
+            'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
+          alt: 'A common kingfisher flying above river.',
+          label: 'Kingfisher'
+        },
+        {
+          src:
+            'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
+          alt: 'A white and gray dolphin in blue water.',
+          label: 'Dolphin'
+        }
+      ],
+      position: 'inside',
+      positions: [
+        { label: 'Inside', value: 'inside' },
+        { label: 'Outside', value: 'outside' }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+h4 {
+  margin: 0 0 10px;
+}
+
+section {
+  margin-bottom: 10px;
+}
+</style>

one/docs/demo/config-provider/select.vue

@@ -0,0 +1,56 @@
+<template>
+<article>
+  <veui-button
+    style="margin-right: 8px;"
+    @click="toggle"
+  >切换</veui-button>
+  <veui-config-provider :value="value">
+    <veui-select
+      :options="options"
+      clearable
+    />
+  </veui-config-provider>
+</article>
+</template>
+
+<script>
+import { Select, ConfigProvider, Button } from 'veui'
+
+const PLACEHOLDER1 = '请选择协议1'
+const PLACEHOLDER2 = '请选择协议2'
+
+// Select 的 placeholder 会响应配置 `select.placeholder`
+
+export default {
+  components: {
+    'veui-config-provider': ConfigProvider,
+    'veui-select': Select,
+    'veui-button': Button
+  },
+  data () {
+    return {
+      value: {
+        'select.placeholder': PLACEHOLDER1
+      },
+      options: [
+        {
+          label: 'MIT',
+          value: 'mit'
+        },
+        {
+          label: 'BSD',
+          value: 'bsd'
+        }
+      ]
+    }
+  },
+  methods: {
+    toggle () {
+      let prev = this.value['select.placeholder']
+      this.value['select.placeholder'] = prev === PLACEHOLDER1
+        ? PLACEHOLDER2
+        : PLACEHOLDER1
+    }
+  }
+}
+</script>

one/docs/nav.json

@@ -306,6 +306,10 @@
         {
           "title": "Cascader - 级联器",
           "slug": "cascader"
+        },
+        {
+          "title": "ConfigProvider - 配置器",
+          "slug": "config-provider"
         }
       ]
     },

package.json

@@ -23,7 +23,7 @@
     "@docsearch/js": "^3.0.0-alpha.39",
     "babel-eslint": "^10.1.0",
     "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-veui": "^2.0.4",
+    "babel-plugin-veui": "^2.1.0",
     "dls-icons-vue": "^0.14.0",
     "eslint": "^5.15.1",
     "eslint-config-prettier": "^4.1.0",
@@ -71,10 +71,10 @@
     "stylus-loader": "^3.0.2",
     "unist-util-remove": "^1.0.1",
     "unist-util-visit": "^1.4.0",
-    "veui": "^2.0.4",
+    "veui": "^2.1.0",
-    "veui-loader": "^2.0.4",
+    "veui-loader": "^2.1.0",
-    "veui-theme-dls": "^2.0.4",
+    "veui-theme-dls": "^2.1.0",
-    "veui-theme-dls-icons": "^2.0.4",
+    "veui-theme-dls-icons": "^2.1.0",
     "vue-awesome": "^4.1.0",
     "vue-i18n": "^8.16.0",
     "vue-windows": "^0.2.4"