@dmitryvim/form-builder 0.2.17 → 0.2.18

package/dist/esm/index.js

@@ -719,6 +719,21 @@ function updateTextField(element, fieldPath, value, context) {
 }
 
 // src/components/textarea.ts
+function applyAutoExpand(textarea) {
+  textarea.style.overflow = "hidden";
+  textarea.style.resize = "none";
+  const lineCount = (textarea.value.match(/\n/g) || []).length + 1;
+  textarea.rows = Math.max(1, lineCount);
+  const resize = () => {
+    if (!textarea.isConnected) return;
+    textarea.style.height = "0";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  };
+  textarea.addEventListener("input", resize);
+  setTimeout(() => {
+    if (textarea.isConnected) resize();
+  }, 0);
+}
 function renderTextareaElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const textareaWrapper = document.createElement("div");
@@ -739,6 +754,9 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
     textareaInput.addEventListener("blur", handleChange);
     textareaInput.addEventListener("input", handleChange);
   }
+  if (element.autoExpand || state.config.readonly) {
+    applyAutoExpand(textareaInput);
+  }
   textareaWrapper.appendChild(textareaInput);
   if (!state.config.readonly && (element.minLength != null || element.maxLength != null)) {
     const counter = createCharCounter(element, textareaInput, true);
@@ -787,6 +805,9 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       textareaInput.addEventListener("blur", handleChange);
       textareaInput.addEventListener("input", handleChange);
     }
+    if (element.autoExpand || state.config.readonly) {
+      applyAutoExpand(textareaInput);
+    }
     textareaContainer.appendChild(textareaInput);
     if (!state.config.readonly && (element.minLength != null || element.maxLength != null)) {
       const counter = createCharCounter(element, textareaInput, true);
@@ -888,6 +909,24 @@ function validateTextareaElement(element, key, context) {
 }
 function updateTextareaField(element, fieldPath, value, context) {
   updateTextField(element, fieldPath, value, context);
+  const { scopeRoot, state } = context;
+  const shouldAutoExpand = element.autoExpand || state.config.readonly;
+  if (!shouldAutoExpand) return;
+  if (element.multiple) {
+    const textareas = scopeRoot.querySelectorAll(
+      `textarea[name^="${fieldPath}["]`
+    );
+    textareas.forEach((textarea) => {
+      textarea.dispatchEvent(new Event("input"));
+    });
+  } else {
+    const textarea = scopeRoot.querySelector(
+      `textarea[name="${fieldPath}"]`
+    );
+    if (textarea) {
+      textarea.dispatchEvent(new Event("input"));
+    }
+  }
 }
 
 // src/components/number.ts
@@ -1546,6 +1585,421 @@ function updateSelectField(element, fieldPath, value, context) {
   }
 }
 
+// src/components/switcher.ts
+function applySelectedStyle(btn) {
+  btn.style.backgroundColor = "var(--fb-primary-color)";
+  btn.style.color = "#ffffff";
+  btn.style.borderColor = "var(--fb-primary-color)";
+}
+function applyUnselectedStyle(btn) {
+  btn.style.backgroundColor = "transparent";
+  btn.style.color = "var(--fb-text-color)";
+  btn.style.borderColor = "var(--fb-border-color)";
+}
+function buildSegmentedGroup(element, currentValue, hiddenInput, readonly, onChange) {
+  const options = element.options || [];
+  const group = document.createElement("div");
+  group.className = "fb-switcher-group";
+  group.style.cssText = `
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  `;
+  const buttons = [];
+  options.forEach((option, index) => {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "fb-switcher-btn";
+    btn.dataset.value = option.value;
+    btn.textContent = option.label;
+    btn.style.cssText = `
+      padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
+      font-size: var(--fb-font-size);
+      border-width: var(--fb-border-width);
+      border-style: solid;
+      cursor: ${readonly ? "default" : "pointer"};
+      transition: background-color var(--fb-transition-duration), color var(--fb-transition-duration), border-color var(--fb-transition-duration);
+      white-space: nowrap;
+      line-height: 1.25;
+      outline: none;
+    `;
+    if (options.length === 1) {
+      btn.style.borderRadius = "var(--fb-border-radius)";
+    } else if (index === 0) {
+      btn.style.borderRadius = "var(--fb-border-radius) 0 0 var(--fb-border-radius)";
+      btn.style.borderRightWidth = "0";
+    } else if (index === options.length - 1) {
+      btn.style.borderRadius = "0 var(--fb-border-radius) var(--fb-border-radius) 0";
+    } else {
+      btn.style.borderRadius = "0";
+      btn.style.borderRightWidth = "0";
+    }
+    if (option.value === currentValue) {
+      applySelectedStyle(btn);
+    } else {
+      applyUnselectedStyle(btn);
+    }
+    if (!readonly) {
+      btn.addEventListener("click", () => {
+        hiddenInput.value = option.value;
+        buttons.forEach((b) => {
+          if (b.dataset.value === option.value) {
+            applySelectedStyle(b);
+          } else {
+            applyUnselectedStyle(b);
+          }
+        });
+        if (onChange) {
+          onChange(option.value);
+        }
+      });
+      btn.addEventListener("mouseenter", () => {
+        if (hiddenInput.value !== option.value) {
+          btn.style.backgroundColor = "var(--fb-background-hover-color)";
+        }
+      });
+      btn.addEventListener("mouseleave", () => {
+        if (hiddenInput.value !== option.value) {
+          btn.style.backgroundColor = "transparent";
+        }
+      });
+    }
+    buttons.push(btn);
+    group.appendChild(btn);
+  });
+  return group;
+}
+function renderSwitcherElement(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  const initialValue = String(ctx.prefill[element.key] ?? element.default ?? "");
+  const hiddenInput = document.createElement("input");
+  hiddenInput.type = "hidden";
+  hiddenInput.name = pathKey;
+  hiddenInput.value = initialValue;
+  const readonly = state.config.readonly;
+  const onChange = !readonly && ctx.instance ? (value) => {
+    ctx.instance.triggerOnChange(pathKey, value);
+  } : null;
+  const group = buildSegmentedGroup(
+    element,
+    initialValue,
+    hiddenInput,
+    readonly,
+    onChange
+  );
+  wrapper.appendChild(hiddenInput);
+  wrapper.appendChild(group);
+  if (!readonly) {
+    const hint = document.createElement("p");
+    hint.className = "text-xs text-gray-500 mt-1";
+    hint.textContent = makeFieldHint(element, state);
+    wrapper.appendChild(hint);
+  }
+}
+function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  const prefillValues = ctx.prefill[element.key] || [];
+  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
+  const minCount = element.minCount ?? 1;
+  const maxCount = element.maxCount ?? Infinity;
+  while (values.length < minCount) {
+    values.push(element.default || element.options?.[0]?.value || "");
+  }
+  const readonly = state.config.readonly;
+  const container = document.createElement("div");
+  container.className = "space-y-2";
+  wrapper.appendChild(container);
+  function updateIndices() {
+    const items = container.querySelectorAll(".multiple-switcher-item");
+    items.forEach((item, index) => {
+      const input = item.querySelector("input[type=hidden]");
+      if (input) {
+        input.name = `${pathKey}[${index}]`;
+      }
+    });
+  }
+  function addSwitcherItem(value = "", index = -1) {
+    const currentIndex = index === -1 ? container.children.length : index;
+    const itemPathKey = `${pathKey}[${currentIndex}]`;
+    const itemWrapper = document.createElement("div");
+    itemWrapper.className = "multiple-switcher-item flex items-center gap-2";
+    const hiddenInput = document.createElement("input");
+    hiddenInput.type = "hidden";
+    hiddenInput.name = itemPathKey;
+    hiddenInput.value = value;
+    itemWrapper.appendChild(hiddenInput);
+    const onChange = !readonly && ctx.instance ? (val) => {
+      ctx.instance.triggerOnChange(hiddenInput.name, val);
+    } : null;
+    const group = buildSegmentedGroup(
+      element,
+      value,
+      hiddenInput,
+      readonly,
+      onChange
+    );
+    itemWrapper.appendChild(group);
+    if (index === -1) {
+      container.appendChild(itemWrapper);
+    } else {
+      container.insertBefore(itemWrapper, container.children[index]);
+    }
+    updateIndices();
+    return itemWrapper;
+  }
+  function updateRemoveButtons() {
+    if (readonly) return;
+    const items = container.querySelectorAll(".multiple-switcher-item");
+    const currentCount = items.length;
+    items.forEach((item) => {
+      let removeBtn = item.querySelector(
+        ".remove-item-btn"
+      );
+      if (!removeBtn) {
+        removeBtn = document.createElement("button");
+        removeBtn.type = "button";
+        removeBtn.className = "remove-item-btn px-2 py-1 rounded";
+        removeBtn.style.cssText = `
+          color: var(--fb-error-color);
+          background-color: transparent;
+          transition: background-color var(--fb-transition-duration);
+        `;
+        removeBtn.innerHTML = "\u2715";
+        removeBtn.addEventListener("mouseenter", () => {
+          removeBtn.style.backgroundColor = "var(--fb-background-hover-color)";
+        });
+        removeBtn.addEventListener("mouseleave", () => {
+          removeBtn.style.backgroundColor = "transparent";
+        });
+        removeBtn.onclick = () => {
+          const currentIndex = Array.from(container.children).indexOf(
+            item
+          );
+          if (container.children.length > minCount) {
+            values.splice(currentIndex, 1);
+            item.remove();
+            updateIndices();
+            updateAddButton();
+            updateRemoveButtons();
+          }
+        };
+        item.appendChild(removeBtn);
+      }
+      const disabled = currentCount <= minCount;
+      removeBtn.disabled = disabled;
+      removeBtn.style.opacity = disabled ? "0.5" : "1";
+      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
+    });
+  }
+  let addRow = null;
+  let countDisplay = null;
+  if (!readonly) {
+    addRow = document.createElement("div");
+    addRow.className = "flex items-center gap-3 mt-2";
+    const addBtn = document.createElement("button");
+    addBtn.type = "button";
+    addBtn.className = "add-switcher-btn px-3 py-1 rounded";
+    addBtn.style.cssText = `
+      color: var(--fb-primary-color);
+      border: var(--fb-border-width) solid var(--fb-primary-color);
+      background-color: transparent;
+      font-size: var(--fb-font-size);
+      transition: all var(--fb-transition-duration);
+    `;
+    addBtn.textContent = "+";
+    addBtn.addEventListener("mouseenter", () => {
+      addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
+    });
+    addBtn.addEventListener("mouseleave", () => {
+      addBtn.style.backgroundColor = "transparent";
+    });
+    addBtn.onclick = () => {
+      const defaultValue = element.default || element.options?.[0]?.value || "";
+      values.push(defaultValue);
+      addSwitcherItem(defaultValue);
+      updateAddButton();
+      updateRemoveButtons();
+    };
+    countDisplay = document.createElement("span");
+    countDisplay.className = "text-sm text-gray-500";
+    addRow.appendChild(addBtn);
+    addRow.appendChild(countDisplay);
+    wrapper.appendChild(addRow);
+  }
+  function updateAddButton() {
+    if (!addRow || !countDisplay) return;
+    const addBtn = addRow.querySelector(
+      ".add-switcher-btn"
+    );
+    if (addBtn) {
+      const disabled = values.length >= maxCount;
+      addBtn.disabled = disabled;
+      addBtn.style.opacity = disabled ? "0.5" : "1";
+      addBtn.style.pointerEvents = disabled ? "none" : "auto";
+    }
+    countDisplay.textContent = `${values.length}/${maxCount === Infinity ? "\u221E" : maxCount}`;
+  }
+  values.forEach((value) => addSwitcherItem(value));
+  updateAddButton();
+  updateRemoveButtons();
+  if (!readonly) {
+    const hint = document.createElement("p");
+    hint.className = "text-xs text-gray-500 mt-1";
+    hint.textContent = makeFieldHint(element, state);
+    wrapper.appendChild(hint);
+  }
+}
+function validateSwitcherElement(element, key, context) {
+  const errors = [];
+  const { scopeRoot, skipValidation } = context;
+  const markValidity = (input, errorMessage) => {
+    if (!input) return;
+    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
+    let errorElement = document.getElementById(errorId);
+    if (errorMessage) {
+      input.classList.add("invalid");
+      input.title = errorMessage;
+      if (!errorElement) {
+        errorElement = document.createElement("div");
+        errorElement.id = errorId;
+        errorElement.className = "error-message";
+        errorElement.style.cssText = `
+          color: var(--fb-error-color);
+          font-size: var(--fb-font-size-small);
+          margin-top: 0.25rem;
+        `;
+        if (input.nextSibling) {
+          input.parentNode?.insertBefore(errorElement, input.nextSibling);
+        } else {
+          input.parentNode?.appendChild(errorElement);
+        }
+      }
+      errorElement.textContent = errorMessage;
+      errorElement.style.display = "block";
+    } else {
+      input.classList.remove("invalid");
+      input.title = "";
+      if (errorElement) {
+        errorElement.remove();
+      }
+    }
+  };
+  const validateMultipleCount = (fieldKey, values, el, filterFn) => {
+    if (skipValidation) return;
+    const { state } = context;
+    const filteredValues = values.filter(filterFn);
+    const minCount = "minCount" in el ? el.minCount ?? 1 : 1;
+    const maxCount = "maxCount" in el ? el.maxCount ?? Infinity : Infinity;
+    if (el.required && filteredValues.length === 0) {
+      errors.push(`${fieldKey}: ${t("required", state)}`);
+    }
+    if (filteredValues.length < minCount) {
+      errors.push(`${fieldKey}: ${t("minItems", state, { min: minCount })}`);
+    }
+    if (filteredValues.length > maxCount) {
+      errors.push(`${fieldKey}: ${t("maxItems", state, { max: maxCount })}`);
+    }
+  };
+  const validOptionValues = new Set(
+    "options" in element ? element.options.map((o) => o.value) : []
+  );
+  if ("multiple" in element && element.multiple) {
+    const inputs = scopeRoot.querySelectorAll(
+      `input[type="hidden"][name^="${key}["]`
+    );
+    const values = [];
+    inputs.forEach((input) => {
+      const val = input?.value ?? "";
+      values.push(val);
+      if (!skipValidation && val !== "" && !validOptionValues.has(val)) {
+        const msg = t("invalidOption", context.state);
+        markValidity(input, msg);
+        errors.push(`${key}: ${msg}`);
+      } else {
+        markValidity(input, null);
+      }
+    });
+    validateMultipleCount(key, values, element, (v) => v !== "");
+    return { value: values, errors };
+  } else {
+    const input = scopeRoot.querySelector(
+      `input[type="hidden"][name$="${key}"]`
+    );
+    const val = input?.value ?? "";
+    if (!skipValidation && element.required && val === "") {
+      const msg = t("required", context.state);
+      errors.push(`${key}: ${msg}`);
+      markValidity(input, msg);
+      return { value: null, errors };
+    }
+    if (!skipValidation && val !== "" && !validOptionValues.has(val)) {
+      const msg = t("invalidOption", context.state);
+      errors.push(`${key}: ${msg}`);
+      markValidity(input, msg);
+      return { value: null, errors };
+    }
+    markValidity(input, null);
+    return { value: val === "" ? null : val, errors };
+  }
+}
+function updateSwitcherField(element, fieldPath, value, context) {
+  const { scopeRoot } = context;
+  if ("multiple" in element && element.multiple) {
+    if (!Array.isArray(value)) {
+      console.warn(
+        `updateSwitcherField: Expected array for multiple field "${fieldPath}", got ${typeof value}`
+      );
+      return;
+    }
+    const inputs = scopeRoot.querySelectorAll(
+      `input[type="hidden"][name^="${fieldPath}["]`
+    );
+    inputs.forEach((input, index) => {
+      if (index < value.length) {
+        const newVal = value[index] != null ? String(value[index]) : "";
+        input.value = newVal;
+        const group = input.parentElement?.querySelector(".fb-switcher-group");
+        if (group) {
+          group.querySelectorAll(".fb-switcher-btn").forEach((btn) => {
+            if (btn.dataset.value === newVal) {
+              applySelectedStyle(btn);
+            } else {
+              applyUnselectedStyle(btn);
+            }
+          });
+        }
+        input.classList.remove("invalid");
+        input.title = "";
+      }
+    });
+    if (value.length !== inputs.length) {
+      console.warn(
+        `updateSwitcherField: Multiple field "${fieldPath}" has ${inputs.length} inputs but received ${value.length} values. Consider re-rendering for add/remove.`
+      );
+    }
+  } else {
+    const input = scopeRoot.querySelector(
+      `input[type="hidden"][name="${fieldPath}"]`
+    );
+    if (input) {
+      const newVal = value != null ? String(value) : "";
+      input.value = newVal;
+      const group = input.parentElement?.querySelector(".fb-switcher-group");
+      if (group) {
+        group.querySelectorAll(".fb-switcher-btn").forEach((btn) => {
+          if (btn.dataset.value === newVal) {
+            applySelectedStyle(btn);
+          } else {
+            applyUnselectedStyle(btn);
+          }
+        });
+      }
+      input.classList.remove("invalid");
+      input.title = "";
+    }
+  }
+}
+
 // src/components/file.ts
 function renderLocalImagePreview(container, file, fileName, state) {
   const img = document.createElement("img");
@@ -4558,6 +5012,13 @@ function dispatchToRenderer(element, ctx, wrapper, pathKey) {
         renderSelectElement(element, ctx, wrapper, pathKey);
       }
       break;
+    case "switcher":
+      if (isMultiple) {
+        renderMultipleSwitcherElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderSwitcherElement(element, ctx, wrapper, pathKey);
+      }
+      break;
     case "file":
       if (isMultiple) {
         renderMultipleFileElement(element, ctx, wrapper, pathKey);
@@ -4681,7 +5142,8 @@ var defaultConfig = {
       invalidHexColour: "Invalid hex color",
       minFiles: "Minimum {min} files required",
       maxFiles: "Maximum {max} files allowed",
-      unsupportedFieldType: "Unsupported field type: {type}"
+      unsupportedFieldType: "Unsupported field type: {type}",
+      invalidOption: "Invalid option"
     },
     ru: {
       // UI texts
@@ -4726,7 +5188,8 @@ var defaultConfig = {
       invalidHexColour: "\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u0444\u043E\u0440\u043C\u0430\u0442 \u0446\u0432\u0435\u0442\u0430",
       minFiles: "\u041C\u0438\u043D\u0438\u043C\u0443\u043C {min} \u0444\u0430\u0439\u043B\u043E\u0432",
       maxFiles: "\u041C\u0430\u043A\u0441\u0438\u043C\u0443\u043C {max} \u0444\u0430\u0439\u043B\u043E\u0432",
-      unsupportedFieldType: "\u041D\u0435\u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u0442\u0438\u043F \u043F\u043E\u043B\u044F: {type}"
+      unsupportedFieldType: "\u041D\u0435\u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u0442\u0438\u043F \u043F\u043E\u043B\u044F: {type}",
+      invalidOption: "\u041D\u0435\u0434\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435"
     }
   },
   theme: {}
@@ -4971,6 +5434,10 @@ var componentRegistry = {
     validate: validateSelectElement,
     update: updateSelectField
   },
+  switcher: {
+    validate: validateSwitcherElement,
+    update: updateSwitcherField
+  },
   file: {
     validate: validateFileElement,
     update: updateFileField