@aochuang/common 1.0.1 → 1.0.126

package/common/wechat-emoji/utils.js

@@ -0,0 +1,52 @@
+import EmojiOrder from './order.json'
+import { html2Escape } from '../../utils/string'
+
+let emojiRegrex = null
+function generateEmojiRegrex () {
+  if (emojiRegrex) {
+    return emojiRegrex
+  }
+  const content = EmojiOrder.map(v => '\\[' + v + '\\]').join('|')
+  emojiRegrex = new RegExp(`(${content})`, 'g')
+  return emojiRegrex
+}
+
+let emojiPath = null
+function generateEmojiPaths () {
+  if (emojiPath) {
+    return emojiPath
+  }
+  emojiPath = EmojiOrder.reduce((rs, v) => {
+    rs[v] = require(`./emoji/${v}.png`)
+    return rs
+  }, {})
+  return emojiPath
+}
+
+export function loadWechatEmojiOptionsData () {
+  return new Promise((resolve, reject) => {
+    const data = generateEmojiPaths()
+    resolve(Object.keys(data).reduce((rs, k) => {
+      rs.push({
+        label: k,
+        src: data[k]
+      })
+      return rs
+    }, []))
+  })
+}
+
+export function parseWechatEmoji (content, isEscape) {
+  if (isEscape !== false) {
+    content = html2Escape(content)
+  }
+  const regrex = generateEmojiRegrex()
+  const paths = generateEmojiPaths()
+  return content.replace(regrex, (str1, str2) => {
+    const emoji = str2.substr(1, str2.length - 2)
+    if (paths[emoji]) {
+      return `<img width="24px" height="24px" src="${paths[emoji]}" alt="${emoji}"/>`
+    }
+    return str2
+  })
+}

package/common/wechat-emoji/wechat-emoji.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="ac-wechat-emoji">
+    <ul class="ac-wechat-emoji__list">
+      <li
+        class="ac-wechat-emoji__item"
+        v-for="(item, index) in data"
+        :key="index"
+        :style="{'background-image': `url(${item.src})`}"
+        :title="item.label"
+        @click="handleItemClick(item)"
+      >{{item.label}}</li>
+    </ul>
+  </div>
+</template>
+<script>
+import { loadWechatEmojiOptionsData } from './utils'
+
+export default {
+  name: 'AcWechatEmoji',
+  data () {
+    return {
+      loading: false,
+      data: []
+    }
+  },
+  created () {
+    this.loadWechatEmojiOptionsData()
+  },
+  methods: {
+    handleItemClick (item) {
+      this.$emit('select', {
+        item
+      })
+    },
+    loadWechatEmojiOptionsData () {
+      this.loading = true
+      loadWechatEmojiOptionsData().then((rs) => {
+        this.loading = false
+        this.data = rs || []
+      }, () => {
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.ac-wechat-emoji__list{
+  margin: 0;
+  padding: 6px;
+  &:after{
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+.ac-wechat-emoji__item{
+  float: left;
+  width: 36px;
+  height: 36px;
+  text-align: center;
+  line-height: 999;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: 24px;
+  transition: all .3s;
+  border-radius: 3px;
+  cursor: pointer;
+  &:hover{
+    background-color: #f3f3f3;
+  }
+}
+</style>

package/common/wechat-emoji-select/index.js

@@ -0,0 +1,3 @@
+import WechatEmojiSelect from './wechat-emoji-select'
+
+export default WechatEmojiSelect

package/common/wechat-emoji-select/wechat-emoji-select.vue

@@ -0,0 +1,67 @@
+<template>
+  <ui-popover
+    v-model="visible"
+    trigger="click"
+    class="ac-wechat-emoji-select"
+    :visible-arrow="true"
+    :class="{'is-active': visible}"
+  >
+    <template slot="reference">
+      <slot name="reference">
+        <ui-icon
+          class="ac-wechat-emoji-select__handle"
+          name="emoji-fill"
+          :size="20"
+        ></ui-icon>
+      </slot>
+    </template>
+    <div class="ac-wechat-emoji-select__panel">
+      <bi-wechat-emoji
+        @select="handleEmojiSelect"
+      ></bi-wechat-emoji>
+    </div>
+  </ui-popover>
+</template>
+<script>
+import { Popover as UiPopover, Icon as UiIcon } from '../../components'
+import BiWechatEmoji from '../wechat-emoji'
+
+export default {
+  name: 'AcWechatEmojiSelect',
+  components: {
+    BiWechatEmoji,
+    UiIcon,
+    UiPopover
+  },
+  data () {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    handleEmojiSelect (evt) {
+      this.$emit('select', evt)
+      this.visible = false
+    }
+  }
+}
+</script>
+<style lang="less">
+.ac-wechat-emoji-select{
+  &.is-active{
+    .ac-wechat-emoji-select__handle{
+      color: #fda73e;
+    }
+  }
+}
+.ac-wechat-emoji-select__handle{
+  color: #bababa;
+  cursor: pointer;
+  &:hover{
+    color: #999;
+  }
+}
+.ac-wechat-emoji-select__panel{
+  width: 480px;
+}
+</style>

package/components/advanced-filter/advanced-filter-condition.vue

@@ -40,7 +40,7 @@
     <div class="ui-advanced-filter-condition__toolbar">
       <slot name="toolbar-prepend"></slot>
       <ui-button plain type="primary" @click="handleAddConditionClick" icon="add-line">新增条件</ui-button>
-      <slot name="toolbar-append"></slot>
+      <slot v-if="UiAdvancedFilter.showScene" name="toolbar-append"></slot>
     </div>
   </div>
 </template>

package/components/advanced-filter/advanced-filter.vue

@@ -51,6 +51,11 @@ export default {
     },
     getValueComponent: {
       type: Function
+    },
+    // 是否显示场景
+    showScene: {
+      type: Boolean,
+      default: true
     }
   },
   provide () {
@@ -94,7 +99,7 @@ export default {
 .ui-advanced-filter__main{
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: baseline;
 }
 .ui-advanced-filter__col{
   display: flex;

package/components/advanced-filter/index.js

@@ -22,15 +22,14 @@ export {
   AdvancedFilterConditionToggle
 }
 
-export default {
-  defaultOperate,
-  getBuiltinControl,
-  AdvancedFilter,
-  AdvancedFilterPermanent,
-  AdvancedFilterPermanentItem,
-  AdvancedFilterScene,
-  AdvancedFilterSceneItem,
-  AdvancedFilterCondition,
-  AdvancedFilterConditionItem,
-  AdvancedFilterConditionToggle
-}
+AdvancedFilter.defaultOperate = defaultOperate
+AdvancedFilter.getBuiltinControl = getBuiltinControl
+AdvancedFilter.AdvancedFilterPermanent = AdvancedFilterPermanent
+AdvancedFilter.AdvancedFilterPermanentItem = AdvancedFilterPermanentItem
+AdvancedFilter.AdvancedFilterScene = AdvancedFilterScene
+AdvancedFilter.AdvancedFilterSceneItem = AdvancedFilterSceneItem
+AdvancedFilter.AdvancedFilterCondition = AdvancedFilterCondition
+AdvancedFilter.AdvancedFilterConditionItem = AdvancedFilterConditionItem
+AdvancedFilter.AdvancedFilterConditionToggle = AdvancedFilterConditionToggle
+
+export default AdvancedFilter

package/components/avatar/avatar.vue

@@ -2,7 +2,7 @@
   <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">
+        <bi-tooltip :content="name" :disabled="!name || !showTooltip">
           <span class="ui-avatar__image" :style="{'line-height': imageSize}">
             <ui-image
               class="ui-avatar__image-img"
@@ -12,10 +12,12 @@
               :radius="imageRadius"
               :width="imageSize"
               :height="imageSize"
+              fit="contain"
             ></ui-image>
             <span v-if="showOnline" class="ui-avatar__online" :title="online ? '在线' : '离线'"></span>
+            <slot name="addon"></slot>
           </span>
-        </ui-tooltip>
+        </bi-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>
@@ -28,11 +30,13 @@
 </template>
 <script>
 import UiImage from '../image'
+import BiTooltip from '../../common/tooltip'
 
 export default {
   name: 'UiAvatar',
   components: {
-    UiImage
+    UiImage,
+    BiTooltip
   },
   props: {
     src: {
@@ -60,7 +64,7 @@ export default {
       type: String,
       default: 'small',
       validator (value) {
-        // large 72 * 72
+        // large 60 * 60
         // medium 36 * 36
         // small 24 * 24
         return ['large', 'medium', 'small', 'mini', 'custom'].indexOf(value) >= 0
@@ -91,7 +95,7 @@ export default {
     },
     imageSize () {
       const map = {
-        large: '72px',
+        large: '60px',
         medium: '36px',
         small: '24px',
         mini: '18px'

package/components/button/button.vue

@@ -1,5 +1,6 @@
 <template>
   <el-button
+    ref="button"
     :type="type"
     :disabled="disabled || innerLoading"
     :size="size"
@@ -125,6 +126,14 @@ export default {
     }
   },
   methods: {
+    focus () {
+      if (!this.$refs.button) {
+        return
+      }
+      this._focusTimer = setTimeout(() => {
+        this.$refs.button.$el.focus()
+      })
+    },
     closeDialog () {
       if (this.$parent.$options.name === 'UiToolbarItem') {
         const popup = getClosestPopup(this)
@@ -171,6 +180,7 @@ export default {
   },
   beforeDestroy () {
     clearTimeout(this._loadingTimer)
+    clearTimeout(this._focusTimer)
   }
 }
 </script>
@@ -208,9 +218,11 @@ export default {
   }
   &.has-icon{
     padding-left: 7px;
+    padding-right: 7px;
   }
   &.is-link {
     height: auto;
+    border-color: transparent;
     .ui-button__inner{
       > span{
         &:not(.ui-button__icon) {
@@ -272,12 +284,10 @@ export default {
     padding-left: 4px;
     padding-right: 4px;
   }
-
   .ui-button__icon {
     height: 16px;
     vertical-align: top;
     margin-top: -2px;
-    margin-right: -2px;
   }
 }
 body .el-button--small{
@@ -488,6 +498,9 @@ body .el-button--medium{
       padding-left: 1px;
       padding-right: 1px;
       background-color: transparent;
+      &.is-disabled {
+        color: #A5ADBA; 
+      }
     }
     &:not(.is-plain) {
       &:not(.is-link) {

package/components/date-picker/date-picker.vue

@@ -112,7 +112,7 @@ export default {
       if (this.valueFormat) {
         return this.valueFormat
       }
-      if (this.type === 'datetime') {
+      if (this.type === 'datetime' || this.type === 'datetimerange') {
         return 'yyyy-MM-dd HH:mm:ss'
       }
       return 'yyyy-MM-dd'
@@ -121,7 +121,7 @@ export default {
       if (this.format) {
         return this.format
       }
-      if (this.type === 'datetime') {
+      if (this.type === 'datetime' || this.type === 'datetimerange') {
         return 'yyyy-MM-dd HH:mm:ss'
       }
       return 'yyyy-MM-dd'
@@ -170,6 +170,13 @@ export default {
           } else {
             return this.value
           }
+        } else if (Array.isArray(this.value)) {
+          return this.value.map(v => {
+            if (!v) {
+              return v
+            }
+            return parseDate(v)
+          })
         }
         return this.value
       },

package/components/dialog/dialog.vue

@@ -1,8 +1,9 @@
 <template>
   <el-dialog
+    ref="dialog"
     class="ui-dialog"
     :class="['ui-dialog--' + size, {'is-closeable': closeable, 'is-hide-header': hideHeader}]"
-    top="2vh"
+    :top="dialogTop"
     :append-to-body="true"
     :visible.sync="dialogVisible"
     :title="title"
@@ -40,6 +41,10 @@ export default {
     event: 'input'
   },
   props: {
+    dialogTop: {
+      type: String,
+      default: '2vh'
+    },
     width: {
       type: String
     },

package/components/dropdown/dropdown-item.vue

@@ -17,6 +17,10 @@ export default {
     divided: {
       type: Boolean
     },
+    show: {
+      type: Boolean,
+      default: true
+    },
     type: {
       type: String
     },
@@ -30,6 +34,7 @@ export default {
         label: this.label,
         type: this.type,
         icon: this.icon,
+        show: this.show,
         divided: this.divided,
         disabled: this.disabled
       }
@@ -48,8 +53,11 @@ export default {
       click: (evt) => {
         this.$emit('click', evt)
       },
-      render: () => {
-        return this.$slot.default ? this.$slot.default() : null
+      component: {
+        functional: true,
+        render: (h) => {
+          return this.$slots.default ? this.$slots.default : h('span', [this.props.label])
+        }
       }
     })
   },

package/components/dropdown/dropdown.vue

@@ -1,21 +1,25 @@
 <template>
   <el-dropdown
+    ref="dropdown"
     class="ui-dropdown"
     :class="[{'is-disabled': disabled}]"
     :trigger="trigger"
     :placement="placement"
     @command="handleCommand"
+    @visible-change="handleVisibleChange"
   >
-    <slot name="reference" :options="innerOptions">
+    <slot name="reference" :options="showOptions">
       <ui-button class="ui-dropdown__handle" :icon="icon" :size="size" :loading="loading" :type="type" :plain="plain">
         {{showLabel}}<i class="el-icon-arrow-down el-icon--right"></i>
       </ui-button>
     </slot>
-    <slot></slot>
+    <template v-if="dropdownMenuReady">
+      <slot></slot>
+    </template>
     <el-dropdown-menu class="ui-dropdown__menu" :class="[{'is-custom-item': $scopedSlots.item}, popupClass]" slot="dropdown">
       <el-dropdown-item
         class="ui-dropdown__item"
-        v-for="(item, index) in innerOptions"
+        v-for="(item, index) in showOptions"
         :key="index"
         :command="index"
         :divided="item.divided || (item.props && item.props.divided)"
@@ -24,7 +28,9 @@
       >
         <slot name="item" :item="item">
           <ui-icon v-if="item.icon || (item.props && item.props.icon)" class="ui-dropdown__item-icon" :name="item.icon || (item.props && item.props.icon)"></ui-icon>
-          <span class="ui-dropdown__item-text">{{item.label || (item.props && item.props.label)}}</span>
+          <span class="ui-dropdown__item-text">
+            <component :is="item.component"></component>
+          </span>
         </slot>
       </el-dropdown-item>
     </el-dropdown-menu>
@@ -99,13 +105,19 @@ export default {
       type: Boolean,
       default: false
     },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
     icon: {
       type: String
     }
   },
   data () {
     return {
+      visible: false,
       innerOptions: this.options,
+      dropdownMenuReady: this.lazy ? false : true
     }
   },
   computed: {
@@ -117,6 +129,9 @@ export default {
         return this.label
       }
       return this.currentItem ? this.currentItem.label : ''
+    },
+    showOptions () {
+      return this.innerOptions.filter(v => !v.props || v.props.show !== false)
     }
   },
   watch: {
@@ -125,6 +140,22 @@ export default {
     }
   },
   methods: {
+    refreshDropdownPosition () {
+      this.$nextTick(() => {
+        const dropdown = this.$refs.dropdown
+        if (!dropdown) {
+          return
+        }
+        if (typeof dropdown.broadcast === 'function') {
+          dropdown.broadcast('ElDropdownMenu', 'updatePopper')
+          return
+        }
+        const dropdownMenu = (dropdown.$children || []).find(child => child && (child.componentName === 'ElDropdownMenu' || (child.$options && child.$options.name === 'ElDropdownMenu')))
+        if (dropdownMenu) {
+          dropdownMenu.$emit('updatePopper')
+        }
+      })
+    },
     handleRenderItemClass (item) {
       const cls = []
       const map = {
@@ -136,7 +167,7 @@ export default {
       return cls
     },
     handleCommand (e) {
-      const item = this.innerOptions[e]
+      const item = this.showOptions[e]
       // 兼容以前的老逻辑，如果配置了item-click就不允许执行item.click了，因为后面新的方式可以直接监听dropdown-item的时间，能带上下文数据
       if (!this.$listeners['item-click']) {
         if (item.click) {
@@ -150,6 +181,15 @@ export default {
         itemData: this.itemData
       })
     },
+    handleVisibleChange (visible) {
+      if (visible && !this.dropdownMenuReady) {
+        this.dropdownMenuReady = true
+        this.refreshDropdownPosition()
+      } else if (visible) {
+        this.refreshDropdownPosition()
+      }
+      this.visible = visible
+    },
     addOption (option) {
       if (!option.id) {
         throw new Error('缺少唯一id')

package/components/dropdown/index.js

@@ -1,16 +1,16 @@
 import Dropdown from './dropdown.vue'
 import DropdownItem from './dropdown-item.vue'
 
+Dropdown.install = (Vue) => {
+  Vue.component(Dropdown.name, Dropdown)
+  Vue.component(DropdownItem.name, DropdownItem)
+}
+
+Dropdown.DropdownItem = DropdownItem
+
 export {
   Dropdown,
   DropdownItem
 }
 
-export default {
-  Dropdown,
-  DropdownItem,
-  install (Vue) {
-    Vue.component(Dropdown.name, Dropdown)
-    Vue.component(DropdownItem.name, DropdownItem)
-  }
-}
+export default Dropdown

package/components/empty/empty.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="ui-empty" :class="{'is-border': border}">
+  <div class="ui-empty" :class="[{'is-border': border}, 'ui-empty--' + size]">
     <div class="ui-empyt__icon" v-if="icon">
-      <ui-icon :name="icon" :size="60" color="#ccc"></ui-icon>
+      <ui-icon :name="icon" :size="iconSize" color="#ccc"></ui-icon>
     </div>
     <div class="ui-epmty__text">
       <slot name="text">{{text}}</slot>
@@ -23,10 +23,27 @@ export default {
     border: {
       type: Boolean
     },
+    size: {
+      type: String,
+      default: 'large',
+      validator (value) {
+        return ['small', 'large', 'mini'].includes(value)
+      }
+    },
     text: {
       type: String,
       default: '暂无数据'
     }
+  },
+  computed: {
+    iconSize () {
+      const map = {
+        small: 32,
+        large: 60,
+        mini: 20
+      }
+      return map[this.size]
+    }
   }
 }
 </script>
@@ -59,4 +76,14 @@ export default {
   margin-top: 6px;
   margin-bottom: 6px;
 }
+.ui-empty--mini {
+  .ui-epmty__text{
+    margin-top: -6px;
+  }
+}
+.ui-empty--small {
+  .ui-epmty__text{
+    margin-top: 0;
+  }
+}
 </style>

package/components/filter/filter.vue

@@ -186,7 +186,7 @@ export default {
     }
   },
   created () {
-    this.initValue = clone(this.value)
+    this.initValue = this.value ? clone(this.value) : null
     this.$watch(() => {
       return this.value
     }, () => {