From b79632d39bb8c496b115e42e1187b761d9b496f4 Mon Sep 17 00:00:00 2001
From: Travis Kaufman <traviskaufman@users.noreply.github.com>
Date: Tue, 20 Dec 2016 10:42:13 -0500
Subject: [PATCH] fix(framework-examples): Fix VueJS example (#135)

Resolves #124
[ci skip]
---
 framework-examples/vue/build/webpack.base.conf.js   | 12 +++++-------
 framework-examples/vue/package.json                 | 13 +++++++++++++
 framework-examples/vue/src/App.vue                  |  8 ++++----
 framework-examples/vue/src/style.scss               |  2 +-
 .../vue/src/v-mdc-checkbox/Checkbox.vue             |  5 ++---
 .../vue/src/v-mdc-checkbox/CheckboxLabel.vue        |  3 +--
 .../vue/src/v-mdc-drawer/TemporaryDrawer.vue        |  6 +++---
 .../vue/src/v-mdc-form-field/FormField.vue          |  2 +-
 .../vue/src/v-mdc-icon-toggle/IconToggle.vue        |  5 ++---
 framework-examples/vue/src/v-mdc-ripple/Ripple.js   |  2 +-
 .../vue/src/v-mdc-snackbar/Snackbar.vue             |  7 +++----
 11 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/framework-examples/vue/build/webpack.base.conf.js b/framework-examples/vue/build/webpack.base.conf.js
index 200096ffdbb..669f4752cf3 100644
--- a/framework-examples/vue/build/webpack.base.conf.js
+++ b/framework-examples/vue/build/webpack.base.conf.js
@@ -3,7 +3,6 @@ var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
 
-
 module.exports = {
   entry: {
     app: './src/main.js'
@@ -16,15 +15,14 @@ module.exports = {
   resolve: {
     extensions: ['', '.js', '.vue'],
     fallback: [
-      path.join(__dirname, '../node_modules'),
-      path.join(__dirname, '../../../packages')
+      path.join(__dirname, '../node_modules')
     ],
     alias: {
       'src': path.resolve(__dirname, '../src')
     }
   },
   sassLoader: {
-    includePaths: [path.resolve(__dirname, '../../../packages')]
+    includePaths: [path.resolve(__dirname, '../node_modules')]
   },
   resolveLoader: {
     fallback: [path.join(__dirname, '../node_modules')]
@@ -52,13 +50,13 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel',
-        include: projectRoot,
-	exclude: /node_modules/
+        include: path.join(__dirname, '../node_modules/@material')
       },
       {
         test: /\.js$/,
         loader: 'babel',
-        include: path.join(__dirname, '../../../packages')
+        include: projectRoot,
+        exclude: /node_modules/
       },
       {
         test: /\.json$/,
diff --git a/framework-examples/vue/package.json b/framework-examples/vue/package.json
index 2014f3550da..318633588f4 100644
--- a/framework-examples/vue/package.json
+++ b/framework-examples/vue/package.json
@@ -1,5 +1,6 @@
 {
   "name": "v-mdc-example",
+  "private": true,
   "version": "0.1.0",
   "scripts": {
     "start": "node build/dev-server.js"
@@ -47,5 +48,17 @@
     "webpack-dev-middleware": "^1.6.1",
     "webpack-hot-middleware": "^2.12.2",
     "webpack-merge": "^0.14.1"
+  },
+  "dependencies": {
+    "@material/checkbox": "^0.1.0",
+    "@material/drawer": "^0.1.0",
+    "@material/elevation": "^0.1.0",
+    "@material/form-field": "^0.1.0",
+    "@material/icon-toggle": "^0.1.0",
+    "@material/list": "^0.1.0",
+    "@material/ripple": "^0.1.0",
+    "@material/snackbar": "^0.1.0",
+    "@material/theme": "^0.1.0",
+    "@material/typography": "^0.1.0"
   }
 }
diff --git a/framework-examples/vue/src/App.vue b/framework-examples/vue/src/App.vue
index 0f32cfe7f44..3534963243a 100644
--- a/framework-examples/vue/src/App.vue
+++ b/framework-examples/vue/src/App.vue
@@ -118,10 +118,10 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'mdc-ripple/mdc-ripple.scss';
-@import 'mdc-elevation/mdc-elevation.scss';
-@import 'mdc-list/mdc-list.scss';
-@import 'mdc-theme/mdc-theme.scss';
+@import '@material/ripple/mdc-ripple';
+@import '@material/elevation/mdc-elevation';
+@import '@material/list/mdc-list';
+@import '@material/theme/mdc-theme';
 
 .demo-toolbar {
   width: 100%;
diff --git a/framework-examples/vue/src/style.scss b/framework-examples/vue/src/style.scss
index c2a4d484353..4f202b5bf47 100644
--- a/framework-examples/vue/src/style.scss
+++ b/framework-examples/vue/src/style.scss
@@ -1 +1 @@
-@import 'mdc-typography/mdc-typography';
+@import "@material/typography/mdc-typography";
diff --git a/framework-examples/vue/src/v-mdc-checkbox/Checkbox.vue b/framework-examples/vue/src/v-mdc-checkbox/Checkbox.vue
index 5c2ce2a9a2a..bca81390bfc 100644
--- a/framework-examples/vue/src/v-mdc-checkbox/Checkbox.vue
+++ b/framework-examples/vue/src/v-mdc-checkbox/Checkbox.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script lang="babel">
-import { MDCCheckboxFoundation } from 'mdc-checkbox';
+import { MDCCheckboxFoundation } from '@material/checkbox';
 
 const { ANIM_END_EVENT_NAME } = MDCCheckboxFoundation.strings;
 
@@ -86,6 +86,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'mdc-checkbox/mdc-checkbox.scss';
-
+@import '@material/checkbox/mdc-checkbox';
 </style>
diff --git a/framework-examples/vue/src/v-mdc-checkbox/CheckboxLabel.vue b/framework-examples/vue/src/v-mdc-checkbox/CheckboxLabel.vue
index e6934d9449c..cbab85bff7d 100644
--- a/framework-examples/vue/src/v-mdc-checkbox/CheckboxLabel.vue
+++ b/framework-examples/vue/src/v-mdc-checkbox/CheckboxLabel.vue
@@ -15,6 +15,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'mdc-checkbox/mdc-checkbox.scss';
-
+@import '@material/checkbox/mdc-checkbox';
 </style>
diff --git a/framework-examples/vue/src/v-mdc-drawer/TemporaryDrawer.vue b/framework-examples/vue/src/v-mdc-drawer/TemporaryDrawer.vue
index 78257958d6b..5246c36e126 100644
--- a/framework-examples/vue/src/v-mdc-drawer/TemporaryDrawer.vue
+++ b/framework-examples/vue/src/v-mdc-drawer/TemporaryDrawer.vue
@@ -18,8 +18,8 @@
 </template>
 
 <script lang="babel">
-import { MDCTemporaryDrawerFoundation } from 'mdc-drawer';
-import * as utils from 'mdc-drawer/util';
+import { MDCTemporaryDrawerFoundation } from '@material/drawer';
+import * as utils from '@material/drawer/util';
 
 export default {
   props: ['toolbarSpacer'],
@@ -115,5 +115,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'mdc-drawer/mdc-drawer.scss';
+@import '@material/drawer/mdc-drawer';
 </style>
diff --git a/framework-examples/vue/src/v-mdc-form-field/FormField.vue b/framework-examples/vue/src/v-mdc-form-field/FormField.vue
index 4de9491cf50..2a3adeb8cf8 100644
--- a/framework-examples/vue/src/v-mdc-form-field/FormField.vue
+++ b/framework-examples/vue/src/v-mdc-form-field/FormField.vue
@@ -11,5 +11,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "mdc-form-field/mdc-form-field.scss";
+@import "@material/form-field/mdc-form-field";
 </style>
diff --git a/framework-examples/vue/src/v-mdc-icon-toggle/IconToggle.vue b/framework-examples/vue/src/v-mdc-icon-toggle/IconToggle.vue
index a844560914c..0a00cf15ca1 100644
--- a/framework-examples/vue/src/v-mdc-icon-toggle/IconToggle.vue
+++ b/framework-examples/vue/src/v-mdc-icon-toggle/IconToggle.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script lang="babel">
-import { MDCIconToggleFoundation } from 'mdc-icon-toggle';
+import { MDCIconToggleFoundation } from '@material/icon-toggle';
 
 export default {
   props: ['toggleOn', 'toggleOff', 'value'],
@@ -99,6 +99,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'mdc-icon-toggle/mdc-icon-toggle.scss';
-
+@import '@material/icon-toggle/mdc-icon-toggle';
 </style>
diff --git a/framework-examples/vue/src/v-mdc-ripple/Ripple.js b/framework-examples/vue/src/v-mdc-ripple/Ripple.js
index d9371135779..9e53e12667e 100644
--- a/framework-examples/vue/src/v-mdc-ripple/Ripple.js
+++ b/framework-examples/vue/src/v-mdc-ripple/Ripple.js
@@ -1,4 +1,4 @@
-import {MDCRipple} from 'mdc-ripple';
+import {MDCRipple} from '@material/ripple';
 
 export default {
   bind (el, context) {
diff --git a/framework-examples/vue/src/v-mdc-snackbar/Snackbar.vue b/framework-examples/vue/src/v-mdc-snackbar/Snackbar.vue
index 0510e68ddae..50f2b3d3d63 100644
--- a/framework-examples/vue/src/v-mdc-snackbar/Snackbar.vue
+++ b/framework-examples/vue/src/v-mdc-snackbar/Snackbar.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script lang="babel">
-import { MDCSnackbarFoundation } from 'mdc-snackbar';
+import { MDCSnackbarFoundation } from '@material/snackbar';
 
 const { TRANS_END_EVENT_NAME } = MDCSnackbarFoundation.strings;
 
@@ -96,7 +96,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'mdc-button/mdc-button.scss';
-@import 'mdc-snackbar/mdc-snackbar.scss';
-
+@import '@material/button/mdc-button';
+@import '@material/snackbar/mdc-snackbar';
 </style>