Merge branch 'new-vue'

cateditor/.eslintrc.js

@@ -5,18 +5,29 @@ module.exports = {
     es6: true,
   },
   'extends': [
-    'plugin:vue/essential',
+    '@vue/standard',
-    '@vue/standard'
+    'plugin:vue/recommended',
+  ],
+  plugins: [
+    'vuetify'
   ],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'indent': ["warn", 2, { CallExpression: { arguments: "first" },
+    'indent': ['warn', 2, { CallExpression: { arguments: 'first' },
-                            ObjectExpression: "first",
+                            ObjectExpression: 'first',
-                            ArrayExpression: "first" }],
+                            ArrayExpression: 'first' }],
     'comma-dangle': ['warn', 'only-multiline'],
     'spaced-comment': 'off',
     'space-before-function-paren': ['warn', 'never'],
+    'vue/html-closing-bracket-newline': 'off',
+    'vue/html-closing-bracket-spacing': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
+    'vuetify/grid-unknown-attributes': 'error',
+    'vuetify/no-deprecated-classes': 'error',
+    'vuetify/no-legacy-grid': 'error',
   },
   parserOptions: {
     parser: 'babel-eslint'

cateditor/package.json

@@ -8,11 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@vue/cli": "^3.11.0",
     "array-move": "^2.1.0",
-    "axios": "^0.18.1",
+    "axios": "^0.19.0",
-    "vue": "^2.6.6",
+    "vue": "^2.6.10",
-    "vue2-filters": "^0.6.1",
+    "vue2-filters": "^0.7.2",
-    "vuetify": "^1.5.18",
+    "vuetify": "^2.1.0",
     "vuex": "^3.1.1"
   },
   "devDependencies": {
@@ -21,15 +22,17 @@
     "@vue/cli-service": "^3.11.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.3",
-    "eslint": "^5.16.0",
+    "eslint": "^5.0.0",
     "eslint-plugin-vue": "^5.2.3",
-    "fibers": "^3.1.1",
+    "eslint-plugin-vuetify": "^1.0.0-beta.3",
-    "material-design-icons-iconfont": "^4.0.5",
+    "fibers": "^4.0.1",
+    "material-design-icons-iconfont": "^5.0.1",
+    "node-sass": "^4.12.0",
     "sass": "^1.22.12",
     "sass-loader": "^7.3.1",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.1",
-    "vue-cli-plugin-vuetify": "^0.5.0",
+    "vue-cli-plugin-vuetify": "^0.6.3",
     "vue-template-compiler": "^2.5.21",
     "vuedraggable": "^2.23.1",
     "vuetify-loader": "^1.3.0",

cateditor/src/components/AddProductDialog.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="text-xs-center">
+  <div class="text-center">
     <v-dialog v-model="show" width="280">
       <v-card>
 
         <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 flat @click="show = false">Cancel</v-btn>
+          <v-btn small text @click="show = false">Cancel</v-btn>
-          <v-spacer></v-spacer>
+          <v-spacer/>
-          <v-btn small flat color="primary" @click="doAdd()">Add</v-btn>
+          <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

@@ -1,34 +1,34 @@
 <template>
-  <div class="text-xs-center">
+  <div class="text-center">
     <v-dialog v-model="show" width="300">
       <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

@@ -1,15 +1,15 @@
 <template>
-  <v-container fluid grid-list-lg ma-0 pa-1>
+  <v-container fluid>
 
-    <v-layout row fill-height>
+    <v-row class="fill-height">
       <v-btn @click="showAddProductDialog = true">Add products</v-btn>
-    </v-layout>
+    </v-row>
 
-    <v-layout row fill-height>
+    <v-row class="fill-height">
-      <v-flex xs4>
+      <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>
@@ -17,7 +17,7 @@
           <div id="sections" class="list-group">
             <div v-for="item in catalog.sections" :key="item.id">
               <v-hover :key="item.id">
-                <v-list-tile
+                <v-list-item
                   slot-scope="{ hover }"
                   :class="sectionListItemClasses(item.id, hover)"
                   @click="selectSection(item.id)"
@@ -25,18 +25,18 @@
                   <!-- TODO try move sectionparent into v-list-title
                        and so section-drop can cover all interior
                   -->
-                  <v-list-tile-content class="section-parent">
+                  <v-list-item-content class="section-parent">
-                    <v-list-tile-title v-html="item.name"></v-list-tile-title>
+                    <v-list-item-title v-text="item.name"/>
-                    <v-list-tile-sub-title
+                    <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-tile-sub-title>
+                    </v-list-item-subtitle>
-                    <v-list-tile-sub-title class="section-drop" :section-id="item.id"></v-list-tile-sub-title>
+                    <v-list-item-subtitle class="section-drop" :section-id="item.id"/>
-                  </v-list-tile-content>
+                  </v-list-item-content>
 
-                  <v-list-tile-action>
+                  <v-list-item-action>
                     <span class="group">
                       <v-btn icon @click.stop="popSectionInfo(item.id)">
                         <v-icon small color="grey lighten-1">info</v-icon>
@@ -45,37 +45,37 @@
                         <v-icon small color="grey lighten-1">delete</v-icon>
                       </v-btn>
                     </span>
-                  </v-list-tile-action>
+                  </v-list-item-action>
 
-                </v-list-tile>
+                </v-list-item>
               </v-hover>
             </div>
           </div>
         </v-card>
-      </v-flex>
+      </v-col>
 
-      <v-flex xs4>
+      <v-col cols="4">
         <v-card>
           <DragListHeading title="Models" />
 
           <div id="models" class="list-group">
             <div v-for="item in selectedModels" :key="item.model">
               <v-hover :key="item.model">
-                <v-list-tile
+                <v-list-item
                   slot-scope="{ hover }"
                   :class="modelListItemClasses(item.model, hover)"
                   @click="selectModel(item.model)"
                 >
-                  <v-list-tile-content>
+                  <v-list-item-content>
-                    <v-list-tile-title v-html="item.name"></v-list-tile-title>
+                    <v-list-item-title v-text="item.name"/>
-                    <v-list-tile-sub-title
+                    <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-tile-sub-title>
+                    </v-list-item-subtitle>
-                  </v-list-tile-content>
+                  </v-list-item-content>
 
-                  <v-list-tile-action>
+                  <v-list-item-action>
                     <span class="group">
                       <v-btn icon @click.stop="popModelInfo(item.model)">
                         <v-icon small color="grey lighten-1">info</v-icon>
@@ -84,48 +84,47 @@
                         <v-icon small color="grey lighten-1">delete</v-icon>
                       </v-btn>
                     </span>
-                  </v-list-tile-action>
+                  </v-list-item-action>
 
-                </v-list-tile>
+                </v-list-item>
               </v-hover>
             </div>
           </div>
         </v-card>
-      </v-flex>
+      </v-col>
 
-      <v-flex xs4>
+      <v-col cols="4">
         <v-card>
           <DragListHeading title="Materials" />
 
           <div id="materials" class="list-group">
             <div v-for="item in selectedMaterials" :key="item.id">
               <v-hover :key="item.id">
-                <v-list-tile
+                <v-list-item
-                  @click="selectMaterial(item.id)"
                   slot-scope="{ hover }"
                   :class="materialListItemClasses(item.id, hover)"
+                  @click="selectMaterial(item.id)"
                 >
-                  <v-list-tile-content>
+                  <v-list-item-content>
-                    <v-list-tile-title><b>{{ item.id }}</b> {{ item.name }}</v-list-tile-title>
+                    <v-list-item-title><b>{{ item.id }}</b> {{ item.name }}</v-list-item-title>
-                    <v-list-tile-sub-title v-html="item.color"></v-list-tile-sub-title>
+                    <v-list-item-subtitle v-text="item.color"/>
-                  </v-list-tile-content>
+                  </v-list-item-content>
 
-                  <v-list-tile-action>
+                  <v-list-item-action>
                     <span class="group">
                       <v-btn icon @click="popMaterialDelete(item.id)">
                         <v-icon small color="grey lighten-1">delete</v-icon>
                       </v-btn>
                     </span>
-                  </v-list-tile-action>
+                  </v-list-item-action>
-                </v-list-tile>
+                </v-list-item>
               </v-hover>
             </div>
           </div>
         </v-card>
+      </v-col>
 
-      </v-flex>
+    </v-row>
-
-    </v-layout>
 
     <AddProductDialog v-model="showAddProductDialog"/>
     <AddSectionDialog v-model="showAddSectionDialog"/>
@@ -201,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
 
@@ -360,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,32 +15,32 @@
       <v-stepper-items>
         <v-stepper-content step="1">
           <CatalogInfo/>
-          <v-spacer></v-spacer>
+          <v-spacer/>
-          <v-btn flat @click="popExit()">Cancel</v-btn>
+          <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 flat @click="popExit()">Cancel</v-btn>
+          <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">
              <CatalogPagination/>
-             <v-btn flat>Cancel</v-btn>
+             <v-btn text>Cancel</v-btn>
              <v-btn @click="step = 2">Back</v-btn>
              <v-btn color="primary" class="black--text">Save</v-btn>
              </v-stepper-content> -->
@@ -52,9 +52,9 @@
 
     <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 flat @click="showPublicNotice = false">Close</v-btn>
+      <v-btn dark text @click="showPublicNotice = false">Close</v-btn>
     </v-snackbar>
 
   </v-form>
@@ -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

@@ -1,16 +1,8 @@
 <template>
-  <v-container fluid grid-list-sm>
+  <v-container fluid>
 
-    <!--
+    <v-row>
-    <v-layout row>
+      <v-col cols="8">
-      <v-flex xs8>
-        <h2>Catalog Info</h2>
-      </v-flex>
-    </v-layout>
-    -->
-
-    <v-layout row>
-      <v-flex xs8>
         <v-text-field
           v-model="name"
           label="Catalog name"
@@ -18,21 +10,22 @@
           autofocus
           class="headline font-weight-medium"
           height="30px"
-        ></v-text-field>
+        />
-      </v-flex>
+      </v-col>
-    </v-layout>
+    </v-row>
 
-    <v-layout row>
+    <v-row>
-      <v-flex xs4>
+      <v-col cols="4">
         <v-select
           v-model="season"
           :items="seasons"
           item-value="id"
           item-text="name"
           :rules="[rules.required]"
-          label="Season"></v-select>
+          label="Season"
-      </v-flex>
+        />
-      <v-flex xs4>
+      </v-col>
+      <v-col cols="4">
         <v-select
           v-model="region"
           :items="regions"
@@ -41,42 +34,42 @@
           :rules="[rules.required]"
           label="Region"
           class="pl-4"
-        ></v-select>
+        />
-      </v-flex>
+      </v-col>
-    </v-layout>
+    </v-row>
 
-    <v-layout row>
+    <v-row>
-      <v-flex xs8>
+      <v-col cols="8">
         <v-text-field
           v-model="email"
           :rules="[rules.emailRules]"
           label="Email"
           hint="Get notified when the catalog PDF is done"
           persistent-hint
-        ></v-text-field>
+        />
-      </v-flex>
+      </v-col>
-    </v-layout>
+    </v-row>
 
-    <v-layout row>
+    <v-row>
-      <v-flex xs4>
+      <v-col cols="4">
         <v-checkbox
           v-model="isPublic"
           label="Public"
-        ></v-checkbox>
+        />
-      </v-flex>
+      </v-col>
-      <v-flex xs4>
+      <v-col cols="4">
-        <v-checkbox v-model="prices" label="Show prices"></v-checkbox>
+        <v-checkbox v-model="prices" label="Show prices"/>
-      </v-flex>
+      </v-col>
-    </v-layout>
+    </v-row>
 
-    <v-layout row>
+    <v-row>
-      <v-flex xs4 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-flex>
+      </v-col>
-      <v-flex xs4 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-flex>
+      </v-col>
-    </v-layout>
+    </v-row>
 
   </v-container>
 </template>

cateditor/src/components/CatalogList.vue

@@ -1,63 +1,65 @@
 <template>
-  <v-container fluid grid-list-lg>
+  <v-container fluid>
-    <v-layout row>
+    <v-row>
-      <v-flex xs3 class="pa-0 ma-0">
+      <v-col cols="3">
         <v-btn color="primary"
                class="black--text"
-               href="/catalog/new">New Catalog</v-btn>
+               href="/catalog/new"
-      </v-flex>
+        >New Catalog</v-btn>
-      <v-flex xs9>
+      </v-col>
-      </v-flex>
+      <v-col cols="9"/>
-    </v-layout>
+    </v-row>
 
-    <v-layout row>
+    <v-row>
-      <v-flex xs8>
+      <v-col cols="8">
 
-        <v-card class="pa-0">
+        <v-card>
-          <v-tabs v-model="activeTab" color="keen_light_grey" slider-color="keen_dark_grey">
+          <v-tabs v-model="activeTab"
+                  color="black"
+                  background-color="keen_light_grey"
+                  slider-color="keen_dark_grey">
             <v-tab key="mine">My Catalogs</v-tab>
             <v-tab key="public">Public Catalogs</v-tab>
 
+            <!-- my catalogs -->
             <v-tab-item key="mine">
-              <v-card flat>
+              <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
                   :headers="myHeaders"
                   :items="myCatalogs"
+                  :items-per-page="15"
                   :search="search"
                   :loading="loadingMyCatalogs"
-                  disable-initial-sort
                   class="scroll-area"
+                  @click:row="selectCatalog"
                 >
-                  <template v-slot:items="cats">
+                  <template v-slot:item.master="{ item }">
-                    <tr @click="selectCatalog(cats.item.id)">
+                    <v-tooltip v-if="item.master" top>
-                      <td v-if="cats.item.master" class="px-2 py-0">
+                      <template v-slot:activator="{ on }">
-                        <v-tooltip top>
+                        <v-icon small color="red" v-on="on">stars</v-icon>
-                          <template v-slot:activator="{ on }">
+                      </template>
-                            <v-icon small color="red" v-on="on">stars</v-icon>
+                      <span>Season master</span>
-                          </template>
+                    </v-tooltip>
-                          <span>Season master</span>
+                  </template>
-                        </v-tooltip>
+
-                      </td>
+                  <template v-slot:item.updated="{ item }">
-                      <td v-else class="pa-0"></td>
+                    {{ item.updatedPretty }}
-                      <td class="px-2 py-0">{{ cats.item.seasonCode }}</td>
+                  </template>
-                      <td class="px-2 py-0">{{ cats.item.name }}</td>
+
-                      <td class="px-2 py-0">{{ cats.item.updatedPretty }}</td>
+                  <template v-slot:item.build_progress="{ item }">
-                      <td class="px-2 py-0">
+                    <PDFProgress :percent-done="item.build_progress" />
-                        <PDFProgress :percentDone="cats.item.build_progress" />
-                      </td>
-                    </tr>
                   </template>
 
                   <template v-slot:no-results>
@@ -72,47 +74,45 @@
               </v-card>
             </v-tab-item>
 
+            <!-- public catalogs -->
             <v-tab-item key="public">
-              <v-card flat>
+              <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
                   :headers="pubHeaders"
                   :items="publicCatalogs"
+                  :items-per-page="15"
                   :search="search"
                   :loading="loadingPublicCatalogs"
-                  disable-initial-sort
                   class="scroll-area"
+                  @click:row="selectCatalog"
                 >
-                  <template v-slot:items="cats">
+                  <template v-slot:item.master="{ item }">
-                    <tr @click="selectCatalog(cats.item.id)">
+                    <v-tooltip v-if="item.master" top>
-                      <td v-if="cats.item.master" class="px-2 py-0">
+                      <template v-slot:activator="{ on }">
-                        <v-tooltip top>
+                        <v-icon small color="red" v-on="on">stars</v-icon>
-                          <template v-slot:activator="{ on }">
+                      </template>
-                            <v-icon small color="red" v-on="on">stars</v-icon>
+                      <span>Season master</span>
-                          </template>
+                    </v-tooltip>
-                          <span>Season master</span>
+                  </template>
-                        </v-tooltip>
+
-                      </td>
+                  <template v-slot:item.updated="{ item }">
-                      <td v-else class="pa-0"></td>
+                    {{ item.updatedPretty }}
-                      <td class="px-2 py-0">{{ cats.item.seasonCode }}</td>
+                  </template>
-                      <td class="px-2 py-0">{{ cats.item.ownerName }}</td>
+
-                      <td class="px-2 py-0">{{ cats.item.name }}</td>
+                  <template v-slot:item.build_progress="{ item }">
-                      <td class="px-2 py-0">{{ cats.item.updatedPretty }}</td>
+                    <PDFProgress :percent-done="item.build_progress" />
-                      <td class="px-2 py-0">
-                        <PDFProgress :percentDone="cats.item.build_progress" />
-                      </td>
-                    </tr>
                   </template>
 
                   <template v-slot:no-results>
@@ -129,16 +129,16 @@
           </v-tabs>
         </v-card>
 
-      </v-flex>
+      </v-col>
 
-      <v-flex xs4>
+      <v-col cols="4">
         <v-card v-if="selectedCatalog">
           <v-toolbar dense color="keen_light_grey" class="elevation-0">
             <v-toolbar-title color="primary" class="headline">
               {{ 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,27 +189,27 @@
             <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-divider></v-divider>
           <v-card-text>
-            <v-btn class="ma-0" small flat :href="'/catalog/edit/' + selectedCatalog.id">Edit</v-btn>
+            <v-btn small outlined class="ma-2"
-            <v-btn
+                   :href="'/catalog/edit/' + selectedCatalog.id"
-              class="ma-0"
+            >Edit</v-btn>
-              small flat
+            <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"
-            <!-- <v-btn class="ma-0" small flat>Share</v-btn> -->
+            >Download</v-btn>
+            <!-- <v-btn class="ma-0" small text>Share</v-btn> -->
           </v-card-text>
         </v-card>
         <v-card v-else>
           <v-card-text class="grey--text">No catalog selected</v-card-text>
         </v-card>
-      </v-flex>
+      </v-col>
-    </v-layout>
+    </v-row>
 
   </v-container>
 </template>
@@ -310,16 +310,6 @@ export default {
       'selectedCatalog',
     ]),
   },
-  methods: {
-    ...mapActions([
-      'setSelectedCatalog',
-      'loadMyCatalogs',
-      'loadPublicCatalogs',
-    ]),
-    selectCatalog(id) {
-      this.setSelectedCatalog(id)
-    },
-  },
   mounted: function() {
     this.loadMyCatalogs()
     this.loadPublicCatalogs()
@@ -327,7 +317,17 @@ export default {
       this.loadMyCatalogs()
       this.loadPublicCatalogs()
     }, 10000)
-  }
+  },
+  methods: {
+    ...mapActions([
+      'setSelectedCatalog',
+      'loadMyCatalogs',
+      'loadPublicCatalogs',
+    ]),
+    selectCatalog(cat) {
+      this.setSelectedCatalog(cat.id)
+    },
+  },
 }
 </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>
@@ -11,7 +11,10 @@
 <script>
 export default {
   props: {
-    title: String,
+    title: {
+      type: String,
+      default: 'Title',
+    }
   },
 }
 </script>

cateditor/src/components/DragListHeading.vue

@@ -2,18 +2,21 @@
   <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 {
+  props: {
+    title: {
+      type: String,
+      default: 'Title',
+    },
+  },
   data: () => ({
   }),
-  props: {
-    title: String,
-  },
 }
 </script>

cateditor/src/components/ExitEditorDialog.vue

@@ -1,10 +1,10 @@
 <template>
-  <v-layout row justify-center>
+  <v-row justify="center">
     <v-dialog v-model="show" max-width="280">
       <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,13 +14,13 @@
         </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>
       </v-card>
     </v-dialog>
-  </v-layout>
+  </v-row>
 </template>
 
 <script>
@@ -31,11 +31,11 @@ export default {
   components: {
     DialogHeading,
   },
-  data: () => ({
-  }),
   props: {
     value: Boolean,
   },
+  data: () => ({
+  }),
   computed: {
     show: {
       get() {

cateditor/src/components/Loading.vue

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

cateditor/src/components/MaterialDeleteDialog.vue

@@ -1,9 +1,9 @@
 <template>
-  <v-layout row justify-center>
+  <v-row justify="center">
     <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,14 +17,14 @@
         </v-card-text>
 
         <v-card-actions>
-          <v-spacer></v-spacer>
+          <v-spacer/>
-          <v-btn flat @click="show = false">Cancel</v-btn>
+          <v-btn text @click="show = false">Cancel</v-btn>
-          <v-btn color="primary" flat @click="doDelete()">OK</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>
-  </v-layout>
+  </v-row>
 </template>
 
 <script>
@@ -35,11 +35,11 @@ export default {
   components: {
     DialogHeading,
   },
-  data: () => ({
-  }),
   props: {
     value: Boolean,
   },
+  data: () => ({
+  }),
   computed: {
     ...mapGetters([
       'selectedSection',

cateditor/src/components/ModelDeleteDialog.vue

@@ -1,9 +1,9 @@
 <template>
-  <v-layout row justify-center>
+  <v-row justify="center">
     <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,14 +16,14 @@
         </v-card-text>
 
         <v-card-actions>
-          <v-spacer></v-spacer>
+          <v-spacer/>
-          <v-btn flat @click="show = false">Cancel</v-btn>
+          <v-btn text @click="show = false">Cancel</v-btn>
-          <v-btn color="primary" flat @click="doDelete()">OK</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>
-  </v-layout>
+  </v-row>
 </template>
 
 <script>
@@ -34,11 +34,11 @@ export default {
   components: {
     DialogHeading,
   },
-  data: () => ({
-  }),
   props: {
     value: Boolean,
   },
+  data: () => ({
+  }),
   computed: {
     show: {
       get() {

cateditor/src/components/ModelInfoDialog.vue

@@ -1,22 +1,22 @@
 <template>
-  <div class="text-xs-center">
+  <div class="text-center">
     <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" flat @click="show = false">OK</v-btn>
+          <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,49 +1,54 @@
 <template>
-  <v-toolbar dark dense absolute app color="keen_dark_grey">
+  <v-app-bar dark dense absolute app color="keen_dark_grey">
     <!-- <v-toolbar-side-icon></v-toolbar-side-icon> -->
-    <img src="/static/img/keen_logo.svg" width="85"/>
+    <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 flat small href="/">Dashboard</v-btn>
+      <v-btn text small href="/">Dashboard</v-btn>
 
       <v-menu open-on-hover bottom offset-y>
         <template v-slot:activator="{ on }">
-          <v-btn flat small v-on="on">Support</v-btn>
+          <v-btn text small v-on="on">Support</v-btn>
         </template>
         <v-list class="navbar-menu ma-0 pa-0">
-          <v-list-tile dense class="navbar-menu-item">
+          <v-list-item dense class="navbar-menu-item">
-            <v-btn flat small href="mailto:support@procatalog.io?Subject=Keen%20ProCatalog%20support%20request" class="navbar-menu-button">Email Support</v-btn>
+            <v-btn text small href="mailto:support@procatalog.io?Subject=Keen%20ProCatalog%20support%20request" class="navbar-menu-button">Email Support</v-btn>
-          </v-list-tile>
+          </v-list-item>
         </v-list>
       </v-menu>
 
       <v-menu open-on-hover bottom offset-y>
         <template v-slot:activator="{ on }">
-          <v-btn flat small v-on="on">
+          <v-btn text small v-on="on">
             Account
           </v-btn>
         </template>
         <v-list class="navbar-menu ma-0 pa-0">
-          <v-list-tile dense class="navbar-menu-item">
+          <v-list-item dense class="navbar-menu-item">
-            <v-btn flat small href="/account/settings" class="navbar-menu-button">Profile</v-btn>
+            <v-btn text small href="/account/settings" class="navbar-menu-button">Profile</v-btn>
-          </v-list-tile>
+          </v-list-item>
-          <v-list-tile dense class="navbar-menu-item">
+          <v-list-item dense class="navbar-menu-item">
-            <v-btn flat small href="/account/logout" class="navbar-menu-button">Log Out</v-btn>
+            <v-btn text small href="/account/logout" class="navbar-menu-button">Log Out</v-btn>
-          </v-list-tile>
+          </v-list-item>
         </v-list>
       </v-menu>
 
     </v-toolbar-items>
-  </v-toolbar>
+  </v-app-bar>
 </template>
 
 <script>
 export default {
-  props: ['pageTitle'],
+  props: {
+    pageTitle: {
+      type: String,
+      default: 'Title',
+    },
+  },
   data: () => ({
     foo: true
   })

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>
@@ -15,7 +15,10 @@
 <script>
 export default {
   props: {
-    percentDone: Number,
+    percentDone: {
+      type: Number,
+      default: 0,
+    },
   },
 }
 </script>

cateditor/src/components/SectionDeleteDialog.vue

@@ -1,9 +1,9 @@
 <template>
-  <v-layout row justify-center>
+  <v-row justify="center">
     <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,14 +16,14 @@
         </v-card-text>
 
         <v-card-actions>
-          <v-spacer></v-spacer>
+          <v-spacer/>
-          <v-btn flat @click="show = false">Cancel</v-btn>
+          <v-btn text @click="show = false">Cancel</v-btn>
-          <v-btn color="primary" flat @click="doDelete()">OK</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>
-  </v-layout>
+  </v-row>
 </template>
 
 <script>
@@ -34,15 +34,16 @@ export default {
   components: {
     DialogHeading,
   },
-  data: () => ({
-  }),
   props: {
     value: Boolean,
     section: {
       type: Number,
-      required: false
+      required: false,
+      default: null,
     }
   },
+  data: () => ({
+  }),
   computed: {
     show: {
       get() {

cateditor/src/components/SectionInfoDialog.vue

@@ -1,23 +1,23 @@
 <template>
-  <div class="text-xs-center">
+  <div class="text-center">
     <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" flat @click="show = false">OK</v-btn>
+          <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() {

cateditor/src/pages/editor/main.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import './../../plugins/vuetify'
+import Vuetify from 'vuetify/lib'
 import Vue2Filters from 'vue2-filters'
 import App from './App.vue'
 import { store } from './store'
@@ -7,8 +7,35 @@ import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure
 
 Vue.config.productionTip = false
 Vue.use(Vue2Filters)
+Vue.use(Vuetify)
+
+const opts = {
+  theme: {
+    themes: {
+      light: {
+        primary: '#fdd02f',
+        keen_yellow: '#fddd04',
+        keen_dark_grey: '#373737',
+        keen_light_grey: '#bababa',
+        secondary: '#424242',
+        accent: '#82B1FF',
+        error: '#FF5252',
+        info: '#2196F3',
+        success: '#4CAF50',
+        warning: '#FFC107'
+      },
+    },
+  },
+  options: {
+    customProperties: true
+  },
+  // icons: {
+  //   iconfont: 'md',
+  // },
+}
 
 new Vue({
   store,
-  render: h => h(App)
+  render: h => h(App),
+  vuetify: new Vuetify(opts)
 }).$mount('#app')

cateditor/src/pages/list/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
-import '../../plugins/vuetify'
+import Vuetify from 'vuetify/lib'
+
 import Vue2Filters from 'vue2-filters'
 import App from './App.vue'
 import { store } from './store'
@@ -7,8 +8,35 @@ import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure
 
 Vue.config.productionTip = false
 Vue.use(Vue2Filters)
+Vue.use(Vuetify)
+
+const opts = {
+  theme: {
+    themes: {
+      light: {
+        primary: '#fdd02f',
+        keen_yellow: '#fddd04',
+        keen_dark_grey: '#373737',
+        keen_light_grey: '#bababa',
+        secondary: '#424242',
+        accent: '#82B1FF',
+        error: '#FF5252',
+        info: '#2196F3',
+        success: '#4CAF50',
+        warning: '#FFC107'
+      },
+    },
+  },
+  options: {
+    customProperties: true
+  },
+  // icons: {
+  //   iconfont: 'md',
+  // },
+}
 
 new Vue({
   store,
-  render: h => h(App)
+  render: h => h(App),
+  vuetify: new Vuetify(opts)
 }).$mount('#app')

cateditor/src/pages/list/store/index.js

@@ -57,7 +57,9 @@ export const store = new Vuex.Store({
               commit('setSelectedCatalog', response.data.catalogs[0])
             } else {
               let cat = response.data.catalogs.find(c => c.id === state.selectedCatalog.id)
-              commit('setSelectedCatalog', cat)
+              if (cat) {
+                commit('setSelectedCatalog', cat)
+              } // otherwise might be a public catalog
             }
           }
         } else {

cateditor/src/plugins/vuetify.js

@@ -1,22 +1,33 @@
-import Vue from 'vue'
+//
-import Vuetify from 'vuetify/lib'
+// NOTE: appears to be unused.  it's also out of date.
-import 'vuetify/src/stylus/app.styl'
+//
 
-Vue.use(Vuetify, {
+// import Vue from 'vue'
-  theme: {
+// import Vuetify from 'vuetify/lib'
-    primary: '#fdd02f',
+
-    keen_yellow: '#fddd04',
+// const opts = {
-    keen_dark_grey: '#373737',
+//   theme: {
-    keen_light_grey: '#bababa',
+//     primary: '#fdd02f',
-    secondary: '#424242',
+//     keen_yellow: '#fddd04',
-    accent: '#82B1FF',
+//     keen_dark_grey: '#373737',
-    error: '#FF5252',
+//     keen_light_grey: '#bababa',
-    info: '#2196F3',
+//     secondary: '#424242',
-    success: '#4CAF50',
+//     accent: '#82B1FF',
-    warning: '#FFC107'
+//     error: '#FF5252',
-  },
+//     info: '#2196F3',
-  options: {
+//     success: '#4CAF50',
-    customProperties: true
+//     warning: '#FFC107'
-  },
+//   },
-  iconfont: 'md'
+//   options: {
-})
+//     customProperties: true
+//   },
+//   icons: {
+//     iconfont: 'md',
+//   },
+// }
+
+// Vue.use(Vuetify)
+
+// new Vue({
+//   vuetify: new Vuetify(opts)
+// }).$mount('#app')