5.9 KiB

Raw Blame History

BadGUI Changelog

Version 0.2.0 - September 28, 2025

🎉 Major New Features

Complete UI Component Suite

Card Components: Added bg.card(), bg.card_section(), and bg.card_actions() with full NiceGUI-style API
Tab Navigation: Implemented bg.tabs(), bg.tab(), bg.tab_panels(), and bg.tab_panel() for interactive content organization
Layout Components: Added bg.header() and bg.footer() with context manager support for complete page layouts
Media Components: Introduced bg.image() and bg.icon() with Material Design icon integration

Enhanced Styling & Responsive Design

Responsive Flex Utilities: Added proper Quasar flex classes (wrap, col-12 col-md-4, etc.) to prevent card overflow
Context Manager Improvements: Fixed all context manager patterns for proper component nesting
Material Design Integration: Full Material Design icon library support with color and sizing options

Developer Experience Improvements

Comprehensive Examples: Added 6+ new example files demonstrating all components and patterns
Context Manager Guide: Created detailed documentation for proper context manager usage
Overflow Prevention: Implemented responsive layout patterns that prevent UI overflow issues

🔧 Technical Improvements

Component System

Enhanced Component class with proper Vue.js component mapping
Added Quasar component mapping for all new components (q-card, q-tabs, q-img, q-icon, etc.)
Improved context manager yields for proper component access

Layout System

Fixed context manager attribute access issues (AttributeError with .classes())
Added proper responsive breakpoint support
Implemented flex wrapping utilities for overflow prevention

API Consistency

All components now support NiceGUI-style method chaining
Consistent .classes(), .props(), and .style() method support
Proper context manager patterns across all container components

📁 New Files Added

Example Files

simple_card_test.py - Card component demonstrations
simple_image_icon_test.py - Image and icon usage examples
tabs_examples.py - Tab navigation and content management
simple_header_footer_test.py - Layout component examples
flex_layout_test.py - Responsive layout and overflow prevention
enhanced_navigation_example.py - Complete website with all components
context_manager_guide.py - Comprehensive usage guide

Documentation Updates

Updated README.md with new component showcase
Enhanced docs/source/components.rst with all new components
Expanded docs/source/examples.rst with comprehensive examples

🎯 Key Usage Patterns Established

Context Manager Pattern

# ✅ Correct usage
with bg.card() as my_card:
    my_card.classes("q-ma-md")
    with bg.card_section():
        bg.label("Content")

# ❌ Wrong usage (fixed)
# with bg.card().classes("q-ma-md"):  # AttributeError resolved

Responsive Layout Pattern

# Proper flex wrapping to prevent overflow
with bg.row() as responsive_row:
    responsive_row.classes("q-gutter-md wrap")
    
    with bg.card() as responsive_card:
        responsive_card.classes("col-12 col-sm-6 col-md-4")  # Responsive breakpoints

Material Design Integration

# Material Design icons with full customization
bg.icon("home", size="2rem", color="primary")
bg.icon("star", color="yellow").classes("q-mr-sm")

🔄 Breaking Changes

None - All changes are backward compatible
Existing code continues to work unchanged
New components are purely additive

🚀 Instant Development

All new components work seamlessly with bg.dev() instant development mode
Examples automatically build and run with single command execution
Hot reload support for all new components

📊 Component Coverage

Now Available:

✅ Basic Components: label, button, input, link
✅ Card Components: card, card_section, card_actions
✅ Tab Components: tabs, tab, tab_panels, tab_panel
✅ Layout Components: header, footer, row, column
✅ Media Components: image, icon
✅ Navigation: Router links with Vue Router integration

Coming Next:

🚧 Form Components: form, select, checkbox, radio
🚧 Dialog Components: dialog, popup, tooltip
🚧 Data Components: table, list, tree
🚧 Advanced Components: menu, toolbar, drawer

🎨 Design Philosophy

BadGUI now provides a complete foundation for building modern web applications:

NiceGUI Compatibility: Familiar syntax and patterns for easy migration
Material Design: Professional, consistent UI components
Responsive by Default: Mobile-first design with proper breakpoints
Context Manager Excellence: Proper Python patterns for UI nesting
Vue.js Power: Modern web framework output with Quasar components

Version 0.1.0 - Previous Release

Initial Features

Basic component system (label, button, input, link)
Layout containers (row, column) with context managers
Vue.js/Quasar project generation
Instant development mode with bg.dev()
Multi-page routing with Vue Router
Styling system (.classes(), .props(), .style())

Upgrade Guide

From 0.1.0 to 0.2.0

No breaking changes required. Simply update your BadGUI installation and start using the new components:

pip install --upgrade badgui

New Components Available

import badgui as bg

# Cards
with bg.card() as my_card:
    with bg.card_section():
        bg.label("Card content")

# Tabs
with bg.tabs():
    with bg.tab("tab1", "Tab 1"):
        pass

# Layout
with bg.header():
    bg.label("Header content")

# Media
bg.image("image.jpg")
bg.icon("home", color="primary")

All examples in the repository demonstrate the new components and proper usage patterns.

5.9 KiB Raw Blame History