laminar 0.13.1, validated element - resetError

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+### 0.13.9
+
+* update to `Laminar` v0.13.1
+* API: new: `ValidatedElement` now exposes the `.resetError` observer
+
 ### 0.13.8
 
 * API: new: `mutationObserver`

modules/validation-core/src/main/scala/io/laminext/validation/components/ValidatedElement.scala

@@ -11,7 +11,8 @@ class ValidatedElement[+R <: dom.html.Element, A, Err, Out](
   val el: ReactiveHtmlElement[R],
   val value: Signal[A],
   val validatedValue: Signal[ValidatedValue[Err, Out]],
-  val validationError: Signal[Option[Err]]
+  val validationError: Signal[Option[Err]],
+  val resetError: Observer[Unit]
 ) extends ComponentBase[R]
 
 object ValidatedElement {
@@ -22,16 +23,23 @@ object ValidatedElement {
     validation: Validation[A, Err, Out]
   ): ValidatedElement[R, A, Err, Out] = {
     val validatedValue = value.map(validation)
-
-    val focusedAtLeastOnce = el.events(onBlur).foldLeft(false)((_, _) => true)
+    val resetBus       = new EventBus[Unit]()
 
     val blurredAtLeastOnce =
       EventStream
         .merge(
+          el.events(onBlur.mapToTrue),
+          resetBus.events.mapToFalse
+        ).foldLeft(false)((_, value) => value)
+
+    val shouldShowError =
+      EventStream
+        .merge(
+          resetBus.events.mapToFalse,
           el.events(onBlur).mapToTrue,
           el.events(onFocus)
             .sample(
-              Signal.combine(validatedValue, focusedAtLeastOnce)
+              Signal.combine(validatedValue, blurredAtLeastOnce)
             )
             .map { case (validatedValue, focusedAtLeastOnce) =>
               validatedValue.isLeft && focusedAtLeastOnce
@@ -41,13 +49,19 @@ object ValidatedElement {
 
     val error =
       Signal
-        .combine(validatedValue, blurredAtLeastOnce)
+        .combine(validatedValue, shouldShowError)
         .map {
           case (Left(errors), true) => Some(errors)
           case _                    => Option.empty
         }
 
-    new ValidatedElement[R, A, Err, Out](el, value, validatedValue, error)
+    new ValidatedElement[R, A, Err, Out](
+      el = el,
+      value = value,
+      validatedValue = validatedValue,
+      validationError = error,
+      resetError = resetBus.writer
+    )
   }
 
 }

project/DependencyVersions.scala

@@ -12,7 +12,7 @@ object DependencyVersions {
   // -- website
 
   val sourcecode             = "0.2.7"
-  val frontroute             = "0.13.2"
+  val frontroute             = "0.13.3"
   val `embedded-files-macro` = "0.2.4"
   val `scala-java-time`      = "2.3.0"
 

website/package.json

@@ -2,15 +2,15 @@
   "private": true,
   "license": "UNLICENSED",
   "dependencies": {
-    "highlight.js": "^11.0.1",
+    "highlight.js": "^11.1.0",
     "marked": "2.1.3"
   },
   "devDependencies": {
     "@tailwindcss/aspect-ratio": "^0.2.0",
     "@tailwindcss/forms": "^0.3.3",
     "@tailwindcss/jit": "^0.1.18",
     "@tailwindcss/typography": "^0.4.0",
-    "autoprefixer": "^10.2.5",
+    "autoprefixer": "^10.3.1",
     "clean-webpack-plugin": "^4.0.0-alpha.0",
     "compression-webpack-plugin": "^8.0.1",
     "concat-with-sourcemaps": "^1.1.0",
@@ -20,20 +20,20 @@
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.2",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.0.0",
+    "mini-css-extract-plugin": "^2.1.0",
     "postcss": "^8.3.5",
     "postcss-import": "^14.0.2",
     "postcss-loader": "^6.1.1",
     "postcss-preset-env": "^6.7.0",
     "scalajs-friendly-source-map-loader": "^0.1.5",
     "source-map-loader": "^3.0.0",
-    "style-loader": "^3.0.0",
+    "style-loader": "^3.1.0",
     "stylelint": "^13.13.1",
     "stylelint-config-recommended": "^5.0.0",
     "stylelint-config-standard": "^22.0.0",
     "tailwindcss": "^2.2.4",
     "terser-webpack-plugin": "^5.1.4",
-    "webpack": "^5.42.0",
+    "webpack": "^5.44.0",
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "4.0.0-beta.1"
   },

website/scala-version.js

@@ -1,4 +1,4 @@
 const scala2 = '2.13'
-const scala3 = '3.0.0'
+const scala3 = '3.0.1'
 
 module.exports = scala3

website/src/main/resources/doc/news/index.md

@@ -1,3 +1,4 @@
+* [v0.13.9 release](/news/v0-13-9) (13.07.2021)
 * [v0.13.8 release](/news/v0-13-8) (8.07.2021)
 * [v0.13.7 release](/news/v0-13-7) (5.07.2021)
 * [v0.13.6 bug-fix release](/news/v0-13-6) (15.06.2021)

website/src/main/resources/doc/news/v0.13.9.md

@@ -0,0 +1,6 @@
+# v0.13.9 release
+
+* 13.07.2021
+
+* update to `Laminar` v0.13.1
+* API: new: `ValidatedElement` now exposes the `.resetError` observer

website/src/main/resources/doc/validation/index.md

@@ -76,8 +76,7 @@ input(tpe := "file").validatedFile(fileValidation)
 input().validated(V.custom("must be upper-case!")(string => string.toUpperCase == string))
 ```
 
-## `.validatedValue` 
-## `.validatationError`
+## `.validatedValue`, `.validatationError`, `.resetError`
 
 The `.validation` extension method returns a `ValidatedElement`, which has the following fields:
 
@@ -87,7 +86,10 @@ The `.validation` extension method returns a `ValidatedElement`, which has the f
 * `validationError` – a signal with an option that contains the validation error, if any. 
   `validationError`'s value is not immediately set to `Some(errors)`. Rather, it is set when the value is not valid, and the
 element has lost the focus. Or if the element contained an invalid value when getting the focus, and its current value is 
-invalid again.
+invalid again (or vice versa).
+* `resetError` – an observer which, when written to, reset the behavior of the `.validationError` signal back to its initial
+state (as if the input has not been "touched" by the user yet).
+
 
 ## Combining validations
 

website/src/main/scala/io/laminext/site/Site.scala

@@ -174,6 +174,7 @@ object Site {
       path = "news",
       index = docPage("", "News", FileAsString("/doc/news/index.md")),
       "" -> Seq(
+        docPage("v0-13-9", "v0.13.9", FileAsString("/doc/news/v0.13.9.md")),
         docPage("v0-13-8", "v0.13.8", FileAsString("/doc/news/v0.13.8.md")),
         docPage("v0-13-7", "v0.13.7", FileAsString("/doc/news/v0.13.7.md")),
         docPage("v0-13-6", "v0.13.6", FileAsString("/doc/news/v0.13.6.md")),

website/src/main/scala/io/laminext/site/TemplateVars.scala

@@ -3,7 +3,7 @@ package io.laminext.site
 object TemplateVars {
 
   val vars = Seq(
-    "laminextVersion" -> "0.13.8"
+    "laminextVersion" -> "0.13.9"
   )
 
   def apply(s: String): String =

website/src/main/scala/io/laminext/site/examples/validation/ex_validation/ValidationExample.scala

@@ -78,6 +78,28 @@ object ValidationExample
           )
           /* </focus> */
         ),
+        div(
+          button(
+            "Reset values",
+            cls := "inline-flex items-center px-3 py-2 border border-blue-500 shadow-sm tracking-wide font-medium rounded-md text-blue-100 bg-blue-600 hover:bg-blue-500 hover:text-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
+            onClick --> { _ =>
+              validatedInput1.ref.value = ""
+              validatedInput2.ref.value = ""
+              validatedInput3.ref.value = ""
+            }
+          )
+        ),
+        div(
+          button(
+            "Reset errors",
+            cls := "inline-flex items-center px-3 py-2 border border-blue-500 shadow-sm tracking-wide font-medium rounded-md text-blue-100 bg-blue-600 hover:bg-blue-500 hover:text-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
+            /* <focus> */
+            onClick.mapToUnit --> validatedInput1.resetError,
+            onClick.mapToUnit --> validatedInput2.resetError,
+            onClick.mapToUnit --> validatedInput3.resetError
+            /* </focus> */
+          )
+        ),
         div(
           cls := "flex space-x-4 items-center",
           code("validatedInput1.el.value:"),

website/src/main/scala/io/laminext/site/examples/validation/ex_validation_cats/ValidationCatsExample.scala

@@ -81,6 +81,28 @@ object ValidationCatsExample
           )
           /* </focus> */
         ),
+        div(
+          button(
+            "Reset values",
+            cls := "inline-flex items-center px-3 py-2 border border-blue-500 shadow-sm tracking-wide font-medium rounded-md text-blue-100 bg-blue-600 hover:bg-blue-500 hover:text-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
+            onClick --> { _ =>
+              validatedInput1.ref.value = ""
+              validatedInput2.ref.value = ""
+              validatedInput3.ref.value = ""
+            }
+          )
+        ),
+        div(
+          button(
+            "Reset errors",
+            cls := "inline-flex items-center px-3 py-2 border border-blue-500 shadow-sm tracking-wide font-medium rounded-md text-blue-100 bg-blue-600 hover:bg-blue-500 hover:text-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
+            /* <focus> */
+            onClick.mapToUnit --> validatedInput1.resetError,
+            onClick.mapToUnit --> validatedInput2.resetError,
+            onClick.mapToUnit --> validatedInput3.resetError
+            /* </focus> */
+          )
+        ),
         div(
           cls := "flex space-x-4 items-center",
           code("validatedInput1.el.value:"),