haiwei-ui 1.0.0

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

@@ -0,0 +1,64 @@
+<template>
+  <div :class="class_" :style="style_">
+    <div class="inner">
+      <div class="value">
+        {{ value }}
+        <span v-if="unit" class="unit">{{ unit }}</span>
+      </div>
+      <div v-if="label" class="label">{{ label }}</div>
+    </div>
+    <div v-if="icon" class="icon">
+      <nm-icon :name="icon" />
+    </div>
+    <nm-button v-if="more" class="more" @click="onMore">
+      更多
+      <nm-icon name="arrow-right" />
+    </nm-button>
+  </div>
+</template>
+<script>
+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
+    },
+    style_() {
+      let style = {}
+      if (!this.includeBgColor) {
+        style.backgroundColor = this.bgColor
+      }
+      return style
+    },
+    includeBgColor() {
+      return ['success', 'primary', 'info', 'warning', 'danger'].includes(this.bgColor)
+    }
+  },
+  methods: {
+    onMore() {
+      this.$emit('more')
+    }
+  }
+}
+</script>

package/packages/components/button/index.vue

@@ -0,0 +1,52 @@
+<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="$emit('click')"
+  >
+    <nm-icon v-if="!loading && icon" :name="icon" />
+    <slot>
+      <span v-if="!circle && text" class="nm-button-text" v-html="text" />
+    </slot>
+  </el-button>
+</template>
+<script>
+export default {
+  name: 'Button',
+  props: {
+    /** 尺寸，默认按照框架的字号设置 */
+    size: String,
+    /** 类型 primary/success/warning/danger/info/text */
+    type: String,
+    /** 是否朴素按钮 */
+    plain: Boolean,
+    /** 是否圆角按钮 */
+    round: Boolean,
+    /** 是否圆形按钮 */
+    circle: Boolean,
+    /** 是否加载中状态 */
+    loading: Boolean,
+    /** 是否禁用状态 */
+    disabled: Boolean,
+    /** 是否默认聚焦 */
+    autofocus: Boolean,
+    /** 原生 type 属性 button/submit/reset */
+    nativeType: String,
+    /** 图标 */
+    icon: String,
+    // 文本
+    text: String,
+    // 按钮编码，用于按钮权限控制
+    code: String
+  }
+}
+</script>

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

@@ -0,0 +1,74 @@
+<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')"
+  >
+    <nm-icon v-if="!loading && icon" :name="icon" />
+    <slot>
+      <span v-if="!circle && text" class="nm-button-text" v-html="text" />
+    </slot>
+  </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
+  },
+  methods: {
+    onSuccess() {
+      this._success('复制成功')
+    },
+    onError() {
+      this._error('复制失败')
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,87 @@
+<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"
+  >
+    <nm-icon v-if="!noIcon" :name="icon" />
+    <span v-if="!circle && text" class="nm-button-text" v-html="text" />
+  </el-button>
+</template>
+<script>
+export default {
+  name: 'ButtonDelete',
+  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: 'delete'
+    },
+    // 文本
+    text: {
+      type: String,
+      default: '删除'
+    },
+    // 按钮编码，用于按钮权限控制
+    code: String,
+    // 不显示图标
+    noIcon: Boolean,
+    // id
+    id: [Number, String, Object, Array],
+    // 提示语
+    msg: String,
+    // 删除方法
+    action: {
+      type: Function,
+      required: true
+    }
+  },
+  methods: {
+    async remove() {
+      this._delete(async () => {
+        this._openLoading('正在删除，请稍后...')
+        this.action(this.id)
+          .then(() => {
+            this._closeLoading()
+            this._success('删除成功~')
+            this.$emit('success')
+          })
+          .catch(() => {
+            this._closeLoading()
+            this.$emit('error')
+          })
+      }, this.msg).catch(() => {})
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,108 @@
+<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"
+  >
+    <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
+    }
+  },
+  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('、')
+      }
+
+      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(() => {})
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,54 @@
+<template>
+  <el-button
+    class="nm-button"
+    :type="options.type"
+    :size="getSize"
+    :plain="plain"
+    :round="round"
+    :circle="circle"
+    :loading="loading"
+    :disabled="disabled"
+    :autofocus="autofocus"
+    :native-type="nativeType"
+    @click="$emit('click')"
+    v-nm-has="options.code"
+  >
+    <nm-icon v-if="!loading && options.icon" :name="options.icon" />
+    <slot>
+      <span v-if="!circle && options.text" class="nm-button-text" v-html="options.text" />
+    </slot>
+  </el-button>
+</template>
+<script>
+export default {
+  name: 'ButtonHas',
+  props: {
+    // 配置项
+    options: {
+      type: Object,
+      required: true
+    },
+    /** 尺寸，默认或者为空时，按照皮肤的字号设置 */
+    size: String,
+    /** 是否朴素按钮 */
+    plain: Boolean,
+    /** 是否圆角按钮 */
+    round: Boolean,
+    /** 是否圆形按钮 */
+    circle: Boolean,
+    /** 是否加载中状态 */
+    loading: Boolean,
+    /** 是否禁用状态 */
+    disabled: Boolean,
+    /** 是否默认聚焦 */
+    autofocus: Boolean,
+    /** 原生 type 属性 button/submit/reset */
+    nativeType: String
+  },
+  computed: {
+    getSize() {
+      return this.size || this.fontSize
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,111 @@
+<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>
+    </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">
+        <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: []
+    }
+  },
+  props: {
+    value: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    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)
+    },
+    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()
+      })
+    },
+    // 设置全选状态
+    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)
+    }
+  },
+  created() {
+    this.refresh()
+  },
+  watch: {
+    value(val) {
+      this.value_ = val
+      this.setCheckAll()
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,66 @@
+<template>
+  <div class="nm-color-picker">
+    <div class="nm-color-picker-input">
+      <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>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ColorPicker',
+  data() {
+    return {
+      color: this.value
+    }
+  },
+  props: {
+    value: {
+      type: String
+    },
+    /** 可清空的 */
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    /** 是否禁用 */
+    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)
+    },
+    reset() {
+      this.color = ''
+      this.onChange('')
+    }
+  },
+  watch: {
+    value() {
+      this.color = this.value
+    }
+  }
+}
+</script>

package/packages/components/container/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <section class="nm-container" :class="{ 'is-horizontal': horizontal }">
+    <section class="nm-container-main">
+      <nm-scrollbar v-if="scrollbar" :horizontal="horizontal">
+        <slot />
+      </nm-scrollbar>
+      <slot v-else />
+    </section>
+  </section>
+</template>
+<script>
+export default {
+  name: 'Container',
+  props: {
+    /** 滚动条 */
+    scrollbar: Boolean,
+    /** 是否显示水平滚动条 */
+    horizontal: Boolean
+  }
+}
+</script>