@aochuang/common 1.0.0 → 1.0.1

package/components/avatar/avatar.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="ui-avatar" :class="[{'is-online': showOnline && online, 'is-link': isLink, 'has-info': $slots.info, 'is-round': round}, 'ui-avatar--' + size]" @click="handleClick">
+    <div class="ui-avatar__inner">
+      <div class="ui-avatar__main">
+        <ui-tooltip :content="name" :disabled="!name || !showTooltip">
+          <span class="ui-avatar__image" :style="{'line-height': imageSize}">
+            <ui-image
+              class="ui-avatar__image-img"
+              :src="showAvatarSrc"
+              :gray="showOnline && !online"
+              :alt="name"
+              :radius="imageRadius"
+              :width="imageSize"
+              :height="imageSize"
+            ></ui-image>
+            <span v-if="showOnline" class="ui-avatar__online" :title="online ? '在线' : '离线'"></span>
+          </span>
+        </ui-tooltip>
+        <div class="ui-avatar__info" v-if="(showName && (name || $slots.name)) || $slots.info">
+          <span v-if="showName" class="ui-avatar__name" :title="name">
+            <slot name="name">{{name}}</slot>
+          </span>
+          <slot name="info"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import UiImage from '../image'
+
+export default {
+  name: 'UiAvatar',
+  components: {
+    UiImage
+  },
+  props: {
+    src: {
+      type: String
+    },
+    defaultSrc: {
+      type: String
+    },
+    name: {
+      type: String
+    },
+    showName: {
+      type: Boolean,
+      default: true
+    },
+    radius: {
+      type: [Boolean, String],
+      default: true
+    },
+    round: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'small',
+      validator (value) {
+        // large 72 * 72
+        // medium 36 * 36
+        // small 24 * 24
+        return ['large', 'medium', 'small', 'mini', 'custom'].indexOf(value) >= 0
+      }
+    },
+    showTooltip: {
+      type: Boolean,
+      default: false
+    },
+    showOnline: {
+      type: Boolean,
+      default: false
+    },
+    online: {
+      type: Boolean,
+      default: false
+    },
+    click: {
+      type: Function
+    }
+  },
+  computed: {
+    showAvatarSrc () {
+      return this.src || this.defaultSrc || require('./avatar.png')
+    },
+    isLink () {
+      return !!this.click
+    },
+    imageSize () {
+      const map = {
+        large: '72px',
+        medium: '36px',
+        small: '24px',
+        mini: '18px'
+      }
+      return map[this.size]
+    },
+    imageRadius () {
+      const map = {
+        large: 9,
+        medium: 6,
+        small: 3,
+        mini: 2
+      }
+      return map[this.size]
+    }
+  },
+  watch: {
+    cropable (val) {
+      if (!val) {
+        this.cropperVisbile = false
+      }
+    }
+  },
+  methods: {
+    handleClick (evt) {
+      this.click && this.click()
+      this.$emit('click', evt)
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-avatar{
+  display: inline-block;
+  max-width: 100%;
+  &.is-online{
+    .ui-avatar__online{
+      background-color: #12B875;
+    }
+  }
+  &.is-link {
+    cursor: pointer;
+  }
+  &.has-info{
+    .ui-avatar__main{
+      align-items: flex-start;
+    }
+  }
+  &.is-round {
+    .ui-avatar__image-img {
+      border-radius: 50%;
+    }
+  }
+}
+.ui-avatar__inner{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.ui-avatar__info{
+  line-height: 18px;
+  margin-left: 6px;
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ui-avatar__image{
+  display: inline-block;
+  position: relative;
+}
+.ui-avatar__main{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 0;
+}
+.ui-avatar__image-img{
+  outline: 0;
+  overflow: hidden;
+}
+.ui-avatar__name{
+}
+.ui-avatar__upload{
+  margin-left: 12px;
+  color: #00A0EB;
+  cursor: pointer;
+}
+.ui-avatar__online{
+  width: 8px;
+  height: 8px;
+  border: 1px solid #fff;
+  background-color: #ccc;
+  position: absolute;
+  border-radius: 50%;
+  right: 0;
+  bottom: 0;
+}
+.ui-avatar--medium{
+  .ui-avatar__online{
+    bottom: 0;
+    right: 0;
+  }
+}
+.ui-avatar--small{
+  .ui-avatar__online{
+    bottom: -2px;
+    right: -2px;
+  }
+}
+.ui-avatar--mini{
+  .ui-avatar__online{
+    bottom: -3px;
+    right: -3px;
+  }
+}
+</style>

package/components/avatar/index.js

@@ -0,0 +1,7 @@
+import Avatar from './avatar'
+
+Avatar.install = (Vue) => {
+  Vue.component(Avatar.name, Avatar)
+}
+
+export default Avatar

package/components/brick-wall/brick-wall-skeleton.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="ui-brick-wall-skeleton" :class="{'is-line-wrap': lineWrap}">
+    <div
+      class="ui-brick-wall-skeleton__item"
+      v-for="index in innerSpan"
+      :key="index"
+    >
+      <template v-if="index > 3">
+        <div
+          class="ui-brick-wall-skeleton__empty"
+        ></div>
+      </template>
+      <template v-else>
+        <div
+          class="ui-brick-wall-skeleton__card"
+          :style="colStyle"
+        >
+          <div class="ui-brick-wall-skeleton__card-main">
+            <div class="ui-brick-wall-skeleton__card-content">
+              <div class="ui-brick-wall-skeleton__card-avatar">
+                <ui-skeleton width="32px" height="32px"></ui-skeleton>
+              </div>
+              <div class="ui-brick-wall-skeleton__card-fields">
+                <div class="ui-brick-wall-skeleton__card-title">
+                  <ui-skeleton width="30%" height="18px"></ui-skeleton>
+                </div>
+                <div class="ui-brick-wall-skeleton__card-description">
+                  <ui-skeleton width="60%" height="18px"></ui-skeleton>
+                </div>
+              </div>
+            </div>
+            <div class="ui-brick-wall-skeleton__card-tools">
+              <ui-skeleton width="30px" height="18px"></ui-skeleton>
+            </div>
+          </div>
+          <div class="ui-brick-wall-skeleton__card-addon">
+            <div class="ui-brick-wall-skeleton__card-addon-left">
+              <ui-skeleton width="70%" height="18px"></ui-skeleton>
+            </div>
+            <div class="ui-brick-wall-skeleton__card-addon-right">
+              <ui-skeleton width="30px" height="18px"></ui-skeleton>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+import UiSkeleton from '../skeleton'
+
+export default {
+  name: 'UiBrickWallSkeleton',
+  components: {
+    UiSkeleton
+  },
+  props: {
+    lineWrap: {
+      type: Boolean
+    },
+    span: {
+      type: Number
+    },
+    colStyle: {
+      type: Object
+    }
+  },
+  computed: {
+    innerSpan() {
+      return this.span || 3
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-brick-wall-skeleton{
+  display: flex;
+  flex: row;
+  &.is-line-wrap {
+    .ui-brick-wall-skeleton__item,
+    .ui-brick-wall-skeleton__empty{
+      flex: 1;
+      min-width: 0;
+    }
+  }
+}
+.ui-brick-wall-skeleton__item{
+  &:not(:last-child) {
+    margin-right: 24px;
+  }
+}
+.ui-brick-wall-skeleton__card{
+  border: 1px solid #eee;
+  border-radius: 4px;
+  padding: 12px;
+}
+.ui-brick-wall-skeleton__card-main{
+  display: flex;
+  flex-direction: row;
+}
+.ui-brick-wall-skeleton__card-content{
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+}
+.ui-brick-wall-skeleton__card-fields{
+  flex: 1;
+}
+.ui-brick-wall-skeleton__card-avatar{
+  margin-right: 12px;
+}
+.ui-brick-wall-skeleton__card-title{
+  margin-bottom: 12px;
+}
+.ui-brick-wall-skeleton__card-addon{
+  border-top: 1px solid #eee;
+  padding: 12px 0 0;
+  margin-top: 12px;
+  display: flex;
+  flex-direction: row;
+}
+.ui-brick-wall-skeleton__card-addon-left{
+  flex: 1;
+}
+</style>

package/components/brick-wall/brick-wall.vue

@@ -0,0 +1,293 @@
+<template>
+  <div class="ui-brick-wall" :class="{'is-line-wrap': lineWrap}" :style="{height: height}">
+    <template v-if="innerLoading">
+      <brick-wall-skeleton
+        v-if="skeleton"
+        :line-wrap="lineWrap"
+        :span="innerSpan"
+        :col-style="colStyle"
+      ></brick-wall-skeleton>
+    </template>
+    <template v-else>
+      <ui-empty
+        icon="activity-line"
+        v-if="isEmpty"
+      ></ui-empty>
+      <template v-else>
+        <div
+          class="ui-brick-wall__row"
+          v-for="(row, rowIndex) in showData"
+          :key="rowIndex"
+        >
+          <div
+            class="ui-brick-wall__col"
+            :class="{'is-padding': itemPadding}"
+            v-for="(col, colIndex) in row"
+            :key="colIndex"
+            :style="colStyle"
+            @click="handleColClick(col)"
+          >
+            <template v-if="col !== null">
+              <slot name="item" :data="col" :selected="!!selectedMap[col[idField]]" :index="(rowIndex * innerSpan) + colIndex"></slot>
+            </template>
+          </div>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+<script>
+import UiEmpty from '../empty'
+import BrickWallSkeleton from './brick-wall-skeleton.vue'
+
+export default {
+  name: 'UiBrickWall',
+  components: {
+    UiEmpty,
+    BrickWallSkeleton
+  },
+  props: {
+    height: {
+      type: String
+    },
+    /**
+     * 显示加载中
+    */
+    loading: {
+      type: Boolean
+    },
+    skeleton: {
+      type: Boolean,
+      default: true
+    },
+    selectable: {
+      type: Boolean
+    },
+    multiple: {
+      type: Boolean
+    },
+    idField: {
+      type: String,
+      default: 'id'
+    },
+    /**
+     * 数据
+    */
+    data: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * 一行显示多少个
+    */
+    span: {
+      type: Number
+    },
+    /**
+     * 查询数据方法
+    */
+    queryMethod: {
+      type: Function
+    },
+    /**
+     * 基础宽度
+     * 会根据这个宽度自动计算span，如果设置了固定span，就不需要计算
+    */
+    baseWidth: {
+      type: Number
+    },
+    itemPadding: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * 是否换行
+    */
+    lineWrap: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      innerLoading: false,
+      innerData: this.data,
+      width: null,
+      selectedMap: {}
+    }
+  },
+  computed: {
+    colStyle() {
+      if (this.lineWrap) {
+        return
+      }
+      if (!this.baseWidth) {
+        return
+      }
+      return {
+        width: this.baseWidth + 'px',
+        minWidth: this.baseWidth + 'px'
+      }
+    },
+    isEmpty() {
+      return !!(!this.innerData || !this.innerData.length)
+    },
+    innerSpan() {
+      if (this.span) {
+        return this.span
+      }
+      if (this.width && this.baseWidth) {
+        return Math.floor(this.width / this.baseWidth)
+      }
+      return 1
+    },
+    showData() {
+      if (this.lineWrap) {
+        const data = this.innerData || []
+        const last = data.length - 1
+        return data.reduce((rs, v, i) => {
+          const index = Math.floor(i / this.innerSpan)
+          if (!rs[index]) {
+            rs[index] = []
+          }
+          rs[index].push(v)
+          if (i === last) {
+            const sy = this.innerSpan * (index + 1) - (i + 1)
+            if (sy > 0) {
+              for (let j = 0; j < sy; j++) {
+                rs[index].push(null)
+              }
+            }
+          }
+          return rs
+        }, [])
+      } else {
+        return [this.innerData]
+      }
+    }
+  },
+  watch: {
+    data(newVal) {
+      this.innerData = newVal
+    }
+  },
+  mounted() {
+    this.loadData()
+    window.addEventListener('resize', this.handleWindowResize)
+    this.syncWidth()
+  },
+  methods: {
+    handleWindowResize() {
+      this.syncWidth()
+    },
+    handleColClick (col) {
+      if (!this.selectable) {
+        return
+      }
+      if (this.multiple) {
+        if (this.selectedMap[col[this.idField]]) {
+          this.$delete(this.selectedMap, col[this.idField])
+        } else {
+          this.$set(this.selectedMap, col[this.idField], col)
+        }
+        this.$emit('selection-change', {
+          selection: Object.keys(this.selectedMap).map(k => this.selectedMap[k])
+        })
+      } else {
+        this.selectedMap = {
+          [col[this.idField]]: col
+        }
+        this.$emit('select-change', {
+          item: col
+        })
+      }
+    },
+    syncWidth() {
+      if (!this.lineWrap) {
+        return
+      }
+      this.width = this.$el.clientWidth
+    },
+    loadData() {
+      if (!this.queryMethod) {
+        return
+      }
+      this.innerLoading = true
+      this.queryMethod().then(rs => {
+        this.innerData = rs
+      }).finally(() => {
+        this.innerLoading = false
+      })
+    },
+    reload() {
+      this.loadData()
+    },
+    toggleSelection (rows, isSelected) {
+      if (!rows) {
+        return
+      }
+      if (!Array.isArray(rows)) {
+        rows = [rows]
+      }
+      isSelected = !!isSelected
+      if (this.multiple) {
+        rows.forEach(row => {
+          if (isSelected) {
+            this.$set(this.selectedMap, row[this.idField], true)
+          } else {
+            this.$delete(this.selectedMap, row[this.idField])
+          }
+        })
+      } else {
+        if (isSelected) {
+          this.selectedMap = {
+            [rows[0][this.idField]]: true
+          }
+        } else {
+          this.selectedMap = {}
+        }
+      }
+    },
+    clearSelection () {
+      this.selectedMap = {}
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleWindowResize)
+  }
+}
+</script>
+<style lang="less">
+.ui-brick-wall{
+  margin-top: -8px;
+  margin-bottom: -8px;
+  flex: 1;
+  &:not(.is-line-wrap) {
+    overflow: auto;
+    .ui-brick-wall__col{
+      padding-bottom: 0;
+    }
+  }
+  &.is-line-wrap {
+    .ui-brick-wall__col{
+      flex: 1;
+      min-width: 0;
+    }
+  }
+}
+.ui-brick-wall__row{
+  display: flex;
+  flex-direction: row;
+}
+.ui-brick-wall__col {
+  &.is-padding {
+    padding: 8px;
+  }
+  &:last-child{
+    padding-right: 0;
+  }
+  &:first-child{
+    padding-left: 0;
+  }
+}
+</style>

package/components/brick-wall/index.js

@@ -0,0 +1,7 @@
+import BrickWall from './brick-wall'
+
+BrickWall.install = (Vue) => {
+  Vue.component(BrickWall.name, BrickWall)
+}
+
+export default BrickWall