lexgui 8.2.3 → 8.2.5

package/build/lexgui.module.js

@@ -12,7 +12,7 @@ const g = globalThis;
 let LX = g.LX;
 if (!LX) {
     LX = {
-        version: '8.2.3',
+        version: '8.2.5',
         ready: false,
         extensions: [], // Store extensions used
         extraCommandbarEntries: [], // User specific entries for command bar
@@ -1716,8 +1716,8 @@ class TextInput extends BaseComponent {
             }
             wValue.style.textAlign = options.float ?? '';
             wValue.addEventListener('transitionstart', (e) => {
-                if (e.propertyName === 'background-color' &&
-                    wValue.matches(':-webkit-autofill')) {
+                if (e.propertyName === 'background-color'
+                    && wValue.matches(':-webkit-autofill')) {
                     this.syncFromDOM();
                 }
             });
@@ -2221,10 +2221,10 @@ class Checkbox extends BaseComponent {
             const realNameWidth = this.root.domName?.style.width ?? '0px';
             container.style.width = options.inputWidth ?? `calc( 100% - ${realNameWidth})`;
         };
-        var container = document.createElement('div');
+        let container = document.createElement('div');
         container.className = 'flex items-center gap-2 my-0 mx-auto [&_span]:truncate [&_span]:flex-auto-fill';
         this.root.appendChild(container);
-        let checkbox = LX.makeElement('input', LX.mergeClass('lexcheckbox rounded-xl', options.className ?? 'primary'));
+        let checkbox = LX.makeElement('input', LX.mergeClass('lexcheckbox rounded-xl disabled:pointer-events-none disabled:opacity-50', options.className ?? 'primary'));
         checkbox.type = 'checkbox';
         checkbox.checked = value;
         checkbox.disabled = this.disabled;
@@ -3037,8 +3037,8 @@ class Counter extends BaseComponent {
             if (e.shiftKey)
                 mult *= 10;
             this.set(this.count + mult, false, e);
-        }, { disabled: this.disabled, className: `p-0 ${this.disabled ? '' : 'hover:bg-secondary'} rounded-r-lg`,
-            buttonClass: 'px-0 bg-none h-7', icon: 'Plus' });
+        }, { disabled: this.disabled, className: `p-0 ${this.disabled ? '' : 'hover:bg-secondary'} rounded-r-lg`, buttonClass: 'px-0 bg-none h-7',
+            icon: 'Plus' });
         container.appendChild(addButton.root);
     }
 }
@@ -3797,7 +3797,8 @@ class DatePicker extends BaseComponent {
                 const calendarIcon = LX.makeIcon('Calendar');
                 const calendarButton = new Button(null, d1, () => {
                     this._popover = new Popover(calendarButton.root, [this.calendar]);
-                }, { disabled: this.disabled, buttonClass: `outline flex flex-row px-3 ${emptyDate ? '' : 'text-muted-foreground'} justify-between` });
+                }, { disabled: this.disabled,
+                    buttonClass: `outline flex flex-row px-3 ${emptyDate ? '' : 'text-muted-foreground'} justify-between` });
                 calendarButton.root.querySelector('button').appendChild(calendarIcon);
                 calendarButton.root.style.width = '100%';
                 container.appendChild(calendarButton.root);
@@ -4299,6 +4300,8 @@ class Form extends BaseComponent {
         }
         // This is basically the "submit" button
         this.primaryButton = new Button(null, options.primaryActionName ?? 'Submit', (value, event) => {
+            // Force sync before testing text patterns
+            this.syncInputs();
             const errors = [];
             for (let entry in data) {
                 let entryData = data[entry];
@@ -4381,7 +4384,8 @@ class Layers extends BaseComponent {
             }
             for (let bit = 0; bit < maxBits; ++bit) {
                 let layer = document.createElement('button');
-                layer.className = `lexlayer size-6 text-secondary-foreground text-center content-center place-self-center cursor-pointer font-semibold text-xs rounded-lg select-none 
+                layer.className =
+                    `lexlayer size-6 text-secondary-foreground text-center content-center place-self-center cursor-pointer font-semibold text-xs rounded-lg select-none 
                     disabled:pointer-events-none disabled:opacity-50`;
                 layer.disabled = this.disabled;
                 if (val != undefined) {
@@ -4978,6 +4982,7 @@ class NodeTree {
         item.id = LX.getSupportedDOMName(node.id);
         item.tabIndex = '0';
         item.treeData = node;
+        node.treeEl = item;
         // Select hierarchy icon
         let icon = (this.options.skipDefaultIcon ?? true) ? null : 'Dot'; // Default: no childs
         if (isParent) {
@@ -5460,21 +5465,45 @@ class NodeTree {
             el.focus();
         }
     }
-    select(id) {
+    /* 'path' here helps to identity the correct item based on its parent path, for same 'id' issues */
+    select(id, path) {
         const nodeFilter = this.domEl.querySelector('.lexnodetreefilter');
         if (nodeFilter) {
             nodeFilter.value = '';
         }
         this.refresh(null, id);
         this.domEl.querySelectorAll('.selected').forEach((i) => i.classList.remove('selected'));
-        // Unselect
-        if (!id) {
-            this.selected.length = 0;
-            return;
+        if (id === undefined) {
+            // if no id, try with the path
+            if (path !== undefined) {
+                id = path.at(-1);
+            }
+            else {
+                // Unselect
+                this.selected.length = 0;
+                return;
+            }
+        }
+        let el = null;
+        if (path !== undefined) {
+            let sourceData = this.data;
+            for (const p of path) {
+                const pItem = sourceData.children.find((item) => item.id === p);
+                if (!pItem)
+                    break;
+                sourceData = pItem;
+            }
+            el = sourceData.treeEl;
+            console.assert(el, 'NodeTree: No domEl in item ' + id);
+        }
+        else if (id !== undefined) {
+            // Element should exist, since tree was refreshed to show it
+            el = this.domEl.querySelector('#' + LX.getSupportedDOMName(id));
+            console.assert(el, "NodeTree: Can't select node " + id);
+        }
+        if (!el) {
+            console.assert(el, "NodeTree: Can't select node " + id);
         }
-        // Element should exist, since tree was refreshed to show it
-        const el = this.domEl.querySelector('#' + LX.getSupportedDOMName(id));
-        console.assert(el, "NodeTree: Can't select node " + id);
         el.classList.add('selected');
         this.selected = [el.treeData];
         el.focus();
@@ -7276,7 +7305,8 @@ class Tags extends BaseComponent {
             tagsContainer.innerHTML = '';
             for (let i = 0; i < value.length; ++i) {
                 const tagName = value[i];
-                const tag = LX.makeElement('span', 'lextag bg-primary px-2 py-1 rounded-xl min-w-2 justify-center text-primary-foreground gap-1 text-sm select-none', tagName);
+                const tagClass = LX.mergeClass('lextag bg-primary px-2 py-1 rounded-xl min-w-2 justify-center text-primary-foreground gap-1 text-sm select-none', options.tagClass);
+                const tag = LX.makeElement('span', tagClass, tagName);
                 if (!this.disabled) {
                     const removeButton = LX.makeIcon('X', { svgClass: 'sm' });
                     tag.appendChild(removeButton);
@@ -7339,7 +7369,7 @@ class TextArea extends BaseComponent {
         container.className = 'lextextarea';
         container.style.display = 'flex';
         this.root.appendChild(container);
-        let wValue = LX.makeElement('textarea', options.inputClass ?? '');
+        let wValue = LX.makeElement('textarea', LX.mergeClass('w-full text-sm text-foreground bg-card border-color disabled:pointer-events-none disabled:opacity-50 rounded-lg outline-none pad-md', options.inputClass ?? ''));
         wValue.value = value ?? '';
         wValue.style.textAlign = options.float ?? '';
         wValue.disabled = this.disabled;
@@ -7355,9 +7385,18 @@ class TextArea extends BaseComponent {
             wValue.setAttribute('placeholder', options.placeholder);
         }
         const trigger = options.trigger ?? 'default';
+        const submitOnEnterKey = options.submitOnEnterKey ?? true;
         if (trigger == 'default') {
+            wValue.addEventListener('keydown', function (e) {
+                if (submitOnEnterKey && e.key == 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    return false;
+                }
+            });
             wValue.addEventListener('keyup', function (e) {
-                if (e.key == 'Enter') {
+                if ((submitOnEnterKey && e.key == 'Enter' && !e.shiftKey)
+                    || e.key == 'Escape') {
+                    e.preventDefault();
                     wValue.blur();
                 }
             });
@@ -7446,7 +7485,7 @@ class Toggle extends BaseComponent {
         var container = document.createElement('div');
         container.className = 'flex flex-row gap-2 items-center';
         this.root.appendChild(container);
-        let toggle = LX.makeElement('input', LX.mergeClass('lextoggle relative inline-grid place-content-center cursor-pointer shrink-0 select-none', options.className));
+        let toggle = LX.makeElement('input', LX.mergeClass('lextoggle relative inline-grid place-content-center cursor-pointer shrink-0 select-none disabled:pointer-events-none disabled:opacity-50', options.className));
         toggle.type = 'checkbox';
         toggle.checked = value;
         toggle.iValue = value;
@@ -10841,29 +10880,37 @@ function prompt(text, title, callback, options = {}) {
     options.modal = true;
     options.className = 'prompt';
     let value = '';
+    const _submitFn = () => {
+        if (options.required && value === '') {
+            text += text.includes('You must fill the input text.') ? '' : '\nYou must fill the input text.';
+            dialog.close();
+            prompt(text, title, callback, options);
+        }
+        else {
+            if (callback)
+                callback.call(LX, value);
+            dialog.close();
+        }
+    };
     const dialog = new LX.Dialog(title, (p) => {
-        p.addTextArea(null, text, null, { disabled: true, fitHeight: true });
+        LX.makeElement('p', 'max-h-64 p-2 break-word overflow-scroll', text, p);
         if (options.input ?? true) {
-            p.addText(null, options.input || value, (v) => value = v, { placeholder: '...' });
+            p.addText(null, options.input || value, (v, e) => {
+                value = v;
+                if (e?.constructor === KeyboardEvent) {
+                    _submitFn();
+                }
+            }, { placeholder: '...' });
         }
         p.sameLine(2);
         p.addButton(null, 'Cancel', () => {
             if (options.on_cancel)
                 options.on_cancel();
             dialog.close();
-        });
+        }, { width: '50%', buttonClass: 'destructive' });
         p.addButton(null, options.accept || 'Continue', () => {
-            if (options.required && value === '') {
-                text += text.includes('You must fill the input text.') ? '' : '\nYou must fill the input text.';
-                dialog.close();
-                prompt(text, title, callback, options);
-            }
-            else {
-                if (callback)
-                    callback.call(LX, value);
-                dialog.close();
-            }
-        }, { buttonClass: 'primary' });
+            _submitFn();
+        }, { width: '50%', buttonClass: 'primary' });
     }, options);
     // Focus text prompt
     if (options.input ?? true) {
@@ -11705,7 +11752,7 @@ class AlertDialog extends Dialog {
         options.modal = true;
         super(undefined, (p) => {
             p.root.className = LX.mergeClass(p.root.className, 'pad-2xl flex flex-col gap-2');
-            LX.makeContainer(['100%', '100%'], 'text-lg font-medium text-foreground', title, p);
+            LX.makeContainer(['100%', '100%'], 'text-lg font-medium text-foreground px-2', title, p);
             p.addTextArea(null, message, null, { disabled: true, fitHeight: true, inputClass: 'bg-none text-sm text-muted-foreground' });
             p.sameLine(2, 'justify-end');
             p.addButton(null, options.cancelText ?? 'Cancel', () => this.destroy(), {