@zkwq/business 0.0.1

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

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

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

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

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