[#616] splitter 이벤트, slot, props 추가

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: 0,
+            max: 0,
+          };
+        },
+      },
+      rightBound: {
+        type: Object,
+        default() {
+          return {
+            min: 0,
+            max: 0,
+          };
+        },
+      },
     },
     data() {
       return {
@@ -34,6 +63,15 @@
         isDragging: false,
       };
     },
+    computed: {
+      getStyle() {
+        return {
+          background: this.color,
+          width: this.type === 'hbox' ? `${this.size}px` : '100%',
+          height: this.type === 'hbox' ? '100%' : `${this.size}px`,
+        };
+      },
+    },
     created() {
     },
     mounted() {
@@ -124,16 +162,37 @@
       resizeForNeighbor(changeValue) {
         const leftItemInfo = this.leftItemInfo;
         const rightItemInfo = this.rightItemInfo;
+        const { min: leftMin, max: leftMax } = this.leftBound;
+        const { min: rightMin, max: rightMax } = this.rightBound;
         // 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;
+          // 먼저 leftBound 의 값으로 actualChangeValue 을 찾는다
+          if (leftMin && leftWh < leftMin) {
+            leftWh = leftMin;
+          } else if (leftMax && leftWh > leftMax) {
+            leftWh = leftMax;
+          }
+          actualChangeValue = leftItemInfo.width - leftWh;
+
+          // 찾은 actualChangeValue 로 right 의 크기를 변경
+          rightWh = rightItemInfo.width + actualChangeValue;
+          if (rightMin && rightWh < rightMin) {
+            rightWh = rightMin;
+          } else if (rightMax && rightWh > rightMax) {
+            rightWh = rightMax;
+          }
+          // 실제 이동할 actualChangeValue 를 구한다
+          actualChangeValue = rightWh - rightItemInfo.width;
+
+          leftWh = leftItemInfo.width - actualChangeValue;
+          rightOffset = rightItemInfo.left - actualChangeValue;
 
           leftItemInfo.el.style.cssText += `width: ${leftWh}px; height: ${leftItemInfo.height}px`;
           rightItemInfo.el.style.cssText += `width: ${rightWh}px; height: ${rightItemInfo.height}px`;
@@ -143,8 +202,23 @@
           rightItemInfo.left = rightOffset;
         } else {
           leftWh = leftItemInfo.height - changeValue;
-          rightWh = rightItemInfo.height + changeValue;
-          rightOffset = rightItemInfo.top - changeValue;
+          if (leftMin && leftWh < leftMin) {
+            leftWh = leftMin;
+          } else if (leftMax && leftWh > leftMax) {
+            leftWh = leftMax;
+          }
+          actualChangeValue = leftItemInfo.height - leftWh;
+
+          rightWh = rightItemInfo.height + actualChangeValue;
+          if (rightMin && rightWh < rightMin) {
+            rightWh = rightMin;
+          } else if (rightMax && rightWh > rightMax) {
+            rightWh = rightMax;
+          }
+          actualChangeValue = rightWh - rightItemInfo.height;
+
+          leftWh = leftItemInfo.height - actualChangeValue;
+          rightOffset = rightItemInfo.top - actualChangeValue;
 
           leftItemInfo.el.style.cssText += `width: ${leftItemInfo.width}px; height: ${leftWh}px`;
           rightItemInfo.el.style.cssText += `width: ${rightItemInfo.width}px; height: ${rightWh}px`;
@@ -154,6 +228,7 @@
           rightItemInfo.top = rightOffset;
         }
 
+        this.$emit('resize', { value: actualChangeValue, left: leftItemInfo, right: rightItemInfo });
         // if (leftId) {
         //   this.$resizeBus.$emit('resize', leftId, this.type, leftItemInfo);
         // }
@@ -174,7 +249,7 @@
 
         this.isDragging = true;
 
-        guideEl.style.cssText = `top: ${this.top}px; left: ${this.left}px;`;
+        guideEl.style.cssText = `top: ${this.top}px; left: ${this.left}px; background: ${this.color}; width: ${this.getStyle.width}; height: ${this.getStyle.height};`;
       },
       onMouseMove({ pageX: xPos, pageY: yPos }) {
         const guideEl = this.$refs.guideline;
@@ -202,7 +277,7 @@
 
         this.isDragging = true;
 
-        guideEl.style.cssText = `top: ${top}px; left: ${left}px;`;
+        guideEl.style.cssText = `top: ${top}px; left: ${left}px; background: ${this.color}; width: ${this.getStyle.width}; height: ${this.getStyle.height};`;
       },
       onMouseUp({ pageX: xPos, pageY: yPos }) {
         const rootEl = this.$el.parentElement;
@@ -250,7 +325,6 @@
 <style>
   .ev-splitter {
     top: 0;
-    background: #dadada;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -260,7 +334,6 @@
   .ev-splitter-guideline {
     position: absolute;
     z-index: 100;
-    background: #dadada;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -271,14 +344,10 @@
   }
   .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>