@penggy/element-ui 2.4.11

package/packages/progress/src/progress.vue

@@ -0,0 +1,138 @@
+<template>
+  <div
+    class="el-progress"
+    :class="[
+      'el-progress--' + type,
+      status ? 'is-' + status : '',
+      {
+        'el-progress--without-text': !showText,
+        'el-progress--text-inside': textInside,
+      }
+    ]"
+    role="progressbar"
+    :aria-valuenow="percentage"
+    aria-valuemin="0"
+    aria-valuemax="100"
+  >
+    <div class="el-progress-bar" v-if="type === 'line'">
+      <div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px'}">
+        <div class="el-progress-bar__inner" :style="barStyle">
+          <div class="el-progress-bar__innerText" v-if="showText && textInside">{{percentage}}%</div>
+        </div>
+      </div>
+    </div>
+    <div class="el-progress-circle" :style="{height: width + 'px', width: width + 'px'}" v-else>
+      <svg viewBox="0 0 100 100">
+        <path class="el-progress-circle__track" :d="trackPath" stroke="#e5e9f2" :stroke-width="relativeStrokeWidth" fill="none"></path>
+        <path class="el-progress-circle__path" :d="trackPath" stroke-linecap="round" :stroke="stroke" :stroke-width="relativeStrokeWidth" fill="none" :style="circlePathStyle"></path>
+      </svg>
+    </div>
+    <div class="el-progress__text" v-if="showText && !textInside" :style="{fontSize: progressTextSize + 'px'}">
+      <template v-if="!status">{{percentage}}%</template>
+      <template v-else>
+        <slot v-if="status === 'text'"></slot>
+        <i v-else :class="iconClass"></i>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElProgress',
+    props: {
+      type: {
+        type: String,
+        default: 'line',
+        validator: val => ['line', 'circle'].indexOf(val) > -1
+      },
+      percentage: {
+        type: Number,
+        default: 0,
+        required: true,
+        validator: val => val >= 0 && val <= 100
+      },
+      status: {
+        type: String,
+        validator: val => ['text', 'success', 'exception'].indexOf(val) > -1
+      },
+      strokeWidth: {
+        type: Number,
+        default: 6
+      },
+      textInside: {
+        type: Boolean,
+        default: false
+      },
+      width: {
+        type: Number,
+        default: 126
+      },
+      showText: {
+        type: Boolean,
+        default: true
+      },
+      color: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      barStyle() {
+        const style = {};
+        style.width = this.percentage + '%';
+        style.backgroundColor = this.color;
+        return style;
+      },
+      relativeStrokeWidth() {
+        return (this.strokeWidth / this.width * 100).toFixed(1);
+      },
+      trackPath() {
+        const radius = parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);
+
+        return `M 50 50 m 0 -${radius} a ${radius} ${radius} 0 1 1 0 ${radius * 2} a ${radius} ${radius} 0 1 1 0 -${radius * 2}`;
+      },
+      perimeter() {
+        const radius = 50 - parseFloat(this.relativeStrokeWidth) / 2;
+        return 2 * Math.PI * radius;
+      },
+      circlePathStyle() {
+        const perimeter = this.perimeter;
+        return {
+          strokeDasharray: `${perimeter}px,${perimeter}px`,
+          strokeDashoffset: (1 - this.percentage / 100) * perimeter + 'px',
+          transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
+        };
+      },
+      stroke() {
+        let ret;
+        if (this.color) {
+          ret = this.color;
+        } else {
+          switch (this.status) {
+            case 'success':
+              ret = '#13ce66';
+              break;
+            case 'exception':
+              ret = '#ff4949';
+              break;
+            default:
+              ret = '#20a0ff';
+          }
+        }
+        return ret;
+      },
+      iconClass() {
+        if (this.type === 'line') {
+          return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-close';
+        } else {
+          return this.status === 'success' ? 'el-icon-check' : 'el-icon-close';
+        }
+      },
+      progressTextSize() {
+        return this.type === 'line'
+          ? 12 + this.strokeWidth * 0.4
+          : this.width * 0.111111 + 2 ;
+      }
+    }
+  };
+</script>

package/packages/radio/index.js

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

package/packages/radio/src/radio-button.vue

@@ -0,0 +1,114 @@
+<template>
+  <label
+    class="el-radio-button"
+    :class="[
+      size ? 'el-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="el-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="el-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 'element-ui/src/mixins/emitter';
+
+  export default {
+    name: 'ElRadioButton',
+
+    mixins: [Emitter],
+
+    inject: {
+      elForm: {
+        default: ''
+      },
+      elFormItem: {
+        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 !== 'ElRadioGroup') {
+            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 || ''
+        };
+      },
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      size() {
+        return this._radioGroup.radioGroupSize || this._elFormItemSize || (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('ElRadioGroup', 'handleChange', this.value);
+        });
+      }
+    }
+  };
+</script>

package/packages/radio/src/radio-group.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    class="el-radio-group"
+    role="radiogroup"
+    @keydown="handleKeydown"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script>
+  import Emitter from 'element-ui/src/mixins/emitter';
+
+  const keyCode = Object.freeze({
+    LEFT: 37,
+    UP: 38,
+    RIGHT: 39,
+    DOWN: 40
+  });
+  export default {
+    name: 'ElRadioGroup',
+
+    componentName: 'ElRadioGroup',
+
+    inject: {
+      elFormItem: {
+        default: ''
+      }
+    },
+
+    mixins: [Emitter],
+
+    props: {
+      value: {},
+      size: String,
+      fill: String,
+      textColor: String,
+      disabled: Boolean
+    },
+
+    computed: {
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      radioGroupSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      }
+    },
+
+    created() {
+      this.$on('handleChange', value => {
+        this.$emit('change', value);
+      });
+    },
+    mounted() {
+      // 当radioGroup没有默认选项时，第一个可以选中Tab导航
+      const radios = this.$el.querySelectorAll('[type=radio]');
+      if (![].some.call(radios, radio => radio.checked)) {
+        const first = [].find.call(radios, radio => !radio.disabled);
+        if (first) first.tabIndex = 0;
+      }
+    },
+    methods: {
+      handleKeydown(e) { // 左右上下按键 可以在radio组内切换不同选项
+        const step = {
+          [keyCode.LEFT]: -1,
+          [keyCode.UP]: -1,
+          [keyCode.RIGHT]: 1,
+          [keyCode.DOWN]: 1
+        }[e.keyCode];
+        if (step === undefined) return;
+        e.stopPropagation();
+        e.preventDefault();
+        const radios = this.$el.querySelectorAll('[type=radio]');
+        const length = radios.length;
+        if (length === 0) return;
+        // 焦点可能在原生radio上，也可能在radio-button的label上（label包裹着input）
+        const current = e.target.nodeName === 'INPUT'
+          ? e.target
+          : (e.target.querySelector && e.target.querySelector('input[type=radio]'));
+        const index = [].indexOf.call(radios, current);
+        if (index < 0) return;
+        // 沿方向查找第一个可用的radio，跨过disabled项
+        for (let i = 1; i <= length; i++) {
+          const target = radios[(index + step * i + length) % length];
+          if (!target.disabled) {
+            target.click();
+            target.focus();
+            break;
+          }
+        }
+      }
+    },
+    watch: {
+      value(value) {
+        this.dispatch('ElFormItem', 'el.form.change', [this.value]);
+      }
+    }
+  };
+</script>
+

package/packages/radio/src/radio.vue

@@ -0,0 +1,126 @@
+<template>
+  <label
+    class="el-radio"
+    :class="[
+      border && radioSize ? 'el-radio--' + radioSize : '',
+      { 'is-disabled': isDisabled },
+      { 'is-bordered': border },
+      { 'is-checked': model === label }
+    ]"
+    :aria-disabled="isDisabled"
+  >
+    <span class="el-radio__input"
+      :class="{
+        'is-disabled': isDisabled,
+        'is-checked': model === label,
+        'is-focus': focus
+      }"
+    >
+      <span class="el-radio__inner"></span>
+      <input
+        class="el-radio__original"
+        :value="label"
+        type="radio"
+        v-model="model"
+        @focus="focus = true"
+        @blur="focus = false"
+        @change="handleChange"
+        :name="name"
+        :disabled="isDisabled"
+        :tabindex="tabIndex"
+      >
+    </span>
+    <span class="el-radio__label">
+      <slot></slot>
+      <template v-if="!$slots.default">{{label}}</template>
+    </span>
+  </label>
+</template>
+<script>
+  import Emitter from '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);
+          }
+        }
+      },
+      _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;