Skip to content

Commit 4228b26

Browse files
kiranparajuli589kiranparajuli589
committed
Add info page navigation ability
Signed-off-by: Kiran Parajuli <[email protected]>
1 parent c0c4aea commit 4228b26

File tree

13 files changed

+132
-15
lines changed

13 files changed

+132
-15
lines changed

‎src/assets/styles/components/_button.scss

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,6 @@ a {
3838
@apply brightness-100 scale-[0.98];
3939
}
4040
@apply transition-all duration-200 ease-in-out;
41-
42-
&:focus,
43-
&:focus-visible,
44-
&:focus-within {
45-
@apply outline-none ring-2 ring-on-secondary;
46-
}
4741
}
4842

4943
a {

‎src/assets/styles/pages/_infoPage.sass

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.info_page
2-
@apply px-8 pt-8 pb-48
2+
@apply p-8
33
section:not(.vf-table-root)
44
@apply mb-10
55
section.vf-table-root

‎src/components/core/InfoPageFooter.vue

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<script setup lang="ts">
2+
import { ref } from "vue";
3+
import { useRoute } from "vue-router";
4+
import theSidebarItems from "@/constants/theSidebarItems";
5+
6+
const route = useRoute();
7+
const currentUrl = route.fullPath;
8+
9+
// find next and previous route baseed on TheSidebarItems
10+
const nextRoute = ref<{ name: string; path: string } | null>(null);
11+
const previousRoute = ref<{ name: string; path: string } | null>(null);
12+
13+
theSidebarItems.forEach((item, blockIndex) => {
14+
item.children.forEach((child, childIndex) => {
15+
if (child.path === currentUrl) {
16+
if (item.children[childIndex - 1]) {
17+
previousRoute.value = item.children[childIndex - 1];
18+
} else if (theSidebarItems[blockIndex - 1]) {
19+
previousRoute.value = theSidebarItems[blockIndex - 1].children.slice(-1)[0];
20+
}
21+
22+
if (item.children[childIndex + 1]) {
23+
nextRoute.value = item.children[childIndex + 1];
24+
} else if (theSidebarItems[blockIndex + 1]) {
25+
nextRoute.value = theSidebarItems[blockIndex + 1].children[0];
26+
}
27+
}
28+
});
29+
});
30+
</script>
31+
32+
<template>
33+
<div class="nav-link--container">
34+
<router-link v-if="previousRoute" :to="previousRoute.path" class="nav-link">
35+
<div class="nav-link--icon">
36+
<svg
37+
xmlns="http://www.w3.org/2000/svg"
38+
class="h-6 w-6 inline-block -mt-1"
39+
fill="none"
40+
viewBox="0 0 24 24"
41+
stroke="currentColor"
42+
>
43+
<path
44+
stroke-linecap="round"
45+
stroke-linejoin="round"
46+
stroke-width="2"
47+
d="M15 19l-7-7 7-7"
48+
/>
49+
</svg>
50+
</div>
51+
<div class="nav-link--info">
52+
<h5>Previous</h5>
53+
<p>{{ previousRoute.name }}</p>
54+
</div>
55+
</router-link>
56+
<span v-else></span>
57+
<router-link v-if="nextRoute" :to="nextRoute.path" class="nav-link">
58+
<div class="nav-link--info">
59+
<h5>Next</h5>
60+
<p>{{ nextRoute.name }}</p>
61+
</div>
62+
<div class="nav-link--icon">
63+
<svg
64+
xmlns="http://www.w3.org/2000/svg"
65+
class="h-6 w-6 inline-block -mt-1"
66+
fill="none"
67+
viewBox="0 0 24 24"
68+
stroke="currentColor"
69+
>
70+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
71+
</svg>
72+
</div>
73+
</router-link>
74+
</div>
75+
</template>
76+
77+
<style lang="scss" scoped>
78+
.nav-link {
79+
&--container {
80+
@apply flex justify-between mt-20;
81+
@apply border-t pt-2 border-gray-600;
82+
}
83+
@apply flex items-center gap-4;
84+
@apply py-4 rounded-md;
85+
&--info {
86+
@apply flex flex-col text-sm;
87+
h5 {
88+
@apply font-semibold mb-1 text-xs text-white;
89+
}
90+
p {
91+
@apply text-primary;
92+
}
93+
}
94+
@apply brightness-75 opacity-80;
95+
&:hover {
96+
@apply brightness-100 opacity-100;
97+
}
98+
@apply transition-all duration-300 ease-in-out;
99+
}
100+
</style>

‎src/views/DocsView.vue

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/views/gettingStarted/IntroductionView.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,11 +60,14 @@
6060
</li>
6161
</ol>
6262
</blockquote>
63+
64+
<InfoPageFooter />
6365
</section>
6466
</template>
6567

6668
<script setup lang="ts">
6769
import minimalExample from "@/constants/examples/minimalExample";
6870
import CodeBlock from "@/components/core/CodeBlock.vue";
6971
import InfoIcon from "@/components/svgIcons/InfoIcon.vue";
72+
import InfoPageFooter from "@/components/core/InfoPageFooter.vue";
7073
</script>

‎src/views/gettingStarted/QuickStartView.vue

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@
2121
<h2>Installation</h2>
2222

2323
<p>
24-
You can install Vue-Formik using npm or yarn. Here is the command to install it using npm:
24+
You can install Vue-Formik using npm or yarn. Here is the command to install it using
25+
<strong>{{ activeTab }}</strong
26+
>:
2527
</p>
2628

2729
<div>
@@ -32,15 +34,15 @@
3234
class="install-command"
3335
:class="{
3436
'border-b-2 !rounded-none first:!rounded-tl-lg last:!rounded-tr-lg': true,
35-
'bg-[#242424] border-primary': activeTab === packageManager,
37+
'bg-[#242424] border-primary z-10': activeTab === packageManager,
3638
'bg-[#2f2f2f] border-secondary': activeTab !== packageManager,
3739
}"
3840
@click="activeTab = packageManager"
3941
>
4042
{{ packageManager }}
4143
</button>
4244
</div>
43-
<CodeBlock class="mt-0" :content="installCommands[activeTab]" />
45+
<CodeBlock class="mt-0 [&_pre]:!rounded-tl-none" :content="installCommands[activeTab]" />
4446
</div>
4547

4648
<p>
@@ -60,12 +62,15 @@
6062

6163
<CodeBlock :content="minimalExample" />
6264
</section>
65+
66+
<InfoPageFooter />
6367
</section>
6468
</template>
6569

6670
<script setup lang="ts">
6771
import CodeBlock from "@/components/core/CodeBlock.vue";
6872
import minimalExample from "@/constants/examples/minimalExample.ts";
73+
import InfoPageFooter from "@/components/core/InfoPageFooter.vue";
6974
import { ref } from "vue";
7075
7176
const installCommands = {

‎src/views/libDocs/components/FormContentEditableView.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
FormContentEditableProps,
77
FormContentEditablePropsCols,
88
} from "@/constants/propsVFormik/formContentEditable.ts";
9+
import InfoPageFooter from "@/components/core/InfoPageFooter.vue";
910
1011
const usage1 = `
1112
<FormContentEditableField
@@ -126,6 +127,8 @@ const usage2 = `
126127
</li>
127128
</ol>
128129
</section>
130+
131+
<InfoPageFooter />
129132
</div>
130133
</template>
131134

‎src/views/libDocs/components/FormInputView.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
FormInputSlots,
88
} from "@/constants/propsVFormik/formInput.ts";
99
import CodeBlock from "@/components/core/CodeBlock.vue";
10+
import InfoPageFooter from "@/components/core/InfoPageFooter.vue";
1011
1112
const usage = `
1213
<FormInput
@@ -155,6 +156,8 @@ const usage2 = `
155156
</li>
156157
</ol>
157158
</section>
159+
160+
<InfoPageFooter />
158161
</div>
159162
</template>
160163

‎src/views/libDocs/components/FormSelectView.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import SimpleTable from "@/components/core/simpleTable/SimpleTable.vue";
33
import { FormSelectProps, FormSelectPropsCols } from "@/constants/propsVFormik/formSelect.ts";
44
import { FormInputSlotCols, FormInputSlots } from "@/constants/propsVFormik/formInput.ts";
55
import CodeBlock from "@/components/core/CodeBlock.vue";
6+
import InfoPageFooter from "@/components/core/InfoPageFooter.vue";
67
78
const usage1 = `
89
<FormSelectField
@@ -115,6 +116,8 @@ const usage2 = `
115116
</li>
116117
</ol>
117118
</section>
119+
120+
<InfoPageFooter />
118121
</div>
119122
</template>
120123

‎src/views/libDocs/components/FormTextareaView.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import SimpleTable from "@/components/core/simpleTable/SimpleTable.vue";
33
import { FormInputSlotCols, FormInputSlots } from "@/constants/propsVFormik/formInput.ts";
44
import CodeBlock from "@/components/core/CodeBlock.vue";
55
import { FormTextareaProps, FormTextareaPropsCols } from "@/constants/propsVFormik/formTextarea.ts";
6+
import InfoPageFooter from "@/components/core/InfoPageFooter.vue";
67
78
const usage1 = `
89
<FormTextareaField
@@ -121,6 +122,8 @@ const usage2 = `
121122
</li>
122123
</ol>
123124
</section>
125+
126+
<InfoPageFooter />
124127
</div>
125128
</template>
126129

0 commit comments

Comments
 (0)