@zkwq/business 0.0.1

package/src/components/base/ui/radio/radio.vue

@@ -0,0 +1,134 @@
+<template>
+  <label
+    class="base-radio"
+    :class="[
+      border && radioSize ? 'base-radio--' + radioSize : '',
+      { 'is-disabled': isDisabled },
+      { 'is-focus': focus },
+      { 'is-bordered': border },
+      { 'is-checked': model === label }
+    ]"
+    role="radio"
+    :aria-checked="model === label"
+    :aria-disabled="isDisabled"
+    :tabindex="tabIndex"
+    @keydown.space.stop.prevent="model = isDisabled ? model : label"
+  >
+    <span class="base-radio__input"
+      :class="{
+        'is-disabled': isDisabled,
+        'is-checked': model === label,
+        'is-invisible': border
+      }"
+    >
+      <span class="base-radio__inner"></span>
+      <input
+        ref="radio"
+        class="base-radio__original"
+        :value="label"
+        type="radio"
+        aria-hidden="true"
+        v-model="model"
+        @focus="focus = true"
+        @blur="focus = false"
+        @change="handleChange"
+        :name="name"
+        :disabled="isDisabled"
+        tabindex="-1"
+      >
+    </span>
+    <span class="base-radio__label" @keydown.stop>
+      <slot></slot>
+      <template v-if="!$slots.default">{{label}}</template>
+    </span>
+  </label>
+</template>
+<script>
+import Emitter from '../mixin/emitter'
+export default {
+  name: 'BaseRadio',
+
+  mixins: [Emitter],
+
+  inject: {
+    baseForm: {
+      default: ''
+    },
+
+    baseFormItem: {
+      default: ''
+    }
+  },
+
+  componentName: 'BaseRadio',
+
+  props: {
+    value: {},
+    label: {},
+    disabled: Boolean,
+    name: String,
+    border: Boolean,
+    size: String
+  },
+
+  data() {
+    return {
+      focus: false
+    }
+  },
+
+  computed: {
+    isGroup() {
+      let parent = this.$parent
+      while (parent) {
+        if (parent.$options.componentName !== 'BaseRadioGroup') {
+          parent = parent.$parent
+        } else {
+          this._radioGroup = parent
+          return true
+        }
+      }
+      return false
+    },
+    model: {
+      get() {
+        return this.isGroup ? this._radioGroup.value : this.value
+      },
+      set(val) {
+        if (this.isGroup) {
+          this.dispatch('BaseRadioGroup', 'input', [val])
+        } else {
+          this.$emit('input', val)
+        }
+        this.$refs.radio && (this.$refs.radio.checked = this.model === this.label)
+      }
+    },
+    _baseFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize
+    },
+    radioSize() {
+      const temRadioSize = this.size || this._baseFormItemSize || (this.$ELEMENT || {}).size
+      return this.isGroup
+        ? this._radioGroup.radioGroupSize || temRadioSize
+        : temRadioSize
+    },
+    isDisabled() {
+      return this.isGroup
+        ? this._radioGroup.disabled || this.disabled || (this.baseForm || {}).disabled
+        : this.disabled || (this.baseForm || {}).disabled
+    },
+    tabIndex() {
+      return (this.isDisabled || (this.isGroup && this.model !== this.label)) ? -1 : 0
+    }
+  },
+
+  methods: {
+    handleChange () {
+      this.$nextTick(() => {
+        this.$emit('change', this.model)
+        this.isGroup && this.dispatch('BaseRadioGroup', 'handleChange', this.model)
+      })
+    }
+  }
+}
+</script>

package/src/components/base/ui/row/row.js

@@ -0,0 +1,47 @@
+export default {
+  name: 'BaseRow',
+
+  componentName: 'BaseRow',
+
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    gutter: Number,
+    type: String,
+    justify: {
+      type: String,
+      default: 'start'
+    },
+    align: {
+      type: String,
+      default: 'top'
+    }
+  },
+
+  computed: {
+    style() {
+      const ret = {};
+
+      if (this.gutter) {
+        ret.marginLeft = `-${this.gutter / 2}px`;
+        ret.marginRight = ret.marginLeft;
+      }
+
+      return ret;
+    }
+  },
+
+  render(h) {
+    return h(this.tag, {
+      class: [
+        'base-row',
+        this.justify !== 'start' ? `is-justify-${this.justify}` : '',
+        this.align !== 'top' ? `is-align-${this.align}` : '',
+        { 'base-row--flex': this.type === 'flex' }
+      ],
+      style: this.style
+    }, this.$slots.default);
+  }
+};

package/src/components/base/ui/scrollbar/bar.jsx

@@ -0,0 +1,91 @@
+import { on, off } from '../util/dom'
+import { renderThumbStyle, BAR_MAP } from './util'
+
+export default {
+  name: 'Bar',
+
+  props: {
+    vertical: Boolean,
+    size: String,
+    move: Number
+  },
+
+  computed: {
+    bar() {
+      return BAR_MAP[this.vertical ? 'vertical' : 'horizontal']
+    },
+
+    wrap() {
+      return this.$parent.wrap
+    }
+  },
+
+  render(h) {
+    const { size, move, bar } = this
+
+    return (
+      <div
+        class={ ['base-scrollbar__bar', 'is-' + bar.key] }
+        onMousedown={ this.clickTrackHandler } >
+        <div
+          ref="thumb"
+          class={['base-scrollbar__thumb',{'is-grab':this.cursorDown}]}
+          onMousedown={ this.clickThumbHandler }
+          style={ renderThumbStyle({ size, move, bar }) }>
+        </div>
+      </div>
+    )
+  },
+
+  methods: {
+    clickThumbHandler(e) {
+      // prevent click event of right button
+      if (e.ctrlKey || e.button === 2) {
+        return
+      }
+      this.startDrag(e)
+      this[this.bar.axis] = (e.currentTarget[this.bar.offset] - (e[this.bar.client] - e.currentTarget.getBoundingClientRect()[this.bar.direction]))
+    },
+
+    clickTrackHandler(e) {
+      const offset = Math.abs(e.target.getBoundingClientRect()[this.bar.direction] - e[this.bar.client])
+      const thumbHalf = (this.$refs.thumb[this.bar.offset] / 2)
+      const thumbPositionPercentage = ((offset - thumbHalf) * 100 / this.$el[this.bar.offset])
+
+      this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100)
+    },
+
+    startDrag(e) {
+      e.stopImmediatePropagation()
+      this.cursorDown = true
+
+      on(document, 'mousemove', this.mouseMoveDocumentHandler)
+      on(document, 'mouseup', this.mouseUpDocumentHandler)
+      document.onselectstart = () => false
+    },
+
+    mouseMoveDocumentHandler(e) {
+      if (this.cursorDown === false) return
+      const prevPage = this[this.bar.axis]
+
+      if (!prevPage) return
+
+      const offset = ((this.$el.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]) * -1)
+      const thumbClickPosition = (this.$refs.thumb[this.bar.offset] - prevPage)
+      const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 / this.$el[this.bar.offset])
+
+      this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100)
+    },
+
+    mouseUpDocumentHandler(e) {
+      this.cursorDown = false
+      this[this.bar.axis] = 0
+      off(document, 'mousemove', this.mouseMoveDocumentHandler)
+      document.onselectstart = null
+    }
+  },
+
+  destroyed() {
+    off(document, 'mouseup', this.mouseUpDocumentHandler)
+  }
+}

package/src/components/base/ui/scrollbar/index.jsx

@@ -0,0 +1,203 @@
+import { addResizeListener, removeResizeListener } from '../util/resize-events'
+import scrollbarWidth from '../util/scrollbar-width'
+import { toObject } from '../util'
+import Bar from './bar'
+// import { mapActions } from 'vuex'
+// import { SET_SCROLL_MOVE_Y } from '../../../../store/mutation-types'
+
+export default {
+  name: 'BaseScrollbar',
+
+  components: { Bar },
+
+  props: {
+    native: Boolean,
+    wrapStyle: {},
+    wrapClass: {},
+    viewClass: {},
+    viewStyle: {},
+    noresize: Boolean,
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    duration: {
+      type: Number,
+      default: 1000
+    },
+    enableCalc: {
+      type: Boolean,
+      default: true
+    },
+    alone: {
+      type: Boolean,
+      default: false
+    },
+    offsetBottom: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data() {
+    return {
+      sizeWidth: '0',
+      sizeHeight: '0',
+      moveX: 0,
+      moveY: 0
+    }
+  },
+
+  computed: {
+    wrap() {
+      return this.$refs.wrap
+    }
+  },
+
+  render(h) {
+    let gutter = scrollbarWidth()
+    let style = this.wrapStyle
+
+    if (gutter) {
+      const gutterWith = `-${gutter}px`
+      const gutterStyle = `margin-bottom: 0; margin-right: ${gutterWith};`
+
+      if (Array.isArray(this.wrapStyle)) {
+        style = toObject(this.wrapStyle)
+        style.marginRight = style.marginBottom = gutterWith
+      } else if (typeof this.wrapStyle === 'string') {
+        style += gutterStyle
+      } else {
+        style = gutterStyle
+      }
+    }
+    const view = h(this.tag, {
+      class: ['base-scrollbar__view', this.viewClass],
+      style: this.viewStyle,
+      ref: 'resize'
+    }, this.$slots.default)
+    const wrap = (
+      <div
+        ref="wrap"
+        style={ style }
+        onScroll={ this.handleScroll }
+        class={ [this.wrapClass, 'base-scrollbar__wrap', gutter ? '' : 'base-scrollbar__wrap--hidden-default'] }>
+        { [view] }
+      </div>
+    )
+    let nodes
+
+    if (!this.native) {
+      nodes = ([
+        wrap,
+        <Bar
+          move={ this.moveX }
+          size={ this.sizeWidth }></Bar>,
+        <Bar
+          vertical
+          move={ this.moveY }
+          size={ this.sizeHeight }></Bar>
+      ])
+    } else {
+      nodes = ([
+        <div
+          ref="wrap"
+          class={ [this.wrapClass, 'base-scrollbar__wrap'] }
+          style={ style }>
+          { [view] }
+        </div>
+      ])
+    }
+    return h('div', { class: 'base-scrollbar' }, nodes)
+  },
+
+  methods: {
+    // ...mapActions([
+    //   SET_SCROLL_MOVE_Y
+    // ]),
+
+    handleScroll () {
+      const wrap = this.wrap
+
+      this.moveY = ((wrap.scrollTop * 100) / wrap.clientHeight)
+      this.moveX = ((wrap.scrollLeft * 100) / wrap.clientWidth)
+
+      if (this.enableCalc) {
+        let isMovedToBottom = wrap.scrollTop + wrap.clientHeight >= wrap.scrollHeight - 10 - this.offsetBottom
+        this.$emit('on-scroll', wrap.scrollTop, isMovedToBottom)
+        if (!this.alone) {
+          // this.SET_SCROLL_MOVE_Y(wrap.scrollTop)
+        }
+      }
+
+    },
+
+    easing(t, b, c, d) {
+      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b
+    },
+    scrollTo(offsetTop, smooth) {
+      if (smooth) {
+        let startTop = this.wrap.scrollTop
+        let startTimestamp
+        let scroll = (timestamp) => {
+          if (!startTimestamp) startTimestamp = timestamp
+          let progress = timestamp - startTimestamp
+          let step
+          if (offsetTop > startTop) {
+            step = this.easing(progress, startTop, offsetTop, this.duration)
+            this.wrap.scrollTop = step >= offsetTop ? offsetTop : step.toFixed(0)
+          } else {
+            step = this.easing(progress, offsetTop, startTop, this.duration)
+            this.wrap.scrollTop = (startTop - step).toFixed(0) <= offsetTop ? offsetTop : (startTop - step).toFixed(0)
+          }
+          if (progress < this.duration) {
+            timer = requestAnimationFrame(scroll)
+          } else {
+            cancelAnimationFrame(timer)
+          }
+        }
+        let timer
+        if (timer) {
+          cancelAnimationFrame(timer)
+        }
+        timer = requestAnimationFrame(scroll)
+      } else {
+        this.wrap.scrollTop = offsetTop
+      }
+    },
+    scrollTop() {
+      this.scrollTo(0, true)
+      if (this.enableCalc && !this.alone) {
+        // this.SET_SCROLL_MOVE_Y(0)
+      }
+    },
+    scrollBottom() {
+      this.scrollTo(this.wrap.scrollHeight, true)
+      if (this.enableCalc && !this.alone) {
+        // this.SET_SCROLL_MOVE_Y(this.wrap.scrollHeight)
+      }
+    },
+    update() {
+      let heightPercentage, widthPercentage
+      const wrap = this.wrap
+      if (!wrap) return
+
+      heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight)
+      widthPercentage = (wrap.clientWidth * 100 / wrap.scrollWidth)
+
+      this.sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : ''
+      this.sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : ''
+    }
+  },
+
+  mounted() {
+    if (this.native) return
+    this.$nextTick(this.update)
+    !this.noresize && addResizeListener(this.$refs.resize, this.update)
+  },
+
+  beforeDestroy() {
+    if (this.native) return
+    !this.noresize && removeResizeListener(this.$refs.resize, this.update)
+  }
+}

package/src/components/base/ui/scrollbar/util.js

@@ -0,0 +1,32 @@
+export const BAR_MAP = {
+  vertical: {
+    offset: 'offsetHeight',
+    scroll: 'scrollTop',
+    scrollSize: 'scrollHeight',
+    size: 'height',
+    key: 'vertical',
+    axis: 'Y',
+    client: 'clientY',
+    direction: 'top'
+  },
+  horizontal: {
+    offset: 'offsetWidth',
+    scroll: 'scrollLeft',
+    scrollSize: 'scrollWidth',
+    size: 'width',
+    key: 'horizontal',
+    axis: 'X',
+    client: 'clientX',
+    direction: 'left'
+  }
+}
+
+export function renderThumbStyle({ move, size, bar }) {
+  const style = {}
+  const translate = `translate${bar.axis}(${ move }%)`
+  style[bar.size] = size
+  style.transform = translate
+  style.msTransform = translate
+  style.webkitTransform = translate
+  return style
+}

package/src/components/base/ui/select/Option.vue

@@ -0,0 +1,168 @@
+<template>
+  <li
+    v-ripple
+    @mouseenter="hoverItem"
+    @click.stop="selectOptionClick"
+    class="base-select-dropdown__item"
+    v-show="visible"
+    :class="{
+      'selected': itemSelected,
+      'is-disabled': disabled || groupDisabled || limitReached,
+      'hover': hover
+    }">
+    <slot>
+      <span>{{ currentLabel }}</span>
+    </slot>
+  </li>
+</template>
+
+<script type="text/babel">
+import Ripple from '../directive/ripple'
+import Emitter from '../mixin/emitter'
+import { getValueByPath, escapeRegexpString } from '../util/index'
+export default {
+  mixins: [Emitter],
+  name: 'BaseOption',
+  componentName: 'BaseOption',
+  directives: {
+    Ripple
+  },
+  inject: ['select'],
+  props: {
+    value: {
+      required: true
+    },
+    label: [String, Number],
+    created: Boolean,
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      index: -1,
+      groupDisabled: false,
+      visible: true,
+      hitState: false,
+      hover: false
+    }
+  },
+
+  computed: {
+    isObject() {
+      return Object.prototype.toString.call(this.value).toLowerCase() === '[object object]'
+    },
+
+    currentLabel() {
+      return this.label || (this.isObject ? '' : this.value)
+    },
+
+    currentValue() {
+      return this.value || this.label || ''
+    },
+
+    itemSelected() {
+      if (!this.select.multiple) {
+        return this.isEqual(this.value, this.select.value)
+      } else {
+        return this.contains(this.select.value, this.value)
+      }
+    },
+
+    limitReached() {
+      if (this.select.multiple) {
+        return !this.itemSelected &&
+          (this.select.value || []).length >= this.select.multipleLimit &&
+          this.select.multipleLimit > 0
+      } else {
+        return false
+      }
+    }
+  },
+
+  watch: {
+    currentLabel() {
+      if (!this.created && !this.select.remote) this.dispatch('BaseSelect', 'setSelected')
+    },
+    value(val, oldVal) {
+      const { remote, valueKey } = this.select
+      if (!this.created && !remote) {
+        if (valueKey && typeof val === 'object' && typeof oldVal === 'object' && val[valueKey] === oldVal[valueKey]) {
+          return
+        }
+        this.dispatch('BaseSelect', 'setSelected')
+      }
+    }
+  },
+
+  methods: {
+    isEqual(a, b) {
+      if (!this.isObject) {
+        return a === b
+      } else {
+        const valueKey = this.select.valueKey
+        return getValueByPath(a, valueKey) === getValueByPath(b, valueKey)
+      }
+    },
+
+    contains(arr = [], target) {
+      if (!this.isObject) {
+        return arr && arr.indexOf(target) > -1
+      } else {
+        const valueKey = this.select.valueKey
+        return arr && arr.some(item => {
+          return getValueByPath(item, valueKey) === getValueByPath(target, valueKey)
+        })
+      }
+    },
+
+    handleGroupDisabled(val) {
+      this.groupDisabled = val
+    },
+
+    hoverItem() {
+      if (!this.disabled && !this.groupDisabled) {
+        this.select.hoverIndex = this.select.options.indexOf(this)
+      }
+    },
+
+    selectOptionClick() {
+      if (this.disabled !== true && this.groupDisabled !== true) {
+        this.dispatch('BaseSelect', 'handleOptionClick', [this, true])
+      }
+    },
+
+    queryChange(query) {
+      this.visible = new RegExp(escapeRegexpString(query), 'i').test(this.currentLabel) || this.created
+      if (!this.visible) {
+        this.select.filteredOptionsCount--
+      }
+    }
+  },
+
+  created() {
+    this.select.options.push(this)
+    this.select.cachedOptions.push(this)
+    this.select.optionsCount++
+    this.select.filteredOptionsCount++
+
+    this.$on('queryChange', this.queryChange)
+    this.$on('handleGroupDisabled', this.handleGroupDisabled)
+  },
+
+  beforeDestroy() {
+    const { selected, multiple } = this.select
+    let selectedOptions = multiple ? selected : [selected]
+    let index = this.select.cachedOptions.indexOf(this)
+    let selectedIndex = selectedOptions.indexOf(this)
+
+    // if option is not selected, remove it from cache
+    if (index > -1 && selectedIndex < 0) {
+      this.select.cachedOptions.splice(index, 1)
+    }
+    this.select.onOptionDestroy(this.select.options.indexOf(this))
+  }
+}
+</script>