badgui

6 Commits

1 Branch

0 Tags

67 MiB

Commit Graph

Author	SHA1	Message	Date
Matteo Benedetto	577df5c95e	🎉 BadGUI v0.2.0 - Complete UI Component Suite & Enhanced Developer Experience ## 🚀 Major New Features ### Complete Component Ecosystem - Card Components: `bg.card()`, `bg.card_section()`, `bg.card_actions()` with NiceGUI-style API - Tab Navigation: `bg.tabs()`, `bg.tab()`, `bg.tab_panels()`, `bg.tab_panel()` for interactive content - Layout Components: `bg.header()`, `bg.footer()` with context manager support - Media Components: `bg.image()`, `bg.icon()` with Material Design icon integration ### Enhanced Responsive Design - Flex Utilities: Added Quasar flex classes (`wrap`, `col-12 col-md-4`) to prevent overflow - Context Manager Excellence: Fixed AttributeError issues with proper component access patterns - Material Design: Full icon library support with color, size, and styling options ### Developer Experience Revolution - Comprehensive Examples: 7+ new example files demonstrating all components and patterns - Context Manager Guide: Detailed documentation for proper usage patterns - Overflow Prevention: Responsive layout patterns that prevent UI overflow issues ## 🔧 Technical Improvements ### Core Framework - Enhanced `Component` class with proper Vue.js component mapping - Added Quasar component mapping (`q-card`, `q-tabs`, `q-img`, `q-icon`, etc.) - Fixed context manager attribute access for all container components ### API Consistency - All components support NiceGUI-style method chaining - Consistent `.classes()`, `.props()`, `.style()` method support - Proper context manager patterns: `with bg.component() as name:` → `name.classes()` ## 📁 Files Added/Modified ### New 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 showcase - `context_manager_guide.py` - Comprehensive usage guide ### Documentation Updates - Updated `README.md` with new component showcase and responsive examples - Enhanced `docs/source/components.rst` with all new components - Expanded `docs/source/examples.rst` with comprehensive usage patterns - Added `CHANGELOG.md` with detailed release notes ### Core Framework - `badgui/core.py` - Added all new components with proper Quasar mapping - `badgui/__init__.py` - Added convenience functions for all new components - `badgui/generator.py` - Removed blue header bar from default layout - Version bump to 0.2.0 ## 🎯 Key Usage Patterns Established ### Context Manager Excellence ```python # ✅ Correct pattern (now documented and examples provided) with bg.card() as my_card: my_card.classes("q-ma-md") with bg.card_section(): bg.label("Content") ``` ### Responsive Design ```python # Overflow prevention with proper flex utilities with bg.row() as grid: grid.classes("q-gutter-md wrap") # Prevents overflow with bg.card() as card: card.classes("col-12 col-sm-6 col-md-4") # Responsive breakpoints ``` ### Material Design Integration ```python # Full Material Design icon support bg.icon("home", size="2rem", color="primary") bg.image("https://example.com/image.jpg").classes("rounded-lg full-width") ``` ## 🚀 Impact & Value ### For Developers - Zero Breaking Changes: All existing code continues to work - Enhanced Productivity: Complete UI component suite reduces development time - Better Documentation: Comprehensive examples and usage guides - Responsive by Default: Built-in overflow prevention and mobile-first design ### For Applications - Professional UI: Material Design components with Quasar integration - Mobile Responsive: Proper breakpoints and flex utilities - Modern Architecture: Vue.js 3 + Quasar Framework output - Instant Development: `bg.dev()` workflow unchanged and enhanced ## 🎨 Component Coverage Now Complete: - ✅ Basic: `label`, `button`, `input`, `link` - ✅ Cards: `card`, `card_section`, `card_actions` - ✅ Tabs: `tabs`, `tab`, `tab_panels`, `tab_panel` - ✅ Layout: `header`, `footer`, `row`, `column` - ✅ Media: `image`, `icon` - ✅ Navigation: Router links with Vue Router Foundation for Future: - 🚧 Forms, Dialogs, Tables, Menus - 🚧 Advanced interactions and data binding - 🚧 Theming and customization system This release establishes BadGUI as a complete UI framework for building modern, responsive web applications with Python syntax. The comprehensive example suite and documentation ensure developers can immediately leverage all new capabilities. --- Migration: No changes required - all new features are additive Compatibility: Full backward compatibility maintained Testing: All examples tested with `bg.dev()` instant development	3 months ago
Matteo Benedetto	5b03db2f52	first commit	3 months ago

Author

SHA1

Message

Date

Matteo Benedetto

577df5c95e

🎉 BadGUI v0.2.0 - Complete UI Component Suite & Enhanced Developer Experience

## 🚀 Major New Features

### Complete Component Ecosystem
- **Card Components**: `bg.card()`, `bg.card_section()`, `bg.card_actions()` with NiceGUI-style API
- **Tab Navigation**: `bg.tabs()`, `bg.tab()`, `bg.tab_panels()`, `bg.tab_panel()` for interactive content
- **Layout Components**: `bg.header()`, `bg.footer()` with context manager support
- **Media Components**: `bg.image()`, `bg.icon()` with Material Design icon integration

### Enhanced Responsive Design
- **Flex Utilities**: Added Quasar flex classes (`wrap`, `col-12 col-md-4`) to prevent overflow
- **Context Manager Excellence**: Fixed AttributeError issues with proper component access patterns
- **Material Design**: Full icon library support with color, size, and styling options

### Developer Experience Revolution
- **Comprehensive Examples**: 7+ new example files demonstrating all components and patterns
- **Context Manager Guide**: Detailed documentation for proper usage patterns
- **Overflow Prevention**: Responsive layout patterns that prevent UI overflow issues

## 🔧 Technical Improvements

### Core Framework
- Enhanced `Component` class with proper Vue.js component mapping
- Added Quasar component mapping (`q-card`, `q-tabs`, `q-img`, `q-icon`, etc.)
- Fixed context manager attribute access for all container components

### API Consistency
- All components support NiceGUI-style method chaining
- Consistent `.classes()`, `.props()`, `.style()` method support
- Proper context manager patterns: `with bg.component() as name:` → `name.classes()`

## 📁 Files Added/Modified

### New 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 showcase
- `context_manager_guide.py` - Comprehensive usage guide

### Documentation Updates
- Updated `README.md` with new component showcase and responsive examples
- Enhanced `docs/source/components.rst` with all new components
- Expanded `docs/source/examples.rst` with comprehensive usage patterns
- Added `CHANGELOG.md` with detailed release notes

### Core Framework
- `badgui/core.py` - Added all new components with proper Quasar mapping
- `badgui/__init__.py` - Added convenience functions for all new components
- `badgui/generator.py` - Removed blue header bar from default layout
- Version bump to 0.2.0

## 🎯 Key Usage Patterns Established

### Context Manager Excellence
```python
# ✅ Correct pattern (now documented and examples provided)
with bg.card() as my_card:
    my_card.classes("q-ma-md")
    with bg.card_section():
        bg.label("Content")
```

### Responsive Design
```python
# Overflow prevention with proper flex utilities
with bg.row() as grid:
    grid.classes("q-gutter-md wrap")  # Prevents overflow
    with bg.card() as card:
        card.classes("col-12 col-sm-6 col-md-4")  # Responsive breakpoints
```

### Material Design Integration
```python
# Full Material Design icon support
bg.icon("home", size="2rem", color="primary")
bg.image("https://example.com/image.jpg").classes("rounded-lg full-width")
```

## 🚀 Impact & Value

### For Developers
- **Zero Breaking Changes**: All existing code continues to work
- **Enhanced Productivity**: Complete UI component suite reduces development time
- **Better Documentation**: Comprehensive examples and usage guides
- **Responsive by Default**: Built-in overflow prevention and mobile-first design

### For Applications
- **Professional UI**: Material Design components with Quasar integration
- **Mobile Responsive**: Proper breakpoints and flex utilities
- **Modern Architecture**: Vue.js 3 + Quasar Framework output
- **Instant Development**: `bg.dev()` workflow unchanged and enhanced

## 🎨 Component Coverage

**Now Complete:**
- ✅ Basic: `label`, `button`, `input`, `link`
- ✅ Cards: `card`, `card_section`, `card_actions`
- ✅ Tabs: `tabs`, `tab`, `tab_panels`, `tab_panel`
- ✅ Layout: `header`, `footer`, `row`, `column`
- ✅ Media: `image`, `icon`
- ✅ Navigation: Router links with Vue Router

**Foundation for Future:**
- 🚧 Forms, Dialogs, Tables, Menus
- 🚧 Advanced interactions and data binding
- 🚧 Theming and customization system

This release establishes BadGUI as a complete UI framework for building modern, responsive web applications with Python syntax. The comprehensive example suite and documentation ensure developers can immediately leverage all new capabilities.

---

**Migration**: No changes required - all new features are additive
**Compatibility**: Full backward compatibility maintained
**Testing**: All examples tested with `bg.dev()` instant development

3 months ago

Matteo Benedetto

5b03db2f52

first commit

3 months ago

2 Commits (793cf618aa5f25acacb4035e74aee63ab861a5be)