@zkwq/business 0.0.4 → 0.0.6

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

@@ -1,134 +0,0 @@
-<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

@@ -1,47 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,203 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,168 +0,0 @@
-<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>