added event emitters to pane toggles consistent to css animation and resizing, provides new pane widths

Author: Hamz1221

Template/App.vue

@@ -20,7 +20,7 @@
             </div>           
 
               <template #hotspots>
-                <iv-pane position='left'>
+                <iv-pane position='left' @paneReveal="paneReveal" @paneHide="paneHide" @paneToggle="paneToggle" @paneResize="paneResize">
                     <iv-sidebar-content>
                         <iv-sidebar-section title="SDOF">
                             This SDOF solver takes in your parameters and then produces a time history plot of your system. Try it out by changing the input parameters and pressing submit to view your solution at the bottom of the page. To submit feedback for this module please click <a href="https://forms.gle/puL3mKPbchXzsRrV7" target="_blank">here</a>.
@@ -83,6 +83,18 @@ export default {
         
         changeInc1(e){
             this.min=e;
+        },
+        paneReveal(e){
+            console.log("pane revealed, width: ", e)
+        },
+        paneHide(){
+            console.log("pane hidden")
+        },
+        paneToggle(e){
+            console.log("pane toggled, width", e)
+        },
+        paneResize(e){
+            console.log("new pane width: ", e)
         }
     }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@impvis/components",
 
-  "version": "1.4.0",
+  "version": "1.4.3",
 
 
   "license": "BSD-3-Clause",

src/layouts/Pane/Pane.vue

@@ -123,14 +123,24 @@ export default {
             const initState = this.showPane
             if(initState){
                 this.$el.classList.add('iv-slide-animation-reverse');
+                this.$emit("paneHide")
             }else{
                 this.$el.classList.add('iv-slide-animation')
                 this.showPane = true;
+                
             }
+            initState? this.$emit("paneToggle", 0) : null
             setTimeout(()=>{
                 this.$el.classList.remove((initState)? 'iv-slide-animation-reverse':'iv-slide-animation');
                 this.showPane = !initState;
+                if(!initState){
+                    this.$emit("paneToggle", this.widthPx);
+                    this.$emit("paneReveal", this.widthPx);
+                }
+                
             },500);
+            
+            
         },
         mouseDown(e){
             this.resizer.adjusting=true;
@@ -162,6 +172,7 @@ export default {
                 let deltaX = (pageX - this.resizer.initPageX) * ((this.position_ == "left")? 1:-1)/25;
                 this.widthPx += (this.widthPx + deltaX > minWidth && this.widthPx + deltaX < this.maxWidth)? deltaX : 0;
                 this.resizer.initPageX = pageX;
+                this.$emit("paneResize", this.widthPx)
             }   
         }
     }