Update packages & [email protected].

Author: antoniandre

package-lock.json

@@ -26,9 +26,9 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.8.0",
-    "@vue/cli-plugin-eslint": "^3.8.0",
-    "@vue/cli-service": "^3.8.4",
+    "@vue/cli-plugin-babel": "^3.9.2",
+    "@vue/cli-plugin-eslint": "^3.9.2",
+    "@vue/cli-service": "^3.9.3",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-polyfill": "^6.26.0",
     "node-sass": "^4.12.0",
@@ -37,9 +37,9 @@
     "sass-loader": "^7.0.1",
     "simple-syntax-highlighter": "^1.0.6",
     "vue": "^2.6.10",
-    "vue-cli-plugin-vuetify": "^0.5.0",
+    "vue-cli-plugin-vuetify": "^0.6.1",
     "vue-scrollto": "^2.15.0",
     "vue-template-compiler": "^2.6.10",
-    "vuetify": "^1.5.16"
+    "vuetify": "^2.0.1"
   }
 }

package.json

@@ -1,8 +1,9 @@
 <template lang="pug">
   v-app.white(:class="{ ready: ready }" v-scroll="onScroll")
-    v-container
-      top-bar(:offset-top="offsetTop")
-      documentation
+    v-content
+      v-container
+        top-bar(:offset-top="offsetTop")
+        documentation
 
     v-fab-transition
       v-btn(color="primary" fixed bottom right fab v-show="!goTopHidden" small href="#top")

src/app.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-component(:is="tag" :class="'highlight ' + type")
+component(:is="tag" :class="'highlight highlight--' + type")
   v-icon {{ icon }}
   slot
 </template>
@@ -53,27 +53,27 @@ export default {
   padding: 8px 15px;
   border-left: 3px solid;
 
-  &.info {
+  &--info {
     background-color: rgba(#09f, 0.08) !important;
     border-color: #09f !important;
   }
 
-  &.success {
+  &--success {
     background-color: rgba(#6c0, 0.1) !important;
     border-color: #6c0 !important;
   }
 
-  &.tips {
+  &--tips {
     background-color: rgba(#ff0, 0.15) !important;
     border-color: #fd0 !important;
   }
 
-  &.warning {
+  &--warning {
     background-color: rgba(#fa0, 0.1) !important;
     border-color: #fa0 !important;
   }
 
-  &.error {
+  &--error {
     background-color: rgba(#f33, 0.08) !important;
     border-color: #f33 !important;
   }
@@ -87,33 +87,33 @@ export default {
     height: 15px;
   }
 
-  &.info .v-icon {
+  &--info .v-icon {
     background: #09f !important;
     transform: rotate(180deg);
     font-size: 23px;
     top: 0.4em;
   }
 
-  &.success .v-icon {
+  &--success .v-icon {
     background-color: #6c0 !important;
     font-size: 15px;
     top: 0.7em;
   }
 
-  &.error .v-icon {
+  &--error .v-icon {
     background-color: #f33 !important;
     font-size: 15px;
     top: 0.7em;
   }
 
-  &.tips .v-icon {
+  &--tips .v-icon {
     background-color: #fd0 !important;
     font-size: 14px;
     top: 0.7em;
     transform: rotate(180deg);
   }
 
-  &.warning .v-icon {
+  &--warning .v-icon {
     background-color: #fa0 !important;
     top: 0.4em;
   }

src/components/highlight-message/index.vue

@@ -1,20 +1,21 @@
 <template lang="pug">
-v-toolbar.top-bar(app light color="white" dense flat fixed align-center :class="{'scrolled': offsetTop > 104}")
-  v-toolbar-title
+v-app-bar.top-bar(app light color="white" dense text fixed align-center :class="{'scrolled': offsetTop > 104}")
+  v-toolbar-title.top-bar__title
     h1.primary--text
-      a.v-toolbar__logo-link(href="#top")
-        svg.v-toolbar__logo(xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 442 442")
+      a.top-bar__logo-link(href="#top")
+        svg.top-bar__logo(xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 442 442")
           path(d="M166.6 225.2c4 16 27.3 26.3 59.5 26.3 24 0 39.3-8.8 45.6-17a19.7 19.7 0 0 0 3.5-18c-3.6-13-22.4-19.3-52.8-28.2l-8.5-2.5c-31-9-66.3-19.3-73.7-46.2a43.3 43.3 0 0 1 8.5-39.8 10 10 0 0 0-7.8-16.4h-35a10 10 0 0 0-7.7 3.5l-43 50a10 10 0 0 0 0 13l74.3 86.4a10 10 0 0 0 17.5-7.7 10 10 0 0 1 19.6-3.4zm-16.9-26.7c-6.9 1.7-12.7 5.7-16.8 11.1l-57-66.2 34.5-40h13a62.7 62.7 0 0 0-2.5 41.6c10.5 37.6 53.1 50 87.4 60l8.5 2.5c8.5 2.5 18.1 5.3 26 8.3a45.3 45.3 0 0 1 13 6.5c-2.8 3.7-13 9.2-29.7 9.2-27.2 0-39-8.3-40-11a30 30 0 0 0-36.4-22zM263.2 264.5a97 97 0 0 1-37.1 7c-18.8 0-35.8-3.2-49.1-9.3a10 10 0 0 0-11.8 15.6l48.2 56a10 10 0 0 0 15.2 0l46-53.5a10 10 0 0 0-11.4-15.8zM221 312l-19-22a167.4 167.4 0 0 0 37.2 1l-18.2 21z")
           path(d="M336.2 83.4h-36.6a10 10 0 0 0-7.5 16.6 44.8 44.8 0 0 1 11.4 30.3 10 10 0 0 1-20 0c0-25.3-34.2-36.6-68.1-36.6-27.3 0-44.7 10-51.8 19.5a23 23 0 0 0-4.1 21c4.1 15 27.5 23 60 32.4l8.5 2.5c30.6 9 59.6 17.4 66.4 42 1.6 5.6 2 11.1 1.2 16.6a10 10 0 0 0 17.5 7.9l73.7-85.6a10 10 0 0 0 0-13l-43-50a10 10 0 0 0-7.6-3.6zm-22.8 121.2c-10.3-34.5-47.2-45.2-79.8-54.7l-8.5-2.5c-10-2.9-21.2-6.2-30.7-10-12.5-4.9-15.3-8.1-15.7-8.7-.4-1.4-.3-2 .8-3.4 3-4 14.4-11.6 35.9-11.6 27.5 0 48.1 8.8 48.1 16.6a30 30 0 0 0 60 0c0-9.5-2-18.5-5.7-26.9h13.8l34.4 40-52.6 61.2z")
           path(d="M439.6 137L362 47a10 10 0 0 0-7.6-3.6h-267a10 10 0 0 0-7.6 3.5L2.4 137a10 10 0 0 0 0 13l211 245.2a10 10 0 0 0 15.2 0l211-245.1a10 10 0 0 0 0-13zM221 373.1L23.2 143.4l68.9-80h257.8l69 80L221 373.2z")
-        div.v-toolbar__logo-title Vueper Slides&nbsp;
+        div.top-bar__logo-title Vueper Slides&nbsp;
       span.intro A Vue Super Slideshow / Carousel
-  v-toolbar-items.v-toolbar__items
+  v-toolbar-items.top-bar__items
     v-menu(offset-y open-on-hover left attach transition="slide-y-transition")
-      v-btn(flat color="secondary" href="#vueper-slides--api" slot="activator")
-        v-icon school
-        | &nbsp;
-        span Doc
+      template(v-slot:activator="{ on }")
+        v-btn(text color="secondary" href="#vueper-slides--api" v-on="on")
+          v-icon school
+          | &nbsp;
+          span Doc
       v-list.no-wrap
         v-list-tile(color="secondary" href="#installation") Installation
         v-list-tile(color="secondary" href="#how-to-use") How To Use
@@ -30,10 +31,11 @@ v-toolbar.top-bar(app light color="white" dense flat fixed align-center :class="
         v-list-tile(color="secondary" href="#styling") Styling
         v-list-tile(color="secondary" href="#notable-version-changes") Notable Version Changes
     v-menu(offset-y open-on-hover left attach transition="slide-y-transition")
-      v-btn(flat color="secondary" href="#examples" slot="activator")
-        v-icon apps
-        | &nbsp;
-        span Examples
+      template(v-slot:activator="{ on }")
+        v-btn(text color="secondary" href="#examples" slot="activator" v-on="on")
+          v-icon apps
+          | &nbsp;
+          span Examples
       v-list.no-wrap
         v-list-tile(color="secondary" href="#ex--simplest-ever") Simplest Ever
         v-list-tile(color="secondary" href="#ex--basic") Basic with Autoplay
@@ -81,14 +83,14 @@ $primary: #ff5252;
 $secondary: #42b983;
 $lighter-text: #ccc;
 
-.v-toolbar {
+.top-bar {
   z-index: 100;
   position: absolute;
   border-bottom: 1px solid transparent !important;
   transition: 0.3s ease-in-out all, 0.1s 0s ease-in-out border-color;
   top: 0;
 
-  &__content {
+  .v-toolbar__content {
     padding-left: 0;
     padding-right: 0;
   }
@@ -209,24 +211,24 @@ $lighter-text: #ccc;
     border-bottom-color: $lighter-text !important;
     position: fixed;
 
-    & .v-toolbar__title {
+    & .top-bar__title {
       width: 100%;
       transition: 0.6s ease-in-out all, 0.3s 0.3s ease-in-out background-color;
     }
 
-    & .v-toolbar__logo {
+    & .top-bar__logo {
       width: 37px;
     }
 
-    & .v-toolbar__logo-title {
+    & .top-bar__logo-title {
       font-size: 0.7em;
     }
 
-    & .v-toolbar__logo-title:after {
+    & .top-bar__logo-title:after {
       opacity: 0;
     }
 
-    & .v-toolbar__items {
+    & .top-bar__items {
       transition: 0.3s 0.3s ease-in-out all;
       transform: translateX(0%);
       opacity: 1;
@@ -242,11 +244,11 @@ $lighter-text: #ccc;
 }
 
 @media screen and (max-width: 449px) {
-  .v-toolbar__items .v-btn {
+  .top-bar__items .v-btn {
     min-width: 50px;
   }
 
-  .v-toolbar__items a .v-btn__content span {
+  .top-bar__items a .v-btn__content span {
     display: none;
   }
 }

src/components/top-bar.vue

@@ -343,13 +343,13 @@
     v-layout.flex.xs12.sm6(align-center)
       div Try it:
       v-layout.flex.xs10.sm11(align-center wrap)
-        v-btn(color="primary" @click="toggleSlidesTime" small)
+        v-btn.ma-1(color="primary" @click="toggleSlidesTime" small)
           v-icon.pr-2 {{ slidesTimeTimerId ? 'highlight_off' : 'access_time' }}
           | {{ slidesTimeTimerId ? 'Stop' : 'Keep' }} updating time
         v-slide-x-transition.xs6.sm3
-          v-chip(v-show="slidesTimeTimerId === 0" small outline disabled) CPU says THANK YOU!
+          v-chip(v-show="slidesTimeTimerId === 0" small outlined disabled) CPU says THANK YOU!
     v-layout.flex.xs12.sm6.mb-4(align-center wrap)
-      v-btn(color="primary" @click="contentPositionChange" small)
+      v-btn.ma-1(color="primary" @click="contentPositionChange" small)
         v-icon swap_vert
         |  Move content position
       strong.code slide-content-outside="#[span.primary--text {{ contentPosition }}]"
@@ -417,13 +417,13 @@
   p
     | This example illustrates how to add or remove slides on the fly from a running Vueper Slides instance.#[br]
     | You can also completely freeze the slideshow and unfreeze when you want to.#[br]
-    v-btn(color="primary" @click="appendSlide" small)
+    v-btn.ma-1(color="primary" @click="appendSlide" small)
       v-icon add
       |   Add Slide
-    v-btn(color="primary" @click="removeSlide" small)
+    v-btn.ma-1(color="primary" @click="removeSlide" small)
       v-icon remove
       |   Remove Slide
-    v-btn(color="secondary" @click="toggleSlideshow" small)
+    v-btn.ma-1(color="secondary" @click="toggleSlideshow" small)
       v-icon {{ slideshowDisabled ? 'check_circle' : 'highlight_off'}}
       |   {{ slideshowDisabled ? 'Enable' : 'Disable' }} Slideshow
   highlight Note that the slideshow disables controls if you have only 1 slide or none.
@@ -629,7 +629,7 @@
   p
     | This example demonstrates how to create a parallax effect on your slideshow.#[br]
     | Two values can be set for different parallax effects: #[span.code 1] for standard effect, and #[span.code -1] for reverse effect.
-    v-btn(small color="primary" @click="parallax *= -1;$refs.exParallax.refreshParallax()")
+    v-btn.ma-1(small color="primary" @click="parallax *= -1;$refs.exParallax.refreshParallax()")
       v-icon sync
       |   Reverse parallax effect
     strong #[span.code parallax = {{ parallax.toString() }}]
@@ -803,13 +803,13 @@
       refer to the #[a(href="#ex--parallax") Parallax Effect] example.
 
   div.text-xs-center.mb-3
-    v-btn(color="primary" small @click="$refs.myVueperSlides.previous()")
+    v-btn.ma-1(color="primary" small @click="$refs.myVueperSlides.previous()")
       v-icon arrow_back
       |   Previous
-    v-btn(color="primary" small @click="$refs.myVueperSlides.goToSlide(5)")
+    v-btn.ma-1(color="primary" small @click="$refs.myVueperSlides.goToSlide(5)")
       v-icon call_made
       |   Go to slide 6
-    v-btn(color="primary" small @click="$refs.myVueperSlides.next()")
+    v-btn.ma-1(color="primary" small @click="$refs.myVueperSlides.next()")
       v-icon arrow_forward
       |   Next
   vueper-slides(:slide-ratio="1/5" ref="myVueperSlides")
@@ -1532,12 +1532,12 @@ pre {
 
 // APPLICATION
 //=================================================//
-.application {
+.v-application {
   background-color: #fff !important;
   padding-top: 8em;
 }
 
-.application--wrap {
+.v-application--wrap {
   padding-top: 16em;
   overflow-x: hidden;
 }

src/documentation/index.vue

@@ -1,10 +1,11 @@
 import 'babel-polyfill'
 import Vue from 'vue'
-import './plugins/vuetify'
+import vuetify from './plugins/vuetify'
 import App from './app.vue'
 
 Vue.config.productionTip = false
 
 new Vue({
-  render: h => h(App)
+  render: h => h(App),
+  vuetify
 }).$mount('#app')

src/main.js

@@ -2,14 +2,23 @@ import Vue from 'vue'
 import Vuetify from 'vuetify'
 import 'vuetify/dist/vuetify.min.css'
 
-Vue.use(Vuetify, {
-  iconfont: ['md', 'fa'],
+Vue.use(Vuetify)
+
+export default new Vuetify({
+  icons: {
+    iconfont: ['md', 'fa']
+  },
   theme: {
-    primary: '#ff5252',
-    secondary: '#42b983',
-    maintext: '#999',
-    darktext: '#444',
-    lightertext: '#ccc',
-    lightgrey: '#eee'
+    dark: false,
+    themes: {
+      light: {
+        primary: '#ff5252',
+        secondary: '#42b983',
+        maintext: '#999',
+        darktext: '#444',
+        lightertext: '#ccc',
+        lightgrey: '#eee'
+      }
+    }
   }
 })