@icen.ai/ui 0.3.0 → 0.5.0

package/dist/behaviors/input.mjs

@@ -1,7 +1,16 @@
 // src/behaviors/input.ts
+var isComposing = false;
+if (typeof document !== "undefined") {
+  document.addEventListener("compositionstart", () => {
+    isComposing = true;
+  });
+  document.addEventListener("compositionend", () => {
+    isComposing = false;
+  });
+}
 function setupClear(wrap) {
   const btn = wrap.querySelector(".input-clear");
-  const field = wrap.querySelector("input.input");
+  const field = wrap.querySelector("input.input, textarea.textarea");
   if (!btn || !field) return;
   btn.addEventListener("click", () => {
     field.value = "";
@@ -43,6 +52,140 @@ function setupAutosize(ta) {
   ta.addEventListener("input", () => resizeTextarea(ta));
   resizeTextarea(ta);
 }
+function setupCounter(field) {
+  const maxAttr = field.getAttribute("maxlength");
+  const dataCount = field.getAttribute("data-count");
+  if (!maxAttr && dataCount === null) return;
+  const max = maxAttr ? Number(maxAttr) : 0;
+  let counter = null;
+  const wrap = field.closest(".input-wrap, .textarea-wrap");
+  if (wrap) {
+    counter = wrap.querySelector(".input-counter");
+    if (!counter) {
+      counter = document.createElement("span");
+      counter.className = "input-counter";
+      wrap.appendChild(counter);
+      if (wrap.classList.contains("input-wrap")) {
+        wrap.classList.add("input-wrap--has-counter");
+      }
+    }
+  }
+  const counterEl = counter;
+  if (!counterEl) return;
+  function update() {
+    const len = field.value.length;
+    counterEl.textContent = max > 0 ? `${len} / ${max}` : `${len}`;
+    counterEl.classList.remove("is-warn", "is-error");
+    if (max > 0) {
+      const ratio = len / max;
+      if (ratio >= 1) counterEl.classList.add("is-error");
+      else if (ratio >= 0.8) counterEl.classList.add("is-warn");
+    }
+  }
+  field.addEventListener("input", () => {
+    if (!isComposing) update();
+  });
+  update();
+}
+function setupMask(field) {
+  const mask = field.getAttribute("data-mask");
+  if (!mask) return;
+  const maskChars = [];
+  for (const ch of mask) maskChars.push(ch);
+  function isInputSlot(ch) {
+    return ch === "#" || ch === "A" || ch === "*";
+  }
+  function validate(rawChar, slotType) {
+    if (slotType === "#") return /[0-9]/.test(rawChar);
+    if (slotType === "A") return /[a-zA-Z]/.test(rawChar);
+    return true;
+  }
+  function applyMask(input) {
+    let result = "";
+    let rawIdx = 0;
+    const rawChars = input.split("");
+    for (let i = 0; i < maskChars.length && rawIdx < rawChars.length; i++) {
+      const slot = maskChars[i];
+      if (isInputSlot(slot)) {
+        while (rawIdx < rawChars.length && !validate(rawChars[rawIdx], slot)) {
+          rawIdx++;
+        }
+        if (rawIdx < rawChars.length) {
+          result += rawChars[rawIdx];
+          rawIdx++;
+        }
+      } else {
+        result += slot;
+      }
+    }
+    return result;
+  }
+  function extractRaw(formatted) {
+    let raw = "";
+    for (let i = 0; i < formatted.length && i < maskChars.length; i++) {
+      if (isInputSlot(maskChars[i])) raw += formatted[i];
+    }
+    return raw;
+  }
+  let lastFormatted = applyMask(field.value);
+  field.value = lastFormatted;
+  field.setAttribute("data-raw-value", extractRaw(lastFormatted));
+  field.addEventListener("input", () => {
+    if (isComposing) return;
+    const cursorPos = field.selectionStart ?? 0;
+    const oldRaw = extractRaw(lastFormatted);
+    const newFull = field.value;
+    const newRaw = extractRaw(newFull);
+    const formatted = applyMask(newRaw);
+    field.value = formatted;
+    field.setAttribute("data-raw-value", extractRaw(formatted));
+    lastFormatted = formatted;
+    const rawDelta = newRaw.length - oldRaw.length;
+    let targetCursor = cursorPos;
+    if (rawDelta > 0) {
+      let count = 0;
+      for (let i = 0; i < formatted.length; i++) {
+        if (isInputSlot(maskChars[i])) {
+          count++;
+          if (count >= newRaw.length) {
+            targetCursor = i + 1;
+            break;
+          }
+        }
+      }
+    } else if (rawDelta < 0) {
+      targetCursor = Math.min(cursorPos, formatted.length);
+    }
+    field.setSelectionRange(targetCursor, targetCursor);
+  });
+  field.addEventListener("keydown", (ev) => {
+    if (isComposing) return;
+    if (ev.ctrlKey || ev.metaKey || ev.altKey) return;
+    if (["Backspace", "Delete", "Tab", "Escape", "ArrowLeft", "ArrowRight", "Home", "End", "Enter"].includes(ev.key)) return;
+    const currentRaw = extractRaw(field.value);
+    const nextSlotIdx = maskChars.findIndex((ch, i) => {
+      if (!isInputSlot(ch)) return false;
+      return i >= field.value.length || !isInputSlot(maskChars[Math.min(field.value.length, maskChars.length - 1)]);
+    });
+    const nextSlot = maskChars.find((ch, i) => {
+      const filledSlots = maskChars.slice(0, i).filter(isInputSlot).length;
+      return isInputSlot(ch) && filledSlots >= currentRaw.length;
+    });
+    if (nextSlot && !validate(ev.key, nextSlot)) {
+      ev.preventDefault();
+    }
+  });
+}
+function setupTrim(field) {
+  if (!field.hasAttribute("data-trim")) return;
+  field.addEventListener("blur", () => {
+    const trimmed = field.value.trim();
+    if (trimmed !== field.value) {
+      field.value = trimmed;
+      field.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  });
+}
 function setupOtp(group) {
   const el = group;
   if (el.__icenInputInit) return;
@@ -57,6 +200,7 @@ function setupOtp(group) {
     }
     syncFilled(cell);
     cell.addEventListener("input", () => {
+      if (isComposing) return;
       const ch = cell.value.slice(-1);
       cell.value = ch;
       syncFilled(cell);
@@ -111,6 +255,31 @@ function initInput(root = document) {
   if (root instanceof HTMLTextAreaElement && root.matches("[data-autosize]")) textareas.push(root);
   textareas.push(...Array.from(root.querySelectorAll("textarea[data-autosize]")));
   for (const ta of textareas) setupAutosize(ta);
+  const countedFields = [];
+  if (root instanceof Element) {
+    const fields = Array.from(root.querySelectorAll(
+      "input[maxlength], input[data-count], textarea[maxlength], textarea[data-count]"
+    ));
+    countedFields.push(...fields);
+    if (root instanceof HTMLInputElement || root instanceof HTMLTextAreaElement) {
+      if (root.hasAttribute("maxlength") || root.hasAttribute("data-count")) countedFields.push(root);
+    }
+  }
+  for (const f of countedFields) setupCounter(f);
+  const maskedInputs = [];
+  if (root instanceof Element) {
+    maskedInputs.push(...Array.from(root.querySelectorAll("input[data-mask]")));
+    if (root instanceof HTMLInputElement && root.hasAttribute("data-mask")) maskedInputs.push(root);
+  }
+  for (const inp of maskedInputs) setupMask(inp);
+  const trimFields = [];
+  if (root instanceof Element) {
+    trimFields.push(...Array.from(root.querySelectorAll("[data-trim]")));
+    if ((root instanceof HTMLInputElement || root instanceof HTMLTextAreaElement) && root.hasAttribute("data-trim")) {
+      trimFields.push(root);
+    }
+  }
+  for (const f of trimFields) setupTrim(f);
   const otps = [];
   if (root instanceof Element && root.matches(".otp")) otps.push(root);
   otps.push(...Array.from(root.querySelectorAll(".otp")));