Skip to content

Commit 5b20132

Browse files
SinanMtlSinanMtl
committed
Merge branch 'release/v2.2.0'
2 parents a9add4b + e45abc3 commit 5b20132

15 files changed

+613
-71
lines changed

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.DS_Store
22
node_modules/
3-
dist/
43
npm-debug.log*
54
yarn-debug.log*
65
yarn-error.log*
76
demo/
7+
package-lock.json

‎Makefile

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
build: ## Compiles for browser using Browserify
2+
@echo "Compiling..."
3+
# Running builder
4+
@rm -rf dist/*
5+
@npm run build
6+
7+
version:
8+
@npm --no-git-tag-version version $(v) > VERSION
9+
@git checkout package.json
10+
@make build
11+
@git add -A
12+
@git commit -m `cat VERSION`
13+
@npm version $(v)
14+
15+
.PHONY:demo
16+
demo:
17+
@npm run demo
18+
rm -rf /tmp/demo
19+
cp -a demo /tmp/demo
20+
git checkout gh-pages
21+
cp -a /tmp/demo/ .

‎README.md

+37-23
Original file line numberDiff line numberDiff line change
@@ -16,78 +16,92 @@ npm install vue-rate --save
1616
Import Vue Rate into your app
1717

1818
```javascript
19-
import Rate from 'vue-rate';
19+
import rate from 'vue-rate';
2020

21-
new Vue({
22-
components: {
23-
Rate
24-
}
25-
})
21+
Vue.use(rate)
2622
```
2723

2824
Use HTML template
2925

3026
```html
31-
<Rate :length="5"></Rate>
27+
<rate :length="5" />
3228
```
3329

3430
## Options from props
3531

3632
- `length {number}`: Star size
3733

3834
```html
39-
<Rate :length="5"></Rate>
35+
<rate :length="5" />
4036
```
4137

4238
- `value {number}`: Default value
4339

4440
```html
45-
<Rate :length="5" :value="2"></Rate>
41+
<rate :length="5" :value="2" />
4642
```
4743

4844
- `showcount {boolean}`: Shows rate number when mouseover the star.
4945

5046
```html
51-
<Rate :length="5" :value="2" :showcount="true"></Rate>
47+
<rate :length="5" :value="2" :showcount="true" />
5248
```
5349

5450
- `ratedesc {object}`: Rate star description array.
5551

5652
```html
57-
<Rate :length="5" :value="2" :ratedesc="['Very bad', 'bad', 'Normal', 'Good', 'Very good']"></Rate>
53+
<rate :length="5" :value="2" :ratedesc="['Very bad', 'bad', 'Normal', 'Good', 'Very good']" />
5854
```
5955

6056
- `disabled {boolean}`: Disable rate.
6157

6258
```html
63-
<Rate :length="5" :value="2" :disabled="true"></Rate>
59+
<rate :length="5" :value="2" :disabled="true" />
6460
```
6561

6662
- `readonly {boolean}`: Read-only rate.
6763

6864
```html
69-
<Rate :length="5" :value="2" :readonly="true"></Rate>
65+
<rate :length="5" :value="2" :readonly="true" />
66+
```
67+
68+
- `v-model`
69+
70+
```javascript
71+
new Vue({
72+
...
73+
data: {
74+
return () {
75+
myRate: 0
76+
}
77+
}
78+
...
79+
})
80+
```
81+
82+
```html
83+
<rate :length="5" v-model="myRate" />
7084
```
7185

7286
## Events
7387

7488
```javascript
7589
new Vue({
76-
...
77-
methods: {
78-
onBeforeRate (rate) {
79-
alert(rate)
80-
},
81-
onAfterRate (rate) {
82-
alert(rate)
83-
}
90+
...
91+
methods: {
92+
onBeforeRate (rate) {
93+
alert(rate)
94+
},
95+
onAfterRate (rate) {
96+
alert(rate)
8497
}
85-
...
98+
}
99+
...
86100
})
87101
```
88102

89103
```html
90-
<Rate :length="5" :value="2" @beforeRate="onBeforeRate" @afterRate="onAftereRate"></Rate>
104+
<rate :length="5" :value="2" @before-rate="onBeforeRate" @after-rate="onAftereRate" />
91105
```
92106

93107
## License

‎VERSION

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{ 'vue-rate': '1.4.1',
2+
npm: '5.6.0',
3+
ares: '1.10.1-DEV',
4+
cldr: '31.0.1',
5+
http_parser: '2.7.0',
6+
icu: '59.1',
7+
modules: '57',
8+
nghttp2: '1.25.0',
9+
node: '8.9.4',
10+
openssl: '1.0.2n',
11+
tz: '2017b',
12+
unicode: '9.0',
13+
uv: '1.15.0',
14+
v8: '6.1.534.50',
15+
zlib: '1.2.11' }

‎dev/App.vue

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<template>
2+
<div class="App">
3+
<div class="container">
4+
<h1 style="margin-bottom: 20px;">Vue Rate Component</h1>
5+
<h2>Active Form</h2>
6+
<div class="grid">
7+
<div class="col-3">
8+
<p>
9+
<strong>Basic</strong>
10+
<rate v-model="myCurrentRate" :length="5" />
11+
</p>
12+
</div>
13+
<div class="col-3">
14+
<p>
15+
<strong>Default value</strong>
16+
<rate :length="5" :value="3" />
17+
</p>
18+
</div>
19+
<div class="col-3">
20+
<p>
21+
<strong>Show count</strong>
22+
<rate :length="5" :showcount="true" />
23+
</p>
24+
</div>
25+
<div class="col-3">
26+
<p>
27+
<strong>Show count (Default value)</strong>
28+
<rate :length="5" :value="3" :showcount="true" />
29+
</p>
30+
</div>
31+
<div class="col-3">
32+
<p>
33+
<strong>Rate Descriptions</strong>
34+
<rate :length="5" :ratedesc="['Very Bad', 'Bad', 'Normal', 'Good', 'Very Good']" />
35+
</p>
36+
</div>
37+
<div class="col-3">
38+
<p>
39+
<strong>Rate Descriptions (Default Value)</strong>
40+
<rate :length="5" :value="3" :ratedesc="['Very Bad', 'Bad', 'Normal', 'Good', 'Very Good']" />
41+
</p>
42+
</div>
43+
<div class="col-3">
44+
<p>
45+
<strong>Rate Descriptions (Read-only)</strong>
46+
<rate :length="5" :value="3" :readonly="true" :ratedesc="['Very Bad', 'Bad', 'Normal', 'Good', 'Very Good']" />
47+
</p>
48+
</div>
49+
</div>
50+
<h2>Disabled Form</h2>
51+
<div class="grid">
52+
<div class="col-3">
53+
<p>
54+
<strong>Basic</strong>
55+
<rate :length="5" :disabled="true" :showcount="true" />
56+
</p>
57+
</div>
58+
<div class="col-3">
59+
<p>
60+
<strong>Default value</strong>
61+
<rate :length="5" :value="3" :disabled="true" />
62+
</p>
63+
</div>
64+
<div class="col-3">
65+
<p>
66+
<strong>Show count</strong>
67+
<rate :length="5" :value="3" :disabled="true" :showcount="true" />
68+
</p>
69+
</div>
70+
<div class="col-3">
71+
<p>
72+
<strong>Rate Descriptions</strong>
73+
<rate :length="5" :value="3" :disabled="true" :ratedesc="['Very Bad', 'Bad', 'Normal', 'Good', 'Very Good']" />
74+
</p>
75+
</div>
76+
</div>
77+
</div>
78+
</div>
79+
</template>
80+
81+
<script>
82+
import rate from '../src/Rate'
83+
84+
export default {
85+
name: 'App',
86+
data () {
87+
return {
88+
myCurrentRate: 0
89+
}
90+
},
91+
components: {
92+
rate
93+
}
94+
}
95+
</script>
96+
97+
<style>
98+
*{box-sizing: border-box;}
99+
100+
body{
101+
-webkit-font-smoothing: antialiased;
102+
-moz-osx-font-smoothing: grayscale;
103+
font-family: Avenir,Helvetica,Arial,sans-serif;
104+
margin: 0;
105+
padding: 0;
106+
}
107+
108+
.App{
109+
text-align: center;
110+
color: #2c3e50;
111+
margin-top: 60px
112+
}
113+
114+
.container{
115+
max-width: 1200px;
116+
padding: 0 20px;
117+
margin: 0 auto
118+
}
119+
120+
.grid{
121+
display: flex;
122+
flex-wrap: wrap;
123+
}
124+
125+
.grid [class*=col-]{padding: 0 20px;}
126+
.grid .col-3{width: 100%}
127+
128+
@media screen and (min-width: 768px) {
129+
.grid .col-3{
130+
width:50%
131+
}
132+
}
133+
134+
@media screen and (min-width: 992px) {
135+
.grid .col-3{
136+
width: 25%;
137+
}
138+
}
139+
</style>
140+

‎dev/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
let rate = require('../src/Rate.vue')
2+
3+
module.exports = {
4+
component: rate,
5+
install(Vue) {
6+
Vue.component(rate.default.name, rate.default)
7+
}
8+
}

‎dev/main.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Vue from 'vue'
2+
import App from '@/App'
3+
4+
export default new Vue({
5+
el: '#app',
6+
template: '<App/>',
7+
components: { App }
8+
})

‎dist/vue-rate.js

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Vue Rate</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)