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

BREAKING CHANGE: new props only support for new version v2.2.2 feat #383
didi · May 9, 2019 · df4ae77 · df4ae77
1 parent 6f11a80
commit df4ae77
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 33 deletions.
diff --git a/components/check/README.en-US.md b/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|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|icon of selected option|String|`checked`|-|
+|icon-inverse|icon of unselected options|String|`check`|-|
+|icon-disabled|icon of disabled options|String|`check-disabled`|-|
+|icon-size|the size of icon|String|`md`|-|
+|icon-svg|use svg icon|Boolean|`false`|-|
+|icon-position|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

diff --git a/components/check/README.md b/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|使用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|选中项的图标|String|`checked`|-|
+|icon-inverse|非选中项的图标|String|`check`|-|
+|icon-disabled|禁用项的图标|String|`check-disabled`|-|
+|icon-size|图标大小|String|`md`|-|
+|icon-svg|使用svg图标|Boolean|`false`|-|
+|icon-position|图标位置|String|`right`|`left`, `right`|
 |is-slot-scope|是否强制使用或不使用`slot-scope`|Boolean|-|某些情况下需要根据业务逻辑动态确定是否使用，可避免直接组件上加`if/else`|
 
 #### CheckList Slots

diff --git a/components/check/demo/cases/demo4.vue b/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>

diff --git a/components/check/demo/cases/demo5.vue b/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>

diff --git a/components/check/demo/index.vue b/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>
 

diff --git a/components/check/index.vue b/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: '',

diff --git a/components/check/list.vue b/components/check/list.vue
@@ -25,11 +25,12 @@
         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,

diff --git a/components/check/mixin/index.js b/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',
+    },
+  },
+}
diff --git a/components/check/test/__snapshots__/demo.spec.js.snap b/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>
               <!---->