Merge branch 'dev' of github.com:didi/cube-ui into dev

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

@@ -152,6 +152,43 @@ Checker is more flexible selection component, you can alse customize the layout.
   ```
 
 
+- disabled state <sup>1.12.19</sup>
+
+  use `disabled`  to set disabled state
+
+
+  ```html
+  <cube-checker
+    v-model="checkerList"
+    :options="options"/>
+  ```
+  ```js
+  export default {
+    data() {
+      return {
+        checkerList: [2],
+        option: [
+          {
+            value: 1,
+            text: 'first',
+            disabled: true
+          },
+          {
+            value: 2,
+            text: 'second',
+            disabled: true
+          },
+          {
+            value: 3,
+            text: 'third'
+          }
+        ]
+      }
+    }
+  }
+  ```
+
+
 ### Props configuration
 
 | Attribute | Description | Type | Accepted Values | Default |
@@ -167,6 +204,7 @@ Checker is more flexible selection component, you can alse customize the layout.
 | - | - | - |
 | value | the value of checker item | String/Number |
 | text | the text of checker item | String |
+| disabled<sup>1.12.19</sup> | disabled state of checker item | Boolean |
 
 ### CubeCheckerItem Props configuration
 

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

@@ -152,6 +152,42 @@ Checker 是更加灵活的选择组件，可以自定义需要的布局样式。
   }
   ```
 
+- 不可点击状态<sup>1.12.19</sup>
+
+  `disabled` 设置禁用状态。
+
+
+  ```html
+  <cube-checker
+    v-model="checkerList"
+    :options="options"/>
+  ```
+  ```js
+  export default {
+    data() {
+      return {
+        checkerList: [2],
+        option: [
+          {
+            value: 1,
+            text: 'first',
+            disabled: true
+          },
+          {
+            value: 2,
+            text: 'second',
+            disabled: true
+          },
+          {
+            value: 3,
+            text: 'third'
+          }
+        ]
+      }
+    }
+  }
+  ```
+
 
 
 ### Props 配置
@@ -169,6 +205,7 @@ Checker 是更加灵活的选择组件，可以自定义需要的布局样式。
 | - | - | - |
 | value | 选项的值 | String/Number |
 | text | 选项的文本 | String |
+| disabled<sup>1.12.19</sup> | 选项是否被禁用 | Boolean |
 
 ### CubeCheckerItem Props 配置
 

example/pages/checker.vue

@@ -48,6 +48,14 @@
       <p>checker value : {{defaultCheckerList}}  (min: 1 max: 2)</p>
       <br><br>
 
+      <p>set disabled</p>
+      <br>
+      <cube-checker
+        v-model="disabledCheckerList"
+        :options="disabledCheckerOptions"/>
+      <br>
+      <p>checker value : {{disabledCheckerList}}</p>
+      <br><br>
 
     </template>
   </cube-page>
@@ -89,7 +97,24 @@
             text: 'green'
           }
         ],
-        defaultCheckerList: [3]
+        defaultCheckerList: [3],
+        disabledCheckerOptions: [
+          {
+            value: 1,
+            text: 'first',
+            disabled: true
+          },
+          {
+            value: 2,
+            text: 'second',
+            disabled: true
+          },
+          {
+            value: 3,
+            text: 'third'
+          }
+        ],
+        disabledCheckerList: [2]
       }
     },
     components: {

src/common/stylus/theme/default.styl

@@ -83,6 +83,9 @@ $checker-item-bgc := $color-white
 $checker-item-active-color := $color-orange
 $checker-item-active-bdc := $color-orange
 $checker-item-active-bgc := $color-light-orange-opacity
+$checker-item-disabled-color := $color-light-grey-s
+$checker-item-disabled-bdc := $color-light-grey-s
+$checker-item-disabled-bgc := $color-light-grey-ss
 
 // dialog
 $dialog-color := $color-grey

src/components/checker/checker-item.vue

 <template>
   <li
     class="cube-checker-item"
-    :class="{'cube-checker-item_active': isActive}"
+    :class="{'cube-checker-item_active': isActive, 'cube-checker-item_disabled': isDisabled}"
     @click="clickHandler"
   >
     <slot>
@@ -29,10 +29,16 @@
         const currentValue = this.$parent.currentValue
         const value = this.option.value
         return isRadio ? currentValue === value : currentValue.indexOf(value) >= 0
+      },
+      isDisabled() {
+        return this.option.disabled
       }
     },
     methods: {
       clickHandler() {
+        if (this.isDisabled) {
+          return
+        }
         this.$parent.check(this.option)
       }
     }
@@ -55,5 +61,9 @@
     color: $checker-item-active-color
     background: $checker-item-active-bgc
     border-1px($checker-item-active-bdc, 4px)
-
+    &.cube-checker-item_disabled
+      background: $checker-item-disabled-bgc
+      border-1px($checker-item-disabled-bdc, 4px)
+  .cube-checker-item_disabled
+    color: $checker-item-disabled-color
 </style>

test/unit/specs/checker.spec.js

@@ -48,17 +48,21 @@ describe('Checker.vue', () => {
     const p = vm.$parent
     const options = p.options
     expect(p.checkerList.join(''))
-      .to.equal('1')
+      .to.equal('14')
     vm.$nextTick(() => {
       const items = vm.$el.querySelectorAll('.cube-checker-item')
+      const disabledItems = vm.$el.querySelectorAll('.cube-checker-item_disabled')
       expect(items.length)
         .to.equal(options.length)
+      expect(disabledItems[0])
+        .to.equal(items[4])
       items[1].click()
       items[2].click()
       items[3].click()
+      items[4].click()
       vm.$nextTick(() => {
         expect(p.checkerList.join(''))
-          .to.equal('23')
+          .to.equal('423')
         done()
       })
     })
@@ -75,7 +79,7 @@ function createChecker (type) {
       </cube-checker>
     `,
     data: {
-      checkerList: type === 'radio' ? 1 : [1],
+      checkerList: type === 'radio' ? 1 : [1, 4],
       options: [
         {
           value: 0,
@@ -92,6 +96,11 @@ function createChecker (type) {
         {
           value: 3,
           text: 'DDDDD'
+        },
+        {
+          value: 4,
+          text: 'EEEEE',
+          disabled: true
         }
       ],
       type: type,