eslint autofixes for vuetify 2

cateditor/.eslintrc.js

@@ -5,8 +5,8 @@ module.exports = {
     es6: true,
   },
   'extends': [
-    'plugin:vue/essential',
+    'plugin:vue/recommended',
-    '@vue/standard'
+    '@vue/standard',
   ],
    plugins: [
     'vuetify'
@@ -23,6 +23,11 @@ module.exports = {
     'vuetify/no-deprecated-classes': 'error',
     'vuetify/grid-unknown-attributes': 'error',
     'vuetify/no-legacy-grid': 'error',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/html-closing-bracket-spacing': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/html-closing-bracket-newline': 'off',
   },
   parserOptions: {
     parser: 'babel-eslint'

cateditor/src/components/AddProductDialog.vue

@@ -6,7 +6,7 @@
         <v-card class="subheading font-weight-bold ma-0 pa-0 white--text" color="keen_dark_grey">
           <v-card-title class="ma-0 pa-2 pl-3">
             Add Materials
-            <v-spacer></v-spacer>
+            <v-spacer/>
             <v-icon color="white" @click="show = false">clear</v-icon>
           </v-card-title>
         </v-card>
@@ -20,15 +20,15 @@
             placeholder="1001234
 1001235..."
             clearable
-          ></v-textarea>
+          />
         </v-card-text>
 
         <v-card-actions>
-          <v-spacer></v-spacer>
+          <v-spacer/>
           <v-btn small text @click="show = false">Cancel</v-btn>
-          <v-spacer></v-spacer>
+          <v-spacer/>
           <v-btn small text color="primary" @click="doAdd()">Add</v-btn>
-          <v-spacer></v-spacer>
+          <v-spacer/>
         </v-card-actions>
 
       </v-card>
@@ -40,12 +40,12 @@
 import { mapActions } from 'vuex'
 
 export default {
-  data: () => ({
-    text: null,
-  }),
   props: {
     value: Boolean,
   },
+  data: () => ({
+    text: null,
+  }),
   computed: {
     show: {
       get() {

cateditor/src/components/AddSectionDialog.vue

@@ -4,31 +4,31 @@
       <v-form v-model="valid">
         <v-card>
           <DialogHeading title="Add Section">
-            <v-btn icon @click="show = false" class="ma-0 pa-0">
+            <v-btn icon class="ma-0 pa-0" @click="show = false">
               <v-icon color="white">clear</v-icon>
             </v-btn>
           </DialogHeading>
 
           <v-card-text>
             <v-text-field
-              :rules="[v => !!v || 'Required']"
               v-model="name"
+              :rules="[v => !!v || 'Required']"
               label="Name"
-              v-on:keydown.enter.prevent="doNewSection()"
               autofocus
-              required>
+              required
-            </v-text-field>
+              @keydown.enter.prevent="doNewSection()"
+            />
           </v-card-text>
 
           <v-card-actions>
-            <v-spacer></v-spacer>
+            <v-spacer/>
             <v-btn flat @click="show = false">Cancel</v-btn>
             <v-btn
               :disabled="!valid"
               color="primary"
               flat
               @click="doNewSection()">OK</v-btn>
-            <v-spacer></v-spacer>
+            <v-spacer/>
           </v-card-actions>
         </v-card>
       </v-form>
@@ -44,13 +44,13 @@ export default {
   components: {
     DialogHeading,
   },
+  props: {
+    value: Boolean,
+  },
   data: () => ({
     name: '',
     valid: false,
   }),
-  props: {
-    value: Boolean,
-  },
   computed: {
     show: {
       get() {

cateditor/src/components/CatalogContents.vue

@@ -9,7 +9,7 @@
       <v-col cols="4">
         <v-card>
           <DragListHeading title="Sections">
-            <v-btn @click="showAddSectionDialog = true" icon class="ma-0 pa-0">
+            <v-btn icon class="ma-0 pa-0" @click="showAddSectionDialog = true">
               <v-icon>add</v-icon>
             </v-btn>
           </DragListHeading>
@@ -26,14 +26,14 @@
                        and so section-drop can cover all interior
                   -->
                   <v-list-item-content class="section-parent">
-                    <v-list-item-title v-html="item.name"></v-list-item-title>
+                    <v-list-item-title v-html="item.name"/>
                     <v-list-item-subtitle
                       class="caption font-weight-light"
                       color="grey lighten-2"
                     >
-                      {{sectionModelCount(item.id)}} {{sectionModelCount(item.id) | pluralize('model') }}
+                      {{ sectionModelCount(item.id) }} {{ sectionModelCount(item.id) | pluralize('model') }}
                     </v-list-item-subtitle>
-                    <v-list-item-subtitle class="section-drop" :section-id="item.id"></v-list-item-subtitle>
+                    <v-list-item-subtitle class="section-drop" :section-id="item.id"/>
                   </v-list-item-content>
 
                   <v-list-item-action>
@@ -67,11 +67,11 @@
                   @click="selectModel(item.model)"
                 >
                   <v-list-item-content>
-                    <v-list-item-title v-html="item.name"></v-list-item-title>
+                    <v-list-item-title v-html="item.name"/>
                     <v-list-item-subtitle
                       class="caption font-weight-light"
                       color="grey lighten-2">
-                      {{item.ids.length}} {{item.ids.length | pluralize('material') }}
+                      {{ item.ids.length }} {{ item.ids.length | pluralize('material') }}
                     </v-list-item-subtitle>
                   </v-list-item-content>
 
@@ -101,13 +101,13 @@
             <div v-for="item in selectedMaterials" :key="item.id">
               <v-hover :key="item.id">
                 <v-list-item
-                  @click="selectMaterial(item.id)"
                   slot-scope="{ hover }"
                   :class="materialListItemClasses(item.id, hover)"
+                  @click="selectMaterial(item.id)"
                 >
                   <v-list-item-content>
                     <v-list-item-title><b>{{ item.id }}</b> {{ item.name }}</v-list-item-title>
-                    <v-list-item-subtitle v-html="item.color"></v-list-item-subtitle>
+                    <v-list-item-subtitle v-html="item.color"/>
                   </v-list-item-content>
 
                   <v-list-item-action>
@@ -200,83 +200,6 @@ export default {
     },
   },
 
-  methods: {
-    sectionModelCount(sectionID) {
-      let section = this.section(sectionID)
-      if (section) {
-        let models = this.sectionModels(section) || []
-        return models.length
-      } else {
-        return 0
-      }
-    },
-
-    sectionListItemClasses(id, hovering) {
-      if (id === this.selectedSectionID) {
-        return 'list-item primary'
-      } else if (hovering) {
-        return 'list-item list-hover'
-      } else {
-        return 'list-item'
-      }
-    },
-
-    modelListItemClasses(id, hovering) {
-      if (id === this.selectedModelID) {
-        return 'list-item primary'
-      } else if (hovering) {
-        return 'list-item list-hover'
-      } else {
-        return 'list-item'
-      }
-    },
-
-    materialListItemClasses(id, hovering) {
-      if (id === this.selectedMaterialID) {
-        return 'list-item primary'
-      } else if (hovering) {
-        return 'list-item list-hover'
-      } else {
-        return 'list-item'
-      }
-    },
-
-    popSectionInfo(id) {
-      this.selectSection(id)
-      this.showSectionInfoDialog = true
-    },
-
-    popSectionDelete(id) {
-      this.selectSection(id)
-      this.showSectionDeleteDialog = true
-    },
-
-    popModelInfo(id) {
-      this.selectModel(id)
-      this.showModelInfoDialog = true
-    },
-
-    popModelDelete(id) {
-      this.selectModel(id)
-      this.showModelDeleteDialog = true
-    },
-
-    popMaterialDelete(id) {
-      this.selectMaterial(id)
-      this.showMaterialDeleteDialog = true
-    },
-
-    ...mapActions([
-      'selectSection',
-      'selectModel',
-      'selectMaterial',
-      'reorderSection',
-      'reorderModel',
-      'reorderMaterial',
-      'moveModelToSection',
-      'moveMaterialToSection',
-    ]),
-  },
   mounted: function() {
     let me = this
 
@@ -359,6 +282,84 @@ export default {
       },
     })
   },
+
+  methods: {
+    sectionModelCount(sectionID) {
+      let section = this.section(sectionID)
+      if (section) {
+        let models = this.sectionModels(section) || []
+        return models.length
+      } else {
+        return 0
+      }
+    },
+
+    sectionListItemClasses(id, hovering) {
+      if (id === this.selectedSectionID) {
+        return 'list-item primary'
+      } else if (hovering) {
+        return 'list-item list-hover'
+      } else {
+        return 'list-item'
+      }
+    },
+
+    modelListItemClasses(id, hovering) {
+      if (id === this.selectedModelID) {
+        return 'list-item primary'
+      } else if (hovering) {
+        return 'list-item list-hover'
+      } else {
+        return 'list-item'
+      }
+    },
+
+    materialListItemClasses(id, hovering) {
+      if (id === this.selectedMaterialID) {
+        return 'list-item primary'
+      } else if (hovering) {
+        return 'list-item list-hover'
+      } else {
+        return 'list-item'
+      }
+    },
+
+    popSectionInfo(id) {
+      this.selectSection(id)
+      this.showSectionInfoDialog = true
+    },
+
+    popSectionDelete(id) {
+      this.selectSection(id)
+      this.showSectionDeleteDialog = true
+    },
+
+    popModelInfo(id) {
+      this.selectModel(id)
+      this.showModelInfoDialog = true
+    },
+
+    popModelDelete(id) {
+      this.selectModel(id)
+      this.showModelDeleteDialog = true
+    },
+
+    popMaterialDelete(id) {
+      this.selectMaterial(id)
+      this.showMaterialDeleteDialog = true
+    },
+
+    ...mapActions([
+      'selectSection',
+      'selectModel',
+      'selectMaterial',
+      'reorderSection',
+      'reorderModel',
+      'reorderMaterial',
+      'moveModelToSection',
+      'moveMaterialToSection',
+    ]),
+  }
 }
 
 function addSectionDrops(myvue) {

cateditor/src/components/CatalogEditor.vue

@@ -6,7 +6,7 @@
 
       <v-stepper-header ma-0 pa-0>
         <v-stepper-step :complete="step > 1" step="1">Catalog info</v-stepper-step>
-        <v-divider></v-divider>
+        <v-divider/>
         <v-stepper-step :complete="step > 2" step="2">Contents</v-stepper-step>
         <!-- <v-divider></v-divider>
              <v-stepper-step step="3">Pagination</v-stepper-step> -->
@@ -15,27 +15,27 @@
       <v-stepper-items>
         <v-stepper-content step="1">
           <CatalogInfo/>
-          <v-spacer></v-spacer>
+          <v-spacer/>
           <v-btn text @click="popExit()">Cancel</v-btn>
           <v-btn
             :disabled="!valid"
-            @click="step = 2"
             color="primary"
-            class="black--text">Next</v-btn>
+            class="black--text"
+            @click="step = 2">Next</v-btn>
         </v-stepper-content>
 
         <v-stepper-content step="2">
           <CatalogContents/>
-          <v-spacer></v-spacer>
+          <v-spacer/>
           <v-btn text @click="popExit()">Cancel</v-btn>
           <v-btn @click="step = 1">Back</v-btn>
           <!-- <v-btn @click="step = 3" color="primary" class="black--text">Next</v-btn> -->
           <v-btn
             :disabled="!valid"
             :loading="savingCatalog"
-            @click.stop="saveCatalog()"
             color="primary"
-            class="black--text">Done</v-btn>
+            class="black--text"
+            @click.stop="saveCatalog()">Done</v-btn>
         </v-stepper-content>
 
         <!-- <v-stepper-content step="3">
@@ -52,7 +52,7 @@
 
     <v-snackbar v-model="showPublicNotice" color="success"
                 multi-line top :timeout="10000">
-      This is a public catalog.<br/>
+      This is a public catalog.<br>
       Changes will be saved in a new catalog that you own.
       <v-btn dark text @click="showPublicNotice = false">Close</v-btn>
     </v-snackbar>
@@ -94,14 +94,6 @@ export default {
       'catalogSavedOK',
     ]),
   },
-  methods: {
-    popExit: function(id) {
-      this.showExitEditorPopup = true
-    },
-    saveCatalog() {
-      this.$store.dispatch('saveCatalog')
-    },
-  },
   watch: {
     catalog(value) {
       if (value) {
@@ -128,6 +120,14 @@ export default {
     } else {
       this.$store.dispatch('newCatalog')
     }
+  },
+  methods: {
+    popExit: function(id) {
+      this.showExitEditorPopup = true
+    },
+    saveCatalog() {
+      this.$store.dispatch('saveCatalog')
+    },
   }
 }
 </script>

cateditor/src/components/CatalogInfo.vue

@@ -10,7 +10,7 @@
           autofocus
           class="headline font-weight-medium"
           height="30px"
-        ></v-text-field>
+        />
       </v-col>
     </v-row>
 
@@ -22,7 +22,8 @@
           item-value="id"
           item-text="name"
           :rules="[rules.required]"
-          label="Season"></v-select>
+          label="Season"
+        />
       </v-col>
       <v-col cols="4">
         <v-select
@@ -33,7 +34,7 @@
           :rules="[rules.required]"
           label="Region"
           class="pl-4"
-        ></v-select>
+        />
       </v-col>
     </v-row>
 
@@ -45,7 +46,7 @@
           label="Email"
           hint="Get notified when the catalog PDF is done"
           persistent-hint
-        ></v-text-field>
+        />
       </v-col>
     </v-row>
 
@@ -54,19 +55,19 @@
         <v-checkbox
           v-model="isPublic"
           label="Public"
-        ></v-checkbox>
+        />
       </v-col>
       <v-col cols="4">
-        <v-checkbox v-model="prices" label="Show prices"></v-checkbox>
+        <v-checkbox v-model="prices" label="Show prices"/>
       </v-col>
     </v-row>
 
     <v-row>
-      <v-col cols="4" v-if="isAdmin">
+      <v-col v-if="isAdmin" cols="4">
-        <v-checkbox v-model="utility" label="Is Utility?"></v-checkbox>
+        <v-checkbox v-model="utility" label="Is Utility?"/>
       </v-col>
-      <v-col cols="4" v-if="isAdmin">
+      <v-col v-if="isAdmin" cols="4">
-        <v-checkbox v-model="master" label="Region master"></v-checkbox>
+        <v-checkbox v-model="master" label="Region master"/>
       </v-col>
     </v-row>
 

cateditor/src/components/CatalogList.vue

@@ -4,10 +4,10 @@
       <v-col cols="3">
         <v-btn color="primary"
                class="black--text"
-               href="/catalog/new">New Catalog</v-btn>
+               href="/catalog/new"
-      </v-col>
+        >New Catalog</v-btn>
-      <v-col cols="9">
       </v-col>
+      <v-col cols="9"/>
     </v-row>
 
     <v-row>
@@ -26,14 +26,14 @@
               <v-card text>
 
                 <v-card-title>
-                  <v-spacer></v-spacer>
+                  <v-spacer/>
                   <v-text-field
                     v-model="search"
                     append-icon="search"
                     label="Search"
                     single-line
                     hide-details
-                  ></v-text-field>
+                  />
                 </v-card-title>
 
                 <v-data-table
@@ -42,11 +42,11 @@
                   :items-per-page="15"
                   :search="search"
                   :loading="loadingMyCatalogs"
-                  @click:row="selectCatalog"
                   class="scroll-area"
+                  @click:row="selectCatalog"
                 >
                   <template v-slot:item.master="{ item }">
-                    <v-tooltip top v-if="item.master">
+                    <v-tooltip v-if="item.master" top>
                       <template v-slot:activator="{ on }">
                         <v-icon small color="red" v-on="on">stars</v-icon>
                       </template>
@@ -59,7 +59,7 @@
                   </template>
 
                   <template v-slot:item.build_progress="{ item }">
-                    <PDFProgress :percentDone="item.build_progress" />
+                    <PDFProgress :percent-done="item.build_progress" />
                   </template>
 
                   <template v-slot:no-results>
@@ -79,14 +79,14 @@
               <v-card text>
 
                 <v-card-title>
-                  <v-spacer></v-spacer>
+                  <v-spacer/>
                   <v-text-field
                     v-model="search"
                     append-icon="search"
                     label="Search"
                     single-line
                     hide-details
-                  ></v-text-field>
+                  />
                 </v-card-title>
 
                 <v-data-table
@@ -95,11 +95,11 @@
                   :items-per-page="15"
                   :search="search"
                   :loading="loadingPublicCatalogs"
-                  @click:row="selectCatalog"
                   class="scroll-area"
+                  @click:row="selectCatalog"
                 >
                   <template v-slot:item.master="{ item }">
-                    <v-tooltip top v-if="item.master">
+                    <v-tooltip v-if="item.master" top>
                       <template v-slot:activator="{ on }">
                         <v-icon small color="red" v-on="on">stars</v-icon>
                       </template>
@@ -112,7 +112,7 @@
                   </template>
 
                   <template v-slot:item.build_progress="{ item }">
-                    <PDFProgress :percentDone="item.build_progress" />
+                    <PDFProgress :percent-done="item.build_progress" />
                   </template>
 
                   <template v-slot:no-results>
@@ -138,7 +138,7 @@
               {{ selectedCatalog.name }}
             </v-toolbar-title>
           </v-toolbar>
-          <v-divider></v-divider>
+          <v-divider/>
           <table class="details">
             <tr v-if="selectedCatalog.master">
               <td class="grey--text">Season master</td>
@@ -166,15 +166,15 @@
             </tr>
             <tr>
               <td class="grey--text">Pages</td>
-              <td>{{ selectedCatalog.pages}}</td>
+              <td>{{ selectedCatalog.pages }}</td>
             </tr>
             <tr>
               <td class="grey--text">Sections</td>
-              <td>{{ selectedCatalog.sections}}</td>
+              <td>{{ selectedCatalog.sections }}</td>
             </tr>
             <tr>
               <td class="grey--text">Materials</td>
-              <td>{{ selectedCatalog.materials}}</td>
+              <td>{{ selectedCatalog.materials }}</td>
             </tr>
             <tr v-if="selectedCatalog.public">
               <td class="grey--text">Public</td>
@@ -189,17 +189,19 @@
             <tr v-if="selectedCatalog.build_progress < 100">
               <td class="grey--text">PDF Build</td>
               <td>
-                <PDFProgress :percentDone="selectedCatalog.build_progress" />
+                <PDFProgress :percent-done="selectedCatalog.build_progress" />
               </td>
             </tr>
           </table>
 
           <v-card-text>
             <v-btn small outlined class="ma-2"
-              :href="'/catalog/edit/' + selectedCatalog.id">Edit</v-btn>
+                   :href="'/catalog/edit/' + selectedCatalog.id"
+            >Edit</v-btn>
             <v-btn small outlined class="ma-2"
-              :disabled="selectedCatalog.build_progress < 100"
+                   :disabled="selectedCatalog.build_progress < 100"
-              :href="selectedCatalog.pdf">Download</v-btn>
+                   :href="selectedCatalog.pdf"
+            >Download</v-btn>
             <!-- <v-btn class="ma-0" small text>Share</v-btn> -->
           </v-card-text>
         </v-card>
@@ -308,6 +310,14 @@ export default {
       'selectedCatalog',
     ]),
   },
+  mounted: function() {
+    this.loadMyCatalogs()
+    this.loadPublicCatalogs()
+    this.interval = setInterval(() => {
+      this.loadMyCatalogs()
+      this.loadPublicCatalogs()
+    }, 10000)
+  },
   methods: {
     ...mapActions([
       'setSelectedCatalog',
@@ -318,14 +328,6 @@ export default {
       this.setSelectedCatalog(cat.id)
     },
   },
-  mounted: function() {
-    this.loadMyCatalogs()
-    this.loadPublicCatalogs()
-    this.interval = setInterval(() => {
-      this.loadMyCatalogs()
-      this.loadPublicCatalogs()
-    }, 10000)
-  }
 }
 </script>
 

cateditor/src/components/DialogHeading.vue

@@ -2,8 +2,8 @@
   <v-card class="subheading font-weight-bold ma-0 pa-0 white--text" color="keen_dark_grey">
     <v-card-title class="ma-0 pa-0 pl-1">
       <span class="pa-2">{{ title }}</span>
-      <v-spacer></v-spacer>
+      <v-spacer/>
-      <slot></slot>
+      <slot/>
     </v-card-title>
   </v-card>
 </template>

cateditor/src/components/DragListHeading.vue

@@ -2,18 +2,18 @@
   <v-card class="subheading font-weight-bold ma-0 pl-2" color="grey lighten-2">
     <v-card-title class="ma-0 pa-0">
       <span class="pa-2">{{ title }}</span>
-      <v-spacer></v-spacer>
+      <v-spacer/>
-      <slot></slot>
+      <slot/>
     </v-card-title>
   </v-card>
 </template>
 
 <script>
 export default {
-  data: () => ({
-  }),
   props: {
     title: String,
   },
+  data: () => ({
+  }),
 }
 </script>

cateditor/src/components/ExitEditorDialog.vue

@@ -4,7 +4,7 @@
       <v-card>
 
         <DialogHeading title="Quit Editor">
-          <v-btn @click="show = false" icon class="ma-0 pa-0">
+          <v-btn icon class="ma-0 pa-0" @click="show = false">
             <v-icon color="white">clear</v-icon>
           </v-btn>
         </DialogHeading>
@@ -14,7 +14,7 @@
         </v-card-text>
 
         <v-card-actions>
-          <v-spacer></v-spacer>
+          <v-spacer/>
           <v-btn flat @click="show = false">Back to editing</v-btn>
           <v-btn flat href="/catalogs">Quit</v-btn>
         </v-card-actions>
@@ -31,11 +31,11 @@ export default {
   components: {
     DialogHeading,
   },
-  data: () => ({
-  }),
   props: {
     value: Boolean,
   },
+  data: () => ({
+  }),
   computed: {
     show: {
       get() {

cateditor/src/components/Loading.vue

@@ -11,11 +11,11 @@
 
 <script>
 export default {
-  data: () => ({
-  }),
   props: {
     text: String,
     show: Boolean,
   },
+  data: () => ({
+  }),
 }
 </script>

cateditor/src/components/MaterialDeleteDialog.vue

@@ -3,7 +3,7 @@
     <v-dialog v-model="show" max-width="250">
       <v-card>
         <DialogHeading title="Remove Material">
-          <v-btn icon @click="show = false" class="ma-0 pa-0">
+          <v-btn icon class="ma-0 pa-0" @click="show = false">
             <v-icon color="white">clear</v-icon>
           </v-btn>
         </DialogHeading>
@@ -17,10 +17,10 @@
         </v-card-text>
 
         <v-card-actions>
-          <v-spacer></v-spacer>
+          <v-spacer/>
           <v-btn text @click="show = false">Cancel</v-btn>
           <v-btn color="primary" text @click="doDelete()">OK</v-btn>
-          <v-spacer></v-spacer>
+          <v-spacer/>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -35,11 +35,11 @@ export default {
   components: {
     DialogHeading,
   },
-  data: () => ({
-  }),
   props: {
     value: Boolean,
   },
+  data: () => ({
+  }),
   computed: {
     ...mapGetters([
       'selectedSection',

cateditor/src/components/ModelDeleteDialog.vue

@@ -3,7 +3,7 @@
     <v-dialog v-model="show" max-width="250">
       <v-card>
         <DialogHeading title="Remove Model">
-          <v-btn icon @click="show = false" class="ma-0 pa-0">
+          <v-btn icon class="ma-0 pa-0" @click="show = false">
             <v-icon color="white">clear</v-icon>
           </v-btn>
         </DialogHeading>
@@ -16,10 +16,10 @@
         </v-card-text>
 
         <v-card-actions>
-          <v-spacer></v-spacer>
+          <v-spacer/>
           <v-btn text @click="show = false">Cancel</v-btn>
           <v-btn color="primary" text @click="doDelete()">OK</v-btn>
-          <v-spacer></v-spacer>
+          <v-spacer/>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -34,11 +34,11 @@ export default {
   components: {
     DialogHeading,
   },
-  data: () => ({
-  }),
   props: {
     value: Boolean,
   },
+  data: () => ({
+  }),
   computed: {
     show: {
       get() {

cateditor/src/components/ModelInfoDialog.vue

@@ -3,20 +3,20 @@
     <v-dialog v-model="show" width="250">
       <v-card>
         <DialogHeading title="Model Info">
-          <v-btn icon @click="show = false" class="ma-0 pa-0">
+          <v-btn icon class="ma-0 pa-0" @click="show = false">
             <v-icon color="white">clear</v-icon>
           </v-btn>
         </DialogHeading>
 
         <v-card-text>
-          <v-text-field v-model="name" label="Name" required></v-text-field>
+          <v-text-field v-model="name" label="Name" required/>
-          {{modelMaterialCount}} {{modelMaterialCount | pluralize('material') }}
+          {{ modelMaterialCount }} {{ modelMaterialCount | pluralize('material') }}
         </v-card-text>
 
         <v-card-actions>
-          <v-spacer></v-spacer>
+          <v-spacer/>
           <v-btn color="primary" text @click="show = false">OK</v-btn>
-          <v-spacer></v-spacer>
+          <v-spacer/>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -31,11 +31,11 @@ export default {
   components: {
     DialogHeading,
   },
-  data: () => ({
-  }),
   props: {
     value: Boolean,
   },
+  data: () => ({
+  }),
   computed: {
     show: {
       get() {

cateditor/src/components/Navbar.vue

@@ -1,12 +1,12 @@
 <template>
   <v-app-bar dark dense absolute app color="keen_dark_grey">
     <!-- <v-toolbar-side-icon></v-toolbar-side-icon> -->
-    <img class="pr-4" src="/static/img/keen_logo.svg" width="100"/>
+    <img class="pr-4" src="/static/img/keen_logo.svg" width="100">
     <v-toolbar-title color="primary" class="headline">
       <span>ProCatalog</span>
       <span class="font-weight-light">&nbsp;{{ pageTitle }}</span>
     </v-toolbar-title>
-    <v-spacer></v-spacer>
+    <v-spacer/>
     <v-toolbar-items class="hidden-sm-and-down">
       <v-btn text small href="/">Dashboard</v-btn>
 

cateditor/src/components/PDFProgress.vue

@@ -4,9 +4,9 @@
       <v-progress-linear
         v-if="percentDone < 100"
         v-model="percentDone"
-        v-on="on"
         color="accent"
-      ></v-progress-linear>
+        v-on="on"
+      />
     </template>
     <span>{{ percentDone }}% complete</span>
   </v-tooltip>

cateditor/src/components/SectionDeleteDialog.vue

@@ -3,7 +3,7 @@
     <v-dialog v-model="show" max-width="250">
       <v-card>
         <DialogHeading title="Delete Section">
-          <v-btn icon @click="show = false" class="ma-0 pa-0">
+          <v-btn icon class="ma-0 pa-0" @click="show = false">
             <v-icon color="white">clear</v-icon>
           </v-btn>
         </DialogHeading>
@@ -16,10 +16,10 @@
         </v-card-text>
 
         <v-card-actions>
-          <v-spacer></v-spacer>
+          <v-spacer/>
           <v-btn text @click="show = false">Cancel</v-btn>
           <v-btn color="primary" text @click="doDelete()">OK</v-btn>
-          <v-spacer></v-spacer>
+          <v-spacer/>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -34,8 +34,6 @@ export default {
   components: {
     DialogHeading,
   },
-  data: () => ({
-  }),
   props: {
     value: Boolean,
     section: {
@@ -43,6 +41,8 @@ export default {
       required: false
     }
   },
+  data: () => ({
+  }),
   computed: {
     show: {
       get() {

cateditor/src/components/SectionInfoDialog.vue

@@ -3,21 +3,21 @@
     <v-dialog v-model="show" width="250">
       <v-card>
         <DialogHeading title="Section Info">
-          <v-btn icon @click="show = false" class="ma-0 pa-0">
+          <v-btn icon class="ma-0 pa-0" @click="show = false">
             <v-icon color="white">clear</v-icon>
           </v-btn>
         </DialogHeading>
 
         <v-card-text>
-          <v-text-field v-model="name" label="Name" required></v-text-field>
+          <v-text-field v-model="name" label="Name" required/>
-          {{sectionModelCount}} {{sectionModelCount | pluralize('model') }}<br/>
+          {{ sectionModelCount }} {{ sectionModelCount | pluralize('model') }}<br>
-          {{sectionMaterialCount}} {{sectionMaterialCount | pluralize('material') }}
+          {{ sectionMaterialCount }} {{ sectionMaterialCount | pluralize('material') }}
         </v-card-text>
 
         <v-card-actions>
-          <v-spacer></v-spacer>
+          <v-spacer/>
           <v-btn color="primary" text @click="show = false">OK</v-btn>
-          <v-spacer></v-spacer>
+          <v-spacer/>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -32,11 +32,11 @@ export default {
   components: {
     DialogHeading,
   },
-  data: () => ({
-  }),
   props: {
     value: Boolean,
   },
+  data: () => ({
+  }),
   computed: {
     show: {
       get() {