@aochuang/common 1.0.0 → 1.0.1

package/components/toolbar/index.js

@@ -0,0 +1,14 @@
+import Toolbar from './toolbar.vue'
+import ToolbarItem from './toolbar-item.vue'
+
+Toolbar.install = (Vue) => {
+  Vue.component(Toolbar.name, Toolbar)
+  Vue.component(ToolbarItem.name, ToolbarItem)
+}
+
+export {
+  Toolbar,
+  ToolbarItem
+}
+
+export default Toolbar

package/components/toolbar/toolbar-item.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="ui-toolbar-item" :class="{'is-divided': divided}" @click="handleClick">
+    <slot v-if="!divided"></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiToolbarItem',
+  props: {
+    divided: {
+      type: Boolean,
+      default: false
+    }
+  },
+  provide () {
+    return {
+      UiToolbarItem: this
+    }
+  },
+  methods: {
+    handleClick (evt) {
+      evt.stopPropagation()
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-toolbar-item{
+  vertical-align: top;
+  display: inline-block;
+  &.is-divided{
+    height: 20px;
+    width: 1px;
+    background-color: rgba(0,0,0,.06);
+  }
+  &:first-child{
+    margin-left: 0;
+  }
+  &:last-child{
+    margin-right: 0;
+  }
+}
+</style>

package/components/toolbar/toolbar.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="ui-toolbar" :class="['ui-toolbar--' + type]" :style="style">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiToolbar',
+  inject: {
+    UiDialog: {
+      default: null
+    }
+  },
+  provide () {
+    return {
+      UiToolbar: this
+    }
+  },
+  props: {
+    position: {
+      type: String
+    },
+    type: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['default', 'tight'].includes(value)
+      }
+    },
+    closeDialog: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    innerPosition () {
+      if (this.position) {
+        return this.position
+      }
+      if (this.UiDialog) {
+        return 'right'
+      }
+      return 'left'
+    },
+    style () {
+      const style = {}
+      const map = {
+        left: 'flex-start',
+        center: 'center',
+        right: 'flex-end',
+        between: 'space-between',
+        around: 'space-around'
+      }
+      style['justify-content'] = map[this.innerPosition]
+      return style
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+<style lang="less">
+.ui-toolbar{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.ui-toolbar--default {
+  .ui-toolbar-item {
+    margin-left: 6px;
+    margin-right: 6px;
+  }
+}
+.ui-toolbar--tight {
+  .ui-toolbar-item {
+    margin-left: 2px;
+    margin-right: 2px;
+  }
+}
+</style>

package/components/tooltip/index.js

@@ -0,0 +1,9 @@
+import Tooltip from './tooltip.vue'
+Tooltip.install = (Vue) => {
+  Vue.component(Tooltip.name, Tooltip)
+}
+
+export {
+  Tooltip
+}
+export default Tooltip

package/components/tooltip/tooltip.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-tooltip ref="tooltip" :popper-class="popperClass" :content="content" :manual="manual" v-model="innerVisible" :placement="placement" :disabled="disabled" :open-delay="openDelay" :visible-arrow="true">
+    <slot slot="content" name="content">
+      <div v-if="html" class="ui-tooltip__html" v-html="html"></div>
+    </slot>
+    <slot></slot>
+  </el-tooltip>
+</template>
+
+<script>
+import ElTooltip from 'element-ui/lib/tooltip'
+import 'element-ui/lib/theme-chalk/tooltip.css'
+export default {
+  name: 'UiTooltip',
+  components: {
+    ElTooltip
+  },
+  model: {
+    prop: 'visible',
+    event: 'input'
+  },
+  props: {
+    content: {
+      type: String,
+      default: ''
+    },
+    html: {
+      type: String
+    },
+    visible: {
+      type: Boolean
+    },
+    manual: {
+      type: Boolean
+    },
+    openDelay: {
+      type: Number
+    },
+    placement: {
+      type: String,
+      default: 'top'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    popperClass: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    innerVisible: {
+      get () {
+        return this.visible
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    setReferenceElm ($el) {
+      this.$refs.tooltip.referenceElm = $el
+      clearTimeout(this._timer)
+      this._timer = setTimeout(() => {
+        this.$refs.tooltip.popperJS._reference = $el
+        this.$refs.tooltip.updatePopper()
+      }, 30)
+    }
+  },
+  beforeDestroy () {
+    clearTimeout(this._timer)
+  }
+}
+</script>
+<style lang="less">
+body {
+  .el-tooltip__popper{
+    max-width: 800px;
+    line-height: 1.7em;
+    padding: 8px 12px;
+    pointer-events: none;
+  }
+}
+</style>

package/components/transfer/index.js

@@ -0,0 +1,7 @@
+import Transfer from './transfer'
+
+export default {
+  install (Vue) {
+    Vue.component('UiTransfer', Transfer)
+  }
+}

package/components/transfer/transfer-load-more.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="ui-transfer-load-more">
+    <div class="ui-transfer-load-more__loading" v-if="status === 'loading'">
+      <ui-icon name="loading"></ui-icon> 正在加载
+    </div>
+    <div class="ui-transfer-load-more__loadmore" v-if="status === 'loadmore'" @click="handleLoadMoreClick">点击加载更多</div>
+    <div class="ui-transfer-load-more__nomore" v-if="status === 'nomore'">没有更多了</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiTransferLoadMore',
+  props: {
+    status: {
+      type: String,
+      value: 'loadmore',
+      validator (value) {
+        return ['loadmore', 'loading', 'nomore']
+      }
+    }
+  },
+  methods: {
+    handleLoadMoreClick () {
+      this.$emit('loadmore')
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.ui-transfer-load-more{
+  height: 24px;
+  line-height: 24px;
+  padding: 4px 12px;
+  text-align: center;
+  color: #999;
+  font-size: 12px;
+  box-sizing: content-box!important;
+}
+.ui-transfer-load-more__loading,
+.ui-transfer-load-more__loadmore,
+.ui-transfer-load-more__nomore{
+  display: inline-block;
+  position: relative;
+}
+.ui-transfer-load-more__loadmore{
+  cursor: pointer;
+  &:hover {
+    color: #4389fa;
+  }
+}
+</style>

package/components/transfer/transfer.vue

@@ -0,0 +1,245 @@
+<template>
+  <el-transfer
+    class="ui-transfer"
+    :data="innerData"
+    :props="props"
+    :titles="titles"
+    :filter-placeholder="filterPlaceholer"
+    :filterable="filterable"
+    :filter-method="filterMethod"
+    v-loadmore="lazy ? handleLoadMore : null"
+    v-model="innerValue"
+  >
+    <template slot="left-footer">
+      <transfer-load-more
+        style="margin-top: 4px;"
+        v-if="lazy"
+        :status="loadMoreStatus"
+        @loadmore="handleLoadMoreClick"
+      ></transfer-load-more>
+    </template>
+    <template slot="right-footer">
+      <div
+        v-if="lazy"
+      >
+      </div>
+    </template>
+  </el-transfer>
+</template>
+<script>
+import ElTransfer from 'element-ui/lib/transfer'
+import 'element-ui/lib/theme-chalk/transfer.css'
+import TransferLoadMore from './transfer-load-more'
+
+export default {
+  name: 'UiTransfer',
+  components: {
+    ElTransfer,
+    TransferLoadMore
+  },
+  props: {
+    value: {
+      type: Array
+    },
+    titles: {
+      type: Array
+    },
+    filterable: {
+      type: Boolean,
+      default: false
+    },
+    filterMethod: {
+      type: Function
+    },
+    textField: {
+      type: String,
+      default: 'text'
+    },
+    valueField: {
+      type: String,
+      default: 'value'
+    },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    filterPlaceholer: {
+      type: String
+    },
+    data: {
+      type: Array
+    },
+    queryMethod: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      pageIndex: 1,
+      pageSize: 20,
+      reloading: false,
+      moring: false,
+      innerData: [],
+      innerLoading: false,
+      notMore: false
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    },
+    props () {
+      return {
+        key: this.valueField,
+        label: this.textField
+      }
+    },
+    loadMoreStatus () {
+      let status = 'loadmore'
+      if (this.notMore) {
+        status = 'nomore'
+      } else if (this.moring || this.innerLoading) {
+        status = 'loading'
+      }
+      return status
+    }
+  },
+  watch: {
+    data () {
+      this.innerData = this.data || []
+    }
+  },
+  directives: {
+    loadmore: {
+      bind(el, binding) {
+        // 获取element-ui定义好的scroll盒子
+        const $scroll = el.querySelector('.el-transfer-panel__list')
+        const scrollTop = $scroll.scrollTop
+        $scroll.addEventListener('scroll', function(e) {
+          const CONDITION = this.scrollHeight - this.scrollTop - 5 <= this.clientHeight
+          if (CONDITION && this.scrollTop > scrollTop) {
+            binding.value && binding.value()
+          }
+        })
+      }
+    }
+  },
+  created () {
+    if (this.queryMethod) {
+      this.reload()
+    }
+  },
+  methods: {
+    loadMoreOptions () {
+      if (this.innerLoading || this.notMore) {
+        return
+      }
+      const nextPageIndex = this.pageIndex + 1
+      const rs = this.loadOptions(true, nextPageIndex)
+      if (rs && rs.then) {
+        this.moring = true
+        rs.then((rs) => {
+          this.pageIndex = nextPageIndex
+          this.innerData = [].concat(this.innerData, rs || [])
+          this.$emit('load', {
+            data: this.innerData
+          })
+        }).finally(() => {
+          this.moring = false
+        })
+      }
+    },
+    /**
+     * 加载远程备选项
+    */
+    loadOptions (isLoading, pageIndex) {
+      if (!this.queryMethod) {
+        return
+      }
+      const params = {}
+      if (this.lazy) {
+        params.pageIndex = (pageIndex || this.pageIndex) - 1
+        params.pageSize = this.pageSize
+      }
+      if (this.innerData && this.innerData.length) {
+        params.lastItem = this.innerData[this.innerData.length - 1]
+      }
+      params.keyword = this.keyword
+      const rs = this.queryMethod(params)
+      if (rs && rs.then) {
+        if (isLoading !== false) {
+          this.innerLoading = true
+        }
+        return rs.then((rs) => {
+          this.notMore = rs.length < this.pageSize
+          return rs
+        }).finally(() => {
+          this.innerLoading = false
+        })
+      } else {
+        return Promise.resolve(rs || [])
+      }
+    },
+    reload (isLoading = true) {
+      this.innerData = []
+      const rs = this.loadOptions(true, 1)
+      if (rs && rs.then) {
+        if (isLoading) {
+          this.reloading = true
+        }
+        rs.then((rs) => {
+          this.innerData = rs || []
+          this.$emit('load', {
+            data: this.innerData
+          })
+        }).finally(() => {
+          if (isLoading) {
+            this.reloading = false
+          }
+        })
+      }
+      return rs
+    },
+    handleLoadMore () {
+      this.loadMoreOptions()
+    },
+    handleLoadMoreClick () {
+      this.loadMoreOptions()
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-transfer {
+  &.el-transfer{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label{
+    font-size: 14px;
+  }
+  .el-transfer-panel .el-checkbox__inner {
+    width: 12px;
+    height: 12px;
+  }
+  .el-transfer-panel{
+    flex: 1;
+    min-width: 0;
+  }
+  .el-transfer-panel__body{
+    height: 316px;
+  }
+  .el-transfer-panel__list.is-filterable{
+    height: 262px;
+  }
+  .el-transfer-panel__footer{
+    border-top: 0;
+  }
+}
+</style>

package/components/tree/index.js

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