neko-ui 2.8.21 → 2.8.23

package/lib/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/lib/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/lib/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/lib/table/index.js

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

package/lib/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","defaultPagination","page","pageSize","total","totalText","size","Table","_","baseStyle","theme","local","other","splitProps","layout","hasOrder","setHasOrder","createSignal","setPage","setPageSize","setTotal","getLayout","col","width","align","valign","char","charoff","colspan","rowspan","createEffect","batch","pagination","createMemo","Object","assign","columns","cols","_hasOrder","key","prototype","hasOwnProperty","call","_col","originKey","label","toString","isObject","type","render","_val","_row","i","push","untrack","handlePageChange","e","detail","onChange","styles","Show","css","cx","title","For","_layout","data","row","Row","_pagination","val","isUndefined","emptyVal","summary","length","summaryText","filter","c","includes","arr","reduce","prev","curr","next","isString","customElement","class","loading","opt","el","element","props","mergeProps","querySelector","removeAttribute"],"mappings":"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"}
+{"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","defaultPagination","page","pageSize","total","totalText","size","Table","_","baseStyle","theme","local","other","splitProps","layout","hasOrder","setHasOrder","createSignal","setPage","setPageSize","setTotal","getLayout","col","width","align","valign","char","charoff","colspan","rowspan","createEffect","batch","pagination","createMemo","Object","assign","columns","cols","_hasOrder","key","prototype","hasOwnProperty","call","_col","originKey","label","toString","isObject","type","render","_val","_row","i","push","untrack","handlePageChange","e","detail","onChange","styles","Show","css","cx","title","For","_layout","data","row","Row","_pagination","val","isUndefined","emptyVal","isFunction","summary","length","summaryText","filter","c","includes","arr","reduce","prev","curr","next","isString","customElement","class","loading","opt","el","element","props","mergeProps","querySelector","removeAttribute"],"mappings":"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"}

package/lib/tabs/README.mdx

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

package/lib/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/lib/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/lib/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/lib/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/lib/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}`,
+    };
+  })}
+/>
+```

package/lib/tabs/examples/disabled-tab.md

@@ -0,0 +1,34 @@
+---
+title: 禁用某一项。
+description: 禁用某一项。
+order: 2
+---
+
+```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}`,
+      disabled: 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}`,
+      disabled: i === 1,
+    };
+  })}
+/>
+```

package/lib/tabs/examples/disabled.md

@@ -0,0 +1,33 @@
+---
+title: 只读模式
+description: 禁止任何操作。
+order: 8
+---
+
+```html
+<n-tabs disabled="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
+  disabled={true}
+  items={new Array(3).fill(0).map((_, i) => {
+    return {
+      value: i + 1,
+      label: `Tab ${i + 1}`,
+      content: `Content of Tab Pane ${i + 1}`,
+    };
+  })}
+/>
+```