feat: add example, update clearable default value to false

vcjs-dev · Aug 15, 2023 · f924305 · f924305
1 parent af9537b
commit f924305
Show file tree

Hide file tree

Showing 29 changed files with 597 additions and 41 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,42 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+      - release/*
+permissions:
+  contents: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Set a Node.js version
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      # pull code
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      # using pnpm to install deps
+      - run: npm i -g pnpm
+
+      # build to static
+      - name: Build Example
+        run: pnpm install && pnpm build:app
+        # working-directory: example
+
+      # deploy to `docs` branch
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4.4.1
+        with:
+          folder: dist
+          silent: true
+          clean: true
+          branch: gh-pages
+          single-commit: true
diff --git a/README.md b/README.md
@@ -1,4 +1,14 @@
-# starscore
+<p align="center">
+  <a href="https://www.npmjs.org/package/starscore">
+    <img src="https://img.shields.io/npm/v/starscore.svg">
+  </a>
+  <a href="https://npmcharts.com/compare/starscore?minimal=true">
+    <img src="https://img.shields.io/npm/dm/starscore.svg">
+  </a>
+  <br>
+</p>
+
+# Starscore
 
 A star-score library for web app.
 
@@ -58,7 +68,7 @@ const starscoreInstance = createStarscore({
 | `type` | `string` | `'star'` | Specify this to use a built-in icon. You can use `star` or `heart`. |
 | `icon` | `string` | - | Specify this to change SVG string of the selected icon. |
 | `voidIcon` | `string` | - | Specify this to change SVG string of the void icon. |
-| `clearable` | `boolean` | `true` | Whether to allow clear when click again. |
+| `clearable` | `boolean` | `false` | Whether to allow clear when click again. |
 | `readonly` | `boolean` | `false` | Whether to be readonly. |
 | `disabled` | `boolean` | `false` | Whether to disable score. |
 | `allowHalf` | `boolean` | `false` | Whether to allow half star. |

diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
+    <!-- <link rel="icon" href="/favicon.ico"> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>starscore example</title>
+    <title>Star Score Example</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/lib/starscore.cjs b/lib/starscore.cjs
@@ -1,4 +1,4 @@
-"use strict";var p=Object.defineProperty;var v=(s,t,i)=>t in s?p(s,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[t]=i;var c=(s,t,i)=>(v(s,typeof t!="symbol"?t+"":t,i),i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("fourdom");var r=(s=>(s.containerClassName="starscore-container",s.scoreWrapperClassName="starscore-radio-group",s.scoreItemClassName="starscore-radio",s.scoreIconClassName="starscore-radio__icon",s.scoreVoidIconClassName="starscore-radio__void-icon",s))(r||{});const h=s=>typeof s=="number"?`${s}px`:s,u='<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="icon" viewBox="0 0 1024 1024" fill="#FFA900" style="--svg-origin-width:200;--svg-origin-height:200;--svg-origin-width--with-unit:200px;--svg-origin-height--with-unit:200px;" data-svg-origin-width="200" data-svg-origin-height="200" font-size="200"><path d="M270.336 978.944c-57.344 29.696-95.232 3.072-83.968-61.44l46.08-268.288-194.56-190.464c-46.08-45.056-31.744-89.088 31.744-99.328l269.312-38.912L459.776 76.8c28.672-58.368 74.752-58.368 104.448 0l120.832 244.736 269.312 38.912c64.512 9.216 78.848 53.248 31.744 99.328l-194.56 189.44 46.08 268.288c11.264 63.488-26.624 91.136-83.968 61.44L512 851.968 270.336 978.944z"/></svg>',m='<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="icon" viewBox="0 0 1024 1024" style="--svg-origin-width:200;--svg-origin-height:200;--svg-origin-width--with-unit:200px;--svg-origin-height--with-unit:200px;" data-svg-origin-width="200" data-svg-origin-height="200" font-size="200"><path d="m512 111.616 130.048 263.623 290.93 42.211-210.489 205.255 49.721 289.678L512 775.622 251.79 912.383l49.721-289.678L91.022 417.45l290.93-42.211L512 111.616m0-72.818a72.721 72.721 0 0 0-65.309 40.619L333.596 308.679l-253.042 36.75c-27.421 3.982-50.176 23.211-58.823 49.607a72.957 72.957 0 0 0 18.432 74.638l183.069 178.403-43.235 252.018c-4.665 27.307 6.599 54.955 29.013 71.225 12.629 9.216 27.762 13.881 42.781 13.881 11.605 0 23.211-2.731 33.906-8.419l226.304-118.898 226.304 119.011c10.695 5.575 22.301 8.419 33.906 8.419 15.133 0 30.151-4.665 42.781-13.881 22.414-16.27 33.678-43.918 29.013-71.225L800.77 648.19l183.069-178.403c19.797-19.342 26.965-48.242 18.432-74.638s-31.403-45.625-58.823-49.607l-253.042-36.75L577.311 79.53c-12.288-25.031-37.547-40.733-65.309-40.733z"/></svg>',w='<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="icon" viewBox="0 0 1024 1024" style="--svg-origin-width:200;--svg-origin-height:200;--svg-origin-width--with-unit:200px;--svg-origin-height--with-unit:200px;" data-svg-origin-width="200" data-svg-origin-height="200" font-size="200"><path d="M1024 352c0 337-512 592-512 592S0 690 0 352C0 201.8 121.8 80 272 80c101.3 0 189.7 55.4 236.5 137.6 1.5 2.7 5.4 2.7 6.9 0C562.3 135.4 650.7 80 752 80c150.2 0 272 121.8 272 272z"/></svg>',f='<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="icon" viewBox="0 0 1024 1024" style="--svg-origin-width:200;--svg-origin-height:200;--svg-origin-width--with-unit:200px;--svg-origin-height--with-unit:200px;" data-svg-origin-width="200" data-svg-origin-height="200" font-size="200"><path d="M752 144c55.6 0 107.8 21.6 147.1 60.9S960 296.4 960 352c0 32.7-6.1 66.4-18.1 100.2-11.4 32-28.3 64.9-50.3 97.8-38.7 57.8-93.4 116.2-162.5 173.6C643 795.1 555.6 847.2 512 871.5c-43.2-24-129.4-75.1-215.2-146-69.6-57.5-124.6-116-163.7-174-22.2-33.1-39.3-66.1-50.8-98.4C70.2 418.9 64 385 64 352c0-55.6 21.6-107.8 60.9-147.1S216.4 144 272 144c76.9 0 147.2 42.2 183.6 110.1l28.2 52.7c12.1 22.5 44.4 22.5 56.4 0l28.2-52.7C604.8 186.2 675.1 144 752 144zm0-64c-101.3 0-189.7 55.4-236.5 137.6-1.5 2.7-5.4 2.7-6.9 0C461.7 135.4 373.3 80 272 80 121.8 80 0 201.8 0 352c0 338 512 592 512 592s512-255 512-592c0-150.2-121.8-272-272-272z"/></svg>',l={star:{icon:u,voidIcon:m},heart:{icon:w,voidIcon:f}};class g{constructor(t){c(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:()=>{}});c(this,"container",null);c(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,i){return this.options=Object.assign(this.options,t),i&&this.render(),this}getIcon(){return this.options.icon?this.options.icon:l[this.options.type].icon}getVoidIcon(){return this.options.voidIcon?this.options.voidIcon:l[this.options.type].voidIcon}get scoreItems(){const t=[];for(let i=1;i<=this.options.count;i++){const n=i-this.value,e=this.value>=i?1:n>=1?0:Number.parseFloat((1-n).toFixed(1));t.push({score:i,active:this.value>=i,proportion:e,width:`${e*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 i=t.target,n=t.offsetX,e=this.getScoreItemFromChild(i);if(e){let o=Number(e.dataset.score);this.options.allowHalf&&n<=o/2&&(o=o-.5);const d=this.options.clearable&&this.value===o?0:o;this.emitChange(d)}}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(`.${r.scoreItemClassName}`)}initCSSVars(){a.css(this.getContainer(),{"--starscore-size":h(this.options.size),"--starscore-color":this.options.color,"--starscore-void-color":this.options.voidColor,"--starscore-disabled-color":this.options.disabledColor,"--starscore-gutter":h(this.options.gutter)})}generateRadioHTML(t){return`
+"use strict";var p=Object.defineProperty;var v=(s,t,i)=>t in s?p(s,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[t]=i;var c=(s,t,i)=>(v(s,typeof t!="symbol"?t+"":t,i),i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("fourdom");var r=(s=>(s.containerClassName="starscore-container",s.scoreWrapperClassName="starscore-radio-group",s.scoreItemClassName="starscore-radio",s.scoreIconClassName="starscore-radio__icon",s.scoreVoidIconClassName="starscore-radio__void-icon",s))(r||{});const h=s=>typeof s=="number"?`${s}px`:s,u='<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="icon" viewBox="0 0 1024 1024" fill="#FFA900" style="--svg-origin-width:200;--svg-origin-height:200;--svg-origin-width--with-unit:200px;--svg-origin-height--with-unit:200px;" data-svg-origin-width="200" data-svg-origin-height="200" font-size="200"><path d="M270.336 978.944c-57.344 29.696-95.232 3.072-83.968-61.44l46.08-268.288-194.56-190.464c-46.08-45.056-31.744-89.088 31.744-99.328l269.312-38.912L459.776 76.8c28.672-58.368 74.752-58.368 104.448 0l120.832 244.736 269.312 38.912c64.512 9.216 78.848 53.248 31.744 99.328l-194.56 189.44 46.08 268.288c11.264 63.488-26.624 91.136-83.968 61.44L512 851.968 270.336 978.944z"/></svg>',m='<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="icon" viewBox="0 0 1024 1024" style="--svg-origin-width:200;--svg-origin-height:200;--svg-origin-width--with-unit:200px;--svg-origin-height--with-unit:200px;" data-svg-origin-width="200" data-svg-origin-height="200" font-size="200"><path d="m512 111.616 130.048 263.623 290.93 42.211-210.489 205.255 49.721 289.678L512 775.622 251.79 912.383l49.721-289.678L91.022 417.45l290.93-42.211L512 111.616m0-72.818a72.721 72.721 0 0 0-65.309 40.619L333.596 308.679l-253.042 36.75c-27.421 3.982-50.176 23.211-58.823 49.607a72.957 72.957 0 0 0 18.432 74.638l183.069 178.403-43.235 252.018c-4.665 27.307 6.599 54.955 29.013 71.225 12.629 9.216 27.762 13.881 42.781 13.881 11.605 0 23.211-2.731 33.906-8.419l226.304-118.898 226.304 119.011c10.695 5.575 22.301 8.419 33.906 8.419 15.133 0 30.151-4.665 42.781-13.881 22.414-16.27 33.678-43.918 29.013-71.225L800.77 648.19l183.069-178.403c19.797-19.342 26.965-48.242 18.432-74.638s-31.403-45.625-58.823-49.607l-253.042-36.75L577.311 79.53c-12.288-25.031-37.547-40.733-65.309-40.733z"/></svg>',w='<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="icon" viewBox="0 0 1024 1024" style="--svg-origin-width:200;--svg-origin-height:200;--svg-origin-width--with-unit:200px;--svg-origin-height--with-unit:200px;" data-svg-origin-width="200" data-svg-origin-height="200" font-size="200"><path d="M1024 352c0 337-512 592-512 592S0 690 0 352C0 201.8 121.8 80 272 80c101.3 0 189.7 55.4 236.5 137.6 1.5 2.7 5.4 2.7 6.9 0C562.3 135.4 650.7 80 752 80c150.2 0 272 121.8 272 272z"/></svg>',f='<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="icon" viewBox="0 0 1024 1024" style="--svg-origin-width:200;--svg-origin-height:200;--svg-origin-width--with-unit:200px;--svg-origin-height--with-unit:200px;" data-svg-origin-width="200" data-svg-origin-height="200" font-size="200"><path d="M752 144c55.6 0 107.8 21.6 147.1 60.9S960 296.4 960 352c0 32.7-6.1 66.4-18.1 100.2-11.4 32-28.3 64.9-50.3 97.8-38.7 57.8-93.4 116.2-162.5 173.6C643 795.1 555.6 847.2 512 871.5c-43.2-24-129.4-75.1-215.2-146-69.6-57.5-124.6-116-163.7-174-22.2-33.1-39.3-66.1-50.8-98.4C70.2 418.9 64 385 64 352c0-55.6 21.6-107.8 60.9-147.1S216.4 144 272 144c76.9 0 147.2 42.2 183.6 110.1l28.2 52.7c12.1 22.5 44.4 22.5 56.4 0l28.2-52.7C604.8 186.2 675.1 144 752 144zm0-64c-101.3 0-189.7 55.4-236.5 137.6-1.5 2.7-5.4 2.7-6.9 0C461.7 135.4 373.3 80 272 80 121.8 80 0 201.8 0 352c0 338 512 592 512 592s512-255 512-592c0-150.2-121.8-272-272-272z"/></svg>',l={star:{icon:u,voidIcon:m},heart:{icon:w,voidIcon:f}};class g{constructor(t){c(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:()=>{}});c(this,"container",null);c(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,i){return this.options=Object.assign(this.options,t),i&&(this.initCSSVars(),this.render()),this}getIcon(){return this.options.icon?this.options.icon:l[this.options.type].icon}getVoidIcon(){return this.options.voidIcon?this.options.voidIcon:l[this.options.type].voidIcon}get scoreItems(){const t=[];for(let i=1;i<=this.options.count;i++){const n=i-this.value,e=this.value>=i?1:n>=1?0:Number.parseFloat((1-n).toFixed(1));t.push({score:i,active:this.value>=i,proportion:e,width:`${e*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 i=t.target,n=t.offsetX,e=this.getScoreItemFromChild(i);if(e){let o=Number(e.dataset.score);this.options.allowHalf&&n<=o/2&&(o=o-.5);const d=this.options.clearable&&this.value===o?0:o;this.emitChange(d)}}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(`.${r.scoreItemClassName}`)}initCSSVars(){a.css(this.getContainer(),{"--starscore-size":h(this.options.size),"--starscore-color":this.options.color,"--starscore-void-color":this.options.voidColor,"--starscore-disabled-color":this.options.disabledColor,"--starscore-gutter":h(this.options.gutter)})}generateRadioHTML(t){return`
       <div class="${r.scoreItemClassName}" data-score="${t.score}">
         <span class="${r.scoreVoidIconClassName}">${this.getVoidIcon()}</span>
         <span class="${r.scoreIconClassName}" style="width:${t.width}">${this.getIcon()}</span>

diff --git 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;