physical-quantity 1.1.20 → 1.1.22
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.
- package/README.md +28 -17
- package/dist/pq.es.js +24 -13
- package/dist/pq.umd.js +8 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Physical Quantity Web Component
|
|
2
2
|
|
|
3
|
-
`physical-quantity(
|
|
3
|
+
`physical-quantity(alias: uc-qty for quantity with built-in unit conversion)` is a web component that allows you to create and manipulate physical quantities with different units. It provides an input for the value and a dropdown for the unit, automatically converting between units in the same category.
|
|
4
4
|
|
|
5
5
|
It is a new HTML element for expressing physical quantities, featuring self-contained unit conversion, a compact and clean UI, no redundant dual units, and seamless integration across all websites and platforms.
|
|
6
6
|
|
|
@@ -13,9 +13,9 @@ It is a new HTML element for expressing physical quantities, featuring self-cont
|
|
|
13
13
|
- Easy to integrate into any web project.
|
|
14
14
|
|
|
15
15
|
## Demo: Physical Quantity element - No Unit Converter or Dual Units Needed
|
|
16
|
-
[Live Demo on JS Fiddle](https://jsfiddle.net/hithere/tz8ym4fh/
|
|
16
|
+
[Live Demo on JS Fiddle](https://jsfiddle.net/hithere/tz8ym4fh/132/embedded/result)
|
|
17
17
|
|
|
18
|
-
<iframe width="100%" height="300" src="https://jsfiddle.net/hithere/tz8ym4fh/
|
|
18
|
+
<iframe width="100%" height="300" src="https://jsfiddle.net/hithere/tz8ym4fh/132/embedded/result" allowfullscreen="true" frameborder="0"></iframe>
|
|
19
19
|
|
|
20
20
|
[](https://jsfiddle.net/hithere/tz8ym4fh/100/embedded/result)
|
|
21
21
|
|
|
@@ -39,9 +39,10 @@ Include the following script tag in your HTML file:
|
|
|
39
39
|
```
|
|
40
40
|
|
|
41
41
|
### Using the Component
|
|
42
|
-
Add the `physical-quantity` tag to your HTML file:
|
|
42
|
+
Add the `physical-quantity` or `uc-qty` tag to your HTML file:
|
|
43
43
|
```html
|
|
44
44
|
<physical-quantity value="25.4" unit="mm" decimal-places="4"></physical-quantity>
|
|
45
|
+
<uc-qty value="25.4" unit="mm" decimal-places="4"></uc-qty>
|
|
45
46
|
```
|
|
46
47
|
|
|
47
48
|
### Example - Linking the Code
|
|
@@ -57,6 +58,7 @@ Here's an example of how to use the component in an HTML file:
|
|
|
57
58
|
</head>
|
|
58
59
|
<body>
|
|
59
60
|
<physical-quantity value="25.4" unit="mm"></physical-quantity>
|
|
61
|
+
<uc-qty value="25.4" unit="mm" decimal-places="4"></uc-qty>
|
|
60
62
|
|
|
61
63
|
<script src="node_modules/physical-quantity/src/pq.es.js"></script>
|
|
62
64
|
</body>
|
|
@@ -76,6 +78,8 @@ Here's an example of how to use the component in an HTML file:
|
|
|
76
78
|
<body>
|
|
77
79
|
<physical-quantity value="25.4" unit="mm"></physical-quantity>
|
|
78
80
|
<physical-quantity value="1500" unit="psf" decimal-places=4></physical-quantity> <br>
|
|
81
|
+
<uc-qty value="2" unit="lbm" decimal-places="2"></uc-qty>
|
|
82
|
+
|
|
79
83
|
</body>
|
|
80
84
|
</html>
|
|
81
85
|
```
|
|
@@ -91,6 +95,7 @@ The physical-quantity component supports the following attributes:
|
|
|
91
95
|
Currently, the component supports the following categories and units:
|
|
92
96
|
- Length
|
|
93
97
|
- m (meter)
|
|
98
|
+
- km (kilometers)
|
|
94
99
|
- mm (millimeter)
|
|
95
100
|
- cm (centimeter)
|
|
96
101
|
- in (inch)
|
|
@@ -105,18 +110,23 @@ Currently, the component supports the following categories and units:
|
|
|
105
110
|
- MPa
|
|
106
111
|
- GPa
|
|
107
112
|
- bar
|
|
108
|
-
- mbar
|
|
109
|
-
- atm
|
|
110
|
-
- mm HG
|
|
111
|
-
- cm HG
|
|
112
|
-
- in HG
|
|
113
|
-
- mm W.C
|
|
114
|
-
- m W.C.,
|
|
115
|
-
- in W.C
|
|
116
|
-
- psf
|
|
117
|
-
- psi
|
|
118
|
-
- ksi
|
|
119
|
-
- ksi[kip/in
|
|
113
|
+
- mbar
|
|
114
|
+
- atm
|
|
115
|
+
- mm HG
|
|
116
|
+
- cm HG
|
|
117
|
+
- in HG
|
|
118
|
+
- mm W.C.
|
|
119
|
+
- m W.C.,
|
|
120
|
+
- in W.C.
|
|
121
|
+
- psf: pound per square foot
|
|
122
|
+
- psi: pound per square foot
|
|
123
|
+
- ksi: kilo-pound per square foot
|
|
124
|
+
- ksi[kip/in²]
|
|
125
|
+
- Density:
|
|
126
|
+
- kg/m³
|
|
127
|
+
- kg/L
|
|
128
|
+
- g/cm³
|
|
129
|
+
- g/mm³
|
|
120
130
|
- ... (more to update.)
|
|
121
131
|
|
|
122
132
|
## License
|
|
@@ -126,7 +136,8 @@ This project is licensed under the MIT License. See the LICENSE file for more de
|
|
|
126
136
|
Contributions are welcome! Please contact the developer for any bugs, features, or improvements.
|
|
127
137
|
|
|
128
138
|
## Change Log
|
|
129
|
-
-
|
|
139
|
+
- v1.1.21(20250603): added alias uc-qty.
|
|
140
|
+
- v1.1.19(20250602): changed to umd for unpkg, and es for module.
|
|
130
141
|
|
|
131
142
|
## Contact
|
|
132
143
|
If you have any questions or feedback, feel free to contact me at don.wen@yahoo.com.
|
package/dist/pq.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
const o = 0.45359237, s = 25.4 / 1e3, a = 12 * s,
|
|
1
|
+
const o = 0.45359237, s = 25.4 / 1e3, a = 12 * s, h = 101325, n = 133.322387415;
|
|
2
2
|
class r extends HTMLElement {
|
|
3
3
|
constructor() {
|
|
4
|
-
super(), this.attachShadow({ mode: "open" }), this.value = 0, this.unit = "mm", this.unitCategory = "Length", this.decimalPlaces = 3, this.units = {
|
|
4
|
+
super(), this.attachShadow({ mode: "open" }), this.value = 0, this.unit = "mm", this.unitCategory = "Length", this.tooltipTimeout = null, this.decimalPlaces = 3, this.units = {
|
|
5
5
|
Length: ["m", "km", "cm", "mm", "in", "ft"],
|
|
6
6
|
Mass: ["g", "kg", "lbm"],
|
|
7
7
|
Pressure: [
|
|
@@ -22,7 +22,8 @@ class r extends HTMLElement {
|
|
|
22
22
|
"psi",
|
|
23
23
|
"ksi",
|
|
24
24
|
"ksi[kip/in²]"
|
|
25
|
-
]
|
|
25
|
+
],
|
|
26
|
+
Density: ["kg/m³", "kg/L", "g/cm³", "g/mm³"]
|
|
26
27
|
// Add other categories and units as needed
|
|
27
28
|
}, this.unitConversion = {
|
|
28
29
|
Length: {
|
|
@@ -46,9 +47,9 @@ class r extends HTMLElement {
|
|
|
46
47
|
kPa: 1e3,
|
|
47
48
|
MPa: 1e6,
|
|
48
49
|
GPa: 1e9,
|
|
49
|
-
bar:
|
|
50
|
+
bar: 100 * 1e3,
|
|
50
51
|
mbar: 100,
|
|
51
|
-
atm:
|
|
52
|
+
atm: h,
|
|
52
53
|
"mm HG": n,
|
|
53
54
|
"cm HG": n * 10,
|
|
54
55
|
"in HG": n * 25.4,
|
|
@@ -59,6 +60,12 @@ class r extends HTMLElement {
|
|
|
59
60
|
psi: o * 9.80665 / Math.pow(s, 2),
|
|
60
61
|
ksi: o * 9.80665 / Math.pow(s, 2) * 1e3,
|
|
61
62
|
"ksi[kip/in²]": o * 9.80665 / Math.pow(s, 2) * 1e3
|
|
63
|
+
},
|
|
64
|
+
Density: {
|
|
65
|
+
"kg/m³": 1,
|
|
66
|
+
"kg/L": 1e3,
|
|
67
|
+
"g/cm³": 1 / 1e3 / Math.pow(0.01, 3),
|
|
68
|
+
"g/mm³": 1 / 1e3 / Math.pow(1e-3, 3)
|
|
62
69
|
}
|
|
63
70
|
}, this.render();
|
|
64
71
|
}
|
|
@@ -98,7 +105,9 @@ class r extends HTMLElement {
|
|
|
98
105
|
}
|
|
99
106
|
handleMouseOut() {
|
|
100
107
|
const t = this.shadowRoot.querySelector(".tooltip");
|
|
101
|
-
|
|
108
|
+
this.tooltipTimeout = setTimeout(() => {
|
|
109
|
+
t.style.display = "none";
|
|
110
|
+
}, 1e3);
|
|
102
111
|
}
|
|
103
112
|
formatValue(t) {
|
|
104
113
|
return Number.isInteger(t) ? t.toString() : Math.floor(t) !== 0 ? t.toFixed(this.decimalPlaces).replace(/0+$/, "").replace(/\.$/, "") : t.toPrecision(3);
|
|
@@ -130,9 +139,9 @@ class r extends HTMLElement {
|
|
|
130
139
|
}
|
|
131
140
|
|
|
132
141
|
.tooltip {
|
|
133
|
-
display:
|
|
142
|
+
display: none; /* Set display to block for initial positioning */
|
|
134
143
|
visibility: hidden; /* Initially hide the tooltip */
|
|
135
|
-
opacity:
|
|
144
|
+
opacity: 50; /* Start with zero opacity */
|
|
136
145
|
transition: opacity 0.3s ease-in-out; /* Smooth transition */
|
|
137
146
|
position: absolute;
|
|
138
147
|
bottom: 100%;
|
|
@@ -141,7 +150,7 @@ class r extends HTMLElement {
|
|
|
141
150
|
background-color: black;
|
|
142
151
|
color: red;
|
|
143
152
|
padding: 5px;
|
|
144
|
-
border-radius:
|
|
153
|
+
border-radius: 3px;
|
|
145
154
|
font-size: 0.8em;
|
|
146
155
|
white-space: nowrap;
|
|
147
156
|
z-index: 10;
|
|
@@ -160,14 +169,16 @@ class r extends HTMLElement {
|
|
|
160
169
|
${this.units[this.unitCategory].map((t) => `<option value="${t}" ${t === this.unit ? "selected" : ""}>
|
|
161
170
|
${t}</option>`).join("")}
|
|
162
171
|
</select>
|
|
163
|
-
</div>
|
|
172
|
+
</div>
|
|
164
173
|
</div>
|
|
165
174
|
<div class="tooltip">
|
|
166
|
-
Powered by <a href="https://v2.donwen.com" target="_blank"
|
|
167
|
-
AutoCalcs</a>
|
|
175
|
+
Powered by <a href="https://v2.donwen.com" target="_blank">AutoCalcs</a>
|
|
168
176
|
</div>
|
|
177
|
+
|
|
169
178
|
`;
|
|
170
179
|
}
|
|
171
180
|
}
|
|
172
181
|
customElements.define("physical-quantity", r);
|
|
173
|
-
|
|
182
|
+
class c extends r {
|
|
183
|
+
}
|
|
184
|
+
customElements.define("uc-qty", c);
|
package/dist/pq.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(n){typeof define=="function"&&define.amd?define(n):n()})(function(){"use strict";const o=.45359237,i=25.4/1e3,r=12*i,h=101325,a=133.322387415;class l extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.value=0,this.unit="mm",this.unitCategory="Length",this.decimalPlaces=3,this.units={Length:["m","km","cm","mm","in","ft"],Mass:["g","kg","lbm"],Pressure:["Pa","kPa","MPa","GPa","bar","mbar","atm","mm HG","cm HG","in HG","mm W.C.","m W.C.","in W.C.","psf","psi","ksi","ksi[kip/in²]"]},this.unitConversion={Length:{m:1,km:1e3,cm:.01,mm:.001,in:i,ft:r},Mass:{kg:1,g:.001,lbm:o},Pressure:{Pa:1,kPa:1e3,MPa:1e6,GPa:1e9,bar:
|
|
1
|
+
(function(n){typeof define=="function"&&define.amd?define(n):n()})(function(){"use strict";const o=.45359237,i=25.4/1e3,r=12*i,h=101325,a=133.322387415;class l extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.value=0,this.unit="mm",this.unitCategory="Length",this.tooltipTimeout=null,this.decimalPlaces=3,this.units={Length:["m","km","cm","mm","in","ft"],Mass:["g","kg","lbm"],Pressure:["Pa","kPa","MPa","GPa","bar","mbar","atm","mm HG","cm HG","in HG","mm W.C.","m W.C.","in W.C.","psf","psi","ksi","ksi[kip/in²]"],Density:["kg/m³","kg/L","g/cm³","g/mm³"]},this.unitConversion={Length:{m:1,km:1e3,cm:.01,mm:.001,in:i,ft:r},Mass:{kg:1,g:.001,lbm:o},Pressure:{Pa:1,kPa:1e3,MPa:1e6,GPa:1e9,bar:100*1e3,mbar:100,atm:h,"mm HG":a,"cm HG":a*10,"in HG":a*25.4,"mm W.C.":1/1e3*1e3*9.80665,"m W.C.":1*1e3*9.80665,"in W.C.":i*1e3*9.80665,psf:o*9.80665/Math.pow(r,2),psi:o*9.80665/Math.pow(i,2),ksi:o*9.80665/Math.pow(i,2)*1e3,"ksi[kip/in²]":o*9.80665/Math.pow(i,2)*1e3},Density:{"kg/m³":1,"kg/L":1e3,"g/cm³":1/1e3/Math.pow(.01,3),"g/mm³":1/1e3/Math.pow(.001,3)}},this.render()}static get observedAttributes(){return["value","unit","decimal-places"]}attributeChangedCallback(t,e,s){t==="value"?this.value=parseFloat(s):t==="unit"?(this.unit=s,this.unitCategory=this.getUnitCategory(s)):t==="decimal-places"&&(this.decimalPlaces=parseInt(s)||3),this.render()}getUnitCategory(t){for(const e in this.units)if(this.units[e].includes(t))return e;return null}connectedCallback(){this.shadowRoot.addEventListener("change",this.handleUnitChange.bind(this)),this.shadowRoot.addEventListener("mouseover",this.handleMouseOver.bind(this)),this.shadowRoot.addEventListener("mouseout",this.handleMouseOut.bind(this)),this.render()}disconnectedCallback(){this.shadowRoot.removeEventListener("change",this.handleUnitChange.bind(this)),this.shadowRoot.removeEventListener("mouseover",this.handleMouseOver.bind(this)),this.shadowRoot.removeEventListener("mouseout",this.handleMouseOut.bind(this))}handleArrowClick(t){if(t.target.closest(".unit-container")){const e=this.shadowRoot.querySelector("select");e&&(e.focus(),e.click())}}handleUnitChange(t){if(t.target.tagName==="SELECT"){const e=t.target.value,s=this.unitConversion[this.unitCategory][this.unit]/this.unitConversion[this.unitCategory][e];this.value=this.value*s,this.unit=e,this.render()}}handleMouseOver(){const t=this.shadowRoot.querySelector(".tooltip");t.style.display="block",clearTimeout(this.tooltipTimeout)}handleMouseOut(){const t=this.shadowRoot.querySelector(".tooltip");this.tooltipTimeout=setTimeout(()=>{t.style.display="none"},1e3)}formatValue(t){return Number.isInteger(t)?t.toString():Math.floor(t)!==0?t.toFixed(this.decimalPlaces).replace(/0+$/,"").replace(/\.$/,""):t.toPrecision(3)}render(){this.shadowRoot.innerHTML=`
|
|
2
2
|
<style>
|
|
3
3
|
:host {
|
|
4
4
|
display: inline-block;
|
|
@@ -24,9 +24,9 @@
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
.tooltip {
|
|
27
|
-
display:
|
|
27
|
+
display: none; /* Set display to block for initial positioning */
|
|
28
28
|
visibility: hidden; /* Initially hide the tooltip */
|
|
29
|
-
opacity:
|
|
29
|
+
opacity: 50; /* Start with zero opacity */
|
|
30
30
|
transition: opacity 0.3s ease-in-out; /* Smooth transition */
|
|
31
31
|
position: absolute;
|
|
32
32
|
bottom: 100%;
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
background-color: black;
|
|
36
36
|
color: red;
|
|
37
37
|
padding: 5px;
|
|
38
|
-
border-radius:
|
|
38
|
+
border-radius: 3px;
|
|
39
39
|
font-size: 0.8em;
|
|
40
40
|
white-space: nowrap;
|
|
41
41
|
z-index: 10;
|
|
@@ -54,10 +54,10 @@
|
|
|
54
54
|
${this.units[this.unitCategory].map(t=>`<option value="${t}" ${t===this.unit?"selected":""}>
|
|
55
55
|
${t}</option>`).join("")}
|
|
56
56
|
</select>
|
|
57
|
-
</div>
|
|
57
|
+
</div>
|
|
58
58
|
</div>
|
|
59
59
|
<div class="tooltip">
|
|
60
|
-
Powered by <a href="https://v2.donwen.com" target="_blank"
|
|
61
|
-
AutoCalcs</a>
|
|
60
|
+
Powered by <a href="https://v2.donwen.com" target="_blank">AutoCalcs</a>
|
|
62
61
|
</div>
|
|
63
|
-
|
|
62
|
+
|
|
63
|
+
`}}customElements.define("physical-quantity",l);class c extends l{}customElements.define("uc-qty",c)});
|