Make all directives (v-bind, v-on) use shorthand

src/components/Course.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-bind:class="{ 'course--min': !notCompact }" class="course">
+  <div :class="{ 'course--min': !notCompact }" class="course">
     <div class="course-color" :style="cssVars">
       <div class="course-dotColumn">
         <span class="course-dot"></span>
@@ -12,13 +12,13 @@
         <span class="course-dot"></span>
       </div>
     </div>
-    <div v-bind:class="{ 'course-content--min': !notCompact }" class="course-content">
-      <div v-bind:class="{ 'course-main--min': !notCompact }" class="course-main">
-        <div class = "course-top">
-          <div v-bind:class="{ 'course-code--min': !notCompact }" class="course-code">
+    <div :class="{ 'course-content--min': !notCompact }" class="course-content">
+      <div :class="{ 'course-main--min': !notCompact }" class="course-main">
+        <div class="course-top">
+          <div :class="{ 'course-code--min': !notCompact }" class="course-code">
             {{ subject }} {{ code }}
           </div>
-          <div class="course-dotRow" v-on:click="openMenu">
+          <div class="course-dotRow" @click="openMenu">
             <span class="course-dot course-dot--menu"></span>
             <span class="course-dot course-dot--menu"></span>
             <span class="course-dot course-dot--menu"></span>
@@ -51,7 +51,13 @@
         </div>
       </div>
     </div>
-    <coursemenu v-if="menuOpen" class="course-menu" v-on:delete-course="deleteCourse" v-on:color-course="colorCourse" v-click-outside="closeMenuIfOpen" />
+    <coursemenu
+      v-if="menuOpen"
+      class="course-menu"
+      @delete-course="deleteCourse"
+      @color-course="colorCourse"
+      v-click-outside="closeMenuIfOpen"
+    />
   </div>
 </template>
 
@@ -272,12 +278,11 @@ export default {
     }
   }
 
-  &-dotRow{
+  &-dotRow {
     display: flex;
     position: relative;
   }
 
-
   &-dot {
     opacity: 0.8;
     height: 2px;

src/components/Modals/CourseMenu.vue

@@ -1,26 +1,37 @@
 <template>
   <div class="courseMenu">
     <div class="courseMenu-content">
-      <div class="courseMenu-section" @mouseover="setDisplayColors(true)" @mouseleave="setDisplayColors(false)">
+      <div
+        class="courseMenu-section"
+        @mouseover="setDisplayColors(true)"
+        @mouseleave="setDisplayColors(false)"
+      >
         <div class="courseMenu-left">
-          <img class="courseMenu-icon" src="../../assets/images/paint.svg"/>
+          <img class="courseMenu-icon" src="../../assets/images/paint.svg" />
           <span class="courseMenu-text">Edit Color</span>
         </div>
-        <img class="courseMenu-arrow" src="../../assets/images/sidearrow.svg"/>
+        <img class="courseMenu-arrow" src="../../assets/images/sidearrow.svg" />
 
         <div v-if="displayColors" class="courseMenu-content courseMenu-colors">
-          <div v-for="color in colors" :key="color.id" class="courseMenu-section" v-on:click="colorCourse(color)">
+          <div
+            v-for="color in colors"
+            :key="color.id"
+            class="courseMenu-section"
+            @click="colorCourse(color)"
+          >
             <div class="courseMenu-left">
-              <div class="courseMenu-icon courseMenu-icon--color" v-bind:style="{backgroundColor: color.hex}"></div>
-              <span class="courseMenu-text">{{color.text}}</span>
+              <div
+                class="courseMenu-icon courseMenu-icon--color"
+                :style="{ backgroundColor: color.hex }"
+              ></div>
+              <span class="courseMenu-text">{{ color.text }}</span>
             </div>
           </div>
         </div>
-
       </div>
-      <div class="courseMenu-section" v-on:click="deleteCourse">
+      <div class="courseMenu-section" @click="deleteCourse">
         <div class="courseMenu-left">
-          <img class="courseMenu-icon" src="../../assets/images/trash.svg"/>
+          <img class="courseMenu-icon" src="../../assets/images/trash.svg" />
           <span class="courseMenu-text">Delete</span>
         </div>
       </div>
@@ -86,8 +97,8 @@ export default {
 <style scoped lang="scss">
 .courseMenu {
   &-content {
-    background: #FFFFFF;
-    border: 1px solid #ACACAC;
+    background: #ffffff;
+    border: 1px solid #acacac;
     box-sizing: border-box;
     border-radius: 9px;
     font-size: 14px;
@@ -98,7 +109,7 @@ export default {
   &-section {
     display: flex;
     justify-content: space-between;
-    padding: .5rem 1rem;
+    padding: 0.5rem 1rem;
     position: relative;
 
     &:hover,
@@ -139,5 +150,4 @@ export default {
     right: -9rem;
   }
 }
-
 </style>

src/components/Modals/Modal.vue

@@ -3,12 +3,17 @@
     <div class="modal-content" :id="contentId">
       <div class="modal-top">
         <span class="modal-title">{{ title }}</span>
-        <img class="modal-exit" src="../../assets/images/x.png" v-on:click="closeCurrentModal" />
+        <img class="modal-exit" src="../../assets/images/x.png" @click="closeCurrentModal" />
       </div>
-      <component class="modal-body" v-bind:is="body" :semesterID="semesterID" ref="modalBodyComponent"></component>
+      <component
+        class="modal-body"
+        :is="body"
+        :semesterID="semesterID"
+        ref="modalBodyComponent"
+      ></component>
       <div class="modal-buttonWrapper">
-        <button class="modal-button" v-on:click="closeCurrentModal">{{ cancel }}</button>
-        <button class="modal-button modal-button--add" v-on:click="addItem">{{ add }}</button>
+        <button class="modal-button" @click="closeCurrentModal">{{ cancel }}</button>
+        <button class="modal-button modal-button--add" @click="addItem">{{ add }}</button>
       </div>
     </div>
   </div>
@@ -119,7 +124,10 @@ export default {
       const seasonInput = document.getElementById(`season-placeholder`);
       const yearInput = document.getElementById(`year-placeholder`);
 
-      this.$parent.addSemester(seasonInput.innerHTML.trim(' ').split(' ')[1], parseInt(yearInput.innerHTML, 10));
+      this.$parent.addSemester(
+        seasonInput.innerHTML.trim(' ').split(' ')[1],
+        parseInt(yearInput.innerHTML, 10)
+      );
 
       this.closeCurrentModal();
     }

src/components/Modals/NewSemester.vue

@@ -5,23 +5,20 @@
       <div
         class="newSemester-select"
         id="type"
-        v-bind:style="{ borderColor: displayOptions.season.boxBorder }"
+        :style="{ borderColor: displayOptions.season.boxBorder }"
       >
-        <div
-          class="newSemester-dropdown-placeholder season-wrapper"
-          v-on:click="showHideSeasonContent"
-        >
+        <div class="newSemester-dropdown-placeholder season-wrapper" @click="showHideSeasonContent">
           <div
             class="newSemester-dropdown-placeholder season-placeholder"
             id="season-placeholder"
-            v-bind:style="{ color: displayOptions.season.placeholderColor }"
+            :style="{ color: displayOptions.season.placeholderColor }"
           >
             {{ seasonPlaceholder }}
           </div>
           <div
             class="newSemester-dropdown-placeholder season-arrow"
             id="season-arrow"
-            v-bind:style="{ borderTopColor: displayOptions.season.arrowColor }"
+            :style="{ borderTopColor: displayOptions.season.arrowColor }"
           ></div>
         </div>
         <div
@@ -34,7 +31,7 @@
             :key="season"
             :id="season"
             class="newSemester-dropdown-content-item"
-            v-on:click="selectSeason(season)"
+            @click="selectSeason(season)"
           >
             {{ season }}
           </div>
@@ -46,20 +43,20 @@
       <div
         class="newSemester-select"
         id="year"
-        v-bind:style="{ borderColor: displayOptions.year.boxBorder }"
+        :style="{ borderColor: displayOptions.year.boxBorder }"
       >
-        <div class="newSemester-dropdown-placeholder year-wrapper" v-on:click="showHideYearContent">
+        <div class="newSemester-dropdown-placeholder year-wrapper" @click="showHideYearContent">
           <div
             class="newSemester-dropdown-placeholder year-placeholder"
             id="year-placeholder"
-            v-bind:style="{ color: displayOptions.year.placeholderColor }"
+            :style="{ color: displayOptions.year.placeholderColor }"
           >
             {{ yearPlaceholder }}
           </div>
           <div
             class="newSemester-dropdown-placeholder year-arrow"
             id="year-arrow"
-            v-bind:style="{ borderTopColor: displayOptions.year.arrowColor }"
+            :style="{ borderTopColor: displayOptions.year.arrowColor }"
           ></div>
         </div>
         <div
@@ -72,7 +69,7 @@
             :key="year"
             :id="year"
             class="newSemester-dropdown-content-item"
-            v-on:click="selectYear(year)"
+            @click="selectYear(year)"
           >
             {{ year }}
           </div>

src/components/Requirements.vue

@@ -2,7 +2,7 @@
   <div class="requirements">
     <h1 class="title">School Requirements</h1>
     <!-- loop through reqs array of req objects -->
-    <div class="reqs" v-for="(req, index) in reqs" v-bind:key="req.id">
+    <div class="reqs" v-for="(req, index) in reqs" :key="req.id">
       <div class="row top">
         <p class="name col p-0">{{ req.name }}</p>
         <div class="col-1 text-right p-0">
@@ -16,7 +16,7 @@
       <div class="progress">
         <div
           class="progress-bar"
-          v-bind:style="{
+          :style="{
             'background-color': req.color,
             width: `${(req.progress / req.total) * 100}%`
           }"
@@ -31,8 +31,8 @@
       <button
         class="view btn"
         v-if="!req.displayDetails"
-        v-bind:style="{ 'background-color': req.color }"
-        v-on:click="turnDetails(index, true)"
+        :style="{ 'background-color': req.color }"
+        @click="turnDetails(index, true)"
       >
         View All {{ req.type }} Requirements
       </button>
@@ -42,14 +42,14 @@
           <div class="row detail-bar">
             <p class="col detail-text p-0">In-Depth {{ req.type }} Requirements</p>
             <div class="text-right p-0">
-              <button class="btn" v-on:click="turnDetails(index, false)">
+              <button class="btn" @click="turnDetails(index, false)">
                 <!-- picture of close (x) icon -->
                 <img class="cancel" src="../assets/images/x.png" alt="X" />
               </button>
             </div>
           </div>
           <!-- loop through uncompleted reqs in req.ongoing array -->
-          <div class="list" v-for="value in req.ongoing" v-bind:key="value.id">
+          <div class="list" v-for="value in req.ongoing" :key="value.id">
             <div class="separator"></div>
             <div class="row req">
               <p class="col float-left p-0 req-name">{{ value.name }}</p>
@@ -64,21 +64,17 @@
         <div class="completed" v-if="req.completed.length > 0">
           <div class="row detail-bar">
             <p class="col detail-text p-0">Completed {{ req.type }} Requirements</p>
-            <button class="btn" v-bind:style="{ color: req.color }">
+            <button class="btn" :style="{ color: req.color }">
               <!-- Toggle to display completed reqs -->
-              <p
-                class="toggle"
-                v-if="req.displayCompleted"
-                v-on:click="turnCompleted(index, false)"
-              >
+              <p class="toggle" v-if="req.displayCompleted" @click="turnCompleted(index, false)">
                 HIDE
               </p>
-              <p class="toggle" v-else v-on:click="turnCompleted(index, true)">SHOW</p>
+              <p class="toggle" v-else @click="turnCompleted(index, true)">SHOW</p>
             </button>
           </div>
           <div v-if="req.displayCompleted">
             <!-- loop through completed reqs in req.completed array -->
-            <div class="list" v-for="value in req.completed" v-bind:key="value.id">
+            <div class="list" v-for="value in req.completed" :key="value.id">
               <div class="separator"></div>
               <div class="row req">
                 <p class="col float-left p-0 req-name">{{ value.name }}</p>

src/components/Semester.vue

@@ -1,8 +1,8 @@
 <template>
   <div
     class="semester"
-    v-bind:class="{ 'semester--min': !isNotSemesterButton, 'semester--compact': compact }"
-    v-bind:id="id"
+    :class="{ 'semester--min': !isNotSemesterButton, 'semester--compact': compact }"
+    :id="id"
   >
     <modal :id="'courseModal-' + id" class="semester-modal" type="course" :semesterID="id" />
     <confirmation
@@ -11,12 +11,12 @@
       :text="confirmationText"
     />
     <div v-if="isNotSemesterButton" class="semester-content">
-      <div class="semester-top" v-bind:class="{ 'semester-top--compact': compact }">
-        <div class="semester-left" v-bind:class="{ 'semester-left--compact': compact }">
+      <div class="semester-top" :class="{ 'semester-top--compact': compact }">
+        <div class="semester-left" :class="{ 'semester-left--compact': compact }">
           <span class="semester-name">{{ type }} {{ year }}</span>
           <img class="semester-icon" src="../assets/images/pencil.svg" />
         </div>
-        <div class="semester-right" v-bind:class="{ 'semester-right--compact': compact }">
+        <div class="semester-right" :class="{ 'semester-right--compact': compact }">
           <span class="semester-credits">{{ creditString }}</span>
         </div>
       </div>
@@ -25,38 +25,33 @@
           <div v-for="course in courses" :key="course.id" class="semester-courseWrapper">
             <course
               v-bind="course"
-              v-bind:id="course.subject + course.code"
-              v-bind:compact="compact"
+              :id="course.subject + course.code"
+              :compact="compact"
               class="semester-course"
-              v-on:delete-course="deleteCourse"
-              v-on:color-course="colorCourse"
+              @delete-course="deleteCourse"
+              @color-course="colorCourse"
             />
           </div>
         </div>
         <div
           class="semester-courseWrapper semester-addWrapper"
-          v-bind:class="{ 'semester-addWrapper--compact': compact }"
-          v-on:click="openCourseModal"
+          :class="{ 'semester-addWrapper--compact': compact }"
+          @click="openCourseModal"
         >
-          <span
-            class="semester-buttonText"
-            v-bind:class="{ 'semester-buttonText--compact': compact }"
-            >{{ buttonString }}</span
-          >
+          <span class="semester-buttonText" :class="{ 'semester-buttonText--compact': compact }">{{
+            buttonString
+          }}</span>
         </div>
       </div>
     </div>
-    <div v-if="!isNotSemesterButton" class="semester-empty" v-on:click="openSemesterModal">
-
+    <div v-if="!isNotSemesterButton" class="semester-empty" @click="openSemesterModal">
       <div
         class="semester-semesterWrapper"
-        v-bind:class="{ 'semester-semesterWrapper--compact': compact }"
+        :class="{ 'semester-semesterWrapper--compact': compact }"
       >
-        <span
-          class="semester-buttonText"
-          v-bind:class="{ 'semester-buttonText--compact': compact }"
-          >{{ semesterString }}</span
-        >
+        <span class="semester-buttonText" :class="{ 'semester-buttonText--compact': compact }">{{
+          semesterString
+        }}</span>
       </div>
     </div>
   </div>