Skip to content

Commit 142a4a5

Browse files
webdevnerdstuffwebdevnerdstuff
committed
debugging and testing
1 parent c7f2d11 commit 142a4a5

File tree

10 files changed

+157
-70
lines changed

10 files changed

+157
-70
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?e571e0915b138d14fb6b"></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?f0669afe5bb6afca08b3"></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: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
<v-spacer></v-spacer>
2626

27-
<v-btn :href="links.github" class="mr-2" icon small>
27+
<v-btn :href="links.repo" class="mr-2" icon small target="_blank">
2828
<v-icon>mdi-github</v-icon>
2929
</v-btn>
3030

@@ -79,7 +79,6 @@
7979
:light="drawerOptions.light"
8080
:mini-variant-width="drawerOptions.miniVariantWidth"
8181
:mini-variant="drawerOptions.miniVariant"
82-
:options="drawerOptions"
8382
:overflow="drawerOptions.overflow"
8483
:resizable="drawerOptions.resizable"
8584
:right="drawerOptions.right"
@@ -135,7 +134,7 @@
135134
]"
136135
:style="mainStyles"
137136
>
138-
<Documentation :drawerOptions="drawerOptions" />
137+
<Documentation :drawerOptions="drawerOptions" :links="links" />
139138
</v-main>
140139
</v-app>
141140
</template>
@@ -201,8 +200,11 @@ export default {
201200
},
202201
drawerOffset: '256px',
203202
links: {
204-
github: 'https://github.com/webdevnerdstuff/vuetify-resize-drawer',
203+
github: 'https://github.com/webdevnerdstuff',
205204
npm: 'https://www.npmjs.com/package/vuetify-resize-drawer',
205+
repo: 'https://github.com/webdevnerdstuff/vuetify-resize-drawer',
206+
vue2: 'https://v2.vuejs.org',
207+
vuetify2: 'https://vuetifyjs.com/en',
206208
},
207209
unicornLog: {
208210
styles: [

‎src/components/Documentation.vue

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212

1313
<v-col class="mb-4">
1414
<h1 class="v-heading text-h3 text-sm-h3 mb-4">Vuetify Resize Drawer</h1>
15+
<v-chip color="primary" outlined small>
16+
v {{ componentVersion }}
17+
</v-chip>
1518
</v-col>
1619
</v-row>
1720

@@ -34,13 +37,17 @@
3437
</v-row>
3538

3639
<!-- Description -->
37-
<Description :drawerOptions="drawerOptions" :classes="classes" />
40+
<Description
41+
:drawerOptions="drawerOptions"
42+
:classes="classes"
43+
:links="links"
44+
/>
3845

3946
<!-- Usage -->
40-
<Usage :drawerOptions="drawerOptions" :classes="classes" />
47+
<Usage :drawerOptions="drawerOptions" :classes="classes" :links="links" />
4148

4249
<!-- Props -->
43-
<Props :drawerOptions="drawerOptions" :classes="classes" />
50+
<Props :drawerOptions="drawerOptions" :classes="classes" :links="links" />
4451

4552
<!-- Events -->
4653
<Events :classes="classes" />
@@ -49,7 +56,7 @@
4956
<Slots :classes="classes" />
5057

5158
<!-- SASS Variables -->
52-
<SassVariables :classes="classes" />
59+
<SassVariables :classes="classes" :links="links" />
5360

5461
<!-- Example -->
5562
<Example :classes="classes" />
@@ -58,15 +65,14 @@
5865
<Dependencies :classes="classes" :links="links" />
5966

6067
<!-- License -->
61-
<License :classes="classes" />
68+
<License :classes="classes" :links="links" />
6269

6370
<!-- Legal -->
6471
<Legal :classes="classes" />
6572
</v-container>
6673
</template>
6774

6875
<script>
69-
import { component as VueCodeHighlight } from 'vue-code-highlight';
7076
import Dependencies from '@components/documentation/Dependencies.vue';
7177
import Description from '@components/documentation/Description.vue';
7278
import Events from '@components/documentation/Events.vue';
@@ -77,6 +83,8 @@ import Props from '@components/documentation/Props.vue';
7783
import SassVariables from '@components/documentation/SassVariables.vue';
7884
import Slots from '@components/documentation/Slots.vue';
7985
import Usage from '@components/documentation/Usage.vue';
86+
import { component as VueCodeHighlight } from 'vue-code-highlight';
87+
import packageInfo from '../../package.json';
8088
8189
export default {
8290
name: 'Documentation',
@@ -98,15 +106,14 @@ export default {
98106
type: Object,
99107
required: true,
100108
},
109+
links: {
110+
type: Object,
111+
required: true,
112+
},
101113
},
102114
data: () => ({
115+
componentVersion: packageInfo.version,
103116
drawerOffset: '256px',
104-
links: {
105-
vue2: 'https://v2.vuejs.org/',
106-
vuetify2: 'https://vuetifyjs.com/en/',
107-
github: '',
108-
npm: '',
109-
},
110117
classes: {
111118
h2: 'v-heading text-h4 text-sm-h4 mb-3',
112119
h3: 'v-heading text-h5 text-sm-h5 mb-1',

‎src/components/VResizeDrawer.vue

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -126,10 +126,6 @@ export default baseMixins.extend({
126126
type: String,
127127
default: 'center',
128128
},
129-
options: {
130-
type: Object,
131-
required: true,
132-
},
133129
overflow: Boolean,
134130
resizable: {
135131
type: Boolean,
@@ -245,21 +241,30 @@ export default baseMixins.extend({
245241
return styles;
246242
},
247243
isResizable() {
248-
return this.resizable && !this.isMiniVariant && !this.expandOnHover;
244+
return this.resizable && !this.miniVariant && !this.expandOnHover;
249245
},
250246
},
251247
watch: {
252248
isMouseover: {
253249
handler(val) {
254-
if (this.miniVariant || this.expandOnHover) {
250+
if (this.miniVariant && this.expandOnHover) {
255251
this.resizedWidth = val ? this.width : this.miniVariantWidth;
256252
}
257253
},
258254
deep: true,
259255
},
260-
},
261-
updated() {
262-
console.log('UPDATED', this);
256+
miniVariant: {
257+
handler(val) {
258+
let width = this.width;
259+
260+
if (this.saveWidth) {
261+
width = this.getLocalStorage();
262+
}
263+
264+
this.resizedWidth = !val ? width : this.miniVariantWidth;
265+
},
266+
deep: true,
267+
},
263268
},
264269
mounted() {
265270
this.setup();
@@ -421,7 +426,7 @@ export default baseMixins.extend({
421426
return localStorage.getItem(this.storageName);
422427
},
423428
setLocalStorage(action = 'update') {
424-
if (!this.saveWidth) {
429+
if (!this.saveWidth || this.miniVariant || this.expandOnHover) {
425430
return false;
426431
}
427432
@@ -481,12 +486,18 @@ export default baseMixins.extend({
481486
!this.$el
482487
) return 0;
483488
484-
let intWidth = typeof this.drawerWidth === 'number' ? this.drawerWidth : this.drawerWidth.replace('px', '');
489+
let newWidth = this.drawerWidth;
485490
486491
if (!this.miniVariant && this.expandOnHover) {
487-
intWidth = typeof this.width === 'number' ? this.width : this.width.replace('px', '');
492+
newWidth = this.width;
488493
}
489494
495+
if (this.miniVariant && this.expandOnHover) {
496+
newWidth = this.miniVariantWidth;
497+
}
498+
499+
const intWidth = typeof newWidth === 'number' ? newWidth : newWidth.replace('px', '');
500+
490501
return intWidth;
491502
},
492503
},

‎src/components/documentation/Description.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
The <code>vuetify-resize-drawer</code> component extends the
1313
functionality of the
1414
<a
15-
href="https://vuetifyjs.com/en/components/navigation-drawers/"
15+
:href="`${links.vuetify2}/components/navigation-drawers/`"
1616
target="_blank"
1717
>v-navigation-drawer</a
1818
>
@@ -33,6 +33,10 @@ export default {
3333
type: Object,
3434
required: true,
3535
},
36+
links: {
37+
type: Object,
38+
required: true,
39+
},
3640
},
3741
data: () => ({
3842
}),

‎src/components/documentation/License.vue

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@
88

99
<v-row>
1010
<v-col cols="12">
11-
Copyright &copy; {{ new Date().getFullYear() }} WebDevNerdStuff
11+
Copyright &copy; {{ new Date().getFullYear() }}
12+
<a :href="links.github" target="_blank">WebDevNerdStuff</a>
1213
<br />
1314
Licensed under the
14-
<a
15-
href="https://github.com/webdevnerdstuff/vuetify-resize-drawer/blob/master/LICENSE.md"
16-
>MIT License</a
17-
>.
15+
<a :href="`${links.repo}/blob/master/LICENSE.md`" target="_blank">
16+
MIT License
17+
</a>
1818
</v-col>
1919
</v-row>
2020
</v-col>
@@ -30,6 +30,10 @@ export default {
3030
type: Object,
3131
required: true,
3232
},
33+
links: {
34+
type: Object,
35+
required: true,
36+
},
3337
},
3438
data: () => ({}),
3539
methods: {

0 commit comments

Comments
 (0)