Skip to content

Commit 9110029

Browse files
kiranparajuli589kiranparajuli589
authored
Cosmetic Fixes (#9)
* Cosmetic Fixes Signed-off-by: Kiran Parajuli <[email protected]> * class name docs Signed-off-by: Kiran Parajuli <[email protected]> --------- Signed-off-by: Kiran Parajuli <[email protected]>
1 parent 4b600c5 commit 9110029

File tree

10 files changed

+285
-12
lines changed

10 files changed

+285
-12
lines changed

‎src/App.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
:class="{
66
show: sidebarState,
77
}"
8-
:toggle-sidebar="toggleSidebar"
8+
:toggle-sidebar="closeSidebar"
9+
:is-mobile="screenWidth < 780"
910
/>
1011
<div
1112
v-if="showSidebar && screenWidth < 780 && sidebarState"
@@ -39,6 +40,9 @@ const showFooter = computed(() => router.currentRoute.value.meta.footer);
3940
const toggleSidebar = () => {
4041
sidebarState.value = !sidebarState.value;
4142
};
43+
const closeSidebar = () => {
44+
sidebarState.value = false;
45+
};
4246
4347
const screenWidth = ref(0);
4448
onMounted(() => {

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@
3333
li
3434
@apply mb-2 ml-0
3535

36+
ol,ul
37+
li
38+
@apply mb-2 ml-4
39+
3640

3741
article
3842
@apply p-4

‎src/components/TheAppbar.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ defineProps<{
1212
</button>
1313
<h1><router-link to="/" class="!no-underline">Vue Formik</router-link></h1>
1414
<div class="grow" />
15+
<router-link to="/about">About</router-link>
1516
<a href="https://github.com/vue-formik/vue-formik" target="_blank"> ⭐ Star us on GitHub </a>
1617
</div>
1718
</nav>
@@ -40,7 +41,7 @@ defineProps<{
4041
a
4142
color: white
4243
text-decoration: none
43-
@apply text-sm
44+
@apply text-sm px-2 mx-2
4445
&:hover
4546
text-decoration: underline
4647
</style>

‎src/components/TheSidebar.vue

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
<template>
2-
<aside class="the-sidebar">
2+
<aside
3+
class="the-sidebar"
4+
:style="{
5+
paddingLeft: isMobile ? '2rem' : '1rem',
6+
}"
7+
>
8+
<button
9+
v-if="isMobile"
10+
class="absolute top-1 right-1 text-xs"
11+
title="Close Sidebar"
12+
@click="toggleSidebar"
13+
>
14+
<span>Close</span>
15+
</button>
316
<ul class="flex flex-col gap-2">
417
<template v-for="(item, index) in TheSidebarItems" :key="index">
518
<li>
@@ -26,20 +39,22 @@ import TheSidebarItems from "@/constants/theSidebarItems.ts";
2639
2740
defineProps<{
2841
toggleSidebar: () => void;
42+
isMobile: boolean;
2943
}>();
3044
</script>
3145

3246
<style lang="sass">
3347
.the-sidebar
34-
@apply pt-4 pl-2
48+
@apply pt-4 relative
3549
@apply border-r border-surface-b
3650
3751
ul
3852
li
39-
@apply px-2 text-sm
53+
@apply mb-1
4054
& > p
41-
@apply mt-5 mb-1.5 text-xs
55+
@apply mt-5 mb-2 text-xs
4256
a
57+
@apply px-2 py-1 text-sm
4358
@apply text-gray-400 rounded
4459
@apply transition-all duration-200 ease-in-out
4560
&:hover
@@ -48,6 +63,4 @@ defineProps<{
4863
@apply text-white brightness-90
4964
&.router-link-exact-active
5065
@apply text-primary
51-
ul li
52-
@apply mb-1.5
5366
</style>

‎src/constants/theSidebarItems.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ export default [
44
children: [
55
{ name: "Introduction", path: "/getting-started/introduction" },
66
{ name: "Quick Start", path: "/getting-started/quick-start" },
7-
{ name: "Quick Start", path: "/getting-started/why" },
87
],
98
},
109
{

‎src/views/HomeView.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77

88
<section class="mb-12">
99
<div class="flex gap-4 justify-center items-center">
10-
<router-link class="primary-btn md" to="/getting-started/introduction"
11-
>Why Vue-Formik?</router-link
12-
>
10+
<router-link class="primary-btn md" to="/getting-started/introduction">
11+
Introduction
12+
</router-link>
1313
<router-link class="secondary-btn md" to="/getting-started/quick-start">
1414
Get Started
1515
</router-link>

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,67 @@ const usage2 = `
6565
<p>If your field has array of values then you can use the <code>name</code> like:</p>
6666
<CodeBlock :content="usage2" />
6767
</section>
68+
69+
<section>
70+
<h2>Class Naming Style</h2>
71+
</section>
72+
<section>
73+
<ol class="list-decimal">
74+
<li>
75+
<strong>Base Class:</strong> The base class for this component is <code>vf-field</code>.
76+
It acts as the primary identifier for the component and provides a foundation for
77+
additional styles.
78+
</li>
79+
<li>
80+
<strong>Modifier Classes:</strong> These classes modify the appearance or behavior of the
81+
base component:
82+
<ul class="my-4 list-disc">
83+
<li>
84+
<code>vf-content-editable-field</code>: Applied to indicate the component is a
85+
content-editable field.
86+
</li>
87+
<li>
88+
<code>vf-field--error</code>: Added when the formik validation detects a field error.
89+
</li>
90+
<li><code>vf-field--disabled</code>: Added when the field is in a disabled state.</li>
91+
<li><code>vf-field--readonly</code>: Applied when the field is set to read-only.</li>
92+
</ul>
93+
</li>
94+
<li>
95+
<strong>Input Element Classes:</strong> Classes specific to the <code>div</code> acting as
96+
the content-editable input:
97+
<ul class="my-4 list-disc">
98+
<li><code>vf-input--error</code>: Indicates an error in the input field.</li>
99+
<li>
100+
<code>vf-input--placeholder</code>: Used when the input is empty and the placeholder
101+
is visible.
102+
</li>
103+
<li><code>vf-input--disabled</code>: Marks the input as disabled.</li>
104+
<li><code>vf-input--readonly</code>: Marks the input as read-only.</li>
105+
</ul>
106+
</li>
107+
<li>
108+
<strong>Error Message Class:</strong>
109+
<ul class="my-4 list-disc">
110+
<li>
111+
<code>vf--error</code>: Used for displaying error messages below the input field.
112+
</li>
113+
</ul>
114+
</li>
115+
<li>
116+
<strong>Dynamic Behavior:</strong> Classes are applied conditionally based on the
117+
component's props and state:
118+
<ul class="my-4 list-disc">
119+
<li>Error-related classes depend on <code>formik.hasFieldError(name)</code>.</li>
120+
<li>Placeholder-related classes depend on <code>!hasValue</code>.</li>
121+
<li>
122+
Disabled and read-only classes depend on the <code>disabled</code> and
123+
<code>readonly</code> props.
124+
</li>
125+
</ul>
126+
</li>
127+
</ol>
128+
</section>
68129
</div>
69130
</template>
70131

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,95 @@ const usage2 = `
6666
<p>If your field has array of values then you can use the <code>name</code> like:</p>
6767
<CodeBlock :content="usage2" />
6868
</section>
69+
70+
<section>
71+
<h2>Class Naming Style</h2>
72+
</section>
73+
<section>
74+
<ol class="list-decimal">
75+
<li>
76+
<strong>Base Class:</strong> The base class for this component is <code>vf-field</code>.
77+
It serves as the primary identifier for the component and provides the foundational
78+
styles.
79+
</li>
80+
<li>
81+
<strong>Dynamic Type-Specific Classes:</strong>
82+
The component applies a type-specific class dynamically using the
83+
<code>type</code> prop.
84+
<br />
85+
For specific types (e.g., <code>password</code>, <code>email</code>), the classes will be
86+
<code>vf-password-field</code> or <code>vf-email-field</code>, respectively.
87+
</li>
88+
<li>
89+
<strong>Modifier Classes:</strong> These classes modify the appearance or behavior of the
90+
base component:
91+
<ul class="my-4 list-disc">
92+
<li>
93+
<code>vf-field--error</code>: Applied when the field has a validation error,
94+
determined by <code>formik.hasFieldError(name)</code>.
95+
</li>
96+
<li>
97+
<code>vf-field--disabled</code>: Applied when the field is in a disabled state,
98+
determined by the <code>disabled</code> prop.
99+
</li>
100+
<li>
101+
<code>vf-field--readonly</code>: Applied when the field is set to read-only,
102+
determined by the <code>readonly</code> prop.
103+
</li>
104+
</ul>
105+
</li>
106+
<li>
107+
<strong>Input Element Classes:</strong> Classes applied specifically to the
108+
<code>input</code> element within the component:
109+
<ul class="my-4 list-disc">
110+
<li>
111+
<code>vf-input--error</code>: Indicates an error in the input field, applied when
112+
<code>formik.hasFieldError(name)</code> is true.
113+
</li>
114+
<li>
115+
<code>vf-input--disabled</code>: Marks the input as disabled, determined by the
116+
<code>disabled</code> prop.
117+
</li>
118+
<li>
119+
<code>vf-input--readonly</code>: Marks the input as read-only, determined by the
120+
<code>readonly</code> prop.
121+
</li>
122+
</ul>
123+
</li>
124+
<li>
125+
<strong>Error Message Class:</strong>
126+
<ul class="my-4 list-disc">
127+
<li>
128+
<code>vf-error</code>: Used for displaying error messages below the input field. The
129+
error message is rendered when <code>formik.hasFieldError(name)</code> is true.
130+
</li>
131+
</ul>
132+
</li>
133+
<li>
134+
<strong>Dynamic Behavior:</strong> Classes and attributes are applied conditionally based
135+
on the component's props and state:
136+
<ul class="my-4 list-disc">
137+
<li>
138+
The <code>vf-field--error</code> and <code>vf-input--error</code> classes are applied
139+
when <code>formik.hasFieldError(name)</code> is true.
140+
</li>
141+
<li>
142+
The <code>vf-field--disabled</code> and <code>vf-input--disabled</code> classes are
143+
applied when the <code>disabled</code> prop is true.
144+
</li>
145+
<li>
146+
The <code>vf-field--readonly</code> and <code>vf-input--readonly</code> classes are
147+
applied when the <code>readonly</code> prop is true.
148+
</li>
149+
<li>
150+
ARIA attributes like <code>aria-labelledby</code>, <code>aria-describedby</code>,
151+
<code>aria-invalid</code>, <code>aria-required</code>, <code>aria-readonly</code>, and
152+
<code>aria-disabled</code> are applied dynamically to enhance accessibility.
153+
</li>
154+
</ul>
155+
</li>
156+
</ol>
157+
</section>
69158
</div>
70159
</template>
71160

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,49 @@ const usage2 = `
7272
<p>If your field has array of values then you can use the <code>name</code> like:</p>
7373
<CodeBlock :content="usage2" />
7474
</section>
75+
76+
<section>
77+
<h2>Class Naming Style</h2>
78+
</section>
79+
<section>
80+
<ol class="list-decimal">
81+
<li>
82+
<strong>Base Classes:</strong>
83+
The foundational classes for this component are:
84+
<ul class="my-4 list-disc">
85+
<li><code>vf-field</code>: The primary class for styling the field container.</li>
86+
<li>
87+
<code>vf-select-field</code>: A base-specific class indicating the field is a select
88+
input.
89+
</li>
90+
</ul>
91+
</li>
92+
<li>
93+
<strong>Input Wrapper Class:</strong>
94+
The <code>vf-input</code> class is applied to the wrapper element surrounding the
95+
<code>select</code> input. It serves as the container for the select element and optional
96+
prepend/append slots.
97+
</li>
98+
<li>
99+
<strong>Dynamic Classes:</strong> Classes applied conditionally based on the component's
100+
state and props:
101+
<ul class="my-4 list-disc">
102+
<li>
103+
<code>vf-field--error</code>: Applied when the field has a validation error,
104+
determined by <code>formik.hasFieldError(name)</code>.
105+
</li>
106+
<li>
107+
<code>vf-input--error</code>: Applied to the <code>select</code> element when
108+
<code>formik.hasFieldError(name)</code> is true, indicating an error in the field.
109+
</li>
110+
<li>
111+
<code>vf-input--disabled</code>: Applied to the <code>select</code> element when the
112+
<code>disabled</code> prop is true, marking the field as disabled.
113+
</li>
114+
</ul>
115+
</li>
116+
</ol>
117+
</section>
75118
</div>
76119
</template>
77120

0 commit comments

Comments
 (0)