Skip to content

Commit 7286f73

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Updated docs
1 parent b61d53c commit 7286f73

File tree

12 files changed

+605
-297
lines changed

12 files changed

+605
-297
lines changed

‎src/components/Documentation.vue

Lines changed: 47 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,53 @@
33
<v-row class="text-center">
44
<v-col cols="12">
55
<v-img
6-
src="images/vuetify-logo-light-atom.svg"
76
class="my-3"
87
contain
98
height="200"
9+
src="images/vuetify-logo-light-atom.svg"
1010
/>
1111
</v-col>
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>
15+
<v-chip
16+
color="primary"
17+
outlined
18+
small
19+
>
1620
v{{ componentVersion }}
1721
</v-chip>
1822
</v-col>
1923
</v-row>
2024

2125
<!-- Installation -->
2226
<v-row id="installation">
23-
<v-col class="mb-5" cols="12">
27+
<v-col
28+
class="mb-5"
29+
cols="12"
30+
>
2431
<h2 :class="classes.h2">
25-
<a href="#installation" :class="classes.headerA">#</a>
32+
<a
33+
:class="classes.headerA"
34+
href="#installation"
35+
>#</a>
2636
Installation
2737
</h2>
2838

2939
<v-row>
3040
<v-col cols="12">
31-
Using npm:
41+
Using <a
42+
:href="links.pnpm"
43+
target="_blank"
44+
>pnpm</a>:
3245
<vue-code-highlight language="bash">
33-
<pre>npm i vuetify-resize-drawer</pre>
46+
<pre>pnpm add vuetify-resize-drawer</pre>
3447
</vue-code-highlight>
3548
</v-col>
3649
<v-col cols="12">
37-
Using <a :href="links.pnpm" target="_blank">pnpm</a>:
50+
Using npm:
3851
<vue-code-highlight language="bash">
39-
<pre>pnpm add vuetify-resize-drawer</pre>
52+
<pre>npm i vuetify-resize-drawer</pre>
4053
</vue-code-highlight>
4154
</v-col>
4255
</v-row>
@@ -45,16 +58,24 @@
4558

4659
<!-- Description -->
4760
<Description
48-
:drawerOptions="drawerOptions"
4961
:classes="classes"
62+
:drawerOptions="drawerOptions"
5063
:links="links"
5164
/>
5265

5366
<!-- Usage -->
54-
<Usage :drawerOptions="drawerOptions" :classes="classes" :links="links" />
67+
<Usage
68+
:classes="classes"
69+
:drawerOptions="drawerOptions"
70+
:links="links"
71+
/>
5572

5673
<!-- Props -->
57-
<Props :drawerOptions="drawerOptions" :classes="classes" :links="links" />
74+
<Props
75+
:classes="classes"
76+
:drawerOptions="drawerOptions"
77+
:links="links"
78+
/>
5879

5980
<!-- Events -->
6081
<Events :classes="classes" />
@@ -63,16 +84,25 @@
6384
<Slots :classes="classes" />
6485

6586
<!-- SASS Variables -->
66-
<SassVariables :classes="classes" :links="links" />
87+
<SassVariables
88+
:classes="classes"
89+
:links="links"
90+
/>
6791

6892
<!-- Example -->
6993
<Example :classes="classes" />
7094

7195
<!-- Dependencies -->
72-
<Dependencies :classes="classes" :links="links" />
96+
<Dependencies
97+
:classes="classes"
98+
:links="links"
99+
/>
73100

74101
<!-- License -->
75-
<License :classes="classes" :links="links" />
102+
<License
103+
:classes="classes"
104+
:links="links"
105+
/>
76106

77107
<!-- Legal -->
78108
<Legal :classes="classes" />
@@ -119,14 +149,14 @@ export default {
119149
},
120150
},
121151
data: () => ({
122-
componentVersion: packageInfo.version,
123-
drawerOffset: '256px',
124152
classes: {
153+
appLink: 'app-link text-decoration-none primary--text font-weight-medium d-inline-block font-weight-bold',
125154
h2: 'v-heading text-h4 text-sm-h4 mb-3',
126155
h3: 'v-heading text-h5 text-sm-h5 mb-1',
127156
headerA: 'text-decoration-none text-right text-md-left',
128-
appLink: 'app-link text-decoration-none primary--text font-weight-medium d-inline-block font-weight-bold',
129157
},
158+
componentVersion: packageInfo.version,
159+
drawerOffset: '256px',
130160
}),
131161
};
132162
</script>

‎src/components/Menu.vue

Lines changed: 71 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
<template>
22
<div>
3-
<v-list dense nav>
3+
<v-list
4+
dense
5+
nav
6+
>
47
<v-list-item-group :color="drawerOptions.color ? 'white' : 'primary'">
58
<v-list-item
69
v-for="item in items"
710
:key="item.title"
8-
link
9-
:color="drawerOptions.color ? 'white' : 'primary'"
10-
:href="item.href"
1111
:class="{
1212
'v-list-item--active': active === item.href,
1313
}"
14+
:color="drawerOptions.color ? 'white' : 'primary'"
15+
:href="item.href"
16+
link
1417
>
1518
<v-list-item-icon>
1619
<v-icon>{{ item.icon }}</v-icon>
@@ -37,17 +40,66 @@ export default {
3740
data: () => ({
3841
active: '#home',
3942
items: [
40-
{ title: 'Home', icon: 'mdi-home', href: '#home' },
41-
{ title: 'Installation', icon: 'mdi-plus-thick', href: '#installation' },
42-
{ title: 'Description', icon: 'mdi-information-outline', href: '#description' },
43-
{ title: 'Props', icon: 'mdi-cog', href: '#props' },
44-
{ title: 'Events', icon: 'mdi-calendar-star', href: '#events' },
45-
{ title: 'Slots', icon: 'mdi-slot-machine', href: '#slots' },
46-
{ title: 'SASS Variables', icon: 'mdi-sass', href: '#sass-variables' },
47-
{ title: 'Example', icon: 'mdi-code-json', href: '#example' },
48-
{ title: 'Dependencies', icon: 'mdi-asterisk-circle-outline', href: '#dependencies' },
49-
{ title: 'License', icon: 'mdi-card-account-details-outline', href: '#license' },
50-
{ title: 'Legal', icon: 'mdi-scale-balance', href: '#legal' },
43+
{
44+
href: '#home',
45+
icon: 'mdi-home',
46+
title: 'Home',
47+
},
48+
{
49+
href: '#installation',
50+
icon: 'mdi-plus-thick',
51+
title: 'Installation',
52+
},
53+
{
54+
href: '#description',
55+
icon: 'mdi-information-outline',
56+
title: 'Description',
57+
},
58+
{
59+
href: '#usage',
60+
icon: 'mdi-power-plug-outline',
61+
title: 'Usage',
62+
},
63+
{
64+
href: '#props',
65+
icon: 'mdi-cog',
66+
title: 'Props',
67+
},
68+
{
69+
href: '#events',
70+
icon: 'mdi-calendar-star',
71+
title: 'Events',
72+
},
73+
{
74+
href: '#slots',
75+
icon: 'mdi-slot-machine',
76+
title: 'Slots',
77+
},
78+
{
79+
href: '#sass-variables',
80+
icon: 'mdi-sass',
81+
title: 'SASS Variables',
82+
},
83+
{
84+
href: '#example',
85+
icon: 'mdi-code-json',
86+
title: 'Example',
87+
},
88+
{
89+
href: '#dependencies',
90+
icon: 'mdi-asterisk-circle-outline',
91+
title: 'Dependencies',
92+
},
93+
{
94+
href: '#license',
95+
icon: 'mdi-card-account-details-outline',
96+
title: 'License',
97+
},
98+
{
99+
href: '#legal',
100+
icon: 'mdi-scale-balance',
101+
title: 'Legal',
102+
},
51103
],
52104
}),
53105
mounted() {
@@ -70,7 +122,10 @@ export default {
70122
this.active = hash;
71123
72124
window.location.hash = hash;
73-
window.scrollTo({ top: y, behavior: 'smooth' });
125+
window.scrollTo({
126+
behavior: 'smooth',
127+
top: y,
128+
});
74129
});
75130
});
76131
},

‎src/components/documentation/Dependencies.vue

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,29 @@
11
<template>
22
<v-row>
3-
<v-col class="mb-5" cols="12" id="dependencies">
3+
<v-col
4+
id="dependencies"
5+
class="mb-5"
6+
cols="12"
7+
>
48
<h2 :class="classes.h2">
5-
<a href="#dependencies" :class="classes.headerA">#</a>
9+
<a
10+
:class="classes.headerA"
11+
href="#dependencies"
12+
>#</a>
613
Dependencies
714
</h2>
815

916
<v-row>
1017
<v-col cols="12">
11-
<a :href="links.vuetify2" target="_blank">Vuetify v2</a>
18+
<a
19+
:href="links.vuetify2"
20+
target="_blank"
21+
>Vuetify v2</a>
1222
<br />
13-
<a :href="links.vue2" target="_blank">Vue 2</a>
23+
<a
24+
:href="links.vue2"
25+
target="_blank"
26+
>Vue 2</a>
1427
</v-col>
1528
</v-row>
1629
</v-col>
@@ -38,4 +51,5 @@ export default {
3851
};
3952
</script>
4053

41-
<style lang="scss"></style>
54+
<style lang="scss">
55+
</style>

‎src/components/documentation/Description.vue

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
<template>
22
<v-row>
3-
<v-col class="mb-5" cols="12" id="description">
3+
<v-col
4+
id="description"
5+
class="mb-5"
6+
cols="12"
7+
>
48
<h2 :class="classes.h2">
5-
<a href="#description" :class="classes.headerA">#</a>
9+
<a
10+
:class="classes.headerA"
11+
href="#description"
12+
>#</a>
613
Description
714
</h2>
815

@@ -14,8 +21,7 @@
1421
<a
1522
:href="`${links.vuetify2}/components/navigation-drawers/`"
1623
target="_blank"
17-
>v-navigation-drawer</a
18-
>
24+
>v-navigation-drawer</a>
1925
so that it is resizable by the user.
2026
</p>
2127
</v-col>
@@ -46,4 +52,5 @@ export default {
4652
};
4753
</script>
4854

49-
<style lang="scss"></style>
55+
<style lang="scss">
56+
</style>

0 commit comments

Comments
 (0)