neko-ui 2.8.21 → 2.8.23

package/es/table/examples/pagination.md

@@ -0,0 +1,67 @@
+---
+title: 分页器
+description: 在表格下面添加分页器
+---
+
+```html
+<n-table summary-text="当前页合计"></n-table>
+<script>
+  const el = container.querySelector('n-table');
+  const total = 31;
+  function genData(page, pageSize) {
+    return Array.from(
+      { length: page < total / pageSize ? pageSize : total % pageSize },
+      (_, i) => ({
+        name: `user ${pageSize * (page - 1) + i + 1}`,
+        age: Math.round(Math.random() * 60),
+      }),
+    );
+  }
+
+  el.columns = { order: { type: 'order', width: 75 }, name: '用户名', age: '年龄' };
+  el.pagination = {
+    page: 1,
+    pageSize: 3,
+    total: total,
+    onChange: function (page, pageSize) {
+      el.data = genData(page, pageSize);
+    },
+  };
+  el.summary = ['age'];
+  el.data = genData(1, el.pagination.pageSize);
+</script>
+```
+
+```jsx
+function Demo() {
+  let el;
+  const total = 31;
+  function genData(page, pageSize) {
+    return Array.from(
+      { length: page < total / pageSize ? pageSize : total % pageSize },
+      (_, i) => ({
+        name: `user ${pageSize * (page - 1) + i + 1}`,
+        age: Math.round(Math.random() * 60),
+      }),
+    );
+  }
+
+  return (
+    <n-table
+      ref={(e) => (el = e)}
+      columns={{ order: { type: 'order', width: 75 }, name: '用户名', age: '年龄' }}
+      summary={['age']}
+      summary-text="当前页合计"
+      pagination={{
+        page: 1,
+        pageSize: 3,
+        total: total,
+        onChange: function (page, pageSize) {
+          el.data = genData(page, pageSize);
+        },
+      }}
+      data={genData(1, 3)}
+    />
+  );
+}
+```

package/es/table/examples/render.md

@@ -0,0 +1,92 @@
+---
+title: 自定义渲染单元格
+description: 使用 `render` 函数自定义渲染单元格
+---
+
+```html
+<n-table title="表格标题"></n-table>
+<script>
+  const el = container.querySelector('n-table');
+
+  el.columns = {
+    name: '用户名',
+    gender: {
+      label: '性别',
+      render: function (val) {
+        return ['女', '男'][val] || '未知';
+      },
+    },
+    alive: {
+      label: '状态',
+      render: function (val) {
+        const tag = document.createElement('n-tag');
+
+        tag.type = val ? 'success' : 'error';
+        tag.textContent = val ? '在线' : '离线';
+        return tag;
+      },
+    },
+    actions: {
+      label: '操作',
+      render: function (_, record) {
+        const btn = document.createElement('n-button');
+
+        btn.link = true;
+        btn.type = 'primary';
+        btn.textContent = '编辑';
+        btn.onclick = function () {
+          console.log(record);
+        };
+        return btn;
+      },
+    },
+  };
+  el.data = [
+    { name: 'user 1', gender: 1, alive: false },
+    { name: 'user 2', gender: 0, alive: true },
+    { name: 'user 3', gender: null, alive: false },
+  ];
+</script>
+```
+
+```jsx
+<n-table
+  title="表格标题"
+  columns={{
+    name: '用户名',
+    gender: {
+      label: '性别',
+      render: function (val) {
+        return ['女', '男'][val] || '未知';
+      },
+    },
+    alive: {
+      label: '状态',
+      render: function (val) {
+        return <n-tag type={val ? 'success' : 'error'}>{val ? '在线' : '离线'}</n-tag>;
+      },
+    },
+    actions: {
+      label: '操作',
+      render: function (_, record) {
+        return (
+          <n-button
+            type="primary"
+            link={true}
+            onClick={function () {
+              console.log(record);
+            }}
+          >
+            编辑
+          </n-button>
+        );
+      },
+    },
+  }}
+  data={[
+    { name: 'user 1', gender: 1, alive: false },
+    { name: 'user 2', gender: 0, alive: true },
+    { name: 'user 3', gender: null, alive: false },
+  ]}
+/>
+```

package/es/table/examples/size.md

@@ -0,0 +1,52 @@
+---
+title: 不同的尺寸
+description: Table 内置有大、中、小三种尺寸。通过 `size` 进行设置; 默认为 'normal'。
+order: 7
+---
+
+```html
+<n-table>
+  <n-segmented slot="title" default-value="normal"></n-segmented>
+</n-table>
+<script>
+  const el = container.querySelector('n-table');
+  const segmented = el.querySelector('[slot="title"]');
+
+  segmented.options = [
+    { label: '小', value: 'small' },
+    { label: '默认:中', value: 'normal' },
+    { label: '大', value: 'large' },
+  ];
+  segmented.onchange = function (e) {
+    el.size = e.detail;
+  };
+  el.columns = { name: '用户名', age: '年龄' };
+  el.data = [
+    { name: 'user 1', age: 18 },
+    { name: 'user 2', age: 19 },
+  ];
+</script>
+```
+
+```jsx
+<n-table
+  columns={{ name: '用户名', age: '年龄' }}
+  data={[
+    { name: 'user 1', age: 18 },
+    { name: 'user 2', age: 19 },
+  ]}
+>
+  <n-segmented
+    slot="title"
+    default-value="normal"
+    options={[
+      { label: '小', value: 'small' },
+      { label: '默认:中', value: 'normal' },
+      { label: '大', value: 'large' },
+    ]}
+    onChange={function (e) {
+      e.target.parentElement.size = e.detail;
+    }}
+  />
+</n-table>
+```

package/es/table/examples/summary.md

@@ -0,0 +1,40 @@
+---
+title: 求和
+description: 通过 `summary` 设置需要求和的单元格
+---
+
+```html
+<n-table align="center"></n-table>
+<script>
+  const el = container.querySelector('n-table');
+
+  el.columns = {
+    order: { type: 'order', width: 50 },
+    name: '用户名',
+    age: '年龄',
+  };
+  el.summary = ['age'];
+  el.data = [
+    { name: 'user 1', age: 18 },
+    { name: 'user 2', age: 19 },
+    { name: 'user 3', age: 3 },
+  ];
+</script>
+```
+
+```jsx
+<n-table
+  align="center"
+  columns={{
+    order: { type: 'order', width: 50 },
+    name: '用户名',
+    age: '年龄',
+  }}
+  summary={['age']}
+  data={[
+    { name: 'user 1', age: 18 },
+    { name: 'user 2', age: 19 },
+    { name: 'user 3', age: 3 },
+  ]}
+/>
+```

package/es/table/index.js

@@ -1,2 +1,2 @@
-var t,e,r,l;function n(){return(n=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var l in r)Object.prototype.hasOwnProperty.call(r,l)&&(t[l]=r[l])}return t}).apply(this,arguments)}import{template as a}from"solid-js/web";import{spread as i}from"solid-js/web";import{mergeProps as o}from"solid-js/web";import"solid-js/web";import{insert as s}from"solid-js/web";import{getOwner as d}from"solid-js/web";import{effect as m}from"solid-js/web";import{createComponent as c}from"solid-js/web";import{addEventListener as u}from"solid-js/web";let p=a("<span>"),g=a("<style> "),h=a("<style>"),f=a('<caption class="table-title"><slot name="title">'),v=a('<th class="table-cell">'),b=a('<tfoot class="table-foot"><tr>'),y=a("<table><thead><tr></tr></thead><tbody>"),w=a('<n-pagination class="table-pagination">',!0,!1),j=a("<th>"),$=a("<tr>"),_=a('<span class="empty-val">'),x=a("<td>");import{For as z,Show as C,batch as O,createEffect as k,createMemo as S,createSignal as T,mergeProps as A,splitProps as P,untrack as V}from"solid-js";import K from"@moneko/common/lib/isObject";import q from"@moneko/common/lib/isString";import E from"@moneko/common/lib/isUndefined";import{css as L,cx as U}from"@moneko/css";import{customElement as B}from"solid-element";import{styles as D}from"./styles";import"../pagination";import F from"../theme";let G={page:1,pageSize:20,total:0,totalText:void 0,size:void 0};function H(t){let{baseStyle:e}=F,[r,l]=P(t,["class","css","loading","summary","summaryText","columns","data","emptyVal","title","align","char","charoff","valign","pagination","size"]),[a]=P(r,["align","char","charoff","valign"]),[A,B]=T(!1),[H,I]=T(1),[J,M]=T(20),[N,Q]=T(0);function R(t){return{width:t.width,align:t.align,valign:t.valign,char:t.char,charoff:t.charoff,colspan:t.colspan,rowspan:t.rowspan}}k(()=>{O(()=>{r.pagination&&(I(r.pagination.page||1),M(r.pagination.pageSize||20),Q(r.pagination.total||0))})});let W=S(()=>Object.assign(G,r.pagination)),X=S(()=>{let t=[],e=!1;for(let l in r.columns)if(Object.prototype.hasOwnProperty.call(r.columns,l)){let a=r.columns[l],i=Object.assign({key:l,originKey:l,label:a.toString()},K(a)&&n({label:"order"===a.type&&"序号"||l},a));"order"===i.type&&(e=!0,i.render=function(t,e,r){return(()=>{let t=p();return s(t,()=>(H()-1)*J()+r+1),t})()}),t.push(i)}return V(A)!==e&&B(e),t});function Y(t){r.pagination&&(I(t.detail[0]),M(t.detail[1]),null==r.pagination.onChange||r.pagination.onChange.call(r.pagination,...t.detail))}return[(()=>{let t=g(),r=t.firstChild;return m(()=>r.data=e()),t})(),(()=>{let t=h();return t.textContent=D,t})(),c(C,{get when(){return r.css},get children(){let t=g(),e=t.firstChild;return m(()=>e.data=L(r.css)),t}}),(()=>{let t=y(),e=t.firstChild,n=e.firstChild,m=e.nextSibling;return i(t,o(l,{get class(){return U("table",r.size)},part:"table"}),!1,!0),s(t,c(C,{get when(){return r.title},get children(){let t=f(),e=t.firstChild;return e._$owner=d(),s(e,()=>r.title),t}}),e),i(e,o(a,{class:"table-head"}),!1,!0),s(n,c(z,{get each(){return X()},children:t=>{let e=R(t);return(()=>{let r=j();return i(r,o(e,{class:"table-cell"}),!1,!0),s(r,()=>t.label),r})()}})),i(m,o(a,{class:"table-body"}),!1,!0),s(m,c(z,{get each(){return r.data},children:(t,e)=>(()=>{let l=$();return s(l,c(z,{get each(){return X()},children:l=>{let n=R(l),a=S(()=>{if("order"===l.type){let t=W();return(t.page-1)*t.pageSize+e()+1}let n=t[l.key];return E(n)||null===n?(()=>{let t=_();return s(t,()=>r.emptyVal),t})():n});return(()=>{let r=x();return i(r,o(n,{class:"table-cell"}),!1,!0),s(r,c(C,{get when(){return l.render},get fallback(){return c(a,{})},get children(){return null==l.render?void 0:l.render.call(l,t[l.key],t,e())}})),r})()}})),l})()})),s(t,c(C,{get when(){var u;return null==(u=r.summary)?void 0:u.length},get children(){let t=b(),e=t.firstChild;return i(t,a,!1,!0),s(e,c(C,{get when(){return A()},get children(){let t=v();return i(t,o(()=>R(X()[0])),!1,!0),s(t,()=>r.summaryText),t}}),null),s(e,c(z,{get each(){return X().filter(t=>!t.type||!["order"].includes(t.type))},children:t=>{let e=R(t),l=S(()=>{var e,l,n,a;return(null==(e=r.data)?void 0:e.length)&&(null==(l=r.summary)?void 0:l.includes(t.originKey))?(n=r.data,a=t.key,n.reduce(function(t,e){let r=e[a];return q(r)||E(r)||null===r?t:t+e[a]},0)):null});return(()=>{let t=x();return i(t,o(e,{class:"table-cell"}),!1,!0),s(t,l),t})()}}),null),t}}),null),t})(),c(C,{get when(){return r.pagination},get children(){let t=w();return u(t,"change",Y),t._$owner=d(),m(e=>{let l=H(),n=J(),a=N(),i=W().totalText,o=W().size||r.size;return l!==e._v$&&(t.page=e._v$=l),n!==e._v$2&&(t.pageSize=e._v$2=n),a!==e._v$3&&(t.total=e._v$3=a),i!==e._v$4&&(t.totalText=e._v$4=i),o!==e._v$5&&(t.size=e._v$5=o),e},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0,_v$5:void 0}),t}})]}(r=t||(t={})).left="left",r.right="right",r.center="center",r.justify="justify",r.char="char",(l=e||(e={})).top="top",l.middle="middle",l.bottom="bottom",l.baseline="baseline",B("n-table",{class:void 0,css:void 0,loading:!1,columns:{},data:[],emptyVal:"-",title:void 0,char:void 0,charoff:void 0,align:"left",valign:"middle",summary:void 0,summaryText:"合计",pagination:void 0,size:void 0},(t,e)=>{let r=e.element,l=A({css:r.css,columns:r.columns,data:r.data,pagination:r.pagination,summary:r.summary,summaryText:r.summaryText},t,{title:!!r.querySelector("[slot='title']")||t.title});return k(()=>{r.removeAttribute("css"),r.removeAttribute("title"),r.removeAttribute("data")}),c(H,l)});export default H;
+var t,e,r,n;function l(){return(l=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t}).apply(this,arguments)}import{template as i}from"solid-js/web";import{spread as a}from"solid-js/web";import{mergeProps as o}from"solid-js/web";import"solid-js/web";import{insert as s}from"solid-js/web";import{getOwner as m}from"solid-js/web";import{effect as c}from"solid-js/web";import{createComponent as d}from"solid-js/web";import{addEventListener as u}from"solid-js/web";let p=i("<span>"),g=i("<style> "),f=i("<style>"),h=i('<caption class="table-title"><slot name="title">'),v=i('<th class="table-cell">'),b=i('<tfoot class="table-foot"><tr>'),y=i("<table><thead><tr></tr></thead><tbody>"),w=i('<n-pagination class="table-pagination">',!0,!1),j=i("<th>"),$=i("<tr>"),_=i('<span class="empty-val">'),x=i("<td>");import{batch as z,createEffect as C,createMemo as k,createSignal as O,For as S,mergeProps as T,Show as A,splitProps as P,untrack as V}from"solid-js";import K from"@moneko/common/lib/isFunction";import q from"@moneko/common/lib/isObject";import E from"@moneko/common/lib/isString";import F from"@moneko/common/lib/isUndefined";import{css as L,cx as U}from"@moneko/css";import{customElement as B}from"solid-element";import D from"../theme";import{styles as G}from"./styles";import"../pagination";let H={page:1,pageSize:20,total:0,totalText:void 0,size:void 0};function I(t){let{baseStyle:e}=D,[r,n]=P(t,["class","css","loading","summary","summaryText","columns","data","emptyVal","title","align","char","charoff","valign","pagination","size"]),[i]=P(r,["align","char","charoff","valign"]),[T,B]=O(!1),[I,J]=O(1),[M,N]=O(20),[Q,R]=O(0);function W(t){return{width:t.width,align:t.align,valign:t.valign,char:t.char,charoff:t.charoff,colspan:t.colspan,rowspan:t.rowspan}}C(()=>{z(()=>{r.pagination&&(J(r.pagination.page||1),N(r.pagination.pageSize||20),R(r.pagination.total||0))})});let X=k(()=>Object.assign(H,r.pagination)),Y=k(()=>{let t=[],e=!1;for(let n in r.columns)if(Object.prototype.hasOwnProperty.call(r.columns,n)){let i=r.columns[n],a=Object.assign({key:n,originKey:n,label:i.toString()},q(i)&&l({label:"order"===i.type&&"序号"||n},i));"order"===a.type&&(e=!0,a.render=function(t,e,r){return(()=>{let t=p();return s(t,()=>(I()-1)*M()+r+1),t})()}),t.push(a)}return V(T)!==e&&B(e),t});function Z(t){r.pagination&&(J(t.detail[0]),N(t.detail[1]),null==r.pagination.onChange||r.pagination.onChange.call(r.pagination,...t.detail))}return[(()=>{let t=g(),r=t.firstChild;return c(()=>r.data=e()),t})(),(()=>{let t=f();return t.textContent=G,t})(),d(A,{get when(){return r.css},get children(){let t=g(),e=t.firstChild;return c(()=>e.data=L(r.css)),t}}),(()=>{let t=y(),e=t.firstChild,l=e.firstChild,c=e.nextSibling;return a(t,o(n,{get class(){return U("table",r.size)},part:"table"}),!1,!0),s(t,d(A,{get when(){return r.title},get children(){let t=h(),e=t.firstChild;return e._$owner=m(),s(e,()=>r.title),t}}),e),a(e,o(i,{class:"table-head"}),!1,!0),s(l,d(S,{get each(){return Y()},children:t=>{let e=W(t);return(()=>{let r=j();return a(r,o(e,{class:"table-cell"}),!1,!0),s(r,()=>t.label),r})()}})),a(c,o(i,{class:"table-body"}),!1,!0),s(c,d(S,{get each(){return r.data},children:(t,e)=>(()=>{let n=$();return s(n,d(S,{get each(){return Y()},children:n=>{let l=W(n),i=k(()=>{if("order"===n.type){let t=X();return(t.page-1)*t.pageSize+e()+1}let l=t[n.key];return F(l)||null===l?(()=>{let t=_();return s(t,()=>r.emptyVal),t})():l});return(()=>{let r=x();return a(r,o(l,{class:"table-cell"}),!1,!0),s(r,d(A,{get when(){return K(n.render)},get fallback(){return d(i,{})},get children(){return n.render(t[n.key],t,e())}})),r})()}})),n})()})),s(t,d(A,{get when(){var u;return null==(u=r.summary)?void 0:u.length},get children(){let t=b(),e=t.firstChild;return a(t,i,!1,!0),s(e,d(A,{get when(){return T()},get children(){let t=v();return a(t,o(()=>W(Y()[0])),!1,!0),s(t,()=>r.summaryText),t}}),null),s(e,d(S,{get each(){return Y().filter(t=>!t.type||!["order"].includes(t.type))},children:t=>{let e=W(t),n=k(()=>{var e,n,l,i;return(null==(e=r.data)?void 0:e.length)&&(null==(n=r.summary)?void 0:n.includes(t.originKey))?(l=r.data,i=t.key,l.reduce(function(t,e){let r=e[i];return E(r)||F(r)||null===r?t:t+e[i]},0)):null});return(()=>{let t=x();return a(t,o(e,{class:"table-cell"}),!1,!0),s(t,n),t})()}}),null),t}}),null),t})(),d(A,{get when(){return r.pagination},get children(){let t=w();return u(t,"change",Z),t._$owner=m(),c(e=>{let n=I(),l=M(),i=Q(),a=X().totalText,o=X().size||r.size;return n!==e._v$&&(t.page=e._v$=n),l!==e._v$2&&(t.pageSize=e._v$2=l),i!==e._v$3&&(t.total=e._v$3=i),a!==e._v$4&&(t.totalText=e._v$4=a),o!==e._v$5&&(t.size=e._v$5=o),e},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0,_v$5:void 0}),t}})]}(r=t||(t={})).left="left",r.right="right",r.center="center",r.justify="justify",r.char="char",(n=e||(e={})).top="top",n.middle="middle",n.bottom="bottom",n.baseline="baseline",B("n-table",{class:void 0,css:void 0,loading:!1,columns:{},data:[],emptyVal:"-",title:void 0,char:void 0,charoff:void 0,align:"left",valign:"middle",summary:void 0,summaryText:"合计",pagination:void 0,size:void 0},(t,e)=>{let r=e.element,n=T({css:r.css,columns:r.columns,data:r.data,pagination:r.pagination,summary:r.summary,summaryText:r.summaryText},t,{title:!!r.querySelector("[slot='title']")||t.title});return C(()=>{r.removeAttribute("css"),r.removeAttribute("title"),r.removeAttribute("data")}),d(I,n)});export default I;
 //# sourceMappingURL=index.js.map

package/es/table/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/table/index.tsx"],"sourcesContent":["import {\n  For,\n  Show,\n  batch,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { isObject, isString, isUndefined } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { styles } from './styles';\nimport '../pagination';\nimport theme from '../theme';\nimport type { BasicConfig, CustomElement, PaginationProps } from '..';\n\ntype Col = Column<Record<string, Any>>;\nconst defaultPagination = { page: 1, pageSize: 20, total: 0, totalText: void 0, size: void 0 };\n\nfunction Table(_: TableProps) {\n  const { baseStyle } = theme;\n  const [local, other] = splitProps(_, [\n    'class',\n    'css',\n    'loading',\n    'summary',\n    'summaryText',\n    'columns',\n    'data',\n    'emptyVal',\n    'title',\n    'align',\n    'char',\n    'charoff',\n    'valign',\n    'pagination',\n    'size',\n  ]);\n  const [layout] = splitProps(local, ['align', 'char', 'charoff', 'valign']);\n  const [hasOrder, setHasOrder] = createSignal(false);\n  const [page, setPage] = createSignal(1);\n  const [pageSize, setPageSize] = createSignal(20);\n  const [total, setTotal] = createSignal(0);\n\n  createEffect(() => {\n    batch(() => {\n      if (local.pagination) {\n        setPage(local.pagination.page || 1);\n        setPageSize(local.pagination.pageSize || 20);\n        setTotal(local.pagination.total || 0);\n      }\n    });\n  });\n\n  function getLayout(col: Col) {\n    return {\n      width: col.width,\n      align: col.align,\n      valign: col.valign,\n      char: col.char,\n      charoff: col.charoff,\n      colspan: col.colspan,\n      rowspan: col.rowspan,\n    };\n  }\n  function sum(arr: Required<TableProps>['data'], key: string) {\n    return arr.reduce(function (prev, curr) {\n      const next = curr[key];\n\n      if (isString(next) || isUndefined(next) || next === null) {\n        return prev;\n      }\n      return prev + curr[key];\n    }, 0);\n  }\n  const pagination = createMemo(() => Object.assign(defaultPagination, local.pagination));\n  const columns = createMemo(() => {\n    const cols: Required<Col>[] = [];\n    let _hasOrder = false;\n\n    for (const key in local.columns) {\n      if (Object.prototype.hasOwnProperty.call(local.columns, key)) {\n        const col = local.columns[key];\n        const _col: Col = Object.assign(\n          { key, originKey: key, label: col.toString() },\n          isObject(col) && {\n            label: (col.type === 'order' && '序号') || key,\n            ...col,\n          },\n        );\n\n        if (_col.type === 'order') {\n          _hasOrder = true;\n          _col.render = function (_val: unknown, _row: unknown, i: number) {\n            return <span>{(page() - 1) * pageSize() + i + 1}</span>;\n          };\n        }\n        cols.push(_col as Required<Col>);\n      }\n    }\n    if (untrack(hasOrder) !== _hasOrder) {\n      setHasOrder(_hasOrder);\n    }\n    return cols;\n  });\n\n  function handlePageChange(e: CustomEvent<[page: number, pageSize: number]>) {\n    if (local.pagination) {\n      setPage(e.detail[0]);\n      setPageSize(e.detail[1]);\n      local.pagination.onChange?.(...e.detail);\n    }\n  }\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={styles} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <table {...other} class={cx('table', local.size)} part=\"table\">\n        <Show when={local.title}>\n          <caption class=\"table-title\">\n            <slot name=\"title\">{local.title}</slot>\n          </caption>\n        </Show>\n        <thead {...layout} class=\"table-head\">\n          <tr>\n            <For each={columns()}>\n              {(col) => {\n                const _layout = getLayout(col);\n\n                return (\n                  <th {..._layout} class=\"table-cell\">\n                    {col.label}\n                  </th>\n                );\n              }}\n            </For>\n          </tr>\n        </thead>\n        <tbody {...layout} class=\"table-body\">\n          <For each={local.data}>\n            {(row, i) => {\n              return (\n                <tr>\n                  <For each={columns()}>\n                    {(col) => {\n                      const _layout = getLayout(col);\n                      const Row = createMemo(() => {\n                        if (col.type === 'order') {\n                          const _pagination = pagination();\n\n                          return (_pagination.page - 1) * _pagination.pageSize + i() + 1;\n                        }\n                        const val = row[col.key];\n                        const isEmpty = isUndefined(val) || val === null;\n\n                        if (isEmpty) {\n                          return <span class=\"empty-val\">{local.emptyVal}</span>;\n                        }\n                        return val;\n                      });\n\n                      return (\n                        <td {..._layout} class=\"table-cell\">\n                          <Show when={col.render} fallback={<Row />}>\n                            {col.render?.(row[col.key], row, i())}\n                          </Show>\n                        </td>\n                      );\n                    }}\n                  </For>\n                </tr>\n              );\n            }}\n          </For>\n        </tbody>\n        <Show when={local.summary?.length}>\n          <tfoot class=\"table-foot\" {...layout}>\n            <tr>\n              <Show when={hasOrder()}>\n                <th class=\"table-cell\" {...getLayout(columns()[0])}>\n                  {local.summaryText}\n                </th>\n              </Show>\n              <For each={columns().filter((c) => !c.type || !['order'].includes(c.type))}>\n                {(col) => {\n                  const _layout = getLayout(col);\n                  const val = createMemo(() => {\n                    if (local.data?.length && local.summary?.includes(col.originKey)) {\n                      return sum(local.data, col.key);\n                    }\n                    return null;\n                  });\n\n                  return (\n                    <td {..._layout} class=\"table-cell\">\n                      {val()}\n                    </td>\n                  );\n                }}\n              </For>\n            </tr>\n          </tfoot>\n        </Show>\n      </table>\n      <Show when={local.pagination}>\n        <n-pagination\n          class=\"table-pagination\"\n          page={page()}\n          page-size={pageSize()}\n          total={total()}\n          total-text={pagination().totalText}\n          size={pagination().size || local.size}\n          onChange={handlePageChange}\n        />\n      </Show>\n    </>\n  );\n}\n\n/** API\n * @since 2.1.0\n */\nexport interface TableProps<T extends Record<string, Any> = Record<string, Any>> extends Cell {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义类名 */\n  css?: string;\n  /** 加载中 */\n  loading?: boolean;\n  /** 单元格值为 null 或 undefined 时的回填\n   * @default '-'\n   */\n  emptyVal?: string;\n  /** 栏配置 */\n  columns?: Record<string, Column<T> | string>;\n  /** 数据源 */\n  data?: T[];\n  /** 表格标题, 支持直接赋值给 'title' 属性, 或者通过[slot=\"title\"]插槽 */\n  title?: JSX.Element | 'slot';\n  /** 汇总行 */\n  summary?: (keyof T)[];\n  /** 汇总行描述\n   * @default '合计'\n   */\n  summaryText?: JSX.Element;\n  /** 分页器\n   * @default false\n   */\n  pagination?: PaginationProps | false;\n  /** 尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  children?: JSX.Element;\n}\n/** 栏 */\ninterface Column<T extends Record<string, Any>> extends Cell {\n  /** 自定义取值的 key */\n  key?: keyof T;\n  /** 原始 key */\n  originKey?: keyof T;\n  /** 单元格表头标题 */\n  label?: JSX.Element;\n  /** 自定义渲染单元格 */\n  render?(item: T[keyof T], row: T, index: number): JSX.Element;\n  /** 单元格横跨的列数 */\n  colspan?: number;\n  /** 单元格横跨的行数 */\n  rowspan?: number;\n  /** 设置为 'order' 时则当作序号行 */\n  type?: 'order';\n  /** 单元格宽 */\n  width?: number;\n}\n\n/** 单元格布局排列 */\ninterface Cell {\n  /** 单元格内容的水平对齐方式\n   * @default 'left'\n   */\n  align?: keyof typeof Align;\n  /** 规定根据哪个字符来进行文本对齐 */\n  char?: string;\n  /** 规定第一个对齐字符的偏移量 */\n  charoff?: number;\n  /** 单元格内容的垂直对齐方式\n   * @default 'middle'\n   */\n  valign?: keyof typeof Valign;\n}\n/** 水平对齐方式 */\nenum Align {\n  /** 左对齐 */\n  left = 'left',\n  /** 右对齐 */\n  right = 'right',\n  /** 居中对齐 */\n  center = 'center',\n  /** 对行进行伸展，这样每行都可以有相等的长度 */\n  justify = 'justify',\n  /** 将内容对准指定字符 */\n  char = 'char',\n}\n/** 垂直对齐方式 */\nenum Valign {\n  /** 上对齐 */\n  top = 'top',\n  /** 居中对齐 */\n  middle = 'middle',\n  /** 下对齐 */\n  bottom = 'bottom',\n  /** 与基线对齐 */\n  baseline = 'baseline',\n}\nexport type TableElement = CustomElement<TableProps>;\n\ncustomElement<TableProps>(\n  'n-table',\n  {\n    class: void 0,\n    css: void 0,\n    loading: false,\n    columns: {},\n    data: [],\n    emptyVal: '-',\n    title: void 0,\n    char: void 0,\n    charoff: void 0,\n    align: Align.left,\n    valign: Valign.middle,\n    summary: void 0,\n    summaryText: '合计',\n    pagination: void 0,\n    size: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        columns: el.columns,\n        data: el.data,\n        pagination: el.pagination,\n        summary: el.summary,\n        summaryText: el.summaryText,\n      },\n      _,\n      {\n        title: !!el.querySelector(\"[slot='title']\") || _.title,\n      },\n    );\n\n    createEffect(() => {\n      el.removeAttribute('css');\n      el.removeAttribute('title');\n      el.removeAttribute('data');\n    });\n    return <Table {...props} />;\n  },\n);\nexport default Table;\n"],"names":["Align","Valign","For","Show","batch","createEffect","createMemo","createSignal","mergeProps","splitProps","untrack","isObject","isString","isUndefined","css","cx","customElement","styles","theme","defaultPagination","page","pageSize","total","totalText","size","Table","_","baseStyle","local","other","layout","hasOrder","setHasOrder","setPage","setPageSize","setTotal","getLayout","col","width","align","valign","char","charoff","colspan","rowspan","pagination","Object","assign","columns","cols","_hasOrder","key","prototype","hasOwnProperty","call","_col","originKey","label","toString","type","render","_val","_row","i","push","handlePageChange","e","detail","onChange","title","_layout","data","row","Row","_pagination","val","emptyVal","summary","length","summaryText","filter","c","includes","arr","reduce","prev","curr","next","class","loading","opt","el","element","props","querySelector","removeAttribute"],"mappings":"QA0SKA,EAaAC,q4BAvTL,QACEC,OAAAA,CAAG,CACHC,QAAAA,CAAI,CACJC,SAAAA,CAAK,CACLC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,cAAAA,CAAU,CACVC,WAAAA,CAAO,KACF,UAAW,AAClB,QAASC,MAAuC,6BAAiB,AAAjE,QAAmBC,MAA6B,6BAAiB,AAAjE,QAA6BC,MAAmB,gCAAiB,AACjE,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,UAAAA,CAAM,KAAQ,UAAW,AAClC,OAAO,eAAgB,AACvB,QAAOC,MAAW,UAAW,CAI7B,IAAMC,EAAoB,CAAEC,KAAM,EAAGC,SAAU,GAAIC,MAAO,EAAGC,UAAW,KAAK,EAAGC,KAAM,KAAK,CAAE,EAE7F,SAASC,EAAMC,CAAa,EAC1B,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGT,EAChB,CAACU,EAAOC,EAAM,CAAGpB,EAAWiB,EAAG,CACnC,QACA,MACA,UACA,UACA,cACA,UACA,OACA,WACA,QACA,QACA,OACA,UACA,SACA,aACA,OACD,EACK,CAACI,EAAO,CAAGrB,EAAWmB,EAAO,CAAC,QAAS,OAAQ,UAAW,SAAS,EACnE,CAACG,EAAUC,EAAY,CAAGzB,EAAa,CAAA,GACvC,CAACa,EAAMa,EAAQ,CAAG1B,EAAa,GAC/B,CAACc,EAAUa,EAAY,CAAG3B,EAAa,IACvC,CAACe,EAAOa,EAAS,CAAG5B,EAAa,GAYvC,SAAS6B,EAAUC,CAAQ,EACzB,MAAO,CACLC,MAAOD,EAAIC,KAAK,CAChBC,MAAOF,EAAIE,KAAK,CAChBC,OAAQH,EAAIG,MAAM,CAClBC,KAAMJ,EAAII,IAAI,CACdC,QAASL,EAAIK,OAAO,CACpBC,QAASN,EAAIM,OAAO,CACpBC,QAASP,EAAIO,OAAO,AACtB,CACF,CApBAvC,EAAa,KACXD,EAAM,KACAwB,EAAMiB,UAAU,GAClBZ,EAAQL,EAAMiB,UAAU,CAACzB,IAAI,EAAI,GACjCc,EAAYN,EAAMiB,UAAU,CAACxB,QAAQ,EAAI,IACzCc,EAASP,EAAMiB,UAAU,CAACvB,KAAK,EAAI,GAEvC,EACF,GAuBA,IAAMuB,EAAavC,EAAW,IAAMwC,OAAOC,MAAM,CAAC5B,EAAmBS,EAAMiB,UAAU,GAC/EG,EAAU1C,EAAW,KACzB,IAAM2C,EAAwB,EAAE,CAC5BC,EAAY,CAAA,EAEhB,IAAK,IAAMC,KAAOvB,EAAMoB,OAAO,CAC7B,GAAIF,OAAOM,SAAS,CAACC,cAAc,CAACC,IAAI,CAAC1B,EAAMoB,OAAO,CAAEG,GAAM,CAC5D,IAAMd,EAAMT,EAAMoB,OAAO,CAACG,EAAI,CACxBI,EAAYT,OAAOC,MAAM,CAC7B,CAAEI,IAAAA,EAAKK,UAAWL,EAAKM,MAAOpB,EAAIqB,QAAQ,EAAG,EAC7C/C,EAAS0B,IAAQ,GACfoB,MAAO,AAAc,UAAbpB,EAAIsB,IAAI,EAAgB,MAASR,GACtCd,GAIW,CAAA,UAAdkB,EAAKI,IAAI,GACXT,EAAY,CAAA,EACZK,EAAKK,MAAM,CAAG,SAAUC,CAAa,CAAEC,CAAa,CAAEC,CAAS,EAC7D,qCAAc,AAAC3C,CAAAA,IAAS,CAAA,EAAKC,IAAa0C,EAAI,QAChD,GAEFd,EAAKe,IAAI,CAACT,EACZ,CAKF,OAHI7C,EAAQqB,KAAcmB,GACxBlB,EAAYkB,GAEPD,CACT,GAEA,SAASgB,EAAiBC,CAAgD,EACpEtC,EAAMiB,UAAU,GAClBZ,EAAQiC,EAAEC,MAAM,CAAC,EAAE,EACnBjC,EAAYgC,EAAEC,MAAM,CAAC,EAAE,QACvBvC,EAAMiB,UAAU,CAACuB,QAAQ,EAAzBxC,EAAMiB,UAAU,CAACuB,QAAQ,MAAzBxC,EAAMiB,UAAU,IAAeqB,EAAEC,MAAM,EAE3C,CAEA,0DAEwBxC,gDACAV,UACnBd,qBAAWyB,EAAMd,GAAG,8DACCA,EAAIc,EAAMd,GAAG,mFAExBe,sBAAcd,EAAG,QAASa,EAAMJ,IAAI,QAAQ,uBACpDrB,qBAAWyB,EAAMyC,KAAK,uEAECzC,EAAMyC,KAAK,gBAGxBvC,SAAc,4BAEpB5B,qBAAU8C,cACR,AAACX,IACA,IAAMiC,EAAUlC,EAAUC,GAE1B,mCACUiC,SAAe,8BACpBjC,EAAIoB,KAAK,OAGhB,WAIK3B,SAAc,4BACtB5B,qBAAU0B,EAAM2C,IAAI,WAClB,CAACC,EAAKT,iCAGA7D,qBAAU8C,cACR,AAACX,IACA,IAAMiC,EAAUlC,EAAUC,GACpBoC,EAAMnE,EAAW,KACrB,GAAI+B,AAAa,UAAbA,EAAIsB,IAAI,CAAc,CACxB,IAAMe,EAAc7B,IAEpB,MAAO,AAAC6B,CAAAA,EAAYtD,IAAI,CAAG,CAAA,EAAKsD,EAAYrD,QAAQ,CAAG0C,IAAM,CAC/D,CACA,IAAMY,EAAMH,CAAG,CAACnC,EAAIc,GAAG,CAAC,QAGxB,AAFgBtC,EAAY8D,IAAQA,AAAQ,OAARA,iCAGF/C,EAAMgD,QAAQ,QAEzCD,CACT,GAEA,mCACUL,SAAe,4BACpBnE,qBAAWkC,EAAIuB,MAAM,0BAAaa,mCAChCpC,EAAIuB,MAAM,QAAVvB,EAAIuB,MAAM,MAAVvB,EAAamC,CAAG,CAACnC,EAAIc,GAAG,CAAC,CAAEqB,EAAKT,cAIzC,oBAOX5D,kBAAWyB,gBAAAA,EAAAA,EAAMiD,OAAO,SAAbjD,EAAekD,MAAM,qDACDhD,eAEzB3B,qBAAW4B,+CACiBK,EAAUY,GAAS,CAAC,EAAE,kBAC9CpB,EAAMmD,WAAW,mBAGrB7E,qBAAU8C,IAAUgC,MAAM,CAAC,AAACC,GAAM,CAACA,EAAEtB,IAAI,EAAI,CAAC,CAAC,QAAQ,CAACuB,QAAQ,CAACD,EAAEtB,IAAI,aACrE,AAACtB,IACA,IAAMiC,EAAUlC,EAAUC,GACpBsC,EAAMrE,EAAW,SACjBsB,EAAsBA,EA9H/BuD,EAAmChC,QA8H9B,AAAIvB,QAAAA,EAAAA,EAAM2C,IAAI,SAAV3C,EAAYkD,MAAM,WAAIlD,EAAAA,EAAMiD,OAAO,SAAbjD,EAAesD,QAAQ,CAAC7C,EAAImB,SAAS,IA9HpE2B,EA+HkBvD,EAAM2C,IAAI,CA/HOpB,EA+HLd,EAAIc,GAAG,CA9HzCgC,EAAIC,MAAM,CAAC,SAAUC,CAAI,CAAEC,CAAI,EACpC,IAAMC,EAAOD,CAAI,CAACnC,EAAI,QAEtB,AAAIvC,EAAS2E,IAAS1E,EAAY0E,IAASA,AAAS,OAATA,EAClCF,EAEFA,EAAOC,CAAI,CAACnC,EAAI,AACzB,EAAG,IAyHoB,IACT,GAEA,mCACUmB,SAAe,0BACpBK,QAGP,6BAMTxE,qBAAWyB,EAAMiB,UAAU,+CAQdoB,6BALJ7C,MACKC,MACJC,MACKuB,IAAatB,SAAS,GAC5BsB,IAAarB,IAAI,EAAII,EAAMJ,IAAI,4OAM/C,EA0EKxB,EAAAA,IAAAA,wFAaAC,EAAAA,IAAAA,2EAYLe,EACE,UACA,CACEwE,MAAO,KAAK,EACZ1E,IAAK,KAAK,EACV2E,QAAS,CAAA,EACTzC,QAAS,CAAC,EACVuB,KAAM,EAAE,CACRK,SAAU,IACVP,MAAO,KAAK,EACZ5B,KAAM,KAAK,EACXC,QAAS,KAAK,EACdH,KAAK,QACLC,MAAM,UACNqC,QAAS,KAAK,EACdE,YAAa,KACblC,WAAY,KAAK,EACjBrB,KAAM,KAAK,CACb,EACA,CAACE,EAAGgE,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBC,EAAQrF,EACZ,CACEM,IAAK6E,EAAG7E,GAAG,CACXkC,QAAS2C,EAAG3C,OAAO,CACnBuB,KAAMoB,EAAGpB,IAAI,CACb1B,WAAY8C,EAAG9C,UAAU,CACzBgC,QAASc,EAAGd,OAAO,CACnBE,YAAaY,EAAGZ,WAAW,AAC7B,EACArD,EACA,CACE2C,MAAO,CAAC,CAACsB,EAAGG,aAAa,CAAC,mBAAqBpE,EAAE2C,KAAK,AACxD,GAQF,OALAhE,EAAa,KACXsF,EAAGI,eAAe,CAAC,OACnBJ,EAAGI,eAAe,CAAC,SACnBJ,EAAGI,eAAe,CAAC,OACrB,KACQtE,EAAUoE,EACpB,EAEF,gBAAepE,CAAM"}
+{"version":3,"sources":["../../components/table/index.tsx"],"sourcesContent":["import {\n  batch,\n  createEffect,\n  createMemo,\n  createSignal,\n  For,\n  mergeProps,\n  Show,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { isFunction, isObject, isString, isUndefined } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BasicConfig, CustomElement, PaginationProps } from '..';\nimport theme from '../theme';\n\nimport { styles } from './styles';\n\nimport '../pagination';\n\ntype Col = Column<Record<string, Any>>;\nconst defaultPagination = { page: 1, pageSize: 20, total: 0, totalText: void 0, size: void 0 };\n\nfunction Table(_: TableProps) {\n  const { baseStyle } = theme;\n  const [local, other] = splitProps(_, [\n    'class',\n    'css',\n    'loading',\n    'summary',\n    'summaryText',\n    'columns',\n    'data',\n    'emptyVal',\n    'title',\n    'align',\n    'char',\n    'charoff',\n    'valign',\n    'pagination',\n    'size',\n  ]);\n  const [layout] = splitProps(local, ['align', 'char', 'charoff', 'valign']);\n  const [hasOrder, setHasOrder] = createSignal(false);\n  const [page, setPage] = createSignal(1);\n  const [pageSize, setPageSize] = createSignal(20);\n  const [total, setTotal] = createSignal(0);\n\n  createEffect(() => {\n    batch(() => {\n      if (local.pagination) {\n        setPage(local.pagination.page || 1);\n        setPageSize(local.pagination.pageSize || 20);\n        setTotal(local.pagination.total || 0);\n      }\n    });\n  });\n\n  function getLayout(col: Col) {\n    return {\n      width: col.width,\n      align: col.align,\n      valign: col.valign,\n      char: col.char,\n      charoff: col.charoff,\n      colspan: col.colspan,\n      rowspan: col.rowspan,\n    };\n  }\n  function sum(arr: Required<TableProps>['data'], key: string) {\n    return arr.reduce(function (prev, curr) {\n      const next = curr[key];\n\n      if (isString(next) || isUndefined(next) || next === null) {\n        return prev;\n      }\n      return prev + curr[key];\n    }, 0);\n  }\n  const pagination = createMemo(() => Object.assign(defaultPagination, local.pagination));\n  const columns = createMemo(() => {\n    const cols: Required<Col>[] = [];\n    let _hasOrder = false;\n\n    for (const key in local.columns) {\n      if (Object.prototype.hasOwnProperty.call(local.columns, key)) {\n        const col = local.columns[key];\n        const _col: Col = Object.assign(\n          { key, originKey: key, label: col.toString() },\n          isObject(col) && {\n            label: (col.type === 'order' && '序号') || key,\n            ...col,\n          },\n        );\n\n        if (_col.type === 'order') {\n          _hasOrder = true;\n          _col.render = function (_val: unknown, _row: unknown, i: number) {\n            return <span>{(page() - 1) * pageSize() + i + 1}</span>;\n          };\n        }\n        cols.push(_col as Required<Col>);\n      }\n    }\n    if (untrack(hasOrder) !== _hasOrder) {\n      setHasOrder(_hasOrder);\n    }\n    return cols;\n  });\n\n  function handlePageChange(e: CustomEvent<[page: number, pageSize: number]>) {\n    if (local.pagination) {\n      setPage(e.detail[0]);\n      setPageSize(e.detail[1]);\n      local.pagination.onChange?.(...e.detail);\n    }\n  }\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={styles} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <table {...other} class={cx('table', local.size)} part=\"table\">\n        <Show when={local.title}>\n          <caption class=\"table-title\">\n            <slot name=\"title\">{local.title}</slot>\n          </caption>\n        </Show>\n        <thead {...layout} class=\"table-head\">\n          <tr>\n            <For each={columns()}>\n              {(col) => {\n                const _layout = getLayout(col);\n\n                return (\n                  <th {..._layout} class=\"table-cell\">\n                    {col.label}\n                  </th>\n                );\n              }}\n            </For>\n          </tr>\n        </thead>\n        <tbody {...layout} class=\"table-body\">\n          <For each={local.data}>\n            {(row, i) => {\n              return (\n                <tr>\n                  <For each={columns()}>\n                    {(col) => {\n                      const _layout = getLayout(col);\n                      const Row = createMemo(() => {\n                        if (col.type === 'order') {\n                          const _pagination = pagination();\n\n                          return (_pagination.page - 1) * _pagination.pageSize + i() + 1;\n                        }\n                        const val = row[col.key];\n                        const isEmpty = isUndefined(val) || val === null;\n\n                        if (isEmpty) {\n                          return <span class=\"empty-val\">{local.emptyVal}</span>;\n                        }\n                        return val;\n                      });\n\n                      return (\n                        <td {..._layout} class=\"table-cell\">\n                          <Show when={isFunction(col.render)} fallback={<Row />}>\n                            {col.render(row[col.key], row, i())}\n                          </Show>\n                        </td>\n                      );\n                    }}\n                  </For>\n                </tr>\n              );\n            }}\n          </For>\n        </tbody>\n        <Show when={local.summary?.length}>\n          <tfoot class=\"table-foot\" {...layout}>\n            <tr>\n              <Show when={hasOrder()}>\n                <th class=\"table-cell\" {...getLayout(columns()[0])}>\n                  {local.summaryText}\n                </th>\n              </Show>\n              <For each={columns().filter((c) => !c.type || !['order'].includes(c.type))}>\n                {(col) => {\n                  const _layout = getLayout(col);\n                  const val = createMemo(() => {\n                    if (local.data?.length && local.summary?.includes(col.originKey)) {\n                      return sum(local.data, col.key);\n                    }\n                    return null;\n                  });\n\n                  return (\n                    <td {..._layout} class=\"table-cell\">\n                      {val()}\n                    </td>\n                  );\n                }}\n              </For>\n            </tr>\n          </tfoot>\n        </Show>\n      </table>\n      <Show when={local.pagination}>\n        <n-pagination\n          class=\"table-pagination\"\n          page={page()}\n          page-size={pageSize()}\n          total={total()}\n          total-text={pagination().totalText}\n          size={pagination().size || local.size}\n          onChange={handlePageChange}\n        />\n      </Show>\n    </>\n  );\n}\n\n/** API\n * @since 2.1.0\n */\nexport interface TableProps<T extends Record<string, Any> = Record<string, Any>> extends Cell {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义类名 */\n  css?: string;\n  /** 加载中 */\n  loading?: boolean;\n  /** 单元格值为 null 或 undefined 时的回填\n   * @default '-'\n   */\n  emptyVal?: string;\n  /** 栏配置 */\n  columns?: Record<string, Column<T> | string>;\n  /** 数据源 */\n  data?: T[];\n  /** 表格标题, 支持直接赋值给 'title' 属性, 或者通过[slot=\"title\"]插槽 */\n  title?: JSX.Element | 'slot';\n  /** 汇总行 */\n  summary?: (keyof T)[];\n  /** 汇总行描述\n   * @default '合计'\n   */\n  summaryText?: JSX.Element;\n  /** 分页器\n   * @default false\n   */\n  pagination?: PaginationProps | false;\n  /** 尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  children?: JSX.Element;\n}\n/** 栏 */\ninterface Column<T extends Record<string, Any>> extends Cell {\n  /** 自定义取值的 key */\n  key?: keyof T;\n  /** 原始 key */\n  originKey?: keyof T;\n  /** 单元格表头标题 */\n  label?: JSX.Element;\n  /** 自定义渲染单元格 */\n  render?(item: T[keyof T], row: T, index: number): JSX.Element;\n  /** 单元格横跨的列数 */\n  colspan?: number;\n  /** 单元格横跨的行数 */\n  rowspan?: number;\n  /** 设置为 'order' 时则当作序号行 */\n  type?: 'order';\n  /** 单元格宽 */\n  width?: number;\n}\n\n/** 单元格布局排列 */\ninterface Cell {\n  /** 单元格内容的水平对齐方式\n   * @default 'left'\n   */\n  align?: keyof typeof Align;\n  /** 规定根据哪个字符来进行文本对齐 */\n  char?: string;\n  /** 规定第一个对齐字符的偏移量 */\n  charoff?: number;\n  /** 单元格内容的垂直对齐方式\n   * @default 'middle'\n   */\n  valign?: keyof typeof Valign;\n}\n/** 水平对齐方式 */\nenum Align {\n  /** 左对齐 */\n  left = 'left',\n  /** 右对齐 */\n  right = 'right',\n  /** 居中对齐 */\n  center = 'center',\n  /** 对行进行伸展，这样每行都可以有相等的长度 */\n  justify = 'justify',\n  /** 将内容对准指定字符 */\n  char = 'char',\n}\n/** 垂直对齐方式 */\nenum Valign {\n  /** 上对齐 */\n  top = 'top',\n  /** 居中对齐 */\n  middle = 'middle',\n  /** 下对齐 */\n  bottom = 'bottom',\n  /** 与基线对齐 */\n  baseline = 'baseline',\n}\nexport type TableElement = CustomElement<TableProps>;\n\ncustomElement<TableProps>(\n  'n-table',\n  {\n    class: void 0,\n    css: void 0,\n    loading: false,\n    columns: {},\n    data: [],\n    emptyVal: '-',\n    title: void 0,\n    char: void 0,\n    charoff: void 0,\n    align: Align.left,\n    valign: Valign.middle,\n    summary: void 0,\n    summaryText: '合计',\n    pagination: void 0,\n    size: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        columns: el.columns,\n        data: el.data,\n        pagination: el.pagination,\n        summary: el.summary,\n        summaryText: el.summaryText,\n      },\n      _,\n      {\n        title: !!el.querySelector(\"[slot='title']\") || _.title,\n      },\n    );\n\n    createEffect(() => {\n      el.removeAttribute('css');\n      el.removeAttribute('title');\n      el.removeAttribute('data');\n    });\n    return <Table {...props} />;\n  },\n);\nexport default Table;\n"],"names":["Align","Valign","batch","createEffect","createMemo","createSignal","For","mergeProps","Show","splitProps","untrack","isFunction","isObject","isString","isUndefined","css","cx","customElement","theme","styles","defaultPagination","page","pageSize","total","totalText","size","Table","_","baseStyle","local","other","layout","hasOrder","setHasOrder","setPage","setPageSize","setTotal","getLayout","col","width","align","valign","char","charoff","colspan","rowspan","pagination","Object","assign","columns","cols","_hasOrder","key","prototype","hasOwnProperty","call","_col","originKey","label","toString","type","render","_val","_row","i","push","handlePageChange","e","detail","onChange","title","_layout","data","row","Row","_pagination","val","emptyVal","summary","length","summaryText","filter","c","includes","arr","reduce","prev","curr","next","class","loading","opt","el","element","props","querySelector","removeAttribute"],"mappings":"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"}

package/es/tabs/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 通用
+title: 标签页
+subtitle: n-tabs
+icon: ☱
+---
+
+# Tab 标签页
+
+> 选项卡切换组件，用于提供平级的区域将大块内容进行收纳和展现，保持界面整洁。

package/es/tabs/examples/add-remove.md

@@ -0,0 +1,115 @@
+---
+title: 新增和关闭标签页
+description: 添加 `add` 属性并设置为 `true` 显示新增按钮, 将选项的 `closable` 属性为 `true` 以支持关闭该选项
+order: 7
+---
+
+```html
+<div style="width:500px;">
+  <n-tabs value="2" type="card" add="true"></n-tabs>
+</div>
+<script>
+  const el = container.querySelector('n-tabs');
+
+  let count = 2;
+
+  el.items = new Array(3).fill(0).map((_, i) => {
+    return {
+      value: i,
+      label: `Tab ${i}`,
+      content: `Content of Tab Pane ${i}`,
+      closable: true,
+    };
+  });
+  el.addEventListener('change', function (e) {
+    el.value = e.detail[0];
+  });
+  el.addEventListener('edit', function (e) {
+    const [type, item, ev] = e.detail;
+
+    if (type === 'add') {
+      count++;
+      const val = count + new Date().getTime();
+      el.items = el.items.concat({
+        label: `Tab ${count}`,
+        value: val,
+        content: `Content of Tab Pane ${val}`,
+        closable: count % 5 !== 0,
+      });
+      el.value = val;
+    } else if (type === 'remove') {
+      let lastIndex = -1;
+      el.items = el.items.filter((o, i) => {
+        const flag = item.value !== o.value;
+
+        if (!flag) {
+          lastIndex = i ? i - 1 : 0;
+        }
+        return flag;
+      });
+      if (lastIndex >= 0 && el.items[lastIndex]) {
+        el.value = el.items[lastIndex].value;
+      }
+    }
+  });
+</script>
+```
+
+```jsx
+const Demo = () => {
+  let el;
+  let count = 2;
+  const items = new Array(3).fill(0).map((_, i) => {
+    return {
+      value: i,
+      label: `Tab ${i}`,
+      content: `Content of Tab Pane ${i}`,
+      closable: true,
+    };
+  });
+  const handleEdit = (e) => {
+    const [type, item, ev] = e.detail;
+
+    if (type === 'add') {
+      count++;
+      const val = count + new Date().getTime();
+      el.items = el.items.concat({
+        label: `Tab ${count}`,
+        value: val,
+        content: `Content of Tab Pane ${val}`,
+        closable: count % 5 !== 0,
+      });
+      el.value = val;
+    } else if (type === 'remove') {
+      let lastIndex = -1;
+      el.items = el.items.filter((o, i) => {
+        const flag = item.value !== o.value;
+
+        if (!flag) {
+          lastIndex = i ? i - 1 : 0;
+        }
+        return flag;
+      });
+      if (lastIndex >= 0 && el.items[lastIndex]) {
+        el.value = el.items[lastIndex].value;
+      }
+    }
+  };
+  return (
+    <div style={{ width: '500px' }}>
+      <n-tabs
+        ref={(e) => (el = e)}
+        type="card"
+        add={true}
+        items={items}
+        onChange={(e) => {
+          e.target.value = e.detail[0];
+        }}
+        onEdit={handleEdit}
+      />
+    </div>
+  );
+};
+
+render(<Demo />);
+```

package/es/tabs/examples/animated.md

@@ -0,0 +1,33 @@
+---
+title: 动画
+description: 添加切换动画
+order: 9
+---
+
+```html
+<n-tabs animated="true"></n-tabs>
+<script>
+  const el = container.querySelector('n-tabs');
+
+  el.items = new Array(3).fill(0).map((_, i) => {
+    return {
+      value: i + 1,
+      label: `Tab ${i + 1}`,
+      content: `Content of Tab Pane ${i + 1}`,
+    };
+  });
+</script>
+```
+
+```jsx
+<n-tabs
+  animated={true}
+  items={new Array(3).fill(0).map((_, i) => {
+    return {
+      value: i + 1,
+      label: `Tab ${i + 1}`,
+      content: `Content of Tab Pane ${i + 1}`,
+    };
+  })}
+/>
+```

package/es/tabs/examples/basic.md

@@ -0,0 +1,32 @@
+---
+title: 基本使用
+description: 最简单的使用方式, 默认选中第一项。
+order: 1
+---
+
+```html
+<n-tabs></n-tabs>
+<script>
+  const el = container.querySelector('n-tabs');
+
+  el.items = new Array(3).fill(0).map((_, i) => {
+    return {
+      value: i + 1,
+      label: `Tab ${i + 1}`,
+      content: `Content of Tab Pane ${i + 1}`,
+    };
+  });
+</script>
+```
+
+```jsx
+<n-tabs
+  items={new Array(3).fill(0).map((_, i) => {
+    return {
+      value: i + 1,
+      label: `Tab ${i + 1}`,
+      content: `Content of Tab Pane ${i + 1}`,
+    };
+  })}
+/>
+```

package/es/tabs/examples/card.md

@@ -0,0 +1,33 @@
+---
+title: 卡片式标签页
+description: 另一种样式的页签
+order: 6
+---
+
+```html
+<n-tabs type="card"></n-tabs>
+<script>
+  const el = container.querySelector('n-tabs');
+
+  el.items = new Array(3).fill(0).map((_, i) => {
+    return {
+      value: i + 1,
+      label: `Tab ${i + 1}`,
+      content: `Content of Tab Pane ${i + 1}`,
+    };
+  });
+</script>
+```
+
+```jsx
+<n-tabs
+  type="card"
+  items={new Array(3).fill(0).map((_, i) => {
+    return {
+      value: i + 1,
+      label: `Tab ${i + 1}`,
+      content: `Content of Tab Pane ${i + 1}`,
+    };
+  })}
+/>
+```

package/es/tabs/examples/center.md

@@ -0,0 +1,33 @@
+---
+title: 居中
+description: 标签居中展示。
+order: 3
+---
+
+```html
+<n-tabs centered="true"></n-tabs>
+<script>
+  const el = container.querySelector('n-tabs');
+
+  el.items = new Array(3).fill(0).map((_, i) => {
+    return {
+      value: i + 1,
+      label: `Tab ${i + 1}`,
+      content: `Content of Tab Pane ${i + 1}`,
+    };
+  });
+</script>
+```
+
+```jsx
+<n-tabs
+  centered={true}
+  items={new Array(3).fill(0).map((_, i) => {
+    return {
+      value: i + 1,
+      label: `Tab ${i + 1}`,
+      content: `Content of Tab Pane ${i + 1}`,
+    };
+  })}
+/>
+```