@touchvue/ui 1.0.0-beta.6 → 1.0.0-beta.60

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

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var tableHead_vue_vue_type_script_setup_true_lang = require('./table-head.vue2.js');
-var tableBody_vue_vue_type_script_setup_true_lang = require('./table-body.vue2.js');
+var tableHead = require('./table-head.vue.js');
+var tableBody = require('./table-body.vue.js');
+var index = require('../../../locale/index.js');
+var useSetClass = require('../../../hooks/useSetClass.js');
 
 const __default__ = vue.defineComponent({
   name: "ToTable"
@@ -12,15 +14,22 @@ const __default__ = vue.defineComponent({
 var _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...__default__,
   props: {
+    flex: { type: Boolean, default: false },
     columns: { default: () => [] },
     data: { default: () => [] },
     height: { default: "" },
     fixTop: { default: 0 },
     fixLeft: { default: 0 },
     fixRight: { default: 0 },
-    mode: { default: "default" }
+    mode: { default: "default" },
+    wrap: { type: Boolean, default: false },
+    thWrap: { type: Boolean, default: false },
+    emptyText: { default: "" },
+    modelValue: { default: "" },
+    valueKeys: { default: "_id" },
+    sortFunction: { type: [Function, null], default: null }
   },
-  emits: ["change"],
+  emits: ["change", "update:modelValue", "sort", "detailChange"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
@@ -52,7 +61,12 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       if (props.height === "full")
         classes.push("height-full");
       if (props.mode)
-        classes.push(`mode-${props.mode}`);
+        classes.push(...useSetClass.getModeClasses(props.mode));
+      if (props.wrap)
+        classes.push("is-wrap");
+      if (isSetWidth()) {
+        classes.push("is-fixed");
+      }
       return classes;
     });
     const setStyle = vue.computed(() => {
@@ -62,6 +76,24 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
       return obj;
     });
+    vue.watch(
+      () => props.modelValue,
+      (val) => {
+        vue.nextTick(() => {
+          bodyBody.value.setCheckData(val, props.valueKeys);
+          if (Number(props.fixLeft) > 0) {
+            leftBody.value.setCheckData(val, props.valueKeys);
+          }
+          if (Number(props.fixRight) > 0) {
+            rightBody.value.setCheckData(val, props.valueKeys);
+          }
+        });
+      },
+      { immediate: true, deep: true }
+    );
+    function isSetWidth() {
+      return props.columns.some((item) => item.width);
+    }
     function getBarWidth() {
       var scrollTester = document.createElement("div");
       scrollTester.id = "scrollTester";
@@ -93,20 +125,27 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         setFix();
       }, 200)();
     }
+    vue.watch(
+      () => props.data,
+      () => {
+        vue.nextTick(() => {
+          setFix();
+        });
+      },
+      { immediate: true, deep: true }
+    );
     function setFix() {
-      setTimeout(() => {
+      vue.nextTick(() => {
         setFixDiv();
         syncThWidth();
         syncTrHeight();
-      }, 200);
+      });
     }
     function hasVScroll() {
       return bodyTable.value.offsetHeight > $el.value.offsetHeight;
     }
-    function hasHScroll() {
-      return bodyTable.value.offsetWidth > $el.value.offsetWidth;
-    }
     function setFixDiv() {
+      const fixedHeight = props.height && $el.value ? $el.value.offsetHeight - getBarWidth() + "px" : "";
       if (Number(props.fixTop) > 0 && top.value && topTable.value) {
         if (hasVScroll()) {
           top.value.style.width = body.value.offsetWidth - getBarWidth() + "px";
@@ -115,14 +154,12 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         bodyTable.value.style.width = bodyTable.value.offsetWidth + "px";
       }
       if (Number(props.fixLeft) > 0 && left.value && $el.value) {
-        if (hasHScroll()) {
-          left.value.style.height = $el.value.offsetHeight - getBarWidth() + "px";
-        }
+        if (fixedHeight)
+          left.value.style.height = fixedHeight;
       }
       if (Number(props.fixRight) > 0 && right.value && $el.value) {
-        if (hasHScroll()) {
-          right.value.style.height = $el.value.offsetHeight - getBarWidth() + "px";
-        }
+        if (fixedHeight)
+          right.value.style.height = fixedHeight;
         if (hasVScroll()) {
           right.value.style.right = getBarWidth() + "px";
           if (Number(props.fixTop) > 0) {
@@ -132,79 +169,70 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     }
     function syncThWidth() {
-      if (props.columns.length > 0) {
-        const trs = bodyHead.value.row.children;
-        if (Number(props.fixTop) > 0 && topHead.value) {
-          const topTrs = topHead.value.row.children;
-          for (let i = 0; i < topTrs.length; i++) {
-            const ths = trs[i].children;
-            const topThs = topTrs[i].children;
-            for (let j = 0; j < ths.length; j++) {
-              const th = ths[j];
-              const topTh = topThs[j];
-              topTh.style.width = th.getBoundingClientRect().width + "px";
-            }
-          }
-        }
-        if (Number(props.fixLeft) > 0 && leftHead.value) {
-          const leftTrs = leftHead.value.row.children;
-          for (let i = 0; i < leftTrs.length; i++) {
-            const ths = trs[i].children;
-            const leftThs = leftTrs[i].children;
-            if (leftThs.length > 0) {
-              for (let j = 0; j < leftThs.length; j++) {
-                const th = ths[j];
-                const leftTh = leftThs[j];
-                leftTh.style.width = th.getBoundingClientRect().width + "px";
-                leftTh.style.height = th.getBoundingClientRect().height + "px";
-              }
-            }
-          }
-          if (Number(props.fixTop) > 0 && leftTopHead.value) {
-            const leftTopTrs = leftTopHead.value.$refs.row.children;
-            for (let i = 0; i < leftTopTrs.length; i++) {
-              const ths = trs[i].children;
-              const leftTopThs = leftTopTrs[i].children;
-              if (leftTopThs.length > 0) {
-                for (let i2 = 0; i2 < leftTopThs.length; i2++) {
-                  const th = ths[i2];
-                  const leftTopTh = leftTopThs[i2];
-                  leftTopTh.style.width = th.getBoundingClientRect().width + "px";
-                  leftTopTh.style.height = th.getBoundingClientRect().height + "px";
-                }
-              }
+      var _a;
+      if (!leafColumns.value.length || !((_a = bodyHead.value) == null ? void 0 : _a.row))
+        return;
+      const sourceGrid = getHeaderGrid(bodyHead.value.row);
+      const leafRow = sourceGrid[sourceGrid.length - 1];
+      const rightLeafStart = leafColumns.value.length - Number(props.fixRight);
+      if (Number(props.fixTop) > 0)
+        syncHeaderSize(topHead.value, sourceGrid, leafRow, 0);
+      if (Number(props.fixLeft) > 0) {
+        syncHeaderSize(leftHead.value, sourceGrid, leafRow, 0);
+        if (Number(props.fixTop) > 0)
+          syncHeaderSize(leftTopHead.value, sourceGrid, leafRow, 0);
+      }
+      if (Number(props.fixRight) > 0) {
+        syncHeaderSize(rightHead.value, sourceGrid, leafRow, rightLeafStart);
+        if (Number(props.fixTop) > 0)
+          syncHeaderSize(rightTopHead.value, sourceGrid, leafRow, rightLeafStart);
+      }
+    }
+    function getHeaderGrid(head) {
+      const grid = [];
+      const rows = Array.from(head.rows);
+      for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+        if (!grid[rowIndex])
+          grid[rowIndex] = [];
+        let leafIndex = 0;
+        for (const th of Array.from(rows[rowIndex].cells)) {
+          while (grid[rowIndex][leafIndex])
+            leafIndex++;
+          const colspan = th.colSpan || 1;
+          const rowspan = th.rowSpan || 1;
+          for (let rowOffset = 0; rowOffset < rowspan; rowOffset++) {
+            if (!grid[rowIndex + rowOffset])
+              grid[rowIndex + rowOffset] = [];
+            for (let columnOffset = 0; columnOffset < colspan; columnOffset++) {
+              grid[rowIndex + rowOffset][leafIndex + columnOffset] = th;
             }
           }
+          leafIndex += colspan;
         }
-        if (Number(props.fixRight) > 0 && rightHead.value) {
-          const rightTrs = rightHead.value.row.children;
-          for (let i = 0; i < rightTrs.length; i++) {
-            const ths = trs[i].children;
-            const rightThs = rightTrs[i].children;
-            if (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];
-                rightTh.style.width = th.getBoundingClientRect().width + "px";
-                rightTh.style.height = th.getBoundingClientRect().height + "px";
-              }
-            }
-          }
-          if (Number(props.fixTop) > 0 && rightTopHead.value) {
-            const rightTopTrs = rightTopHead.value.row.children;
-            for (let i = 0; i < rightTopTrs.length; i++) {
-              const ths = trs[i].children;
-              const rightTopThs = rightTopTrs[i].children;
-              if (rightTopThs.length > 0) {
-                for (let i2 = ths.length - rightTopThs.length; i2 < ths.length; i2++) {
-                  const th = ths[i2];
-                  const rightTopTh = rightTopThs[i2 - ths.length + rightTopThs.length];
-                  rightTopTh.style.width = th.getBoundingClientRect().width + "px";
-                  rightTopTh.style.height = th.getBoundingClientRect().height + "px";
-                }
-              }
-            }
+      }
+      return grid;
+    }
+    function syncHeaderSize(head, sourceGrid, leafRow, leafStart) {
+      var _a, _b;
+      if (!(head == null ? void 0 : head.row))
+        return;
+      const targetGrid = getHeaderGrid(head.row);
+      const syncedCells = /* @__PURE__ */ new Set();
+      for (let rowIndex = 0; rowIndex < targetGrid.length; rowIndex++) {
+        for (let leafIndex = 0; leafIndex < targetGrid[rowIndex].length; leafIndex++) {
+          const targetTh = targetGrid[rowIndex][leafIndex];
+          if (!targetTh || syncedCells.has(targetTh))
+            continue;
+          syncedCells.add(targetTh);
+          const sourceTh = (_a = sourceGrid[rowIndex]) == null ? void 0 : _a[leafStart + leafIndex];
+          if (!sourceTh)
+            continue;
+          let width = 0;
+          for (let offset = 0; offset < targetTh.colSpan; offset++) {
+            width += ((_b = leafRow == null ? void 0 : leafRow[leafStart + leafIndex + offset]) == null ? void 0 : _b.getBoundingClientRect().width) || 0;
           }
+          targetTh.style.width = width + "px";
+          targetTh.style.height = sourceTh.getBoundingClientRect().height + "px";
         }
       }
     }
@@ -251,6 +279,9 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       });
       return flag;
     });
+    function sortChange(sortInfo) {
+      emit("sort", sortInfo);
+    }
     const hasCheck = vue.computed(() => {
       let flag = false;
       props.columns.map((item) => {
@@ -261,13 +292,28 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return flag;
     });
     function change(rows, checked, isAll) {
+      if (rows) {
+        let ids = "";
+        if (Array.isArray(rows)) {
+          ids = rows.map((item) => item[props.valueKeys]);
+        } else {
+          ids = rows[props.valueKeys];
+        }
+        emit("update:modelValue", ids);
+      } else {
+        emit("update:modelValue", "");
+      }
       emit("change", rows, checked, isAll);
       checkedAll.value = isAll;
     }
     function checkedAllChange(isAll) {
+      checkedAll.value = isAll;
       if (isAll) {
+        let ids = props.data.map((item) => item[props.valueKeys]);
+        emit("update:modelValue", ids);
         emit("change", props.data, true, true);
       } else {
+        emit("update:modelValue", []);
         emit("change", [], false, false);
       }
       bodyBody.value.checkAll(isAll);
@@ -278,178 +324,382 @@ 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 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 = vue.computed(() => getLeafColumns(props.columns));
+    const leftColumns = vue.computed(() => {
+      if (Number(props.fixLeft) <= 0)
+        return [];
+      return pruneColumnTree(props.columns, 0, Number(props.fixLeft));
+    });
+    const leftLeafColumns = vue.computed(() => getLeafColumns(leftColumns.value));
+    const rightColumns = vue.computed(() => {
+      if (Number(props.fixRight) <= 0)
+        return [];
+      const totalLeaves = leafColumns.value.length;
+      return pruneColumnTree(props.columns, totalLeaves - Number(props.fixRight), Number(props.fixRight));
+    });
+    const rightLeafColumns = vue.computed(() => getLeafColumns(rightColumns.value));
+    const flattenColumns = vue.computed(() => {
+      return leafColumns.value;
+    });
+    function getColWidth(column) {
+      if (column.width) {
+        if (isNaN(Number(column.width))) {
+          return column.width;
+        } else {
+          return column.width + "em";
+        }
+      }
+    }
+    const handleTheadCellClick = (column, type) => {
+      if (props.sortFunction) {
+        props.sortFunction(column, type);
+      }
+    };
+    const hanldeDetailChange = (column, index, value) => {
+      emit("detailChange", column, index, value);
+    };
+    vue.provide("TableRef", {
+      handleTheadCellClick,
+      hanldeDetailChange
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         ref_key: "$el",
         ref: $el,
+        key: vue.unref(index.langKey),
+        flex: _ctx.flex ? _ctx.flex : null,
         class: vue.normalizeClass(["to-table", setClass.value]),
         style: vue.normalizeStyle(setStyle.value)
       }, [
-        vue.createElementVNode("div", {
-          ref_key: "body",
-          ref: body,
-          class: "to-table-wrapper",
-          onScroll: scrollHandle
-        }, [
-          vue.createElementVNode("table", {
-            ref_key: "bodyTable",
-            ref: bodyTable,
-            class: "to-table-table"
-          }, [
-            vue.createVNode(tableHead_vue_vue_type_script_setup_true_lang.default, {
-              ref_key: "bodyHead",
-              ref: bodyHead,
-              "checked-all": checkedAll.value,
-              data: _ctx.columns,
-              onChange: checkedAllChange
-            }, null, 8, ["checked-all", "data"]),
-            vue.createVNode(tableBody_vue_vue_type_script_setup_true_lang.default, {
-              ref_key: "bodyBody",
-              ref: bodyBody,
-              type: hasRadio.value ? "radio" : hasCheck.value ? "check" : "",
-              data: _ctx.data,
-              "checked-all": checkedAll.value,
-              "column-data": _ctx.columns,
-              onChange: change
-            }, vue.createSlots({ _: 2 }, [
-              vue.renderList(flattenColumns.value, (columnItem) => {
-                return {
-                  name: columnItem.prop,
-                  fn: vue.withCtx((slotProps) => [
-                    vue.renderSlot(_ctx.$slots, columnItem.prop, vue.normalizeProps(vue.guardReactiveProps(slotProps)))
-                  ])
-                };
-              })
-            ]), 1032, ["type", "data", "checked-all", "column-data"])
-          ], 512)
-        ], 544),
-        Number(_ctx.fixTop) > 0 ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
-          ref_key: "top",
-          ref: top,
-          class: "to-table-top"
-        }, [
-          vue.createElementVNode("table", {
-            ref_key: "topTable",
-            ref: topTable,
-            class: "to-table-table"
-          }, [
-            vue.createVNode(tableHead_vue_vue_type_script_setup_true_lang.default, {
-              ref_key: "topHead",
-              ref: topHead,
-              data: _ctx.columns,
-              onChange: checkedAllChange
-            }, null, 8, ["data"])
-          ], 512)
-        ], 512)) : vue.createCommentVNode("", true),
-        Number(_ctx.fixLeft) > 0 ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 1,
-          ref_key: "left",
-          ref: left,
-          class: "to-table-left"
-        }, [
-          vue.createElementVNode("table", {
-            ref_key: "leftTable",
-            ref: leftTable,
-            class: "to-table-table"
-          }, [
-            vue.createVNode(tableHead_vue_vue_type_script_setup_true_lang.default, {
-              ref_key: "leftHead",
-              ref: leftHead,
-              data: _ctx.columns.slice(0, Number(props.fixLeft)),
-              onChange: checkedAllChange
-            }, null, 8, ["data"]),
-            vue.createVNode(tableBody_vue_vue_type_script_setup_true_lang.default, {
-              ref_key: "leftBody",
-              ref: leftBody,
-              data: _ctx.data,
-              "column-data": _ctx.columns.slice(0, Number(props.fixLeft)),
-              onChange: change
-            }, null, 8, ["data", "column-data"])
-          ], 512)
-        ], 512)) : vue.createCommentVNode("", true),
-        Number(_ctx.fixLeft) > 0 && Number(_ctx.fixTop) > 0 ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 2,
-          ref_key: "leftTop",
-          ref: leftTop,
-          class: "to-table-left-top"
-        }, [
-          vue.createElementVNode("table", {
-            ref_key: "leftTopTable",
-            ref: leftTopTable,
-            class: "to-table-table"
-          }, [
-            vue.createVNode(tableHead_vue_vue_type_script_setup_true_lang.default, {
-              ref_key: "leftTopHead",
-              ref: leftTopHead,
-              data: _ctx.columns.slice(0, Number(props.fixLeft)),
-              onChange: checkedAllChange
-            }, null, 8, ["data"])
-          ], 512)
-        ], 512)) : vue.createCommentVNode("", true),
-        Number(_ctx.fixRight) > 0 ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 3,
-          ref_key: "right",
-          ref: right,
-          class: "to-table-right"
-        }, [
-          vue.createElementVNode("table", {
-            ref_key: "rightTable",
-            ref: rightTable,
-            class: "to-table-table"
-          }, [
-            vue.createVNode(tableHead_vue_vue_type_script_setup_true_lang.default, {
-              ref_key: "rightHead",
-              ref: rightHead,
-              data: _ctx.columns.slice(_ctx.columns.length - Number(props.fixRight), _ctx.columns.length),
-              onChange: checkedAllChange
-            }, null, 8, ["data"]),
-            vue.createVNode(tableBody_vue_vue_type_script_setup_true_lang.default, {
-              ref_key: "rightBody",
-              ref: rightBody,
-              data: _ctx.data,
-              "column-data": _ctx.columns.slice(_ctx.columns.length - Number(_ctx.fixRight), _ctx.columns.length),
-              onChange: change
-            }, null, 8, ["data", "column-data"])
-          ], 512)
-        ], 512)) : vue.createCommentVNode("", true),
-        Number(_ctx.fixRight) > 0 && Number(_ctx.fixTop) > 0 ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 4,
-          ref_key: "rightTop",
-          ref: rightTop,
-          class: "to-table-right-top"
-        }, [
-          vue.createElementVNode("table", {
-            ref_key: "rightTopTable",
-            ref: rightTopTable,
-            class: "to-table-table"
-          }, [
-            vue.createVNode(tableHead_vue_vue_type_script_setup_true_lang.default, {
-              ref_key: "rightTopHead",
-              ref: rightTopHead,
-              data: _ctx.columns.slice(_ctx.columns.length - Number(_ctx.fixRight), _ctx.columns.length),
-              onChange: checkedAllChange
-            }, null, 8, ["data"])
-          ], 512)
-        ], 512)) : vue.createCommentVNode("", true)
-      ], 6);
+        vue.createElementVNode(
+          "div",
+          {
+            ref_key: "body",
+            ref: body,
+            class: "to-table-wrapper",
+            onScroll: scrollHandle
+          },
+          [
+            vue.createElementVNode(
+              "table",
+              {
+                ref_key: "bodyTable",
+                ref: bodyTable,
+                class: "to-table-table"
+              },
+              [
+                vue.createElementVNode("colgroup", null, [
+                  (vue.openBlock(true), vue.createElementBlock(
+                    vue.Fragment,
+                    null,
+                    vue.renderList(leafColumns.value, (item, index) => {
+                      return vue.openBlock(), vue.createElementBlock(
+                        "col",
+                        {
+                          key: index,
+                          class: vue.normalizeClass([item.type ? `type-${item.type}` : "", "to-table-col"]),
+                          style: vue.normalizeStyle({ width: getColWidth(item) })
+                        },
+                        null,
+                        6
+                        /* CLASS, STYLE */
+                      );
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ]),
+                vue.createVNode(tableHead.default, {
+                  ref_key: "bodyHead",
+                  ref: bodyHead,
+                  "checked-all": checkedAll.value,
+                  data: _ctx.columns,
+                  onChange: checkedAllChange,
+                  onSort: sortChange
+                }, null, 8, ["checked-all", "data"]),
+                vue.createVNode(tableBody.default, {
+                  ref_key: "bodyBody",
+                  ref: bodyBody,
+                  type: hasRadio.value ? "radio" : hasCheck.value ? "check" : "",
+                  data: _ctx.data,
+                  "checked-all": checkedAll.value,
+                  "column-data": leafColumns.value,
+                  onChange: change
+                }, vue.createSlots({
+                  detail: vue.withCtx((slotProps) => [
+                    vue.renderSlot(_ctx.$slots, "detail", vue.normalizeProps(vue.guardReactiveProps(slotProps)))
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                }, [
+                  vue.renderList(flattenColumns.value, (columnItem) => {
+                    return {
+                      name: columnItem.prop,
+                      fn: vue.withCtx((slotProps) => [
+                        vue.renderSlot(_ctx.$slots, columnItem.prop, vue.normalizeProps(vue.guardReactiveProps(slotProps)))
+                      ])
+                    };
+                  })
+                ]), 1032, ["type", "data", "checked-all", "column-data"])
+              ],
+              512
+              /* NEED_PATCH */
+            ),
+            !_ctx.data.length ? (vue.openBlock(), vue.createElementBlock(
+              "div",
+              {
+                key: 0,
+                class: "to-table-empty"
+              },
+              vue.toDisplayString(props.emptyText || vue.unref(index.t)("to.table.emptyText")),
+              1
+              /* TEXT */
+            )) : vue.createCommentVNode("v-if", true)
+          ],
+          544
+          /* NEED_HYDRATION, NEED_PATCH */
+        ),
+        Number(_ctx.fixTop) > 0 ? (vue.openBlock(), vue.createElementBlock(
+          "div",
+          {
+            key: 0,
+            ref_key: "top",
+            ref: top,
+            class: "to-table-top"
+          },
+          [
+            vue.createElementVNode(
+              "table",
+              {
+                ref_key: "topTable",
+                ref: topTable,
+                class: "to-table-table"
+              },
+              [
+                vue.createVNode(tableHead.default, {
+                  ref_key: "topHead",
+                  ref: topHead,
+                  "checked-all": checkedAll.value,
+                  data: _ctx.columns,
+                  onChange: checkedAllChange,
+                  onSort: sortChange
+                }, null, 8, ["checked-all", "data"])
+              ],
+              512
+              /* NEED_PATCH */
+            )
+          ],
+          512
+          /* NEED_PATCH */
+        )) : vue.createCommentVNode("v-if", true),
+        Number(_ctx.fixLeft) > 0 ? (vue.openBlock(), vue.createElementBlock(
+          "div",
+          {
+            key: 1,
+            ref_key: "left",
+            ref: left,
+            class: "to-table-left"
+          },
+          [
+            vue.createElementVNode(
+              "table",
+              {
+                ref_key: "leftTable",
+                ref: leftTable,
+                class: "to-table-table"
+              },
+              [
+                vue.createVNode(tableHead.default, {
+                  ref_key: "leftHead",
+                  ref: leftHead,
+                  "checked-all": checkedAll.value,
+                  data: leftColumns.value,
+                  onChange: checkedAllChange,
+                  onSort: sortChange
+                }, null, 8, ["checked-all", "data"]),
+                vue.createVNode(tableBody.default, {
+                  ref_key: "leftBody",
+                  ref: leftBody,
+                  data: _ctx.data,
+                  "column-data": leftLeafColumns.value,
+                  onChange: change
+                }, vue.createSlots({
+                  detail: vue.withCtx((slotProps) => [
+                    vue.renderSlot(_ctx.$slots, "detail", vue.normalizeProps(vue.guardReactiveProps(slotProps)))
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                }, [
+                  vue.renderList(flattenColumns.value, (columnItem) => {
+                    return {
+                      name: columnItem.prop,
+                      fn: vue.withCtx((slotProps) => [
+                        vue.renderSlot(_ctx.$slots, columnItem.prop, vue.normalizeProps(vue.guardReactiveProps(slotProps)))
+                      ])
+                    };
+                  })
+                ]), 1032, ["data", "column-data"])
+              ],
+              512
+              /* NEED_PATCH */
+            )
+          ],
+          512
+          /* NEED_PATCH */
+        )) : vue.createCommentVNode("v-if", true),
+        Number(_ctx.fixLeft) > 0 && Number(_ctx.fixTop) > 0 ? (vue.openBlock(), vue.createElementBlock(
+          "div",
+          {
+            key: 2,
+            ref_key: "leftTop",
+            ref: leftTop,
+            class: "to-table-left-top"
+          },
+          [
+            vue.createElementVNode(
+              "table",
+              {
+                ref_key: "leftTopTable",
+                ref: leftTopTable,
+                class: "to-table-table"
+              },
+              [
+                vue.createVNode(tableHead.default, {
+                  ref_key: "leftTopHead",
+                  ref: leftTopHead,
+                  "checked-all": checkedAll.value,
+                  data: leftColumns.value,
+                  onChange: checkedAllChange,
+                  onSort: sortChange
+                }, null, 8, ["checked-all", "data"])
+              ],
+              512
+              /* NEED_PATCH */
+            )
+          ],
+          512
+          /* NEED_PATCH */
+        )) : vue.createCommentVNode("v-if", true),
+        Number(_ctx.fixRight) > 0 ? (vue.openBlock(), vue.createElementBlock(
+          "div",
+          {
+            key: 3,
+            ref_key: "right",
+            ref: right,
+            class: "to-table-right"
+          },
+          [
+            vue.createElementVNode(
+              "table",
+              {
+                ref_key: "rightTable",
+                ref: rightTable,
+                class: "to-table-table"
+              },
+              [
+                vue.createVNode(tableHead.default, {
+                  ref_key: "rightHead",
+                  ref: rightHead,
+                  "checked-all": checkedAll.value,
+                  data: rightColumns.value,
+                  onChange: checkedAllChange,
+                  onSort: sortChange
+                }, null, 8, ["checked-all", "data"]),
+                vue.createVNode(tableBody.default, {
+                  ref_key: "rightBody",
+                  ref: rightBody,
+                  data: _ctx.data,
+                  "column-data": rightLeafColumns.value,
+                  onChange: change
+                }, vue.createSlots({
+                  detail: vue.withCtx((slotProps) => [
+                    vue.renderSlot(_ctx.$slots, "detail", vue.normalizeProps(vue.guardReactiveProps(slotProps)))
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                }, [
+                  vue.renderList(flattenColumns.value, (columnItem) => {
+                    return {
+                      name: columnItem.prop,
+                      fn: vue.withCtx((slotProps) => [
+                        vue.renderSlot(_ctx.$slots, columnItem.prop, vue.normalizeProps(vue.guardReactiveProps(slotProps)))
+                      ])
+                    };
+                  })
+                ]), 1032, ["data", "column-data"])
+              ],
+              512
+              /* NEED_PATCH */
+            )
+          ],
+          512
+          /* NEED_PATCH */
+        )) : vue.createCommentVNode("v-if", true),
+        Number(_ctx.fixRight) > 0 && Number(_ctx.fixTop) > 0 ? (vue.openBlock(), vue.createElementBlock(
+          "div",
+          {
+            key: 4,
+            ref_key: "rightTop",
+            ref: rightTop,
+            class: "to-table-right-top"
+          },
+          [
+            vue.createElementVNode(
+              "table",
+              {
+                ref_key: "rightTopTable",
+                ref: rightTopTable,
+                class: "to-table-table"
+              },
+              [
+                vue.createVNode(tableHead.default, {
+                  ref_key: "rightTopHead",
+                  ref: rightTopHead,
+                  "checked-all": checkedAll.value,
+                  data: rightColumns.value,
+                  onChange: checkedAllChange,
+                  onSort: sortChange
+                }, null, 8, ["checked-all", "data"])
+              ],
+              512
+              /* NEED_PATCH */
+            )
+          ],
+          512
+          /* NEED_PATCH */
+        )) : vue.createCommentVNode("v-if", true)
+      ], 14, ["flex"]);
     };
   }
 });