${this.getVoidIcon()}
${this.getIcon()}
diff --git a/lib/starscore.js b/lib/starscore.js
index a55b983..b2ef012 100644
--- a/lib/starscore.js
+++ b/lib/starscore.js
@@ -52,7 +52,7 @@ class C {
return this.value;
}
setOptions(t, i) {
- return this.options = Object.assign(this.options, t), i && this.render(), this;
+ return this.options = Object.assign(this.options, t), i && (this.initCSSVars(), this.render()), this;
}
getIcon() {
return this.options.icon ? this.options.icon : h[this.options.type].icon;
diff --git a/lib/starscore.umd.cjs b/lib/starscore.umd.cjs
index 6b87e69..f5b15d9 100644
--- a/lib/starscore.umd.cjs
+++ b/lib/starscore.umd.cjs
@@ -1,8 +1,8 @@
-(function(i,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("fourdom")):typeof define=="function"&&define.amd?define(["exports","fourdom"],e):(i=typeof globalThis!="undefined"?globalThis:i||self,e(i.Starscore={},i.fourdom))})(this,function(i,e){"use strict";var v=Object.defineProperty;var m=(i,e,o)=>e in i?v(i,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):i[e]=o;var h=(i,e,o)=>(m(i,typeof e!="symbol"?e+"":e,o),o);var o=(n=>(n.containerClassName="starscore-container",n.scoreWrapperClassName="starscore-radio-group",n.scoreItemClassName="starscore-radio",n.scoreIconClassName="starscore-radio__icon",n.scoreVoidIconClassName="starscore-radio__void-icon",n))(o||{});const l=n=>typeof n=="number"?`${n}px`:n,d={star:{icon:'
',voidIcon:'
'},heart:{icon:'
',voidIcon:'
'}};class g{constructor(t){h(this,"options",{container:"",count:5,initialValue:0,size:"20px",gutter:"4px",color:"#ee0a24",voidColor:"#c8c9cc",disabledColor:"#c8c9cc",icon:"",type:"star",voidIcon:"",clearable:!0,readonly:!1,disabled:!1,allowHalf:!1,scoreDetails:[{score:1,description:""},{score:2,description:""},{score:3,description:""},{score:4,description:""},{score:5,description:""}],onChange:()=>{}});h(this,"container",null);h(this,"value",0);this.options=Object.assign(this.options,t),this.value=this.options.initialValue,this.clickListener=this.clickListener.bind(this),this.initCSSVars(),this.render()}setValue(t){return t<0?this.value=0:t>this.options.count?this.value=this.options.count:this.value=t,this.render(),this}getValue(){return this.value}setOptions(t,s){return this.options=Object.assign(this.options,t),s&&this.render(),this}getIcon(){return this.options.icon?this.options.icon:d[this.options.type].icon}getVoidIcon(){return this.options.voidIcon?this.options.voidIcon:d[this.options.type].voidIcon}get scoreItems(){const t=[];for(let s=1;s<=this.options.count;s++){const a=s-this.value,r=this.value>=s?1:a>=1?0:Number.parseFloat((1-a).toFixed(1));t.push({score:s,active:this.value>=s,proportion:r,width:`${r*100}%`})}return t}getScoreItemFromChild(t){return t.dataset.score?t:t.parentElement?this.getScoreItemFromChild(t.parentElement):null}emitChange(t){this.value!==t&&(this.options.onChange&&this.options.onChange(t),this.setValue(t))}clickListener(t){if(this.options.disabled||this.options.readonly)return;const s=t.target,a=t.offsetX,r=this.getScoreItemFromChild(s);if(r){let c=Number(r.dataset.score);this.options.allowHalf&&a<=c/2&&(c=c-.5);const u=this.options.clearable&&this.value===c?0:c;this.emitChange(u)}}registerListeners(){this.removeListeners(),this.getScoreItemEl().forEach(t=>{t.addEventListener("click",this.clickListener)})}removeListeners(){this.getScoreItemEl().forEach(t=>{t.removeEventListener("click",this.clickListener)})}getScoreItemEl(){return this.getContainer().querySelectorAll(`.${o.scoreItemClassName}`)}initCSSVars(){e.css(this.getContainer(),{"--starscore-size":l(this.options.size),"--starscore-color":this.options.color,"--starscore-void-color":this.options.voidColor,"--starscore-disabled-color":this.options.disabledColor,"--starscore-gutter":l(this.options.gutter)})}generateRadioHTML(t){return`
+(function(i,s){typeof exports=="object"&&typeof module!="undefined"?s(exports,require("fourdom")):typeof define=="function"&&define.amd?define(["exports","fourdom"],s):(i=typeof globalThis!="undefined"?globalThis:i||self,s(i.Starscore={},i.fourdom))})(this,function(i,s){"use strict";var v=Object.defineProperty;var m=(i,s,o)=>s in i?v(i,s,{enumerable:!0,configurable:!0,writable:!0,value:o}):i[s]=o;var h=(i,s,o)=>(m(i,typeof s!="symbol"?s+"":s,o),o);var o=(n=>(n.containerClassName="starscore-container",n.scoreWrapperClassName="starscore-radio-group",n.scoreItemClassName="starscore-radio",n.scoreIconClassName="starscore-radio__icon",n.scoreVoidIconClassName="starscore-radio__void-icon",n))(o||{});const l=n=>typeof n=="number"?`${n}px`:n,d={star:{icon:'
',voidIcon:'
'},heart:{icon:'
',voidIcon:'
'}};class g{constructor(t){h(this,"options",{container:"",count:5,initialValue:0,size:"20px",gutter:"4px",color:"#ee0a24",voidColor:"#c8c9cc",disabledColor:"#c8c9cc",icon:"",type:"star",voidIcon:"",clearable:!0,readonly:!1,disabled:!1,allowHalf:!1,scoreDetails:[{score:1,description:""},{score:2,description:""},{score:3,description:""},{score:4,description:""},{score:5,description:""}],onChange:()=>{}});h(this,"container",null);h(this,"value",0);this.options=Object.assign(this.options,t),this.value=this.options.initialValue,this.clickListener=this.clickListener.bind(this),this.initCSSVars(),this.render()}setValue(t){return t<0?this.value=0:t>this.options.count?this.value=this.options.count:this.value=t,this.render(),this}getValue(){return this.value}setOptions(t,e){return this.options=Object.assign(this.options,t),e&&(this.initCSSVars(),this.render()),this}getIcon(){return this.options.icon?this.options.icon:d[this.options.type].icon}getVoidIcon(){return this.options.voidIcon?this.options.voidIcon:d[this.options.type].voidIcon}get scoreItems(){const t=[];for(let e=1;e<=this.options.count;e++){const a=e-this.value,r=this.value>=e?1:a>=1?0:Number.parseFloat((1-a).toFixed(1));t.push({score:e,active:this.value>=e,proportion:r,width:`${r*100}%`})}return t}getScoreItemFromChild(t){return t.dataset.score?t:t.parentElement?this.getScoreItemFromChild(t.parentElement):null}emitChange(t){this.value!==t&&(this.options.onChange&&this.options.onChange(t),this.setValue(t))}clickListener(t){if(this.options.disabled||this.options.readonly)return;const e=t.target,a=t.offsetX,r=this.getScoreItemFromChild(e);if(r){let c=Number(r.dataset.score);this.options.allowHalf&&a<=c/2&&(c=c-.5);const u=this.options.clearable&&this.value===c?0:c;this.emitChange(u)}}registerListeners(){this.removeListeners(),this.getScoreItemEl().forEach(t=>{t.addEventListener("click",this.clickListener)})}removeListeners(){this.getScoreItemEl().forEach(t=>{t.removeEventListener("click",this.clickListener)})}getScoreItemEl(){return this.getContainer().querySelectorAll(`.${o.scoreItemClassName}`)}initCSSVars(){s.css(this.getContainer(),{"--starscore-size":l(this.options.size),"--starscore-color":this.options.color,"--starscore-void-color":this.options.voidColor,"--starscore-disabled-color":this.options.disabledColor,"--starscore-gutter":l(this.options.gutter)})}generateRadioHTML(t){return`
${this.getVoidIcon()}
${this.getIcon()}
- `}generateRadioGroupHTML(){const t=this.scoreItems.reduce((r,c)=>(r+=`${this.generateRadioHTML(c)}`,r),""),s=this.options.disabled?"disabled":"",a=this.options.readonly?"readonly":"";return`
-
${t}
- `}render(){const t=this.getContainer(),s=`${this.generateRadioGroupHTML()}`;e.addClass(t,o.containerClassName),t.innerHTML=s,this.registerListeners()}destory(){this.removeListeners()}getContainer(){if(this.container)return this.container;const t=typeof this.options.container=="string"?document.querySelector(`${this.options.container}`):this.options.container;return t&&(this.container=t),t}}const p=n=>new g(n),L="";i.Starscore=g,i.createStarscore=p,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
+ `}generateRadioGroupHTML(){const t=this.scoreItems.reduce((r,c)=>(r+=`${this.generateRadioHTML(c)}`,r),""),e=this.options.disabled?"disabled":"",a=this.options.readonly?"readonly":"";return`
+
${t}
+ `}render(){const t=this.getContainer(),e=`${this.generateRadioGroupHTML()}`;s.addClass(t,o.containerClassName),t.innerHTML=e,this.registerListeners()}destory(){this.removeListeners()}getContainer(){if(this.container)return this.container;const t=typeof this.options.container=="string"?document.querySelector(`${this.options.container}`):this.options.container;return t&&(this.container=t),t}}const p=n=>new g(n),L="";i.Starscore=g,i.createStarscore=p,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
diff --git a/package.json b/package.json
index ba03f7e..1fe023e 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,8 @@
"keywords": [
"star",
"score",
- "rater"
+ "rater",
+ "star-score"
],
"files": [
"lib"
@@ -58,11 +59,13 @@
"changelogen": "^0.5.4",
"cross-env": "^7.0.3",
"cz-conventional-changelog": "^3.3.0",
+ "demoify": "^1.2.0",
"eslint": "^8.45.0",
"eslint-plugin-vue": "^9.15.1",
"jsdom": "^22.1.0",
"npm-run-all": "^4.1.5",
"prettier": "^3.0.0",
+ "prismjs": "^1.29.0",
"rollup": "^3.28.0",
"rollup-plugin-dts": "^5.3.1",
"sass": "^1.65.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2c2a4bb..d319078 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -42,6 +42,9 @@ devDependencies:
cz-conventional-changelog:
specifier: ^3.3.0
version: 3.3.0
+ demoify:
+ specifier: ^1.2.0
+ version: 1.2.0(vue@3.3.4)
eslint:
specifier: ^8.45.0
version: 8.45.0
@@ -57,6 +60,9 @@ devDependencies:
prettier:
specifier: ^3.0.0
version: 3.0.0
+ prismjs:
+ specifier: ^1.29.0
+ version: 1.29.0
rollup:
specifier: ^3.28.0
version: 3.28.0
@@ -1644,6 +1650,14 @@ packages:
engines: {node: '>=0.4.0'}
dev: true
+ /demoify@1.2.0(vue@3.3.4):
+ resolution: {integrity: sha512-NlijzpGc+JWbeLRgYV4QcAD5GEmswcRLeB0x508A7JbNhPlQ8uu4IwH4oXR4Mez3nw/uiKq2Lf1I+l1pGpcD1g==}
+ peerDependencies:
+ vue: ^3.3.4
+ dependencies:
+ vue: 3.3.4
+ dev: true
+
/destr@2.0.1:
resolution: {integrity: sha512-M1Ob1zPSIvlARiJUkKqvAZ3VAqQY6Jcuth/pBKQ2b1dX/Qx0OnJ8Vux6J2H5PTMQeRzWrrbTu70VxBfv/OPDJA==}
dev: true
@@ -3446,6 +3460,11 @@ packages:
react-is: 18.2.0
dev: true
+ /prismjs@1.29.0:
+ resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
+ engines: {node: '>=6'}
+ dev: true
+
/proto-list@1.2.4:
resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
dev: true
diff --git a/src/components/BasicUsage/StarScore.vue b/src/components/BasicUsage/StarScore.vue
new file mode 100644
index 0000000..d292f44
--- /dev/null
+++ b/src/components/BasicUsage/StarScore.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
diff --git a/src/components/BasicUsage/index.vue b/src/components/BasicUsage/index.vue
new file mode 100644
index 0000000..376b6d6
--- /dev/null
+++ b/src/components/BasicUsage/index.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ {{ StarScoreRaw }}
+
+
+
+
+
+
+
diff --git a/src/components/BuiltInTypeUsage/StarScore.vue b/src/components/BuiltInTypeUsage/StarScore.vue
new file mode 100644
index 0000000..5f036e1
--- /dev/null
+++ b/src/components/BuiltInTypeUsage/StarScore.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
diff --git a/src/components/BuiltInTypeUsage/index.vue b/src/components/BuiltInTypeUsage/index.vue
new file mode 100644
index 0000000..49b88a4
--- /dev/null
+++ b/src/components/BuiltInTypeUsage/index.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ {{ StarScoreRaw }}
+
+
+
+
+
+
+
diff --git a/src/components/ChangeEventUsage/StarScore.vue b/src/components/ChangeEventUsage/StarScore.vue
new file mode 100644
index 0000000..1187eaa
--- /dev/null
+++ b/src/components/ChangeEventUsage/StarScore.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
diff --git a/src/components/ChangeEventUsage/index.vue b/src/components/ChangeEventUsage/index.vue
new file mode 100644
index 0000000..67c644c
--- /dev/null
+++ b/src/components/ChangeEventUsage/index.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ {{ StarScoreRaw }}
+
+
+
+
+
+
+
diff --git a/src/components/ClearableUsage/StarScore.vue b/src/components/ClearableUsage/StarScore.vue
new file mode 100644
index 0000000..ffd1f44
--- /dev/null
+++ b/src/components/ClearableUsage/StarScore.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
diff --git a/src/components/ClearableUsage/index.vue b/src/components/ClearableUsage/index.vue
new file mode 100644
index 0000000..cc358bf
--- /dev/null
+++ b/src/components/ClearableUsage/index.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+ When the clearable prop is set to
+ true, clicking on the same value
+ again will reset the value to 0.
+
+
+
+
+
+
+ {{ StarScoreRaw }}
+
+
+
+
+
+
+
diff --git a/src/components/CustomCountUsage/StarScore.vue b/src/components/CustomCountUsage/StarScore.vue
new file mode 100644
index 0000000..1969d8a
--- /dev/null
+++ b/src/components/CustomCountUsage/StarScore.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
diff --git a/src/components/CustomCountUsage/index.vue b/src/components/CustomCountUsage/index.vue
new file mode 100644
index 0000000..964d6ce
--- /dev/null
+++ b/src/components/CustomCountUsage/index.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ {{ StarScoreRaw }}
+
+
+
+
+
+
+
diff --git a/src/components/CustomStyleUsage/StarScore.vue b/src/components/CustomStyleUsage/StarScore.vue
new file mode 100644
index 0000000..9a4c047
--- /dev/null
+++ b/src/components/CustomStyleUsage/StarScore.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
diff --git a/src/components/CustomStyleUsage/index.vue b/src/components/CustomStyleUsage/index.vue
new file mode 100644
index 0000000..5f72b15
--- /dev/null
+++ b/src/components/CustomStyleUsage/index.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ {{ StarScoreRaw }}
+
+
+
+
+
+
+
diff --git a/src/components/DisabledUsage/StarScore.vue b/src/components/DisabledUsage/StarScore.vue
new file mode 100644
index 0000000..e053adb
--- /dev/null
+++ b/src/components/DisabledUsage/StarScore.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
diff --git a/src/components/DisabledUsage/index.vue b/src/components/DisabledUsage/index.vue
new file mode 100644
index 0000000..14486cd
--- /dev/null
+++ b/src/components/DisabledUsage/index.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ {{ StarScoreRaw }}
+
+
+
+
+
+
+
diff --git a/src/components/HalfStarUsage/StarScore.vue b/src/components/HalfStarUsage/StarScore.vue
new file mode 100644
index 0000000..ced11d8
--- /dev/null
+++ b/src/components/HalfStarUsage/StarScore.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
diff --git a/src/components/HalfStarUsage/index.vue b/src/components/HalfStarUsage/index.vue
new file mode 100644
index 0000000..474e0a1
--- /dev/null
+++ b/src/components/HalfStarUsage/index.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ {{ StarScoreRaw }}
+
+
+
+
+
+
+
diff --git a/src/components/ReadonlyUsage/StarScore.vue b/src/components/ReadonlyUsage/StarScore.vue
new file mode 100644
index 0000000..e2305a8
--- /dev/null
+++ b/src/components/ReadonlyUsage/StarScore.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
diff --git a/src/components/ReadonlyUsage/index.vue b/src/components/ReadonlyUsage/index.vue
new file mode 100644
index 0000000..1b2c682
--- /dev/null
+++ b/src/components/ReadonlyUsage/index.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ {{ StarScoreRaw }}
+
+
+
+
+
+
+
diff --git a/src/lib/Starscore.ts b/src/lib/Starscore.ts
index e77501b..4abe0b0 100644
--- a/src/lib/Starscore.ts
+++ b/src/lib/Starscore.ts
@@ -40,7 +40,7 @@ class Starscore implements StarscoreInstance {
icon: '',
type: 'star',
voidIcon: '',
- clearable: true,
+ clearable: false,
readonly: false,
disabled: false,
allowHalf: false,
diff --git a/src/main.ts b/src/main.ts
index 5a5dbdb..4c28e2a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,8 +4,15 @@ import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
+import DemoifyUI from 'demoify'
+
+import 'demoify/lib/style.css'
+import 'prismjs/themes/prism.min.css'
+
const app = createApp(App)
+app.use(DemoifyUI)
+
app.use(router)
app.mount('#app')
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 41d53e3..49121f3 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,38 +1,50 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- console.log(starscoreInstance.value)
- }
+
+
+
+ 
+
+