physical-quantity 1.1.19 → 1.1.21
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 +22 -16
- package/dist/pq.es.js +19 -10
- package/dist/pq.umd.js +7 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
`physical-quantity(PQE)` 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
|
-
](https://firebasestorage.googleapis.com/v0/b/auto-calc-80237.appspot.com/o/PQE%2Fexamples%2FPhysicalQuantityElementDemo3-ezgif.com.gif?alt=media&token=b910c493-e990-490b-bf4d-015a4d4c10d2)
|
|
7
7
|
|
|
8
8
|
## Features
|
|
9
9
|
|
|
@@ -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
|
|
|
@@ -71,7 +71,7 @@ Here's an example of how to use the component in an HTML file:
|
|
|
71
71
|
<meta charset="UTF-8">
|
|
72
72
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
73
73
|
<title>Physical Quantity Component Example</title>
|
|
74
|
-
<script src="https://unpkg.com/physical-quantity@
|
|
74
|
+
<script src="https://unpkg.com/physical-quantity@latest/dist/pq.umd.js"></script>
|
|
75
75
|
</head>
|
|
76
76
|
<body>
|
|
77
77
|
<physical-quantity value="25.4" unit="mm"></physical-quantity>
|
|
@@ -91,6 +91,7 @@ The physical-quantity component supports the following attributes:
|
|
|
91
91
|
Currently, the component supports the following categories and units:
|
|
92
92
|
- Length
|
|
93
93
|
- m (meter)
|
|
94
|
+
- km (kilometers)
|
|
94
95
|
- mm (millimeter)
|
|
95
96
|
- cm (centimeter)
|
|
96
97
|
- in (inch)
|
|
@@ -105,18 +106,23 @@ Currently, the component supports the following categories and units:
|
|
|
105
106
|
- MPa
|
|
106
107
|
- GPa
|
|
107
108
|
- 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
|
|
109
|
+
- mbar
|
|
110
|
+
- atm
|
|
111
|
+
- mm HG
|
|
112
|
+
- cm HG
|
|
113
|
+
- in HG
|
|
114
|
+
- mm W.C.
|
|
115
|
+
- m W.C.,
|
|
116
|
+
- in W.C.
|
|
117
|
+
- psf: pound per square foot
|
|
118
|
+
- psi: pound per square foot
|
|
119
|
+
- ksi: kilo-pound per square foot
|
|
120
|
+
- ksi[kip/in²]
|
|
121
|
+
- Density:
|
|
122
|
+
- kg/m³
|
|
123
|
+
- kg/L
|
|
124
|
+
- g/cm³
|
|
125
|
+
- g/mm³
|
|
120
126
|
- ... (more to update.)
|
|
121
127
|
|
|
122
128
|
## License
|
package/dist/pq.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
const o = 0.45359237, s = 25.4 / 1e3, a = 12 * s, l = 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,7 +47,7 @@ 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
52
|
atm: l,
|
|
52
53
|
"mm HG": n,
|
|
@@ -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,12 +169,12 @@ 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
|
}
|
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>
|
|
62
|
+
|
|
63
63
|
`}}customElements.define("physical-quantity",l),customElements.define("pqe",l)});
|