@gzmjs/table 0.1.0

package/dist/table.es.js

@@ -0,0 +1,2969 @@
+import * as B from "@gzmjs/ui-basic";
+import { createStyleSheet, gzmHeader, createText, globalTexts, defineElement, strAttr, boolAttr, CornerHelper, xy } from "@gzmjs/ui-basic";
+import * as M from "@gzmjs/mvvm";
+import { ViewElement, handleModelEvent, ModelEventHandler } from "@gzmjs/mvvm";
+import { createMenu } from "@gzmjs/menu";
+import "@gzmjs/tooltip";
+const tableViewTagName = "GZM-TABLE";
+const tableListTagName = "GZM-TABLE-LIST";
+const tableColStartTagName = "GZM-TABLE-COL-START";
+const tableColHeadTagName = "GZM-TABLE-COL-HEAD";
+const tableColMiddleTagName = "GZM-TABLE-COL-MIDDLE";
+const tableColsTagName = "GZM-TABLE-COLS";
+const tableColGroupTagName = "GZM-TABLE-COL-GROUP";
+const tableColTagName = "GZM-TABLE-COL";
+const tableColEndTagName = "GZM-TABLE-COL-END";
+const tableColTailTagName = "GZM-TABLE-COL-TAIL";
+const tableRowsTagName = "GZM-TABLE-ROWS";
+const tableRowTagName = "GZM-TABLE-ROW";
+const tableRowStartTagName = "GZM-TABLE-ROW-START";
+const tableRowMiddleTagName = "GZM-TABLE-ROW-MIDDLE";
+const tableRowEndTagName = "GZM-TABLE-ROW-END";
+const tableCellTagName = "GZM-TABLE-CELL";
+const tableAggsTagName = "GZM-TABLE-AGGS";
+const tableAggStartTagName = "GZM-TABLE-AGG-START";
+const tableAggMiddleTagName = "GZM-TABLE-AGG-MIDDLE";
+const tableAggEndTagName = "GZM-TABLE-AGG-END";
+const tableAggTagName = "GZM-TABLE-AGG";
+const tableColWidthSetterTagName = "GZM-TABLE-COL-WIDTH-SETTER";
+const tableColCheckTagName = "GZM-TABLE-COL-CHECK";
+const tableRowCheckTagName = "GZM-TABLE-ROW-CHECK";
+const tableColSerialTagName = "GZM-TABLE-COL-SERIAL";
+const tableRowSerialTagName = "GZM-TABLE-ROW-SERIAL";
+const tableColActionTagName = "GZM-TABLE-COL-ACTION";
+const tableRowActionTagName = "GZM-TABLE-ROW-ACTION";
+const tableColMenuTagName = "GZM-TABLE-COL-MENU";
+const tableRowMenuTagName = "GZM-TABLE-ROW-MENU";
+const styleSheet$1 = createStyleSheet({
+  //确保 section 能够显示滚动栏
+  ":host": `
+        overflow: hidden;
+        display: block;
+    `,
+  //section 负责显示滚动栏
+  ":host > section": `
+        display: grid;
+        grid-template-columns: auto auto;
+        gap: 0.5rem;
+        overflow: auto;
+        max-height: 100%;
+
+        --grid-row-serial: 0; /*行号从 1 开始*/
+        counter-reset: row-serial var(--grid-row-serial);
+    `,
+  [tableListTagName]: `
+        display: grid;
+        grid-auto-rows: max-content;/*每一行的高度都自动*/
+        gap: 0px;
+
+        /*3个span加在一起应该等于可见【列头+列+列尾】的数量*/
+        --grid-start-span: 0;
+        --grid-middle-span: 0;
+        --grid-end-span: 0;
+
+        /*列部分占用的行的数量*/
+        --grid-col-end: 0;
+    `,
+  /*下面 3 个占据了 grid-list 的上半部分。利用 subgrid 使其中元素占用 grid-list 的列。*/
+  [`${tableColStartTagName}, ${tableColMiddleTagName}, ${tableColEndTagName}`]: `
+        position: sticky;
+        top: 0px;
+
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-template-rows: subgrid;
+        grid-row-start: 1;
+        grid-row-end: var(--grid-col-end);
+    `,
+  /*下面 3 个固定在左侧 */
+  [`${tableColStartTagName}, ${tableRowStartTagName}, ${tableAggStartTagName}`]: `
+        left: 0px;
+        grid-column-end: span var(--grid-start-span);
+    `,
+  [`${tableListTagName}[no-start] ${tableColStartTagName}, ${tableListTagName}[no-start] ${tableRowStartTagName}, ${tableListTagName}[no-start] ${tableAggStartTagName}`]: `
+        display: none;
+    `,
+  /*下面 3 个固定在右侧 */
+  [`${tableColEndTagName}, ${tableRowEndTagName}, ${tableAggEndTagName}`]: `
+        right: 0px;
+        grid-column-end: span var(--grid-end-span);
+    `,
+  [`${tableListTagName}[no-end] ${tableColEndTagName}, ${tableListTagName}[no-end] ${tableRowEndTagName}, ${tableListTagName}[no-end] ${tableAggEndTagName}`]: `
+        display: none;
+    `,
+  /* 中间的 上中下 3 个元素, 无 sticky，只设置宽度 */
+  [`${tableColMiddleTagName}, ${tableRowMiddleTagName}, ${tableAggMiddleTagName}`]: `
+        grid-column-end: span var(--grid-middle-span);
+    `,
+  /* 用来组织子元素的容器 */
+  [`${tableColHeadTagName}, ${tableColTailTagName}, ${tableColsTagName}, ${tableColGroupTagName}, ${tableRowsTagName}, ${tableRowTagName}, ${tableAggsTagName}`]: `
+        display: contents;
+    `,
+  /* 所有的列头和列尾，所有的列头和尾都只有一个元素 */
+  [`${tableColHeadTagName} > *, ${tableColTailTagName} > *`]: `
+        grid-row-start: 1;
+        grid-row-end: var(--grid-col-end);
+        text-align: center;
+        padding: 0.25rem 0.5rem;
+    `,
+  /* 不可滚动内容要求在 可滚动内容 的上面 */
+  [`${tableColStartTagName}, ${tableColEndTagName}`]: `
+        z-index: 40;
+    `,
+  /* COL */
+  [tableColTagName]: `
+        display: flex;
+        align-items: flex-end; /*1-col会跨行，这个使文本等靠底部显示。2-文本占用最大的地方，菜单⋮靠右*/
+        padding: 0.25rem 0.5rem;
+
+        position: sticky;
+        top: 0px;
+        z-index: 30;
+
+        grid-row-end: var(--grid-col-end);
+
+        white-space: nowrap;
+    ` + gzmHeader,
+  /* 列排序 */
+  [tableColTagName + "::before"]: `
+        content: attr(sort);
+    `,
+  /* 列文本 */
+  [tableColTagName + ">span"]: `
+        flex: 1 1 auto;
+        margin-right: 0.25rem;
+    `,
+  /* 列按钮：菜单等。鼠标悬停时显示菜单按钮。 */
+  [tableColTagName + ">.gzm-txt-btn"]: `
+        visibility: hidden;
+    `,
+  [tableColTagName + ":hover >.gzm-txt-btn"]: `
+        visibility: visible;
+    `,
+  /* COL-GROUP */
+  /*不能换行，div 高度必须保持不变*/
+  [tableColGroupTagName + ">div"]: `
+        display: flex;
+        gap: 0.25rem;
+        padding: 0.25rem 0.5rem;
+
+        position: sticky;
+        top: 0px;
+        z-index: 30;
+
+        white-space: nowrap;
+    ` + gzmHeader,
+  [tableColGroupTagName + ">div >span"]: `
+        flex: 1 1 auto;
+    `,
+  /* 列组按钮：菜单等。鼠标悬停时显示菜单按钮。 */
+  [tableColGroupTagName + ">div >.gzm-txt-btn"]: `
+        visibility: hidden;
+    `,
+  [tableColGroupTagName + ">div:hover >.gzm-txt-btn"]: `
+        visibility: visible;
+    `,
+  /* ROW */
+  [`${tableRowTagName}:hover >* >${tableCellTagName}`]: `
+        background: var(--gzm-h-btn-background);
+        border: var(--gzm-h-btn-border);
+        color: var(--gzm-h-btn-txt-color);
+    `,
+  [`${tableRowTagName}:active >* >${tableCellTagName}, ${tableRowTagName}[active] >* >${tableCellTagName}`]: `
+        color: var(--gzm-a-btn-txt-color) !important;
+        background: var(--gzm-a-btn-background) !important;
+        border: var(--gzm-a-btn-border) !important;
+    `,
+  [`${tableRowStartTagName}, ${tableRowMiddleTagName}, ${tableRowEndTagName}`]: `
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-template-rows: subgrid;
+    `,
+  /*需要设置背景颜色，否则与可滚动内容字符重叠*/
+  [`${tableRowStartTagName}, ${tableRowEndTagName}`]: `
+        position: sticky;
+        z-index: 20;
+        background-color: var(--gzm-background-color);
+    `,
+  /* CELL */
+  [tableCellTagName]: `
+        padding: 0.25rem 0.5rem;
+        border: var(--gzm-header-border);
+        overflow: hidden;
+        text-overflow: ellipsis;
+    `,
+  [tableCellTagName + ">a"]: `
+        text-decoration: revert;
+    `,
+  /* AGGs */
+  [`${tableAggStartTagName}, ${tableAggMiddleTagName}, ${tableAggEndTagName}`]: `
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-template-rows: subgrid;
+
+        position: sticky;
+        bottom: 0px;
+    `,
+  [tableAggTagName]: `
+        grid-row-end: -1;
+    `,
+  /*需要聚合的字段一定会设置聚合的名称*/
+  [tableAggTagName + "[title]"]: `
+        padding: 0.25rem 0.5rem;
+        white-space: nowrap;
+        z-index: 10;
+    ` + gzmHeader,
+  [`${tableAggStartTagName}, ${tableAggEndTagName}`]: `
+        z-index: 30;
+    `,
+  /* HEAD, TAIL */
+  [`${tableColCheckTagName}, ${tableColSerialTagName}, ${tableColMenuTagName}, ${tableColActionTagName}`]: `
+        display: flex;
+        align-items: flex-end;
+    ` + gzmHeader,
+  [`${tableColCheckTagName}, ${tableRowCheckTagName}`]: `
+        padding: 0.25rem 0.5rem;
+        text-align: center;
+        justify-content: center;
+    ` + gzmHeader,
+  [`${tableColSerialTagName}, ${tableRowSerialTagName}`]: `
+        padding: 0.25rem 0.5rem;
+        text-align: right; /* row 靠右对齐 */
+        justify-content: flex-end; /* col 靠右对齐 */
+    ` + gzmHeader,
+  [tableRowSerialTagName + "::after"]: `
+        counter-increment: row-serial; /*reset 在 :host 中*/
+        content: counter(row-serial);
+    `,
+  [tableRowMenuTagName]: `
+        padding: 0.25rem 0.5rem;
+        text-align: center;
+    ` + gzmHeader,
+  [tableRowActionTagName]: `
+        padding: 0.25rem 0.5rem;
+        border: var(--gzm-header-border);
+    `
+});
+const zh = {
+  agg: "统计",
+  noAgg: "无统计",
+  sort: "行排序",
+  noSort: "无排序",
+  autoWidth: "自动宽度",
+  minWidth: "最小宽度",
+  maxWidth: "最大宽度",
+  pxWidth: "指定宽度",
+  textWrap: "文本换行",
+  autoWrap: "自动换行",
+  noWrap: "禁止换行",
+  mustWrap: "强制换行",
+  textAlign: "文本对齐",
+  startAlign: "左对齐",
+  endAlign: "右对齐",
+  centerAlign: "居中对齐",
+  justifyAlign: "两侧对齐",
+  //CAF.Scaffolding.FieldAggregation 按道理不应该放在这里，偷懒了！
+  COUNT: "计数",
+  MAX: "最大值",
+  MIN: "最小值",
+  AVG: "平均值",
+  SUM: "合计",
+  STDDEV_POP: "总体标准差",
+  STDDEV_SAMP: "样本标准差",
+  VAR_POP: "总体方差",
+  VAR_SAMP: "样本方差",
+  toggleCheck: "全选 / 全不选"
+};
+const texts = { zh };
+const defaultTexts = createText(texts, globalTexts);
+function getTexts($ele) {
+  if ($ele.isConnected) {
+    return $ele.getRootNode().host.T;
+  }
+  return defaultTexts;
+}
+var __create$f = Object.create;
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __knownSymbol$f = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$f = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$f = (target, value) => __defProp$f(target, "name", { value, configurable: true });
+var __decoratorStart$f = (base) => [, , , __create$f(base?.[__knownSymbol$f("metadata")] ?? null)];
+var __decoratorStrings$f = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$f = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$f("Function expected") : fn;
+var __decoratorContext$f = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$f[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$f("Already initialized") : fns.push(__expectFn$f(fn || null)) });
+var __decoratorMetadata$f = (array, target) => __defNormalProp$f(target, __knownSymbol$f("metadata"), array[3]);
+var __runInitializers$f = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement$f = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings$f[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc$f(k < 4 ? target : { get [name]() {
+    return __privateGet$3(this, extra);
+  }, set [name](x) {
+    return __privateSet$3(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name$f(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name$f(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$f(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn$3(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet$3 : __privateMethod$3)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet$3(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn$f(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError$f("Object expected");
+    else __expectFn$f(fn = it.get) && (desc.get = fn), __expectFn$f(fn = it.set) && (desc.set = fn), __expectFn$f(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata$f(array, target), desc && __defProp$f(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$f("Cannot " + msg);
+var __privateIn$3 = (member, obj) => Object(obj) !== obj ? __typeError$f('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$f("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod$3 = (obj, member, method) => (__accessCheck$3(obj, member, "access private method"), method);
+var _colKey_dec, _a$f, _TableCell_decorators, _init$f, _colKey;
+_TableCell_decorators = [defineElement({ tagName: tableCellTagName })];
+class TableCell extends (_a$f = HTMLElement, _colKey_dec = [strAttr], _a$f) {
+  constructor() {
+    super(...arguments);
+    __privateAdd$3(this, _colKey, __runInitializers$f(_init$f, 8, this)), __runInitializers$f(_init$f, 11, this);
+  }
+  // #endregion
+  get $row() {
+    return this.closest(tableRowTagName);
+  }
+}
+_init$f = __decoratorStart$f(_a$f);
+_colKey = /* @__PURE__ */ new WeakMap();
+__decorateElement$f(_init$f, 4, "colKey", _colKey_dec, TableCell, _colKey);
+TableCell = __decorateElement$f(_init$f, 0, "TableCell", _TableCell_decorators, TableCell);
+__runInitializers$f(_init$f, 1, TableCell);
+var __create$e = Object.create;
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+var __knownSymbol$e = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$e = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$e = (target, value) => __defProp$e(target, "name", { value, configurable: true });
+var __decoratorStart$e = (base) => [, , , __create$e(base?.[__knownSymbol$e("metadata")] ?? null)];
+var __decoratorStrings$e = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$e = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$e("Function expected") : fn;
+var __decoratorContext$e = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$e[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$e("Already initialized") : fns.push(__expectFn$e(fn || null)) });
+var __decoratorMetadata$e = (array, target) => __defNormalProp$e(target, __knownSymbol$e("metadata"), array[3]);
+var __runInitializers$e = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement$e = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings$e[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc$e(k < 4 ? target : { get [name]() {
+    return __privateGet$2(this, extra);
+  }, set [name](x) {
+    return __privateSet$2(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name$e(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name$e(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$e(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn$2(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet$2 : __privateMethod$2)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet$2(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn$e(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError$e("Object expected");
+    else __expectFn$e(fn = it.get) && (desc.get = fn), __expectFn$e(fn = it.set) && (desc.set = fn), __expectFn$e(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata$e(array, target), desc && __defProp$e(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField$2 = (obj, key, value) => __defNormalProp$e(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$e("Cannot " + msg);
+var __privateIn$2 = (member, obj) => Object(obj) !== obj ? __typeError$e('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$e("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod$2 = (obj, member, method) => (__accessCheck$2(obj, member, "access private method"), method);
+var _active_dec, _a$e, _TableRow_decorators, _TableRow_instances, setActive_fn, refreshHead_fn, refreshTail_fn, refresh_fn, findColumnCell_fn, _init$e, _active, _b$4;
+const mutableAttributes$7 = ["active"];
+_TableRow_decorators = [defineElement({ tagName: tableRowTagName, mutableAttributes: mutableAttributes$7 })];
+class TableRow extends (_b$4 = ViewElement) {
+  constructor() {
+    super(...arguments);
+    __privateAdd$2(this, _TableRow_instances);
+    __publicField$2(this, "$start", document.createElement(tableRowStartTagName));
+    __publicField$2(this, "$middle", document.createElement(tableRowMiddleTagName));
+    __publicField$2(this, "$end", document.createElement(tableRowEndTagName));
+    __privateAdd$2(this, _active, __runInitializers$e(_init$e, 8, this, false)), __runInitializers$e(_init$e, 11, this);
+  }
+  setViewProperty(p, v) {
+    if (p === "active" && v && !this.active) {
+      __privateMethod$2(this, _TableRow_instances, setActive_fn).call(this);
+      return true;
+    }
+    return super.setViewProperty(p, v);
+  }
+  connectedCallback() {
+    if (this.childElementCount === 0) {
+      this.append(this.$start, this.$middle, this.$end);
+    }
+    if (this.model?.active && !this.active) {
+      __privateMethod$2(this, _TableRow_instances, setActive_fn).call(this);
+    }
+  }
+  // #endregion
+  // #region 数据展示
+  [(_a$e = handleModelEvent, _active_dec = [boolAttr], _a$e)](source, evt) {
+    return new RowModelEventHandler(this, source).handle(evt);
+  }
+  refresh(ss, refreshCellData = false) {
+    __privateMethod$2(this, _TableRow_instances, refresh_fn).call(this, ss.$startColumns, this.$start, refreshCellData);
+    __privateMethod$2(this, _TableRow_instances, refresh_fn).call(this, ss.$middleColumns, this.$middle, refreshCellData);
+    __privateMethod$2(this, _TableRow_instances, refresh_fn).call(this, ss.$endColumns, this.$end, refreshCellData);
+    __privateMethod$2(this, _TableRow_instances, refreshHead_fn).call(this, ss.$columnHeads, refreshCellData);
+    __privateMethod$2(this, _TableRow_instances, refreshTail_fn).call(this, ss.$columnTails, refreshCellData);
+  }
+  _active_set() {
+    this.model?.afterActiveChanged?.(this);
+  }
+  get checked() {
+    const $rc = this.querySelector(tableRowCheckTagName);
+    if (!$rc) return false;
+    return $rc.$chk.checked;
+  }
+  set checked(v) {
+    const $rc = this.querySelector(tableRowCheckTagName);
+    if ($rc) {
+      $rc.$chk.checked = v;
+    }
+  }
+  // #endregion
+}
+_init$e = __decoratorStart$e(_b$4);
+_TableRow_instances = /* @__PURE__ */ new WeakSet();
+setActive_fn = function() {
+  if (!this.isConnected) {
+    return;
+  }
+  this.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+};
+refreshHead_fn = function($heads, refreshCellData = false) {
+  let $lastHead;
+  const $start = this.$start;
+  for (let i = 0; i < $heads.length; i++) {
+    const $h = $heads[i];
+    const $head = $h.findInRow(this) || $h.createInRow();
+    $head.hidden = !$h.visible;
+    if (i === 0) {
+      const $fec = $start.firstElementChild;
+      if (!$fec) {
+        $start.prepend($head);
+      } else if ($fec === $head) ;
+      else {
+        $fec.before($head);
+      }
+    } else if ($lastHead?.nextElementSibling !== $head) {
+      $lastHead?.after($head);
+    }
+    $lastHead = $head;
+    if ($h.dataAware && refreshCellData) {
+      $h.refresh(this, $head);
+    }
+  }
+};
+refreshTail_fn = function($tails, refreshCellData = false) {
+  let $lastTail;
+  const $end = this.$end;
+  for (let i = $tails.length - 1; i >= 0; i--) {
+    const $t = $tails[i];
+    const $tail = $t.findInRow(this) || $t.createInRow();
+    $tail.hidden = !$t.visible;
+    if (i === $tails.length - 1) {
+      const $lec = $end.lastElementChild;
+      if (!$lec) {
+        $end.append($tail);
+      } else if ($lec === $tail) ;
+      else {
+        $lec.after($tail);
+      }
+    } else if ($lastTail?.previousElementSibling !== $tail) {
+      $lastTail?.before($tail);
+    }
+    $lastTail = $tail;
+    if ($t.dataAware && refreshCellData) {
+      $t.refresh(this, $tail);
+    }
+  }
+};
+refresh_fn = function($columns, $cellParent, refreshCellData) {
+  const $cells = Array.from($cellParent.querySelectorAll(tableCellTagName));
+  const di = this.model.data;
+  let needInsert = false;
+  for (let i = 0; i < $columns.length; i++) {
+    const $col = $columns[i];
+    let $cell;
+    if (i >= $cells.length) {
+      $cell = $col.createCell(di);
+      $cells.push($cell);
+      needInsert = true;
+    } else {
+      const j = __privateMethod$2(this, _TableRow_instances, findColumnCell_fn).call(this, i, $col.key, $cells);
+      if (j === i) {
+        $cell = $cells[j];
+        if (refreshCellData) {
+          $col._setCellData($cell, di);
+        }
+      } else if (j > i) {
+        $cell = $cells.splice(j, 1)[0];
+        $cells.splice(i, 0, $cell);
+        needInsert = true;
+      } else {
+        $cell = $col.createCell(di);
+        $cells.splice(i, 0, $cell);
+        needInsert = true;
+      }
+    }
+    $cell.hidden = !$col.visible;
+  }
+  if ($cells.length > $columns.length) {
+    const $toDel = $cells.splice($columns.length, $cells.length - $columns.length);
+    $toDel.forEach(($x) => $x.remove());
+  }
+  if (needInsert) {
+    const $df = document.createDocumentFragment();
+    $df.append(...$cells);
+    void ($cellParent === this.$end ? $cellParent.prepend($df) : $cellParent.append($df));
+  }
+};
+findColumnCell_fn = function(i, colKey, $cells) {
+  for (let j = i; j < $cells.length; j++) {
+    const $cell = $cells[j];
+    if ($cell.colKey === colKey) {
+      return j;
+    }
+  }
+  return -1;
+};
+_active = /* @__PURE__ */ new WeakMap();
+__decorateElement$e(_init$e, 4, "active", _active_dec, TableRow, _active);
+TableRow = __decorateElement$e(_init$e, 0, "TableRow", _TableRow_decorators, TableRow);
+__runInitializers$e(_init$e, 1, TableRow);
+class RowModelEventHandler extends ModelEventHandler {
+  handle(arg) {
+    const ret = super.handle(arg);
+    if (!ret && arg.type === "item-update") {
+      const iu = arg;
+      if ("data" in iu.updated) {
+        const $list = this.$view.closest(tableListTagName);
+        if ($list) {
+          $list.getRowRefreshFunc()(this.$view, true);
+          return true;
+        }
+      }
+    }
+    return ret;
+  }
+}
+var __create$d = Object.create;
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __knownSymbol$d = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$d = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$d = (target, value) => __defProp$d(target, "name", { value, configurable: true });
+var __decoratorStart$d = (base) => [, , , __create$d(base?.[__knownSymbol$d("metadata")] ?? null)];
+var __decoratorStrings$d = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$d = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$d("Function expected") : fn;
+var __decoratorContext$d = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$d[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$d("Already initialized") : fns.push(__expectFn$d(fn || null)) });
+var __decoratorMetadata$d = (array, target) => __defNormalProp$d(target, __knownSymbol$d("metadata"), array[3]);
+var __runInitializers$d = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) fns[i].call(self);
+  return value;
+};
+var __decorateElement$d = (array, flags, name, decorators, target, extra) => {
+  var it, done, ctx, k = flags & 7, p = false;
+  var j = 0;
+  var extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (target = target.prototype, k < 5 && (k > 3 || !p) && __getOwnPropDesc$d(target, name));
+  __name$d(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$d(k, name, done = {}, array[3], extraInitializers);
+    it = (0, decorators[i])(target, ctx), done._ = 1;
+    __expectFn$d(it) && (target = it);
+  }
+  return __decoratorMetadata$d(array, target), desc && __defProp$d(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var _TableColGroup_decorators, _init$d, _a$d;
+const mutableAttributes$6 = ["hidden"];
+_TableColGroup_decorators = [B.defineElement({ tagName: tableColGroupTagName, mutableAttributes: mutableAttributes$6 })];
+let _TableColGroup = class _TableColGroup2 extends (_a$d = HTMLElement) {
+  // #region 子元素
+  constructor() {
+    super();
+    this.$lbl = document.createElement("span");
+    this.$menu = B.createTxtBtn("⋮");
+    this.$div = document.createElement("div");
+    this.$div.append(this.$lbl, this.$menu);
+  }
+  $div;
+  $lbl;
+  $menu;
+  /**
+   * 
+   * @param {Number} start 
+   * @returns 所有下级可见列的数量
+   */
+  setRow(start) {
+    if (this.hidden) {
+      throw new Error("call group.setRow() when not hidden");
+    }
+    const $cols = this.$columns;
+    const $gs = this.$groups;
+    if ($cols.length === 0 && $gs.length === 0) {
+      this.#$p = void 0;
+      this.remove();
+      return 0;
+    }
+    this.$div.style.gridRowStart = start.toString();
+    start++;
+    let colVisible = 0;
+    for (const $col of $cols) {
+      if ($col.hidden) ;
+      else {
+        $col.setRow(start);
+        colVisible++;
+      }
+    }
+    for (const $group of $gs) {
+      if ($group.hidden) ;
+      else {
+        colVisible += $group.setRow(start);
+      }
+    }
+    if (colVisible === 0) {
+      this.hidden = true;
+      return 0;
+    }
+    this.$div.style.gridColumnEnd = "span " + colVisible;
+    return colVisible;
+  }
+  /**
+   * 只属于这个 group 的列
+   */
+  get $columns() {
+    const ret = [];
+    for (const $c of this.children) {
+      if ($c instanceof TableCol) {
+        ret.push($c);
+      }
+    }
+    return ret;
+  }
+  /**
+   * 只属于这个 group 的下级 group
+   */
+  get $groups() {
+    const ret = [];
+    for (const $c of this.children) {
+      if ($c instanceof _TableColGroup2) {
+        ret.push($c);
+      }
+    }
+    return ret;
+  }
+  /**
+   * 当前列组是否显示
+   */
+  get visible() {
+    if (this.hidden) {
+      return false;
+    }
+    if (!this.isConnected) {
+      return false;
+    }
+    if (this.#$p instanceof _TableColGroup2) {
+      return this.#$p.visible;
+    }
+    return true;
+  }
+  /**
+   * 当直属于 table-cols，返回 1。
+   * grid-row-start 的值也是从 1 开始。
+   */
+  get tier() {
+    if (this.#$p instanceof _TableColGroup2) {
+      return this.#$p.tier + 1;
+    }
+    return 1;
+  }
+  // #endregion
+  // #region 上级元素
+  connectedCallback() {
+    if (this.#$p === this.parentElement) return;
+    this.prepend(this.$div);
+    this.#$p = this.parentElement;
+    this.#$p.notify({ groupAdd: true, $group: this });
+  }
+  #$p;
+  //为了 disconnected
+  disconnectedCallback() {
+    if (this.#$p && !this.parentElement) {
+      this.#$p.notify({ groupDel: true, $group: this });
+      this.#$p = void 0;
+    }
+  }
+  // #endregion
+  // #region ColNoticeReceiver
+  notify(n) {
+    if ("colAdd" in n && n.colAdd) {
+      if (!n.$col.hidden && this.hidden) this.hidden = false;
+    }
+    this.#$p?.notify(n);
+  }
+  // #endregion
+  // #region 属性
+  get label() {
+    return this.$lbl.textContent;
+  }
+  set label(v) {
+    this.$lbl.textContent = v;
+  }
+  _hidden_set() {
+    this.notify({ groupHide: true, $group: this });
+  }
+  // #endregion
+  // #region 组菜单
+  handleClick(e) {
+    if (e.target === this.$menu) {
+      this.#showMenu();
+    }
+  }
+  #showMenu() {
+    const mis = [
+      {
+        tag: "click",
+        label: this.T.hide,
+        group: "action",
+        onclick: () => {
+          this.hidden = true;
+        }
+      }
+      /* 无法与 table-cols.modelList 同步，所以删除此功能
+      {
+          label: T.del!(),
+          group: 'action',
+          onclick: () => {
+              this.remove();
+          }
+      },*/
+    ];
+    for (const $col of this.$columns) {
+      const colItem = {
+        tag: "check",
+        group: "table-col",
+        label: $col.label ?? "",
+        checked: !$col.hidden,
+        onclick() {
+          $col.setModelProperty("hidden", !$col.hidden);
+        }
+      };
+      mis.push(colItem);
+    }
+    const $sm = createMenu(...mis);
+    $sm.show(this.$menu, B.xy.rightBottom, B.xy.rightTop);
+  }
+  // #endregion
+  get T() {
+    return getTexts(this);
+  }
+};
+_init$d = __decoratorStart$d(_a$d);
+_TableColGroup = __decorateElement$d(_init$d, 0, "TableColGroup", _TableColGroup_decorators, _TableColGroup);
+__runInitializers$d(_init$d, 1, _TableColGroup);
+let TableColGroup = _TableColGroup;
+var __create$c = Object.create;
+var __defProp$c = Object.defineProperty;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __knownSymbol$c = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$c = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$c = (target, value) => __defProp$c(target, "name", { value, configurable: true });
+var __decoratorStart$c = (base) => [, , , __create$c(base?.[__knownSymbol$c("metadata")] ?? null)];
+var __decoratorStrings$c = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$c = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$c("Function expected") : fn;
+var __decoratorContext$c = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$c[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$c("Already initialized") : fns.push(__expectFn$c(fn || null)) });
+var __decoratorMetadata$c = (array, target) => __defNormalProp$c(target, __knownSymbol$c("metadata"), array[3]);
+var __runInitializers$c = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) fns[i].call(self);
+  return value;
+};
+var __decorateElement$c = (array, flags, name, decorators, target, extra) => {
+  var it, done, ctx, k = flags & 7, p = false;
+  var j = 0;
+  var extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (target = target.prototype, k < 5 && (k > 3 || !p) && __getOwnPropDesc$c(target, name));
+  __name$c(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$c(k, name, done = {}, array[3], extraInitializers);
+    it = (0, decorators[i])(target, ctx), done._ = 1;
+    __expectFn$c(it) && (target = it);
+  }
+  return __decoratorMetadata$c(array, target), desc && __defProp$c(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var _TableColWidthSetter_decorators, _init$c, _a$c;
+const styleSheet = createStyleSheet({
+  [tableColWidthSetterTagName]: `
+        position: absolute;
+        z-index: 100;
+        top: 0px;
+        left: 0px;
+        border: var(--gzm-header-border);
+        background: var(--gzm-a-btn-background);
+    `,
+  [tableColWidthSetterTagName + "> input[type=range]"]: `
+        outline-style: none;
+    `
+});
+_TableColWidthSetter_decorators = [defineElement({ tagName: tableColWidthSetterTagName, style: styleSheet })];
+class TableColWidthSetter extends (_a$c = HTMLElement) {
+  get $range() {
+    if (!this.#range) {
+      this.#range = document.createElement("input");
+      this.#range.type = "range";
+      this.append(this.#range);
+    }
+    return this.#range;
+  }
+  #range;
+  show($col) {
+    this.#calcSize($col);
+    this.$range.onchange = (e) => {
+      const $t = e.target;
+      console.debug("table column width range value = " + $t.value);
+      $col.width = $t.value + "px";
+      this.remove();
+    };
+    this.setAttribute("popover", "auto");
+    new CornerHelper(this, xy.leftTop, $col, xy.leftBottom).pos();
+  }
+  #calcSize($col) {
+    const root = $col.getRootNode();
+    const $table = root.host;
+    const colRect = $col.getBoundingClientRect();
+    const gridRect = $table.getBoundingClientRect();
+    const colRight2gridRight = Math.floor(gridRect.right - colRect.right);
+    const colRightEmptyWidth = colRight2gridRight - (gridRect.width - $table.clientWidth);
+    const max = Math.floor(colRect.width + colRightEmptyWidth);
+    const $r = this.$range;
+    $r.style.width = max + "px";
+    $r.max = max.toString();
+    $r.value = colRect.width.toString();
+  }
+}
+_init$c = __decoratorStart$c(_a$c);
+TableColWidthSetter = __decorateElement$c(_init$c, 0, "TableColWidthSetter", _TableColWidthSetter_decorators, TableColWidthSetter);
+__runInitializers$c(_init$c, 1, TableColWidthSetter);
+var __create$b = Object.create;
+var __defProp$b = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __knownSymbol$b = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$b = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$b = (target, value) => __defProp$b(target, "name", { value, configurable: true });
+var __decoratorStart$b = (base) => [, , , __create$b(base?.[__knownSymbol$b("metadata")] ?? null)];
+var __decoratorStrings$b = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$b = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$b("Function expected") : fn;
+var __decoratorContext$b = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$b[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$b("Already initialized") : fns.push(__expectFn$b(fn || null)) });
+var __decoratorMetadata$b = (array, target) => __defNormalProp$b(target, __knownSymbol$b("metadata"), array[3]);
+var __runInitializers$b = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement$b = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings$b[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc$b(k < 4 ? target : { get [name]() {
+    return __privateGet$1(this, extra);
+  }, set [name](x) {
+    return __privateSet$1(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name$b(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name$b(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$b(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn$1(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet$1 : __privateMethod$1)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet$1(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn$b(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError$b("Object expected");
+    else __expectFn$b(fn = it.get) && (desc.get = fn), __expectFn$b(fn = it.set) && (desc.set = fn), __expectFn$b(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata$b(array, target), desc && __defProp$b(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField$1 = (obj, key, value) => __defNormalProp$b(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$b("Cannot " + msg);
+var __privateIn$1 = (member, obj) => Object(obj) !== obj ? __typeError$b('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$b("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod$1 = (obj, member, method) => (__accessCheck$1(obj, member, "access private method"), method);
+var _agg_dec, _align_dec, _sort_dec, _width_dec, _label_dec, _key_dec, _a$b, _TableCol_decorators, _lbl, _$p, _vm, _TableCol_instances, setCellData_fn, createCellLink_fn, getDisplayFromList_fn, setCellStyle_fn, _init$b, _key, _label, _width, _sort, _align, _wrap, _agg, _agg2, showAggMenu_fn, createAggMenu_fn, _menuBtn, showMenu_fn, createMenu_fn, createWrapMenu_fn, createSortMenu_fn, createAlignMenu_fn, showWidthPopup_fn, sort_fn;
+const sortAsc = "▲";
+const sortDesc = "▼";
+const tableColSort = ["", sortAsc, sortDesc];
+function isAscSort(s) {
+  return s === sortAsc;
+}
+const tableColAlign = ["start", "end", "center", "justify"];
+const mutableAttributes$5 = ["key", "label", "width", "hidden", "sort", "agg", "align"];
+_TableCol_decorators = [B.defineElement({ tagName: tableColTagName, mutableAttributes: mutableAttributes$5 })];
+class TableCol extends (_a$b = M.ViewElement, _key_dec = [B.strAttr], _label_dec = [B.strAttr], _width_dec = [B.strAttr], _sort_dec = [B.strAttr], _align_dec = [B.strAttr], _agg_dec = [B.strAttr], _a$b) {
+  constructor() {
+    super(...arguments);
+    __privateAdd$1(this, _TableCol_instances);
+    __privateAdd$1(this, _lbl);
+    __publicField$1(this, "$btns");
+    __privateAdd$1(this, _$p);
+    __privateAdd$1(this, _vm);
+    __privateAdd$1(this, _key, __runInitializers$b(_init$b, 8, this)), __runInitializers$b(_init$b, 11, this);
+    __privateAdd$1(this, _label, __runInitializers$b(_init$b, 12, this)), __runInitializers$b(_init$b, 15, this);
+    __privateAdd$1(this, _width, __runInitializers$b(_init$b, 16, this, "auto")), __runInitializers$b(_init$b, 19, this);
+    __privateAdd$1(this, _sort, __runInitializers$b(_init$b, 20, this, tableColSort[0])), __runInitializers$b(_init$b, 23, this);
+    __privateAdd$1(this, _align, __runInitializers$b(_init$b, 24, this, tableColAlign[0])), __runInitializers$b(_init$b, 27, this);
+    __privateAdd$1(this, _wrap);
+    __privateAdd$1(this, _agg, __runInitializers$b(_init$b, 28, this)), __runInitializers$b(_init$b, 31, this);
+    __privateAdd$1(this, _agg2);
+    __publicField$1(this, "$aggBtn");
+    __privateAdd$1(this, _menuBtn);
+  }
+  // #region 子元素
+  get $lbl() {
+    if (!__privateGet$1(this, _lbl)) {
+      __privateSet$1(this, _lbl, document.createElement("span"));
+      this.prepend(__privateGet$1(this, _lbl));
+    }
+    return __privateGet$1(this, _lbl);
+  }
+  /**
+   * $lbl 之后允许有多个按钮，最后两个是 agg 按钮和 menu 按钮，但有可能不生成。
+   * btns 按钮在 $lbl 和 agg 按钮之间
+   */
+  set btns(v) {
+    let $bs = this.$btns;
+    if (!v || !v.length) {
+      $bs?.forEach(($b) => $b.remove());
+      return;
+    }
+    const $df = document.createDocumentFragment();
+    for (const b of v) {
+      let $btn = $bs?.find(($b) => $b.textContent === b.icon);
+      if (!$btn) {
+        $btn = B.createTxtBtn(b.icon);
+        $btn.title = b.title;
+      }
+      $df.appendChild($btn);
+    }
+    $bs = this.$btns = Array.from($df.children);
+    this.$lbl.after(...$bs);
+  }
+  //生成的按钮数组
+  // #endregion
+  // #region 上级元素
+  connectedCallback() {
+    if (__privateGet$1(this, _$p) === this.parentElement) return;
+    __privateSet$1(this, _$p, this.parentElement);
+    __privateGet$1(this, _$p).notify({ colAdd: true, $col: this });
+    void this.$menuBtn;
+  }
+  //父元素， disconnectedCallback 的时候有用。
+  disconnectedCallback() {
+    if (!this.parentElement && __privateGet$1(this, _$p)) {
+      this.$agg.remove();
+      __privateGet$1(this, _$p).notify({ colDel: true, $col: this });
+      __privateSet$1(this, _$p, void 0);
+    }
+  }
+  get visible() {
+    if (this.hidden) {
+      return false;
+    }
+    const $p = __privateGet$1(this, _$p);
+    if (!$p) {
+      return false;
+    }
+    if ($p instanceof TableColGroup) {
+      return $p.visible;
+    }
+    return true;
+  }
+  /**
+   * 如果没有任何 group，那么每一列都应该调用 setRow(1)
+   */
+  setRow(start) {
+    this.style.gridRowStart = start.toString();
+  }
+  // #endregion
+  // #region 数据展示
+  get valueMember() {
+    return __privateGet$1(this, _vm);
+  }
+  set valueMember(v) {
+    if (!(v instanceof M.ObjMember)) {
+      v = new M.ObjMember(v);
+    }
+    __privateSet$1(this, _vm, v);
+    __privateGet$1(this, _$p)?.notify({ colRefresh: true, $col: this });
+  }
+  set listSource(_) {
+    __privateGet$1(this, _$p)?.notify({ colRefresh: true, $col: this });
+  }
+  createCell(dataItem) {
+    const ret = document.createElement(tableCellTagName);
+    ret.colKey = this.key;
+    ret.hidden = this.hidden;
+    __privateMethod$1(this, _TableCol_instances, setCellStyle_fn).call(this, ret);
+    this._setCellData(ret, dataItem);
+    return ret;
+  }
+  _setCellData($cell, dataItem = $cell.$row.model.data) {
+    $cell.textContent = "";
+    if (!dataItem) return;
+    const dv = this.valueMember?.getObjValue(dataItem) ?? new M.ObjValue(void 0);
+    __privateMethod$1(this, _TableCol_instances, setCellData_fn).call(this, $cell, dv);
+    __privateMethod$1(this, _TableCol_instances, createCellLink_fn).call(this, $cell, dataItem, dv);
+  }
+  _key_set() {
+    __privateMethod$1(this, _TableCol_instances, setCellStyle_fn).call(this, this.$agg);
+    const a = this.align;
+    if (a !== tableColAlign[0]) {
+      this._align_set(a);
+    }
+    this._wrap_set(this.wrap);
+  }
+  _label_set(nv) {
+    this.$lbl.textContent = nv;
+  }
+  _width_set() {
+    __privateGet$1(this, _$p)?.notify({ colWidth: true, $col: this });
+  }
+  _sort_set() {
+    __privateGet$1(this, _$p)?.notify({ colSort: true, $col: this });
+  }
+  get isAscSort() {
+    return isAscSort(this.sort);
+  }
+  _align_set(nv) {
+    const key = this.key;
+    const $list = this.closest(tableListTagName);
+    $list?.style.setProperty(`--gzm-text-align-${key}`, nv);
+  }
+  //因为 attribute 中的 bool 属性无法实现 3 种状态，所以这里没有使用 attribute。
+  get wrap() {
+    return __privateGet$1(this, _wrap);
+  }
+  set wrap(v) {
+    __privateSet$1(this, _wrap, v);
+    this._wrap_set(v);
+  }
+  _wrap_set(nv) {
+    let whiteSpace = "normal";
+    let wordBreak = "normal";
+    switch (nv) {
+      case true:
+        wordBreak = "break-all";
+        break;
+      case false:
+        whiteSpace = "nowrap";
+        break;
+    }
+    const key = this.key;
+    const $list = this.closest(tableListTagName);
+    $list?.style.setProperty(`--gzm-white-space-${key}`, whiteSpace);
+    $list?.style.setProperty(`--gzm-word-break-${key}`, wordBreak);
+  }
+  _agg_set() {
+    this.aggValue = new M.ObjValue(void 0);
+    __privateGet$1(this, _$p)?.notify({ colAgg: true, $col: this });
+  }
+  _hidden_set() {
+    this.$agg.hidden = this.hidden;
+    __privateGet$1(this, _$p)?.notify({ colHide: true, $col: this });
+    console.debug(`grid column ${this.label} hidden = ${this.hidden}.
+`);
+  }
+  // #endregion
+  // #region 聚合
+  /**
+   * 这个元素由列生成，但是不会作为列的子元素
+   */
+  get $agg() {
+    if (!__privateGet$1(this, _agg2)) {
+      const $agg = __privateSet$1(this, _agg2, document.createElement(tableAggTagName));
+      $agg.hidden = this.hidden;
+    }
+    return __privateGet$1(this, _agg2);
+  }
+  set aggValue(v) {
+    const $a = this.$agg;
+    const agg = this.agg;
+    if (agg) {
+      $a.setAttribute("title", Reflect.get(this.T, agg));
+      __privateMethod$1(this, _TableCol_instances, setCellData_fn).call(this, $a, v);
+    } else {
+      $a.removeAttribute("title");
+      $a.textContent = "";
+    }
+  }
+  /**
+   * model.aggs 中的属性设置，无需保存在成员中。只是检查按钮是否存在。
+   */
+  set aggs(v) {
+    if (v && v.length) {
+      let $btn = this.$aggBtn;
+      if (!$btn) {
+        $btn = this.$aggBtn = B.createTxtBtn("𝚺");
+        this.$menuBtn.before($btn);
+      }
+    } else {
+      this.$aggBtn?.remove();
+      this.$aggBtn = void 0;
+    }
+  }
+  // #endregion
+  // #region 菜单
+  get $menuBtn() {
+    if (!__privateGet$1(this, _menuBtn)) {
+      __privateSet$1(this, _menuBtn, B.createTxtBtn("⋮"));
+      this.append(__privateGet$1(this, _menuBtn));
+    }
+    return __privateGet$1(this, _menuBtn);
+  }
+  get noMenu() {
+    return this.$menuBtn.hidden;
+  }
+  set noMenu(b) {
+    this.$menuBtn.hidden = b;
+  }
+  // #endregion
+  // #region  鼠标点击
+  handleClick(e) {
+    const $t = e.target;
+    if ($t === this.$aggBtn) {
+      __privateMethod$1(this, _TableCol_instances, showAggMenu_fn).call(this);
+    } else if ($t === this.$menuBtn) {
+      __privateMethod$1(this, _TableCol_instances, showMenu_fn).call(this);
+    } else if (e.target === this.$lbl) {
+      __privateMethod$1(this, _TableCol_instances, sort_fn).call(this);
+    } else if (this.$btns?.includes($t)) {
+      const i = this.$btns.indexOf($t);
+      const func = this.model?.btns?.[i]?.onclick;
+      func?.(this, $t);
+    }
+  }
+  // #endregion
+  get T() {
+    return getTexts(this);
+  }
+}
+_init$b = __decoratorStart$b(_a$b);
+_lbl = /* @__PURE__ */ new WeakMap();
+_$p = /* @__PURE__ */ new WeakMap();
+_vm = /* @__PURE__ */ new WeakMap();
+_TableCol_instances = /* @__PURE__ */ new WeakSet();
+setCellData_fn = function($cell, dv) {
+  dv = __privateMethod$1(this, _TableCol_instances, getDisplayFromList_fn).call(this, dv) || dv;
+  $cell.textContent = dv.toString(this);
+};
+createCellLink_fn = function($cell, dataItem, dataValue) {
+  this.model?.setCellContent?.({
+    $cell,
+    $col: this,
+    dataItem,
+    dataValue
+  });
+};
+getDisplayFromList_fn = function(dv) {
+  const ls = this.model?.listSource;
+  return ls?.getListDisplay(dv);
+};
+setCellStyle_fn = function($cell) {
+  const key = this.key;
+  $cell.style.textAlign = `var(--gzm-text-align-${key}, start)`;
+  $cell.style.whiteSpace = `var(--gzm-white-space-${key}, normal)`;
+  $cell.style.wordBreak = `var(--gzm-word-break-${key}, normal)`;
+};
+_key = /* @__PURE__ */ new WeakMap();
+_label = /* @__PURE__ */ new WeakMap();
+_width = /* @__PURE__ */ new WeakMap();
+_sort = /* @__PURE__ */ new WeakMap();
+_align = /* @__PURE__ */ new WeakMap();
+_wrap = /* @__PURE__ */ new WeakMap();
+_agg = /* @__PURE__ */ new WeakMap();
+_agg2 = /* @__PURE__ */ new WeakMap();
+showAggMenu_fn = function() {
+  const mis = __privateMethod$1(this, _TableCol_instances, createAggMenu_fn).call(this);
+  if (!mis || !mis.length) {
+    this.$aggBtn?.showTooltip({
+      render: ($tt) => {
+        $tt.textContent = this.T.noMenuSet;
+      }
+    });
+    return;
+  }
+  const $m = createMenu(...mis);
+  $m.show(this.$aggBtn, B.xy.rightBottom, B.xy.rightTop);
+};
+createAggMenu_fn = function() {
+  let aggs = this.model?.aggs;
+  if (!aggs || !aggs.length) {
+    return [];
+  }
+  const ta = this.agg ?? "";
+  if (ta && !aggs.includes(ta)) {
+    aggs = [ta, ...aggs];
+  }
+  aggs = ["", ...aggs];
+  const T = this.T;
+  const group = "agg";
+  const items = aggs.map((a) => {
+    return {
+      tag: "radio",
+      label: a ? Reflect.get(T, a) : T.noAgg,
+      group,
+      checked: ta === a,
+      onclick: () => {
+        this.setModelProperty("agg", a);
+      }
+    };
+  });
+  return items;
+};
+_menuBtn = /* @__PURE__ */ new WeakMap();
+showMenu_fn = function() {
+  const mis = __privateMethod$1(this, _TableCol_instances, createMenu_fn).call(this);
+  if (!mis || !mis.length) {
+    this.$menuBtn.showTooltip({
+      render: ($tt) => {
+        $tt.textContent = this.T.noMenuSet;
+      }
+    });
+    return;
+  }
+  const $m = createMenu(...mis);
+  $m.show(this.$menuBtn, B.xy.rightBottom, B.xy.rightTop);
+};
+createMenu_fn = function() {
+  const T = this.T;
+  const hideItem = { tag: "click", label: T.hide, group: "c", onclick: () => this.setModelProperty("hidden", true) };
+  const alignItem = { tag: "menu", label: T.textAlign, subItems: __privateMethod$1(this, _TableCol_instances, createAlignMenu_fn).call(this), group: "m" };
+  const wrapItem = { tag: "menu", label: T.textWrap, subItems: __privateMethod$1(this, _TableCol_instances, createWrapMenu_fn).call(this), group: "m" };
+  const sortItem = { tag: "menu", label: T.sort, subItems: __privateMethod$1(this, _TableCol_instances, createSortMenu_fn).call(this), group: "m" };
+  const autoWidthItem = { tag: "radio", label: T.autoWidth, group: "width", onclick: () => this.setModelProperty("width", "auto") };
+  const minItem = { tag: "radio", label: T.minWidth, group: "width", onclick: () => this.setModelProperty("width", "min-content") };
+  const maxItem = { tag: "radio", label: T.maxWidth, group: "width", onclick: () => this.setModelProperty("width", "max-content") };
+  const pxItem = { tag: "radio", label: T.pxWidth, group: "width", onclick: () => __privateMethod$1(this, _TableCol_instances, showWidthPopup_fn).call(this) };
+  switch (this.width) {
+    case "min-content":
+      minItem.checked = true;
+      break;
+    case "max-content":
+      maxItem.checked = true;
+      break;
+    case "auto":
+      autoWidthItem.checked = true;
+      break;
+    default:
+      {
+        const regex = /^\d+(\.\d+)?px$/;
+        if (regex.test(this.width)) {
+          pxItem.checked = true;
+        }
+      }
+      break;
+  }
+  const menuItems = [hideItem, alignItem, wrapItem, sortItem, autoWidthItem, minItem, maxItem, pxItem];
+  this.model?.beforeMenuShow?.(menuItems, this.model);
+  return menuItems;
+};
+createWrapMenu_fn = function() {
+  const T = this.T;
+  const Ts = [
+    T.autoWrap,
+    T.mustWrap,
+    //url,email 这类字符串不换行，强制其换行。
+    T.noWrap
+    //中文文本会自动换行，强制其不换行。
+  ];
+  const tw = this.wrap;
+  const tableColWrap = [void 0, true, false];
+  const items = tableColWrap.map((w, i) => {
+    return {
+      tag: "radio",
+      label: Ts[i],
+      checked: tw === w,
+      onclick: () => {
+        this.setModelProperty("wrap", w);
+      }
+    };
+  });
+  return items;
+};
+createSortMenu_fn = function() {
+  const T = this.T;
+  const Ts = [
+    T.noSort,
+    T.asc,
+    T.desc
+  ];
+  const ta = this.sort;
+  const items = tableColSort.map((s, i) => {
+    return {
+      tag: "radio",
+      label: Ts[i],
+      checked: ta === s,
+      onclick: () => {
+        this.setModelProperty("sort", s);
+      }
+    };
+  });
+  return items;
+};
+createAlignMenu_fn = function() {
+  const T = this.T;
+  const Ts = [
+    T.startAlign,
+    T.endAlign,
+    T.centerAlign,
+    T.justifyAlign
+  ];
+  const ta = this.align;
+  const items = tableColAlign.map((a, i) => {
+    return {
+      tag: "radio",
+      label: Ts[i],
+      checked: ta === a,
+      onclick: () => {
+        this.setModelProperty("align", a);
+      }
+    };
+  });
+  return items;
+};
+showWidthPopup_fn = function() {
+  const $setter = document.createElement(tableColWidthSetterTagName);
+  $setter.show(this);
+};
+sort_fn = function() {
+  let s = this.sort;
+  const i = tableColSort.indexOf(s);
+  s = tableColSort[i + 1] ?? tableColSort[0];
+  this.setModelProperty("sort", s);
+};
+__decorateElement$b(_init$b, 4, "key", _key_dec, TableCol, _key);
+__decorateElement$b(_init$b, 4, "label", _label_dec, TableCol, _label);
+__decorateElement$b(_init$b, 4, "width", _width_dec, TableCol, _width);
+__decorateElement$b(_init$b, 4, "sort", _sort_dec, TableCol, _sort);
+__decorateElement$b(_init$b, 4, "align", _align_dec, TableCol, _align);
+__decorateElement$b(_init$b, 4, "agg", _agg_dec, TableCol, _agg);
+TableCol = __decorateElement$b(_init$b, 0, "TableCol", _TableCol_decorators, TableCol);
+__runInitializers$b(_init$b, 1, TableCol);
+class Snapshot {
+  constructor($t) {
+    this.$t = $t;
+  }
+  $t;
+  // #region 列
+  get $startColumns() {
+    return this.#startCols ??= Array.from(this.$t.$colStartCols.querySelectorAll(tableColTagName));
+  }
+  #startCols;
+  get $startColumnsVisible() {
+    return this.#startColsVisible ??= this.$startColumns.filter(($c) => $c.visible);
+  }
+  #startColsVisible;
+  get $middleColumns() {
+    return this.#middleCols ??= Array.from(this.$t.$colMiddleCols.querySelectorAll(tableColTagName));
+  }
+  #middleCols;
+  get $middleColumnsVisible() {
+    return this.#middleColsVisible ??= this.$middleColumns.filter(($c) => $c.visible);
+  }
+  #middleColsVisible;
+  get $endColumns() {
+    return this.#endCols ??= Array.from(this.$t.$colEndCols.querySelectorAll(tableColTagName));
+  }
+  #endCols;
+  get $endColumnsVisible() {
+    return this.#endColsVisible ??= this.$endColumns.filter(($c) => $c.visible);
+  }
+  #endColsVisible;
+  get $columns() {
+    return this.#cols ??= Array.from(this.$t.querySelectorAll(tableColTagName));
+  }
+  #cols;
+  get $columnsVisible() {
+    return this.#colsVisible ??= this.$columns.filter((c) => c.visible);
+  }
+  #colsVisible;
+  get $columnsNeedAgg() {
+    return this.#colsNeedAgg ??= this.$columnsVisible.filter((c) => c.agg);
+  }
+  #colsNeedAgg;
+  get $columnsWantSort() {
+    return this.#colsWantSort ??= this.$columnsVisible.filter((c) => c.sort);
+  }
+  #colsWantSort;
+  // #endregion
+  // #region 头和尾
+  get $columnHeads() {
+    return this.#colHeads ??= Array.from(this.$t.$colHead.children);
+  }
+  #colHeads;
+  get $columnHeadsVisible() {
+    return this.#colHeadsVisible ??= this.$columnHeads.filter(($c) => !$c.hidden);
+  }
+  #colHeadsVisible;
+  get $columnTails() {
+    return this.#colTails ??= Array.from(this.$t.$colTail.children);
+  }
+  #colTails;
+  get $columnTailsVisible() {
+    return this.#colTailsVisible ??= this.$columnTails.filter(($c) => !$c.hidden);
+  }
+  #colTailsVisible;
+  // #endregion
+  // #region 行
+  get $rows() {
+    return this.#rows ??= Array.from(this.$t.$rows.querySelectorAll(tableRowTagName));
+  }
+  #rows;
+  get $rowsActive() {
+    return this.#rowsActive ??= this.$rows.filter(($row) => $row.active);
+  }
+  #rowsActive;
+  // #endregion
+  // #region 列组
+  /**
+   * 顶层 column 和 group
+   */
+  get $visibleTopColumnsAndGroups() {
+    if (!this.#visibleTopColsAndGroups) {
+      this.#visibleTopColsAndGroups = [];
+      const tmp = this.#visibleTopColsAndGroups;
+      const $colss = [this.$t.$colStartCols, this.$t.$colMiddleCols, this.$t.$colEndCols];
+      for (const $cols of $colss) {
+        for (const $c of $cols.children) {
+          if ($c instanceof TableCol && $c.visible) {
+            tmp.push($c);
+          } else if ($c instanceof TableColGroup && $c.visible) {
+            tmp.push($c);
+          }
+        }
+      }
+    }
+    return this.#visibleTopColsAndGroups;
+  }
+  #visibleTopColsAndGroups;
+  /**
+   * 所有可见列所属的 group 的最大 level
+   */
+  get groupsMaxTier() {
+    if (this.#maxTier === void 0) {
+      const tiers = this.$columnsVisible.map(($c) => $c.parentElement).filter(($c) => $c instanceof TableColGroup).map((c) => c.tier);
+      if (tiers.length === 0) {
+        this.#maxTier = 0;
+      } else {
+        this.#maxTier = Math.max(...tiers);
+      }
+    }
+    return this.#maxTier;
+  }
+  #maxTier;
+  // #endregion
+}
+class TableColHeadTailBase extends M.ViewElement {
+  // #region 子元素
+  _createUI() {
+  }
+  get $agg() {
+    return this.#agg ??= document.createElement(tableAggTagName);
+  }
+  #agg;
+  // #endregion
+  // #region 父元素
+  connectedCallback() {
+    if (this.$p === this.parentElement) return;
+    this.#checkUnique();
+    this._createUI();
+    this.$p = this.parentElement;
+    this.$p.notifyConnected(this);
+  }
+  $p;
+  //父元素，在 disconnectedCallback() 中使用
+  disconnectedCallback() {
+    if (!this.parentElement && this.$p) {
+      this._clear();
+      this.$agg.remove();
+      this.$p.notifyDisconnected(this);
+      this.$p = void 0;
+    }
+  }
+  /**
+   * 为了简化一种只允许在 grid 存在一个
+   * 否则 findInRow() 就会非常复杂！
+   */
+  #checkUnique() {
+    const root = this.getRootNode();
+    if (root.querySelectorAll(this.tagName).length > 1) {
+      throw new Error(`grid already has ${this.tagName}`);
+    }
+  }
+  _clear() {
+  }
+  // #endregion
+  // #region 属性
+  get width() {
+    return "36px";
+  }
+  get visible() {
+    const $p = this.$p;
+    if (!$p) return false;
+    return !(this.hidden || $p.hidden);
+  }
+  get dataAware() {
+    return false;
+  }
+  _hidden_set() {
+    this.$agg.hidden = this.hidden;
+    this.$p?.notifyHide(this);
+  }
+  // #endregion
+  // #region 行
+  createInRow() {
+    return document.createElement(this.rowTagName);
+  }
+  /**
+   * dataAware = true 时会被调用，由子类重写。
+   */
+  refresh($row, $headOrTail) {
+  }
+  findInRow($row) {
+    return $row.querySelector(this.rowTagName);
+  }
+  getAllInRow() {
+    const root = this.getRootNode();
+    if (!root) return [];
+    return Array.from(root.querySelectorAll(this.rowTagName));
+  }
+  // #endregion
+}
+var __create$a = Object.create;
+var __defProp$a = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __knownSymbol$a = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$a = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$a = (target, value) => __defProp$a(target, "name", { value, configurable: true });
+var __decoratorStart$a = (base) => [, , , __create$a(base?.[__knownSymbol$a("metadata")] ?? null)];
+var __decoratorStrings$a = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$a = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$a("Function expected") : fn;
+var __decoratorContext$a = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$a[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$a("Already initialized") : fns.push(__expectFn$a(fn || null)) });
+var __decoratorMetadata$a = (array, target) => __defNormalProp$a(target, __knownSymbol$a("metadata"), array[3]);
+var __runInitializers$a = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) fns[i].call(self);
+  return value;
+};
+var __decorateElement$a = (array, flags, name, decorators, target, extra) => {
+  var it, done, ctx, k = flags & 7, p = false;
+  var j = 0;
+  var extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (target = target.prototype, k < 5 && (k > 3 || !p) && __getOwnPropDesc$a(target, name));
+  __name$a(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$a(k, name, done = {}, array[3], extraInitializers);
+    it = (0, decorators[i])(target, ctx), done._ = 1;
+    __expectFn$a(it) && (target = it);
+  }
+  return __decoratorMetadata$a(array, target), desc && __defProp$a(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var _TableColCheckbox_decorators, _init$a, _a$a, _TableRowCheckbox_decorators, _init2$2, _b$3;
+const mutableAttributes$4 = ["hidden"];
+_TableColCheckbox_decorators = [B.defineElement({ tagName: tableColCheckTagName, mutableAttributes: mutableAttributes$4 })];
+class TableColCheckbox extends (_a$a = TableColHeadTailBase) {
+  $chk;
+  _createUI() {
+    const root = this.getRootNode();
+    root.addEventListener("change", this.#changeHandler);
+    if (!this.$chk) {
+      const $chk = this.$chk = document.createElement("input");
+      $chk.type = "checkbox";
+      $chk.name = "0";
+      const lbl = document.createElement("label");
+      lbl.title = this.T.toggleCheck;
+      lbl.append($chk);
+      this.append(lbl);
+    }
+  }
+  #changeHandler = (e) => {
+    const $et = e.target;
+    const checked = $et.checked;
+    const $col = $et.closest(tableColCheckTagName);
+    if ($col) {
+      const $tl = $col.closest(tableListTagName);
+      if ($tl) {
+        $tl.createSnapshot().$rows.forEach(($row) => $row.setModelProperty("checked", checked));
+        this.model?.rowsCheckChanged?.(checked);
+      }
+      return;
+    }
+    const $rc = $et.closest(tableRowCheckTagName);
+    if ($rc) {
+      const $row = $rc.closest(tableRowTagName);
+      if ($row) {
+        $row.setModelProperty("checked", checked);
+        this.model?.rowCheckChanged?.($row, checked);
+      }
+    }
+  };
+  _clear() {
+    const root = this.$p?.getRootNode();
+    root?.removeEventListener("change", this.#changeHandler);
+  }
+  get rowTagName() {
+    return tableRowCheckTagName;
+  }
+  get T() {
+    return getTexts(this);
+  }
+}
+_init$a = __decoratorStart$a(_a$a);
+TableColCheckbox = __decorateElement$a(_init$a, 0, "TableColCheckbox", _TableColCheckbox_decorators, TableColCheckbox);
+__runInitializers$a(_init$a, 1, TableColCheckbox);
+_TableRowCheckbox_decorators = [B.defineElement({ tagName: tableRowCheckTagName })];
+class TableRowCheckbox extends (_b$3 = HTMLElement) {
+  constructor() {
+    super();
+    const $chk = this.$chk = document.createElement("input");
+    $chk.type = "checkbox";
+    $chk.name = "1";
+  }
+  $chk;
+  connectedCallback() {
+    this.append(this.$chk);
+  }
+}
+_init2$2 = __decoratorStart$a(_b$3);
+TableRowCheckbox = __decorateElement$a(_init2$2, 0, "TableRowCheckbox", _TableRowCheckbox_decorators, TableRowCheckbox);
+__runInitializers$a(_init2$2, 1, TableRowCheckbox);
+var __create$9 = Object.create;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$9 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$9 = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$9 = (target, value) => __defProp$9(target, "name", { value, configurable: true });
+var __decoratorStart$9 = (base) => [, , , __create$9(base?.[__knownSymbol$9("metadata")] ?? null)];
+var __decoratorStrings$9 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$9 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$9("Function expected") : fn;
+var __decoratorContext$9 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$9[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$9("Already initialized") : fns.push(__expectFn$9(fn || null)) });
+var __decoratorMetadata$9 = (array, target) => __defNormalProp$9(target, __knownSymbol$9("metadata"), array[3]);
+var __runInitializers$9 = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) fns[i].call(self);
+  return value;
+};
+var __decorateElement$9 = (array, flags, name, decorators, target, extra) => {
+  var it, done, ctx, k = flags & 7, p = false;
+  var j = 0;
+  var extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (target = target.prototype, k < 5 && (k > 3 || !p) && __getOwnPropDesc$9(target, name));
+  __name$9(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$9(k, name, done = {}, array[3], extraInitializers);
+    it = (0, decorators[i])(target, ctx), done._ = 1;
+    __expectFn$9(it) && (target = it);
+  }
+  return __decoratorMetadata$9(array, target), desc && __defProp$9(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var _TableColSerialNo_decorators, _init$9, _a$9;
+const mutableAttributes$3 = ["hidden"];
+_TableColSerialNo_decorators = [B.defineElement({ tagName: tableColSerialTagName, mutableAttributes: mutableAttributes$3 })];
+class TableColSerialNo extends (_a$9 = TableColHeadTailBase) {
+  get rowTagName() {
+    return tableRowSerialTagName;
+  }
+  _createUI() {
+    this.textContent = "#";
+  }
+  get width() {
+    return "minmax(36px, auto)";
+  }
+}
+_init$9 = __decoratorStart$9(_a$9);
+TableColSerialNo = __decorateElement$9(_init$9, 0, "TableColSerialNo", _TableColSerialNo_decorators, TableColSerialNo);
+__runInitializers$9(_init$9, 1, TableColSerialNo);
+var __create$8 = Object.create;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$8 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$8 = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$8 = (target, value) => __defProp$8(target, "name", { value, configurable: true });
+var __decoratorStart$8 = (base) => [, , , __create$8(base?.[__knownSymbol$8("metadata")] ?? null)];
+var __decoratorStrings$8 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$8 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$8("Function expected") : fn;
+var __decoratorContext$8 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$8[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$8("Already initialized") : fns.push(__expectFn$8(fn || null)) });
+var __decoratorMetadata$8 = (array, target) => __defNormalProp$8(target, __knownSymbol$8("metadata"), array[3]);
+var __runInitializers$8 = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) fns[i].call(self);
+  return value;
+};
+var __decorateElement$8 = (array, flags, name, decorators, target, extra) => {
+  var it, done, ctx, k = flags & 7, p = false;
+  var j = 0;
+  var extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (target = target.prototype, k < 5 && (k > 3 || !p) && __getOwnPropDesc$8(target, name));
+  __name$8(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$8(k, name, done = {}, array[3], extraInitializers);
+    it = (0, decorators[i])(target, ctx), done._ = 1;
+    __expectFn$8(it) && (target = it);
+  }
+  return __decoratorMetadata$8(array, target), desc && __defProp$8(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var _TableColAction_decorators, _init$8, _a$8, _TableRowAction_decorators, _init2$1, _b$2;
+const mutableAttributes$2 = ["hidden"];
+_TableColAction_decorators = [B.defineElement({ tagName: tableColActionTagName, mutableAttributes: mutableAttributes$2 })];
+class TableColAction extends (_a$8 = TableColHeadTailBase) {
+  get rowTagName() {
+    return tableRowActionTagName;
+  }
+  createInRow() {
+    const $ret = super.createInRow();
+    const acts = this.actions;
+    if (acts) {
+      for (const action in acts) {
+        const $btn = B.createTxtBtn(action);
+        $ret.append($btn);
+        $ret.btns[action] = $btn;
+      }
+    }
+    return $ret;
+  }
+  refresh($row, $headOrTail = this.findInRow($row)) {
+    if (!$headOrTail) return;
+    const $inRow = $headOrTail;
+    this.model?.rowActionConfig?.($row, $inRow, $inRow.btns);
+  }
+  // #region 属性
+  get width() {
+    return "auto";
+  }
+  get dataAware() {
+    return true;
+  }
+  actions;
+  get label() {
+    return this.textContent;
+  }
+  set label(v) {
+    this.textContent = v;
+  }
+  // #endregion
+}
+_init$8 = __decoratorStart$8(_a$8);
+TableColAction = __decorateElement$8(_init$8, 0, "TableColAction", _TableColAction_decorators, TableColAction);
+__runInitializers$8(_init$8, 1, TableColAction);
+_TableRowAction_decorators = [B.defineElement({ tagName: tableRowActionTagName })];
+class TableRowAction extends (_b$2 = HTMLElement) {
+  /**
+   * 为了在 GridColAction.refresh() 中触发事件用，从功能上来说没有必要定义这个属性，可以临时生成 btns 对象。
+   * 但是在触发事件时读取 button.innerText，导致在 _createRowsFromDataSource() 中调用时回流。
+   * 因为按钮刚刚生成还未绘制，读取 innerText 就会回流，所以要避免读取 innerText。
+   * 于是就在这里定义了这个属性。
+   */
+  btns = {};
+  handleClick(e, $list) {
+    const $btn = e.target;
+    if (!B.isTxtBtn($btn)) return;
+    const $row = this.closest(tableRowTagName);
+    if (!$row) return;
+    const $ht = $list.querySelector(tableColActionTagName);
+    if (!$ht) return;
+    const acts = $ht.model?.actions;
+    if (!acts) return;
+    const action = $btn.textContent;
+    const func = acts[action];
+    func?.({
+      $row,
+      $rowAction: this,
+      $btn
+    });
+  }
+}
+_init2$1 = __decoratorStart$8(_b$2);
+TableRowAction = __decorateElement$8(_init2$1, 0, "TableRowAction", _TableRowAction_decorators, TableRowAction);
+__runInitializers$8(_init2$1, 1, TableRowAction);
+var __create$7 = Object.create;
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$7 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$7 = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$7 = (target, value) => __defProp$7(target, "name", { value, configurable: true });
+var __decoratorStart$7 = (base) => [, , , __create$7(base?.[__knownSymbol$7("metadata")] ?? null)];
+var __decoratorStrings$7 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$7 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$7("Function expected") : fn;
+var __decoratorContext$7 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$7[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$7("Already initialized") : fns.push(__expectFn$7(fn || null)) });
+var __decoratorMetadata$7 = (array, target) => __defNormalProp$7(target, __knownSymbol$7("metadata"), array[3]);
+var __runInitializers$7 = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) fns[i].call(self);
+  return value;
+};
+var __decorateElement$7 = (array, flags, name, decorators, target, extra) => {
+  var it, done, ctx, k = flags & 7, p = false;
+  var j = 0;
+  var extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (target = target.prototype, k < 5 && (k > 3 || !p) && __getOwnPropDesc$7(target, name));
+  __name$7(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$7(k, name, done = {}, array[3], extraInitializers);
+    it = (0, decorators[i])(target, ctx), done._ = 1;
+    __expectFn$7(it) && (target = it);
+  }
+  return __decoratorMetadata$7(array, target), desc && __defProp$7(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var _TableColMenu_decorators, _init$7, _a$7, _TableRowMenu_decorators, _init2, _b$1;
+const mutableAttributes$1 = ["hidden"];
+_TableColMenu_decorators = [B.defineElement({ tagName: tableColMenuTagName, mutableAttributes: mutableAttributes$1 })];
+class TableColMenu extends (_a$7 = TableColHeadTailBase) {
+  get rowTagName() {
+    return tableRowMenuTagName;
+  }
+  createInRow() {
+    const $btn = B.createTxtBtn("⋮");
+    const $ret = super.createInRow();
+    $ret.append($btn);
+    return $ret;
+  }
+}
+_init$7 = __decoratorStart$7(_a$7);
+TableColMenu = __decorateElement$7(_init$7, 0, "TableColMenu", _TableColMenu_decorators, TableColMenu);
+__runInitializers$7(_init$7, 1, TableColMenu);
+_TableRowMenu_decorators = [B.defineElement({ tagName: tableRowMenuTagName })];
+class TableRowMenu extends (_b$1 = HTMLElement) {
+  handleClick(e, $list) {
+    const $btn = e.target;
+    if (!B.isTxtBtn($btn)) return;
+    const $row = this.closest(tableRowTagName);
+    if (!$row) {
+      return;
+    }
+    const $cm = $list.querySelector(tableColMenuTagName);
+    if (!$cm) {
+      return;
+    }
+    $cm.model?.rowMenuClick?.($row, this, $btn);
+  }
+}
+_init2 = __decoratorStart$7(_b$1);
+TableRowMenu = __decorateElement$7(_init2, 0, "TableRowMenu", _TableRowMenu_decorators, TableRowMenu);
+__runInitializers$7(_init2, 1, TableRowMenu);
+var __create$6 = Object.create;
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$6 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$6 = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$6 = (target, value) => __defProp$6(target, "name", { value, configurable: true });
+var __decoratorStart$6 = (base) => [, , , __create$6(base?.[__knownSymbol$6("metadata")] ?? null)];
+var __decoratorStrings$6 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$6 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$6("Function expected") : fn;
+var __decoratorContext$6 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$6[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$6("Already initialized") : fns.push(__expectFn$6(fn || null)) });
+var __decoratorMetadata$6 = (array, target) => __defNormalProp$6(target, __knownSymbol$6("metadata"), array[3]);
+var __runInitializers$6 = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) fns[i].call(self);
+  return value;
+};
+var __decorateElement$6 = (array, flags, name, decorators, target, extra) => {
+  var it, done, ctx, k = flags & 7, p = false;
+  var j = 0;
+  var extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (target = target.prototype, k < 5 && (k > 3 || !p) && __getOwnPropDesc$6(target, name));
+  __name$6(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$6(k, name, done = {}, array[3], extraInitializers);
+    it = (0, decorators[i])(target, ctx), done._ = 1;
+    __expectFn$6(it) && (target = it);
+  }
+  return __decoratorMetadata$6(array, target), desc && __defProp$6(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var _TableRows_decorators, _init$6, _a$6;
+_TableRows_decorators = [defineElement({ tagName: tableRowsTagName })];
+class TableRows extends (_a$6 = M.ViewListElement) {
+  // #region ViewListElement
+  _getViewItemTagName() {
+    return tableRowTagName;
+  }
+  [M.handleModelEvent](source, evt) {
+    if (source === this.modelList) {
+      return new RowsModelListEventHandler(this, source).handle(evt);
+    }
+    return super[M.handleModelEvent](source, evt);
+  }
+  // #endregion
+  /**
+   * 根据数据源排序
+   */
+  sortDataSource(ss) {
+    const ds = this.modelList;
+    if (!ds || ds.length === 0) {
+      return false;
+    }
+    const $cols = ss.$columnsWantSort;
+    if ($cols.length === 0) {
+      return false;
+    }
+    const func = getSortFunc($cols);
+    ds.sort(func);
+    if (M.modelEventPaused in ds) ;
+    else {
+      const ev = new M.ModelListSortEvent(ds);
+      this[M.handleModelEvent](ds, ev);
+    }
+    return true;
+  }
+}
+_init$6 = __decoratorStart$6(_a$6);
+TableRows = __decorateElement$6(_init$6, 0, "TableRows", _TableRows_decorators, TableRows);
+__runInitializers$6(_init$6, 1, TableRows);
+class RowsModelListEventHandler extends M.ModelListEventHandler {
+  constructor($rows, source) {
+    super($rows, source);
+    this.$rows = $rows;
+    this.$list = $rows.parentElement;
+    this.#ss = this.$list.createSnapshot();
+  }
+  $rows;
+  $list;
+  #ss;
+  #refreshFunc;
+  refreshRow($row) {
+    const rf = this.#refreshFunc ??= this.$list.getRowRefreshFunc(this.#ss);
+    rf($row, true);
+  }
+  sortItem(item) {
+    const $cols = this.#ss.$columnsWantSort;
+    if ($cols.length === 0) return;
+    const ml = this.$vl.modelList;
+    if ("sortItem" in ml && typeof ml.sortItem === "function") {
+      const func = getSortFunc($cols);
+      ml.sortItem(item, func);
+    }
+  }
+  _createEleItem(item) {
+    const $ret = super._createEleItem(item);
+    this.refreshRow($ret);
+    return $ret;
+  }
+  _refresh($row) {
+    this.refreshRow($row);
+  }
+  _insert(arg) {
+    const ret = super._insert(arg);
+    this.$list.refreshAggs(this.#ss);
+    arg.items.forEach((item) => this.sortItem(item));
+    return ret;
+  }
+  _update(arg) {
+    const ret = super._update(arg);
+    this.$list.refreshAggs(this.#ss);
+    this.sortItem(arg.item);
+    return ret;
+  }
+  _delete(arg) {
+    const ret = super._delete(arg);
+    this.$list.refreshAggs(this.#ss);
+    return ret;
+  }
+  _replace(arg) {
+    const ret = super._replace(arg);
+    this.$list.refreshAggs(this.#ss);
+    this.sortItem(arg.item);
+    return ret;
+  }
+  _reset(arg) {
+    const ret = super._reset(arg);
+    this.$list.refreshAggs(this.#ss);
+    if (this.$list.$table.autoSort) {
+      this.$rows.sortDataSource(this.#ss);
+    }
+    return ret;
+  }
+  _sort(arg) {
+    return super._sort(arg);
+  }
+}
+function getSortFunc($cols) {
+  const vms = $cols.flatMap(($c) => $c.valueMember?.member);
+  if (vms.length === 0) {
+    return () => 0;
+  }
+  const ads = $cols.flatMap(($c) => {
+    const ad = $c.isAscSort ? 1 : -1;
+    return Array.from({ length: $c.valueMember?.length ?? 0 }, () => ad);
+  });
+  return (r1, r2) => {
+    for (let i = 0; i < vms.length; i++) {
+      const vm = vms[i];
+      const ad = ads[i];
+      const v1 = Reflect.get(r1.data, vm);
+      const v2 = Reflect.get(r2.data, vm);
+      if (v1 < v2) {
+        return -1 * ad;
+      } else if (v1 > v2) {
+        return 1 * ad;
+      }
+    }
+    return 0;
+  };
+}
+var __create$5 = Object.create;
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$5 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$5 = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$5 = (target, value) => __defProp$5(target, "name", { value, configurable: true });
+var __decoratorStart$5 = (base) => [, , , __create$5(base?.[__knownSymbol$5("metadata")] ?? null)];
+var __decoratorStrings$5 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$5 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$5("Function expected") : fn;
+var __decoratorContext$5 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$5[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$5("Already initialized") : fns.push(__expectFn$5(fn || null)) });
+var __decoratorMetadata$5 = (array, target) => __defNormalProp$5(target, __knownSymbol$5("metadata"), array[3]);
+var __runInitializers$5 = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) fns[i].call(self);
+  return value;
+};
+var __decorateElement$5 = (array, flags, name, decorators, target, extra) => {
+  var it, done, ctx, k = flags & 7, p = false;
+  var j = 0;
+  var extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (target = target.prototype, k < 5 && (k > 3 || !p) && __getOwnPropDesc$5(target, name));
+  __name$5(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$5(k, name, done = {}, array[3], extraInitializers);
+    it = (0, decorators[i])(target, ctx), done._ = 1;
+    __expectFn$5(it) && (target = it);
+  }
+  return __decoratorMetadata$5(array, target), desc && __defProp$5(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var _TableAggs_decorators, _init$5, _a$5;
+_TableAggs_decorators = [defineElement({ tagName: tableAggsTagName })];
+class TableAggs extends (_a$5 = HTMLElement) {
+  // #region 子元素
+  constructor() {
+    super();
+    this.$start = document.createElement(tableAggStartTagName);
+    this.$middle = document.createElement(tableAggMiddleTagName);
+    this.$end = document.createElement(tableAggEndTagName);
+  }
+  $start;
+  $middle;
+  $end;
+  get $grid() {
+    const ret = this.parentElement?.parentElement;
+    if (ret?.tagName === tableViewTagName) {
+      return ret;
+    }
+    return null;
+  }
+  connectedCallback() {
+    if (this.childElementCount > 0) return;
+    this.append(this.$start, this.$middle, this.$end);
+  }
+  // #endregion
+  // #region 数据展示
+  refresh(ss) {
+    let $aggs = [...ss.$columnHeads, ...ss.$startColumns].map(($x) => $x.$agg);
+    this.$start.innerHTML = "";
+    this.$start.append(...$aggs);
+    this.$middle.innerHTML = "";
+    this.$middle.append(...ss.$middleColumns.map(($x) => $x.$agg));
+    $aggs = [...ss.$endColumns, ...ss.$columnTails].map(($x) => $x.$agg);
+    this.$end.innerHTML = "";
+    this.$end.append(...$aggs);
+  }
+  // #endregion
+}
+_init$5 = __decoratorStart$5(_a$5);
+TableAggs = __decorateElement$5(_init$5, 0, "TableAggs", _TableAggs_decorators, TableAggs);
+__runInitializers$5(_init$5, 1, TableAggs);
+var __create$4 = Object.create;
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$4 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$4 = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$4 = (target, value) => __defProp$4(target, "name", { value, configurable: true });
+var __decoratorStart$4 = (base) => [, , , __create$4(base?.[__knownSymbol$4("metadata")] ?? null)];
+var __decoratorStrings$4 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$4 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$4("Function expected") : fn;
+var __decoratorContext$4 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$4[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$4("Already initialized") : fns.push(__expectFn$4(fn || null)) });
+var __decoratorMetadata$4 = (array, target) => __defNormalProp$4(target, __knownSymbol$4("metadata"), array[3]);
+var __runInitializers$4 = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) fns[i].call(self);
+  return value;
+};
+var __decorateElement$4 = (array, flags, name, decorators, target, extra) => {
+  var it, done, ctx, k = flags & 7, p = false;
+  var j = 0;
+  var extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (target = target.prototype, k < 5 && (k > 3 || !p) && __getOwnPropDesc$4(target, name));
+  __name$4(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$4(k, name, done = {}, array[3], extraInitializers);
+    it = (0, decorators[i])(target, ctx), done._ = 1;
+    __expectFn$4(it) && (target = it);
+  }
+  return __decoratorMetadata$4(array, target), desc && __defProp$4(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var _TableCols_decorators, _init$4, _a$4;
+_TableCols_decorators = [B.defineElement({ tagName: tableColsTagName })];
+class TableCols extends (_a$4 = M.ViewGroupElement) {
+  // #region ViewGroupElement
+  [M.handleModelEvent](source, evt) {
+    const $l = this.closest(tableListTagName);
+    const old = $l.colLayoutPaused;
+    $l.colLayoutPaused = true;
+    const ret = super[M.handleModelEvent](source, evt);
+    $l.colLayoutPaused = old;
+    return ret;
+  }
+  _getViewItemTagName() {
+    return tableColTagName;
+  }
+  groupElementTagName = tableColGroupTagName;
+  /**
+   * 同时还实现了生成 group 元素的功能
+   * 无需重写 _createGroupElement 和 _putGroupElement
+   */
+  _tryGetGroupElement(vm) {
+    const group = this.getGroupValueFromModel(vm);
+    if (!group) return this;
+    const groupChain = this.#getGroupByLabel(group);
+    groupChain.forEach((gc, i) => {
+      let $g = gc.$group;
+      if (!$g) {
+        $g = gc.$group = document.createElement(tableColGroupTagName);
+        $g.label = gc.label;
+        if (i === 0) {
+          this.append($g);
+        } else {
+          groupChain[i - 1].$group.append($g);
+        }
+      }
+    });
+    return groupChain.pop().$group;
+  }
+  #getGroupByLabel(group) {
+    const sa = group.split("/");
+    const ret = sa.map((s) => {
+      return {
+        label: s,
+        $group: void 0
+      };
+    });
+    let $p = this;
+    for (const r of ret) {
+      let found = false;
+      for (const $c of $p.children) {
+        if ($c instanceof TableColGroup) {
+          if ($c.label === r.label) {
+            found = true;
+            $p = r.$group = $c;
+            break;
+          }
+        }
+      }
+      if (!found) {
+        break;
+      }
+    }
+    return ret;
+  }
+  // #endregion
+  // #region ColGroupNoticeReceiver
+  notify(n) {
+    const $list = this.closest(tableListTagName);
+    $list?.notify(n);
+  }
+  // #endregion
+}
+_init$4 = __decoratorStart$4(_a$4);
+TableCols = __decorateElement$4(_init$4, 0, "TableCols", _TableCols_decorators, TableCols);
+__runInitializers$4(_init$4, 1, TableCols);
+var __create$3 = Object.create;
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$3 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$3 = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$3 = (target, value) => __defProp$3(target, "name", { value, configurable: true });
+var __decoratorStart$3 = (base) => [, , , __create$3(base?.[__knownSymbol$3("metadata")] ?? null)];
+var __decoratorStrings$3 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$3 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$3("Function expected") : fn;
+var __decoratorContext$3 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$3[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$3("Already initialized") : fns.push(__expectFn$3(fn || null)) });
+var __decoratorMetadata$3 = (array, target) => __defNormalProp$3(target, __knownSymbol$3("metadata"), array[3]);
+var __runInitializers$3 = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) fns[i].call(self);
+  return value;
+};
+var __decorateElement$3 = (array, flags, name, decorators, target, extra) => {
+  var it, done, ctx, k = flags & 7, p = false;
+  var j = 0;
+  var extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (target = target.prototype, k < 5 && (k > 3 || !p) && __getOwnPropDesc$3(target, name));
+  __name$3(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$3(k, name, done = {}, array[3], extraInitializers);
+    it = (0, decorators[i])(target, ctx), done._ = 1;
+    __expectFn$3(it) && (target = it);
+  }
+  return __decoratorMetadata$3(array, target), desc && __defProp$3(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var _TableColHead_decorators, _init$3, _a$3;
+_TableColHead_decorators = [B.defineElement({ tagName: tableColHeadTagName })];
+class TableColHead extends (_a$3 = M.ViewListElement) {
+  // #region ViewListElement
+  [M.handleModelEvent](source, evt) {
+    const $l = this.closest(tableListTagName);
+    const old = $l.colLayoutPaused;
+    $l.colLayoutPaused = true;
+    const ret = super[M.handleModelEvent](source, evt);
+    $l.colLayoutPaused = old;
+    return ret;
+  }
+  _getViewItemTagName(options) {
+    return options.tagName;
+  }
+  // #endregion
+  get $list() {
+    return this.closest(tableListTagName);
+  }
+  // #region TableHeadTailBridge
+  notifyHide($child) {
+    this.$list?.notify({ headHide: true, $head: $child });
+  }
+  notifyConnected($child) {
+    this.$list?.notify({ headAdd: true, $head: $child });
+  }
+  notifyDisconnected($child) {
+    this.$list?.notify({ headDel: true, $head: $child });
+  }
+  // #endregion
+}
+_init$3 = __decoratorStart$3(_a$3);
+TableColHead = __decorateElement$3(_init$3, 0, "TableColHead", _TableColHead_decorators, TableColHead);
+__runInitializers$3(_init$3, 1, TableColHead);
+var __create$2 = Object.create;
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$2 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$2 = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$2 = (target, value) => __defProp$2(target, "name", { value, configurable: true });
+var __decoratorStart$2 = (base) => [, , , __create$2(base?.[__knownSymbol$2("metadata")] ?? null)];
+var __decoratorStrings$2 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$2 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$2("Function expected") : fn;
+var __decoratorContext$2 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$2[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$2("Already initialized") : fns.push(__expectFn$2(fn || null)) });
+var __decoratorMetadata$2 = (array, target) => __defNormalProp$2(target, __knownSymbol$2("metadata"), array[3]);
+var __runInitializers$2 = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) fns[i].call(self);
+  return value;
+};
+var __decorateElement$2 = (array, flags, name, decorators, target, extra) => {
+  var it, done, ctx, k = flags & 7, p = false;
+  var j = 0;
+  var extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (target = target.prototype, k < 5 && (k > 3 || !p) && __getOwnPropDesc$2(target, name));
+  __name$2(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$2(k, name, done = {}, array[3], extraInitializers);
+    it = (0, decorators[i])(target, ctx), done._ = 1;
+    __expectFn$2(it) && (target = it);
+  }
+  return __decoratorMetadata$2(array, target), desc && __defProp$2(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var _TableColTail_decorators, _init$2, _a$2;
+_TableColTail_decorators = [B.defineElement({ tagName: tableColTailTagName })];
+class TableColTail extends (_a$2 = M.ViewListElement) {
+  // #region ViewListElement
+  [M.handleModelEvent](source, evt) {
+    const $l = this.closest(tableListTagName);
+    const old = $l.colLayoutPaused;
+    $l.colLayoutPaused = true;
+    const ret = super[M.handleModelEvent](source, evt);
+    $l.colLayoutPaused = old;
+    return ret;
+  }
+  _getViewItemTagName(options) {
+    return options.tagName;
+  }
+  // #endregion
+  get $list() {
+    return this.closest(tableListTagName);
+  }
+  // #region TableHeadTailBridge
+  notifyHide($child) {
+    this.$list?.notify({ tailHide: true, $tail: $child });
+  }
+  notifyConnected($child) {
+    this.$list?.notify({ tailAdd: true, $tail: $child });
+  }
+  notifyDisconnected($child) {
+    this.$list?.notify({ tailDel: true, $tail: $child });
+  }
+  // #endregion
+}
+_init$2 = __decoratorStart$2(_a$2);
+TableColTail = __decorateElement$2(_init$2, 0, "TableColTail", _TableColTail_decorators, TableColTail);
+__runInitializers$2(_init$2, 1, TableColTail);
+var __create$1 = Object.create;
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$1 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$1 = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$1 = (target, value) => __defProp$1(target, "name", { value, configurable: true });
+var __decoratorStart$1 = (base) => [, , , __create$1(base?.[__knownSymbol$1("metadata")] ?? null)];
+var __decoratorStrings$1 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$1 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$1("Function expected") : fn;
+var __decoratorContext$1 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$1[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$1("Already initialized") : fns.push(__expectFn$1(fn || null)) });
+var __decoratorMetadata$1 = (array, target) => __defNormalProp$1(target, __knownSymbol$1("metadata"), array[3]);
+var __runInitializers$1 = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) fns[i].call(self);
+  return value;
+};
+var __decorateElement$1 = (array, flags, name, decorators, target, extra) => {
+  var it, done, ctx, k = flags & 7, p = false;
+  var j = 0;
+  var extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (target = target.prototype, k < 5 && (k > 3 || !p) && __getOwnPropDesc$1(target, name));
+  __name$1(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$1(k, name, done = {}, array[3], extraInitializers);
+    it = (0, decorators[i])(target, ctx), done._ = 1;
+    __expectFn$1(it) && (target = it);
+  }
+  return __decoratorMetadata$1(array, target), desc && __defProp$1(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var _TableList_decorators, _init$1, _a$1;
+_TableList_decorators = [B.defineElement({ tagName: tableListTagName })];
+class TableList extends (_a$1 = HTMLElement) {
+  // #region 布局
+  $colStart = document.createElement(tableColStartTagName);
+  $colMiddle = document.createElement(tableColMiddleTagName);
+  $colEnd = document.createElement(tableColEndTagName);
+  $colHead = document.createElement(tableColHeadTagName);
+  $colTail = document.createElement(tableColTailTagName);
+  $colStartCols = document.createElement(tableColsTagName);
+  $colMiddleCols = document.createElement(tableColsTagName);
+  $colEndCols = document.createElement(tableColsTagName);
+  $rows = document.createElement(tableRowsTagName);
+  $aggs = document.createElement(tableAggsTagName);
+  initLayout() {
+    this.append(this.$colStart, this.$colMiddle, this.$colEnd, this.$rows, this.$aggs);
+    this.$colStart.append(this.$colHead, this.$colStartCols);
+    this.$colMiddle.append(this.$colMiddleCols);
+    this.$colEnd.append(this.$colEndCols, this.$colTail);
+  }
+  // #endregion
+  createSnapshot() {
+    return new Snapshot(this);
+  }
+  getCellsByColKey(colKey) {
+    return Array.from(this.querySelectorAll(`${tableCellTagName}[col-key='${colKey}']`));
+  }
+  // #region 属性
+  get $table() {
+    return this.getRootNode().host;
+  }
+  // #endregion
+  // #region 排序
+  sortRows(ss = this.createSnapshot()) {
+    const $t = this.$table;
+    if ($t.autoSort) {
+      this.$rows.sortDataSource(ss);
+    } else {
+      $t.model?.columnSort?.(ss.$columnsWantSort);
+    }
+  }
+  // #endregion
+  // #region 聚合
+  _calcAgg($col) {
+    const agg = $col.agg;
+    if (agg) {
+      this.showAggs(true);
+      this.#doCalcAgg($col);
+    } else {
+      this.#hideAggsIfNotNeeded();
+    }
+  }
+  showAggs(b) {
+    this.$aggs.hidden = !b;
+  }
+  #hideAggsIfNotNeeded(ss = this.createSnapshot()) {
+    const $cols = ss.$columnsNeedAgg;
+    if ($cols.length === 0 || !this.$rows.childElementCount) {
+      this.showAggs(false);
+      return false;
+    }
+    return $cols;
+  }
+  #doCalcAgg($col) {
+    const $t = this.$table;
+    if ($t.autoAgg) {
+      $col.aggValue = this.#calcAggValueFromDataSource($col);
+    } else {
+      $t.model?.columnAgg?.($col);
+    }
+  }
+  #calcAggValueFromDataSource($col) {
+    const ds = this.$rows.modelList;
+    if (!ds || ds.length === 0) {
+      return new M.ObjValue(0);
+    }
+    const agg = $col.agg;
+    if (agg === "count") {
+      return new M.ObjValue(ds.length);
+    }
+    const func = Reflect.get(this.$table, agg);
+    if (typeof func !== "function") {
+      return new M.ObjValue(void 0);
+    }
+    const vm = $col.valueMember?.member[0];
+    if (!vm) return new M.ObjValue(void 0);
+    const da = ds.map((r) => Reflect.get(r.data, vm));
+    const ret = func.call(this.$table, ...da);
+    return new M.ObjValue(ret);
+  }
+  refreshAggs(ss = this.createSnapshot()) {
+    const $needAgg = this.#hideAggsIfNotNeeded(ss);
+    if (!$needAgg) {
+      return;
+    }
+    this.showAggs(true);
+    $needAgg.forEach(($c) => this.#doCalcAgg($c));
+  }
+  // #endregion
+  // #region 通知
+  #colId = 0;
+  notify(n) {
+    if ("colAdd" in n && n.colAdd) {
+      if (n.$col.key) ;
+      else {
+        n.$col.key = (++this.#colId).toString();
+      }
+    } else if ("colSort" in n && n.colSort) {
+      let doSort = true;
+      if (!this.$table.multiSort && n.$col.sort) {
+        this.createSnapshot().$columnsWantSort.forEach(($c) => {
+          if ($c !== n.$col) {
+            $c.sort = "";
+            doSort = false;
+          }
+        });
+      }
+      if (!doSort) return;
+      console.debug(`grid column ${n.$col.label} sort ${n.$col.sort}`);
+    }
+    this.#columnsMovement.push(n);
+    if (this.colLayoutPaused) return;
+    this.#layoutCols();
+  }
+  refreshAll() {
+    this.#columnsMovement.push({ all: true });
+    if (this.colLayoutPaused) return;
+    this.#layoutCols();
+  }
+  get colLayoutPaused() {
+    return this.#colLayoutPaused;
+  }
+  set colLayoutPaused(b) {
+    b = !!b;
+    if (!b) {
+      this.#layoutCols();
+    }
+    this.#colLayoutPaused = b;
+  }
+  #colLayoutPaused = false;
+  /**
+   * 用来处理 #columnsMovement 中需要单独处理的事件。
+   * 如列的删除，需要删除所有对应的单元格；列的隐藏，需要隐藏所有对应的单元格。
+   * 组的删除和隐藏，因为涉及到多个列，所以不在这里处理。
+   */
+  #beforeLayout(cms) {
+    const ret = {};
+    for (let i = 0; i < cms.length; i++) {
+      const m = cms[i];
+      if (!m) continue;
+      if ("colDel" in m && m.colDel) {
+        this.#delColCells(m.$col);
+      } else if ("colHide" in m && m.colHide) {
+        this.#hiddenColCells(m.$col);
+      } else if ("colRefresh" in m && m.colRefresh) {
+        this.#colRefresh(m.$col);
+      } else if ("colSort" in m && m.colSort) {
+        this.sortRows();
+      } else if ("colAgg" in m && m.colAgg) {
+        this._calcAgg(m.$col);
+      } else if ("headDel" in m && m.headDel) {
+        this.#delHeadCells(m.$head);
+      } else if ("tailDel" in m && m.tailDel) {
+        this.#delTailCells(m.$tail);
+      }
+      Object.assign(ret, m);
+    }
+    return ret;
+  }
+  #afterLayout() {
+    if (this.#columnsMovement.length > 0) {
+      this.#layoutCols();
+    }
+  }
+  /**
+   * 用来记录 colLayoutPaused 期间发生的布局改变事件
+   */
+  #columnsMovement = [];
+  #layoutCols() {
+    const ss = this.createSnapshot();
+    const cms = this.#columnsMovement;
+    this.#columnsMovement = [];
+    const cm = this.#beforeLayout(cms);
+    const col = cm.colAdd || cm.colDel || cm.colHide;
+    const group = cm.groupAdd || cm.groupDel || cm.groupHide;
+    const head = cm.headAdd || cm.headDel || cm.headHide;
+    const tail = cm.tailAdd || cm.tailDel || cm.tailHide;
+    if (cm.all) {
+      this.#refreshColumns();
+    }
+    if (cm.all || col || group || head || tail || cm.colWidth) {
+      this._setColumnsTemplate(ss);
+    }
+    if (cm.all || col || group) {
+      this._layoutColumnGroup(ss);
+    }
+    if (cm.all || cm.colAdd || group || cm.headAdd || cm.tailAdd) {
+      this.$aggs.refresh(ss);
+    }
+    if (cm.all || col || group || head || tail || cm.colWidth) {
+      this.#refreshRows(ss);
+    }
+    this.#afterLayout();
+  }
+  // #endregion
+  // #region 布局变化
+  #hiddenColCells($col) {
+    const hidden = !$col.visible;
+    const $cells = this.getCellsByColKey($col.key);
+    $cells.forEach(($cell) => $cell.hidden = hidden);
+  }
+  #delColCells($col) {
+    const $cells = this.getCellsByColKey($col.key);
+    $cells.forEach(($cell) => $cell.remove());
+  }
+  #colRefresh($col) {
+    const $cells = this.getCellsByColKey($col.key);
+    $cells.forEach(($cell) => $col._setCellData($cell));
+  }
+  #delHeadCells($head) {
+    $head.getAllInRow().forEach(($h) => $h.remove());
+  }
+  #delTailCells($tail) {
+    $tail.getAllInRow().forEach(($t) => $t.remove());
+  }
+  _setColumnsTemplate(ss = this.createSnapshot()) {
+    const $heads = ss.$columnHeadsVisible;
+    let startSpan = $heads.length;
+    const $startCols = ss.$startColumnsVisible;
+    startSpan += $startCols.length;
+    const $middleCols = ss.$middleColumnsVisible;
+    const middleSpan = $middleCols.length;
+    const $endCols = ss.$endColumnsVisible;
+    let endSpan = $endCols.length;
+    const $tails = ss.$columnTailsVisible;
+    endSpan += $tails.length;
+    const str = [...$heads, ...$startCols, ...$middleCols, ...$endCols, ...$tails].map(($c) => $c.width).join(" ");
+    this.style.gridTemplateColumns = str;
+    this.style.setProperty("--grid-start-span", startSpan.toString());
+    this.style.setProperty("--grid-middle-span", middleSpan.toString());
+    this.style.setProperty("--grid-end-span", endSpan.toString());
+    void (startSpan ? this.removeAttribute("no-start") : this.setAttribute("no-start", ""));
+    void (endSpan ? this.removeAttribute("no-end") : this.setAttribute("no-end", ""));
+    console.debug("grid column layout - " + str + " - startSpan = " + startSpan + ", middleSpan = " + middleSpan + ", endSpan = " + endSpan);
+  }
+  _layoutColumnGroup(ss = this.createSnapshot()) {
+    const end = ss.groupsMaxTier + 1 + 1;
+    this.style.setProperty("--grid-col-end", end.toString());
+    ss.$visibleTopColumnsAndGroups.forEach(($cg) => $cg.setRow(1));
+    console.debug("--grid-col-end = " + end);
+  }
+  #refreshRows(ss = this.createSnapshot()) {
+    const begin = (/* @__PURE__ */ new Date()).valueOf();
+    const refresh = this.getRowRefreshFunc(ss);
+    const $rows = ss.$rows;
+    $rows.forEach(($row) => {
+      refresh($row);
+    });
+    const interval = (/* @__PURE__ */ new Date()).valueOf() - begin;
+    console.debug(`grid refresh ${$rows.length} rows for ${interval} ms`);
+  }
+  getRowRefreshFunc(ss = this.createSnapshot()) {
+    return ($row, refreshCellData = false) => {
+      $row.refresh(ss, refreshCellData);
+    };
+  }
+  #refreshColumns() {
+    this.colLayoutPaused = true;
+    this.$colStartCols.modelList = this.$colStartCols.modelList;
+    this.$colMiddleCols.modelList = this.$colMiddleCols.modelList;
+    this.$colEndCols.modelList = this.$colEndCols.modelList;
+    this.colLayoutPaused = false;
+  }
+  // #endregion
+}
+_init$1 = __decoratorStart$1(_a$1);
+TableList = __decorateElement$1(_init$1, 0, "TableList", _TableList_decorators, TableList);
+__runInitializers$1(_init$1, 1, TableList);
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => [, , , __create(base?.[__knownSymbol("metadata")] ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _autoAgg_dec, _autoSort_dec, _multiSort_dec, _multiple_dec, _a, _TableView_decorators, _clickHandler, _TableView_instances, switchActiveRow_fn, _ds, _init, _multiple, _multiSort, _autoSort, _autoAgg, num_fn, _b;
+const mutableAttributes = ["multiple", "auto-sort", "auto-agg"];
+_TableView_decorators = [B.defineElement({ tagName: tableViewTagName, mutableAttributes })];
+class TableView extends (_b = M.ViewElement) {
+  constructor() {
+    super();
+    __privateAdd(this, _TableView_instances);
+    __publicField(this, "$list");
+    __privateAdd(this, _clickHandler, (e) => {
+      const $cp = e.composedPath();
+      const $ge = $cp.find(($c) => $c.tagName.startsWith("GZM-TABLE-"));
+      if (!$ge) return;
+      if ($ge instanceof TableCell) {
+        const $row = $ge.closest(tableRowTagName);
+        if ($row) {
+          __privateMethod(this, _TableView_instances, switchActiveRow_fn).call(this, $row);
+        }
+      } else if ($ge instanceof TableRow) {
+        __privateMethod(this, _TableView_instances, switchActiveRow_fn).call(this, $ge);
+      } else {
+        if ("handleClick" in $ge && typeof $ge.handleClick === "function") {
+          $ge.handleClick(e, this.$list);
+        }
+      }
+    });
+    __privateAdd(this, _ds);
+    __privateAdd(this, _multiple, __runInitializers(_init, 8, this, false)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _multiSort, __runInitializers(_init, 12, this, false)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _autoSort, __runInitializers(_init, 16, this, false)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _autoAgg, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
+    __publicField(this, "T", B.createText(texts, B.globalTexts).bindHtmlElement(this));
+    const $l = this.$list = document.createElement(tableListTagName);
+    $l.initLayout();
+    $l.onclick = __privateGet(this, _clickHandler);
+    const $section = document.createElement("section");
+    $section.append($l, document.createElement("div"));
+    const $root = this.attachShadow({ mode: "open" });
+    $root.adoptedStyleSheets = [B.baseStyle, B.utilityStyle, styleSheet$1];
+    $root.append($section);
+  }
+  // #endregion
+  // #region models
+  /**
+   * 设置 model 会导致此函数被调用来设置各个属性，所以需要控制 colLayoutPaused;
+   */
+  [(_a = M.handleModelEvent, _multiple_dec = [B.boolAttr], _multiSort_dec = [B.boolAttr], _autoSort_dec = [B.boolAttr], _autoAgg_dec = [B.boolAttr], _a)](source, evt) {
+    if (source === this.dataSource) {
+      return new M.DataListEventHandler(this.dataSource, this.$list.$rows.modelList, "data").handle(evt);
+    }
+    const $l = this.$list;
+    const old = $l.colLayoutPaused;
+    $l.colLayoutPaused = true;
+    const ret = super[M.handleModelEvent](source, evt);
+    $l.colLayoutPaused = old;
+    return ret;
+  }
+  get heads() {
+    return this.$list.$colHead.modelList;
+  }
+  set heads(v) {
+    this.$list.$colHead.modelList = v;
+  }
+  get tails() {
+    return this.$list.$colTail.modelList;
+  }
+  set tails(v) {
+    this.$list.$colTail.modelList = v;
+  }
+  get colsStart() {
+    return this.$list.$colStartCols.modelList;
+  }
+  set colsStart(v) {
+    this.$list.$colStartCols.modelList = v;
+  }
+  get colsMiddle() {
+    return this.$list.$colMiddleCols.modelList;
+  }
+  set colsMiddle(v) {
+    this.$list.$colMiddleCols.modelList = v;
+  }
+  get colsEnd() {
+    return this.$list.$colEndCols.modelList;
+  }
+  set colsEnd(v) {
+    this.$list.$colEndCols.modelList = v;
+  }
+  get dataSource() {
+    return __privateGet(this, _ds);
+  }
+  set dataSource(ds) {
+    const old = __privateGet(this, _ds);
+    if (old) {
+      old[M.offModelEvent]?.(this);
+    }
+    __privateSet(this, _ds, ds);
+    if (ds) {
+      ds[M.onModelEvent]?.(this);
+      const ml = new M.DataListEventHandler(ds, this.$list.$rows.modelList, "data").createModelList();
+      this.$list.$rows.setModelProperty("modelList", M.createViewModel(ml));
+    } else {
+      this.$list.$rows.setModelProperty("modelList", []);
+    }
+  }
+  // #endregion
+  // #region 对外方法
+  /**
+   * @returns 选中的行的数据
+   */
+  getActiveModels() {
+    return this.getActiveRows().map(($row) => $row.model);
+  }
+  getActiveRows() {
+    return this.$list.createSnapshot().$rowsActive;
+  }
+  getCheckedRows() {
+    const $chks = this.$list.querySelectorAll(`${tableRowCheckTagName} input[type="checkbox"]:checked`);
+    const $rows = Array.from($chks).map(($x) => $x.closest(tableRowTagName));
+    return $rows;
+  }
+  getCheckedModels() {
+    return this.getCheckedRows().map(($row) => $row.model);
+  }
+  _multiple_set() {
+    if (this.multiple) return;
+    const $rs = this.$list.createSnapshot().$rowsActive;
+    for (let i = 1; i < $rs.length; i++) {
+      $rs[i]?.setModelProperty("active", false);
+    }
+  }
+  _auto_sort_set() {
+    this.$list.sortRows();
+  }
+  _auto_agg_set() {
+    this.$list.refreshAggs();
+  }
+  // #endregion
+  // #region 默认聚合函数 autoAgg 时调用，60-list #calcAggValueFromDataSource() 中使用
+  count(...args) {
+    return args.length;
+  }
+  sum(...args) {
+    if (args.length === 0) return 0;
+    args = __privateMethod(this, _TableView_instances, num_fn).call(this, ...args);
+    if (args.length === 0) return void 0;
+    return args.reduce((p, c) => p + c, 0);
+  }
+  avg(...args) {
+    if (args.length === 0) return 0;
+    const sum = this.sum(...args);
+    return sum === void 0 ? sum : sum / args.length;
+  }
+  min(...args) {
+    if (args.length === 0) return 0;
+    const nums = __privateMethod(this, _TableView_instances, num_fn).call(this, ...args);
+    if (nums.length === args.length) {
+      return Math.min(...nums);
+    }
+    return args.reduce((min, current) => {
+      try {
+        return compare(current, min) < 0 ? current : min;
+      } catch (e) {
+        console.warn(e, min, current);
+      }
+      return min;
+    }, args[0]);
+  }
+  max(...args) {
+    if (args.length === 0) return 0;
+    const nums = __privateMethod(this, _TableView_instances, num_fn).call(this, ...args);
+    if (nums.length === args.length) {
+      return Math.max(...nums);
+    }
+    return args.reduce((max, current) => {
+      try {
+        return compare(current, max) > 0 ? current : max;
+      } catch (e) {
+        console.warn(e, max, current);
+      }
+      return max;
+    }, args[0]);
+  }
+}
+_init = __decoratorStart(_b);
+_clickHandler = /* @__PURE__ */ new WeakMap();
+_TableView_instances = /* @__PURE__ */ new WeakSet();
+switchActiveRow_fn = function($row) {
+  if ($row.active) {
+    $row.setModelProperty("active", false);
+    return;
+  }
+  if (this.multiple) {
+    $row.setModelProperty("active", true);
+    return;
+  }
+  const ss = this.$list.createSnapshot();
+  ss.$rowsActive.forEach(($row2) => $row2.setModelProperty("active", false));
+  $row.setModelProperty("active", true);
+};
+_ds = /* @__PURE__ */ new WeakMap();
+_multiple = /* @__PURE__ */ new WeakMap();
+_multiSort = /* @__PURE__ */ new WeakMap();
+_autoSort = /* @__PURE__ */ new WeakMap();
+_autoAgg = /* @__PURE__ */ new WeakMap();
+num_fn = function(...args) {
+  args = args.flatMap((n) => n).map((n) => Number(n)).filter((n) => !Number.isNaN(n));
+  return args;
+};
+__decorateElement(_init, 4, "multiple", _multiple_dec, TableView, _multiple);
+__decorateElement(_init, 4, "multiSort", _multiSort_dec, TableView, _multiSort);
+__decorateElement(_init, 4, "autoSort", _autoSort_dec, TableView, _autoSort);
+__decorateElement(_init, 4, "autoAgg", _autoAgg_dec, TableView, _autoAgg);
+TableView = __decorateElement(_init, 0, "TableView", _TableView_decorators, TableView);
+__runInitializers(_init, 1, TableView);
+function compare(a, b) {
+  if (a === b) {
+    return 0;
+  }
+  if (Array.isArray(a) && Array.isArray(b)) {
+    const l = Math.max(a.length, b.length);
+    for (let i = 0; i < l; i++) {
+      const ret = compare(a[i], b[i]);
+      if (ret !== 0) {
+        return ret;
+      }
+    }
+    return 0;
+  }
+  return a < b ? -1 : 1;
+}
+export {
+  Snapshot,
+  TableCol,
+  TableRow,
+  TableView,
+  sortAsc,
+  sortDesc,
+  tableColActionTagName,
+  tableColCheckTagName,
+  tableColMenuTagName,
+  tableColSerialTagName,
+  tableViewTagName
+};
+//# sourceMappingURL=table.es.js.map