Skip to content

🚀 Updates: Packages and links updates and add reusable form inputs #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jan 23, 2023
Merged

🚀 Updates: Packages and links updates and add reusable form inputs #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e706c5f
Update all packages to latest
realstoman Jan 23, 2023
651d051
Update footer links
realstoman Jan 23, 2023
194096e
Update footer links and move links data to file
realstoman Jan 23, 2023
ea6a124
Add reuseable form input field
realstoman Jan 23, 2023
623ed48
Use reuseable form input in hire me modal
realstoman Jan 23, 2023
344b940
Create reuseable text area
realstoman Jan 23, 2023
9c3df59
Fix est lint issue
realstoman Jan 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4,752 changes: 2,441 additions & 2,311 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

30 changes: 15 additions & 15 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,29 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@tailwindcss/forms": "^0.5.2",
"@vue/cli-plugin-babel": "^5.0.4",
"@vue/cli-plugin-eslint": "^5.0.4",
"@vue/cli-plugin-router": "^5.0.4",
"core-js": "^3.6.5",
"feather-icons": "^4.28.0",
"@tailwindcss/forms": "^0.5.3",
"@vue/cli-plugin-babel": "^5.0.8",
"@vue/cli-plugin-eslint": "^5.0.8",
"@vue/cli-plugin-router": "^5.0.8",
"core-js": "^3.27.2",
"feather-icons": "^4.29.0",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-import": "^14.1.0",
"postcss-preset-env": "^7.6.0",
"vue": "^3.2.35",
"postcss-import": "^15.1.0",
"postcss-preset-env": "^7.8.3",
"vue": "^3.2.45",
"vue-backtotop": "^1.6.1",
"vue-router": "^4.0.0-0",
"vue-router": "^4.1.6",
"vue3-autocounter": "^1.0.6"
},
"devDependencies": {
"@vue/cli-service": "~5.0.4",
"@vue/compiler-sfc": "^3.2.35",
"autoprefixer": "^10.4.7",
"@vue/cli-service": "~5.0.8",
"@vue/compiler-sfc": "^3.2.45",
"autoprefixer": "^10.4.13",
"babel-eslint": "^10.1.0",
"eslint": "^7.5.0",
"eslint-plugin-vue": "^7.0.0",
"postcss": "^8.4.14",
"tailwindcss": "^3.0.24",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.4",
"vue-cli-plugin-tailwind": "3.0.0"
},
"eslintConfig": {
Expand Down
92 changes: 35 additions & 57 deletions src/components/HireMeModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<script>
import feather from 'feather-icons';
import Button from './reusable/Button.vue';
import FormInput from './reusable/FormInput.vue';
import FormTextarea from './reusable/FormTextarea.vue';
export default {
props: ['showModal', 'modal', 'categories'],
components: { Button },
components: { Button, FormInput, FormTextarea },
data() {
return {};
},
Expand Down Expand Up @@ -36,13 +38,13 @@ export default {
class="modal-wrapper flex items-center z-30"
>
<div
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"
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"
>
<div
class="modal-header flex justify-between gap-10 p-5 border-b border-ternary-light dark:border-ternary-dark"
>
<h5
class=" text-primary-dark dark:text-primary-light text-xl"
class="text-primary-dark dark:text-primary-light text-xl"
>
What project are you looking for?
</h5>
Expand All @@ -55,33 +57,27 @@ export default {
</div>
<div class="modal-body p-5 w-full h-full">
<form class="max-w-xl m-4 text-left">
<div class="mt-0">
<input
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"
id="name"
name="name"
type="text"
required=""
placeholder="Name"
aria-label="Name"
/>
</div>
<div class="mt-6">
<input
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"
id="email"
name="email"
type="text"
required=""
placeholder="Email"
aria-label="Email"
/>
</div>
<div class="mt-6">
<FormInput
label="Full Name"
inputIdentifier="name"
class="mb-2"
/>
<FormInput
label="Email"
inputIdentifier="email"
inputType="email"
/>

<div class="mt-6 mb-4">
<label
class="block mb-2 text-lg text-primary-dark dark:text-primary-light"
for="project"
>Project Type</label
>
<select
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"
id="subject"
name="subject"
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"
id="project"
name="project"
type="text"
required=""
aria-label="Project Category"
Expand All @@ -90,35 +86,21 @@ export default {
v-for="category in categories"
:key="category.id"
:value="category.value"
>{{ category.name }}</option
>
{{ category.name }}
</option>
</select>
</div>

<div class="mt-6">
<textarea
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"
id="message"
name="message"
cols="14"
rows="6"
aria-label="Details"
placeholder="Project description"
></textarea>
</div>
<FormTextarea
label="Details"
textareaIdentifier="details"
/>

<div class="mt-6 pb-4 sm:pb-1">
<div class="mt-7 pb-4 sm:pb-1">
<Button
title="Send Request"
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"
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"
type="submit"
aria-label="Submit Request"
/>
Expand All @@ -130,11 +112,7 @@ export default {
>
<Button
title="Close"
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"
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"
@click="showModal()"
aria-label="Close Modal"
/>
Expand All @@ -149,7 +127,7 @@ export default {

<style scoped>
.modal-body {
max-height: 500px;
max-height: 570px;
}
.bg-gray-800-opacity {
background-color: #2d374850;
Expand Down
2 changes: 1 addition & 1 deletion src/components/ThemeSwitcher.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default {
toggleTheme() {
const newTheme = this.theme === 'light' ? 'dark' : 'light';
localStorage.setItem('theme', newTheme);
this.$emit('themeChanged', newTheme);
this.$emit('theme-changed', newTheme);
this.$router.go();
},
},
Expand Down
76 changes: 11 additions & 65 deletions src/components/contact/ContactForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<script>
import Button from '../reusable/Button.vue';
export default { components: { Button } };
import FormInput from '../reusable/FormInput.vue';
import FormTextarea from '../reusable/FormTextarea.vue';
export default { components: { Button, FormInput, FormTextarea } };
</script>

<template>
Expand All @@ -14,70 +16,14 @@ export default { components: { Button } };
Contact Form
</p>
<form action="#" class="font-general-regular space-y-7">
<div>
<label
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
for="name"
>Full Name</label
>
<input
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"
id="name"
name="name"
type="text"
required=""
placeholder="Your Name"
aria-label="Name"
/>
</div>
<div>
<label
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
for="email"
>Email</label
>
<input
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"
id="email"
name="email"
type="text"
required=""
placeholder="Your Email"
aria-label="Email"
/>
</div>
<div>
<label
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
for="subject"
>Subject</label
>
<input
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"
id="subject"
name="subject"
type="text"
required=""
placeholder="Subject"
aria-label="Subject"
/>
</div>

<div>
<label
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
for="message"
>Message</label
>
<textarea
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"
id="message"
name="message"
cols="14"
rows="6"
aria-label="Message"
></textarea>
</div>
<FormInput label="Full Name" inputIdentifier="name" />
<FormInput
label="Email"
inputIdentifier="email"
inputType="email"
/>
<FormInput label="Subject" inputIdentifier="subject" />
<FormTextarea label="Message" textareaIdentifier="message" />

<div>
<Button
Expand Down
46 changes: 46 additions & 0 deletions src/components/reusable/FormInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<script>
export default {
props: {
label: {
type: String,
default: '',
},
inputIdentifier: {
type: String,
default: '',
},
val: {
type: [String, Number],
default: '',
},
inputType: {
type: String,
default: 'text',
},
},
};
</script>

<template>
<div>
<label
class="block mb-2 text-lg text-primary-dark dark:text-primary-light"
:for="label"
>{{ label }}</label
>
<input
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"
:id="inputIdentifier"
:name="inputIdentifier"
:placeholder="label"
:aria-label="inputIdentifier"
:value="val"
:type="inputType"
v-bind="$attrs"
@input="$emit('update:val', $event.target.value)"
required
/>
</div>
</template>

<style lang="scss" scoped></style>
41 changes: 41 additions & 0 deletions src/components/reusable/FormTextarea.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<script>
export default {
props: {
label: {
type: String,
default: '',
},
textareaIdentifier: {
type: String,
default: '',
},
val: {
type: [String, Number],
default: '',
},
},
};
</script>

<template>
<div>
<label
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
:for="textareaIdentifier"
>{{ label }}</label
>
<textarea
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"
:id="textareaIdentifier"
:name="textareaIdentifier"
:aria-label="textareaIdentifier"
:placeholder="label"
v-bind="$attrs"
@input="$emit('update:val', $event.target.value)"
cols="14"
rows="6"
></textarea>
</div>
</template>

<style lang="scss" scoped></style>
Loading