Skip to content

Commit 0aa25a7

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Getting width prop to work
1 parent 81d0dd8 commit 0aa25a7

File tree

5 files changed

+41
-53
lines changed

5 files changed

+41
-53
lines changed

‎docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@
33
function gtag() { dataLayer.push(arguments); }
44
gtag('js', new Date());
55

6-
gtag('config', 'UA-XXXXXXXXX-X');</script><meta name="base" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/"><meta name="charset" content="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="keywords" content="vuetify-resize-drawer, vuetifyResizeDrawer, v-resize-drawer, vResizeDrawer, vuetify, navigation drawer, v-navigation-drawer, vNavigationDrawer, api, drawer, resize, resizable, vue, vue2, component, javascript, webdevnerdstuff, wdns"><meta name="description" content="The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user."><meta name="author" content="WebDevNerdStuff & Bunnies... lots and lots of bunnies! <webdevnerdstuff@gmail.com> (https://webdevnerdstuff.com)"><meta name="robots" content="index, follow"><meta name="googlebot" content="index, follow"><meta name="rating" content="General"><meta name="theme-color" content="#21252a"><meta name="og:type" content="website"><meta name="og:title" content="Vuetify Resize Drawer"><meta name="og:image" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/images/vuetify-resize-drawer-social.jpg"><meta name="og:image:alt" content="The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user."><meta name="og:image:width" content="1200"><meta name="og:image:height" content="630"><meta name="og:description" content="The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user."><meta name="og:site_name" content="Vuetify Resize Drawer"><meta name="og:locale" content="en_US"></head><body><noscript><strong>We're sorry but Vuetify Resize Drawer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script><script defer="defer" src="vuetify-resize-drawer.js?ca96866f318af43aaa93"></script></body></html>
6+
gtag('config', 'UA-XXXXXXXXX-X');</script><meta name="base" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/"><meta name="charset" content="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="keywords" content="vuetify-resize-drawer, vuetifyResizeDrawer, v-resize-drawer, vResizeDrawer, vuetify, navigation drawer, v-navigation-drawer, vNavigationDrawer, api, drawer, resize, resizable, vue, vue2, component, javascript, webdevnerdstuff, wdns"><meta name="description" content="The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user."><meta name="author" content="WebDevNerdStuff & Bunnies... lots and lots of bunnies! <webdevnerdstuff@gmail.com> (https://webdevnerdstuff.com)"><meta name="robots" content="index, follow"><meta name="googlebot" content="index, follow"><meta name="rating" content="General"><meta name="theme-color" content="#21252a"><meta name="og:type" content="website"><meta name="og:title" content="Vuetify Resize Drawer"><meta name="og:image" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/images/vuetify-resize-drawer-social.jpg"><meta name="og:image:alt" content="The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user."><meta name="og:image:width" content="1200"><meta name="og:image:height" content="630"><meta name="og:description" content="The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user."><meta name="og:site_name" content="Vuetify Resize Drawer"><meta name="og:locale" content="en_US"></head><body><noscript><strong>We're sorry but Vuetify Resize Drawer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script><script defer="defer" src="vuetify-resize-drawer.js?dc604e46c1a5b4f56607"></script></body></html>

‎docs/vuetify-resize-drawer.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.vue

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,9 @@
5454
>
5555
<v-list-item>
5656
<v-list-item-content>
57-
<v-list-item-title class="text-h6">Default Drawer</v-list-item-title>
57+
<v-list-item-title class="text-h6">
58+
Navigation Drawer
59+
</v-list-item-title>
5860
<v-list-item-subtitle>Stuck With You</v-list-item-subtitle>
5961
</v-list-item-content>
6062
</v-list-item>
@@ -69,21 +71,22 @@
6971
v-model="drawer"
7072
clipped
7173
fixed
72-
:stateless="drawerOptions.stateless"
73-
:overflow="drawerOptions.overflow"
74-
:touchless="drawerOptions.touchless"
75-
:mini-variant="drawerOptions.miniVariant"
76-
:mini-variant-width="drawerOptions.miniVariantWidth"
77-
:expand-on-hover="drawerOptions.expandOnHover"
7874
:color="drawerOptions.color"
7975
:dark="drawerOptions.dark"
76+
:expand-on-hover="drawerOptions.expandOnHover"
8077
:handlePosition="drawerOptions.handlePosition"
8178
:light="drawerOptions.light"
79+
:mini-variant-width="drawerOptions.miniVariantWidth"
80+
:mini-variant="drawerOptions.miniVariant"
8281
:options="drawerOptions"
82+
:overflow="drawerOptions.overflow"
8383
:resizable="drawerOptions.resizable"
8484
:right="drawerOptions.right"
8585
:saveWidth="drawerOptions.saveWidth"
86+
:stateless="drawerOptions.stateless"
8687
:storageName="drawerOptions.storageName"
88+
:touchless="drawerOptions.touchless"
89+
:width="drawerOptions.width"
8790
@close="drawerClose"
8891
@handle:click="handleClick"
8992
@handle:dblclick="handleDoubleClick"
@@ -184,8 +187,6 @@ export default {
184187
right: false,
185188
stateless: false,
186189
touchless: false,
187-
188-
// TODO: Maybe try to get this working with the built in width prop //
189190
width: '256px',
190191
191192
// overlay //
@@ -194,7 +195,7 @@ export default {
194195
195196
// storage //
196197
saveWidth: true,
197-
storageName: 'vuetify-resize-drawer',
198+
storageName: 'v-resize-drawer-width',
198199
199200
// mini-variant //
200201
expandOnHover: false,

‎src/components/VResizeDrawer.vue

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
tag="nav"
99
:value="value"
1010
:stateless="stateless"
11-
:width="drawerOptions.width"
11+
:width="resizedWidth"
1212
>
1313
<!-- Resize handle -->
1414
<div
@@ -127,7 +127,7 @@ export default {
127127
},
128128
storageName: {
129129
type: String,
130-
default: 'v-resize-drawer',
130+
default: 'v-resize-drawer-width',
131131
},
132132
},
133133
data: () => ({
@@ -141,14 +141,14 @@ export default {
141141
},
142142
width: '256px',
143143
},
144-
loading: false,
145-
offsetWidth: '256px',
146144
events: {
147145
handle: {
148146
mouseUp: true,
149147
mouseDown: false,
150148
},
151149
},
150+
loading: false,
151+
resizedWidth: '256px',
152152
unicornLog: {
153153
styles: [
154154
'background: black',
@@ -190,7 +190,7 @@ export default {
190190
`calc(100% - ${this.convertToUnit(this.computedMaxHeight)})` :
191191
undefined,
192192
transform: `${translate}(${this.convertToUnit(this.computedTransform, '%')})`,
193-
width: this.isMiniVariant ? this.convertToUnit(this.miniVariantWidth) : this.drawerOptions.width,
193+
width: this.isMiniVariant ? this.convertToUnit(this.miniVariantWidth) : this.resizedWidth,
194194
};
195195
196196
console.log({ styles });
@@ -279,11 +279,6 @@ export default {
279279
280280
return top;
281281
},
282-
genContent() {
283-
return this.$createElement('div', {
284-
staticClass: 'v-navigation-drawer__content',
285-
}, this.$slots.default);
286-
},
287282
convertToUnit(str, unit = 'px') {
288283
if (str == null || str === '') {
289284
return undefined;
@@ -298,8 +293,8 @@ export default {
298293
const drawerData = {
299294
eventName: name,
300295
evt,
301-
offsetWidth: this.offsetWidth,
302-
width: this.drawerOptions.width,
296+
resizedWidth: this.resizedWidth,
297+
width: this.resizedWidth,
303298
};
304299
305300
if (name !== 'handle:drag') {
@@ -313,6 +308,11 @@ export default {
313308
314309
this.$emit(name, drawerData);
315310
},
311+
genContent() {
312+
return this.$createElement('div', {
313+
staticClass: 'v-navigation-drawer__content',
314+
}, this.$slots.default);
315+
},
316316
317317
// Handle Events //
318318
handleClick(evt) {
@@ -333,11 +333,10 @@ export default {
333333
objects: evt,
334334
});
335335
336-
this.drawerOptions.width = this.defaultWidth;
337-
this.offsetWidth = this.defaultWidth;
336+
this.resizedWidth = this.defaultWidth;
338337
this.setLocalStorage();
339338
340-
this.updateAppWidth(this.offsetWidth);
339+
this.updateAppWidth(this.resizedWidth);
341340
this.emitEvent('handle:dblclick', evt);
342341
},
343342
handleMouseDown(evt) {
@@ -370,21 +369,20 @@ export default {
370369
const drawer = this.$refs.resizeDrawer.$el;
371370
372371
this.events.handle.mouseDown = false;
373-
this.drawerOptions.width = drawer.style.width;
372+
this.resizedWidth = drawer.style.width;
374373
375374
document.body.style.cursor = '';
376375
377376
this.setLocalStorage();
378377
379378
if (!this.events.handle.mouseUp) {
380379
this.events.handle.mouseUp = true;
381-
this.offsetWidth = this.drawerOptions.width;
382380
383-
this.updateAppWidth(this.offsetWidth);
381+
this.updateAppWidth(this.resizedWidth);
384382
385383
const logStuff = {
386-
drawerOptionsWidth: this.drawerOptions.width,
387-
offsetWidth: this.offsetWidth,
384+
drawerOptionsWidth: this.resizedWidth,
385+
resizedWidth: this.resizedWidth,
388386
};
389387
390388
this.$unicornLog({
@@ -424,10 +422,9 @@ export default {
424422
width = document.body.scrollWidth - width;
425423
}
426424
427-
this.drawerOptions.width = `${width}px`;
425+
this.resizedWidth = `${width}px`;
428426
429427
document.body.style.cursor = 'grabbing';
430-
this.offsetWidth = this.drawerOptions.width;
431428
432429
this.updateAppWidth(width);
433430
@@ -443,11 +440,13 @@ export default {
443440
return false;
444441
}
445442
446-
let width = this.drawerOptions.width;
443+
let width = this.resizedWidth;
447444
width = width ?? undefined;
448445
449446
if (action === 'set') {
450447
width = this.getLocalStorage();
448+
width = width || this.resizedWidth;
449+
451450
this.updateAppWidth(width);
452451
}
453452
@@ -462,17 +461,17 @@ export default {
462461
463462
// Disable resize if mini-variant is set //
464463
if (this.isMiniVariant) {
465-
this.drawerOptions.width = this.miniVariantWidth || undefined;
464+
this.resizedWidth = this.miniVariantWidth || undefined;
466465
return false;
467466
}
468467
const storageWidth = this.getLocalStorage();
469468
470469
if (this.saveWidth && storageWidth && !this.isMiniVariant) {
471-
this.defaultWidth = this.drawerOptions.width;
472-
this.drawerOptions.width = this.getLocalStorage();
470+
this.defaultWidth = this.resizedWidth;
471+
this.resizedWidth = this.getLocalStorage();
473472
}
474473
475-
this.updateAppWidth(this.drawerOptions.width);
474+
this.updateAppWidth(this.resizedWidth);
476475
return false;
477476
},
478477
updateAppWidth(width) {

‎src/components/documentation/Props.vue

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -270,13 +270,6 @@ export default {
270270
sortable: false,
271271
width: '10%',
272272
},
273-
{
274-
text: 'Try',
275-
value: 'try',
276-
align: 'left',
277-
filterable: false,
278-
sortable: false,
279-
},
280273
{
281274
text: 'Default',
282275
value: 'default',
@@ -326,7 +319,7 @@ export default {
326319
{
327320
name: 'storageName',
328321
type: 'string',
329-
default: 'vuetify-resize-drawer',
322+
default: 'v-resize-drawer-width',
330323
desc: 'Determines the name of the local storage item.',
331324
},
332325
],
@@ -387,11 +380,6 @@ export default {
387380
status: 'debugging',
388381
notes: 'Drawer does not function like it should with <code>touchless</code> enabled.',
389382
},
390-
{
391-
name: 'width',
392-
status: 'not supported',
393-
notes: 'The width prop is not supported as it would interfere with the functionality of resizing the drawer.',
394-
},
395383
],
396384
},
397385
search: '',

0 commit comments

Comments
 (0)