🚀 RFC: Modern UI System - Vue.js 3 + Tailwind CSS Integration

[andiamine]

We're excited to announce a major architectural enhancement coming to JoomCCK: a Modern UI System that will run alongside the existing Legacy system, giving you the choice between two complete UI approaches.

🎯 Why This Matters

The current jQuery-based system has served us well, but we've hit limitations that are difficult or impossible to solve with the legacy architecture:

Problems We're Solving

Challenge	Legacy System	Modern System
Repeatable Fields	Complex jQuery DOM manipulation, fragile	Vue.js reactive arrays - native support
Subforms	Hard to implement nested validation	Vue components with scoped validation
Conditional Fields	Manual show/hide with event listeners	Reactive v-if/v-show bindings
Real-time Validation	Validation only on submit	Instant feedback on blur/change
Complex Field Dependencies	Spaghetti event handlers	Computed properties & watchers
Dynamic Form Generation	DOM manipulation hell	Declarative component rendering
State Management	Scattered across DOM elements	Centralized reactive state

🏗️ Architecture Overview

Two Complete Systems

Layout Resolution (Modern UI enabled)

When rendering a layout like core.submission.entry:

1. apps/{section}/modern/submission/entry.php ← Section-specific modern
2. apps/{section}/submission/entry.php ← Section-specific legacy
3. modern/submission/entry.php ← Core modern
4. core/submission/entry.php ← Core legacy (final fallback)

🛠️ Technical Stack

Component	Legacy	Modern
JavaScript	jQuery	Vue.js 3 (Options API, no build)
CSS Framework	Bootstrap 5	Tailwind CSS v4.1 (prefixed: tw-)
Validation	Inline JS on submit	Real-time reactive validation
State	DOM-based	Centralized Vue reactive state
Components	jQuery plugins	Vue components

📦 What's Included (Phase 1 - Forms)

New Files

• media/com_joomcck/css/modern/tailwind.css - Prefixed Tailwind
• media/com_joomcck/js/vue/ - Vue.js core, components, bridges
• layouts/modern/submission/ - Modern form layouts

Modified Files

• config.xml - Global UI System setting
• Layout.php - Smart layout resolution with modern support
• joomla.asset.json - Modern UI asset registration

🔮 Future Possibilities (After Phase 1)

Once the foundation is in place, the Modern System enables:

• Repeatable Field Groups - Add/remove field sets dynamically
• Nested Subforms - Complex data structures with proper validation
• Conditional Logic Builder - Show/hide fields based on rules
• Live Preview - See changes as you type
• Auto-save Drafts - Never lose work
• Advanced Field Types - Date ranges, color pickers, signature pads
• Form Wizards - Step-by-step submission with progress
• Comments System 2.0 - Real-time updates, rich editing

🤝 Backward Compatibility

• Default is Legacy - Nothing changes unless you opt-in
• Existing overrides work - Your apps/{section}/ customizations continue working
• Server validation unchanged - PHP validation remains the safety net
• No breaking changes - Legacy system fully maintained

📋 Implementation Roadmap

1. Phase 1: Core infrastructure + Form validation
2. Phase 2: Comments system modernization
3. Phase 3: Repeatable fields & subforms
4. Phase 4: Conditional field logic
5. Phase 5: Additional field type enhancements

💬 Feedback Welcome

This is a significant architectural change. We'd love your input on:

• Priority of features (what problems are blocking you most?)
• Additional use cases we should consider
• Any concerns about the approach

[Giorgi625]

Amazing news, thank you very much. this Bootstrap design looks too plain and boring.