143 lines
5.2 KiB
Markdown
143 lines
5.2 KiB
Markdown
!!! Please pay attention to the following points when writing the readme: !!!
|
|
* Give a short rundown of components and a few points abputspecific features on each.
|
|
* Try to list all components in a summary.
|
|
* Then list all components with a short description.
|
|
|
|
## Chart Components
|
|
|
|
### dees-chart-area
|
|
- Fully functional area chart component using ApexCharts
|
|
- Displays time-series data with gradient fills
|
|
- Responsive with ResizeObserver (debounced to prevent flicker)
|
|
- Fixed: Chart now properly respects container boundaries on initial render
|
|
- Overflow prevention with proper CSS containment
|
|
- Enhanced demo features:
|
|
- Multiple dataset examples (System Usage, Network Traffic, Sales Analytics)
|
|
- Real-time data simulation with automatic updates
|
|
- Dynamic dataset switching
|
|
- Customizable Y-axis formatters (percentages, currency, units)
|
|
- Data randomization for testing
|
|
- Manual data point addition
|
|
- Properties:
|
|
- `label`: Chart title
|
|
- `series`: ApexAxisChartSeries data
|
|
- `yAxisFormatter`: Custom Y-axis label formatter function
|
|
- Methods:
|
|
- `updateSeries()`: Update chart data
|
|
- `appendData()`: Add new data points to existing series
|
|
- Demo uses global reference to access chart element (window.__demoChartElement)
|
|
|
|
### dees-chart-log
|
|
- Server log viewer component (not a chart despite the name)
|
|
- Terminal-style interface with monospace font
|
|
- Supports log levels: debug, info, warn, error, success
|
|
- Features:
|
|
- Auto-scroll toggle
|
|
- Clear logs button
|
|
- Colored log levels
|
|
- Timestamp with milliseconds
|
|
- Source labels for log entries
|
|
- Maximum 1000 entries (configurable)
|
|
- Light/dark theme support
|
|
- Demo includes realistic server log simulation
|
|
- Note: In demos, buttons use `@clicked` event (not `@click`)
|
|
- Demo uses global reference to access log element (window.__demoLogElement)
|
|
|
|
## UI Components
|
|
|
|
### dees-button-group
|
|
- Groups multiple buttons together with a unified background
|
|
- Properties:
|
|
- `label`: Optional label text displayed before the buttons
|
|
- `direction`: 'horizontal' | 'vertical' layout
|
|
- Features:
|
|
- Light/dark theme support
|
|
- Flexible layout with proper spacing
|
|
- Works with all button types (normal, highlighted, success, danger)
|
|
- Use cases:
|
|
- View mode selectors
|
|
- Action grouping
|
|
- Navigation options
|
|
- Filter controls
|
|
|
|
## Form Components
|
|
|
|
### dees-input-radio
|
|
- Radio button component with proper group behavior
|
|
- Properties:
|
|
- `name`: Group name for mutually exclusive selection
|
|
- `key`: Unique identifier for the radio option
|
|
- `value`: Boolean indicating selection state
|
|
- `label`: Display label
|
|
- Features:
|
|
- Automatic group management (radios with same name are mutually exclusive)
|
|
- Cannot be deselected by clicking (proper radio behavior)
|
|
- Form integration: Radio groups are collected by name, value is the selected radio's key
|
|
- Works both inside and outside forms
|
|
- Supports disabled state
|
|
- Fixed: Radio buttons now properly deselect others in the group on first click
|
|
- Note: When using in forms, set both `name` (for grouping) and `key` (for the value)
|
|
|
|
## WYSIWYG Editor Architecture
|
|
|
|
### Recent Refactoring (2025-06-24)
|
|
|
|
The WYSIWYG editor has been refactored to improve maintainability and separation of concerns:
|
|
|
|
#### New Handler Classes
|
|
|
|
1. **WysiwygBlockOperations** (`wysiwyg.blockoperations.ts`)
|
|
- Manages all block-related operations
|
|
- Methods: createBlock, insertBlockAfter, removeBlock, findBlock, focusBlock, etc.
|
|
- Centralized block manipulation logic
|
|
|
|
2. **WysiwygInputHandler** (`wysiwyg.inputhandler.ts`)
|
|
- Handles all input events for blocks
|
|
- Manages block content updates based on type
|
|
- Detects block type transformations
|
|
- Handles slash commands
|
|
- Manages auto-save with debouncing
|
|
|
|
3. **WysiwygKeyboardHandler** (`wysiwyg.keyboardhandler.ts`)
|
|
- Handles all keyboard events
|
|
- Manages formatting shortcuts (Cmd/Ctrl + B/I/U/K)
|
|
- Handles special keys: Tab, Enter, Backspace
|
|
- Manages slash menu navigation
|
|
|
|
4. **WysiwygDragDropHandler** (`wysiwyg.dragdrophandler.ts`)
|
|
- Manages drag and drop operations
|
|
- Tracks drag state
|
|
- Handles visual feedback during drag
|
|
- Manages block reordering
|
|
|
|
5. **WysiwygModalManager** (`wysiwyg.modalmanager.ts`)
|
|
- Static methods for showing modals
|
|
- Language selection for code blocks
|
|
- Block settings modal
|
|
- Reusable modal patterns
|
|
|
|
#### Main Component Updates
|
|
|
|
The main `DeesInputWysiwyg` component now:
|
|
- Instantiates handler classes in `connectedCallback`
|
|
- Delegates complex operations to appropriate handlers
|
|
- Maintains cleaner, more focused code
|
|
- Better separation of concerns
|
|
|
|
#### Benefits
|
|
- Reduced main component size from 1100+ lines
|
|
- Each handler class is focused on a single responsibility
|
|
- Easier to test individual components
|
|
- Better code organization
|
|
- Improved maintainability
|
|
|
|
#### Fixed Issues
|
|
- Enter key no longer duplicates content in new blocks
|
|
- Removed problematic `setBlockContents()` method
|
|
- Content is now managed directly through DOM properties
|
|
- Better timing for block creation and focus
|
|
|
|
#### Notes
|
|
- Some old methods remain in the main component for backwards compatibility
|
|
- These can be removed in a future cleanup once all references are updated
|
|
- The refactoring maintains all existing functionality |