# 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