noob-components/.trellis/tasks/archive/2026-03/03-24-plugs-element-spec/prd.md

Fill plugs/element spec

Goal

Analyze the plugs/element/ directory and document Element Plus UI wrappers, formatters, validation rules, and message utilities.

Context

Project Overview

• Type: Vue 3 Component Library (Element Plus based)
• Framework: Vue 3 + TypeScript
• UI Framework: Element Plus

Key Element Modules

Module	File	Purpose
listTableDialog	plugs/element/listTableDialog.ts	List table dialog with ListTableProps interface
formatter	plugs/element/formatter.ts	Value formatting utilities
message	plugs/element/message.ts	Element Plus message wrapper
rule	plugs/element/rule.ts	Form validation rules

Rule Classes (from GitNexus)

• Character, Email, Hexadecimal, IdCard, Ipv4, Ipv6, Latitude, Longitude, Name, Password, Phone, Username, SimpleCharacter, SimpleNumber, SimplePassword, SimpleRequired

Tools Available

GitNexus MCP

Tool	Purpose
gitnexus_query	Find Element Plus wrapper patterns
gitnexus_context	View validation rule classes

ABCoder MCP

Tool	Purpose
get_file_structure	Get all nodes in element files

Files to Fill

1. plugs/element/listTableDialog.ts - Dialog component for list tables

   • ListTableProps interface
   • Options interface

2. plugs/element/formatter.ts - Value formatting

   • Date formatting
   • Number formatting
   • Custom formatters

3. plugs/element/message.ts - Message utilities

   • Success/Error/Warning/Info wrappers

4. plugs/element/rule.ts - Validation rules

   • All rule classes and their patterns

Acceptance Criteria

• Real code examples with file paths
• Interface/type definitions documented
• Validation rule patterns captured
• Usage patterns for each wrapper
• No placeholder text

Technical Notes

• Element Plus components wrapped
• Validation follows Element Plus rule schema
• Message shortcuts for common operations