Skip to content

Commit 3ff34af

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Converting things some more. Testing & debugging.
1 parent 33245d5 commit 3ff34af

File tree

9 files changed

+252
-141
lines changed

9 files changed

+252
-141
lines changed

‎dist/vuetify-resize-drawer.js‎

Lines changed: 28 additions & 0 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?9010fd4c0a2a79e51d60"></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?a16400f61e3b6e4dec24"></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-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
"dependencies": {
5757
"vue": "^2.6.12",
5858
"vue-code-highlight": "^0.7.8",
59+
"vue-unicorn-log": "^1.0.6",
5960
"vuetify": "^2.5.6",
6061
"vuetify-loader": "^1.7.2"
6162
},

‎src/App.vue‎

Lines changed: 76 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -44,37 +44,35 @@
4444
<v-list-item>
4545
<v-list-item-content>
4646
<v-list-item-title class="text-h6">Default Drawer</v-list-item-title>
47-
<v-list-item-subtitle> Stuck With You </v-list-item-subtitle>
47+
<v-list-item-subtitle>Stuck With You</v-list-item-subtitle>
4848
</v-list-item-content>
4949
</v-list-item>
5050

5151
<v-divider></v-divider>
5252

5353
<Menu :drawerOptions="drawerOptions" />
54-
55-
<!-- <template #append>
56-
<v-footer fixed color="primary" dark></v-footer>
57-
</template> -->
5854
</v-navigation-drawer>
5955

6056
<v-resize-drawer
57+
v-model="drawer"
6158
name="ResizeDrawer"
6259
clipped
6360
fixed
64-
:saveWidth="drawerOptions.saveWidth"
65-
:paddingTop="drawerOptions.paddingTop"
66-
:resizable="drawerOptions.resizable"
67-
:options="drawerOptions"
6861
:color="drawerOptions.color"
6962
:dark="drawerOptions.dark"
63+
:handlePosition="drawerOptions.handlePosition"
7064
:light="drawerOptions.light"
65+
:options="drawerOptions"
66+
:paddingTop="drawerOptions.paddingTop"
67+
:resizable="drawerOptions.resizable"
7168
:right="drawerOptions.right"
72-
:value="drawer"
69+
:saveWidth="drawerOptions.saveWidth"
70+
:storageName="drawerOptions.storageName"
7371
@close="drawerClose"
74-
@handle:click="logEvent($event, 'handle:click')"
72+
@handle:click="handleClick"
7573
@handle:dblclick="handleDoubleClick"
7674
@handle:drag="handleDrag"
77-
@handle:mousedown="logEvent($event, 'handle:mousedown')"
75+
@handle:mousedown="handleMousedown"
7876
@handle:mouseup="handleMouseup"
7977
@input="drawerInput"
8078
@transitionend="drawerTransitionend"
@@ -97,10 +95,6 @@
9795
</template>
9896

9997
<Menu :drawerOptions="drawerOptions" />
100-
101-
<!-- <template #append>
102-
<v-footer fixed color="primary" dark></v-footer>
103-
</template> -->
10498
</v-resize-drawer>
10599

106100
<!-- ====================================================== Main Container -->
@@ -177,20 +171,34 @@ export default {
177171
overlayOpacity: '100%',
178172
paddingTop: 48,
179173
resizable: true,
180-
right: false,
181-
saveWidth: false,
174+
right: true,
175+
saveWidth: true,
182176
storageName: 'vuetify-resize-drawer',
183177
},
184178
drawerOffset: '256px',
185179
links: {
186180
github: 'https://github.com/webdevnerdstuff/vuetify-resize-drawer',
187181
npm: 'https://www.npmjs.com/package/vuetify-resize-drawer',
188182
},
183+
unicornLog: {
184+
styles: [
185+
'background: black',
186+
'color: magenta',
187+
'padding: 5px',
188+
],
189+
prefix: '[App.vue]',
190+
},
189191
mainContainerEl: null,
190192
}),
191193
created() {
192194
this.$bus.$on('updateOptions', (options) => {
193-
console.log({ options });
195+
this.$unicornLog({
196+
text: 'updateOptions',
197+
styles: this.unicornLog.styles,
198+
logPrefix: this.unicornLog.prefix,
199+
objects: options,
200+
});
201+
194202
this.drawerOptions = options;
195203
});
196204
},
@@ -205,15 +213,21 @@ export default {
205213
this.setDarkLocalStorage(this.dark);
206214
},
207215
208-
logEvent(el, name) {
209-
console.log('----------------------------------- logEvent', { name, el });
210-
},
211216
drawerClose(val) {
212-
console.log('----------------------------------- drawerClose', { val });
217+
this.$unicornLog({
218+
text: `drawerClose: ${val}`,
219+
styles: this.unicornLog.styles,
220+
logPrefix: this.unicornLog.prefix,
221+
});
222+
213223
this.drawer = false;
214224
},
215225
drawerInput(val) {
216-
console.log('----------------------------------- drawerInput', { val });
226+
this.$unicornLog({
227+
text: `drawerInput: ${val}`,
228+
styles: this.unicornLog.styles,
229+
logPrefix: this.unicornLog.prefix,
230+
});
217231
218232
if (val) {
219233
this.getLocalStorage();
@@ -224,21 +238,54 @@ export default {
224238
return false;
225239
},
226240
drawerTransitionend(evt) {
227-
console.log('----------------------------------- drawerTransitionend', { evt });
241+
this.$unicornLog({
242+
text: 'drawerTransitionend',
243+
styles: this.unicornLog.styles,
244+
logPrefix: this.unicornLog.prefix,
245+
object: evt,
246+
});
247+
},
248+
handleClick(evt) {
249+
this.$unicornLog({
250+
text: 'handleClick',
251+
styles: this.unicornLog.styles,
252+
logPrefix: this.unicornLog.prefix,
253+
object: evt,
254+
});
228255
},
229256
handleDoubleClick(evt) {
230-
console.log('----------------------------------- handleDoubleClick', { evt });
257+
this.$unicornLog({
258+
text: 'handleDoubleClick',
259+
styles: this.unicornLog.styles,
260+
logPrefix: this.unicornLog.prefix,
261+
object: evt,
262+
});
263+
231264
this.updateDrawerOffset(evt.offsetWidth);
232265
},
266+
handleMousedown(evt) {
267+
this.$unicornLog({
268+
text: 'handleMousedown',
269+
styles: this.unicornLog.styles,
270+
logPrefix: this.unicornLog.prefix,
271+
object: evt,
272+
});
273+
},
233274
handleMouseup(evt) {
234-
console.log('----------------------------------- handleMouseup', { evt });
275+
this.$unicornLog({
276+
text: 'handleMouseup',
277+
styles: this.unicornLog.styles,
278+
logPrefix: this.unicornLog.prefix,
279+
object: evt,
280+
});
281+
235282
this.updateDrawerOffset(evt.offsetWidth);
236283
},
237284
handleDrag(evt) {
238285
this.updateDrawerOffset(evt.offsetWidth);
239286
},
240-
getLocalStorage(name = this.drawerOptions.storageName) {
241-
this.updateDrawerOffset(localStorage.getItem(`vrd-${name}`) || this.drawerOffset);
287+
getLocalStorage() {
288+
this.updateDrawerOffset(localStorage.getItem(this.drawerOptions.storageName) || this.drawerOffset);
242289
},
243290
getDarkLocalStorage() {
244291
const isDark = localStorage.getItem('vuetify-resize-drawer-dark');

0 commit comments

Comments
 (0)