cbvirtua 1.0.37 → 1.0.39

package/src/packages/slider/src/main.vue

@@ -0,0 +1,427 @@
+<template>
+  <div
+    class="el-slider"
+    :class="{ 'is-vertical': vertical, 'el-slider--with-input': showInput }"
+    role="slider"
+    :aria-valuemin="min"
+    :aria-valuemax="max"
+    :aria-orientation="vertical ? 'vertical': 'horizontal'"
+    :aria-disabled="sliderDisabled"
+  >
+    <el-input-number
+      v-model="firstValue"
+      v-if="showInput && !range"
+      class="el-slider__input"
+      ref="input"
+      @change="emitChange"
+      :step="step"
+      :disabled="sliderDisabled"
+      :controls="showInputControls"
+      :min="min"
+      :max="max"
+      :debounce="debounce"
+      :size="inputSize">
+    </el-input-number>
+    <div
+      class="el-slider__runway"
+      :class="{ 'show-input': showInput, 'disabled': sliderDisabled }"
+      :style="runwayStyle"
+      @click="onSliderClick"
+      ref="slider">
+      <div
+        class="el-slider__bar"
+        :style="barStyle">
+      </div>
+      <slider-button
+        :vertical="vertical"
+        v-model="firstValue"
+        :tooltip-class="tooltipClass"
+        ref="button1">
+      </slider-button>
+      <slider-button
+        :vertical="vertical"
+        v-model="secondValue"
+        :tooltip-class="tooltipClass"
+        ref="button2"
+        v-if="range">
+      </slider-button>
+      <div
+        class="el-slider__stop"
+        v-for="(item, key) in stops"
+        :key="key"
+        :style="getStopStyle(item)"
+        v-if="showStops">
+      </div>
+      <template v-if="markList.length > 0">
+        <div>
+          <div
+            v-for="(item, key) in markList"
+            :style="getStopStyle(item.position)"
+            class="el-slider__stop el-slider__marks-stop"
+            :key="key">
+          </div>
+        </div>
+        <div class="el-slider__marks">
+          <slider-marker
+            :mark="item.mark" v-for="(item, key) in markList"
+            :key="key"
+            :style="getStopStyle(item.position)">
+          </slider-marker>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script type="text/babel">
+  import ElInputNumber from 'element-ui/packages/input-number';
+  import SliderButton from './button.vue';
+  import SliderMarker from './marker';
+  import Emitter from 'element-ui/src/mixins/emitter';
+
+  export default {
+    name: 'ElSlider',
+
+    mixins: [Emitter],
+
+    inject: {
+      elForm: {
+        default: ''
+      }
+    },
+
+    props: {
+      min: {
+        type: Number,
+        default: 0
+      },
+      max: {
+        type: Number,
+        default: 100
+      },
+      step: {
+        type: Number,
+        default: 1
+      },
+      value: {
+        type: [Number, Array],
+        default: 0
+      },
+      showInput: {
+        type: Boolean,
+        default: false
+      },
+      showInputControls: {
+        type: Boolean,
+        default: true
+      },
+      inputSize: {
+        type: String,
+        default: 'small'
+      },
+      showStops: {
+        type: Boolean,
+        default: false
+      },
+      showTooltip: {
+        type: Boolean,
+        default: true
+      },
+      formatTooltip: Function,
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      range: {
+        type: Boolean,
+        default: false
+      },
+      vertical: {
+        type: Boolean,
+        default: false
+      },
+      height: {
+        type: String
+      },
+      debounce: {
+        type: Number,
+        default: 300
+      },
+      label: {
+        type: String
+      },
+      tooltipClass: String,
+      marks: Object
+    },
+
+    components: {
+      ElInputNumber,
+      SliderButton,
+      SliderMarker
+    },
+
+    data() {
+      return {
+        firstValue: null,
+        secondValue: null,
+        oldValue: null,
+        dragging: false,
+        sliderSize: 1
+      };
+    },
+
+    watch: {
+      value(val, oldVal) {
+        if (this.dragging ||
+          Array.isArray(val) &&
+          Array.isArray(oldVal) &&
+          val.every((item, index) => item === oldVal[index])) {
+          return;
+        }
+        this.setValues();
+      },
+
+      dragging(val) {
+        if (!val) {
+          this.setValues();
+        }
+      },
+
+      firstValue(val) {
+        if (this.range) {
+          this.$emit('input', [this.minValue, this.maxValue]);
+        } else {
+          this.$emit('input', val);
+        }
+      },
+
+      secondValue() {
+        if (this.range) {
+          this.$emit('input', [this.minValue, this.maxValue]);
+        }
+      },
+
+      min() {
+        this.setValues();
+      },
+
+      max() {
+        this.setValues();
+      }
+    },
+
+    methods: {
+      valueChanged() {
+        if (this.range) {
+          return ![this.minValue, this.maxValue]
+            .every((item, index) => item === this.oldValue[index]);
+        } else {
+          return this.value !== this.oldValue;
+        }
+      },
+      setValues() {
+        if (this.min > this.max) {
+          console.error('[Element Error][Slider]min should not be greater than max.');
+          return;
+        }
+        const val = this.value;
+        if (this.range && Array.isArray(val)) {
+          if (val[1] < this.min) {
+            this.$emit('input', [this.min, this.min]);
+          } else if (val[0] > this.max) {
+            this.$emit('input', [this.max, this.max]);
+          } else if (val[0] < this.min) {
+            this.$emit('input', [this.min, val[1]]);
+          } else if (val[1] > this.max) {
+            this.$emit('input', [val[0], this.max]);
+          } else {
+            this.firstValue = val[0];
+            this.secondValue = val[1];
+            if (this.valueChanged()) {
+              this.dispatch('ElFormItem', 'el.form.change', [this.minValue, this.maxValue]);
+              this.oldValue = val.slice();
+            }
+          }
+        } else if (!this.range && typeof val === 'number' && !isNaN(val)) {
+          if (val < this.min) {
+            this.$emit('input', this.min);
+          } else if (val > this.max) {
+            this.$emit('input', this.max);
+          } else {
+            this.firstValue = val;
+            if (this.valueChanged()) {
+              this.dispatch('ElFormItem', 'el.form.change', val);
+              this.oldValue = val;
+            }
+          }
+        }
+      },
+
+      setPosition(percent) {
+        const targetValue = this.min + percent * (this.max - this.min) / 100;
+        if (!this.range) {
+          this.$refs.button1.setPosition(percent);
+          return;
+        }
+        let button;
+        if (Math.abs(this.minValue - targetValue) < Math.abs(this.maxValue - targetValue)) {
+          button = this.firstValue < this.secondValue ? 'button1' : 'button2';
+        } else {
+          button = this.firstValue > this.secondValue ? 'button1' : 'button2';
+        }
+        this.$refs[button].setPosition(percent);
+      },
+
+      onSliderClick(event) {
+        if (this.sliderDisabled || this.dragging) return;
+        this.resetSize();
+        if (this.vertical) {
+          const sliderOffsetBottom = this.$refs.slider.getBoundingClientRect().bottom;
+          this.setPosition((sliderOffsetBottom - event.clientY) / this.sliderSize * 100);
+        } else {
+          const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
+          this.setPosition((event.clientX - sliderOffsetLeft) / this.sliderSize * 100);
+        }
+        this.emitChange();
+      },
+
+      resetSize() {
+        if (this.$refs.slider) {
+          this.sliderSize = this.$refs.slider[`client${ this.vertical ? 'Height' : 'Width' }`];
+        }
+      },
+
+      emitChange() {
+        this.$nextTick(() => {
+          this.$emit('change', this.range ? [this.minValue, this.maxValue] : this.value);
+        });
+      },
+
+      getStopStyle(position) {
+        return this.vertical ? { 'bottom': position + '%' } : { 'left': position + '%' };
+      }
+    },
+
+    computed: {
+      stops() {
+        if (!this.showStops || this.min > this.max) return [];
+        if (this.step === 0) {
+          process.env.NODE_ENV !== 'production' &&
+          console.warn('[Element Warn][Slider]step should not be 0.');
+          return [];
+        }
+        const stopCount = (this.max - this.min) / this.step;
+        const stepWidth = 100 * this.step / (this.max - this.min);
+        const result = [];
+        for (let i = 1; i < stopCount; i++) {
+          result.push(i * stepWidth);
+        }
+        if (this.range) {
+          return result.filter(step => {
+            return step < 100 * (this.minValue - this.min) / (this.max - this.min) ||
+              step > 100 * (this.maxValue - this.min) / (this.max - this.min);
+          });
+        } else {
+          return result.filter(step => step > 100 * (this.firstValue - this.min) / (this.max - this.min));
+        }
+      },
+
+      markList() {
+        if (!this.marks) {
+          return [];
+        }
+
+        const marksKeys = Object.keys(this.marks);
+        return marksKeys.map(parseFloat)
+          .sort((a, b) => a - b)
+          .filter(point => point <= this.max && point >= this.min)
+          .map(point => ({
+            point,
+            position: (point - this.min) * 100 / (this.max - this.min),
+            mark: this.marks[point]
+          }));
+      },
+
+      minValue() {
+        return Math.min(this.firstValue, this.secondValue);
+      },
+
+      maxValue() {
+        return Math.max(this.firstValue, this.secondValue);
+      },
+
+      barSize() {
+        return this.range
+          ? `${ 100 * (this.maxValue - this.minValue) / (this.max - this.min) }%`
+          : `${ 100 * (this.firstValue - this.min) / (this.max - this.min) }%`;
+      },
+
+      barStart() {
+        return this.range
+          ? `${ 100 * (this.minValue - this.min) / (this.max - this.min) }%`
+          : '0%';
+      },
+
+      precision() {
+        let precisions = [this.min, this.max, this.step].map(item => {
+          let decimal = ('' + item).split('.')[1];
+          return decimal ? decimal.length : 0;
+        });
+        return Math.max.apply(null, precisions);
+      },
+
+      runwayStyle() {
+        return this.vertical ? { height: this.height } : {};
+      },
+
+      barStyle() {
+        return this.vertical
+          ? {
+            height: this.barSize,
+            bottom: this.barStart
+          } : {
+            width: this.barSize,
+            left: this.barStart
+          };
+      },
+
+      sliderDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
+      }
+    },
+
+    mounted() {
+      let valuetext;
+      if (this.range) {
+        if (Array.isArray(this.value)) {
+          this.firstValue = Math.max(this.min, this.value[0]);
+          this.secondValue = Math.min(this.max, this.value[1]);
+        } else {
+          this.firstValue = this.min;
+          this.secondValue = this.max;
+        }
+        this.oldValue = [this.firstValue, this.secondValue];
+        valuetext = `${this.firstValue}-${this.secondValue}`;
+      } else {
+        if (typeof this.value !== 'number' || isNaN(this.value)) {
+          this.firstValue = this.min;
+        } else {
+          this.firstValue = Math.min(this.max, Math.max(this.min, this.value));
+        }
+        this.oldValue = this.firstValue;
+        valuetext = this.firstValue;
+      }
+      this.$el.setAttribute('aria-valuetext', valuetext);
+
+      // label screen reader
+      this.$el.setAttribute('aria-label', this.label ? this.label : `slider between ${this.min} and ${this.max}`);
+
+      this.resetSize();
+      window.addEventListener('resize', this.resetSize);
+    },
+
+    beforeDestroy() {
+      window.removeEventListener('resize', this.resetSize);
+    }
+  };
+</script>

package/src/packages/slider/src/marker.js

@@ -0,0 +1,18 @@
+export default {
+  name: 'ElMarker',
+
+  props: {
+    mark: {
+      type: [String, Object]
+    }
+  },
+  render() {
+    let label = typeof this.mark === 'string' ? this.mark : this.mark.label;
+
+    return (
+      <div class="el-slider__marks-text" style={ this.mark.style || {} }>
+        { label }
+      </div>
+    );
+  }
+};

package/src/packages/spinner/index.js

@@ -0,0 +1,8 @@
+import Spinner from './src/spinner';
+
+/* istanbul ignore next */
+Spinner.install = function(Vue) {
+  Vue.component(Spinner.name, Spinner);
+};
+
+export default Spinner;

package/src/packages/spinner/src/spinner.vue

@@ -0,0 +1,27 @@
+<template>
+  <span class="el-spinner">
+    <svg class="el-spinner-inner" viewBox="0 0 50 50" :style="{ width: radius/2 + 'px', height: radius/2 + 'px' }">
+      <circle class="path" cx="25" cy="25" r="20" fill="none" :stroke="strokeColor" :stroke-width="strokeWidth"></circle>
+    </svg>
+  </span>
+</template>
+<script>
+  export default {
+    name: 'ElSpinner',
+    props: {
+      type: String,
+      radius: {
+        type: Number,
+        default: 100
+      },
+      strokeWidth: {
+        type: Number,
+        default: 5
+      },
+      strokeColor: {
+        type: String,
+        default: '#efefef'
+      }
+    }
+  };
+</script>

package/src/packages/statistic/index.js

@@ -0,0 +1,8 @@
+import Statistic from './src/main';
+
+/* istanbul ignore next */
+Statistic.install = function(Vue) {
+  Vue.component(Statistic.name, Statistic);
+};
+
+export default Statistic;

package/src/packages/statistic/src/main.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="el-statistic">
+    <div class="head" v-if="title||$slots.title">
+      <slot name="title">
+        <span class="title">
+          {{ title }}
+        </span>
+      </slot>
+    </div>
+    <div class="con">
+      <span class="prefix" v-if="prefix||$slots.prefix">
+        <slot name="prefix" >
+          {{ prefix }}
+        </slot>
+      </span>
+      <span class="number" :style="valueStyle">
+        <slot name="formatter"> {{ disposeValue }}</slot>
+      </span>
+      <span class="suffix" v-if="suffix||$slots.suffix">
+        <slot name="suffix">
+          {{ suffix }}
+        </slot>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isNumber, chain, multiply, padStart, reduce} from 'element-ui/src/utils/lodash';
+export default {
+  name: 'ElStatistic',
+  data() {
+    return {
+      disposeValue: '',
+      timeTask: null,
+      REFRESH_INTERVAL: 1000 / 30
+    };
+  },
+  props: {
+    decimalSeparator: {
+      type: String,
+      default: '.'
+    },
+    groupSeparator: {
+      type: String,
+      default: ''
+    },
+    precision: {
+      type: Number,
+      default: null
+    },
+    value: {
+      type: [String, Number, Date],
+      default: ''
+    },
+    prefix: {
+      type: String,
+      default: ''
+    },
+    suffix: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: [String, Number],
+      default: ''
+    },
+    timeIndices: {
+      type: Boolean,
+      default: false
+    },
+    valueStyle: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    },
+    format: {
+      type: String,
+      default: 'HH:mm:ss:SSS'
+    },
+    rate: {
+      type: Number,
+      default: 1000
+    }
+  },
+  created() {
+    this.branch();
+  },
+  watch: {
+    value: function() {
+      this.branch();
+    },
+    groupSeparator() {
+      this.dispose();
+    },
+    mulriple() {
+      this.dispose();
+    }
+  },
+  methods: {
+    branch() {
+      let { timeIndices, countDown, dispose} = this;
+      if (timeIndices) {
+        countDown(this.value.valueOf() || this.value);
+      } else {
+        dispose();
+      }
+    },
+    magnification(num, mulriple = 1000, groupSeparator = ',') {
+      // magnification factor
+      const level = String(mulriple).length ;
+      return num.replace(new RegExp(`(\\d)(?=(\\d{${level - 1}})+$)`, 'g'), `$1${groupSeparator}`);
+    },
+    dispose() {
+      let { value, rate, groupSeparator } = this;
+      if (!isNumber(value)) return false;
+      if (this.precision) {
+        value = value.toFixed(this.precision);
+      }
+      let [integer, decimal] = String(value).split('.');
+      // 1000 multiplying power
+      if (groupSeparator) {
+        integer = this.magnification(integer, rate, groupSeparator);
+      }
+      let result = `${integer}${decimal ? this.decimalSeparator + decimal : ''}`;
+      this.disposeValue = result;
+      return result;
+    },
+    diffDate(minuend, subtrahend) {
+      return Math.max(minuend - subtrahend, 0);
+    },
+    suspend(isStop) {
+      if (isStop) {
+        if (this.timeTask) {
+          clearInterval(this.timeTask);
+          this.timeTask = null;
+        }
+      } else {
+        this.branch();
+      }
+      return this.disposeValue;
+    },
+    formatTimeStr: function(time) {
+      let {format} = this;
+      const escapeRegex = /\[[^\]]*]/g;
+      const keepList = (format.match(escapeRegex) || []).map(str => str.slice(1, -1));
+      const timeUnits = [
+        ['Y', 1000 * 60 * 60 * 24 * 365], // years
+        ['M', 1000 * 60 * 60 * 24 * 30], // months
+        ['D', 1000 * 60 * 60 * 24], // days
+        ['H', 1000 * 60 * 60], // hours
+        ['m', 1000 * 60], // minutes
+        ['s', 1000], // seconds
+        ['S', 1] // million seconds
+      ];
+      let formatText = reduce(
+        timeUnits,
+        (con, item) => {
+          const name = item[0];
+          return con.replace(new RegExp(`${name}+`, 'g'), (match) => {
+            let sum = chain(time).divide(item[1]).floor(0).value();
+            time -= multiply(sum, item[1]);
+            return padStart(String(sum), String(match).length, 0);
+          });
+        },
+        format
+      );
+      let index = 0;
+      return formatText.replace(escapeRegex, () => {
+        const match = keepList[index];
+        index += 1;
+        return match;
+      });
+    },
+    stopTime(time) {
+      let result = true; // stop
+      if (time) {
+        this.$emit('change', time);
+        result = false;
+      } else {
+        result = true;
+        this.suspend(true);
+        this.$emit('finish', true);
+      }
+      return result;
+    },
+    countDown(timeVlaue) {
+      let {REFRESH_INTERVAL, timeTask, diffDate, formatTimeStr, stopTime, suspend } = this;
+      if (timeTask) return;
+      let than = this;
+      this.timeTask = setInterval(()=> {
+        let diffTiem = diffDate(timeVlaue, Date.now());
+        than.disposeValue = formatTimeStr(diffTiem);
+        stopTime(diffTiem);
+      }, REFRESH_INTERVAL);
+      this.$once('hook:beforeDestroy', () => {
+        suspend(true);
+      });
+
+    }
+  }
+};
+</script>

package/src/packages/step/index.js

@@ -0,0 +1,8 @@
+import Step from '../steps/src/step';
+
+/* istanbul ignore next */
+Step.install = function(Vue) {
+  Vue.component(Step.name, Step);
+};
+
+export default Step;