Skip to content

Commit 5d44b7f

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Fixing bugs as I find them.
1 parent 56f4bec commit 5d44b7f

File tree

6 files changed

+106
-115
lines changed

6 files changed

+106
-115
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! <[email protected]> (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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script><script defer="defer" src="vuetify-resize-drawer.js?a16400f61e3b6e4dec24"></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! <[email protected]> (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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script><script defer="defer" src="vuetify-resize-drawer.js?03bff5b28bf618d2e9f8"></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.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"wdns"
5555
],
5656
"dependencies": {
57+
"prettier": "^2.6.2",
5758
"vue": "^2.6.12",
5859
"vue-code-highlight": "^0.7.8",
5960
"vue-unicorn-log": "^1.0.6",
@@ -88,6 +89,7 @@
8889
"eslint-plugin-vue": "^7.9.0",
8990
"eslint-webpack-plugin": "^2.5.4",
9091
"html-webpack-plugin": "^5.5.0",
92+
"lodash": "^4.17.21",
9193
"postcss": "^8.4.12",
9294
"postcss-html": "^1.3.0",
9395
"postcss-import": "^14.1.0",

‎src/App.vue

Lines changed: 34 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
<template>
22
<v-app id="home">
33
<!-- ====================================================== App Bar -->
4-
<v-app-bar app class="top-app-bar" color="primary" dark dense fixed>
4+
<v-app-bar
5+
app
6+
class="top-app-bar"
7+
color="primary"
8+
dark
9+
dense
10+
fixed
11+
clipped-left
12+
clipped-right
13+
>
514
<v-app-bar-nav-icon
6-
app
715
class="nav-drawer-btn mr-2"
8-
clipped-left
9-
clipped-right
1016
height="32"
1117
width="32"
1218
@click.stop="drawer = !drawer"
@@ -37,9 +43,10 @@
3743
v-model="drawer"
3844
clipped
3945
fixed
40-
right
46+
:right="!drawerOptions.right"
4147
:color="drawerOptions.color"
42-
:style="`padding-top: ${drawerOptions.paddingTop}px`"
48+
:mini-variant="drawerOptions.miniVariant"
49+
:expand-on-hover="drawerOptions.expandOnHover"
4350
>
4451
<v-list-item>
4552
<v-list-item-content>
@@ -58,12 +65,13 @@
5865
name="ResizeDrawer"
5966
clipped
6067
fixed
68+
:mini-variant="drawerOptions.miniVariant"
69+
:expand-on-hover="drawerOptions.expandOnHover"
6170
:color="drawerOptions.color"
6271
:dark="drawerOptions.dark"
6372
:handlePosition="drawerOptions.handlePosition"
6473
:light="drawerOptions.light"
6574
:options="drawerOptions"
66-
:paddingTop="drawerOptions.paddingTop"
6775
:resizable="drawerOptions.resizable"
6876
:right="drawerOptions.right"
6977
:saveWidth="drawerOptions.saveWidth"
@@ -77,22 +85,20 @@
7785
@input="drawerInput"
7886
@transitionend="drawerTransitionend"
7987
>
80-
<template #prepend>
81-
<header>
82-
<v-list-item>
83-
<v-list-item-content>
84-
<v-list-item-title class="text-h6">
85-
Resize Drawer
86-
</v-list-item-title>
87-
<v-list-item-subtitle>
88-
I'm as free as a bird now
89-
</v-list-item-subtitle>
90-
</v-list-item-content>
91-
</v-list-item>
92-
93-
<v-divider></v-divider>
94-
</header>
95-
</template>
88+
<header>
89+
<v-list-item>
90+
<v-list-item-content>
91+
<v-list-item-title class="text-h6">
92+
Resize Drawer
93+
</v-list-item-title>
94+
<v-list-item-subtitle>
95+
I'm as free as a bird now
96+
</v-list-item-subtitle>
97+
</v-list-item-content>
98+
</v-list-item>
99+
100+
<v-divider></v-divider>
101+
</header>
96102

97103
<Menu :drawerOptions="drawerOptions" />
98104
</v-resize-drawer>
@@ -137,20 +143,10 @@ export default {
137143
computed: {
138144
mainStyles() {
139145
let styles = '';
140-
let paddingLeftVal = this.drawerOffset;
141-
let paddingRightVal = this.drawer ? '256px' : '0';
142146
143147
if (this.$vuetify.breakpoint.mobile) {
144-
paddingLeftVal = 0;
145-
paddingRightVal = 0;
146-
}
147-
148-
styles += `padding-left: ${paddingLeftVal} !important;`;
149-
styles += `padding-right: ${paddingRightVal} !important;`;
150-
151-
if (this.drawerOptions.right) {
152-
styles += `padding-left: ${paddingRightVal} !important;`;
153-
styles += `padding-right: ${paddingLeftVal} !important;`;
148+
styles += 'padding-left: 0 !important;';
149+
styles += 'padding-right: 0 !important;';
154150
}
155151
156152
return styles;
@@ -167,11 +163,12 @@ export default {
167163
// Updated //
168164
dark: false,
169165
handlePosition: 'center',
166+
miniVariant: true,
167+
expandOnHover: true,
170168
overlayColor: '#f00',
171169
overlayOpacity: '100%',
172-
paddingTop: 48,
173170
resizable: true,
174-
right: true,
171+
right: false,
175172
saveWidth: true,
176173
storageName: 'vuetify-resize-drawer',
177174
},

‎src/components/VResizeDrawer.vue

Lines changed: 65 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@
44
ref="resizeDrawer"
55
class="v-resize-drawer"
66
:class="classes"
7-
:style="drawerStyle"
7+
:style="styles"
8+
:tag="tag"
89
:value="value"
910
:width="drawerOptions.width"
1011
>
1112
<!-- Resize handle -->
1213
<div
13-
v-if="resizable"
14+
v-if="isResizable"
1415
class="handle-container d-flex"
1516
:class="{ [handleContainerClass]: handlePosition }"
1617
:style="handleContainerStyle"
@@ -96,7 +97,7 @@ import { VNavigationDrawer } from 'vuetify/lib';
9697
9798
export default {
9899
extends: VNavigationDrawer,
99-
name: 'ResizeDrawer',
100+
name: 'v-resize-drawer',
100101
props: {
101102
options: {
102103
type: Object,
@@ -117,14 +118,10 @@ export default {
117118
default: 'center',
118119
},
119120
overflow: Boolean,
120-
paddingTop: {
121-
type: [Number, String],
122-
default: 0,
123-
},
124121
resizable: {
125122
type: Boolean,
126123
default() {
127-
return !this.miniVariant;
124+
return !this.isMiniVariant;
128125
},
129126
},
130127
saveWidth: {
@@ -145,12 +142,6 @@ export default {
145142
light: '#ccc',
146143
},
147144
},
148-
// handlePosition: 'center',
149-
// overflow: false,
150-
// paddingTop: 0,
151-
// resizable: true,
152-
// saveWidth: true,
153-
// storageName: 'v-resize-drawer',
154145
width: '256px',
155146
},
156147
loading: false,
@@ -191,19 +182,23 @@ export default {
191182
'v-navigation-drawer--overflow': this.overflow,
192183
};
193184
},
194-
drawerStyle() {
195-
let styles = '';
196-
let paddingValue = this.paddingTop;
197-
198-
if (+this.paddingTop) {
199-
paddingValue = `${this.paddingTop}px`;
200-
}
201-
202-
styles += `padding-top: ${paddingValue};`;
185+
styles() {
186+
const translate = this.isBottom ? 'translateY' : 'translateX';
187+
let top = this.$vuetify.application.bar;
188+
189+
top += this.clipped ? this.$vuetify.application.top : 0;
190+
191+
const styles = {
192+
height: this.convertToUnit(this.height),
193+
top: !this.isBottom ? this.convertToUnit(top) : 'auto',
194+
maxHeight: this.computedMaxHeight != null ?
195+
`calc(100% - ${this.convertToUnit(this.computedMaxHeight)})` :
196+
undefined,
197+
transform: `${translate}(${this.convertToUnit(this.computedTransform, '%')})`,
198+
width: this.isMiniVariant ? this.convertToUnit(this.miniVariantWidth) : this.drawerOptions.width,
199+
};
203200
204-
if (this.right) {
205-
styles += 'left: initial;';
206-
}
201+
console.log({ styles });
207202
208203
return styles;
209204
},
@@ -256,6 +251,9 @@ export default {
256251
257252
return styles;
258253
},
254+
isResizable() {
255+
return this.resizable && !this.isMiniVariant;
256+
},
259257
},
260258
watch: {
261259
options: {
@@ -265,27 +263,43 @@ export default {
265263
deep: true,
266264
},
267265
},
268-
updated() {
269-
console.log(this);
270-
console.log(this.isActive);
271-
console.log(this.isBottom);
272-
console.log(this.right);
273-
},
274266
mounted() {
275267
console.log(this);
268+
this.setLocalStorage('set');
276269
},
277270
beforeDestroy() {
278-
if (this.resizable) {
271+
if (this.isResizable) {
279272
document.removeEventListener('mouseup', this.handleMouseUp, false);
280273
document.removeEventListener('mousemove', this.drawerResize, false);
281274
}
282275
},
283276
methods: {
277+
computeTop() {
278+
if (!this.hasApp) return 0;
279+
280+
let top = this.$vuetify.application.bar;
281+
282+
top += this.clipped ?
283+
this.$vuetify.application.top :
284+
0;
285+
286+
return top;
287+
},
284288
genContent() {
285289
return this.$createElement('div', {
286290
staticClass: 'v-navigation-drawer__content',
287291
}, this.$slots.default);
288292
},
293+
convertToUnit(str, unit = 'px') {
294+
if (str == null || str === '') {
295+
return undefined;
296+
}
297+
else if (!+str) {
298+
return String(str);
299+
}
300+
301+
return `${Number(str)}${unit}`;
302+
},
289303
emitEvent(name, evt) {
290304
const drawerData = {
291305
eventName: name,
@@ -430,16 +444,18 @@ export default {
430444
getLocalStorage() {
431445
return localStorage.getItem(this.storageName);
432446
},
433-
setLocalStorage() {
447+
setLocalStorage(action = 'update') {
434448
if (!this.saveWidth) {
435449
return false;
436450
}
437451
438452
let width = this.drawerOptions.width;
439453
width = width ?? undefined;
440454
441-
const oldValue = (localStorage.getItem(this.storageName) === 'true');
442-
width = width || !oldValue;
455+
if (action === 'set') {
456+
width = this.getLocalStorage();
457+
this.updateAppWidth(width);
458+
}
443459
444460
localStorage.setItem(this.storageName, width);
445461
@@ -449,32 +465,38 @@ export default {
449465
// Mounted Event //
450466
setOptions() {
451467
this.drawerOptions = _merge(this.drawerOptions, this.options);
452-
const isMiniVariant = this.miniVariant !== undefined && this.miniVariant !== false;
453468
454469
// Disable resize if mini-variant is set //
455-
if (isMiniVariant) {
456-
this.drawerOptions.width = this.drawerOptions['mini-variant-width'] || undefined;
470+
if (this.isMiniVariant) {
471+
this.drawerOptions.width = this.miniVariantWidth || undefined;
472+
return false;
457473
}
458474
const storageWidth = this.getLocalStorage();
459475
460-
if (this.saveWidth && storageWidth && !isMiniVariant) {
476+
if (this.saveWidth && storageWidth && !this.isMiniVariant) {
461477
this.defaultWidth = this.drawerOptions.width;
462478
this.drawerOptions.width = this.getLocalStorage();
463479
}
464480
465481
this.updateAppWidth(this.drawerOptions.width);
482+
return false;
466483
},
467484
updateAppWidth(width) {
468-
if (!this.app) {
485+
if (!this.app || this.isMiniVariant) {
469486
return false;
470487
}
471488
489+
console.log('blarg');
490+
491+
const intWidth = typeof width === 'number' ? width : width.replace('px', '');
492+
493+
console.log({ intWidth });
472494
if (this.right) {
473-
this.$vuetify.application.right = width;
495+
this.$vuetify.application.right = intWidth;
474496
return false;
475497
}
476498
477-
this.$vuetify.application.left = width;
499+
this.$vuetify.application.left = intWidth;
478500
return false;
479501
},
480502
},
@@ -489,13 +511,6 @@ export default {
489511
}
490512
}
491513
492-
// ! Look into why I need to do this for the drawer to translate correctly ! //
493-
&.v-navigation-drawer--right {
494-
&:not(.v-navigation-drawer--open) {
495-
transform: translateX(100%) !important;
496-
}
497-
}
498-
499514
.close-drawer {
500515
cursor: pointer;
501516
}

0 commit comments

Comments
 (0)