@optionfactory/ful 1.0.13 → 1.0.15

package/dist/ful.mjs

@@ -1267,7 +1267,12 @@ class Bindings {
         });
         fieldErrors.forEach(e => {
             const name = e.context.replace("[", ".").replace("].", ".").replace("]", "");
-            form.querySelectorAll(`[name='${CSS.escape(name)}']`).forEach(input => input.setCustomValidity?.(e.reason));
+            const parts = name.split(".");
+            for (let i = parts.length; i != 0; --i) {
+                const prefix = parts.slice(0, i).join(".");
+                const suffix = parts.slice(i, parts.length).join(".");
+                form.querySelectorAll(`[name='${CSS.escape(prefix)}']`).forEach(input => input.setCustomValidity?.(e.reason, suffix));
+            }
         });
         form.querySelectorAll("ful-errors").forEach(el => {
             const hel = /** @type HTMLElement} */ (el);
@@ -1386,7 +1391,9 @@ class Form extends ParsedElement {
             this.spinner(false);
         }
     }
-
+    reset(){
+        this.form.reset();
+    }
     spinner(spin) {
         this.querySelectorAll('ful-spinner').forEach(el => {
             const hel = /** @type HTMLElement */ (el);
@@ -1431,11 +1438,16 @@ class Input extends ParsedElement {
         this.internals = this.attachInternals();
         this.internals.role = 'presentation';
     }
-    render({ slots }) {
+    render({ slots, observed, disabled }) {
         const type = this.getAttribute("type") ?? 'text';
         const fragment = this.template().withOverlay({ type, slots }).render();    
         this.#input = fragment.querySelector("input,textarea");
+
         Attributes.forward('input-', this, this.#input);
+        this.disabled = disabled;
+        this.readonly = observed.readonly;
+        this.value = observed.value;
+
         this.#input.addEventListener('change', (evt) => {
             evt.stopPropagation();
             this.dispatchEvent(new CustomEvent('change', {
@@ -1465,6 +1477,12 @@ class Input extends ParsedElement {
     set readonly(v) {
         this.#input.readOnly = v;
     }    
+    get disabled(){
+        return this.#input.hasAttribute('disabled');
+    }
+    set disabled(d){
+        Attributes.toggle(this.#input, 'disabled', d);
+    }
     focus(options) {
         this.#input.focus(options);
     }
@@ -1477,6 +1495,9 @@ class Input extends ParsedElement {
         this.internals.setValidity({ customError: true }, " ");
         this.#fieldError.innerText = error;
     }
+    formResetCallback(){
+        this.value = this.getAttribute("value");
+    }
 }
 
 class CompleteSelectLoader {
@@ -1677,7 +1698,7 @@ class Dropdown extends ParsedElement {
 }
 
 class Select extends ParsedElement {
-    static observed = ['value:csvm']
+    static observed = ['value:csvm', 'readonly:presence']
     static slots = true
     static template = `
         <label class="form-label">{{{{ slots.default }}}}</label>
@@ -1716,13 +1737,18 @@ class Select extends ParsedElement {
         this.internals = this.attachInternals();
         this.internals.role = 'presentation';
     }
-    async render({ slots, observed }) {
+    async render({ slots, observed, disabled }) {
         const name = this.getAttribute("name");
         this.#loader = Loaders.fromAttributes(this, 'loaders:select', { options: slots.options });
         await this.#loader.prefetch?.();
         const fragment = this.template().withOverlay({ slots, name }).render();
         this.#input = fragment.querySelector('input');
         this.#badges = fragment.querySelector('badges');
+
+        this.value = observed.value;
+        this.disabled = disabled;
+        this.readonly = observed.readonly;
+
         this.#ddmenu = fragment.querySelector('ful-dropdown');
         this.#multiple = this.hasAttribute("multiple");
         const label = fragment.querySelector('label');
@@ -1731,7 +1757,6 @@ class Select extends ParsedElement {
         this.#input.ariaDescribedByElements = [this.#fieldError];
         this.#input.ariaLabelledByElements = [label];
 
-
         const self = this;
         const [dload, abortdload] = timing.debounce(400, () => self.#ddmenu.show(() => self.#loader.load(self.#input.value)));
         this.addEventListener('click', (/** @type any */e) => {
@@ -1824,6 +1849,11 @@ class Select extends ParsedElement {
         this.#badges.append(...badges);
     }
     set value(value) {
+        if(value === null){
+            this.#values = new Map();
+            this.#syncBadges();
+            return;            
+        }
         (async () => {
             const entries = await (this.#multiple ? this.#loader.exact(...value) : this.#loader.exact(value));
             this.#values = new Map(entries);
@@ -1851,7 +1881,7 @@ class Select extends ParsedElement {
 }
 
 class RadioGroup extends ParsedElement {
-    static observed = ['value'];
+    static observed = ['value', 'readonly:presence'];
     static slots = true;
     static template = `
         <fieldset>
@@ -1876,6 +1906,7 @@ class RadioGroup extends ParsedElement {
         </fieldset>
     `;
     static formAssociated = true;
+    #fieldset;
     #fieldError;
     #firstRadio;
     #booleanType;
@@ -1884,7 +1915,7 @@ class RadioGroup extends ParsedElement {
         this.internals = this.attachInternals();
         this.internals.role = 'radiogroup';
     }
-    render({ slots }) {
+    render({ slots, observed, disabled }) {
         const name = this.getAttribute('name') ?? Attributes.uid('ful-radiogroup');
         const radioEls = Array.from(slots.default.querySelectorAll('ful-radio'));
         const inputsAndLabels = radioEls.map(el => {
@@ -1911,6 +1942,10 @@ class RadioGroup extends ParsedElement {
 
         radioEls.forEach(el => el.remove());
         this.template().withOverlay({ name, slots, inputsAndLabels }).renderTo(this);
+        this.#fieldset = this.firstElementChild;
+        this.disabled = disabled;
+        this.readonly = observed.readonly;
+        this.value = observed.value;
         this.#fieldError = this.querySelector('ful-field-error');
         this.ariaDescribedByElements = [this.#fieldError];
         this.#firstRadio = this.querySelector('input[type=radio]');
@@ -1933,7 +1968,19 @@ class RadioGroup extends ParsedElement {
         if (el) {
             el.checked = true;
         }
+    }     
+    get readonly(){
+        return this.#fieldset.inert;
+    }
+    set readonly(v) {
+        this.#fieldset.inert = v;
+    }        
+    get disabled(){
+        return this.#fieldset.hasAttribute('disabled');
     }
+    set disabled(d){
+        Attributes.toggle(this.#fieldset, 'disabled', d);
+    }    
     focus(options) {
         this.#firstRadio.focus(options);
     }
@@ -1949,7 +1996,7 @@ class RadioGroup extends ParsedElement {
 }
 
 class Checkbox extends ParsedElement {
-    static observed = ['value:bool'];
+    static observed = ['value:bool', 'readonly:presence'];
     static slots = true;
     static template = `
         <div data-tpl-class="klass">
@@ -1960,6 +2007,7 @@ class Checkbox extends ParsedElement {
         </div>
         <ful-field-error></ful-field-error>
     `;
+    #container;
     #input;
     #fieldError;
     static formAssociated = true;
@@ -1968,11 +2016,15 @@ class Checkbox extends ParsedElement {
         this.internals = this.attachInternals();
         this.internals.role = 'presentation';
     }
-    render({ slots }) {
+    render({ slots, observed, disabled }) {
         const klass = this.getAttribute('type') == 'switch' ? "form-check form-switch" : "form-check";
         const fragment = this.template().withOverlay({ slots, klass }).render();
+        this.#container = fragment.firstElementChild;
         this.#input = fragment.querySelector("input");
         Attributes.forward('input-', this, this.#input);
+        this.disabled = disabled;
+        this.readonly = observed.readonly;
+        this.value = observed.value;
         this.#input.addEventListener('change', (evt) => {
             evt.stopPropagation();
             this.dispatchEvent(new CustomEvent('change', {
@@ -1984,7 +2036,13 @@ class Checkbox extends ParsedElement {
             }));
         });
         const label = fragment.querySelector('label');
-        label.addEventListener('click', () => { this.focus(); this.value = !this.value; });
+        label.addEventListener('click', () => {
+            this.focus();
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.value = !this.value;
+        });
         this.#fieldError = fragment.querySelector('ful-field-error');
         this.#input.ariaDescribedByElements = [this.#fieldError];
         this.#input.ariaLabelledByElements = [label];
@@ -1996,6 +2054,18 @@ class Checkbox extends ParsedElement {
     set value(value) {
         this.#input.checked = value;
     }
+    get readonly(){
+        return this.#container.inert;
+    }
+    set readonly(v) {
+        this.#container.inert = v;
+    }     
+    get disabled() {
+        return this.#input.hasAttribute('disabled');
+    }
+    set disabled(d) {
+        Attributes.toggle(this.#input, 'disabled', d);
+    }
     focus(options) {
         this.#input.focus(options);
     }