@dmitryvim/form-builder 0.2.13 → 0.2.15

package/dist/esm/index.js

@@ -891,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%);
@@ -905,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;
@@ -963,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);
@@ -1014,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);
@@ -1575,8 +1567,7 @@ function renderLocalVideoPreview(container, file, videoType, resourceId, state,
   }
   newContainer.innerHTML = `
     <div class="relative group h-full">
-      <video class="w-full h-full object-contain" controls preload="auto" muted>
-        <source src="${videoUrl}" type="${videoType}">
+      <video class="w-full h-full object-contain" controls preload="auto" muted src="${videoUrl}">
         ${escapeHtml(t("videoNotSupported", state))}
       </video>
       <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 flex gap-1">
@@ -1637,16 +1628,13 @@ function handleVideoDelete(container, resourceId, state, deps) {
     </div>
   `;
 }
-function renderUploadedVideoPreview(container, thumbnailUrl, videoType, state) {
+function renderUploadedVideoPreview(container, thumbnailUrl, _videoType, state) {
   const video = document.createElement("video");
   video.className = "w-full h-full object-contain";
   video.controls = true;
   video.preload = "metadata";
   video.muted = true;
-  const source = document.createElement("source");
-  source.src = thumbnailUrl;
-  source.type = videoType;
-  video.appendChild(source);
+  video.src = thumbnailUrl;
   video.appendChild(
     document.createTextNode(t("videoNotSupported", state))
   );
@@ -1796,8 +1784,7 @@ async function renderFilePreviewReadonly(resourceId, state, fileName) {
         if (videoUrl) {
           previewContainer.innerHTML = `
             <div class="relative group">
-              <video class="w-full h-auto" controls preload="auto" muted>
-                <source src="${videoUrl}" type="${meta?.type || "video/mp4"}">
+              <video class="w-full h-auto" controls preload="auto" muted src="${videoUrl}">
                 ${escapeHtml(t("videoNotSupported", state))}
               </video>
               <div class="absolute inset-0 bg-black bg-opacity-20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center pointer-events-none">
@@ -2019,8 +2006,7 @@ async function renderThumbnailForResource(slot, rid, meta, state) {
       const videoUrl = URL.createObjectURL(meta.file);
       slot.innerHTML = `
         <div class="relative group h-full w-full">
-          <video class="w-full h-full object-contain" preload="metadata" muted>
-            <source src="${videoUrl}" type="${meta.type}">
+          <video class="w-full h-full object-contain" preload="metadata" muted src="${videoUrl}">
           </video>
           <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
             <div class="bg-white bg-opacity-90 rounded-full p-1">
@@ -2037,8 +2023,7 @@ async function renderThumbnailForResource(slot, rid, meta, state) {
         if (videoUrl) {
           slot.innerHTML = `
             <div class="relative group h-full w-full">
-              <video class="w-full h-full object-contain" preload="metadata" muted>
-                <source src="${videoUrl}" type="${meta.type}">
+              <video class="w-full h-full object-contain" preload="metadata" muted src="${videoUrl}">
               </video>
               <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
                 <div class="bg-white bg-opacity-90 rounded-full p-1">