@optionfactory/ful 0.37.0 → 0.39.0

package/dist/ful.iife.js

@@ -700,6 +700,20 @@ var ful = (function (exports) {
 
     /* global Infinity, CSS */
 
+    function flatten(obj, prefix) {
+        return Object.keys(obj).reduce((acc, k) => {
+            const pre = prefix.length ? prefix + '.' : '';
+            if (typeof obj[k] === 'object' && obj[k] !== null) {
+                Object.assign(acc, flatten(obj[k], pre + k));
+            } else {
+                acc[pre + k] = obj[k];
+            }
+            return acc;
+        }, {});
+    }
+
+
+
     class Form extends Templated(HTMLElement) {
         static MUTATORS = {};
         static EXTRACTORS = {};
@@ -737,12 +751,9 @@ var ful = (function (exports) {
             });
         }
         setValues(values) {
-            for (let k in values) {
-                if (!values.hasOwnProperty(k)) {
-                    continue;
-                }
-                Array.from(this.querySelectorAll(`[name='${CSS.escape(k)}']`)).forEach((el) => {
-                    Form.mutate(Form.MUTATORS, el, values[k], k, values);
+            for (const [flattenedKey, value] of Object.entries(flatten(values, ''))) {
+                Array.from(this.querySelectorAll(`[name='${CSS.escape(flattenedKey)}']`)).forEach((el) => {
+                    Form.mutate(Form.MUTATORS, el, value, flattenedKey);
                 });
             }
         }
@@ -758,15 +769,13 @@ var ful = (function (exports) {
                     return Form.providePath(result, el.getAttribute('name'), Form.extract(Form.EXTRACTORS, el));
                 }, {});
         }
-        setErrors(errors, scroll) {
+        setErrors(errors) {
             this.clearErrors();
             errors
                 .filter((e) => e.type === 'FIELD_ERROR' || e.type === 'INVALID_FORMAT')
                 .forEach((e) => {
                     const name = e.context.replace("[", ".").replace("].", ".");
-                    //TODO: match [name=] ful-validation-target and [name=]:not(:has(ful-validation-target))
-                    //
-                    this.querySelectorAll(`[name='${CSS.escape(name)}']`)
+                    this.querySelectorAll(`[name='${CSS.escape(name)}'] [ful-validation-target],[name='${CSS.escape(name)}']:not(:has([ful-validation-target]))`)
                         .forEach(input => input.classList.add('is-invalid'));
                     this.querySelectorAll(`ful-field-error[field='${CSS.escape(name)}']`)
                         .forEach(el => el.innerText = e.reason);
@@ -780,7 +789,7 @@ var ful = (function (exports) {
                     }
                 });
 
-            if (!scroll) {
+            if (!this.hasAttribute('scroll-on-error')) {
                 return;
             }
             const ys = Array.from(this.querySelectorAll('ful-field-error'))
@@ -816,15 +825,12 @@ var ful = (function (exports) {
             if (el.dataset['fulBindType'] === 'boolean') {
                 return !el.value ? null : el.value === 'true';
             }
-            if (el.getValue) {
-                return el.getValue();
-            }
             return el.value || null;
         }
-        static mutate(mutators, el, raw, key, values) {
+        static mutate(mutators, el, raw, flattenedKey) {
             const maybeMutator = mutators[el.dataset['fulBindMutator']] || mutators[el.dataset['fulBindProvide']];
             if (maybeMutator) {
-                maybeMutator(el, raw, key, values);
+                maybeMutator(el, raw, flattenedKey);
                 return;
             }
             if (el.getAttribute('type') === 'radio') {
@@ -835,10 +841,6 @@ var ful = (function (exports) {
                 el.checked = raw;
                 return;
             }
-            if (el.setValue) {
-                el.setValue(raw);
-                return;
-            }
             el.value = raw;
         }
 
@@ -893,21 +895,45 @@ var ful = (function (exports) {
     <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
 `, ful_input_ec);
 
-    class Input extends Templated(HTMLElement, ful_input_template_) {
+    class StatelessInput extends Templated(HTMLElement, ful_input_template_) {
         render(slotted, template) {
-            const input = slotted.input = slotted.input || (() => {
+            const input = this.input = slotted.input = slotted.input || (() => {
                 const el = document.createElement("input");
                 el.classList.add("form-control");
                 return el;
             })();
+            input.setAttribute('ful-validation-target', '');
+            
             const id = input.getAttribute('id') || this.getAttribute('input-id') || Attributes.uid('ful-input');
             Attributes.forward('input-', this, slotted.input);
             Attributes.defaultValue(slotted.input, "id", id);
             Attributes.defaultValue(slotted.input, "type", "text");
             Attributes.defaultValue(slotted.input, "placeholder", " ");
-            const name = input.getAttribute('name');
+            const name = this.getAttribute('name');
             return template.render({ id, name, slotted });
         }
+
+    }
+
+    class Input extends Stateful(StatelessInput, [], ['value']) {
+        render(slotted, template) {
+            const fragment = super.render(slotted, template);
+            this.input.value = this.getAttribute('value');
+            return fragment;
+        }
+        get value() {
+            if (this.input) {
+                return this.getAttribute('value');
+            }
+            return this.input.value;
+        }
+        set value(value) {
+            if (!this.input) {
+                //handled during rendering
+                return;
+            }
+            this.input.value = value;
+        }
         static configure() {
             customElements.define('ful-input', Input);
         }
@@ -944,18 +970,17 @@ var ful = (function (exports) {
             const type = this.getAttribute("type") || 'local';
             const remote = type != 'local';
             const loadOnce = this.getAttribute('load') != 'always';
-
+            const name = this.getAttribute('name');
             const input = slotted.input = slotted.input || (() => {
                 return document.createElement("select");
             })();
+            input.setAttribute('ful-validation-target', '');
+
             const id = input.getAttribute('id') || this.getAttribute('input-id') || Attributes.uid('ful-select');
             const tsId = `${id}-ts-control`;
             Attributes.forward('input-', this, input);
             Attributes.defaultValue(input, "id", id);
             Attributes.defaultValue(input, "placeholder", " ");
-            const name = input.getAttribute('name');
-            input.setValue = this.setValue.bind(this);
-            input.getValue = this.getValue.bind(this);
 
             //tomselect needs the input to have a parent.
             //se we move the input to a fragment
@@ -996,19 +1021,19 @@ var ful = (function (exports) {
                 load: this._unwrappedRemoteLoad,
                 shouldLoad: (query) => this.shouldLoad ? this.shouldLoad(query) : true
             } : {}, tsDefaultConfig, this.tsConfig));
-            console.log("ts created");
             //we remove the input to move it
             input.remove();
-
             return template.render({ id, tsId, name, input, slotted });
         }
-        async setValue(v) {
-            if(this._remote){
-                await this._unwrappedRemoteLoad({byId: v}, this.ts.loadCallback.bind(this.ts));
-            }
-            this.ts.setValue(v);
+        set value(v) {
+            (async () => {
+                if(this._remote){
+                    await this._unwrappedRemoteLoad({byId: v}, this.ts.loadCallback.bind(this.ts));
+                }
+                this.ts.setValue(v);
+            })();
         }
-        getValue() {
+        get value() {
             const v = this.ts.getValue();
             return v === '' ? null : v;
         }
@@ -1050,14 +1075,16 @@ var ful = (function (exports) {
 
     class RadioGroup extends Stateful(Templated(HTMLElement, ful_radiougroup_template_), ['disabled']) {
         render(slotted, template) {        
-            const name = this.getAttribute('input-name') || Attributes.uid('ful-radiogroup');
+            const name = this.getAttribute('name') || Attributes.uid('ful-radiogroup');
             const radioEls = Array.from(slotted.default.querySelectorAll('ful-radio'));
             const inputsAndLabels = radioEls.map(el => {
                 const input = document.createElement('input');
                 input.setAttribute('type', 'radio');
                 Attributes.forward('input-', this, input);
                 Attributes.forward('', el, input);
-                Attributes.defaultValue(input, 'name', name);
+                input.setAttribute('name', `${name}-ignore`);
+                input.setAttribute('ful-validation-target', '');
+                input.dataset['fulBindInclude'] = 'never';
                 const label = Fragments.fromChildNodes(el);
                 return [input, label];
             });
@@ -1070,6 +1097,13 @@ var ful = (function (exports) {
             });
             return fragment;
         }
+        get value() {
+            const checked = this.querySelector('input[type=radio]:checked');
+            return checked ? checked.value : null;
+        }
+        set value(value){
+            this.querySelector(`input[type=radio][value=${CSS.escape(value)}]`).checked = true;
+        }
         static configure() {
             customElements.define('ful-radio-group', RadioGroup);
         }    
@@ -1193,6 +1227,7 @@ var ful = (function (exports) {
     exports.Slots = Slots;
     exports.Spinner = Spinner;
     exports.Stateful = Stateful;
+    exports.StatelessInput = StatelessInput;
     exports.Templated = Templated;
     exports.VersionedStorage = VersionedStorage;
     exports.Wizard = Wizard;