list-table-v2 Timestamp + Vue JSX

Goal

Add Vue JSX support to the project and upgrade list-table-v2.vue to use tzDateTime.vue for timestamp columns with enhanced type support.

Requirements

1. Enable Vue JSX

Install @vitejs/plugin-vue-jsx package
Add JSX plugin to vite.config.ts

2. Enhanced Timestamp Type

Update TableColumn.timestamp type from boolean to:

undefined | boolean | string | {
  valueFormat?: string;
  valueTz?: string;
  displayFormat?: string;
  locale?: string;
  type?: "iso8601" | "unix" | "unixMillis";
}

Behavior:

undefined or falsy → column is not a timestamp
true → equivalent to { type: 'unixMillis', displayFormat: 'YYYY-MM-DD HH:mm:ss' }
string → pass to either type or valueFormat depending on the value
Otherwise → pass as props to TzDateTime

3. Use tzDateTime.vue for Timestamp Columns

Import TzDateTime component in list-table-v2.vue
Replace inline formatStamp with TzDateTime component via JSX rendering
Ensure dayjs plugins are loaded when needed

Technical Notes

Files to Modify

vite.config.ts - Add JSX plugin
packages/base/data/list-table-v2.vue - Update timestamp handling

tzDateTime Props Interface

interface Props {
  value: string | number;
  valueFormat?: string;
  valueTz?: string;
  displayFormat?: string;
  locale?: string;
  type?: "iso8601" | "unix" | "unixMillis";
  slot?: boolean;
}

Conversion Logic

timestamp value → TzDateTime props:
- timestamp=true → { type: 'unixMillis', displayFormat: 'YYYY-MM-DD HH:mm:ss' }
- timestamp='unix' → { type: 'unix' }  (shorthand)
- timestamp='YYYY-MM-DD' → { valueFormat: 'YYYY-MM-DD' }
- timestamp={ type: 'iso8601' } → passed directly

Acceptance Criteria

@vitejs/plugin-vue-jsx installed
vite.config.ts includes JSX plugin
TableColumn interface updated with new timestamp type
list-table-v2.vue uses TzDateTime for timestamp columns
Backward compatible with existing timestamp={true} usage
TypeScript compiles without errors

2.1 KiB Raw Blame History