lumen-plus 0.0.1

package/dist/components/Table/Table.svelte

@@ -0,0 +1,575 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { TableProps, TableColumn, SortOrder, SortChangeEvent, RowClickEvent, CellClickEvent, SelectionChangeEvent, TableActionButton } from './types'
+    import Checkbox from '../../Checkbox/src'
+    import Loading from '../../Loading/src'
+    import Icon from '../../Icon/src'
+    import Button from '../../Button/src'
+    import Space from '../../Space/src'
+    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/components/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;

package/dist/components/Table/index.d.ts

@@ -0,0 +1,4 @@
+import Table from './Table.svelte';
+export { Table };
+export type { TableProps, TableColumn, TableAlign, TableSize, SortOrder, SortChangeEvent, SelectionChangeEvent, RowClickEvent, CellClickEvent, TableActionButton, TableActionButtonType } from './types';
+export default Table;

package/dist/components/Table/index.js

@@ -0,0 +1,3 @@
+import Table from './Table.svelte';
+export { Table };
+export default Table;