feat(check-list): support check-list icon slot

components/check/README.en-US.md

@@ -31,6 +31,8 @@ Vue.component(CheckList.name, CheckList)
 |icon|icon name of checked options|String|`checked`|-|
 |icon-inverse|icon name of unchecked options|String|`checke`|-|
 |icon-disabled|icon name of disabled options|String|`check-disabled`|-|
+|icon-svg<sup class="version-after">2.3.0+</sup>|use svg icon|Boolean|`false`|-|
+|size|size of icon|String|`md`|-|
 ---
 
 #### CheckBox Props
@@ -77,6 +79,12 @@ Check multiple checks. Combine with `Check` or `CheckBox`.
 |----|-----|------|------|------|
 |v-model|selected names|Array|-|-|
 |options|data otpions|Array<{text, value, disabled, ...}>|`[]`|-|
+|icon<sup class="version-after">2.3.0+</sup>|icon of selected option|String|`checked`|-|
+|icon-inverse<sup class="version-after">2.3.0+</sup>|icon of unselected options|String|`check`|-|
+|icon-disabled<sup class="version-after">2.3.0+</sup>|icon of disabled options|String|`check-disabled`|-|
+|icon-size<sup class="version-after">2.3.0+</sup>|the size of icon|String|`md`|-|
+|icon-svg<sup class="version-after">2.3.0+</sup>|use svg icon|Boolean|`false`|-|
+|icon-position<sup class="version-after">2.3.0+</sup>|the position of icon|String|`right`|`left`, `right`|
 |is-slot-scope|if it is mandatory to use `slot-scope`|Boolean|-|it depends on exact cases to determine whether to use it or not, and avoids adding `if/else` to component|
 
 #### CheckList Slots

components/check/README.md

@@ -29,6 +29,8 @@ Vue.component(CheckList.name, CheckList)
 |icon|选中项图标名称|String|`checked`|-|
 |icon-inverse|未选中项图标名称|String|`checke`|-|
 |icon-disabled|禁用项选择图标名称|String|`check-disabled`|-|
+|icon-svg<sup class="version-after">2.3.0+</sup>|使用svg图标|Boolean|`false`|-|
+|size|图标大小|String|`md`|-|
 ---
 
 #### CheckBox Props
@@ -75,6 +77,12 @@ Vue.component(CheckList.name, CheckList)
 |----|-----|------|------|------|
 |v-model|选中项的`value`|Array|-|-|
 |options|选项数据源|Array<{text, value, disabled, ...}>|`[]`|`disabled`为选项是否禁用|
+|icon<sup class="version-after">2.3.0+</sup>|选中项的图标|String|`checked`|-|
+|icon-inverse<sup class="version-after">2.3.0+</sup>|非选中项的图标|String|`check`|-|
+|icon-disabled<sup class="version-after">2.3.0+</sup>|禁用项的图标|String|`check-disabled`|-|
+|icon-size<sup class="version-after">2.3.0+</sup>|图标大小|String|`md`|-|
+|icon-svg<sup class="version-after">2.3.0+</sup>|使用svg图标|Boolean|`false`|-|
+|icon-position<sup class="version-after">2.3.0+</sup>|图标位置|String|`right`|`left`, `right`|
 |is-slot-scope|是否强制使用或不使用`slot-scope`|Boolean|-|某些情况下需要根据业务逻辑动态确定是否使用，可避免直接组件上加`if/else`|
 
 #### CheckList Slots

components/check/demo/cases/demo4.vue

@@ -2,8 +2,10 @@
   <div class="md-example-child md-example-child-check md-example-child-check-4">
     <md-field title="复选列表">
       <md-check-list
-        :options="fruits"
         v-model="favorites"
+        icon="right"
+        icon-inverse=""
+        :options="fruits"
       />
     </md-field>
 	</div>

components/check/demo/cases/demo5.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="md-example-child md-example-child-check md-example-child-check-4">
+    <md-field title="复选列表">
+      <md-check-list
+        v-model="favorites"
+        iconPosition="left"
+        :options="fruits"
+      />
+    </md-field>
+  </div>
+</template>
+
+<script>import {Field, CheckList} from 'mand-mobile'
+
+export default {
+  name: 'check-demo',
+  /* DELETE */
+  title: '复选列表',
+  titleEnUS: 'Check list',
+  /* DELETE */
+  components: {
+    [Field.name]: Field,
+    [CheckList.name]: CheckList,
+  },
+  data() {
+    return {
+      favorites: ['apple'],
+      fruits: [
+        {value: 'watermelon', label: '西瓜', brief: '选项摘要描述'},
+        {value: 'apple', label: '苹果', brief: '选项摘要描述'},
+        {value: 'banana', label: '香蕉', brief: '选项摘要描述'},
+        {value: 'orange', label: '橙子', brief: '选项摘要描述'},
+        {value: 'tomato', label: '西红柿', brief: '选项摘要描述', disabled: true},
+      ],
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+  .md-example-child
+    font-size 28px
+</style>

components/check/demo/index.vue

@@ -16,9 +16,10 @@ import Demo1 from './cases/demo1'
 import Demo2 from './cases/demo2'
 import Demo3 from './cases/demo3'
 import Demo4 from './cases/demo4'
+import Demo5 from './cases/demo5'
 
 export default {
-  ...createDemoModule('check-group', [Demo0, Demo1, Demo2, Demo3, Demo4]),
+  ...createDemoModule('check-group', [Demo0, Demo1, Demo2, Demo3, Demo4, Demo5]),
 }
 </script>
 

components/check/index.vue

@@ -8,7 +8,7 @@
     @click="$_onClick"
   >
     <div class="md-check-icon">
-      <md-icon :name="currentIcon" :size="size" />
+      <md-icon :name="currentIcon" :size="size" :svg="iconSvg"/>
     </div>
     <div class="md-check-label" v-if="$slots.default || label">
       <slot>{{ label }}</slot>
@@ -17,9 +17,13 @@
 </template>
 
 <script>import Icon from '../icon'
+import checkMixin from './mixin'
+
 export default {
   name: 'md-check',
 
+  mixins: [checkMixin],
+
   components: {
     [Icon.name]: Icon,
   },
@@ -35,18 +39,6 @@ export default {
       type: String,
       default: 'md',
     },
-    icon: {
-      type: String,
-      default: 'checked',
-    },
-    iconInverse: {
-      type: String,
-      default: 'check',
-    },
-    iconDisabled: {
-      type: String,
-      default: 'check-disabled',
-    },
     label: {
       type: String,
       default: '',

components/check/list.vue

@@ -19,17 +19,18 @@
       @click="$_check(item, index)"
     >
       <template v-if="hasSlot">
-        <slot :option="item"></slot>
+        <slot :option="item" :index="index" :selected="value.indexOf(item.value) > -1"></slot>
       </template>
       <md-check
         v-if="!alignCenter"
         :name="item.value"
         :disabled="item.disabled"
-        size="md"
-        icon="right"
-        icon-inverse=""
-        icon-disabled=""
-        slot="right"
+        :size="iconSize"
+        :icon="icon"
+        :icon-inverse="iconInverse"
+        :icon-disabled="iconDisabled"
+        :icon-svg="iconSvg"
+        :slot="iconPosition === 'right' ? 'right' : 'left'"
       />
     </md-cell-item>
   </md-check-group>
@@ -38,10 +39,13 @@
 <script>import Check from './index'
 import CheckGroup from './group'
 import CellItem from '../cell-item'
+import checkMixin from './mixin'
 
 export default {
   name: 'md-check-list',
 
+  mixins: [checkMixin],
+
   components: {
     [Check.name]: Check,
     [CheckGroup.name]: CheckGroup,

components/check/mixin/index.js

@@ -0,0 +1,28 @@
+export default {
+  props: {
+    icon: {
+      type: String,
+      default: 'checked',
+    },
+    iconInverse: {
+      type: String,
+      default: 'check',
+    },
+    iconDisabled: {
+      type: String,
+      default: 'check-disabled',
+    },
+    iconSvg: {
+      type: Boolean,
+      default: false,
+    },
+    iconSize: {
+      type: String,
+      default: 'md',
+    },
+    iconPosition: {
+      type: String,
+      default: 'right',
+    },
+  },
+}

components/check/test/__snapshots__/demo.spec.js.snap

@@ -57,9 +57,7 @@ exports[`Check - Demo Check list 1`] = `
               <!---->
             </div>
             <div class="md-cell-item-right"><label class="md-check">
-                <div class="md-check-icon">
-                  <!---->
-                </div>
+                <div class="md-check-icon"><i class="md-icon icon-font md-icon-check check md" style="color:;"></i></div>
                 <!---->
               </label>
               <!---->
@@ -75,7 +73,7 @@ exports[`Check - Demo Check list 1`] = `
               <!---->
             </div>
             <div class="md-cell-item-right"><label class="md-check is-checked">
-                <div class="md-check-icon"><i class="md-icon icon-font md-icon-right right md" style="color:;"></i></div>
+                <div class="md-check-icon"><i class="md-icon icon-font md-icon-checked checked md" style="color:;"></i></div>
                 <!---->
               </label>
               <!---->
@@ -91,9 +89,7 @@ exports[`Check - Demo Check list 1`] = `
               <!---->
             </div>
             <div class="md-cell-item-right"><label class="md-check">
-                <div class="md-check-icon">
-                  <!---->
-                </div>
+                <div class="md-check-icon"><i class="md-icon icon-font md-icon-check check md" style="color:;"></i></div>
                 <!---->
               </label>
               <!---->
@@ -109,9 +105,7 @@ exports[`Check - Demo Check list 1`] = `
               <!---->
             </div>
             <div class="md-cell-item-right"><label class="md-check">
-                <div class="md-check-icon">
-                  <!---->
-                </div>
+                <div class="md-check-icon"><i class="md-icon icon-font md-icon-check check md" style="color:;"></i></div>
                 <!---->
               </label>
               <!---->
@@ -127,9 +121,7 @@ exports[`Check - Demo Check list 1`] = `
               <!---->
             </div>
             <div class="md-cell-item-right"><label class="md-check is-disabled">
-                <div class="md-check-icon">
-                  <!---->
-                </div>
+                <div class="md-check-icon"><i class="md-icon icon-font md-icon-check-disabled check-disabled md" style="color:;"></i></div>
                 <!---->
               </label>
               <!---->