luna-plus 0.0.11 → 0.0.13

package/dist/Table/Table.svelte

@@ -9,6 +9,17 @@
     CellClickEvent,
     SelectionChangeEvent,
     TableActionButton,
+    SpanMethodResult,
+    SelectEvent,
+    SelectAllEvent,
+    CellMouseEvent,
+    RowDblclickEvent,
+    RowContextmenuEvent,
+    HeaderClickEvent,
+    HeaderDragendEvent,
+    FilterChangeEvent,
+    ExpandChangeEvent,
+    ScrollEvent,
   } from "./types";
   import Checkbox from "../Checkbox/Checkbox.svelte";
   import Loading from "../Loading/Loading.svelte";
@@ -47,13 +58,43 @@
     showHeader = true,
     selectedRowKeys = [],
     loading = false,
+    // 新增属性
+    showSummary = false,
+    sumText = "合计",
+    summaryMethod,
+    spanMethod,
+    selectOnIndeterminate = true,
+    indent = 16,
+    lazy = false,
+    load,
+    treeProps = { hasChildren: "hasChildren", children: "children", checkStrictly: false },
+    tableLayout = "fixed",
+    scrollbarAlwaysOn = false,
+    flexible = false,
+    showOverflowTooltip: globalShowOverflowTooltip,
+    tooltipFormatter,
+    rowExpandable,
     class: cls = "",
     empty,
+    append,
+    // 事件
     onsortchange,
     onselectionchange,
     onrowclick,
     oncellclick,
     oncurrentchange,
+    onselect,
+    onselectall,
+    oncellmouseenter,
+    oncellmouseleave,
+    onrowdblclick,
+    onrowcontextmenu,
+    onheaderclick,
+    onheadercontextmenu,
+    onheaderdragend,
+    onfilterchange,
+    onexpandchange,
+    onscroll,
     ...attrs
   }: TableProps & {
     onsortchange?: (e: SortChangeEvent) => void;
@@ -61,6 +102,18 @@
     onrowclick?: (e: RowClickEvent) => void;
     oncellclick?: (e: CellClickEvent) => void;
     oncurrentchange?: (row: any) => void;
+    onselect?: (e: SelectEvent) => void;
+    onselectall?: (e: SelectAllEvent) => void;
+    oncellmouseenter?: (e: CellMouseEvent) => void;
+    oncellmouseleave?: (e: CellMouseEvent) => void;
+    onrowdblclick?: (e: RowDblclickEvent) => void;
+    onrowcontextmenu?: (e: RowContextmenuEvent) => void;
+    onheaderclick?: (e: HeaderClickEvent) => void;
+    onheadercontextmenu?: (e: HeaderClickEvent) => void;
+    onheaderdragend?: (e: HeaderDragendEvent) => void;
+    onfilterchange?: (e: FilterChangeEvent) => void;
+    onexpandchange?: (e: ExpandChangeEvent) => void;
+    onscroll?: (e: ScrollEvent) => void;
   } = $props();
 
   // State - use effects to sync with props
@@ -243,9 +296,9 @@
       newSelected.add(key);
     }
     selectedKeys = newSelected;
-    onselectionchange?.({
-      selection: data.filter((r, i) => selectedKeys.has(getRowKey(r, i))),
-    });
+    const selection = data.filter((r, i) => selectedKeys.has(getRowKey(r, i)));
+    onselect?.({ selection, row });
+    onselectionchange?.({ selection });
   };
 
   // Handle select all
@@ -258,16 +311,17 @@
       selectedKeys.has(getRowKey(row, index)),
     );
 
-    if (allSelected) {
+    // 处理 selectOnIndeterminate
+    if (allSelected || (!selectOnIndeterminate && isIndeterminate)) {
       selectedKeys = new Set();
     } else {
       selectedKeys = new Set(
         selectableRows.map((row, index) => getRowKey(row, index)),
       );
     }
-    onselectionchange?.({
-      selection: data.filter((r, i) => selectedKeys.has(getRowKey(r, i))),
-    });
+    const selection = data.filter((r, i) => selectedKeys.has(getRowKey(r, i)));
+    onselectall?.({ selection });
+    onselectionchange?.({ selection });
   };
 
   // Check if all selected
@@ -303,6 +357,16 @@
     onrowclick?.({ row, column, event });
   };
 
+  // Handle row double click
+  const handleRowDblclick = (row: any, column: TableColumn, event: MouseEvent) => {
+    onrowdblclick?.({ row, column, event });
+  };
+
+  // Handle row context menu
+  const handleRowContextmenu = (row: any, column: TableColumn, event: MouseEvent) => {
+    onrowcontextmenu?.({ row, column, event });
+  };
+
   // Handle cell click
   const handleCellClick = (
     row: any,
@@ -313,6 +377,16 @@
     oncellclick?.({ row, column, cell, event });
   };
 
+  // Handle header click
+  const handleHeaderClick = (column: TableColumn, event: MouseEvent) => {
+    onheaderclick?.({ column, event });
+  };
+
+  // Handle header context menu
+  const handleHeaderContextmenu = (column: TableColumn, event: MouseEvent) => {
+    onheadercontextmenu?.({ column, event });
+  };
+
   // Get row class
   const getRowClass = (row: any, index: number): string => {
     const classes: string[] = ["lm-table__row"];
@@ -434,6 +508,11 @@
     return element.scrollWidth > element.clientWidth;
   };
 
+  // 获取单元格是否显示 tooltip（支持全局和列级配置）
+  const shouldShowOverflowTooltip = (column: TableColumn): boolean => {
+    return column.showOverflowTooltip ?? globalShowOverflowTooltip ?? false;
+  };
+
   const handleCellMouseEnter = (
     event: MouseEvent,
     row: any,
@@ -441,16 +520,25 @@
     rowIndex: number,
     colIndex: number,
   ) => {
-    if (!column.showOverflowTooltip) return;
-
     const target = event.currentTarget as HTMLElement;
+    
+    // 触发单元格鼠标进入事件
+    oncellmouseenter?.({ row, column, cell: target, event });
+    
+    if (!shouldShowOverflowTooltip(column)) return;
     const cellContent = target.querySelector(
       ".lm-table__cell-text",
     ) as HTMLElement;
 
     if (!cellContent || !checkOverflow(cellContent)) return;
 
-    const content = formatCellValue(row, column, rowIndex);
+    // 支持 tooltipFormatter
+    let content: string | number;
+    if (tooltipFormatter) {
+      content = tooltipFormatter(row, column, getCellValue(row, column), rowIndex);
+    } else {
+      content = formatCellValue(row, column, rowIndex);
+    }
     if (!content) return;
 
     // Clear existing timeout
@@ -474,7 +562,15 @@
     }, 300);
   };
 
-  const handleCellMouseLeave = () => {
+  const handleCellMouseLeaveInternal = (
+    event: MouseEvent,
+    row: any,
+    column: TableColumn,
+  ) => {
+    const target = event.currentTarget as HTMLElement;
+    // 触发单元格鼠标离开事件
+    oncellmouseleave?.({ row, column, cell: target, event });
+    
     if (tooltipTimeout) {
       clearTimeout(tooltipTimeout);
       tooltipTimeout = null;
@@ -483,9 +579,56 @@
     hoveredTooltipCell = null;
   };
 
+  // 计算合计行
+  const summaryData = $derived.by(() => {
+    if (!showSummary) return [];
+    
+    if (summaryMethod) {
+      return summaryMethod({ columns, data: sortedData });
+    }
+    
+    // 默认合计方法
+    return columns.map((column, index) => {
+      if (index === 0) return sumText;
+      if (!column.prop) return "";
+      
+      const values = sortedData.map(row => getCellValue(row, column));
+      const numericValues = values.filter(v => !isNaN(Number(v)));
+      
+      if (numericValues.length === 0) return "";
+      
+      const sum = numericValues.reduce((acc, val) => acc + Number(val), 0);
+      return sum;
+    });
+  });
+
+  // 获取单元格合并信息
+  const getSpanInfo = (row: any, column: TableColumn, rowIndex: number, colIndex: number): { rowspan: number; colspan: number } => {
+    if (!spanMethod) return { rowspan: 1, colspan: 1 };
+    
+    const result = spanMethod({ row, column, rowIndex, columnIndex: colIndex });
+    
+    if (!result) return { rowspan: 1, colspan: 1 };
+    
+    if (Array.isArray(result)) {
+      return { rowspan: result[0], colspan: result[1] };
+    }
+    
+    return { rowspan: result.rowspan ?? 1, colspan: result.colspan ?? 1 };
+  };
+
+  // 处理滚动事件
+  const handleScroll = (event: Event) => {
+    const target = event.target as HTMLElement;
+    onscroll?.({
+      scrollLeft: target.scrollLeft,
+      scrollTop: target.scrollTop,
+    });
+  };
+
   // Table classes
   const tableClasses = $derived(
-    `lm-table${border ? " lm-table--border" : ""}${stripe ? " lm-table--striped" : ""}${size !== "default" ? ` lm-table--${size}` : ""}${fit ? " lm-table--fit" : ""}${highlightCurrentRow ? " lm-table--highlight-current-row" : ""}${loading ? " is-loading" : ""}${cls ? ` ${cls}` : ""}`,
+    `lm-table${border ? " lm-table--border" : ""}${stripe ? " lm-table--striped" : ""}${size !== "default" ? ` lm-table--${size}` : ""}${fit ? " lm-table--fit" : ""}${highlightCurrentRow ? " lm-table--highlight-current-row" : ""}${loading ? " is-loading" : ""}${flexible ? " lm-table--flexible" : ""}${scrollbarAlwaysOn ? " lm-table--scrollbar-always-on" : ""}${cls ? ` ${cls}` : ""}`,
   );
 
   // Table style
@@ -514,8 +657,8 @@
 
 <div {...attrs} bind:this={tableRef} class={tableClasses} style={tableStyle}>
   <Loading visible={loading} lock={false}>
-    <div class="lm-table__inner-wrapper">
-      <table class="lm-table__table" cellspacing="0" cellpadding="0" border="0">
+    <div class="lm-table__inner-wrapper" onscroll={handleScroll}>
+      <table class="lm-table__table" style:table-layout={tableLayout} cellspacing="0" cellpadding="0" border="0">
         <colgroup>
           {#each columns as column}
             <col style={getColumnWidthStyle(column)} />
@@ -527,7 +670,11 @@
               {#each columns as column, colIndex}
                 <th
                   class={getHeaderCellClass(column, colIndex)}
-                  onclick={() => handleSort(column)}
+                  onclick={(e) => {
+                    handleSort(column);
+                    handleHeaderClick(column, e);
+                  }}
+                  oncontextmenu={(e) => handleHeaderContextmenu(column, e)}
                 >
                   <div class="lm-table__cell-wrapper">
                     {#if column.type === "selection"}
@@ -588,98 +735,126 @@
               <tr
                 class={getRowClass(row, rowIndex)}
                 style={getRowStyleString(row, rowIndex)}
+                ondblclick={(e) => handleRowDblclick(row, columns[0], e)}
+                oncontextmenu={(e) => handleRowContextmenu(row, columns[0], e)}
               >
                 {#each columns as column, colIndex}
-                  <td
-                    class={getCellClass(row, column, rowIndex, colIndex)}
-                    onclick={(e) => {
-                      handleRowClick(row, column, e);
-                      handleCellClick(
-                        row,
-                        column,
-                        e.currentTarget as HTMLElement,
-                        e,
-                      );
-                    }}
-                    onmouseenter={(e) =>
-                      handleCellMouseEnter(e, row, column, rowIndex, colIndex)}
-                    onmouseleave={handleCellMouseLeave}
-                  >
-                    <div
-                      class="lm-table__cell-wrapper"
-                      class:has-overflow-tooltip={column.showOverflowTooltip}
-                    >
-                      {#if column.type === "selection"}
-                        {@const selectable =
-                          !column.selectable ||
-                          column.selectable(row, rowIndex)}
-                        <Checkbox
-                          checked={selectedKeys.has(getRowKey(row, rowIndex))}
-                          disabled={!selectable}
-                          onchange={() => handleSelect(row, rowIndex)}
-                          size="small"
-                        />
-                      {:else if column.type === "index"}
-                        <span class="lm-table__cell-text"
-                          >{getIndexValue(column, rowIndex)}</span
-                        >
-                      {:else if column.type === "actions"}
-                        {@const visibleActions = getVisibleActions(
-                          column.actions,
-                          row,
-                          rowIndex,
-                        )}
-                        <Space size="small">
-                          {#each visibleActions as action, actionIndex (actionIndex)}
-                            <Button
-                              type={action.type || "primary"}
-                              plain
-                              size="small"
-                              disabled={isActionDisabled(action, row, rowIndex)}
-                              onclick={(e: MouseEvent) => {
-                                e.stopPropagation();
-                                action.onClick?.(row, rowIndex);
-                              }}
-                            >
-                              {action.label}
-                            </Button>
-                          {/each}
-                        </Space>
-                      {:else if column.render}
-                        {@render column.render({
+                  {@const spanInfo = getSpanInfo(row, column, rowIndex, colIndex)}
+                  {#if spanInfo.rowspan !== 0 && spanInfo.colspan !== 0}
+                    <td
+                      class={getCellClass(row, column, rowIndex, colIndex)}
+                      rowspan={spanInfo.rowspan > 1 ? spanInfo.rowspan : undefined}
+                      colspan={spanInfo.colspan > 1 ? spanInfo.colspan : undefined}
+                      onclick={(e) => {
+                        handleRowClick(row, column, e);
+                        handleCellClick(
                           row,
                           column,
-                          $index: rowIndex,
-                          cellValue: getCellValue(row, column),
-                        })}
-                      {:else if column.cellComponent}
-                        {@const CellComp = column.cellComponent}
-                        <span
-                          class="lm-table__cell-text"
-                          class:is-ellipsis={column.showOverflowTooltip}
-                        >
-                          <CellComp
-                            {...getCellComponentProps(row, column, rowIndex)}
+                          e.currentTarget as HTMLElement,
+                          e,
+                        );
+                      }}
+                      onmouseenter={(e) =>
+                        handleCellMouseEnter(e, row, column, rowIndex, colIndex)}
+                      onmouseleave={(e) =>
+                        handleCellMouseLeaveInternal(e, row, column)}
+                    >
+                      <div
+                        class="lm-table__cell-wrapper"
+                        class:has-overflow-tooltip={shouldShowOverflowTooltip(column)}
+                      >
+                        {#if column.type === "selection"}
+                          {@const selectable =
+                            !column.selectable ||
+                            column.selectable(row, rowIndex)}
+                          <Checkbox
+                            checked={selectedKeys.has(getRowKey(row, rowIndex))}
+                            disabled={!selectable}
+                            onchange={() => handleSelect(row, rowIndex)}
+                            size="small"
+                          />
+                        {:else if column.type === "index"}
+                          <span class="lm-table__cell-text"
+                            >{getIndexValue(column, rowIndex)}</span
+                          >
+                        {:else if column.type === "actions"}
+                          {@const visibleActions = getVisibleActions(
+                            column.actions,
+                            row,
+                            rowIndex,
+                          )}
+                          <Space size="small">
+                            {#each visibleActions as action, actionIndex (actionIndex)}
+                              <Button
+                                type={action.type || "primary"}
+                                plain
+                                size="small"
+                                disabled={isActionDisabled(action, row, rowIndex)}
+                                onclick={(e: MouseEvent) => {
+                                  e.stopPropagation();
+                                  action.onClick?.(row, rowIndex);
+                                }}
+                              >
+                                {action.label}
+                              </Button>
+                            {/each}
+                          </Space>
+                        {:else if column.render}
+                          {@render column.render({
+                            row,
+                            column,
+                            $index: rowIndex,
+                            cellValue: getCellValue(row, column),
+                          })}
+                        {:else if column.cellComponent}
+                          {@const CellComp = column.cellComponent}
+                          <span
+                            class="lm-table__cell-text"
+                            class:is-ellipsis={shouldShowOverflowTooltip(column)}
+                          >
+                            <CellComp
+                              {...getCellComponentProps(row, column, rowIndex)}
+                            >
+                              {formatCellValue(row, column, rowIndex)}
+                            </CellComp>
+                          </span>
+                        {:else}
+                          <span
+                            class="lm-table__cell-text"
+                            class:is-ellipsis={shouldShowOverflowTooltip(column)}
                           >
                             {formatCellValue(row, column, rowIndex)}
-                          </CellComp>
-                        </span>
-                      {:else}
-                        <span
-                          class="lm-table__cell-text"
-                          class:is-ellipsis={column.showOverflowTooltip}
-                        >
-                          {formatCellValue(row, column, rowIndex)}
-                        </span>
-                      {/if}
-                    </div>
-                  </td>
+                          </span>
+                        {/if}
+                      </div>
+                    </td>
+                  {/if}
                 {/each}
               </tr>
             {/each}
           {/if}
         </tbody>
+        {#if showSummary && sortedData.length > 0}
+          <tfoot class="lm-table__footer">
+            <tr class="lm-table__row">
+              {#each columns as column, colIndex}
+                <td class="lm-table__cell lm-table__summary-cell">
+                  <div class="lm-table__cell-wrapper">
+                    <span class="lm-table__cell-text">
+                      {summaryData[colIndex] ?? ""}
+                    </span>
+                  </div>
+                </td>
+              {/each}
+            </tr>
+          </tfoot>
+        {/if}
       </table>
+      {#if append}
+        <div class="lm-table__append-wrapper">
+          {@render append()}
+        </div>
+      {/if}
     </div>
   </Loading>
 

package/dist/Table/Table.svelte.d.ts

@@ -1,10 +1,39 @@
-import type { TableProps, SortChangeEvent, RowClickEvent, CellClickEvent, SelectionChangeEvent } from './types';
+import type {
+    TableProps,
+    SortChangeEvent,
+    RowClickEvent,
+    CellClickEvent,
+    SelectionChangeEvent,
+    SelectEvent,
+    SelectAllEvent,
+    CellMouseEvent,
+    RowDblclickEvent,
+    RowContextmenuEvent,
+    HeaderClickEvent,
+    HeaderDragendEvent,
+    FilterChangeEvent,
+    ExpandChangeEvent,
+    ScrollEvent
+} from './types';
+
 type $$ComponentProps = TableProps & {
     onsortchange?: (e: SortChangeEvent) => void;
     onselectionchange?: (e: SelectionChangeEvent) => void;
     onrowclick?: (e: RowClickEvent) => void;
     oncellclick?: (e: CellClickEvent) => void;
     oncurrentchange?: (row: any) => void;
+    onselect?: (e: SelectEvent) => void;
+    onselectall?: (e: SelectAllEvent) => void;
+    oncellmouseenter?: (e: CellMouseEvent) => void;
+    oncellmouseleave?: (e: CellMouseEvent) => void;
+    onrowdblclick?: (e: RowDblclickEvent) => void;
+    onrowcontextmenu?: (e: RowContextmenuEvent) => void;
+    onheaderclick?: (e: HeaderClickEvent) => void;
+    onheadercontextmenu?: (e: HeaderClickEvent) => void;
+    onheaderdragend?: (e: HeaderDragendEvent) => void;
+    onfilterchange?: (e: FilterChangeEvent) => void;
+    onexpandchange?: (e: ExpandChangeEvent) => void;
+    onscroll?: (e: ScrollEvent) => void;
 };
 declare const Table: import("svelte").Component<$$ComponentProps, {}, "">;
 type Table = ReturnType<typeof Table>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luna-plus",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "A modern Svelte 5 component library with 60+ components",
   "type": "module",
   "svelte": "./dist/index.js",