@@ -36,15 +36,27 @@ export default {
3636 }
3737 } ,
3838 data ( ) {
39- const belowBreakpoint = (
40- this . behavior === 'mobile' ||
41- ( this . behavior !== 'desktop' && this . breakpoint >= this . layout . width )
42- )
39+ const largeScreenState = this . value !== void 0 ? this . value : true
40+ const showing = this . behavior !== 'mobile' && this . breakpoint < this . layout . width && ! this . overlay
41+ ? largeScreenState
42+ : false
43+
44+ if ( this . value !== void 0 && this . value !== showing ) {
45+ this . $emit ( 'input' , showing )
46+ }
47+
48+ console . log ( `showing, largeScreenState, this.breakpoint, this.layout.width` )
49+ console . log ( showing , largeScreenState , this . breakpoint , this . layout . width )
50+ console . log ( `this.behavior !== 'mobile', this.breakpoint >= this.layout.width, !this.overlay` )
51+ console . log ( this . behavior !== 'mobile' , this . breakpoint >= this . layout . width , ! this . overlay )
4352
4453 return {
45- showing : true ,
46- belowBreakpoint,
47- largeScreenState : this . value ,
54+ showing,
55+ belowBreakpoint : (
56+ this . behavior === 'mobile' ||
57+ ( this . behavior !== 'desktop' && this . breakpoint >= this . layout . width )
58+ ) ,
59+ largeScreenState,
4860 mobileOpened : false ,
4961
5062 size : 300 ,
@@ -55,18 +67,23 @@ export default {
5567 } ,
5668 watch : {
5769 belowBreakpoint ( val , old ) {
70+ console . log ( 'belowBreakpoint: change detected' , val )
5871 if ( this . mobileOpened ) {
72+ console . log ( 'belowBreakpoint: mobile view is opened; aborting' )
5973 return
6074 }
6175
6276 if ( val ) { // from lg to xs
77+ console . log ( 'belowBreakpoint: from lg to xs; model force to false' )
6378 if ( ! this . overlay ) {
79+ console . log ( 'belowBreakpoint: largeScreenState set to' , this . showing )
6480 this . largeScreenState = this . showing
6581 }
6682 // ensure we close it for small screen
6783 this . hide ( )
6884 }
6985 else if ( ! this . overlay ) { // from xs to lg
86+ console . log ( 'belowBreakpoint: from xs to lg; model set to' , this . largeScreenState )
7087 this [ this . largeScreenState ? 'show' : 'hide' ] ( )
7188 }
7289 } ,
@@ -97,15 +114,18 @@ export default {
97114 }
98115 } ,
99116 onLayout ( val ) {
117+ console . log ( 'onLayout' , val )
100118 this . __update ( 'space' , val )
101119 this . layout . __animate ( )
102120 } ,
103121 $route ( ) {
104122 if ( this . mobileOpened ) {
123+ console . log ( '$route watch closing' )
105124 this . hide ( )
106125 return
107126 }
108127 if ( this . onScreenOverlay ) {
128+ console . log ( '$route watch updating model' )
109129 this . hide ( )
110130 }
111131 }
@@ -211,6 +231,7 @@ export default {
211231 }
212232 } ,
213233 render ( h ) {
234+ console . log ( `drawer ${ this . side } render` )
214235 const child = [ ]
215236
216237 if ( this . mobileView ) {
@@ -254,10 +275,8 @@ export default {
254275 ] ) )
255276 } ,
256277 created ( ) {
257- if ( this . belowBreakpoint || this . overlay ) {
258- this . hide ( )
259- }
260- else if ( this . onLayout ) {
278+ if ( this . onLayout ) {
279+ console . log ( 'DRAWER on layout' )
261280 this . __update ( 'space' , true )
262281 this . __update ( 'offset' , this . offset )
263282 }
@@ -325,7 +344,10 @@ export default {
325344 }
326345 } ,
327346 __show ( ) {
347+ console . log ( 'show' , this . showing )
348+
328349 if ( this . belowBreakpoint ) {
350+ console . log ( 'watcher value: opening mobile' )
329351 this . mobileOpened = true
330352 this . percentage = 1
331353 }
@@ -343,6 +365,8 @@ export default {
343365 } , duration )
344366 } ,
345367 __hide ( ) {
368+ console . log ( 'hide' , this . showing )
369+
346370 this . mobileOpened = false
347371 this . percentage = 0
348372 document . body . classList . remove ( bodyClassAbove , bodyClassBelow )
0 commit comments