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

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watch, nextTick, onMounted, provide, openBlock, createElementBlock, unref, normalizeClass, normalizeStyle, createElementVNode, Fragment, renderList, createVNode, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps, toDisplayString, createCommentVNode } from 'vue';
+import { defineComponent, ref, computed, watch, nextTick, onMounted, onBeforeUnmount, provide, openBlock, createElementBlock, unref, normalizeClass, normalizeStyle, createElementVNode, Fragment, renderList, createVNode, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps, toDisplayString, createCommentVNode } from 'vue';
 import TableHead from './table-head.vue.mjs';
 import TableBody from './table-body.vue.mjs';
 import { langKey, t } from '../../../locale/index.mjs';
@@ -50,6 +50,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const rightTop = ref(null);
     const rightTopTable = ref(null);
     const rightTopHead = ref(null);
+    let resizeObserver = null;
     const checkedAll = ref(false);
     const setClass = computed(() => {
       const classes = [];
@@ -167,10 +168,41 @@ var _sfc_main = /* @__PURE__ */ 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++) {
@@ -190,15 +222,25 @@ var _sfc_main = /* @__PURE__ */ 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;
                 }
               }
             }
@@ -206,15 +248,25 @@ var _sfc_main = /* @__PURE__ */ 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;
                   }
                 }
               }
@@ -223,16 +275,27 @@ var _sfc_main = /* @__PURE__ */ 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;
                 }
               }
             }
@@ -240,15 +303,25 @@ var _sfc_main = /* @__PURE__ */ 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;
                   }
                 }
               }
@@ -258,7 +331,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     function syncTrHeight() {
-      var _a;
+      var _a, _b, _c, _d, _e, _f, _g;
       if (!(props.fixRight || props.fixLeft))
         return;
       if ((_a = bodyBody.value) == null ? void 0 : _a.$el.children.length) {
@@ -266,9 +339,53 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           const tr = bodyBody.value.$el.children[i];
           if (Number(props.fixRight) > 0 && rightBody.value) {
             rightBody.value.$el.children[i].style.height = tr.getBoundingClientRect().height + "px";
+            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[rightHeadTrs.length - 1]) == null ? void 0 : _d.children;
+            if (rightTds && rightThs) {
+              for (let j = 0; j < rightTds.length; j++) {
+                if (rightThs[j]) {
+                  const span = rightTds[j].querySelector("span");
+                  if (span) {
+                    const thWidth = parseFloat(rightThs[j].style.width) || 0;
+                    const tdStyle = window.getComputedStyle(rightTds[j]);
+                    const tdPaddingLeft = parseFloat(tdStyle.paddingLeft) || 0;
+                    const tdPaddingRight = parseFloat(tdStyle.paddingRight) || 0;
+                    const spanMaxWidth = Math.max(0, thWidth - tdPaddingLeft - tdPaddingRight);
+                    span.style.display = "block";
+                    span.style.maxWidth = spanMaxWidth + "px";
+                    span.style.overflow = "hidden";
+                    span.style.textOverflow = "ellipsis";
+                  }
+                }
+              }
+            }
           }
           if (Number(props.fixLeft) > 0 && leftBody.value) {
             leftBody.value.$el.children[i].style.height = tr.getBoundingClientRect().height + "px";
+            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[leftHeadTrs.length - 1]) == null ? void 0 : _g.children;
+            if (leftTds && leftThs) {
+              for (let j = 0; j < leftTds.length; j++) {
+                if (leftThs[j]) {
+                  const span = leftTds[j].querySelector("span");
+                  if (span) {
+                    const thWidth = parseFloat(leftThs[j].style.width) || 0;
+                    const tdStyle = window.getComputedStyle(leftTds[j]);
+                    const tdPaddingLeft = parseFloat(tdStyle.paddingLeft) || 0;
+                    const tdPaddingRight = parseFloat(tdStyle.paddingRight) || 0;
+                    const spanMaxWidth = Math.max(0, thWidth - tdPaddingLeft - tdPaddingRight);
+                    span.style.display = "block";
+                    span.style.maxWidth = spanMaxWidth + "px";
+                    span.style.overflow = "hidden";
+                    span.style.textOverflow = "ellipsis";
+                  }
+                }
+              }
+            }
           }
         }
       }
@@ -290,6 +407,19 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     }
     onMounted(() => {
       adjust();
+      window.addEventListener("resize", setFix);
+      if ($el.value) {
+        resizeObserver = new ResizeObserver(() => {
+          setFix();
+        });
+        resizeObserver.observe($el.value);
+      }
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("resize", setFix);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
     });
     const hasRadio = computed(() => {
       let flag = false;
@@ -328,6 +458,7 @@ var _sfc_main = /* @__PURE__ */ 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);
@@ -344,22 +475,68 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         rightBody.value.checkAll(isAll);
       }
     }
-    const flattenColumns = 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;
       }
-      setArr(props.columns);
-      return arr;
+      return prune(columns);
+    }
+    const leafColumns = computed(() => getLeafColumns(props.columns));
+    const leftColumns = 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 = computed(() => getLeafColumns(leftColumns.value));
+    const rightColumns = 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]);
+      }
+      const totalLeaves = leafColumns.value.length;
+      return pruneColumnTree(props.columns, totalLeaves - leafCount, leafCount);
+    });
+    const rightLeafColumns = computed(() => getLeafColumns(rightColumns.value));
+    const flattenColumns = computed(() => {
+      return leafColumns.value;
     });
     function getColWidth(column) {
       if (column.width) {
@@ -412,7 +589,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                   (openBlock(true), createElementBlock(
                     Fragment,
                     null,
-                    renderList(_ctx.columns, (item, index) => {
+                    renderList(leafColumns.value, (item, index) => {
                       return openBlock(), createElementBlock(
                         "col",
                         {
@@ -443,7 +620,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                   type: hasRadio.value ? "radio" : hasCheck.value ? "check" : "",
                   data: _ctx.data,
                   "checked-all": checkedAll.value,
-                  "column-data": _ctx.columns,
+                  "column-data": leafColumns.value,
                   onChange: change
                 }, createSlots({
                   detail: withCtx((slotProps) => [
@@ -499,10 +676,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                 createVNode(TableHead, {
                   ref_key: "topHead",
                   ref: topHead,
+                  "checked-all": checkedAll.value,
                   data: _ctx.columns,
                   onChange: checkedAllChange,
                   onSort: sortChange
-                }, null, 8, ["data"])
+                }, null, 8, ["checked-all", "data"])
               ],
               512
               /* NEED_PATCH */
@@ -531,15 +709,16 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                 createVNode(TableHead, {
                   ref_key: "leftHead",
                   ref: leftHead,
-                  data: _ctx.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"]),
                 createVNode(TableBody, {
                   ref_key: "leftBody",
                   ref: leftBody,
                   data: _ctx.data,
-                  "column-data": _ctx.columns.slice(0, Number(props.fixLeft)),
+                  "column-data": leftLeafColumns.value,
                   onChange: change
                 }, createSlots({
                   detail: withCtx((slotProps) => [
@@ -585,10 +764,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                 createVNode(TableHead, {
                   ref_key: "leftTopHead",
                   ref: leftTopHead,
-                  data: _ctx.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 */
@@ -617,15 +797,16 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                 createVNode(TableHead, {
                   ref_key: "rightHead",
                   ref: rightHead,
-                  data: _ctx.columns.slice(_ctx.columns.length - Number(props.fixRight), _ctx.columns.length),
+                  "checked-all": checkedAll.value,
+                  data: rightColumns.value,
                   onChange: checkedAllChange,
                   onSort: sortChange
-                }, null, 8, ["data"]),
+                }, null, 8, ["checked-all", "data"]),
                 createVNode(TableBody, {
                   ref_key: "rightBody",
                   ref: rightBody,
                   data: _ctx.data,
-                  "column-data": _ctx.columns.slice(_ctx.columns.length - Number(_ctx.fixRight), _ctx.columns.length),
+                  "column-data": rightLeafColumns.value,
                   onChange: change
                 }, createSlots({
                   detail: withCtx((slotProps) => [
@@ -671,10 +852,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                 createVNode(TableHead, {
                   ref_key: "rightTopHead",
                   ref: rightTopHead,
-                  data: _ctx.columns.slice(_ctx.columns.length - Number(props.fixRight), _ctx.columns.length),
+                  "checked-all": checkedAll.value,
+                  data: rightColumns.value,
                   onChange: checkedAllChange,
                   onSort: sortChange
-                }, null, 8, ["data"])
+                }, null, 8, ["checked-all", "data"])
               ],
               512
               /* NEED_PATCH */