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.
81 lines
2.4 KiB
81 lines
2.4 KiB
3 months ago
|
# Packages Base Guidelines
|
||
|
|
|
||
|
|
> Foundational Vue 3 components built on Element Plus.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Overview
|
||
|
|
|
||
|
|
The `packages/base/` directory contains base components that wrap Element Plus with theme integration, i18n support, and consistent prop patterns.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Components Index
|
||
|
|
|
||
|
|
| Component | File | Description |
|
||
|
|
|-----------|------|-------------|
|
||
|
|
| **Item Components** | | Basic UI elements |
|
||
|
|
| `NoobTag` | `item/tag.vue` | Tag with theme support |
|
||
|
|
| `NoobButton` | `item/button.vue` | Button with theme and slot detection |
|
||
|
|
| `NoobSelect` | `item/select.vue` | Select with dict/state integration |
|
||
|
|
| `NoobInput` | `item/input.vue` | Input with width management |
|
||
|
|
| `NoobDate` | `item/datetime.vue` | Date/time input |
|
||
|
|
| `LightBox` | `item/light-box.vue` | Light box overlay |
|
||
|
|
| `ButtonWithTooltip` | `item/buttonWithTooltip.vue` | Button with tooltip wrapper |
|
||
|
|
| `ConfirmCancel` | `item/confirmCancel.vue` | Confirm/cancel button pair |
|
||
|
|
| `TzDatePicker` | `item/tzDatePicker.vue` | Timezone date picker |
|
||
|
|
| `TzDateTime` | `item/tzDateTime.vue` | Timezone datetime |
|
||
|
|
| `WsMonitorToggle` | `item/ws-monitor-toggle.vue` | WebSocket subscription monitor |
|
||
|
|
| **Data Components** | | Data-driven components |
|
||
|
|
| `SearchRow` | `data/search-row.vue` | Search form row with actions |
|
||
|
|
| `ListTable` | `data/list-table.vue` | Table with pagination and formatting |
|
||
|
|
| `ListTableDialog` | `data/listTableDialog.vue` | Selectable list table in dialog |
|
||
|
|
| `Infomation` | `data/infomation.vue` | Metric/stat card display |
|
||
|
|
| `ModifyForm` | `data/modify-form.vue` | Dynamic create/edit form |
|
||
|
|
| `Descriptions` | `data/descriptions.vue` | Key-value descriptions |
|
||
|
|
| `TableAction` | `data/table-action.vue` | Table row action buttons |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Documentation
|
||
|
|
|
||
|
|
- [Base Components Reference](./base-components.md) - Detailed API documentation with examples
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Architecture Patterns
|
||
|
|
|
||
|
|
### Theme Integration
|
||
|
|
|
||
|
|
Components use Vuex store for theme values (`state.style`, `state.size`):
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
const { state } = useStore();
|
||
|
|
// Access: state.style.primary, state.size.fontSize
|
||
|
|
```
|
||
|
|
|
||
|
|
### i18n Integration
|
||
|
|
|
||
|
|
Components use `vue3-i18n` for translations:
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
const { t } = useI18n();
|
||
|
|
t('base.add'); // "Add"
|
||
|
|
```
|
||
|
|
|
||
|
|
### Export Structure
|
||
|
|
|
||
|
|
All components are exported from `packages/base/index.ts`:
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
// Named exports
|
||
|
|
export { NoobTag, NoobButton, NoobSelect, ... };
|
||
|
|
|
||
|
|
// Grouped exports
|
||
|
|
export { SearchRow, ListTable, ListTableDialog, ... };
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
**Language**: English
|