feature: expandable rows

add: comments

.gitignore

@@ -25,4 +25,5 @@ dist-ssr
 desktop.ini
 
 # User definition
-docs
+docs
+jsdoc

lib/ui/css/grid.scss

@@ -283,6 +283,22 @@
                             background-color: var(--row-bg-color);
                         }
 
+                        &.ui-expandable {
+                            &>svg {
+                                width: 24px;
+                                height: 34px;
+                                padding: 8px 3px;
+                                box-sizing: border-box;
+                                display: block;
+                                cursor: pointer;
+                                transition: opacity .12s ease;
+
+                                &:hover {
+                                    opacity: .4;
+                                }
+                            }
+                        }
+
                         >span {
                             padding: var(--spacing-cell);
                             display: block;
@@ -402,6 +418,7 @@
             white-space: pre;
             display: flex;
             align-items: center;
+            overflow: hidden;
             visibility: hidden;
             opacity: 0;
             transition: visibility 0s linear .12s, opacity .12s ease;

lib/ui/date.js

@@ -261,7 +261,7 @@ export class DateSelector {
      * @static
      * @param {HTMLElement} [dom=document.body] 父元素
      * @param {Function} [trigger] 日期设置事件触发函数
-     * @param {Date} trigger.[this]] - 上下文为触发设置日期的 `DateSelector` 实例
+     * @param {Date} trigger.{this} - 上下文为触发设置日期的 `DateSelector` 实例
      * @param {Date} trigger.date - 修改后的日期值
      * @example <caption>HTML</caption>
      *  <input id="dateFrom" data-type="date" data-min="1980-01-01"/>

lib/ui/grid/column.js

@@ -12,6 +12,17 @@ import { createDateInput, formatDate, setDateValue, getDateValue } from "../date
  * @class
  */
 export class GridColumn {
+    /**
+     * 设置该类型是否支持触发 {@linkcode GridColumnDefinition}`.onInputEnded` 方法<br/>
+     * 该属性返回 `true` 后，在任意事件中修改行包装对象的 `__editing` 值，则会在行列元素变动时及时触发 [onInputEnded]{@linkcode GridColumnDefinition#onInputEnded} 方法，避免例如文本框还未触发 `onchange` 事件就被移除元素而导致的问题
+     * 
+     * 更多例子参考代码中 {@linkcode GridInputColumn} 的实现
+     * @member
+     * @name GridColumn.editing
+     * @readonly
+     * @type {boolean}
+     */
+
     /**
      * 创建显示单元格时调用的方法
      * @param {GridColumnDefinition} col - 列定义对象
@@ -27,6 +38,8 @@ export class GridColumn {
      * 
      * 元素修改后设置行包装对象的 `__editing` 后，支持在离开编辑状态时及时触发 [leaveEdit]{@linkcode GridColumn.leaveEdit} 方法<br/>
      * 更多例子参考代码中 {@linkcode GridDropdownColumn} 的实现。
+     * @method
+     * @name GridColumn.createEdit
      * @param {Function} trigger - 编辑事件回调函数，`e` 参数会传递给 [getValue]{@linkcode GridColumn.getValue} 方法
      * @param {GridColumnDefinition} col - 列定义对象
      * @param {HTMLElement} container - 父容器元素
@@ -34,15 +47,25 @@ export class GridColumn {
      * @returns {HTMLElement} 返回创建的编辑状态的单元格元素
      * @virtual
      */
-    static createEdit() { }
 
     /**
      * 创建列头时调用的方法
+     * @method
+     * @name GridColumn.createCaption
      * @param {GridColumnDefinition} col - 列定义对象
      * @returns {HTMLElement} 返回创建的列头元素
      * @virtual
      */
-    static createCaption() { }
+
+    /**
+     * 获取编辑状态单元格值时调用的方法
+     * @method
+     * @name GridColumn.getValue
+     * @param {any} `e` 由 [createEdit]{@linkcode GridColumn.createEdit} 方法中 `trigger` 函数传递来的对象
+     * @param {GridColumnDefinition} col - 列定义对象
+     * @returns {(string | boolean | number)} 返回单元格的值
+     * @virtual
+     */
 
     /**
      * 设置单元格值时调用的方法
@@ -57,15 +80,6 @@ export class GridColumn {
         element.innerText = val;
     }
 
-    /**
-     * 获取编辑状态单元格值时调用的方法
-     * @param {any} `e` 由 [createEdit]{@linkcode GridColumn.createEdit} 方法中 `trigger` 函数传递来的对象
-     * @param {GridColumnDefinition} col - 列定义对象
-     * @returns {(string | boolean | number)} 返回单元格的值
-     * @virtual
-     */
-    static getValue() { }
-
     /**
      * 设置单元格样式时调用的方法
      * @param {HTMLElement} element - 单元格元素
@@ -94,27 +108,22 @@ export class GridColumn {
 
     /**
      * 单元格离开编辑元素时触发，需要由行包装对象的 `__editing` 来确定是否触发。
+     * @method
+     * @name GridColumn.leaveEdit
      * @param {HTMLElement} element - 单元格元素
      * @param {HTMLElement} container - 父容器元素
      * @virtual
      */
-    static leaveEdit() { }
 
     static toString() { return '[object Column]' }
 }
 
 /**
- * 单行文本列
+ * 单行文本输入列
+ * @class
  * @extends GridColumn
  */
 export class GridInputColumn extends GridColumn {
-    /**
-     * 设置该类型是否支持触发 [onInputEnded]{@linkcode GridColumnDefinition.onInputEnded} 方法<br/>
-     * 该属性返回 `true` 后，在任意事件中修改行包装对象的 `__editing` 值，则会在行列元素变动时及时触发 [onInputEnded]{@linkcode GridColumnDefinition.onInputEnded} 方法，避免例如文本框还未触发 `onchange` 事件就被移除元素而导致的问题<br/>
-     * 更多例子参考代码中 {@linkcode GridInputColumn} 的实现
-     * @readonly
-     * @type {boolean}
-     */
     static get editing() { return true };
 
     static createEdit(trigger, col, _wrapper, vals) {
@@ -185,6 +194,11 @@ export class GridTextColumn extends GridInputColumn {
 
 const SymbolDropdown = Symbol.for('ui-dropdown');
 
+/**
+ * 下拉选择列
+ * @class
+ * @extends GridColumn
+ */
 export class GridDropdownColumn extends GridColumn {
     static createEdit(trigger, col, container, it) {
         const drop = new Dropdown({