change: sample structure

fix: tooltip of some readonly column in editing mode
feature: adapt filter panel's height

lib/ui/css/functions/func.scss

@@ -44,6 +44,11 @@
     }
 }
 
+@mixin wrap() {
+    white-space: normal;
+    word-break: break-word;
+}
+
 @mixin ui-check() {
     .ui-check-inner {
         position: relative;

lib/ui/css/grid.scss

@@ -118,7 +118,7 @@
                                 text-overflow: ellipsis;
 
                                 &.wrap {
-                                    white-space: normal;
+                                    @include wrap();
                                 }
                             }
 
@@ -286,14 +286,14 @@
                         }
 
                         >span {
-                            padding: var(--spacing-cell);
+                            margin: var(--spacing-cell);
                             display: block;
                             overflow: hidden;
                             text-overflow: ellipsis;
                             white-space: pre;
 
                             &.wrap {
-                                white-space: normal;
+                                @include wrap();
                             }
                         }
                     }
@@ -434,7 +434,7 @@
                             justify-content: center;
                             align-items: center;
                             position: relative;
-                            padding: var(--spacing-s);
+                            // padding: var(--spacing-s);
 
                             >svg {
                                 width: 16px;

lib/ui/grid/column.js

@@ -36,6 +36,14 @@ export class GridColumn {
      * @see 更多例子参考 {@linkcode GridInputColumn} {@linkcode GridDateColumn} 中的代码实现
      */
 
+    /**
+     * 标记该类型是否可编辑
+     * @member
+     * @name GridColumn.canEdit
+     * @readonly
+     * @type {boolean}
+     */
+
     /**
      * 创建显示单元格时调用的方法
      * @param {GridColumnDefinition} col - 列定义对象
@@ -197,6 +205,7 @@ export class GridColumn {
  */
 export class GridInputColumn extends GridColumn {
     static get editing() { return true };
+    static get canEdit() { return true };
 
     /**
      * @ignore
@@ -311,6 +320,8 @@ const SymbolDropdown = Symbol.for('ui-dropdown');
  * @hideconstructor
  */
 export class GridDropdownColumn extends GridColumn {
+    static get canEdit() { return true };
+
     /**
      * @ignore
      * @param {Function} trigger 
@@ -512,6 +523,8 @@ export class GridDropdownColumn extends GridColumn {
  * @ignore
  */
 export class GridCheckboxColumn extends GridColumn {
+    static get canEdit() { return true };
+
     /**
      * @ignore
      * @param {Function} trigger 
@@ -654,6 +667,7 @@ export class GridIconColumn extends GridColumn {
  */
 export class GridDateColumn extends GridColumn {
     static get editing() { return true };
+    static get canEdit() { return true };
 
     /**
      * @ignore

lib/ui/grid/grid.js

@@ -3311,6 +3311,12 @@ export class Grid {
             totalWidth - FilterPanelWidth :
             offsetLeft + (width > FilterPanelWidth ? width - FilterPanelWidth : 0);
         panel.style.left = `${left}px`;
+        const maxHeight = this._var.el.offsetHeight - this._var.headerHeight;
+        if (maxHeight < 300) {
+            panel.style.height = `${maxHeight}px`;
+        } else {
+            panel.style.height = '';
+        }
 
         // search
         let searchbox;
@@ -3810,8 +3816,14 @@ export class Grid {
             // sub ui-grid
             return;
         }
+        const col = target.dataset.col;
         const row = target.dataset.row;
-        if (this._var.virtualRows[row]?.editing) {
+        if (holder.dataset.row === row &&
+            holder.dataset.col === col) {
+            return;
+        }
+        const type = this._var.colTypes[this.columns[col]?.key];
+        if (type?.canEdit && this._var.virtualRows[row]?.editing) {
             delete holder.dataset.row;
             delete holder.dataset.col;
             if (holder.classList.contains('active')) {
@@ -3819,12 +3831,6 @@ export class Grid {
             }
             return;
         }
-        const col = target.dataset.col;
-        if (holder.dataset.row === row &&
-            holder.dataset.col === col) {
-            return;
-        }
-        const type = this._var.colTypes[this.columns[col]?.key];
         let element = target.children[0];
         if (type != null && typeof type.getElement === 'function') {
             element = type.getElement(element);