add sample screenshot

README.md

@@ -1,3 +1,3 @@
-# ui-lib
+# [ui-lib].Grid
 
-UI Mordern Library
+UI Mordern Gridview Library

lib/ui/date.js

@@ -4,11 +4,14 @@ import { createElement } from "../functions";
  * 创建或转换日期选择框
  * @param {string} [min] - 最小可选日期
  * @param {string} [max] - 最大可选日期
- * @param {HTMLInputElement} [element] - 转换该元素为日期选择框
+ * @param {HTMLInputElement | string} [element] - 转换该元素为日期选择框
  * @returns {HTMLInputElement} 返回创建或转换的日期选择框
  */
 export function createDateInput(min, max, element) {
     let date;
+    if (typeof element === 'string') {
+        element = document.querySelector(element);
+    }
     if (element instanceof HTMLInputElement) {
         date = element;
         date.classList.add('ui-date-cell');
@@ -121,13 +124,6 @@ export function getDateValue(element, formatter) {
     return '';
 }
 
-/**
- * 日期选中触发的回调函数
- * @callback DateSelectedCallback
- * @param {Date} date - 修改后的日期值
- * @this DateSelector
- */
-
 /**
  * 日期选择框类
  * @class
@@ -140,7 +136,8 @@ export class DateSelector {
     /**
      * 日期发生变化时触发的事件
      * @event
-     * @type {DateSelectedCallback}
+     * @param {Date} date - 修改后的日期值
+     * @this DateSelector
      */
     onDateChanged;
 
@@ -152,6 +149,24 @@ export class DateSelector {
      * @param {string} [opts.minDate] - 最小可选择日期
      * @param {string} [opts.maxDate] - 最大可选择日期
      * @param {DateFormatterCallback} [opts.valueFormatter] - 自定义格式化函数
+     * @example <caption>创建一个 DateSelector 并插入到元素中</caption>
+     *  <div id="dateFrom"></div>
+     * @example
+     *  // 构造参数
+     *  const opts = {
+     *      minDate: '2020-01-01',
+     *      maxDate: '2024-02-01',
+     *      valueFormatter: (date) => {
+     *          return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;  // 2024/1/31
+     *      }
+     *  };
+     *  const dateSelectorFrom = new DateSelector(opts);
+     *  document.querySelector('#dateFrom').appendChild(dateSelectorFrom.create());
+     * @example <caption>将一个元素转化为 DateSelector</caption>
+     *  <input id="dateTo"></div>
+     * @example
+     *  const dateSelectorTo = new DateSelector();
+     *  dateSelectorTo.create('#dateTo');
      */
     constructor(opts) {
         this._var.options = opts ?? {};
@@ -159,7 +174,7 @@ export class DateSelector {
 
     /**
      * 创建或转换日期选择框元素
-     * @param {HTMLInputElement} [element] - 转换该元素为日期选择框
+     * @param {HTMLInputElement | string} [element] - 转换该元素为日期选择框
      * @returns {HTMLInputElement} 返回创建或转换的日期选择元素
      */
     create(element) {
@@ -245,7 +260,9 @@ export class DateSelector {
      * 解析的属性为 `id`, `class`, `data-min`, `data-max`, `disabled`
      * @static
      * @param {HTMLElement} [dom=document.body] 父元素
-     * @param {DateSelectedCallback} trigger 日期设置事件触发函数（上下文为触发设置日期的 `DateSelector` 实例）
+     * @param {Function} [trigger] 日期设置事件触发函数
+     * @param {Date} trigger.[this]] - 上下文为触发设置日期的 `DateSelector` 实例
+     * @param {Date} trigger.date - 修改后的日期值
      * @example <caption>HTML</caption>
      *  <input id="dateFrom" data-type="date" data-min="1980-01-01"/>
      * @example <caption>解析父容器</caption>

lib/ui/grid/grid.js

@@ -275,17 +275,52 @@ const GridColumnDirection = {
  * @property {("asc" | "desc")} order - 升序或降序
  */
 
-/**
- * 多语言文本资源回调函数
- * @callback GridLanguageCallback
- * @param {string} id - 资源 ID
- * @param {string} [def] - 默认资源
- * @returns 返回获取的多语言资源
- */
-
 /**
  * Grid 控件基础类
+ * 
+ * <img src="./assets/grid-sample.png" alt="Grid Sample"/>
  * @class
+ * @example <caption>基础示例</caption>
+ *  <div id="grid"></div>
+ * @example
+ *  #grid>.ui-grid {
+ *      width: 600px;
+ *      height: 400px;
+ *  }
+ * @example
+ *  const grid = new Grid('#grid', GetTextByKey);
+ *  grid.columns = [
+ *      {
+ *          key: 'name',
+ *          caption: 'Name',
+ *          width: 140,
+ *          allowFilter: true
+ *      },
+ *      {
+ *          key: 'age',
+ *          caption: 'Age',
+ *          type: Grid.ColumnTypes.Input,
+ *          width: 80
+ *      },
+ *      {
+ *          key: 'study',
+ *          caption: 'Study',
+ *          type: Grid.ColumnTypes.Dropdown,
+ *          width: 120,
+ *          source: [
+ *              { value: 'a', text: 'A' },
+ *              { value: 'b', text: 'B' },
+ *              { value: 'c', text: 'C' }
+ *          ]
+ *      }
+ *  ];
+ *  grid.multiSelect = true;
+ *  grid.init();
+ *  grid.source = [
+ *      { name: '张三', age: '19', study: 'a' },
+ *      { name: '李四', age: '24', study: 'a' },
+ *      { name: '王五', age: '20', study: 'c' }
+ *  ];
  */
 export class Grid {
     _var = {
@@ -492,10 +527,13 @@ export class Grid {
 
     /**
      * 
-     * @param {(string | HTMLElement)} container Grid 控件所在的父容器，可以是 string 表示选择器，也可以是 HTMLElement 对象
-     * Grid 控件构造函数
-     * _构造时可以不进行赋值，但是调用 init 函数时则必须进行赋值_
-     * @param {GridLanguageCallback} [getText] 获取多语言文本的函数代理
+     * @param {(string | HTMLElement)?} container Grid 控件所在的父容器，可以是 string 表示选择器，也可以是 HTMLElement 对象
+     * Grid 控件构造函数<br/>
+     * _**构造时可以不进行赋值，但是调用 init 函数时则必须进行赋值**_
+     * @param {Function} [getText] 获取多语言文本的函数代理
+     * @param {string} getText.id - 资源 ID
+     * @param {string} [getText.def] - 默认资源
+     * @param {string} getText.[returns]] 返回的多语言
      */
     constructor(container, getText) {
         this._var.parent = typeof container === 'string' ? document.querySelector(container) : container;