@touchvue/ui 1.0.0-beta.55 → 1.0.0-beta.56

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

@@ -172,10 +172,41 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }
       }
     }
+    function getLeafThMap(trs) {
+      var _a;
+      const leafCount = leafColumns.value.length;
+      const leafThs = new Array(leafCount).fill(null);
+      const leafDepths = new Array(leafCount).fill(-1);
+      for (let rowIdx = 0; rowIdx < trs.length; rowIdx++) {
+        const cells = (_a = trs[rowIdx]) == null ? void 0 : _a.children;
+        if (!cells)
+          continue;
+        let leafIdx = 0;
+        for (let colIdx = 0; colIdx < cells.length; colIdx++) {
+          while (leafIdx < leafCount && leafDepths[leafIdx] >= rowIdx) {
+            leafIdx++;
+          }
+          const cell = cells[colIdx];
+          const colspan = parseInt(cell.getAttribute("colspan") || "1");
+          const rowspan = parseInt(cell.getAttribute("rowspan") || "1");
+          const depth = rowIdx + rowspan - 1;
+          for (let k = 0; k < colspan; k++) {
+            const idx = leafIdx + k;
+            if (idx < leafCount && depth > leafDepths[idx]) {
+              leafDepths[idx] = depth;
+              leafThs[idx] = cell;
+            }
+          }
+          leafIdx += colspan;
+        }
+      }
+      return leafThs;
+    }
     function syncThWidth() {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-      if (props.columns.length > 0 && bodyHead.value && bodyHead.value.row) {
+      if (leafColumns.value.length > 0 && bodyHead.value && bodyHead.value.row) {
         const trs = bodyHead.value.row.children;
+        const leafThMap = getLeafThMap(trs);
         if (Number(props.fixTop) > 0 && topHead.value && topHead.value.row) {
           const topTrs = topHead.value.row.children;
           for (let i = 0; i < topTrs.length; i++) {
@@ -195,15 +226,25 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         if (Number(props.fixLeft) > 0 && leftHead.value && leftHead.value.row) {
           const leftTrs = leftHead.value.row.children;
           for (let i = 0; i < leftTrs.length; i++) {
-            const ths = (_c = trs[i]) == null ? void 0 : _c.children;
-            const leftThs = (_d = leftTrs[i]) == null ? void 0 : _d.children;
-            if (ths && leftThs && leftThs.length > 0) {
+            const leftThs = (_c = leftTrs[i]) == null ? void 0 : _c.children;
+            if (leftThs && leftThs.length > 0 && leafThMap) {
+              let leafIdx = 0;
               for (let j = 0; j < leftThs.length; j++) {
-                const th = ths[j];
                 const leftTh = leftThs[j];
-                if (th && leftTh) {
-                  leftTh.style.width = th.getBoundingClientRect().width + "px";
-                  leftTh.style.height = th.getBoundingClientRect().height + "px";
+                if (leftTh) {
+                  const colspan = parseInt(leftTh.getAttribute("colspan") || "1");
+                  let totalWidth = 0;
+                  for (let k = 0; k < colspan; k++) {
+                    if (leafThMap[leafIdx + k]) {
+                      totalWidth += leafThMap[leafIdx + k].getBoundingClientRect().width;
+                    }
+                  }
+                  leftTh.style.width = totalWidth + "px";
+                  const mainThs = (_d = trs[i]) == null ? void 0 : _d.children;
+                  if (mainThs && mainThs[leafIdx]) {
+                    leftTh.style.height = mainThs[leafIdx].getBoundingClientRect().height + "px";
+                  }
+                  leafIdx += colspan;
                 }
               }
             }
@@ -211,15 +252,25 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           if (Number(props.fixTop) > 0 && leftTopHead.value && leftTopHead.value.row) {
             const leftTopTrs = leftTopHead.value.row.children;
             for (let i = 0; i < leftTopTrs.length; i++) {
-              const ths = (_e = trs[i]) == null ? void 0 : _e.children;
-              const leftTopThs = (_f = leftTopTrs[i]) == null ? void 0 : _f.children;
-              if (ths && leftTopThs && leftTopThs.length > 0) {
+              const leftTopThs = (_e = leftTopTrs[i]) == null ? void 0 : _e.children;
+              if (leftTopThs && leftTopThs.length > 0 && leafThMap) {
+                let leafIdx = 0;
                 for (let j = 0; j < leftTopThs.length; j++) {
-                  const th = ths[j];
                   const leftTopTh = leftTopThs[j];
-                  if (th && leftTopTh) {
-                    leftTopTh.style.width = th.getBoundingClientRect().width + "px";
-                    leftTopTh.style.height = th.getBoundingClientRect().height + "px";
+                  if (leftTopTh) {
+                    const colspan = parseInt(leftTopTh.getAttribute("colspan") || "1");
+                    let totalWidth = 0;
+                    for (let k = 0; k < colspan; k++) {
+                      if (leafThMap[leafIdx + k]) {
+                        totalWidth += leafThMap[leafIdx + k].getBoundingClientRect().width;
+                      }
+                    }
+                    leftTopTh.style.width = totalWidth + "px";
+                    const mainThs = (_f = trs[i]) == null ? void 0 : _f.children;
+                    if (mainThs && mainThs[leafIdx]) {
+                      leftTopTh.style.height = mainThs[leafIdx].getBoundingClientRect().height + "px";
+                    }
+                    leafIdx += colspan;
                   }
                 }
               }
@@ -228,16 +279,27 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }
         if (Number(props.fixRight) > 0 && rightHead.value && rightHead.value.row) {
           const rightTrs = rightHead.value.row.children;
+          const rightLeafStart = leafColumns.value.length - Number(props.fixRight);
           for (let i = 0; i < rightTrs.length; i++) {
-            const ths = (_g = trs[i]) == null ? void 0 : _g.children;
-            const rightThs = (_h = rightTrs[i]) == null ? void 0 : _h.children;
-            if (ths && rightThs && rightThs.length > 0) {
-              for (let j = ths.length - rightThs.length; j < ths.length; j++) {
-                const th = ths[j];
-                const rightTh = rightThs[j - ths.length + rightThs.length];
-                if (th && rightTh) {
-                  rightTh.style.width = th.getBoundingClientRect().width + "px";
-                  rightTh.style.height = th.getBoundingClientRect().height + "px";
+            const rightThs = (_g = rightTrs[i]) == null ? void 0 : _g.children;
+            if (rightThs && rightThs.length > 0 && leafThMap) {
+              let leafIdx = rightLeafStart;
+              for (let j = 0; j < rightThs.length; j++) {
+                const rightTh = rightThs[j];
+                if (rightTh) {
+                  const colspan = parseInt(rightTh.getAttribute("colspan") || "1");
+                  let totalWidth = 0;
+                  for (let k = 0; k < colspan; k++) {
+                    if (leafThMap[leafIdx + k]) {
+                      totalWidth += leafThMap[leafIdx + k].getBoundingClientRect().width;
+                    }
+                  }
+                  rightTh.style.width = totalWidth + "px";
+                  const mainThs = (_h = trs[i]) == null ? void 0 : _h.children;
+                  if (mainThs && mainThs[leafIdx]) {
+                    rightTh.style.height = mainThs[leafIdx].getBoundingClientRect().height + "px";
+                  }
+                  leafIdx += colspan;
                 }
               }
             }
@@ -245,15 +307,25 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           if (Number(props.fixTop) > 0 && rightTopHead.value && rightTopHead.value.row) {
             const rightTopTrs = rightTopHead.value.row.children;
             for (let i = 0; i < rightTopTrs.length; i++) {
-              const ths = (_i = trs[i]) == null ? void 0 : _i.children;
-              const rightTopThs = (_j = rightTopTrs[i]) == null ? void 0 : _j.children;
-              if (ths && rightTopThs && rightTopThs.length > 0) {
-                for (let j = ths.length - rightTopThs.length; j < ths.length; j++) {
-                  const th = ths[j];
-                  const rightTopTh = rightTopThs[j - ths.length + rightTopThs.length];
-                  if (th && rightTopTh) {
-                    rightTopTh.style.width = th.getBoundingClientRect().width + "px";
-                    rightTopTh.style.height = th.getBoundingClientRect().height + "px";
+              const rightTopThs = (_i = rightTopTrs[i]) == null ? void 0 : _i.children;
+              if (rightTopThs && rightTopThs.length > 0 && leafThMap) {
+                let leafIdx = rightLeafStart;
+                for (let j = 0; j < rightTopThs.length; j++) {
+                  const rightTopTh = rightTopThs[j];
+                  if (rightTopTh) {
+                    const colspan = parseInt(rightTopTh.getAttribute("colspan") || "1");
+                    let totalWidth = 0;
+                    for (let k = 0; k < colspan; k++) {
+                      if (leafThMap[leafIdx + k]) {
+                        totalWidth += leafThMap[leafIdx + k].getBoundingClientRect().width;
+                      }
+                    }
+                    rightTopTh.style.width = totalWidth + "px";
+                    const mainThs = (_j = trs[i]) == null ? void 0 : _j.children;
+                    if (mainThs && mainThs[leafIdx]) {
+                      rightTopTh.style.height = mainThs[leafIdx].getBoundingClientRect().height + "px";
+                    }
+                    leafIdx += colspan;
                   }
                 }
               }
@@ -274,7 +346,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             const rightTr = rightBody.value.$el.children[i];
             const rightTds = rightTr == null ? void 0 : rightTr.children;
             const rightHeadTrs = (_c = (_b = rightHead.value) == null ? void 0 : _b.row) == null ? void 0 : _c.children;
-            const rightThs = (_d = rightHeadTrs == null ? void 0 : rightHeadTrs[0]) == null ? void 0 : _d.children;
+            const rightThs = (_d = rightHeadTrs == null ? void 0 : rightHeadTrs[rightHeadTrs.length - 1]) == null ? void 0 : _d.children;
             if (rightTds && rightThs) {
               for (let j = 0; j < rightTds.length; j++) {
                 if (rightThs[j]) {
@@ -299,7 +371,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             const leftTr = leftBody.value.$el.children[i];
             const leftTds = leftTr == null ? void 0 : leftTr.children;
             const leftHeadTrs = (_f = (_e = leftHead.value) == null ? void 0 : _e.row) == null ? void 0 : _f.children;
-            const leftThs = (_g = leftHeadTrs == null ? void 0 : leftHeadTrs[0]) == null ? void 0 : _g.children;
+            const leftThs = (_g = leftHeadTrs == null ? void 0 : leftHeadTrs[leftHeadTrs.length - 1]) == null ? void 0 : _g.children;
             if (leftTds && leftThs) {
               for (let j = 0; j < leftTds.length; j++) {
                 if (leftThs[j]) {
@@ -390,6 +462,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       checkedAll.value = isAll;
     }
     function checkedAllChange(isAll) {
+      checkedAll.value = isAll;
       if (isAll) {
         let ids = props.data.map((item) => item[props.valueKeys]);
         emit("update:modelValue", ids);
@@ -406,22 +479,68 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         rightBody.value.checkAll(isAll);
       }
     }
-    const flattenColumns = vue.computed(() => {
-      let arr = [];
-      function setArr(data) {
-        data.map((column) => {
-          let tempColumn = JSON.parse(JSON.stringify(column));
-          if (tempColumn.children) {
-            delete tempColumn.children;
-          }
-          arr.push(tempColumn);
-          if (column.children) {
-            setArr(column.children);
+    function getLeafColumns(columns) {
+      const result = [];
+      for (const col of columns) {
+        if (col.children && col.children.length > 0) {
+          result.push(...getLeafColumns(col.children));
+        } else {
+          result.push(col);
+        }
+      }
+      return result;
+    }
+    function countColumnLeaves(col) {
+      if (!col.children || col.children.length === 0)
+        return 1;
+      return col.children.reduce((sum, child) => sum + countColumnLeaves(child), 0);
+    }
+    function pruneColumnTree(columns, start, count) {
+      const leaves = getLeafColumns(columns);
+      const targetLeaves = leaves.slice(start, start + count);
+      const targetProps = new Set(targetLeaves.map((l) => l.prop));
+      function prune(cols) {
+        const result = [];
+        for (const col of cols) {
+          if (col.children && col.children.length > 0) {
+            const prunedChildren = prune(col.children);
+            if (prunedChildren.length > 0) {
+              result.push({ ...col, children: prunedChildren });
+            }
+          } else if (targetProps.has(col.prop)) {
+            result.push({ ...col });
           }
-        });
+        }
+        return result;
+      }
+      return prune(columns);
+    }
+    const leafColumns = vue.computed(() => getLeafColumns(props.columns));
+    const leftColumns = vue.computed(() => {
+      const topCount = Number(props.fixLeft);
+      if (topCount <= 0)
+        return [];
+      let leafCount = 0;
+      for (let i = 0; i < topCount && i < props.columns.length; i++) {
+        leafCount += countColumnLeaves(props.columns[i]);
+      }
+      return pruneColumnTree(props.columns, 0, leafCount);
+    });
+    const leftLeafColumns = vue.computed(() => getLeafColumns(leftColumns.value));
+    const rightColumns = vue.computed(() => {
+      const topCount = Number(props.fixRight);
+      if (topCount <= 0)
+        return [];
+      let leafCount = 0;
+      for (let i = props.columns.length - topCount; i < props.columns.length; i++) {
+        leafCount += countColumnLeaves(props.columns[i]);
       }
-      setArr(props.columns);
-      return arr;
+      const totalLeaves = leafColumns.value.length;
+      return pruneColumnTree(props.columns, totalLeaves - leafCount, leafCount);
+    });
+    const rightLeafColumns = vue.computed(() => getLeafColumns(rightColumns.value));
+    const flattenColumns = vue.computed(() => {
+      return leafColumns.value;
     });
     function getColWidth(column) {
       if (column.width) {
@@ -449,7 +568,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         ref_key: "$el",
         ref: $el,
         key: vue.unref(index.langKey),
-        flex: __props.flex ? __props.flex : null,
+        flex: _ctx.flex ? _ctx.flex : null,
         class: vue.normalizeClass(["to-table", setClass.value]),
         style: vue.normalizeStyle(setStyle.value)
       }, [
@@ -474,7 +593,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   (vue.openBlock(true), vue.createElementBlock(
                     vue.Fragment,
                     null,
-                    vue.renderList(__props.columns, (item, index) => {
+                    vue.renderList(leafColumns.value, (item, index) => {
                       return vue.openBlock(), vue.createElementBlock(
                         "col",
                         {
@@ -495,7 +614,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   ref_key: "bodyHead",
                   ref: bodyHead,
                   "checked-all": checkedAll.value,
-                  data: __props.columns,
+                  data: _ctx.columns,
                   onChange: checkedAllChange,
                   onSort: sortChange
                 }, null, 8, ["checked-all", "data"]),
@@ -503,9 +622,9 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   ref_key: "bodyBody",
                   ref: bodyBody,
                   type: hasRadio.value ? "radio" : hasCheck.value ? "check" : "",
-                  data: __props.data,
+                  data: _ctx.data,
                   "checked-all": checkedAll.value,
-                  "column-data": __props.columns,
+                  "column-data": leafColumns.value,
                   onChange: change
                 }, vue.createSlots({
                   detail: vue.withCtx((slotProps) => [
@@ -527,7 +646,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
               512
               /* NEED_PATCH */
             ),
-            !__props.data.length ? (vue.openBlock(), vue.createElementBlock(
+            !_ctx.data.length ? (vue.openBlock(), vue.createElementBlock(
               "div",
               {
                 key: 0,
@@ -541,7 +660,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           544
           /* NEED_HYDRATION, NEED_PATCH */
         ),
-        Number(__props.fixTop) > 0 ? (vue.openBlock(), vue.createElementBlock(
+        Number(_ctx.fixTop) > 0 ? (vue.openBlock(), vue.createElementBlock(
           "div",
           {
             key: 0,
@@ -561,10 +680,11 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 vue.createVNode(tableHead.default, {
                   ref_key: "topHead",
                   ref: topHead,
-                  data: __props.columns,
+                  "checked-all": checkedAll.value,
+                  data: _ctx.columns,
                   onChange: checkedAllChange,
                   onSort: sortChange
-                }, null, 8, ["data"])
+                }, null, 8, ["checked-all", "data"])
               ],
               512
               /* NEED_PATCH */
@@ -573,7 +693,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           512
           /* NEED_PATCH */
         )) : vue.createCommentVNode("v-if", true),
-        Number(__props.fixLeft) > 0 ? (vue.openBlock(), vue.createElementBlock(
+        Number(_ctx.fixLeft) > 0 ? (vue.openBlock(), vue.createElementBlock(
           "div",
           {
             key: 1,
@@ -593,15 +713,16 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 vue.createVNode(tableHead.default, {
                   ref_key: "leftHead",
                   ref: leftHead,
-                  data: __props.columns.slice(0, Number(props.fixLeft)),
+                  "checked-all": checkedAll.value,
+                  data: leftColumns.value,
                   onChange: checkedAllChange,
                   onSort: sortChange
-                }, null, 8, ["data"]),
+                }, null, 8, ["checked-all", "data"]),
                 vue.createVNode(tableBody.default, {
                   ref_key: "leftBody",
                   ref: leftBody,
-                  data: __props.data,
-                  "column-data": __props.columns.slice(0, Number(props.fixLeft)),
+                  data: _ctx.data,
+                  "column-data": leftLeafColumns.value,
                   onChange: change
                 }, vue.createSlots({
                   detail: vue.withCtx((slotProps) => [
@@ -627,7 +748,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           512
           /* NEED_PATCH */
         )) : vue.createCommentVNode("v-if", true),
-        Number(__props.fixLeft) > 0 && Number(__props.fixTop) > 0 ? (vue.openBlock(), vue.createElementBlock(
+        Number(_ctx.fixLeft) > 0 && Number(_ctx.fixTop) > 0 ? (vue.openBlock(), vue.createElementBlock(
           "div",
           {
             key: 2,
@@ -647,10 +768,11 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 vue.createVNode(tableHead.default, {
                   ref_key: "leftTopHead",
                   ref: leftTopHead,
-                  data: __props.columns.slice(0, Number(props.fixLeft)),
+                  "checked-all": checkedAll.value,
+                  data: leftColumns.value,
                   onChange: checkedAllChange,
                   onSort: sortChange
-                }, null, 8, ["data"])
+                }, null, 8, ["checked-all", "data"])
               ],
               512
               /* NEED_PATCH */
@@ -659,7 +781,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           512
           /* NEED_PATCH */
         )) : vue.createCommentVNode("v-if", true),
-        Number(__props.fixRight) > 0 ? (vue.openBlock(), vue.createElementBlock(
+        Number(_ctx.fixRight) > 0 ? (vue.openBlock(), vue.createElementBlock(
           "div",
           {
             key: 3,
@@ -679,15 +801,16 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 vue.createVNode(tableHead.default, {
                   ref_key: "rightHead",
                   ref: rightHead,
-                  data: __props.columns.slice(__props.columns.length - Number(props.fixRight), __props.columns.length),
+                  "checked-all": checkedAll.value,
+                  data: rightColumns.value,
                   onChange: checkedAllChange,
                   onSort: sortChange
-                }, null, 8, ["data"]),
+                }, null, 8, ["checked-all", "data"]),
                 vue.createVNode(tableBody.default, {
                   ref_key: "rightBody",
                   ref: rightBody,
-                  data: __props.data,
-                  "column-data": __props.columns.slice(__props.columns.length - Number(__props.fixRight), __props.columns.length),
+                  data: _ctx.data,
+                  "column-data": rightLeafColumns.value,
                   onChange: change
                 }, vue.createSlots({
                   detail: vue.withCtx((slotProps) => [
@@ -713,7 +836,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           512
           /* NEED_PATCH */
         )) : vue.createCommentVNode("v-if", true),
-        Number(__props.fixRight) > 0 && Number(__props.fixTop) > 0 ? (vue.openBlock(), vue.createElementBlock(
+        Number(_ctx.fixRight) > 0 && Number(_ctx.fixTop) > 0 ? (vue.openBlock(), vue.createElementBlock(
           "div",
           {
             key: 4,
@@ -733,10 +856,11 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 vue.createVNode(tableHead.default, {
                   ref_key: "rightTopHead",
                   ref: rightTopHead,
-                  data: __props.columns.slice(__props.columns.length - Number(props.fixRight), __props.columns.length),
+                  "checked-all": checkedAll.value,
+                  data: rightColumns.value,
                   onChange: checkedAllChange,
                   onSort: sortChange
-                }, null, 8, ["data"])
+                }, null, 8, ["checked-all", "data"])
               ],
               512
               /* NEED_PATCH */