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

New file
@@ -0,0 +1,68 @@
<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 {
    props: ['modelValue'],
    emits: ['update:modelValue'],
    // data() {
    //     return {
    //         activeOption: null,
    //     };
    // },
    computed: {
        activeOption(){
            return this.modelValue;
        }
    },
    methods: {
        activate(option) {
            // this.activeOption = option;
            this.$emit('update:modelValue', 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,16 +1,17 @@
<template>
  <form @submit.prevent="submitForm">
    <div class="form-control">
    <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="userName" />
      <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>
    </div>
    <div class="form-control">
      <label for="age">Your Age (Years)</label>
      <input id="age" name="age" type="number" />
      <input id="age" name="age" type="number" v-model="userAge" ref="inputAge" />
    </div>
    <div class="form-control">
      <label for="referrer">How did you hear about us?</label>
      <select id="referrer" name="referrer">
      <select id="referrer" name="referrer" v-model="referrer">
        <option value="google">Google</option>
        <option value="wom">Word of mouth</option>
        <option value="newspaper">Newspaper</option>
@@ -19,32 +20,41 @@
    <div class="form-control">
      <h2>What are you interested in?</h2>
      <div>
        <input id="interest-news" name="interest" type="checkbox" />
        <input id="interest-news" name="interest" type="checkbox" value="news" v-model="interest" />
        <label for="interest-news">News</label>
      </div>
      <div>
        <input id="interest-tutorials" name="interest" type="checkbox" />
        <input id="interest-tutorials" name="interest" type="checkbox" value="tutorials" v-model="interest" />
        <label for="interest-tutorials">Tutorials</label>
      </div>
      <div>
        <input id="interest-nothing" name="interest" type="checkbox" />
        <input id="interest-nothing" name="interest" type="checkbox" value="nothing" v-model="interest" />
        <label for="interest-nothing">Nothing</label>
      </div>
    </div>
    <div class="form-control">
      <h2>How do you learn?</h2>
      <div>
        <input id="how-video" name="how" type="radio" />
        <input id="how-video" name="how" type="radio" value="video" v-model="how" />
        <label for="how-video">Video Courses</label>
      </div>
      <div>
        <input id="how-blogs" name="how" type="radio" />
        <input id="how-blogs" name="how" type="radio" value="blogs" v-model="how" />
        <label for="how-blogs">Blogs</label>
      </div>
      <div>
        <input id="how-other" name="how" type="radio" />
        <input id="how-other" name="how" type="radio" value="other" v-model="how" />
        <label for="how-other">Other</label>
      </div>
    </div>

    <div class="form-control">
      <rating-control v-model="rating"></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>
    </div>
    <div>
      <button>Save Data</button>
@@ -53,17 +63,60 @@
</template>

<script>
import RatingControl from './RatingControl.vue';

export default {
  components: {
    RatingControl,
  },
  data() {
    return {
      userName: '',
      userAge: null,
      referrer: 'wom',
      interest: [],
      how: null,
      confirm: false,
      usernameValidity: 'pending',
      rating: null,
    }
  },
  methods: {
    submitForm() {
      console.log('Username: ' + this.userName );
      console.log('Username: ' + this.userName);
      this.userName = '';
     }
      console.log('User age: ');
      console.log(this.userAge); //number
      console.log(this.$refs.inputAge.value);  //string
      console.log(18);
      this.userAge = null;

      console.log('referrer: ' + this.referrer);
      this.referrer = 'wom';

      console.log('Checkbox: ');
      console.log(this.interest);
      console.log('- Radio buttons: ');
      console.log(this.how);
      this.interest = [];
      this.how = null;

      console.log('- Confirm:');
      console.log(this.confirm);
      this.confirm = false;

      console.log('- Rating:');
      console.log(this.rating);
      this.rating = null;

    },
    validateInput() {
      if (this.userName === '') {
        this.usernameValidity = 'invalid';
      } else {
        this.usernameValidity = 'valid';
      }
    },
  }

}
@@ -83,6 +136,15 @@
  margin: 0.5rem 0;
}

.form-control.invalid input {
  border-color: red;
}

.form-control.invalid label {
  color: red;
}


label {
  font-weight: bold;
}