@sdata/web-vue 1.9.0 → 1.11.0

package/es/table/index.d.ts

@@ -33,10 +33,6 @@ declare const Table: {
             type: import("vue").PropType<import("..").Size>;
             default: () => "mini" | "small" | "medium" | "large";
         };
-        tableLayoutFixed: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
         loading: {
             type: (BooleanConstructor | ObjectConstructor)[];
             default: boolean;
@@ -68,7 +64,7 @@ declare const Table: {
             default: number;
         };
         rowKey: {
-            type: StringConstructor;
+            type: import("vue").PropType<string | ((record: import("./interface").TableData) => import("../_utils/types").BaseType)>;
             default: string;
         };
         showHeader: {
@@ -76,7 +72,12 @@ declare const Table: {
             default: boolean;
         };
         virtualListProps: {
-            type: import("vue").PropType<import("../_components/virtual-list-v2/interface").VirtualListProps>;
+            type: import("vue").PropType<import("../_components/virtual-list/interface").VirtualListProps & {
+                threshold?: number;
+                fixedSize?: boolean;
+                estimatedSize?: number;
+                itemKey?: string | ((item: unknown, index: number) => string | number);
+            }>;
         };
         spanMethod: {
             type: import("vue").PropType<(data: {
@@ -164,6 +165,10 @@ declare const Table: {
             type: import("vue").PropType<boolean | import("..").ScrollbarProps>;
             default: boolean;
         };
+        debug: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         showEmptyTree: {
             type: BooleanConstructor;
             default: boolean;
@@ -237,24 +242,24 @@ declare const Table: {
         size: "mini" | "small" | "medium" | "large";
         loading: boolean | Record<string, any>;
         data: import("./interface").TableData[];
+        columns: import("./interface").TableColumnData[];
         scrollbar: boolean | import("..").ScrollbarProps;
         bordered: boolean | import("./interface").TableBorder;
-        columns: import("./interface").TableColumnData[];
         hoverable: boolean;
         defaultExpandAllRows: boolean;
         indentSize: number;
         filterIconAlignLeft: boolean;
         stripe: boolean;
-        tableLayoutFixed: boolean;
         pagination: boolean | import("..").PaginationProps;
         pagePosition: "top" | "tl" | "tr" | "bottom" | "bl" | "br";
-        rowKey: string;
+        rowKey: string | ((record: import("./interface").TableData) => import("../_utils/types").BaseType);
         showHeader: boolean;
         spanAll: boolean;
         hideExpandButtonOnEmpty: boolean;
         columnResizable: boolean;
         summaryText: string;
         stickyHeader: number | boolean;
+        debug: boolean;
         showEmptyTree: boolean;
     }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
@@ -288,10 +293,6 @@ declare const Table: {
             type: import("vue").PropType<import("..").Size>;
             default: () => "mini" | "small" | "medium" | "large";
         };
-        tableLayoutFixed: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
         loading: {
             type: (BooleanConstructor | ObjectConstructor)[];
             default: boolean;
@@ -323,7 +324,7 @@ declare const Table: {
             default: number;
         };
         rowKey: {
-            type: StringConstructor;
+            type: import("vue").PropType<string | ((record: import("./interface").TableData) => import("../_utils/types").BaseType)>;
             default: string;
         };
         showHeader: {
@@ -331,7 +332,12 @@ declare const Table: {
             default: boolean;
         };
         virtualListProps: {
-            type: import("vue").PropType<import("../_components/virtual-list-v2/interface").VirtualListProps>;
+            type: import("vue").PropType<import("../_components/virtual-list/interface").VirtualListProps & {
+                threshold?: number;
+                fixedSize?: boolean;
+                estimatedSize?: number;
+                itemKey?: string | ((item: unknown, index: number) => string | number);
+            }>;
         };
         spanMethod: {
             type: import("vue").PropType<(data: {
@@ -419,6 +425,10 @@ declare const Table: {
             type: import("vue").PropType<boolean | import("..").ScrollbarProps>;
             default: boolean;
         };
+        debug: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         showEmptyTree: {
             type: BooleanConstructor;
             default: boolean;
@@ -469,24 +479,24 @@ declare const Table: {
         size: "mini" | "small" | "medium" | "large";
         loading: boolean | Record<string, any>;
         data: import("./interface").TableData[];
+        columns: import("./interface").TableColumnData[];
         scrollbar: boolean | import("..").ScrollbarProps;
         bordered: boolean | import("./interface").TableBorder;
-        columns: import("./interface").TableColumnData[];
         hoverable: boolean;
         defaultExpandAllRows: boolean;
         indentSize: number;
         filterIconAlignLeft: boolean;
         stripe: boolean;
-        tableLayoutFixed: boolean;
         pagination: boolean | import("..").PaginationProps;
         pagePosition: "top" | "tl" | "tr" | "bottom" | "bl" | "br";
-        rowKey: string;
+        rowKey: string | ((record: import("./interface").TableData) => import("../_utils/types").BaseType);
         showHeader: boolean;
         spanAll: boolean;
         hideExpandButtonOnEmpty: boolean;
         columnResizable: boolean;
         summaryText: string;
         stickyHeader: number | boolean;
+        debug: boolean;
         showEmptyTree: boolean;
     }>;
     __isFragment?: never;
@@ -517,10 +527,6 @@ declare const Table: {
         type: import("vue").PropType<import("..").Size>;
         default: () => "mini" | "small" | "medium" | "large";
     };
-    tableLayoutFixed: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     loading: {
         type: (BooleanConstructor | ObjectConstructor)[];
         default: boolean;
@@ -552,7 +558,7 @@ declare const Table: {
         default: number;
     };
     rowKey: {
-        type: StringConstructor;
+        type: import("vue").PropType<string | ((record: import("./interface").TableData) => import("../_utils/types").BaseType)>;
         default: string;
     };
     showHeader: {
@@ -560,7 +566,12 @@ declare const Table: {
         default: boolean;
     };
     virtualListProps: {
-        type: import("vue").PropType<import("../_components/virtual-list-v2/interface").VirtualListProps>;
+        type: import("vue").PropType<import("../_components/virtual-list/interface").VirtualListProps & {
+            threshold?: number;
+            fixedSize?: boolean;
+            estimatedSize?: number;
+            itemKey?: string | ((item: unknown, index: number) => string | number);
+        }>;
     };
     spanMethod: {
         type: import("vue").PropType<(data: {
@@ -648,6 +659,10 @@ declare const Table: {
         type: import("vue").PropType<boolean | import("..").ScrollbarProps>;
         default: boolean;
     };
+    debug: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     showEmptyTree: {
         type: BooleanConstructor;
         default: boolean;
@@ -721,24 +736,24 @@ declare const Table: {
     size: "mini" | "small" | "medium" | "large";
     loading: boolean | Record<string, any>;
     data: import("./interface").TableData[];
+    columns: import("./interface").TableColumnData[];
     scrollbar: boolean | import("..").ScrollbarProps;
     bordered: boolean | import("./interface").TableBorder;
-    columns: import("./interface").TableColumnData[];
     hoverable: boolean;
     defaultExpandAllRows: boolean;
     indentSize: number;
     filterIconAlignLeft: boolean;
     stripe: boolean;
-    tableLayoutFixed: boolean;
     pagination: boolean | import("..").PaginationProps;
     pagePosition: "top" | "tl" | "tr" | "bottom" | "bl" | "br";
-    rowKey: string;
+    rowKey: string | ((record: import("./interface").TableData) => import("../_utils/types").BaseType);
     showHeader: boolean;
     spanAll: boolean;
     hideExpandButtonOnEmpty: boolean;
     columnResizable: boolean;
     summaryText: string;
     stickyHeader: number | boolean;
+    debug: boolean;
     showEmptyTree: boolean;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
     Thead: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -780,8 +795,8 @@ declare const Table: {
             default: () => {};
         };
     }>> & Readonly<{}>, {
-        checked: boolean;
         empty: boolean;
+        checked: boolean;
         expand: boolean;
         record: import("./interface").TableDataWithRaw;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -1053,8 +1068,8 @@ declare const Table: {
     }>> & Readonly<{}>, {
         ellipsis: boolean;
         tooltip: boolean | Record<string, any>;
-        sortable: import("./interface").TableSortable;
         filterable: import("./interface").TableFilterable;
+        sortable: import("./interface").TableSortable;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     install: (app: App, options?: SDOptions) => void;
 };
@@ -1065,6 +1080,6 @@ export type TrInstance = InstanceType<typeof _Tr>;
 export type ThInstance = InstanceType<typeof _Th>;
 export type TdInstance = InstanceType<typeof _Td>;
 export type TableColumnInstance = InstanceType<typeof _Column>;
-export type { TableData, TableSortable, TableFilterData, TableFilterable, TableColumnData, TableBorder, TableRowSelection, TableExpandable, TableDraggable, TableChangeExtra, } from './interface';
+export type { TableData, TableSortable, TableFilterData, TableFilterable, TableColumnData, TableBorder, TableRowSelection, TableExpandable, TableDraggable, TableChangeExtra, TableLoadMore, TableProps, TableRowKey, TableSpanMethod, TableSpanMethodContext, TableSummary, TableSummaryContext, TableSummarySpanMethod, } from './interface';
 export { _Thead as Thead, _Tbody as Tbody, _Tr as Tr, _Th as Th, _Td as Td, _Column as TableColumn, };
 export default Table;

package/es/table/interface.d.ts

@@ -1,10 +1,11 @@
+import type { Simplify } from 'type-fest';
 import { CSSProperties, RenderFunction, Slots, VNodeChild } from 'vue';
 import { BaseType, ClassName, Data } from '../_utils/types';
 import { TriggerProps } from '../trigger';
 export declare const TABLE_PAGE_POSITION: readonly ["tl", "top", "tr", "bl", "bottom", "br"];
 export type TablePagePosition = (typeof TABLE_PAGE_POSITION)[number];
 export interface TableData {
-    key?: string;
+    key?: BaseType;
     expand?: string | RenderFunction;
     children?: TableData[];
     disabled?: boolean;
@@ -13,7 +14,7 @@ export interface TableData {
 }
 export interface TableDataWithRaw {
     raw: TableData;
-    key: string;
+    key: BaseType;
     disabled?: boolean;
     expand?: string | RenderFunction;
     children?: TableDataWithRaw[];
@@ -152,6 +153,24 @@ export interface TableProps {
     pagination?: boolean | Data;
     pagePosition?: string;
 }
+export type TableRowKey = string | ((record: TableData) => BaseType);
+export type TableSpanMethodContext = Simplify<{
+    record: TableData;
+    column: TableColumnData | TableOperationColumn;
+    rowIndex: number;
+    columnIndex: number;
+}>;
+export type TableSpanMethod = (data: TableSpanMethodContext) => {
+    rowspan?: number;
+    colspan?: number;
+} | void;
+export type TableLoadMore = (record: TableData, done: (children?: TableData[]) => void) => void;
+export type TableSummaryContext = Simplify<{
+    columns: TableColumnData[];
+    data: TableData[];
+}>;
+export type TableSummary = boolean | ((params: TableSummaryContext) => TableData[]);
+export type TableSummarySpanMethod = TableSpanMethod;
 export type Sorter = {
     field: string;
     direction: 'ascend' | 'descend';

package/es/table/style/index.css

@@ -65,11 +65,34 @@
   position: absolute;
   top: 0;
   right: -4px;
-  z-index: 1;
+  z-index: 2;
+  display: flex;
+  align-items: center;
   width: 8px;
   height: 100%;
   cursor: col-resize;
 }
+.sd-table-column-handle::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 1;
+  width: 2px;
+  height: 0;
+  background-color: var(--color-neutral-3);
+  border-radius: 1px;
+  transform: translate(-50%, -50%);
+  transition: height 0.15s ease, background-color 0.15s ease;
+  content: "";
+}
+.sd-table-column-handle:hover::after {
+  height: 40%;
+  background-color: rgb(var(--primary-6));
+}
+.sd-table-th-resizing .sd-table-column-handle::after {
+  height: 100%;
+  background-color: rgb(var(--primary-6));
+}
 .sd-table .sd-spin {
   display: flex;
   flex-direction: column;
@@ -81,25 +104,47 @@
 .sd-table-footer {
   border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
 }
+.sd-table-append {
+  background-color: var(--color-bg-2);
+}
 .sd-table-scroll-position-right .sd-table-col-fixed-left-last::after, .sd-table-scroll-position-middle .sd-table-col-fixed-left-last::after {
   box-shadow: inset 6px 0 8px -3px rgba(0, 0, 0, 0.15);
 }
 .sd-table-scroll-position-left .sd-table-col-fixed-right-first::after, .sd-table-scroll-position-middle .sd-table-col-fixed-right-first::after {
   box-shadow: inset -6px 0 8px -3px rgba(0, 0, 0, 0.15);
 }
-.sd-table-layout-fixed .sd-table-element {
-  table-layout: fixed;
-}
 .sd-table .sd-table-element {
+  display: flex;
+  flex-direction: column;
   width: 100%;
   min-width: 100%;
   margin: 0;
-  border-collapse: separate;
-  border-spacing: 0;
+}
+.sd-table-thead, .sd-table-tbody, .sd-table-tfoot-content {
+  display: grid;
+  grid-template-columns: var(--sd-table-grid-template, minmax(0, 1fr));
+}
+.sd-table-tr, .sd-table-virtual-row {
+  display: grid;
+  grid-column: 1/-1;
+  grid-template-columns: var(--sd-table-grid-template, minmax(0, 1fr));
+}
+.sd-table-tbody > .sd-virtual-list, .sd-table-tbody > .sd-table-body {
+  grid-column: 1/-1;
+  width: 100%;
+}
+.sd-table-virtual-item {
+  display: grid;
+  grid-template-columns: var(--sd-table-grid-template, minmax(0, 1fr));
+  width: 100%;
+}
+.sd-table-virtual-row-table {
+  background-color: var(--color-bg-2);
 }
 .sd-table-th {
   position: relative;
   box-sizing: border-box;
+  min-width: 0;
   color: rgb(var(--gray-10));
   font-weight: 500;
   line-height: 1.5715;
@@ -123,6 +168,7 @@
 }
 .sd-table-td {
   box-sizing: border-box;
+  min-width: 0;
   color: rgb(var(--gray-10));
   line-height: 1.5715;
   text-align: left;
@@ -142,6 +188,9 @@
 .sd-table-cell {
   display: flex;
   align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
 }
 .sd-table-cell-align-right {
   justify-content: flex-end;
@@ -230,6 +279,9 @@
 .sd-table-cell-expand-icon .sd-table-cell-inline-icon {
   display: inline-flex;
   margin-right: 4px;
+  padding: 0;
+  background: transparent;
+  border: 0;
 }
 .sd-table-cell-expand-icon .sd-table-cell-inline-icon .sd-icon-loading {
   color: rgb(var(--primary-6));
@@ -267,7 +319,6 @@
 .sd-table-th.sd-table-operation .sd-table-cell, .sd-table-td.sd-table-operation .sd-table-cell {
   display: flex;
   justify-content: center;
-  padding: 0;
 }
 .sd-table-radio, .sd-table-checkbox {
   justify-content: center;
@@ -296,6 +347,12 @@
 .sd-table-cell-with-sorter {
   display: flex;
   align-items: center;
+  width: 100%;
+  padding: 0;
+  color: inherit;
+  text-align: inherit;
+  background: transparent;
+  border: 0;
   cursor: pointer;
 }
 .sd-table-cell-with-sorter:hover {
@@ -437,10 +494,20 @@
   box-shadow: inset -6px 0 8px -3px rgba(0, 0, 0, 0.15);
 }
 .sd-table-header {
+  width: 100%;
+  min-width: 100%;
   overflow: hidden;
   background-color: var(--color-neutral-2);
   scrollbar-color: transparent transparent;
 }
+.sd-table-header > .sd-table-element {
+  width: 100%;
+  background-color: inherit;
+}
+.sd-table-header .sd-table-thead {
+  width: 100%;
+  background-color: inherit;
+}
 .sd-table-header-sticky {
   position: sticky;
   top: 0;
@@ -468,12 +535,12 @@
   border-bottom: 1px solid var(--color-neutral-3);
 }
 .sd-table-border .sd-table-scroll-y .sd-table-body .sd-table-tr:last-of-type .sd-table-td,
-.sd-table-border .sd-table-scroll-y tfoot .sd-table-tr:last-of-type .sd-table-td {
+.sd-table-border .sd-table-scroll-y .sd-table-tfoot-content .sd-table-tr:last-of-type .sd-table-td {
   border-bottom: none;
 }
 .sd-table-border .sd-table-scroll-y .sd-table-body .sd-table-tr:last-of-type .sd-table-td.sd-table-col-fixed-left-last::after, .sd-table-border .sd-table-scroll-y .sd-table-body .sd-table-tr:last-of-type .sd-table-td.sd-table-col-fixed-right-first::after,
-.sd-table-border .sd-table-scroll-y tfoot .sd-table-tr:last-of-type .sd-table-td.sd-table-col-fixed-left-last::after,
-.sd-table-border .sd-table-scroll-y tfoot .sd-table-tr:last-of-type .sd-table-td.sd-table-col-fixed-right-first::after {
+.sd-table-border .sd-table-scroll-y .sd-table-tfoot-content .sd-table-tr:last-of-type .sd-table-td.sd-table-col-fixed-left-last::after,
+.sd-table-border .sd-table-scroll-y .sd-table-tfoot-content .sd-table-tr:last-of-type .sd-table-td.sd-table-col-fixed-right-first::after {
   bottom: 0;
 }
 .sd-table-border .sd-table-tr .sd-table-th {
@@ -502,7 +569,7 @@
 .sd-table-border-header-cell .sd-table-td-resizing:not(.sd-table-tr-expand) {
   border-right-color: rgb(var(--primary-6));
 }
-.sd-table-border.sd-table-border-header-cell thead .sd-table-tr:first-child .sd-table-th:last-child {
+.sd-table-border.sd-table-border-header-cell .sd-table-thead .sd-table-tr:first-child .sd-table-th:last-child {
   border-right: 0;
 }
 .sd-table-border-body-cell .sd-table-td:not(:last-child):not(.sd-table-tr-expand) {
@@ -525,9 +592,26 @@
   background-color: var(--color-fill-1);
   content: "";
 }
-.sd-table .sd-table-tr-draggable {
+.sd-table .sd-table-tr-draggable .sd-table-td {
   cursor: move;
 }
+.sd-table .sd-table-tr-drop-target .sd-table-td {
+  position: relative;
+}
+.sd-table .sd-table-tr-drop-target .sd-table-td::before {
+  position: absolute;
+  top: -1px;
+  right: 0;
+  left: 0;
+  height: 2px;
+  background-color: rgb(var(--primary-6));
+  border-radius: 1px;
+  content: "";
+  pointer-events: none;
+}
+.sd-table-dragging .sd-table-td {
+  transition: background-color 0.2s ease;
+}
 .sd-table-hover:not(.sd-table-dragging) .sd-table-tr:not(.sd-table-tr-empty):not(.sd-table-tr-summary):hover .sd-table-td:not(.sd-table-col-fixed-left):not(.sd-table-col-fixed-right),
 .sd-table-hover .sd-table-tr-drag .sd-table-td:not(.sd-table-col-fixed-left):not(.sd-table-col-fixed-right) {
   background-color: var(--color-fill-1);
@@ -569,7 +653,7 @@
   height: 0;
   background-color: transparent;
 }
-.sd-table tfoot .sd-table-td {
+.sd-table .sd-table-tfoot-content .sd-table-td {
   background-color: var(--color-neutral-2);
 }
 .sd-table-tr-checked .sd-table-td {
@@ -647,15 +731,7 @@
 .sd-table-size-mini .sd-table-editable-row .sd-table-cell-wrap-value {
   padding: 2px 16px;
 }
-.sd-table-virtualized .sd-table-element {
-  table-layout: fixed;
-}
-.sd-table-virtualized div.sd-table-body div.sd-table-tr {
-  display: flex;
-}
 .sd-table-virtualized div.sd-table-body div.sd-table-td {
-  display: flex;
-  flex: 1;
   align-items: center;
 }