haiwei-ui 1.3.1 → 1.3.3

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "haiwei-ui",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "HaiWei前端组件库",
   "author": "Eric",
   "license": "ISC",
   "main": "packages/index.js",
   "scripts": {
-    "serve": "vue-cli-service lint && vue-cli-service serve",
+    "serve": "vue-cli-service lint --fit && vue-cli-service serve",
     "build": "vue-cli-service lint && vue-cli-service build",
     "lint": "vue-cli-service lint --fit",
     "cm": "rimraf node_modules && rimraf dist",

package/packages/components/box-small/index.vue

@@ -17,48 +17,48 @@
   </div>
 </template>
 <script>
-  export default {
-    name: 'BoxSmall',
-    props: {
-      /** 文本 */
-      label: String,
-      /** 值 */
-      value: [String, Number],
-      /** 单位 */
-      unit: String,
-      /** 图标 */
-      icon: String,
-      /** 显示更多 */
-      more: Boolean,
-      /** 背景色 */
-      bgColor: {
-        type: String,
-        default: 'success'
+export default {
+  name: 'BoxSmall',
+  props: {
+    /** 文本 */
+    label: String,
+    /** 值 */
+    value: [String, Number],
+    /** 单位 */
+    unit: String,
+    /** 图标 */
+    icon: String,
+    /** 显示更多 */
+    more: Boolean,
+    /** 背景色 */
+    bgColor: {
+      type: String,
+      default: 'success'
+    }
+  },
+  computed: {
+    class_() {
+      let classArr = ['nm-box-small']
+      if (this.includeBgColor) {
+        classArr.push(`nm-bg-${this.bgColor}`)
       }
+      return classArr
     },
-    computed: {
-      class_() {
-        let classArr = ['nm-box-small']
-        if (this.includeBgColor) {
-          classArr.push(`nm-bg-${this.bgColor}`)
-        }
-        return classArr
-      },
-      style_() {
-        let style = {}
-        if (!this.includeBgColor) {
-          style.backgroundColor = this.bgColor
-        }
-        return style
-      },
-      includeBgColor() {
-        return ['success', 'primary', 'info', 'warning', 'danger'].includes(this.bgColor)
+    style_() {
+      let style = {}
+      if (!this.includeBgColor) {
+        style.backgroundColor = this.bgColor
       }
+      return style
     },
-    methods: {
-      onMore() {
-        this.$emit('more')
-      }
+    includeBgColor() {
+      return ['success', 'primary', 'info', 'warning', 'danger'].includes(this.bgColor)
+    }
+  },
+  methods: {
+    onMore() {
+      this.$emit('more')
     }
   }
+}
 </script>

package/packages/components/button-copy/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <el-button class="nm-button" :type="type" :size="size || fontSize" :plain="plain" :round="round" :circle="circle" :loading="loading" :disabled="disabled" :autofocus="autofocus" :native-type="nativeType" v-nm-has="code" v-clipboard:copy="copy" v-clipboard:success="onSuccess" v-clipboard:error="onError" @click="$emit('click')">
+  <el-button class="nm-button" :type="type" :size="size || fontSize" :plain="plain" :round="round" :circle="circle"
+    :loading="loading" :disabled="disabled" :autofocus="autofocus" :native-type="nativeType" v-nm-has="code"
+    v-clipboard:copy="copy" v-clipboard:success="onSuccess" v-clipboard:error="onError" @click="$emit('click')">
     <nm-icon v-if="!loading && icon" :name="icon" />
     <slot>
       <span v-if="!circle && text" class="nm-button-text" v-html="text" />
@@ -7,52 +9,52 @@
   </el-button>
 </template>
 <script>
-  export default {
-    name: 'ButtonCopy',
-    props: {
-      /** 尺寸，默认按照框架的字号设置 */
-      size: String,
-      /** 类型 primary/success/warning/danger/info/text */
-      type: {
-        type: String,
-        default: 'text'
-      },
-      /** 是否朴素按钮 */
-      plain: Boolean,
-      /** 是否圆角按钮 */
-      round: Boolean,
-      /** 是否圆形按钮 */
-      circle: Boolean,
-      /** 是否加载中状态 */
-      loading: Boolean,
-      /** 是否禁用状态 */
-      disabled: Boolean,
-      /** 是否默认聚焦 */
-      autofocus: Boolean,
-      /** 原生 type 属性 button/submit/reset */
-      nativeType: String,
-      /** 图标 */
-      icon: {
-        type: String,
-        default: 'max'
-      },
-      // 文本
-      text: {
-        type: String,
-        default: '复制'
-      },
-      // 按钮编码，用于按钮权限控制
-      code: String,
-      // 拷贝内容
-      copy: String
+export default {
+  name: 'ButtonCopy',
+  props: {
+    /** 尺寸，默认按照框架的字号设置 */
+    size: String,
+    /** 类型 primary/success/warning/danger/info/text */
+    type: {
+      type: String,
+      default: 'text'
     },
-    methods: {
-      onSuccess() {
-        this._success('复制成功')
-      },
-      onError() {
-        this._error('复制失败')
-      }
+    /** 是否朴素按钮 */
+    plain: Boolean,
+    /** 是否圆角按钮 */
+    round: Boolean,
+    /** 是否圆形按钮 */
+    circle: Boolean,
+    /** 是否加载中状态 */
+    loading: Boolean,
+    /** 是否禁用状态 */
+    disabled: Boolean,
+    /** 是否默认聚焦 */
+    autofocus: Boolean,
+    /** 原生 type 属性 button/submit/reset */
+    nativeType: String,
+    /** 图标 */
+    icon: {
+      type: String,
+      default: 'max'
+    },
+    // 文本
+    text: {
+      type: String,
+      default: '复制'
+    },
+    // 按钮编码，用于按钮权限控制
+    code: String,
+    // 拷贝内容
+    copy: String
+  },
+  methods: {
+    onSuccess() {
+      this._success('复制成功')
+    },
+    onError() {
+      this._error('复制失败')
     }
   }
+}
 </script>

package/packages/components/button-delete-batch/index.vue

@@ -1,95 +1,97 @@
 <template>
-  <el-button class="nm-button" :type="type" :size="size || fontSize" :plain="plain" :round="round" :circle="circle" :loading="loading" :disabled="disabled" :autofocus="autofocus" :native-type="nativeType" v-nm-has="code" @click="remove">
+  <el-button class="nm-button" :type="type" :size="size || fontSize" :plain="plain" :round="round" :circle="circle"
+    :loading="loading" :disabled="disabled" :autofocus="autofocus" :native-type="nativeType" v-nm-has="code"
+    @click="remove">
     <nm-icon v-if="!noIcon" :name="icon" />
     <span v-if="!circle && text" class="nm-button-text">{{ text }}</span>
   </el-button>
 </template>
 <script>
-  export default {
-    name: 'ButtonDeleteBatch',
-    props: {
-      /** 尺寸，默认或者为空时，按照皮肤的字号设置 */
-      size: String,
-      /** 类型 primary/success/warning/danger/info/text */
-      type: {
-        type: String,
-        default: 'danger'
-      },
-      /** 是否朴素按钮 */
-      plain: Boolean,
-      /** 是否圆角按钮 */
-      round: Boolean,
-      /** 是否圆形按钮 */
-      circle: Boolean,
-      /** 是否加载中状态 */
-      loading: Boolean,
-      /** 是否禁用状态 */
-      disabled: Boolean,
-      /** 是否默认聚焦 */
-      autofocus: Boolean,
-      /** 原生 type 属性 button/submit/reset */
-      nativeType: String,
-      /** 图标 */
-      icon: {
-        type: String,
-        default: 'batch-delete'
-      },
-      // 文本
-      text: {
-        type: String,
-        default: '批量删除'
-      },
-      // 按钮编码，用于按钮权限控制
-      code: String,
-      // 已选择的数据列表
-      selection: Array,
-      // 要显示的属性名称
-      showProperty: String,
-      // 不显示图标
-      noIcon: Boolean,
-      // 删除方法
-      action: {
-        type: Function,
-        required: true
-      }
+export default {
+  name: 'ButtonDeleteBatch',
+  props: {
+    /** 尺寸，默认或者为空时，按照皮肤的字号设置 */
+    size: String,
+    /** 类型 primary/success/warning/danger/info/text */
+    type: {
+      type: String,
+      default: 'danger'
+    },
+    /** 是否朴素按钮 */
+    plain: Boolean,
+    /** 是否圆角按钮 */
+    round: Boolean,
+    /** 是否圆形按钮 */
+    circle: Boolean,
+    /** 是否加载中状态 */
+    loading: Boolean,
+    /** 是否禁用状态 */
+    disabled: Boolean,
+    /** 是否默认聚焦 */
+    autofocus: Boolean,
+    /** 原生 type 属性 button/submit/reset */
+    nativeType: String,
+    /** 图标 */
+    icon: {
+      type: String,
+      default: 'batch-delete'
+    },
+    // 文本
+    text: {
+      type: String,
+      default: '批量删除'
     },
-    methods: {
-      async remove() {
-        if (!this.selection || this.selection.length < 1) {
-          this._error('请选择要删除的数据~')
-          return
-        }
+    // 按钮编码，用于按钮权限控制
+    code: String,
+    // 已选择的数据列表
+    selection: Array,
+    // 要显示的属性名称
+    showProperty: String,
+    // 不显示图标
+    noIcon: Boolean,
+    // 删除方法
+    action: {
+      type: Function,
+      required: true
+    }
+  },
+  methods: {
+    async remove() {
+      if (!this.selection || this.selection.length < 1) {
+        this._error('请选择要删除的数据~')
+        return
+      }
 
-        let msg = '您确认要删除以下数据吗？'
-        if (this.showProperty) {
-          msg += '<br/>已选择：' + this.selection.map(item => item[this.showProperty]).join('、')
-        }
+      let msg = '您确认要删除以下数据吗？'
+      if (this.showProperty) {
+        msg += '<br/>已选择：' + this.selection.map(item => item[this.showProperty]).join('、')
+      }
 
-        this.$confirm(msg, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          dangerouslyUseHTMLString: true,
-          type: 'warning'
-        })
-          .then(async () => {
-            if (this.action || typeof action === 'function') {
-              this._openLoading('正在删除，请稍后...')
+      this.$confirm(msg, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        dangerouslyUseHTMLString: true,
+        type: 'warning'
+      })
+        .then(async () => {
+          if (this.action || typeof action === 'function') {
+            this._openLoading('正在删除，请稍后...')
 
-              this.action(this.selection.map(item => item.id))
-                .then(() => {
-                  this._closeLoading()
-                  this._success('删除成功~')
-                  this.$emit('success')
-                })
-                .catch(() => {
-                  this._closeLoading()
-                  this.$emit('error')
-                }, this.msg)
-                .catch(() => {})
-            }
-          })
-          .catch(() => {})
-      }
+            this.action(this.selection.map(item => item.id))
+              .then(() => {
+                this._closeLoading()
+                this._success('删除成功~')
+                this.$emit('success')
+              })
+              .catch(() => {
+                this._closeLoading()
+                this.$emit('error')
+              }, this.msg)
+              .catch(() => { })
+          }
+        })
+        .catch(() => { })
     }
   }
+}
 </script>

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

@@ -1,111 +1,113 @@
 <template>
   <nm-box header class="nm-checkbox-group">
     <template v-slot:header>
-      <el-checkbox v-model="checkAll" :size="size || fontSize" :indeterminate="isIndeterminate" :disabled="disabledCheckAll" @change="onCheckAllChange">全选</el-checkbox>
+      <el-checkbox v-model="checkAll" :size="size || fontSize" :indeterminate="isIndeterminate"
+        :disabled="disabledCheckAll" @change="onCheckAllChange">全选</el-checkbox>
     </template>
     <el-checkbox-group v-model="value_" :size="size || fontSize" @change="onCheckedChange">
-      <el-checkbox v-for="item in options" :key="item.value" :label="item.value" :disabled="item.disabled" :border="border">
+      <el-checkbox v-for="item in options" :key="item.value" :label="item.value" :disabled="item.disabled"
+        :border="border">
         <slot :option="item">{{ item.label }}</slot>
       </el-checkbox>
     </el-checkbox-group>
   </nm-box>
 </template>
 <script>
-  export default {
-    name: 'CheckboxGroup',
-    data() {
-      return {
-        value_: this.value,
-        checkAll: false,
-        isIndeterminate: true,
-        options: []
+export default {
+  name: 'CheckboxGroup',
+  data() {
+    return {
+      value_: this.value,
+      checkAll: false,
+      isIndeterminate: true,
+      options: []
+    }
+  },
+  props: {
+    value: {
+      type: Array,
+      default() {
+        return []
       }
     },
-    props: {
-      value: {
-        type: Array,
-        default() {
-          return []
-        }
-      },
-      size: String,
-      disabled: Boolean,
-      min: Number,
-      max: Number,
-      border: {
-        type: Boolean,
-        default: true
-      },
-      action: Function
+    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)
     },
-    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
-              }
+    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
+          }
+        })
       }
+
+      return list
+    }
+  },
+  methods: {
+    refresh() {
+      this.action().then(options => {
+        this.options = options
+        this.setCheckAll()
+      })
     },
-    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) : []
+    // 设置全选状态
+    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
-        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)
       }
     },
-    created() {
-      this.refresh()
+    // 处理全选按钮事件
+    onCheckAllChange(val) {
+      this.value_ = val ? this.options.map(m => m.value) : []
+      this.isIndeterminate = false
+      this.onChange()
     },
-    watch: {
-      value(val) {
-        this.value_ = val
-        this.setCheckAll()
-      }
+    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)
+    }
+  },
+  created() {
+    this.refresh()
+  },
+  watch: {
+    value(val) {
+      this.value_ = val
+      this.setCheckAll()
     }
   }
+}
 </script>