@optionfactory/ful 4.0.14 → 4.0.16

package/dist/ful.mjs

@@ -1461,15 +1461,17 @@ class Input extends ParsedElement {
     _fragment(type, slots) {
         return this.template().withOverlay({ type, slots }).render();
     }
-    render({ slots, observed, disabled }) {
+    render({ slots, observed, disabled, skipObservedSetup }) {
         const type = this._type();
         const fragment = this._fragment(type, slots);
         this._input = fragment.querySelector("input,textarea");
 
         Attributes.forward('input-', this, this._input);
-        this.disabled = disabled;
-        this.readonly = observed.readonly;
-        this.value = observed.value;
+        if (!skipObservedSetup) {
+            this.disabled = disabled;
+            this.readonly = observed.readonly;
+            this.value = observed.value;
+        }
 
         this._input.addEventListener('change', (evt) => {
             evt.stopPropagation();
@@ -2164,7 +2166,7 @@ class Select extends ParsedElement {
     static templates = {
         items: `
             <ful-item data-tpl-each="entries" data-tpl-var="entry" data-tpl-data-key="entry[0]">
-                <div>{{ entry[1] }}</div>
+                <div>{{ entry[1][0] }}</div>
                 <button type="button" class="btn btn-sm btn-outline-danger bi bi-x-lg"></button>
             </ful-item>
         `
@@ -2990,7 +2992,8 @@ class Table extends ParsedElement {
             }, this.#latestRequest.sortRequest, this.#latestRequest.filterRequest);
         });
         this.addEventListener('sort-requested', async (/** @type any */e) => {
-            await this.load(this.#latestRequest.pageRequest, e.detail.value, this.#latestRequest.filterRequest);
+            const sortRequest = e.detail.value.order ? e.detail.value : null;
+            await this.load(this.#latestRequest.pageRequest, sortRequest, this.#latestRequest.filterRequest);
             this.#sorters.forEach(s => s.order = null);
             e.target.order = e.detail.value.order;
         });
@@ -3044,15 +3047,16 @@ class Table extends ParsedElement {
     }
 }
 
-class InstantFilter extends ParsedElement {
-    static observed = ["value:json"];
-    static slots = true;
+class InstantFilter extends Input {
+    static observed = ['value:json', 'readonly:presence'];
     static template = `
-        <div class="form-label" data-tpl-if="label">
-            <label>{{{{ label }}}}</label>
+        <div class="form-label">
+            <label>{{{{ slots.default }}}}</label>
             {{{{ slots.info }}}}
         </div>
         <div class="input-group">
+            <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+            {{{{ slots.before }}}}
             <button data-ref="operator" class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" value="LTE" form="">&PrecedesSlantEqual;</button>
             <ul class="dropdown-menu">
                 <li><a class="dropdown-item" role="button" value="EQ">=</a></li>
@@ -3065,32 +3069,24 @@ class InstantFilter extends ParsedElement {
             </ul>
             <input data-ref="value1" type="datetime-local" class="form-control" form="">
             <input data-ref="value2" type="datetime-local" class="form-control" form="" hidden>
-            <span class="input-group-text"><i class="bi bi-search"></i></span>
+            {{{{ slots.after }}}}
+            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
         </div>
         <ful-field-error></ful-field-error>
     `;
-    static formAssociated = true;
     #operator;
     #value1;
     #value2;
-    #fieldError;
-    constructor() {
-        super();
-        this.internals = this.attachInternals();
-    }
-    render({ slots }) {
-        const label = Fragments.toHtml(slots.default.cloneNode(true)).trim().length === 0 ? null : slots.default;
-        const name = this.getAttribute("name");
-        const fragment = this.template().withOverlay({ slots, label, name  }).render();
-        this.#operator = fragment.querySelector('[data-ref=operator]');
-        this.#value1 = fragment.querySelector('[data-ref=value1]');
-        this.#value2 = fragment.querySelector('[data-ref=value2]');
-        this.#fieldError = fragment.querySelector('ful-field-error');
-        const labelEl = fragment.querySelector('label');
-        labelEl?.addEventListener('click', () => this.focus());
-        this.#value1.ariaDescribedByElements = [this.#fieldError];
-        this.#value1.ariaLabelledByElements = labelEl ? [labelEl] : [];
-        this.replaceChildren(fragment);
+    render(conf) {
+        super.render({...conf, skipObservedSetup: true});
+        this.#operator = this.querySelector('[data-ref=operator]');
+        this.#value1 = this.querySelector('[data-ref=value1]');
+        this.#value2 = this.querySelector('[data-ref=value2]');
+
+        this.disabled = conf.disabled;
+        this.readonly = conf.observed.readonly;
+        this.value = conf.observed.value;
+
         this.addEventListener('click', (evt) => {
             const target = /** @type HTMLElement */ (evt.target);
             if (!target.matches('ul > li > a')) {
@@ -3113,42 +3109,38 @@ class InstantFilter extends ParsedElement {
         if (v === null || v === undefined) {
             this.#value1.value = '';
             this.#value2.value = '';
-            this.reflect(() => {
-                this.removeAttribute('value');
-            });
             return;
         }
         const [operator, ...values] = v;
         this.#operator.setAttribute('value', operator);
         this.#value1.value = values[0] ? Instant.isoToLocal(values[0]) : values[0];
         this.#value2.value = values[1] ? Instant.isoToLocal(values[1]) : values[1];
-        this.reflect(() => {
-            this.setAttribute('value', JSON.stringify(v));
-        });
     }
-    focus(options) {
-        this.#value1.focus(options);
+    set readonly(v) {
+        this.#value2.readOnly = v;
+        super.readonly = v;
+    }    
+    set disabled(d) {
+        Attributes.toggle(this.#value2, 'disabled', d);
+        super.disabled = d;
     }
-    setCustomValidity(error) {
-        if (!error) {
-            this.internals.setValidity({});
-            this.#fieldError.innerText = "";
-            return;
-        }
-        this.internals.setValidity({ customError: true }, " ");
-        this.#fieldError.innerText = error;
+    formResetCallback() {
+        const v = this.getAttribute("value");
+        this.value = v === null ? null : JSON.parse(v);
     }
+
 }
 
-class LocalDateFilter extends ParsedElement {
-    static observed = ["value:json"];
-    static slots = true;
+class LocalDateFilter extends Input {
+    static observed = ["value:json", 'readonly:presence'];
     static template = `
-        <div class="form-label" data-tpl-if="label">
-            <label>{{{{ label }}}}</label>
+        <div class="form-label">
+            <label>{{{{ slots.default }}}}</label>
             {{{{ slots.info }}}}
         </div>
         <div class="input-group">
+            <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+            {{{{ slots.before }}}}
             <button data-ref="operator" class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" value="EQ" form="">=</button>
             <ul class="dropdown-menu">
                 <li><a class="dropdown-item" role="button" value="EQ">=</a></li>
@@ -3161,32 +3153,25 @@ class LocalDateFilter extends ParsedElement {
             </ul>
             <input data-ref="value1" type="date" class="form-control" form="">
             <input data-ref="value2" type="date" class="form-control" form="" hidden>
-            <span class="input-group-text"><i class="bi bi-search"></i></span>
+            {{{{ slots.after }}}}
+            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
         </div>
         <ful-field-error></ful-field-error>
     `;
-    static formAssociated = true;
     #operator;
     #value1;
     #value2;
-    #fieldError;
-    constructor() {
-        super();
-        this.internals = this.attachInternals();
-    }
-    render({ slots }) {
-        const label = Fragments.toHtml(slots.default.cloneNode(true)).trim().length === 0 ? null : slots.default;
-        const name = this.getAttribute("name");
-        const fragment = this.template().withOverlay({ slots, label, name }).render();
-        this.#operator = fragment.querySelector('[data-ref=operator]');
-        this.#value1 = fragment.querySelector('[data-ref=value1]');
-        this.#value2 = fragment.querySelector('[data-ref=value2]');
-        this.#fieldError = fragment.querySelector('ful-field-error');
-        const labelEl = fragment.querySelector('label');
-        labelEl?.addEventListener('click', () => this.focus());
-        this.#value1.ariaDescribedByElements = [this.#fieldError];
-        this.#value1.ariaLabelledByElements = labelEl ? [labelEl] : [];
-        this.replaceChildren(fragment);
+    render(conf) {
+        super.render({...conf, skipObservedSetup: true});
+
+        this.#operator = this.querySelector('[data-ref=operator]');
+        this.#value1 = this.querySelector('[data-ref=value1]');
+        this.#value2 = this.querySelector('[data-ref=value2]');
+
+        this.disabled = conf.disabled;
+        this.readonly = conf.observed.readonly;
+        this.value = conf.observed.value;
+
         this.addEventListener('click', (evt) => {
             const target = /** @type HTMLElement */(evt.target);
             if (!target.matches('ul > li > a')) {
@@ -3208,42 +3193,37 @@ class LocalDateFilter extends ParsedElement {
         if (v === null || v === undefined) {
             this.#value1.value = '';
             this.#value2.value = '';
-            this.reflect(() => {
-                this.removeAttribute('value');
-            });
             return;
         }
         const [operator, ...values] = v;
         this.#operator.setAttibute('value', operator);
         this.#value1.value = values[0];
         this.#value2.value = values[1];
-        this.reflect(() => {
-            this.setAttribute('value', JSON.stringify(v));
-        });
     }
-    focus(options) {
-        this.#value1.focus(options);
+    set readonly(v) {
+        this.#value2.readOnly = v;
+        super.readonly = v;
     }
-    setCustomValidity(error) {
-        if (!error) {
-            this.internals.setValidity({});
-            this.#fieldError.innerText = "";
-            return;
-        }
-        this.internals.setValidity({ customError: true }, " ");
-        this.#fieldError.innerText = error;
+    set disabled(d) {
+        Attributes.toggle(this.#value2, 'disabled', d);
+        super.disabled = d;
+    }
+    formResetCallback() {
+        const v = this.getAttribute("value");
+        this.value = v === null ? null : JSON.parse(v);
     }
 }
 
-class TextFilter extends ParsedElement {
-    static observed = ["value:json"];
-    static slots = true;
+class TextFilter extends Input {
+    static observed = ["value:json", 'readonly:presence'];
     static template = `
-        <div class="form-label" data-tpl-if="label">
-            <label>{{{{ label }}}}</label>
+        <div class="form-label">
+            <label>{{{{ slots.default }}}}</label>
             {{{{ slots.info }}}}
         </div>
         <div class="input-group">
+            <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+            {{{{ slots.before }}}}
             <button data-ref="operator" class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" value="CONTAINS" form="">&mldr;a&mldr;</button>
             <ul class="dropdown-menu">
                 <li><a class="dropdown-item" role="button" value="CONTAINS">&mldr;a&mldr;</a></li>
@@ -3252,30 +3232,23 @@ class TextFilter extends ParsedElement {
                 <li><a class="dropdown-item" role="button" value="EQ">=</a></li>
             </ul>
             <input data-ref="value" type="text" class="form-control" form="">
-            <span class="input-group-text"><i class="bi bi-search"></i></span>
+            {{{{ slots.after }}}}
+            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
         </div>
         <ful-field-error></ful-field-error>
     `;
-    static formAssociated = true;
     #operator;
     #value;
-    #fieldError;
-    constructor() {
-        super();
-        this.internals = this.attachInternals();
-    }
-    render({ slots }) {
-        const label = Fragments.toHtml(slots.default.cloneNode(true)).trim().length === 0 ? null : slots.default;
-        const name = this.getAttribute("name");
-        const fragment = this.template().withOverlay({ slots, label, name }).render();
-        this.#operator = fragment.querySelector('[data-ref=operator]');
-        this.#value = fragment.querySelector('[data-ref=value]');
-        this.#fieldError = fragment.querySelector('ful-field-error');
-        const labelEl = fragment.querySelector('label');
-        labelEl?.addEventListener('click', () => this.focus());
-        this.#value.ariaDescribedByElements = [this.#fieldError];
-        this.#value.ariaLabelledByElements = labelEl ? [labelEl] : [];        
-        this.replaceChildren(fragment);
+    render(conf) {
+        super.render({...conf, skipObservedSetup: true});
+
+        this.#operator = this.querySelector('[data-ref=operator]');
+        this.#value = this.querySelector('[data-ref=value]');
+
+        this.disabled = conf.disabled;
+        this.readonly = conf.observed.readonly;
+        this.value = conf.observed.value;
+
         this.addEventListener('click', (evt) => {
             const target = /** @type HTMLElement */(evt.target);
             if (!target.matches('ul > li > a')) {
@@ -3287,38 +3260,22 @@ class TextFilter extends ParsedElement {
             btn.innerHTML = target.innerHTML;
         });
     }
-
     get value() {
         const operator = this.#operator.getAttribute('value');
         return this.#value.value === '' ? undefined : [operator, 'IGNORE_CASE', this.#value.value];
     }
-
     set value(v) {
         if (v === null || v === undefined) {
             this.#value.value = '';
-            this.reflect(() => {
-                this.removeAttribute('value');
-            });
             return;
         }
         const [operator, sensitivity, value] = v;
         this.#operator.setAttribute('value', operator);
         this.#value.value = value;
-        this.reflect(() => {
-            this.setAttribute('value', JSON.stringify(v));
-        });
     }
-    focus(options) {
-        this.#value.focus(options);
-    }
-    setCustomValidity(error) {
-        if (!error) {
-            this.internals.setValidity({});
-            this.#fieldError.innerText = "";
-            return;
-        }
-        this.internals.setValidity({ customError: true }, " ");
-        this.#fieldError.innerText = error;
+    formResetCallback() {
+        const v = this.getAttribute("value");
+        this.value = v === null ? null : JSON.parse(v);
     }
 }