Merge pull request #9 from ajanes93/feature/vuetify-upgrade

Feature/ Vuetify Upgrade
ajanes93 · Jun 3, 2020 · 070c3a7 · 070c3a7
2 parents 5499e3d + eaacbf5
commit 070c3a7
Show file tree

Hide file tree

Showing 13 changed files with 1,184 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,17 @@
 # vuetify-snackbar-queue
 >Simple plugin for queueing v-snackbars in Vuetify
-* Extends VSnackbar component and adds items[] prop
+* Extends VSnackbar component, allowing an array of snackbar items to be passed in.
 * Queues Snackbars displaying one at a time 
 
-## Docs
+## Install for use with Vuetify 2.*
+```npm install vuetify-snackbar-queue```
+
+please note that the `auto-height` prop for the `VSnackbar` component was deprecated in Vuetify 2 and is no longer available.
+
+## Install for use with Vuetify 1.5.*
+```npm install [email protected]```
+
+## Latest component docs
 
 See the docs at [Vuetify Snackbar Queue Docs](https://ajanes93.github.io/vuetify-snackbar-queue/)
 

diff --git a/docs/build/bundle.7991323e.js → docs/build/bundle.2a5699e6.js b/docs/build/bundle.7991323e.js → docs/build/bundle.2a5699e6.js
diff --git a/docs/build/chunk-vendors.bb99bf55.js → docs/build/chunk-vendors.69a58d08.js b/docs/build/chunk-vendors.bb99bf55.js → docs/build/chunk-vendors.69a58d08.js
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vuetify Snackbar Queue</title><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet"></head><body><div id="rsg-root"></div><script src="build/chunk-vendors.bb99bf55.js"></script><script src="build/bundle.7991323e.js"></script></body></html>
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vuetify Snackbar Queue</title><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet"></head><body><div id="rsg-root"></div><script src="build/chunk-vendors.69a58d08.js"></script><script src="build/bundle.2a5699e6.js"></script></body></html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "main": "index.js",
     "dependencies": {
         "vue": "^2.5.17",
-        "vuetify": "^1.3.8"
+        "vuetify": "^2.2.31"
     },
     "devDependencies": {
         "@vue/cli-plugin-babel": "^4.4.1",
@@ -28,9 +28,12 @@
         "eslint-plugin-vue": "^6.2.2",
         "npm-check": "^5.9.2",
         "publish-please": "^5.2.0",
+        "sass": "^1.19.0",
+        "sass-loader": "^8.0.0",
         "vue-cli-plugin-styleguidist": "~4.24.0",
+        "vue-cli-plugin-vuetify": "~2.0.5",
         "vue-template-compiler": "^2.5.17",
-        "vuetify-loader": "^1.0.5"
+        "vuetify-loader": "^1.3.0"
     },
     "bugs": {
         "url": "https://github.com/ajanes93/vuetify-snackbar-queue/issues"

diff --git a/public/index.html b/public/index.html
@@ -10,6 +10,8 @@
         href="//fonts.googleapis.com/css?family=Roboto:100:300,400,500,700,900|Material+Icons"
         rel="stylesheet"
     />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
 </head>
 <body>
 <noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -1,12 +1,12 @@
 <template>
     <v-app>
         <v-content>
-            <v-container fluid grid-list-lg>
-                <v-layout wrap>
-                    <v-flex xs2>
+            <v-container fluid>
+                <v-row>
+                    <v-col cols="2">
                         <v-btn @click="addItem" color="primary">Add to Queue</v-btn>
-                    </v-flex>
-                </v-layout>
+                    </v-col>
+                </v-row>
                 <v-snackbar-queue
                     :items="items"
                     @remove="removeItem"

diff --git a/src/components/VSnackbarQueue.md b/src/components/VSnackbarQueue.md
@@ -18,12 +18,12 @@ Vue.use(VuetifySnackbarQueue)
 
 ```vue
 <template>
-      <v-container grid-list-lg fluid>
-        <v-layout wrap>
-          <v-flex xs2>
+      <v-container fluid>
+        <v-row>
+          <v-col cols="2">
             <v-btn color="primary" @click="addItem">Add to Queue</v-btn>
-          </v-flex>
-        </v-layout>
+          </v-col>
+        </v-row>
         <VSnackbarQueue :items="items" top right @remove="removeItem"></VSnackbarQueue>
       </v-container>
 </template>

diff --git a/src/components/VSnackbarQueue.vue b/src/components/VSnackbarQueue.vue
@@ -2,7 +2,6 @@
     <div>
         <v-snackbar
             :absolute="absolute"
-            :auto-height="autoHeight"
             :bottom="bottom"
             :color="item.color"
             :key="item.id"
@@ -19,15 +18,15 @@
             <v-btn
                 :color="nextButtonColor"
                 @click="removeItem(item.id)"
-                flat
+                text
                 v-if="items.length > 1"
             >
                 {{nextButtonText}} ({{items.length - 1}} more)
             </v-btn>
             <v-btn
                 :color="closeButtonColor"
                 @click="removeItem(item.id)"
-                flat
+                text
                 icon
                 v-else
             >
@@ -56,6 +55,8 @@
                 default: false
             },
             /**
+             * @deprecated since v2.0.0
+             *
              * Auto height prop for snackbar
              */
             autoHeight: {

diff --git a/src/main.js b/src/main.js
@@ -2,10 +2,12 @@ import Vue from 'vue'
 import Vuetify from 'vuetify'
 import App from './App.vue'
 import 'vuetify/dist/vuetify.min.css'
+import vuetify from './plugins/vuetify';
 
 Vue.use(Vuetify, {iconFont: 'md'})
 Vue.config.productionTip = false
 
 new Vue({
+    vuetify,
     render: h => h(App)
 }).$mount('#app')
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import Vuetify, {VApp, VBtn, VCol, VContainer, VContent, VIcon, VLayout, VRow, VSnackbar} from 'vuetify/lib'
+
+Vue.use(Vuetify, {
+    components: {VApp, VLayout, VContainer, VContent, VRow, VCol, VBtn, VSnackbar, VIcon}
+})
+
+export default new Vuetify({
+    icons: {
+        iconfont: 'md'
+    }
+})
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vuetify Snackbar Queue</title><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\|Material+Icons" rel="stylesheet"></head><body><div id="rsg-root"></div><script src="build/chunk-vendors.bb99bf55.js"></script><script src="build/bundle.7991323e.js"></script></body></html>
		<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vuetify Snackbar Queue</title><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\|Material+Icons" rel="stylesheet"></head><body><div id="rsg-root"></div><script src="build/chunk-vendors.69a58d08.js"></script><script src="build/bundle.2a5699e6.js"></script></body></html>