add theme validate.

WebApplication/BulmaTheme.cpp

@@ -1,6 +1,7 @@
 #include "BulmaTheme.h"
 #include "BoostLog.h"
 #include <Wt/DomElement.h>
+#include <Wt/WAbstractSpinBox.h>
 #include <Wt/WApplication.h>
 #include <Wt/WDialog.h>
 #include <Wt/WLinkedCssStyleSheet.h>
@@ -8,6 +9,8 @@
 #include <Wt/WPushButton.h>
 #include <format>
 
+#include "js/BulmaThemeValidate.js"
+
 namespace std {
 std::ostream &operator<<(std::ostream &os, Wt::DomElementType type);
 }
@@ -122,6 +125,14 @@ void BulmaTheme::apply(Wt::WWidget *widget, Wt::DomElement &element, int element
         }
         break;
     }
+    case Wt::DomElementType::INPUT: {
+        auto spinBox = dynamic_cast<Wt::WAbstractSpinBox *>(widget);
+        if (spinBox) {
+            element.addPropertyWord(Wt::Property::Class, "bulma-spinbox");
+            return;
+        }
+        break;
+    }
     default:
         // LOG(warning) << "elemnet[" << element.type() << "] need style.";
         break;
@@ -131,6 +142,10 @@ void BulmaTheme::apply(Wt::WWidget *widget, Wt::DomElement &element, int element
 void BulmaTheme::applyValidationStyle(Wt::WWidget *widget, const Wt::WValidator::Result &validation,
                                       Wt::WFlags<Wt::ValidationStyleFlag> flags) const {
     using namespace Wt;
+    WApplication *app = WApplication::instance();
+
+    LOAD_JAVASCRIPT(app, "js/BulmaThemeValidate.js", "validate", wtjs1);
+    LOAD_JAVASCRIPT(app, "js/BulmaThemeValidate.js", "setValidationState", wtjs2);
     if (flags.test(ValidationStyleFlag::InvalidStyle)) {
         widget->addStyleClass("bulma-is-danger");
     }

WebApplication/js/BulmaThemeValidate.js

@@ -0,0 +1,46 @@
+WT_DECLARE_WT_MEMBER(1, JavaScriptFunction, "validate", function(edit) {
+  let v;
+  if (edit.options) {
+    /** @type {?HTMLOptionElement} */
+    const item = edit.options.item(edit.selectedIndex);
+    if (item === null) {
+      v = "";
+    } else {
+      v = item.text;
+    }
+  } else if (
+    typeof edit.wtLObj === "object" &&
+    typeof edit.wtLObj.getValue === "function"
+  ) {
+    v = edit.wtLObj.getValue();
+  } else if (typeof edit.wtEncodeValue === "function") {
+    v = edit.wtEncodeValue(edit);
+  } else {
+    v = edit.value;
+  }
+
+  v = edit.wtValidate.validate(v);
+
+  this.setValidationState(edit, v.valid, v.message, 1);
+});
+
+WT_DECLARE_WT_MEMBER(2, JavaScriptFunction, "setValidationState", function(edit, state, message, styles) {
+  const ValidationInvalidStyle = 0x1;
+  const ValidationValidStyle = 0x2;
+
+  const validStyle = state && ((styles & ValidationValidStyle) !== 0);
+  const invalidStyle = !state && ((styles & ValidationInvalidStyle) !== 0);
+
+  edit.classList.toggle("Wt-valid", validStyle);
+  edit.classList.toggle("Wt-invalid", invalidStyle);
+
+  if (typeof edit.defaultTT === "undefined") {
+    edit.defaultTT = edit.getAttribute("title") || "";
+  }
+
+  if (state) {
+    edit.setAttribute("title", edit.defaultTT);
+  } else {
+    edit.setAttribute("title", message);
+  }
+});