tiny issue fix.

css/dropdown.scss

@@ -179,7 +179,6 @@ $listMaxHeight: 210px;
         left: -1px;
 
         &.slide-up {
-            top: auto;
             /*border-top-width: 1px;
             border-bottom-width: 0;*/
             transform-origin: bottom;

css/grid.scss

@@ -18,6 +18,7 @@
     & {
         --hover-bg-color: lightyellow;
         --link-fore-color: #1890ff;
+        --link-disabled-color: #d9d9d9;
         --header-border-color: #adaba9;
         --header-bg-color: #fafafa;
         --header-fore-color: #000;
@@ -280,6 +281,11 @@
 
                         >.dropdown-panel {
                             top: calc(var(--line-height) + 2px);
+
+                            &.slide-up {
+                                top: unset;
+                                bottom: calc(var(--line-height) + 2px);
+                            }
                         }
                     }
 
@@ -291,16 +297,25 @@
                         align-items: center;
                         position: relative;
 
-                        svg {
+                        >svg {
                             width: 16px;
                             height: 16px;
                             fill: var(--link-fore-color);
                             transition: opacity .12s ease;
                         }
 
-                        &:hover svg {
+                        &:hover>svg {
                             opacity: .4;
                         }
+
+                        &.disabled {
+                            cursor: unset;
+
+                            >svg {
+                                fill: var(--header-border-color);
+                                opacity: unset;
+                            }
+                        }
                     }
                 }
             }

css/tooltip.scss

@@ -9,12 +9,12 @@
 }
 
 .tooltip-wrapper {
-    position: absolute;
+    position: fixed;
     word-wrap: break-word;
     height: auto;
     text-align: left;
     z-index: 250;
-    min-width: 75px;
+    min-width: 45px;
     max-width: 480px;
     min-height: 32px;
     border-radius: 2px;

lib/ui/grid.d.ts

@@ -0,0 +1,65 @@
+interface GridColumn {
+    static create(): HTMLElement;
+    static setValue(element: HTMLElement, val: any): void;
+    static setStyle(element: HTMLElement, style: { [key: string]: string }): void;
+}
+
+interface GridColumn {
+    key?: string;
+}
+
+interface GridColumnDirection {
+    [-1]: Number,
+    0: Number,
+    1: Number
+}
+
+interface GridColumnColumnEventMap {
+    "reorder": string,
+    "resize": string,
+    "sort": string
+}
+
+interface Grid {
+    columns: Array<GridColumn>;
+    langs?: { all: string, ok: string, reset: string };
+    virtualCount?: Number;
+    rowHeight?: Number;
+    filterRowHeight?: Number;
+    height?: Number;
+    readonly?: boolean;
+    multiSelect?: boolean;
+    fullrowClick?: boolean;
+    allowHtml?: boolean;
+    holderDisabled?: boolean;
+    window?: Window
+    sortIndex?: Number;
+    sortDirection?: keyof GridColumnDirection;
+
+    willSelect?: (index: Number, colIndex: Number) => boolean;
+    selectedRowChanged?: (index?: Number) => void;
+    cellDblClicked?: (index: Number, colIndex: Number) => void;
+    cellClicked?: (index: Number, colIndex: Number) => boolean;
+    rowDblClicked?: (index: Number) => void;
+    columnChanged?: <K extends keyof GridColumnColumnEventMap>(type: K, index: Number, value: Number | keyof GridColumnDirection) => void;
+
+    source(): Array<any>;
+    source(list: Array<any>): void;
+
+    
+}
+
+declare var Grid: {
+    ColumnTypes: {
+        Common: 0,
+        Input: 1,
+        Dropdown: 2,
+        Checkbox: 3,
+        Icon: 4,
+        isCheckbox(type: Number): boolean;
+    };
+    GridColumn: GridColumn;
+    new(container: HTMLElement): Grid;
+}
+
+export default Grid;

lib/ui/grid.html

@@ -34,6 +34,7 @@
         }
       };
 
+      // grid.readonly = true;
       grid.allowHtml = true;
       grid.height = 0;
       grid.columns = [
@@ -59,7 +60,16 @@
         },
         { key: 'c3', caption: 'column 3', width: 90 },
         { key: 'c4', caption: 'Note', type: Grid.ColumnTypes.Input },
-        { key: 'c5', type: Grid.ColumnTypes.Icon, text: 'times', tooltip: 'Delete' }
+        {
+          key: 'c5',
+          type: Grid.ColumnTypes.Icon,
+          enabled: 'enabled',
+          text: 'times',
+          tooltip: 'Delete',
+          events: {
+            onclick() { console.log('deleted', this) }
+          }
+        }
       ];
       grid.columnChanged = (type, index, value) => console.log(`column (${index}), ${type}, ${value}`);
       grid.cellClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) clicked.`);
@@ -80,7 +90,7 @@
   </script>
   <style type="text/css">
     #grid-sample {
-      height: 400px;
+      /* height: 400px; */
     }
 
     #grid-sample>.grid {

lib/ui/grid.js

@@ -78,8 +78,8 @@ class GridInputColumn extends GridColumn {
 const SymbolDropdown = Symbol.for('ui-dropdown');
 
 class GridDropdownColumn extends GridColumn {
-    static createEdit(trigger) {
+    static createEdit(trigger, parent) {
-        const drop = new Dropdown();
+        const drop = new Dropdown({ parent });
         drop.onselected = trigger;
         return drop.create();
     }
@@ -186,6 +186,10 @@ class GridIconColumn extends GridColumn {
         } else {
             element.classList.remove('disabled');
         }
+        const tooltip = element.querySelector('.tooltip-wrapper');
+        if (tooltip != null) {
+            tooltip.style.display = enabled === false ? 'none' : '';
+        }
     }
 }
 
@@ -463,7 +467,7 @@ class Grid {
                     width = col.width;
                 }
                 if (width > 0) {
-                    this.#changeColumnWidth(i, width);
+                    this.#changeColumnWidth(i, width, true);
                 }
             });
         }
@@ -569,7 +573,7 @@ class Grid {
                 this.#needResize = true;
                 sizer.innerText = col.caption ?? '';
                 let width = sizer.offsetWidth + 22;
-                if (col.allcheck && isCheckbox) {
+                if (!this.readonly && col.enabled !== false && col.allcheck && isCheckbox) {
                     width += 32;
                 }
                 if (width < MiniColumnWidth) {
@@ -609,7 +613,7 @@ class Grid {
             }
             const wrapper = document.createElement('div');
             th.appendChild(wrapper);
-            if (col.enabled !== false && col.allcheck && isCheckbox) {
+            if (!this.readonly && col.enabled !== false && col.allcheck && isCheckbox) {
                 const check = createCheckbox({
                     onchange: e => this.#onColumnAllChecked(col, e.target.checked)
                 });
@@ -832,15 +836,20 @@ class Grid {
                 let element;
                 if (!isCheckbox && selectChanged && typeof type.createEdit === 'function') {
                     element = selected ?
-                        type.createEdit(e => this.#onRowChanged(e, startIndex + i, col, type.getValue(e))) :
+                        type.createEdit(e => this.#onRowChanged(e, startIndex + i, col, type.getValue(e)), this.#refs.bodyContent) :
                         type.create(col);
                     cell.replaceChildren(element);
                 } else {
                     element = cell.children[0];
                 }
-                let enabled = col.enabled;
+                let enabled;
-                if (typeof enabled === 'string') {
+                if (this.readonly) {
-                    enabled = item[enabled];
+                    enabled = false;
+                } else {
+                    enabled = col.enabled;
+                    if (typeof enabled === 'string') {
+                        enabled = item[enabled];
+                    }
                 }
                 type.setValue(element, val, item, col);
                 if (typeof type.setEnabled === 'function') {
@@ -853,6 +862,7 @@ class Grid {
                         widths[j] = width;
                         widths.flag = true;
                     }
+                    this.#overflows[(startIndex + i) << MaxColumnBit | j] = false;
                 }
                 if (typeof col.styleFilter === 'function') {
                     const style = col.styleFilter(item);
@@ -878,7 +888,7 @@ class Grid {
         });
     }
 
-    #changeColumnWidth(index, width) {
+    #changeColumnWidth(index, width, keepOverflows) {
         const col = this.columns[index];
         // const oldwidth = col.width;
         const w = `${width}px`;
@@ -903,6 +913,9 @@ class Grid {
         //     width = this.#refs.bodyContainer.offsetWidth - oldwidth + width;
         //     this.#refs.bodyContainer.style.width = `${width}px`;
         // }
+        if (keepOverflows) {
+            return;
+        }
         for (let i = 0; i < this.#currentSource.length; i += 1) {
             const keyid = (i << MaxColumnBit) | index;
             if (this.#overflows.hasOwnProperty(keyid)) {
@@ -1129,9 +1142,6 @@ class Grid {
                     delete attr.offset;
                 });
                 this.#changeColumnOrder(index);
-                if (typeof this.columnChanged === 'function') {
-                    this.columnChanged(ColumnChangedType.Reorder, index);
-                }
             }
         };
         ['mousemove', 'mouseup'].forEach(event => window.addEventListener(event, attr[event]));
@@ -1165,7 +1175,7 @@ class Grid {
             }
             attr.resizing = val;
             attr.sizing = true;
-            this.#changeColumnWidth(index, val);
+            this.#changeColumnWidth(index, val, true);
         };
         attr.mousemove = e => throttle(resizemove, RefreshInterval, this, e);
         attr.mouseup = e => {

lib/ui/tooltip.js

@@ -29,14 +29,18 @@ function setTooltip(container, content) {
             if (container == null) {
                 return;
             }
+            let parent = container;
             let left = container.offsetLeft;
             let top = container.offsetTop;
-            // let parent = container.parentElement;
+            while ((parent = parent.offsetParent) != null) {
-            // while (parent != null) {
+                left += parent.offsetLeft;
-            //     left -= parent.scrollLeft;
+                top += parent.offsetTop;
-            //     top -= parent.scrollTop;
+            }
-            //     parent = parent.parentElement;
+            parent = container;
-            // }
+            while ((parent = parent.parentElement) != null) {
+                left -= parent.scrollLeft;
+                top -= parent.scrollTop;
+            }
             left -= wrapper.offsetWidth / 2 - container.offsetWidth / 2;
             top -= wrapper.offsetHeight + 14;
             wrapper.style.left = `${left}px`;