From 9dfbe6d1cea2eb9f1f9f0edd5fe6a16d3dce76ed Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Wed, 08 Jan 2025 12:47:53 +0100
Subject: [PATCH] Building a Custom Control Component
---
11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue | 25 +++++++++---
11 - Forms/xno-forms-01-starting-setup/src/components/RatingControl.vue | 60 ++++++++++++++++++++++++++++++
2 files changed, 79 insertions(+), 6 deletions(-)
diff --git a/11 - Forms/xno-forms-01-starting-setup/src/components/RatingControl.vue b/11 - Forms/xno-forms-01-starting-setup/src/components/RatingControl.vue
new file mode 100644
index 0000000..8887c98
--- /dev/null
+++ b/11 - Forms/xno-forms-01-starting-setup/src/components/RatingControl.vue
@@ -0,0 +1,60 @@
+<template>
+ <ul>
+ <li :class="{ active: activeOption === 'poor' }">
+ <button type="button" @click="activate('poor')">Poor</button>
+ </li>
+ <li :class="{ active: activeOption === 'average' }">
+ <button type="button" @click="activate('average')">Average</button>
+ </li>
+ <li :class="{ active: activeOption === 'great' }">
+ <button type="button" @click="activate('great')">Great</button>
+ </li>
+ </ul>
+</template>
+
+<script>export default {
+ data() {
+ return {
+ activeOption: null,
+ };
+ },
+ methods: {
+ activate(option) {
+ this.activeOption = option;
+ }
+ }
+
+}
+</script>
+
+<style scoped>
+.active {
+ border-color: purple;
+}
+
+.active button {
+ color: purple;
+}
+
+ul {
+ list-style: none;
+ margin: 0.5rem 0;
+ padding: 0;
+ display: flex;
+}
+
+li {
+ margin: 0 1rem;
+ border: 1px solid #ccc;
+ padding: 1rem;
+ display: flex;
+ align-items: center;
+}
+
+button {
+ font: inherit;
+ border: none;
+ background-color: transparent;
+ cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue b/11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue
index bcdf72a..1e57924 100644
--- a/11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue
+++ b/11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue
@@ -1,9 +1,9 @@
<template>
<form @submit.prevent="submitForm">
- <div class="form-control" :class="{invalid: usernameValidity === 'invalid'}">
+ <div class="form-control" :class="{ invalid: usernameValidity === 'invalid' }">
<label for="user-name">Your Name</label>
<input id="user-name" name="user-name" type="text" v-model.trim="userName" @blur="validateInput" />
- <p v-if="usernameValidity === 'invalid'">please enter a valid name</p>
+ <p v-if="usernameValidity === 'invalid'">please enter a valid name</p>
</div>
<div class="form-control">
<label for="age">Your Age (Years)</label>
@@ -47,6 +47,13 @@
<label for="how-other">Other</label>
</div>
</div>
+
+ <div class="form-control">
+ <rating-control>
+
+ </rating-control>
+ </div>
+
<div class="form-control">
<input type="checkbox" id="confirm-terms" name="confirm-terms" v-model="confirm">
<label for="confirm-terms">Agree to terms of use?</label>
@@ -58,7 +65,12 @@
</template>
<script>
+import RatingControl from './RatingControl.vue';
+
export default {
+ components: {
+ RatingControl,
+ },
data() {
return {
userName: '',
@@ -120,11 +132,12 @@
margin: 0.5rem 0;
}
-.form-control.invalid input{
-border-color: red;
+.form-control.invalid input {
+ border-color: red;
}
-.form-control.invalid label{
-color: red;
+
+.form-control.invalid label {
+ color: red;
}
--
Gitblit v1.8.0