@dmitryvim/form-builder 0.2.12 → 0.2.14

package/dist/esm/index.js

@@ -56,13 +56,6 @@ function addFormatHint(element, parts, state) {
     );
   }
 }
-function addRequiredHint(element, parts, state) {
-  if (element.required) {
-    parts.push(t("hintRequired", state));
-  } else {
-    parts.push(t("hintOptional", state));
-  }
-}
 function addPatternHint(element, parts, state) {
   if (element.pattern) {
     parts.push(t("hintPattern", state, { pattern: element.pattern }));
@@ -70,7 +63,6 @@ function addPatternHint(element, parts, state) {
 }
 function makeFieldHint(element, state) {
   const parts = [];
-  addRequiredHint(element, parts, state);
   addLengthHint(element, parts, state);
   if (element.type !== "slider") {
     addRangeHint(element, parts, state);
@@ -899,10 +891,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%);
@@ -913,38 +905,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;
@@ -971,7 +955,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);
@@ -1022,7 +1006,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);
@@ -1294,10 +1278,12 @@ function renderSelectElement(element, ctx, wrapper, pathKey) {
     selectInput.addEventListener("change", handleChange);
   }
   wrapper.appendChild(selectInput);
-  const selectHint = document.createElement("p");
-  selectHint.className = "text-xs text-gray-500 mt-1";
-  selectHint.textContent = makeFieldHint(element, state);
-  wrapper.appendChild(selectHint);
+  if (!state.config.readonly) {
+    const selectHint = document.createElement("p");
+    selectHint.className = "text-xs text-gray-500 mt-1";
+    selectHint.textContent = makeFieldHint(element, state);
+    wrapper.appendChild(selectHint);
+  }
 }
 function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
@@ -1430,10 +1416,12 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
   values.forEach((value) => addSelectItem(value));
   updateAddButton();
   updateRemoveButtons();
-  const hint = document.createElement("p");
-  hint.className = "text-xs text-gray-500 mt-1";
-  hint.textContent = makeFieldHint(element, state);
-  wrapper.appendChild(hint);
+  if (!state.config.readonly) {
+    const hint = document.createElement("p");
+    hint.className = "text-xs text-gray-500 mt-1";
+    hint.textContent = makeFieldHint(element, state);
+    wrapper.appendChild(hint);
+  }
 }
 function validateSelectElement(element, key, context) {
   const errors = [];
@@ -2859,14 +2847,16 @@ function renderColourElement(element, ctx, wrapper, pathKey) {
     const editUI = createEditColourUI(initialValue, pathKey, ctx);
     wrapper.appendChild(editUI);
   }
-  const colourHint = document.createElement("p");
-  colourHint.className = "mt-1";
-  colourHint.style.cssText = `
-    font-size: var(--fb-font-size-small);
-    color: var(--fb-text-secondary-color);
-  `;
-  colourHint.textContent = makeFieldHint(element, state);
-  wrapper.appendChild(colourHint);
+  if (!state.config.readonly) {
+    const colourHint = document.createElement("p");
+    colourHint.className = "mt-1";
+    colourHint.style.cssText = `
+      font-size: var(--fb-font-size-small);
+      color: var(--fb-text-secondary-color);
+    `;
+    colourHint.textContent = makeFieldHint(element, state);
+    wrapper.appendChild(colourHint);
+  }
 }
 function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
@@ -3004,14 +2994,16 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
   values.forEach((value) => addColourItem(value));
   updateAddButton();
   updateRemoveButtons();
-  const hint = document.createElement("p");
-  hint.className = "mt-1";
-  hint.style.cssText = `
-    font-size: var(--fb-font-size-small);
-    color: var(--fb-text-secondary-color);
-  `;
-  hint.textContent = makeFieldHint(element, state);
-  wrapper.appendChild(hint);
+  if (!state.config.readonly) {
+    const hint = document.createElement("p");
+    hint.className = "mt-1";
+    hint.style.cssText = `
+      font-size: var(--fb-font-size-small);
+      color: var(--fb-text-secondary-color);
+    `;
+    hint.textContent = makeFieldHint(element, state);
+    wrapper.appendChild(hint);
+  }
 }
 function validateColourElement(element, key, context) {
   const errors = [];
@@ -3323,14 +3315,16 @@ function renderSliderElement(element, ctx, wrapper, pathKey) {
     state.config.readonly
   );
   wrapper.appendChild(sliderUI);
-  const hint = document.createElement("p");
-  hint.className = "mt-1";
-  hint.style.cssText = `
-    font-size: var(--fb-font-size-small);
-    color: var(--fb-text-secondary-color);
-  `;
-  hint.textContent = makeFieldHint(element, state);
-  wrapper.appendChild(hint);
+  if (!state.config.readonly) {
+    const hint = document.createElement("p");
+    hint.className = "mt-1";
+    hint.style.cssText = `
+      font-size: var(--fb-font-size-small);
+      color: var(--fb-text-secondary-color);
+    `;
+    hint.textContent = makeFieldHint(element, state);
+    wrapper.appendChild(hint);
+  }
 }
 function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
   if (element.min === void 0 || element.min === null) {
@@ -3479,14 +3473,16 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
   values.forEach((value) => addSliderItem(value));
   updateAddButton();
   updateRemoveButtons();
-  const hint = document.createElement("p");
-  hint.className = "mt-1";
-  hint.style.cssText = `
-    font-size: var(--fb-font-size-small);
-    color: var(--fb-text-secondary-color);
-  `;
-  hint.textContent = makeFieldHint(element, state);
-  wrapper.appendChild(hint);
+  if (!state.config.readonly) {
+    const hint = document.createElement("p");
+    hint.className = "mt-1";
+    hint.style.cssText = `
+      font-size: var(--fb-font-size-small);
+      color: var(--fb-text-secondary-color);
+    `;
+    hint.textContent = makeFieldHint(element, state);
+    wrapper.appendChild(hint);
+  }
 }
 function validateSliderElement(element, key, context) {
   const errors = [];