haiwei-ui 1.0.2 → 1.0.4

package/packages/components/checkbox-group/index.vue

@@ -11,101 +11,101 @@
   </nm-box>
 </template>
 <script>
-export default {
-  name: 'CheckboxGroup',
-  data() {
-    return {
-      value_: this.value,
-      checkAll: false,
-      isIndeterminate: true,
-      options: []
-    }
-  },
-  props: {
-    value: {
-      type: Array,
-      default() {
-        return []
+  export default {
+    name: 'CheckboxGroup',
+    data() {
+      return {
+        value_: this.value,
+        checkAll: false,
+        isIndeterminate: true,
+        options: []
       }
     },
-    size: String,
-    disabled: Boolean,
-    min: Number,
-    max: Number,
-    border: {
-      type: Boolean,
-      default: true
-    },
-    action: Function
-  },
-  computed: {
-    disabledCheckAll() {
-      return !this.options || this.options.length < 1 || !this.options.every(o => !o.disabled)
+    props: {
+      value: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      size: String,
+      disabled: Boolean,
+      min: Number,
+      max: Number,
+      border: {
+        type: Boolean,
+        default: true
+      },
+      action: Function
     },
-    selection() {
-      let list = []
-      if (this.value_) {
-        this.value_.forEach(item => {
-          for (var i = 0; i < this.options.length; i++) {
-            const opt = this.options[i]
-            if (opt.value === item) {
-              list.push(opt)
-              break
+    computed: {
+      disabledCheckAll() {
+        return !this.options || this.options.length < 1 || !this.options.every(o => !o.disabled)
+      },
+      selection() {
+        let list = []
+        if (this.value_) {
+          this.value_.forEach(item => {
+            for (var i = 0; i < this.options.length; i++) {
+              const opt = this.options[i]
+              if (opt.value === item) {
+                list.push(opt)
+                break
+              }
             }
-          }
-        })
-      }
+          })
+        }
 
-      return list
-    }
-  },
-  methods: {
-    refresh() {
-      this.action().then(options => {
-        this.options = options
-        this.setCheckAll()
-      })
+        return list
+      }
     },
-    // 设置全选状态
-    setCheckAll() {
-      if (this.value_) {
-        let selectionCount = this.value_.length
-        this.checkAll = selectionCount === this.options.length
-        this.isIndeterminate = selectionCount > 0 && selectionCount < this.options.length
-      } else {
+    methods: {
+      refresh() {
+        this.action().then(options => {
+          this.options = options
+          this.setCheckAll()
+        })
+      },
+      // 设置全选状态
+      setCheckAll() {
+        if (this.value_) {
+          let selectionCount = this.value_.length
+          this.checkAll = selectionCount === this.options.length
+          this.isIndeterminate = selectionCount > 0 && selectionCount < this.options.length
+        } else {
+          this.isIndeterminate = false
+        }
+      },
+      // 处理全选按钮事件
+      onCheckAllChange(val) {
+        this.value_ = val ? this.options.map(m => m.value) : []
         this.isIndeterminate = false
+        this.onChange()
+      },
+      onCheckedChange(value) {
+        let checkedCount = value.length
+        this.checkAll = checkedCount === this.options.length
+        this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length
+        this.onChange()
+      },
+      // 清楚已选项
+      clear() {
+        this.value_ = this.value
+        this.onChange()
+      },
+      onChange() {
+        this.$emit('input', this.value_)
+        this.$emit('change', this.value_, this.selection, this.options)
       }
     },
-    // 处理全选按钮事件
-    onCheckAllChange(val) {
-      this.value_ = val ? this.options.map(m => m.value) : []
-      this.isIndeterminate = false
-      this.onChange()
-    },
-    onCheckedChange(value) {
-      let checkedCount = value.length
-      this.checkAll = checkedCount === this.options.length
-      this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length
-      this.onChange()
-    },
-    // 清楚已选项
-    clear() {
-      this.value_ = this.value
-      this.onChange()
+    created() {
+      this.refresh()
     },
-    onChange() {
-      this.$emit('input', this.value_)
-      this.$emit('change', this.value_, this.selection, this.options)
-    }
-  },
-  created() {
-    this.refresh()
-  },
-  watch: {
-    value(val) {
-      this.value_ = val
-      this.setCheckAll()
+    watch: {
+      value(val) {
+        this.value_ = val
+        this.setCheckAll()
+      }
     }
   }
-}
 </script>

package/packages/components/color-picker/index.vue

@@ -4,63 +4,54 @@
       <el-input placeholder="请选择颜色" v-model="color" :size="fontSize" :disabled="disabled" :clearable="clearable"></el-input>
     </div>
     <div class="nm-color-picker-color">
-      <el-color-picker
-        v-model="color"
-        :size="fontSize"
-        :disabled="disabled"
-        :show-alpha="showAlpha"
-        :color-format="colorFormat"
-        :popper-class="popperClass"
-        :predefine="predefine"
-        @change="onChange"
-      ></el-color-picker>
+      <el-color-picker v-model="color" :size="fontSize" :disabled="disabled" :show-alpha="showAlpha" :color-format="colorFormat" :popper-class="popperClass" :predefine="predefine" @change="onChange"></el-color-picker>
     </div>
   </div>
 </template>
 <script>
-export default {
-  name: 'ColorPicker',
-  data() {
-    return {
-      color: this.value
-    }
-  },
-  props: {
-    value: {
-      type: String
+  export default {
+    name: 'ColorPicker',
+    data() {
+      return {
+        color: this.value
+      }
     },
-    /** 可清空的 */
-    clearable: {
-      type: Boolean,
-      default: true
+    props: {
+      value: {
+        type: String
+      },
+      /** 可清空的 */
+      clearable: {
+        type: Boolean,
+        default: true
+      },
+      /** 是否禁用 */
+      disabled: Boolean,
+      /** 尺寸 */
+      size: String,
+      /** 是否支持透明度选择 */
+      showAlpha: Boolean,
+      /** 写入 v-model 的颜色的格式 */
+      colorFormat: String,
+      /** ColorPicker 下拉框的类名 */
+      popperClass: String,
+      /** 预定义颜色 */
+      predefine: Array
     },
-    /** 是否禁用 */
-    disabled: Boolean,
-    /** 尺寸 */
-    size: String,
-    /** 是否支持透明度选择 */
-    showAlpha: Boolean,
-    /** 写入 v-model 的颜色的格式 */
-    colorFormat: String,
-    /** ColorPicker 下拉框的类名 */
-    popperClass: String,
-    /** 预定义颜色 */
-    predefine: Array
-  },
-  methods: {
-    onChange(val) {
-      this.$emit('input', val)
-      this.$emit('change', val)
+    methods: {
+      onChange(val) {
+        this.$emit('input', val)
+        this.$emit('change', val)
+      },
+      reset() {
+        this.color = ''
+        this.onChange('')
+      }
     },
-    reset() {
-      this.color = ''
-      this.onChange('')
-    }
-  },
-  watch: {
-    value() {
-      this.color = this.value
+    watch: {
+      value() {
+        this.color = this.value
+      }
     }
   }
-}
 </script>

package/packages/components/container/index.vue

@@ -9,13 +9,13 @@
   </section>
 </template>
 <script>
-export default {
-  name: 'Container',
-  props: {
-    /** 滚动条 */
-    scrollbar: Boolean,
-    /** 是否显示水平滚动条 */
-    horizontal: Boolean
+  export default {
+    name: 'Container',
+    props: {
+      /** 滚动条 */
+      scrollbar: Boolean,
+      /** 是否显示水平滚动条 */
+      horizontal: Boolean
+    }
   }
-}
 </script>

package/packages/components/date-range-picker/index.vue

@@ -1,117 +1,106 @@
 <template>
   <div class="nm-date-range-picker" :style="{ display: 'inline-block', width }">
-    <el-date-picker
-      v-model="value"
-      :size="this.size || this.fontSize"
-      type="daterange"
-      range-separator="至"
-      start-placeholder="开始日期"
-      end-placeholder="结束日期"
-      value-format="yyyy-MM-dd"
-      :clearable="clearable"
-      :picker-options="pickerOptions_"
-      @change="onChange"
-    />
+    <el-date-picker v-model="value" :size="this.size || this.fontSize" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :clearable="clearable" :picker-options="pickerOptions_" @change="onChange" />
   </div>
 </template>
 <script>
-export default {
-  name: 'DateRangePicker',
-  data() {
-    return {
-      value: []
-    }
-  },
-  props: {
-    // 开始日期，默认当前月1号
-    start: [String, Date],
-    // 结束日期，默认今日
-    end: [String, Date],
-    /** 尺寸 */
-    size: String,
-    /** 可清空的 */
-    clearable: Boolean,
-    width: {
-      type: String,
-      default: '240px'
+  export default {
+    name: 'DateRangePicker',
+    data() {
+      return {
+        value: []
+      }
     },
-    /**当前时间日期选择器特有的选项 */
-    pickerOptions: Object,
-    /**是否显示日期快捷键 */
-    showPickerOptions: Boolean
-  },
-  computed: {
-    pickerOptions_() {
-      return this.showPickerOptions
-        ? {
-            shortcuts: [
-              {
-                text: '最近一周',
-                onClick(picker) {
-                  const end = new Date()
-                  const start = new Date()
-                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-                  picker.$emit('pick', [start, end])
-                }
-              },
-              {
-                text: '最近一个月',
-                onClick(picker) {
-                  const end = new Date()
-                  const start = new Date()
-                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-                  picker.$emit('pick', [start, end])
-                }
-              },
-              {
-                text: '最近三个月',
-                onClick(picker) {
-                  const end = new Date()
-                  const start = new Date()
-                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-                  picker.$emit('pick', [start, end])
+    props: {
+      // 开始日期，默认当前月1号
+      start: [String, Date],
+      // 结束日期，默认今日
+      end: [String, Date],
+      /** 尺寸 */
+      size: String,
+      /** 可清空的 */
+      clearable: Boolean,
+      width: {
+        type: String,
+        default: '240px'
+      },
+      /**当前时间日期选择器特有的选项 */
+      pickerOptions: Object,
+      /**是否显示日期快捷键 */
+      showPickerOptions: Boolean
+    },
+    computed: {
+      pickerOptions_() {
+        return this.showPickerOptions
+          ? {
+              shortcuts: [
+                {
+                  text: '最近一周',
+                  onClick(picker) {
+                    const end = new Date()
+                    const start = new Date()
+                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+                    picker.$emit('pick', [start, end])
+                  }
+                },
+                {
+                  text: '最近一个月',
+                  onClick(picker) {
+                    const end = new Date()
+                    const start = new Date()
+                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+                    picker.$emit('pick', [start, end])
+                  }
+                },
+                {
+                  text: '最近三个月',
+                  onClick(picker) {
+                    const end = new Date()
+                    const start = new Date()
+                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+                    picker.$emit('pick', [start, end])
+                  }
                 }
-              }
-            ]
-          }
-        : null
-    }
-  },
-  methods: {
-    onChange(val) {
-      if (!val || val.length < 2) {
-        var date = new Date()
-        this.value = [date, date]
+              ]
+            }
+          : null
       }
+    },
+    methods: {
+      onChange(val) {
+        if (!val || val.length < 2) {
+          var date = new Date()
+          this.value = [date, date]
+        }
 
-      this.$emit('update:start', val[0])
-      this.$emit('update:end', val[1])
-      this.$emit('change', val)
-    }
-  },
-  created() {
-    var mow = new Date()
-    const start = this.$dayjs(mow).format('YYYY-MM-01')
-    const end = this.$dayjs(mow).format('YYYY-MM-DD')
+        this.$emit('update:start', val[0])
+        this.$emit('update:end', val[1])
+        this.$emit('change', val)
+      }
+    },
+    created() {
+      var mow = new Date()
+      const start = this.$dayjs(mow).format('YYYY-MM-01')
+      const end = this.$dayjs(mow).format('YYYY-MM-DD')
 
-    let val = []
-    val.push(this.start || start)
-    val.push(this.end || end)
-    if (!this.start) {
-      this.$emit('update:start', val[0])
-    }
-    if (!this.end) {
-      this.$emit('update:end', val[1])
-    }
-    this.value = val
-  },
-  watch: {
-    start(val) {
-      this.value = [val, this.end]
+      let val = []
+      val.push(this.start || start)
+      val.push(this.end || end)
+      if (!this.start) {
+        this.$emit('update:start', val[0])
+      }
+      if (!this.end) {
+        this.$emit('update:end', val[1])
+      }
+      this.value = val
     },
-    end(val) {
-      this.value = [this.start, val]
+    watch: {
+      start(val) {
+        this.value = [val, this.end]
+      },
+      end(val) {
+        this.value = [this.start, val]
+      }
     }
   }
-}
 </script>