@penggy/element-ui 2.4.11 → 2.4.12

package/packages/progress/src/progress.vue

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

@@ -1,8 +1,8 @@
-import Radio from './src/radio';
-
-/* istanbul ignore next */
-Radio.install = function(Vue) {
-  Vue.component(Radio.name, Radio);
-};
-
-export default Radio;
+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

@@ -1,114 +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>
+<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 '@penggy/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>