├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── build.js
├── dist
├── vue-rate.common.d.ts
├── vue-rate.common.js
├── vue-rate.common.js.map
├── vue-rate.css
├── vue-rate.umd.d.ts
├── vue-rate.umd.js
├── vue-rate.umd.js.map
├── vue-rate.umd.min.d.ts
├── vue-rate.umd.min.js
└── vue-rate.umd.min.js.map
├── index.html
├── package.json
├── src
├── App.vue
├── Rate.vue
└── main.js
├── vue-rate.d.ts
└── vue.config.js
/.eslintignore:
--------------------------------------------------------------------------------
1 | src/main.js
2 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: {
4 | node: true
5 | },
6 | parserOptions: {
7 | sourceType: 'module',
8 | parser: 'babel-eslint'
9 | },
10 |
11 | extends: [
12 | "plugin:vue/essential",
13 | "eslint:recommended"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log*
4 | yarn-debug.log*
5 | yarn-error.log*
6 | demo/
7 | package-lock.json
8 | yarn.lock
9 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Sinan Mutlu
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Vue Rate
2 |
3 | [](https://www.npmjs.com/package/vue-rate/v/3.0.0)
4 | [](https://www.npmjs.com/package/vue-rate/v/3.0.0)
5 |
6 | > Rate component for Vue - [Demo](https://sinanmtl.github.io/vue-rate/).
7 | > Note: This version for Vue 3. If you want to use for Vue 2.x, please [see](https://github.com/SinanMtl/vue-rate/tree/master).
8 |
9 | ## Installation and usage
10 |
11 | Once, install rate component for your project
12 |
13 | ```bash
14 | npm install vue-rate@next --save
15 | // or yarn add vue-rate@next
16 | ```
17 |
18 | Import Vue Rate into your app
19 |
20 | ```javascript
21 | import { createApp } from 'vue'
22 | import rate from 'vue-rate'
23 | import 'vue-rate/dist/vue-rate.css'
24 |
25 | createApp(App)
26 | .use(rate)
27 | .mount('#app')
28 | ```
29 |
30 | Use HTML template
31 |
32 | ```html
33 |
34 | ```
35 |
36 | ## Options from props
37 |
38 | - `length {number}`: Star size
39 |
40 | ```html
41 |
42 | ```
43 |
44 | - `value {number}`: Default value
45 |
46 | ```html
47 |
48 | ```
49 |
50 | - `showcount {boolean}`: Shows rate number when mouseover the star.
51 |
52 | ```html
53 |
54 | ```
55 |
56 | - `ratedesc {object}`: Rate star description array.
57 |
58 | ```html
59 |
60 | ```
61 |
62 | - `disabled {boolean}`: Disable rate.
63 |
64 | ```html
65 |
66 | ```
67 |
68 | - `readonly {boolean}`: Read-only rate.
69 |
70 | ```html
71 |
72 | ```
73 |
74 | - `iconref {string}`: ID of symbol icon
75 |
76 | Insert symbol icon into your codebase
77 | ```html
78 |
79 |
80 |
81 | ````
82 |
83 | Then add Rate component. `iconref` must be symbol's id
84 | ```html
85 |
86 | ```
87 |
88 | - `slot`: Custom icon via slot
89 |
90 | You can directly use custom icon via default slot
91 | ```html
92 |
93 |
100 |
101 | ```
102 |
103 | Add some flavour
104 | ```css
105 | .RateCustom.viaSlot .icon {
106 | width: 25px;
107 | height: 25px;
108 | }
109 | .Rate.viaSlot .Rate__star.filled{color: #813d1a;}
110 | .Rate.viaSlot .Rate__star.hover{color: #E67136;}
111 | ```
112 |
113 | - `v-model`
114 |
115 | ```javascript
116 | export default {
117 | data: {
118 | return () { myRate: 0 }
119 | }
120 | }
121 | ```
122 |
123 | or `setup()` in Option API
124 | ```javascript
125 | import { ref } from 'vue';
126 |
127 | export default {
128 | setup () {
129 | const myRate = ref(0);
130 | return { myRate }
131 | }
132 | }
133 | ```
134 |
135 | or Composition API with `
160 | ```
161 |
162 | ```html
163 |
164 | ```
165 |
166 | ## Development
167 | 1. Fork the project
168 | 2. Install all dependencies
169 | 3. Make your changes on `src/Rate.vue`
170 | 4. Build the package
171 | ```bash
172 | npm run build
173 | # or yarn build
174 | ```
175 | 5. Commit and create PR
176 |
177 | ## License
178 |
179 | MIT.
180 |
--------------------------------------------------------------------------------
/build.js:
--------------------------------------------------------------------------------
1 | import Rate from './src/Rate.vue'
2 |
3 | function install(Vue, options = {}) {
4 | Vue.component(options.name || Rate.name || "rate", Rate)
5 | global.Rate = Rate
6 | }
7 |
8 | export {
9 | Rate
10 | }
11 |
12 | // Plugin
13 | const plugin = {
14 | install
15 | };
16 |
17 | export default plugin;
18 |
19 | if (typeof window !== 'undefined' && window.Vue) {
20 | window.Vue.use(plugin)
21 | }
22 |
--------------------------------------------------------------------------------
/dist/vue-rate.common.d.ts:
--------------------------------------------------------------------------------
1 | export namespace plugin {
2 | function install(): void
3 | }
4 |
5 | declare module "vue-rate" {
6 | export function install(): void
7 | }
8 |
--------------------------------------------------------------------------------
/dist/vue-rate.common.js:
--------------------------------------------------------------------------------
1 | /******/ (() => { // webpackBootstrap
2 | /******/ var __webpack_modules__ = ({
3 |
4 | /***/ 679:
5 | /***/ (function(module, exports) {
6 |
7 | var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// addapted from the document.currentScript polyfill by Adam Miller
8 | // MIT license
9 | // source: https://github.com/amiller-gh/currentScript-polyfill
10 |
11 | // added support for Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1620505
12 |
13 | (function (root, factory) {
14 | if (true) {
15 | !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
16 | __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
17 | (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
18 | __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
19 | } else {}
20 | }(typeof self !== 'undefined' ? self : this, function () {
21 | function getCurrentScript () {
22 | var descriptor = Object.getOwnPropertyDescriptor(document, 'currentScript')
23 | // for chrome
24 | if (!descriptor && 'currentScript' in document && document.currentScript) {
25 | return document.currentScript
26 | }
27 |
28 | // for other browsers with native support for currentScript
29 | if (descriptor && descriptor.get !== getCurrentScript && document.currentScript) {
30 | return document.currentScript
31 | }
32 |
33 | // IE 8-10 support script readyState
34 | // IE 11+ & Firefox support stack trace
35 | try {
36 | throw new Error();
37 | }
38 | catch (err) {
39 | // Find the second match for the "at" string to get file src url from stack.
40 | var ieStackRegExp = /.*at [^(]*\((.*):(.+):(.+)\)$/ig,
41 | ffStackRegExp = /@([^@]*):(\d+):(\d+)\s*$/ig,
42 | stackDetails = ieStackRegExp.exec(err.stack) || ffStackRegExp.exec(err.stack),
43 | scriptLocation = (stackDetails && stackDetails[1]) || false,
44 | line = (stackDetails && stackDetails[2]) || false,
45 | currentLocation = document.location.href.replace(document.location.hash, ''),
46 | pageSource,
47 | inlineScriptSourceRegExp,
48 | inlineScriptSource,
49 | scripts = document.getElementsByTagName('script'); // Live NodeList collection
50 |
51 | if (scriptLocation === currentLocation) {
52 | pageSource = document.documentElement.outerHTML;
53 | inlineScriptSourceRegExp = new RegExp('(?:[^\\n]+?\\n){0,' + (line - 2) + '}[^<]*\n\n\n\n","// extracted by mini-css-extract-plugin\nexport {};","export * from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!../node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!../node_modules/vue-loader/dist/stylePostLoader.js!../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Rate.vue?vue&type=style&index=0&id=76304c58&lang=css\"","import script from \"./Rate.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./Rate.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./Rate.vue?vue&type=style&index=0&id=76304c58&lang=css\"\n\nconst __exports__ = script;\n\nexport default __exports__","import Rate from './src/Rate.vue'\n\nfunction install(Vue, options = {}) {\n\tVue.component(options.name || Rate.name || \"rate\", Rate)\n\tglobal.Rate = Rate\n}\n\nexport {\n\tRate\n}\n\n// Plugin\nconst plugin = {\n\tinstall\n};\n\nexport default plugin;\n\nif (typeof window !== 'undefined' && window.Vue) {\n\twindow.Vue.use(plugin)\n}\n","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":[],"sourceRoot":""}
--------------------------------------------------------------------------------
/dist/vue-rate.css:
--------------------------------------------------------------------------------
1 | .Rate{cursor:default}.Rate .icon{display:inline-block;width:16px;height:16px;stroke-width:0;stroke:currentColor;fill:currentColor;vertical-align:middle;top:-2px;position:relative;margin:0 5px}.Rate__star{color:#dedbdb;display:inline-block;padding:7px;text-decoration:none;cursor:pointer;background:transparent none;border:0}.Rate__star .icon{top:0;vertical-align:middle}.Rate__star.filled,.Rate__star.hover{color:#efc20f}.Rate__star:focus,.Rate__star:hover{text-decoration:none}.Rate__view .count,.Rate__view .desc{display:inline-block;vertical-align:middle;padding:7px}.Rate.has-error .Rate__star{color:#f37a77}.Rate.has-error .Rate__star.filled,.Rate.has-error .Rate__star.hover{color:#efc20f}.Rate__star[disabled]{opacity:.8}.Rate__star.filled[disabled],.Rate__star.hover[disabled]{color:#efc20f;opacity:.6}.Rate__view.disabled .count,.Rate__view.disabled .desc{color:#ccc}
--------------------------------------------------------------------------------
/dist/vue-rate.umd.d.ts:
--------------------------------------------------------------------------------
1 | export namespace plugin {
2 | function install(): void
3 | }
4 |
5 | declare module "vue-rate" {
6 | export function install(): void
7 | }
8 |
--------------------------------------------------------------------------------
/dist/vue-rate.umd.js:
--------------------------------------------------------------------------------
1 | (function webpackUniversalModuleDefinition(root, factory) {
2 | if(typeof exports === 'object' && typeof module === 'object')
3 | module.exports = factory(require("vue"));
4 | else if(typeof define === 'function' && define.amd)
5 | define([], factory);
6 | else if(typeof exports === 'object')
7 | exports["vue-rate"] = factory(require("vue"));
8 | else
9 | root["vue-rate"] = factory(root["Vue"]);
10 | })((typeof self !== 'undefined' ? self : this), (__WEBPACK_EXTERNAL_MODULE__203__) => {
11 | return /******/ (() => { // webpackBootstrap
12 | /******/ var __webpack_modules__ = ({
13 |
14 | /***/ 679:
15 | /***/ (function(module, exports) {
16 |
17 | var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// addapted from the document.currentScript polyfill by Adam Miller
18 | // MIT license
19 | // source: https://github.com/amiller-gh/currentScript-polyfill
20 |
21 | // added support for Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1620505
22 |
23 | (function (root, factory) {
24 | if (true) {
25 | !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
26 | __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
27 | (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
28 | __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
29 | } else {}
30 | }(typeof self !== 'undefined' ? self : this, function () {
31 | function getCurrentScript () {
32 | var descriptor = Object.getOwnPropertyDescriptor(document, 'currentScript')
33 | // for chrome
34 | if (!descriptor && 'currentScript' in document && document.currentScript) {
35 | return document.currentScript
36 | }
37 |
38 | // for other browsers with native support for currentScript
39 | if (descriptor && descriptor.get !== getCurrentScript && document.currentScript) {
40 | return document.currentScript
41 | }
42 |
43 | // IE 8-10 support script readyState
44 | // IE 11+ & Firefox support stack trace
45 | try {
46 | throw new Error();
47 | }
48 | catch (err) {
49 | // Find the second match for the "at" string to get file src url from stack.
50 | var ieStackRegExp = /.*at [^(]*\((.*):(.+):(.+)\)$/ig,
51 | ffStackRegExp = /@([^@]*):(\d+):(\d+)\s*$/ig,
52 | stackDetails = ieStackRegExp.exec(err.stack) || ffStackRegExp.exec(err.stack),
53 | scriptLocation = (stackDetails && stackDetails[1]) || false,
54 | line = (stackDetails && stackDetails[2]) || false,
55 | currentLocation = document.location.href.replace(document.location.hash, ''),
56 | pageSource,
57 | inlineScriptSourceRegExp,
58 | inlineScriptSource,
59 | scripts = document.getElementsByTagName('script'); // Live NodeList collection
60 |
61 | if (scriptLocation === currentLocation) {
62 | pageSource = document.documentElement.outerHTML;
63 | inlineScriptSourceRegExp = new RegExp('(?:[^\\n]+?\\n){0,' + (line - 2) + '}[^<]*\n\n\n\n","// extracted by mini-css-extract-plugin\nexport {};","export * from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-52.use[0]!../node_modules/css-loader/dist/cjs.js??clonedRuleSet-52.use[1]!../node_modules/vue-loader/dist/stylePostLoader.js!../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-52.use[2]!../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Rate.vue?vue&type=style&index=0&id=76304c58&lang=css\"","import script from \"./Rate.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./Rate.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./Rate.vue?vue&type=style&index=0&id=76304c58&lang=css\"\n\nconst __exports__ = script;\n\nexport default __exports__","import Rate from './src/Rate.vue'\n\nfunction install(Vue, options = {}) {\n\tVue.component(options.name || Rate.name || \"rate\", Rate)\n\tglobal.Rate = Rate\n}\n\nexport {\n\tRate\n}\n\n// Plugin\nconst plugin = {\n\tinstall\n};\n\nexport default plugin;\n\nif (typeof window !== 'undefined' && window.Vue) {\n\twindow.Vue.use(plugin)\n}\n","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":[],"sourceRoot":""}
--------------------------------------------------------------------------------
/dist/vue-rate.umd.min.d.ts:
--------------------------------------------------------------------------------
1 | export namespace plugin {
2 | function install(): void
3 | }
4 |
5 | declare module "vue-rate" {
6 | export function install(): void
7 | }
8 |
--------------------------------------------------------------------------------
/dist/vue-rate.umd.min.js:
--------------------------------------------------------------------------------
1 | (function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["vue-rate"]=t(require("vue")):e["vue-rate"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(e=>(()=>{var t={679:function(e,t){var n,r,o;(function(l,a){r=[],n=a,o="function"===typeof n?n.apply(t,r):n,void 0===o||(e.exports=o)})("undefined"!==typeof self&&self,(function(){function e(){var t=Object.getOwnPropertyDescriptor(document,"currentScript");if(!t&&"currentScript"in document&&document.currentScript)return document.currentScript;if(t&&t.get!==e&&document.currentScript)return document.currentScript;try{throw new Error}catch(f){var n,r,o,l=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,a=/@([^@]*):(\d+):(\d+)\s*$/gi,u=l.exec(f.stack)||a.exec(f.stack),c=u&&u[1]||!1,i=u&&u[2]||!1,d=document.location.href.replace(document.location.hash,""),s=document.getElementsByTagName("script");c===d&&(n=document.documentElement.outerHTML,r=new RegExp("(?:[^\\n]+?\\n){0,"+(i-2)+"}[^<]*\n\n\n\n","import script from \"./Rate.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./Rate.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./Rate.vue?vue&type=style&index=0&id=76304c58&lang=css\"\n\nconst __exports__ = script;\n\nexport default __exports__","import Rate from './src/Rate.vue'\n\nfunction install(Vue, options = {}) {\n\tVue.component(options.name || Rate.name || \"rate\", Rate)\n\tglobal.Rate = Rate\n}\n\nexport {\n\tRate\n}\n\n// Plugin\nconst plugin = {\n\tinstall\n};\n\nexport default plugin;\n\nif (typeof window !== 'undefined' && window.Vue) {\n\twindow.Vue.use(plugin)\n}\n","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["root","factory","exports","module","require","define","amd","self","this","__WEBPACK_EXTERNAL_MODULE__203__","getCurrentScript","descriptor","Object","getOwnPropertyDescriptor","document","currentScript","get","Error","err","pageSource","inlineScriptSourceRegExp","inlineScriptSource","ieStackRegExp","ffStackRegExp","stackDetails","exec","stack","scriptLocation","line","currentLocation","location","href","replace","hash","scripts","getElementsByTagName","documentElement","outerHTML","RegExp","trim","i","length","readyState","src","innerHTML","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","call","d","definition","key","o","defineProperty","enumerable","g","globalThis","Function","e","window","obj","prop","prototype","hasOwnProperty","r","Symbol","toStringTag","value","p","match","slots","useSlots","over","ref","rate","convertValue","props","onOver","index","readonly","onOut","setRate","emit","isFilled","watch","modelValue","newVal","onBeforeMount","val","__exports__","install","Vue","options","component","name","Rate","use"],"sourceRoot":""}
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vue Rate
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-rate",
3 | "version": "3.1.1",
4 | "description": "Rate component for Vue",
5 | "main": "dist/vue-rate.umd.min.js",
6 | "types": "dist/vue-rate.umd.min.d.ts",
7 | "repository": {
8 | "type": "git",
9 | "url": "git+https://github.com/SinanMtl/vue-rate.git"
10 | },
11 | "keywords": [
12 | "vue",
13 | "rate",
14 | "component",
15 | "vue.js",
16 | "vue-component",
17 | "vue3"
18 | ],
19 | "author": "Sinan Mutlu ",
20 | "license": "MIT",
21 | "sideEffects": [
22 | "**/*.css"
23 | ],
24 | "bugs": {
25 | "url": "https://github.com/SinanMtl/vue-rate/issues"
26 | },
27 | "homepage": "https://github.com/SinanMtl/vue-rate#readme",
28 | "scripts": {
29 | "dev": "vue-cli-service serve src/main.js",
30 | "build": "vue-cli-service build --target lib --inilne-vue --name vue-rate build.js && rm dist/demo.html && npm run types",
31 | "demo": "vue-cli-service build --mode=demo --dest=demo",
32 | "lint": "vue-cli-service lint",
33 | "types": "cp vue-rate.d.ts dist/vue-rate.common.d.ts && cp vue-rate.d.ts dist/vue-rate.umd.d.ts && cp vue-rate.d.ts dist/vue-rate.umd.min.d.ts "
34 | },
35 | "dependencies": {
36 | "vue": "^3.0.0"
37 | },
38 | "devDependencies": {
39 | "@vue/cli-service": "^5.0.4",
40 | "vue-loader": "^17.0.0",
41 | "vue-template-compiler": "^2.6.14"
42 | },
43 | "files": [
44 | "dist"
45 | ]
46 | }
47 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Vue Rate Component
4 |
Active Form
5 |
6 |
7 |
8 | Basic
9 |
10 |
11 |
12 |
13 |
14 | Default value
15 |
16 |
17 |
18 |
19 |
20 | Show count
21 |
22 |
23 |
24 |
25 |
26 | Show count (Default value)
27 |
28 |
29 |
30 |
31 |
32 | Rate Descriptions
33 |
34 |
35 |
36 |
37 |
38 | Rate Descriptions (Default Value)
39 |
40 |
41 |
42 |
43 |
44 | Rate Descriptions (Read-only)
45 |
46 |
47 |
48 |
49 |
Disabled Form
50 |
51 |
52 |
53 | Basic
54 |
55 |
56 |
57 |
58 |
59 | Default value
60 |
61 |
62 |
63 |
64 |
65 | Show count
66 |
67 |
68 |
69 |
70 |
71 | Rate Descriptions
72 |
73 |
74 |
75 |
76 |
77 |
Customization
78 |
79 |
80 | Via Slot
81 |
82 |
89 |
90 |
91 | Example
92 |
93 |
94 | <template>
95 | <div>
96 | <rate :length="5" class="viaSlot">
97 | <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
98 | <path
99 | fill-rule="evenodd"
100 | clip-rule="evenodd"
101 | d="M12.034 7.074H19.416L13.445 11.448L15.726 18.524L9.75201 14.151L3.77901 18.524L6.06101 11.448L0.0880127 7.075H7.47001L9.75201 0.002V0L12.034 7.075V7.074Z"
102 | fill="currentColor"/>
103 | </svg>
104 | </rate>
105 | </div>
106 | </template>
107 |
108 | <style>
109 | .RateCustom.viaSlot .icon {
110 | width: 25px;
111 | height: 25px;
112 | }
113 | .Rate.viaSlot .Rate__star.filled{color: #813d1a;}
114 | .Rate.viaSlot .Rate__star.hover{color: #E67136;}
115 | </style>
116 |
117 |
118 |
119 |
120 | Via SVG Symbol
121 |
136 |
137 |
138 | Example
139 |
140 |
141 | <template>
142 | <div>
143 | <svg style="position: absolute; width: 0; height: 0;" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
144 | <defs>
145 | <symbol id="icon-heart" class="icon" viewBox="0 0 32 32">
146 | <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" />
147 | </symbol>
148 | </defs>
149 | </svg>
150 |
151 | <rate class="RateCustom" :length="5" :value="3" :ratedesc="desc" iconref="icon-heart">
152 | </div>
153 | </template>
154 |
155 | <style>
156 | .RateCustom.Rate .icon {
157 | width: 25px;
158 | height: 25px;
159 | }
160 | .RateCustom.Rate .Rate__star.filled { color: blue; }
161 | .RateCustom.Rate .Rate__star.hover { color: red; }
162 | </style>
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
186 |
187 |
254 |
255 |
--------------------------------------------------------------------------------
/src/Rate.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
19 |
20 |
21 |
40 |
41 |
42 | {{over}}
43 | {{ratedesc[over - 1]}}
44 |
45 |
46 |
47 |
48 |
107 |
108 |
109 |
187 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 |
4 | createApp(App).mount('#app')
5 |
6 |
--------------------------------------------------------------------------------
/vue-rate.d.ts:
--------------------------------------------------------------------------------
1 | export namespace plugin {
2 | function install(): void
3 | }
4 |
5 | declare module "vue-rate" {
6 | export function install(): void
7 | }
8 |
--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const IsProd = process.env.NODE_ENV === 'production'
2 |
3 | const config = {}
4 |
5 | module.exports = config
6 |
--------------------------------------------------------------------------------