[WIP] vuetify2で一応最低限動かせる所まで

config/storybook/config.js

@@ -22,6 +22,7 @@ import {
   createStore,
   ClassBasedStoreOption
 } from '@/store/root'
+import vuetify from '@/vuetify'
 
 addDecorator(() => {
   const container = new Container()
@@ -31,6 +32,7 @@ addDecorator(() => {
 
   return {
     template: "<v-app><story/></v-app>",
+    vuetify,
     store,
     router: new Router()
   }

package.json

@@ -36,7 +36,7 @@
     "vue-proxy-component": "0.0.8",
     "vue-router": "3.0.2",
     "vue-router-layout": "0.1.3",
-    "vuetify": "1.5.0",
+    "vuetify": "^2.0.0",
     "vuex": "3.1.0",
     "vuex-router-sync": "5.0.0"
   },

src/components/containers/loggedInHeader.vue

@@ -1,35 +1,16 @@
 <template>
-  <v-toolbar
-    color="dark"
-    dark
-    app
-    :clipped-left="$vuetify.breakpoint.mdAndUp"
-    fixed
-  >
+  <v-app-bar color="dark" dark :clipped-left="$vuetify.breakpoint.mdAndUp" fixed>
     <v-toolbar-title style="width: 300px" class="ml-0 pl-3" @click="toHome()">
-      <v-toolbar-side-icon
-        @click.stop="toggleDrawer()"/>
+      <v-app-bar-nav-icon @click.stop="toggleDrawer()" />
       <span>Book Management</span>
     </v-toolbar-title>
 
-    <v-text-field
-      flat
-      solo-inverted
-      prepend-icon="search"
-      label="Search"
-      class="hidden-sm-and-down"
-    ></v-text-field>
-    <v-spacer/>
+    <v-spacer />
 
     <v-avatar size="36px" @click="openDialog()" class="clickable">
-      <img
-        width="36"
-        height="36"
-        :src="user.iconFilepath"
-        class="user-icon-img">
+      <img width="36" height="36" :src="user.iconFilepath" class="user-icon-img" />
     </v-avatar>
-
-  </v-toolbar>
+  </v-app-bar>
 </template>
 
 <script lang="ts">

src/components/containers/navigation.vue

@@ -9,62 +9,22 @@
   >
     <v-list dense>
       <template v-for="item in items">
-        <v-layout
-          row
-          v-if="item.heading"
-          align-center
-          :key="item.heading"
-        >
-          <v-flex xs6>
-            <v-subheader v-if="item.heading">
-              {{ item.heading }}
-            </v-subheader>
-          </v-flex>
-          <v-flex xs6 class="text-xs-center">
-            <a href="#!" class="body-2 black--text">EDIT</a>
-          </v-flex>
-        </v-layout>
-        <v-list-group
-          v-else-if="item.children"
-          v-model="item.model"
-          :key="item.text"
-          :prepend-icon="item.model ? item.icon : item['icon-alt']"
-          append-icon=""
-        >
-          <v-list-tile slot="activator">
-            <v-list-tile-content>
-              <v-list-tile-title>
-                {{ item.text }}
-              </v-list-tile-title>
-            </v-list-tile-content>
-          </v-list-tile>
-          <v-list-tile
-            v-for="(child, i) in item.children"
-            :key="i"
-            @click="item.action && fire(item.action)"
-          >
-            <v-list-tile-action v-if="child.icon">
-              <v-icon>{{ child.icon }}</v-icon>
-            </v-list-tile-action>
-            <v-list-tile-content>
-              <v-list-tile-title>
-                {{ child.text }}
-              </v-list-tile-title>
-            </v-list-tile-content>
-          </v-list-tile>
-        </v-list-group>
-        <v-list-tile v-else @click="item.action && fire(item.action)" :key="item.text">
-          <v-list-tile-action>
+        <v-list-item link :key="item.text" @click="fire(item.action)">
+          <v-list-item-icon v-if="item.icon">
             <v-icon>{{ item.icon }}</v-icon>
-          </v-list-tile-action>
-          <v-list-tile-content>
-            <v-list-tile-title>
-              {{ item.text }}
-            </v-list-tile-title>
-          </v-list-tile-content>
-        </v-list-tile>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>{{ item.text }}</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
       </template>
     </v-list>
+
+    <template v-slot:append>
+      <div class="pa-2" @click="logout()">
+        <v-btn block>Logout</v-btn>
+      </div>
+    </template>
   </v-navigation-drawer>
 </template>
 
@@ -99,5 +59,9 @@ export default class Navigation extends Vue {
     this.$store.dispatch(closeDrawer())
     action()
   }
+
+  public logout() {
+    alert('実装されてません')
+  }
 }
 </script>

src/components/containers/unloggedInHeader.vue

@@ -1,30 +1,18 @@
 <template>
-  <v-toolbar
-    color="primary"
-    dark
-    app
-    :clipped-left="$vuetify.breakpoint.mdAndUp"
-    fixed>
+  <v-app-bar color="primary" dark :clipped-left="$vuetify.breakpoint.mdAndUp" fixed>
     <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
       <span>Book Management</span>
     </v-toolbar-title>
-    <v-spacer/>
+    <v-spacer />
 
     <v-btn
       v-if="$route.path.includes('/user/login')"
       color="primary lighten-1"
-      @click="toRegistrationPage()">
-      アカウントを作成
-    </v-btn>
+      @click="toRegistrationPage()"
+    >アカウントを作成</v-btn>
 
-    <v-btn
-      v-else
-      color="primary lighten-1"
-      @click="toLoginPage()">
-      ログイン
-    </v-btn>
-
-  </v-toolbar>
+    <v-btn v-else color="primary lighten-1" @click="toLoginPage()">ログイン</v-btn>
+  </v-app-bar>
 </template>
 
 <script lang="ts">

src/components/organisms/createBookForm.vue

@@ -1,11 +1,11 @@
 <template>
   <v-card class="elevation-12" dark>
-    <v-toolbar card dark>
+    <v-app-bar flat dark>
       <v-btn icon dark @click="cancel()">
         <v-icon>close</v-icon>
       </v-btn>
       <v-toolbar-title>Registration Book</v-toolbar-title>
-    </v-toolbar>
+    </v-app-bar>
 
     <v-card-text>
       <v-form ref="form" v-model="valid" lazy-validation>
@@ -32,7 +32,8 @@
               :rules="titleRules"
               prepend-icon="subject"
               label="タイトル"
-              type="text" />
+              type="text"
+            />
           </v-flex>
         </v-layout>
 
@@ -43,7 +44,8 @@
               :rules="priceRules"
               prepend-icon="attach_money"
               label="価格"
-              type="text" />
+              type="text"
+            />
           </v-flex>
         </v-layout>
 
@@ -53,9 +55,7 @@
               <p>所有者</p>
               <v-btn-toggle color="primary" v-model="owner">
                 <template v-for="owner in ownerList">
-                  <v-btn flat :value="owner" :key="owner">
-                    {{ owner | ownerFilter }}
-                  </v-btn>
+                  <v-btn text :value="owner" :key="owner">{{ owner | ownerFilter }}</v-btn>
                 </template>
               </v-btn-toggle>
             </v-flex>
@@ -70,9 +70,7 @@
               <p>購入場所</p>
               <v-btn-toggle color="primary" v-model="purchasedLocation">
                 <template v-for="location in purchasedLocationList">
-                  <v-btn flat :value="location" :key="location">
-                    {{ location }}
-                  </v-btn>
+                  <v-btn text :value="location" :key="location">{{ location }}</v-btn>
                 </template>
               </v-btn-toggle>
             </v-flex>
@@ -87,9 +85,7 @@
               <p>種類</p>
               <v-btn-toggle color="primary" v-model="type">
                 <template v-for="bookType in bookTypeList">
-                  <v-btn flat :value="bookType" :key="bookType">
-                    {{ bookType | bookTypeFilter }}
-                  </v-btn>
+                  <v-btn text :value="bookType" :key="bookType">{{ bookType | bookTypeFilter }}</v-btn>
                 </template>
               </v-btn-toggle>
             </v-flex>
@@ -102,22 +98,13 @@
           <p>購入日時</p>
           <v-layout row wrap>
             <v-flex xs2 md1>
-              <v-select
-                v-model="purchasedYear"
-                :items="years"
-                solo/>
+              <v-select v-model="purchasedYear" :items="years" solo />
             </v-flex>
             <v-flex xs2 md1>
-              <v-select
-                v-model="purchasedMonth"
-                :items="months"
-                solo/>
+              <v-select v-model="purchasedMonth" :items="months" solo />
             </v-flex>
             <v-flex xs2 md1>
-              <v-select
-                v-model="purchasedDay"
-                :items="days"
-                solo/>
+              <v-select v-model="purchasedDay" :items="days" solo />
             </v-flex>
           </v-layout>
         </v-flex>
@@ -131,7 +118,8 @@
               no-resize
               :rows="rows"
               label="説明文"
-              color="primary" />
+              color="primary"
+            />
           </v-flex>
 
           <SpaceStick width="12" />
@@ -140,19 +128,12 @@
             <Markdown :source="description || 'プレビュー'" />
           </v-flex>
         </v-layout>
-
       </v-form>
-
     </v-card-text>
 
     <v-card-actions>
-      <v-spacer/>
-      <v-btn
-        :disabled="!valid"
-        @click="submit()"
-        color="secondary">
-        登録
-      </v-btn>
+      <v-spacer />
+      <v-btn :disabled="!valid" @click="submit()" color="secondary">登録</v-btn>
     </v-card-actions>
   </v-card>
 </template>
@@ -198,10 +179,10 @@ export default class CreateBookForm extends Vue {
     form: VForm,
   }
 
-  @Prop({required: true})
+  @Prop({ required: true })
   public createBook!: (params: IRegistrationParams) => void
 
-  @Prop({required: true})
+  @Prop({ required: true })
   public user!: IUser
 
   public valid = true

src/components/organisms/loginForm.vue

@@ -1,8 +1,8 @@
 <template>
   <v-card class="elevation-12">
-    <v-toolbar dark color="primary">
+    <v-app-bar dark color="primary">
       <v-toolbar-title>ログインフォーム</v-toolbar-title>
-    </v-toolbar>
+    </v-app-bar>
     <v-card-text>
       <v-form ref="form" v-model="valid" lazy-validation>
         <v-text-field
@@ -27,13 +27,8 @@
       </v-form>
     </v-card-text>
     <v-card-actions>
-      <v-spacer/>
-      <v-btn
-        :disabled="!valid"
-        @click="submit()"
-        color="primary">
-        ログイン
-      </v-btn>
+      <v-spacer />
+      <v-btn :disabled="!valid" @click="submit()" color="primary">ログイン</v-btn>
     </v-card-actions>
   </v-card>
 </template>
@@ -48,7 +43,7 @@ export default class LoginPage extends Vue {
     form: VForm,
   }
 
-  @Prop({required: true}) public login!: (email: string, password: string) => Promise<void>
+  @Prop({ required: true }) public login!: (email: string, password: string) => Promise<void>
 
   public valid = true
   public email = ''