wip

src/EditText/EditText.js

@@ -1,11 +1,12 @@
-import {KeyCode} from "../utils.js";
+import {KeyCode, roundToDecimalPlaces} from "../utils.js";
 
 export default class EditText extends HTMLElement {
     #children;
     #isValid = true;
     #lastEnteredValue;
     #suffix = "";
     #prefix = "";
+    #displayTextTransformer = (value) => value;
 
     #resizeObserver = new ResizeObserver(this.#updatePopupPosition.bind(this));
 
@@ -30,10 +31,6 @@ export default class EditText extends HTMLElement {
         this.#resizeObserver.unobserve(document.body);
     }
 
-    value() {
-        return this.getAttribute("value");
-    }
-
     onChange(cb){
         this.#callbacks.onChangeValue.push(cb);
     }
@@ -42,8 +39,20 @@ export default class EditText extends HTMLElement {
         return this.#children.input.checkValidity();
     }
 
+    get value() {
+        return this.#children.input.rawValue;
+    }
+
+    set displayTextTransformer(f) {
+        this.#displayTextTransformer = f;
+    }
+
+    #getValueAttr() {
+        return this.getAttribute("value");
+    }
+
     #getDisplayName(){
-        let val = this.value();
+        let val = this.#displayTextTransformer(this.#getValueAttr());
         if (this.#isNumberType())
             val = +val;
         return `${this.#prefix}${val}${this.#suffix}`
@@ -65,7 +74,7 @@ export default class EditText extends HTMLElement {
         this.#updatePopupPosition();
         this.#children.popup.showModal();
         this.#children.input.focus();
-        this.#children.input.style.width = this.#children.input.rawValue.length + 3 + "ch";
+        this.#findWidth(this.#children.input, this.#children.input.rawValue);
     }
 
     #onInput(_, isValid) {
@@ -94,9 +103,9 @@ export default class EditText extends HTMLElement {
     }
 
     #updateDisplayTextAndNotifyIfChanged() {
-        if (this.value() !== this.#children.input.value && this.#children.input.value.length){
+        if (this.#getValueAttr() !== this.#children.input.value && this.#children.input.value.length){
             this.#updateTextValue();
-            this.#callbacks.onChangeValue.forEach(cb => cb(this.value()));
+            this.#callbacks.onChangeValue.forEach(cb => cb(this.#getValueAttr()));
         }
         const value = this.#children.input.rawValue;
         if (value.length === 0 && !this.#children.input.hasAttribute("required")) {
@@ -140,12 +149,31 @@ export default class EditText extends HTMLElement {
         return this.getAttribute("type") === "number"
     }
 
+    #findWidth(element, text){
+        // Создаем временный элемент, чтобы измерить ширину текста
+        var tempElement = document.createElement("span");
+        tempElement.textContent = text;
+        tempElement.style.visibility = "hidden"; // Делаем невидимым временный элемент
+        document.body.appendChild(tempElement);
+
+        // Измеряем ширину текста
+        var textWidth = tempElement.offsetWidth;
+
+        // Устанавливаем ширину элемента
+        element.style.width = textWidth + 30 + "px";
+
+        // Удаляем временный элемент
+        document.body.removeChild(tempElement);
+    }
+
     #initAttributes(){
         if (this.hasAttribute("suffix"))
             this.#suffix = this.getAttribute("suffix");
         if (this.hasAttribute("prefix"))
             this.#prefix = this.getAttribute("prefix");
-        this.#children.input.value = this.value();
+        this.#children.input.value = this.#getValueAttr();
+        if(this.hasAttribute("scale"))
+            this.displayTextTransformer = (text) => roundToDecimalPlaces(text, this.getAttribute("scale"));
     }
 
     #htmlTemplate() {

src/EditText/EditText.scss

@@ -1,10 +1,13 @@
+edit-text {
+  display: inline-block;
+}
+
 .edit-text__popup {
   box-shadow: var(--box-shadow);
   position: absolute;
   padding: 0;
   border: none;
   margin: -0.7rem 0 0 -0.75rem;
-  width: fit-content;
 }
 
 .edit-text__popup text-input {

src/utils.js

@@ -60,4 +60,15 @@ export function isFiniteNumber (value) {
         return true
     }
    else return false
+}
+
+/**
+ * Function that rounds a number to a specified number of decimal places.
+ * @param {number} number
+ * @param {number} decimalPlaces
+ * @return {number}
+ */
+export function roundToDecimalPlaces(number, decimalPlaces) {
+    const multiplier = Math.pow(10, decimalPlaces);
+    return Math.round(number * multiplier) / multiplier;
 }