hechang27
/
noob-components
forked from mengyxu/noob-components
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

WIP: list-table-v2

dev
hechang27-sprt 2 months ago
parent
1e99a6045a
commit
e97043c534
6 changed files with 81 additions and 63 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      AGENTS.md
  2. 2
      CLAUDE.md
  3. 6
      examples/view/base/table-v2.vue
  4. 96
      packages/base/data/list-table-v2/list-table-v2.vue
  5. 14
      packages/base/data/list-table-v2/usePretextColumnWidths.ts
  6. 24
      packages/base/data/list-table-v2/usePretextRowHeights.ts

2
AGENTS.md
Unescape View File

@ -1,7 +1,7 @@
<!-- gitnexus:start --> <!-- gitnexus:start -->
# GitNexus — Code Intelligence # GitNexus — Code Intelligence
This project is indexed by GitNexus as **noob-components** (721 symbols, 1559 relationships, 53 execution flows). Use the GitNexus MCP tools to understand code, assess impact, and navigate safely. This project is indexed by GitNexus as **noob-components** (794 symbols, 1774 relationships, 59 execution flows). Use the GitNexus MCP tools to understand code, assess impact, and navigate safely.
> If any GitNexus tool warns the index is stale, run `npx gitnexus analyze` in terminal first. > If any GitNexus tool warns the index is stale, run `npx gitnexus analyze` in terminal first.

2
CLAUDE.md
Unescape View File

@ -1,7 +1,7 @@
<!-- gitnexus:start --> <!-- gitnexus:start -->
# GitNexus — Code Intelligence # GitNexus — Code Intelligence
This project is indexed by GitNexus as **noob-components** (721 symbols, 1559 relationships, 53 execution flows). Use the GitNexus MCP tools to understand code, assess impact, and navigate safely. This project is indexed by GitNexus as **noob-components** (794 symbols, 1774 relationships, 59 execution flows). Use the GitNexus MCP tools to understand code, assess impact, and navigate safely.
> If any GitNexus tool warns the index is stale, run `npx gitnexus analyze` in terminal first. > If any GitNexus tool warns the index is stale, run `npx gitnexus analyze` in terminal first.

6
examples/view/base/table-v2.vue
Unescape View File

@ -450,8 +450,10 @@ const headerColumns = [
</el-tag> </el-tag>
</template> </template>
<template #actions="{ row }"> <template #actions="{ row }">
<el-button link type="primary" size="small" @click="onSlotAction(row)">Edit</el-button> <div style="display: flex; flex: 1; justify-content: center; width: 100%; overflow: hidden; padding: 10% 20%">
<el-button link type="danger" size="small" @click="onSlotAction(row)">Delete</el-button> <el-button link type="primary" size="small" @click="onSlotAction(row)">Edit</el-button>
<el-button link type="danger" size="small" @click="onSlotAction(row)">Delete</el-button>
</div>
</template> </template>
</ListTableV2> </ListTableV2>

96
packages/base/data/list-table-v2/list-table-v2.vue
Unescape View File

@ -2,7 +2,15 @@
<div class="list-table-v2"> <div class="list-table-v2">
<!-- Debug info --> <!-- Debug info -->
<div v-if="debug" class="debug-info"> <div v-if="debug" class="debug-info">
<json-view :data="debugInfo" :deep="3" :virtual="true" :show-icon="true" :show-double-quotes="false" /> <json-view
:data="debugInfo"
:deep="1"
:virtual="true"
:show-icon="true"
:show-double-quotes="false"
inline
collapse-fully-inline-node
/>
</div> </div>
<!-- Main table container with ResizeObserver for width tracking --> <!-- Main table container with ResizeObserver for width tracking -->
@ -22,25 +30,25 @@
<div class="table-spacer" :style="{ height: `${virtualTotalHeight}px` }"> <div class="table-spacer" :style="{ height: `${virtualTotalHeight}px` }">
<!-- Visible rows --> <!-- Visible rows -->
<div <div
v-for="row in visibleRows" v-for="virt in visibleRows"
:key="row.index" :key="lodash.get(getRow(virt.index), rowKey) ?? virt.index"
class="table-row" class="table-row"
:style="{ :style="{
transform: `translateY(${row.offsetY}px)`, transform: `translateY(${virt.offsetY}px)`,
height: `${row.height}px`, height: `${virt.height}px`,
}" }"
@click="handleRowClick(row.index)" @click="handleRowClick(virt.index)"
> >
<div <div
v-for="col in visibleColumns" v-for="col in visibleColumns"
:key="col.key" :key="col.key"
class="table-cell" class="table-cell"
:style="getColumnStyle(col)" :style="getColumnStyle(col)"
@click="handleCellClick(row.index, col)" @click="handleCellClick(virt.index, col)"
> >
<slot :name="col.key" :row="getRow(row.index)"> <slot :name="col.key" :row="getRow(virt.index)">
<span class="cell-text" :style="getTextStyle(col)">{{ <span class="cell-text" :style="getTextStyle(col)">{{
getRow(row.index) ? formatCellValue(getRow(row.index)!, col) : "--" getRow(virt.index) ? formatCellValue(getRow(virt.index)!, col) : "--"
}}</span> }}</span>
</slot> </slot>
</div> </div>
@ -66,7 +74,7 @@
</template> </template>
<script lang="tsx" setup generic="T"> <script lang="tsx" setup generic="T">
import { ref, computed, onMounted, onUnmounted, toRef, StyleValue, CSSProperties } from "vue"; import { ref, computed, onMounted, onUnmounted, toRef, CSSProperties, watch } from "vue";
import { useStore } from "vuex"; import { useStore } from "vuex";
import { useI18n } from "vue3-i18n"; import { useI18n } from "vue3-i18n";
import * as lodash from "lodash-es"; import * as lodash from "lodash-es";
@ -78,8 +86,12 @@ import { formatTimestampFromValue } from "../../../../plugs/composables";
import { match } from "ts-pattern"; import { match } from "ts-pattern";
import { JsonView } from "noob-mengyxu"; import { JsonView } from "noob-mengyxu";
const DEFAULT_FONT = "14px sans-serif"; const DEFAULT_FONT = "14px Microsoft YaHei, sans-serif";
const DEFAULT_HEADER_FONT = "bold 16px Microsoft YaHei, sans-serif";
const DEFAULT_TEXT_MAX_WIDTH = 400; const DEFAULT_TEXT_MAX_WIDTH = 400;
const DEFAULT_LINE_HEIGHT = 20;
const DEFAULT_TOP_BOTTOM_PADDING = 8;
const DEFAULT_LEFT_RIGHT_PADDING = 4;
const { t } = useI18n(); const { t } = useI18n();
const { state } = useStore(); const { state } = useStore();
@ -113,6 +125,7 @@ interface Props {
estimatedRowHeight?: number; estimatedRowHeight?: number;
headerHeight?: number; headerHeight?: number;
font?: string; font?: string;
headerFont?: string;
debug?: boolean; debug?: boolean;
} }
@ -170,6 +183,8 @@ const pageDataRef = toRef(pageData);
// ============================================================================= // =============================================================================
// Cell formatting // Cell formatting
// ============================================================================= // =============================================================================
const isNullish = (value: any) => value === undefined || value === null || value === "";
const getHeaderText = (col: ListTableColumn<T>): string => { const getHeaderText = (col: ListTableColumn<T>): string => {
if (col.name) return col.name; if (col.name) return col.name;
if (col.i18n) return t(col.i18n); if (col.i18n) return t(col.i18n);
@ -180,7 +195,7 @@ const formatCellValue = (row: T, col: ListTableColumn<T>): string => {
const value = (row as any)[col.dataKey || col.key]; const value = (row as any)[col.dataKey || col.key];
if (col.dict) { if (col.dict) {
return formatterByDist(col.dict, value); return formatByDict(col.dict, value);
} }
if (col.timestamp) { if (col.timestamp) {
if ((typeof value !== "string" && typeof value !== "number") || value === "") { if ((typeof value !== "string" && typeof value !== "number") || value === "") {
@ -198,12 +213,7 @@ const formatCellValue = (row: T, col: ListTableColumn<T>): string => {
return String(value); return String(value);
}; };
const getValue = (value: any): string => { const display = (value: any): string => (isNullish(value) ? "--" : String(value));
if ((typeof value === "undefined" || value === null || value === "") && value !== 0) {
return "--";
}
return value;
};
const formatFileSize = (value: any): string => { const formatFileSize = (value: any): string => {
const k = value / 1024; const k = value / 1024;
@ -215,11 +225,12 @@ const formatFileSize = (value: any): string => {
return g.toFixed(2) + "G"; return g.toFixed(2) + "G";
}; };
const formatterByDist = (dictKey: string, cellData: any): string => { const formatByDict = (dictKey: string, cellData: any): string => {
if (!dictKey) return getValue(cellData); if (!dictKey) return `UNKNOWN_DICT: ${dictKey}`;
const mapping = (state as any).dict[dictKey]; const mapping = (state as any).dict[dictKey];
if (mapping == null) return getValue(cellData); if (mapping == null) return `UNKNOWN_DICT: ${dictKey}`;
return mapping[cellData] == null ? cellData : mapping[cellData]; return display(mapping[cellData]);
}; };
// ============================================================================= // =============================================================================
@ -231,11 +242,8 @@ const { computedConfigs, totalFlexBasis, columnWidths } = usePretextColumnWidths
pageDataRef, pageDataRef,
columnsRef, columnsRef,
containerWidth, containerWidth,
{ formatCellValue,
font: "14px Inter, sans-serif", { font: props.font, headerFont: DEFAULT_HEADER_FONT /* TODO: add props.headerFont */ }
headerFont: "bold 14px Inter, sans-serif",
formatCellValue,
}
); );
// Row heights via pretext - use actual column widths from flexbox algorithm // Row heights via pretext - use actual column widths from flexbox algorithm
@ -247,7 +255,15 @@ const { rowHeights, cellHeights } = resolveRowHeights(
formatCellValue, formatCellValue,
{ {
font: props.font, font: props.font,
lineHeight: 20, lineHeight: DEFAULT_LINE_HEIGHT,
padding: {
top: DEFAULT_TOP_BOTTOM_PADDING,
bottom: DEFAULT_TOP_BOTTOM_PADDING,
left: DEFAULT_LEFT_RIGHT_PADDING + 1,
right: DEFAULT_LEFT_RIGHT_PADDING,
},
},
{
debug: props.debug, debug: props.debug,
fixedRowHeight: props.rowHeight, fixedRowHeight: props.rowHeight,
} }
@ -278,12 +294,13 @@ const tableContainerStyle = computed(() => {
}; };
if (props.height !== undefined) { if (props.height !== undefined) {
const h = String(props.height); const h = String(props.height);
style.maxHeight = h.endsWith("px") ? h : `${h}px`; style.flex = "unset";
style.height = h.endsWith("px") ? h : `${h}px`;
}
if (props.maxHeight !== undefined) {
const mh = String(props.maxHeight);
style.maxHeight = mh.endsWith("px") ? mh : `${mh}px`;
} }
// if (props.maxHeight !== undefined) {
// const mh = String(props.maxHeight);
// style.maxHeight = mh.endsWith("px") ? mh : `${mh}px`;
// }
return style; return style;
}); });
@ -394,12 +411,12 @@ const handleCurrentChange = (val: number) => {
const debugInfo = computed(() => ({ const debugInfo = computed(() => ({
containerWidth, containerWidth,
virtualTotalHeight, virtualTotalHeight,
visibleRows: visibleRows.value.map((entry) => entry.height).join(","), visibleRows: visibleRows.value.map((entry) => entry.height),
cellHeights: cellHeights.value?.map((rowCellHeights) => cellHeights: cellHeights.value?.map((rowCellHeights) =>
rowCellHeights.map((entry) => (entry ? `${entry.isCustomRenderer ? "*" : ""}${entry.height}` : "null")).join(",") rowCellHeights.map((entry) => (entry ? `${entry.isCustomRenderer ? "*" : ""}${entry.height}` : "null"))
), ),
totalRows: pageData.value.length, totalRows: pageData.value.length,
columnWidths: columnWidths.value.map((w) => Math.round(w)).join(","), columnWidths: columnWidths.value.map((w) => Math.round(w)),
columnConfigs: computedConfigs, columnConfigs: computedConfigs,
})); }));
@ -477,7 +494,7 @@ onUnmounted(() => {
flex: 1 1 120px; flex: 1 1 120px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 8px 4px; padding: v-bind("`${DEFAULT_TOP_BOTTOM_PADDING}px ${DEFAULT_LEFT_RIGHT_PADDING}px`");
box-sizing: border-box; box-sizing: border-box;
border-right: 1px solid v-bind("state.style.tableBorderColor"); border-right: 1px solid v-bind("state.style.tableBorderColor");
overflow: hidden; overflow: hidden;
@ -496,8 +513,8 @@ onUnmounted(() => {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
color: v-bind("state.style.tableColor"); color: v-bind("state.style.tableColor");
font-weight: bold; font: v-bind("props.headerFont ?? props.font ?? DEFAULT_HEADER_FONT");
font-size: var(--el-font-size-base); font-weight: v-bind("!props.headerFont && props.font ? 'bold' : 'unset'");
} }
.table-body { .table-body {
@ -556,6 +573,7 @@ onUnmounted(() => {
word-break: break-word; word-break: break-word;
color: v-bind("state.style.tableColor"); color: v-bind("state.style.tableColor");
font: v-bind("props.font"); font: v-bind("props.font");
line-height: v-bind("`${DEFAULT_LINE_HEIGHT}px`");
} }
.my-pagination { .my-pagination {

14
packages/base/data/list-table-v2/usePretextColumnWidths.ts
Unescape View File

@ -188,17 +188,17 @@ export function usePretextColumnWidths<T>(
data: Ref<T[]>, data: Ref<T[]>,
columns: Ref<ListTableColumn<T>[]>, columns: Ref<ListTableColumn<T>[]>,
containerWidth: Ref<number>, containerWidth: Ref<number>,
formatCellValue: (row: T, col: ListTableColumn<T>) => string,
style: {
font: string;
headerFont: string;
},
options?: { options?: {
font?: string;
headerFont?: string;
sampleSize?: number; sampleSize?: number;
formatCellValue?: (row: T, col: ListTableColumn<T>) => string;
} }
) { ) {
const font = options?.font ?? DEFAULT_FONT; const { font, headerFont } = style;
const headerFont = options?.headerFont ?? DEFAULT_HEADER_FONT;
const sampleSize = options?.sampleSize ?? 100; const sampleSize = options?.sampleSize ?? 100;
const formatCellValue = options?.formatCellValue;
const computedConfigs = computed<ColumnFlexConfig[]>(() => { const computedConfigs = computed<ColumnFlexConfig[]>(() => {
if (!columns.value.length) return []; if (!columns.value.length) return [];
@ -225,7 +225,7 @@ export function usePretextColumnWidths<T>(
const cellWidths: number[] = []; const cellWidths: number[] = [];
for (const row of sampled) { for (const row of sampled) {
const rawValue = (row as any)[col.dataKey || colKey]; const rawValue = (row as any)[col.dataKey || colKey];
const cellText = formatCellValue?.(row, col) ?? (rawValue == null ? "" : String(rawValue)); const cellText = formatCellValue(row, col) ?? (rawValue == null ? "" : String(rawValue));
if (cellText) { if (cellText) {
const w = measureShrinkWrapWidth(cellText, font) + CELL_PADDING; const w = measureShrinkWrapWidth(cellText, font) + CELL_PADDING;
cellWidths.push(w); cellWidths.push(w);

24
packages/base/data/list-table-v2/usePretextRowHeights.ts
Unescape View File

@ -10,11 +10,6 @@ import { measureTextHeight } from "./measureText";
import type { ListTableColumn } from "./types"; import type { ListTableColumn } from "./types";
import { toRefs } from "@vueuse/core"; import { toRefs } from "@vueuse/core";
const DEFAULT_FONT = "14px Inter, sans-serif";
const DEFAULT_LINE_HEIGHT = 20;
const DEFAULT_ROW_PADDING = 5;
const CELL_VERTICAL_PADDING = 12; // top + bottom per cell
export interface RowHeightEntry { export interface RowHeightEntry {
height: number; height: number;
isCustomRenderer: boolean; isCustomRenderer: boolean;
@ -26,17 +21,17 @@ export function resolveRowHeights<T>(
columnWidths: Ref<number[]>, columnWidths: Ref<number[]>,
lineMaxWidth: number, lineMaxWidth: number,
formatCellValue: (row: T, col: ListTableColumn<T>) => string, formatCellValue: (row: T, col: ListTableColumn<T>) => string,
style: {
font: string;
lineHeight: number;
padding: { top: number; bottom: number; left: number; right: number };
},
options?: { options?: {
font?: string;
lineHeight?: number;
rowPadding?: number;
fixedRowHeight?: number; fixedRowHeight?: number;
debug?: boolean; debug?: boolean;
} }
) { ) {
const font = options?.font ?? DEFAULT_FONT; const { font, lineHeight, padding } = style;
const lineHeight = options?.lineHeight ?? DEFAULT_LINE_HEIGHT;
const rowPadding = options?.rowPadding ?? DEFAULT_ROW_PADDING;
const { rowHeights, cellHeights } = toRefs( const { rowHeights, cellHeights } = toRefs(
computed(() => { computed(() => {
@ -77,7 +72,10 @@ export function resolveRowHeights<T>(
if (!cellText) throw "Invalid Cell Text"; if (!cellText) throw "Invalid Cell Text";
// Calculate available width for text (excluding cell padding) // Calculate available width for text (excluding cell padding)
const availableWidth = Math.min(colWidth - CELL_VERTICAL_PADDING * 2, col.maxTextWidth ?? lineMaxWidth); const availableWidth = Math.min(
colWidth - padding.left - padding.right,
col.maxTextWidth ?? lineMaxWidth
);
if (availableWidth <= 0) throw "Invalid Column Width"; if (availableWidth <= 0) throw "Invalid Column Width";
rowHeightEntry = { rowHeightEntry = {
@ -99,7 +97,7 @@ export function resolveRowHeights<T>(
} }
} }
const rowHeight = maxCellHeight + rowPadding * 2; const rowHeight = maxCellHeight + padding.top + padding.bottom;
rowHeights.push(rowHeight); rowHeights.push(rowHeight);
cellHeights?.push(rowCellHeights); cellHeights?.push(rowCellHeights);
} }

Write Preview
Loading…
Cancel
Save