start dropdown grid column

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') {
-                holder.style.display = 'none';
+            if (holder.classList.contains('active')) {
+                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') {
-                holder.style.display = 'none';
+            if (holder.classList.contains('active')) {
+                holder.classList.remove('active');
             }
         }
     }