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

fix: clean up type & misc errors

dev
hechang27-sprt 2 months ago
parent
7dd6c6cf96
commit
c4093d7edb
3 changed files with 60 additions and 60 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. 44
      examples/view/base/table-v2.vue
  2. 48
      packages/base/data/list-table-v2/list-table-v2.vue
  3. 28
      packages/base/data/list-table-v2/types.ts

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

@ -445,8 +445,8 @@ const headerColumns = [
debug debug
> >
<template #status="{ row }"> <template #status="{ row }">
<el-tag :type="row.status === 'active' ? 'success' : 'warning'" size="small"> <el-tag :type="row?.status === 'active' ? 'success' : 'warning'" size="small">
{{ row.status }} {{ row?.status }}
</el-tag> </el-tag>
</template> </template>
<template #actions="{ row }"> <template #actions="{ row }">
@ -538,7 +538,7 @@ const i18nColumns = [
debug debug
> >
<template #combinedStatus="{ row }"> <template #combinedStatus="{ row }">
<el-tag :type="getStatusType(row.status)" size="small">{{ row.status }}</el-tag> <el-tag :type="getStatusType(row?.status)" size="small">{{ row?.status }}</el-tag>
</template> </template>
<template #combinedActions="{ row }"> <template #combinedActions="{ row }">
<el-button link type="primary" size="small">View</el-button> <el-button link type="primary" size="small">View</el-button>
@ -615,7 +615,7 @@ import {
HeaderCellRenderer, HeaderCellRenderer,
HeaderCellRendererParams, HeaderCellRendererParams,
} from "element-plus/es/components/table-v2/src/types.mjs"; } from "element-plus/es/components/table-v2/src/types.mjs";
import type { ListTableColumn } from "../../../packages/base/data/list-table-v2.vue"; import { type ListTableColumn } from "../../../packages/base/data/list-table-v2";
// --- Data Generator --- // --- Data Generator ---
const generateRows = (count: number) => { const generateRows = (count: number) => {
@ -752,7 +752,7 @@ const formatColumns = [
// ================================================================ // ================================================================
// SECTION 5: Custom Cell Renderer // SECTION 5: Custom Cell Renderer
// ================================================================ // ================================================================
const statusRenderer: CellRenderer<T> = ({ cellData }) => { const statusRenderer: CellRenderer<any> = ({ cellData }) => {
testResults.cellRenderer = true; testResults.cellRenderer = true;
const status = cellData as string; const status = cellData as string;
const type = const type =
@ -764,7 +764,7 @@ const statusRenderer: CellRenderer<T> = ({ cellData }) => {
); );
}; };
const actionRenderer: CellRenderer<T> = ({ rowData }) => { const actionRenderer: CellRenderer<any> = ({ rowData }) => {
return ( return (
<div style="display: flex; gap: 4px;"> <div style="display: flex; gap: 4px;">
<ElButton size="small" link type="primary"> <ElButton size="small" link type="primary">
@ -777,8 +777,8 @@ const actionRenderer: CellRenderer<T> = ({ rowData }) => {
); );
}; };
const rendererData = allRows.slice(0, 20); const rendererData = ref(allRows.slice(0, 20));
const rendererColumns: ListTableColumn<T>[] = [ const rendererColumns: ListTableColumn<any>[] = [
{ key: "id", name: "ID" }, { key: "id", name: "ID" },
{ key: "caseName", name: "Case Name" }, { key: "caseName", name: "Case Name" },
{ key: "status", name: "Status", cellRenderer: statusRenderer }, { key: "status", name: "Status", cellRenderer: statusRenderer },
@ -786,7 +786,7 @@ const rendererColumns: ListTableColumn<T>[] = [
key: "priority", key: "priority",
name: "Priority", name: "Priority",
cellRenderer: ({ cellData }) => { cellRenderer: ({ cellData }) => {
const colors: Record<string, string> = { high: "danger", medium: "warning", low: "info" }; const colors = { high: "danger" as const, medium: "warning" as const, low: "info" as const };
return ( return (
<ElTag type={colors[cellData] || "info"} size="small"> <ElTag type={colors[cellData] || "info"} size="small">
{cellData} {cellData}
@ -800,13 +800,13 @@ const rendererColumns: ListTableColumn<T>[] = [
const testCellRendererResize = () => { const testCellRendererResize = () => {
testResults.cellRendererMini = true; testResults.cellRendererMini = true;
// Force re-render by toggling data // Force re-render by toggling data
rendererData = [...allRows.slice(0, 20)]; rendererData.value = allRows.slice(0, 20);
}; };
// ================================================================ // ================================================================
// SECTION 6: Custom Header Renderer // SECTION 6: Custom Header Renderer
// ================================================================ // ================================================================
const headerRenderer: HeaderCellRenderer<T> = ({ column }) => { const headerRenderer: HeaderCellRenderer<any> = ({ column }) => {
testResults.headerRenderer = true; testResults.headerRenderer = true;
return ( return (
<span> <span>
@ -816,7 +816,7 @@ const headerRenderer: HeaderCellRenderer<T> = ({ column }) => {
}; };
const headerData = allRows.slice(0, 20); const headerData = allRows.slice(0, 20);
const headerColumns: ListTableColumn<T>[] = [ const headerColumns: ListTableColumn<any>[] = [
{ key: "id", name: "ID", headerCellRenderer: headerRenderer }, { key: "id", name: "ID", headerCellRenderer: headerRenderer },
{ key: "caseName", name: "Case Name", headerCellRenderer: headerRenderer }, { key: "caseName", name: "Case Name", headerCellRenderer: headerRenderer },
{ key: "taskName", name: "Task Name", headerCellRenderer: headerRenderer }, { key: "taskName", name: "Task Name", headerCellRenderer: headerRenderer },
@ -842,7 +842,7 @@ const handleDynamicQuery = () => {
}; };
const testResize = () => { const testResize = () => {
dynamicData.data = [...allRows.slice(0, 10)]; dynamicData.data = allRows.slice(0, 10);
testResults.dynamicHeight = true; testResults.dynamicHeight = true;
}; };
@ -954,12 +954,12 @@ const runCombinedTest = () => {
combinedExample.page = 1; combinedExample.page = 1;
handleCombinedQuery(); handleCombinedQuery();
setTimeout(() => { setTimeout(() => {
combinedData.data = [...allRows.slice(0, 10)]; combinedData.data = allRows.slice(0, 10);
testResults.combined.renderer = true; testResults.combined.renderer = true;
}, 100); }, 100);
}; };
const reloadCombinedData = () => { const reloadCombinedData = () => {
combinedData.data = [...allRows.slice(0, 10)]; combinedData.data = allRows.slice(0, 10);
}; };
// ================================================================ // ================================================================
@ -969,19 +969,19 @@ const rendererType = ref<"jsx" | "simple">("jsx");
const edgeExample = reactive({ page: 1, size: 10 }); const edgeExample = reactive({ page: 1, size: 10 });
const edgeData = reactive({ data: allRows.slice(0, 10), total: allRows.length }); const edgeData = reactive({ data: allRows.slice(0, 10), total: allRows.length });
const edgeIdRenderer: CellRenderer<T> = ({ cellData }) => { const edgeIdRenderer: CellRenderer<any> = ({ cellData }) => {
return <span style="font-weight: bold; color: var(--el-color-primary)">#{cellData}</span>; return <span style="font-weight: bold; color: var(--el-color-primary)">#{cellData}</span>;
}; };
const edgeNameRenderer: CellRenderer<T> = ({ cellData }) => { const edgeNameRenderer: CellRenderer<any> = ({ cellData }) => {
if (rendererType.value === "jsx") { if (rendererType.value === "jsx") {
return <span style="font-style: italic">{cellData}</span>; return <span style="font-style: italic">{cellData}</span>;
} }
return <span>{cellData}</span>; return <span>{cellData}</span>;
}; };
const edgePriorityRenderer: CellRenderer<T> = ({ cellData }) => { const edgePriorityRenderer: CellRenderer<any> = ({ cellData }) => {
const colors: Record<string, string> = { high: "danger", medium: "warning", low: "success" }; const colors = { high: "danger" as const, medium: "warning" as const, low: "success" as const };
return ( return (
<ElTag type={colors[cellData]} size="small"> <ElTag type={colors[cellData]} size="small">
{cellData} {cellData}
@ -989,7 +989,7 @@ const edgePriorityRenderer: CellRenderer<T> = ({ cellData }) => {
); );
}; };
const edgeActionsRenderer: CellRenderer<T> = () => { const edgeActionsRenderer: CellRenderer<any> = () => {
return ( return (
<div style="display: flex; gap: 4px;"> <div style="display: flex; gap: 4px;">
<ElButton size="small" type="primary"> <ElButton size="small" type="primary">
@ -999,7 +999,7 @@ const edgeActionsRenderer: CellRenderer<T> = () => {
); );
}; };
const edgeColumns: ListTableColumn<T>[] = [ const edgeColumns: ListTableColumn<any>[] = [
{ key: "id", name: "ID", fixed: "left" as const, width: 80, cellRenderer: edgeIdRenderer }, { key: "id", name: "ID", fixed: "left" as const, width: 80, cellRenderer: edgeIdRenderer },
{ key: "caseName", name: "Case Name", cellRenderer: edgeNameRenderer }, { key: "caseName", name: "Case Name", cellRenderer: edgeNameRenderer },
{ key: "priority", name: "Priority", cellRenderer: edgePriorityRenderer }, { key: "priority", name: "Priority", cellRenderer: edgePriorityRenderer },
@ -1020,7 +1020,7 @@ const changePageRenderer = () => {
const toggleRendererType = () => { const toggleRendererType = () => {
rendererType.value = rendererType.value === "jsx" ? "simple" : "jsx"; rendererType.value = rendererType.value === "jsx" ? "simple" : "jsx";
edgeData.data = [...allRows.slice(0, 10)]; edgeData.data = allRows.slice(0, 10);
}; };
onMounted(() => { onMounted(() => {

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

@ -67,24 +67,25 @@
:page-sizes="[10, 20, 50, 100, 200]" :page-sizes="[10, 20, 50, 100, 200]"
:page-size="example.size" :page-size="example.size"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="data.total" :total="paginationTotal"
/> />
</div> </div>
</div> </div>
</template> </template>
<script lang="tsx" setup generic="T"> <script lang="tsx" setup generic="T">
import { ref, computed, onMounted, onUnmounted, toRef, CSSProperties, watch } from "vue"; import { ref, computed, onMounted, onUnmounted, toRef, CSSProperties } 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";
import type { ListTableColumn, PageResponse } from "./types"; import type { ListTableColumn } from "./types";
import { usePretextColumnWidths } from "./usePretextColumnWidths"; import { usePretextColumnWidths } from "./usePretextColumnWidths";
import { resolveRowHeights } from "./usePretextRowHeights"; import { resolveRowHeights } from "./usePretextRowHeights";
import { useVirtualRows } from "./useVirtualRows"; import { useVirtualRows } from "./useVirtualRows";
import { formatTimestampFromValue } from "../../../../plugs/composables"; 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";
import { ListTableProps } from "./types";
const DEFAULT_FONT = "14px Microsoft YaHei, sans-serif"; const DEFAULT_FONT = "14px Microsoft YaHei, sans-serif";
const DEFAULT_HEADER_FONT = "bold 16px Microsoft YaHei, sans-serif"; const DEFAULT_HEADER_FONT = "bold 16px Microsoft YaHei, sans-serif";
@ -108,31 +109,11 @@ let resizeObserver: ResizeObserver | null = null;
// ============================================================================= // =============================================================================
// Props - same interface as original list-table-v2.vue // Props - same interface as original list-table-v2.vue
// ============================================================================= // =============================================================================
interface Props {
data?: T[] | PageResponse<T>; type Props = ListTableProps<T>;
columns?: ListTableColumn<T>[];
page?: boolean;
height?: number | string;
minHeight?: number | string;
maxHeight?: number | string;
example?: { page?: number; size?: number };
rowKey?: string;
selectKey?: string;
treeProps?: any;
lazy?: boolean;
border?: boolean;
rowHeight?: number;
estimatedRowHeight?: number;
headerHeight?: number;
font?: string;
headerFont?: string;
debug?: boolean;
}
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
data: () => [],
columns: () => [], columns: () => [],
page: false,
height: undefined, height: undefined,
minHeight: 300, minHeight: 300,
maxHeight: undefined, maxHeight: undefined,
@ -143,7 +124,6 @@ const props = withDefaults(defineProps<Props>(), {
lazy: false, lazy: false,
border: false, border: false,
rowHeight: undefined, rowHeight: undefined,
estimatedRowHeight: undefined,
headerHeight: 44, headerHeight: 44,
font: DEFAULT_FONT, font: DEFAULT_FONT,
debug: false, debug: false,
@ -159,15 +139,17 @@ const emit = defineEmits<{
// ============================================================================= // =============================================================================
// Data and columns as computed refs for hooks // Data and columns as computed refs for hooks
// ============================================================================= // =============================================================================
const pageData = computed<T[]>(() => { const pageData = computed<T[]>(() => {
if (!props.data) return []; if (props.page) {
if (props.page && (props.data as PageResponse<T>).data) { return props.data.data;
return (props.data as PageResponse<T>).data;
} }
if (Array.isArray(props.data)) { return props.data ?? [];
return props.data; });
}
return []; const paginationTotal = computed(() => {
if (!props.page) return 0;
return props.data.total ?? 0;
}); });
// Helper function for template to safely access row data // Helper function for template to safely access row data

28
packages/base/data/list-table-v2/types.ts
Unescape View File

@ -84,16 +84,28 @@ export type TzDateTimeConfig = TimestampDisplayConfig;
// Table Props // Table Props
// ============================================================================= // =============================================================================
export interface ListTableProps<T = any> { export type ListTableProps<T> = (ListTableDataPaged<T> | ListTableDataUnpaged<T>) & ListTableOptions<T>;
export interface ListTableDataUnpaged<T = any> {
data?: T[];
page?: false;
}
export interface ListTableDataPaged<T = any> {
data: PageResponse<T>;
page: true;
}
export interface ListTableOptions<T = any> {
/** Table data (array or page response) */ /** Table data (array or page response) */
data?: T[] | PageResponse<T>; // data?: T[] | PageResponse<T>;
/** Enable pagination */
// page?: boolean;
/** Column definitions */ /** Column definitions */
columns?: ListTableColumn<T>[]; columns?: ListTableColumn<T>[];
/** Enable pagination */
page?: boolean;
/** Fixed table height */ /** Fixed table height */
height?: number | string; height?: number | string;
@ -130,6 +142,12 @@ export interface ListTableProps<T = any> {
/** Header height (measured if not set) */ /** Header height (measured if not set) */
headerHeight?: number; headerHeight?: number;
/** Table Font */
font?: string;
/** Header Font (bold table font if undefined) */
headerFont?: string;
/** Debug mode */ /** Debug mode */
debug?: boolean; debug?: boolean;
} }

Write Preview
Loading…
Cancel
Save