@sdata/web-vue 1.9.0 → 1.11.0

package/es/table/style/index.scss

@@ -2,8 +2,9 @@
 @use '@style/theme/index.scss' as global;
 @use 'sass:string';
 @use 'sass:map';
-@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use 'sass:meta';
 @use '@style/mixins/index.scss' as *;
+@use '@components/table/style/token.scss' as token;
 @use '@components/table/style/token.scss' as *;
 @use '@components/table/style/filters-popup.scss' as *;
 
@@ -14,98 +15,14 @@ $table-cls-tr: string.unquote('#{$table-prefix-cls}-tr');
 $table-cls-th: string.unquote('#{$table-prefix-cls}-th');
 $table-cls-td: string.unquote('#{$table-prefix-cls}-td');
 
-$__less-vars: (
-  'color-primary-6': global.$color-primary-6,
-  'line-height-base': theme.$line-height-base,
-  'prefix': theme.$prefix,
-  'sd-theme-tag': global.$sd-theme-tag,
-  'table-border-expand-icon-width': $table-border-expand-icon-width,
-  'table-border-radius': $table-border-radius,
-  'table-border-radius-expand-button': $table-border-radius-expand-button,
-  'table-border-style': $table-border-style,
-  'table-border-width': $table-border-width,
-  'table-color-bg-body-cell': $table-color-bg-body-cell,
-  'table-color-bg-body-row_active': $table-color-bg-body-row_active,
-  'table-color-bg-body-row_active_dark': $table-color-bg-body-row_active_dark,
-  'table-color-bg-body-row_hover': $table-color-bg-body-row_hover,
-  'table-color-bg-body-sorted-cell': $table-color-bg-body-sorted-cell,
-  'table-color-bg-body-stripe-row': $table-color-bg-body-stripe-row,
-  'table-color-bg-expand-content': $table-color-bg-expand-content,
-  'table-color-bg-expand-content_hover': $table-color-bg-expand-content_hover,
-  'table-color-bg-expand-icon': $table-color-bg-expand-icon,
-  'table-color-bg-expand-icon_hover': $table-color-bg-expand-icon_hover,
-  'table-color-bg-header-cell': $table-color-bg-header-cell,
-  'table-color-bg-header-filters-icon_hover': $table-color-bg-header-filters-icon_hover,
-  'table-color-bg-header-sorted-cell': $table-color-bg-header-sorted-cell,
-  'table-color-bg-header-sorted-cell_hover': $table-color-bg-header-sorted-cell_hover,
-  'table-color-bg-tfoot': $table-color-bg-tfoot,
-  'table-color-body-background': $table-color-body-background,
-  'table-color-border': $table-color-border,
-  'table-color-border_resizing': $table-color-border_resizing,
-  'table-color-editable-body-cell-border': $table-color-editable-body-cell-border,
-  'table-color-expand-icon': $table-color-expand-icon,
-  'table-color-expand-icon-border': $table-color-expand-icon-border,
-  'table-color-expand-icon-border_hover': $table-color-expand-icon-border_hover,
-  'table-color-expand-icon_hover': $table-color-expand-icon_hover,
-  'table-color-header-filters-icon': $table-color-header-filters-icon,
-  'table-color-header-filters-icon_active': $table-color-header-filters-icon_active,
-  'table-color-header-sorter-icon': $table-color-header-sorter-icon,
-  'table-color-header-sorter-icon_active': $table-color-header-sorter-icon_active,
-  'table-color-header-sorter-icon_next': $table-color-header-sorter-icon_next,
-  'table-color-text-body-cell': $table-color-text-body-cell,
-  'table-color-text-header-cell': $table-color-text-header-cell,
-  'table-filters-icon-bg_hover': $table-filters-icon-bg_hover,
-  'table-font-size-expand-button': $table-font-size-expand-button,
-  'table-font-size-filters-icon': $table-font-size-filters-icon,
-  'table-font-size-header-sorter-icon': $table-font-size-header-sorter-icon,
-  'table-font-weight-header-text': $table-font-weight-header-text,
-  'table-position-header-sorter-icon-down-top': $table-position-header-sorter-icon-down-top,
-  'table-position-header-sorter-icon-left': $table-position-header-sorter-icon-left,
-  'table-position-header-sorter-icon-up-top': $table-position-header-sorter-icon-up-top,
-  'table-shadow-left': $table-shadow-left,
-  'table-shadow-right': $table-shadow-right,
-  'table-size-body-min-width': $table-size-body-min-width,
-  'table-size-drag-handle-col-width': $table-size-drag-handle-col-width,
-  'table-size-expand-button': $table-size-expand-button,
-  'table-size-default-font-header-size': $table-size-default-font-header-size,
-  'table-size-default-font-size': $table-size-default-font-size,
-  'table-size-default-padding-horizontal': $table-size-default-padding-horizontal,
-  'table-size-default-padding-vertical': $table-size-default-padding-vertical,
-  'table-size-expand-icon-col-width': $table-size-expand-icon-col-width,
-  'table-size-filters-width': $table-size-filters-width,
-  'table-size-header-sorter-icon-height': $table-size-header-sorter-icon-height,
-  'table-size-header-sorter-icon-width': $table-size-header-sorter-icon-width,
-  'table-size-large-font-header-size': $table-size-large-font-header-size,
-  'table-size-large-font-size': $table-size-large-font-size,
-  'table-size-large-padding-horizontal': $table-size-large-padding-horizontal,
-  'table-size-large-padding-vertical': $table-size-large-padding-vertical,
-  'table-size-middle-font-header-size': $table-size-middle-font-header-size,
-  'table-size-middle-font-size': $table-size-middle-font-size,
-  'table-size-middle-padding-horizontal': $table-size-middle-padding-horizontal,
-  'table-size-middle-padding-vertical': $table-size-middle-padding-vertical,
-  'table-size-medium-font-header-size': $table-size-medium-font-header-size,
-  'table-size-medium-font-size': $table-size-medium-font-size,
-  'table-size-medium-padding-horizontal': $table-size-medium-padding-horizontal,
-  'table-size-medium-padding-vertical': $table-size-medium-padding-vertical,
-  'table-size-mini-font-header-size': $table-size-mini-font-header-size,
-  'table-size-mini-font-size': $table-size-mini-font-size,
-  'table-size-mini-padding-horizontal': $table-size-mini-padding-horizontal,
-  'table-size-mini-padding-vertical': $table-size-mini-padding-vertical,
-  'table-size-selection-col-width': $table-size-selection-col-width,
-  'table-size-small-font-header-size': $table-size-small-font-header-size,
-  'table-size-small-font-size': $table-size-small-font-size,
-  'table-size-small-padding-horizontal': $table-size-small-padding-horizontal,
-  'table-size-small-padding-vertical': $table-size-small-padding-vertical,
-  'table-size-shadow-wrapper-width': $table-size-shadow-wrapper-width,
-  'table-spacing-expand-button-margin-right': $table-spacing-expand-button-margin-right,
-  'table-spacing-header-sorter-icon-margin-left': $table-spacing-header-sorter-icon-margin-left,
-  'table-spacing-pagination-margin': $table-spacing-pagination-margin,
-  'transition-duration-1': theme.$transition-duration-1,
-  'transition-timing-function-linear': theme.$transition-timing-function-linear,
-);
-
-@function less-var($name, $fallback: null) {
-  @return legacyLessVar.get($__less-vars, $name, $fallback);
+@function token-var($name, $fallback: null) {
+  $value: map.get(meta.module-variables('token'), $name);
+
+  @if $value == null {
+    @return $fallback;
+  }
+
+  @return $value;
 }
 
 @mixin expandBtn() {
@@ -134,29 +51,29 @@ $__less-vars: (
 
 @mixin table-size($size) {
   .#{$table-prefix-cls}-cell {
-    padding: less-var('table-size-#{$size}-padding-vertical')
-      less-var('table-size-#{$size}-padding-horizontal');
+    padding: token-var('table-size-#{$size}-padding-vertical')
+      token-var('table-size-#{$size}-padding-horizontal');
   }
 
   //.#{$table-prefix-cls}-col-has-sorter .#{$table-prefix-cls}-cell-with-sorter {
-  //  padding: less-var('table-size-#{$size}-padding-vertical') less-var('table-size-#{$size}-padding-horizontal');
+  //  padding: token-var('table-size-#{$size}-padding-vertical') token-var('table-size-#{$size}-padding-horizontal');
   //  cursor: pointer;
   //}
 
   //.#{$table-cls-td} {
-  //  padding: less-var('table-size-#{$size}-padding-vertical') less-var('table-size-#{$size}-padding-horizontal');
+  //  padding: token-var('table-size-#{$size}-padding-vertical') token-var('table-size-#{$size}-padding-horizontal');
   //}
 
   .#{$table-cls-th} {
-    font-size: less-var('table-size-#{$size}-font-header-size');
+    font-size: token-var('table-size-#{$size}-font-header-size');
   }
 
   .#{$table-cls-td} {
-    font-size: less-var('table-size-#{$size}-font-size');
+    font-size: token-var('table-size-#{$size}-font-size');
   }
 
-  $table-size-padding-vertical: less-var('table-size-#{$size}-padding-vertical');
-  $table-size-padding-horizontal: less-var('table-size-#{$size}-padding-horizontal');
+  $table-size-padding-vertical: token-var('table-size-#{$size}-padding-vertical');
+  $table-size-padding-horizontal: token-var('table-size-#{$size}-padding-horizontal');
 
   .#{$table-prefix-cls}-footer {
     padding: $table-size-padding-vertical $table-size-padding-horizontal;
@@ -184,10 +101,38 @@ $__less-vars: (
     position: absolute;
     top: 0;
     right: -4px;
-    z-index: 1;
+    z-index: 2;
+    display: flex;
+    align-items: center;
     width: 8px;
     height: 100%;
     cursor: col-resize;
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 1;
+      width: 2px;
+      height: 0;
+      background-color: $table-color-border;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      transition:
+        height 0.15s ease,
+        background-color 0.15s ease;
+      content: '';
+    }
+
+    &:hover::after {
+      height: 40%;
+      background-color: global.$color-primary-6;
+    }
+  }
+
+  &-th-resizing &-column-handle::after {
+    height: 100%;
+    background-color: global.$color-primary-6;
   }
 
   // spin
@@ -207,6 +152,10 @@ $__less-vars: (
     border-radius: 0 0 $table-border-radius $table-border-radius;
   }
 
+  &-append {
+    background-color: $table-color-body-background;
+  }
+
   // box-shadow of the fixed column on the left
   &-scroll-position-right &-col-fixed-left-last::after,
   &-scroll-position-middle &-col-fixed-left-last::after {
@@ -219,23 +168,48 @@ $__less-vars: (
     box-shadow: $table-shadow-right;
   }
 
-  &-layout-fixed {
-    .#{$table-cls-table} {
-      table-layout: fixed;
-    }
-  }
-
   .#{$table-cls-table} {
+    display: flex;
+    flex-direction: column;
     width: 100%;
     min-width: 100%;
     margin: 0;
-    border-collapse: separate;
-    border-spacing: 0;
+  }
+
+  &-thead,
+  &-tbody,
+  &-tfoot-content {
+    display: grid;
+    grid-template-columns: var(--sd-table-grid-template, minmax(0, 1fr));
+  }
+
+  &-tr,
+  &-virtual-row {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: var(--sd-table-grid-template, minmax(0, 1fr));
+  }
+
+  &-tbody > .#{theme.$prefix}-virtual-list,
+  &-tbody > .#{$table-prefix-cls}-body {
+    grid-column: 1 / -1;
+    width: 100%;
+  }
+
+  &-virtual-item {
+    display: grid;
+    grid-template-columns: var(--sd-table-grid-template, minmax(0, 1fr));
+    width: 100%;
+  }
+
+  &-virtual-row-table {
+    background-color: $table-color-body-background;
   }
 
   &-th {
     position: relative;
     box-sizing: border-box;
+    min-width: 0;
     color: $table-color-text-header-cell;
     font-weight: $table-font-weight-header-text;
     line-height: theme.$line-height-base;
@@ -265,6 +239,7 @@ $__less-vars: (
 
   &-td {
     box-sizing: border-box;
+    min-width: 0;
     color: $table-color-text-body-cell;
     line-height: theme.$line-height-base;
     text-align: left;
@@ -288,6 +263,9 @@ $__less-vars: (
   &-cell {
     display: flex;
     align-items: center;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
 
     &-align-right {
       justify-content: flex-end;
@@ -385,6 +363,9 @@ $__less-vars: (
   &-cell-expand-icon &-cell-inline-icon {
     display: inline-flex;
     margin-right: $table-spacing-expand-button-margin-right;
+    padding: 0;
+    background: transparent;
+    border: 0;
 
     .#{theme.$prefix}-icon-loading {
       color: global.$color-primary-6;
@@ -442,7 +423,6 @@ $__less-vars: (
   &-td#{&}-operation &-cell {
     display: flex;
     justify-content: center;
-    padding: 0;
   }
 
   &-radio,
@@ -477,6 +457,12 @@ $__less-vars: (
   &-cell-with-sorter {
     display: flex;
     align-items: center;
+    width: 100%;
+    padding: 0;
+    color: inherit;
+    text-align: inherit;
+    background: transparent;
+    border: 0;
     cursor: pointer;
 
     &:hover {
@@ -671,10 +657,22 @@ $__less-vars: (
   }
 
   &-header {
+    width: 100%;
+    min-width: 100%;
     overflow: hidden;
     background-color: $table-color-bg-header-cell;
     scrollbar-color: transparent transparent;
 
+    > .#{$table-cls-table} {
+      width: 100%;
+      background-color: inherit;
+    }
+
+    .#{$table-prefix-cls}-thead {
+      width: 100%;
+      background-color: inherit;
+    }
+
     &-sticky {
       position: sticky;
       top: 0;
@@ -722,7 +720,7 @@ $__less-vars: (
       border-bottom: $table-border-width $table-border-style $table-color-border;
 
       .#{$table-prefix-cls}-body .#{$table-cls-tr}:last-of-type .#{$table-cls-td},
-      tfoot .#{$table-cls-tr}:last-of-type .#{$table-cls-td} {
+      .#{$table-prefix-cls}-tfoot-content .#{$table-cls-tr}:last-of-type .#{$table-cls-td} {
         border-bottom: none;
 
         &.#{$table-prefix-cls}-col-fixed-left-last::after,
@@ -784,7 +782,7 @@ $__less-vars: (
   }
 
   &-border#{&}-border-header-cell {
-    thead {
+    .#{$table-prefix-cls}-thead {
       .#{$table-cls-tr}:first-child .#{$table-cls-th}:last-child {
         border-right: 0;
       }
@@ -826,10 +824,34 @@ $__less-vars: (
     }
   }
 
-  & .#{$table-cls-tr}-draggable {
+  & .#{$table-cls-tr}-draggable .#{$table-cls-td} {
     cursor: move;
   }
 
+  // Drop target indicator during row drag
+  & .#{$table-cls-tr}-drop-target {
+    .#{$table-cls-td} {
+      position: relative;
+    }
+
+    .#{$table-cls-td}::before {
+      position: absolute;
+      top: -1px;
+      right: 0;
+      left: 0;
+      height: 2px;
+      background-color: global.$color-primary-6;
+      border-radius: 1px;
+      content: '';
+      pointer-events: none;
+    }
+  }
+
+  // Row drag transition
+  &-dragging .#{$table-cls-td} {
+    transition: background-color 0.2s ease;
+  }
+
   &-hover {
     &:not(.#{$table-prefix-cls}-dragging)
       .#{$table-cls-tr}:not(.#{$table-prefix-cls}-tr-empty):not(
@@ -900,7 +922,7 @@ $__less-vars: (
     }
   }
 
-  & tfoot &-td {
+  & &-tfoot-content &-td {
     background-color: $table-color-bg-tfoot;
   }
 
@@ -925,17 +947,7 @@ $__less-vars: (
   }
 
   // virtualized
-  &-virtualized .#{$table-cls-table} {
-    table-layout: fixed;
-  }
-
-  &-virtualized div#{&}-body div#{&}-tr {
-    display: flex;
-  }
-
   &-virtualized div#{&}-body div#{&}-td {
-    display: flex;
-    flex: 1;
     align-items: center;
   }
 }

package/es/table/table-column.d.ts

@@ -114,7 +114,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{}>, {
     ellipsis: boolean;
     tooltip: boolean | Record<string, any>;
-    sortable: TableSortable;
     filterable: TableFilterable;
+    sortable: TableSortable;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/table/table-operation-td.d.ts

@@ -316,8 +316,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }>, {
             disabled: boolean;
             defaultValue: (string | number | boolean)[];
-            modelValue: (string | number | boolean)[];
             direction: "horizontal" | "vertical";
+            modelValue: (string | number | boolean)[];
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
         install: (app: import("vue").App, options?: import("../_utils/types").SDOptions) => void;
     };
@@ -524,7 +524,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: PropType<import("..").Size>;
             };
             options: {
-                type: PropType<Array<string | number | import("../radio/interface").RadioOption>>;
+                type: PropType<Array<string | number | import("..").RadioOption>>;
             };
             direction: {
                 type: PropType<import("..").Direction>;
@@ -554,7 +554,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: PropType<import("..").Size>;
             };
             options: {
-                type: PropType<Array<string | number | import("../radio/interface").RadioOption>>;
+                type: PropType<Array<string | number | import("..").RadioOption>>;
             };
             direction: {
                 type: PropType<import("..").Direction>;
@@ -571,8 +571,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: "button" | "radio";
             disabled: boolean;
             defaultValue: string | number | boolean;
-            modelValue: string | number | boolean;
             direction: "horizontal" | "vertical";
+            modelValue: string | number | boolean;
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
         install: (app: import("vue").App, options?: import("../_utils/types").SDOptions) => void;
     };
@@ -604,6 +604,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 [x: string]: boolean;
             })[]>;
             innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+            svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
             onClick: (ev: MouseEvent) => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             click: (ev: MouseEvent) => true;
@@ -646,6 +647,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 [x: string]: boolean;
             })[]>;
             innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+            svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
             onClick: (ev: MouseEvent) => void;
         }, {}, {}, {}, {
             spin: boolean;
@@ -683,6 +685,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             [x: string]: boolean;
         })[]>;
         innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+        svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
         onClick: (ev: MouseEvent) => void;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         click: (ev: MouseEvent) => true;
@@ -722,6 +725,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 [x: string]: boolean;
             })[]>;
             innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+            svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
             onClick: (ev: MouseEvent) => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             click: (ev: MouseEvent) => true;
@@ -764,6 +768,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 [x: string]: boolean;
             })[]>;
             innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+            svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
             onClick: (ev: MouseEvent) => void;
         }, {}, {}, {}, {
             spin: boolean;
@@ -801,6 +806,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             [x: string]: boolean;
         })[]>;
         innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+        svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
         onClick: (ev: MouseEvent) => void;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         click: (ev: MouseEvent) => true;

package/es/table/table-operation-td.js

@@ -1,3 +1,4 @@
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import Checkbox from "../checkbox/index.js";
 import Radio from "../radio/index.js";
@@ -52,7 +53,7 @@ var table_operation_td_default = /* @__PURE__ */ defineComponent({
 	setup(props, { slots }) {
 		const prefixCls = getPrefixCls("table");
 		const tableCtx = inject(tableInjectionKey, {});
-		const style = computed(() => getOperationStyle(props.operationColumn, props.operations));
+		const style = computed(() => _objectSpread2(_objectSpread2(_objectSpread2({}, getOperationStyle(props.operationColumn, props.operations)), props.colSpan > 1 ? { gridColumn: `span ${props.colSpan}` } : void 0), props.rowSpan > 1 ? { gridRow: `span ${props.rowSpan}` } : void 0));
 		const cls = computed(() => [
 			`${prefixCls}-td`,
 			`${prefixCls}-operation`,
@@ -121,11 +122,9 @@ var table_operation_td_default = /* @__PURE__ */ defineComponent({
 			}
 			return null;
 		};
-		return () => createVNode("td", {
+		return () => createVNode("div", {
 			"class": cls.value,
-			"style": style.value,
-			"rowspan": props.rowSpan > 1 ? props.rowSpan : void 0,
-			"colspan": props.colSpan > 1 ? props.colSpan : void 0
+			"style": style.value
 		}, [createVNode("span", { "class": `${prefixCls}-cell` }, [renderContent()])]);
 	}
 });

package/es/table/table-operation-th.js

@@ -1,3 +1,4 @@
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isFunction } from "../_utils/is.js";
 import Checkbox from "../checkbox/index.js";
@@ -57,17 +58,16 @@ var table_operation_th_default = /* @__PURE__ */ defineComponent({
 			if (props.operationColumn.title) return isFunction(props.operationColumn.title) ? props.operationColumn.title() : props.operationColumn.title;
 			return null;
 		};
-		const style = computed(() => getOperationStyle(props.operationColumn, props.operations));
+		const style = computed(() => _objectSpread2(_objectSpread2({}, getOperationStyle(props.operationColumn, props.operations)), props.rowSpan > 1 ? { gridRow: `span ${props.rowSpan}` } : void 0));
 		const cls = computed(() => [
 			`${prefixCls}-th`,
 			`${prefixCls}-operation`,
 			{ [`${prefixCls}-checkbox`]: props.selectAll },
 			...getOperationFixedCls(prefixCls, props.operationColumn)
 		]);
-		return () => createVNode("th", {
+		return () => createVNode("div", {
 			"class": cls.value,
-			"style": style.value,
-			"rowspan": props.rowSpan > 1 ? props.rowSpan : void 0
+			"style": style.value
 		}, [createVNode("span", { "class": `${prefixCls}-cell` }, [renderContent()])]);
 	}
 });

package/es/table/table-tbody.js

@@ -5,7 +5,7 @@ var table_tbody_default = /* @__PURE__ */ defineComponent({
 	setup(_, { slots }) {
 		return () => {
 			var _slots$tbody$, _slots$tbody;
-			return createVNode((_slots$tbody$ = (_slots$tbody = slots.tbody) === null || _slots$tbody === void 0 ? void 0 : _slots$tbody.call(slots)[0]) !== null && _slots$tbody$ !== void 0 ? _slots$tbody$ : "tbody", null, { default: slots.default });
+			return createVNode((_slots$tbody$ = (_slots$tbody = slots.tbody) === null || _slots$tbody === void 0 ? void 0 : _slots$tbody.call(slots)[0]) !== null && _slots$tbody$ !== void 0 ? _slots$tbody$ : "div", { class: "sd-table-tbody" }, { default: slots.default });
 		};
 	}
 });

package/es/table/table-td.js

@@ -112,7 +112,7 @@ var table_td_default = /* @__PURE__ */ defineComponent({
 				operations: props.operations
 			});
 			const customStyle = getCustomStyle();
-			return _objectSpread2(_objectSpread2(_objectSpread2({}, style), (_props$column13 = props.column) === null || _props$column13 === void 0 ? void 0 : _props$column13.cellStyle), customStyle);
+			return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, style), props.colSpan > 1 ? { gridColumn: `span ${props.colSpan}` } : void 0), props.rowSpan > 1 ? { gridRow: `span ${props.rowSpan}` } : void 0), (_props$column13 = props.column) === null || _props$column13 === void 0 ? void 0 : _props$column13.cellStyle), customStyle);
 		});
 		const cellStyle = computed(() => {
 			if (props.isFixedExpand && props.containerWidth) return { width: `${props.containerWidth}px` };
@@ -166,7 +166,8 @@ var table_td_default = /* @__PURE__ */ defineComponent({
 				"style": cellStyle.value
 			}, [
 				props.indentSize > 0 && createVNode("span", { "style": { paddingLeft: `${props.indentSize}px` } }, null),
-				props.showExpandBtn && createVNode("span", {
+				props.showExpandBtn && createVNode("button", {
+					"type": "button",
 					"class": `${prefixCls}-cell-inline-icon`,
 					"onClick": handleClick
 				}, [isLoading.value ? createVNode(IconLoading, null, null) : (_props$renderExpandBt = props.renderExpandBtn) === null || _props$renderExpandBt === void 0 ? void 0 : _props$renderExpandBt.call(props, props.record, false)]),
@@ -182,11 +183,9 @@ var table_td_default = /* @__PURE__ */ defineComponent({
 				record: (_props$record9 = props.record) === null || _props$record9 === void 0 ? void 0 : _props$record9.raw,
 				column: props.column,
 				rowIndex: (_props$rowIndex2 = props.rowIndex) !== null && _props$rowIndex2 !== void 0 ? _props$rowIndex2 : -1
-			})[0]) !== null && _slots$td$ !== void 0 ? _slots$td$ : "td", {
+			})[0]) !== null && _slots$td$ !== void 0 ? _slots$td$ : "div", {
 				class: cls.value,
-				style: style.value,
-				rowspan: props.rowSpan > 1 ? props.rowSpan : void 0,
-				colspan: props.colSpan > 1 ? props.colSpan : void 0
+				style: style.value
 			}, { default: () => [renderCell()] });
 		};
 	}