@aochuang/common 1.0.0 → 1.0.126

package/components/textarea/textarea.vue

@@ -0,0 +1,245 @@
+<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" 
+      @keyup.native="handleKeyup" 
+      @keydown.native="handleKeydown" 
+      @paste.native="handlePaste"
+    >
+    </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: 10
+    },
+    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
+      })
+      const textarea = this.$refs.input.$el.querySelector('.el-textarea__inner');
+      textarea.style.height = 'auto'; // 重置高度为自动
+      textarea.style.height = textarea.scrollHeight + 'px'; // 根据内容调整高度
+    },
+    handleBlur () {
+      this.focused = false
+      this.$emit('blur')
+    },
+    handleFocus () {
+      this.focused = true
+      this.$emit('focus')
+    },
+    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)
+      }
+    },
+    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()
+      })
+    }
+  }
+}
+</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,84 @@
+<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"
+    @change="change"
+  ></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)
+      }
+    }
+  },
+
+  methods: {
+    change() {
+      this.$emit('change', this.innerValue)
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-time-picker.el-date-editor{
+  width: 100%;
+}
+</style>

package/components/toolbar/index.js

@@ -0,0 +1,16 @@
+import Toolbar from './toolbar.vue'
+import ToolbarItem from './toolbar-item.vue'
+
+Toolbar.install = (Vue) => {
+  Vue.component(Toolbar.name, Toolbar)
+  Vue.component(ToolbarItem.name, ToolbarItem)
+}
+
+Toolbar.ToolbarItem = 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>