msc-circle-progress - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

mjs/wc-msc-circle-progress.js

@@ -15,6 +15,7 @@ import { _wcl } from './common-lib.js';
   value: 0,
-  max: 100
+  max: 100,
+  round: true
 };
 
-const booleanAttrs = [];
+const booleanAttrs = ['round'];
 const objectAttrs = [];
@@ -42,8 +43,16 @@
   --mask: path('M0 0Z');
+  --size: ${defaults.size}px;
+  --origin-y: 0px;
+  --angle: calc(((var(--value) * 360) / 100) * 1deg);
 }
 
 .main{position:relative;inline-size:100%;aspect-ratio:1/1;}
-.main__circle{position:absolute;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;display:block;background:var(--background);clip-path:var(--mask);}
+.main__circle{position:absolute;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;display:block;background:var(--background);clip-path:var(--mask);pointer-events:none;}
 .main__value{position:relative;font-size:var(--font-size);color:var(--font-color);z-index:1;}
 
+.main__circle::before,.main__circle::after{position:absolute;inset-block-start:0;inset-inline:0;margin:auto;content:'';inline-size:var(--size);block-size:var(--size);border-radius:var(--size);background-color:var(--progress-color);display:none;}
+.main__circle::before{transform-origin:50% var(--origin-y);transform:rotate(var(--angle));clip-path:polygon(50% 0,50% 100%,100% 100%,100% 0);}
+.main__circle::after{clip-path:polygon(0 0,0 100%,50% 100%,50% 0);}
+
+.main--rounded .main__circle::before,.main--rounded .main__circle::after{display:revert;}
 .main--basis{}
@@ -165,5 +174,13 @@ .main--mutation{}
     if (!hasValue) {
-      this.#config[attrName] = defaults[attrName];
+      if (booleanAttrs.includes(attrName)) {
+        this.#config[attrName] = false;
+      } else {
+        this.#config[attrName] = defaults[attrName];
+      }
     } else {
       switch (attrName) {
+        case 'round':
+          this.#config[attrName] = true;
+          break;
+
         case 'size': {
@@ -205,2 +222,6 @@ const num = +newValue;
     switch (attrName) {
+      case 'round':
+        this.#nodes.main.classList.toggle('main--rounded', this.round);
+        break;
+
       case 'size':
@@ -254,2 +275,10 @@ this._onRefresh();
 
+  set round(value) {
+    this.toggleAttribute('round', Boolean(value));
+  }
+
+  get round() {
+    return this.#config.round;
+  }
+
   set size(value) {
@@ -319,3 +348,5 @@ if (value) {
       {
-        '--mask': `path('M${pointes[0].x} ${pointes[0].y} A${r1} ${r1} 0 0 0 ${pointes[1].x} ${pointes[1].y} A${r1} ${r1} 0 0 0 ${pointes[0].x} ${pointes[0].y} L${pointes[2].x} ${pointes[2].y} A${r2} ${r2} 0 0 1 ${pointes[3].x} ${pointes[3].y} A${r2} ${r2} 0 0 1 ${pointes[2].x} ${pointes[2].y}Z')`
+        '--mask': `path('M${pointes[0].x} ${pointes[0].y} A${r1} ${r1} 0 0 0 ${pointes[1].x} ${pointes[1].y} A${r1} ${r1} 0 0 0 ${pointes[0].x} ${pointes[0].y} L${pointes[2].x} ${pointes[2].y} A${r2} ${r2} 0 0 1 ${pointes[3].x} ${pointes[3].y} A${r2} ${r2} 0 0 1 ${pointes[2].x} ${pointes[2].y}Z')`,
+        '--size': `${this.size}px`,
+        '--origin-y': `${r1}px`
       },
@@ -322,0 +353,0 @@ this.#nodes.styleSheet

package.json

 {
   "name": "msc-circle-progress",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "<msc-circle-progress /> provides progress with circle shape. Developers could use it to indicate upload、form complete status for users.",
@@ -5,0 +5,0 @@ "main": "index.html",

README.md

@@ -32,3 +32,4 @@ # msc-circle-progress
       "value": 33,
-      "max": 100
+      "max": 100,
+      "round": true
     }
@@ -146,2 +147,14 @@ </script>
 
+- **round**
+
+It will switch &lt;msc-circle-progress /> bar as round once set. Default is `true` (not set).
+
+```html
+<msc-circle-progress
+  round
+>
+  ...
+</msc-circle-progress>
+```
+
 ## Properties
@@ -154,2 +167,3 @@
 | max | Number | Getter / Setter for max. Default is `100`. |
+| round | Boolean | Getter / Setter for round. Default is `true`. |
 
@@ -156,0 +170,0 @@ ## Method

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

51087

increased by12.75%

Lines of code

1106

increased by2.41%

Number of lines in readme file

175

increased by8.7%

No dependency changes