Feat Checker (didi#326)

* feat(checker): new component checker

* test(checker): init checker test

* refactor(demo): add checker

* docs(checker): init checker docs

* refactor(checker): remove console

* test(checker): fix radio test

* fix(checker): radio & checkbox type active condition

* fix(checker): radio condition error

* refactor(example): checker router component path err

* test(checker): fix test

document/common/config/menu.json

@@ -31,6 +31,7 @@
             "checkbox": "Checkbox",
             "checkbox-group": "CheckboxGroup",
             "radio": "Radio",
+            "checker": "Checker",
             "input": "Input",
             "textarea": "Textarea",
             "select": "Select",
@@ -113,6 +114,7 @@
             "checkbox": "Checkbox",
             "checkbox-group": "CheckboxGroup",
             "radio": "Radio",
+            "checker": "Checker",
             "input": "Input",
             "textarea": "Textarea",
             "select": "Select",

document/components/docs/en-US/checker.md

@@ -0,0 +1,182 @@
+## Checker
+
+Checker is more flexible selection component, you can alse customize the layout.
+
+### Example
+
+- Basic usage
+
+  ```html
+  <cube-checker
+    v-model="checkerValue"
+    :options="options" />
+  ```
+  ```js
+  export default {
+    data() {
+      return {
+        checkerValue: [],
+        options: [
+          {
+            value: 1,
+            text: 'red'
+          },
+          {
+            value: 2,
+            text: 'yellow'
+          },
+          {
+            value: 3,
+            text: 'blue'
+          },
+          {
+            value: 4,
+            text: 'green'
+          }
+        ]
+      }
+    }
+  }
+  ```
+  The value of `options` is an array. The default `checkerValue` value is  `''`,
+  If you clicked one option, the `checkerValue` will be set as the value of this option.
+
+- radio
+
+  ```html
+  <cube-checker
+    v-model="checkerValue"
+    :options="options"
+    type="radio" />
+  ```
+  ```js
+  export default {
+    data() {
+      return {
+        checkerValue: '',
+        options: [
+          {
+            value: 0,
+            text: 'AAAAA'
+          },
+          {
+            value: 1,
+            text: 'BBBBB'
+          }
+        ]
+      }
+    }
+  }
+  ```
+  If the `type` is set to `'radio'`, the checker will be a radio type.
+  The default type is a `'checkbox'`.
+
+- Use slot
+
+  You can use slot to implement custom layout.
+
+  ```html
+  <cube-checker
+    v-model="checkerList"
+    :options="options"
+    type="radio">
+    <cube-checker-item
+      v-for="item in options"
+      :key="item.value"
+      :option="item">
+      <span class="orange"><i class="cubeic-alert"></i>{{item.text}}</span>
+    </cube-checker-item>
+  </cube-checker>
+  ```
+  ```js
+  export default {
+    data() {
+      return {
+        checkerList: [],
+        options: [
+          {
+            value: 0,
+            text: 'AAAAA'
+          },
+          {
+            value: 1,
+            text: 'BBBBB'
+          }
+        ]
+      }
+    }
+  }
+  ```
+
+
+- Use min & max prop
+
+  You can use `min` and `max` prop but the `type` must set to `'checkbox'`.
+
+  `max` set the max number of checked items, `min` set the min number of checked items.
+
+
+  ```html
+  <cube-checker
+    v-model="checkerList"
+    :options="options"
+    :min="1"
+    :max="2"/>
+  ```
+  ```js
+  export default {
+    data() {
+      return {
+        checkerList: [3],
+        option: [
+          {
+            value: 1,
+            text: 'red'
+          },
+          {
+            value: 2,
+            text: 'yellow'
+          },
+          {
+            value: 3,
+            text: 'blue'
+          },
+          {
+            value: 4,
+            text: 'green'
+          }
+        ]
+      }
+    }
+  }
+  ```
+
+
+### Props configuration
+
+| Attribute | Description | Type | Accepted Values | Default |
+| - | - | - | - | - |
+| options | a collection of configuration items | Array | - | - |
+| type | the type of checker | String | checkbox/radio | checkbox |
+| min | the min number | Number | - | 0 |
+| max | the max number | Number | - | options length |
+
+* options sub configuration
+
+| Attribute | Description | Type  |
+| - | - | - |
+| value | the value of checker item | String/Number |
+| text | the text of checker item | String |
+
+### CubeCheckerItem Props configuration
+
+| Attribute | Description | Type | Accepted Values | Default |
+| - | - | - | - | - |
+| option | item configuration object | Object | - | - |
+
+* option sub configuration
+
+| Attribute | Description | Type  |
+| - | - | - |
+| value | the value of checker item | String/Number |
+| text | the text of checker item | String |

document/components/docs/zh-CN/checker.md

@@ -0,0 +1,184 @@
+## Checker
+
+Checker 是更加灵活的选择组件，可以自定义需要的布局样式。
+
+### 示例
+
+- 默认
+
+  ```html
+  <cube-checker
+    v-model="checkerValue"
+    :options="options" />
+  ```
+  ```js
+  export default {
+    data() {
+      return {
+        checkerValue: [],
+        options: [
+          {
+            value: 1,
+            text: 'red'
+          },
+          {
+            value: 2,
+            text: 'yellow'
+          },
+          {
+            value: 3,
+            text: 'blue'
+          },
+          {
+            value: 4,
+            text: 'green'
+          }
+        ]
+      }
+    }
+  }
+  ```
+  如果选中了，则 `checkerValue` 的值就为 `value`。
+
+  设置 `option`，当选中某一项的时候，`checkerValue` 的值就是 `'optionValue'`，当未选中的时候，`checkerValue` 的值就是 `''`。
+
+- 单选
+
+  ```html
+  <cube-checker
+    v-model="checkerValue"
+    :options="options"
+    type="radio" />
+  ```
+  ```js
+  export default {
+    data() {
+      return {
+        checkerValue: '',
+        options: [
+          {
+            value: 0,
+            text: 'AAAAA'
+          },
+          {
+            value: 1,
+            text: 'BBBBB'
+          }
+        ]
+      }
+    }
+  }
+  ```
+
+  可通过设置 `type` ，若为 `'radio'` 则是单选，若为 `'checkbox'` 则是多选。
+
+- 自定义结构
+
+  可通过默认插槽插入 CubeCheckerItem 实现自定义每项的结构。
+
+  ```html
+  <cube-checker
+    v-model="checkerList"
+    :options="options"
+    type="radio">
+    <cube-checker-item
+      v-for="item in options"
+      :key="item.value"
+      :option="item">
+      <span class="orange"><i class="cubeic-alert"></i>{{item.text}}</span>
+    </cube-checker-item>
+  </cube-checker>
+  ```
+  ```js
+  export default {
+    data() {
+      return {
+        checkerList: [],
+        options: [
+          {
+            value: 0,
+            text: 'AAAAA'
+          },
+          {
+            value: 1,
+            text: 'BBBBB'
+          }
+        ]
+      }
+    }
+  }
+  ```
+
+
+- 个数限制
+
+  `max` 设置最多可选个数，多选时可用。
+
+  `min` 设置最少可选个数，多选时可用。
+
+
+  ```html
+  <cube-checker
+    v-model="checkerList"
+    :options="options"
+    :min="1"
+    :max="2"/>
+  ```
+  ```js
+  export default {
+    data() {
+      return {
+        checkerList: [3],
+        option: [
+          {
+            value: 1,
+            text: 'red'
+          },
+          {
+            value: 2,
+            text: 'yellow'
+          },
+          {
+            value: 3,
+            text: 'blue'
+          },
+          {
+            value: 4,
+            text: 'green'
+          }
+        ]
+      }
+    }
+  }
+  ```
+
+
+
+### Props 配置
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| - | - | - | - | - |
+| options | 配置项集合 | Array | - | - |
+| type | 选项类型 | String | checkbox/radio | checkbox |
+| min | 最少可选个数 | Number | - | 0 |
+| max | 最多可选个数 | Number | - | options 的长度 |
+
+* options 子配置项
+
+| 参数 | 说明 | 类型 |
+| - | - | - |
+| value | 选项的值 | String/Number |
+| text | 选项的文本 | String |
+
+### CubeCheckerItem Props 配置
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| - | - | - | - | - |
+| option | 单个配置项 | Object | - | - |
+
+* option 子配置项
+
+| 参数 | 说明 | 类型 |
+| - | - | - |
+| value | 选项的值 | String/Number |
+| text | 选项的文本 | String |

example/App.vue

@@ -66,6 +66,10 @@
                 path: '/checkbox-group',
                 text: 'CheckboxGroup'
               },
+              {
+                path: '/checker',
+                text: 'Checker'
+              },
               {
                 path: '/radio',
                 text: 'Radio'