forked from mengyxu/noob-components
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
2.1 KiB
72 lines
2.1 KiB
3 months ago
|
# 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:
|
||
|
|
```typescript
|
||
|
|
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
|
||
|
|
1. `vite.config.ts` - Add JSX plugin
|
||
|
|
2. `packages/base/data/list-table-v2.vue` - Update timestamp handling
|
||
|
|
|
||
|
|
### tzDateTime Props Interface
|
||
|
|
```typescript
|
||
|
|
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
|