Skip to content

Commit b6d611d

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Changing try props to use dialog
1 parent 9409463 commit b6d611d

File tree

6 files changed

+174
-102
lines changed

6 files changed

+174
-102
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, vuetify, navigation drawer, drawer, resize, resizable, vue, vue2, plugin, log, javascript, magical, webdevnerdstuff, wdns"><meta name="description" content="tbd"><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="tbd"><meta name="og:image:width" content="1200"><meta name="og:image:height" content="630"><meta name="og:description" content="tbd"><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?22d7eea06b96d770c76b"></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, vuetify, navigation drawer, drawer, resize, resizable, vue, vue2, plugin, log, javascript, magical, webdevnerdstuff, wdns"><meta name="description" content="tbd"><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="tbd"><meta name="og:image:width" content="1200"><meta name="og:image:height" content="630"><meta name="og:description" content="tbd"><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?3f93a42557e14dd8409e"></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: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -52,17 +52,19 @@
5252

5353
<Menu :drawerOptions="drawerOptions" />
5454

55-
<template #append>
56-
<v-footer fixed color="primary" dark> Footer Prop </v-footer>
57-
</template>
55+
<!-- <template #append>
56+
<v-footer fixed color="primary" dark></v-footer>
57+
</template> -->
5858
</v-navigation-drawer>
5959

60-
<ResizeDrawer
60+
<v-resize-drawer
6161
name="ResizeDrawer"
6262
clipped
6363
fixed
6464
:options="drawerOptions"
6565
:color="drawerOptions.color"
66+
:dark="drawerOptions.dark"
67+
:light="drawerOptions.light"
6668
:right="drawerOptions.right"
6769
:value="drawer"
6870
@close="drawerClose"
@@ -93,10 +95,10 @@
9395

9496
<Menu :drawerOptions="drawerOptions" />
9597

96-
<template #append>
97-
<v-footer fixed color="primary" dark> Footer Prop </v-footer>
98-
</template>
99-
</ResizeDrawer>
98+
<!-- <template #append>
99+
<v-footer fixed color="primary" dark></v-footer>
100+
</template> -->
101+
</v-resize-drawer>
100102

101103
<!-- ====================================================== Main Container -->
102104
<v-main
@@ -116,7 +118,7 @@
116118
import Vue from 'vue';
117119
import Documentation from './components/Documentation.vue';
118120
import Menu from './components/Menu.vue';
119-
import ResizeDrawer from './components/ResizeDrawer.vue';
121+
import VResizeDrawer from './components/ResizeDrawer.vue';
120122
121123
const EventBus = new Vue();
122124
@@ -133,7 +135,7 @@ export default {
133135
components: {
134136
Documentation,
135137
Menu,
136-
ResizeDrawer,
138+
VResizeDrawer,
137139
},
138140
computed: {
139141
mainStyles() {
@@ -149,6 +151,11 @@ export default {
149151
styles += `padding-left: ${paddingLeftVal} !important;`;
150152
styles += `padding-right: ${paddingRightVal} !important;`;
151153
154+
if (this.drawerOptions.right) {
155+
styles += `padding-left: ${paddingRightVal} !important;`;
156+
styles += `padding-right: ${paddingLeftVal} !important;`;
157+
}
158+
152159
return styles;
153160
},
154161
},
@@ -157,24 +164,17 @@ export default {
157164
drawer: true,
158165
drawerOptions: {
159166
color: undefined,
160-
handle: {
161-
background: {
162-
dark: '#555',
163-
light: '#ccc',
164-
},
165-
},
167+
dark: false,
168+
light: false,
166169
handlePosition: 'center',
167170
overlayColor: '#f00',
168171
overlayOpacity: '100%',
169172
paddingTop: 48,
173+
resizable: true,
170174
right: false,
171175
saveWidth: true,
172176
storageName: 'vuetify-resize-drawer',
173177
width: '256px',
174-
widthDefault: '256px',
175-
// Used for examples //
176-
showCloseIcon: false,
177-
resizable: true,
178178
},
179179
drawerOffset: '256px',
180180
links: {

‎src/components/ResizeDrawer.vue‎

Lines changed: 22 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,12 @@
3838
}"
3939
>
4040
<slot v-if="$scopedSlots.handle" name="handle"></slot>
41-
<div v-else>&raquo;</div>
41+
<div
42+
v-else
43+
:class="{ 'handle-container-handle-flip': drawerOptions.right }"
44+
>
45+
&raquo;
46+
</div>
4247
</div>
4348

4449
<!-- Top Icon -->
@@ -78,28 +83,6 @@
7883
></div>
7984
</div>
8085

81-
<!-- Header Slot -->
82-
<v-row class="text-center" v-if="$scopedSlots.header">
83-
<v-col cols="12">
84-
<!-- Close Icon -->
85-
<slot v-if="$scopedSlots.closeIcon" name="closeIcon"></slot>
86-
87-
<v-icon
88-
v-else-if="drawerOptions.showCloseIcon"
89-
:class="{
90-
'theme--dark': isDark,
91-
'theme--light': !isDark,
92-
'float-end': drawerOptions.right,
93-
'float-start': !drawerOptions.right,
94-
}"
95-
class="close-drawer float-end v-icon"
96-
@click="drawerClose"
97-
>
98-
mdi-close
99-
</v-icon>
100-
</v-col>
101-
</v-row>
102-
10386
<!-- Prepend Slot -->
10487
<template v-if="$scopedSlots.prepend">
10588
<slot name="prepend"></slot>
@@ -155,7 +138,6 @@ export default {
155138
paddingTop: 0,
156139
resizable: true,
157140
saveWidth: true,
158-
showCloseIcon: false,
159141
storageName: 'vuetify-resize-drawer',
160142
width: '256px',
161143
},
@@ -264,11 +246,11 @@ export default {
264246
deep: true,
265247
},
266248
},
267-
mounted() {
268-
this.setOptions();
249+
// mounted() {
250+
// this.setOptions();
269251
270-
console.log('$attrs', this.$attrs);
271-
},
252+
// console.log('$attrs', this.$attrs);
253+
// },
272254
beforeDestroy() {
273255
if (this.drawerOptions.resizable) {
274256
document.removeEventListener('mouseup', this.handleMouseUp, false);
@@ -393,14 +375,21 @@ export default {
393375
// Mounted Event //
394376
setOptions() {
395377
this.drawerOptions = _merge(this.drawerOptions, this.options);
378+
const isMiniVariant = this.$attrs['mini-variant'] !== undefined && this.$attrs['mini-variant'] !== false;
379+
380+
// Disable resize if mini-variant is set //
381+
if (isMiniVariant) {
382+
this.drawerOptions.resizable = false;
383+
this.drawerOptions.width = this.drawerOptions['mini-variant-width'] || undefined;
384+
}
396385
397386
// Set storage name if not defined //
398387
const defaultStorageName = `drawer-${this.name}`;
399388
this.drawerOptions.storageName = this.drawerOptions.storageName || defaultStorageName;
400389
401390
const storageWidth = this.getLocalStorage(this.drawerOptions.storageName);
402391
403-
if (this.drawerOptions.saveWidth && storageWidth) {
392+
if (this.drawerOptions.saveWidth && storageWidth && !isMiniVariant) {
404393
this.defaultWidth = this.drawerOptions.width;
405394
this.drawerOptions.width = this.getLocalStorage(this.drawerOptions.storageName);
406395
}
@@ -570,6 +559,10 @@ export default {
570559
height: auto;
571560
width: 7px;
572561
}
562+
563+
&-handle-flip {
564+
transform: scaleX(-1);
565+
}
573566
}
574567
}
575568
}

‎src/components/documentation/Example.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<pre>
2222
&lt;template>
2323
&lt;v-app id="home">
24-
&lt;ResizeDrawer
24+
&lt;v-resize-drawer
2525
name="ResizeDrawer"
2626
fixed
2727
:color="drawerOptions.color"
@@ -50,7 +50,7 @@
5050
&lt;template #append>
5151
&lt;v-footer>Footer Slot&lt;/v-footer>
5252
&lt;/template>
53-
&lt;/ResizeDrawer>
53+
&lt;/v-resize-drawer>
5454
&lt;/v-app>
5555
&lt;/template></pre
5656
>
@@ -60,12 +60,12 @@
6060
<vue-code-highlight language="js">
6161
<pre>
6262
&lt;script>
63-
import ResizeDrawer from 'vuetify-resize-drawer';
63+
import VResizeDrawer from 'vuetify-resize-drawer';
6464

6565
export default {
6666
name: 'App',
6767
components: {
68-
ResizeDrawer,
68+
VResizeDrawer,
6969
},
7070
data: () => ({
7171
drawer: true,

0 commit comments

Comments
 (0)