@dmitryvim/form-builder 0.2.12 → 0.2.13

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);
@@ -1294,10 +1286,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 +1424,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 +2855,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 +3002,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 +3323,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 +3481,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 = [];