mazey-element-ui 2.0.1 → 2.15.16

package/packages/progress/src/progress.vue

@@ -15,24 +15,37 @@
     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__outer" :style="{height: strokeWidth + 'px', backgroundColor:defineBackColor}">
         <div class="el-progress-bar__inner" :style="barStyle">
-          <div class="el-progress-bar__innerText" v-if="showText && textInside">{{percentage}}%</div>
+          <div class="el-progress-bar__innerText" :style="{color:textColor}" v-if="showText && textInside">{{content}}</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>
+        <path
+          class="el-progress-circle__track"
+          :d="trackPath"
+          :stroke="defineBackColor"
+          :stroke-width="relativeStrokeWidth"
+          fill="none"
+          :style="trailPathStyle"></path>
+        <path
+          class="el-progress-circle__path"
+          :d="trackPath"
+          :stroke="stroke"
+          fill="none"
+          :stroke-linecap="strokeLinecap"
+          :stroke-width="percentage ? relativeStrokeWidth : 0"
+          :style="circlePathStyle"></path>
       </svg>
     </div>
     <div
       class="el-progress__text"
       v-if="showText && !textInside"
-      :style="{fontSize: progressTextSize + 'px'}"
+      :style="{fontSize: progressTextSize + 'px', color:textColor}"
     >
-      <template v-if="!status">{{percentage}}%</template>
+      <template v-if="!status">{{content}}</template>
       <i v-else :class="iconClass"></i>
     </div>
   </div>
@@ -44,7 +57,7 @@
       type: {
         type: String,
         default: 'line',
-        validator: val => ['line', 'circle'].indexOf(val) > -1
+        validator: val => ['line', 'circle', 'dashboard'].indexOf(val) > -1
       },
       percentage: {
         type: Number,
@@ -53,12 +66,17 @@
         validator: val => val >= 0 && val <= 100
       },
       status: {
-        type: String
+        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
@@ -72,41 +90,73 @@
         default: true
       },
       color: {
-        type: String,
+        type: [String, Array, Function],
         default: ''
-      }
+      },
+      defineBackColor: {
+        type: [String, Array, Function],
+        default: '#ebeef5'
+      },
+      textColor: {
+        type: [String, Array, Function],
+        default: '#606266'
+      },
+      format: Function
     },
     computed: {
       barStyle() {
         const style = {};
         style.width = this.percentage + '%';
-        style.backgroundColor = this.color;
+        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 = 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}`;
+        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() {
-        const radius = 50 - parseFloat(this.relativeStrokeWidth) / 2;
-        return 2 * Math.PI * radius;
+        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() {
-        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'
+          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.color;
+          ret = this.getCurrentColor(this.percentage);
         } else {
           switch (this.status) {
             case 'success':
@@ -115,6 +165,9 @@
             case 'exception':
               ret = '#ff4949';
               break;
+            case 'warning':
+              ret = '#e6a23c';
+              break;
             default:
               ret = '#20a0ff';
           }
@@ -122,6 +175,9 @@
         return ret;
       },
       iconClass() {
+        if (this.status === 'warning') {
+          return 'el-icon-warning';
+        }
         if (this.type === 'line') {
           return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-close';
         } else {
@@ -132,6 +188,47 @@
         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;
+        });
       }
     }
   };

package/packages/radio/index.js

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

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

@@ -24,15 +24,19 @@
       tabindex="-1"
       @focus="focus = true"
       @blur="focus = false"
+      autocomplete="off"
     >
-    <span class="el-radio-button__inner" :style="value === label ? activeStyle : null">
+    <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';
+  import Emitter from 'mazey-element-ui/src/mixins/emitter';
 
   export default {
     name: 'ElRadioButton',
@@ -96,7 +100,7 @@
         return this.disabled || this._radioGroup.disabled || (this.elForm || {}).disabled;
       },
       tabIndex() {
-        return !this.isDisabled ? (this._radioGroup ? (this.value === this.label ? 0 : -1) : 0) : -1;
+        return (this.isDisabled || (this._radioGroup && this.value !== this.label)) ? -1 : 0;
       }
     },
 

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

@@ -1,14 +1,15 @@
 <template>
-  <div
+  <component
+    :is="_elTag"
     class="el-radio-group"
     role="radiogroup"
     @keydown="handleKeydown"
   >
     <slot></slot>
-  </div>
+  </component>
 </template>
 <script>
-  import Emitter from 'element-ui/src/mixins/emitter';
+  import Emitter from 'mazey-element-ui/src/mixins/emitter';
 
   const keyCode = Object.freeze({
     LEFT: 37,
@@ -41,6 +42,11 @@
       _elFormItemSize() {
         return (this.elFormItem || {}).elFormItemSize;
       },
+      _elTag() {
+        let tag = (this.$vnode.data || {}).tag;
+        if (!tag || tag === 'component') tag = 'div';
+        return tag;
+      },
       radioGroupSize() {
         return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
       }

package/packages/radio/src/radio.vue

@@ -22,6 +22,7 @@
     >
       <span class="el-radio__inner"></span>
       <input
+        ref="radio"
         class="el-radio__original"
         :value="label"
         type="radio"
@@ -33,16 +34,17 @@
         :name="name"
         :disabled="isDisabled"
         tabindex="-1"
+        autocomplete="off"
       >
     </span>
-    <span class="el-radio__label">
+    <span class="el-radio__label" @keydown.stop>
       <slot></slot>
       <template v-if="!$slots.default">{{label}}</template>
     </span>
   </label>
 </template>
 <script>
-  import Emitter from 'element-ui/src/mixins/emitter';
+  import Emitter from 'mazey-element-ui/src/mixins/emitter';
 
   export default {
     name: 'ElRadio',
@@ -98,6 +100,7 @@
           } else {
             this.$emit('input', val);
           }
+          this.$refs.radio && (this.$refs.radio.checked = this.model === this.label);
         }
       },
       _elFormItemSize() {
@@ -115,7 +118,7 @@
           : this.disabled || (this.elForm || {}).disabled;
       },
       tabIndex() {
-        return !this.isDisabled ? (this.isGroup ? (this.model === this.label ? 0 : -1) : 0) : -1;
+        return (this.isDisabled || (this.isGroup && this.model !== this.label)) ? -1 : 0;
       }
     },
 

package/packages/rate/src/main.vue

@@ -9,12 +9,13 @@
     :aria-valuemax="max"
     tabindex="0">
     <span
-      v-for="item in max"
+      v-for="(item, key) in max"
       class="el-rate__item"
       @mousemove="setCurrentValue(item, $event)"
       @mouseleave="resetCurrentValue"
       @click="selectValue(item)"
-      :style="{ cursor: rateDisabled ? 'auto' : 'pointer' }">
+      :style="{ cursor: rateDisabled ? 'auto' : 'pointer' }"
+      :key="key">
       <i
         :class="[classes[item - 1], { 'hover': hoverIndex === item }]"
         class="el-rate__icon"
@@ -32,8 +33,9 @@
 </template>
 
 <script>
-  import { hasClass } from 'element-ui/src/utils/dom';
-  import Migrating from 'element-ui/src/mixins/migrating';
+  import { hasClass } from 'mazey-element-ui/src/utils/dom';
+  import { isObject } from 'mazey-element-ui/src/utils/types';
+  import Migrating from 'mazey-element-ui/src/mixins/migrating';
 
   export default {
     name: 'ElRate',
@@ -72,7 +74,7 @@
         default: 5
       },
       colors: {
-        type: Array,
+        type: [Array, Object],
         default() {
           return ['#F7BA2A', '#F7BA2A', '#F7BA2A'];
         }
@@ -86,7 +88,7 @@
         default: '#EFF2F7'
       },
       iconClasses: {
-        type: Array,
+        type: [Array, Object],
         default() {
           return ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'];
         }
@@ -147,9 +149,8 @@
       decimalStyle() {
         let width = '';
         if (this.rateDisabled) {
-          width = `${ this.valueDecimal < 50 ? 0 : 50 }%`;
-        }
-        if (this.allowHalf) {
+          width = `${ this.valueDecimal }%`;
+        } else if (this.allowHalf) {
           width = '50%';
         }
         return {
@@ -162,12 +163,21 @@
         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.classMap.disabledVoidClass : this.classMap.voidClass;
+        return this.rateDisabled ? this.disabledVoidIconClass : this.voidIconClass;
       },
 
       activeClass() {
@@ -175,13 +185,12 @@
       },
 
       colorMap() {
-        return {
-          lowColor: this.colors[0],
-          mediumColor: this.colors[1],
-          highColor: this.colors[2],
-          voidColor: this.voidColor,
-          disabledVoidColor: this.disabledVoidColor
-        };
+        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() {
@@ -204,16 +213,6 @@
         return result;
       },
 
-      classMap() {
-        return {
-          lowClass: this.iconClasses[0],
-          mediumClass: this.iconClasses[1],
-          highClass: this.iconClasses[2],
-          voidClass: this.voidIconClass,
-          disabledVoidClass: this.disabledVoidIconClass
-        };
-      },
-
       rateDisabled() {
         return this.disabled || (this.elForm || {}).disabled;
       }
@@ -236,15 +235,15 @@
       },
 
       getValueFromMap(value, map) {
-        let result = '';
-        if (value <= this.lowThreshold) {
-          result = map.lowColor || map.lowClass;
-        } else if (value >= this.highThreshold) {
-          result = map.highColor || map.highClass;
-        } else {
-          result = map.mediumColor || map.mediumClass;
-        }
-        return result;
+        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) {
@@ -258,7 +257,7 @@
       },
 
       getIconStyle(item) {
-        const voidColor = this.rateDisabled ? this.colorMap.disabledVoidColor : this.colorMap.voidColor;
+        const voidColor = this.rateDisabled ? this.disabledVoidColor : this.voidColor;
         return {
           color: item <= this.currentValue ? this.activeColor : voidColor
         };

package/packages/result/index.js

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

package/packages/result/src/icon-error.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.57818,15.42182 C32.0157534,14.8593933 31.1038797,14.8593933 30.541453,15.42182 L30.541453,15.42182 L24.0006789,21.9625941 L17.458547,15.42182 C16.8961203,14.8593933 15.9842466,14.8593933 15.42182,15.42182 C14.8593933,15.9842466 14.8593933,16.8961203 15.42182,17.458547 L15.42182,17.458547 L21.9639519,23.9993211 L15.42182,30.541453 C14.8593933,31.1038797 14.8593933,32.0157534 15.42182,32.57818 C15.9842466,33.1406067 16.8961203,33.1406067 17.458547,32.57818 L17.458547,32.57818 L24.0006789,26.0360481 L30.541453,32.57818 C31.1038797,33.1406067 32.0157534,33.1406067 32.57818,32.57818 C33.1406067,32.0157534 33.1406067,31.1038797 32.57818,30.541453 L32.57818,30.541453 L26.0374059,23.9993211 L32.57818,17.458547 C33.1406067,16.8961203 33.1406067,15.9842466 32.57818,15.42182 Z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'IconError'
+};
+</script>

package/packages/result/src/icon-info.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M24,19 L21,19 C20.1715729,19 19.5,19.6715729 19.5,20.5 C19.5,21.3284271 20.1715729,22 21,22 L21,22 L22.5,22 L22.5,31 L21,31 C20.1715729,31 19.5,31.6715729 19.5,32.5 C19.5,33.3284271 20.1715729,34 21,34 L21,34 L27,34 C27.8284271,34 28.5,33.3284271 28.5,32.5 C28.5,31.6715729 27.8284271,31 27,31 L27,31 L25.5,31 L25.5,20.5 C25.5,19.6715729 24.8284271,19 24,19 L24,19 Z M24,13 C22.8954305,13 22,13.8954305 22,15 C22,16.1045695 22.8954305,17 24,17 C25.1045695,17 26,16.1045695 26,15 C26,13.8954305 25.1045695,13 24,13 Z"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'IconInfo'
+};
+</script>

package/packages/result/src/icon-success.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M34.5548098,16.4485711 C33.9612228,15.8504763 32.9988282,15.8504763 32.4052412,16.4485711 L32.4052412,16.4485711 L21.413757,27.5805811 L21.413757,27.5805811 L21.4034642,27.590855 C21.0097542,27.9781674 20.3766105,27.9729811 19.9892981,27.5792711 L19.9892981,27.5792711 L15.5947588,23.1121428 C15.0011718,22.514048 14.0387772,22.514048 13.4451902,23.1121428 C12.8516033,23.7102376 12.8516033,24.6799409 13.4451902,25.2780357 L13.4451902,25.2780357 L19.6260786,31.5514289 C20.2196656,32.1495237 21.1820602,32.1495237 21.7756472,31.5514289 L21.7756472,31.5514289 L34.5548098,18.614464 C35.1483967,18.0163692 35.1483967,17.0466659 34.5548098,16.4485711 Z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'IconSuccess'
+};
+</script>

package/packages/result/src/icon-warning.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M24,31 C22.8954305,31 22,31.8954305 22,33 C22,34.1045695 22.8954305,35 24,35 C25.1045695,35 26,34.1045695 26,33 C26,31.8954305 25.1045695,31 24,31 Z M24,14 C23.1715729,14 22.5,14.6715729 22.5,15.5 L22.5,15.5 L22.5,27.5 C22.5,28.3284271 23.1715729,29 24,29 C24.8284271,29 25.5,28.3284271 25.5,27.5 L25.5,27.5 L25.5,15.5 C25.5,14.6715729 24.8284271,14 24,14 Z"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'IconWarning'
+};
+</script>

package/packages/result/src/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="el-result">
+    <div class="el-result__icon">
+      <slot name="icon">
+        <component :is="iconElement" :class="iconElement" />
+      </slot>
+    </div>
+    <div v-if="title || $slots.title" class="el-result__title">
+      <slot name="title">
+        <p>{{ title }}</p>
+      </slot>
+    </div>
+    <div v-if="subTitle || $slots.subTitle" class="el-result__subtitle">
+      <slot name="subTitle">
+        <p>{{ subTitle }}</p>
+      </slot>
+    </div>
+    <div v-if="$slots.extra" class="el-result__extra">
+      <slot name="extra"></slot>
+    </div>
+  </div>
+</template>
+<script>
+import IconSuccess from './icon-success.vue';
+import IconError from './icon-error.vue';
+import IconWarning from './icon-warning.vue';
+import IconInfo from './icon-info.vue';
+
+const IconMap = {
+  success: 'icon-success',
+  warning: 'icon-warning',
+  error: 'icon-error',
+  info: 'icon-info'
+};
+
+export default {
+  name: 'ElResult',
+  components: {
+    [IconSuccess.name]: IconSuccess,
+    [IconError.name]: IconError,
+    [IconWarning.name]: IconWarning,
+    [IconInfo.name]: IconInfo
+  },
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    subTitle: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: 'info'
+    }
+  },
+  computed: {
+    iconElement() {
+      const icon = this.icon;
+      return icon && IconMap[icon] ? IconMap[icon] : 'icon-info';
+    }
+  }
+};
+</script>

package/packages/row/src/row.js

@@ -14,10 +14,7 @@ export default {
       type: String,
       default: 'start'
     },
-    align: {
-      type: String,
-      default: 'top'
-    }
+    align: String
   },
 
   computed: {
@@ -38,7 +35,7 @@ export default {
       class: [
         'el-row',
         this.justify !== 'start' ? `is-justify-${this.justify}` : '',
-        this.align !== 'top' ? `is-align-${this.align}` : '',
+        this.align ? `is-align-${this.align}` : '',
         { 'el-row--flex': this.type === 'flex' }
       ],
       style: this.style

package/packages/scrollbar/src/bar.js

@@ -1,4 +1,4 @@
-import { on, off } from 'element-ui/src/utils/dom';
+import { on, off } from 'mazey-element-ui/src/utils/dom';
 import { renderThumbStyle, BAR_MAP } from './util';
 
 /* istanbul ignore next */
@@ -40,6 +40,10 @@ export default {
 
   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]));
     },