brut-js 0.9.2 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brut-js",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "type": "module",
   "keywords": [ "WebComponents", "Custom Elements" ],
   "bugs": {

package/specs/ConstraintViolationMessages.spec.js

@@ -18,9 +18,12 @@ describe("<brut-cv-messages>", () => {
 
     element.createMessages({validityState,inputName})
 
-    assert.equal(element.querySelectorAll("brut-cv").length,2)
+    const brutCvElements = element.querySelectorAll("brut-cv")
+    assert.equal(brutCvElements.length, 2)
     assert.match(element.textContent,new RegExp("This field does not match the pattern","m"))
     assert.match(element.textContent,new RegExp("This field is above the range","m"))
+    assert.equal(brutCvElements[0].getAttribute("client-side"),"")
+    assert.equal(brutCvElements[1].getAttribute("client-side"),"")
 
     element.clearClientSideMessages()
     assert.equal(element.textContent,"")

package/specs/Form.spec.js

@@ -6,12 +6,12 @@ describe("<brut-form>", () => {
       <form>
         <label>
           <input required type="text" name="text">
-          <brut-cv-messages>
+          <brut-cv-messages input-name="text">
           </brut-cv-messages>
         </label>
         <label>
           <input required type="number" name="number">
-          <brut-cv-messages>
+          <brut-cv-messages input-name="number">
           </brut-cv-messages>
         </label>
         <input type="submit">Save</input>
@@ -134,48 +134,4 @@ describe("<brut-form>", () => {
     assert(gotValid)
     assert(!gotInvalid)
   })
-  withHTML(`
-    <brut-form>
-      <form>
-        <label>
-          <input required type="text" name="text">
-        </label>
-        <brut-cv-messages input-name='text'>
-        </brut-cv-messages>
-        <input type="submit">Save</input>
-      </form>
-    </brut-form>
-  `).test("locates the messages for errors based on name", ({window,document,assert}) => {
-
-    const brutForm         = document.querySelector("brut-form")
-    const form             = brutForm.querySelector("form")
-    const button           = form.querySelector("input[type=submit]")
-    const textFieldLabel   = form.querySelector("label:has(input[type=text])")
-
-    let submitted  = false
-    let gotInvalid = false
-    let gotValid   = false
-
-    form.addEventListener("submit", (event) => {
-      event.preventDefault()
-      submitted = true
-    })
-    brutForm.addEventListener("brut:valid", () => {
-      gotValid = true
-    })
-    brutForm.addEventListener("brut:invalid", () => {
-      gotInvalid = true
-    })
-
-    button.click()
-
-    assert(!submitted)
-    assert(!gotValid)
-    assert(gotInvalid)
-    assert.equal(brutForm.getAttribute("submitted-invalid"),"")
-
-    let error = brutForm.querySelector("brut-cv[input-name='text'][key='cv.cs.valueMissing']")
-    assert(error)
-
-  })
 })

package/src/ConstraintViolationMessage.js

@@ -15,9 +15,15 @@ import I18nTranslation from "./I18nTranslation"
  * @property {string} key - the i18n translation key to use.  It must map to the `key` of a `<brut-i18n-translation>` on the page or
  * the element will not render any text.
  * @property {string} input-name - the name of the input, used to insert into the message, e.g. "Title is required".
+ * @property {boolean} server-generated if true, this indicates the element's HTML was generated on the server.
+ *           This means that your CSS can target it for display in all cases.  If this is not present,
+ *           you may want to avoid showing this element if the form has not been submitted yet.
+ *           Does not affect behavior.
  * @property {boolean} server-side if true, this indicates the element contains constraint violation messages
- *                                 from the server.  Currently doesn't affect this element's behavior, however
- *                                 AjaxSubmit will use it to locate where it should insert server-side errors.
+ *           from the server.  Does not affect behavior.
+ * @property {boolean} client-side if true, this indicates the element contains constraint violation messages
+ *           from the client, however they may have been generated from the server, since the server may
+ *           re-evaluate the client-side constraints.  Does not affect behavior of this tag.
  *
  * @see I18nTranslation
  * @see ConstraintViolationMessages
@@ -33,12 +39,15 @@ class ConstraintViolationMessage extends BaseCustomElement {
     "key",
     "input-name",
     "server-side",
+    "client-side",
+    "server-generated",
   ]
 
   static createElement(document,attributes) {
     const element = document.createElement(ConstraintViolationMessage.tagName)
     element.setAttribute("key",this.i18nKey("cs", attributes.key))
     element.setAttribute("input-name",attributes["input-name"])
+    element.setAttribute("client-side","")
     if (Object.hasOwn(attributes,"show-warnings")) {
       element.setAttribute("show-warnings",attributes["show-warnings"])
     }
@@ -85,6 +94,12 @@ class ConstraintViolationMessage extends BaseCustomElement {
   serverSideChangedCallback({newValueAsBoolean}) {
     // attribute listed for documentation purposes only
   }
+  clientSideChangedCallback({newValueAsBoolean}) {
+    // attribute listed for documentation purposes only
+  }
+  serverGeneratedChangedCallback({newValueAsBoolean}) {
+    // attribute listed for documentation purposes only
+  }
 
   update() {
     if (!this.#key) {

package/src/Form.js

@@ -15,10 +15,7 @@ import ConstraintViolationMessages from "./ConstraintViolationMessages"
  *   set `submitted-invalid` on itself when that happens, thus allowing you to target invalid
  *   fields only after a submission attempt.
  * * You may wish to control the messaging of client-side constraint violations
- *   beyond what the browser gives you. Assuming your `INPUT` tags are inside a container
- *   like `LABEL`, a `brut-cv` tag found in that container
- *   (i.e. a sibling of your `INPUT`) will be modified to contain error messages specific
- *   to the {@link external:ValidityState} of the control.
+ *   beyond what the browser gives you. Assuming you have generated a `<brut-cv-messages input-name="«input name»"></brut-cv-messasges>`, it will be populated with `<brut-cv>` elements for each client-side constraint violation, based on the {@link external:ValidityState} of the control.
  *
  * @fires brut:invalid Fired when any element is found to be invalid
  * @fires brut:valid Fired when no element is found to be invalid.  This should be reliable to know
@@ -29,12 +26,12 @@ import ConstraintViolationMessages from "./ConstraintViolationMessages"
  *   <form ...>
  *     <label>
  *       <input type="text" required name="username">
- *       <brut-cv-messages>
+ *       <brut-cv-messages input-name="username">
  *       </brut-cv-messages>
  *     </label>
  *     <div> <!-- container need not be a label -->
  *       <input type="text" required minlength="4" name="alias">
- *       <brut-cv-messages>
+ *       <brut-cv-messages input-name="alias">
  *       </brut-cv-messages>
  *     </div>
  *     <button>Submit</button>
@@ -45,13 +42,13 @@ import ConstraintViolationMessages from "./ConstraintViolationMessages"
  *   <form ...>
  *     <label>
  *       <input type="text" required name="username">
- *       <brut-cv-messages>
+ *       <brut-cv-messages input-name="username">
  *         <brut-cv>This field is required</brut-cv>
  *       </brut-cv-messages>
  *     </label>
  *     <div> <!-- container need not be a label -->
  *       <input type="text" required minlength="4" name="alias">
- *       <brut-cv-messages>
+ *       <brut-cv-messages input-name="alias">
  *         <brut-cv>This field is required</brut-cv>
  *       </brut-cv-messages>
  *     </div>
@@ -107,28 +104,27 @@ class Form extends BaseCustomElement {
 
   #updateErrorMessages(event) {
     const element = event.target
-    const selector = ConstraintViolationMessages.tagName
-    let errorLabels = element.parentNode.querySelectorAll(selector)
-    if (errorLabels.length == 0) {
-      if (element.name && element.form) {
-        const moreGeneralSelector = `${ConstraintViolationMessages.tagName}[input-name='${element.name}']`
-        errorLabels = element.form.querySelectorAll(moreGeneralSelector)
-        if (errorLabels.length == 0) {
-          this.logger.warn(`Did not find any elements matching ${selector} or ${moreGeneralSelector}, so no error messages will be shown`)
-        }
+    let constraintViolationMessages = []
+    if (element.name && element.form) {
+      const selector = `${ConstraintViolationMessages.tagName}[input-name='${element.name}']`
+      constraintViolationMessages = element.form.querySelectorAll(selector)
+      if (constraintViolationMessages.length == 0) {
+        this.logger.warn(`Did not find any elements matching ${selector}, so no error messages will be shown`)
+      }
+    }
+    else {
+      if (element.name) {
+        this.logger.warn("Element has a name (%s), but is not associated with any form.", element.name)
       }
       else {
-        this.logger.warn("Did not find any elements matching %s and the form element has %s %s",
-          selector,
-          element.name ? "no name" : "a name, but",
-          element.form ? "no form" : "though has a form")
+        this.logger.warn("Element has a form, but has no name, which means we cannot locate %s by input-name", ConstraintViolationMessages.tagName)
       }
     }
-    if (errorLabels.length == 0) {
+    if (constraintViolationMessages.length == 0) {
       return
     }
     let anyErrors = false
-    errorLabels.forEach( (errorLabel) => {
+    constraintViolationMessages.forEach( (errorLabel) => {
       if (element.validity.valid) {
         errorLabel.clearClientSideMessages()
       }