Skip to content
This repository was archived by the owner on Oct 15, 2024. It is now read-only.

Commit b085d61

Browse files
realstomanrealstoman
authored
Merge pull request realstoman#33 from realstoman/update-packages-and-links
🚀 Updates: Packages and links updates and add reusable form inputs
2 parents cc71ca5 + 9c3df59 commit b085d61

File tree

9 files changed

+2626
-2476
lines changed

9 files changed

+2626
-2476
lines changed

‎package-lock.json

Lines changed: 2441 additions & 2311 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,29 @@
88
"lint": "vue-cli-service lint"
99
},
1010
"dependencies": {
11-
"@tailwindcss/forms": "^0.5.2",
12-
"@vue/cli-plugin-babel": "^5.0.4",
13-
"@vue/cli-plugin-eslint": "^5.0.4",
14-
"@vue/cli-plugin-router": "^5.0.4",
15-
"core-js": "^3.6.5",
16-
"feather-icons": "^4.28.0",
11+
"@tailwindcss/forms": "^0.5.3",
12+
"@vue/cli-plugin-babel": "^5.0.8",
13+
"@vue/cli-plugin-eslint": "^5.0.8",
14+
"@vue/cli-plugin-router": "^5.0.8",
15+
"core-js": "^3.27.2",
16+
"feather-icons": "^4.29.0",
1717
"postcss-flexbugs-fixes": "^5.0.2",
18-
"postcss-import": "^14.1.0",
19-
"postcss-preset-env": "^7.6.0",
20-
"vue": "^3.2.35",
18+
"postcss-import": "^15.1.0",
19+
"postcss-preset-env": "^7.8.3",
20+
"vue": "^3.2.45",
2121
"vue-backtotop": "^1.6.1",
22-
"vue-router": "^4.0.0-0",
22+
"vue-router": "^4.1.6",
2323
"vue3-autocounter": "^1.0.6"
2424
},
2525
"devDependencies": {
26-
"@vue/cli-service": "~5.0.4",
27-
"@vue/compiler-sfc": "^3.2.35",
28-
"autoprefixer": "^10.4.7",
26+
"@vue/cli-service": "~5.0.8",
27+
"@vue/compiler-sfc": "^3.2.45",
28+
"autoprefixer": "^10.4.13",
2929
"babel-eslint": "^10.1.0",
3030
"eslint": "^7.5.0",
3131
"eslint-plugin-vue": "^7.0.0",
32-
"postcss": "^8.4.14",
33-
"tailwindcss": "^3.0.24",
32+
"postcss": "^8.4.21",
33+
"tailwindcss": "^3.2.4",
3434
"vue-cli-plugin-tailwind": "3.0.0"
3535
},
3636
"eslintConfig": {

‎src/components/HireMeModal.vue

Lines changed: 35 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<script>
22
import feather from 'feather-icons';
33
import Button from './reusable/Button.vue';
4+
import FormInput from './reusable/FormInput.vue';
5+
import FormTextarea from './reusable/FormTextarea.vue';
46
export default {
57
props: ['showModal', 'modal', 'categories'],
6-
components: { Button },
8+
components: { Button, FormInput, FormTextarea },
79
data() {
810
return {};
911
},
@@ -36,13 +38,13 @@ export default {
3638
class="modal-wrapper flex items-center z-30"
3739
>
3840
<div
39-
class="modal max-w-md mx-5 xl:max-w-xl lg:max-w-xl md:max-w-xl bg-secondary-light dark:bg-primary-dark max-h-screen shadow-lg flex-row rounded-lg relative"
41+
class="modal max-w-md mx-5 md:max-w-xl bg-secondary-light dark:bg-primary-dark max-h-screen shadow-lg flex-row rounded-lg relative"
4042
>
4143
<div
4244
class="modal-header flex justify-between gap-10 p-5 border-b border-ternary-light dark:border-ternary-dark"
4345
>
4446
<h5
45-
class=" text-primary-dark dark:text-primary-light text-xl"
47+
class="text-primary-dark dark:text-primary-light text-xl"
4648
>
4749
What project are you looking for?
4850
</h5>
@@ -55,33 +57,27 @@ export default {
5557
</div>
5658
<div class="modal-body p-5 w-full h-full">
5759
<form class="max-w-xl m-4 text-left">
58-
<div class="mt-0">
59-
<input
60-
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
61-
id="name"
62-
name="name"
63-
type="text"
64-
required=""
65-
placeholder="Name"
66-
aria-label="Name"
67-
/>
68-
</div>
69-
<div class="mt-6">
70-
<input
71-
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
72-
id="email"
73-
name="email"
74-
type="text"
75-
required=""
76-
placeholder="Email"
77-
aria-label="Email"
78-
/>
79-
</div>
80-
<div class="mt-6">
60+
<FormInput
61+
label="Full Name"
62+
inputIdentifier="name"
63+
class="mb-2"
64+
/>
65+
<FormInput
66+
label="Email"
67+
inputIdentifier="email"
68+
inputType="email"
69+
/>
70+
71+
<div class="mt-6 mb-4">
72+
<label
73+
class="block mb-2 text-lg text-primary-dark dark:text-primary-light"
74+
for="project"
75+
>Project Type</label
76+
>
8177
<select
82-
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
83-
id="subject"
84-
name="subject"
78+
class="w-full px-5 py-3 border-1 border-gray-200 dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
79+
id="project"
80+
name="project"
8581
type="text"
8682
required=""
8783
aria-label="Project Category"
@@ -90,35 +86,21 @@ export default {
9086
v-for="category in categories"
9187
:key="category.id"
9288
:value="category.value"
93-
>{{ category.name }}</option
9489
>
90+
{{ category.name }}
91+
</option>
9592
</select>
9693
</div>
9794

98-
<div class="mt-6">
99-
<textarea
100-
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
101-
id="message"
102-
name="message"
103-
cols="14"
104-
rows="6"
105-
aria-label="Details"
106-
placeholder="Project description"
107-
></textarea>
108-
</div>
95+
<FormTextarea
96+
label="Details"
97+
textareaIdentifier="details"
98+
/>
10999

110-
<div class="mt-6 pb-4 sm:pb-1">
100+
<div class="mt-7 pb-4 sm:pb-1">
111101
<Button
112102
title="Send Request"
113-
class="px-4
114-
sm:px-6
115-
py-2
116-
sm:py-2.5
117-
text-white
118-
bg-indigo-500
119-
hover:bg-indigo-600
120-
rounded-md
121-
focus:ring-1 focus:ring-indigo-900 duration-500"
103+
class="px-4 sm:px-6 py-2 sm:py-2.5 text-white bg-indigo-500 hover:bg-indigo-600 rounded-md focus:ring-1 focus:ring-indigo-900 duration-500"
122104
type="submit"
123105
aria-label="Submit Request"
124106
/>
@@ -130,11 +112,7 @@ export default {
130112
>
131113
<Button
132114
title="Close"
133-
class=" px-4
134-
sm:px-6
135-
py-2 bg-gray-600 text-primary-light hover:bg-ternary-dark dark:bg-gray-200 dark:text-secondary-dark dark:hover:bg-primary-light
136-
rounded-md
137-
focus:ring-1 focus:ring-indigo-900 duration-500"
115+
class="px-4 sm:px-6 py-2 bg-gray-600 text-primary-light hover:bg-ternary-dark dark:bg-gray-200 dark:text-secondary-dark dark:hover:bg-primary-light rounded-md focus:ring-1 focus:ring-indigo-900 duration-500"
138116
@click="showModal()"
139117
aria-label="Close Modal"
140118
/>
@@ -149,7 +127,7 @@ export default {
149127

150128
<style scoped>
151129
.modal-body {
152-
max-height: 500px;
130+
max-height: 570px;
153131
}
154132
.bg-gray-800-opacity {
155133
background-color: #2d374850;

‎src/components/ThemeSwitcher.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default {
1010
toggleTheme() {
1111
const newTheme = this.theme === 'light' ? 'dark' : 'light';
1212
localStorage.setItem('theme', newTheme);
13-
this.$emit('themeChanged', newTheme);
13+
this.$emit('theme-changed', newTheme);
1414
this.$router.go();
1515
},
1616
},

‎src/components/contact/ContactForm.vue

Lines changed: 11 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script>
22
import Button from '../reusable/Button.vue';
3-
export default { components: { Button } };
3+
import FormInput from '../reusable/FormInput.vue';
4+
import FormTextarea from '../reusable/FormTextarea.vue';
5+
export default { components: { Button, FormInput, FormTextarea } };
46
</script>
57

68
<template>
@@ -14,70 +16,14 @@ export default { components: { Button } };
1416
Contact Form
1517
</p>
1618
<form action="#" class="font-general-regular space-y-7">
17-
<div>
18-
<label
19-
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
20-
for="name"
21-
>Full Name</label
22-
>
23-
<input
24-
class="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md"
25-
id="name"
26-
name="name"
27-
type="text"
28-
required=""
29-
placeholder="Your Name"
30-
aria-label="Name"
31-
/>
32-
</div>
33-
<div>
34-
<label
35-
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
36-
for="email"
37-
>Email</label
38-
>
39-
<input
40-
class="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md"
41-
id="email"
42-
name="email"
43-
type="text"
44-
required=""
45-
placeholder="Your Email"
46-
aria-label="Email"
47-
/>
48-
</div>
49-
<div>
50-
<label
51-
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
52-
for="subject"
53-
>Subject</label
54-
>
55-
<input
56-
class="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md"
57-
id="subject"
58-
name="subject"
59-
type="text"
60-
required=""
61-
placeholder="Subject"
62-
aria-label="Subject"
63-
/>
64-
</div>
65-
66-
<div>
67-
<label
68-
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
69-
for="message"
70-
>Message</label
71-
>
72-
<textarea
73-
class="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md"
74-
id="message"
75-
name="message"
76-
cols="14"
77-
rows="6"
78-
aria-label="Message"
79-
></textarea>
80-
</div>
19+
<FormInput label="Full Name" inputIdentifier="name" />
20+
<FormInput
21+
label="Email"
22+
inputIdentifier="email"
23+
inputType="email"
24+
/>
25+
<FormInput label="Subject" inputIdentifier="subject" />
26+
<FormTextarea label="Message" textareaIdentifier="message" />
8127

8228
<div>
8329
<Button

‎src/components/reusable/FormInput.vue

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<script>
2+
export default {
3+
props: {
4+
label: {
5+
type: String,
6+
default: '',
7+
},
8+
inputIdentifier: {
9+
type: String,
10+
default: '',
11+
},
12+
val: {
13+
type: [String, Number],
14+
default: '',
15+
},
16+
inputType: {
17+
type: String,
18+
default: 'text',
19+
},
20+
},
21+
};
22+
</script>
23+
24+
<template>
25+
<div>
26+
<label
27+
class="block mb-2 text-lg text-primary-dark dark:text-primary-light"
28+
:for="label"
29+
>{{ label }}</label
30+
>
31+
<input
32+
class="w-full px-5 py-3 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md"
33+
:id="inputIdentifier"
34+
:name="inputIdentifier"
35+
:placeholder="label"
36+
:aria-label="inputIdentifier"
37+
:value="val"
38+
:type="inputType"
39+
v-bind="$attrs"
40+
@input="$emit('update:val', $event.target.value)"
41+
required
42+
/>
43+
</div>
44+
</template>
45+
46+
<style lang="scss" scoped></style>

‎src/components/reusable/FormTextarea.vue

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script>
2+
export default {
3+
props: {
4+
label: {
5+
type: String,
6+
default: '',
7+
},
8+
textareaIdentifier: {
9+
type: String,
10+
default: '',
11+
},
12+
val: {
13+
type: [String, Number],
14+
default: '',
15+
},
16+
},
17+
};
18+
</script>
19+
20+
<template>
21+
<div>
22+
<label
23+
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
24+
:for="textareaIdentifier"
25+
>{{ label }}</label
26+
>
27+
<textarea
28+
class="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md"
29+
:id="textareaIdentifier"
30+
:name="textareaIdentifier"
31+
:aria-label="textareaIdentifier"
32+
:placeholder="label"
33+
v-bind="$attrs"
34+
@input="$emit('update:val', $event.target.value)"
35+
cols="14"
36+
rows="6"
37+
></textarea>
38+
</div>
39+
</template>
40+
41+
<style lang="scss" scoped></style>

0 commit comments

Comments
 (0)