evui 2.1.0 → 2.1.1

package/src/components/slider/slider-tooltip.vue

@@ -5,7 +5,7 @@
     @mouseover="onMouseOver"
     @mouseout="onMouseOut"
   >
-    <slot/>
+    <slot />
     <transition name="fade">
       <div :class="popperClasses">
         <div
@@ -14,15 +14,13 @@
         >
           {{ content }}
         </div>
-        <div :class="`${prefixCls}-arrow`"/>
+        <div :class="`${prefixCls}-arrow`" />
       </div>
     </transition>
   </div>
 </template>
 
 <script>
-  import '@/styles/evui.css';
-
   const prefixCls = 'evui-slider-tooltip';
 
   export default {
@@ -77,7 +75,9 @@
   };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  @import '~@/styles/default';
+
   .evui-slider-tooltip {
     position: absolute;
     user-select: none;
@@ -89,7 +89,7 @@
     left: -17px;
     font-size: 12px;
     line-height: 1.5;
-    z-index: 1060;
+    z-index: 850;
   }
   .evui-slider-tooltip-popper.on {
     visibility: visible;
@@ -102,7 +102,7 @@
     text-align: left;
     text-decoration: none;
     border-radius: 4px;
-    color: #fff;
+    color: #FFFFFF;
     background-color: rgba(70, 76, 91, .9);
     box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
     white-space: nowrap;

package/src/components/slider/slider.vue

@@ -11,11 +11,13 @@
         :key="name+'Dot'+idx"
         :style="{ left: `${item.valuePer}%` }"
         :class="`${prefixCls}-dot`"
-        @click="onClick"/>
+        @click="onClick"
+      />
     </template>
     <div
       :style="barStyle"
-      :class="`${prefixCls}-bar`"/>
+      :class="`${prefixCls}-bar`"
+    />
     <slider-tooltip
       :pos-x="leftBtnValuePer"
       :is-dragging="leftBtnDragging"
@@ -45,7 +47,6 @@
 </template>
 
 <script>
-  import '@/styles/evui.css';
   import SliderTooltip from './slider-tooltip';
 
   const prefixCls = 'evui-slider';
@@ -393,12 +394,8 @@
   };
 </script>
 
-<style>
-/************************************************************************************
- Slider Component
-************************************************************************************/
-
-/** evui-slider **/
+<style lang="scss">
+  @import '~@/styles/default';
 
   .evui-slider {
     position: relative;
@@ -406,22 +403,20 @@
     height: 4px;
     margin: 4px 0;
     vertical-align: middle;
-    background-color: #e9eaec;
+    background-color: #E9EAEC;
     border-radius: 3px;
   }
   .evui-slider-dragging {
-    border-color: #2d8cf0;
-    cursor: -webkit-grabbing;
+    border-color: #2D8CF0;
     cursor: grabbing;
   }
   .evui-slider:hover:not(.evui-slider-dragging) {
-    cursor: -webkit-grab;
     cursor: grab;
   }
   .evui-slider-bar {
     position: absolute;
     height: 4px;
-    background: #57a3f3;
+    background: #57A3F3;
     border-radius: 3px;
   }
   .evui-slider-btn {
@@ -429,21 +424,21 @@
     top: -4px;
     width: 12px;
     height: 12px;
-    border: 2px solid #57a3f3;
+    border: 2px solid #57A3F3;
     border-radius: 50%;
     text-align: center;
-    background-color: #fff;
+    background-color: #FFFFFF;
     outline: 0;
     transform: translateX(-4px);
   }
   .evui-slider-btn-dragging:not(:hover) {
-    border-color: #2d8cf0;
+    border-color: #2D8CF0;
     transform: translateX(-4px) scale(1.5);
     transition: transform .2s linear;
   }
   .evui-slider-btn:focus,
   .evui-slider-btn:hover {
-    border-color: #2d8cf0;
+    border-color: #2D8CF0;
     transform: translateX(-4px) scale(1.5);
     transition: transform .2s linear;
   }
@@ -453,23 +448,23 @@
     width: 4px;
     height: 4px;
     border-radius: 50%;
-    background-color: #ccc;
+    background-color: #CCCCCC;
   }
   .evui-slider-disabled {
-    cursor: not-allowed
+    cursor: not-allowed;
   }
   .evui-slider-disabled .evui-slider {
-    background-color: #ccc;
-    cursor: not-allowed
+    background-color: #CCCCCC;
+    cursor: not-allowed;
   }
   .evui-slider-disabled .evui-slider-bar {
-    background-color: #ccc
+    background-color: #CCCCCC;
   }
   .evui-slider-disabled .evui-slider-btn {
-    border-color: #ccc
+    border-color: #CCCCCC;
   }
   .evui-slider-disabled .evui-slider-btn:hover {
-    border-color: #ccc;
+    border-color: #CCCCCC;
     cursor: not-allowed;
   }
   .evui-slider-input .evui-slider {

package/src/components/splitter/splitter.vue

@@ -2,8 +2,11 @@
   <div>
     <div
       :class="`${type} ev-splitter ${isDragging ? 'hide' : ''}`"
+      :style="getStyle"
       @mousedown="onMouseDown"
-    />
+    >
+      <slot/>
+    </div>
     <div
       v-show="isDragging"
       ref="guideline"
@@ -19,6 +22,32 @@
         type: String,
         default: 'hbox',
       },
+      color: {
+        type: String,
+        default: '#dadada',
+      },
+      size: {
+        type: Number,
+        default: 4,
+      },
+      leftBound: {
+        type: Object,
+        default() {
+          return {
+            min: undefined,
+            max: undefined,
+          };
+        },
+      },
+      rightBound: {
+        type: Object,
+        default() {
+          return {
+            min: undefined,
+            max: undefined,
+          };
+        },
+      },
     },
     data() {
       return {
@@ -28,16 +57,30 @@
         height: 0,
         topPad: 0,
         leftPad: 0,
-        prevOffset: {},
+        dragOffset: {},
         leftItemInfo: {},
         rightItemInfo: {},
         isDragging: false,
+        bound: null,
       };
     },
+    computed: {
+      getStyle() {
+        return {
+          background: this.color,
+          width: this.type === 'hbox' ? `${this.size}px` : '100%',
+          height: this.type === 'hbox' ? '100%' : `${this.size}px`,
+        };
+      },
+    },
     created() {
+      window.addEventListener('resize', this.onResize);
     },
     mounted() {
-      this.updateItemInfo();
+      this.onResize();
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.onResize);
     },
     methods: {
       updateItemInfo() {
@@ -66,15 +109,12 @@
         this.rightItemInfo.width = rightEl.offsetWidth;
         this.rightItemInfo.height = rightEl.offsetHeight;
       },
-      onResize(id, type) {
-        if (!type && this.uid !== id) {
-          return;
-        }
-
+      onResize() {
         let top;
         let left;
 
         this.updateItemInfo();
+        this.setBounds();
 
         if (this.type === 'hbox') {
           top = this.leftItemInfo.top;
@@ -86,7 +126,7 @@
 
         this.$el.style.cssText += `top: ${top}px; left: ${left}px;`;
       },
-      getBounds() {
+      setBounds() {
         const leftItemInfo = this.leftItemInfo;
         const rightItemInfo = this.rightItemInfo;
         let min = 0;
@@ -108,35 +148,32 @@
           rightOffset = rightItemInfo.top;
         }
 
-        min = Math.floor(leftWh * 0.1);
-        min = min < 60 ? 60 : min;
-        min += leftOffset;
+        const { min: leftMin = 40, max: leftMax = leftWh + rightWh - 40 } = this.leftBound;
+        const { min: rightMin = 40, max: rightMax = leftWh + rightWh - 40 } = this.rightBound;
 
-        max = Math.floor(rightWh * 0.1);
-        max = max < 60 ? 60 : max;
-        max = (rightOffset + rightWh) - max;
+        min = Math.min(leftWh - leftMin, rightMax - rightWh);
+        min = leftOffset + (leftWh - min);
 
-        return {
-          min,
-          max,
-        };
+        max = Math.min(leftMax - leftWh, rightWh - (rightMin + this.size));
+        max += rightOffset;
+
+        this.bound = { min, max };
       },
       resizeForNeighbor(changeValue) {
         const leftItemInfo = this.leftItemInfo;
         const rightItemInfo = this.rightItemInfo;
-        // const leftId = leftItemInfo.el.dataset.id;
-        // const rightId = rightItemInfo.el.dataset.id;
         let leftWh;
         let rightWh;
         let rightOffset;
+        let actualChangeValue;
 
         if (this.type === 'hbox') {
           leftWh = leftItemInfo.width - changeValue;
           rightWh = rightItemInfo.width + changeValue;
           rightOffset = rightItemInfo.left - changeValue;
 
-          leftItemInfo.el.style.cssText += `width: ${leftWh}px; height: ${leftItemInfo.height}px`;
-          rightItemInfo.el.style.cssText += `width: ${rightWh}px; height: ${rightItemInfo.height}px`;
+          leftItemInfo.el.style.cssText += `width: ${leftWh}px;`;
+          rightItemInfo.el.style.cssText += `width: ${rightWh}px;`;
 
           leftItemInfo.width = leftWh;
           rightItemInfo.width = rightWh;
@@ -146,103 +183,78 @@
           rightWh = rightItemInfo.height + changeValue;
           rightOffset = rightItemInfo.top - changeValue;
 
-          leftItemInfo.el.style.cssText += `width: ${leftItemInfo.width}px; height: ${leftWh}px`;
-          rightItemInfo.el.style.cssText += `width: ${rightItemInfo.width}px; height: ${rightWh}px`;
+          leftItemInfo.el.style.cssText += `height: ${leftWh}px`;
+          rightItemInfo.el.style.cssText += `height: ${rightWh}px`;
 
           leftItemInfo.height = leftWh;
           rightItemInfo.height = rightWh;
           rightItemInfo.top = rightOffset;
         }
 
-        // if (leftId) {
-        //   this.$resizeBus.$emit('resize', leftId, this.type, leftItemInfo);
-        // }
-        //
-        // if (rightId) {
-        //   this.$resizeBus.$emit('resize', rightId, this.type, rightItemInfo);
-        // }
+        this.$emit('resize', { value: actualChangeValue, left: leftItemInfo, right: rightItemInfo });
       },
-      onMouseDown({ pageX: prevLeft, pageY: prevTop }) {
+      onMouseDown(event) {
         const rootEl = this.$el.parentElement;
         const guideEl = this.$refs.guideline;
 
-        this.prevOffset = { prevLeft, prevTop };
         this.updateItemInfo();
 
+        const { width, height, color, top, left } = this;
+
         rootEl.addEventListener('mousemove', this.onMouseMove);
         window.addEventListener('mouseup', this.onMouseUp);
 
+        guideEl.style.cssText = `top: ${top}px; left: ${left}px; background: ${color}; width: ${width}px; height: ${height}px;`;
+
         this.isDragging = true;
+        this.$emit('custom-mousedown', event);
+      },
+      getBoundaryValue(value) {
+        const { bound: { min, max } } = this;
+        let computed = value;
 
-        guideEl.style.cssText = `top: ${this.top}px; left: ${this.left}px;`;
+        if (max < computed) {
+          computed = max;
+        }
+        if (min > computed) {
+          computed = min;
+        }
+
+        return computed;
       },
       onMouseMove({ pageX: xPos, pageY: yPos }) {
         const guideEl = this.$refs.guideline;
-        const { min, max } = this.getBounds();
-        const width = this.width;
-        const height = this.height;
-        let left = this.left;
-        let top = this.top;
+        const { width, height, type, color } = this;
+        let { left, top } = this;
 
-        if (this.type === 'hbox') {
-          left = xPos - width - this.leftPad;
-          if (min > left) {
-            left = min;
-          } else if (max < left) {
-            left = max;
-          }
+        if (type === 'hbox') {
+          left = this.getBoundaryValue(xPos - (width / 2) - this.leftPad);
         } else {
-          top = yPos - height - this.topPad;
-          if (min > top) {
-            top = min;
-          } else if (max < top) {
-            top = max;
-          }
+          top = this.getBoundaryValue(yPos - (height / 2) - this.topPad);
         }
 
-        this.isDragging = true;
+        this.dragOffset = { top, left };
 
-        guideEl.style.cssText = `top: ${top}px; left: ${left}px;`;
+        guideEl.style.cssText = `top: ${top}px; left: ${left}px; background: ${color}; width: ${width}px; height: ${height}px;`;
       },
-      onMouseUp({ pageX: xPos, pageY: yPos }) {
+      onMouseUp(event) {
         const rootEl = this.$el.parentElement;
-        const { min, max } = this.getBounds();
-        const { prevLeft, prevTop } = this.prevOffset;
-        let left;
-        let top;
-        let changeValue;
-        let cssText;
-
-        if (this.type === 'hbox') {
-          left = xPos - this.width - this.leftPad;
-          if (min > left) {
-            left = min;
-          } else if (max < left) {
-            left = max;
-          }
-
-          changeValue = prevLeft - xPos;
-          cssText = `left: ${left}px;`;
-        } else {
-          top = yPos - this.height - this.topPad;
-          if (min > top) {
-            top = min;
-          } else if (max < top) {
-            top = max;
-          }
-
-          changeValue = prevTop - yPos;
-          cssText = `top: ${top}px;`;
-        }
+        const { left: prevLeft, top: prevTop } = this;
+        const { top, left } = this.dragOffset;
 
         rootEl.removeEventListener('mousemove', this.onMouseMove);
         window.removeEventListener('mouseup', this.onMouseUp);
 
         this.isDragging = false;
 
-        this.resizeForNeighbor(changeValue);
-
-        this.$el.style.cssText += cssText;
+        if (this.type === 'hbox') {
+          this.resizeForNeighbor(prevLeft - left);
+          this.$el.style.left = `${left}px`;
+        } else {
+          this.resizeForNeighbor(prevTop - top);
+          this.$el.style.top = `${top}px`;
+        }
+        this.$emit('custom-mouseup', event);
       },
     },
   };
@@ -250,35 +262,33 @@
 <style>
   .ev-splitter {
     top: 0;
-    background: #dadada;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     display: block;
   }
+
   .ev-splitter-guideline {
     position: absolute;
-    z-index: 10000;
-    background: #dadada;
+    z-index: 100;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }
+
   .ev-splitter.hide {
     background: transparent;
   }
+
   .ev-splitter.hbox,
   .ev-splitter-guideline.hbox {
-    width: 4px;
-    height: 100%;
     cursor: col-resize;
   }
+
   .ev-splitter.vbox,
   .ev-splitter-guideline.vbox {
-    width: 100%;
-    height: 4px;
     cursor: row-resize;
   }
 </style>

package/src/components/table/table.black.css

@@ -183,7 +183,7 @@ button {
 }
 .evui-table .evui-table-body .evui-table-columns .evui-table-columns-resizer {
   position: absolute;
-  z-index: 1000;
+  z-index: 10;
   display: block;
   background-image: none;
   background-color: rgba(0, 0, 0, 0);

package/src/components/table/table.filter.lite.vue

@@ -16,7 +16,7 @@
           value="or"
         >
         <label> OR </label>
-        <div style="float:right">
+        <div style="float: right;">
           <button
             ref="addButton"
             disabled="true"
@@ -29,16 +29,16 @@
       <div
         v-for="(item, index) in filterDataList"
         :key="index"
-        style="margin:3px;"
+        style="margin: 3px;"
       >
         <select
           v-model="item.condition"
           @change="changeCondition"
         >
           <option
-            v-for="item in condition"
-            :value="item.value"
-            :key="item.value"
+            v-for="opt in condition"
+            :key="opt.value"
+            :value="opt.value"
           >
             {{ item.name }}
           </option>
@@ -46,7 +46,7 @@
         <input
           v-model="item.text"
           type="text"
-          style="width:120px;"
+          style="width: 120px;"
           @focus="focusTextbox(index, $event.target.value)"
           @input="changeFilterValue(index, $event.target.value)"
         >
@@ -163,7 +163,7 @@
   };
 </script>
 <style scoped>
-  .evui-table-filter-body,  .evui-table-filter-body select, .evui-table-filter-body input{
+  .evui-table-filter-body, .evui-table-filter-body select, .evui-table-filter-body input {
     font-family: Verdana, Arial, sans-serif;
     font-size: 11px;
   }

package/src/components/table/table.filter.vue

@@ -75,7 +75,7 @@
   .modal {
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
-    z-index: 1001; /* Sit on top */
+    z-index: 850; /* Sit on top */
     padding-top: 100px; /* Location of the box */
     left: 0;
     top: 0;

package/src/components/table/table.grey.css

@@ -16,7 +16,6 @@ button {
   font-size: 11px;
 }
 .evui-table-reset * {
-  color: default;
   line-height: 100%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -154,11 +153,11 @@ button {
   overflow: hidden;
   padding: 0px;
   background-color: #ffffff;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
+  user-select: text;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  -o-user-select: text;
 }
 .evui-table .evui-table-body input,
 .evui-table .evui-table-body select,

package/src/components/table/table.navy.css

@@ -183,7 +183,7 @@ button {
 }
 .evui-table .evui-table-body .evui-table-columns .evui-table-columns-resizer {
   position: absolute;
-  z-index: 1000;
+  z-index: 10;
   display: block;
   background-image: none;
   background-color: rgba(0, 0, 0, 0);