fix(datepicker, table, checkbox): update datepicker, table, checkbox for more using

datepicker add shortcut , checkbox group add slot, table add td span setting

Author: luchunyu

src/components/checkbox/checkbox-group.vue

@@ -1,13 +1,12 @@
 <template lang="pug">
   div.c-checkbox-group
-    c-checkbox(
-      v-for="(option, index) in optionList"
-      v-model="isChecked[index]"
-      :key="index"
-      :label="option.label"
-      :disabled="option.disabled"
-      @change="onItemChange($event, index)"
-    )
+    slot
+      c-checkbox(
+        v-for="option in optionList"
+        :key="option.label"
+        :label="option.value"
+        :disabled="option.disabled"
+      ) {{ option.label }}
     em.c-error-msg(v-if="!validity.valid") {{validity.msg}}
 </template>
 
@@ -42,7 +41,7 @@ const props = {
   maxItems: Number,
   options: {
     type: Array,
-    required: true,
+    required: false,
     default () { return [] }
   }
 }
@@ -54,12 +53,17 @@ export default {
   },
   props,
   mixins: [validatable],
+  provide () {
+    return {
+      '$checkboxGroup': this
+    }
+  },
   inject: {
     $form: { default: null }
   },
   data () {
     return {
-      isChecked: []
+      checkedValues: []
     }
   },
   computed: {
@@ -87,28 +91,26 @@ export default {
       minItems: minItems.bind(this),
       maxItems: maxItems.bind(this)
     })
-    this.updateChecked()
-    this.$watch('options', this.updateChecked)
-    this.$watch('value', this.updateChecked)
+    this.onPropChange()
+    this.$watch('options', this.onPropChange)
+    this.$watch('value', this.onPropChange)
   },
   methods: {
-    updateChecked () {
-      const isChecked = this.optionList.map(option => {
-        return this.value.indexOf(option.value) > -1
-      })
-      this.isChecked = isChecked
+    onPropChange () {
+      // todo check options
+      this.checkedValues = [...this.value]
     },
 
-    onItemChange (checked, index) {
-      const isChecked = [...this.isChecked]
-      isChecked[index] = checked
-
-      const checkedValues = this.optionList
-        .filter((_, i) => isChecked[i])
-        .map(option => option.value)
-
-      this.$emit('change', checkedValues)
+    updateCheckedValues (isChecked, value) {
+      if (isChecked) {
+        this.checkedValues.push(value)
+      } else {
+        const index = this.checkedValues.indexOf(value)
+        this.checkedValues.splice(index, 1)
+      }
+      this.$emit('change', this.checkedValues)
     }
+
   }
 }
 </script>

src/components/checkbox/index.md

@@ -80,6 +80,37 @@ route: /component/checkbox
 </script>
 ```
 
+## 多选框组自定义内容
+
+```html
+<c-checkbox-group
+  v-model="selected"
+>
+  <c-checkbox label="a" >选项1</c-checkbox>
+  <c-checkbox label="选项2" ></c-checkbox>
+  <c-checkbox label="选项3" ></c-checkbox>
+</c-checkbox-group>
+
+<p>你选择了 {{ selected }}</p>
+
+<c-button primary @click="resetSelected">重置</c-button>
+
+<script>
+  export default {
+    data () {
+      return {
+        selected: ["选项2"]
+      }
+    },
+    methods: {
+      resetSelected () {
+        this.selected = []
+      }
+    }
+  }
+</script>
+```
+
 ### indeterminate 状态
 
 `indeterminate` 通常用于展示一组**未全部被选中**（部分选中）的多选框组状态。

src/components/checkbox/index.vue

@@ -7,11 +7,12 @@
       type="checkbox"
       :name="name"
       :disabled="disabled"
-      :checked="value"
+      :checked="checked"
       ref="input"
     )
     span.c-checkbox__box
-    span.c-checkbox__label {{ label }}
+    span.c-checkbox__label
+      slot {{ label }}
 </template>
 
 <script>
@@ -24,7 +25,7 @@ const name = 'c-checkbox'
 const props = {
   value: Boolean,
   name: String,
-  label: String,
+  label: [String, Number, Object],
   disabled: Boolean,
   size: String,
   indeterminate: Boolean
@@ -37,31 +38,60 @@ export default {
   },
   props,
   inject: {
-    $form: { default: null }
+    $form: { default: null },
+    $checkboxGroup: { default: null }
   },
   mixins: [resettable, validatable],
+  data () {
+    return {
+      checked: false
+    }
+  },
   computed: {
     classNames () {
       const { size, $form } = this
       const actualSize = size || ($form && $form.size)
       return actualSize ? `is-${actualSize}` : ''
+    },
+    groupCheckedValues () {
+      return this.$checkboxGroup ? this.$checkboxGroup.checkedValues : []
     }
   },
   watch: {
+    value: {
+      handler (val) {
+        this.checked = val
+      },
+      immediate: true
+    },
     indeterminate (newVal) {
       if (this.$refs.input) {
         this.$refs.input.indeterminate = Boolean(newVal)
       }
+    },
+    groupCheckedValues (newVal, oldVal) {
+      if (newVal) {
+        this.initChecked()
+      }
     }
   },
   mounted () {
     if (this.$refs.input) {
       this.$refs.input.indeterminate = this.indeterminate
     }
+    if (this.$checkboxGroup) {
+      this.initChecked()
+    }
   },
   methods: {
     onChange (e) {
+      this.$checkboxGroup && this.$checkboxGroup.updateCheckedValues(e.target.checked, this.label)
+      this.checked = e.target.checked
       this.$emit('change', e.target.checked)
+    },
+    initChecked () {
+      const isChecked = this.groupCheckedValues.indexOf(this.label) > -1
+      this.checked = isChecked
     }
   }
 }

src/components/datepicker/index.css

@@ -100,3 +100,49 @@
   right: 1em;
   bottom: 1.5em;
 }
+
+.c-datepicker__sidebar {
+    width: 110px;
+    border-right: 1px solid #e4e4e4;
+    box-sizing: border-box;
+    padding-top: 6px;
+    background-color: #fff;
+    overflow: auto;
+    float: left;
+    margin-bottom:-10000px;
+    padding-bottom:10000px;
+}
+
+.c-datepicker__sidebar ul {
+  padding: 0;
+}
+
+.c-datepicker__sidebar .optionbtn {
+  display: block;
+    width: 100%;
+    border: 0;
+    background-color: transparent;
+    line-height: 28px;
+    font-size: 14px;
+    color: #606266;
+    padding-left: 12px;
+    text-align: left;
+    outline: none;
+    cursor: pointer;
+}
+
+.c-datepicker__sidebar + .c-datepicker__body {
+  float: left;
+}
+
+.c-datepicker__sidebar + .c-calendar {
+  border: 0;
+  float: left;
+}
+
+.withSidebar {
+  background: #fff;
+  border: 1px solid rgb(214, 217, 219);
+  border-radius: 0.2em;
+  overflow: hidden;
+}