@aochuang/common 1.0.0 → 1.0.1

package/components/radio/radio.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-radio
+    class="ui-radio"
+    :class="{'is-viewable': !editable}"
+    v-bind="$props"
+    v-model="innerValue"
+  ><slot></slot></el-radio>
+</template>
+
+<script>
+import ElRadio from 'element-ui/lib/radio'
+import 'element-ui/lib/theme-chalk/radio.css'
+
+export default {
+  name: 'UiRadio',
+  components: {
+    ElRadio
+  },
+  props: Object.assign({}, ElRadio.props),
+  inject: {
+    UiRadioGroup: {
+      default: null
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    },
+    editable () {
+      if (!this.UiRadioGroup) {
+        return true
+      }
+      return this.UiRadioGroup.editable
+    }
+  }
+}
+</script>
+<style lang="less">
+body {
+  .el-radio{
+    margin-right: 20px;
+  }
+  .el-radio__label{
+    font-size: 14px;
+  }
+  .el-radio__inner{
+    width: 16px;
+    height: 16px;
+    border-width: 2px;
+    box-sizing: border-box;
+    &:after{
+      width: 8px;
+      height: 8px;
+    }
+  }
+  .el-radio{
+    line-height: 32px;
+  }
+  .el-radio__input{
+    vertical-align: top;
+    margin-top: 8px;
+    line-height: 1em;
+  }
+  .el-radio__input.is-checked+.el-radio__label{
+    color: #404040;
+  }
+  .el-radio-button.el-radio-button--small{
+    .el-radio-button__inner{
+      padding-top: 6px;
+      padding-bottom: 6px;
+    }
+  }
+}
+.ui-radio{
+  &.is-viewable{
+    &:not(.is-checked) {
+      display: none;
+    }
+    .el-radio__input{
+      display: none;
+    }
+    .el-radio__label{
+      padding-left: 0;
+    }
+  }
+}
+</style>

package/components/radio-button/index.js

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

package/components/radio-button/radio-button.vue

@@ -0,0 +1,20 @@
+<script>
+import ElRadioButton from 'element-ui/lib/radio-button'
+import 'element-ui/lib/theme-chalk/radio-button.css'
+
+export default {
+  ...ElRadioButton,
+  name: 'UiRadioButton',
+  props: {
+    ...ElRadioButton.props
+  }
+}
+</script>
+<style lang="less">
+body {
+  .el-radio-button--small .el-radio-button__inner{
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+}
+</style>

package/components/radio-group/index.js

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

package/components/radio-group/radio-group.vue

@@ -0,0 +1,22 @@
+<script>
+import ElRadioGroup from 'element-ui/lib/radio-group'
+import 'element-ui/lib/theme-chalk/radio-group.css'
+
+export default {
+  ...ElRadioGroup,
+  name: 'UiRadioGroup',
+  mixins: [].concat(ElRadioGroup.mixins || [], [{
+    props: {
+      editable: {
+        type: Boolean,
+        default: true
+      }
+    },
+    provide () {
+      return {
+        UiRadioGroup: this
+      }
+    }
+  }])
+}
+</script>

package/components/searchbox/index.js

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

package/components/searchbox/searchbox.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="ui-searchbox" :class="['ui-searchbox--' + type]" :style="style">
+    <ui-textbox
+      class="ui-searchbox__input"
+      ref="textbox"
+      v-model.trim="keyword"
+      :readonly="innerLoading"
+      :placeholder="placeholder"
+      :validate-event="false"
+      :maxlength="null"
+      @keyup.native.enter="handleNativeEnter"
+      @input="handleInput"
+      @blur="handleBlur"
+    >
+      <span key="loading" v-if="innerLoading" slot="suffix" class="ui-searchbox__btn is-loading">
+        <ui-icon name="loading"></ui-icon>
+      </span>
+      <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>
+    </ui-textbox>
+  </div>
+</template>
+<script>
+import UiIcon from '../icon/icon'
+import UiTextbox from '../textbox'
+
+export default {
+  name: 'UiSearchbox',
+  components: {
+    UiIcon,
+    UiTextbox
+  },
+  props: {
+    mode: {
+      type: String,
+      default: 'alone',
+      validator: (val) => {
+        return ['merge', 'alone'].indexOf(val) >= 0
+      }
+    },
+    width: {
+      type: String
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: String
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    placeholder: {
+      type: String
+    },
+    props: {
+      type: Array,
+      default: () => []
+    },
+    immediate: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'border',
+      validator (value) {
+        return ['border', 'background'].indexOf(value) >= 0
+      }
+    },
+    submitMethod: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      keyword: '',
+      innerLoading: this.loading
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+        this.handleSearch(val)
+      }
+    },
+    style () {
+      const sy = {}
+      if (this.width) {
+        sy.width = this.width
+      }
+      return sy
+    },
+    showClear () {
+      return this.value === this.keyword && (this.value !== '' && this.keyword !== '')
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler (val) {
+        this.keyword = val ? String(val).trim() : ''
+      }
+    },
+    loading () {
+      this.innerLoading = this.loading
+    },
+    data () {
+      this.search()
+    }
+  },
+  methods: {
+    handleSearch () {
+      this.doSearch()
+    },
+    handleClear () {
+      this.doSearch(() => {
+        this.keyword = ''
+      })
+    },
+    handleInput () {
+      if (this.immediate) {
+        this.doSearch()
+      }
+    },
+    handleBlur () {
+      // 避免失去焦点就触发搜索，但是还是需要保留重复点击搜索框能够触发搜索的逻辑
+      if (this.value === this.keyword) {
+        return
+      }
+      // blur时增加延时，优先清空和搜索图标点击的逻辑
+      this._blurSearch = setTimeout(() => {
+        this.doSearch()
+      })
+    },
+    handleNativeEnter () {
+      this.doSearch()
+    },
+    doSearch (callback) {
+      if (this._disableSearch) {
+        return
+      }
+      callback && callback()
+      this.search()
+      this._disableSearch = true
+      this._searchTimer = setTimeout(() => {
+        this._disableSearch = false
+      }, 20)
+    },
+    search () {
+      let result
+      if (!this.keyword || !this.props || !this.props.length) {
+        result = this.data
+      } else if (Array.isArray(this.data)) {
+        result = this.data.filter(v => {
+          return this.props.some(p => String(v[p]).indexOf(this.keyword) >= 0)
+        })
+      }
+      result = result || []
+      this.$emit('input', this.keyword)
+      this.$emit('search', {
+        keyword: this.keyword,
+        result
+      })
+      if (this.submitMethod) {
+        this.innerLoading = true
+        this.submitMethod().finally(() => {
+          this.innerLoading = false
+        })
+      }
+    },
+    focus () {
+      this.$refs.textbox && this.$refs.textbox.focus()
+    }
+  },
+  beforeDestroy () {
+    clearTimeout(this._timer)
+    clearTimeout(this._blurSearch)
+    clearTimeout(this._searchTimer)
+  }
+}
+</script>
+<style lang="less">
+.ui-searchbox{
+  width: 100%;
+}
+.ui-searchbox__props{
+  margin-right: 9px;
+  .ui-button.el-button--text{
+    color: #333;
+  }
+}
+.ui-searchbox__input.el-input{
+  .el-input__suffix{
+    right: 0;
+  }
+  .el-input-group__prepend{
+    background-color: transparent;
+  }
+}
+.ui-searchbox__btn{
+  display: inline-block;
+  text-align: center;
+  vertical-align: top;
+  cursor: pointer;
+  &.is-loading{
+    height: 30px;
+    width: 30px;
+    line-height: 30px;
+  }
+  &.is-search{
+    height: 30px;
+    width: 30px;
+    line-height: 30px;
+    transition: color .3s cubic-bezier(.645,.045,.355,1);
+    &:hover{
+      color: #666;
+    }
+  }
+  &.is-clear{
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 14px;
+    background-color: #ccc;
+    color: #fff;
+    margin-top: 8px;
+    margin-right: 8px;
+    .ui-icon{
+      font-size: 12px;
+      display: inline-block;
+      vertical-align: top;
+      margin-top: 1px;
+    }
+    &:hover{
+      color: #fff;
+      background-color: #999;
+    }
+  }
+}
+.ui-searchbox--background{
+  .ui-searchbox__input{
+    .el-input__inner{
+      border-color: transparent;
+      background-color: #F9FAFB;
+    }
+  }
+}
+</style>

package/components/select/index.js

@@ -0,0 +1,9 @@
+import Select from './select.vue'
+import Option from 'element-ui/lib/option'
+
+Select.install = (Vue) => {
+  Vue.component(Select.name, Select)
+  Vue.component('UiSelectItem', Option)
+}
+
+export default Select

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

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