CoreUI PRO for Vue v5.16.0

We are excited to announce the release of CoreUI PRO for Vue v5.16.0 — a comprehensive update that enhances date and time components with advanced input handling, improves accessibility features, introduces performance optimizations, and provides updated dependencies for better stability and security.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

Angular

Bootstrap

React.js

Vue.js

How to Update

To update to CoreUI PRO for Vue v5.16.0, follow these steps:

1. Open your package.json file.
2. Update the @coreui/vue-pro dependency to 5.16.0.
3. Update the @coreui/coreui-pro dependency to 5.20.0.
4. Save your changes.
5. Run the appropriate command for your package manager:
   • npm: npm install
   • yarn: yarn install

🚀 What’s New

✨ Enhanced Features

CDatePicker, CDateRangePicker & CTimePicker

• Advanced Input Change Delay: Enhanced inputOnChangeDelay functionality with 750ms default
  • Intelligent debouncing reduces excessive API calls during manual input
  • Configurable delay timing optimized for different interaction patterns
  • Improved performance for real-time validation and search scenarios
  • Better user experience with smooth input handling

<!-- Date picker with optimized input delay -->
<CDatePicker
  :input-on-change-delay="1000"
  @date-change="handleDateChange"
  @input-change="handleInputChange"
/>

<!-- Date range picker with fast response -->
<CDateRangePicker
  :input-on-change-delay="250"
  @range-change="handleRangeChange"
/>

<!-- Time picker with default delay -->
<CTimePicker
  @time-change="handleTimeChange"
/>

• Enhanced Focus Management: Advanced focus trap implementation

  • Seamless focus trapping within date picker modals
  • Improved keyboard navigation with arrow keys and tab order
  • Better screen reader support with enhanced ARIA attributes
  • Escape key handling with proper focus restoration

• Robust Input Parsing: Advanced locale-aware date parsing

  • Enhanced validation for various date format inputs
  • Better error handling for invalid date entries
  • Improved support for international date formats
  • Smart date completion and suggestion features

🛠 Component Improvements

UI Component Enhancements

• Spinner Component: Fixed deformation issues in complex flex layouts
• Input Groups: Enhanced width handling and component integration
• Calendar Navigation: Refined button styling and interaction feedback
• Form Controls: Improved validation state handling and visual feedback

Performance Optimizations

• Calendar Rendering: Optimized cell attribute calculations for faster rendering
• Event Handling: Streamlined internal event system for better responsiveness
• Vue 3 Reactivity: Enhanced integration with Vue 3’s reactive system
• Component Lifecycle: Improved mounting and unmounting performance

🎯 Accessibility Enhancements

• WCAG 2.1 Compliance: Enhanced color contrast and accessibility standards
• Keyboard Navigation: Improved focus management across all components
• Screen Reader Support: Better ARIA labels and announcements
• Focus Indicators: Enhanced visual focus indicators for better usability

♻️ Code Quality & Maintenance

• Component Architecture: Refactored internal structure for better maintainability
• TypeScript Definitions: Enhanced type safety and developer experience
• Documentation: Comprehensive updates to component guides and examples
• Testing Coverage: Expanded test coverage for new features and edge cases

📦 Dependency Updates

This release includes important dependency updates for enhanced performance, security, and compatibility:

Core Dependencies

• Updated @coreui/coreui-pro from ^5.19.0 to ^5.20.0
• Updated @coreui/vue from ^5.6.0 to ^5.7.0

Development Tools

• Updated eslint from ^9.34.0 to ^9.35.0
• Updated sass from ^1.78.0 to ^1.79.0
• Updated typescript-eslint from ^8.40.0 to ^8.41.0
• Updated rollup from ^4.20.0 to ^4.21.0
• Updated vite from ^5.4.0 to ^5.4.5
• Updated vue from ^3.5.20 to ^3.5.25
• Updated typescript from ^5.5.4 to ^5.6.0

📖 Technical Details

Advanced Input Change Delay

The enhanced inputOnChangeDelay feature provides:

• Smart Debouncing: Intelligent delay calculation based on input patterns
• Performance Optimization: Reduced computational overhead during rapid input
• Configurable Timing: Fine-tuned control for different use case requirements
• Event Management: Proper cleanup and memory management for delayed events

Enhanced Focus Management

Improved accessibility features include:

• Focus Trap Integration: Seamless integration with existing focus management
• Keyboard Navigation: Enhanced arrow key and tab navigation patterns
• ARIA Compliance: Comprehensive ARIA labels and role definitions
• Screen Reader Support: Optimized announcements for date/time selection

Vue 3 Optimizations

Enhanced Vue 3 integration offers:

• Composition API: Better integration with Vue 3 Composition API patterns
• Reactivity System: Optimized reactivity for large data sets
• Teleport Support: Enhanced modal and overlay rendering
• SSR Compatibility: Improved server-side rendering support

Performance Enhancements

Component optimizations include:

• Rendering Pipeline: Streamlined component rendering for better performance
• Memory Management: Improved component lifecycle and cleanup
• Bundle Size: Optimized tree-shaking for smaller bundle sizes
• Runtime Performance: Enhanced runtime performance for complex UIs

💡 Migration Notes

New Features

All new features are backward compatible. Existing implementations will continue to work while benefiting from:

• Enhanced input delay with sensible defaults
• Improved accessibility features automatically enabled
• Better performance optimizations applied transparently
• Enhanced type definitions for better development experience

Recommended Updates

For optimal performance, consider:

• Updating to use the new inputOnChangeDelay prop for better UX
• Leveraging enhanced accessibility features in modal contexts
• Taking advantage of improved TypeScript definitions
• Updating component event handlers to use new event signatures

Upgrade to CoreUI PRO for Vue v5.16.0 today to provide your users with enhanced date/time interactions, improved accessibility, and better overall performance. This release continues our commitment to building accessible, performant, and developer-friendly Vue components.

📚 Learn More

For detailed documentation and implementation examples, visit:

• CoreUI Vue Pro Documentation
• Date Picker Component Guide
• Accessibility Guidelines