From be3677cfa8cddb3076181cd8955a1f8f0f80f592 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Sat, 15 Jan 2022 12:15:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96DrawerOverlay=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=94=AF=E6=8C=81=E5=BA=95=E9=83=A8=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E6=94=B9=E5=8F=98=E5=B0=BA=E5=AF=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/js/components/DrawerOverlay.vue    | 14 ++++---
 resources/assets/js/components/ResizeLine.vue | 41 +++++++++++++------
 2 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/resources/assets/js/components/DrawerOverlay.vue b/resources/assets/js/components/DrawerOverlay.vue
index 666781a7..e2ee5c9a 100644
--- a/resources/assets/js/components/DrawerOverlay.vue
+++ b/resources/assets/js/components/DrawerOverlay.vue
@@ -13,7 +13,7 @@
                     </svg>
                 </a>
             </div>
-            <ResizeLine v-if="resize && placement == 'right'" class="overlay-resize" v-model="width" :min-width="100" :max-width="0" reverse/>
+            <ResizeLine v-if="resize" class="overlay-resize" :placement="placement" v-model="dynamicSize" :min="minSize" :max="0" reverse/>
             <div class="overlay-content"><slot/></div>
         </div>
     </div>
@@ -51,7 +51,11 @@
                 type: [Number, String],
                 default: "100%"
             },
-            resize: {   // only placement:right
+            minSize: {
+                type: Number,
+                default: 300
+            },
+            resize: {
                 type: Boolean,
                 default: true
             },
@@ -63,7 +67,7 @@
 
         data() {
             return {
-                width: 0,
+                dynamicSize: 0,
                 zIndex: 0,
             }
         },
@@ -86,7 +90,7 @@
             },
 
             bodyStyle() {
-                let size = this.width;
+                let size = this.dynamicSize;
                 size = size <= 100 ? `${size}%` : `${size}px`
                 if (this.placement == 'right') {
                     return {
@@ -125,7 +129,7 @@
             },
             size: {
                 handler(val) {
-                    this.width = parseInt(val);
+                    this.dynamicSize = parseInt(val);
                 },
                 immediate: true
             }
diff --git a/resources/assets/js/components/ResizeLine.vue b/resources/assets/js/components/ResizeLine.vue
index b17d1a00..cf827147 100644
--- a/resources/assets/js/components/ResizeLine.vue
+++ b/resources/assets/js/components/ResizeLine.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="component-resize-line" :class="{resizing}" @mousedown.left.stop.prevent="resizeDown"></div>
+    <div class="component-resize-line" :class="[resizing ? 'resizing' : '', placement]" @mousedown.left.stop.prevent="resizeDown"></div>
 </template>
 <style lang="scss" scoped>
     .component-resize-line {
@@ -19,6 +19,12 @@
                 cursor: col-resize;
             }
         }
+        &.bottom {
+            cursor: row-resize;
+            &:after {
+                cursor: row-resize;
+            }
+        }
     }
 </style>
 <script>
@@ -28,14 +34,20 @@
         props: {
             value: {
             },
-            minWidth: {
+            min: {
                 type: Number,
                 default: 100,
             },
-            maxWidth: {
+            max: {
                 type: Number,
                 default: 600,
             },
+            placement: {
+                validator (value) {
+                    return ['right', 'bottom'].includes(value)
+                },
+                default: 'bottom'
+            },
             reverse: {
                 type: Boolean,
                 default: false
@@ -51,7 +63,7 @@
 
                 offset: {},
 
-                tmpWidth: undefined,
+                tmpSize: undefined,
             }
         },
 
@@ -70,7 +82,7 @@
                 };
                 this.resizing = true;
                 if (typeof this.value === 'number') {
-                    this.tmpWidth = this.value;
+                    this.tmpSize = this.value;
                 }
                 this.$emit('on-change', {
                     event: 'down',
@@ -82,13 +94,18 @@
                 }
                 let diffX = (e.pageX || e.clientX + document.documentElement.scrollLeft) - this.mouseX;
                 let diffY = (e.pageY || e.clientY + document.documentElement.scrollTop) - this.mouseY;
-                if (typeof this.tmpWidth === 'number') {
-                    let value = this.reverse ? (this.tmpWidth - diffX) : (this.tmpWidth + diffX);
-                    if (this.minWidth > 0) {
-                        value = Math.max(this.minWidth, value);
+                if (typeof this.tmpSize === 'number') {
+                    let value;
+                    if (this.placement == 'bottom') {
+                        value = this.reverse ? (this.tmpSize - diffY) : (this.tmpSize + diffY);
+                    } else {
+                        value = this.reverse ? (this.tmpSize - diffX) : (this.tmpSize + diffX);
                     }
-                    if (this.maxWidth > 0) {
-                        value = Math.min(this.maxWidth, value);
+                    if (this.min > 0) {
+                        value = Math.max(this.min, value);
+                    }
+                    if (this.max > 0) {
+                        value = Math.min(this.max, value);
                     }
                     this.$emit("input", value);
                 }
@@ -103,7 +120,7 @@
             },
             handleUp() {
                 this.resizing = false;
-                this.tmpWidth = undefined;
+                this.tmpSize = undefined;
                 this.$emit('on-change', {
                     event: 'up',
                 });