Web Components for Physical Quantities with Built-in Unit Conversion

!Physical Quantity to/from Feet-Inches (Gif Animation)

This package introduces three custom HTML elements designed for expressing and manipulating physical quantities with seamless unit conversion:

- (alias: ) A versatile component for single quantities, featuring a value input and a unit dropdown. It automatically handles conversions within the same unit category.

- Represents a pair of physical quantities sharing the same unit. It displays two values and a unit dropdown, enabling simultaneous conversion of both quantities.

- Designed for triplets of physical quantities with a common unit. It presents three values and a unit dropdown, facilitating synchronized conversion across all three quantities.

These web components offer:
- Self-contained unit conversion
- A clean, compact user interface
- Elimination of redundant dual units
- Seamless integration across various websites and platforms

By leveraging these custom elements, developers can easily incorporate sophisticated physical quantity handling and unit conversion into their web applications, enhancing user experience and data presentation.

Features

- Create a or , or with a value(values) and unit.
- Automatically convert between units within the same category.
- Display values with customizable decimal places if not an integer; show integers without decimal parts.
- Easy to integrate into any web project.

Demo: Physical Quantity element - No Unit Converter or Dual Units Needed

Live Demo 1 - technical writing
Live Demo 2 - typical product specs
Live Demo 3 - typical product specs
Live Demo 4 - unique ft-in conversion


!Physical Quantity (Gif Animation)



Installation

You can install the physical-quantity package using npm:

``bash
npm install physical-quantity
`

Usage

$3

The unit list displays available units for the physical quantity category. Users can easily switch between units to view the same quantity in different measurements.

When hovering over the unit list, an icon appears, providing access to a comprehensive Generic Unit Converter powered by AutoCalcs. This tool allows users to convert quantities across 60+ categories.

$3

After installation, you can import and use the physical-quantity component in your project.

$3

Include the following script tag in your HTML file:
`html

`

$3

Add the , , , or tag to your HTML file:
`html


Compact mode, no arrow.

Non-exist unit, shown as is.



3 digits

4 digits

5 digits





x
x




Compact mode, no arrow.





Default with arrow.

Compact mode, no arrow.

Compact mode, no arrow.



For Feet-Inches unit








Quantity pair


Quantity triplet values="10x20x30" unit="cm"

`
Above Rendered in Web Browser

$3

Here's an example of how to use the component in an HTML file:

`html




















`

$3

`html





















``

$3

The physical-quantity component supports the following attributes:

- _value_: The initial value of the physical quantity. It can be any number.
- _unit_: The initial unit of the physical quantity.
When a valid unit within the supported unit categories (e.g., mm, cm, m, in, ft for length), unit conversion is automated;
When a unit provided is not in the library, it will show per the author's input, like a regular text input.
- _decimal-places_: web author can specify the decimal-places depending on the magnitude of the quantity. Default to 2.
- _show-unit-arrow_: specify to show the downward arrow following the units list. Default to be true. When set to false, it is suitable when the author wants to show in a compact format.

$3

Currently, the component supports the following categories and units:
| Category | Unit | Description |
|---|---|---|
| Length | m |meter|
| |km |kilometer|
| |mm |millimeter|
| |cm |centimeter|
| |in |inch|
| |ft-in |foot-inch|
| |ft |foot|
| Mass | kg |kilogram|
| | g |gram|
| |lbm |pound mass|
| Time | s[second] ||
| | s||
| | minute||
| | h||
| | h[hour]||
| | day||
| | week||
| ElectricalCurrent | A ||
| | Ampere[amp]||
| | mA||
| | µA||
| | kA||
| | MA||
| | esu/s ||
| Temperature | °K ||
| | °C ||
| | °F ||
| | °Ra ||
| Amount of Substance | mol ||
| | mmol ||
| | kmol ||
| Luminous Intensity | cd[candela] ||
| | lm/sr ||
| | cp[candlepower] ||
| | cp[candlepower(before 1948)] ||
| Acceleration | m/s² ||
| | m/min² ||
| | mm/s² ||
| | ft/s² ||
| | ft/min² ||
| | in/s² ||
| Gravitational Constant | m³/kg/s² ||
| | N⋅m²/kg² ||
| | dyn⋅cm²/g² ||
| Velocity (Angular) | rad/s ||
| | rad/min ||
| | rad/h ||
| | deg°/s ||
| | deg°/min ||
| | deg°/h ||
| | rpm[rev/min]||
| | rev/s ||
| Pressure/Stress | Pa ||
| | kPa ||
| | MPa ||
| | GPa ||
| | bar ||
| | mbar||
| | atm||
| | mm HG||
| | cm HG||
| | in HG||
| | mm W.C.||
| | m W.C.||
| | in W.C.||
| | psf| pound per square foot|
| | psi| pound per square foot|
| | ksi| kilo-pound per square foot|
| | ksi[kip/in²]||
| Density | kg/m³||
| | kg/L||
| | g/cm³||
| | g/mm³||
| | lbm/ft³||
| | lbm/in³||
| Force | N||
| | kN||
| | MN||
| | kgf||
| | lb| pound weight |
| | lbf| pount force |
| | kip[kilo pounds]||
| Flow Rate (Volume) | m³/s ||
| | m³/min ||
| | m³/h ||
| | L/s ||
| | L/min ||
| | L/h ||
| | cm³/s ||
| | cm³/min ||
| | in³/s ||
| | in³/min ||
| | ft³/s ||
| | CFM ||
| | CFM[ft³/min] ||
| | CFH ||
| | CFH[ft³/h] ||
| | yd³/min ||
| | yd³/h ||
| | gpm(US) | gallons(US) per minute |
| | gph(US) | gallons(US) per hour |
| | bushel(UK-imperial)/h ||
| | bushel(US)/h ||
| Electrical Potential Difference (Voltage) | V ||
| | Volt ||
| | joule/coulomb ||
| | J/C ||
| | µV ||
| | mV ||
| | kV ||
| | M ||
| more to update. | (feel free to send your request for other units & categories) ||

Note:
- lbm, lbmass are used for mass units;
- lb, lbf are used for weight/force units.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contributing

Contributions are welcome! Please contact the developer for any bugs, features, or improvements.

Change Log

| Version | Date | Description |
|---|---|---|
| v1.1.92 |20251001| Power unit W[Watt] changed to W. |
| v1.1.91 |20251001| Power unit Btu(AC) for air conditioner. |
| v1.1.90 |20250120| Volume unit 'mL' to 'ml'. |
| v1.1.88 |20241016| Code optimized. |
| v1.1.85 |20241015| Bug fixes. |
| v1.1.81 |20241014| Added uc-qty-pair & uc-qty-triplet. |
| v1.1.80 |20241013| Minor bug fixes. |
| v1.1.75 |20241010| Added more ounces and cups for volume. |
| v1.1.70 |20240810| Fine-tuned style. Checked usage of PQ element in Vue 3 app. Works with both unpkg and npm installation. |
| v1.1.68 |20240722| Readme update with Technical Writing example. |
| v1.1.67 |20240721| Number formatting with comma, eg: 20000 to 23,000; bug fixes. |
| v1.1.60 |20240721| A main refactoring. |
| v1.1.52 |20240718| Added category "Electrical Potential Difference (Voltage)".|
| v1.1.50 |20240716| Corrected decimal point format, default to 2.|
| v1.1.47 |20240712| Added flow rate (volume) category.|
| v1.1.46 |20240629| Added more categories; add notes for mass/weight differences.|
| v1.1.43 |20240623| Added more categories.|
| v1.1.41 |20240620| Added Force category.|
| v1.1.40 |20240619| Added ft-in (ie: Foot-Inch) in Length category.|
| v1.1.35 |20240616| Added temperature category.|
| v1.1.30 |20240615| Added "show-unit-arrow" prop to allow web author to create a compact UI; Unit width is now responsive to the chosen unit; Author can force init unit.|
| v1.1.28 |20240610| Tooltip for unit list provides a link to the unit converter page for all unit categories. Added more categories.|
| v1.1.21 |20240603| Added alias uc-qty. |
| v1.1.19 |20240602| Changed to umd for unpkg, and es for module. |

Contact

If you have any questions or feedback, feel free to contact me at don.wen@yahoo.com.
For more info, please visit:
AutoCalcs
AutoCalcs Docs and Library
Demo