luna-plus 0.0.5

package/dist/Table/Table.svelte

@@ -0,0 +1,700 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type {
+    TableProps,
+    TableColumn,
+    SortOrder,
+    SortChangeEvent,
+    RowClickEvent,
+    CellClickEvent,
+    SelectionChangeEvent,
+    TableActionButton,
+  } from "./types";
+  import Checkbox from "../Checkbox/Checkbox.svelte";
+  import Loading from "../Loading/Loading.svelte";
+  import Icon from "../Icon/Icon.svelte";
+  import Button from "../Button/Button.svelte";
+  import Space from "../Space/Space.svelte";
+  import { ChevronDown, ChevronUp } from "lucide";
+
+  // Props
+  let {
+    data = [],
+    columns = [],
+    rowKey = "id",
+    height,
+    maxHeight,
+    stripe = false,
+    border = false,
+    size = "default",
+    fit = true,
+    highlightCurrentRow = false,
+    currentRowKey,
+    rowClassName,
+    rowStyle,
+    cellClassName,
+    cellStyle,
+    headerRowClassName,
+    headerRowStyle,
+    headerCellClassName,
+    headerCellStyle,
+    emptyText = "暂无数据",
+    defaultExpandAll = false,
+    expandRowKeys = [],
+    defaultSort,
+    tooltipEffect = "dark",
+    tooltipOptions = {},
+    showHeader = true,
+    selectedRowKeys = [],
+    loading = false,
+    class: cls = "",
+    empty,
+    onsortchange,
+    onselectionchange,
+    onrowclick,
+    oncellclick,
+    oncurrentchange,
+    ...attrs
+  }: TableProps & {
+    onsortchange?: (e: SortChangeEvent) => void;
+    onselectionchange?: (e: SelectionChangeEvent) => void;
+    onrowclick?: (e: RowClickEvent) => void;
+    oncellclick?: (e: CellClickEvent) => void;
+    oncurrentchange?: (row: any) => void;
+  } = $props();
+
+  // State - use effects to sync with props
+  let sortState = $state<{ prop: string; order: SortOrder }>({
+    prop: "",
+    order: null,
+  });
+  let selectedKeys = $state<Set<string | number>>(new Set());
+  let currentRowKeyState = $state<string | number | undefined>(undefined);
+  let expandedKeys = $state<Set<string | number>>(new Set());
+  let hoveredTooltipCell = $state<{
+    rowIndex: number;
+    colIndex: number;
+    content: string;
+  } | null>(null);
+
+  // Sync props to state
+  $effect(() => {
+    if (defaultSort) {
+      sortState = {
+        prop: defaultSort.prop || "",
+        order: defaultSort.order || null,
+      };
+    }
+  });
+
+  $effect(() => {
+    selectedKeys = new Set(selectedRowKeys);
+  });
+
+  $effect(() => {
+    currentRowKeyState = currentRowKey;
+  });
+
+  $effect(() => {
+    expandedKeys = new Set(expandRowKeys);
+  });
+  let tooltipVisible = $state(false);
+  let tooltipPosition = $state({ top: 0, left: 0 });
+  let tableRef = $state<HTMLDivElement | null>(null);
+
+  // Get row key value
+  const getRowKey = (row: any, index: number): string | number => {
+    if (typeof rowKey === "function") {
+      return rowKey(row);
+    }
+    return row[rowKey] ?? index;
+  };
+
+  // Get cell value
+  const getCellValue = (row: any, column: TableColumn): any => {
+    if (!column.prop) return "";
+    const keys = column.prop.split(".");
+    let value = row;
+    for (const key of keys) {
+      if (value == null) return "";
+      value = value[key];
+    }
+    return value;
+  };
+
+  // Format cell value
+  const formatCellValue = (
+    row: any,
+    column: TableColumn,
+    index: number,
+  ): string | number => {
+    const value = getCellValue(row, column);
+    if (column.formatter) {
+      return column.formatter(row, column, value, index);
+    }
+    if (value == null) return "";
+    return value;
+  };
+
+  const getCellComponentProps = (
+    row: any,
+    column: TableColumn,
+    index: number,
+  ): Record<string, any> => {
+    const cellValue = getCellValue(row, column);
+    if (!column.cellComponentProps) return {};
+    if (typeof column.cellComponentProps === "function") {
+      return column.cellComponentProps(row, column, cellValue, index) || {};
+    }
+    return column.cellComponentProps;
+  };
+
+  // Get action button disabled state
+  const isActionDisabled = <T,>(
+    action: TableActionButton<T>,
+    row: T,
+    index: number,
+  ): boolean => {
+    if (typeof action.disabled === "function") {
+      return action.disabled(row, index);
+    }
+    return action.disabled ?? false;
+  };
+
+  // Get action button hidden state
+  const isActionHidden = <T,>(
+    action: TableActionButton<T>,
+    row: T,
+    index: number,
+  ): boolean => {
+    if (typeof action.hidden === "function") {
+      return action.hidden(row, index);
+    }
+    return action.hidden ?? false;
+  };
+
+  // Get visible actions for a row
+  const getVisibleActions = <T,>(
+    actions: TableActionButton<T>[] | undefined,
+    row: T,
+    index: number,
+  ): TableActionButton<T>[] => {
+    if (!actions) return [];
+    return actions.filter((action) => !isActionHidden(action, row, index));
+  };
+
+  // Sorted data
+  const sortedData = $derived.by(() => {
+    if (!sortState.prop || !sortState.order) {
+      return [...data];
+    }
+    const column = columns.find((c) => c.prop === sortState.prop);
+    if (!column) return [...data];
+
+    const sorted = [...data];
+    const order = sortState.order === "ascending" ? 1 : -1;
+
+    if (column.sortMethod) {
+      sorted.sort((a, b) => column.sortMethod!(a, b) * order);
+    } else {
+      sorted.sort((a, b) => {
+        const aVal = getCellValue(a, column);
+        const bVal = getCellValue(b, column);
+        if (aVal === bVal) return 0;
+        if (aVal == null) return 1;
+        if (bVal == null) return -1;
+        if (typeof aVal === "number" && typeof bVal === "number") {
+          return (aVal - bVal) * order;
+        }
+        return String(aVal).localeCompare(String(bVal)) * order;
+      });
+    }
+    return sorted;
+  });
+
+  // Handle sort
+  const handleSort = (column: TableColumn) => {
+    if (!column.sortable || !column.prop) return;
+
+    const orders: SortOrder[] = column.sortOrders || [
+      "ascending",
+      "descending",
+      null,
+    ];
+    let currentIndex = orders.indexOf(sortState.order);
+    if (sortState.prop !== column.prop) {
+      currentIndex = -1;
+    }
+    const nextIndex = (currentIndex + 1) % orders.length;
+    const newOrder = orders[nextIndex];
+
+    sortState = { prop: column.prop, order: newOrder };
+
+    onsortchange?.({ column, prop: column.prop, order: newOrder });
+  };
+
+  // Handle selection
+  const handleSelect = (row: any, index: number) => {
+    const key = getRowKey(row, index);
+    const newSelected = new Set(selectedKeys);
+    if (newSelected.has(key)) {
+      newSelected.delete(key);
+    } else {
+      newSelected.add(key);
+    }
+    selectedKeys = newSelected;
+    onselectionchange?.({
+      selection: data.filter((r, i) => selectedKeys.has(getRowKey(r, i))),
+    });
+  };
+
+  // Handle select all
+  const handleSelectAll = () => {
+    const selectableRows = data.filter((row, index) => {
+      const column = columns.find((c) => c.type === "selection");
+      return !column?.selectable || column.selectable(row, index);
+    });
+    const allSelected = selectableRows.every((row, index) =>
+      selectedKeys.has(getRowKey(row, index)),
+    );
+
+    if (allSelected) {
+      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))),
+    });
+  };
+
+  // Check if all selected
+  const isAllSelected = $derived.by(() => {
+    if (data.length === 0) return false;
+    const selectableRows = data.filter((row, index) => {
+      const column = columns.find((c) => c.type === "selection");
+      return !column?.selectable || column.selectable(row, index);
+    });
+    return (
+      selectableRows.length > 0 &&
+      selectableRows.every((row, index) =>
+        selectedKeys.has(getRowKey(row, index)),
+      )
+    );
+  });
+
+  // Check if indeterminate
+  const isIndeterminate = $derived.by(() => {
+    const selectedCount = data.filter((row, index) =>
+      selectedKeys.has(getRowKey(row, index)),
+    ).length;
+    return selectedCount > 0 && selectedCount < data.length;
+  });
+
+  // Handle row click
+  const handleRowClick = (row: any, column: TableColumn, event: MouseEvent) => {
+    if (highlightCurrentRow) {
+      const key = getRowKey(row, data.indexOf(row));
+      currentRowKeyState = key;
+      oncurrentchange?.(row);
+    }
+    onrowclick?.({ row, column, event });
+  };
+
+  // Handle cell click
+  const handleCellClick = (
+    row: any,
+    column: TableColumn,
+    cell: HTMLElement,
+    event: MouseEvent,
+  ) => {
+    oncellclick?.({ row, column, cell, event });
+  };
+
+  // Get row class
+  const getRowClass = (row: any, index: number): string => {
+    const classes: string[] = ["lm-table__row"];
+    if (stripe && index % 2 === 1) {
+      classes.push("lm-table__row--striped");
+    }
+    if (highlightCurrentRow && currentRowKeyState === getRowKey(row, index)) {
+      classes.push("is-current");
+    }
+    if (typeof rowClassName === "function") {
+      const custom = rowClassName(row, index);
+      if (custom) classes.push(custom);
+    } else if (rowClassName) {
+      classes.push(rowClassName);
+    }
+    return classes.join(" ");
+  };
+
+  // Get row style
+  const getRowStyleString = (row: any, index: number): string => {
+    if (typeof rowStyle === "function") {
+      const style = rowStyle(row, index);
+      return Object.entries(style)
+        .map(([k, v]) => `${k}: ${v}`)
+        .join("; ");
+    }
+    if (typeof rowStyle === "object") {
+      return Object.entries(rowStyle)
+        .map(([k, v]) => `${k}: ${v}`)
+        .join("; ");
+    }
+    return rowStyle || "";
+  };
+
+  // Get cell class
+  const getCellClass = (
+    row: any,
+    column: TableColumn,
+    rowIndex: number,
+    colIndex: number,
+  ): string => {
+    const classes: string[] = ["lm-table__cell"];
+    if (column.type === "selection") {
+      classes.push("is-center");
+    }
+    if (column.align) {
+      classes.push(`is-${column.align}`);
+    }
+    if (column.className) {
+      classes.push(column.className);
+    }
+    if (typeof cellClassName === "function") {
+      const custom = cellClassName(row, column, rowIndex, colIndex);
+      if (custom) classes.push(custom);
+    } else if (cellClassName) {
+      classes.push(cellClassName);
+    }
+    return classes.join(" ");
+  };
+
+  // Get header cell class
+  const getHeaderCellClass = (column: TableColumn, index: number): string => {
+    const classes: string[] = ["lm-table__cell", "lm-table__header-cell"];
+    if (column.type === "selection") {
+      classes.push("is-center");
+    }
+    if (column.headerAlign || column.align) {
+      classes.push(`is-${column.headerAlign || column.align}`);
+    }
+    if (column.labelClassName) {
+      classes.push(column.labelClassName);
+    }
+    if (column.sortable) {
+      classes.push("is-sortable");
+    }
+    if (sortState.prop === column.prop && sortState.order) {
+      classes.push(`is-sorted-${sortState.order}`);
+    }
+    if (typeof headerCellClassName === "function") {
+      const custom = headerCellClassName(column, index);
+      if (custom) classes.push(custom);
+    } else if (headerCellClassName) {
+      classes.push(headerCellClassName);
+    }
+    return classes.join(" ");
+  };
+
+  // Get column width style
+  const getColumnWidthStyle = (column: TableColumn): string => {
+    const styles: string[] = [];
+    if (column.width) {
+      const width =
+        typeof column.width === "number" ? `${column.width}px` : column.width;
+      styles.push(`width: ${width}`);
+      styles.push(`min-width: ${width}`);
+    } else if (column.minWidth) {
+      const minWidth =
+        typeof column.minWidth === "number"
+          ? `${column.minWidth}px`
+          : column.minWidth;
+      styles.push(`min-width: ${minWidth}`);
+    }
+    return styles.join("; ");
+  };
+
+  // Get index value
+  const getIndexValue = (column: TableColumn, index: number): number => {
+    if (typeof column.index === "function") {
+      return column.index(index);
+    }
+    return (column.index ?? 1) + index;
+  };
+
+  // Tooltip handling for overflow
+  let tooltipTimeout: ReturnType<typeof setTimeout> | null = null;
+  let cellRefs = $state<Map<string, HTMLElement>>(new Map());
+
+  const checkOverflow = (element: HTMLElement): boolean => {
+    return element.scrollWidth > element.clientWidth;
+  };
+
+  const handleCellMouseEnter = (
+    event: MouseEvent,
+    row: any,
+    column: TableColumn,
+    rowIndex: number,
+    colIndex: number,
+  ) => {
+    if (!column.showOverflowTooltip) return;
+
+    const target = event.currentTarget as HTMLElement;
+    const cellContent = target.querySelector(
+      ".lm-table__cell-text",
+    ) as HTMLElement;
+
+    if (!cellContent || !checkOverflow(cellContent)) return;
+
+    const content = formatCellValue(row, column, rowIndex);
+    if (!content) return;
+
+    // Clear existing timeout
+    if (tooltipTimeout) {
+      clearTimeout(tooltipTimeout);
+    }
+
+    tooltipTimeout = setTimeout(() => {
+      const rect = target.getBoundingClientRect();
+      const tableRect = tableRef?.getBoundingClientRect();
+
+      if (tableRect) {
+        tooltipPosition = {
+          top: rect.top - tableRect.top - 10,
+          left: rect.left - tableRect.left + rect.width / 2,
+        };
+      }
+
+      hoveredTooltipCell = { rowIndex, colIndex, content: String(content) };
+      tooltipVisible = true;
+    }, 300);
+  };
+
+  const handleCellMouseLeave = () => {
+    if (tooltipTimeout) {
+      clearTimeout(tooltipTimeout);
+      tooltipTimeout = null;
+    }
+    tooltipVisible = false;
+    hoveredTooltipCell = null;
+  };
+
+  // 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}` : ""}`,
+  );
+
+  // Table style
+  const tableStyle = $derived.by(() => {
+    const styles: string[] = [];
+    if (height) {
+      const h = typeof height === "number" ? `${height}px` : height;
+      styles.push(`height: ${h}`);
+    }
+    if (maxHeight) {
+      const mh = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+      styles.push(`max-height: ${mh}`);
+    }
+    return styles.join("; ");
+  });
+
+  // Cleanup
+  $effect(() => {
+    return () => {
+      if (tooltipTimeout) {
+        clearTimeout(tooltipTimeout);
+      }
+    };
+  });
+</script>
+
+<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">
+        <colgroup>
+          {#each columns as column}
+            <col style={getColumnWidthStyle(column)} />
+          {/each}
+        </colgroup>
+        {#if showHeader}
+          <thead class="lm-table__header">
+            <tr class="lm-table__row">
+              {#each columns as column, colIndex}
+                <th
+                  class={getHeaderCellClass(column, colIndex)}
+                  onclick={() => handleSort(column)}
+                >
+                  <div class="lm-table__cell-wrapper">
+                    {#if column.type === "selection"}
+                      <Checkbox
+                        checked={isAllSelected}
+                        indeterminate={isIndeterminate}
+                        onchange={handleSelectAll}
+                        size="small"
+                      />
+                    {:else if column.renderHeader}
+                      {@render column.renderHeader({
+                        column,
+                        $index: colIndex,
+                      })}
+                    {:else}
+                      <span class="lm-table__header-text"
+                        >{column.label || ""}</span
+                      >
+                    {/if}
+                    {#if column.sortable}
+                      <span class="lm-table__sort-caret">
+                        <Icon
+                          icon={ChevronUp}
+                          size={12}
+                          class={`lm-table__sort-icon lm-table__sort-icon--asc${sortState.prop === column.prop && sortState.order === "ascending" ? " is-active" : ""}`}
+                        />
+                        <Icon
+                          icon={ChevronDown}
+                          size={12}
+                          class={`lm-table__sort-icon lm-table__sort-icon--desc${sortState.prop === column.prop && sortState.order === "descending" ? " is-active" : ""}`}
+                        />
+                      </span>
+                    {/if}
+                  </div>
+                </th>
+              {/each}
+            </tr>
+          </thead>
+        {/if}
+        <tbody class="lm-table__body">
+          {#if sortedData.length === 0}
+            <tr class="lm-table__row lm-table__empty-row">
+              <td
+                class="lm-table__cell lm-table__empty-cell"
+                colspan={columns.length}
+              >
+                <div class="lm-table__empty">
+                  {#if empty}
+                    {@render empty()}
+                  {:else}
+                    <span class="lm-table__empty-text">{emptyText}</span>
+                  {/if}
+                </div>
+              </td>
+            </tr>
+          {:else}
+            {#each sortedData as row, rowIndex (getRowKey(row, rowIndex))}
+              <tr
+                class={getRowClass(row, rowIndex)}
+                style={getRowStyleString(row, rowIndex)}
+              >
+                {#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({
+                          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)}
+                          >
+                            {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>
+                {/each}
+              </tr>
+            {/each}
+          {/if}
+        </tbody>
+      </table>
+    </div>
+  </Loading>
+
+  <!-- Tooltip -->
+  {#if tooltipVisible && hoveredTooltipCell}
+    <div
+      class="lm-table__tooltip lm-tooltip__popper is-{tooltipOptions?.placement ||
+        'top'} {tooltipEffect === 'light' ? 'is-light' : ''}"
+      style="top: {tooltipPosition.top}px; left: {tooltipPosition.left}px;"
+      role="tooltip"
+    >
+      {hoveredTooltipCell.content}
+      {#if tooltipOptions?.showArrow !== false}
+        <div class="lm-tooltip__arrow"></div>
+      {/if}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,11 @@
+import type { TableProps, SortChangeEvent, RowClickEvent, CellClickEvent, SelectionChangeEvent } 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;
+};
+declare const Table: import("svelte").Component<$$ComponentProps, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;