Building a Custom Control Component

Cristiano Magro

10 days ago 9dfbe6d1cea2eb9f1f9f0edd5fe6a16d3dce76ed

Building a Custom Control Component

 11 - Forms/xno-forms-01-starting-setup/src/components/RatingControl.vue

New file
@@ -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>

 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;
}