Skip to content

Commit be6b6d0

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Updating docs
1 parent 3323ac3 commit be6b6d0

File tree

17 files changed

+1329
-861
lines changed

17 files changed

+1329
-861
lines changed

‎src/App.vue‎

Lines changed: 141 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,17 +31,157 @@ import MenuComponent from './documentation/MenuComponent.vue';
3131
import DocsComponent from './documentation/DocsComponent.vue';
3232
import { useCoreStore } from './stores/index';
3333
34-
3534
const store = useCoreStore();
35+
3636
const drawer = ref(true);
3737
const drawerOptions = ref({
3838
absolute: false,
3939
color: '',
4040
elevation: 10,
4141
});
42+
const links = store.links;
43+
44+
const menuItems = reactive([
45+
{
46+
href: '#home',
47+
icon: 'mdi:mdi-home',
48+
title: 'Home',
49+
},
50+
{
51+
href: '#installation',
52+
icon: 'mdi:mdi-plus-thick',
53+
title: 'Installation',
54+
},
55+
{
56+
href: '#description',
57+
icon: 'mdi:mdi-information-outline',
58+
title: 'Description',
59+
},
60+
{
61+
href: '#props',
62+
icon: 'mdi:mdi-cog',
63+
items: [
64+
{
65+
href: '#props',
66+
icon: 'mdi:mdi-checkbox-outline',
67+
key: 'shared-props',
68+
title: 'Props',
69+
},
70+
{
71+
href: '#props-shared',
72+
icon: 'mdi:mdi-checkbox-outline',
73+
key: 'shared-props',
74+
title: 'Shared Props',
75+
},
76+
],
77+
title: 'Props',
78+
},
79+
{
80+
href: '#components',
81+
icon: 'mdi:mdi-cog',
82+
items: [
83+
{
84+
icon: 'mdi:mdi-github',
85+
key: 'vuetify-github',
86+
link: links.vuetifyGithub,
87+
title: 'Github',
88+
},
89+
{
90+
key: 'vuetify',
91+
link: `${links.vuetify}en/components/all/`,
92+
title: 'Components',
93+
},
94+
{
95+
href: '#components-props',
96+
icon: 'mdi:mdi-checkbox-outline',
97+
key: 'shared-props',
98+
title: 'Props',
99+
},
100+
{
101+
href: '#components-shared-props',
102+
icon: 'mdi:mdi-checkbox-outline',
103+
key: 'shared-props',
104+
title: 'Shared Props',
105+
},
106+
{
107+
href: '#components-v-inline-checkbox',
108+
icon: 'mdi:mdi-checkbox-outline',
109+
key: 'v-checkbox',
110+
link: `${links.vuetify}en/api/v-checkbox/`,
111+
title: 'VCheckbox',
112+
},
113+
{
114+
href: '#components-v-inline-select',
115+
icon: 'mdi:mdi-format-list-bulleted',
116+
key: 'v-select',
117+
link: `${links.vuetify}en/api/v-select/`,
118+
title: 'VSelect',
119+
},
120+
{
121+
href: '#components-v-inline-switch',
122+
icon: 'mdi:mdi-toggle-switch-off-outline',
123+
key: 'v-switch',
124+
link: `${links.vuetify}en/api/v-switch/`,
125+
title: 'VSwitch',
126+
},
127+
{
128+
href: '#components-v-inline-textarea',
129+
icon: 'mdi:mdi-text-long',
130+
key: 'v-textarea',
131+
link: `${links.vuetify}en/api/v-textarea/`,
132+
title: 'VTextarea',
133+
},
134+
{
135+
href: '#components-v-inline-textfield',
136+
icon: 'mdi:mdi-minus',
137+
key: 'v-text-field',
138+
link: `${links.vuetify}en/api/v-text-field/`,
139+
title: 'VTextField',
140+
},
141+
],
142+
key: 'components',
143+
title: 'Components',
144+
},
145+
{
146+
href: '#events',
147+
icon: 'mdi:mdi-calendar-star',
148+
title: 'Events',
149+
},
150+
{
151+
href: '#slots',
152+
icon: 'mdi:mdi-slot-machine',
153+
title: 'Slots',
154+
},
155+
{
156+
href: '#sass-variables',
157+
icon: 'mdi:mdi-sass',
158+
title: 'SASS Variables',
159+
},
160+
{
161+
href: '#example',
162+
icon: 'mdi:mdi-code-json',
163+
title: 'Example',
164+
},
165+
{
166+
href: '#dependencies',
167+
icon: 'mdi:mdi-asterisk-circle-outline',
168+
title: 'Dependencies',
169+
},
170+
{
171+
href: '#license',
172+
icon: 'mdi:mdi-card-account-details-outline',
173+
title: 'License',
174+
},
175+
{
176+
href: '#legal',
177+
icon: 'mdi:mdi-scale-balance',
178+
title: 'Legal',
179+
},
180+
]);
42181
43182
provide('drawerOptions', drawerOptions);
44183
provide('links', store.links);
184+
provide('menuItems', menuItems);
45185
46186
function toggleDrawer() {
47187
drawer.value = !drawer.value;

‎src/documentation/DocsComponent.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,9 @@
7575
<!-- Props -->
7676
<PropsComponent />
7777

78+
<!-- Components -->
79+
<ComponentsSection />
80+
7881
<!-- Events -->
7982
<EventsComponent />
8083

@@ -102,6 +105,7 @@
102105
import { inject, provide, reactive, ref } from 'vue';
103106
import packageInfo from '../../package.json';
104107
import {
108+
ComponentsSection,
105109
DependenciesComponent,
106110
DescriptionComponent,
107111
EventsComponent,

‎src/documentation/MenuComponent.vue‎

Lines changed: 63 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,65 @@
11
<template>
2-
<v-list :color="drawerOptions.color ? 'white' : 'primary'">
3-
<v-list-item
4-
v-for="item in menuItems"
5-
:key="item.title"
6-
:class="{
7-
'v-list-item--active': active === item.href,
8-
}"
9-
:color="drawerOptions.color ? 'white' : 'primary'"
10-
:href="item.href"
11-
link
12-
:title="item.title"
13-
>
14-
<template v-slot:prepend>
15-
<v-icon :icon="item.icon"></v-icon>
16-
</template>
17-
</v-list-item>
2+
<v-list
3+
:color="drawerOptions.color ? 'white' : 'primary'"
4+
density="compact"
5+
>
6+
<template v-for="item in menuItems">
7+
<v-list-group
8+
v-if="item.items"
9+
:key="item.items"
10+
:value="item.title"
11+
>
12+
<template v-slot:activator="{ props }">
13+
<v-list-item
14+
density="compact"
15+
v-bind="props"
16+
:prepend-icon="item.icon"
17+
:title="item.title"
18+
></v-list-item>
19+
</template>
20+
21+
<template v-for="subItem in item.items">
22+
<v-list-item
23+
v-if="subItem.href"
24+
:key="subItem.title"
25+
class="sub-items"
26+
:href="subItem.href"
27+
:prepend-icon="subItem.icon"
28+
>
29+
<div v-html="subItem.title"></div>
30+
</v-list-item>
31+
</template>
32+
</v-list-group>
33+
34+
<v-list-item
35+
v-else
36+
:key="item.title"
37+
:class="{
38+
'v-list-item--active': active === item.href,
39+
}"
40+
:color="drawerOptions.color ? 'white' : 'primary'"
41+
:href="item.href"
42+
link
43+
:title="item.title"
44+
>
45+
46+
<template v-slot:prepend>
47+
<v-icon :icon="item.icon"></v-icon>
48+
</template>
49+
</v-list-item>
50+
</template>
1851
</v-list>
1952
</template>
2053

2154
<script setup>
22-
import { inject, onMounted, reactive, ref } from 'vue';
55+
import { inject, onMounted, ref } from 'vue';
56+
import { useMenuStore } from '@/stores/menu';
2357
2458
const drawerOptions = inject('drawerOptions');
59+
const store = useMenuStore();
2560
2661
const active = ref('');
27-
const menuItems = reactive([
28-
{
29-
href: '#home',
30-
icon: 'mdi:mdi-home',
31-
title: 'Home',
32-
},
33-
{
34-
href: '#installation',
35-
icon: 'mdi:mdi-plus-thick',
36-
title: 'Installation',
37-
},
38-
{
39-
href: '#description',
40-
icon: 'mdi:mdi-information-outline',
41-
title: 'Description',
42-
},
43-
{
44-
href: '#props',
45-
icon: 'mdi:mdi-cog',
46-
title: 'Props',
47-
},
48-
{
49-
href: '#events',
50-
icon: 'mdi:mdi-calendar-star',
51-
title: 'Events',
52-
},
53-
{
54-
href: '#slots',
55-
icon: 'mdi:mdi-slot-machine',
56-
title: 'Slots',
57-
},
58-
{
59-
href: '#sass-variables',
60-
icon: 'mdi:mdi-sass',
61-
title: 'SASS Variables',
62-
},
63-
{
64-
href: '#example',
65-
icon: 'mdi:mdi-code-json',
66-
title: 'Example',
67-
},
68-
{
69-
href: '#dependencies',
70-
icon: 'mdi:mdi-asterisk-circle-outline',
71-
title: 'Dependencies',
72-
},
73-
{
74-
href: '#license',
75-
icon: 'mdi:mdi-card-account-details-outline',
76-
title: 'License',
77-
},
78-
{
79-
href: '#legal',
80-
icon: 'mdi:mdi-scale-balance',
81-
title: 'Legal',
82-
},
83-
]);
62+
const menuItems = store.menuItems;
8463
8564
onMounted(() => {
8665
smoothScroll();
@@ -109,5 +88,14 @@ function smoothScroll() {
10988
11089
</script>
11190

112-
<style lang="scss">
91+
<style lang="scss" scoped>
92+
.sub-items {
93+
font-size: .9em;
94+
padding-left: calc(var(--indent-padding) - 10px) !important;
95+
96+
:deep(.v-icon) {
97+
font-size: 1em !important;
98+
margin-right: 1em !important;
99+
}
100+
}
113101
</style>

‎src/documentation/components/CheckboxComponent.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<v-col
3+
id="components-v-inline-checkbox"
4+
class="mb-5"
5+
cols="12"
6+
>
7+
<h2
8+
class="mb-0"
9+
:class="classes.h2"
10+
>
11+
<a
12+
:class="classes.headerA"
13+
href="#components-v-inline-checkbox"
14+
>#</a>
15+
VInlineCheckbox
16+
</h2>
17+
18+
<PropsTable
19+
:headers="propsStore.propsSupported.headers"
20+
:items="propsStore.vInlineCheckboxProps"
21+
section-id="inline-checkbox-props"
22+
section-title="Props"
23+
subtitle="These are all props for the <code>VInlineCheckbox</code> component"
24+
/>
25+
</v-col>
26+
</template>
27+
28+
<script setup>
29+
import { inject } from 'vue';
30+
import { usePropsStore } from '@/stores/props';
31+
import PropsTable from '@/documentation/components/PropsTable.vue';
32+
33+
const classes = inject('classes');
34+
const propsStore = usePropsStore();
35+
</script>
36+
37+
<style lang="scss" scoped>
38+
</style>

0 commit comments

Comments
 (0)