evui 2.0.8 → 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/index.js

@@ -0,0 +1,3 @@
+import Splitter from './splitter';
+
+export default Splitter;

package/src/components/splitter/splitter.vue

@@ -0,0 +1,294 @@
+<template>
+  <div>
+    <div
+      :class="`${type} ev-splitter ${isDragging ? 'hide' : ''}`"
+      :style="getStyle"
+      @mousedown="onMouseDown"
+    >
+      <slot/>
+    </div>
+    <div
+      v-show="isDragging"
+      ref="guideline"
+      :class="`${type} ev-splitter-guideline`"
+    />
+  </div>
+</template>
+<script>
+  export default {
+    name: 'Splitter',
+    props: {
+      type: {
+        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 {
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+        topPad: 0,
+        leftPad: 0,
+        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.onResize();
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.onResize);
+    },
+    methods: {
+      updateItemInfo() {
+        const el = this.$el;
+        const rect = this.$el.getBoundingClientRect();
+        const leftEl = el.previousElementSibling;
+        const rightEl = el.nextElementSibling;
+
+        this.top = el.offsetTop;
+        this.left = el.offsetLeft;
+        this.width = rect.width;
+        this.height = rect.height;
+        this.topPad = rect.top - this.top;
+        this.leftPad = rect.left - this.left;
+
+        this.leftItemInfo.el = leftEl;
+        this.rightItemInfo.el = rightEl;
+
+        this.leftItemInfo.top = leftEl.offsetTop;
+        this.leftItemInfo.left = leftEl.offsetLeft;
+        this.leftItemInfo.width = leftEl.offsetWidth;
+        this.leftItemInfo.height = leftEl.offsetHeight;
+
+        this.rightItemInfo.top = rightEl.offsetTop;
+        this.rightItemInfo.left = rightEl.offsetLeft;
+        this.rightItemInfo.width = rightEl.offsetWidth;
+        this.rightItemInfo.height = rightEl.offsetHeight;
+      },
+      onResize() {
+        let top;
+        let left;
+
+        this.updateItemInfo();
+        this.setBounds();
+
+        if (this.type === 'hbox') {
+          top = this.leftItemInfo.top;
+          left = this.leftItemInfo.left + this.leftItemInfo.width;
+        } else {
+          top = this.leftItemInfo.top + this.leftItemInfo.height;
+          left = this.leftItemInfo.left;
+        }
+
+        this.$el.style.cssText += `top: ${top}px; left: ${left}px;`;
+      },
+      setBounds() {
+        const leftItemInfo = this.leftItemInfo;
+        const rightItemInfo = this.rightItemInfo;
+        let min = 0;
+        let max = 0;
+        let leftWh;
+        let rightWh;
+        let leftOffset;
+        let rightOffset;
+
+        if (this.type === 'hbox') {
+          leftWh = leftItemInfo.width;
+          rightWh = rightItemInfo.width;
+          leftOffset = leftItemInfo.left;
+          rightOffset = rightItemInfo.left;
+        } else {
+          leftWh = leftItemInfo.height;
+          rightWh = rightItemInfo.height;
+          leftOffset = leftItemInfo.top;
+          rightOffset = rightItemInfo.top;
+        }
+
+        const { min: leftMin = 40, max: leftMax = leftWh + rightWh - 40 } = this.leftBound;
+        const { min: rightMin = 40, max: rightMax = leftWh + rightWh - 40 } = this.rightBound;
+
+        min = Math.min(leftWh - leftMin, rightMax - rightWh);
+        min = leftOffset + (leftWh - min);
+
+        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;
+        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;`;
+          rightItemInfo.el.style.cssText += `width: ${rightWh}px;`;
+
+          leftItemInfo.width = leftWh;
+          rightItemInfo.width = rightWh;
+          rightItemInfo.left = rightOffset;
+        } else {
+          leftWh = leftItemInfo.height - changeValue;
+          rightWh = rightItemInfo.height + changeValue;
+          rightOffset = rightItemInfo.top - changeValue;
+
+          leftItemInfo.el.style.cssText += `height: ${leftWh}px`;
+          rightItemInfo.el.style.cssText += `height: ${rightWh}px`;
+
+          leftItemInfo.height = leftWh;
+          rightItemInfo.height = rightWh;
+          rightItemInfo.top = rightOffset;
+        }
+
+        this.$emit('resize', { value: actualChangeValue, left: leftItemInfo, right: rightItemInfo });
+      },
+      onMouseDown(event) {
+        const rootEl = this.$el.parentElement;
+        const guideEl = this.$refs.guideline;
+
+        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;
+
+        if (max < computed) {
+          computed = max;
+        }
+        if (min > computed) {
+          computed = min;
+        }
+
+        return computed;
+      },
+      onMouseMove({ pageX: xPos, pageY: yPos }) {
+        const guideEl = this.$refs.guideline;
+        const { width, height, type, color } = this;
+        let { left, top } = this;
+
+        if (type === 'hbox') {
+          left = this.getBoundaryValue(xPos - (width / 2) - this.leftPad);
+        } else {
+          top = this.getBoundaryValue(yPos - (height / 2) - this.topPad);
+        }
+
+        this.dragOffset = { top, left };
+
+        guideEl.style.cssText = `top: ${top}px; left: ${left}px; background: ${color}; width: ${width}px; height: ${height}px;`;
+      },
+      onMouseUp(event) {
+        const rootEl = this.$el.parentElement;
+        const { left: prevLeft, top: prevTop } = this;
+        const { top, left } = this.dragOffset;
+
+        rootEl.removeEventListener('mousemove', this.onMouseMove);
+        window.removeEventListener('mouseup', this.onMouseUp);
+
+        this.isDragging = false;
+
+        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);
+      },
+    },
+  };
+</script>
+<style>
+  .ev-splitter {
+    top: 0;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    display: block;
+  }
+
+  .ev-splitter-guideline {
+    position: absolute;
+    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 {
+    cursor: col-resize;
+  }
+
+  .ev-splitter.vbox,
+  .ev-splitter-guideline.vbox {
+    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)"
         >
@@ -55,7 +55,7 @@
   </div>
 </template>
 <script>
-  import _ from 'lodash';
+  import _ from 'lodash-es';
 
   export default {
     props: {
@@ -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);