Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on May 5, 2018. It is now read-only.

Commit cfd9c40

Browse files
committed
Adds vue-play support
Changes: - *breaking* Changed the main file in `package.json` - *breaking* Changed the build files location to `dist/` folder - *breaking* Changed the component styles - Changed the styles language from `scss` to `sass` - Updated `peerDependencies` to support `vue@2.1` - Added `vue-play` support, removed `vue-dev-derver` (#1) - Added test to cover `click` event Closes #1 
1 parent c641c38 commit cfd9c40

File tree

11 files changed

+724
-354
lines changed

11 files changed

+724
-354
lines changed

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
# Changelog
22

3+
## Version 1.1.0
4+
5+
- *breaking* Changed the main file in `package.json`
6+
- *breaking* Changed the build files location to `dist/` folder
7+
- *breaking* Changed the component styles
8+
- Changed the styles language from `scss` to `sass`
9+
- Updated `peerDependencies` to support `vue@2.1`
10+
- Added `vue-play` support, removed `vue-dev-derver` (#1)
11+
- Added test to cover `click` event
12+
313
## Version 1.0.0
414

515
- Changed `vue-material-ripple` dependency to be ssr-frinedly

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,4 @@ npm install vue-material-button
5151
</script>
5252
```
5353

54-
For more examples, please check [`/dev`](https://github.com/wemake-services/vue-material-button/tree/master/dev) folder and the [project's website](http://wemake.services/vue-material-button).
54+
For more examples, please check [`/play`](https://github.com/wemake-services/vue-material-button/tree/master/play) folder and the [project's website](http://wemake.services/vue-material-button).

‎build/webpack.conf.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ module.exports = {
4040
},
4141
vue: {
4242
loaders: {
43-
scss: ExtractTextPlugin.extract(
43+
sass: ExtractTextPlugin.extract(
4444
'vue-style-loader', 'css-loader!sass-loader'
4545
)
4646
},

‎dev/webpack.config.js‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎package.json‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-material-button",
3-
"version": "1.0.0",
3+
"version": "1.1.0",
44
"description": "Simple implementation of material input with no dependencies",
55
"author": "sobolevn <mail@sobolevn.me>",
66
"private": false,
@@ -13,18 +13,18 @@
1313
"test": "npm run test:unit && npm run test:security",
1414
"lint": "eslint --ext .js,.vue src test/unit/specs dev",
1515
"dev:server": "./node_modules/.bin/vue-dev-server",
16-
"ghpages": "./node_modules/.bin/vue-dev-server --static docs/ && ./node_modules/.bin/gh-pages -d docs"
16+
"ghpages": "npm run play:build && ./node_modules/.bin/gh-pages -d dist-play",
17+
"play": "vue-play start",
18+
"play:build": "vue-play build"
1719
},
1820
"files": [
1921
"src/",
20-
"dev/",
21-
"build/",
22-
"style.css",
23-
"index.js",
22+
"dist/",
23+
"LICENSE.md",
2424
"README.md"
2525
],
2626
"peerDependencies": {
27-
"vue": "~2.0"
27+
"vue": "^2.0.4"
2828
},
2929
"devDependencies": {
3030
"autoprefixer": "^6.4.0",
@@ -38,7 +38,6 @@
3838
"babel-register": "^6.0.0",
3939
"babel-runtime": "5",
4040
"chai": "^3.5.0",
41-
"connect-history-api-fallback": "^1.1.0",
4241
"coveralls": "^2.11.14",
4342
"cross-spawn": "^4.0.2",
4443
"css-loader": "^0.25.0",
@@ -47,15 +46,14 @@
4746
"eslint-friendly-formatter": "^2.0.5",
4847
"eslint-loader": "^1.5.0",
4948
"eslint-plugin-html": "^1.3.0",
50-
"eslint-plugin-promise": "^2.0.1",
49+
"eslint-plugin-promise": "^3.4.0",
5150
"eslint-plugin-standard": "^2.0.1",
5251
"eventsource-polyfill": "^0.9.6",
5352
"extract-text-webpack-plugin": "^1.0.1",
5453
"file-loader": "^0.9.0",
5554
"function-bind": "^1.0.2",
5655
"gh-pages": "^0.11.0",
5756
"html-webpack-plugin": "^2.8.1",
58-
"http-proxy-middleware": "^0.17.2",
5957
"humane-js": "^3.2.2",
6058
"inject-loader": "^2.0.1",
6159
"isparta-loader": "^2.0.0",
@@ -80,26 +78,27 @@
8078
"phantomjs-prebuilt": "^2.1.3",
8179
"publish-please": "^2.2.0",
8280
"sass-loader": "^4.0.2",
83-
"selenium-server": "2.53.1",
8481
"sinon": "^1.17.3",
8582
"sinon-chai": "^2.8.0",
8683
"url-loader": "^0.5.7",
87-
"vue": "^2.0.3",
88-
"vue-dev-server": "^2.0.4",
84+
"vue": "^2.1.4",
8985
"vue-hot-reload-api": "^2.0.6",
9086
"vue-html-loader": "^1.2.3",
91-
"vue-loader": "^9.7.0",
87+
"vue-loader": "^10.0.2",
9288
"vue-material-ripple": "^1.0.0",
89+
"vue-play": "^2.1.1",
90+
"vue-play-cli": "^1.0.4",
9391
"vue-router": "^2.0.1",
9492
"vue-style-loader": "^1.0.0",
93+
"vue-template-compiler": "2.1.4",
9594
"vueify": "^9.2.4",
9695
"vueify-insert-css": "^1.0.0",
9796
"webpack": "^1.13.3",
9897
"webpack-dev-middleware": "^1.8.3",
9998
"webpack-hot-middleware": "^2.12.2",
10099
"webpack-merge": "^0.14.1"
101100
},
102-
"main": "index.js",
101+
"main": "dist/index.js",
103102
"repository": {
104103
"url": "https://github.com/wemake-services/vue-material-button.git",
105104
"type": "git"

‎dev/MaterialButtonExample.vue‎ renamed to ‎play/components/Constructor.vue‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<template>
22
<div class="material-button-example">
3-
<a href="#">back</a>
43
<h1>Button playground</h1>
5-
<h2>Check our console for click events</h2>
64

75
<div class="material-button-example-playground">
86
<div class="material-button-example-playground-form">
@@ -38,18 +36,19 @@
3836
:ripple="ripple"
3937
:large="large"
4038
:disabled="disabled"
39+
4140
@click="handleClick">
42-
{{ text }}
41+
{{ text }}
4342
</MaterialButton>
4443
</div>
4544
</div>
4645
</template>
4746

4847
<script>
49-
import MaterialButton from '../src/components/MaterialButton.vue'
48+
import MaterialButton from '../../src/components/MaterialButton.vue'
5049
5150
export default {
52-
name: 'material-button-example',
51+
name: 'material-button-constructor',
5352
data () {
5453
return {
5554
raised: true,
@@ -60,8 +59,8 @@
6059
}
6160
},
6261
methods: {
63-
handleClick (e) {
64-
console.log(e)
62+
handleClick () {
63+
this.$log('Clicked!')
6564
}
6665
},
6766
components: {
@@ -70,7 +69,7 @@
7069
}
7170
</script>
7271

73-
<style lang="scss">
72+
<style lang="sass">
7473
.material-button-example {
7574
max-width: 350px;
7675
margin: 0 auto;

‎play/components/Theme.vue‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<div class="material-button-example material-button-theme">
3+
<h1>Button's custom theme</h1>
4+
5+
<MaterialButton
6+
:raised="true"
7+
:ripple="true">
8+
Click
9+
</MaterialButton>
10+
</div>
11+
</template>
12+
13+
<script>
14+
import MaterialButton from '../../src/components/MaterialButton.vue'
15+
16+
export default {
17+
name: 'material-button-theme',
18+
components: {
19+
MaterialButton
20+
}
21+
}
22+
</script>
23+
24+
<style lang="sass">
25+
.material-button-theme {
26+
.material-button__component {
27+
.material-button {
28+
color: white;
29+
background-color: #F44336;
30+
31+
&:disabled {
32+
color: grey;
33+
background-color: light-grey;
34+
}
35+
36+
&:hover {
37+
background-color: #E53935;
38+
}
39+
}
40+
41+
.ripple__component {
42+
background-color: #E57373;
43+
}
44+
}
45+
}
46+
</style>

‎play/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { play } from 'vue-play'
2+
3+
import Constructor from './components/Constructor.vue'
4+
import Theme from './components/Theme.vue'
5+
6+
play('MaterialButton', module)
7+
.add('constructor', Constructor)
8+
.add('theme', Theme)

‎src/components/MaterialButton.vue‎

Lines changed: 50 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
:type="type"
99
:disabled="disabled"
1010
@click="handleClick">
11-
<slot></slot>
11+
<span class="material-button-content">
12+
<slot></slot>
13+
</span>
1214

1315
<MaterialRipple v-if="ripple"></MaterialRipple>
1416
</button>
@@ -22,17 +24,15 @@
2224
name: 'material-button',
2325
computed: {
2426
computedClasses () {
25-
const classes = []
26-
27-
if (this.raised) {
28-
classes.push('material-button--raised')
29-
}
30-
31-
if (this.large) {
32-
classes.push('material-button--large')
27+
return {
28+
'material-button--raised': this.raised,
29+
'material-button--large': this.large
3330
}
34-
35-
return classes
31+
}
32+
},
33+
methods: {
34+
handleClick () {
35+
this.$emit('click')
3636
}
3737
},
3838
props: {
@@ -65,25 +65,27 @@
6565
default: false
6666
}
6767
},
68-
methods: {
69-
handleClick (e) {
70-
this.$emit('click', e)
71-
}
72-
},
7368
components: {
7469
MaterialRipple
7570
}
7671
}
7772
</script>
7873

79-
<style lang="scss">
74+
<style lang="sass">
8075
@import'~vue-material-ripple/style.css';
8176
77+
// Variables
78+
79+
// Sizes
80+
$button-height: 36px;
81+
$button-height-large: 54px;
82+
83+
// Fonts
84+
$font-size: 16px;
85+
8286
.material-button__component {
8387
.material-button {
84-
color: #fff;
85-
background-color: #1B5E20;
86-
88+
font-size: $font-size;
8789
text-decoration: none;
8890
text-align: center;
8991
letter-spacing: .5px;
@@ -95,10 +97,10 @@
9597
9698
display: inline-block;
9799
position: relative;
98-
height: 36px;
99-
line-height: 36px;
100+
height: $button-height;
101+
line-height: $button-height;
100102
101-
padding: 0 2rem;
103+
padding: 0 2em;
102104
margin: 0;
103105
overflow: hidden;
104106
@@ -115,19 +117,39 @@
115117
}
116118
117119
&.material-button--large {
118-
height: 54px;
119-
line-height: 56px;
120+
height: $button-height-large;
121+
line-height: $button-height-large;
120122
}
121123
122124
&:disabled {
123-
background-color: #DFDFDF !important;
124125
box-shadow: none !important;
125-
color: #9F9F9F !important;
126126
cursor: default;
127127
}
128+
}
129+
}
130+
131+
// Theme:
132+
133+
// Colors
134+
$color-white: #fff;
135+
$color-green: #1B5E20;
136+
$color-green-light: #217227;
137+
138+
$color-grey: #9F9F9F;
139+
$color-grey-light: #DFDFDF;
140+
141+
.material-button__component {
142+
.material-button {
143+
color: $color-white;
144+
background-color: $color-green;
145+
146+
&:disabled {
147+
color: $color-grey;
148+
background-color: $color-grey-light;
149+
}
128150
129151
&:hover {
130-
background-color: #217227;
152+
background-color: $color-green-light;
131153
}
132154
}
133155
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /