@dmitryvim/form-builder 0.2.13 → 0.2.14

package/dist/cjs/index.cjs

@@ -902,10 +902,10 @@ function updateTextareaField(element, fieldPath, value, context) {
 }
 
 // src/components/number.ts
-function createNumberCounter(element, input) {
-  const counter = document.createElement("span");
-  counter.className = "number-counter";
-  counter.style.cssText = `
+function createNumberRangeHint(element, input) {
+  const hint = document.createElement("span");
+  hint.className = "number-range-hint";
+  hint.style.cssText = `
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -916,38 +916,30 @@ function createNumberCounter(element, input) {
     background: var(--fb-background-color);
     padding: 0 4px;
   `;
-  const updateCounter = () => {
+  const min = element.min;
+  const max = element.max;
+  let rangeText = "";
+  if (min != null && max != null) {
+    rangeText = `${min} \u2013 ${max}`;
+  } else if (max != null) {
+    rangeText = `\u2264${max}`;
+  } else if (min != null) {
+    rangeText = `\u2265${min}`;
+  }
+  hint.textContent = rangeText;
+  const updateColor = () => {
     const val = input.value ? parseFloat(input.value) : null;
-    const min = element.min;
-    const max = element.max;
-    if (min == null && max == null) {
-      counter.textContent = "";
-      return;
-    }
-    if (val == null || min != null && val < min) {
-      if (min != null && max != null) {
-        counter.textContent = `${min}-${max}`;
-      } else if (max != null) {
-        counter.textContent = `\u2264${max}`;
-      } else if (min != null) {
-        counter.textContent = `\u2265${min}`;
-      }
-      counter.style.color = "var(--fb-text-secondary-color)";
-    } else if (max != null && val > max) {
-      counter.textContent = `${val}/${max}`;
-      counter.style.color = "var(--fb-error-color)";
+    if (val != null) {
+      const belowMin = min != null && val < min;
+      const aboveMax = max != null && val > max;
+      hint.style.color = belowMin || aboveMax ? "var(--fb-error-color)" : "var(--fb-text-secondary-color)";
     } else {
-      if (max != null) {
-        counter.textContent = `${val}/${max}`;
-      } else {
-        counter.textContent = `${val}`;
-      }
-      counter.style.color = "var(--fb-text-secondary-color)";
+      hint.style.color = "var(--fb-text-secondary-color)";
     }
   };
-  input.addEventListener("input", updateCounter);
-  updateCounter();
-  return counter;
+  input.addEventListener("input", updateColor);
+  updateColor();
+  return hint;
 }
 function renderNumberElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
@@ -974,7 +966,7 @@ function renderNumberElement(element, ctx, wrapper, pathKey) {
   }
   inputWrapper.appendChild(numberInput);
   if (!state.config.readonly && (element.min != null || element.max != null)) {
-    const counter = createNumberCounter(element, numberInput);
+    const counter = createNumberRangeHint(element, numberInput);
     inputWrapper.appendChild(counter);
   }
   wrapper.appendChild(inputWrapper);
@@ -1026,7 +1018,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
     }
     inputContainer.appendChild(numberInput);
     if (!state.config.readonly && (element.min != null || element.max != null)) {
-      const counter = createNumberCounter(element, numberInput);
+      const counter = createNumberRangeHint(element, numberInput);
       inputContainer.appendChild(counter);
     }
     itemWrapper.appendChild(inputContainer);