nv-refresh-btn-bw 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/DIST/nv-refresh-btn-bw.js +23 -53
  2. package/index.js +53 -89
  3. package/package.json +1 -1
package/DIST/nv-refresh-btn-bw.js CHANGED
@@ -1,7 +1,18 @@
1
- var nvrefreshbtnbw=(()=>{var b=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports);var f=b((v,d)=>{var a=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this._width="40px",this._height="40px",this._color="#3498db",this._errorColor="#e74c3c",this._isRefreshing=!1,this._render()}static get observedAttributes(){return["width","height","color","error-color","disabled"]}attributeChangedCallback(e,t,r){if(t!==r)switch(e){case"width":this._width=r,this._updateStyles();break;case"height":this._height=r,this._updateStyles();break;case"color":this._color=r,this._updateStyles();break;case"error-color":this._errorColor=r,this._updateStyles();break;case"disabled":this._updateDisabledState();break}}connectedCallback(){this.shadowRoot.querySelector(".nv-refresh-btn").addEventListener("click",this._handleClick.bind(this))}disconnectedCallback(){this.shadowRoot.querySelector(".nv-refresh-btn").removeEventListener("click",this._handleClick)}_render(){let e=document.createElement("template");e.innerHTML=`
1
+ var nvrefreshbtnbw=(()=>{var b=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports);var u=b((v,h)=>{var n=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this._width="40px",this._height="40px",this._color="#3498db",this._errorColor="#e74c3c",this._isRefreshing=!1,this._render()}static get observedAttributes(){return["width","height","color","error-color","disabled"]}attributeChangedCallback(e,t,r){if(t!==r)switch(e){case"width":this._width=r,this._updateStyles();break;case"height":this._height=r,this._updateStyles();break;case"color":this._color=r,this._updateStyles();break;case"error-color":this._errorColor=r,this._updateStyles();break;case"disabled":this._updateDisabledState();break}}connectedCallback(){this.shadowRoot.querySelector(".nv-refresh-btn").addEventListener("click",this._handleClick.bind(this))}disconnectedCallback(){this.shadowRoot.querySelector(".nv-refresh-btn").removeEventListener("click",this._handleClick)}_render(){let e=document.createElement("template");e.innerHTML=`
2
2
  <style>
3
3
  .nv-refresh-btn {
4
- background: ${this._color};
4
+ --nv-refresh-btn-width: ${this._width};
5
+ --nv-refresh-btn-height: ${this._height};
6
+ --nv-refresh-btn-color: ${this._color};
7
+ --nv-refresh-btn-icon-size: ${this._calculateIconSize()};
8
+ --nv-refresh-btn-border-radius: ${this._calculateRelativeSize("border-radius")};
9
+ --nv-refresh-btn-hover-color: ${this._getDarkerColor(this._color)};
10
+ --nv-refresh-btn-hover-translateY: ${this._calculateRelativeSize("translateY")};
11
+ --nv-refresh-btn-shadow-offset: ${this._calculateRelativeSize("shadow-offset")};
12
+ --nv-refresh-btn-shadow-blur: ${this._calculateRelativeSize("shadow-blur")};
13
+ --nv-refresh-btn-animation-duration: ${this._calculateAnimationDuration()};
14
+
15
+ background: var(--nv-refresh-btn-color);
5
16
  border: none;
6
17
  color: white;
7
18
  cursor: pointer;
@@ -12,20 +23,16 @@ var nvrefreshbtnbw=(()=>{var b=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.ex
12
23
  justify-content: center;
13
24
  transition: all 0.3s ease;
14
25
  box-sizing: border-box;
15
- width: ${this._width};
16
- height: ${this._height};
17
- }
18
-
19
- /* \u52A8\u6001\u8BA1\u7B97\u8FB9\u6846\u534A\u5F84 - \u76F8\u5BF9\u5C3A\u5BF8\u768410% */
20
- .nv-refresh-btn {
21
- border-radius: ${this._calculateRelativeSize("border-radius")};
26
+ width: var(--nv-refresh-btn-width);
27
+ height: var(--nv-refresh-btn-height);
28
+ border-radius: var(--nv-refresh-btn-border-radius);
22
29
  }
23
30
 
24
31
  .nv-refresh-btn::before {
25
32
  content: "";
26
33
  display: inline-block;
27
- width: ${this._calculateIconSize()};
28
- height: ${this._calculateIconSize()};
34
+ width: var(--nv-refresh-btn-icon-size);
35
+ height: var(--nv-refresh-btn-icon-size);
29
36
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>');
30
37
  background-repeat: no-repeat;
31
38
  background-position: center;
@@ -34,9 +41,9 @@ var nvrefreshbtnbw=(()=>{var b=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.ex
34
41
 
35
42
  /* \u60AC\u505C\u6548\u679C - \u76F8\u5BF9\u5C3A\u5BF8 */
36
43
  .nv-refresh-btn:hover:not(.nv-refresh-btn-disabled):not(.nv-refresh-btn-refreshing) {
37
- background: ${this._getDarkerColor(this._color)};
38
- transform: translateY(${this._calculateRelativeSize("translateY")});
39
- box-shadow: 0 ${this._calculateRelativeSize("shadow-offset")} ${this._calculateRelativeSize("shadow-blur")} rgba(0, 0, 0, 0.2);
44
+ background: var(--nv-refresh-btn-hover-color);
45
+ transform: translateY(var(--nv-refresh-btn-hover-translateY));
46
+ box-shadow: 0 var(--nv-refresh-btn-shadow-offset) var(--nv-refresh-btn-shadow-blur) rgba(0, 0, 0, 0.2);
40
47
  }
41
48
 
42
49
  .nv-refresh-btn:active:not(.nv-refresh-btn-disabled):not(.nv-refresh-btn-refreshing) {
@@ -44,7 +51,7 @@ var nvrefreshbtnbw=(()=>{var b=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.ex
44
51
  }
45
52
 
46
53
  .nv-refresh-btn.nv-refresh-btn-refreshing::before {
47
- animation: nv-refresh-btn-spin ${this._calculateAnimationDuration()} linear infinite;
54
+ animation: nv-refresh-btn-spin var(--nv-refresh-btn-animation-duration) linear infinite;
48
55
  }
49
56
 
50
57
  .nv-refresh-btn.nv-refresh-btn-disabled {
@@ -65,41 +72,4 @@ var nvrefreshbtnbw=(()=>{var b=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.ex
65
72
 
66
73
  <button class="nv-refresh-btn" aria-label="\u5237\u65B0">
67
74
  </button>
68
- `,this.shadowRoot.appendChild(e.content.cloneNode(!0))}_calculateIconSize(){let e=this._parseSizeValue(this._width),t=this._parseSizeValue(this._height),r=Math.min(e,t);return`${Math.max(16,r*.6)}px`}_calculateRelativeSize(e){let t=this._parseSizeValue(this._width),r=this._parseSizeValue(this._height),s=Math.min(t,r);switch(e){case"border-radius":return`${Math.max(2,s*.1)}px`;case"translateY":return`-${Math.min(4,s*.05)}px`;case"shadow-offset":return`${Math.min(4,s*.05)}px`;case"shadow-blur":return`${Math.min(8,s*.1)}px`;default:return"4px"}}_calculateAnimationDuration(){let t=1+(Math.min(this._parseSizeValue(this._width),this._parseSizeValue(this._height))-40)*.01;return`${Math.max(.8,Math.min(1.2,t))}s`}_parseSizeValue(e){return e.endsWith("px")?parseInt(e,10):e.endsWith("rem")||e.endsWith("em")?parseFloat(e)*16:e.endsWith("%")?40:parseInt(e,10)||40}_updateStyles(){let e=this.shadowRoot.querySelector(".nv-refresh-btn");if(!e)return;e.style.width=this._width,e.style.height=this._height,e.style.borderRadius=this._calculateRelativeSize("border-radius");let t=this._calculateIconSize();e.style.setProperty("--nv-refresh-btn-icon-size",t),e.classList.contains("error")||(e.style.background=this._color);let r=this._calculateRelativeSize("translateY"),s=this._calculateRelativeSize("shadow-offset"),o=this._calculateRelativeSize("shadow-blur"),i=this._calculateAnimationDuration(),n=this.shadowRoot.querySelector("style");if(n){let h=this._getDarkerColor(this._color),l=this._errorColor,u=`
69
- .nv-refresh-btn {
70
- background: ${this._color};
71
- width: ${this._width};
72
- height: ${this._height};
73
- border-radius: ${this._calculateRelativeSize("border-radius")};
74
- }
75
-
76
- .nv-refresh-btn::before {
77
- width: ${this._calculateIconSize()};
78
- height: ${this._calculateIconSize()};
79
- }
80
-
81
- .nv-refresh-btn:hover:not(.nv-refresh-btn-disabled):not(.nv-refresh-btn-refreshing) {
82
- background: ${h};
83
- transform: translateY(${r});
84
- box-shadow: 0 ${s} ${o} rgba(0, 0, 0, 0.2);
85
- }
86
-
87
- .nv-refresh-btn.nv-refresh-btn-refreshing::before {
88
- animation: nv-refresh-btn-spin ${i} linear infinite;
89
- }
90
-
91
- .nv-refresh-btn.nv-refresh-btn-disabled {
92
- background: #bdc3c7;
93
- cursor: not-allowed;
94
- opacity: 0.6;
95
- }
96
-
97
- .nv-refresh-btn.error {
98
- background: ${l} !important;
99
- }
100
-
101
- @keyframes nv-refresh-btn-spin {
102
- 0% { transform: rotate(0deg); }
103
- 100% { transform: rotate(360deg); }
104
- }
105
- `;n.textContent=u}}_getDarkerColor(e){let t=e.replace("#","");if(t.length!==6)return e;let r=parseInt(t.substr(0,2),16),s=parseInt(t.substr(2,2),16),o=parseInt(t.substr(4,2),16),i=.8,n=Math.floor(r*i),h=Math.floor(s*i),l=Math.floor(o*i);return`rgb(${n}, ${h}, ${l})`}_updateDisabledState(){let e=this.shadowRoot.querySelector(".nv-refresh-btn");e&&(this.hasAttribute("disabled")?(e.classList.add("nv-refresh-btn-disabled"),e.setAttribute("disabled","")):(e.classList.remove("nv-refresh-btn-disabled"),e.removeAttribute("disabled")))}_handleClick(){if(this.hasAttribute("disabled")||this._isRefreshing)return;let e=this.shadowRoot.querySelector(".nv-refresh-btn");if(!e)return;e.classList.remove("error"),e.style.background=this._color,this._isRefreshing=!0;let t=new CustomEvent("nv-refresh-btn-start",{bubbles:!0,composed:!0,detail:{timestamp:Date.now()}});this.dispatchEvent(t),e.classList.add("nv-refresh-btn-refreshing")}finish(e=!0){let t=this.shadowRoot.querySelector(".nv-refresh-btn");if(t)if(t.classList.remove("nv-refresh-btn-refreshing"),this._isRefreshing=!1,e){t.classList.remove("error"),t.style.background=this._color;let r=new CustomEvent("nv-refresh-btn-complete",{bubbles:!0,composed:!0,detail:{timestamp:Date.now(),success:!0}});this.dispatchEvent(r)}else{t.classList.add("error"),t.style.background=this._errorColor;let r=new CustomEvent("nv-refresh-btn-error",{bubbles:!0,composed:!0,detail:{timestamp:Date.now(),success:!1}});this.dispatchEvent(r)}}refresh(){this._handleClick()}setColor(e){this._color=e,this._updateStyles()}setErrorColor(e){this._errorColor=e,this._updateStyles()}setSize(e,t){this._width=e,this._height=t,this._updateStyles()}getState(){return{isRefreshing:this._isRefreshing,width:this._width,height:this._height,color:this._color,errorColor:this._errorColor,disabled:this.hasAttribute("disabled")}}getComputedStyles(){return{iconSize:this._calculateIconSize(),borderRadius:this._calculateRelativeSize("border-radius"),hoverTranslateY:this._calculateRelativeSize("translateY"),shadowOffset:this._calculateRelativeSize("shadow-offset"),shadowBlur:this._calculateRelativeSize("shadow-blur"),animationDuration:this._calculateAnimationDuration()}}};customElements.get("nv-refresh-btn")||customElements.define("nv-refresh-btn",a);d.exports={NvRefreshBtn:a}});return f();})();
75
+ `,this.shadowRoot.appendChild(e.content.cloneNode(!0))}_calculateIconSize(){let e=this._parseSizeValue(this._width,"width"),t=this._parseSizeValue(this._height,"height"),r=Math.min(e,t);return`${Math.max(16,r*.6)}px`}_calculateRelativeSize(e){let t=this._parseSizeValue(this._width,"width"),r=this._parseSizeValue(this._height,"height"),s=Math.min(t,r);switch(e){case"border-radius":return`${Math.max(2,s*.1)}px`;case"translateY":return`-${Math.min(4,s*.05)}px`;case"shadow-offset":return`${Math.min(4,s*.05)}px`;case"shadow-blur":return`${Math.min(8,s*.1)}px`;default:return"4px"}}_calculateAnimationDuration(){let t=1+(Math.min(this._parseSizeValue(this._width,"width"),this._parseSizeValue(this._height,"height"))-40)*.01;return`${Math.max(.8,Math.min(1.2,t))}s`}_parseSizeValue(e,t){var r;if(e.endsWith("px"))return parseInt(e,10);if(e.endsWith("rem"))return parseFloat(e)*16;if(e.endsWith("em"))return parseFloat(e)*16;if(e.endsWith("%")){let s=(r=this.shadowRoot)==null?void 0:r.querySelector(".nv-refresh-btn");if(s){let i=s.getBoundingClientRect();return t==="width"?i.width>0?i.width:40:i.height>0?i.height:40}return 40}else return parseInt(e,10)||40}_updateStyles(){let e=this.shadowRoot.querySelector(".nv-refresh-btn");e&&(e.style.setProperty("--nv-refresh-btn-width",this._width),e.style.setProperty("--nv-refresh-btn-height",this._height),e.style.setProperty("--nv-refresh-btn-color",this._color),e.style.setProperty("--nv-refresh-btn-icon-size",this._calculateIconSize()),e.style.setProperty("--nv-refresh-btn-border-radius",this._calculateRelativeSize("border-radius")),e.style.setProperty("--nv-refresh-btn-hover-color",this._getDarkerColor(this._color)),e.style.setProperty("--nv-refresh-btn-hover-translateY",this._calculateRelativeSize("translateY")),e.style.setProperty("--nv-refresh-btn-shadow-offset",this._calculateRelativeSize("shadow-offset")),e.style.setProperty("--nv-refresh-btn-shadow-blur",this._calculateRelativeSize("shadow-blur")),e.style.setProperty("--nv-refresh-btn-animation-duration",this._calculateAnimationDuration()),e.classList.contains("error")||(e.style.background=this._color))}_getDarkerColor(e){let t=e.replace("#","");if(t.length!==6)return e;let r=parseInt(t.substr(0,2),16),s=parseInt(t.substr(2,2),16),i=parseInt(t.substr(4,2),16),o=.8,l=Math.floor(r*o),c=Math.floor(s*o),d=Math.floor(i*o);return`rgb(${l}, ${c}, ${d})`}_updateDisabledState(){let e=this.shadowRoot.querySelector(".nv-refresh-btn");e&&(this.hasAttribute("disabled")?(e.classList.add("nv-refresh-btn-disabled"),e.setAttribute("disabled","")):(e.classList.remove("nv-refresh-btn-disabled"),e.removeAttribute("disabled")))}_handleClick(){if(this.hasAttribute("disabled")||this._isRefreshing)return;let e=this.shadowRoot.querySelector(".nv-refresh-btn");if(!e)return;e.classList.remove("error"),e.style.background=this._color,this._isRefreshing=!0;let t=new CustomEvent("nv-refresh-btn-start",{bubbles:!0,composed:!0,detail:{timestamp:Date.now()}});this.dispatchEvent(t),e.classList.add("nv-refresh-btn-refreshing")}finish(e=!0){let t=this.shadowRoot.querySelector(".nv-refresh-btn");if(t)if(t.classList.remove("nv-refresh-btn-refreshing"),this._isRefreshing=!1,e){t.classList.remove("error"),t.style.background=this._color;let r=new CustomEvent("nv-refresh-btn-complete",{bubbles:!0,composed:!0,detail:{timestamp:Date.now(),success:!0}});this.dispatchEvent(r)}else{t.classList.add("error"),t.style.background=this._errorColor;let r=new CustomEvent("nv-refresh-btn-error",{bubbles:!0,composed:!0,detail:{timestamp:Date.now(),success:!1}});this.dispatchEvent(r)}}refresh(){this._handleClick()}setColor(e){this._color=e,this._updateStyles()}setErrorColor(e){this._errorColor=e,this._updateStyles()}setSize(e,t){this._width=e,this._height=t,this._updateStyles()}getState(){return{isRefreshing:this._isRefreshing,width:this._width,height:this._height,color:this._color,errorColor:this._errorColor,disabled:this.hasAttribute("disabled")}}getComputedStyles(){return{iconSize:this._calculateIconSize(),borderRadius:this._calculateRelativeSize("border-radius"),hoverTranslateY:this._calculateRelativeSize("translateY"),shadowOffset:this._calculateRelativeSize("shadow-offset"),shadowBlur:this._calculateRelativeSize("shadow-blur"),animationDuration:this._calculateAnimationDuration()}}};customElements.get("nv-refresh-btn")||customElements.define("nv-refresh-btn",n);h.exports={NvRefreshBtn:n}});return u();})();
package/index.js CHANGED
@@ -66,7 +66,18 @@ class NvRefreshBtn extends HTMLElement {
66
66
  template.innerHTML = `
67
67
  <style>
68
68
  .nv-refresh-btn {
69
- background: ${this._color};
69
+ --nv-refresh-btn-width: ${this._width};
70
+ --nv-refresh-btn-height: ${this._height};
71
+ --nv-refresh-btn-color: ${this._color};
72
+ --nv-refresh-btn-icon-size: ${this._calculateIconSize()};
73
+ --nv-refresh-btn-border-radius: ${this._calculateRelativeSize('border-radius')};
74
+ --nv-refresh-btn-hover-color: ${this._getDarkerColor(this._color)};
75
+ --nv-refresh-btn-hover-translateY: ${this._calculateRelativeSize('translateY')};
76
+ --nv-refresh-btn-shadow-offset: ${this._calculateRelativeSize('shadow-offset')};
77
+ --nv-refresh-btn-shadow-blur: ${this._calculateRelativeSize('shadow-blur')};
78
+ --nv-refresh-btn-animation-duration: ${this._calculateAnimationDuration()};
79
+
80
+ background: var(--nv-refresh-btn-color);
70
81
  border: none;
71
82
  color: white;
72
83
  cursor: pointer;
@@ -77,20 +88,16 @@ class NvRefreshBtn extends HTMLElement {
77
88
  justify-content: center;
78
89
  transition: all 0.3s ease;
79
90
  box-sizing: border-box;
80
- width: ${this._width};
81
- height: ${this._height};
82
- }
83
-
84
- /* 动态计算边框半径 - 相对尺寸的10% */
85
- .nv-refresh-btn {
86
- border-radius: ${this._calculateRelativeSize('border-radius')};
91
+ width: var(--nv-refresh-btn-width);
92
+ height: var(--nv-refresh-btn-height);
93
+ border-radius: var(--nv-refresh-btn-border-radius);
87
94
  }
88
95
 
89
96
  .nv-refresh-btn::before {
90
97
  content: "";
91
98
  display: inline-block;
92
- width: ${this._calculateIconSize()};
93
- height: ${this._calculateIconSize()};
99
+ width: var(--nv-refresh-btn-icon-size);
100
+ height: var(--nv-refresh-btn-icon-size);
94
101
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>');
95
102
  background-repeat: no-repeat;
96
103
  background-position: center;
@@ -99,9 +106,9 @@ class NvRefreshBtn extends HTMLElement {
99
106
 
100
107
  /* 悬停效果 - 相对尺寸 */
101
108
  .nv-refresh-btn:hover:not(.nv-refresh-btn-disabled):not(.nv-refresh-btn-refreshing) {
102
- background: ${this._getDarkerColor(this._color)};
103
- transform: translateY(${this._calculateRelativeSize('translateY')});
104
- box-shadow: 0 ${this._calculateRelativeSize('shadow-offset')} ${this._calculateRelativeSize('shadow-blur')} rgba(0, 0, 0, 0.2);
109
+ background: var(--nv-refresh-btn-hover-color);
110
+ transform: translateY(var(--nv-refresh-btn-hover-translateY));
111
+ box-shadow: 0 var(--nv-refresh-btn-shadow-offset) var(--nv-refresh-btn-shadow-blur) rgba(0, 0, 0, 0.2);
105
112
  }
106
113
 
107
114
  .nv-refresh-btn:active:not(.nv-refresh-btn-disabled):not(.nv-refresh-btn-refreshing) {
@@ -109,7 +116,7 @@ class NvRefreshBtn extends HTMLElement {
109
116
  }
110
117
 
111
118
  .nv-refresh-btn.nv-refresh-btn-refreshing::before {
112
- animation: nv-refresh-btn-spin ${this._calculateAnimationDuration()} linear infinite;
119
+ animation: nv-refresh-btn-spin var(--nv-refresh-btn-animation-duration) linear infinite;
113
120
  }
114
121
 
115
122
  .nv-refresh-btn.nv-refresh-btn-disabled {
@@ -137,17 +144,18 @@ class NvRefreshBtn extends HTMLElement {
137
144
 
138
145
  // 计算图标尺寸 - 相对最小尺寸的60%
139
146
  _calculateIconSize() {
140
- const widthValue = this._parseSizeValue(this._width);
141
- const heightValue = this._parseSizeValue(this._height);
147
+ const widthValue = this._parseSizeValue(this._width, 'width');
148
+ const heightValue = this._parseSizeValue(this._height, 'height');
142
149
  const minSize = Math.min(widthValue, heightValue);
143
150
  const iconSize = Math.max(16, minSize * 0.6); // 最小16px
151
+ //console.log('🔍 _calculateIconSize:', { width: this._width, height: this._height, widthValue, heightValue, minSize, iconSize });
144
152
  return `${iconSize}px`;
145
153
  }
146
154
 
147
155
  // 计算相对尺寸
148
156
  _calculateRelativeSize(type) {
149
- const widthValue = this._parseSizeValue(this._width);
150
- const heightValue = this._parseSizeValue(this._height);
157
+ const widthValue = this._parseSizeValue(this._width, 'width');
158
+ const heightValue = this._parseSizeValue(this._height, 'height');
151
159
  const minSize = Math.min(widthValue, heightValue);
152
160
 
153
161
  switch(type) {
@@ -171,8 +179,8 @@ class NvRefreshBtn extends HTMLElement {
171
179
  // 计算动画持续时间 - 相对尺寸
172
180
  _calculateAnimationDuration() {
173
181
  const minSize = Math.min(
174
- this._parseSizeValue(this._width),
175
- this._parseSizeValue(this._height)
182
+ this._parseSizeValue(this._width, 'width'),
183
+ this._parseSizeValue(this._height, 'height')
176
184
  );
177
185
  // 基础1秒，小尺寸按钮动画稍快，大尺寸按钮动画稍慢
178
186
  const duration = 1 + (minSize - 40) * 0.01; // 40px基准1秒
@@ -180,7 +188,7 @@ class NvRefreshBtn extends HTMLElement {
180
188
  }
181
189
 
182
190
  // 解析尺寸值
183
- _parseSizeValue(value) {
191
+ _parseSizeValue(value,type) {
184
192
  if (value.endsWith('px')) {
185
193
  return parseInt(value, 10);
186
194
  } else if (value.endsWith('rem')) {
@@ -188,7 +196,18 @@ class NvRefreshBtn extends HTMLElement {
188
196
  } else if (value.endsWith('em')) {
189
197
  return parseFloat(value) * 16; // 假设1em = 16px
190
198
  } else if (value.endsWith('%')) {
191
- return 40; // 对于百分比，返回一个基准值
199
+ // 尝试获取父元素或自身的实际尺寸
200
+ const button = this.shadowRoot?.querySelector('.nv-refresh-btn');
201
+ if (button) {
202
+ const rect = button.getBoundingClientRect();
203
+ //console.log("如果已经渲染，使用实际尺寸；否则返回基准值", rect);
204
+ if(type === 'width') {
205
+ return rect.width > 0 ? rect.width : 40;
206
+ } else {
207
+ return rect.height > 0 ? rect.height : 40;
208
+ }
209
+ }
210
+ return 40; // 如果无法获取，返回基准值
192
211
  } else {
193
212
  return parseInt(value, 10) || 40; // 默认40px
194
213
  }
@@ -199,78 +218,22 @@ class NvRefreshBtn extends HTMLElement {
199
218
  const button = this.shadowRoot.querySelector('.nv-refresh-btn');
200
219
  if (!button) return;
201
220
 
202
- // 更新尺寸
203
- button.style.width = this._width;
204
- button.style.height = this._height;
205
-
206
- // 更新边框半径
207
- button.style.borderRadius = this._calculateRelativeSize('border-radius');
208
-
209
- // 更新图标尺寸
210
- const iconSize = this._calculateIconSize();
211
- button.style.setProperty('--nv-refresh-btn-icon-size', iconSize);
221
+ // 更新所有 CSS 变量
222
+ button.style.setProperty('--nv-refresh-btn-width', this._width);
223
+ button.style.setProperty('--nv-refresh-btn-height', this._height);
224
+ button.style.setProperty('--nv-refresh-btn-color', this._color);
225
+ button.style.setProperty('--nv-refresh-btn-icon-size', this._calculateIconSize());
226
+ button.style.setProperty('--nv-refresh-btn-border-radius', this._calculateRelativeSize('border-radius'));
227
+ button.style.setProperty('--nv-refresh-btn-hover-color', this._getDarkerColor(this._color));
228
+ button.style.setProperty('--nv-refresh-btn-hover-translateY', this._calculateRelativeSize('translateY'));
229
+ button.style.setProperty('--nv-refresh-btn-shadow-offset', this._calculateRelativeSize('shadow-offset'));
230
+ button.style.setProperty('--nv-refresh-btn-shadow-blur', this._calculateRelativeSize('shadow-blur'));
231
+ button.style.setProperty('--nv-refresh-btn-animation-duration', this._calculateAnimationDuration());
212
232
 
213
233
  // 如果不是错误状态，更新背景颜色
214
234
  if (!button.classList.contains('error')) {
215
235
  button.style.background = this._color;
216
236
  }
217
-
218
- // 更新悬停效果
219
- const hoverTranslateY = this._calculateRelativeSize('translateY');
220
- const shadowOffset = this._calculateRelativeSize('shadow-offset');
221
- const shadowBlur = this._calculateRelativeSize('shadow-blur');
222
-
223
- // 更新动画持续时间
224
- const animationDuration = this._calculateAnimationDuration();
225
-
226
- // 更新样式元素
227
- const styleElement = this.shadowRoot.querySelector('style');
228
- if (styleElement) {
229
- const hoverColor = this._getDarkerColor(this._color);
230
- const errorColor = this._errorColor;
231
-
232
- // 构建新的样式
233
- const newStyle = `
234
- .nv-refresh-btn {
235
- background: ${this._color};
236
- width: ${this._width};
237
- height: ${this._height};
238
- border-radius: ${this._calculateRelativeSize('border-radius')};
239
- }
240
-
241
- .nv-refresh-btn::before {
242
- width: ${this._calculateIconSize()};
243
- height: ${this._calculateIconSize()};
244
- }
245
-
246
- .nv-refresh-btn:hover:not(.nv-refresh-btn-disabled):not(.nv-refresh-btn-refreshing) {
247
- background: ${hoverColor};
248
- transform: translateY(${hoverTranslateY});
249
- box-shadow: 0 ${shadowOffset} ${shadowBlur} rgba(0, 0, 0, 0.2);
250
- }
251
-
252
- .nv-refresh-btn.nv-refresh-btn-refreshing::before {
253
- animation: nv-refresh-btn-spin ${animationDuration} linear infinite;
254
- }
255
-
256
- .nv-refresh-btn.nv-refresh-btn-disabled {
257
- background: #bdc3c7;
258
- cursor: not-allowed;
259
- opacity: 0.6;
260
- }
261
-
262
- .nv-refresh-btn.error {
263
- background: ${errorColor} !important;
264
- }
265
-
266
- @keyframes nv-refresh-btn-spin {
267
- 0% { transform: rotate(0deg); }
268
- 100% { transform: rotate(360deg); }
269
- }
270
- `;
271
-
272
- styleElement.textContent = newStyle;
273
- }
274
237
  }
275
238
 
276
239
  // 获取更深色
@@ -423,3 +386,4 @@ if (!customElements.get('nv-refresh-btn')) {
423
386
  module.exports = {
424
387
  NvRefreshBtn
425
388
  }
389
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nv-refresh-btn-bw",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "main": "index.js",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1"