@aochuang/common 1.0.1 → 1.0.126

package/components/searchbox/searchbox.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="ui-searchbox" :class="['ui-searchbox--' + type]" :style="style">
+  <div class="ui-searchbox" :class="['ui-searchbox--' + type, 'ui-searchbox--' + size]" :style="style">
     <ui-textbox
       class="ui-searchbox__input"
       ref="textbox"
       v-model.trim="keyword"
+      :size="size"
       :readonly="innerLoading"
       :placeholder="placeholder"
       :validate-event="false"
@@ -18,8 +19,8 @@
       <span key="clear" v-else-if="showClear" slot="suffix" class="ui-searchbox__btn is-clear" @click="handleClear" title="清除搜索">
         <ui-icon name="error"></ui-icon>
       </span>
-      <span key="search" v-else slot="suffix" class="ui-searchbox__btn is-search" title="点击搜索">
-        <ui-icon name="sousuo"></ui-icon>
+      <span key="search" v-else slot="suffix" class="ui-searchbox__btn is-search" title="点击搜索" @click="handleSearchClick">
+        <!-- <ui-icon name="sousuo"></ui-icon> -->
       </span>
     </ui-textbox>
   </div>
@@ -42,6 +43,13 @@ export default {
         return ['merge', 'alone'].indexOf(val) >= 0
       }
     },
+    size: {
+      type: String,
+      default: 'small',
+      validator (value) {
+        return ['small', 'mini'].includes(value)
+      }
+    },
     width: {
       type: String
     },
@@ -120,6 +128,9 @@ export default {
     }
   },
   methods: {
+    handleSearchClick () {
+      this.focus()
+    },
     handleSearch () {
       this.doSearch()
     },
@@ -193,6 +204,7 @@ export default {
 <style lang="less">
 .ui-searchbox{
   width: 100%;
+  background-color: #fff;
 }
 .ui-searchbox__props{
   margin-right: 9px;

package/components/select/index.js

@@ -6,4 +6,6 @@ Select.install = (Vue) => {
   Vue.component('UiSelectItem', Option)
 }
 
+Select.Option = Option
+
 export default Select

package/components/select/select.vue

@@ -38,7 +38,7 @@
             :label="item[textField]"
           >
             <slot name="item" :item="item">
-              {{item[textField]}}
+              {{item[textField]}} <el-tag v-if="item.isNew" style="margin-left: 10px;">点击新增</el-tag>
             </slot>
           </el-option>
         </template>
@@ -378,6 +378,12 @@ export default {
         }
         rs.then((rs) => {
           this.options = rs || []
+          // 可以创建并选中选项中不存在的条目,增加一个标识
+          if (this.allowCreate) {
+            if (this.options.findIndex(opt => opt.value === this.keyword) === -1) {
+              this.options.push({ text: this.keyword, value: this.keyword, isNew: true }) // 标记为新创建的选项
+            }
+          }
           this.showOptions = this.options
           this.$emit('load', {
             data: this.options

package/components/skeleton/index.js

@@ -6,6 +6,8 @@ UiSkeleton.install = (Vue) => {
   Vue.component(UiSkeletonRows.name, UiSkeletonRows)
 }
 
+UiSkeleton.SkeletonRows = UiSkeleton
+
 export {
   UiSkeleton,
   UiSkeletonRows

package/components/sortable/index.js

@@ -1,9 +1,11 @@
 import Sortable from './sortable'
 import SortableItem from './sortable-item'
 
-export default {
-  install: (Vue) => {
-    Vue.component(Sortable.name, Sortable)
-    Vue.component(SortableItem.name, SortableItem)
-  }
+Sortable.install = (Vue) => {
+  Vue.component(Sortable.name, Sortable)
+  Vue.component(SortableItem.name, SortableItem)
 }
+
+Sortable.SortableItem = SortableItem
+
+export default Sortable

package/components/sortable/sortable.vue

@@ -12,6 +12,10 @@ let uniqueNumber = Date.now()
 export default {
   name: 'UiSortable',
   props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     enableHandle: {
       type: Boolean,
       default: true
@@ -40,6 +44,7 @@ export default {
   mounted () {
     this.sortable = new Sortable(this.$el, {
       sort: true,
+      disabled: this.disabled,
       draggable: '.' + this.id + '-item',
       handle: this.enableHandle ? '.' + this.handleClass : '.ui-sortable-item',
       animation: 150,

package/components/tabbar/index.js

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

package/components/tabbar/tabbar-item.vue

@@ -0,0 +1,162 @@
+<template>
+    <div class="ui-tabbar-item" :class="{'is-active': tabbarValue === value, 'is-link': link}" @click="handleClick">
+        <template v-if="$slots.icon">
+            <span class="ui-tabbar-item__icon">
+                <slot name="icon"></slot>
+            </span>
+        </template>
+        <span class="ui-tabbar-item__text">
+            <slot></slot>
+        </span>
+    </div>
+</template>
+<script>
+export default {
+    name: 'UiTabbarItem',
+    inject: ['UiTabbar'],
+    props: {
+        value: {
+            type: String
+        }
+    },
+    computed: {
+        link () {
+            return this.UiTabbar.link
+        },
+        tabbarValue () {
+            return this.UiTabbar.value
+        }
+    },
+    watch: {
+        tabbarValue (value) {
+            if (value !== this.value) {
+                return
+            }
+            this.$nextTick(() => {
+                this.scrollIntoHorizontalParent()
+            })
+        }
+    },
+    mounted () {
+        if (this.tabbarValue !== this.value) {
+            return
+        }
+        this.$nextTick(() => {
+            this.scrollIntoHorizontalParent()
+        })
+    },
+    methods: {
+        handleClick () {
+            this.UiTabbar.setValue(this.value)
+        },
+        getHorizontalScrollPadding (scrollParent) {
+            const siblings = this.$el && this.$el.parentElement ? Array.from(this.$el.parentElement.children) : []
+            if (siblings.length === 0) {
+                return {
+                    left: 0,
+                    right: 0
+                }
+            }
+            const firstItem = siblings[0]
+            const lastItem = siblings[siblings.length - 1]
+            const left = Math.max(firstItem.offsetLeft, 0)
+            const right = Math.max(scrollParent.scrollWidth - lastItem.offsetLeft - lastItem.offsetWidth, 0)
+            return {
+                left,
+                right
+            }
+        },
+        getHorizontalScrollParent () {
+            let parent = this.$el && this.$el.parentElement
+            while (parent) {
+                const style = window.getComputedStyle(parent)
+                const overflowX = style.overflowX
+                const canScrollHorizontally = parent.scrollWidth > parent.clientWidth
+                if (canScrollHorizontally && ['auto', 'scroll', 'overlay'].includes(overflowX)) {
+                    return parent
+                }
+                parent = parent.parentElement
+            }
+            return null
+        },
+        scrollIntoHorizontalParent () {
+            const scrollParent = this.getHorizontalScrollParent()
+            if (!scrollParent) {
+                return
+            }
+            const scrollPadding = this.getHorizontalScrollPadding(scrollParent)
+            const itemLeft = this.$el.offsetLeft
+            const itemRight = itemLeft + this.$el.offsetWidth
+            const containerLeft = scrollParent.scrollLeft
+            const containerRight = containerLeft + scrollParent.clientWidth
+            const maxScrollLeft = Math.max(scrollParent.scrollWidth - scrollParent.clientWidth, 0)
+            if (itemLeft < containerLeft) {
+                this.setHorizontalScrollLeft(scrollParent, Math.max(itemLeft - scrollPadding.left, 0))
+            } else if (itemRight > containerRight) {
+                this.setHorizontalScrollLeft(scrollParent, Math.min(itemRight + scrollPadding.right - scrollParent.clientWidth, maxScrollLeft))
+            }
+        },
+        setHorizontalScrollLeft (scrollParent, left) {
+            if (typeof scrollParent.scrollTo === 'function') {
+                scrollParent.scrollTo({
+                    left,
+                    behavior: 'smooth'
+                })
+                return
+            }
+            scrollParent.scrollLeft = left
+        }
+    }
+}
+</script>
+<style lang="less">
+.ui-tabbar-item{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    line-height: 24px;
+    box-sizing: content-box;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    color: #666;
+    transition: all .25s;
+    white-space: nowrap;
+    &:not(.is-link) {
+        padding-right: 8px;
+        padding-left: 8px;
+    }
+    &:hover {
+        color: #333;
+        &:not(.is-link) {
+            background-color: #f8f8f8;
+            border: 1px solid #f8f8f8;
+        }
+    }
+    &.is-active {
+        color: #409EFF;
+        &:not(.is-link) {
+            border-color: #e6f2ff;
+            background-color: #e6f2ff;
+        }
+    }
+}
+.ui-tabbar-item__icon{
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    vertical-align: top;
+    line-height: 16px;
+    svg {
+        width: 100%;
+        height: 100%;
+    }
+    + .ui-tabbar-item__text {
+        margin-left: 4px;
+    }
+}
+</style>

package/components/tabbar/tabbar.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="ui-tabbar" :class="{'is-link': link}">
+        <slot></slot>
+    </div>
+</template>
+<script>
+export default {
+    name: 'UiTabbar',
+    props: {
+        value: {
+            type: String
+        },
+        link: {
+            type: Boolean
+        }
+    },
+    provide () {
+        return {
+            UiTabbar: this
+        }
+    },
+    methods: {
+        setValue (value) {
+            this.$emit('input', value)
+        }
+    }
+}
+</script>
+<style lang="less">
+.ui-tabbar{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    &:not(.is-link) {
+        > .ui-tabbar-item {
+            &:not(:last-child) {
+                margin-right: 12px;
+            }
+        }
+    }
+    &.is-link {
+        > .ui-tabbar-item {
+            &:not(:last-child) {
+                margin-right: 20px;
+            }
+        }
+    }
+}
+</style>

package/components/tabs/index.js

@@ -7,4 +7,6 @@ Tabs.install = (Vue) => {
   Vue.component('UiTabsPane', TabsPane)
 }
 
+Tabs.TabsPane = TabsPane
+
 export default Tabs

package/components/tabs/tabs.vue

@@ -3,6 +3,7 @@
     ref="tabs"
     class="ui-tabs"
     v-model="innerValue"
+    :stretch="stretch"
     :tab-position="tabPosition"
     :type="type"
     :style="style"
@@ -34,6 +35,10 @@ export default {
         return ['left', 'center', 'right'].indexOf(value) >= 0
       }
     },
+    stretch: {
+      type: Boolean,
+      default: false
+    },
     height: {
       type: String
     },

package/components/tag/index.js

@@ -2,8 +2,8 @@ import ElTag from 'element-ui/lib/tag'
 import 'element-ui/lib/theme-chalk/tag.css'
 import './tag.less'
 
-export default {
-  install (Vue) {
-    Vue.component('UiTag', ElTag)
-  }
+ElTag.install = (Vue) => {
+  Vue.component('UiTag', ElTag)
 }
+
+export default ElTag

package/components/tag/tag.less

@@ -1,5 +1,5 @@
 body {
-  .el-tag {
+  .el-tag:not(.el-tag--mini) {
     white-space: break-spaces;
     min-height: 20px;
     line-height: 22px;
@@ -7,9 +7,18 @@ body {
     padding-right: 8px;
     height: auto;
   }
+  .el-tag.el-tag--mini {
+    white-space: nowrap;
+    line-height: 17px;
+    padding-left: 4px;
+    padding-right: 4px;
+    font-size: 10px;
+    height: auto;
+    box-sizing: content-box;
+  }
   .el-tag.el-tag--primary{
-    color: #409EFF;
-    background-color: #ecf5ff;
+    color: #0052CC;
+    background-color: #edf3fb;
   }
   .el-tag.el-tag--success{
     color: #67C23A;

package/components/textarea/textarea.vue

@@ -17,8 +17,11 @@
       :maxlength="maxlength"
       :rows="rows"
       @change="handleChange"
-      @blur="handleBlur"
-      @focus="handleFocus"
+      @blur="handleBlur" 
+      @focus="handleFocus" 
+      @keyup.native="handleKeyup" 
+      @keydown.native="handleKeydown" 
+      @paste.native="handlePaste"
     >
     </el-input>
   </div>
@@ -35,7 +38,7 @@ export default {
   props: {
     rows: {
       type: Number,
-      default: 3
+      default: 10
     },
     maxlength: {
       type: [Number, String],
@@ -96,6 +99,9 @@ export default {
       this.$emit('change', {
         value: e
       })
+      const textarea = this.$refs.input.$el.querySelector('.el-textarea__inner');
+      textarea.style.height = 'auto'; // 重置高度为自动
+      textarea.style.height = textarea.scrollHeight + 'px'; // 根据内容调整高度
     },
     handleBlur () {
       this.focused = false
@@ -103,6 +109,7 @@ export default {
     },
     handleFocus () {
       this.focused = true
+      this.$emit('focus')
     },
     getSelectionRange () {
       const value = this.value || ''
@@ -125,6 +132,15 @@ export default {
         this.$refs.input.$refs.textarea.setSelectionRange(startIndex, startIndex)
       }
     },
+    handlePaste (evt) {
+      this.$emit('paste', evt)
+    },
+    handleKeyup (evt) {
+      this.$emit('keyup', evt)
+    },
+    handleKeydown (evt) {
+      this.$emit('keydown', evt)
+    },
     focus () {
       this.$nextTick(() => {
         this.$refs.input && this.$refs.input.focus && this.$refs.input.focus()

package/components/time-picker/time-picker.vue

@@ -12,6 +12,7 @@
     :placeholder="placeholder"
     :start-placeholder="startPlaceholder"
     :end-placeholder="endPlaceholder"
+    @change="change"
   ></el-time-picker>
 </template>
 <script>
@@ -67,6 +68,12 @@ export default {
         this.$emit('input', val)
       }
     }
+  },
+
+  methods: {
+    change() {
+      this.$emit('change', this.innerValue)
+    }
   }
 }
 </script>

package/components/toolbar/index.js

@@ -6,6 +6,8 @@ Toolbar.install = (Vue) => {
   Vue.component(ToolbarItem.name, ToolbarItem)
 }
 
+Toolbar.ToolbarItem = ToolbarItem
+
 export {
   Toolbar,
   ToolbarItem

package/components/transfer/index.js

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

package/components/transfer/transfer-element.vue

@@ -0,0 +1,109 @@
+<script>
+import ElTransfer from 'element-ui/lib/transfer'
+import 'element-ui/lib/theme-chalk/transfer.css'
+
+Object.assign(ElTransfer.components.TransferPanel, {
+  name: 'UiTransferElementPanel',
+  inject: ['ElTransfer'],
+  mixins: [].concat(ElTransfer.components.TransferPanel.mixins || [], [{
+    watch: {
+      query () {
+        if (!this.isRemote()) {
+          return
+        }
+        if (this.queryMethod) {
+          this.queryMethod({
+            keyword: this.query
+          })
+        }
+      }
+    },
+    methods: {
+      isRemote () {
+        if (!this.ElTransfer.remote) {
+          return false
+        }
+        return this !== this.ElTransfer.$refs.rightPanel
+      }
+    }
+  }]),
+  computed: Object.assign({}, ElTransfer.components.TransferPanel.computed, {
+    queryMethod () {
+      return this.ElTransfer.queryMethod
+    },
+    filteredData () {
+      if (this.isRemote()) {
+        return this.data
+      }
+      return this.data.filter((item) => {
+        if (typeof this.filterMethod === 'function') {
+          return this.filterMethod(this.query, item);
+        } else {
+          var label = item[this.labelProp] || item[this.keyProp].toString();
+          return label.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
+        }
+      })
+    }
+  })
+})
+
+export default Object.assign(ElTransfer, {
+  mixins: [].concat(ElTransfer.mixins || [], [{
+    props: {
+      remote: {
+        type: Boolean,
+        default: false
+      },
+      queryMethod: {
+        type: Function
+      }
+    },
+    watch: {
+      data () {
+        if (!this.cacheDataMap) {
+          this.cacheDataMap = {}
+        }
+        if (this.data && this.data.length) {
+          this.data.forEach(v => {
+            this.cacheDataMap[v[this.props.key]] = v
+          })
+        }
+      }
+    }
+  }]),
+  provide () {
+    return {
+      ElTransfer: this
+    }
+  },
+  computed: Object.assign({}, ElTransfer.computed, {
+    targetData() {
+      if (this.remote) {
+        if (this.targetOrder === 'original') {
+          return this.value.map(v => this.cacheDataMap[v])
+        } else {
+          return this.value.reduce((arr, cur) => {
+            const val = this.dataObj[cur];
+            if (val) {
+              arr.push(val);
+            }
+            return arr;
+          }, []);
+        }
+      } else {
+        if (this.targetOrder === 'original') {
+          return this.data.filter(item => this.value.indexOf(item[this.props.key]) > -1);
+        } else {
+          return this.value.reduce((arr, cur) => {
+            const val = this.dataObj[cur];
+            if (val) {
+              arr.push(val);
+            }
+            return arr;
+          }, []);
+        }
+      }
+    }
+  })
+})
+</script>