physical-quantity 1.0.0 → 1.1.2

package/dist/pq.min.js

@@ -0,0 +1,54 @@
+class PhysicalQuantity extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.value=0,this.unit="mm",this.unitCategory="length",this.decimalPlaces=3,// Default decimal places
+this.units={length:["m","cm","mm","in","ft"],mass:["g","kg","lbm"]},this.unitConversion={length:{m:1,cm:.01,mm:.001,in:.0254,ft:12*.0254},
+// Add other category conversion factors as needed
+mass:{kg:1,g:.001,lbm:.454}},this.render()}static get observedAttributes(){return["value","unit","decimal-places"]}attributeChangedCallback(t,e,i){"value"===t?this.value=parseFloat(i):"unit"===t?(this.unit=i,this.unitCategory=this.getUnitCategory(i)):"decimal-places"===t&&(this.decimalPlaces=parseInt(i)||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))}disconnectedCallback(){this.shadowRoot.removeEventListener("change",this.handleUnitChange.bind(this))}handleArrowClick(t){t.target.closest(".unit-container")&&(t=this.shadowRoot.querySelector("select"))&&(t.focus(),t.click())}handleUnitChange(t){var e;"SELECT"===t.target.tagName&&(t=t.target.value,e=this.unitConversion[this.unitCategory][this.unit]/this.unitConversion[this.unitCategory][t],this.value=this.value*e,this.unit=t,this.render())}formatValue(t){// https://aistudio.google.com/app/prompts?state=%7B%22ids%22:%5B%221oNb_BksOrN-5hQ_5KjCxxYhMotx5gA-P%22%5D,%22action%22:%22open%22,%22userId%22:%22114169196047837137010%22,%22resourceKeys%22:%7B%7D%7D&usp=sharing
+return Number.isInteger(t)?t.toString():0!==Math.floor(t)?t.toFixed(this.decimalPlaces).replace(/0+$/,"").replace(/\.$/,""):t.toPrecision(3)}render(){this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          display: inline-block;
+        }
+        .quantity {
+          display: flex;
+          align-items: center;
+        }
+        .value {
+          margin-left: 0.25em;
+          margin-right: 0.25em;
+        }
+        .unit-container select {
+          position: relative;
+          display: inline-flex;
+          align-items: center;
+          color: blue;
+          background-color: lightgray;
+          border-radius: 0.25em;
+          border: none;
+          margin: 0.25em;
+          cursor: pointer;
+        }
+        
+        /* .unit-container::after {
+          content: "";
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-top: 8px solid blueviolet;
+          width: 0;
+          height: 0;
+        }  */
+        
+      </style>
+      
+      <div class="quantity">
+        <span class="value">${this.formatValue(this.value)}</span>
+        <div class="unit-container">
+          <select>
+            ${this.units[this.unitCategory].map(t=>`<option value="${t}" ${t===this.unit?"selected":""}>
+                ${t}</option>`).join("")}
+          </select>
+        </div>
+      </div>
+    `}}customElements.define("physical-quantity",PhysicalQuantity);

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "physical-quantity",
-  "version": "1.0.0",
+  "version": "1.1.2",
   "description": "A web component to represent a physical quantity with unit conversion.",
-  "main": "physical-quantity.js",
+  "main": "./dist/pq.min.js",
+  "files": [
+    "dist/"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

package/Log.md

@@ -1,10 +0,0 @@
-# 24011-PqWebComp
-
-### 20240526 Su
-Q: I would like to develop a cross framework (angular, react, Vue, web component, etc. ) html element with the following function:
-- it's a value-unit pair to represent a physical quantity , eg: "20 mm"
-- it will allow web page author to create a physical quantity as a measurement of a given unit;
-- when the html page is shown in browser , web visitor can click on the unit portion to show a drop down box allowing the user to switch to a different unit of the same unit category. Eg: for a length, the web page author created an quantity 25.4 mm. When the web visitor click on mm, it will show the drop down list of "m, cm, mm, in, ft, ...". The user can switch to "in", the the value will be changed to 1, thus the same quantity will be shown as "1 in". 
-Can you guide me to create this html element?
-
-GPT4o: 

package/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Physical Quantity Component</title>
-  <script src="./js/pq.js" defer></script>
-</head>
-<body>
-  <physical-quantity value="25.4" unit="mm"></physical-quantity>
-</body>
-</html>

package/js/pq.js

@@ -1,66 +0,0 @@
-class PhysicalQuantity extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-
-    this.units = {
-      length: {
-        mm: 1,
-        cm: 10,
-        m: 1000,
-        in: 25.4,
-        ft: 304.8,
-      },
-      // You can add more unit categories here
-    };
-
-    this.shadowRoot.innerHTML = `
-      <style>
-        :host {
-          display: inline-block;
-        }
-        input {
-          width: 50px;
-        }
-        select {
-          margin-left: 5px;
-        }
-      </style>
-      <input type="number" value="1">
-      <select>
-        ${Object.keys(this.units.length).map(unit => `<option value="${unit}">${unit}</option>`).join('')}
-      </select>
-    `;
-
-    this.input = this.shadowRoot.querySelector('input');
-    this.select = this.shadowRoot.querySelector('select');
-
-    this.input.addEventListener('input', () => this.updateValue());
-    this.select.addEventListener('change', () => this.updateUnit());
-  }
-
-  connectedCallback() {
-    this.value = this.getAttribute('value') || 1;
-    this.unit = this.getAttribute('unit') || 'mm';
-    this.input.value = this.value;
-    this.select.value = this.unit;
-  }
-
-  updateValue() {
-    this.value = this.input.value;
-  }
-
-  updateUnit() {
-    const oldUnit = this.unit;
-    const newUnit = this.select.value;
-
-    // Convert value to the new unit
-    this.value = (this.value * this.units.length[oldUnit]) / this.units.length[newUnit];
-    this.unit = newUnit;
-
-    // Update the input value to reflect the new unit
-    this.input.value = this.value;
-  }
-}
-
-customElements.define('physical-quantity', PhysicalQuantity);