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.

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

Components use Vuex store for theme values (state.style, state.size):

const { state } = useStore();
// Access: state.style.primary, state.size.fontSize

Components use vue3-i18n for translations:

const { t } = useI18n();
t('base.add');  // "Add"

All components are exported from packages/base/index.ts:

// Named exports
export { NoobTag, NoobButton, NoobSelect, ... };

// Grouped exports
export { SearchRow, ListTable, ListTableDialog, ... };

Language: English