Skip to content

Commit 16faccd

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Updating docs
1 parent 71b484e commit 16faccd

File tree

13 files changed

+765
-179
lines changed

13 files changed

+765
-179
lines changed

‎src/App.vue‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,8 @@
66
@updated-drawer="toggleDrawer"
77
/>
88

9-
<!-- ====================================================== Navigation Drawer -->
10-
<v-navigation-drawer
11-
v-model="drawer"
12-
:absolute="drawerOptions.absolute"
13-
:color="drawerOptions.color"
14-
:elevation="drawerOptions.elevation"
15-
>
16-
<MenuComponent :drawerOptions="drawerOptions" />
17-
</v-navigation-drawer>
9+
<!-- ====================================================== Menu -->
10+
<MenuComponent v-model="drawer" />
1811

1912
<!-- ====================================================== Main Container -->
2013
<v-main class="pb-10">
@@ -81,6 +74,11 @@ function toggleDrawer(): void {
8174
</script>
8275

8376
<style lang="scss">
77+
:root {
78+
--list-item-padding-left: 50px;
79+
--list-item-level-3-padding-left: 26px;
80+
}
81+
8482
html {
8583
scroll-behavior: smooth;
8684
scroll-padding-top: 70px;

‎src/documentation/DocsPage.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,15 +83,15 @@
8383
<!-- Validation -->
8484
<Section.ValidationSection />
8585

86-
<!-- Examples -->
87-
<Section.ExampleSection />
88-
8986
<!-- Events -->
9087
<Section.EventsSection />
9188

9289
<!-- Slots -->
9390
<Section.SlotsSection />
9491

92+
<!-- Examples -->
93+
<Section.ExampleSection />
94+
9595
<!-- Playground -->
9696
<Section.PlaygroundSection />
9797

‎src/documentation/components/ExampleContainer.vue‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@
7171
<v-window-item value="template">
7272
<v-theme-provider>
7373
<VCodeBlock
74+
:key="codeKey"
7475
:code="code.template"
7576
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
7677
lang="html"
@@ -83,6 +84,7 @@
8384
<v-window-item value="script">
8485
<v-theme-provider>
8586
<VCodeBlock
87+
:key="codeKey"
8688
:code="code.script"
8789
:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
8890
lang="html"
@@ -111,18 +113,25 @@
111113
</template>
112114

113115
<script setup lang="ts">
114-
115116
const emit = defineEmits(['closePicker']);
116117
117118
export interface ExampleCode {
118119
desc?: string;
119120
name?: string;
120121
script?: string;
121-
template: string;
122+
template?: string;
122123
}
123124
124125
const codeBlockSettings = inject<Docs.CodeBlockSettings>('codeBlockSettings')!;
125-
const { code } = defineProps<{ code: ExampleCode; }>();
126+
const props = defineProps<{ code: ExampleCode; codeUpdatedAt?: string; updatedCode?: ExampleCode; }>();
127+
128+
const { code, updatedCode } = toRefs(props);
129+
const codeKey = ref('scriptKey');
130+
131+
watch(() => props.codeUpdatedAt, () => {
132+
code.value.script = updatedCode.value?.script;
133+
code.value.template = updatedCode.value?.template;
134+
}, { deep: true });
126135
127136
const hasRendered = ref(true);
128137
const showCode = ref(false);
@@ -134,7 +143,7 @@ function showCodeBlocks() {
134143
}
135144
136145
const getHrefId = computed(() => {
137-
const id = code.name?.toLowerCase().replace(/\s+/g, '-');
146+
const id = code.value.name?.toLowerCase().replace(/\s+/g, '-');
138147
139148
return `examples-${id}`;
140149
});

‎src/documentation/components/MenuComponent.vue‎

Lines changed: 165 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,68 @@
11
<template>
2-
<v-list
3-
:color="drawerOptions.color ? 'white' : 'primary'"
4-
density="compact"
2+
<v-navigation-drawer
3+
v-model="drawer"
4+
:absolute="drawerOptions.absolute"
5+
class="main-nav-drawer "
6+
:color="drawerOptions.color"
7+
:elevation="drawerOptions.elevation"
58
>
6-
<template v-for="item, k in menuItems">
7-
<v-list-group
8-
v-if="item.items"
9-
:key="k"
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>
51-
</v-list>
9+
<v-list
10+
:color="drawerOptions.color ? 'white' : 'primary'"
11+
density="compact"
12+
>
13+
<template v-for="item, k in menuItems">
14+
<v-list-group
15+
v-if="item.items"
16+
:key="k"
17+
:value="item.title"
18+
>
19+
<template v-slot:activator="{ props }">
20+
<v-list-item
21+
v-bind="props"
22+
:prepend-icon="item.icon"
23+
:title="item.title"
24+
></v-list-item>
25+
</template>
26+
27+
<template v-for="subItem in item.items">
28+
<v-list-item
29+
v-if="subItem.href"
30+
:key="subItem.title"
31+
class="sub-items"
32+
:href="subItem.href"
33+
:prepend-icon="subItem.icon"
34+
>
35+
<div v-html="subItem.title"></div>
36+
</v-list-item>
37+
</template>
38+
</v-list-group>
39+
40+
<v-list-item
41+
v-else
42+
:key="item.title"
43+
:class="{
44+
'v-list-item--active': active === item.href,
45+
}"
46+
:color="drawerOptions.color ? 'white' : 'primary'"
47+
:href="item.href"
48+
link
49+
:title="item.title"
50+
>
51+
52+
<template v-slot:prepend>
53+
<v-icon :icon="item.icon"></v-icon>
54+
</template>
55+
</v-list-item>
56+
</template>
57+
</v-list>
58+
</v-navigation-drawer>
5259
</template>
5360

5461
<script setup lang="ts">
5562
import { useMenuStore } from '@/stores/menu';
5663
5764
65+
const drawer = defineModel<boolean>();
5866
const drawerOptions = inject<Docs.DrawerOptions>('drawerOptions')!;
5967
const store = useMenuStore();
6068
const active = ref<string>('');
@@ -89,14 +97,115 @@ function smoothScroll(): void {
8997
}
9098
</script>
9199

92-
<style lang="scss" scoped>
93-
.sub-items {
94-
font-size: .9em;
95-
padding-left: calc(var(--indent-padding) - 10px) !important;
100+
<style lang="scss">
101+
.main-nav-drawer {
102+
// Navigation Drawer Rail //
103+
&.v-navigation-drawer--rail {
104+
&:not(.v-navigation-drawer--is-hovering) {
105+
--list-item-padding-left: 7px;
106+
--list-item-level-3-padding-left: 7px;
107+
}
108+
}
109+
110+
// Navigation Drawer Regular //
111+
.v-navigation-drawer__content {
112+
.v-list {
113+
&-item {
114+
margin-bottom: 4px;
115+
}
116+
117+
&-group--prepend {
118+
padding: 0 !important;
119+
padding-left: 0 !important;
120+
}
121+
122+
&-item__prepend {
123+
display: flex;
124+
justify-content: center;
125+
margin-right: 16px;
126+
text-align: center !important;
127+
width: 24px !important;
128+
129+
> .v-icon {
130+
margin-inline-end: 0 !important;
131+
}
132+
133+
// Level 1 - All Icons //
134+
svg {
135+
font-size: 1em;
136+
width: 1em;
137+
}
138+
}
139+
140+
&-item__spacer {
141+
display: none;
142+
}
143+
144+
// Level 2 //
145+
&-group__items {
146+
// Level 2 Dropdown //
147+
svg {
148+
font-size: 0.8em;
149+
width: 0.8em;
150+
}
151+
152+
> .v-list {
153+
&-group {
154+
> .v-list-item {
155+
padding-left: var(--list-item-padding-left) !important;
156+
transition: padding 0.25s ease;
157+
}
158+
}
159+
160+
// Level 3 - First child of dropdowns //
161+
&-item {
162+
padding-left: var(--list-item-padding-left) !important;
163+
transition: padding 0.25s ease;
164+
165+
svg {
166+
font-size: 0.8em;
167+
width: 0.8em;
168+
}
169+
}
170+
}
171+
172+
// Level 3 //
173+
.v-list-group__items {
174+
> .v-list-item {
175+
padding-left: var(--list-item-level-3-padding-left) !important;
176+
transition: padding 0.25s ease;
177+
178+
// Level 3 icons //
179+
svg {
180+
font-size: 0.7em;
181+
width: 0.7em;
182+
}
183+
}
184+
}
185+
}
186+
}
187+
}
188+
189+
.menu-arrow {
190+
transition: transform 0.3s;
191+
}
192+
193+
.v-list-group--open {
194+
> .v-list-group__header {
195+
.menu-arrow {
196+
transform: rotate(-180deg);
197+
}
198+
}
199+
}
200+
201+
.sub-items {
202+
font-size: .9em;
203+
padding-left: calc(var(--indent-padding) - 10px) !important;
96204
97-
:deep(.v-icon) {
98-
font-size: 1em !important;
99-
margin-right: 1em !important;
205+
.v-icon {
206+
font-size: 1.3em !important;
207+
margin-right: 1em !important;
208+
}
100209
}
101210
}
102211
</style>

0 commit comments

Comments
 (0)