Skip to content

Commit 862ed65

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Adding src files
1 parent 4c9115f commit 862ed65

File tree

13 files changed

+1479
-0
lines changed

13 files changed

+1479
-0
lines changed

‎src/App.vue‎

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
<template>
2+
<v-app id="home">
3+
<!-- ====================================================== App Bar -->
4+
<v-app-bar app class="top-app-bar" color="primary" dark dense fixed>
5+
<v-app-bar-nav-icon
6+
app
7+
class="nav-drawer-btn mr-2"
8+
height="32"
9+
width="32"
10+
@click.stop="
11+
drawerOptions.open = !drawerOptions.open;
12+
drawer = !drawer;
13+
"
14+
clipped-left
15+
clipped-right
16+
>
17+
<v-icon>mdi-menu</v-icon>
18+
</v-app-bar-nav-icon>
19+
20+
<div class="site-title">Vuetify Resize Drawer</div>
21+
22+
<v-spacer></v-spacer>
23+
</v-app-bar>
24+
25+
<!-- ====================================================== Navigation Drawer -->
26+
<v-navigation-drawer
27+
clipped
28+
v-model="drawer"
29+
right
30+
fixed
31+
:style="`padding-top: ${drawerOptions.paddingTop}`"
32+
>
33+
<v-list-item>
34+
<v-list-item-content>
35+
<v-list-item-title class="text-h6">Default Drawer</v-list-item-title>
36+
<v-list-item-subtitle>
37+
Stuck in the middle with you
38+
</v-list-item-subtitle>
39+
</v-list-item-content>
40+
</v-list-item>
41+
42+
<v-divider></v-divider>
43+
44+
<Menu />
45+
</v-navigation-drawer>
46+
47+
<!-- @update="logEvent($event, 'update')" -->
48+
<ResizeDrawer
49+
name="ResizeDrawer"
50+
clipped
51+
:options="drawerOptions"
52+
@close="drawerClose"
53+
@handle:click="logEvent($event, 'handle:click')"
54+
@handle:dblclick="handleDoubleClick"
55+
@handle:drag="handleDrag"
56+
@handle:mousedown="logEvent($event, 'handle:mousedown')"
57+
@handle:mouseup="handleMouseup"
58+
@input="drawerInput"
59+
@transitionend="drawerTransitionend"
60+
>
61+
<template #handle>
62+
<div>&raquo;</div>
63+
</template>
64+
65+
<template #prepend>
66+
<header>
67+
<v-list-item>
68+
<v-list-item-content>
69+
<v-list-item-title class="text-h6">
70+
Resize Drawer
71+
</v-list-item-title>
72+
<v-list-item-subtitle>
73+
I'm as free as a bird now
74+
</v-list-item-subtitle>
75+
</v-list-item-content>
76+
</v-list-item>
77+
78+
<v-divider></v-divider>
79+
</header>
80+
</template>
81+
82+
<Menu />
83+
84+
<template #append>
85+
<v-footer fixed color="primary" dark> Footer Prop </v-footer>
86+
</template>
87+
</ResizeDrawer>
88+
89+
<!-- ====================================================== Main Container -->
90+
<v-main
91+
:class="[
92+
{
93+
'drawer-open': drawer || drawerOptions.open,
94+
},
95+
]"
96+
:style="mainStyles"
97+
>
98+
<Documentation :drawerOptions="drawerOptions" />
99+
</v-main>
100+
</v-app>
101+
</template>
102+
103+
<script>
104+
import Documentation from './components/Documentation.vue';
105+
import Menu from './components/Menu.vue';
106+
import ResizeDrawer from './components/ResizeDrawer.vue';
107+
108+
export default {
109+
name: 'App',
110+
components: {
111+
Documentation,
112+
Menu,
113+
ResizeDrawer,
114+
},
115+
computed: {
116+
mainStyles() {
117+
const options = this.drawerOptions;
118+
let styles = '';
119+
120+
styles += `padding-left: ${this.drawerOffset} !important;`;
121+
styles += `padding-right: ${options.open ? '256px' : '0'} !important;`;
122+
123+
return styles;
124+
},
125+
},
126+
data: () => ({
127+
drawer: true,
128+
drawerOptions: {
129+
absolute: false,
130+
bottom: true,
131+
fixed: true,
132+
handle: {
133+
background: {
134+
dark: '#555',
135+
light: '#ccc',
136+
},
137+
position: 'center',
138+
},
139+
icon: '',
140+
iconColor: '',
141+
open: true,
142+
overlayColor: '',
143+
overlayOpacity: '',
144+
paddingTop: '48px',
145+
position: 'left',
146+
temporary: false,
147+
src: '',
148+
storageName: 'resize-drawer',
149+
tag: 'nav',
150+
title: '',
151+
width: '256px',
152+
widthDefault: '256px',
153+
// mini: true,
154+
},
155+
drawerOffset: '256px',
156+
}),
157+
created() {
158+
159+
},
160+
mounted() {
161+
this.getLocalStorage();
162+
},
163+
methods: {
164+
getLocalStorage(name = this.drawerOptions.storageName) {
165+
this.drawerOffset = localStorage.getItem(`vrd-${name}`) || this.drawerOffset;
166+
},
167+
logEvent(el, name) {
168+
console.log('----------------------------------- logEvent', { name, el });
169+
},
170+
drawerClose(val) {
171+
console.log('----------------------------------- drawerClose', { val });
172+
this.drawerOptions.open = false;
173+
this.drawer = false;
174+
},
175+
drawerInput(val) {
176+
console.log('----------------------------------- drawerInput', { val });
177+
178+
if (val) {
179+
this.getLocalStorage();
180+
return false;
181+
}
182+
183+
this.drawerOffset = 0;
184+
return false;
185+
},
186+
drawerTransitionend(evt) {
187+
console.log('----------------------------------- drawerTransitionend', { evt });
188+
},
189+
handleDoubleClick(evt) {
190+
console.log('----------------------------------- handleDoubleClick', { evt });
191+
this.drawerOffset = evt.offsetWidth;
192+
},
193+
handleMouseup(evt) {
194+
console.log('----------------------------------- handleMouseup', { evt });
195+
this.drawerOffset = evt.offsetWidth;
196+
},
197+
handleDrag(evt) {
198+
this.drawerOffset = evt.offsetWidth;
199+
},
200+
},
201+
};
202+
</script>
203+
204+
<style lang="scss" scoped>
205+
html {
206+
scroll-behavior: smooth;
207+
scroll-padding-top: 70px;
208+
}
209+
210+
.top-app-bar {
211+
z-index: 99 !important;
212+
213+
.nav-drawer-btn {
214+
margin-left: -4px !important;
215+
216+
.nav-drawer-icon {
217+
height: 18px;
218+
width: 18px;
219+
}
220+
}
221+
222+
.site-title {
223+
font-family: 'Roboto', sans-serif !important;
224+
}
225+
}
226+
227+
.v-divider {
228+
margin: 0;
229+
}
230+
231+
.drawer-open {
232+
&.mini {
233+
margin-left: 56px !important;
234+
}
235+
}
236+
</style>

‎src/components/Documentation.vue‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<template>
2+
<v-container class="px-10">
3+
<v-row class="text-center">
4+
<v-col cols="12">
5+
<v-img
6+
src="images/vuetify-logo-dark.svg"
7+
class="my-3"
8+
contain
9+
height="200"
10+
/>
11+
</v-col>
12+
13+
<v-col class="mb-4">
14+
<h1 class="v-heading text-h3 text-sm-h3 mb-4">Vuetify Resize Drawer</h1>
15+
</v-col>
16+
</v-row>
17+
18+
<!-- Installation -->
19+
<v-row id="installation">
20+
<v-col class="mb-5" cols="12">
21+
<h2 class="v-heading text-h4 text-sm-h4 mb-3">Installation</h2>
22+
23+
<v-row>
24+
<v-col cols="12">
25+
<vue-code-highlight language="js">
26+
<vue-code-highlight language="shell">
27+
<pre>
28+
npm i vuetify-resize-drawer
29+
</pre
30+
>
31+
</vue-code-highlight>
32+
</vue-code-highlight>
33+
</v-col>
34+
</v-row>
35+
</v-col>
36+
</v-row>
37+
38+
<!-- TBD -->
39+
<v-row>
40+
<v-col class="mb-5" cols="12" id="section-a">
41+
<h2 class="v-heading text-h4 text-sm-h4 mb-3">Section A</h2>
42+
43+
<v-row>
44+
<v-col cols="12"> Stuff </v-col>
45+
</v-row>
46+
</v-col>
47+
</v-row>
48+
49+
<!-- Props -->
50+
<Props />
51+
52+
<!-- Events -->
53+
<Events />
54+
55+
<!-- Slots -->
56+
<Slots />
57+
58+
<!-- Dependencies -->
59+
<v-row>
60+
<v-col class="mb-5" cols="12" id="dependencies">
61+
<h2 class="v-heading text-h4 text-sm-h4 mb-3">Dependencies</h2>
62+
63+
<v-row>
64+
<v-col cols="12">
65+
<a :href="links.vuetify2" target="_blank">Vuetify v2</a>
66+
<br />
67+
<a :href="links.vue2" target="_blank">Vue 2</a>
68+
</v-col>
69+
</v-row>
70+
</v-col>
71+
</v-row>
72+
73+
<!-- Change Log -->
74+
<v-row>
75+
<v-col class="mb-5" cols="12" id="change-log">
76+
<h2 class="v-heading text-h4 text-sm-h4 mb-3">Change Log</h2>
77+
78+
<v-row>
79+
<v-col cols="12"> Stuff </v-col>
80+
</v-row>
81+
</v-col>
82+
</v-row>
83+
84+
<!-- License -->
85+
<v-row>
86+
<v-col class="mb-5" cols="12" id="license">
87+
<h2 class="v-heading text-h4 text-sm-h4 mb-3">License</h2>
88+
89+
<v-row>
90+
<v-col cols="12"> Stuff </v-col>
91+
</v-row>
92+
</v-col>
93+
</v-row>
94+
</v-container>
95+
</template>
96+
97+
<script>
98+
import { component as VueCodeHighlight } from 'vue-code-highlight';
99+
import Events from '@components/documentation/Events.vue';
100+
import Props from '@components/documentation/Props.vue';
101+
import Slots from '@components/documentation/Slots.vue';
102+
103+
export default {
104+
name: 'Documentation',
105+
components: {
106+
Events,
107+
Props,
108+
Slots,
109+
VueCodeHighlight,
110+
},
111+
props: {
112+
drawerOptions: {
113+
required: true,
114+
},
115+
},
116+
data: () => ({
117+
drawerOffset: '256px',
118+
links: {
119+
vue2: 'https://v2.vuejs.org/',
120+
vuetify2: 'https://vuetifyjs.com/en/',
121+
github: '',
122+
npm: '',
123+
},
124+
}),
125+
created() {
126+
127+
},
128+
};
129+
</script>
130+
131+
<style lang="scss">
132+
@import 'vue-code-highlight/themes/prism-tomorrow.css';
133+
@import 'vue-code-highlight/themes/window.css';
134+
</style>

0 commit comments

Comments
 (0)