Skip to content

Commit c4ba73c

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Update component to be more like v3 version
1 parent 9f3cec4 commit c4ba73c

File tree

13 files changed

+1010
-414
lines changed

13 files changed

+1010
-414
lines changed

‎src/App.vue‎

Lines changed: 90 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
<v-app-bar
55
app
66
class="top-app-bar"
7+
clipped-left
8+
clipped-right
79
color="primary"
810
dark
911
dense
1012
fixed
11-
clipped-left
12-
clipped-right
1313
>
1414
<v-app-bar-nav-icon
1515
class="nav-drawer-btn mr-2"
@@ -24,33 +24,50 @@
2424

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

27-
<v-btn :href="links.repo" class="mr-2" icon small target="_blank">
27+
<v-btn
28+
class="mr-2"
29+
:href="links.repo"
30+
icon
31+
small
32+
target="_blank"
33+
>
2834
<v-icon>mdi-github</v-icon>
2935
</v-btn>
3036

31-
<v-btn :href="links.npm" class="mr-2" icon small target="_blank">
37+
<v-btn
38+
class="mr-2"
39+
:href="links.npm"
40+
icon
41+
small
42+
target="_blank"
43+
>
3244
<v-icon>mdi-npm</v-icon>
3345
</v-btn>
3446

35-
<v-btn class="mr-1" icon small @click="toggleDark">
47+
<v-btn
48+
class="mr-1"
49+
icon
50+
small
51+
@click="toggleDark"
52+
>
3653
<v-icon v-if="!dark">mdi-weather-sunny</v-icon>
3754
<v-icon v-else>mdi-weather-night</v-icon>
3855
</v-btn>
3956
</v-app-bar>
4057

4158
<!-- ====================================================== Navigation Drawer -->
4259
<v-navigation-drawer
43-
app
4460
v-model="drawer"
61+
app
4562
clipped
46-
fixed
47-
:right="!drawerOptions.right"
4863
:color="drawerOptions.color"
64+
:expand-on-hover="drawerOptions.expandOnHover"
65+
fixed
4966
:mini-variant="drawerOptions.miniVariant"
5067
:mini-variant-width="drawerOptions.miniVariantWidth"
51-
:expand-on-hover="drawerOptions.expandOnHover"
52-
:touchless="drawerOptions.touchless"
68+
:right="!drawerOptions.right"
5369
:stateless="drawerOptions.stateless"
70+
:touchless="drawerOptions.touchless"
5471
:width="drawerOptions.width"
5572
>
5673
<v-list-item>
@@ -67,18 +84,21 @@
6784
<Menu :drawerOptions="drawerOptions" />
6885
</v-navigation-drawer>
6986

70-
<v-resize-drawer
87+
<VResizeDrawer
7188
v-model="drawer"
7289
app
7390
clipped
74-
fixed
7591
:color="drawerOptions.color"
7692
:dark="drawerOptions.dark"
7793
:expand-on-hover="drawerOptions.expandOnHover"
94+
fixed
95+
:handle-color="drawerOptions.handleColor"
7896
:handle-position="drawerOptions.handlePosition"
7997
:light="drawerOptions.light"
80-
:mini-variant-width="drawerOptions.miniVariantWidth"
98+
max-width="50%"
99+
min-width="256"
81100
:mini-variant="drawerOptions.miniVariant"
101+
:mini-variant-width="drawerOptions.miniVariantWidth"
82102
:overflow="drawerOptions.overflow"
83103
:resizable="drawerOptions.resizable"
84104
:right="drawerOptions.right"
@@ -123,7 +143,7 @@
123143
>
124144
<v-card-title>Overflow Content</v-card-title>
125145
</v-card>
126-
</v-resize-drawer>
146+
</VResizeDrawer>
127147

128148
<!-- ====================================================== Main Container -->
129149
<v-main
@@ -134,7 +154,10 @@
134154
]"
135155
:style="mainStyles"
136156
>
137-
<Documentation :drawerOptions="drawerOptions" :links="links" />
157+
<Documentation
158+
:drawerOptions="drawerOptions"
159+
:links="links"
160+
/>
138161
</v-main>
139162
</v-app>
140163
</template>
@@ -144,7 +167,6 @@ import Vue from 'vue';
144167
import UnicornLog from 'vue-unicorn-log';
145168
import Documentation from './components/Documentation.vue';
146169
import Menu from './components/Menu.vue';
147-
import VResizeDrawer from './components/VResizeDrawer.vue';
148170
149171
Vue.use(UnicornLog, { disabled: true });
150172
@@ -163,7 +185,6 @@ export default {
163185
components: {
164186
Documentation,
165187
Menu,
166-
VResizeDrawer,
167188
},
168189
computed: {
169190
mainStyles() {
@@ -180,53 +201,50 @@ export default {
180201
data: () => ({
181202
dark: false,
182203
drawer: true,
204+
drawerOffset: '256px',
183205
drawerOptions: {
184206
color: undefined,
185207
dark: false,
208+
expandOnHover: false,
209+
handleColor: 'primary',
186210
handlePosition: 'center',
187211
light: false,
212+
miniVariant: false,
213+
miniVariantWidth: 56,
188214
overflow: false,
189215
resizable: true,
190216
right: false,
217+
saveWidth: true,
191218
stateless: false,
219+
storageName: 'v-resize-drawer-width',
192220
touchless: false,
193221
width: undefined,
194-
195-
// storage //
196-
saveWidth: true,
197-
storageName: 'v-resize-drawer-width',
198-
199-
// mini-variant //
200-
expandOnHover: false,
201-
miniVariant: false,
202-
miniVariantWidth: 56,
203222
},
204-
drawerOffset: '256px',
205223
links: {
206224
github: 'https://github.com/webdevnerdstuff',
207225
npm: 'https://www.npmjs.com/package/vuetify-resize-drawer',
208226
pnpm: 'https://pnpm.io/',
209227
repo: 'https://github.com/webdevnerdstuff/vuetify-resize-drawer',
210228
vue2: 'https://v2.vuejs.org',
211-
vuetify2: 'https://vuetifyjs.com/en',
229+
vuetify2: 'https://v2.vuetifyjs.com/en',
212230
},
231+
mainContainerEl: null,
213232
unicornLog: {
233+
prefix: '[App.vue]',
214234
styles: [
215235
'background: black',
216236
'color: magenta',
217237
'padding: 5px',
218238
],
219-
prefix: '[App.vue]',
220239
},
221-
mainContainerEl: null,
222240
}),
223241
created() {
224242
this.$bus.$on('updateOptions', (options) => {
225243
this.$unicornLog({
226-
text: 'updateOptions',
227-
styles: this.unicornLog.styles,
228244
logPrefix: this.unicornLog.prefix,
229245
objects: options,
246+
styles: this.unicornLog.styles,
247+
text: 'updateOptions',
230248
});
231249
232250
this.drawerOptions = options;
@@ -237,26 +255,20 @@ export default {
237255
this.getDarkLocalStorage();
238256
},
239257
methods: {
240-
toggleDark() {
241-
this.dark = !this.dark;
242-
this.$vuetify.theme.dark = this.dark;
243-
this.setDarkLocalStorage(this.dark);
244-
},
245-
246258
drawerClose(val) {
247259
this.$unicornLog({
248-
text: `drawerClose: ${val}`,
249-
styles: this.unicornLog.styles,
250260
logPrefix: this.unicornLog.prefix,
261+
styles: this.unicornLog.styles,
262+
text: `drawerClose: ${val}`,
251263
});
252264
253265
this.drawer = false;
254266
},
255267
drawerInput(val) {
256268
this.$unicornLog({
257-
text: `drawerInput: ${val}`,
258-
styles: this.unicornLog.styles,
259269
logPrefix: this.unicornLog.prefix,
270+
styles: this.unicornLog.styles,
271+
text: `drawerInput: ${val}`,
260272
});
261273
262274
if (val) {
@@ -269,63 +281,68 @@ export default {
269281
},
270282
drawerTransitionend(evt) {
271283
this.$unicornLog({
272-
text: 'drawerTransitionend',
273-
styles: this.unicornLog.styles,
274284
logPrefix: this.unicornLog.prefix,
275285
object: evt,
286+
styles: this.unicornLog.styles,
287+
text: 'drawerTransitionend',
276288
});
277289
},
290+
getDarkLocalStorage() {
291+
const isDark = localStorage.getItem('vuetify-resize-drawer-dark');
292+
293+
this.dark = isDark === 'true';
294+
this.$vuetify.theme.dark = this.dark;
295+
},
296+
getLocalStorage() {
297+
this.updateDrawerOffset(localStorage.getItem(this.drawerOptions.storageName) || this.drawerOffset);
298+
},
278299
handleClick(evt) {
279300
this.$unicornLog({
280-
text: 'handleClick',
281-
styles: this.unicornLog.styles,
282301
logPrefix: this.unicornLog.prefix,
283302
object: evt,
303+
styles: this.unicornLog.styles,
304+
text: 'handleClick',
284305
});
285306
},
286307
handleDoubleClick(evt) {
287308
this.$unicornLog({
288-
text: 'handleDoubleClick',
289-
styles: this.unicornLog.styles,
290309
logPrefix: this.unicornLog.prefix,
291310
object: evt,
311+
styles: this.unicornLog.styles,
312+
text: 'handleDoubleClick',
292313
});
293314
294315
this.updateDrawerOffset(evt.offsetWidth);
295316
},
317+
handleDrag(evt) {
318+
this.updateDrawerOffset(evt.offsetWidth);
319+
},
296320
handleMousedown(evt) {
297321
this.$unicornLog({
298-
text: 'handleMousedown',
299-
styles: this.unicornLog.styles,
300322
logPrefix: this.unicornLog.prefix,
301323
object: evt,
324+
styles: this.unicornLog.styles,
325+
text: 'handleMousedown',
302326
});
303327
},
304328
handleMouseup(evt) {
305329
this.$unicornLog({
306-
text: 'handleMouseup',
307-
styles: this.unicornLog.styles,
308330
logPrefix: this.unicornLog.prefix,
309331
object: evt,
332+
styles: this.unicornLog.styles,
333+
text: 'handleMouseup',
310334
});
311335
312336
this.updateDrawerOffset(evt.offsetWidth);
313337
},
314-
handleDrag(evt) {
315-
this.updateDrawerOffset(evt.offsetWidth);
316-
},
317-
getLocalStorage() {
318-
this.updateDrawerOffset(localStorage.getItem(this.drawerOptions.storageName) || this.drawerOffset);
319-
},
320-
getDarkLocalStorage() {
321-
const isDark = localStorage.getItem('vuetify-resize-drawer-dark');
322-
323-
this.dark = isDark === 'true';
324-
this.$vuetify.theme.dark = this.dark;
325-
},
326338
setDarkLocalStorage(val) {
327339
localStorage.setItem('vuetify-resize-drawer-dark', val);
328340
},
341+
toggleDark() {
342+
this.dark = !this.dark;
343+
this.$vuetify.theme.dark = this.dark;
344+
this.setDarkLocalStorage(this.dark);
345+
},
329346
updateDrawerOffset(val) {
330347
this.drawerOffset = val;
331348
},
@@ -334,8 +351,7 @@ export default {
334351
</script>
335352

336353
<style lang="scss">
337-
@import 'prism-themes/themes/prism-night-owl.css';
338-
@import 'vue-code-highlight/themes/window.css';
354+
@import 'vue-code-highlight/themes/prism-tomorrow.css';
339355
340356
html {
341357
scroll-behavior: smooth;
@@ -377,6 +393,14 @@ html {
377393
}
378394
}
379395
396+
code {
397+
&.language-html,
398+
&.language-javascript,
399+
&.language-js {
400+
background-color: transparent !important;
401+
}
402+
}
403+
380404
.overflow-content {
381405
right: -315px;
382406
position: fixed;

‎src/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Import vue component
2-
import VResizeDrawer from './components/VResizeDrawer.vue';
2+
import VResizeDrawer from './plugin/VResizeDrawer.vue';
33

44
// Declare install function executed by Vue.use()
55
export function install(Vue) {

‎src/libraries/fontawesome.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Vue from 'vue';
2+
import { library, dom } from '@fortawesome/fontawesome-svg-core';
3+
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
4+
import { fab } from '@fortawesome/free-brands-svg-icons';
5+
import { far } from '@fortawesome/free-regular-svg-icons';
6+
import { fas } from '@fortawesome/free-solid-svg-icons';
7+
8+
dom.watch();
9+
10+
Vue.component('FaIcon', FontAwesomeIcon);
11+
Vue.component('VIcon', FontAwesomeIcon);
12+
13+
library.add(
14+
fab,
15+
far,
16+
fas,
17+
);
18+
19+
export default {};

‎src/main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import Vue from 'vue';
22
import vuetify from './plugins/vuetify';
33
import App from './App.vue';
4+
import VResizeDrawer from './index';
45

56
Vue.config.productionTip = false;
7+
Vue.component('VResizeDrawer', VResizeDrawer);
68

79
new Vue({
810
vuetify,

0 commit comments

Comments
 (0)