vuetify 2.0 support

ricardovanlaarhoven · ricardovanlaarhoven · commit b042a04e7bd4 · 2019-10-23T14:28:13.000+02:00
diff --git a/generator/index.js b/generator/index.js
@@ -14,7 +14,7 @@ module.exports = (api, options) => {
     if (options.useCrud) {
         api.extendPackage({
             dependencies: {
-                '@kingscode/vuetify-resource': '^1.0.0',
+                '@kingscode/vuetify-resource': '^1.1.0',
             },
         });
         api.render('./templates/Crud', {
diff --git a/generator/templates/Authorisation/src/views/InvitationAccept.vue b/generator/templates/Authorisation/src/views/InvitationAccept.vue
@@ -6,7 +6,7 @@
                 <template v-if="!loading">
                     <v-alert
                         :value="errorMessage !== null"
-                        class="mb-4"
+                        class="mb-10"
                         transition="fade-transition"
                         type="error"
                     >
diff --git a/generator/templates/Authorisation/src/views/Login.vue b/generator/templates/Authorisation/src/views/Login.vue
@@ -6,7 +6,7 @@
                     <img :src="require('../assets/logo.png')" class="logo">
                     <v-alert
                         :value="errorMessage !== null"
-                        class="mb-4"
+                        class="mb-10"
                         transition="fade-transition"
                         type="error"
                     >
@@ -39,7 +39,7 @@
             </v-card-text>
             <v-card-actions>
                 <v-spacer></v-spacer>
-                <v-btn @click="handlePasswordForgotten()" color="accent" flat>Wachtwoord vergeten</v-btn>
+                <v-btn @click="handlePasswordForgotten()" color="accent" text>Wachtwoord vergeten</v-btn>
                 <v-btn @click="handleLogin()" tabindex="3" type="submit" color="accent">Inloggen</v-btn>
             </v-card-actions>
         </v-card>
diff --git a/generator/templates/Authorisation/src/views/PasswordForgotten.vue b/generator/templates/Authorisation/src/views/PasswordForgotten.vue
@@ -6,7 +6,7 @@
                     <img :src="require('../assets/logo.png')" class="logo">
                     <v-alert
                         :value="successMessage !== null"
-                        class="mb-4"
+                        class="mb-10"
                         transition="fade-transition"
                         type="success"
                     >
@@ -29,7 +29,7 @@
             </v-card-text>
             <v-card-actions>
                 <v-spacer></v-spacer>
-                <v-btn @click="handleLogin()" color="accent" flat>inloggen</v-btn>
+                <v-btn @click="handleLogin()" color="accent" text>inloggen</v-btn>
                 <v-btn @click="handlePasswordForgotten()" type="submit" color="accent">Wachtwoord aanvragen</v-btn>
             </v-card-actions>
         </v-card>
@@ -81,4 +81,4 @@
         display: block;
         margin: 0 auto;
     }
-</style>
+</style>
diff --git a/generator/templates/Authorisation/src/views/PasswordReset.vue b/generator/templates/Authorisation/src/views/PasswordReset.vue
@@ -6,7 +6,7 @@
                 <template v-if="!loading">
                     <v-alert
                         :value="errorMessage !== null"
-                        class="mb-4"
+                        class="mb-10"
                         transition="fade-transition"
                         type="error"
                     >
diff --git a/generator/templates/Authorisation/src/views/Profile.vue b/generator/templates/Authorisation/src/views/Profile.vue
@@ -1,11 +1,11 @@
 <template>
     <v-container>
-        <v-layout align-center justify-center mt-5>
+        <v-layout align-center justify-center mt-12>
             <v-flex xs12 sm10 md8 lg6 xl4>
                 <v-form @submit.prevent="updateProfile" ref="profileForm">
                     <v-subheader class="pa-0">Profiel</v-subheader>
                     <v-card class="themed-color">
-                        <div class="text-xs-center pa-5"
+                        <div class="text-xs-center pa-12"
                              v-if="profileFormLoading">
                             <v-progress-circular
                                 :width="3"
@@ -46,7 +46,7 @@
                 <v-form  @submit.prevent="updatePassword" ref="passwordForm">
                     <v-subheader class="pa-0">Wachtwoord</v-subheader>
                     <v-card class="themed-color">
-                        <div class="text-xs-center pa-5"
+                        <div class="text-xs-center pa-12"
                              v-if="passwordFormLoading">
                             <v-progress-circular
                                 :width="3"
diff --git a/generator/templates/Crud/src/components/forms/User.vue b/generator/templates/Crud/src/components/forms/User.vue
@@ -1,29 +1,27 @@
 <template>
     <v-container>
-        <v-layout align-center justify-center mt-5>
-            <v-flex lg6 md8 sm10 xl4 xs12>
-                <v-form ref="form" v-model="valid">
-                    <v-subheader class="pa-0">Gebruiker</v-subheader>
-                    <v-card class="themed-color">
-                        <v-card-text>
-                            <v-text-field
-                                :counter="100"
-                                :rules="[(v) => !!v || 'Naam is verplicht', v => serverError('name', v), (v) => !!v && v.length <= 100 || 'de naam mag maximaal 100 tekens bevatten']"
-                                label="Naam"
-                                class="required"
-                                v-model="values.name"></v-text-field>
-                            <v-text-field
-                                :counter="150"
-                                :rules="[(v) => !!v || 'E-mail is verplicht', v => serverError('email', v), (v) => !!v && v.length <= 100 || 'het e-mailadres mag maximaal 150 tekens bevatten']"
-                                label="E-mail"
-                                hint="Het e-mailadres waarmee de gebruiker gaat inloggen en waarnaar een mail verzonden wordt met instructies om een wachtwoord aan te maken"
-                                class="required"
-                                v-model="values.email"></v-text-field>
-                        </v-card-text>
-                    </v-card>
-                </v-form>
-            </v-flex>
-        </v-layout>
+        <v-form ref="form" v-model="valid" class="mt-5">
+            <v-col cols="12" sm="10" offset-sm="1" md="8" offset-md="2" lg="6" offset-lg="3">
+                <v-subheader class="pa-0">Gebruiker</v-subheader>
+                <v-card class="themed-color">
+                    <v-card-text>
+                        <v-text-field
+                            :counter="100"
+                            :rules="[(v) => !!v || 'Naam is verplicht', v => serverError('name', v), (v) => !!v && v.length <= 100 || 'de naam mag maximaal 100 tekens bevatten']"
+                            label="Naam"
+                            class="required"
+                            v-model="values.name"></v-text-field>
+                        <v-text-field
+                            :counter="150"
+                            :rules="[(v) => !!v || 'E-mail is verplicht', v => serverError('email', v), (v) => !!v && v.length <= 100 || 'het e-mailadres mag maximaal 150 tekens bevatten']"
+                            label="E-mail"
+                            hint="Het e-mailadres waarmee de gebruiker gaat inloggen en waarnaar een mail verzonden wordt met instructies om een wachtwoord aan te maken"
+                            class="required"
+                            v-model="values.email"></v-text-field>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-form>
     </v-container>
 </template>
 
diff --git a/generator/templates/Default/public/_htaccess b/generator/templates/Default/public/_htaccess
diff --git a/generator/templates/Default/src/App.vue b/generator/templates/Default/src/App.vue
@@ -7,7 +7,7 @@
                 v-model="menu"
             >
                 <img :src="require('../assets/logo.png')" @click="$router.push({name: 'home'})" class="logo">
-                <v-divider class="mt-4"/>
+                <v-divider class="mt-10"/>
                 <main-menu/>
             </v-navigation-drawer>
             <v-toolbar app color="primary" dark mfixed>
@@ -20,7 +20,7 @@
                 <router-view/>
             </v-content>
             <v-footer app color="primary" inset>
-                <span class="white--text pl-3">Created by Kings Code</span>
+                <span class="white--text pl-6">Created by Kings Code</span>
             </v-footer>
         </v-app>
     </div>
@@ -59,4 +59,4 @@
     .v-dialog--fullscreen > .v-card.v-sheet.theme--light {
         background: rgb(248, 249, 250);
     }
-</style>
+</style>
diff --git a/generator/templates/Default/src/Views/PageForbidden.vue b/generator/templates/Default/src/Views/PageForbidden.vue
@@ -3,7 +3,7 @@
         <h1>
             Onjuiste autorisatie
         </h1>
-        <div class="my-5 title">Je hebt niet voldoende rechten om deze actie uit te mogen voeren</div>
+        <div class="my-12 title">Je hebt niet voldoende rechten om deze actie uit te mogen voeren</div>
         <v-btn color="primary" @click="home">Terug naar de homepage</v-btn>
     </div>
 </template>
@@ -25,4 +25,4 @@
 
 <style scoped lang="scss">
 
-</style>
+</style>
diff --git a/generator/templates/Default/src/Views/PageNotFound.vue b/generator/templates/Default/src/Views/PageNotFound.vue
@@ -3,7 +3,7 @@
         <h1>
             Pagina niet gevonden
         </h1>
-        <div class="my-5 title">De pagina die u probeert te bereiken is niet gevonden</div>
+        <div class="my-12 title">De pagina die u probeert te bereiken is niet gevonden</div>
         <v-btn color="primary" @click="home">Terug naar de startpagina</v-btn>
     </div>
 </template>
@@ -25,4 +25,4 @@
 
 <style scoped lang="scss">
 
-</style>
+</style>
diff --git a/generator/templates/Default/src/components/MainMenu.vue b/generator/templates/Default/src/components/MainMenu.vue
@@ -1,50 +1,50 @@
 <template>
     <v-list>
         <div
-            :key="item.title"
-            v-for="item in items">
+            :key="index"
+            v-for="(item, index) in items">
             <v-list-group
                 :disabled="item.disabled"
                 :prepend-icon="item.icon"
                 no-icon
                 v-if="typeof item.items !== 'undefined'"
                 v-model="item.active"
             >
-                <v-list-tile @click="routeTo('merchant')" slot="activator">
-                    <v-list-tile-content>
-                        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
-                    </v-list-tile-content>
-                </v-list-tile>
+                <v-list-item slot="activator">
+                    <v-list-item-content>
+                        <v-list-item-title>{{ item.title }}</v-list-item-title>
+                    </v-list-item-content>
+                </v-list-item>
 
-                <v-list-tile
+                <v-list-item
                     :key="subItem.title"
                     @click="routeTo(subItem.route)"
 
                     v-for="subItem in item.items"
-                    v-model="$route.name === subItem.route"
+                    :value="$route.name === subItem.route"
                 >
-                    <v-list-tile-action>
+                    <v-list-item-action>
                         <v-icon>{{ subItem.icon }}</v-icon>
-                    </v-list-tile-action>
-                    <v-list-tile-content>
-                        <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
-                    </v-list-tile-content>
+                    </v-list-item-action>
+                    <v-list-item-content>
+                        <v-list-item-title>{{ subItem.title }}</v-list-item-title>
+                    </v-list-item-content>
 
-                </v-list-tile>
+                </v-list-item>
             </v-list-group>
-            <v-list-tile
+            <v-list-item
                 @click="routeTo(item.route)"
                 v-else
-                v-model="$route.name === item.route"
+                :value="$route.name === item.route"
             >
-                <v-list-tile-action>
+                <v-list-item-action>
                     <v-icon>{{ item.icon }}</v-icon>
-                </v-list-tile-action>
-                <v-list-tile-content>
-                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
-                </v-list-tile-content>
+                </v-list-item-action>
+                <v-list-item-content>
+                    <v-list-item-title>{{ item.title }}</v-list-item-title>
+                </v-list-item-content>
 
-            </v-list-tile>
+            </v-list-item>
         </div>
 
     </v-list>
@@ -68,8 +68,8 @@
         methods: {
             routeTo(name) {
                 this.$router.push({name: name});
-            }
-        }
+            },
+        },
     };
 </script>
 
diff --git a/generator/templates/Default/src/components/ProfileMenu.vue b/generator/templates/Default/src/components/ProfileMenu.vue
@@ -5,18 +5,18 @@
         offset-y
         transition="slide-y-transition"
     >
-        <v-btn class="mr-3" fab icon slot="activator">
+        <v-btn class="mr-6" fab icon slot="activator">
             <v-avatar class="accent" size="48" title>
                 <v-icon>fa-user</v-icon>
             </v-avatar>
         </v-btn>
         <v-list>
-            <v-list-tile @click="routeTo('profile')">
-                <v-list-tile-title>Profiel</v-list-tile-title>
-            </v-list-tile>
-            <v-list-tile @click="logout">
-                <v-list-tile-title>Uitloggen</v-list-tile-title>
-            </v-list-tile>
+            <v-list-item @click="routeTo('profile')">
+                <v-list-item-title>Profiel</v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="logout">
+                <v-list-item-title>Uitloggen</v-list-item-title>
+            </v-list-item>
         </v-list>
     </v-menu>
 </template>
@@ -47,4 +47,4 @@
 
 <style scoped lang="scss">
 
-</style>
+</style>
diff --git a/generator/templates/Default/src/newmain.js b/generator/templates/Default/src/newmain.js
@@ -1,7 +1,7 @@
 import '@babel/polyfill'
 import Vue from 'vue'
 import API from './API.js';
-import './plugins/vuetify'
+import vuetify from './plugins/vuetify';
 <%_ if (options.useCrud) { _%>
 import VuetifyResource from '@kingscode/vuetify-resource';
 <%_ } _%>
diff --git a/generator/templates/Default/src/plugins/vuetify.js b/generator/templates/Default/src/plugins/vuetify.js
@@ -4,24 +4,34 @@ import '@fortawesome/fontawesome-pro/css/all.css';
 import 'vuetify/dist/vuetify.min.css';
 import nl from 'vuetify/es5/locale/nl';
 
-Vue.use(Vuetify, {
-    customProperties: true,
-    iconfont: 'fa',
+Vue.use(Vuetify);
+export default new Vuetify({
     icons: {
-        'close': 'fas fa-times',
-        'menu': 'fas fa-bars',
-        'delete': 'fas fa-trash',
-        'add': 'fas fa-plus',
-        'edit': 'fas fa-pencil-alt',
-        'search': 'fas fa-search',
+        iconfont: 'fa',
+        values: {
+            'close': 'far fa-times',
+            'menu': 'far fa-bars',
+            'delete': 'far fa-trash-alt',
+            'add': 'far fa-plus',
+            'edit': 'far fa-pencil-alt',
+            'search': 'far fa-search',
+        },
     },
+    customProperties: true,
     lang: {
         locales: {nl},
         current: 'nl',
     },
     theme: {
-        primary: '#002F4E',
-        secondary: '#000000',
-        accent: '#FFD0B1',
+        options: {
+            customProperties: true,
+        },
+        themes: {
+            light: {
+                primary: '#002F4E',
+                secondary: '#000000',
+                accent: '#FFD0B1',
+            },
+        },
     },
 });
diff --git a/generator/templates/TemplateLoader/src/templates/Default.vue b/generator/templates/TemplateLoader/src/templates/Default.vue

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`<template v-if="!loading">`
`7`	`7`	`<v-alert`
`8`	`8`	`:value="errorMessage !== null"`
`9`		`- class="mb-4"`
	`9`	`+ class="mb-10"`
`10`	`10`	`transition="fade-transition"`
`11`	`11`	`type="error"`
`12`	`12`	`>`