@kerkhoff-ict/solora 2.5.0 → 2.5.2

package/dist/index.css

@@ -175,42 +175,6 @@
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
   }
 }
-flux\\:button {
-  all: unset;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  border-radius: 9999px;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  background: var(--color-primary, #0071e3);
-  color: var(--color-text-light, #fff);
-}
-flux\\:button:hover {
-  filter: brightness(0.85);
-}
-flux\\:button.btn-secondary {
-  background: var(--color-secondary, #f5f5f5);
-  color: var(--color-text-dark, #000);
-  border: 2px solid rgba(0, 0, 0, 0.1);
-}
-flux\\:input {
-  all: unset;
-  width: 100%;
-  padding: 0.3rem 0.4rem;
-  border-radius: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  background: var(--color-bg, #fefefe);
-  color: var(--color-text-dark, #000);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.05);
-  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-flux\\:input:focus {
-  border-color: var(--color-primary, #0071e3);
-  box-shadow: 0 0 0 4px var(--color-focus-glow, rgba(0, 113, 227, 0.15));
-}
 
 /* src/components/codeblock.css */
 .codeblock {

package/dist/index.js

@@ -1918,6 +1918,61 @@ function initDropdowns() {
   });
 }
 
+// src/components/input.js
+function initInput() {
+  const inputs = document.querySelectorAll(".sol-input");
+  inputs.forEach((input) => {
+    const form = input.closest("form");
+    if (form && !form.noValidate) {
+      form.noValidate = true;
+    }
+    let errorDisplay = input.parentNode.querySelector(".sol-error-message");
+    if (!errorDisplay) {
+      errorDisplay = document.createElement("span");
+      errorDisplay.className = "sol-error-message";
+      input.parentNode.appendChild(errorDisplay);
+    }
+    input.addEventListener("invalid", (e) => {
+      e.preventDefault();
+      updateValidationState(input, errorDisplay);
+    });
+    input.addEventListener("input", () => {
+      if (input.validity.valid) {
+        clearError(input, errorDisplay);
+      }
+    });
+    input.addEventListener("blur", () => {
+      updateValidationState(input, errorDisplay);
+    });
+  });
+}
+function updateValidationState(input, errorDisplay) {
+  if (input.validity.valid) {
+    clearError(input, errorDisplay);
+    return;
+  }
+  let message = "Ongeldige invoer";
+  if (input.validity.valueMissing) {
+    message = "Dit veld is verplicht";
+  } else if (input.validity.typeMismatch) {
+    if (input.type === "email") message = "Voer een geldig e-mailadres in";
+    if (input.type === "url") message = "Voer een geldige link in";
+  } else if (input.validity.tooShort) {
+    message = `Minimaal ${input.minLength} tekens nodig`;
+  } else if (input.validity.rangeUnderflow) {
+    message = `Minimum waarde is ${input.min}`;
+  } else if (input.validity.patternMismatch) {
+    message = "De opmaak is onjuist";
+  }
+  errorDisplay.textContent = message;
+  errorDisplay.style.display = "block";
+  input.classList.add("is-invalid");
+}
+function clearError(input, errorDisplay) {
+  errorDisplay.style.display = "none";
+  input.classList.remove("is-invalid");
+}
+
 // src/components/contextMenu.js
 function initContextMenu() {
   let menu = document.querySelector(".sol-context-menu");
@@ -2296,6 +2351,7 @@ function safeInitAll() {
   try {
     initCodeblocks();
     initDropdowns();
+    initInput();
     initContextMenu();
     initThemeToggle();
     initPopovers();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerkhoff-ict/solora",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "description": "Simple CSS component library",
   "main": "dist/index.js",
   "style": "dist/index.css",