Merge pull request #21 from SinanMtl/feature/Customization

Feature/Customization
SinanMtl · Jun 9, 2020 · 771e097 · 771e097
2 parents 5b20132 + 3b4f248
commit 771e097
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -65,6 +65,20 @@ Use HTML template
 <rate :length="5" :value="2" :readonly="true" />
 ```
 
+- `iconref {string}`: ID of symbol icon
+
+Insert symbol icon into your codebase
+```html
+<symbol id="icon-heart" class="icon" viewBox="0 0 32 32">
+  <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
+</symbol>
+````
+
+Then add Rate component. `iconref` must be symbol's id
+```html
+<rate :length="5" iconref="icon-heart" />
+```
+
 - `v-model`
 
 ```javascript

diff --git a/dev/App.vue b/dev/App.vue
@@ -25,25 +25,25 @@
         <div class="col-3">
           <p>
             <strong>Show count (Default value)</strong>
-            <rate :length="5" :value="3" :showcount="true" />
+            <rate showcount :length="5" :value="3" />
           </p>
         </div>
         <div class="col-3">
           <p>
             <strong>Rate Descriptions</strong>
-            <rate :length="5" :ratedesc="['Very Bad', 'Bad', 'Normal', 'Good', 'Very Good']" />
+            <rate :length="5" :ratedesc="desc" />
           </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']" />
+            <rate :length="5" :value="3" :ratedesc="desc" />
           </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']" />
+            <rate readonly :length="5" :value="3" :ratedesc="desc" />
           </p>
         </div>
       </div>
@@ -52,25 +52,58 @@
         <div class="col-3">
           <p>
             <strong>Basic</strong>
-            <rate :length="5" :disabled="true" :showcount="true" />
+            <rate showcount disabled :length="5" />
           </p>
         </div>
         <div class="col-3">
           <p>
             <strong>Default value</strong>
-            <rate :length="5" :value="3" :disabled="true" />
+            <rate disabled :length="5" :value="3" />
           </p>
         </div>
         <div class="col-3">
           <p>
             <strong>Show count</strong>
-            <rate :length="5" :value="3" :disabled="true" :showcount="true" />
+            <rate disabled showcount :length="5" :value="3" />
           </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']" />
+            <rate disabled :length="5" :value="3" :ratedesc="desc" />
+          </p>
+        </div>
+      </div>
+
+      <h2>Customization</h2>
+      <div class="grid">
+        <div class="flex-primary">
+          <p>
+            <symbol id="icon-heart" class="icon" viewBox="0 0 32 32">
+              <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
+            </symbol>
+            <rate class="RateCustom" :length="5" :value="3" :ratedesc="desc" iconref="icon-heart" />
+            <details>
+              <summary>Example</summary>
+              <div class="code">
+                <pre>&lt;template&gt;
+    &lt;symbol id="icon-heart" class="icon" viewBox="0 0 32 32"&gt;
+      &lt;path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"&gt;&lt;/path&gt;
+    &lt;/symbol&gt;
+
+    &lt;rate class="RateCustom" :length="5" :value="3" :ratedesc="desc" iconref="icon-heart"&gt;
+  &lt;/template&gt;
+
+  &lt;style&gt;
+    .RateCustom.Rate .icon {
+      width: 25px;
+      height: 25px;
+    }
+    .RateCustom.Rate .Rate__star.filled { color: blue; }
+    .RateCustom.Rate .Rate__star.hover { color: red; }
+  &lt;/style&gt;</pre>
+              </div>
+            </details>
           </p>
         </div>
       </div>
@@ -85,7 +118,8 @@ export default {
   name: 'App',
   data () {
     return {
-      myCurrentRate: 0
+      myCurrentRate: 3,
+      desc: ['Very Bad', 'Bad', 'Normal', 'Good', 'Very Good']
     }
   },
   components: {
@@ -122,19 +156,36 @@ export default {
     flex-wrap: wrap;
   }
 
+  .code{
+    text-align: left;
+    background-color: #efefef;
+    border-radius: 10px;
+    padding: 20px;
+    overflow: auto;
+    max-width: 100%;
+  }
+
+  .code pre{margin: 0}
+
+  .Rate.RateCustom .icon {
+    width: 25px;
+    height: 25px;
+  }
+
+  .Rate.RateCustom .Rate__star.filled{color: teal;}
+  .Rate.RateCustom .Rate__star.hover{color: red;}
+
+  .flex-primary{ flex: 1; width: 100%; }
   .grid [class*=col-]{padding: 0 20px;}
   .grid .col-3{width: 100%}
 
   @media screen and (min-width: 768px) {
-    .grid .col-3{
-      width:50%
-    }
+    .grid .col-3{width: 50%;}
+    .grid .col-2{width: 50%;}
   }
 
   @media screen and (min-width: 992px) {
-    .grid .col-3{
-      width: 25%;
-    }
+    .grid .col-3{width: 25%;}
   }
 </style>
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "vue-rate",
-	"version": "2.2.0",
+	"version": "2.3.0",
 	"description": "Rate component for Vue",
 	"main": "dist/vue-rate.js",
 	"scripts": {

diff --git a/src/Rate.vue b/src/Rate.vue
@@ -3,7 +3,6 @@
     <svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
       <defs>
         <symbol id="icon-star-full" viewBox="0 0 32 32">
-          <title>star-full</title>
           <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
         </symbol>
       </defs>
@@ -12,7 +11,7 @@
     <template v-for="n in length">
       <button type="button" :key="n" :class="{'Rate__star': true, 'hover': n <= over, 'filled': (n <= rate || isFilled(n))}" @mouseover="onOver(n)" @mouseout="onOut(n)" @click="setRate(n)" @keyup="onOver(n)" @keyup.enter="setRate(n)" :disabled="disabled">
         <svg class="icon">
-          <use xlink:href="#icon-star-full"></use>
+          <use :xlink:href="`#${iconref}`"></use>
         </svg>
       </button>
     </template>
@@ -34,7 +33,8 @@ export default {
     required: {type: Boolean},
     ratedesc: {type: Array, default () { return [] }},
     disabled: {type: Boolean, default: false},
-    readonly: {type: Boolean, default: false}
+    readonly: {type: Boolean, default: false},
+    iconref: { type: String, default: 'icon-star-full' }
   },
   data () {
     return {
@@ -84,8 +84,10 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-.icon {
+<style>
+.Rate{cursor: default;}
+
+.Rate .icon {
   display: inline-block;
   width: 16px;
   height: 16px;
@@ -98,8 +100,6 @@ export default {
   margin: 0 5px;
 }
 
-.Rate{cursor: default;}
-
 .Rate__star{
   color: #dedbdb;
   display: inline-block;