CoreUI PRO for Vue v5.15.0

We are excited to announce the release of CoreUI PRO for Vue v5.15.0 — a significant update that introduces the new Focus Trap component, enhanced date and time functionality, accessibility improvements, and comprehensive dependency updates to keep your Vue applications modern and secure.

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.15.0, follow these steps:

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

🚀 What’s New

✨ New Components

CFocusTrap

• New Accessibility Component: Comprehensive focus management for enhanced accessibility
  • Traps keyboard focus within a designated Vue component or DOM region
  • Essential for modal dialogs, dropdown menus, and other interactive overlays
  • Follows WCAG 2.1 guidelines for keyboard navigation
  • Built with Vue 3 Composition API for optimal performance
  • Supports escape key handling and focus restoration

<!-- Basic focus trap implementation -->
<CFocusTrap :active="isModalOpen">
  <CModal :visible="isModalOpen">
    <CModalBody>
      <!-- Modal content with trapped focus -->
    </CModalBody>
  </CModal>
</CFocusTrap>

<!-- Custom focus trap with event handlers -->
<CFocusTrap 
  :active="isDropdownOpen"
  @escape="closeDropdown"
  :initial-focus="initialFocusRef"
>
  <!-- Dropdown content -->
</CFocusTrap>

🛠 Enhanced Features

CDatePicker, CDateRangePicker & CTimePicker

• Input Change Delay: Added inputOnChangeDelay prop with 750ms default
  • Reduces excessive API calls during manual input typing
  • Configurable delay timing for different use cases
  • Improves performance for real-time validation scenarios
  • Better user experience with debounced change events

<!-- Date picker with custom input delay -->
<CDatePicker 
  :input-on-change-delay="500"
  @date-change="handleDateChange"
/>

<!-- Time picker with disabled input delay -->
<CTimePicker 
  :input-on-change-delay="0"
  @time-change="handleTimeChange"
/>

• Focus Trap Integration: Enhanced accessibility with built-in focus management

  • Automatic focus trapping when calendar is opened
  • Improved keyboard navigation within date pickers
  • Better screen reader support and ARIA compliance

• Robust Date Parsing: Improved locale-aware date parsing for manual input

  • Enhanced validation for user-typed dates
  • Better handling of various date formats
  • Improved error handling for invalid date inputs

🐛 Fixes & Improvements

• UI Components: Fixed spinner deformation issues in flex box layouts
• Input Groups: Improved component width handling within input group contexts
• Calendar Navigation: Refined styling for calendar navigation buttons
• WCAG 2.1 Compliance: Improved color contrast function for better accessibility

♻️ Performance Optimizations

• Calendar Rendering: Optimized calendar cell attribute calculations
• Event Handling: Enhanced internal event handling system
• Vue 3 Integration: Better integration with Vue 3 reactivity system
• Component Lifecycle: Improved component mounting and unmounting performance

📦 Dependency Updates

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

Core Dependencies

• Updated @coreui/coreui-pro from ^5.18.0 to ^5.19.0
• Updated @coreui/vue to support latest features and improvements

Development Tools

• Updated eslint from ^9.33.0 to ^9.34.0
• Updated sass from ^1.90.0 to ^1.91.0
• Updated typescript-eslint from ^8.39.0 to latest version
• Updated various build tools and testing dependencies

📖 Technical Details

CFocusTrap Implementation

• Optimized event handling for smooth focus transitions
• Proper cleanup of event listeners when component unmounts
• Integration with existing Vue component lifecycle
• TypeScript support with comprehensive prop definitions
• Support for nested focus traps and complex UI scenarios

Input Change Delay Feature

The inputOnChangeDelay functionality provides:

• Debounced event emission for better performance
• Configurable timing for different interaction patterns
• Seamless integration with existing validation workflows
• Backward compatibility with immediate change events when set to 0

Accessibility Enhancements

This release focuses heavily on accessibility improvements:

• Enhanced WCAG 2.1 compliance across all components
• Improved keyboard navigation and screen reader support
• Better focus management for complex UI interactions
• Color contrast improvements for visual accessibility

API Documentation

• Comprehensive documentation for new CFocusTrap component
• Updated prop descriptions and usage examples for date/time components
• Enhanced TypeScript definitions and IntelliSense support
• Practical implementation guides and best practices

Upgrade to CoreUI PRO for Vue v5.15.0 today to provide your users with enhanced accessibility, improved date/time interactions, and better overall user experience. 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
• Accessibility Guidelines
• Focus Trap Component Guide