Only use eagle components we actually want

Author: larsenwork

components/slides/blur.vue

@@ -62,13 +62,13 @@
 </template>
 
 <script>
-import eagle from 'eagle.js'
+import { Slide } from 'eagle.js'
 import gradientOutput from '~/components/tools/gradient/calculations/gradient-output'
 import slideshowMethods from '~/components/mixins/slideshow'
 import images from '~/components/piter/images'
 
 export default {
-  mixins: [eagle.slide, gradientOutput, slideshowMethods],
+  mixins: [Slide, gradientOutput, slideshowMethods],
   props: {
     id: { default: '', type: String },
   },

components/slides/color-spaces-demo.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import eagle from 'eagle.js'
+import { Slide } from 'eagle.js'
 import easingEdit from '~/components/tools/gradient/easing-edit'
 import easingPreview from '~/components/tools/gradient/easing-preview'
 import gradientOutput from '~/components/tools/gradient/calculations/gradient-output'
@@ -47,7 +47,7 @@ export default {
     easingEdit,
     easingPreview,
   },
-  mixins: [eagle.slide, gradientOutput, slideshowMethods],
+  mixins: [Slide, gradientOutput, slideshowMethods],
   props: {
     steps: { default: 3, type: Number },
     id: { default: '', type: String },

components/slides/gamma-correction.vue

@@ -34,13 +34,13 @@
 </template>
 
 <script>
-import eagle from 'eagle.js'
+import { Slide } from 'eagle.js'
 import gradientOutput from '~/components/tools/gradient/calculations/gradient-output'
 import slideshowMethods from '~/components/mixins/slideshow'
 import chroma from 'chroma-js'
 
 export default {
-  mixins: [eagle.slide, gradientOutput, slideshowMethods],
+  mixins: [Slide, gradientOutput, slideshowMethods],
   props: {
     id: { default: '', type: String },
   },

components/slides/helmholz.vue

@@ -30,13 +30,13 @@
 </template>
 
 <script>
-import eagle from 'eagle.js'
+import { Slide } from 'eagle.js'
 import gradientOutput from '~/components/tools/gradient/calculations/gradient-output'
 import slideshowMethods from '~/components/mixins/slideshow'
 import images from '~/components/piter/images'
 
 export default {
-  mixins: [eagle.slide, gradientOutput, slideshowMethods],
+  mixins: [Slide, gradientOutput, slideshowMethods],
   props: {
     id: { default: '', type: String },
   },

components/slides/linear-to-easing.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script>
-import eagle from 'eagle.js'
+import { Slide } from 'eagle.js'
 import easingEdit from '~/components/tools/gradient/easing-edit'
 import easingPreview from '~/components/tools/gradient/easing-preview'
 import gradientOutput from '~/components/tools/gradient/calculations/gradient-output'
@@ -71,7 +71,7 @@ export default {
     easingEdit,
     easingPreview,
   },
-  mixins: [eagle.slide, gradientOutput, slideshowMethods],
+  mixins: [Slide, gradientOutput, slideshowMethods],
   props: {
     steps: { default: 3, type: Number },
     id: { default: '', type: String },

pages/talks/piter.vue

@@ -8,7 +8,7 @@
     }"
     class="c-presentation eg-slideshow"
   >
-    <slide id="intro" >
+    <slide id="intro">
       <h1>Easing Gradients, the Squircle of Colors</h1>
       <p>Andreas Larsen<br>@larsenwork</p>
     </slide>
@@ -193,7 +193,7 @@
 </template>
 
 <script>
-import eagle from 'eagle.js'
+import { Slideshow } from 'eagle.js'
 import slideshowMethods from '~/components/mixins/slideshow'
 import prism from '~/components/prism'
 import gradientOutput from '~/components/tools/gradient/calculations/gradient-output'
@@ -216,7 +216,7 @@ export default {
     gammaCorrection,
     helmholz,
   },
-  mixins: [eagle.slideshow, slideshowMethods, gradientOutput],
+  mixins: [Slideshow, slideshowMethods, gradientOutput],
   props: {
     mouseNavigation: { default: false, type: Boolean },
     // backBySlide: { default: true, type: Boolean },

plugins/eagle.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
-import Eagle from 'eagle.js'
+import { Slide, Transition } from 'eagle.js'
 
-Vue.use(Eagle)
+Vue.component(Slide.name, Slide)
+Vue.component(Transition.name, Transition)