@optionfactory/ful 0.58.0 → 0.60.0

package/dist/ful.mjs

@@ -1073,7 +1073,7 @@ class Form extends ParsedElement() {
         if (!this.hasAttribute('scroll-on-error')) {
             return;
         }
-        const ys = Array.from(this.querySelectorAll('ful-field-error'))
+        const ys = Array.from(this.querySelectorAll('[ful-validated-field]:has(.is-invalid) ful-field-error'))
             .map(el => el.parentElement ? el.parentElement : el)
             .map(el => el.getBoundingClientRect().y + window.scrollY);
         const miny = Math.min(...ys);
@@ -1084,15 +1084,17 @@ class Form extends ParsedElement() {
 }
 
 const INPUT_TEMPLATE = `
-<label data-tpl-for="id" class="form-label">{{{{ slots.default }}}}</label>
-<div class="input-group">
-    <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
-    <div data-tpl-if="slots.before" data-tpl-remove="tag">{{{{ slots.before }}}}</div>
-    {{{{ slots.input }}}} 
-    <div data-tpl-if="slots.after" data-tpl-remove="tag">{{{{ slots.after }}}}</div>
-    <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
+<div ful-validated-field>
+    <label data-tpl-for="id" class="form-label">{{{{ slots.default }}}}</label>
+    <div class="input-group">
+        <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+        <div data-tpl-if="slots.before" data-tpl-remove="tag">{{{{ slots.before }}}}</div>
+        {{{{ slots.input }}}} 
+        <div data-tpl-if="slots.after" data-tpl-remove="tag">{{{{ slots.after }}}}</div>
+        <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
+    </div>
+    <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
 </div>
-<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
 `;
 
 const makeInputFragment = (el, template, slots) => {
@@ -1125,6 +1127,17 @@ class Input extends ParsedElement({
         return this.input.value;
     }
     set value(value) {
+        const success = this.dispatchEvent(new CustomEvent("change", {
+            bubbles: true,
+            cancelable: true,
+            detail: {
+                target: this,
+                value: value
+            }
+        }));
+        if(!success){
+            return;
+        }
         this.input.value = value;
     }
 }
@@ -1138,16 +1151,18 @@ class Select extends ParsedElement({
     observed: ["value"],
     slots: true,
     template: `
-        <label data-tpl-for="tsId" class="form-label">{{{{ slots.default }}}}</label>
-        {{{{ input }}}}
-        <div class="input-group">
-            <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
-            <div data-tpl-if="slots.before" data-tpl-remove="tag">{{{{ slots.before }}}}</div>
-            {{{{ slots.input }}}} 
-            <div data-tpl-if="slots.after" data-tpl-remove="tag">{{{{ slots.after }}}}</div>
-            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
+        <div ful-validated-field>
+            <label data-tpl-for="tsId" class="form-label">{{{{ slots.default }}}}</label>
+            {{{{ input }}}}
+            <div class="input-group">
+                <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+                <div data-tpl-if="slots.before" data-tpl-remove="tag">{{{{ slots.before }}}}</div>
+                {{{{ slots.input }}}} 
+                <div data-tpl-if="slots.after" data-tpl-remove="tag">{{{{ slots.after }}}}</div>
+                <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
+            </div>
+            <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
         </div>
-        <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>            
     `
 }) {
     constructor(tsConfig) {
@@ -1220,12 +1235,23 @@ class Select extends ParsedElement({
             this.value = this.getAttribute("value");
         }
     }
-    set value(v) {
+    set value(value) {
+        const success = this.dispatchEvent(new CustomEvent("change", {
+            bubbles: true,
+            cancelable: true,
+            detail: {
+                target: this,
+                value: value
+            }
+        }));
+        if(!success){
+            return;
+        }
         (async () => {
             if (this._remote) {
-                await this._unwrappedRemoteLoad({ byId: v }, this.ts.loadCallback.bind(this.ts));
+                await this._unwrappedRemoteLoad({ byId: value }, this.ts.loadCallback.bind(this.ts));
             }
-            this.ts.setValue(v);
+            this.ts.setValue(value);
         })();
     }
     get value() {
@@ -1238,7 +1264,7 @@ class RadioGroup extends ParsedElement({
     observed: ['value', 'disabled:bool'],
     slots: true,
     template: `
-        <fieldset>
+        <fieldset ful-validated-field>
             <legend class="form-label">
                 {{{{ slots.default }}}}
             </legend>
@@ -1282,6 +1308,17 @@ class RadioGroup extends ParsedElement({
         return checked ? checked.value : null;
     }
     set value(value) {
+        const success = this.dispatchEvent(new CustomEvent("change", {
+            bubbles: true,
+            cancelable: true,
+            detail: {
+                target: this,
+                value: value
+            }
+        }));
+        if(!success){
+            return;
+        }
         this.querySelector(`input[type=radio][value=${CSS.escape(value)}]`).checked = true;
     }
 }