Merge branch 'release/v2.2.0'

SinanMtl · Jul 26, 2018 · 5b20132 · 5b20132
2 parents a9add4b + e45abc3
commit 5b20132
Show file tree

Hide file tree

Showing 15 changed files with 613 additions and 71 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,7 @@
 .DS_Store
 node_modules/
-dist/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 demo/
+package-lock.json
diff --git a/Makefile b/Makefile
@@ -0,0 +1,21 @@
+build: ## Compiles for browser using Browserify
+	@echo "Compiling..."
+	# Running builder
+	@rm -rf dist/*
+	@npm run build
+
+version:
+	@npm --no-git-tag-version version $(v) > VERSION
+	@git checkout package.json
+	@make build
+	@git add -A
+	@git commit -m `cat VERSION`
+	@npm version $(v)
+
+.PHONY:demo
+demo:
+	@npm run demo
+	rm -rf /tmp/demo
+	cp -a demo /tmp/demo
+	git checkout gh-pages
+	cp -a /tmp/demo/ .
diff --git a/README.md b/README.md
@@ -16,78 +16,92 @@ npm install vue-rate --save
 Import Vue Rate into your app
 
 ```javascript
-import Rate from 'vue-rate';
+import rate from 'vue-rate';
 
-new Vue({
-    components: {
-        Rate
-    }
-})
+Vue.use(rate)
 ```
 
 Use HTML template
 
 ```html
-<Rate :length="5"></Rate>
+<rate :length="5" />
 ```
 
 ## Options from props
 
 - `length {number}`: Star size
 
 ```html
-<Rate :length="5"></Rate>
+<rate :length="5" />
 ```
 
 - `value {number}`: Default value
 
 ```html
-<Rate :length="5" :value="2"></Rate>
+<rate :length="5" :value="2" />
 ```
 
 - `showcount {boolean}`: Shows rate number when mouseover the star.
 
 ```html
-<Rate :length="5" :value="2" :showcount="true"></Rate>
+<rate :length="5" :value="2" :showcount="true" />
 ```
 
 - `ratedesc {object}`: Rate star description array. 
 
 ```html
-<Rate :length="5" :value="2" :ratedesc="['Very bad', 'bad', 'Normal', 'Good', 'Very good']"></Rate>
+<rate :length="5" :value="2" :ratedesc="['Very bad', 'bad', 'Normal', 'Good', 'Very good']" />
 ```
 
 - `disabled {boolean}`: Disable rate.
 
 ```html
-<Rate :length="5" :value="2" :disabled="true"></Rate>
+<rate :length="5" :value="2" :disabled="true" />
 ```
 
 - `readonly {boolean}`: Read-only rate.
 
 ```html
-<Rate :length="5" :value="2" :readonly="true"></Rate>
+<rate :length="5" :value="2" :readonly="true" />
+```
+
+- `v-model`
+
+```javascript
+new Vue({
+  ...
+  data: {
+    return () {
+      myRate: 0
+    }
+  }
+  ...
+})
+```
+
+```html
+<rate :length="5" v-model="myRate" />
 ```
 
 ## Events
 
 ```javascript
 new Vue({
-    ...
-    methods: {
-        onBeforeRate (rate) {
-            alert(rate)
-        },
-        onAfterRate (rate) {
-            alert(rate)
-        }
+  ...
+  methods: {
+    onBeforeRate (rate) {
+      alert(rate)
+    },
+    onAfterRate (rate) {
+      alert(rate)
     }
-    ...
+  }
+  ...
 })
 ```
 
 ```html
-<Rate :length="5" :value="2" @beforeRate="onBeforeRate" @afterRate="onAftereRate"></Rate>
+<rate :length="5" :value="2" @before-rate="onBeforeRate" @after-rate="onAftereRate" />
 ```
 
 ## License

diff --git a/VERSION b/VERSION
@@ -0,0 +1,15 @@
+{ 'vue-rate': '1.4.1',
+  npm: '5.6.0',
+  ares: '1.10.1-DEV',
+  cldr: '31.0.1',
+  http_parser: '2.7.0',
+  icu: '59.1',
+  modules: '57',
+  nghttp2: '1.25.0',
+  node: '8.9.4',
+  openssl: '1.0.2n',
+  tz: '2017b',
+  unicode: '9.0',
+  uv: '1.15.0',
+  v8: '6.1.534.50',
+  zlib: '1.2.11' }
diff --git a/dev/App.vue b/dev/App.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="App">
+    <div class="container">
+      <h1 style="margin-bottom: 20px;">Vue Rate Component</h1>
+      <h2>Active Form</h2>
+      <div class="grid">
+        <div class="col-3">
+          <p>
+            <strong>Basic</strong>
+            <rate v-model="myCurrentRate" :length="5" />
+          </p>
+        </div>
+        <div class="col-3">
+          <p>
+            <strong>Default value</strong>
+            <rate :length="5" :value="3" />
+          </p>
+        </div>
+        <div class="col-3">
+          <p>
+            <strong>Show count</strong>
+            <rate :length="5" :showcount="true" />
+          </p>
+        </div>
+        <div class="col-3">
+          <p>
+            <strong>Show count (Default value)</strong>
+            <rate :length="5" :value="3" :showcount="true" />
+          </p>
+        </div>
+        <div class="col-3">
+          <p>
+            <strong>Rate Descriptions</strong>
+            <rate :length="5" :ratedesc="['Very Bad', 'Bad', 'Normal', 'Good', 'Very Good']" />
+          </p>
+        </div>
+        <div class="col-3">
+          <p>
+            <strong>Rate Descriptions (Default Value)</strong>
+            <rate :length="5" :value="3" :ratedesc="['Very Bad', 'Bad', 'Normal', 'Good', 'Very Good']" />
+          </p>
+        </div>
+        <div class="col-3">
+          <p>
+            <strong>Rate Descriptions (Read-only)</strong>
+            <rate :length="5" :value="3" :readonly="true" :ratedesc="['Very Bad', 'Bad', 'Normal', 'Good', 'Very Good']" />
+          </p>
+        </div>
+      </div>
+      <h2>Disabled Form</h2>
+      <div class="grid">
+        <div class="col-3">
+          <p>
+            <strong>Basic</strong>
+            <rate :length="5" :disabled="true" :showcount="true" />
+          </p>
+        </div>
+        <div class="col-3">
+          <p>
+            <strong>Default value</strong>
+            <rate :length="5" :value="3" :disabled="true" />
+          </p>
+        </div>
+        <div class="col-3">
+          <p>
+            <strong>Show count</strong>
+            <rate :length="5" :value="3" :disabled="true" :showcount="true" />
+          </p>
+        </div>
+        <div class="col-3">
+          <p>
+            <strong>Rate Descriptions</strong>
+            <rate :length="5" :value="3" :disabled="true" :ratedesc="['Very Bad', 'Bad', 'Normal', 'Good', 'Very Good']" />
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import rate from '../src/Rate'
+
+export default {
+  name: 'App',
+  data () {
+    return {
+      myCurrentRate: 0
+    }
+  },
+  components: {
+    rate
+  }
+}
+</script>
+
+<style>
+  *{box-sizing: border-box;}
+
+  body{
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-family: Avenir,Helvetica,Arial,sans-serif;
+    margin: 0;
+    padding: 0;
+  }
+
+  .App{
+    text-align: center;
+    color: #2c3e50;
+    margin-top: 60px
+  }
+
+  .container{
+    max-width: 1200px;
+    padding: 0 20px;
+    margin: 0 auto
+  }
+
+  .grid{
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .grid [class*=col-]{padding: 0 20px;}
+  .grid .col-3{width: 100%}
+
+  @media screen and (min-width: 768px) {
+    .grid .col-3{
+      width:50%
+    }
+  }
+
+  @media screen and (min-width: 992px) {
+    .grid .col-3{
+      width: 25%;
+    }
+  }
+</style>
+
diff --git a/dev/index.js b/dev/index.js
@@ -0,0 +1,8 @@
+let rate = require('../src/Rate.vue')
+
+module.exports = {
+	component: rate,
+	install(Vue) {
+		Vue.component(rate.default.name, rate.default)
+	}
+}
diff --git a/dev/main.js b/dev/main.js
@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from '@/App'
+
+export default new Vue({
+	el: '#app',
+	template: '<App/>',
+	components: { App }
+})
diff --git a/dist/vue-rate.js b/dist/vue-rate.js
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Vue Rate</title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>