@aochuang/common 1.0.0 → 1.0.1

package/components/tag/tag.less

@@ -0,0 +1,30 @@
+body {
+  .el-tag {
+    white-space: break-spaces;
+    min-height: 20px;
+    line-height: 22px;
+    padding-left: 8px;
+    padding-right: 8px;
+    height: auto;
+  }
+  .el-tag.el-tag--primary{
+    color: #409EFF;
+    background-color: #ecf5ff;
+  }
+  .el-tag.el-tag--success{
+    color: #67C23A;
+    background-color: #f0f9eb;
+  }
+  .el-tag.el-tag--warning{
+    color: #E6A23C;
+    background-color: #fdf6ec;
+  }
+  .el-tag.el-tag--danger{
+    color: #F56C6C;
+    background-color: #fef0f0;
+  }
+  .el-tag.el-tag--info{
+    color: #172b4d;
+    background-color: #e6e6ea;
+  }
+}

package/components/text/index.js

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

package/components/text/text.vue

@@ -0,0 +1,69 @@
+<script>
+export default {
+  name: 'UiText',
+  functional: true,
+  props: {
+    icon: {
+      type: String
+    },
+    lineClamp: {
+      type: Number
+    },
+    type: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['default', 'info', 'primary', 'success', 'danger', 'warning'].includes(value)
+      }
+    }
+  },
+  render (h, c) {
+    const style = {}
+    if (c.props.lineClamp) {
+        style.display = '-webkit-box'
+        style.overflow = 'hidden'
+        style['text-overflow'] = 'ellipsis'
+        style['-webkit-line-clamp'] = c.props.lineClamp
+        style['-webkit-box-orient'] = 'vertical'
+    }
+    return h('span', {
+      class: ['ui-text', 'ui-text--' + c.props.type, c.data.class],
+      style
+    }, [
+      c.props.icon ? h('ui-icon', {
+        props: {
+          class: 'ui-text__icon',
+          name: c.props.icon
+        }
+      }) : null,
+      c.scopedSlots.default ? c.scopedSlots.default() : null
+    ])
+  }
+}
+</script>
+<style lang="less">
+.ui-text {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  white-space: pre-wrap;
+}
+.ui-text__icon{
+  margin-right: 4px;
+}
+.ui-text--info {
+  color: #909399;
+}
+.ui-text--primary {
+  color: #409eff;
+}
+.ui-text--success {
+  color: #67c23a;
+}
+.ui-text--danger {
+  color: #f56c6c;
+}
+.ui-text--warning {
+  color: #e6a23c;
+}
+</style>

package/components/textarea/index.js

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

package/components/textarea/textarea.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="ui-textarea" :class="{'is-worklimit': innerShowWordLimit, 'is-focus': focused, 'is-radius': radius, 'is-resizeable': resizeable, 'is-auto-height': autoHeight}" :style="{height: height}">
+    <div
+      v-if="!editable"
+      class="ui-textarea__view"
+    >{{innerValue}}</div>
+    <el-input
+      v-else
+      class="ui-textarea__input"
+      type="textarea"
+      ref="input"
+      :autosize="autoHeight"
+      v-model="innerValue"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :show-word-limit="innerShowWordLimit"
+      :maxlength="maxlength"
+      :rows="rows"
+      @change="handleChange"
+      @blur="handleBlur"
+      @focus="handleFocus"
+    >
+    </el-input>
+  </div>
+</template>
+<script>
+import { Input } from 'element-ui'
+import 'element-ui/lib/theme-chalk/input.css'
+
+export default {
+  name: 'UiTextarea',
+  components: {
+    ElInput: Input
+  },
+  props: {
+    rows: {
+      type: Number,
+      default: 3
+    },
+    maxlength: {
+      type: [Number, String],
+      default: 300
+    },
+    autoHeight: {
+      type: Boolean,
+      default: false
+    },
+    resizeable: {
+      type: Boolean,
+      default: true
+    },
+    placeholder: {
+      type: String
+    },
+    height: {
+      type: String
+    },
+    value: {
+      type: String
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean
+    },
+    radius: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      focused: false
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    },
+    innerShowWordLimit () {
+      if (this.maxlength) {
+        return true
+      }
+      return false
+    }
+  },
+  methods: {
+    handleChange (e) {
+      this.$emit('change', {
+        value: e
+      })
+    },
+    handleBlur () {
+      this.focused = false
+      this.$emit('blur')
+    },
+    handleFocus () {
+      this.focused = true
+    },
+    getSelectionRange () {
+      const value = this.value || ''
+      let selectionStart = value.length
+      let selectionEnd = selectionStart
+      if (this.$refs.input && this.$refs.input.$refs.textarea) {
+        selectionStart = this.$refs.input.$refs.textarea.selectionStart
+        selectionEnd = this.$refs.input.$refs.textarea.selectionEnd
+      }
+      return {
+        start: selectionStart,
+        end: selectionEnd
+      }
+    },
+    setSelectionStart (startIndex) {
+      if (typeof startIndex !== 'number') {
+        return
+      }
+      if (this.$refs.input && this.$refs.input.$refs.textarea) {
+        this.$refs.input.$refs.textarea.setSelectionRange(startIndex, startIndex)
+      }
+    },
+    focus () {
+      this.$nextTick(() => {
+        this.$refs.input && this.$refs.input.focus && this.$refs.input.focus()
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-textarea{
+  &.is-worklimit{
+    .el-textarea{
+      // .el-textarea__inner{
+      //   padding-bottom: 20px;
+      // }
+    }
+    .el-input__count{
+      position: static;
+      height: 20px;
+      line-height: 20px;
+      display: block;
+      text-align: right;
+      padding: 0 12px;
+      background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 17%, rgba(255,255,255,1) 100%);
+      background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 17%,rgba(255,255,255,1) 100%);
+      background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 17%,rgba(255,255,255,1) 100%);
+      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
+      pointer-events: none;
+    }
+  }
+  .ui-textarea__input {
+    border: 1px solid #DCDFE6;
+    box-sizing: border-box;
+    transition: all .25s;
+  }
+  &.is-radius .ui-textarea__input{
+    border-radius: 3px;
+    .el-textarea__inner{
+      border-radius: 3px;
+    }
+  }
+  &.is-resizeable{
+    .el-textarea__inner{
+      resize: vertical;
+    }
+  }
+  &.is-focus {
+    .ui-textarea__input {
+      border-color: #1aa2e8;
+      box-shadow: 0 0 0 0.2rem rgba(26, 162, 232,.25);
+    }
+  }
+}
+.ui-textarea {
+  &:not(.is-auto-height) {
+    .ui-textarea__input.el-textarea{
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      .el-textarea__inner{
+        flex: 1;
+      }
+    }
+  }
+  &.is-worklimit.is-auto-height {
+    .el-textarea .el-textarea__inner{
+      overflow: hidden;
+      padding-right: 50px;
+    }
+    .el-input__count{
+      background: none;
+      position: absolute;
+      right: -3px;
+      bottom: 0;
+      height: 28px;
+      line-height: 28px;
+    }
+  }
+}
+.ui-textarea__input.el-textarea .el-textarea__inner{
+  font-size: 14px;
+  transition: all .15s ease-in-out;
+  line-height: 24px;
+  padding: 3px 11px;
+  font-family: PingFangSC-Regular,PingFang SC;
+  border-radius: 0;
+  resize: none;
+  border: 0;
+  box-sizing: border-box;
+}
+.ui-textarea__view{
+  min-height: 24px;
+  padding: 3px 12px;
+  line-height: 24px;
+  white-space: pre-wrap;
+}
+.ui-textarea__prefixicon{
+  font-size: 18px;
+}
+</style>

package/components/textbox/index.js

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

package/components/textbox/textbox.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="ui-textbox" :class="{'has-icon': hasIcon, 'is-viewable': !editable}">
+    <div
+      class="ui-textbox__view"
+      v-if="!editable"
+    >
+      {{innerValue}}
+    </div>
+    <template v-else>
+      <span class="ui-textbox__icon" v-if="hasIcon" @click="handleIconClick">
+        <slot name="icon"></slot>
+      </span>
+      <el-input
+        ref="input"
+        class="ui-textbox__input"
+        :value="inputValue"
+        :type="type"
+        :disabled="disabled"
+        :readonly="readonly"
+        :size="size"
+        :placeholder="placeholder"
+        :clearable="clearable"
+        :maxlength="maxlength"
+        :show-word-limit="innerShowWordLimit"
+        :validate-event="validateEvent"
+        @keyup.native.13="handleEnter"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @clear="handleClear"
+        @change="handleChange"
+        @compositionstart.native="handleCompositionStart"
+        @compositionend.native="handleCompositionEnd"
+        @input="handleInput"
+      >
+        <template slot="prepend">
+          <slot name="prepend"></slot>
+        </template>
+        <template slot="suffix">
+          <slot name="suffix"></slot>
+        </template>
+        <template slot="append">
+          <slot name="append"></slot>
+        </template>
+      </el-input>
+    </template>
+  </div>
+</template>
+<script>
+import { Input } from 'element-ui'
+import 'element-ui/lib/theme-chalk/input.css'
+
+export default {
+  name: 'UiTextbox',
+  components: {
+    ElInput: Input
+  },
+  props: {
+    showWordLimit: {
+      type: null
+    },
+    maxlength: {
+      type: [Number, String],
+      default: 120
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'text',
+      validator: (val) => {
+        return ['password', 'text', 'number'].indexOf(val) >= 0
+      }
+    },
+    value: {
+      type: String
+    },
+    placeholder: {
+      type: String
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean
+    },
+    readonly: {
+      type: Boolean
+    },
+    validateEvent: {
+      type: Boolean,
+      default: true
+    },
+    keepInput: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      inputValue: ''
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    },
+    hasIcon () {
+      return this.$slots.icon
+    },
+    innerShowWordLimit () {
+      if (typeof this.showWordLimit === 'boolean') {
+        return this.showWordLimit
+      }
+      return !!this.maxlength
+    }
+  },
+  watch: {
+    innerValue () {
+      this.inputValue = this.innerValue
+    }
+  },
+  created () {
+    this.inputValue = this.innerValue
+  },
+  mounted () {
+    if (this.type === 'password') {
+      this.$refs.input.$refs.input.setAttribute('autocomplete', 'new-password')
+    }
+  },
+  methods: {
+    handleInput (value) {
+      if (this.keepInput) {
+        this.innerValue = value
+      } else {
+        this.inputValue = value
+      }
+    },
+    handleChange (e) {
+      this.$emit('change', {
+        value: e
+      })
+    },
+    handleEnter (e) {
+      this.innerValue = e.target.value.trim()
+      this.$emit('enter')
+    },
+    handleFocus (e) {
+      this.$emit('focus')
+    },
+    handleBlur (e) {
+      if (!this.keepInput) {
+        this.innerValue = (this.inputValue || '').trim()
+      }
+      this.$emit('blur')
+    },
+    handleClear () {
+      this.$emit('clear')
+    },
+    handleCompositionStart () {
+      this.$emit('composition-start')
+    },
+    handleCompositionEnd () {
+      this.$emit('composition-end')
+    },
+    handleIconClick () {
+      this.focus()
+    },
+    focus () {
+      this.$nextTick(() => {
+        this.$refs.input && this.$refs.input.focus && this.$refs.input.focus()
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-textbox{
+  outline: 0;
+  &.has-icon{
+    position: relative;
+    .ui-textbox__input{
+      .el-input__inner{
+        padding-left: 36px;
+      }
+    }
+  }
+  .el-input-group__prepend{
+    .ui-button {
+      margin: -1px -10px!important;
+      border-color: transparent!important;
+      box-shadow: none!important;
+    }
+  }
+  &.is-viewable{
+    .ui-textbox__view{
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+  .ui-textbox__input.el-input{
+    .el-input__inner{
+      box-sizing: border-box;
+    }
+  }
+}
+.ui-textbox__icon{
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 300;
+  width: 20px;
+  text-align: center;
+  height: 20px;
+  line-height: 20px;
+}
+.ui-textbox__view{
+  position: relative;
+  line-height: 24px;
+  min-height: 24px;
+  padding: 4px 12px;
+}
+.ui-textbox__view-empty{
+  position: absolute;
+  bottom: -3px;
+  left: 12px;
+  color: transparent;
+}
+.ui-textbox__input.el-input{
+  &.el-input--suffix{
+    .el-input__inner{
+      padding-right: 38px;
+    }
+  }
+  .el-input__suffix{
+    z-index: 3;
+  }
+  .el-input__inner{
+    font-size: 14px;
+    transition: all .15s ease-in-out;
+    font-family: PingFangSC-Regular,PingFang SC;
+    padding-left: 11px;
+    padding-right: 11px;
+    position: relative;
+    z-index: 3;
+    &:focus{
+      border-color: #1aa2e8;
+      box-shadow: 0 0 0 0.2rem rgba(26, 162, 232,.25);
+    }
+    &::placeholder{
+      color: #bababa;
+    }
+  }
+  .el-input-group__prepend,
+  .el-input-group__append{
+    padding-left: 9px;
+    padding-right: 9px;
+  }
+}
+.ui-textbox.el-input--large{
+  line-height: 40px;
+}
+</style>

package/components/time-picker/index.js

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

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

@@ -0,0 +1,77 @@
+<template>
+  <el-time-picker
+    class="ui-time-picker"
+    v-model="innerValue"
+    size="small"
+    range-separator="至"
+    :disabled="disabled"
+    :is-range="isRange"
+    :clearable="clearable"
+    :value-format="valueFormat"
+    :format="format"
+    :placeholder="placeholder"
+    :start-placeholder="startPlaceholder"
+    :end-placeholder="endPlaceholder"
+  ></el-time-picker>
+</template>
+<script>
+import ElTimePicker from 'element-ui/lib/time-picker'
+import 'element-ui/lib/theme-chalk/time-picker.css'
+
+export default {
+  name: 'UiTimePicker',
+  components: {
+    ElTimePicker
+  },
+  props: {
+    value: {
+      type: [Array, Date, String]
+    },
+    format: {
+      type: String
+    },
+    valueFormat: {
+      type: String,
+      default: 'yyyy-MM-dd HH:mm:ss'
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    startPlaceholder: {
+      type: String,
+      default: '开始时间'
+    },
+    endPlaceholder: {
+      type: String,
+      default: '结束时间'
+    },
+    isRange: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-time-picker.el-date-editor{
+  width: 100%;
+}
+</style>