Skip to content

Commit 36a47e7

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Debugging
1 parent f3e7341 commit 36a47e7

File tree

8 files changed

+59
-1977
lines changed

8 files changed

+59
-1977
lines changed

‎dist/vuetify-resize-drawer.js

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

‎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?2c401028564bb7e8cfa9"></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?cf2f70914f9415f8679d"></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: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,8 @@
5757
],
5858
"dependencies": {
5959
"prettier": "^2.6.2",
60-
"vue": "^2.6.12",
6160
"vue-code-highlight": "^0.7.8",
6261
"vue-unicorn-log": "^1.0.6",
63-
"vuetify": "^2.5.6",
6462
"vuetify-loader": "^1.7.2"
6563
},
6664
"devDependencies": {
@@ -105,14 +103,20 @@
105103
"stylelint-scss": "^4.2.0",
106104
"stylelint-webpack-plugin": "^3.2.0",
107105
"terser-webpack-plugin": "^5.3.1",
106+
"vue": "2.*",
108107
"vue-hot-reload-api": "^2.0.8",
109108
"vue-loader": "^15.9.6",
110109
"vue-style-loader": "^4.1.2",
111110
"vue-template-compiler": "^2.6.12",
111+
"vuetify": "^2",
112112
"webpack": "^5.35.1",
113113
"webpack-bundle-analyzer": "^4.5.0",
114114
"webpack-cli": "^4.6.0",
115115
"webpack-dev-server": "^4.7.4",
116116
"webpack-merge": "^5.7.3"
117+
},
118+
"peerDependencies": {
119+
"vue": "^2.6.12",
120+
"vuetify": "^2.5.6"
117121
}
118122
}

‎pnpm-lock.yaml

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

‎src/App.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
</v-app-bar>
4040

4141
<!-- ====================================================== Navigation Drawer -->
42-
<!-- <v-navigation-drawer
42+
<v-navigation-drawer
4343
app
4444
v-model="drawer"
4545
clipped
@@ -65,7 +65,7 @@
6565
<v-divider></v-divider>
6666

6767
<Menu :drawerOptions="drawerOptions" />
68-
</v-navigation-drawer> -->
68+
</v-navigation-drawer>
6969

7070
<v-resize-drawer
7171
v-model="drawer"

‎src/components/VResizeDrawer.vue

Lines changed: 25 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@
5050
v-if="$scopedSlots.handle"
5151
name="handle"
5252
:class="{
53-
'theme--dark': dark,
54-
'theme--light': !dark,
53+
'theme--dark': isDark,
54+
'theme--light': !isDark,
5555
'float-end': right,
5656
'float-start': !right,
5757
}"
@@ -61,8 +61,8 @@
6161
<v-icon
6262
v-else-if="handlePosition === 'top-icon'"
6363
:class="{
64-
'theme--dark': dark,
65-
'theme--light': !dark,
64+
'theme--dark': isDark,
65+
'theme--light': !isDark,
6666
'float-end': right,
6767
'float-start': !right,
6868
}"
@@ -93,19 +93,23 @@
9393
</template>
9494

9595
<script>
96-
import { VNavigationDrawer } from 'vuetify/lib';
97-
98-
// ! `this.$vuetify.application` is supposed to be readonly ! //
99-
100-
// ! This is needed for this.$vuetify to work, but causes the file to be huge. Need to figure a way around this ! //
101-
// import Vue from 'vue';
102-
// import Vuetify from 'vuetify';
103-
// const vuetifyOptions = {};
104-
// Vue.use(Vuetify);
105-
106-
export default {
96+
import Vue from 'vue';
97+
import Vuetify, { VNavigationDrawer } from 'vuetify/lib';
98+
import UnicornLog from 'vue-unicorn-log';
99+
import Applicationable from 'vuetify/lib/mixins/applicationable';
100+
import mixins from 'vuetify/lib/util/mixins';
101+
102+
Vue.use(Vuetify);
103+
Vue.use(UnicornLog);
104+
105+
const baseMixins = mixins(
106+
Applicationable('left', [
107+
'drawerWidth',
108+
]),
109+
);
110+
111+
export default baseMixins.extend({
107112
extends: VNavigationDrawer,
108-
// vuetify: new Vuetify(vuetifyOptions),
109113
name: 'v-resize-drawer',
110114
props: {
111115
handleColor: {
@@ -188,15 +192,10 @@ export default {
188192
},
189193
drawerStyles() {
190194
const translate = this.isBottom ? 'translateY' : 'translateX';
191-
// ! This causes issues when not importing vuetify ! //
192-
let top = this.$vuetify.application.bar;
193-
194-
// ! This causes issues when not importing vuetify ! //
195-
top += this.clipped ? this.$vuetify.application.top : 0;
196195
197196
const styles = {
198197
height: this.convertToUnit(this.height),
199-
top: !this.isBottom ? this.convertToUnit(top) : 'auto',
198+
top: !this.isBottom ? this.convertToUnit(this.computedTop) : 'auto',
200199
maxHeight: this.computedMaxHeight != null ?
201200
`calc(100% - ${this.convertToUnit(this.computedMaxHeight)})` :
202201
undefined,
@@ -260,6 +259,9 @@ export default {
260259
deep: true,
261260
},
262261
},
262+
updated() {
263+
console.log('UPDATED', this);
264+
},
263265
mounted() {
264266
this.setup();
265267
this.genListeners();
@@ -295,7 +297,6 @@ export default {
295297
this.resizedWidth = this.getLocalStorage();
296298
}
297299
298-
this.updateAppWidth(this.resizedWidth);
299300
return false;
300301
},
301302
@@ -334,8 +335,6 @@ export default {
334335
335336
document.body.style.cursor = 'grabbing';
336337
337-
this.updateAppWidth(width);
338-
339338
this.emitEvent('handle:drag', el);
340339
},
341340
@@ -361,7 +360,6 @@ export default {
361360
this.resizedWidth = this.defaultWidth;
362361
this.setLocalStorage();
363362
364-
this.updateAppWidth(this.resizedWidth);
365363
this.emitEvent('handle:dblclick', evt);
366364
},
367365
handleMouseDown(evt) {
@@ -403,8 +401,6 @@ export default {
403401
if (!this.events.handle.mouseUp) {
404402
this.events.handle.mouseUp = true;
405403
406-
this.updateAppWidth(this.resizedWidth);
407-
408404
const logStuff = {
409405
resizedWidth: this.resizedWidth,
410406
};
@@ -436,8 +432,6 @@ export default {
436432
if (action === 'set') {
437433
width = this.getLocalStorage();
438434
width = width || this.resizedWidth;
439-
440-
this.updateAppWidth(width);
441435
}
442436
443437
localStorage.setItem(this.storageName, width);
@@ -446,19 +440,6 @@ export default {
446440
},
447441
448442
// Misc Events //
449-
computeTop() {
450-
if (!this.hasApp) return 0;
451-
452-
// ! This causes issues when not importing vuetify ! //
453-
let top = this.$vuetify.application.bar;
454-
455-
// ! This causes issues when not importing vuetify ! //
456-
top += this.clipped ?
457-
this.$vuetify.application.top :
458-
0;
459-
460-
return top;
461-
},
462443
convertToUnit(str, unit = 'px') {
463444
if (str == null || str === '') {
464445
return undefined;
@@ -509,25 +490,8 @@ export default {
509490
510491
return intWidth;
511492
},
512-
updateAppWidth(width) {
513-
if (!this.app || this.isMiniVariant) {
514-
return false;
515-
}
516-
517-
const intWidth = typeof width === 'number' ? width : width.replace('px', '');
518-
519-
if (this.right) {
520-
// ! `this.$vuetify.application` is supposed to be readonly ! //
521-
this.$vuetify.application.right = intWidth;
522-
return false;
523-
}
524-
525-
// ! `this.$vuetify.application` is supposed to be readonly ! //
526-
this.$vuetify.application.left = intWidth;
527-
return false;
528-
},
529493
},
530-
};
494+
});
531495
</script>
532496
533497
<style lang="scss" scoped>

‎src/main.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import Vue from 'vue';
2-
import vuetify from '@plugins/vuetify';
3-
import UnicornLog from 'vue-unicorn-log';
2+
import vuetify from './plugins/vuetify';
43
import App from './App.vue';
54

6-
Vue.use(UnicornLog);
7-
85
Vue.config.productionTip = false;
96

107
new Vue({

0 commit comments

Comments
 (0)