@zkwq/business 0.0.4 → 0.0.6

package/src/components/base/ui/popover/main.vue

@@ -1,236 +0,0 @@
-<template>
-  <span>
-    <transition
-      :name="transition"
-      @after-enter="handleAfterEnter"
-      @after-leave="handleAfterLeave">
-      <div
-        class="base-popover base-popper"
-        :class="[popperClass, content && 'base-popover--plain']"
-        ref="popper"
-        v-show="!disabled && showPopper"
-        :style="{ width: width + 'px' }"
-        role="tooltip"
-        :id="tooltipId"
-        :aria-hidden="(disabled || !showPopper) ? 'true' : 'false'"
-      >
-        <div class="base-popover__title" v-if="title" v-text="title"></div>
-        <slot>{{ content }}</slot>
-      </div>
-    </transition>
-    <span class="base-popover__reference-wrapper" ref="wrapper" >
-      <slot name="reference"></slot>
-    </span>
-  </span>
-</template>
-<script>
-import Popper from '../util/vue-popper'
-import { on, off, addClass, removeClass } from '../util/dom'
-import { generateId } from '../util/index'
-
-export default {
-  name: 'BasePopover',
-
-  mixins: [Popper],
-
-  props: {
-    trigger: {
-      type: String,
-      default: 'click',
-      validator: value => ['click', 'focus', 'hover', 'manual'].indexOf(value) > -1
-    },
-    openDelay: {
-      type: Number,
-      default: 0
-    },
-    closeDelay: {
-      type: Number,
-      default: 200
-    },
-    title: String,
-    disabled: Boolean,
-    content: String,
-    reference: {},
-    popperClass: String,
-    width: {},
-    visibleArrow: {
-      default: false
-    },
-    arrowOffset: {
-      type: Number,
-      default: 0
-    },
-    transition: {
-      type: String,
-      default: 'fade-in-linear'
-    },
-    tabindex: {
-      type: Number,
-      default: 0
-    }
-  },
-
-  computed: {
-    tooltipId() {
-      return `base-popover-${generateId()}`;
-    }
-  },
-  watch: {
-    showPopper(val) {
-      if (this.disabled) {
-        return;
-      }
-      val ? this.$emit('show') : this.$emit('hide');
-    }
-  },
-
-  mounted() {
-    let reference = this.referenceElm = this.reference || this.$refs.reference;
-    const popper = this.popper || this.$refs.popper;
-
-    if (!reference && this.$refs.wrapper.children) {
-      reference = this.referenceElm = this.$refs.wrapper.children[0];
-    }
-    // 可访问性
-    if (reference) {
-      addClass(reference, 'base-popover__reference');
-      reference.setAttribute('aria-describedby', this.tooltipId);
-      reference.setAttribute('tabindex', this.tabindex); // tab序列
-      popper.setAttribute('tabindex', 0);
-
-      if (this.trigger !== 'click') {
-        on(reference, 'focusin', () => {
-          this.handleFocus();
-          const instance = reference.__vue__;
-          if (instance && typeof instance.focus === 'function') {
-            instance.focus();
-          }
-        });
-        on(popper, 'focusin', this.handleFocus);
-        on(reference, 'focusout', this.handleBlur);
-        on(popper, 'focusout', this.handleBlur);
-      }
-      on(reference, 'keydown', this.handleKeydown);
-      on(reference, 'click', this.handleClick);
-    }
-    if (this.trigger === 'click') {
-      on(reference, 'click', this.doToggle);
-      on(document, 'click', this.handleDocumentClick);
-    } else if (this.trigger === 'hover') {
-      on(reference, 'mouseenter', this.handleMouseEnter);
-      on(popper, 'mouseenter', this.handleMouseEnter);
-      on(reference, 'mouseleave', this.handleMouseLeave);
-      on(popper, 'mouseleave', this.handleMouseLeave);
-    } else if (this.trigger === 'focus') {
-      if (this.tabindex < 0) {
-        console.warn('[Element Warn][Popover]a negative taindex means that the element cannot be focused by tab key');
-      }
-      if (reference.querySelector('input, textarea')) {
-        on(reference, 'focusin', this.doShow);
-        on(reference, 'focusout', this.doClose);
-      } else {
-        on(reference, 'mousedown', this.doShow);
-        on(reference, 'mouseup', this.doClose);
-      }
-    }
-  },
-
-  beforeDestroy() {
-    this.cleanup();
-  },
-
-  deactivated() {
-    this.cleanup();
-  },
-
-  methods: {
-    doToggle() {
-      this.showPopper = !this.showPopper;
-    },
-    doShow() {
-      this.showPopper = true;
-    },
-    doClose() {
-      this.showPopper = false;
-    },
-    handleFocus() {
-      addClass(this.referenceElm, 'focusing');
-      if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = true;
-    },
-    handleClick() {
-      removeClass(this.referenceElm, 'focusing');
-    },
-    handleBlur() {
-      removeClass(this.referenceElm, 'focusing');
-      if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = false;
-    },
-    handleMouseEnter() {
-      clearTimeout(this._timer);
-      if (this.openDelay) {
-        this._timer = setTimeout(() => {
-          this.showPopper = true;
-        }, this.openDelay);
-      } else {
-        this.showPopper = true;
-      }
-    },
-    handleKeydown(ev) {
-      if (ev.keyCode === 27 && this.trigger !== 'manual') { // esc
-        this.doClose();
-      }
-    },
-    handleMouseLeave() {
-      clearTimeout(this._timer);
-      if (this.closeDelay) {
-        this._timer = setTimeout(() => {
-          this.showPopper = false;
-        }, this.closeDelay);
-      } else {
-        this.showPopper = false;
-      }
-    },
-    handleDocumentClick(e) {
-      let reference = this.reference || this.$refs.reference;
-      const popper = this.popper || this.$refs.popper;
-
-      if (!reference && this.$refs.wrapper.children) {
-        reference = this.referenceElm = this.$refs.wrapper.children[0];
-      }
-      if (!this.$el ||
-        !reference ||
-        this.$el.contains(e.target) ||
-        reference.contains(e.target) ||
-        !popper ||
-        popper.contains(e.target)) return;
-      this.showPopper = false;
-    },
-    handleAfterEnter() {
-      this.$emit('after-enter');
-    },
-    handleAfterLeave() {
-      this.$emit('after-leave');
-      this.doDestroy();
-    },
-    cleanup() {
-      if (this.openDelay || this.closeDelay) {
-        clearTimeout(this._timer);
-      }
-    }
-  },
-
-  destroyed() {
-    const reference = this.reference;
-
-    off(reference, 'click', this.doToggle);
-    off(reference, 'mouseup', this.doClose);
-    off(reference, 'mousedown', this.doShow);
-    off(reference, 'focusin', this.doShow);
-    off(reference, 'focusout', this.doClose);
-    off(reference, 'mousedown', this.doShow);
-    off(reference, 'mouseup', this.doClose);
-    off(reference, 'mouseleave', this.handleMouseLeave);
-    off(reference, 'mouseenter', this.handleMouseEnter);
-    off(document, 'click', this.handleDocumentClick);
-  }
-};
-</script>

package/src/components/base/ui/progress/Progress.vue

@@ -1,227 +0,0 @@
-<template>
-  <div
-    class="base-progress"
-    :class="[
-      'base-progress--' + type,
-      status ? 'is-' + status : '',
-      {
-        'base-progress--without-text': !showText,
-        'base-progress--text-inside': textInside,
-      }
-    ]"
-    role="progressbar"
-    :aria-valuenow="percentage"
-    aria-valuemin="0"
-    aria-valuemax="100"
-  >
-    <div class="base-progress-bar" v-if="type === 'line'">
-      <div class="base-progress-bar__outer" :style="{height: strokeWidth + 'px'}">
-        <div class="base-progress-bar__inner" :style="barStyle">
-          <div class="base-progress-bar__innerText" v-if="showText && textInside">{{content}}</div>
-        </div>
-      </div>
-    </div>
-    <div class="base-progress-circle" :style="{height: width + 'px', width: width + 'px'}" v-else>
-      <svg viewBox="0 0 100 100">
-        <path
-          class="base-progress-circle__track"
-          :d="trackPath"
-          stroke="#e5e9f2"
-          :stroke-width="relativeStrokeWidth"
-          fill="none"
-          :style="trailPathStyle"></path>
-        <path
-          class="base-progress-circle__path"
-          :d="trackPath"
-          :stroke="stroke"
-          fill="none"
-          :stroke-linecap="strokeLinecap"
-          :stroke-width="percentage ? relativeStrokeWidth : 0"
-          :style="circlePathStyle"></path>
-      </svg>
-    </div>
-    <div
-      class="base-progress__text"
-      v-if="showText && !textInside"
-      :style="{fontSize: progressTextSize + 'px'}"
-    >
-      <template v-if="!status">{{content}}</template>
-      <i v-else :class="iconClass"></i>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'BaseProgress',
-  props: {
-    type: {
-      type: String,
-      default: 'line',
-      validator: val => ['line', 'circle', 'dashboard'].indexOf(val) > -1
-    },
-    percentage: {
-      type: Number,
-      default: 0,
-      required: true,
-      validator: val => val >= 0 && val <= 100
-    },
-    status: {
-      type: String,
-      validator: val => ['success', 'exception', 'warning'].indexOf(val) > -1
-    },
-    strokeWidth: {
-      type: Number,
-      default: 6
-    },
-    strokeLinecap: {
-      type: String,
-      default: 'round'
-    },
-    textInside: {
-      type: Boolean,
-      default: false
-    },
-    width: {
-      type: Number,
-      default: 126
-    },
-    showText: {
-      type: Boolean,
-      default: true
-    },
-    color: {
-      type: [String, Array, Function],
-      default: ''
-    },
-    format: Function
-  },
-  computed: {
-    barStyle() {
-      const style = {}
-      style.width = this.percentage + '%'
-      style.backgroundColor = this.getCurrentColor(this.percentage)
-      return style
-    },
-    relativeStrokeWidth() {
-      return (this.strokeWidth / this.width * 100).toFixed(1)
-    },
-    radius() {
-      if (this.type === 'circle' || this.type === 'dashboard') {
-        return parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10)
-      } else {
-        return 0
-      }
-    },
-    trackPath() {
-      const radius = this.radius
-      const isDashboard = this.type === 'dashboard'
-      return `
-        M 50 50
-        m 0 ${isDashboard ? '' : '-'}${radius}
-        a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '-' : ''}${radius * 2}
-        a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '' : '-'}${radius * 2}
-        `
-    },
-    perimeter() {
-      return 2 * Math.PI * this.radius
-    },
-    rate() {
-      return this.type === 'dashboard' ? 0.75 : 1
-    },
-    strokeDashoffset() {
-      const offset = -1 * this.perimeter * (1 - this.rate) / 2
-      return `${offset}px`
-    },
-    trailPathStyle() {
-      return {
-        strokeDasharray: `${(this.perimeter * this.rate)}px, ${this.perimeter}px`,
-        strokeDashoffset: this.strokeDashoffset
-      }
-    },
-    circlePathStyle() {
-      return {
-        strokeDasharray: `${this.perimeter * this.rate * (this.percentage / 100) }px, ${this.perimeter}px`,
-        strokeDashoffset: this.strokeDashoffset,
-        transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease'
-      }
-    },
-    stroke() {
-      let ret
-      if (this.color) {
-        ret = this.getCurrentColor(this.percentage)
-      } else {
-        switch (this.status) {
-          case 'success':
-            ret = '#13ce66'
-            break
-          case 'exception':
-            ret = '#ff4949'
-            break
-          case 'warning':
-            ret = '#e6a23c'
-            break
-          default:
-            ret = '#20a0ff'
-        }
-      }
-      return ret
-    },
-    iconClass() {
-      if (this.status === 'warning') {
-        return 'base-icon-warning'
-      }
-      if (this.type === 'line') {
-        return this.status === 'success' ? 'base-icon-circle-check' : 'base-icon-circle-close'
-      } else {
-        return this.status === 'success' ? 'base-icon-check' : 'base-icon-close'
-      }
-    },
-    progressTextSize() {
-      return this.type === 'line'
-        ? 12 + this.strokeWidth * 0.4
-        : this.width * 0.111111 + 2
-    },
-    content() {
-      if (typeof this.format === 'function') {
-        return this.format(this.percentage) || ''
-      } else {
-        return `${this.percentage}%`
-      }
-    }
-  },
-  methods: {
-    getCurrentColor (percentage) {
-      if (typeof this.color === 'function') {
-        return this.color(percentage)
-      } else if (typeof this.color === 'string') {
-        return this.color
-      } else {
-        return this.getLevelColor(percentage)
-      }
-    },
-    getLevelColor (percentage) {
-      const colorArray = this.getColorArray().sort((a, b) => a.percentage - b.percentage)
-
-      for (let i = 0; i < colorArray.length; i++) {
-        if (colorArray[i].percentage > percentage) {
-          return colorArray[i].color
-        }
-      }
-      return colorArray[colorArray.length - 1].color
-    },
-    getColorArray () {
-      const color = this.color
-      const span = 100 / color.length
-      return color.map((seriesColor, index) => {
-        if (typeof seriesColor === 'string') {
-          return {
-            color: seriesColor,
-            percentage: (index + 1) * span
-          }
-        }
-        return seriesColor
-      })
-    }
-  }
-}
-</script>

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

@@ -1,114 +0,0 @@
-<template>
-  <label
-    class="base-radio-button"
-    :class="[
-      size ? 'base-radio-button--' + size : '',
-      { 'is-active': value === label },
-      { 'is-disabled': isDisabled },
-      { 'is-focus': focus }
-    ]"
-    role="radio"
-    :aria-checked="value === label"
-    :aria-disabled="isDisabled"
-    :tabindex="tabIndex"
-    @keydown.space.stop.prevent="value = isDisabled ? value : label"
-  >
-    <input
-      class="base-radio-button__orig-radio"
-      :value="label"
-      type="radio"
-      v-model="value"
-      :name="name"
-      @change="handleChange"
-      :disabled="isDisabled"
-      tabindex="-1"
-      @focus="focus = true"
-      @blur="focus = false"
-    >
-    <span
-      class="base-radio-button__inner"
-      :style="value === label ? activeStyle : null"
-      @keydown.stop>
-      <slot></slot>
-      <template v-if="!$slots.default">{{label}}</template>
-    </span>
-  </label>
-</template>
-<script>
-  import Emitter from '../mixin/emitter'
-
-  export default {
-    name: 'BaseRadioButton',
-
-    mixins: [Emitter],
-
-    inject: {
-      baseForm: {
-        default: ''
-      },
-      baseFormItem: {
-        default: ''
-      }
-    },
-
-    props: {
-      label: {},
-      disabled: Boolean,
-      name: String
-    },
-    data() {
-      return {
-        focus: false
-      }
-    },
-    computed: {
-      value: {
-        get() {
-          return this._radioGroup.value
-        },
-        set(value) {
-          this._radioGroup.$emit('input', value)
-        }
-      },
-      _radioGroup() {
-        let parent = this.$parent
-        while (parent) {
-          if (parent.$options.componentName !== 'BaseRadioGroup') {
-            parent = parent.$parent
-          } else {
-            return parent
-          }
-        }
-        return false
-      },
-      activeStyle() {
-        return {
-          backgroundColor: this._radioGroup.fill || '',
-          borderColor: this._radioGroup.fill || '',
-          boxShadow: this._radioGroup.fill ? `-1px 0 0 0 ${this._radioGroup.fill}` : '',
-          color: this._radioGroup.textColor || ''
-        }
-      },
-      _baseFormItemSize() {
-        return (this.elFormItem || {}).elFormItemSize
-      },
-      size() {
-        return this._radioGroup.radioGroupSize || this._baseFormItemSize || (this.$ELEMENT || {}).size
-      },
-      isDisabled() {
-        return this.disabled || this._radioGroup.disabled || (this.elForm || {}).disabled
-      },
-      tabIndex() {
-        return (this.isDisabled || (this._radioGroup && this.value !== this.label)) ? -1 : 0
-      }
-    },
-
-    methods: {
-      handleChange () {
-        this.$nextTick(() => {
-          this.dispatch('BaseRadioGroup', 'handleChange', this.value)
-        })
-      }
-    }
-  }
-</script>

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

@@ -1,111 +0,0 @@
-<template>
-  <component
-    :is="_baseTag"
-    class="base-radio-group"
-    role="radiogroup"
-    @keydown="handleKeydown"
-  >
-    <slot></slot>
-  </component>
-</template>
-<script>
-  import Emitter from '../mixin/emitter'
-
-  const keyCode = Object.freeze({
-    LEFT: 37,
-    UP: 38,
-    RIGHT: 39,
-    DOWN: 40
-  })
-  export default {
-    name: 'BaseRadioGroup',
-
-    componentName: 'BaseRadioGroup',
-
-    inject: {
-      baseFormItem: {
-        default: ''
-      }
-    },
-
-    mixins: [Emitter],
-
-    props: {
-      value: {},
-      size: String,
-      fill: String,
-      textColor: String,
-      disabled: Boolean
-    },
-
-    computed: {
-      _baseFormItemSize() {
-        return (this.baseFormItem || {}).baseFormItemSize
-      },
-      _baseTag() {
-        return (this.$vnode.data || {}).tag || 'div'
-      },
-      radioGroupSize() {
-        return this.size || this._baseFormItemSize || (this.$ELEMENT || {}).size
-      }
-    },
-
-    created() {
-      this.$on('handleChange', value => {
-        this.$emit('change', value)
-      })
-    },
-    mounted() {
-      // 当radioGroup没有默认选项时，第一个可以选中Tab导航
-      const radios = this.$el.querySelectorAll('[type=radio]')
-      const firstLabel = this.$el.querySelectorAll('[role=radio]')[0]
-      if (![].some.call(radios, radio => radio.checked) && firstLabel) {
-        firstLabel.tabIndex = 0
-      }
-    },
-    methods: {
-      handleKeydown(e) { // 左右上下按键 可以在radio组内切换不同选项
-        const target = e.target
-        const className = target.nodeName === 'INPUT' ? '[type=radio]' : '[role=radio]'
-        const radios = this.$el.querySelectorAll(className)
-        const length = radios.length
-        const index = [].indexOf.call(radios, target)
-        const roleRadios = this.$el.querySelectorAll('[role=radio]')
-        switch (e.keyCode) {
-          case keyCode.LEFT:
-          case keyCode.UP:
-            e.stopPropagation()
-            e.preventDefault()
-            if (index === 0) {
-              roleRadios[length - 1].click()
-              roleRadios[length - 1].focus()
-            } else {
-              roleRadios[index - 1].click()
-              roleRadios[index - 1].focus()
-            }
-            break
-          case keyCode.RIGHT:
-          case keyCode.DOWN:
-            if (index === (length - 1)) {
-              e.stopPropagation()
-              e.preventDefault()
-              roleRadios[0].click()
-              roleRadios[0].focus()
-            } else {
-              roleRadios[index + 1].click()
-              roleRadios[index + 1].focus()
-            }
-            break
-          default:
-            break
-        }
-      }
-    },
-    watch: {
-      value(value) {
-        this.dispatch('BaseFormItem', 'base.form.change', [this.value])
-      }
-    }
-  }
-</script>
-