@touchvue/ui 1.0.0-beta.5 → 1.0.0-beta.50

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

@@ -3,8 +3,9 @@
 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');
 
 const __default__ = vue.defineComponent({
   name: "ToTable"
@@ -12,15 +13,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;
@@ -53,6 +61,11 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         classes.push("height-full");
       if (props.mode)
         classes.push(`mode-${props.mode}`);
+      if (props.wrap)
+        classes.push("is-wrap");
+      if (isSetWidth()) {
+        classes.push("is-fixed");
+      }
       return classes;
     });
     const setStyle = vue.computed(() => {
@@ -62,6 +75,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,12 +124,21 @@ 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;
@@ -132,75 +172,88 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     }
     function syncThWidth() {
-      if (props.columns.length > 0) {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+      if (props.columns.length > 0 && bodyHead.value && bodyHead.value.row) {
         const trs = bodyHead.value.row.children;
-        if (Number(props.fixTop) > 0 && topHead.value) {
+        if (Number(props.fixTop) > 0 && topHead.value && topHead.value.row) {
           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";
+            const ths = (_a = trs[i]) == null ? void 0 : _a.children;
+            const topThs = (_b = topTrs[i]) == null ? void 0 : _b.children;
+            if (ths && topThs) {
+              for (let j = 0; j < ths.length; j++) {
+                const th = ths[j];
+                const topTh = topThs[j];
+                if (th && topTh) {
+                  topTh.style.width = th.getBoundingClientRect().width + "px";
+                }
+              }
             }
           }
         }
-        if (Number(props.fixLeft) > 0 && leftHead.value) {
+        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 = trs[i].children;
-            const leftThs = leftTrs[i].children;
-            if (leftThs.length > 0) {
+            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) {
               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 (th && leftTh) {
+                  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;
+          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 = 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";
+              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) {
+                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 (Number(props.fixRight) > 0 && rightHead.value) {
+        if (Number(props.fixRight) > 0 && rightHead.value && rightHead.value.row) {
           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) {
+            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];
-                rightTh.style.width = th.getBoundingClientRect().width + "px";
-                rightTh.style.height = th.getBoundingClientRect().height + "px";
+                if (th && rightTh) {
+                  rightTh.style.width = th.getBoundingClientRect().width + "px";
+                  rightTh.style.height = th.getBoundingClientRect().height + "px";
+                }
               }
             }
           }
-          if (Number(props.fixTop) > 0 && rightTopHead.value) {
+          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 = 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";
+              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";
+                  }
                 }
               }
             }
@@ -251,6 +304,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 +317,27 @@ 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) {
       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);
@@ -295,161 +365,329 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       setArr(props.columns);
       return arr;
     });
+    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(_ctx.columns, (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": _ctx.columns,
+                  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,
+                  data: _ctx.columns,
+                  onChange: checkedAllChange,
+                  onSort: sortChange
+                }, null, 8, ["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,
+                  data: _ctx.columns.slice(0, Number(props.fixLeft)),
+                  onChange: checkedAllChange,
+                  onSort: sortChange
+                }, null, 8, ["data"]),
+                vue.createVNode(tableBody.default, {
+                  ref_key: "leftBody",
+                  ref: leftBody,
+                  data: _ctx.data,
+                  "column-data": _ctx.columns.slice(0, Number(props.fixLeft)),
+                  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,
+                  data: _ctx.columns.slice(0, Number(props.fixLeft)),
+                  onChange: checkedAllChange,
+                  onSort: sortChange
+                }, null, 8, ["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,
+                  data: _ctx.columns.slice(_ctx.columns.length - Number(props.fixRight), _ctx.columns.length),
+                  onChange: checkedAllChange,
+                  onSort: sortChange
+                }, null, 8, ["data"]),
+                vue.createVNode(tableBody.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
+                }, 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,
+                  data: _ctx.columns.slice(_ctx.columns.length - Number(props.fixRight), _ctx.columns.length),
+                  onChange: checkedAllChange,
+                  onSort: sortChange
+                }, null, 8, ["data"])
+              ],
+              512
+              /* NEED_PATCH */
+            )
+          ],
+          512
+          /* NEED_PATCH */
+        )) : vue.createCommentVNode("v-if", true)
+      ], 14, ["flex"]);
     };
   }
 });