start dropdown grid column

css/dropdown.scss

@@ -108,7 +108,7 @@ $listMaxHeight: 210px;
             flex: 1 1 auto;
             cursor: pointer;
             font-size: $mediumSize;
-            line-height: $headerHeight;
+            // line-height: $headerHeight;
             padding: 0 6px;
             overflow: hidden;
             text-overflow: ellipsis;

css/grid.scss

@@ -207,6 +207,18 @@
                             transition: none;
                         }
                     }
+
+                    .dropdown-wrapper {
+                        height: calc(var(--line-height) + 2px);
+                        width: 100%;
+                        display: flex;
+                        flex-direction: column;
+
+                        >.dropdown-header {
+                            border: none;
+                            height: 100%;
+                        }
+                    }
                 }
             }
         }
@@ -220,6 +232,14 @@
             white-space: pre;
             display: flex;
             align-items: center;
+            visibility: hidden;
+            opacity: 0;
+            transition: visibility 0s linear .12s, opacity .12s ease;
+
+            &.active {
+                visibility: visible;
+                opacity: 1;
+            }
         }
     }
 

lib/ui/grid.html

@@ -18,21 +18,31 @@
       grid.columns = [
         { key: 'c1', caption: 'column 1' },
         { key: 'c2', caption: 'column 2', allcheck: true, type: Grid.ColumnTypes.Checkbox, enabled: 'enabled' },
+        {
+          key: 'c2a',
+          caption: 'column 2 a',
+          type: Grid.ColumnTypes.Dropdown,
+          source: [
+            { value: 'off', text: 'Off' },
+            { value: 'pending', text: 'Pending' },
+            { value: 'broken', text: 'Broken' },
+            { value: 'running', text: 'Running' }
+          ],
+          enabled: 'enabled'
+        },
         { key: 'c3', caption: 'column 3', width: 90 },
         { key: 'c4', caption: 'Note', type: Grid.ColumnTypes.Input }
       ];
       grid.cellClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) clicked.`);
       grid.init();
-      const source = [];
+      grid.source = [
-      for (let i = 0; i < 1000; i++) {
+        { c1: 'abc', c2: true, c2a: 'off', c3: 12345, c4: 'another note', enabled: false },
-        source.push(
+        { c1: 'abc2bbbbaaaaa', c2: false, c2a: 'pending', c3: 1225, c4: 'Note note this is note' },
-          { c1: 'abc', c2: true, c3: 12345, c4: 'Note note this is note', enabled: false },
+        { c1: 'type', c2: false, c2a: 'broken', c3: 121111 },
-          { c1: 'abc2bbbbaaaaa', c2: false, c3: 1225, c4: 'Note note this is note' },
+        { c1: 'diff', c2: true, c2a: 'running', c3: 124445555555555555 },
-          { c1: 'type', c2: false, c3: 121111 },
+        { c1: 'diff', c2: true, c2a: 'running', c3: 12499 },
-          { c1: 'diff', c2: true, c3: 124445555555555555 }
+        { c1: 'diff', c2: true, c2a: 'off', c3: 1244445 }
-        );
+      ];
-      }
-      grid.source = source;
 
       window.grid = grid;
     }();

lib/ui/grid.js

@@ -2,6 +2,7 @@ import { isMobile, global, nullOrEmpty, throttle, truncate, isPositive } from ".
 import { r } from "../utility/lgres";
 import { createIcon } from "../ui/icon";
 import { createCheckbox } from "../ui/checkbox";
+import Dropdown from "../ui/dropdown";
 
 const ColumnChangedType = {
     Reorder: 'reorder',
@@ -52,7 +53,43 @@ class GridInputColumn extends GridColumn {
     static setEnabled(element, enabled) { element.disabled = enabled === false }
 }
 
+const SymbolDropdown = Symbol.for('ui-dropdown');
+
 class GridDropdownColumn extends GridColumn {
+    static createEdit(trigger) {
+        const drop = new Dropdown({
+
+        });
+        return drop.create();
+    }
+
+    static setValue(element, val, item, col) {
+        const dropGlobal = global[SymbolDropdown];
+        if (dropGlobal == null) {
+            return;
+        }
+        const dropId = element.dataset.dropId;
+        const drop = dropGlobal[dropId];
+        if (drop == null) {
+            return;
+        }
+        let source = col.source;
+        if (typeof source === 'function') {
+            source = source(item);
+        }
+        if (source != null) {
+            drop.source = source;
+        }
+        drop.select(val, true);
+    }
+
+    static getValue(e) {
+
+    }
+
+    static setEnabled(element, enabled) {
+
+    }
 }
 
 class GridCheckboxColumn extends GridColumn {
@@ -559,7 +596,6 @@ class Grid {
         if (!this.holderDisabled) {
             const holder = document.createElement('div');
             holder.className = 'grid-hover-holder';
-            holder.style.display = 'none';
             bodyContainer.appendChild(holder);
             body.addEventListener('mousemove', e => throttle(this.#onBodyMouseMove, RefreshInterval, this, e, holder));
         }
@@ -695,7 +731,7 @@ class Grid {
                 if (typeof enabled === 'string') {
                     enabled = item[enabled];
                 }
-                type.setValue(element, val, item);
+                type.setValue(element, val, item, col);
                 if (typeof type.setEnabled === 'function') {
                     type.setEnabled(element, enabled);
                 }
@@ -808,7 +844,7 @@ class Grid {
         if (!force && attr != null && (attr.resizing || attr.dragging)) {
             return;
         }
-        if (col.sortable && ['LABEL', 'LAYER', 'SVG', 'USE'].indexOf(e.target.tagName) < 0) {
+        if (col.sortable && !/^(label|layer|svg|use)$/i.test(e.target.tagName)) {
             const index = this.columns.indexOf(col);
             if (index < 0) {
                 return;
@@ -867,7 +903,7 @@ class Grid {
 
     #onBodyMouseMove(e, holder) {
         let target = e.target;
-        if (target.className === 'grid-hover-holder') {
+        if (target.classList.contains('grid-hover-holder')) {
             return;
         }
         let parent;
@@ -877,8 +913,8 @@ class Grid {
         let keyid = target.keyid;
         if (parent == null || keyid == null) {
             delete holder.keyid;
-            if (holder.style.display !== 'none') {
+            if (holder.classList.contains('active')) {
-                holder.style.display = 'none';
+                holder.classList.remove('active');
             }
             return;
         }
@@ -907,12 +943,13 @@ class Grid {
             }
             const height = target.offsetHeight;
             holder.style.cssText = `top: ${top}px; left: ${left}px; max-width: ${this.#bodyClientWidth}px; height: ${height - 2}px`;
+            holder.classList.add('active');
         } else {
             if (oldkeyid != null) {
                 delete holder.keyid;
             }
-            if (holder.style.display !== 'none') {
+            if (holder.classList.contains('active')) {
-                holder.style.display = 'none';
+                holder.classList.remove('active');
             }
         }
     }