@aochuang/common 1.0.0 → 1.0.1

package/components/sortable/sortable-item.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="ui-sortable-item" :class="[{'is-hover-handle': hoverShowHandle}, clsName]">
+    <template v-if="enableHandle">
+      <span v-if="!$scopedSlots.handle && !customHandle" class="ui-sortable-item__handle" :class="handleClass" title="拖拽排序"></span>
+      <slot v-else name="handle" :className="handleClass"></slot>
+    </template>
+    <slot :handle-class="handleClass"></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiSortableItem',
+  inject: ['UiSortable'],
+  props: {
+    customHandle: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    enableHandle () {
+      return this.UiSortable.innerEnableHandle
+    },
+    hoverShowHandle () {
+      return this.UiSortable.hoverShowHandle
+    },
+    handleClass () {
+      return this.UiSortable.handleClass
+    },
+    clsName () {
+      return this.UiSortable.id + '-item'
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-sortable-item{
+  position: relative;
+  &.is-hover-handle{
+    .ui-sortable-item__handle{
+      opacity: 0;
+    }
+    &:hover{
+      .ui-sortable-item__handle{
+        opacity: 1;
+      }
+    }
+  }
+}
+.ui-sortable-item__handle{
+  width: 12px;
+  height: 18px;
+  position: absolute;
+  left: 9px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 5;
+  cursor: move;
+  transition: all .3s;
+  &:after{
+    content: '';
+    top: 3px;
+    z-index: 10;
+    position: absolute;
+    cursor: move;
+    width: 1px;
+    height: 1px;
+    background-color: currentColor;
+    box-shadow:
+        0 0, 3px 0,
+        0 3px, 3px 3px,
+        0 6px, 3px 6px,
+        0 9px, 3px 9px;
+    border-radius: 50%;
+  }
+}
+</style>

package/components/sortable/sortable.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class='ui-sortable'>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import Sortable from 'sortablejs'
+
+let uniqueNumber = Date.now()
+
+export default {
+  name: 'UiSortable',
+  props: {
+    enableHandle: {
+      type: Boolean,
+      default: true
+    },
+    hoverShowHandle: {
+      type: Boolean,
+      default: true
+    }
+  },
+  provide () {
+    return {
+      UiSortable: this
+    }
+  },
+  computed: {
+    id () {
+      return 'ui-sortable-' + (uniqueNumber++)
+    },
+    innerEnableHandle () {
+      return this.enableHandle
+    },
+    handleClass () {
+      return this.id + '-handle'
+    }
+  },
+  mounted () {
+    this.sortable = new Sortable(this.$el, {
+      sort: true,
+      draggable: '.' + this.id + '-item',
+      handle: this.enableHandle ? '.' + this.handleClass : '.ui-sortable-item',
+      animation: 150,
+      ghostClass: 'ui-sortable--ghost',
+      chosenClass: 'ui-sortable--chosen',
+      dragClass: 'ui-sortable--drag',
+      forceFallback: true,
+      fallbackClass: 'ui-sortable__fallback',
+      onSort: (evt) => {
+        this.$emit('sort', {
+          oldIndex: evt.oldIndex,
+          newIndex: evt.newIndex
+        })
+      }
+    })
+  }
+}
+</script>
+<style lang="less">
+</style>

package/components/spinner/index.js

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

package/components/spinner/spinner.vue

@@ -0,0 +1,121 @@
+<template>
+  <input-number
+    ref="input"
+    v-model="innerValue"
+    class="ui-spinner"
+    :class="['ui-spinner--' + size, { 'is-adjustable': adjustable }]"
+    :size="size"
+    :controls-position="controlsPosition"
+    :placeholder="placeholder"
+    :precision="precision"
+    :disabled="disabled"
+    :max="max"
+    :min="min"
+    :style="{ width: width }"
+    @change="handleChange"
+  />
+</template>
+<script>
+import inputNumber from 'element-ui/lib/input-number'
+import 'element-ui/lib/theme-chalk/input-number.css'
+
+export default {
+  name: 'UiSpinner',
+  components: {
+    inputNumber
+  },
+  props: {
+    value: {
+      type: [String, Number]
+    },
+    disabled: {
+      type: Boolean
+    },
+    placeholder: {
+      type: String
+    },
+    emptiable: {
+      type: Boolean,
+      default: true
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    controlsPosition: {
+      type: String,
+      default: 'right'
+    },
+    adjustable: {
+      type: Boolean,
+      default: true
+    },
+    precision: {
+      type: Number
+    },
+    width: {
+      type: String,
+      default: '170px'
+    },
+    max: {
+      type: Number
+    },
+    min: {
+      type: Number
+    }
+  },
+  computed: {
+    innerValue: {
+      get() {
+        if (this.value === '') {
+          return
+        }
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  updated() {
+    if (this.emptiable) {
+      if (
+        this.value === null ||
+        this.value === undefined ||
+        this.value === ''
+      ) {
+        this.$refs.input.setCurrentValue(undefined)
+      }
+    } else {
+      if (!this.value) {
+        this.$refs.input.setCurrentValue(0)
+      }
+    }
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', {
+        value: e
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-spinner.el-input-number {
+  .el-input__inner{
+    box-sizing: border-box;
+  }
+  // &.el-input-number.el-input-number--small{
+  //   width: 170px;
+  // }
+  &.is-controls-right {
+    .el-input {
+      .el-input__inner {
+        text-align: left;
+        padding-left: 12px;
+      }
+    }
+  }
+}
+</style>

package/components/spinner-range/index.js

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

package/components/spinner-range/spinner-range.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="ui-spinner-range">
+    <div class="ui-spinner-range__item">
+      <ui-spinner v-model="innerStartValue" :precision="precision" :min="startMin" :max="startMax" :width="startWidth" :placeholder="startPlaceholder"></ui-spinner>
+    </div>
+    <div class="ui-spinner-range__line">~</div>
+    <div class="ui-spinner-range__item">
+      <ui-spinner v-model="innerEndValue" :precision="precision" :min="endMin" :max="endMax" :width="endWidth" :placeholder="endPlaceholder"></ui-spinner>
+    </div>
+    <div class="ui-spinner-range__unit">{{ unit }}</div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiSpinnerRange',
+  props: {
+    value: {
+      type: Array
+    },
+    unit: {
+      type: String
+    },
+    startPlaceholder: {
+      type: String
+    },
+    endPlaceholder: {
+      type: String
+    },
+    startMin: {
+      type: Number
+    },
+    startMax: {
+      type: Number
+    },
+    precision: {
+      type: Number
+    },
+    endMin: {
+      type: Number
+    },
+    endMax: {
+      type: Number
+    },
+    startWidth: {
+      type: String
+    },
+    endWidth: {
+      type: String
+    },
+  },
+  computed: {
+    innerValue: {
+      get () {
+        return this.value || []
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    },
+    innerStartValue: {
+      get () {
+        return this.innerValue[0]
+      },
+      set (val) {
+        const nextValue = [...this.innerValue]
+        nextValue.splice(0, 1, val)
+        this.innerValue = nextValue
+      }
+    },
+    innerEndValue: {
+      get () {
+        return this.innerValue[1]
+      },
+      set (val) {
+        const nextValue = [...this.innerValue]
+        nextValue.splice(1, 1, val)
+        this.innerValue = nextValue
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-spinner-range{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.ui-spinner-range__line{
+  color: #999;
+  margin: 0 6px;
+}
+.ui-spinner-range__unit{
+  color: #999;
+  margin-left: 6px;
+}
+</style>

package/components/spinner-textarea/index.js

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

package/components/spinner-textarea/spinner-textarea.vue

@@ -0,0 +1,65 @@
+<template>
+  <ui-textarea
+    ref="uiTextarea"
+    v-model="innerValue"
+    class="ui-spinner-textarea"
+    :class="['ui-spinner-textarea--' + size, { 'is-adjustable': adjustable }]"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :rows="rows"
+    :maxlength="null"
+    @change="handleChange"
+  />
+</template>
+<script>
+
+export default {
+  name: 'UiSpinnerTextarea',
+  props: {
+    rows: {
+      type: Number
+    },
+    value: {
+      type: [String, Number, Array]
+    },
+    rangeSeparator: {
+      type: String,
+      default: '\n'
+    },
+    disabled: {
+      type: Boolean
+    },
+    placeholder: {
+      type: String
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    adjustable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    innerValue: {
+      get() {
+        if (this.value instanceof Array) {
+          return this.value.join(this.rangeSeparator)
+        }
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', {
+        value: e.value
+      })
+    }
+  }
+}
+</script>

package/components/switch/index.js

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

package/components/switch/switch.vue

@@ -0,0 +1,105 @@
+<template>
+  <label class="ui-switch" :class="['ui-switch--' + size, {'is-disabled': disabled}]">
+    <div class="ui-switch__main">
+      <el-switch class="ui-switch__input" :width="switchWidth" :disabled="disabled" v-model="innerValue"></el-switch>
+      <span class="ui-switch__label" v-if="trueLabel && falseLabel">{{ value ? trueLabel : falseLabel }}</span>
+      <span class="ui-switch__label" v-if="$slots.default">
+        <slot></slot>
+      </span>
+    </div>
+  </label>
+</template>
+<script>
+import ElSwitch from 'element-ui/lib/switch'
+import 'element-ui/lib/theme-chalk/switch.css'
+
+export default {
+  name: 'UiSwitch',
+  components: {
+    ElSwitch
+  },
+  props: {
+    value: {
+      type: Boolean
+    },
+    size: {
+      type: String,
+      default: 'small',
+      validator (value) {
+        return ['small', 'mini'].includes(value)
+      }
+    },
+    disabled: {
+      type: Boolean
+    },
+    trueLabel: {
+      type: String
+    },
+    falseLabel: {
+      type: String
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    },
+    switchWidth () {
+      const sizeMap = {
+        small: 36,
+        mini: 24
+      }
+      return sizeMap[this.size]
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-switch{
+  display: inline-block;
+  vertical-align: top;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  &.is-disabled{
+    color: #aaa;
+    cursor: not-allowed;
+  }
+  .el-switch__core{
+    box-sizing: content-box;
+  }
+  .el-switch__core:after{
+    margin-top: 1px;
+    margin-left: 1px;
+  }
+  .el-switch.is-checked .el-switch__core::after{
+    margin-left: -15px;
+  }
+}
+.ui-switch__main{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  line-height: 1;
+}
+.ui-switch__label{
+  margin-left: 6px;
+}
+.ui-switch--mini{
+  .el-switch__core{
+    height: 16px;
+    &:after {
+      width: 12px;
+      height: 12px;
+    }
+  }
+  .el-switch.is-checked {
+    .el-switch__core::after{
+      margin-left: -13px;
+    }
+  }
+}
+</style>

package/components/tabs/index.js

@@ -0,0 +1,10 @@
+import Tabs from './tabs.vue'
+import TabsPane from 'element-ui/lib/tab-pane'
+import 'element-ui/lib/theme-chalk/tab-pane.css'
+
+Tabs.install = (Vue) => {
+  Vue.component(Tabs.name, Tabs)
+  Vue.component('UiTabsPane', TabsPane)
+}
+
+export default Tabs

package/components/tabs/tabs.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-tabs
+    ref="tabs"
+    class="ui-tabs"
+    v-model="innerValue"
+    :tab-position="tabPosition"
+    :type="type"
+    :style="style"
+    @tab-click="handleTabClick"
+  >
+    <slot></slot>
+  </el-tabs>
+</template>
+<script>
+import Tabs from 'element-ui/lib/tabs'
+import 'element-ui/lib/theme-chalk/tabs.css'
+
+export default {
+  name: 'UiTabs',
+  components: {
+    ElTabs: Tabs
+  },
+  props: {
+    value: {
+      type: String
+    },
+    type: {
+      type: String
+    },
+    align: {
+      type: String,
+      default: 'left',
+      validator (value) {
+        return ['left', 'center', 'right'].indexOf(value) >= 0
+      }
+    },
+    height: {
+      type: String
+    },
+    tabPosition: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      tabs: null
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    },
+    style () {
+      const style = {}
+      if (this.height) {
+        style.height = this.height
+      }
+      return style
+    }
+  },
+  mounted () {
+    this.tabs = this.$refs.tabs
+  },
+  methods: {
+    setCurrentName (name) {
+      this.$refs.tabs && this.$refs.tabs.setCurrentName(name)
+    },
+    // 上面那个会导致一直触发input事件，要解决切换选项卡检查是否有数据变化场景，需要静态方式设置currentName属性
+    setTabsStaticCurrentName (name) {
+      if (!this.$refs.tabs) {
+        return
+      }
+      this.$refs.tabs.currentName = name
+    },
+    handleTabClick (evt) {
+      this.$emit('tab-click', {
+        name: evt.name
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-tabs.is-one{
+  .el-tabs__header.is-top{
+    display: none;
+  }
+}
+.el-tabs--top.ui-tabs.el-tabs{
+  display: flex;
+  flex-direction: column;
+  .el-tabs__content{
+    flex: 1;
+    min-height: 0;
+    overflow: initial;
+  }
+  .el-tab-pane{
+    height: 100%;
+  }
+}
+.el-tabs--border-card.ui-tabs {
+  box-shadow: none;
+  & >.el-tabs__content{
+    padding: 0;
+  }
+  &.el-tabs--bottom .el-tabs__header.is-bottom{
+    margin-top: 0;
+  }
+}
+</style>

package/components/tag/index.js

@@ -0,0 +1,9 @@
+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)
+  }
+}