From 24b5a225954c77efffe42c944b749f3b23bc1ad1 Mon Sep 17 00:00:00 2001
From: Tsanie <lchen@foresightintelligence.com>
Date: Wed, 31 Jan 2024 09:33:07 +0800
Subject: [PATCH] add sample screenshot

---
 README.md                         |   4 +-
 jsdoc/grid/assets/grid-sample.png | Bin 0 -> 9834 bytes
 lib/ui/date.js                    |  39 +++++++++++++------
 lib/ui/grid/grid.js               |  62 ++++++++++++++++++++++++------
 4 files changed, 80 insertions(+), 25 deletions(-)
 create mode 100644 jsdoc/grid/assets/grid-sample.png

diff --git a/README.md b/README.md
index 8fa00c4..49c3e67 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,3 @@
-# ui-lib
+# [ui-lib].Grid
 
-UI Mordern Library
\ No newline at end of file
+UI Mordern Gridview Library
\ No newline at end of file
diff --git a/jsdoc/grid/assets/grid-sample.png b/jsdoc/grid/assets/grid-sample.png
new file mode 100644
index 0000000000000000000000000000000000000000..68da0b4d567528dc395088becb47c3b4cef37cda
GIT binary patch
literal 9834
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

literal 0
HcmV?d00001

diff --git a/lib/ui/date.js b/lib/ui/date.js
index c7542e2..aeea3fa 100644
--- a/lib/ui/date.js
+++ b/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>
diff --git a/lib/ui/grid/grid.js b/lib/ui/grid/grid.js
index 3291823..9a34c85 100644
--- a/lib/ui/grid/grid.js
+++ b/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;