mortise-tenon-design 0.1.2 → 0.2.0

package/es/components/table/index.mjs

@@ -0,0 +1,10 @@
+import e from "./src/table.vue.mjs";
+e.install = (n) => {
+  e.name && n.component(e.name, e);
+};
+const t = e;
+export {
+  t as MtTable
+};
+//# sourceMappingURL=index.mjs.map
+import './src/table.css';

package/es/components/table/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/table/index.ts"],"sourcesContent":["import type { App } from 'vue';\r\nimport Table from './src/table.vue';\r\n\r\nTable.install = (app: App): void => {\r\n  if (Table.name) {\r\n    app.component(Table.name, Table);\r\n  }\r\n};\r\n\r\nexport const MtTable = Table;\r\n\r\nexport * from './src/table';\r\n"],"names":["Table","app","MtTable"],"mappings":";AAGAA,EAAM,UAAU,CAACC,MAAmB;AAClC,EAAID,EAAM,QACJC,EAAA,UAAUD,EAAM,MAAMA,CAAK;AAEnC;AAEO,MAAME,IAAUF;"}

package/es/components/table/src/table.css

@@ -0,0 +1 @@
+.mt-table[data-v-46d3894f]{width:100%;max-width:100%;border-spacing:0;border-collapse:collapse}.mt-table thead tr th[data-v-46d3894f]{padding:8px 16px;border:1px #f0f0f0 solid}.mt-table tbody tr td[data-v-46d3894f]{padding:16px;border:1px #f0f0f0 solid}

package/es/components/table/src/table.vue.mjs

@@ -0,0 +1,8 @@
+import o from "./table.vue2.mjs";
+/* empty css            */
+import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-46d3894f"]]);
+export {
+  m as default
+};
+//# sourceMappingURL=table.vue.mjs.map

package/es/components/table/src/table.vue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/es/components/table/src/table.vue2.mjs

@@ -0,0 +1,100 @@
+import { defineComponent as M, computed as i, openBlock as o, createElementBlock as u, createElementVNode as v, Fragment as p, renderList as d, normalizeStyle as m, renderSlot as _, createTextVNode as k, toDisplayString as b } from "vue";
+const D = { class: "mt-table" }, E = ["colspan", "rowspan"], N = ["colspan", "rowspan"], T = /* @__PURE__ */ M({
+  name: "MtTable",
+  __name: "table",
+  props: {
+    data: { default: () => [] },
+    config: { default: () => [] }
+  },
+  setup($) {
+    const S = $, h = i(() => S.config.map((t) => ({ ...t, columns: t.columns.filter((s) => s.title) }))), y = i(() => S.config.map((t) => ({ ...t, columns: t.columns.filter((s) => s.dataKey) }))), B = i(() => {
+      const t = h.value.map((a) => a.columns.reduce((e, n) => {
+        var l;
+        return e + (((l = n.head) == null ? void 0 : l.colSpan) || 1);
+      }, 0)), s = y.value.map((a) => a.columns.reduce((e, n) => {
+        var l;
+        return e + (((l = n.cell) == null ? void 0 : l.colSpan) || 1);
+      }, 0));
+      return Math.max(...t, ...s);
+    }), K = i(() => {
+      const t = h.value.map((s) => s.columns.map((a) => {
+        var e;
+        return ((e = a.head) == null ? void 0 : e.colSpan) || 0;
+      }));
+      return f(t);
+    }), L = i(() => {
+      const t = y.value.map((s) => s.columns.map((a) => {
+        var e;
+        return ((e = a.cell) == null ? void 0 : e.colSpan) || 0;
+      }));
+      return f(t);
+    });
+    function f(t) {
+      return t.map((s) => {
+        const a = s.filter(Boolean), e = a.reduce((r, c) => r + c, 0);
+        let n = s.length - a.length, l = B.value - e;
+        return s.map((r) => (!r && l > 0 && (r = Math.ceil(l / n), n--, l -= r), r));
+      });
+    }
+    return (t, s) => (o(), u("table", D, [
+      v("thead", null, [
+        (o(!0), u(p, null, d(h.value, (a, e) => (o(), u("tr", {
+          key: e,
+          style: m(a.headStyle)
+        }, [
+          (o(!0), u(p, null, d(a.columns, (n, l) => {
+            var r, c;
+            return o(), u("th", {
+              key: `${n.title}-${l}`,
+              colspan: K.value[e][l],
+              rowspan: (r = n.head) == null ? void 0 : r.rowSpan,
+              style: m((c = n.head) == null ? void 0 : c.style)
+            }, [
+              _(t.$slots, "header", {
+                column: n,
+                columnIndex: l,
+                row: a,
+                rowIndex: e
+              }, () => [
+                k(b(n.title), 1)
+              ], !0)
+            ], 12, E);
+          }), 128))
+        ], 4))), 128))
+      ]),
+      v("tbody", null, [
+        (o(!0), u(p, null, d(t.data, (a, e) => (o(), u(p, { key: e }, [
+          (o(!0), u(p, null, d(y.value, (n, l) => (o(), u("tr", {
+            key: l,
+            style: m(n.rowStyle)
+          }, [
+            (o(!0), u(p, null, d(n.columns, (r, c) => {
+              var C, g;
+              return o(), u("td", {
+                key: `${r.dataKey}-${c}`,
+                colspan: L.value[l][c],
+                rowspan: (C = r.cell) == null ? void 0 : C.rowSpan,
+                style: m((g = r.cell) == null ? void 0 : g.style)
+              }, [
+                _(t.$slots, "cell", {
+                  column: r,
+                  columnIndex: c,
+                  dataIndex: e,
+                  record: a,
+                  row: n,
+                  rowIndex: l
+                }, () => [
+                  k(b(a[r.dataKey]), 1)
+                ], !0)
+              ], 12, N);
+            }), 128))
+          ], 4))), 128))
+        ], 64))), 128))
+      ])
+    ]));
+  }
+});
+export {
+  T as default
+};
+//# sourceMappingURL=table.vue2.mjs.map

package/es/components/table/src/table.vue2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.vue2.mjs","sources":["../../../../../../packages/components/table/src/table.vue"],"sourcesContent":["<script lang=\"ts\" setup>\r\nimport type { TableProps } from './table';\r\nimport { computed } from 'vue';\r\n\r\ndefineOptions({ name: 'MtTable' });\r\n\r\nconst props = withDefaults(defineProps<TableProps>(), {\r\n  data: () => [],\r\n  config: () => [],\r\n});\r\n\r\n/** 表头配置 */\r\nconst headConfig = computed(() => {\r\n  return props.config.map(rowItem => ({ ...rowItem, columns: rowItem.columns.filter(column => column.title) }));\r\n});\r\n\r\n/** 数据配置 */\r\nconst dataConfig = computed(() => {\r\n  return props.config.map(rowItem => ({ ...rowItem, columns: rowItem.columns.filter(column => column.dataKey) }));\r\n});\r\n\r\n/** 最大列数 */\r\nconst maxColSpan = computed(() => {\r\n  const handReduce = headConfig.value.map(item => item.columns.reduce((pre, cur) => pre + (cur.head?.colSpan || 1), 0));\r\n  const cellReduce = dataConfig.value.map(item => item.columns.reduce((pre, cur) => pre + (cur.cell?.colSpan || 1), 0));\r\n  return Math.max(...handReduce, ...cellReduce);\r\n});\r\n\r\n/** 表头列合并 */\r\nconst headColSpan = computed(() => {\r\n  const colSpanList = headConfig.value.map(item => item.columns.map(column => column.head?.colSpan || 0));\r\n  return getColSpanData(colSpanList);\r\n});\r\n\r\n/** 数据列合并 */\r\nconst dataColSpan = computed(() => {\r\n  const colSpanList = dataConfig.value.map(item => item.columns.map(column => column.cell?.colSpan || 0));\r\n  return getColSpanData(colSpanList);\r\n});\r\n\r\n/** 获取合并列数组 */\r\nfunction getColSpanData(colSpanList: number[][]) {\r\n  return colSpanList.map((columns) => {\r\n    const colSpanColumns = columns.filter(Boolean); // 已分配colSpan的列\r\n    const beenColSpan = colSpanColumns.reduce((pur, cur) => pur + cur, 0); // 总colSpan\r\n    let remainCount = columns.length - colSpanColumns.length; // 剩余未配置colSpan的列数\r\n    let remainColSpan = maxColSpan.value - beenColSpan; // 剩余可分配的colSpan\r\n    return columns.map((colSpan) => {\r\n      if (!colSpan && remainColSpan > 0) {\r\n        colSpan = Math.ceil(remainColSpan / remainCount); // 每列平均分配colSpan\r\n        remainCount--;\r\n        remainColSpan -= colSpan;\r\n      }\r\n      return colSpan;\r\n    });\r\n  });\r\n}\r\n</script>\r\n\r\n<template>\r\n  <table class=\"mt-table\">\r\n    <!-- 表头 -->\r\n    <thead>\r\n      <tr\r\n        v-for=\"(row, rowIndex) in headConfig\"\r\n        :key=\"rowIndex\"\r\n        :style=\"row.headStyle\"\r\n      >\r\n        <template v-for=\"(column, columnIndex) in row.columns\" :key=\"`${column.title}-${columnIndex}`\">\r\n          <th\r\n            :colspan=\"headColSpan[rowIndex][columnIndex]\"\r\n            :rowspan=\"column.head?.rowSpan\"\r\n            :style=\"column.head?.style\"\r\n          >\r\n            <slot\r\n              :column=\"column\"\r\n              :column-index=\"columnIndex\"\r\n              :row=\"row\"\r\n              :row-index=\"rowIndex\"\r\n              name=\"header\"\r\n            >\r\n              {{ column.title }}\r\n            </slot>\r\n          </th>\r\n        </template>\r\n      </tr>\r\n    </thead>\r\n    <!-- 表体 -->\r\n    <tbody>\r\n      <template\r\n        v-for=\"(record, dataIndex) in data\"\r\n        :key=\"dataIndex\"\r\n      >\r\n        <tr\r\n          v-for=\"(row, rowIndex) in dataConfig\"\r\n          :key=\"rowIndex\"\r\n          :style=\"row.rowStyle\"\r\n        >\r\n          <template v-for=\"(column, columnIndex) in row.columns\" :key=\"`${column.dataKey}-${columnIndex}`\">\r\n            <td\r\n              :colspan=\"dataColSpan[rowIndex][columnIndex]\"\r\n              :rowspan=\"column.cell?.rowSpan\"\r\n              :style=\"column.cell?.style\"\r\n            >\r\n              <slot\r\n                :column=\"column\"\r\n                :column-index=\"columnIndex\"\r\n                :data-index=\"dataIndex\"\r\n                name=\"cell\"\r\n                :record=\"record\"\r\n                :row=\"row\"\r\n                :row-index=\"rowIndex\"\r\n              >\r\n                {{ record[column.dataKey!] }}\r\n              </slot>\r\n            </td>\r\n          </template>\r\n        </tr>\r\n      </template>\r\n    </tbody>\r\n  </table>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.mt-table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  border-spacing: 0;\r\n  border-collapse: collapse;\r\n\r\n  thead {\r\n    tr {\r\n      th {\r\n        padding: 8px 16px;\r\n        border: 1px #f0f0f0 solid;\r\n      }\r\n    }\r\n  }\r\n\r\n  tbody {\r\n    tr {\r\n      td {\r\n        padding: 16px;\r\n        border: 1px #f0f0f0 solid;\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n"],"names":["props","__props","headConfig","computed","rowItem","column","dataConfig","maxColSpan","handReduce","item","pre","cur","_a","cellReduce","headColSpan","colSpanList","getColSpanData","dataColSpan","columns","colSpanColumns","beenColSpan","pur","remainCount","remainColSpan","colSpan"],"mappings":";;;;;;;;;AAMA,UAAMA,IAAQC,GAMRC,IAAaC,EAAS,MACnBH,EAAM,OAAO,IAAI,CAAAI,OAAY,EAAE,GAAGA,GAAS,SAASA,EAAQ,QAAQ,OAAO,CAAAC,MAAUA,EAAO,KAAK,IAAI,CAC7G,GAGKC,IAAaH,EAAS,MACnBH,EAAM,OAAO,IAAI,CAAAI,OAAY,EAAE,GAAGA,GAAS,SAASA,EAAQ,QAAQ,OAAO,CAAAC,MAAUA,EAAO,OAAO,IAAI,CAC/G,GAGKE,IAAaJ,EAAS,MAAM;AAChC,YAAMK,IAAaN,EAAW,MAAM,IAAI,CAAAO,MAAQA,EAAK,QAAQ,OAAO,CAACC,GAAKC;;AAAQ,eAAAD,OAAOE,IAAAD,EAAI,SAAJ,gBAAAC,EAAU,YAAW;AAAA,SAAI,CAAC,CAAC,GAC9GC,IAAaP,EAAW,MAAM,IAAI,CAAAG,MAAQA,EAAK,QAAQ,OAAO,CAACC,GAAKC;;AAAQ,eAAAD,OAAOE,IAAAD,EAAI,SAAJ,gBAAAC,EAAU,YAAW;AAAA,SAAI,CAAC,CAAC;AACpH,aAAO,KAAK,IAAI,GAAGJ,GAAY,GAAGK,CAAU;AAAA,IAAA,CAC7C,GAGKC,IAAcX,EAAS,MAAM;AACjC,YAAMY,IAAcb,EAAW,MAAM,IAAI,CAAQO,MAAAA,EAAK,QAAQ,IAAI,CAAUJ,MAAA;;AAAA,iBAAAO,IAAAP,EAAO,SAAP,gBAAAO,EAAa,YAAW;AAAA,OAAC,CAAC;AACtG,aAAOI,EAAeD,CAAW;AAAA,IAAA,CAClC,GAGKE,IAAcd,EAAS,MAAM;AACjC,YAAMY,IAAcT,EAAW,MAAM,IAAI,CAAQG,MAAAA,EAAK,QAAQ,IAAI,CAAUJ,MAAA;;AAAA,iBAAAO,IAAAP,EAAO,SAAP,gBAAAO,EAAa,YAAW;AAAA,OAAC,CAAC;AACtG,aAAOI,EAAeD,CAAW;AAAA,IAAA,CAClC;AAGD,aAASC,EAAeD,GAAyB;AACxC,aAAAA,EAAY,IAAI,CAACG,MAAY;AAC5B,cAAAC,IAAiBD,EAAQ,OAAO,OAAO,GACvCE,IAAcD,EAAe,OAAO,CAACE,GAAKV,MAAQU,IAAMV,GAAK,CAAC;AAChE,YAAAW,IAAcJ,EAAQ,SAASC,EAAe,QAC9CI,IAAgBhB,EAAW,QAAQa;AAChC,eAAAF,EAAQ,IAAI,CAACM,OACd,CAACA,KAAWD,IAAgB,MACpBC,IAAA,KAAK,KAAKD,IAAgBD,CAAW,GAC/CA,KACiBC,KAAAC,IAEZA,EACR;AAAA,MAAA,CACF;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/index.mjs

@@ -1,7 +1,9 @@
 import { MtExpand as t } from "./components/expand/index.mjs";
-import { MtSort as x } from "./components/sort/index.mjs";
+import { MtSort as p } from "./components/sort/index.mjs";
+import { MtTable as f } from "./components/table/index.mjs";
 export {
   t as MtExpand,
-  x as MtSort
+  p as MtSort,
+  f as MtTable
 };
 //# sourceMappingURL=index.mjs.map

package/es/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/lib/components/table/index.js

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./src/table.vue.js");e.default.install=t=>{e.default.name&&t.component(e.default.name,e.default)};const a=e.default;exports.MtTable=a;
+//# sourceMappingURL=index.js.map
+require('./src/table.css');

package/lib/components/table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/table/index.ts"],"sourcesContent":["import type { App } from 'vue';\r\nimport Table from './src/table.vue';\r\n\r\nTable.install = (app: App): void => {\r\n  if (Table.name) {\r\n    app.component(Table.name, Table);\r\n  }\r\n};\r\n\r\nexport const MtTable = Table;\r\n\r\nexport * from './src/table';\r\n"],"names":["Table","app","MtTable"],"mappings":"sHAGAA,EAAAA,QAAM,QAAWC,GAAmB,CAC9BD,EAAAA,QAAM,MACJC,EAAA,UAAUD,UAAM,KAAMA,EAAAA,OAAK,CAEnC,EAEO,MAAME,EAAUF,EAAAA"}

package/lib/components/table/src/table.css

@@ -0,0 +1 @@
+.mt-table[data-v-46d3894f]{width:100%;max-width:100%;border-spacing:0;border-collapse:collapse}.mt-table thead tr th[data-v-46d3894f]{padding:8px 16px;border:1px #f0f0f0 solid}.mt-table tbody tr td[data-v-46d3894f]{padding:16px;border:1px #f0f0f0 solid}

package/lib/components/table/src/table.vue.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./table.vue2.js");;/* empty css            */const t=require("../../../_virtual/_plugin-vue_export-helper.js"),u=t.default(e.default,[["__scopeId","data-v-46d3894f"]]);exports.default=u;
+//# sourceMappingURL=table.vue.js.map

package/lib/components/table/src/table.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/components/table/src/table.vue2.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),g={class:"mt-table"},f=["colspan","rowspan"],E=["colspan","rowspan"],v=e.defineComponent({name:"MtTable",__name:"table",props:{data:{default:()=>[]},config:{default:()=>[]}},setup(y){const m=y,u=e.computed(()=>m.config.map(l=>({...l,columns:l.columns.filter(c=>c.title)}))),p=e.computed(()=>m.config.map(l=>({...l,columns:l.columns.filter(c=>c.dataKey)}))),S=e.computed(()=>{const l=u.value.map(n=>n.columns.reduce((t,o)=>{var a;return t+(((a=o.head)==null?void 0:a.colSpan)||1)},0)),c=p.value.map(n=>n.columns.reduce((t,o)=>{var a;return t+(((a=o.cell)==null?void 0:a.colSpan)||1)},0));return Math.max(...l,...c)}),B=e.computed(()=>{const l=u.value.map(c=>c.columns.map(n=>{var t;return((t=n.head)==null?void 0:t.colSpan)||0}));return i(l)}),h=e.computed(()=>{const l=p.value.map(c=>c.columns.map(n=>{var t;return((t=n.cell)==null?void 0:t.colSpan)||0}));return i(l)});function i(l){return l.map(c=>{const n=c.filter(Boolean),t=n.reduce((r,s)=>r+s,0);let o=c.length-n.length,a=S.value-t;return c.map(r=>(!r&&a>0&&(r=Math.ceil(a/o),o--,a-=r),r))})}return(l,c)=>(e.openBlock(),e.createElementBlock("table",g,[e.createElementVNode("thead",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,(n,t)=>(e.openBlock(),e.createElementBlock("tr",{key:t,style:e.normalizeStyle(n.headStyle)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.columns,(o,a)=>{var r,s;return e.openBlock(),e.createElementBlock("th",{key:`${o.title}-${a}`,colspan:B.value[t][a],rowspan:(r=o.head)==null?void 0:r.rowSpan,style:e.normalizeStyle((s=o.head)==null?void 0:s.style)},[e.renderSlot(l.$slots,"header",{column:o,columnIndex:a,row:n,rowIndex:t},()=>[e.createTextVNode(e.toDisplayString(o.title),1)],!0)],12,f)}),128))],4))),128))]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.data,(n,t)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:t},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,(o,a)=>(e.openBlock(),e.createElementBlock("tr",{key:a,style:e.normalizeStyle(o.rowStyle)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.columns,(r,s)=>{var d,k;return e.openBlock(),e.createElementBlock("td",{key:`${r.dataKey}-${s}`,colspan:h.value[a][s],rowspan:(d=r.cell)==null?void 0:d.rowSpan,style:e.normalizeStyle((k=r.cell)==null?void 0:k.style)},[e.renderSlot(l.$slots,"cell",{column:r,columnIndex:s,dataIndex:t,record:n,row:o,rowIndex:a},()=>[e.createTextVNode(e.toDisplayString(n[r.dataKey]),1)],!0)],12,E)}),128))],4))),128))],64))),128))])]))}});exports.default=v;
+//# sourceMappingURL=table.vue2.js.map

package/lib/components/table/src/table.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.vue2.js","sources":["../../../../../../packages/components/table/src/table.vue"],"sourcesContent":["<script lang=\"ts\" setup>\r\nimport type { TableProps } from './table';\r\nimport { computed } from 'vue';\r\n\r\ndefineOptions({ name: 'MtTable' });\r\n\r\nconst props = withDefaults(defineProps<TableProps>(), {\r\n  data: () => [],\r\n  config: () => [],\r\n});\r\n\r\n/** 表头配置 */\r\nconst headConfig = computed(() => {\r\n  return props.config.map(rowItem => ({ ...rowItem, columns: rowItem.columns.filter(column => column.title) }));\r\n});\r\n\r\n/** 数据配置 */\r\nconst dataConfig = computed(() => {\r\n  return props.config.map(rowItem => ({ ...rowItem, columns: rowItem.columns.filter(column => column.dataKey) }));\r\n});\r\n\r\n/** 最大列数 */\r\nconst maxColSpan = computed(() => {\r\n  const handReduce = headConfig.value.map(item => item.columns.reduce((pre, cur) => pre + (cur.head?.colSpan || 1), 0));\r\n  const cellReduce = dataConfig.value.map(item => item.columns.reduce((pre, cur) => pre + (cur.cell?.colSpan || 1), 0));\r\n  return Math.max(...handReduce, ...cellReduce);\r\n});\r\n\r\n/** 表头列合并 */\r\nconst headColSpan = computed(() => {\r\n  const colSpanList = headConfig.value.map(item => item.columns.map(column => column.head?.colSpan || 0));\r\n  return getColSpanData(colSpanList);\r\n});\r\n\r\n/** 数据列合并 */\r\nconst dataColSpan = computed(() => {\r\n  const colSpanList = dataConfig.value.map(item => item.columns.map(column => column.cell?.colSpan || 0));\r\n  return getColSpanData(colSpanList);\r\n});\r\n\r\n/** 获取合并列数组 */\r\nfunction getColSpanData(colSpanList: number[][]) {\r\n  return colSpanList.map((columns) => {\r\n    const colSpanColumns = columns.filter(Boolean); // 已分配colSpan的列\r\n    const beenColSpan = colSpanColumns.reduce((pur, cur) => pur + cur, 0); // 总colSpan\r\n    let remainCount = columns.length - colSpanColumns.length; // 剩余未配置colSpan的列数\r\n    let remainColSpan = maxColSpan.value - beenColSpan; // 剩余可分配的colSpan\r\n    return columns.map((colSpan) => {\r\n      if (!colSpan && remainColSpan > 0) {\r\n        colSpan = Math.ceil(remainColSpan / remainCount); // 每列平均分配colSpan\r\n        remainCount--;\r\n        remainColSpan -= colSpan;\r\n      }\r\n      return colSpan;\r\n    });\r\n  });\r\n}\r\n</script>\r\n\r\n<template>\r\n  <table class=\"mt-table\">\r\n    <!-- 表头 -->\r\n    <thead>\r\n      <tr\r\n        v-for=\"(row, rowIndex) in headConfig\"\r\n        :key=\"rowIndex\"\r\n        :style=\"row.headStyle\"\r\n      >\r\n        <template v-for=\"(column, columnIndex) in row.columns\" :key=\"`${column.title}-${columnIndex}`\">\r\n          <th\r\n            :colspan=\"headColSpan[rowIndex][columnIndex]\"\r\n            :rowspan=\"column.head?.rowSpan\"\r\n            :style=\"column.head?.style\"\r\n          >\r\n            <slot\r\n              :column=\"column\"\r\n              :column-index=\"columnIndex\"\r\n              :row=\"row\"\r\n              :row-index=\"rowIndex\"\r\n              name=\"header\"\r\n            >\r\n              {{ column.title }}\r\n            </slot>\r\n          </th>\r\n        </template>\r\n      </tr>\r\n    </thead>\r\n    <!-- 表体 -->\r\n    <tbody>\r\n      <template\r\n        v-for=\"(record, dataIndex) in data\"\r\n        :key=\"dataIndex\"\r\n      >\r\n        <tr\r\n          v-for=\"(row, rowIndex) in dataConfig\"\r\n          :key=\"rowIndex\"\r\n          :style=\"row.rowStyle\"\r\n        >\r\n          <template v-for=\"(column, columnIndex) in row.columns\" :key=\"`${column.dataKey}-${columnIndex}`\">\r\n            <td\r\n              :colspan=\"dataColSpan[rowIndex][columnIndex]\"\r\n              :rowspan=\"column.cell?.rowSpan\"\r\n              :style=\"column.cell?.style\"\r\n            >\r\n              <slot\r\n                :column=\"column\"\r\n                :column-index=\"columnIndex\"\r\n                :data-index=\"dataIndex\"\r\n                name=\"cell\"\r\n                :record=\"record\"\r\n                :row=\"row\"\r\n                :row-index=\"rowIndex\"\r\n              >\r\n                {{ record[column.dataKey!] }}\r\n              </slot>\r\n            </td>\r\n          </template>\r\n        </tr>\r\n      </template>\r\n    </tbody>\r\n  </table>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.mt-table {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  border-spacing: 0;\r\n  border-collapse: collapse;\r\n\r\n  thead {\r\n    tr {\r\n      th {\r\n        padding: 8px 16px;\r\n        border: 1px #f0f0f0 solid;\r\n      }\r\n    }\r\n  }\r\n\r\n  tbody {\r\n    tr {\r\n      td {\r\n        padding: 16px;\r\n        border: 1px #f0f0f0 solid;\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n"],"names":["props","__props","headConfig","computed","rowItem","column","dataConfig","maxColSpan","handReduce","item","pre","cur","_a","cellReduce","headColSpan","colSpanList","getColSpanData","dataColSpan","columns","colSpanColumns","beenColSpan","pur","remainCount","remainColSpan","colSpan"],"mappings":"0TAMA,MAAMA,EAAQC,EAMRC,EAAaC,EAAAA,SAAS,IACnBH,EAAM,OAAO,IAAII,IAAY,CAAE,GAAGA,EAAS,QAASA,EAAQ,QAAQ,OAAOC,GAAUA,EAAO,KAAK,GAAI,CAC7G,EAGKC,EAAaH,EAAAA,SAAS,IACnBH,EAAM,OAAO,IAAII,IAAY,CAAE,GAAGA,EAAS,QAASA,EAAQ,QAAQ,OAAOC,GAAUA,EAAO,OAAO,GAAI,CAC/G,EAGKE,EAAaJ,EAAAA,SAAS,IAAM,CAChC,MAAMK,EAAaN,EAAW,MAAM,IAAIO,GAAQA,EAAK,QAAQ,OAAO,CAACC,EAAKC,WAAQ,OAAAD,KAAOE,EAAAD,EAAI,OAAJ,YAAAC,EAAU,UAAW,IAAI,CAAC,CAAC,EAC9GC,EAAaP,EAAW,MAAM,IAAIG,GAAQA,EAAK,QAAQ,OAAO,CAACC,EAAKC,WAAQ,OAAAD,KAAOE,EAAAD,EAAI,OAAJ,YAAAC,EAAU,UAAW,IAAI,CAAC,CAAC,EACpH,OAAO,KAAK,IAAI,GAAGJ,EAAY,GAAGK,CAAU,CAAA,CAC7C,EAGKC,EAAcX,EAAAA,SAAS,IAAM,CACjC,MAAMY,EAAcb,EAAW,MAAM,IAAYO,GAAAA,EAAK,QAAQ,IAAcJ,GAAA,OAAA,QAAAO,EAAAP,EAAO,OAAP,YAAAO,EAAa,UAAW,EAAC,CAAC,EACtG,OAAOI,EAAeD,CAAW,CAAA,CAClC,EAGKE,EAAcd,EAAAA,SAAS,IAAM,CACjC,MAAMY,EAAcT,EAAW,MAAM,IAAYG,GAAAA,EAAK,QAAQ,IAAcJ,GAAA,OAAA,QAAAO,EAAAP,EAAO,OAAP,YAAAO,EAAa,UAAW,EAAC,CAAC,EACtG,OAAOI,EAAeD,CAAW,CAAA,CAClC,EAGD,SAASC,EAAeD,EAAyB,CACxC,OAAAA,EAAY,IAAKG,GAAY,CAC5B,MAAAC,EAAiBD,EAAQ,OAAO,OAAO,EACvCE,EAAcD,EAAe,OAAO,CAACE,EAAKV,IAAQU,EAAMV,EAAK,CAAC,EAChE,IAAAW,EAAcJ,EAAQ,OAASC,EAAe,OAC9CI,EAAgBhB,EAAW,MAAQa,EAChC,OAAAF,EAAQ,IAAKM,IACd,CAACA,GAAWD,EAAgB,IACpBC,EAAA,KAAK,KAAKD,EAAgBD,CAAW,EAC/CA,IACiBC,GAAAC,GAEZA,EACR,CAAA,CACF,CAAA"}

package/lib/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./components/expand/index.js"),e=require("./components/sort/index.js");exports.MtExpand=t.MtExpand;exports.MtSort=e.MtSort;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/expand/index.js"),t=require("./components/sort/index.js"),r=require("./components/table/index.js");exports.MtExpand=e.MtExpand;exports.MtSort=t.MtSort;exports.MtTable=r.MtTable;
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mortise-tenon-design",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "榫卯组件库",
   "author": "nixwai",
   "license": "ISC",

package/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './expand';
 export * from './sort';
+export * from './table';

package/types/table/index.d.ts

@@ -0,0 +1,48 @@
+export declare const MtTable: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('.').TableProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        data: any[];
+        config: import('.').TableConfig[];
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('.').TableProps> & Readonly<{}>, {}, {}, {}, {}, {
+        data: any[];
+        config: import('.').TableConfig[];
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('.').TableProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    data: any[];
+    config: import('.').TableConfig[];
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        header?(_: {
+            column: import('.').Column;
+            columnIndex: number;
+            row: {
+                columns: import('.').Column[];
+                rowStyle?: import('vue').CSSProperties;
+                headStyle?: import('vue').CSSProperties;
+            };
+            rowIndex: number;
+        }): any;
+        cell?(_: {
+            column: import('.').Column;
+            columnIndex: number;
+            dataIndex: number;
+            record: any;
+            row: {
+                columns: import('.').Column[];
+                rowStyle?: import('vue').CSSProperties;
+                headStyle?: import('vue').CSSProperties;
+            };
+            rowIndex: number;
+        }): any;
+    };
+});
+export * from './src/table';

package/types/table/src/table.d.ts

@@ -0,0 +1,38 @@
+import { CSSProperties } from 'vue';
+export interface TableProps {
+    /** 表格数据 */
+    data?: any[];
+    /** 表格配置 */
+    config?: TableConfig[];
+}
+/** 表体行 */
+export interface TableConfig {
+    /** 行体样式 */
+    rowStyle?: CSSProperties;
+    /** 表头样式 */
+    headStyle?: CSSProperties;
+    /** 列配置 */
+    columns: Column[];
+}
+/** 标体列 */
+export interface Column {
+    /** 唯一标识key */
+    key?: string;
+    /** 单元格数据字段（配置了才会显示对应数据列） */
+    dataKey?: string;
+    /** 表头名称（配置了才会显示对应列表头） */
+    title?: string;
+    /** 表头格配置 */
+    head?: CellProps;
+    /** 数据格配置 */
+    cell?: CellProps;
+}
+/** 单元格属性 */
+export interface CellProps {
+    /** 样式 */
+    style?: CSSProperties;
+    /** 占用列数 */
+    colSpan?: number;
+    /** 占用行数 */
+    rowSpan?: number;
+}

package/types/table/src/table.vue.d.ts

@@ -0,0 +1,41 @@
+import { TableProps } from './table';
+declare function __VLS_template(): {
+    slots: {
+        header?(_: {
+            column: import('./table').Column;
+            columnIndex: number;
+            row: {
+                columns: import('./table').Column[];
+                rowStyle?: import('vue').CSSProperties;
+                headStyle?: import('vue').CSSProperties;
+            };
+            rowIndex: number;
+        }): any;
+        cell?(_: {
+            column: import('./table').Column;
+            columnIndex: number;
+            dataIndex: number;
+            record: any;
+            row: {
+                columns: import('./table').Column[];
+                rowStyle?: import('vue').CSSProperties;
+                headStyle?: import('vue').CSSProperties;
+            };
+            rowIndex: number;
+        }): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<TableProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TableProps> & Readonly<{}>, {
+    data: any[];
+    config: import('./table').TableConfig[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};