Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit b79632d

Browse files
fix(framework-examples): Fix VueJS example (#135)
Resolves #124 [ci skip]
1 parent 71f6162 commit b79632d

File tree

11 files changed

+36
-29
lines changed

11 files changed

+36
-29
lines changed

framework-examples/vue/build/webpack.base.conf.js

+5-7
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ var config = require('../config')
33
var utils = require('./utils')
44
var projectRoot = path.resolve(__dirname, '../')
55

6-
76
module.exports = {
87
entry: {
98
app: './src/main.js'
@@ -16,15 +15,14 @@ module.exports = {
1615
resolve: {
1716
extensions: ['', '.js', '.vue'],
1817
fallback: [
19-
path.join(__dirname, '../node_modules'),
20-
path.join(__dirname, '../../../packages')
18+
path.join(__dirname, '../node_modules')
2119
],
2220
alias: {
2321
'src': path.resolve(__dirname, '../src')
2422
}
2523
},
2624
sassLoader: {
27-
includePaths: [path.resolve(__dirname, '../../../packages')]
25+
includePaths: [path.resolve(__dirname, '../node_modules')]
2826
},
2927
resolveLoader: {
3028
fallback: [path.join(__dirname, '../node_modules')]
@@ -52,13 +50,13 @@ module.exports = {
5250
{
5351
test: /\.js$/,
5452
loader: 'babel',
55-
include: projectRoot,
56-
exclude: /node_modules/
53+
include: path.join(__dirname, '../node_modules/@material')
5754
},
5855
{
5956
test: /\.js$/,
6057
loader: 'babel',
61-
include: path.join(__dirname, '../../../packages')
58+
include: projectRoot,
59+
exclude: /node_modules/
6260
},
6361
{
6462
test: /\.json$/,

framework-examples/vue/package.json

+13
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"name": "v-mdc-example",
3+
"private": true,
34
"version": "0.1.0",
45
"scripts": {
56
"start": "node build/dev-server.js"
@@ -47,5 +48,17 @@
4748
"webpack-dev-middleware": "^1.6.1",
4849
"webpack-hot-middleware": "^2.12.2",
4950
"webpack-merge": "^0.14.1"
51+
},
52+
"dependencies": {
53+
"@material/checkbox": "^0.1.0",
54+
"@material/drawer": "^0.1.0",
55+
"@material/elevation": "^0.1.0",
56+
"@material/form-field": "^0.1.0",
57+
"@material/icon-toggle": "^0.1.0",
58+
"@material/list": "^0.1.0",
59+
"@material/ripple": "^0.1.0",
60+
"@material/snackbar": "^0.1.0",
61+
"@material/theme": "^0.1.0",
62+
"@material/typography": "^0.1.0"
5063
}
5164
}

framework-examples/vue/src/App.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -118,10 +118,10 @@ export default {
118118
</script>
119119

120120
<style lang="scss">
121-
@import 'mdc-ripple/mdc-ripple.scss';
122-
@import 'mdc-elevation/mdc-elevation.scss';
123-
@import 'mdc-list/mdc-list.scss';
124-
@import 'mdc-theme/mdc-theme.scss';
121+
@import '@material/ripple/mdc-ripple';
122+
@import '@material/elevation/mdc-elevation';
123+
@import '@material/list/mdc-list';
124+
@import '@material/theme/mdc-theme';
125125
126126
.demo-toolbar {
127127
width: 100%;

framework-examples/vue/src/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
@import 'mdc-typography/mdc-typography';
1+
@import "@material/typography/mdc-typography";

framework-examples/vue/src/v-mdc-checkbox/Checkbox.vue

+2-3
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
</template>
2121

2222
<script lang="babel">
23-
import { MDCCheckboxFoundation } from 'mdc-checkbox';
23+
import { MDCCheckboxFoundation } from '@material/checkbox';
2424
2525
const { ANIM_END_EVENT_NAME } = MDCCheckboxFoundation.strings;
2626
@@ -86,6 +86,5 @@ export default {
8686
</script>
8787

8888
<style lang="scss">
89-
@import 'mdc-checkbox/mdc-checkbox.scss';
90-
89+
@import '@material/checkbox/mdc-checkbox';
9190
</style>

framework-examples/vue/src/v-mdc-checkbox/CheckboxLabel.vue

+1-2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,5 @@ export default {
1515
</script>
1616

1717
<style lang="scss">
18-
@import 'mdc-checkbox/mdc-checkbox.scss';
19-
18+
@import '@material/checkbox/mdc-checkbox';
2019
</style>

framework-examples/vue/src/v-mdc-drawer/TemporaryDrawer.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
</template>
1919

2020
<script lang="babel">
21-
import { MDCTemporaryDrawerFoundation } from 'mdc-drawer';
22-
import * as utils from 'mdc-drawer/util';
21+
import { MDCTemporaryDrawerFoundation } from '@material/drawer';
22+
import * as utils from '@material/drawer/util';
2323
2424
export default {
2525
props: ['toolbarSpacer'],
@@ -115,5 +115,5 @@ export default {
115115
</script>
116116

117117
<style lang="scss">
118-
@import 'mdc-drawer/mdc-drawer.scss';
118+
@import '@material/drawer/mdc-drawer';
119119
</style>

framework-examples/vue/src/v-mdc-form-field/FormField.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@ export default {
1111
</script>
1212

1313
<style lang="scss">
14-
@import "mdc-form-field/mdc-form-field.scss";
14+
@import "@material/form-field/mdc-form-field";
1515
</style>

framework-examples/vue/src/v-mdc-icon-toggle/IconToggle.vue

+2-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</template>
1010

1111
<script lang="babel">
12-
import { MDCIconToggleFoundation } from 'mdc-icon-toggle';
12+
import { MDCIconToggleFoundation } from '@material/icon-toggle';
1313
1414
export default {
1515
props: ['toggleOn', 'toggleOff', 'value'],
@@ -99,6 +99,5 @@ export default {
9999
</script>
100100

101101
<style lang="scss">
102-
@import 'mdc-icon-toggle/mdc-icon-toggle.scss';
103-
102+
@import '@material/icon-toggle/mdc-icon-toggle';
104103
</style>

framework-examples/vue/src/v-mdc-ripple/Ripple.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {MDCRipple} from 'mdc-ripple';
1+
import {MDCRipple} from '@material/ripple';
22

33
export default {
44
bind (el, context) {

framework-examples/vue/src/v-mdc-snackbar/Snackbar.vue

+3-4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</template>
99

1010
<script lang="babel">
11-
import { MDCSnackbarFoundation } from 'mdc-snackbar';
11+
import { MDCSnackbarFoundation } from '@material/snackbar';
1212
1313
const { TRANS_END_EVENT_NAME } = MDCSnackbarFoundation.strings;
1414
@@ -96,7 +96,6 @@ export default {
9696
</script>
9797

9898
<style lang="scss">
99-
@import 'mdc-button/mdc-button.scss';
100-
@import 'mdc-snackbar/mdc-snackbar.scss';
101-
99+
@import '@material/button/mdc-button';
100+
@import '@material/snackbar/mdc-snackbar';
102101
</style>

0 commit comments

Comments
 (0)