@optionfactory/ful 4.0.13 → 4.0.15

package/dist/ful.mjs

@@ -1461,7 +1461,7 @@ class Input extends ParsedElement {
     _fragment(type, slots) {
         return this.template().withOverlay({ type, slots }).render();
     }
-    render({ slots, observed, disabled }) {
+    render({ slots, observed, disabled, skipValueSetup }) {
         const type = this._type();
         const fragment = this._fragment(type, slots);
         this._input = fragment.querySelector("input,textarea");
@@ -1469,7 +1469,9 @@ class Input extends ParsedElement {
         Attributes.forward('input-', this, this._input);
         this.disabled = disabled;
         this.readonly = observed.readonly;
-        this.value = observed.value;
+        if(!skipValueSetup){
+            this.value = observed.value;
+        }
 
         this._input.addEventListener('change', (evt) => {
             evt.stopPropagation();
@@ -1724,24 +1726,24 @@ class InputFile extends Input {
         <div data-ref="dropzone" class="dropzone" data-tpl-if="!slots.dropzone">
             {{ #l10n:t('dropzonelabel') }}
         </div>
-        <div data-ref="items" class="items"></div>
+        <ful-item-list></ful-item-list>
         <ful-field-warnings></ful-field-warnings>
         <ful-field-error></ful-field-error>
     `;
     static templates = {
         items: `
-            <div class="item" data-tpl-each="files" data-tpl-var="file" data-tpl-data-name="file.name">
-                <div class="filename"><span>{{ file.name }}</span></div>
-                <div class="size">{{ #bytes:format(file.size) }}</div>
-                <button class="btn btn-sm btn-outline-danger"><i class="bi bi-x-lg"></i></button>
-            </div>
+            <ful-item data-tpl-each="files" data-tpl-var="file" data-tpl-data-name="file.name">
+                <div>{{ file.name }}</div>
+                <div>{{ #bytes:format(file.size) }}</div>
+                <button type="button" class="btn btn-sm btn-outline-danger bi bi-x-lg"></button>
+            </ful-item>
         `,
         warning: `<ful-field-warning>{{ #l10n:t(key, args) }}</ful-field-warning>`
     }
     render(conf) {
         const { observed } = conf;
         super.render(conf);
-        this.#items = this.querySelector("[data-ref=items]");
+        this.#items = this.querySelector("ful-item-list");
         this.#dropzone = this.querySelector("[data-ref=dropzone]");
         this.#warnings = this.querySelector("ful-field-warnings");
         this.accept = observed.accept;
@@ -1757,7 +1759,7 @@ class InputFile extends Input {
             if (!e.target.closest("button")) {
                 return;
             }
-            const fileName = e.target.closest(".item").dataset.name;
+            const fileName = e.target.closest("ful-item").dataset.name;
             const dt = new DataTransfer();
             [...this.files].filter(f => f.name !== fileName).forEach(f => dt.items.add(f));
             this.files = dt.files;
@@ -1789,11 +1791,7 @@ class InputFile extends Input {
         this.#ensureAcceptable();
         this.#ensureFileSizes();
         this.#ensureTotalSize();
-        if(this.#useItemlist){
-            this.template('items').withOverlay({ files: this.files }).withModule('bytes', { format: this.#formatByteSize }).renderTo(this.#items);
-        }else {
-            this.#items.replaceChildren();
-        }
+        this.template('items').withOverlay({ files: this.files }).withModule('bytes', { format: this.#formatByteSize }).renderTo(this.#items);
     }
     warning(key, args) {
         this.template('warning').withOverlay({ key, args }).renderTo(this.#warnings);
@@ -1854,7 +1852,7 @@ class InputFile extends Input {
     set multiple(v) {
         this._input.multiple = v;
         this.reflect(() => {
-            this.setAttribute('multiple', this._input.multiple);
+            Attributes.toggle(this, "multiple", v);
         });
     }
     get files() {
@@ -1887,7 +1885,6 @@ class InputFile extends Input {
         this.reflect(() => {
             this.setAttribute('maxfilesize', v);
         });
-
     }
     #maxtotalsize;
     get maxtotalsize() {
@@ -1905,7 +1902,6 @@ class InputFile extends Input {
     }
     set itemlist(v) {
         this.#useItemlist = v;
-        Attributes.toggle(this.#items, "hidden", !v);
         this.reflect(() => {
             Attributes.toggle(this, "itemlist", v);
         });
@@ -1916,7 +1912,6 @@ class InputFile extends Input {
     }
     set dropzone(v) {
         this.#useDropzone = v;
-        Attributes.toggle(this.#dropzone, "hidden", !v);
         this.reflect(() => {
             Attributes.toggle(this, "dropzone", v);
         });
@@ -2145,7 +2140,7 @@ class Dropdown extends ParsedElement {
 }
 
 class Select extends ParsedElement {
-    static observed = ['value:csvm', 'readonly:presence']
+    static observed = ['value:csvm', 'readonly:presence', 'itemlist:presence']
     static slots = true
     static template = `
         <div class="form-label">
@@ -2165,8 +2160,17 @@ class Select extends ParsedElement {
             {{{{ slots.after }}}}
             <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
         </div>
+        <ful-item-list></ful-item-list>
         <ful-field-error></ful-field-error>
     `;
+    static templates = {
+        items: `
+            <ful-item data-tpl-each="entries" data-tpl-var="entry" data-tpl-data-key="entry[0]">
+                <div>{{ entry[1][0] }}</div>
+                <button type="button" class="btn btn-sm btn-outline-danger bi bi-x-lg"></button>
+            </ful-item>
+        `
+    }    
     static mappers = {
         "csvm": (v, name, el) => {
             if (el.hasAttribute("multiple")) {
@@ -2181,6 +2185,7 @@ class Select extends ParsedElement {
     #badges
     #ddmenu
     #input
+    #items;
     #multiple
     #fieldError
     #values = new Map()
@@ -2196,12 +2201,14 @@ class Select extends ParsedElement {
         await this.#loader.prefetch?.();
         const fragment = this.template().withOverlay({ slots, name }).render();
         this.#input = fragment.querySelector('input');
+        this.#items = fragment.querySelector("ful-item-list");
         Attributes.forward('input-', this, this.#input);
         this.#badges = fragment.querySelector('badges');
 
         this.value = observed.value;
         this.disabled = disabled;
         this.readonly = observed.readonly;
+        this.itemlist = observed.itemlist;
 
         this.#ddmenu = fragment.querySelector('ful-dropdown');
         const label = fragment.querySelector('label');
@@ -2226,6 +2233,22 @@ class Select extends ParsedElement {
             this.#input.focus();
             dload();
         });
+        this.#items.addEventListener('click', (e) => {
+            e.stopPropagation();
+            if (!e.target.closest("button")) {
+                return;
+            }
+            if(this.disabled || this.readonly){
+                return;
+            }            
+            const idx = [...this.#items.children].indexOf(e.target.closest('ful-item'));
+            if (idx === -1) {
+                return;
+            }
+            this.#values.delete(Array.from(this.#values.keys()).pop());
+            this.#changed();
+            this.#syncBadges();
+        });
         this.#badges.addEventListener('click', (e) => {
             e.stopPropagation();
             if(this.disabled || this.readonly){
@@ -2333,6 +2356,8 @@ class Select extends ParsedElement {
         });
         this.#badges.replaceChildren();
         this.#badges.append(...badges);
+        this.#items.replaceChildren();
+        this.template('items').withOverlay({ entries: this.#values.entries() }).renderTo(this.#items);
     }
     set value(vs) {
         if(vs === null){
@@ -2374,6 +2399,16 @@ class Select extends ParsedElement {
             Attributes.toggle(this, 'readonly', v);
         });
     }
+    #useItemlist;
+    get itemlist() {
+        return this.#useItemlist;
+    }
+    set itemlist(v) {
+        this.#useItemlist = v;
+        this.reflect(() => {
+            Attributes.toggle(this, "itemlist", v);
+        });
+    }
     focus(options) {
         this.#input.focus(options);
     }
@@ -3011,15 +3046,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>
@@ -3032,32 +3068,21 @@ 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, skipValueSetup: true});
+        this.#operator = this.querySelector('[data-ref=operator]');
+        this.#value1 = this.querySelector('[data-ref=value1]');
+        this.#value2 = this.querySelector('[data-ref=value2]');
+        this.value = conf.observed.value;
+
         this.addEventListener('click', (evt) => {
             const target = /** @type HTMLElement */ (evt.target);
             if (!target.matches('ul > li > a')) {
@@ -3080,42 +3105,25 @@ 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);
-    }
-    setCustomValidity(error) {
-        if (!error) {
-            this.internals.setValidity({});
-            this.#fieldError.innerText = "";
-            return;
-        }
-        this.internals.setValidity({ customError: true }, " ");
-        this.#fieldError.innerText = error;
     }
 }
 
-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>
@@ -3128,32 +3136,22 @@ 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, skipValueSetup: true});
+
+        this.#operator = this.querySelector('[data-ref=operator]');
+        this.#value1 = this.querySelector('[data-ref=value1]');
+        this.#value2 = this.querySelector('[data-ref=value2]');
+        this.value = conf.observed.value;
+        
         this.addEventListener('click', (evt) => {
             const target = /** @type HTMLElement */(evt.target);
             if (!target.matches('ul > li > a')) {
@@ -3175,42 +3173,25 @@ 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);
-    }
-    setCustomValidity(error) {
-        if (!error) {
-            this.internals.setValidity({});
-            this.#fieldError.innerText = "";
-            return;
-        }
-        this.internals.setValidity({ customError: true }, " ");
-        this.#fieldError.innerText = error;
     }
 }
 
-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>
@@ -3219,30 +3200,20 @@ 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, skipValueSetup: true});
+
+        this.#operator = this.querySelector('[data-ref=operator]');
+        this.#value = this.querySelector('[data-ref=value]');
+        this.value = conf.observed.value;
+
         this.addEventListener('click', (evt) => {
             const target = /** @type HTMLElement */(evt.target);
             if (!target.matches('ul > li > a')) {
@@ -3263,29 +3234,11 @@ class TextFilter extends ParsedElement {
     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;
     }
 }