lew-ui 2.6.6 → 2.6.8

package/dist/index.mjs

@@ -7454,7 +7454,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
             delay: props2.delay,
             duration: [250, 250],
             content: text ? sanitizeHtml(text) : lewTextTrimPopRef.value,
-            animation: "scale",
+            animation: "scale-subtle",
             hideOnClick: false,
             interactive: true,
             appendTo: () => document.body,
@@ -7578,7 +7578,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LewTextTrim = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-fb6a0a04"]]);
+const LewTextTrim = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-94021c25"]]);
 const flexProps = {
   direction: {
     type: String,
@@ -8238,7 +8238,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LewMenu = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-4af03d56"]]);
+const LewMenu = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-1d41bd92"]]);
 const menuTreeModel = {
   modelValue: {
     type: String,
@@ -8371,7 +8371,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
             "lew-menu-tree-item-label-collapsed": unref(collapsed)
           }]),
           style: normalizeStyle({
-            paddingLeft: unref(collapsed) ? "0px" : _ctx.renderIcon() ? "36px" : "15px"
+            paddingLeft: unref(collapsed) ? "0px" : _ctx.renderIcon() ? "36px" : "11.5px"
           }),
           onClick: withModifiers(change2, ["stop"])
         }, {
@@ -8426,7 +8426,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LewMenuTreeItem = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-cba8e1f9"]]);
+const LewMenuTreeItem = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-ad7b86db"]]);
 const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "LewMenuTree",
   props: /* @__PURE__ */ mergeModels(menuTreeProps, {
@@ -15470,7 +15470,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LewSelect = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-08008d58"]]);
+const LewSelect = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-7a30a8b8"]]);
 const selectMultipleModel = {
   modelValue: {
     type: Array,
@@ -16934,9 +16934,9 @@ const _hoisted_10$1 = { class: "lew-date" };
 const _hoisted_11$1 = { class: "lew-date-control-left" };
 const _hoisted_12$1 = { class: "cur-date" };
 const _hoisted_13$1 = { class: "lew-date-control-right" };
-const _hoisted_14$1 = { class: "lew-date-box" };
-const _hoisted_15$1 = { class: "lew-date-num" };
-const _hoisted_16$1 = ["onClick", "onMouseenter"];
+const _hoisted_14 = { class: "lew-date-box" };
+const _hoisted_15 = { class: "lew-date-num" };
+const _hoisted_16 = ["onClick", "onMouseenter"];
 const _hoisted_17 = {
   key: 0,
   class: "lew-date-item-today"
@@ -17359,13 +17359,13 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }),
-          createElementVNode("div", _hoisted_14$1, [
+          createElementVNode("div", _hoisted_14, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(headDate), (item, index2) => {
               return openBlock(), createElementBlock("div", {
                 key: `h${index2}`,
                 class: "lew-date-item"
               }, [
-                createElementVNode("div", _hoisted_15$1, toDisplayString$1(item), 1)
+                createElementVNode("div", _hoisted_15, toDisplayString$1(item), 1)
               ]);
             }), 128)),
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(state).rightPanel, (item, index2) => {
@@ -17383,7 +17383,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                     class: normalizeClass(["lew-date-value", unref(object2class2)("selected", item)])
                   }, toDisplayString$1(item.showDate), 3)
                 ], 2)
-              ], 42, _hoisted_16$1);
+              ], 42, _hoisted_16);
             }), 128))
           ])
         ])
@@ -21385,6 +21385,11 @@ const tableProps = {
       return true;
     }
   },
+  bordered: {
+    type: Boolean,
+    default: false,
+    description: "是否显示边框"
+  },
   dataSource: {
     type: Array,
     default: () => [],
@@ -21511,25 +21516,22 @@ const SortIcon = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v
 const _hoisted_1$d = { class: "lew-table-wrapper" };
 const _hoisted_2$7 = { class: "lew-table-header" };
 const _hoisted_3$6 = { class: "lew-table-tr" };
-const _hoisted_4$4 = { class: "lew-table-title-span" };
-const _hoisted_5$2 = { class: "lew-table-main" };
+const _hoisted_4$4 = { class: "lew-table-main" };
+const _hoisted_5$2 = { class: "lew-table-tr" };
 const _hoisted_6$1 = { class: "lew-table-tr" };
-const _hoisted_7 = { class: "lew-table-title-span" };
-const _hoisted_8 = { class: "lew-table-tr" };
-const _hoisted_9 = { class: "lew-table-title-span" };
-const _hoisted_10 = {
+const _hoisted_7 = {
   key: 0,
   class: "lew-table-fixed-left"
 };
-const _hoisted_11 = ["onClick", "onMouseenter"];
-const _hoisted_12 = { class: "lew-table-main" };
-const _hoisted_13 = ["onClick", "onMouseenter"];
-const _hoisted_14 = {
+const _hoisted_8 = ["onClick", "onMouseenter"];
+const _hoisted_9 = { class: "lew-table-main" };
+const _hoisted_10 = ["onClick", "onMouseenter"];
+const _hoisted_11 = {
   key: 1,
   class: "lew-table-fixed-right"
 };
-const _hoisted_15 = ["onMouseenter"];
-const _hoisted_16 = { class: "lew-table-footer" };
+const _hoisted_12 = ["onMouseenter"];
+const _hoisted_13 = { class: "lew-table-footer" };
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "LewTable",
   props: /* @__PURE__ */ mergeModels(tableProps, {
@@ -21562,148 +21564,146 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       fixedRightWidth: 0,
       selectedRowsMap: {}
     });
+    const getCheckableWidth = computed(() => {
+      const sizeMap = {
+        small: 50,
+        medium: 60,
+        large: 70
+      };
+      return sizeMap[props2.size];
+    });
+    const getHeadHeight = computed(() => {
+      const sizeMap = {
+        small: 34,
+        medium: 42,
+        large: 50
+      };
+      return sizeMap[props2.size];
+    });
+    const getFontSize = computed(() => {
+      const sizeMap = {
+        small: 13,
+        medium: 14,
+        large: 16
+      };
+      return sizeMap[props2.size];
+    });
+    const getPadding = computed(() => {
+      const paddingMap = {
+        small: "8px 10px",
+        medium: "10px 14px",
+        large: "12px 18px"
+      };
+      return paddingMap[props2.size];
+    });
+    const getEmptyPadding = computed(() => {
+      const paddingMap = {
+        small: 20,
+        medium: 30,
+        large: 40
+      };
+      return paddingMap[props2.size];
+    });
+    const getEmptyProps = computed(() => {
+      const widthMap = {
+        small: 150,
+        medium: 200,
+        large: 250
+      };
+      const fontSizeMap = {
+        small: 13,
+        medium: 14,
+        large: 16
+      };
+      return {
+        width: widthMap[props2.size],
+        fontSize: fontSizeMap[props2.size]
+      };
+    });
+    const calculateColumnWidth = (column) => {
+      if (column.children && column.children.length > 0) {
+        const totalChildWidth = column.children.reduce((sum, child) => {
+          return sum + (calculateColumnWidth(child) || 100);
+        }, 0);
+        column.width = totalChildWidth;
+        return totalChildWidth;
+      }
+      if (!column.width || column.width === 0) {
+        column.width = 100;
+      }
+      return column.width;
+    };
+    const processColumnsWidth = (columns) => {
+      return columns.map((col) => {
+        const cloneCol = { ...col };
+        cloneCol.width = calculateColumnWidth(cloneCol);
+        return cloneCol;
+      });
+    };
+    const formatColumns = computed(() => {
+      return processColumnsWidth(props2.columns);
+    });
     const totalColumnWidth = computed(() => {
-      let width = sumBy(props2.columns, "width");
+      let width = sumBy(formatColumns.value, "width");
       if (props2.checkable) width += getCheckableWidth.value;
       return width;
     });
+    const nonFixedHeaderColumns = computed(() => {
+      return formatColumns.value.filter((col) => !col.fixed);
+    });
+    const getFixedHeaderColumns = computed(() => (direction) => {
+      return formatColumns.value.filter((col) => col.fixed === direction);
+    });
+    const getLeafColumns = (columns) => {
+      const result = [];
+      const traverse = (cols) => {
+        cols.forEach((col) => {
+          if (col.children && col.children.length > 0) {
+            traverse(col.children);
+          } else {
+            result.push(col);
+          }
+        });
+      };
+      traverse(columns);
+      return result;
+    };
     const nonFixedColumns = computed(() => {
-      return props2.columns.filter((col) => !col.fixed);
+      return getLeafColumns(formatColumns.value).filter((col) => !col.fixed);
     });
     const getFixedColumns = computed(() => (direction) => {
-      return props2.columns.filter((col) => col.fixed === direction);
+      return getLeafColumns(formatColumns.value).filter((col) => col.fixed === direction);
+    });
+    const columnLevel = computed(() => {
+      const findMaxDepth = (columns, currentDepth = 1) => {
+        if (!columns || columns.length === 0) return currentDepth;
+        let maxDepth = currentDepth;
+        for (const col of columns) {
+          if (col.children && col.children.length > 0) {
+            const childDepth = findMaxDepth(col.children, currentDepth + 1);
+            maxDepth = Math.max(maxDepth, childDepth);
+          }
+        }
+        return maxDepth;
+      };
+      return findMaxDepth(props2.columns);
     });
     const hasPartialSelection = computed(() => {
       const selectedRowsMap = state.selectedRowsMap;
       return props2.dataSource.some((row) => selectedRowsMap[row[props2.rowKey]]);
     });
-    const getColumnStyle = computed(() => (column, row) => {
-      var _a;
-      const width = column.width;
-      const customStyle = row && ((_a = row.tdStyle) == null ? void 0 : _a[column.field]);
-      const sizeStyle = `padding:${getPadding.value};fontSize:${getFontSize.value}px;`;
-      if (state.isScrollbarVisible || column.fixed) {
-        return `${sizeStyle};width: ${width}px;${customStyle}`;
-      }
-      const fixedWidth = sumBy(
-        props2.columns.filter((col) => col.fixed),
-        "width"
-      ) + (props2.checkable ? getCheckableWidth.value : 0);
-      const tdWidth = width / (totalColumnWidth.value - fixedWidth) * (state.scrollClientWidth - fixedWidth);
-      return `${sizeStyle};width: ${tdWidth}px;${customStyle}`;
-    });
-    watch(
-      () => props2.dataSource,
-      () => {
-        state.selectedRowsMap = mapValues(
-          keyBy(props2.dataSource, props2.rowKey),
-          () => false
-        );
-        updateAllCheckedState();
-      },
-      { deep: true }
-    );
-    watch(selectedKeys, (newVal) => {
-      if (props2.checkable) {
-        updateSelectedKeys(newVal);
-      }
-    });
-    const initTableObserver = () => {
-      resizeObserver = new ResizeObserver(() => {
-        state.isInitialized = false;
-        handleTableResize();
-      });
-      resizeObserver.observe(tableRef.value);
-    };
-    const updateScrollState = () => {
-      const element = tableRef.value;
-      const { clientWidth, scrollWidth, scrollLeft } = element;
-      const scrollThreshold = 10;
-      if (scrollWidth === clientWidth) {
-        state.hiddenScrollLine = "all";
-        return;
-      }
-      if (scrollLeft < scrollThreshold) {
-        state.hiddenScrollLine = "left";
-        return;
-      }
-      if (scrollLeft + clientWidth > scrollWidth - scrollThreshold) {
-        state.hiddenScrollLine = "right";
-        return;
-      }
-      state.hiddenScrollLine = "";
-    };
-    const compTrHeight = () => {
-      nextTick(() => {
-        (trRefArr.value || []).forEach(
-          (element, index2) => {
-            if (element) {
-              trHeightArr.value[index2] = element.getBoundingClientRect().height;
-            }
-          }
-        );
-      });
+    const updateAllCheckedState = () => {
+      const checkedKeys = keys(pickBy(state.selectedRowsMap, Boolean));
+      const allDataKeys = props2.dataSource.map((row) => String(row[props2.rowKey]));
+      const uncheckedKeys = difference(allDataKeys, checkedKeys);
+      state.isAllChecked = isEmpty(uncheckedKeys) && props2.multiple && props2.checkable && checkedKeys.length > 0;
     };
-    watch(
-      () => trRefArr.value,
-      () => {
-        compTrHeight();
-      },
-      {
-        deep: true
-      }
-    );
-    watch(
-      () => props2.dataSource,
-      () => {
-        compTrHeight();
-      },
-      {
-        deep: true
-      }
-    );
-    const handleTableResize = throttle(() => {
-      const table = tableRef.value;
-      if (!table) return;
-      compTrHeight();
-      let totalWidth = props2.columns.reduce(
-        (sum, col) => sum + Number(col.width),
-        0
-      );
-      if (props2.checkable) {
-        totalWidth += getCheckableWidth.value;
-      }
-      if (fixedLeftRef.value) {
-        state.fixedLeftWidth = fixedLeftRef.value.clientWidth || 0;
-      }
-      if (fixedRightRef.value) {
-        state.fixedRightWidth = fixedRightRef.value.clientWidth || 0;
-        if (table.clientHeight < table.scrollHeight) {
-          state.fixedRightWidth += 6;
-        }
-      }
-      state.scrollClientWidth = table.clientWidth;
-      state.isScrollbarVisible = totalWidth > state.scrollClientWidth;
-      state.isInitialized = true;
-      updateScrollState();
-    }, 250);
     const setAllRowsChecked = (checked) => {
-      state.selectedRowsMap = mapValues(
-        keyBy(props2.dataSource, props2.rowKey),
-        () => checked
-      );
+      state.selectedRowsMap = mapValues(keyBy(props2.dataSource, props2.rowKey), () => checked);
       if (props2.multiple) {
         selectedKeys.value = checked ? keys(state.selectedRowsMap) : [];
       }
     };
-    const updateAllCheckedState = () => {
-      const checkedKeys = keys(pickBy(state.selectedRowsMap, Boolean));
-      const allDataKeys = props2.dataSource.map(
-        (row) => String(row[props2.rowKey])
-      );
-      const uncheckedKeys = difference(allDataKeys, checkedKeys);
-      state.isAllChecked = isEmpty(uncheckedKeys) && props2.multiple && props2.checkable && checkedKeys.length > 0;
-    };
     const toggleRowSelection = (row) => {
       if (!props2.checkable) return;
       const rowKey = row[props2.rowKey];
@@ -21720,10 +21720,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
     const updateSelectedKeys = (keys2) => {
       if (props2.multiple) {
-        state.selectedRowsMap = mapValues(
-          keyBy(props2.dataSource, props2.rowKey),
-          () => false
-        );
+        state.selectedRowsMap = mapValues(keyBy(props2.dataSource, props2.rowKey), () => false);
         keys2.forEach((key) => {
           state.selectedRowsMap[key] = true;
         });
@@ -21731,11 +21728,37 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         state.selectedRowsMap = { [keys2]: true };
       }
     };
-    const renderCell = ({
-      column,
-      row,
-      index: index2
-    }) => {
+    const getHeaderColumnStyle = computed(() => (column, row) => {
+      var _a;
+      const width = column.width;
+      const customStyle = row && ((_a = row.tdStyle) == null ? void 0 : _a[column.field]);
+      const sizeStyle = `fontSize:${getFontSize.value}px;`;
+      if (state.isScrollbarVisible || column.fixed) {
+        return `${sizeStyle};width: ${width}px;${customStyle}`;
+      }
+      const fixedWidth = sumBy(
+        formatColumns.value.filter((col) => col.fixed),
+        "width"
+      ) + (props2.checkable ? getCheckableWidth.value : 0);
+      const tdWidth = width / (totalColumnWidth.value - fixedWidth) * (state.scrollClientWidth - fixedWidth);
+      return `${sizeStyle};width: ${tdWidth}px;${customStyle}`;
+    });
+    const getColumnStyle = computed(() => (column, row) => {
+      var _a;
+      const width = column.width;
+      const customStyle = row && ((_a = row.tdStyle) == null ? void 0 : _a[column.field]);
+      const sizeStyle = `padding: ${getPadding.value}; fontSize:${getFontSize.value}px;`;
+      if (state.isScrollbarVisible || column.fixed) {
+        return `${sizeStyle};width: ${width}px;${customStyle}`;
+      }
+      const fixedWidth = sumBy(
+        formatColumns.value.filter((col) => col.fixed),
+        "width"
+      ) + (props2.checkable ? getCheckableWidth.value : 0);
+      const tdWidth = width / (totalColumnWidth.value - fixedWidth) * (state.scrollClientWidth - fixedWidth);
+      return `${sizeStyle};width: ${tdWidth}px;${customStyle}`;
+    });
+    const renderCell = ({ column, row, index: index2 }) => {
       if (column.customRender) {
         return column.customRender({ row, column, index: index2, text: row[column.field] });
       }
@@ -21752,62 +21775,57 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         return isString$1(text) ? text : JSON.stringify(text);
       }
     };
-    const getCheckableWidth = computed(() => {
-      const sizeMap = {
-        small: 50,
-        medium: 60,
-        large: 70
-      };
-      return sizeMap[props2.size];
-    });
-    const getHeadHeight = computed(() => {
-      const sizeMap = {
-        small: 34,
-        medium: 42,
-        large: 50
-      };
-      return sizeMap[props2.size];
-    });
-    const getFontSize = computed(() => {
-      const sizeMap = {
-        small: 13,
-        medium: 14,
-        large: 16
-      };
-      return sizeMap[props2.size];
-    });
-    const getPadding = computed(() => {
-      const paddingMap = {
-        small: "8px 10px",
-        medium: "10px 14px",
-        large: "12px 18px"
-      };
-      return paddingMap[props2.size];
-    });
-    const getEmptyPadding = computed(() => {
-      const paddingMap = {
-        small: 20,
-        medium: 30,
-        large: 40
-      };
-      return paddingMap[props2.size];
-    });
-    const getEmptyProps = computed(() => {
-      const widthMap = {
-        small: 150,
-        medium: 200,
-        large: 250
-      };
-      const fontSizeMap = {
-        small: 13,
-        medium: 14,
-        large: 16
-      };
-      return {
-        width: widthMap[props2.size],
-        fontSize: fontSizeMap[props2.size]
-      };
-    });
+    const readerHeaderTd = ({ column }) => {
+      return h(
+        "div",
+        {
+          class: ["lew-table-td", column.sortable ? "lew-table-td-sortable" : ""],
+          onClick: () => {
+            if (column.sortable) {
+              sort(column);
+            }
+          },
+          style: `display: flex; flex-direction: column; width: ${any2px(
+            column.width
+          )}; justify-content: center; align-items: ${column.x || "start"};`
+        },
+        [
+          h(
+            "span",
+            {
+              style: `padding: ${getPadding.value}; 
+		   display: flex; align-items:center;  justify-content: ${column.x};width: ${any2px(
+                column.width
+              )}; height:100%; box-sizing: border-box; `
+            },
+            [
+              h(
+                "span",
+                {
+                  class: "lew-table-title-span"
+                },
+                [
+                  column == null ? void 0 : column.title,
+                  column.sortable && h(SortIcon, {
+                    "sort-value": sortValue.value[column.field],
+                    size: props2.size,
+                    class: "lew-table-sorter"
+                  })
+                ]
+              )
+            ]
+          ),
+          (column == null ? void 0 : column.children) && column.children.length > 0 ? h(
+            "div",
+            {
+              class: "lew-table-td-group",
+              style: `display: flex;`
+            },
+            column.children.map((child) => readerHeaderTd({ column: child }))
+          ) : null
+        ]
+      );
+    };
     const sort = (column) => {
       var _a;
       if (column.sortable) {
@@ -21830,19 +21848,62 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         emit2("sortChange", cloneDeep(sortValue.value));
       }
     };
-    watch(
-      () => props2.size,
-      () => {
-        nextTick(() => {
-          initTableObserver();
-          updateScrollState();
-          handleTableResize();
-          if (props2.checkable) {
-            updateSelectedKeys(selectedKeys.value);
+    const updateScrollState = () => {
+      const element = tableRef.value;
+      const { clientWidth, scrollWidth, scrollLeft } = element;
+      const scrollThreshold = 10;
+      if (scrollWidth === clientWidth) {
+        state.hiddenScrollLine = "all";
+        return;
+      }
+      if (scrollLeft < scrollThreshold) {
+        state.hiddenScrollLine = "left";
+        return;
+      }
+      if (scrollLeft + clientWidth > scrollWidth - scrollThreshold) {
+        state.hiddenScrollLine = "right";
+        return;
+      }
+      state.hiddenScrollLine = "";
+    };
+    const compTrHeight = () => {
+      nextTick(() => {
+        (trRefArr.value || []).forEach((element, index2) => {
+          if (element) {
+            trHeightArr.value[index2] = element.getBoundingClientRect().height;
           }
         });
+      });
+    };
+    const handleTableResize = throttle(() => {
+      const table = tableRef.value;
+      if (!table) return;
+      compTrHeight();
+      let totalWidth = formatColumns.value.reduce((sum, col) => sum + Number(col.width), 0);
+      if (props2.checkable) {
+        totalWidth += getCheckableWidth.value;
       }
-    );
+      if (fixedLeftRef.value) {
+        state.fixedLeftWidth = fixedLeftRef.value.clientWidth || 0;
+      }
+      if (fixedRightRef.value) {
+        state.fixedRightWidth = fixedRightRef.value.clientWidth || 0;
+        if (table.clientHeight < table.scrollHeight) {
+          state.fixedRightWidth += 6;
+        }
+      }
+      state.scrollClientWidth = table.clientWidth;
+      state.isScrollbarVisible = totalWidth > state.scrollClientWidth;
+      state.isInitialized = true;
+      updateScrollState();
+    }, 250);
+    const initTableObserver = () => {
+      resizeObserver = new ResizeObserver(() => {
+        state.isInitialized = false;
+        handleTableResize();
+      });
+      resizeObserver.observe(tableRef.value);
+    };
     const init = () => {
       nextTick(() => {
         initTableObserver();
@@ -21859,11 +21920,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     onActivated(() => {
       init();
       if (props2.checkable && !props2.rowKey) {
-        throw new Error(
-          "LewTable error: rowKey is required when checkable is enabled!"
-        );
+        throw new Error("LewTable error: rowKey is required when checkable is enabled!");
       }
-      if (props2.columns.some((col) => !col.width)) {
+      if (props2.columns.some(
+        (col) => !col.width && (!col.children || col.children.length === 0)
+      )) {
         throw new Error("LewTable error: width must be set for every column");
       }
     });
@@ -21873,6 +21934,50 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         resizeObserver = null;
       }
     });
+    watch(
+      () => props2.dataSource,
+      () => {
+        state.selectedRowsMap = mapValues(keyBy(props2.dataSource, props2.rowKey), () => false);
+        updateAllCheckedState();
+      },
+      { deep: true }
+    );
+    watch(selectedKeys, (newVal) => {
+      if (props2.checkable) {
+        updateSelectedKeys(newVal);
+      }
+    });
+    watch(
+      () => trRefArr.value,
+      () => {
+        compTrHeight();
+      },
+      {
+        deep: true
+      }
+    );
+    watch(
+      () => props2.dataSource,
+      () => {
+        compTrHeight();
+      },
+      {
+        deep: true
+      }
+    );
+    watch(
+      () => props2.size,
+      () => {
+        nextTick(() => {
+          initTableObserver();
+          updateScrollState();
+          handleTableResize();
+          if (props2.checkable) {
+            updateSelectedKeys(selectedKeys.value);
+          }
+        });
+      }
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$d, [
         createElementVNode("i", {
@@ -21893,20 +21998,20 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           ref_key: "tableRef",
           ref: tableRef,
-          class: "lew-table lew-scrollbar",
+          class: normalizeClass(["lew-table lew-scrollbar", { "lew-table-bordered": _ctx.bordered }]),
           style: normalizeStyle(`max-height: ${unref(any2px)(_ctx.maxHeight)}`),
           onScroll: updateScrollState,
           onMouseleave: _cache[3] || (_cache[3] = ($event) => unref(state).hoverRowIndex = -1)
         }, [
           createElementVNode("div", {
-            class: "lew-table-head",
+            class: normalizeClass(["lew-table-head", { "lew-table-head-bordered": unref(columnLevel) > 1 }]),
             style: normalizeStyle({
               width: unref(totalColumnWidth) + "px",
-              height: unref(getHeadHeight) + "px"
+              height: unref(getHeadHeight) * unref(columnLevel) + unref(columnLevel) * 1 + "px"
             }),
             onMouseenter: _cache[2] || (_cache[2] = ($event) => unref(state).hoverRowIndex = -1)
           }, [
-            unref(getFixedColumns)("left").length > 0 || _ctx.checkable ? (openBlock(), createElementBlock("div", {
+            unref(getFixedHeaderColumns)("left").length > 0 || _ctx.checkable ? (openBlock(), createElementBlock("div", {
               key: 0,
               ref_key: "fixedLeftRef",
               ref: fixedLeftRef,
@@ -21934,100 +22039,59 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 1
                 }, 8, ["style"])) : createCommentVNode("", true),
-                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getFixedColumns)("left"), (column, index2) => {
-                  return openBlock(), createBlock(unref(LewFlex), {
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getFixedHeaderColumns)("left"), (column, index2) => {
+                  return openBlock(), createBlock(readerHeaderTd, {
+                    column,
                     key: `columns${index2}`,
-                    class: normalizeClass(["lew-table-td", { "lew-table-td-sortable": column.sortable }]),
                     x: column.x || "start",
                     y: column.y,
-                    style: normalizeStyle(unref(getColumnStyle)(column)),
-                    gap: "5",
-                    onClick: ($event) => sort(column)
-                  }, {
-                    default: withCtx(() => [
-                      createElementVNode("span", _hoisted_4$4, [
-                        createTextVNode(toDisplayString$1(column.title) + " ", 1),
-                        column.sortable ? (openBlock(), createBlock(SortIcon, {
-                          key: 0,
-                          "sort-value": sortValue.value[column.field],
-                          size: _ctx.size,
-                          class: "lew-table-sorter"
-                        }, null, 8, ["sort-value", "size"])) : createCommentVNode("", true)
-                      ])
-                    ]),
-                    _: 2
-                  }, 1032, ["class", "x", "y", "style", "onClick"]);
+                    style: normalizeStyle(unref(getHeaderColumnStyle)(column)),
+                    gap: "5"
+                  }, null, 8, ["column", "x", "y", "style"]);
                 }), 128))
               ])
             ], 512)) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_5$2, [
-              createElementVNode("div", _hoisted_6$1, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(nonFixedColumns), (column, index2) => {
-                  return openBlock(), createBlock(unref(LewFlex), {
+            createElementVNode("div", _hoisted_4$4, [
+              createElementVNode("div", _hoisted_5$2, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(nonFixedHeaderColumns), (column, index2) => {
+                  return openBlock(), createBlock(readerHeaderTd, {
+                    column,
                     key: `columns${index2}`,
-                    class: normalizeClass(["lew-table-td", { "lew-table-td-sortable": column.sortable }]),
                     x: column.x || "start",
                     y: column.y,
-                    style: normalizeStyle(unref(getColumnStyle)(column)),
-                    gap: "5",
-                    onClick: ($event) => sort(column)
-                  }, {
-                    default: withCtx(() => [
-                      createElementVNode("span", _hoisted_7, [
-                        createTextVNode(toDisplayString$1(column.title) + " ", 1),
-                        column.sortable ? (openBlock(), createBlock(SortIcon, {
-                          key: 0,
-                          "sort-value": sortValue.value[column.field],
-                          size: _ctx.size,
-                          class: "lew-table-sorter"
-                        }, null, 8, ["sort-value", "size"])) : createCommentVNode("", true)
-                      ])
-                    ]),
-                    _: 2
-                  }, 1032, ["class", "x", "y", "style", "onClick"]);
+                    style: normalizeStyle(unref(getHeaderColumnStyle)(column)),
+                    gap: "5"
+                  }, null, 8, ["column", "x", "y", "style"]);
                 }), 128))
               ])
             ]),
-            unref(getFixedColumns)("right").length > 0 ? (openBlock(), createElementBlock("div", {
+            unref(getFixedHeaderColumns)("right").length > 0 ? (openBlock(), createElementBlock("div", {
               key: 1,
               ref_key: "fixedRightRef",
               ref: fixedRightRef,
               class: "lew-table-fixed-right"
             }, [
-              createElementVNode("div", _hoisted_8, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getFixedColumns)("right"), (column, index2) => {
-                  return openBlock(), createBlock(unref(LewFlex), {
+              createElementVNode("div", _hoisted_6$1, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getFixedHeaderColumns)("right"), (column, index2) => {
+                  return openBlock(), createBlock(readerHeaderTd, {
+                    column,
                     key: `columns${index2}`,
                     class: normalizeClass(["lew-table-td", { "lew-table-td-sortable": column.sortable }]),
                     x: column.x || "start",
                     y: column.y,
-                    style: normalizeStyle(unref(getColumnStyle)(column)),
-                    gap: "5",
-                    onClick: ($event) => sort(column)
-                  }, {
-                    default: withCtx(() => [
-                      createElementVNode("span", _hoisted_9, [
-                        createTextVNode(toDisplayString$1(column.title) + " ", 1),
-                        column.sortable ? (openBlock(), createBlock(SortIcon, {
-                          key: 0,
-                          "sort-value": sortValue.value[column.field],
-                          size: _ctx.size,
-                          class: "lew-table-sorter"
-                        }, null, 8, ["sort-value", "size"])) : createCommentVNode("", true)
-                      ])
-                    ]),
-                    _: 2
-                  }, 1032, ["class", "x", "y", "style", "onClick"]);
+                    style: normalizeStyle(unref(getHeaderColumnStyle)(column)),
+                    gap: "5"
+                  }, null, 8, ["column", "class", "x", "y", "style"]);
                 }), 128))
               ])
             ], 512)) : createCommentVNode("", true)
-          ], 36),
+          ], 38),
           _ctx.dataSource.length > 0 ? (openBlock(), createElementBlock("div", {
             key: 0,
             class: "lew-table-body",
             style: normalizeStyle(`width: ${unref(totalColumnWidth)}px`)
           }, [
-            unref(getFixedColumns)("left").length > 0 || _ctx.checkable ? (openBlock(), createElementBlock("div", _hoisted_10, [
+            unref(getFixedColumns)("left").length > 0 || _ctx.checkable ? (openBlock(), createElementBlock("div", _hoisted_7, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.dataSource, (row, i) => {
                 return openBlock(), createElementBlock("div", {
                   key: `data${i}`,
@@ -22080,10 +22144,10 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                       _: 2
                     }, 1032, ["x", "y", "style"]);
                   }), 128))
-                ], 46, _hoisted_11);
+                ], 46, _hoisted_8);
               }), 128))
             ])) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_12, [
+            createElementVNode("div", _hoisted_9, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.dataSource, (row, i) => {
                 return openBlock(), createElementBlock("div", {
                   key: `data${i}`,
@@ -22120,10 +22184,10 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                       _: 2
                     }, 1032, ["x", "y", "style"]);
                   }), 128))
-                ], 42, _hoisted_13);
+                ], 42, _hoisted_10);
               }), 128))
             ]),
-            unref(getFixedColumns)("right").length > 0 ? (openBlock(), createElementBlock("div", _hoisted_14, [
+            unref(getFixedColumns)("right").length > 0 ? (openBlock(), createElementBlock("div", _hoisted_11, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.dataSource, (row, i) => {
                 return openBlock(), createElementBlock("div", {
                   key: `data${i}`,
@@ -22160,12 +22224,12 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                       _: 2
                     }, 1032, ["x", "y", "style"]);
                   }), 128))
-                ], 46, _hoisted_15);
+                ], 46, _hoisted_12);
               }), 128))
             ])) : createCommentVNode("", true)
           ], 4)) : createCommentVNode("", true)
-        ], 36),
-        createElementVNode("div", _hoisted_16, [
+        ], 38),
+        createElementVNode("div", _hoisted_13, [
           renderSlot(_ctx.$slots, "table-footer")
         ]),
         _ctx.dataSource.length === 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
@@ -22874,9 +22938,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             const parentKey = props2.extend.parentKey;
             const parentNode = findNodeByKey(parentKey, _dataSource.value);
             const siblingKeys = ((parentNode == null ? void 0 : parentNode.children) || []).map((e) => e.key);
-            if (siblingKeys.length > 0 && siblingKeys.every(
-              (key) => newModelValue.includes(key)
-            )) {
+            if (siblingKeys.length > 0 && siblingKeys.every((key) => newModelValue.includes(key))) {
               if (!newModelValue.includes(parentKey)) {
                 newModelValue.push(parentKey);
               }
@@ -22916,11 +22978,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           });
           if (status === "success") {
             loaded.value = true;
-            insertChildByKey(
-              _dataSource.value,
-              props2.__key,
-              result
-            );
+            insertChildByKey(_dataSource.value, props2.__key, result);
             _dataSource.value = formatTree({
               dataSource: _dataSource.value,
               keyField,
@@ -22929,10 +22987,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             });
             cacheDataSource.value = cloneDeep(_dataSource.value);
             console.log(_dataSource.value, "lew-tree-item");
-            expandKeys.value = [
-              ...expandKeys.value,
-              props2.__key
-            ];
+            expandKeys.value = [...expandKeys.value, props2.__key];
           } else {
             loaded.value = false;
             LewMessage$1.error(error2.message);
@@ -23028,7 +23083,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LewTreeItem = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-85641b32"]]);
+const LewTreeItem = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-cd045d8b"]]);
 const _hoisted_1$a = {
   key: 0,
   class: "lew-result-count"
@@ -23973,7 +24028,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LewDescItem = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-39933d3d"]]);
+const LewDescItem = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-65b841af"]]);
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "LewDesc",
   props: descProps,
@@ -25423,7 +25478,7 @@ const LewTooltip = {
           theme: "light",
           trigger: _trigger,
           content,
-          animation: "scale",
+          animation: "scale-subtle",
           interactive: true,
           appendTo: () => document.body,
           placement,
@@ -25734,7 +25789,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           zIndex: 2001,
           content: menuDom
         });
-        window.LewContextMenu.menuInstance[uniqueId2].popper.children[0].setAttribute("data-lew", "popover");
+        window.LewContextMenu.menuInstance[uniqueId2].popper.children[0].setAttribute(
+          "data-lew",
+          "popover"
+        );
       });
     };
     const renderIcon = ({ renderIcon: renderIcon2 }) => {
@@ -25773,7 +25831,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 class: normalizeClass(["lew-context-menu-item", {
                   "lew-context-menu-item-active": item.active
                 }]),
-                style: normalizeStyle({ "animation-delay": index2 * 15 + "ms" })
+                style: normalizeStyle({ "animation-delay": index2 * 10 + "ms" })
               }, [
                 _ctx.options.filter((e) => e.checkbox).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
                   item.checked ? (openBlock(), createBlock(Icon, {
@@ -25815,7 +25873,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _LewContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-31b81ff7"]]);
+const _LewContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-3d59a17d"]]);
 const initLewHoverMenu = () => {
   window.LewHoverMenu = {
     menu: {},