@hn250424/aero 0.1.0 → 0.1.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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"
|
|
1
|
+
(function(r,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(r=typeof globalThis<"u"?globalThis:r||self,n(r.Aero={}))})(this,(function(r){"use strict";class n extends HTMLElement{shadow;constructor(t){super();const e=document.createElement("template");e.innerHTML=t,this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(e.content.cloneNode(!0))}query(t){return this.shadow.querySelector(t)}applyStyles(t){const e=document.createElement("style");e.textContent=t,this.shadow.appendChild(e)}forwardNativeEvent(t){this.dispatchEvent(new Event(t,{bubbles:!0,composed:!0}))}forwardCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e?.detail,bubbles:!0,composed:!0}))}}class a extends n{_input;_value;_min;_max;_step;_decimalPlaces;constructor(t){super(t),this.initializeInput(),this.dispatchInputEvents(),this.updateInputValue(this.getAttribute("value")),this.updateMinValue(this.getAttribute("min")),this.updateMaxValue(this.getAttribute("max")),this.updateStepValue(this.getAttribute("step"))}initializeInput(){this._input=this.query(this.getInputSelector())}getValidateValue(t){return Math.min(Number(this._max),Math.max(Number(this._min),Math.round(Number(t)/Number(this._step))*Number(this._step))).toFixed(Number(this._decimalPlaces))}dispatchInputEvents(){this._input.addEventListener("input",t=>{t.stopImmediatePropagation(),this.forwardNativeEvent("input")}),this._input.addEventListener("change",t=>{t.stopImmediatePropagation();const e=this.getValidateValue(this._input.value);this.value=e,this.forwardNativeEvent("change")}),this._input.addEventListener("focusin",t=>{t.stopImmediatePropagation(),this.forwardNativeEvent("focusin")}),this._input.addEventListener("focusout",t=>{t.stopImmediatePropagation();const e=this.getValidateValue(this._input.value);this.value=e,this.forwardNativeEvent("focusout")})}static get observedAttributes(){return["value","min","max","step"]}attributeChangedCallback(t,e,i){this.baseAeroNumericInputAttributeHandlers[t]?.(i)}baseAeroNumericInputAttributeHandlers={value:t=>{this.updateInputValue(t)},min:t=>{this.updateMinValue(t)},max:t=>{this.updateMaxValue(t)},step:t=>{this.updateStepValue(t)}};updateInputValue(t){this._value=t?this.getValidateValue(t):"0",this._input.value=this._value}updateMinValue(t){this._min=t||"0"}updateMaxValue(t){this._max=t||"100"}updateStepValue(t){this._step=t||"1",this._decimalPlaces=this._step.toString().split(".")[1]?.length.toString()||"0"}get input(){return this._input}get value(){return this._value}set value(t){this.setAttribute("value",t)}get min(){return this._min}set min(t){this.setAttribute("min",t)}get max(){return this._max}set max(t){this.setAttribute("max",t)}get step(){return this._step}set step(t){this.setAttribute("step",t)}get decimalPlaces(){return this._decimalPlaces}}const p=`<style>\r
|
|
2
2
|
:host {\r
|
|
3
3
|
border: 1px solid #ccc;\r
|
|
4
4
|
display: block;\r
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
</style>\r
|
|
28
28
|
\r
|
|
29
29
|
<input id="input" type="number" />\r
|
|
30
|
-
`;class
|
|
30
|
+
`;class h extends a{constructor(){super(p)}getInputSelector(){return"#input"}}customElements.define("aero-numeric-input",h);const g=`<style>\r
|
|
31
31
|
:host {\r
|
|
32
32
|
border: 1px solid #ccc;\r
|
|
33
33
|
display: block;\r
|
|
@@ -71,13 +71,13 @@
|
|
|
71
71
|
<input id="input" type="number" />\r
|
|
72
72
|
<button id="plus">+</button>\r
|
|
73
73
|
</div>\r
|
|
74
|
-
`;class
|
|
74
|
+
`;class u extends a{minus;plus;constructor(){super(g),this.minus=this.query("#minus"),this.plus=this.query("#plus"),this.minus.addEventListener("click",this.decrement.bind(this)),this.plus.addEventListener("click",this.increment.bind(this)),this.updateButtonBackgrondColor(this.getAttribute("button-backgroundcolor")),this.updateMinuxText(this.getAttribute("minus-text")),this.updatePlusText(this.getAttribute("plus-text")),this.updateHeight(parseInt(getComputedStyle(this).height)),new ResizeObserver(e=>{for(const i of e){const s=i.contentRect.height;this.applyStyles(`#spinbox {
|
|
75
75
|
grid-template-columns: ${s}px 1fr ${s}px;
|
|
76
76
|
}`)}}).observe(this)}getInputSelector(){return"#input"}static get observedAttributes(){return[...super.observedAttributes,"minus-text","plus-text","button-backgroundcolor"]}attributeChangedCallback(t,e,i){super.attributeChangedCallback(t,e,i),this.aeroSpinboxAttributeHandlers[t]?.(i)}aeroSpinboxAttributeHandlers={"minus-text":t=>{this.updateMinuxText(t)},"plus-text":t=>{this.updatePlusText(t)},"button-backgroundcolor":t=>{this.updateButtonBackgrondColor(t)}};updateMinuxText(t){this.minus.textContent=t||"-"}updatePlusText(t){this.plus.textContent=t||"+"}updateButtonBackgrondColor(t){this.applyStyles(`#spinbox > button {
|
|
77
77
|
background-color: ${t||"#ccc"};
|
|
78
78
|
}`)}updateHeight(t){t=t||30,this.applyStyles(`#spinbox {
|
|
79
79
|
grid-template-columns: ${t}px 1fr ${t}px;
|
|
80
|
-
}`)}set buttonBackgroundColor(t){this.setAttribute("button-backgroundcolor",t)}set minusText(t){this.setAttribute("minus-text",t)}set plusText(t){this.setAttribute("plus-text",t)}decrement(){const t=Number(this.input.value)-Number(this.step);this.value=this.getValidateValue(t.toString())}increment(){const t=Number(this.input.value)+Number(this.step);this.value=this.getValidateValue(t.toString())}}customElements.define("aero-spinbox",
|
|
80
|
+
}`)}set buttonBackgroundColor(t){this.setAttribute("button-backgroundcolor",t)}set minusText(t){this.setAttribute("minus-text",t)}set plusText(t){this.setAttribute("plus-text",t)}decrement(){const t=Number(this.input.value)-Number(this.step);this.value=this.getValidateValue(t.toString())}increment(){const t=Number(this.input.value)+Number(this.step);this.value=this.getValidateValue(t.toString())}}customElements.define("aero-spinbox",u);const m=`<style>\r
|
|
81
81
|
@keyframes spin {\r
|
|
82
82
|
0% {\r
|
|
83
83
|
transform: rotate(0deg);\r
|
|
@@ -88,14 +88,14 @@
|
|
|
88
88
|
}\r
|
|
89
89
|
}\r
|
|
90
90
|
</style>\r
|
|
91
|
-
`;class
|
|
91
|
+
`;class d extends n{constructor(){super(m),this.updateSpinnerStyles()}static get observedAttributes(){return["width","height","background","color","cycle"]}attributeChangedCallback(t,e,i){this.updateSpinnerStyles()}updateSpinnerStyles(){const t=this.getAttribute("width")||"50",e=this.getAttribute("height")||"50",i=this.getAttribute("background")||"white",s=this.getAttribute("color")||"black",b=this.getAttribute("cycle")||"1";this.applyStyles(`
|
|
92
92
|
:host {
|
|
93
93
|
width: ${t}px;
|
|
94
94
|
height: ${e}px;
|
|
95
95
|
border: 5px solid ${i};
|
|
96
96
|
border-top-color: ${s};
|
|
97
97
|
border-radius: 50%;
|
|
98
|
-
animation: spin ${
|
|
98
|
+
animation: spin ${b}s linear infinite;
|
|
99
99
|
box-sizing: border-box;
|
|
100
100
|
}
|
|
101
101
|
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
0% { transform: rotate(0deg); }
|
|
104
104
|
100% { transform: rotate(360deg); }
|
|
105
105
|
}
|
|
106
|
-
`)}set width(t){this.setAttribute("width",t)}set height(t){this.setAttribute("height",t)}set background(t){this.setAttribute("background",t)}set color(t){this.setAttribute("color",t)}set cycle(t){this.setAttribute("cycle",t)}}customElements.define("aero-progress-spinner",
|
|
106
|
+
`)}set width(t){this.setAttribute("width",t)}set height(t){this.setAttribute("height",t)}set background(t){this.setAttribute("background",t)}set color(t){this.setAttribute("color",t)}set cycle(t){this.setAttribute("cycle",t)}}customElements.define("aero-progress-spinner",d);const c=`<style>\r
|
|
107
107
|
:host {\r
|
|
108
108
|
position: relative;\r
|
|
109
109
|
}\r
|
|
@@ -152,4 +152,4 @@
|
|
|
152
152
|
<div id="bottom" class="resizer vertical"></div>\r
|
|
153
153
|
<div id="left" class="resizer horizontal"></div>\r
|
|
154
154
|
<div id="right" class="resizer horizontal"></div>\r
|
|
155
|
-
`;class
|
|
155
|
+
`;class l extends n{_topResizer;_bottomResizer;_leftResizer;_rightResizer;_hasTopResizer;_hasBottomResizer;_hasLeftResizer;_hasRightResizer;_nMinWidth;_nMaxWidth;_nMinHeight;_nMaxHeight;isTopDragging=!1;isBottomDragging=!1;isLeftDragging=!1;isRightDragging=!1;isDragging=!1;animationFrameId=null;resizerHandlers={top:t=>this.processMousedownEvent(t,"top"),bottom:t=>this.processMousedownEvent(t,"bottom"),left:t=>this.processMousedownEvent(t,"left"),right:t=>this.processMousedownEvent(t,"right")};constructor(){super(c),this._topResizer=this.query("#top"),this._bottomResizer=this.query("#bottom"),this._leftResizer=this.query("#left"),this._rightResizer=this.query("#right"),this.updateMinWidthValue(this.getAttribute("min-width")),this.updateMaxWidthValue(this.getAttribute("max-width")),this.updateMinHeightValue(this.getAttribute("min-height")),this.updateMaxHeightValue(this.getAttribute("max-height")),this.updateTopResizerState(this.hasAttribute("resize-top")),this.updateBottomResizerState(this.hasAttribute("resize-bottom")),this.updateLeftResizerState(this.hasAttribute("resize-left")),this.updateRightResizerState(this.hasAttribute("resize-right")),document.addEventListener("mousemove",t=>{this.isDragging&&(this.animationFrameId&&cancelAnimationFrame(this.animationFrameId),this.animationFrameId=requestAnimationFrame(()=>{const e=this.getBoundingClientRect();if(this.isTopDragging){const i=e.bottom-t.clientY,s=Math.min(Math.max(i,this._nMinHeight),this._nMaxHeight);this.style.height=`${s}px`,this.emitResize(null,s)}else if(this.isBottomDragging){const i=t.clientY-e.top,s=Math.min(Math.max(i,this._nMinHeight),this._nMaxHeight);this.style.height=`${s}px`,this.emitResize(null,s)}else if(this.isLeftDragging){const i=e.right-t.clientX,s=Math.min(Math.max(i,this._nMinWidth),this._nMaxWidth);this.style.width=`${s}px`,this.emitResize(s,null)}else if(this.isRightDragging){const i=t.clientX-e.left,s=Math.min(Math.max(i,this._nMinWidth),this._nMaxWidth);this.style.width=`${s}px`,this.emitResize(s,null)}}))}),document.addEventListener("mouseup",()=>{this.isDragging&&(this.forwardCustomEvent("aero-resize-end",{detail:{width:this.offsetWidth,height:this.offsetHeight}}),this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null),document.body.style.cursor="default",document.body.style.userSelect="auto",this.isDragging=!1,this.isTopDragging=!1,this.isBottomDragging=!1,this.isLeftDragging=!1,this.isRightDragging=!1)})}processMousedownEvent=(t,e)=>{switch(t.preventDefault(),document.body.style.userSelect="none",this.isDragging=!0,this.forwardCustomEvent("aero-resize-start",{detail:{width:this.offsetWidth,height:this.offsetHeight,edge:e}}),e){case"top":this.isTopDragging=!0,document.body.style.cursor="ns-resize";break;case"bottom":this.isBottomDragging=!0,document.body.style.cursor="ns-resize";break;case"left":this.isLeftDragging=!0,document.body.style.cursor="ew-resize";break;case"right":this.isRightDragging=!0,document.body.style.cursor="ew-resize";break}};emitResize(t,e){this.forwardCustomEvent("aero-resize",{detail:{width:t,height:e}})}static get observedAttributes(){return["min-width","max-width","min-height","max-height","resize-top","resize-bottom","resize-left","resize-right","resizer-color"]}attributeChangedCallback(t,e,i){this.baseAeroResizeBoxAttributeHandlers[t]?.(i)}baseAeroResizeBoxAttributeHandlers={"min-width":t=>{this.updateMinWidthValue(t)},"max-width":t=>{this.updateMaxWidthValue(t)},"min-height":t=>{this.updateMinHeightValue(t)},"max-height":t=>{this.updateMaxHeightValue(t)},"resize-top":t=>{this.updateTopResizerState(t!==null)},"resize-bottom":t=>{this.updateBottomResizerState(t!==null)},"resize-left":t=>{this.updateLeftResizerState(t!==null)},"resize-right":t=>{this.updateRightResizerState(t!==null)},"resizer-color":t=>{const e=t??"#ccc";this.applyStyles(`.resizer:hover { background-color: ${e}; }`)}};updateTopResizerState(t){this._hasTopResizer=t,this.updateResizeState(this._topResizer,this._hasTopResizer,this.resizerHandlers.top)}updateBottomResizerState(t){this._hasBottomResizer=t,this.updateResizeState(this._bottomResizer,this._hasBottomResizer,this.resizerHandlers.bottom)}updateLeftResizerState(t){this._hasLeftResizer=t,this.updateResizeState(this._leftResizer,this._hasLeftResizer,this.resizerHandlers.left)}updateRightResizerState(t){this._hasRightResizer=t,this.updateResizeState(this._rightResizer,this._hasRightResizer,this.resizerHandlers.right)}updateResizeState(t,e,i){t.hidden=!e,e?t.addEventListener("mousedown",i):t.removeEventListener("mousedown",i)}updateMinWidthValue(t){this._nMinWidth=t?Number(t):0}updateMaxWidthValue(t){this._nMaxWidth=t?Number(t):2e3}updateMinHeightValue(t){this._nMinHeight=t?Number(t):0}updateMaxHeightValue(t){this._nMaxHeight=t?Number(t):2e3}set resizerColor(t){this.setAttribute("resizer-color",t)}get minWidth(){return this._nMinWidth.toString()}set minWidth(t){this.setAttribute("min-width",t)}get maxWidth(){return this._nMaxWidth.toString()}set maxWidth(t){this.setAttribute("max-width",t)}get minHeight(){return this._nMinHeight.toString()}set minHeight(t){this.setAttribute("min-height",t)}get maxHeight(){return this._nMaxHeight.toString()}set maxHeight(t){this.setAttribute("max-height",t)}addTopResizer(){this.setAttribute("resize-top","")}removeTopResizer(){this.removeAttribute("resize-top")}addBottomResizer(){this.setAttribute("resize-bottom","")}removeBottomResizer(){this.removeAttribute("resize-bottom")}addLeftResizer(){this.setAttribute("resize-left","")}removeLeftResizer(){this.removeAttribute("resize-left")}addRightResizer(){this.setAttribute("resize-right","")}removeRightResizer(){this.removeAttribute("resize-right")}}customElements.define("aero-resize-box",l),r.AeroNumericInput=h,r.AeroProgressSpinner=d,r.AeroResizeBox=l,r.AeroSpinbox=u,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hn250424/aero",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Web component library with built-in convenience features",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
"exports": {
|
|
12
12
|
".": {
|
|
13
13
|
"types": "./lib/aero.es.d.ts",
|
|
14
|
-
"import": "./lib/aero.es.js"
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
"import": "./lib/aero.es.js"
|
|
15
|
+
},
|
|
16
|
+
"./umd": "./lib/aero.umd.js"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
19
|
"build:lib": "node scripts/build/build-lib.js",
|