app change

lib/ui/grid.js

@@ -54,12 +54,15 @@ class GridColumn {
 }
 
 class GridInputColumn extends GridColumn {
-    static createEdit(trigger) {
+    static get editing() { return true };
+
+    static createEdit(trigger, _col, _parent, vals) {
         const input = createElement('input');
         input.setAttribute('type', 'text');
         if (typeof trigger === 'function') {
             input.addEventListener('change', trigger);
         }
+        input.addEventListener('input', () => vals.__editing = true);
         return input;
     }
 
@@ -76,6 +79,29 @@ class GridInputColumn extends GridColumn {
     static setEnabled(element, enabled) { element.disabled = enabled === false }
 }
 
+class GridTextColumn extends GridInputColumn {
+    static createEdit(trigger, _col, _parent, vals) {
+        const input = createElement('textarea');
+        if (typeof trigger === 'function') {
+            input.addEventListener('change', trigger);
+        }
+        input.addEventListener('input', () => vals.__editing = true);
+        return input;
+    }
+
+    static setValue(element, val, _item, _col, grid) {
+        if (element.tagName !== 'TEXTAREA') {
+            super.setValue(element, val);
+        } else {
+            element.value = val;
+            if (val != null) {
+                const lines = String(val).split('\n').length;
+                element.style.height = `${lines * grid.lineHeight + 12}px`;
+            }
+        }
+    }
+}
+
 const SymbolDropdown = Symbol.for('ui-dropdown');
 
 class GridDropdownColumn extends GridColumn {
@@ -217,7 +243,8 @@ const ColumnTypes = {
     1: GridInputColumn,
     2: GridDropdownColumn,
     3: GridCheckboxColumn,
-    4: GridIconColumn
+    4: GridIconColumn,
+    5: GridTextColumn
 };
 
 class Grid {
@@ -248,6 +275,7 @@ class Grid {
     };
     virtualCount = 100;
     rowHeight = 36;
+    lineHeight = 24;
     extraRows = 0;
     filterRowHeight = 30;
     height;
@@ -274,6 +302,7 @@ class Grid {
         Dropdown: 2,
         Checkbox: 3,
         Icon: 4,
+        Text: 5,
         isCheckbox(type) { return type === 3 }
     };
 
@@ -715,10 +744,15 @@ class Grid {
         if (!this.holderDisabled) {
             const holder = createElement('div', 'grid-hover-holder');
             holder.addEventListener('mousedown', e => {
-                const keyid = e.currentTarget.keyid;
+                const holder = e.currentTarget;
+                const keyid = holder.keyid;
                 if (keyid == null) {
                     return;
                 }
+                delete holder.keyid;
+                if (holder.classList.contains('active')) {
+                    holder.classList.remove('active');
+                }
                 return this.#onRowClicked(e, (keyid >>> MaxColumnBit) - this.#startIndex, keyid & MaxColumnMask);
             });
             holder.addEventListener('dblclick', e => this.#onRowDblClicked(e));
@@ -846,8 +880,12 @@ class Grid {
                 const type = isCheckbox ? GridCheckboxColumn : this.#colTypes[col.key] ?? GridColumn;
                 let element;
                 if (!isCheckbox && selectChanged && typeof type.createEdit === 'function') {
+                    if (vals.__editing && type.editing) {
+                        val = type.getValue({ target: cell.children[0] });
+                        this.#onRowChanged(null, startIndex + i, col, val, true);
+                    }
                     element = selected ?
-                        type.createEdit(e => this.#onRowChanged(e, startIndex + i, col, type.getValue(e)), col, this.#refs.bodyContent) :
+                        type.createEdit(e => this.#onRowChanged(e, startIndex + i, col, type.getValue(e)), col, this.#refs.bodyContent, vals) :
                         type.create(col);
                     cell.replaceChildren(element);
                 } else {
@@ -864,7 +902,7 @@ class Grid {
                         enabled = item[enabled];
                     }
                 }
-                type.setValue(element, val, item, col);
+                type.setValue(element, val, item, col, this);
                 if (typeof type.setEnabled === 'function') {
                     type.setEnabled(element, enabled);
                 }
@@ -898,6 +936,9 @@ class Grid {
                     }
                 }
             });
+            if (vals.__editing) {
+                delete vals.__editing;
+            }
         });
     }
 
@@ -1322,7 +1363,7 @@ class Grid {
         if (overflow) {
             holder.keyid = keyid;
             holder.innerText = element.innerText;
-            const top = this.#refs.bodyContent.offsetTop + target.offsetTop + 1;
+            const top = this.#refs.bodyContent.offsetTop + target.offsetTop;
             let left = target.offsetLeft;
             let width = holder.offsetWidth;
             if (width > this.#bodyClientWidth) {
@@ -1412,7 +1453,7 @@ class Grid {
     }
 
     #onRowDblClicked(e) {
-        if (e.target.tagName === 'INPUT') {
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'LAYER' && e.target.className === 'check-box-inner' || e.target.tagName === 'LABEL' && (e.target.className === 'drop-text' || e.target.className === 'drop-caret')) {
             return;
         }
         const index = this.selectedIndex;
@@ -1427,7 +1468,7 @@ class Grid {
         }
     }
 
-    #onRowChanged(_e, index, col, value) {
+    #onRowChanged(_e, index, col, value, blur) {
         if (this.#currentSource == null) {
             return;
         }
@@ -1445,8 +1486,14 @@ class Grid {
         if (enabled !== false) {
             item[col.key] = value;
             row.__changed = true;
-            if (typeof col.onchanged === 'function') {
-                col.onchanged.call(this, item, value);
+            if (blur) {
+                if (typeof col.oneditend === 'function') {
+                    col.oneditend.call(this, item, value);
+                }
+            } else {
+                if (typeof col.onchanged === 'function') {
+                    col.onchanged.call(this, item, value);
+                }
             }
         }
     }