@aochuang/common 1.0.0 → 1.0.1

package/components/grid/grid-toolbar/grid-batch-toolbar-proxy.js

@@ -0,0 +1,21 @@
+export default {
+  name: 'UiGridBatchToolbar',
+  inject: ['UiGrid'],
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    items() {
+      this.$set(this.UiGrid.batchToolbarProps, 'items', this.items)
+    }
+  },
+  created() {
+    this.$set(this.UiGrid.batchToolbarProps, 'items', this.items)
+  },
+  render() {
+    return null
+  }
+}

package/components/grid/grid-toolbar/grid-batch-toolbar.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="ui-grid-toolbar-batch">
+    <ui-toolbar :close-dialog="false">
+      <ui-toolbar-item>
+        <span class="ui-grid-toolbar-batch__count">已选择<b>{{selecteds.length}}</b>项</span>
+      </ui-toolbar-item>
+      <ui-toolbar-item
+        v-for="(item, index) in innerItems"
+        :key="index"
+      >
+        <component
+          v-if="item.render"
+          :is="{render: item.render}"
+        ></component>
+        <ui-button
+          v-else
+          v-bind="item"
+          :icon="item.icon"
+          size="small"
+          :click="handleRenderBtnClick(item)"
+        >
+          {{item.label}}
+        </ui-button>
+      </ui-toolbar-item>
+    </ui-toolbar>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiGridBatchToolbar',
+  props: {
+    title: {
+      type: String
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    selecteds: {
+      type: Array,
+      default: () => []
+    },
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    isAllSelected() {
+      return this.data.length <= this.selecteds.length
+    },
+    renderData() {
+      return {
+        selecteds: this.selecteds
+      }
+    },
+    innerItems() {
+      const me = this
+      return (this.items || []).filter(v => {
+        if (typeof v.visible === 'boolean') {
+          return v.visible
+        }
+        if (typeof v.visible === 'function') {
+          return v.visible()
+        }
+        return true
+      }).map(v => {
+        const vv = Object.assign({}, v)
+        if (v.render) {
+          vv.render = (h) => {
+            return v.render(h, me.renderData)
+          }
+        }
+        return vv
+      })
+    }
+  },
+  methods: {
+    handleToggleCheckbox(evt) {
+      evt.stopPropagation()
+      this.$emit('clear-selection')
+    },
+    handleRenderBtnClick(item) {
+      if (item && item.click) {
+        return () => {
+          const result = item.click({
+            item,
+            selecteds: this.selecteds
+          })
+          if (result && result.then) {
+            item.loading = true
+            result.then(() => {
+              item.loading = false
+              this.$emit('batch-success')
+            }, () => {
+              item.loading = false
+            })
+          }
+          return result
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-grid-toolbar-batch{
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 32px;
+}
+.ui-grid-toolbar-batch__count{
+  display: inline-block;
+  color: #888;
+}
+
+.ui-grid-toolbar-batch__count b{
+  display: inline-block;
+  min-width: 20px;
+  text-align: center;
+  color: #0052cc;
+}
+.ui-grid-toolbar-batch__checkbox{
+  display: inline-block;
+  margin-left: 20px;
+}
+</style>

package/components/grid/grid-toolbar/grid-global-toolbar-proxy.js

@@ -0,0 +1,21 @@
+export default {
+  name: 'UiGridGlobalToolbar',
+  inject: ['UiGrid'],
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    items() {
+      this.UiGrid.globalToolbarProps.items = this.items
+    }
+  },
+  created() {
+    this.UiGrid.globalToolbarProps.items = this.items
+  },
+  render() {
+    return null
+  }
+}

package/components/grid/grid-toolbar/grid-global-toolbar.vue

@@ -0,0 +1,37 @@
+<template>
+  <ui-toolbar class="ui-grid-global-toolbar" :close-dialog="false">
+    <ui-toolbar-item
+      v-for="(item, index) in innerItems"
+      :key="index"
+    >
+      <ui-button
+        :type="item.type"
+        :click="item.click"
+        :icon="item.icon"
+        @click.stop
+      >{{ item.label }}</ui-button>
+    </ui-toolbar-item>
+  </ui-toolbar>
+</template>
+<script>
+export default {
+  name: 'UiGlobalToolbar',
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    innerItems() {
+      return (this.items || []).filter(v => {
+        if (typeof v.visible === 'function') {
+          return v.visible() !== false
+        } else {
+          return v.visible !== false
+        }
+      })
+    }
+  }
+}
+</script>

package/components/grid/grid-toolbar/grid-more-toolbar-proxy.js

@@ -0,0 +1,21 @@
+export default {
+  name: 'UiGridGlobalToolbar',
+  inject: ['UiGrid'],
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    items() {
+      this.UiGrid.moreToolbarProps.items = this.items
+    }
+  },
+  created() {
+    this.UiGrid.moreToolbarProps.items = this.items
+  },
+  render() {
+    return null
+  }
+}

package/components/grid/grid-toolbar/grid-more-toolbar.vue

@@ -0,0 +1,138 @@
+<template>
+  <ui-popover
+    ref="popover"
+    class="ui-grid-more-toolbar"
+    trigger="hover"
+    v-model="popoverVisible"
+    :visible-arrow="true"
+    v-if="visible"
+  >
+    <ui-button class="ui-grid-more-toolbar__handle" slot="reference" plain >
+      <span class="ui-grid-more-toolbar__handle-icon"></span>
+    </ui-button>
+    <ul class="ui-grid-more-toolbar__menu">
+      <li
+        v-for="(item, index) in visibleItems"
+        class="ui-grid-more-toolbar__item"
+        :class="{'is-loading': loadingMap[index]}"
+        :key="index"
+        @click="handleItemClick(item, index)"
+      >
+        <span class="ui-grid-more-toolbar__item-icon">
+          <ui-icon v-if="loadingMap[index]" name="loading"></ui-icon>
+          <ui-icon v-else-if="item.icon" :name="item.icon"></ui-icon>
+        </span>
+        <span class="ui-grid-more-toolbar__item-label">
+          {{item.label}}
+        </span>
+      </li>
+    </ul>
+  </ui-popover>
+</template>
+<script>
+export default {
+  name: 'UiGridMoreToolbar',
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    extendItems: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      popoverVisible: false,
+      loadingMap: {}
+    }
+  },
+  computed: {
+    visible() {
+      return !!this.visibleItems.length
+    },
+    visibleItems() {
+      return this.allItems.filter(v => {
+        if (typeof v.visible === 'function') {
+          return v.visible()
+        }
+        return v.visible !== false
+      })
+    },
+    allItems() {
+      return [].concat(this.items || [], this.extendItems || [])
+    }
+  },
+  methods: {
+    handleItemClick(item, index) {
+      if (typeof item.click === 'function') {
+        const rs = item.click()
+        if (rs && rs.then) {
+          this.$set(this.loadingMap, index, true)
+          rs.then(() => {
+            this.$set(this.loadingMap, index, false)
+            this.checkClickVisible()
+          }, () => {
+            this.$set(this.loadingMap, index, false)
+            this.checkClickVisible()
+          })
+        } else {
+          this.popoverVisible = false
+        }
+      }
+    },
+    checkClickVisible() {
+      if (!Object.keys(this.loadingMap).some(v => this.loadingMap[v])) {
+        this.popoverVisible = false
+      }
+    }
+  }
+}
+</script>
+<style>
+.ui-grid-more-toolbar{
+  line-height: 1;
+}
+.ui-grid-more-toolbar__handle.ui-button{
+  padding-left: 9px;
+  padding-right: 9px;
+}
+.ui-grid-more-toolbar__handle-icon{
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+  background: url('../icons/more-line.svg') no-repeat 50% 50%;
+  background-size: cover;
+  vertical-align: top;
+  opacity: .6;
+}
+.ui-grid-more-toolbar__menu{
+  list-style: none;
+  margin: 0;
+  padding: 6px 0;
+  min-width: 120px;
+}
+.ui-grid-more-toolbar__item-icon{
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  margin-right: 3px;
+  vertical-align: top;
+  margin-top: 1px;
+}
+.ui-grid-more-toolbar__item{
+  padding: 6px 12px;
+  cursor: pointer;
+  transition: all .3s;
+}
+.ui-grid-more-toolbar__item:hover:not(.is-loading){
+  background-color: #f0f8fc;
+  color: #00A0EB;
+}
+.ui-grid-more-toolbar__item.is-loading{
+  cursor: not-allowed;
+  color: #999;
+}
+</style>

package/components/grid/grid-toolbar/grid-row-toolbar.vue

@@ -0,0 +1,279 @@
+<script>
+import UiButton from '../../button'
+import BiTooltip from '../../../common/tooltip'
+import UiPopover from '../../popover'
+
+export default {
+  name: 'UiGridRowToolbar',
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    moreIconDir: {
+      type: String,
+      default: 'vertical',
+      validator (value) {
+        return ['horizon', 'vertical'].includes(value)
+      }
+    },
+    moreIconType: {
+      type: String,
+      default: 'link',
+      validator (value) {
+        return ['button', 'link'].includes(value)
+      }
+    },
+    row: {
+      type: Object,
+      required: true
+    },
+    rowIndex: {
+      type: Number
+    }
+  },
+  computed: {
+    innerItems() {
+      return this.items.filter(v => {
+        const rs = typeof v === 'function' ? v({ row: this.row }) : v
+        if (rs.visible === false) {
+          return false
+        } else if (typeof rs.visible === 'function') {
+          return rs.visible({
+            row: this.row,
+            index: this.rowIndex
+          })
+        } else {
+          return true
+        }
+      })
+    },
+    rowItems() {
+      return this.innerItems.filter(v => v.more !== true)
+    },
+    moreItems() {
+      return this.innerItems.filter(v => v.more === true)
+    }
+  },
+  data() {
+    return {
+      showMorePopover: false,
+      loadingItems: []
+    }
+  },
+  methods: {
+    handleClick(item) {
+      if (typeof item.click === 'function') {
+        if (this.loadingItems.some(v => v === item)) {
+          return
+        }
+        const rs = item.click({
+          row: this.row,
+          index: this.rowIndex
+        })
+        if (rs && rs.then) {
+          this.loadingItems.push(item)
+          rs.then(rs => {
+            this.loadingItems = this.loadingItems.filter(v => v !== item)
+          }, () => {
+            this.loadingItems = this.loadingItems.filter(v => v !== item)
+          })
+        }
+      }
+    }
+  },
+  render(h) {
+    const items = (this.rowItems || []).map((item, index) => {
+      const nextItem = typeof item === 'function' ? item({ row: this.row }) : item
+      const loading = this.loadingItems.some(v => v === item)
+      const button = h(UiButton, {
+        class: ['ui-grid-row-toolbar__item-btn', { 'is-only-icon': !!nextItem.icon && !nextItem.text }],
+        props: {
+          link: true,
+          type: nextItem.type || 'primary',
+          icon: nextItem.icon,
+          tips: nextItem.tips,
+          loading: loading
+        },
+        on: {
+          click: (evt) => {
+            evt.stopPropagation()
+            return this.handleClick(nextItem)
+          }
+        }
+      }, [nextItem.label])
+      const control = nextItem.render ? h('span', {
+        key: index || nextItem.name,
+        class: 'ui-grid-row-toolbar__item'
+      }, [nextItem.render(h, nextItem, this.row)]) : h('span', {
+        key: index || nextItem.name,
+        class: 'ui-grid-row-toolbar__item'
+      }, [
+        nextItem.tips ? h(BiTooltip, {
+          props: {
+            text: nextItem.tips
+          }
+        }, [button]) : button
+      ])
+      return control
+    })
+    if (this.moreItems && this.moreItems.length) {
+      const moreMenuItems = this.moreItems.map(v => {
+        const nextMoreItem = typeof v === 'function' ? v({ row: this.row }) : v
+        return h('div', {
+          class: [
+            'ui-grid-row-toolbar__more-item',
+            nextMoreItem.type ? 'is-' + nextMoreItem.type : 'is-primary',
+            nextMoreItem.divided ? 'is-divided' : ''
+          ],
+          on: {
+            click: (evt) => {
+              evt.stopPropagation()
+              this.handleClick(nextMoreItem)
+              this.showMorePopover = false
+            }
+          }
+        }, [nextMoreItem.label])
+      })
+      const moreMenu = h(UiPopover, {
+        props: {
+          trigger: 'hover',
+          value: this.showMorePopover
+        },
+        on: {
+          show: () => {
+            this.showMorePopover = true
+          },
+          hide: () => {
+            this.showMorePopover = false
+          }
+        },
+        scopedSlots: {
+          reference: () => {
+            return h(UiButton, {
+              class: 'ui-grid-row-toolbar__more-handle',
+              props: {
+                type: this.moreIconType === 'link' ? 'link' : 'default',
+                size: 'mini',
+                plain: true
+              }
+            }, [h('span', {
+              class: 'ui-grid-row-toolbar__more-handle-icon'
+            }, [h('ui-icon', {
+              props: {
+                name: this.moreIconDir === 'vertical' ? 'more-2-line' : 'more-line'
+              }
+            })])])
+          }
+        }
+      }, [h('div', {
+        class: 'ui-grid-row-toolbar__more-menu'
+      }, moreMenuItems)])
+      items.push(h('span', {
+        class: 'ui-grid-row-toolbar__item',
+        key: 'more'
+      }, [moreMenu]))
+    }
+    return h('div', {
+      class: 'ui-grid-row-toolbar'
+    }, items)
+  }
+}
+</script>
+<style lang="less">
+.ui-grid-row-toolbar{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.ui-grid-row-toolbar__item{
+  margin-right: 10px;
+}
+.ui-grid-row-toolbar__item:last-child{
+  margin-right: 0;
+}
+.ui-grid-row-toolbar__more-handle{
+  padding-left: 6px;
+  padding-right: 6px;
+  vertical-align: top;
+  line-height: 1.4em;
+  &.ui-button {
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+.ui-grid-row-toolbar__more-handle-icon{
+  position: relative;
+  display: inline-block;
+}
+.ui-grid-row-toolbar__more-menu{
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+.ui-grid-row-toolbar__more-item{
+  padding: 3px 12px;
+  height: 28px;
+  line-height: 28px;
+  transition: all .25s;
+  cursor: pointer;
+  box-sizing: content-box;
+  &:hover {
+    background-color: #f8f8f9;
+  }
+  &.is-divided {
+    margin-top: 12px;
+    position: relative;
+    &:before {
+      content: '';
+      position: absolute;
+      top: -6px;
+      left: 0;
+      right: 0;
+      border-top: 1px solid #eee;
+    }
+  }
+  &.is-success{
+    color: #7ebf4a;
+    &:hover {
+      color: #7ebf4a;
+      background-color: lighten(#7ebf4a, 20%);
+    }
+  }
+  &.is-info{
+    color: #919399;
+    &:hover {
+      color: #919399;
+      background-color: lighten(#919399, 20%);
+    }
+  }
+  &.is-danger{
+    color: #F91B22;
+    &:hover {
+      color: #F91B22;
+      background-color: lighten(#F91B22, 44%);
+    }
+  }
+  &.is-primary{
+    color: #5f9efa;
+    &:hover {
+      color: #5f9efa;
+      background-color: lighten(#5f9efa, 30%);
+    }
+  }
+  &.is-warning{
+    color: #dba54a;
+    &:hover {
+      color: #dba54a;
+      background-color: lighten(#dba54a, 20%);
+    }
+  }
+}
+.ui-grid-row-toolbar__item-btn{
+  &.is-only-icon {
+    .ui-icon {
+      font-size: 18px;
+    }
+  }
+}
+</style>