npm - @next-bricks/advanced - Versions diffs - 0.46.0 → 0.46.1 - Mend

@next-bricks/advanced 0.46.0 → 0.46.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (72) hide show

package/dist/chunks/{pdf-viewer.ef5b6594.js.map → pdf-viewer.46a52a19.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chunks/pdf-viewer.ef5b6594.js","mappings":"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","sources":["webpack:///../../node_modules/@babel/runtime/helpers/esm/toPropertyKey.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/toPrimitive.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/assertClassBrand.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/typeof.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/checkInRHS.js","webpack:///./src/pdf-viewer/index.tsx","webpack:///../../node_modules/css-loader/dist/runtime/noSourceMaps.js","webpack:///../../node_modules/css-loader/dist/runtime/api.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/setFunctionName.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/applyDecs2311.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/classPrivateFieldGet2.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/classPrivateFieldInitSpec.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/checkPrivateRedeclaration.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/classPrivateFieldSet2.js"],"sourcesContent":["import _typeof from \"./typeof.js\";\nimport toPrimitive from \"./toPrimitive.js\";\nexport default function toPropertyKey(t) {\n var i = toPrimitive(t, \"string\");\n return \"symbol\" == _typeof(i) ? i : i + \"\";\n}","import _typeof from \"./typeof.js\";\nexport default function toPrimitive(t, r) {\n if (\"object\" != _typeof(t) \|\| !t) return t;\n var e = t[Symbol.toPrimitive];\n if (void 0 !== e) {\n var i = e.call(t, r \|\| \"default\");\n if (\"object\" != _typeof(i)) return i;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n }\n return (\"string\" === r ? String : Number)(t);\n}","export default function _assertClassBrand(e, t, n) {\n if (\"function\" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;\n throw new TypeError(\"Private element is not present on this object\");\n}","export default function _typeof(o) {\n \"@babel/helpers - typeof\";\n\n return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) {\n return typeof o;\n } : function (o) {\n return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o;\n }, _typeof(o);\n}","import _typeof from \"./typeof.js\";\nexport default function _checkInRHS(e) {\n if (Object(e) !== e) throw TypeError(\"right-hand side of 'in' should be an object, got \" + (null !== e ? _typeof(e) : \"null\"));\n return e;\n}","import React, { useEffect, useState } from \"react\";\nimport { createDecorators } from \"@next-core/element\";\nimport { ReactNextElement } from \"@next-core/react-element\";\nimport \"@next-core/theme\";\nimport { Worker, Viewer } from \"@react-pdf-viewer/core\";\n\n// Plugins\nimport { defaultLayoutPlugin } from \"@react-pdf-viewer/default-layout\";\n\n// Import styles\nimport \"@react-pdf-viewer/core/lib/styles/index.css\";\nimport \"@react-pdf-viewer/default-layout/lib/styles/index.css\";\n\nconst { defineElement, property } = createDecorators();\n\nexport interface PdfViewerProps {\n url: string;\n page?: number;\n search?: string;\n viewerStyle?: React.CSSProperties \| undefined;\n}\n\n/*\n 构件 `advanced.pdf-viewer`\n /\nexport\n@defineElement(\"advanced.pdf-viewer\", {\n // 样式文件引入报错，使用非shadow dom模式正常\n shadowOptions: false,\n})\nclass PdfViewer extends ReactNextElement implements PdfViewerProps {\n @property()\n accessor url!: string;\n\n @property({\n type: Number,\n })\n accessor page: number \| undefined;\n\n @property()\n accessor search: string \| undefined;\n\n @property({\n attribute: false,\n })\n accessor viewerStyle: React.CSSProperties \| undefined;\n\n render() {\n return (\n <PdfViewerComponent\n url={this.url}\n page={this.page ? this.page - 1 : 0}\n search={this.search}\n viewerStyle={this.viewerStyle}\n />\n );\n }\n}\n\nexport interface PdfViewerComponentProps extends PdfViewerProps {\n // Define event handlers here.\n}\n\nexport function PdfViewerComponent({\n url,\n search,\n page,\n viewerStyle,\n}: PdfViewerComponentProps) {\n // https://react-pdf-viewer.dev/examples/jump-to-the-first-match-of-pre-defined-keywords-automatically/\n const [isDocumentLoaded, setDocumentLoaded] = useState(false);\n\n const defaultLayoutPluginInstance = defaultLayoutPlugin();\n\n useEffect(() => {\n if (isDocumentLoaded && search) {\n defaultLayoutPluginInstance.toolbarPluginInstance.searchPluginInstance.highlight(\n {\n keyword: search,\n }\n );\n }\n }, [isDocumentLoaded, search]);\n\n return (\n // See: https://react-pdf-viewer.dev/examples/compile-and-set-the-worker-source-with-webpack/\n <Worker\n workerUrl={`${process.env.NODE_ENV === \"test\" ? \"\" : __webpack_public_path__}workers/pdf.worker.min.js`}\n >\n <div style={viewerStyle}>\n <Viewer\n fileUrl={url}\n initialPage={page}\n plugins={[defaultLayoutPluginInstance]}\n onDocumentLoad={() => setDocumentLoaded(true)}\n />\n </div>\n </Worker>\n );\n}\n","\"use strict\";\n\nmodule.exports = function (i) {\n return i[1];\n};","\"use strict\";\n\n/\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n*/\nmodule.exports = function (cssWithMappingToString) {\n var list = [];\n\n // return the list of modules as css string\n list.toString = function toString() {\n return this.map(function (item) {\n var content = \"\";\n var needLayer = typeof item[5] !== \"undefined\";\n if (item[4]) {\n content += \"@supports (\".concat(item[4], \") {\");\n }\n if (item[2]) {\n content += \"@media \".concat(item[2], \" {\");\n }\n if (needLayer) {\n content += \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\");\n }\n content += cssWithMappingToString(item);\n if (needLayer) {\n content += \"}\";\n }\n if (item[2]) {\n content += \"}\";\n }\n if (item[4]) {\n content += \"}\";\n }\n return content;\n }).join(\"\");\n };\n\n // import a list of modules into the list\n list.i = function i(modules, media, dedupe, supports, layer) {\n if (typeof modules === \"string\") {\n modules = [[null, modules, undefined]];\n }\n var alreadyImportedModules = {};\n if (dedupe) {\n for (var k = 0; k < this.length; k++) {\n var id = this[k][0];\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n }\n for (var _k = 0; _k < modules.length; _k++) {\n var item = [].concat(modules[_k]);\n if (dedupe && alreadyImportedModules[item[0]]) {\n continue;\n }\n if (typeof layer !== \"undefined\") {\n if (typeof item[5] === \"undefined\") {\n item[5] = layer;\n } else {\n item[1] = \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\").concat(item[1], \"}\");\n item[5] = layer;\n }\n }\n if (media) {\n if (!item[2]) {\n item[2] = media;\n } else {\n item[1] = \"@media \".concat(item[2], \" {\").concat(item[1], \"}\");\n item[2] = media;\n }\n }\n if (supports) {\n if (!item[4]) {\n item[4] = \"\".concat(supports);\n } else {\n item[1] = \"@supports (\".concat(item[4], \") {\").concat(item[1], \"}\");\n item[4] = supports;\n }\n }\n list.push(item);\n }\n };\n return list;\n};","import _typeof from \"./typeof.js\";\nexport default function setFunctionName(e, t, n) {\n \"symbol\" == _typeof(t) && (t = (t = t.description) ? \"[\" + t + \"]\" : \"\");\n try {\n Object.defineProperty(e, \"name\", {\n configurable: !0,\n value: n ? n + \" \" + t : t\n });\n } catch (e) {}\n return e;\n}","import _typeof from \"./typeof.js\";\nimport checkInRHS from \"./checkInRHS.js\";\nimport setFunctionName from \"./setFunctionName.js\";\nimport toPropertyKey from \"./toPropertyKey.js\";\nexport default function applyDecs2311(e, t, n, r, o, i) {\n var a,\n c,\n u,\n s,\n f,\n l,\n p,\n d = Symbol.metadata \|\| Symbol[\"for\"](\"Symbol.metadata\"),\n m = Object.defineProperty,\n h = Object.create,\n y = [h(null), h(null)],\n v = t.length;\n function g(t, n, r) {\n return function (o, i) {\n n && (i = o, o = e);\n for (var a = 0; a < t.length; a++) i = t[a].apply(o, r ? [i] : []);\n return r ? i : o;\n };\n }\n function b(e, t, n, r) {\n if (\"function\" != typeof e && (r \|\| void 0 !== e)) throw new TypeError(t + \" must \" + (n \|\| \"be\") + \" a function\" + (r ? \"\" : \" or undefined\"));\n return e;\n }\n function applyDec(e, t, n, r, o, i, u, s, f, l, p) {\n function d(e) {\n if (!p(e)) throw new TypeError(\"Attempted to access private element on non-instance\");\n }\n var h = [].concat(t[0]),\n v = t[3],\n w = !u,\n D = 1 === o,\n S = 3 === o,\n j = 4 === o,\n E = 2 === o;\n function I(t, n, r) {\n return function (o, i) {\n return n && (i = o, o = e), r && r(o), P[t].call(o, i);\n };\n }\n if (!w) {\n var P = {},\n k = [],\n F = S ? \"get\" : j \|\| D ? \"set\" : \"value\";\n if (f ? (l \|\| D ? P = {\n get: setFunctionName(function () {\n return v(this);\n }, r, \"get\"),\n set: function set(e) {\n t[4](this, e);\n }\n } : P[F] = v, l \|\| setFunctionName(P[F], r, E ? \"\" : F)) : l \|\| (P = Object.getOwnPropertyDescriptor(e, r)), !l && !f) {\n if ((c = y[+s][r]) && 7 != (c ^ o)) throw Error(\"Decorating two elements with the same name (\" + P[F].name + \") is not supported yet\");\n y[+s][r] = o < 3 ? 1 : o;\n }\n }\n for (var N = e, O = h.length - 1; O >= 0; O -= n ? 2 : 1) {\n var z = b(h[O], \"A decorator\", \"be\", !0),\n A = n ? h[O - 1] : void 0,\n H = {},\n K = {\n kind: [\"field\", \"accessor\", \"method\", \"getter\", \"setter\", \"class\"][o],\n name: r,\n metadata: a,\n addInitializer: function (e, t) {\n if (e.v) throw Error(\"attempted to call addInitializer after decoration was finished\");\n b(t, \"An initializer\", \"be\", !0), i.push(t);\n }.bind(null, H)\n };\n if (w) c = z.call(A, N, K), H.v = 1, b(c, \"class decorators\", \"return\") && (N = c);else if (K[\"static\"] = s, K[\"private\"] = f, c = K.access = {\n has: f ? p.bind() : function (e) {\n return r in e;\n }\n }, j \|\| (c.get = f ? E ? function (e) {\n return d(e), P.value;\n } : I(\"get\", 0, d) : function (e) {\n return e[r];\n }), E \|\| S \|\| (c.set = f ? I(\"set\", 0, d) : function (e, t) {\n e[r] = t;\n }), N = z.call(A, D ? {\n get: P.get,\n set: P.set\n } : P[F], K), H.v = 1, D) {\n if (\"object\" == _typeof(N) && N) (c = b(N.get, \"accessor.get\")) && (P.get = c), (c = b(N.set, \"accessor.set\")) && (P.set = c), (c = b(N.init, \"accessor.init\")) && k.unshift(c);else if (void 0 !== N) throw new TypeError(\"accessor decorators must return an object with get, set, or init properties or undefined\");\n } else b(N, (l ? \"field\" : \"method\") + \" decorators\", \"return\") && (l ? k.unshift(N) : P[F] = N);\n }\n return o < 2 && u.push(g(k, s, 1), g(i, s, 0)), l \|\| w \|\| (f ? D ? u.splice(-1, 0, I(\"get\", s), I(\"set\", s)) : u.push(E ? P[F] : b.call.bind(P[F])) : m(e, r, P)), N;\n }\n function w(e) {\n return m(e, d, {\n configurable: !0,\n enumerable: !0,\n value: a\n });\n }\n return void 0 !== i && (a = i[d]), a = h(null == a ? null : a), f = [], l = function l(e) {\n e && f.push(g(e));\n }, p = function p(t, r) {\n for (var i = 0; i < n.length; i++) {\n var a = n[i],\n c = a[1],\n l = 7 & c;\n if ((8 & c) == t && !l == r) {\n var p = a[2],\n d = !!a[3],\n m = 16 & c;\n applyDec(t ? e : e.prototype, a, m, d ? \"#\" + p : toPropertyKey(p), l, l < 2 ? [] : t ? s = s \|\| [] : u = u \|\| [], f, !!t, d, r, t && d ? function (t) {\n return checkInRHS(t) === e;\n } : o);\n }\n }\n }, p(8, 0), p(0, 0), p(8, 1), p(0, 1), l(u), l(s), c = f, v \|\| w(e), {\n e: c,\n get c() {\n var n = [];\n return v && [w(e = applyDec(e, [t], r, e.name, 5, n)), g(n, 1)];\n }\n };\n}","import assertClassBrand from \"./assertClassBrand.js\";\nexport default function _classPrivateFieldGet2(s, a) {\n return s.get(assertClassBrand(s, a));\n}","import checkPrivateRedeclaration from \"./checkPrivateRedeclaration.js\";\nexport default function _classPrivateFieldInitSpec(obj, privateMap, value) {\n checkPrivateRedeclaration(obj, privateMap);\n privateMap.set(obj, value);\n}","export default function _checkPrivateRedeclaration(obj, privateCollection) {\n if (privateCollection.has(obj)) {\n throw new TypeError(\"Cannot initialize the same private elements twice on an object\");\n }\n}","import assertClassBrand from \"./assertClassBrand.js\";\nexport default function _classPrivateFieldSet2(s, a, r) {\n return s.set(assertClassBrand(s, a), r), r;\n}"],"names":["toPropertyKey","t","i","e","Symbol","toPrimitive","call","r","TypeError","String","_assertClassBrand","n","has","arguments","length","_typeof","o","iterator","constructor","prototype","_checkInRHS","Object","defineElement","property","createDecorators","_PdfViewer","_A","WeakMap","_B","_C","_D","PdfViewer","ReactNextElement","_classPrivateFieldInitSpec","_init_url","_init_extra_url","_init_page","_init_extra_page","_init_search","_init_extra_search","_init_viewerStyle","_init_extra_viewerStyle","url","_classPrivateFieldGet","v","_classPrivateFieldSet","page","search","viewerStyle","render","React","PdfViewerComponent","this","_ref","isDocumentLoaded","setDocumentLoaded","useState","defaultLayoutPluginInstance","defaultLayoutPlugin","useEffect","toolbarPluginInstance","searchPluginInstance","highlight","keyword","Worker","workerUrl","__webpack_public_path__","style","Viewer","fileUrl","initialPage","plugins","onDocumentLoad","_PdfViewer2","c","_initClass","_applyDecs","shadowOptions","type","Number","attribute","module","exports","cssWithMappingToString","list","toString","map","item","content","needLayer","concat","join","modules","media","dedupe","supports","layer","undefined","alreadyImportedModules","k","id","_k","push","setFunctionName","description","defineProperty","configurable","value","applyDecs2311","a","u","s","f","l","p","d","metadata","m","h","create","y","g","apply","b","applyDec","w","D","S","j","E","I","P","F","get","set","getOwnPropertyDescriptor","Error","name","N","O","z","A","H","K","kind","addInitializer","bind","access","init","unshift","splice","enumerable","checkInRHS","_classPrivateFieldGet2","obj","privateMap","_checkPrivateRedeclaration","privateCollection","_classPrivateFieldSet2"],"sourceRoot":""}
1	+ {"version":3,"file":"chunks/pdf-viewer.46a52a19.js","mappings":"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","sources":["webpack:///../../node_modules/@babel/runtime/helpers/esm/toPropertyKey.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/toPrimitive.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/assertClassBrand.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/typeof.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/checkInRHS.js","webpack:///./src/pdf-viewer/index.tsx","webpack:///../../node_modules/css-loader/dist/runtime/noSourceMaps.js","webpack:///../../node_modules/css-loader/dist/runtime/api.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/setFunctionName.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/applyDecs2311.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/classPrivateFieldGet2.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/classPrivateFieldInitSpec.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/checkPrivateRedeclaration.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/classPrivateFieldSet2.js"],"sourcesContent":["import _typeof from \"./typeof.js\";\nimport toPrimitive from \"./toPrimitive.js\";\nexport default function toPropertyKey(t) {\n var i = toPrimitive(t, \"string\");\n return \"symbol\" == _typeof(i) ? i : i + \"\";\n}","import _typeof from \"./typeof.js\";\nexport default function toPrimitive(t, r) {\n if (\"object\" != _typeof(t) \|\| !t) return t;\n var e = t[Symbol.toPrimitive];\n if (void 0 !== e) {\n var i = e.call(t, r \|\| \"default\");\n if (\"object\" != _typeof(i)) return i;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n }\n return (\"string\" === r ? String : Number)(t);\n}","export default function _assertClassBrand(e, t, n) {\n if (\"function\" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;\n throw new TypeError(\"Private element is not present on this object\");\n}","export default function _typeof(o) {\n \"@babel/helpers - typeof\";\n\n return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) {\n return typeof o;\n } : function (o) {\n return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o;\n }, _typeof(o);\n}","import _typeof from \"./typeof.js\";\nexport default function _checkInRHS(e) {\n if (Object(e) !== e) throw TypeError(\"right-hand side of 'in' should be an object, got \" + (null !== e ? _typeof(e) : \"null\"));\n return e;\n}","import React, { useEffect, useState } from \"react\";\nimport { createDecorators } from \"@next-core/element\";\nimport { ReactNextElement } from \"@next-core/react-element\";\nimport \"@next-core/theme\";\nimport { Worker, Viewer } from \"@react-pdf-viewer/core\";\n\n// Plugins\nimport { defaultLayoutPlugin } from \"@react-pdf-viewer/default-layout\";\n\n// Import styles\nimport \"@react-pdf-viewer/core/lib/styles/index.css\";\nimport \"@react-pdf-viewer/default-layout/lib/styles/index.css\";\n\nconst { defineElement, property } = createDecorators();\n\nexport interface PdfViewerProps {\n url: string;\n page?: number;\n search?: string;\n viewerStyle?: React.CSSProperties \| undefined;\n}\n\n/*\n 构件 `advanced.pdf-viewer`\n /\nexport\n@defineElement(\"advanced.pdf-viewer\", {\n // 样式文件引入报错，使用非shadow dom模式正常\n shadowOptions: false,\n})\nclass PdfViewer extends ReactNextElement implements PdfViewerProps {\n @property()\n accessor url!: string;\n\n @property({\n type: Number,\n })\n accessor page: number \| undefined;\n\n @property()\n accessor search: string \| undefined;\n\n @property({\n attribute: false,\n })\n accessor viewerStyle: React.CSSProperties \| undefined;\n\n render() {\n return (\n <PdfViewerComponent\n url={this.url}\n page={this.page ? this.page - 1 : 0}\n search={this.search}\n viewerStyle={this.viewerStyle}\n />\n );\n }\n}\n\nexport interface PdfViewerComponentProps extends PdfViewerProps {\n // Define event handlers here.\n}\n\nexport function PdfViewerComponent({\n url,\n search,\n page,\n viewerStyle,\n}: PdfViewerComponentProps) {\n // https://react-pdf-viewer.dev/examples/jump-to-the-first-match-of-pre-defined-keywords-automatically/\n const [isDocumentLoaded, setDocumentLoaded] = useState(false);\n\n const defaultLayoutPluginInstance = defaultLayoutPlugin();\n\n useEffect(() => {\n if (isDocumentLoaded && search) {\n defaultLayoutPluginInstance.toolbarPluginInstance.searchPluginInstance.highlight(\n {\n keyword: search,\n }\n );\n }\n }, [isDocumentLoaded, search]);\n\n return (\n // See: https://react-pdf-viewer.dev/examples/compile-and-set-the-worker-source-with-webpack/\n <Worker\n workerUrl={`${process.env.NODE_ENV === \"test\" ? \"\" : __webpack_public_path__}workers/pdf.worker.min.js`}\n >\n <div style={viewerStyle}>\n <Viewer\n fileUrl={url}\n initialPage={page}\n plugins={[defaultLayoutPluginInstance]}\n onDocumentLoad={() => setDocumentLoaded(true)}\n />\n </div>\n </Worker>\n );\n}\n","\"use strict\";\n\nmodule.exports = function (i) {\n return i[1];\n};","\"use strict\";\n\n/\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n*/\nmodule.exports = function (cssWithMappingToString) {\n var list = [];\n\n // return the list of modules as css string\n list.toString = function toString() {\n return this.map(function (item) {\n var content = \"\";\n var needLayer = typeof item[5] !== \"undefined\";\n if (item[4]) {\n content += \"@supports (\".concat(item[4], \") {\");\n }\n if (item[2]) {\n content += \"@media \".concat(item[2], \" {\");\n }\n if (needLayer) {\n content += \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\");\n }\n content += cssWithMappingToString(item);\n if (needLayer) {\n content += \"}\";\n }\n if (item[2]) {\n content += \"}\";\n }\n if (item[4]) {\n content += \"}\";\n }\n return content;\n }).join(\"\");\n };\n\n // import a list of modules into the list\n list.i = function i(modules, media, dedupe, supports, layer) {\n if (typeof modules === \"string\") {\n modules = [[null, modules, undefined]];\n }\n var alreadyImportedModules = {};\n if (dedupe) {\n for (var k = 0; k < this.length; k++) {\n var id = this[k][0];\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n }\n for (var _k = 0; _k < modules.length; _k++) {\n var item = [].concat(modules[_k]);\n if (dedupe && alreadyImportedModules[item[0]]) {\n continue;\n }\n if (typeof layer !== \"undefined\") {\n if (typeof item[5] === \"undefined\") {\n item[5] = layer;\n } else {\n item[1] = \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\").concat(item[1], \"}\");\n item[5] = layer;\n }\n }\n if (media) {\n if (!item[2]) {\n item[2] = media;\n } else {\n item[1] = \"@media \".concat(item[2], \" {\").concat(item[1], \"}\");\n item[2] = media;\n }\n }\n if (supports) {\n if (!item[4]) {\n item[4] = \"\".concat(supports);\n } else {\n item[1] = \"@supports (\".concat(item[4], \") {\").concat(item[1], \"}\");\n item[4] = supports;\n }\n }\n list.push(item);\n }\n };\n return list;\n};","import _typeof from \"./typeof.js\";\nexport default function setFunctionName(e, t, n) {\n \"symbol\" == _typeof(t) && (t = (t = t.description) ? \"[\" + t + \"]\" : \"\");\n try {\n Object.defineProperty(e, \"name\", {\n configurable: !0,\n value: n ? n + \" \" + t : t\n });\n } catch (e) {}\n return e;\n}","import _typeof from \"./typeof.js\";\nimport checkInRHS from \"./checkInRHS.js\";\nimport setFunctionName from \"./setFunctionName.js\";\nimport toPropertyKey from \"./toPropertyKey.js\";\nexport default function applyDecs2311(e, t, n, r, o, i) {\n var a,\n c,\n u,\n s,\n f,\n l,\n p,\n d = Symbol.metadata \|\| Symbol[\"for\"](\"Symbol.metadata\"),\n m = Object.defineProperty,\n h = Object.create,\n y = [h(null), h(null)],\n v = t.length;\n function g(t, n, r) {\n return function (o, i) {\n n && (i = o, o = e);\n for (var a = 0; a < t.length; a++) i = t[a].apply(o, r ? [i] : []);\n return r ? i : o;\n };\n }\n function b(e, t, n, r) {\n if (\"function\" != typeof e && (r \|\| void 0 !== e)) throw new TypeError(t + \" must \" + (n \|\| \"be\") + \" a function\" + (r ? \"\" : \" or undefined\"));\n return e;\n }\n function applyDec(e, t, n, r, o, i, u, s, f, l, p) {\n function d(e) {\n if (!p(e)) throw new TypeError(\"Attempted to access private element on non-instance\");\n }\n var h = [].concat(t[0]),\n v = t[3],\n w = !u,\n D = 1 === o,\n S = 3 === o,\n j = 4 === o,\n E = 2 === o;\n function I(t, n, r) {\n return function (o, i) {\n return n && (i = o, o = e), r && r(o), P[t].call(o, i);\n };\n }\n if (!w) {\n var P = {},\n k = [],\n F = S ? \"get\" : j \|\| D ? \"set\" : \"value\";\n if (f ? (l \|\| D ? P = {\n get: setFunctionName(function () {\n return v(this);\n }, r, \"get\"),\n set: function set(e) {\n t[4](this, e);\n }\n } : P[F] = v, l \|\| setFunctionName(P[F], r, E ? \"\" : F)) : l \|\| (P = Object.getOwnPropertyDescriptor(e, r)), !l && !f) {\n if ((c = y[+s][r]) && 7 != (c ^ o)) throw Error(\"Decorating two elements with the same name (\" + P[F].name + \") is not supported yet\");\n y[+s][r] = o < 3 ? 1 : o;\n }\n }\n for (var N = e, O = h.length - 1; O >= 0; O -= n ? 2 : 1) {\n var z = b(h[O], \"A decorator\", \"be\", !0),\n A = n ? h[O - 1] : void 0,\n H = {},\n K = {\n kind: [\"field\", \"accessor\", \"method\", \"getter\", \"setter\", \"class\"][o],\n name: r,\n metadata: a,\n addInitializer: function (e, t) {\n if (e.v) throw Error(\"attempted to call addInitializer after decoration was finished\");\n b(t, \"An initializer\", \"be\", !0), i.push(t);\n }.bind(null, H)\n };\n if (w) c = z.call(A, N, K), H.v = 1, b(c, \"class decorators\", \"return\") && (N = c);else if (K[\"static\"] = s, K[\"private\"] = f, c = K.access = {\n has: f ? p.bind() : function (e) {\n return r in e;\n }\n }, j \|\| (c.get = f ? E ? function (e) {\n return d(e), P.value;\n } : I(\"get\", 0, d) : function (e) {\n return e[r];\n }), E \|\| S \|\| (c.set = f ? I(\"set\", 0, d) : function (e, t) {\n e[r] = t;\n }), N = z.call(A, D ? {\n get: P.get,\n set: P.set\n } : P[F], K), H.v = 1, D) {\n if (\"object\" == _typeof(N) && N) (c = b(N.get, \"accessor.get\")) && (P.get = c), (c = b(N.set, \"accessor.set\")) && (P.set = c), (c = b(N.init, \"accessor.init\")) && k.unshift(c);else if (void 0 !== N) throw new TypeError(\"accessor decorators must return an object with get, set, or init properties or undefined\");\n } else b(N, (l ? \"field\" : \"method\") + \" decorators\", \"return\") && (l ? k.unshift(N) : P[F] = N);\n }\n return o < 2 && u.push(g(k, s, 1), g(i, s, 0)), l \|\| w \|\| (f ? D ? u.splice(-1, 0, I(\"get\", s), I(\"set\", s)) : u.push(E ? P[F] : b.call.bind(P[F])) : m(e, r, P)), N;\n }\n function w(e) {\n return m(e, d, {\n configurable: !0,\n enumerable: !0,\n value: a\n });\n }\n return void 0 !== i && (a = i[d]), a = h(null == a ? null : a), f = [], l = function l(e) {\n e && f.push(g(e));\n }, p = function p(t, r) {\n for (var i = 0; i < n.length; i++) {\n var a = n[i],\n c = a[1],\n l = 7 & c;\n if ((8 & c) == t && !l == r) {\n var p = a[2],\n d = !!a[3],\n m = 16 & c;\n applyDec(t ? e : e.prototype, a, m, d ? \"#\" + p : toPropertyKey(p), l, l < 2 ? [] : t ? s = s \|\| [] : u = u \|\| [], f, !!t, d, r, t && d ? function (t) {\n return checkInRHS(t) === e;\n } : o);\n }\n }\n }, p(8, 0), p(0, 0), p(8, 1), p(0, 1), l(u), l(s), c = f, v \|\| w(e), {\n e: c,\n get c() {\n var n = [];\n return v && [w(e = applyDec(e, [t], r, e.name, 5, n)), g(n, 1)];\n }\n };\n}","import assertClassBrand from \"./assertClassBrand.js\";\nexport default function _classPrivateFieldGet2(s, a) {\n return s.get(assertClassBrand(s, a));\n}","import checkPrivateRedeclaration from \"./checkPrivateRedeclaration.js\";\nexport default function _classPrivateFieldInitSpec(obj, privateMap, value) {\n checkPrivateRedeclaration(obj, privateMap);\n privateMap.set(obj, value);\n}","export default function _checkPrivateRedeclaration(obj, privateCollection) {\n if (privateCollection.has(obj)) {\n throw new TypeError(\"Cannot initialize the same private elements twice on an object\");\n }\n}","import assertClassBrand from \"./assertClassBrand.js\";\nexport default function _classPrivateFieldSet2(s, a, r) {\n return s.set(assertClassBrand(s, a), r), r;\n}"],"names":["toPropertyKey","t","i","e","Symbol","toPrimitive","call","r","TypeError","String","_assertClassBrand","n","has","arguments","length","_typeof","o","iterator","constructor","prototype","_checkInRHS","Object","defineElement","property","createDecorators","_PdfViewer","_A","WeakMap","_B","_C","_D","PdfViewer","ReactNextElement","_classPrivateFieldInitSpec","_init_url","_init_extra_url","_init_page","_init_extra_page","_init_search","_init_extra_search","_init_viewerStyle","_init_extra_viewerStyle","url","_classPrivateFieldGet","v","_classPrivateFieldSet","page","search","viewerStyle","render","React","PdfViewerComponent","this","_ref","isDocumentLoaded","setDocumentLoaded","useState","defaultLayoutPluginInstance","defaultLayoutPlugin","useEffect","toolbarPluginInstance","searchPluginInstance","highlight","keyword","Worker","workerUrl","__webpack_public_path__","style","Viewer","fileUrl","initialPage","plugins","onDocumentLoad","_PdfViewer2","c","_initClass","_applyDecs","shadowOptions","type","Number","attribute","module","exports","cssWithMappingToString","list","toString","map","item","content","needLayer","concat","join","modules","media","dedupe","supports","layer","undefined","alreadyImportedModules","k","id","_k","push","setFunctionName","description","defineProperty","configurable","value","applyDecs2311","a","u","s","f","l","p","d","metadata","m","h","create","y","g","apply","b","applyDec","w","D","S","j","E","I","P","F","get","set","getOwnPropertyDescriptor","Error","name","N","O","z","A","H","K","kind","addInitializer","bind","access","init","unshift","splice","enumerable","checkInRHS","_classPrivateFieldGet2","obj","privateMap","_checkPrivateRedeclaration","privateCollection","_classPrivateFieldSet2"],"sourceRoot":""}

package/dist/examples.json CHANGED Viewed

@@ -2,6 +2,12 @@
   "eo-cascader": {
     "doc": "级联选择器\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-cascader\n  properties:\n    placeholder: 请选择城市\n    options:\n      - children:\n          - children:\n              - label: West Lake\n                value: xihu\n            label: Hangzhou\n            value: hangzhou\n        label: Zhejiang\n        value: zhejiang\n      - children:\n          - children:\n              - label: Zhong Hua Men\n                value: zhonghuamen\n            label: Nanjing\n            value: nanjing\n        label: Jiangsu\n        value: jiangsu\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-cascader placeholder=\"请选择城市\" id=\"brick-1\"></eo-cascader>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     {\n#       children: [\n#         {\n#           children: [\n#             {\n#               label: \"West Lake\",\n#               value: \"xihu\",\n#             },\n#           ],\n#           label: \"Hangzhou\",\n#           value: \"hangzhou\",\n#         },\n#       ],\n#       label: \"Zhejiang\",\n#       value: \"zhejiang\",\n#     },\n#     {\n#       children: [\n#         {\n#           children: [\n#             {\n#               label: \"Zhong Hua Men\",\n#               value: \"zhonghuamen\",\n#             },\n#           ],\n#           label: \"Nanjing\",\n#           value: \"nanjing\",\n#         },\n#       ],\n#       label: \"Jiangsu\",\n#       value: \"jiangsu\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### With Form\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-form\n  events:\n    validate.success:\n      - action: console.log\n    values.change:\n      - action: console.log\n  children:\n    - brick: eo-cascader\n      properties:\n        label: 城市选择\n        name: city\n        placeholder: 请选择城市\n        required: true\n        options:\n          - children:\n              - children:\n                  - label: West Lake\n                    value: xihu\n                label: Hangzhou\n                value: hangzhou\n            label: Zhejiang\n            value: zhejiang\n          - children:\n              - children:\n                  - label: Zhong Hua Men\n                    value: zhonghuamen\n                label: Nanjing\n                value: nanjing\n            label: Jiangsu\n            value: jiangsu\n      events:\n        cascader.change:\n          - action: console.log\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-cascader\n#     label=\"城市选择\"\n#     name=\"city\"\n#     placeholder=\"请选择城市\"\n#     required\n#     id=\"brick-2\"\n#   ></eo-cascader>\n#   <eo-submit-buttons></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"validate.success\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"values.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.options = [\n#     {\n#       children: [\n#         {\n#           children: [\n#             {\n#               label: \"West Lake\",\n#               value: \"xihu\",\n#             },\n#           ],\n#           label: \"Hangzhou\",\n#           value: \"hangzhou\",\n#         },\n#       ],\n#       label: \"Zhejiang\",\n#       value: \"zhejiang\",\n#     },\n#     {\n#       children: [\n#         {\n#           children: [\n#             {\n#               label: \"Zhong Hua Men\",\n#               value: \"zhonghuamen\",\n#             },\n#           ],\n#           label: \"Nanjing\",\n#           value: \"nanjing\",\n#         },\n#       ],\n#       label: \"Jiangsu\",\n#       value: \"jiangsu\",\n#     },\n#   ];\n#   brick_2.addEventListener(\"cascader.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
   },
+  "eo-next-table": {
+    "doc": "大型表格\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    page.change:\n      - action: console.log\n    page.size.change:\n      - action: console.log\n  properties:\n    scrollConfig:\n      x: false\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n      - dataIndex: remarks\n        key: remarks\n        title: Long Column Long Column Long Column Long Column\n        width: 200\n        ellipsis: true\n      - dataIndex: operator\n        key: operator\n        title: 操作\n        width: 200\n        useBrick:\n          - brick: div\n            properties:\n              style:\n                display: flex\n                gap: 4px\n            children:\n              - brick: eo-button\n                properties:\n                  type: link\n                  size: small\n                  icon:\n                    lib: antd\n                    icon: edit\n                events:\n                  click:\n                    - action: message.info\n                      args:\n                        - <% DATA.rowData.name %>\n              - brick: eo-button\n                properties:\n                  type: link\n                  size: small\n                  danger: true\n                  icon:\n                    lib: antd\n                    icon: delete\n                events:\n                  click:\n                    - action: message.error\n                      args:\n                        - <% JSON.stringify(DATA) %>\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n          remarks: Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n          remarks: Long text Long text\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n          remarks: Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.scrollConfig = {\n#     x: false,\n#   };\n#   brick_1.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#     {\n#       dataIndex: \"remarks\",\n#       key: \"remarks\",\n#       title: \"Long Column Long Column Long Column Long Column\",\n#       width: 200,\n#       ellipsis: true,\n#     },\n#     {\n#       dataIndex: \"operator\",\n#       key: \"operator\",\n#       title: \"操作\",\n#       width: 200,\n#       useBrick: [\n#         {\n#           brick: \"div\",\n#           properties: {\n#             style: {\n#               display: \"flex\",\n#               gap: \"4px\",\n#             },\n#           },\n#           children: [\n#             {\n#               brick: \"eo-button\",\n#               properties: {\n#                 type: \"link\",\n#                 size: \"small\",\n#                 icon: {\n#                   lib: \"antd\",\n#                   icon: \"edit\",\n#                 },\n#               },\n#               events: {\n#                 click: [\n#                   {\n#                     action: \"message.info\",\n#                     args: [\"<% DATA.rowData.name %>\"],\n#                   },\n#                 ],\n#               },\n#             },\n#             {\n#               brick: \"eo-button\",\n#               properties: {\n#                 type: \"link\",\n#                 size: \"small\",\n#                 danger: true,\n#                 icon: {\n#                   lib: \"antd\",\n#                   icon: \"delete\",\n#                 },\n#               },\n#               events: {\n#                 click: [\n#                   {\n#                     action: \"message.error\",\n#                     args: [\"<% JSON.stringify(DATA) %>\"],\n#                   },\n#                 ],\n#               },\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         remarks:\n#           \"Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#         remarks: \"Long text Long text\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#         remarks:\n#           \"Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"page.change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"page.size.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Fixed & Scroll & useBrick\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    page.change:\n      - action: console.log\n    page.size.change:\n      - action: console.log\n  properties:\n    scrollConfig:\n      x: max-content\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n        width: 100\n        fixed: true\n        headerBrick:\n          useBrick:\n            brick: span\n            properties:\n              style:\n                color: red\n              textContent: <% DATA.title %>\n        useBrick:\n          - brick: span\n            properties:\n              style:\n                color: pink\n              textContent: <% DATA.cellData %>\n      - dataIndex: address\n        key: column1\n        title: column1\n      - dataIndex: address\n        key: column2\n        title: column2\n      - dataIndex: address\n        key: column3\n        title: column3\n      - dataIndex: address\n        key: column4\n        title: column4\n      - dataIndex: address\n        key: column5\n        title: column5\n      - dataIndex: address\n        key: column6\n        title: column6\n      - dataIndex: address\n        key: column7\n        title: column7\n      - dataIndex: address\n        key: column8\n        title: column8\n      - dataIndex: address\n        key: column9\n        title: column9\n      - dataIndex: address\n        key: column10\n        title: column10\n      - dataIndex: age\n        key: age\n        title: Age\n        width: 100\n        fixed: right\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.scrollConfig = {\n#     x: \"max-content\",\n#   };\n#   brick_1.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#       width: 100,\n#       fixed: true,\n#       headerBrick: {\n#         useBrick: {\n#           brick: \"span\",\n#           properties: {\n#             style: {\n#               color: \"red\",\n#             },\n#             textContent: \"<% DATA.title %>\",\n#           },\n#         },\n#       },\n#       useBrick: [\n#         {\n#           brick: \"span\",\n#           properties: {\n#             style: {\n#               color: \"pink\",\n#             },\n#             textContent: \"<% DATA.cellData %>\",\n#           },\n#         },\n#       ],\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column1\",\n#       title: \"column1\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column2\",\n#       title: \"column2\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column3\",\n#       title: \"column3\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column4\",\n#       title: \"column4\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column5\",\n#       title: \"column5\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column6\",\n#       title: \"column6\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column7\",\n#       title: \"column7\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column8\",\n#       title: \"column8\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column9\",\n#       title: \"column9\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column10\",\n#       title: \"column10\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#       width: 100,\n#       fixed: \"right\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"page.change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"page.size.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Front Search\n\n```yaml preview\n- brick: eo-search-bar\n  children:\n    - brick: eo-search\n      slot: start\n      properties:\n        placeholder: Enter keyword\n      events:\n        search:\n          target: \"#table\"\n          method: search\n          args:\n            - q: <% EVENT.detail %>\n- brick: eo-next-table\n  events:\n    page.change:\n      - action: console.log\n    page.size.change:\n      - action: console.log\n    sort.change:\n      - action: console.log\n  properties:\n    id: table\n    frontSearch: true\n    searchFields:\n      - address\n    sort:\n      columnKey: age\n      order: descend\n    multiSort: true\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n        sortable: true\n        sortPriority: 1\n      - dataIndex: address\n        key: address\n        title: Address\n        sortable: true\n        sortPriority: 2\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-search-bar>\n#   <eo-search slot=\"start\" placeholder=\"Enter keyword\" id=\"brick-1\"></eo-search>\n# </eo-search-bar>\n# <eo-next-table front-search multi-sort id=\"table\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"search\", (e) => {\n#     const brick = document.querySelector(\"#table\");\n#     brick.search({ q: \"<% EVENT.detail %>\" });\n#   });\n# \n#   const table = document.getElementById(\"table\");\n#   table.searchFields = [\"address\"];\n#   table.sort = {\n#     columnKey: \"age\",\n#     order: \"descend\",\n#   };\n#   table.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   table.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#       sortable: true,\n#       sortPriority: 1,\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#       sortable: true,\n#       sortPriority: 2,\n#     },\n#   ];\n#   table.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   table.addEventListener(\"page.change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   table.addEventListener(\"page.size.change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   table.addEventListener(\"sort.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Row Selection\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.select:\n      - action: console.log\n  properties:\n    rowSelection: true\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n        useBrick:\n          - brick: eo-tag\n            properties:\n              color: |\n                <% DATA.cellData > 18 ? \"green\" : \"red\" %>\n              textContent: <% DATA.cellData %>\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.rowSelection = true;\n#   brick_1.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#       useBrick: [\n#         {\n#           brick: \"eo-tag\",\n#           properties: {\n#             color: '<% DATA.cellData > 18 ? \"green\" : \"red\" %>\\n',\n#             textContent: \"<% DATA.cellData %>\",\n#           },\n#         },\n#       ],\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.select\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Expandable\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.expand:\n      - action: console.log\n    expanded.rows.change:\n      - action: console.log\n  properties:\n    expandable:\n      rowExpandable: <% DATA.rowData.key % 2 === 0 %>\n      expandedRowBrick:\n        useBrick:\n          brick: eo-next-table\n          properties:\n            scrollConfig: false\n            pagination: false\n            bordered: true\n            rowKey: title\n            columns:\n              - dataIndex: title\n                key: title\n                title: 标题\n              - dataIndex: description\n                key: description\n                title: 描述\n              - dataIndex: operator\n                key: operator\n                title: 操作\n                useBrick:\n                  brick: eo-link\n                  properties:\n                    textContent: 操作\n            dataSource:\n              list: <% DATA.rowData.info %>\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n          info:\n            - title: 测试1\n              description: 这是一串描述\n              id: 1\n            - title: 测试2\n              description: 这是一串描述\n              id: 2\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n          info:\n            - title: 测试3\n              description: 这是一串描述\n              id: 3\n            - title: 测试4\n              description: 这是一串描述\n              id: 4\n        - key: 3\n          name: Sam\n          age: 28\n          address: Shenzhen\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Nanjing\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Wuhan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.expandable = {\n#     rowExpandable: \"<% DATA.rowData.key % 2 === 0 %>\",\n#     expandedRowBrick: {\n#       useBrick: {\n#         brick: \"eo-next-table\",\n#         properties: {\n#           scrollConfig: false,\n#           pagination: false,\n#           bordered: true,\n#           rowKey: \"title\",\n#           columns: [\n#             {\n#               dataIndex: \"title\",\n#               key: \"title\",\n#               title: \"标题\",\n#             },\n#             {\n#               dataIndex: \"description\",\n#               key: \"description\",\n#               title: \"描述\",\n#             },\n#             {\n#               dataIndex: \"operator\",\n#               key: \"operator\",\n#               title: \"操作\",\n#               useBrick: {\n#                 brick: \"eo-link\",\n#                 properties: {\n#                   textContent: \"操作\",\n#                 },\n#               },\n#             },\n#           ],\n#           dataSource: {\n#             list: \"<% DATA.rowData.info %>\",\n#           },\n#         },\n#       },\n#     },\n#   };\n#   brick_1.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         info: [\n#           {\n#             title: \"测试1\",\n#             description: \"这是一串描述\",\n#             id: 1,\n#           },\n#           {\n#             title: \"测试2\",\n#             description: \"这是一串描述\",\n#             id: 2,\n#           },\n#         ],\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#         info: [\n#           {\n#             title: \"测试3\",\n#             description: \"这是一串描述\",\n#             id: 3,\n#           },\n#           {\n#             title: \"测试4\",\n#             description: \"这是一串描述\",\n#             id: 4,\n#           },\n#         ],\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Shenzhen\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Nanjing\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Wuhan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.expand\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"expanded.rows.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Bordered\n\n```yaml preview\n- brick: eo-next-table\n  properties:\n    bordered: true\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 3\n          name: Sam\n          age: 28\n          address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table bordered id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Shenzhen\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Size\n\n```yaml preview\nbrick: eo-content-layout\nchildren:\n  - brick: :forEach\n    dataSource:\n      - large\n      - middle\n      - small\n    children:\n      - brick: strong\n        properties:\n          textContent: \"<% `Size: ${ITEM}` %>\"\n      - brick: eo-next-table\n        properties:\n          size: <% ITEM %>\n          pagination: false\n          columns:\n            - dataIndex: name\n              key: name\n              title: Name\n            - dataIndex: age\n              key: age\n              title: Age\n            - dataIndex: address\n              key: address\n              title: Address\n          dataSource:\n            pageSize: 5\n            page: 1\n            list:\n              - key: 0\n                name: Jack\n                age: 18\n                address: Guangzhou\n              - key: 1\n                name: Alex\n                age: 20\n                address: Shanghai\n              - key: 3\n                name: Sam\n                age: 28\n                address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-content-layout>\n#   <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n# </eo-content-layout>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Shenzhen\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Draggable\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.drag:\n      - action: console.log\n  properties:\n    rowKey: name\n    rowDraggable: true\n    pagination: false\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table row-key=\"name\" row-draggable id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.drag\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### RowSpan & ColSpan\n\n```yaml preview\n- brick: eo-next-table\n  properties:\n    pagination: false\n    bordered: true\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: mobile\n        key: mobile\n        title: phone\n        colSpan: 2\n        cellColSpanKey: mobileColSpan\n        cellRowSpanKey: mobileRowSpan\n      - dataIndex: landlines\n        key: landlines\n        colSpan: 0\n        cellColSpanKey: landlinesColSpan\n        cellRowSpanKey: landlinesRowSpan\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n          mobile: 18900010222\n          landlines: 0571-22098909\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n          mobile: 18900010333\n          mobileColSpan: 2\n          landlinesColSpan: 0\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n          mobile: 18900010444\n          landlines: 0571-22098707\n          landlinesRowSpan: 2\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n          mobile: 18900010555\n          landlines: 0571-22098707\n          landlinesRowSpan: 0\n          mobileRowSpan: 2\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n          mobile: 18900010555\n          landlines: 0571-22098606\n          mobileRowSpan: 0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table bordered id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"mobile\",\n#       key: \"mobile\",\n#       title: \"phone\",\n#       colSpan: 2,\n#       cellColSpanKey: \"mobileColSpan\",\n#       cellRowSpanKey: \"mobileRowSpan\",\n#     },\n#     {\n#       dataIndex: \"landlines\",\n#       key: \"landlines\",\n#       colSpan: 0,\n#       cellColSpanKey: \"landlinesColSpan\",\n#       cellRowSpanKey: \"landlinesRowSpan\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         mobile: 18900010222,\n#         landlines: \"0571-22098909\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#         mobile: 18900010333,\n#         mobileColSpan: 2,\n#         landlinesColSpan: 0,\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#         mobile: 18900010444,\n#         landlines: \"0571-22098707\",\n#         landlinesRowSpan: 2,\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#         mobile: 18900010555,\n#         landlines: \"0571-22098707\",\n#         landlinesRowSpan: 0,\n#         mobileRowSpan: 2,\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#         mobile: 18900010555,\n#         landlines: \"0571-22098606\",\n#         mobileRowSpan: 0,\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Tree\n\n设置 childrenColumnName 来指定树形结构的列名，展开功能的配置可以使用 expandable。目前树形结构暂不支持拖拽。\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.expand:\n      - action: console.log\n    expanded.rows.change:\n      - action: console.log\n  properties:\n    pagination: false\n    childrenColumnName: student\n    expandable:\n      defaultExpandAllRows: true\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: \"1\"\n          name: Jack\n          age: 18\n          address: Guangzhou\n          student:\n            - key: \"11\"\n              name: Alex\n              age: 20\n              address: Shanghai\n            - key: \"12\"\n              name: Lucy\n              age: 16\n              address: Yunnan\n            - key: \"13\"\n              name: Sam\n              age: 28\n              address: Guangzhou\n        - key: \"2\"\n          name: Bob\n          age: 35\n          address: Hainan\n          student:\n            - key: \"21\"\n              name: Ava\n              age: 23\n              address: Beijing\n            - key: \"22\"\n              name: Sophia\n              age: 20\n              address: Shanghai\n            - key: \"23\"\n              name: Charlotte\n              age: 33\n              address: Chongqing\n              student:\n                - key: \"231\"\n                  name: Mia\n                  age: 18\n                  address: Chengdu\n                - key: \"232\"\n                  name: Noah\n                  age: 38\n                  address: Hainan\n                - key: \"233\"\n                  name: William\n                  age: 16\n                  address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table children-column-name=\"student\" id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.expandable = {\n#     defaultExpandAllRows: true,\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: \"1\",\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         student: [\n#           {\n#             key: \"11\",\n#             name: \"Alex\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"12\",\n#             name: \"Lucy\",\n#             age: 16,\n#             address: \"Yunnan\",\n#           },\n#           {\n#             key: \"13\",\n#             name: \"Sam\",\n#             age: 28,\n#             address: \"Guangzhou\",\n#           },\n#         ],\n#       },\n#       {\n#         key: \"2\",\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#         student: [\n#           {\n#             key: \"21\",\n#             name: \"Ava\",\n#             age: 23,\n#             address: \"Beijing\",\n#           },\n#           {\n#             key: \"22\",\n#             name: \"Sophia\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"23\",\n#             name: \"Charlotte\",\n#             age: 33,\n#             address: \"Chongqing\",\n#             student: [\n#               {\n#                 key: \"231\",\n#                 name: \"Mia\",\n#                 age: 18,\n#                 address: \"Chengdu\",\n#               },\n#               {\n#                 key: \"232\",\n#                 name: \"Noah\",\n#                 age: 38,\n#                 address: \"Hainan\",\n#               },\n#               {\n#                 key: \"233\",\n#                 name: \"William\",\n#                 age: 16,\n#                 address: \"Taiwan\",\n#               },\n#             ],\n#           },\n#         ],\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.expand\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"expanded.rows.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n#### With Row Selection\n\n设置 rowSelection.checkStrictly 来控制父子数据选中状态是否关联。注意，关联的时候，节点勾选传导策略为【只勾选可触达的可勾选节点】\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.select:\n      - action: console.log\n  properties:\n    pagination: false\n    childrenColumnName: student\n    rowSelection:\n      checkStrictly: false\n      indentSize: 50\n      rowDisabled: <% DATA.rowData.age > 30 %>\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: \"1\"\n          name: Jack\n          age: 18\n          address: Guangzhou\n          student:\n            - key: \"11\"\n              name: Alex\n              age: 20\n              address: Shanghai\n            - key: \"12\"\n              name: Lucy\n              age: 16\n              address: Yunnan\n            - key: \"13\"\n              name: Sam\n              age: 34\n              address: Guangzhou\n        - key: \"2\"\n          name: Bob\n          age: 27\n          address: Hainan\n          student:\n            - key: \"21\"\n              name: Ava\n              age: 23\n              address: Beijing\n            - key: \"22\"\n              name: Sophia\n              age: 20\n              address: Shanghai\n            - key: \"23\"\n              name: Charlotte\n              age: 35\n              address: Chongqing\n              student:\n                - key: \"231\"\n                  name: Mia\n                  age: 18\n                  address: Chengdu\n                - key: \"232\"\n                  name: Noah\n                  age: 38\n                  address: Hainan\n                - key: \"233\"\n                  name: William\n                  age: 16\n                  address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table children-column-name=\"student\" id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.rowSelection = {\n#     checkStrictly: false,\n#     indentSize: 50,\n#     rowDisabled: \"<% DATA.rowData.age > 30 %>\",\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: \"1\",\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         student: [\n#           {\n#             key: \"11\",\n#             name: \"Alex\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"12\",\n#             name: \"Lucy\",\n#             age: 16,\n#             address: \"Yunnan\",\n#           },\n#           {\n#             key: \"13\",\n#             name: \"Sam\",\n#             age: 34,\n#             address: \"Guangzhou\",\n#           },\n#         ],\n#       },\n#       {\n#         key: \"2\",\n#         name: \"Bob\",\n#         age: 27,\n#         address: \"Hainan\",\n#         student: [\n#           {\n#             key: \"21\",\n#             name: \"Ava\",\n#             age: 23,\n#             address: \"Beijing\",\n#           },\n#           {\n#             key: \"22\",\n#             name: \"Sophia\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"23\",\n#             name: \"Charlotte\",\n#             age: 35,\n#             address: \"Chongqing\",\n#             student: [\n#               {\n#                 key: \"231\",\n#                 name: \"Mia\",\n#                 age: 18,\n#                 address: \"Chengdu\",\n#               },\n#               {\n#                 key: \"232\",\n#                 name: \"Noah\",\n#                 age: 38,\n#                 address: \"Hainan\",\n#               },\n#               {\n#                 key: \"233\",\n#                 name: \"William\",\n#                 age: 16,\n#                 address: \"Taiwan\",\n#               },\n#             ],\n#           },\n#         ],\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.select\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n#### With Front Search\n\n```yaml preview\n- brick: eo-search-bar\n  children:\n    - brick: eo-search\n      slot: start\n      properties:\n        placeholder: Enter keyword\n      events:\n        search:\n          target: \"#table\"\n          method: search\n          args:\n            - q: <% EVENT.detail %>\n- brick: eo-next-table\n  properties:\n    id: table\n    searchFields:\n      - name\n      - age\n      - address\n    pagination: false\n    childrenColumnName: student\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: \"1\"\n          name: Jack\n          age: 18\n          address: Guangzhou\n          student:\n            - key: \"11\"\n              name: Alex\n              age: 20\n              address: Shanghai\n            - key: \"12\"\n              name: Lucy\n              age: 16\n              address: Yunnan\n            - key: \"13\"\n              name: Sam\n              age: 34\n              address: Guangzhou\n        - key: \"2\"\n          name: Bob\n          age: 27\n          address: Hainan\n          student:\n            - key: \"21\"\n              name: Ava\n              age: 23\n              address: Beijing\n            - key: \"22\"\n              name: Sophia\n              age: 20\n              address: Shanghai\n            - key: \"23\"\n              name: Charlotte\n              age: 35\n              address: Chongqing\n              student:\n                - key: \"231\"\n                  name: Mia\n                  age: 18\n                  address: Chengdu\n                - key: \"232\"\n                  name: Noah\n                  age: 38\n                  address: Hainan\n                - key: \"233\"\n                  name: William\n                  age: 16\n                  address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-search-bar>\n#   <eo-search slot=\"start\" placeholder=\"Enter keyword\" id=\"brick-1\"></eo-search>\n# </eo-search-bar>\n# <eo-next-table children-column-name=\"student\" id=\"table\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"search\", (e) => {\n#     const brick = document.querySelector(\"#table\");\n#     brick.search({ q: \"<% EVENT.detail %>\" });\n#   });\n# \n#   const table = document.getElementById(\"table\");\n#   table.searchFields = [\"name\", \"age\", \"address\"];\n#   table.pagination = false;\n#   table.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   table.dataSource = {\n#     list: [\n#       {\n#         key: \"1\",\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         student: [\n#           {\n#             key: \"11\",\n#             name: \"Alex\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"12\",\n#             name: \"Lucy\",\n#             age: 16,\n#             address: \"Yunnan\",\n#           },\n#           {\n#             key: \"13\",\n#             name: \"Sam\",\n#             age: 34,\n#             address: \"Guangzhou\",\n#           },\n#         ],\n#       },\n#       {\n#         key: \"2\",\n#         name: \"Bob\",\n#         age: 27,\n#         address: \"Hainan\",\n#         student: [\n#           {\n#             key: \"21\",\n#             name: \"Ava\",\n#             age: 23,\n#             address: \"Beijing\",\n#           },\n#           {\n#             key: \"22\",\n#             name: \"Sophia\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"23\",\n#             name: \"Charlotte\",\n#             age: 35,\n#             address: \"Chongqing\",\n#             student: [\n#               {\n#                 key: \"231\",\n#                 name: \"Mia\",\n#                 age: 18,\n#                 address: \"Chengdu\",\n#               },\n#               {\n#                 key: \"232\",\n#                 name: \"Noah\",\n#                 age: 38,\n#                 address: \"Hainan\",\n#               },\n#               {\n#                 key: \"233\",\n#                 name: \"William\",\n#                 age: 16,\n#                 address: \"Taiwan\",\n#               },\n#             ],\n#           },\n#         ],\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Dynamic Columns\n\n```yaml preview\nbrick: eo-next-table\nproperties:\n  cell:\n    useBrick:\n      - if: <% DATA.columnKey !== '01-13' %>\n        brick: em\n        properties:\n          textContent: <% DATA.cellData %>\n      - if: <% DATA.columnKey === '01-13' %>\n        brick: del\n        properties:\n          textContent: <% DATA.cellData %>\n    header:\n      useBrick:\n        brick: em\n        properties:\n          textContent: <% DATA.title %>\n  # Dynamic columns, such as by dates\n  columns: <% CTX.dates %>\n  dataSource:\n    list:\n      - \"01-11\": \"abc\"\n        \"01-12\": \"def\"\n        \"01-13\": \"ghi\"\n        \"01-14\": \"jkl\"\n      - \"01-11\": \"123\"\n        \"01-12\": \"345\"\n        \"01-13\": \"789\"\n        \"01-14\": \"-\"\ncontext:\n  - name: dates\n    value: |\n      <%\n        new Array(4).fill(null).map(\n          (d, i) => moment('2023-01-11').add(i, 'days').format('MM-DD')\n        ).map((key) => ({\n          dataIndex: key,\n          key,\n          title: key,\n        }))\n      %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.cell = {\n#     useBrick: [\n#       {\n#         if: \"<% DATA.columnKey !== '01-13' %>\",\n#         brick: \"em\",\n#         properties: {\n#           textContent: \"<% DATA.cellData %>\",\n#         },\n#       },\n#       {\n#         if: \"<% DATA.columnKey === '01-13' %>\",\n#         brick: \"del\",\n#         properties: {\n#           textContent: \"<% DATA.cellData %>\",\n#         },\n#       },\n#     ],\n#     header: {\n#       useBrick: {\n#         brick: \"em\",\n#         properties: {\n#           textContent: \"<% DATA.title %>\",\n#         },\n#       },\n#     },\n#   };\n#   brick_1.columns = \"<% CTX.dates %>\";\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         \"01-11\": \"abc\",\n#         \"01-12\": \"def\",\n#         \"01-13\": \"ghi\",\n#         \"01-14\": \"jkl\",\n#       },\n#       {\n#         \"01-11\": \"123\",\n#         \"01-12\": \"345\",\n#         \"01-13\": \"789\",\n#         \"01-14\": \"-\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Cell status\n\n```yaml preview\n- brick: eo-next-table\n  properties:\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n        cellStatus:\n          dataIndex: age\n          mapping:\n            - value: 18\n              leftBorderColor: green\n            - value: 20\n              leftBorderColor: blue\n            - value: 28\n              leftBorderColor: red\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 3\n          name: Sam\n          age: 28\n          address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#       cellStatus: {\n#         dataIndex: \"age\",\n#         mapping: [\n#           {\n#             value: 18,\n#             leftBorderColor: \"green\",\n#           },\n#           {\n#             value: 20,\n#             leftBorderColor: \"blue\",\n#           },\n#           {\n#             value: 28,\n#             leftBorderColor: \"red\",\n#           },\n#         ],\n#       },\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Shenzhen\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n"
+  },
+  "eo-workbench-layout": {
+    "doc": "工作台布局\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-workbench-layout\n  properties:\n    layouts:\n      - i: hello\n        x: 0\n        y: 0\n        w: 2\n        h: 1\n      - i: world\n        x: 0\n        y: 1\n        w: 2\n        h: 1\n      - i: small\n        x: 2\n        y: 0\n        w: 1\n        h: 1\n    componentList:\n      - title: 基础布局\n        useBrick:\n          brick: eo-card\n          properties:\n            fillVertical: true\n          children:\n            - brick: div\n              properties:\n                textContent: Hello\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: hello\n          x: 0\n          y: 0\n          w: 2\n          h: 1\n        key: hello\n      - title: world\n        useBrick:\n          brick: eo-card\n          properties:\n            fillVertical: true\n          children:\n            - brick: div\n              properties:\n                textContent: World\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: world\n          x: 0\n          y: 2\n          w: 2\n          h: 1\n        key: world\n      - title: small\n        useBrick:\n          brick: div\n          properties:\n            style:\n              height: 100%\n              background: \"#fff\"\n          children:\n            - brick: div\n              properties:\n                textContent: small\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: small\n          x: 2\n          y: 0\n          w: 1\n          h: 2\n        key: small\n      - title: custom\n        useBrick:\n          brick: div\n          properties:\n            style:\n              background: \"#6ad26a\"\n              width: 100%\n              height: 100%\n        position:\n          i: custom\n          x: 1\n          y: 3\n          w: 1\n          h: 1\n        key: custom\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-workbench-layout id=\"brick-1\"></eo-workbench-layout>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layouts = [\n#     {\n#       i: \"hello\",\n#       x: 0,\n#       y: 0,\n#       w: 2,\n#       h: 1,\n#     },\n#     {\n#       i: \"world\",\n#       x: 0,\n#       y: 1,\n#       w: 2,\n#       h: 1,\n#     },\n#     {\n#       i: \"small\",\n#       x: 2,\n#       y: 0,\n#       w: 1,\n#       h: 1,\n#     },\n#   ];\n#   brick_1.componentList = [\n#     {\n#       title: \"基础布局\",\n#       useBrick: {\n#         brick: \"eo-card\",\n#         properties: {\n#           fillVertical: true,\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"Hello\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"hello\",\n#         x: 0,\n#         y: 0,\n#         w: 2,\n#         h: 1,\n#       },\n#       key: \"hello\",\n#     },\n#     {\n#       title: \"world\",\n#       useBrick: {\n#         brick: \"eo-card\",\n#         properties: {\n#           fillVertical: true,\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"World\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"world\",\n#         x: 0,\n#         y: 2,\n#         w: 2,\n#         h: 1,\n#       },\n#       key: \"world\",\n#     },\n#     {\n#       title: \"small\",\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             height: \"100%\",\n#             background: \"#fff\",\n#           },\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"small\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"small\",\n#         x: 2,\n#         y: 0,\n#         w: 1,\n#         h: 2,\n#       },\n#       key: \"small\",\n#     },\n#     {\n#       title: \"custom\",\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             background: \"#6ad26a\",\n#             width: \"100%\",\n#             height: \"100%\",\n#           },\n#         },\n#       },\n#       position: {\n#         i: \"custom\",\n#         x: 1,\n#         y: 3,\n#         w: 1,\n#         h: 1,\n#       },\n#       key: \"custom\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Edit & Event\n\n```yaml preview\n- brick: eo-workbench-layout\n  events:\n    save.layout:\n      - action: console.log\n  properties:\n    isEdit: true\n    layouts:\n      - i: hello\n        x: 0\n        y: 0\n        w: 2\n        h: 1\n      - i: world\n        x: 0\n        y: 1\n        w: 2\n        h: 1\n      - i: small\n        x: 2\n        y: 0\n        w: 1\n        h: 1\n    componentList:\n      - title: 基础布局\n        useBrick:\n          brick: eo-card\n          properties:\n            fillVertical: true\n          children:\n            - brick: div\n              properties:\n                textContent: Hello\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: hello\n          x: 0\n          y: 0\n          w: 2\n          h: 1\n        key: hello\n      - title: world\n        useBrick:\n          brick: eo-card\n          properties:\n            fillVertical: true\n          children:\n            - brick: div\n              properties:\n                textContent: World\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: world\n          x: 0\n          y: 2\n          w: 2\n          h: 1\n        key: world\n      - title: small\n        useBrick:\n          brick: div\n          properties:\n            style:\n              height: 100%\n              background: \"#fff\"\n          children:\n            - brick: div\n              properties:\n                textContent: small\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: small\n          x: 2\n          y: 0\n          w: 1\n          h: 2\n        key: small\n      - title: custom\n        useBrick:\n          brick: div\n          properties:\n            style:\n              background: \"#6ad26a\"\n              width: 100%\n              height: 100%\n        position:\n          i: custom\n          x: 1\n          y: 3\n          w: 1\n          h: 1\n        key: custom\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-workbench-layout is-edit id=\"brick-1\"></eo-workbench-layout>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layouts = [\n#     {\n#       i: \"hello\",\n#       x: 0,\n#       y: 0,\n#       w: 2,\n#       h: 1,\n#     },\n#     {\n#       i: \"world\",\n#       x: 0,\n#       y: 1,\n#       w: 2,\n#       h: 1,\n#     },\n#     {\n#       i: \"small\",\n#       x: 2,\n#       y: 0,\n#       w: 1,\n#       h: 1,\n#     },\n#   ];\n#   brick_1.componentList = [\n#     {\n#       title: \"基础布局\",\n#       useBrick: {\n#         brick: \"eo-card\",\n#         properties: {\n#           fillVertical: true,\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"Hello\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"hello\",\n#         x: 0,\n#         y: 0,\n#         w: 2,\n#         h: 1,\n#       },\n#       key: \"hello\",\n#     },\n#     {\n#       title: \"world\",\n#       useBrick: {\n#         brick: \"eo-card\",\n#         properties: {\n#           fillVertical: true,\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"World\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"world\",\n#         x: 0,\n#         y: 2,\n#         w: 2,\n#         h: 1,\n#       },\n#       key: \"world\",\n#     },\n#     {\n#       title: \"small\",\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             height: \"100%\",\n#             background: \"#fff\",\n#           },\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"small\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"small\",\n#         x: 2,\n#         y: 0,\n#         w: 1,\n#         h: 2,\n#       },\n#       key: \"small\",\n#     },\n#     {\n#       title: \"custom\",\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             background: \"#6ad26a\",\n#             width: \"100%\",\n#             height: \"100%\",\n#           },\n#         },\n#       },\n#       position: {\n#         i: \"custom\",\n#         x: 1,\n#         y: 3,\n#         w: 1,\n#         h: 1,\n#       },\n#       key: \"custom\",\n#     },\n#   ];\n#   brick_1.addEventListener(\"save.layout\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
+  },
   "eo-tree": {
     "doc": "树形构件\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: eo-tree\nproperties:\n  defaultExpandAll: true\n  dataSource:\n    - title: parent 1\n      key: 0-0\n      children:\n        - title: parent 1-0\n          key: 0-0-0\n          children:\n            - title: leaf\n              key: 0-0-0-0\n            - title: leaf\n              key: 0-0-0-1\n        - title: parent 1-1\n          key: 0-0-1\n          children:\n            - title: sss\n              key: 0-0-1-0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all id=\"brick-1\"></eo-tree>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       title: \"parent 1\",\n#       key: \"0-0\",\n#       children: [\n#         {\n#           title: \"parent 1-0\",\n#           key: \"0-0-0\",\n#           children: [\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-0\",\n#             },\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-1\",\n#             },\n#           ],\n#         },\n#         {\n#           title: \"parent 1-1\",\n#           key: \"0-0-1\",\n#           children: [\n#             {\n#               title: \"sss\",\n#               key: \"0-0-1-0\",\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n# </script>\n# \n```\n\n### Checkable\n\n```yaml preview\nbrick: eo-tree\nproperties:\n  defaultExpandAll: true\n  checkable: true\n  selectable: false\n  showLine: true\n  switcherIcon: chevron\n  dataSource:\n    - title: parent 1\n      key: 0-0\n      children:\n        - title: parent 1-0\n          key: 0-0-0\n          children:\n            - title: leaf\n              key: 0-0-0-0\n            - title: leaf\n              key: 0-0-0-1\n        - title: parent 1-1\n          key: 0-0-1\n          children:\n            - title: sss\n              key: 0-0-1-0\nevents:\n  check:\n    action: console.log\n  check.detail:\n    action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all checkable show-line id=\"brick-1\"></eo-tree>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.switcherIcon = \"chevron\";\n#   brick_1.dataSource = [\n#     {\n#       title: \"parent 1\",\n#       key: \"0-0\",\n#       children: [\n#         {\n#           title: \"parent 1-0\",\n#           key: \"0-0-0\",\n#           children: [\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-0\",\n#             },\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-1\",\n#             },\n#           ],\n#         },\n#         {\n#           title: \"parent 1-1\",\n#           key: \"0-0-1\",\n#           children: [\n#             {\n#               title: \"sss\",\n#               key: \"0-0-1-0\",\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n#   brick_1.addEventListener(\"check\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"check.detail\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### titleSuffixBrick\n\n```yaml preview\nbrick: eo-tree\nproperties:\n  defaultExpandAll: true\n  titleSuffixBrick:\n    useBrick:\n      brick: eo-link\n      properties:\n        icon:\n          lib: antd\n          icon: edit\n          theme: outlined\n        style:\n          margin-left: 5px\n          font-size: 12px\n  dataSource:\n    - title: parent 1\n      key: 0-0\n      children:\n        - title: parent 1-0\n          key: 0-0-0\n          children:\n            - title: leaf\n              key: 0-0-0-0\n            - title: leaf\n              key: 0-0-0-1\n        - title: parent 1-1\n          key: 0-0-1\n          children:\n            - title: sss\n              key: 0-0-1-0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all id=\"brick-1\"></eo-tree>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.titleSuffixBrick = {\n#     useBrick: {\n#       brick: \"eo-link\",\n#       properties: {\n#         icon: {\n#           lib: \"antd\",\n#           icon: \"edit\",\n#           theme: \"outlined\",\n#         },\n#         style: {\n#           \"margin-left\": \"5px\",\n#           \"font-size\": \"12px\",\n#         },\n#       },\n#     },\n#   };\n#   brick_1.dataSource = [\n#     {\n#       title: \"parent 1\",\n#       key: \"0-0\",\n#       children: [\n#         {\n#           title: \"parent 1-0\",\n#           key: \"0-0-0\",\n#           children: [\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-0\",\n#             },\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-1\",\n#             },\n#           ],\n#         },\n#         {\n#           title: \"parent 1-1\",\n#           key: \"0-0-1\",\n#           children: [\n#             {\n#               title: \"sss\",\n#               key: \"0-0-1-0\",\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n# </script>\n# \n```\n"
   },
@@ -14,12 +20,6 @@
   "advanced.pdf-viewer": {
     "doc": "构件 `advanced.pdf-viewer`\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: advanced.pdf-viewer\nproperties:\n  url: https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\n  viewerStyle:\n    height: 500px\n# -- YAML DELIMITER (1nbbm8) --\n# <advanced.pdf-viewer\n#   url=\"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\"\n#   id=\"brick-1\"\n# ></advanced.pdf-viewer>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.viewerStyle = {\n#     height: \"500px\",\n#   };\n# </script>\n# \n```\n"
   },
-  "eo-workbench-layout": {
-    "doc": "工作台布局\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-workbench-layout\n  properties:\n    layouts:\n      - i: hello\n        x: 0\n        y: 0\n        w: 2\n        h: 1\n      - i: world\n        x: 0\n        y: 1\n        w: 2\n        h: 1\n      - i: small\n        x: 2\n        y: 0\n        w: 1\n        h: 1\n    componentList:\n      - title: 基础布局\n        useBrick:\n          brick: eo-card\n          properties:\n            fillVertical: true\n          children:\n            - brick: div\n              properties:\n                textContent: Hello\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: hello\n          x: 0\n          y: 0\n          w: 2\n          h: 1\n        key: hello\n      - title: world\n        useBrick:\n          brick: eo-card\n          properties:\n            fillVertical: true\n          children:\n            - brick: div\n              properties:\n                textContent: World\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: world\n          x: 0\n          y: 2\n          w: 2\n          h: 1\n        key: world\n      - title: small\n        useBrick:\n          brick: div\n          properties:\n            style:\n              height: 100%\n              background: \"#fff\"\n          children:\n            - brick: div\n              properties:\n                textContent: small\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: small\n          x: 2\n          y: 0\n          w: 1\n          h: 2\n        key: small\n      - title: custom\n        useBrick:\n          brick: div\n          properties:\n            style:\n              background: \"#6ad26a\"\n              width: 100%\n              height: 100%\n        position:\n          i: custom\n          x: 1\n          y: 3\n          w: 1\n          h: 1\n        key: custom\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-workbench-layout id=\"brick-1\"></eo-workbench-layout>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layouts = [\n#     {\n#       i: \"hello\",\n#       x: 0,\n#       y: 0,\n#       w: 2,\n#       h: 1,\n#     },\n#     {\n#       i: \"world\",\n#       x: 0,\n#       y: 1,\n#       w: 2,\n#       h: 1,\n#     },\n#     {\n#       i: \"small\",\n#       x: 2,\n#       y: 0,\n#       w: 1,\n#       h: 1,\n#     },\n#   ];\n#   brick_1.componentList = [\n#     {\n#       title: \"基础布局\",\n#       useBrick: {\n#         brick: \"eo-card\",\n#         properties: {\n#           fillVertical: true,\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"Hello\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"hello\",\n#         x: 0,\n#         y: 0,\n#         w: 2,\n#         h: 1,\n#       },\n#       key: \"hello\",\n#     },\n#     {\n#       title: \"world\",\n#       useBrick: {\n#         brick: \"eo-card\",\n#         properties: {\n#           fillVertical: true,\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"World\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"world\",\n#         x: 0,\n#         y: 2,\n#         w: 2,\n#         h: 1,\n#       },\n#       key: \"world\",\n#     },\n#     {\n#       title: \"small\",\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             height: \"100%\",\n#             background: \"#fff\",\n#           },\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"small\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"small\",\n#         x: 2,\n#         y: 0,\n#         w: 1,\n#         h: 2,\n#       },\n#       key: \"small\",\n#     },\n#     {\n#       title: \"custom\",\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             background: \"#6ad26a\",\n#             width: \"100%\",\n#             height: \"100%\",\n#           },\n#         },\n#       },\n#       position: {\n#         i: \"custom\",\n#         x: 1,\n#         y: 3,\n#         w: 1,\n#         h: 1,\n#       },\n#       key: \"custom\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Edit & Event\n\n```yaml preview\n- brick: eo-workbench-layout\n  events:\n    save.layout:\n      - action: console.log\n  properties:\n    isEdit: true\n    layouts:\n      - i: hello\n        x: 0\n        y: 0\n        w: 2\n        h: 1\n      - i: world\n        x: 0\n        y: 1\n        w: 2\n        h: 1\n      - i: small\n        x: 2\n        y: 0\n        w: 1\n        h: 1\n    componentList:\n      - title: 基础布局\n        useBrick:\n          brick: eo-card\n          properties:\n            fillVertical: true\n          children:\n            - brick: div\n              properties:\n                textContent: Hello\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: hello\n          x: 0\n          y: 0\n          w: 2\n          h: 1\n        key: hello\n      - title: world\n        useBrick:\n          brick: eo-card\n          properties:\n            fillVertical: true\n          children:\n            - brick: div\n              properties:\n                textContent: World\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: world\n          x: 0\n          y: 2\n          w: 2\n          h: 1\n        key: world\n      - title: small\n        useBrick:\n          brick: div\n          properties:\n            style:\n              height: 100%\n              background: \"#fff\"\n          children:\n            - brick: div\n              properties:\n                textContent: small\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: small\n          x: 2\n          y: 0\n          w: 1\n          h: 2\n        key: small\n      - title: custom\n        useBrick:\n          brick: div\n          properties:\n            style:\n              background: \"#6ad26a\"\n              width: 100%\n              height: 100%\n        position:\n          i: custom\n          x: 1\n          y: 3\n          w: 1\n          h: 1\n        key: custom\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-workbench-layout is-edit id=\"brick-1\"></eo-workbench-layout>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layouts = [\n#     {\n#       i: \"hello\",\n#       x: 0,\n#       y: 0,\n#       w: 2,\n#       h: 1,\n#     },\n#     {\n#       i: \"world\",\n#       x: 0,\n#       y: 1,\n#       w: 2,\n#       h: 1,\n#     },\n#     {\n#       i: \"small\",\n#       x: 2,\n#       y: 0,\n#       w: 1,\n#       h: 1,\n#     },\n#   ];\n#   brick_1.componentList = [\n#     {\n#       title: \"基础布局\",\n#       useBrick: {\n#         brick: \"eo-card\",\n#         properties: {\n#           fillVertical: true,\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"Hello\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"hello\",\n#         x: 0,\n#         y: 0,\n#         w: 2,\n#         h: 1,\n#       },\n#       key: \"hello\",\n#     },\n#     {\n#       title: \"world\",\n#       useBrick: {\n#         brick: \"eo-card\",\n#         properties: {\n#           fillVertical: true,\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"World\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"world\",\n#         x: 0,\n#         y: 2,\n#         w: 2,\n#         h: 1,\n#       },\n#       key: \"world\",\n#     },\n#     {\n#       title: \"small\",\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             height: \"100%\",\n#             background: \"#fff\",\n#           },\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"small\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"small\",\n#         x: 2,\n#         y: 0,\n#         w: 1,\n#         h: 2,\n#       },\n#       key: \"small\",\n#     },\n#     {\n#       title: \"custom\",\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             background: \"#6ad26a\",\n#             width: \"100%\",\n#             height: \"100%\",\n#           },\n#         },\n#       },\n#       position: {\n#         i: \"custom\",\n#         x: 1,\n#         y: 3,\n#         w: 1,\n#         h: 1,\n#       },\n#       key: \"custom\",\n#     },\n#   ];\n#   brick_1.addEventListener(\"save.layout\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
-  },
-  "eo-next-table": {
-    "doc": "大型表格\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    page.change:\n      - action: console.log\n    page.size.change:\n      - action: console.log\n  properties:\n    scrollConfig:\n      x: false\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n      - dataIndex: remarks\n        key: remarks\n        title: Long Column Long Column Long Column Long Column\n        width: 200\n        ellipsis: true\n      - dataIndex: operator\n        key: operator\n        title: 操作\n        width: 200\n        useBrick:\n          - brick: div\n            properties:\n              style:\n                display: flex\n                gap: 4px\n            children:\n              - brick: eo-button\n                properties:\n                  type: link\n                  size: small\n                  icon:\n                    lib: antd\n                    icon: edit\n                events:\n                  click:\n                    - action: message.info\n                      args:\n                        - <% DATA.rowData.name %>\n              - brick: eo-button\n                properties:\n                  type: link\n                  size: small\n                  danger: true\n                  icon:\n                    lib: antd\n                    icon: delete\n                events:\n                  click:\n                    - action: message.error\n                      args:\n                        - <% JSON.stringify(DATA) %>\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n          remarks: Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n          remarks: Long text Long text\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n          remarks: Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.scrollConfig = {\n#     x: false,\n#   };\n#   brick_1.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#     {\n#       dataIndex: \"remarks\",\n#       key: \"remarks\",\n#       title: \"Long Column Long Column Long Column Long Column\",\n#       width: 200,\n#       ellipsis: true,\n#     },\n#     {\n#       dataIndex: \"operator\",\n#       key: \"operator\",\n#       title: \"操作\",\n#       width: 200,\n#       useBrick: [\n#         {\n#           brick: \"div\",\n#           properties: {\n#             style: {\n#               display: \"flex\",\n#               gap: \"4px\",\n#             },\n#           },\n#           children: [\n#             {\n#               brick: \"eo-button\",\n#               properties: {\n#                 type: \"link\",\n#                 size: \"small\",\n#                 icon: {\n#                   lib: \"antd\",\n#                   icon: \"edit\",\n#                 },\n#               },\n#               events: {\n#                 click: [\n#                   {\n#                     action: \"message.info\",\n#                     args: [\"<% DATA.rowData.name %>\"],\n#                   },\n#                 ],\n#               },\n#             },\n#             {\n#               brick: \"eo-button\",\n#               properties: {\n#                 type: \"link\",\n#                 size: \"small\",\n#                 danger: true,\n#                 icon: {\n#                   lib: \"antd\",\n#                   icon: \"delete\",\n#                 },\n#               },\n#               events: {\n#                 click: [\n#                   {\n#                     action: \"message.error\",\n#                     args: [\"<% JSON.stringify(DATA) %>\"],\n#                   },\n#                 ],\n#               },\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         remarks:\n#           \"Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#         remarks: \"Long text Long text\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#         remarks:\n#           \"Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"page.change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"page.size.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Fixed & Scroll & useBrick\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    page.change:\n      - action: console.log\n    page.size.change:\n      - action: console.log\n  properties:\n    scrollConfig:\n      x: max-content\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n        width: 100\n        fixed: true\n        headerBrick:\n          useBrick:\n            brick: span\n            properties:\n              style:\n                color: red\n              textContent: <% DATA.title %>\n        useBrick:\n          - brick: span\n            properties:\n              style:\n                color: pink\n              textContent: <% DATA.cellData %>\n      - dataIndex: address\n        key: column1\n        title: column1\n      - dataIndex: address\n        key: column2\n        title: column2\n      - dataIndex: address\n        key: column3\n        title: column3\n      - dataIndex: address\n        key: column4\n        title: column4\n      - dataIndex: address\n        key: column5\n        title: column5\n      - dataIndex: address\n        key: column6\n        title: column6\n      - dataIndex: address\n        key: column7\n        title: column7\n      - dataIndex: address\n        key: column8\n        title: column8\n      - dataIndex: address\n        key: column9\n        title: column9\n      - dataIndex: address\n        key: column10\n        title: column10\n      - dataIndex: age\n        key: age\n        title: Age\n        width: 100\n        fixed: right\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.scrollConfig = {\n#     x: \"max-content\",\n#   };\n#   brick_1.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#       width: 100,\n#       fixed: true,\n#       headerBrick: {\n#         useBrick: {\n#           brick: \"span\",\n#           properties: {\n#             style: {\n#               color: \"red\",\n#             },\n#             textContent: \"<% DATA.title %>\",\n#           },\n#         },\n#       },\n#       useBrick: [\n#         {\n#           brick: \"span\",\n#           properties: {\n#             style: {\n#               color: \"pink\",\n#             },\n#             textContent: \"<% DATA.cellData %>\",\n#           },\n#         },\n#       ],\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column1\",\n#       title: \"column1\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column2\",\n#       title: \"column2\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column3\",\n#       title: \"column3\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column4\",\n#       title: \"column4\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column5\",\n#       title: \"column5\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column6\",\n#       title: \"column6\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column7\",\n#       title: \"column7\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column8\",\n#       title: \"column8\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column9\",\n#       title: \"column9\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column10\",\n#       title: \"column10\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#       width: 100,\n#       fixed: \"right\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"page.change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"page.size.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Front Search\n\n```yaml preview\n- brick: eo-search-bar\n  children:\n    - brick: eo-search\n      slot: start\n      properties:\n        placeholder: Enter keyword\n      events:\n        search:\n          target: \"#table\"\n          method: search\n          args:\n            - q: <% EVENT.detail %>\n- brick: eo-next-table\n  events:\n    page.change:\n      - action: console.log\n    page.size.change:\n      - action: console.log\n    sort.change:\n      - action: console.log\n  properties:\n    id: table\n    frontSearch: true\n    searchFields:\n      - address\n    sort:\n      columnKey: age\n      order: descend\n    multiSort: true\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n        sortable: true\n        sortPriority: 1\n      - dataIndex: address\n        key: address\n        title: Address\n        sortable: true\n        sortPriority: 2\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-search-bar>\n#   <eo-search slot=\"start\" placeholder=\"Enter keyword\" id=\"brick-1\"></eo-search>\n# </eo-search-bar>\n# <eo-next-table front-search multi-sort id=\"table\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"search\", (e) => {\n#     const brick = document.querySelector(\"#table\");\n#     brick.search({ q: \"<% EVENT.detail %>\" });\n#   });\n# \n#   const table = document.getElementById(\"table\");\n#   table.searchFields = [\"address\"];\n#   table.sort = {\n#     columnKey: \"age\",\n#     order: \"descend\",\n#   };\n#   table.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   table.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#       sortable: true,\n#       sortPriority: 1,\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#       sortable: true,\n#       sortPriority: 2,\n#     },\n#   ];\n#   table.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   table.addEventListener(\"page.change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   table.addEventListener(\"page.size.change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   table.addEventListener(\"sort.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Row Selection\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.select:\n      - action: console.log\n  properties:\n    rowSelection: true\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n        useBrick:\n          - brick: eo-tag\n            properties:\n              color: |\n                <% DATA.cellData > 18 ? \"green\" : \"red\" %>\n              textContent: <% DATA.cellData %>\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.rowSelection = true;\n#   brick_1.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#       useBrick: [\n#         {\n#           brick: \"eo-tag\",\n#           properties: {\n#             color: '<% DATA.cellData > 18 ? \"green\" : \"red\" %>\\n',\n#             textContent: \"<% DATA.cellData %>\",\n#           },\n#         },\n#       ],\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.select\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Expandable\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.expand:\n      - action: console.log\n    expanded.rows.change:\n      - action: console.log\n  properties:\n    expandable:\n      rowExpandable: <% DATA.rowData.key % 2 === 0 %>\n      expandedRowBrick:\n        useBrick:\n          brick: eo-next-table\n          properties:\n            scrollConfig: false\n            pagination: false\n            bordered: true\n            rowKey: title\n            columns:\n              - dataIndex: title\n                key: title\n                title: 标题\n              - dataIndex: description\n                key: description\n                title: 描述\n              - dataIndex: operator\n                key: operator\n                title: 操作\n                useBrick:\n                  brick: eo-link\n                  properties:\n                    textContent: 操作\n            dataSource:\n              list: <% DATA.rowData.info %>\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n          info:\n            - title: 测试1\n              description: 这是一串描述\n              id: 1\n            - title: 测试2\n              description: 这是一串描述\n              id: 2\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n          info:\n            - title: 测试3\n              description: 这是一串描述\n              id: 3\n            - title: 测试4\n              description: 这是一串描述\n              id: 4\n        - key: 3\n          name: Sam\n          age: 28\n          address: Shenzhen\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Nanjing\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Wuhan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.expandable = {\n#     rowExpandable: \"<% DATA.rowData.key % 2 === 0 %>\",\n#     expandedRowBrick: {\n#       useBrick: {\n#         brick: \"eo-next-table\",\n#         properties: {\n#           scrollConfig: false,\n#           pagination: false,\n#           bordered: true,\n#           rowKey: \"title\",\n#           columns: [\n#             {\n#               dataIndex: \"title\",\n#               key: \"title\",\n#               title: \"标题\",\n#             },\n#             {\n#               dataIndex: \"description\",\n#               key: \"description\",\n#               title: \"描述\",\n#             },\n#             {\n#               dataIndex: \"operator\",\n#               key: \"operator\",\n#               title: \"操作\",\n#               useBrick: {\n#                 brick: \"eo-link\",\n#                 properties: {\n#                   textContent: \"操作\",\n#                 },\n#               },\n#             },\n#           ],\n#           dataSource: {\n#             list: \"<% DATA.rowData.info %>\",\n#           },\n#         },\n#       },\n#     },\n#   };\n#   brick_1.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         info: [\n#           {\n#             title: \"测试1\",\n#             description: \"这是一串描述\",\n#             id: 1,\n#           },\n#           {\n#             title: \"测试2\",\n#             description: \"这是一串描述\",\n#             id: 2,\n#           },\n#         ],\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#         info: [\n#           {\n#             title: \"测试3\",\n#             description: \"这是一串描述\",\n#             id: 3,\n#           },\n#           {\n#             title: \"测试4\",\n#             description: \"这是一串描述\",\n#             id: 4,\n#           },\n#         ],\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Shenzhen\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Nanjing\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Wuhan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.expand\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"expanded.rows.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Bordered\n\n```yaml preview\n- brick: eo-next-table\n  properties:\n    bordered: true\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 3\n          name: Sam\n          age: 28\n          address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table bordered id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Shenzhen\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Size\n\n```yaml preview\nbrick: eo-content-layout\nchildren:\n  - brick: :forEach\n    dataSource:\n      - large\n      - middle\n      - small\n    children:\n      - brick: strong\n        properties:\n          textContent: \"<% `Size: ${ITEM}` %>\"\n      - brick: eo-next-table\n        properties:\n          size: <% ITEM %>\n          pagination: false\n          columns:\n            - dataIndex: name\n              key: name\n              title: Name\n            - dataIndex: age\n              key: age\n              title: Age\n            - dataIndex: address\n              key: address\n              title: Address\n          dataSource:\n            pageSize: 5\n            page: 1\n            list:\n              - key: 0\n                name: Jack\n                age: 18\n                address: Guangzhou\n              - key: 1\n                name: Alex\n                age: 20\n                address: Shanghai\n              - key: 3\n                name: Sam\n                age: 28\n                address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-content-layout>\n#   <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n# </eo-content-layout>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Shenzhen\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Draggable\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.drag:\n      - action: console.log\n  properties:\n    rowKey: name\n    rowDraggable: true\n    pagination: false\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table row-key=\"name\" row-draggable id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.drag\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### RowSpan & ColSpan\n\n```yaml preview\n- brick: eo-next-table\n  properties:\n    pagination: false\n    bordered: true\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: mobile\n        key: mobile\n        title: phone\n        colSpan: 2\n        cellColSpanKey: mobileColSpan\n        cellRowSpanKey: mobileRowSpan\n      - dataIndex: landlines\n        key: landlines\n        colSpan: 0\n        cellColSpanKey: landlinesColSpan\n        cellRowSpanKey: landlinesRowSpan\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n          mobile: 18900010222\n          landlines: 0571-22098909\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n          mobile: 18900010333\n          mobileColSpan: 2\n          landlinesColSpan: 0\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n          mobile: 18900010444\n          landlines: 0571-22098707\n          landlinesRowSpan: 2\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n          mobile: 18900010555\n          landlines: 0571-22098707\n          landlinesRowSpan: 0\n          mobileRowSpan: 2\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n          mobile: 18900010555\n          landlines: 0571-22098606\n          mobileRowSpan: 0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table bordered id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"mobile\",\n#       key: \"mobile\",\n#       title: \"phone\",\n#       colSpan: 2,\n#       cellColSpanKey: \"mobileColSpan\",\n#       cellRowSpanKey: \"mobileRowSpan\",\n#     },\n#     {\n#       dataIndex: \"landlines\",\n#       key: \"landlines\",\n#       colSpan: 0,\n#       cellColSpanKey: \"landlinesColSpan\",\n#       cellRowSpanKey: \"landlinesRowSpan\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         mobile: 18900010222,\n#         landlines: \"0571-22098909\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#         mobile: 18900010333,\n#         mobileColSpan: 2,\n#         landlinesColSpan: 0,\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#         mobile: 18900010444,\n#         landlines: \"0571-22098707\",\n#         landlinesRowSpan: 2,\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#         mobile: 18900010555,\n#         landlines: \"0571-22098707\",\n#         landlinesRowSpan: 0,\n#         mobileRowSpan: 2,\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#         mobile: 18900010555,\n#         landlines: \"0571-22098606\",\n#         mobileRowSpan: 0,\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Tree\n\n设置 childrenColumnName 来指定树形结构的列名，展开功能的配置可以使用 expandable。目前树形结构暂不支持拖拽。\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.expand:\n      - action: console.log\n    expanded.rows.change:\n      - action: console.log\n  properties:\n    pagination: false\n    childrenColumnName: student\n    expandable:\n      defaultExpandAllRows: true\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: \"1\"\n          name: Jack\n          age: 18\n          address: Guangzhou\n          student:\n            - key: \"11\"\n              name: Alex\n              age: 20\n              address: Shanghai\n            - key: \"12\"\n              name: Lucy\n              age: 16\n              address: Yunnan\n            - key: \"13\"\n              name: Sam\n              age: 28\n              address: Guangzhou\n        - key: \"2\"\n          name: Bob\n          age: 35\n          address: Hainan\n          student:\n            - key: \"21\"\n              name: Ava\n              age: 23\n              address: Beijing\n            - key: \"22\"\n              name: Sophia\n              age: 20\n              address: Shanghai\n            - key: \"23\"\n              name: Charlotte\n              age: 33\n              address: Chongqing\n              student:\n                - key: \"231\"\n                  name: Mia\n                  age: 18\n                  address: Chengdu\n                - key: \"232\"\n                  name: Noah\n                  age: 38\n                  address: Hainan\n                - key: \"233\"\n                  name: William\n                  age: 16\n                  address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table children-column-name=\"student\" id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.expandable = {\n#     defaultExpandAllRows: true,\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: \"1\",\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         student: [\n#           {\n#             key: \"11\",\n#             name: \"Alex\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"12\",\n#             name: \"Lucy\",\n#             age: 16,\n#             address: \"Yunnan\",\n#           },\n#           {\n#             key: \"13\",\n#             name: \"Sam\",\n#             age: 28,\n#             address: \"Guangzhou\",\n#           },\n#         ],\n#       },\n#       {\n#         key: \"2\",\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#         student: [\n#           {\n#             key: \"21\",\n#             name: \"Ava\",\n#             age: 23,\n#             address: \"Beijing\",\n#           },\n#           {\n#             key: \"22\",\n#             name: \"Sophia\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"23\",\n#             name: \"Charlotte\",\n#             age: 33,\n#             address: \"Chongqing\",\n#             student: [\n#               {\n#                 key: \"231\",\n#                 name: \"Mia\",\n#                 age: 18,\n#                 address: \"Chengdu\",\n#               },\n#               {\n#                 key: \"232\",\n#                 name: \"Noah\",\n#                 age: 38,\n#                 address: \"Hainan\",\n#               },\n#               {\n#                 key: \"233\",\n#                 name: \"William\",\n#                 age: 16,\n#                 address: \"Taiwan\",\n#               },\n#             ],\n#           },\n#         ],\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.expand\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"expanded.rows.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n#### With Row Selection\n\n设置 rowSelection.checkStrictly 来控制父子数据选中状态是否关联。注意，关联的时候，节点勾选传导策略为【只勾选可触达的可勾选节点】\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.select:\n      - action: console.log\n  properties:\n    pagination: false\n    childrenColumnName: student\n    rowSelection:\n      checkStrictly: false\n      indentSize: 50\n      rowDisabled: <% DATA.rowData.age > 30 %>\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: \"1\"\n          name: Jack\n          age: 18\n          address: Guangzhou\n          student:\n            - key: \"11\"\n              name: Alex\n              age: 20\n              address: Shanghai\n            - key: \"12\"\n              name: Lucy\n              age: 16\n              address: Yunnan\n            - key: \"13\"\n              name: Sam\n              age: 34\n              address: Guangzhou\n        - key: \"2\"\n          name: Bob\n          age: 27\n          address: Hainan\n          student:\n            - key: \"21\"\n              name: Ava\n              age: 23\n              address: Beijing\n            - key: \"22\"\n              name: Sophia\n              age: 20\n              address: Shanghai\n            - key: \"23\"\n              name: Charlotte\n              age: 35\n              address: Chongqing\n              student:\n                - key: \"231\"\n                  name: Mia\n                  age: 18\n                  address: Chengdu\n                - key: \"232\"\n                  name: Noah\n                  age: 38\n                  address: Hainan\n                - key: \"233\"\n                  name: William\n                  age: 16\n                  address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table children-column-name=\"student\" id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.rowSelection = {\n#     checkStrictly: false,\n#     indentSize: 50,\n#     rowDisabled: \"<% DATA.rowData.age > 30 %>\",\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: \"1\",\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         student: [\n#           {\n#             key: \"11\",\n#             name: \"Alex\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"12\",\n#             name: \"Lucy\",\n#             age: 16,\n#             address: \"Yunnan\",\n#           },\n#           {\n#             key: \"13\",\n#             name: \"Sam\",\n#             age: 34,\n#             address: \"Guangzhou\",\n#           },\n#         ],\n#       },\n#       {\n#         key: \"2\",\n#         name: \"Bob\",\n#         age: 27,\n#         address: \"Hainan\",\n#         student: [\n#           {\n#             key: \"21\",\n#             name: \"Ava\",\n#             age: 23,\n#             address: \"Beijing\",\n#           },\n#           {\n#             key: \"22\",\n#             name: \"Sophia\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"23\",\n#             name: \"Charlotte\",\n#             age: 35,\n#             address: \"Chongqing\",\n#             student: [\n#               {\n#                 key: \"231\",\n#                 name: \"Mia\",\n#                 age: 18,\n#                 address: \"Chengdu\",\n#               },\n#               {\n#                 key: \"232\",\n#                 name: \"Noah\",\n#                 age: 38,\n#                 address: \"Hainan\",\n#               },\n#               {\n#                 key: \"233\",\n#                 name: \"William\",\n#                 age: 16,\n#                 address: \"Taiwan\",\n#               },\n#             ],\n#           },\n#         ],\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.select\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n#### With Front Search\n\n```yaml preview\n- brick: eo-search-bar\n  children:\n    - brick: eo-search\n      slot: start\n      properties:\n        placeholder: Enter keyword\n      events:\n        search:\n          target: \"#table\"\n          method: search\n          args:\n            - q: <% EVENT.detail %>\n- brick: eo-next-table\n  properties:\n    id: table\n    searchFields:\n      - name\n      - age\n      - address\n    pagination: false\n    childrenColumnName: student\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: \"1\"\n          name: Jack\n          age: 18\n          address: Guangzhou\n          student:\n            - key: \"11\"\n              name: Alex\n              age: 20\n              address: Shanghai\n            - key: \"12\"\n              name: Lucy\n              age: 16\n              address: Yunnan\n            - key: \"13\"\n              name: Sam\n              age: 34\n              address: Guangzhou\n        - key: \"2\"\n          name: Bob\n          age: 27\n          address: Hainan\n          student:\n            - key: \"21\"\n              name: Ava\n              age: 23\n              address: Beijing\n            - key: \"22\"\n              name: Sophia\n              age: 20\n              address: Shanghai\n            - key: \"23\"\n              name: Charlotte\n              age: 35\n              address: Chongqing\n              student:\n                - key: \"231\"\n                  name: Mia\n                  age: 18\n                  address: Chengdu\n                - key: \"232\"\n                  name: Noah\n                  age: 38\n                  address: Hainan\n                - key: \"233\"\n                  name: William\n                  age: 16\n                  address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-search-bar>\n#   <eo-search slot=\"start\" placeholder=\"Enter keyword\" id=\"brick-1\"></eo-search>\n# </eo-search-bar>\n# <eo-next-table children-column-name=\"student\" id=\"table\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"search\", (e) => {\n#     const brick = document.querySelector(\"#table\");\n#     brick.search({ q: \"<% EVENT.detail %>\" });\n#   });\n# \n#   const table = document.getElementById(\"table\");\n#   table.searchFields = [\"name\", \"age\", \"address\"];\n#   table.pagination = false;\n#   table.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   table.dataSource = {\n#     list: [\n#       {\n#         key: \"1\",\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         student: [\n#           {\n#             key: \"11\",\n#             name: \"Alex\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"12\",\n#             name: \"Lucy\",\n#             age: 16,\n#             address: \"Yunnan\",\n#           },\n#           {\n#             key: \"13\",\n#             name: \"Sam\",\n#             age: 34,\n#             address: \"Guangzhou\",\n#           },\n#         ],\n#       },\n#       {\n#         key: \"2\",\n#         name: \"Bob\",\n#         age: 27,\n#         address: \"Hainan\",\n#         student: [\n#           {\n#             key: \"21\",\n#             name: \"Ava\",\n#             age: 23,\n#             address: \"Beijing\",\n#           },\n#           {\n#             key: \"22\",\n#             name: \"Sophia\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"23\",\n#             name: \"Charlotte\",\n#             age: 35,\n#             address: \"Chongqing\",\n#             student: [\n#               {\n#                 key: \"231\",\n#                 name: \"Mia\",\n#                 age: 18,\n#                 address: \"Chengdu\",\n#               },\n#               {\n#                 key: \"232\",\n#                 name: \"Noah\",\n#                 age: 38,\n#                 address: \"Hainan\",\n#               },\n#               {\n#                 key: \"233\",\n#                 name: \"William\",\n#                 age: 16,\n#                 address: \"Taiwan\",\n#               },\n#             ],\n#           },\n#         ],\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Dynamic Columns\n\n```yaml preview\nbrick: eo-next-table\nproperties:\n  cell:\n    useBrick:\n      - if: <% DATA.columnKey !== '01-13' %>\n        brick: em\n        properties:\n          textContent: <% DATA.cellData %>\n      - if: <% DATA.columnKey === '01-13' %>\n        brick: del\n        properties:\n          textContent: <% DATA.cellData %>\n    header:\n      useBrick:\n        brick: em\n        properties:\n          textContent: <% DATA.title %>\n  # Dynamic columns, such as by dates\n  columns: <% CTX.dates %>\n  dataSource:\n    list:\n      - \"01-11\": \"abc\"\n        \"01-12\": \"def\"\n        \"01-13\": \"ghi\"\n        \"01-14\": \"jkl\"\n      - \"01-11\": \"123\"\n        \"01-12\": \"345\"\n        \"01-13\": \"789\"\n        \"01-14\": \"-\"\ncontext:\n  - name: dates\n    value: |\n      <%\n        new Array(4).fill(null).map(\n          (d, i) => moment('2023-01-11').add(i, 'days').format('MM-DD')\n        ).map((key) => ({\n          dataIndex: key,\n          key,\n          title: key,\n        }))\n      %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.cell = {\n#     useBrick: [\n#       {\n#         if: \"<% DATA.columnKey !== '01-13' %>\",\n#         brick: \"em\",\n#         properties: {\n#           textContent: \"<% DATA.cellData %>\",\n#         },\n#       },\n#       {\n#         if: \"<% DATA.columnKey === '01-13' %>\",\n#         brick: \"del\",\n#         properties: {\n#           textContent: \"<% DATA.cellData %>\",\n#         },\n#       },\n#     ],\n#     header: {\n#       useBrick: {\n#         brick: \"em\",\n#         properties: {\n#           textContent: \"<% DATA.title %>\",\n#         },\n#       },\n#     },\n#   };\n#   brick_1.columns = \"<% CTX.dates %>\";\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         \"01-11\": \"abc\",\n#         \"01-12\": \"def\",\n#         \"01-13\": \"ghi\",\n#         \"01-14\": \"jkl\",\n#       },\n#       {\n#         \"01-11\": \"123\",\n#         \"01-12\": \"345\",\n#         \"01-13\": \"789\",\n#         \"01-14\": \"-\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Cell status\n\n```yaml preview\n- brick: eo-next-table\n  properties:\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n        cellStatus:\n          dataIndex: age\n          mapping:\n            - value: 18\n              leftBorderColor: green\n            - value: 20\n              leftBorderColor: blue\n            - value: 28\n              leftBorderColor: red\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 3\n          name: Sam\n          age: 28\n          address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#       cellStatus: {\n#         dataIndex: \"age\",\n#         mapping: [\n#           {\n#             value: 18,\n#             leftBorderColor: \"green\",\n#           },\n#           {\n#             value: 20,\n#             leftBorderColor: \"blue\",\n#           },\n#           {\n#             value: 28,\n#             leftBorderColor: \"red\",\n#           },\n#         ],\n#       },\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Shenzhen\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n"
-  },
   "advanced.capture-snapshot": {
     "doc": "构件 `advanced.capture-snapshot`\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-button\n  properties:\n    textContent: Save As Image\n    style:\n      margin-right: 10px\n  events:\n    click:\n      - useProvider: advanced.capture-snapshot\n        args:\n          - fileType: image\n            name: image\n        callback:\n          success:\n            - action: console.log\n          error:\n            - action: console.error\n- brick: eo-button\n  properties:\n    textContent: Save As PDF\n    style:\n      margin-right: 10px\n  events:\n    click:\n      - useProvider: advanced.capture-snapshot\n        args:\n          - fileType: pdf\n            name: pdf\n        callback:\n          success:\n            - action: console.log\n          error:\n            - action: console.error\n- brick: eo-button\n  properties:\n    textContent: Capture And Upload\n  events:\n    click:\n      - useProvider: advanced.capture-snapshot\n        args:\n          - fileType: image\n            name: upload\n            bucketName: examples\n            selector: \"#uploadImage\"\n        callback:\n          success:\n            - action: console.log\n          error:\n            - action: console.error\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-button style=\"margin-right: 10px\" id=\"brick-1\">Save As Image</eo-button>\n# <eo-button style=\"margin-right: 10px\" id=\"brick-2\">Save As PDF</eo-button>\n# <eo-button id=\"brick-3\">Capture And Upload</eo-button>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const provider = document.createElement(\"advanced.capture-snapshot\");\n#     const promise = Promise.resolve(\n#       provider.resolve({ fileType: \"image\", name: \"image\" })\n#     );\n#     promise.then((r) => {\n#       console.log(r);\n#     });\n#     promise.catch((r) => {\n#       console.error(r);\n#     });\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.addEventListener(\"click\", (e) => {\n#     const provider = document.createElement(\"advanced.capture-snapshot\");\n#     const promise = Promise.resolve(\n#       provider.resolve({ fileType: \"pdf\", name: \"pdf\" })\n#     );\n#     promise.then((r) => {\n#       console.log(r);\n#     });\n#     promise.catch((r) => {\n#       console.error(r);\n#     });\n#   });\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.addEventListener(\"click\", (e) => {\n#     const provider = document.createElement(\"advanced.capture-snapshot\");\n#     const promise = Promise.resolve(\n#       provider.resolve({\n#         fileType: \"image\",\n#         name: \"upload\",\n#         bucketName: \"examples\",\n#         selector: \"#uploadImage\",\n#       })\n#     );\n#     promise.then((r) => {\n#       console.log(r);\n#     });\n#     promise.catch((r) => {\n#       console.error(r);\n#     });\n#   });\n# </script>\n# \n```\n"
   }