7moor-element-ui 2.14.63

package/packages/radio/src/radio.vue

@@ -0,0 +1,133 @@
+<template>
+  <label
+    class="el-radio"
+    :class="[
+      border && radioSize ? 'el-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="el-radio__input"
+      :class="{
+        'is-disabled': isDisabled,
+        'is-checked': model === label
+      }"
+    >
+      <span class="el-radio__inner"></span>
+      <input
+        ref="radio"
+        class="el-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="el-radio__label" @keydown.stop>
+      <slot></slot>
+      <template v-if="!$slots.default">{{label}}</template>
+    </span>
+  </label>
+</template>
+<script>
+  import Emitter from '7moor-element-ui/src/mixins/emitter';
+
+  export default {
+    name: 'ElRadio',
+
+    mixins: [Emitter],
+
+    inject: {
+      elForm: {
+        default: ''
+      },
+
+      elFormItem: {
+        default: ''
+      }
+    },
+
+    componentName: 'ElRadio',
+
+    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 !== 'ElRadioGroup') {
+            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('ElRadioGroup', 'input', [val]);
+          } else {
+            this.$emit('input', val);
+          }
+          this.$refs.radio && (this.$refs.radio.checked = this.model === this.label);
+        }
+      },
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      radioSize() {
+        const temRadioSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+        return this.isGroup
+          ? this._radioGroup.radioGroupSize || temRadioSize
+          : temRadioSize;
+      },
+      isDisabled() {
+        return this.isGroup
+          ? this._radioGroup.disabled || this.disabled || (this.elForm || {}).disabled
+          : this.disabled || (this.elForm || {}).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('ElRadioGroup', 'handleChange', this.model);
+        });
+      }
+    }
+  };
+</script>

package/packages/radio-button/index.js

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

package/packages/radio-group/index.js

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

package/packages/rate/index.js

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

package/packages/rate/src/main.vue

@@ -0,0 +1,348 @@
+<template>
+  <div
+    class="el-rate"
+    @keydown="handleKey"
+    role="slider"
+    :aria-valuenow="currentValue"
+    :aria-valuetext="text"
+    aria-valuemin="0"
+    :aria-valuemax="max"
+    tabindex="0">
+    <span
+      v-for="(item, key) in max"
+      class="el-rate__item"
+      @mousemove="setCurrentValue(item, $event)"
+      @mouseleave="resetCurrentValue"
+      @click="selectValue(item)"
+      :style="{ cursor: rateDisabled ? 'auto' : 'pointer' }"
+      :key="key">
+      <i
+        :class="[classes[item - 1], { 'hover': hoverIndex === item }]"
+        class="el-rate__icon"
+        :style="getIconStyle(item)">
+        <i
+          v-if="showDecimalIcon(item)"
+          :class="decimalIconClass"
+          :style="decimalStyle"
+          class="el-rate__decimal">
+        </i>
+      </i>
+    </span>
+    <span v-if="showText || showScore" class="el-rate__text" :style="{ color: textColor }">{{ text }}</span>
+  </div>
+</template>
+
+<script>
+  import { hasClass } from '7moor-element-ui/src/utils/dom';
+  import { isObject } from '7moor-element-ui/src/utils/types';
+  import Migrating from '7moor-element-ui/src/mixins/migrating';
+
+  export default {
+    name: 'ElRate',
+
+    mixins: [Migrating],
+
+    inject: {
+      elForm: {
+        default: ''
+      }
+    },
+
+    data() {
+      return {
+        pointerAtLeftHalf: true,
+        currentValue: this.value,
+        hoverIndex: -1
+      };
+    },
+
+    props: {
+      value: {
+        type: Number,
+        default: 0
+      },
+      lowThreshold: {
+        type: Number,
+        default: 2
+      },
+      highThreshold: {
+        type: Number,
+        default: 4
+      },
+      max: {
+        type: Number,
+        default: 5
+      },
+      colors: {
+        type: [Array, Object],
+        default() {
+          return ['#F7BA2A', '#F7BA2A', '#F7BA2A'];
+        }
+      },
+      voidColor: {
+        type: String,
+        default: '#C6D1DE'
+      },
+      disabledVoidColor: {
+        type: String,
+        default: '#EFF2F7'
+      },
+      iconClasses: {
+        type: [Array, Object],
+        default() {
+          return ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'];
+        }
+      },
+      voidIconClass: {
+        type: String,
+        default: 'el-icon-star-off'
+      },
+      disabledVoidIconClass: {
+        type: String,
+        default: 'el-icon-star-on'
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      allowHalf: {
+        type: Boolean,
+        default: false
+      },
+      showText: {
+        type: Boolean,
+        default: false
+      },
+      showScore: {
+        type: Boolean,
+        default: false
+      },
+      textColor: {
+        type: String,
+        default: '#1f2d3d'
+      },
+      texts: {
+        type: Array,
+        default() {
+          return ['极差', '失望', '一般', '满意', '惊喜'];
+        }
+      },
+      scoreTemplate: {
+        type: String,
+        default: '{value}'
+      }
+    },
+
+    computed: {
+      text() {
+        let result = '';
+        if (this.showScore) {
+          result = this.scoreTemplate.replace(/\{\s*value\s*\}/, this.rateDisabled
+            ? this.value
+            : this.currentValue);
+        } else if (this.showText) {
+          result = this.texts[Math.ceil(this.currentValue) - 1];
+        }
+        return result;
+      },
+
+      decimalStyle() {
+        let width = '';
+        if (this.rateDisabled) {
+          width = `${ this.valueDecimal }%`;
+        } else if (this.allowHalf) {
+          width = '50%';
+        }
+        return {
+          color: this.activeColor,
+          width
+        };
+      },
+
+      valueDecimal() {
+        return this.value * 100 - Math.floor(this.value) * 100;
+      },
+
+      classMap() {
+        return Array.isArray(this.iconClasses)
+          ? {
+            [this.lowThreshold]: this.iconClasses[0],
+            [this.highThreshold]: { value: this.iconClasses[1], excluded: true },
+            [this.max]: this.iconClasses[2]
+          } : this.iconClasses;
+      },
+
+      decimalIconClass() {
+        return this.getValueFromMap(this.value, this.classMap);
+      },
+
+      voidClass() {
+        return this.rateDisabled ? this.disabledVoidIconClass : this.voidIconClass;
+      },
+
+      activeClass() {
+        return this.getValueFromMap(this.currentValue, this.classMap);
+      },
+
+      colorMap() {
+        return Array.isArray(this.colors)
+          ? {
+            [this.lowThreshold]: this.colors[0],
+            [this.highThreshold]: { value: this.colors[1], excluded: true },
+            [this.max]: this.colors[2]
+          } : this.colors;
+      },
+
+      activeColor() {
+        return this.getValueFromMap(this.currentValue, this.colorMap);
+      },
+
+      classes() {
+        let result = [];
+        let i = 0;
+        let threshold = this.currentValue;
+        if (this.allowHalf && this.currentValue !== Math.floor(this.currentValue)) {
+          threshold--;
+        }
+        for (; i < threshold; i++) {
+          result.push(this.activeClass);
+        }
+        for (; i < this.max; i++) {
+          result.push(this.voidClass);
+        }
+        return result;
+      },
+
+      rateDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
+      }
+    },
+
+    watch: {
+      value(val) {
+        this.currentValue = val;
+        this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
+      }
+    },
+
+    methods: {
+      getMigratingConfig() {
+        return {
+          props: {
+            'text-template': 'text-template is renamed to score-template.'
+          }
+        };
+      },
+
+      getValueFromMap(value, map) {
+        const matchedKeys = Object.keys(map)
+          .filter(key => {
+            const val = map[key];
+            const excluded = isObject(val) ? val.excluded : false;
+            return excluded ? value < key : value <= key;
+          })
+          .sort((a, b) => a - b);
+        const matchedValue = map[matchedKeys[0]];
+        return isObject(matchedValue) ? matchedValue.value : (matchedValue || '');
+      },
+
+      showDecimalIcon(item) {
+        let showWhenDisabled = this.rateDisabled && this.valueDecimal > 0 && item - 1 < this.value && item > this.value;
+        /* istanbul ignore next */
+        let showWhenAllowHalf = this.allowHalf &&
+          this.pointerAtLeftHalf &&
+          item - 0.5 <= this.currentValue &&
+          item > this.currentValue;
+        return showWhenDisabled || showWhenAllowHalf;
+      },
+
+      getIconStyle(item) {
+        const voidColor = this.rateDisabled ? this.disabledVoidColor : this.voidColor;
+        return {
+          color: item <= this.currentValue ? this.activeColor : voidColor
+        };
+      },
+
+      selectValue(value) {
+        if (this.rateDisabled) {
+          return;
+        }
+        if (this.allowHalf && this.pointerAtLeftHalf) {
+          this.$emit('input', this.currentValue);
+          this.$emit('change', this.currentValue);
+        } else {
+          this.$emit('input', value);
+          this.$emit('change', value);
+        }
+      },
+
+      handleKey(e) {
+        if (this.rateDisabled) {
+          return;
+        }
+        let currentValue = this.currentValue;
+        const keyCode = e.keyCode;
+        if (keyCode === 38 || keyCode === 39) { // left / down
+          if (this.allowHalf) {
+            currentValue += 0.5;
+          } else {
+            currentValue += 1;
+          }
+          e.stopPropagation();
+          e.preventDefault();
+        } else if (keyCode === 37 || keyCode === 40) {
+          if (this.allowHalf) {
+            currentValue -= 0.5;
+          } else {
+            currentValue -= 1;
+          }
+          e.stopPropagation();
+          e.preventDefault();
+        }
+        currentValue = currentValue < 0 ? 0 : currentValue;
+        currentValue = currentValue > this.max ? this.max : currentValue;
+
+        this.$emit('input', currentValue);
+        this.$emit('change', currentValue);
+      },
+
+      setCurrentValue(value, event) {
+        if (this.rateDisabled) {
+          return;
+        }
+        /* istanbul ignore if */
+        if (this.allowHalf) {
+          let target = event.target;
+          if (hasClass(target, 'el-rate__item')) {
+            target = target.querySelector('.el-rate__icon');
+          }
+          if (hasClass(target, 'el-rate__decimal')) {
+            target = target.parentNode;
+          }
+          this.pointerAtLeftHalf = event.offsetX * 2 <= target.clientWidth;
+          this.currentValue = this.pointerAtLeftHalf ? value - 0.5 : value;
+        } else {
+          this.currentValue = value;
+        }
+        this.hoverIndex = value;
+      },
+
+      resetCurrentValue() {
+        if (this.rateDisabled) {
+          return;
+        }
+        if (this.allowHalf) {
+          this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
+        }
+        this.currentValue = this.value;
+        this.hoverIndex = -1;
+      }
+    },
+
+    created() {
+      if (!this.value) {
+        this.$emit('input', 0);
+      }
+    }
+  };
+</script>

package/packages/row/index.js

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

package/packages/row/src/row.js

@@ -0,0 +1,47 @@
+export default {
+  name: 'ElRow',
+
+  componentName: 'ElRow',
+
+  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: [
+        'el-row',
+        this.justify !== 'start' ? `is-justify-${this.justify}` : '',
+        this.align !== 'top' ? `is-align-${this.align}` : '',
+        { 'el-row--flex': this.type === 'flex' }
+      ],
+      style: this.style
+    }, this.$slots.default);
+  }
+};

package/packages/scrollbar/index.js

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

package/packages/scrollbar/src/bar.js

@@ -0,0 +1,92 @@
+import { on, off } from '7moor-element-ui/src/utils/dom';
+import { renderThumbStyle, BAR_MAP } from './util';
+
+/* istanbul ignore next */
+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={ ['el-scrollbar__bar', 'is-' + bar.key] }
+        onMousedown={ this.clickTrackHandler } >
+        <div
+          ref="thumb"
+          class="el-scrollbar__thumb"
+          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);
+  }
+};