dropdown grid column, tiny style adjustment

css/grid.scss

@@ -48,7 +48,7 @@
 
         --header-padding: 4px 12px 4px 8px;
         --spacing-s: 4px;
-        --spacing-cell: 5px 4px 5px 8px;
+        --spacing-cell: 0 4px 0 8px;
     }
 
     &:focus,
@@ -57,7 +57,9 @@
     }
 
     &,
-    input[type="text"] {
+    input[type="text"],
+    .dropdown-wrapper>.dropdown-header>.dropdown-text,
+    .dropdown-wrapper>.dropdown-panel>.dropdown-list {
         font-size: var(--font-size);
     }
 
@@ -175,12 +177,13 @@
 
                 >td {
                     padding: 0;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: pre;
 
                     >span {
                         padding: var(--spacing-cell);
+                        display: block;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: pre;
                     }
 
                     >input[type="text"] {
@@ -189,6 +192,7 @@
                         height: calc(var(--line-height) + 2px);
                         width: 100%;
                         text-indent: var(--text-indent);
+                        padding: 0;
 
                         &:focus,
                         &:focus-visible {
@@ -217,6 +221,14 @@
                         >.dropdown-header {
                             border: none;
                             height: 100%;
+
+                            >.dropdown-text {
+                                padding: var(--spacing-cell);
+                            }
+                        }
+
+                        >.dropdown-panel {
+                            top: calc(var(--line-height) + 2px);
                         }
                     }
                 }

lib/ui/grid.js

@@ -57,38 +57,65 @@ const SymbolDropdown = Symbol.for('ui-dropdown');
 
 class GridDropdownColumn extends GridColumn {
     static createEdit(trigger) {
-        const drop = new Dropdown({
-
-        });
+        const drop = new Dropdown();
+        drop.onselected = trigger;
         return drop.create();
     }
 
-    static setValue(element, val, item, col) {
+    static getDrop(element) {
         const dropGlobal = global[SymbolDropdown];
         if (dropGlobal == null) {
-            return;
+            return null;
         }
         const dropId = element.dataset.dropId;
         const drop = dropGlobal[dropId];
         if (drop == null) {
-            return;
+            return null;
         }
+        return drop;
+    }
+
+    static getSource(item, col) {
         let source = col.source;
         if (typeof source === 'function') {
             source = source(item);
         }
-        if (source != null) {
-            drop.source = source;
+        return source;
+    }
+
+    static setValue(element, val, item, col) {
+        if (element.tagName !== 'DIV') {
+            let source = this.getSource(item, col);
+            const data = source?.find(v => v.value === val);
+            if (data != null) {
+                val = data.text;
+            }
+            super.setValue(element, val);
+            return;
+        }
+        const drop = this.getDrop(element);
+        if (drop == null) {
+            return;
+        }
+        if (drop.source == null || drop.source.length === 0) {
+            let source = this.getSource(item, col);
+            if (source != null) {
+                drop.source = source;
+            }
         }
         drop.select(val, true);
     }
 
     static getValue(e) {
-
+        return e.value;
     }
 
     static setEnabled(element, enabled) {
-
+        const drop = this.getDrop(element);
+        if (drop == null) {
+            return;
+        }
+        drop.disabled = enabled === false;
     }
 }
 
@@ -596,6 +623,14 @@ class Grid {
         if (!this.holderDisabled) {
             const holder = document.createElement('div');
             holder.className = 'grid-hover-holder';
+            holder.addEventListener('mousedown', e => {
+                const keyid = e.currentTarget.keyid;
+                if (keyid == null) {
+                    return;
+                }
+                return this.#onRowClicked(e, (keyid >>> MaxColumnBit) - this.#startIndex, keyid & MaxColumnMask);
+            });
+            holder.addEventListener('dblclick', e => this.#onRowDblClicked(e));
             bodyContainer.appendChild(holder);
             body.addEventListener('mousemove', e => throttle(this.#onBodyMouseMove, RefreshInterval, this, e, holder));
         }
@@ -737,7 +772,7 @@ class Grid {
                 }
                 // auto resize
                 if (this.#needResize && col.autoResize) {
-                    const width = cell.scrollWidth + 12;
+                    const width = element.scrollWidth + 12;
                     if (width > 0 && widths != null && (isNaN(widths[j]) || widths[j] < width)) {
                         widths[j] = width;
                         widths.flag = true;
@@ -923,14 +958,18 @@ class Grid {
         if (keyid === oldkeyid) {
             return;
         }
+        const element = target.children[0];
+        if (element.tagName !== 'SPAN') {
+            return;
+        }
         let overflow = this.#overflows[keyid];
         if (overflow == null) {
-            overflow = target.scrollWidth > target.offsetWidth;
+            overflow = element.scrollWidth > element.offsetWidth;
             this.#overflows[keyid] = overflow;
         }
         if (overflow) {
             holder.keyid = keyid;
-            holder.innerText = target.innerText;
+            holder.innerText = element.innerText;
             const top = this.#refs.bodyContent.offsetTop + target.offsetTop + 1;
             let left = target.offsetLeft;
             let width = holder.offsetWidth;

style.css

@@ -1,5 +1,5 @@
 :root {
-  font-family: 'Segoe UI Variable Display', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: var(--serif-font-family);
   font-size: 1.125rem;
   line-height: 1.5;
   font-weight: 400;
@@ -16,9 +16,14 @@
 
   --border-color: #ccc;
   --hover-color: #666;
+  --serif-font-family: 'Segoe UI Variable Display', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   --mono-font-family: 'FantasqueSansMono NFM', 'Cascadia Code', 'PT Mono', Consolas, 'Courier New', monospace;
 }
 
+input {
+  font-family: var(--serif-font-family);
+}
+
 code, kbd, pre, samp {
   font-family: var(--mono-font-family);
   background-color: var(--hover-color);