# BadGUI BadGUI is a Python framework that generates Vue.js/Quasar projects using syntax similar to NiceGUI. Instead of running a live server, BadGUI creates a complete, editable Vue.js project that you can further customize and deploy. ## Features - **🚀 Instant Development**: `bg.dev()` creates temp build, installs deps, and starts server automatically - **NiceGUI-like syntax**: Write familiar Python code to define your UI - **Vue.js/Quasar output**: Generates modern, responsive web applications - **Dual workflow**: Instant dev mode OR static project generation for deployment - **Rich Component Set**: Cards, tabs, headers, footers, images, icons, and more - **Layout system**: Built-in row/column layouts with context managers and responsive flex utilities - **Multi-page routing**: Create multiple pages with Vue Router integration - **Styling methods**: NiceGUI-style `.classes()`, `.props()`, and `.style()` methods - **Material Design**: Full Material Design icon support with Quasar integration - **Responsive Design**: Built-in responsive breakpoints and flex utilities - **Context Managers**: Proper container management for complex layouts ## Quick Start ### Installation ```bash pip install badgui ``` ### Basic Usage Create a Python file with your UI definition: ```python # main.py import badgui as bg # Create a page using context manager with bg.page("/", "HomePage", "Welcome"): # Header with navigation with bg.header() as nav_header: nav_header.classes("bg-primary text-white q-pa-md") with bg.row() as nav_row: nav_row.classes("items-center justify-between") bg.label("My App").classes("text-h4") with bg.row() as nav_links: nav_links.classes("q-gutter-md") bg.link("Home", "/").classes("text-white") bg.link("About", "/about").classes("text-white") # Main content with responsive cards with bg.column() as main_content: main_content.classes("q-pa-lg") # Hero section with bg.card() as hero: hero.classes("bg-blue-1 q-pa-xl q-mb-lg") with bg.card_section(): bg.label("Welcome to BadGUI!").classes("text-h3 text-primary q-mb-md") bg.label("Build modern web apps with Python syntax") # Feature cards with responsive layout with bg.row() as features: features.classes("q-gutter-md wrap") with bg.card() as card1: card1.classes("col-12 col-md-4") with bg.card_section(): bg.icon("speed", size="3rem", color="primary").classes("q-mb-md") bg.label("Fast Development").classes("text-h5 q-mb-md") bg.label("Rapid prototyping with Python") with bg.card() as card2: card2.classes("col-12 col-md-4") with bg.card_section(): bg.icon("build", size="3rem", color="secondary").classes("q-mb-md") bg.label("Modern Stack").classes("text-h5 q-mb-md") bg.label("Vue.js 3 + Quasar Framework") # Image gallery with bg.card() as gallery: gallery.classes("q-mt-lg") with bg.card_section(): bg.label("Gallery").classes("text-h5 q-mb-md") with bg.row() as gallery_row: gallery_row.classes("q-gutter-md wrap") for i in range(1, 4): with bg.column() as img_col: img_col.classes("col-12 col-sm-6 col-md-4") bg.image(f"https://picsum.photos/300/200?random={i}").classes("rounded-lg full-width") # Tabs example with bg.tabs() as main_tabs: main_tabs.classes("text-primary q-mt-lg") with bg.tab("features", "Features"): pass with bg.tab("about", "About"): pass with bg.tab_panels() as panels: panels.classes("q-pa-md") with bg.tab_panel("features"): bg.label("Feature content goes here") with bg.tab_panel("about"): bg.label("About content goes here") # Footer with bg.footer() as page_footer: page_footer.classes("bg-dark text-white q-pa-md text-center") bg.label("© 2024 My App. Built with BadGUI.") # 🚀 INSTANT DEVELOPMENT MODE - One command does it all! bg.dev(port=3000) # Creates temp build, installs deps, starts server! # OR build a static project for deployment # bg.build(output_dir="./my-vue-app") ``` ### Multi-Page Application ```python import badgui as bg # Home page with bg.page("/", "HomePage", "Home"): bg.label("Welcome to Home").classes("text-h2") bg.link("Go to About", "/about").classes("q-btn q-btn-primary") # About page with bg.page("/about", "AboutPage", "About Us"): bg.label("About Us").classes("text-h2") bg.label("This is the about page content") bg.link("Back to Home", "/").classes("q-btn q-btn-secondary") bg.build("multi-page-app") ``` ### Development Workflow **🚀 Instant Development (Recommended)** ```bash # One command - builds, installs, and runs automatically! python main.py # Server starts at http://localhost:3000 ``` **📦 Production Build** ```python # For deployment, use bg.build() instead of bg.dev() bg.build(output_dir="./my-vue-app") ``` ```bash # Then manually build and deploy cd my-vue-app npm install npm run build ``` ## Components BadGUI supports these components with full styling capabilities: - `label(text)` - Text labels and headings - `button(text)` - Interactive buttons - `input(placeholder="")` - Text input fields - `link(text, to)` - Router navigation links - `row()` - Horizontal layout container (context manager) - `column()` - Vertical layout container (context manager) ## Styling Methods BadGUI implements NiceGUI-style styling methods: ### `.classes()` - CSS Classes ```python # Add classes label.classes("text-bold text-blue-600 bg-blue-100") # Method chaining label.classes("text-center").classes("p-4").classes("rounded") # Add, remove, replace classes label.classes(add="border", remove="bg-blue-100", replace="new-class-set") ``` ### `.props()` - Component Properties ```python # String format button.props("outline rounded color=primary") # With quoted values input_field.props('filled dense label="Enter your name"') # Keyword arguments button.props(disabled=True, color="secondary") ``` ### `.style()` - Inline CSS ```python # CSS string label.style("color: red; font-size: 18px; padding: 10px") # Keyword arguments (camelCase converted to kebab-case) label.style(backgroundColor="lightblue", fontSize="16px") ``` ## Pages and Routing Create multi-page applications with Vue Router: ```python # Page context manager with bg.page(path="/contact", name="ContactPage", title="Contact Us"): bg.label("Contact Form").classes("text-h3") # Page content here... # Navigation links bg.link("Contact", "/contact") # Creates ``` ## Project Structure When you run `bg.build()`, BadGUI generates a complete Vue.js/Quasar project: ``` my-vue-app/ ├── src/ │ ├── pages/ │ │ ├── HomePage.vue # Generated page components │ │ ├── AboutPage.vue │ │ └── ErrorNotFound.vue │ ├── layouts/ │ │ └── MainLayout.vue # App layout │ ├── router/ │ │ ├── index.js # Router configuration │ │ └── routes.js # Route definitions │ ├── components/ # Reusable components │ ├── App.vue # Root component │ └── main.js # Application entry ├── package.json # Dependencies ├── quasar.config.js # Quasar configuration └── index.html # HTML template ``` ## Development Status BadGUI current version includes: ✅ **Core Features** - Component system (label, button, input, link) - Layout containers (row, column) with context managers - Vue.js/Quasar project generation - **🚀 INSTANT DEVELOPMENT MODE**: `bg.dev()` - one command does it all! ✅ **UI Components** - **Cards**: `bg.card()`, `bg.card_section()`, `bg.card_actions()` with NiceGUI-style API - **Tabs**: `bg.tabs()`, `bg.tab()`, `bg.tab_panels()`, `bg.tab_panel()` with content management - **Layout**: `bg.header()`, `bg.footer()` with context manager support - **Media**: `bg.image()`, `bg.icon()` with Material Design icons - **Navigation**: `bg.link()` with Vue Router integration ✅ **Styling System** - `.classes()` method for CSS classes with Quasar/Material Design support - `.props()` method for component properties - `.style()` method for inline CSS - Method chaining support - Responsive flex utilities (`wrap`, `col-12 col-md-4`, etc.) ✅ **Multi-Page Routing** - Page creation with context managers - Vue Router integration - Navigation links - Dynamic route generation ✅ **Developer Experience** - **`bg.dev()`**: Instant temp build + auto-install + dev server - **`bg.build()`**: Static project generation for deployment - Context manager patterns for proper component nesting - Comprehensive examples and documentation - Responsive design patterns and overflow prevention ✅ **Material Design Integration** - Full Material Design icon library support - Quasar component mapping for consistent UI - Responsive breakpoints and flex utilities - Modern CSS classes and styling patterns 🚧 **Planned Features** - File watching and auto-rebuild (for `bg.dev()`) - More UI components (dialogs, tables, forms, menus) - Event handling and interactivity - Data binding capabilities - Advanced theming system - Component slots and composition ## Examples The repository includes comprehensive examples: **🎯 Component Examples:** - `simple_card_test.py` - Basic card components - `simple_image_icon_test.py` - Image and icon usage - `tabs_examples.py` - Tab navigation and content - `simple_header_footer_test.py` - Layout components **🏗️ Layout Examples:** - `flex_layout_test.py` - Responsive flex layouts and overflow prevention - `enhanced_navigation_example.py` - Complete website with navigation, galleries, and team sections - `context_manager_guide.py` - Comprehensive guide for proper context manager usage **📖 Usage Guides:** - Context manager patterns for container components - Responsive design with Quasar flex utilities - Material Design icon integration - Multi-page routing and navigation All examples demonstrate: - Proper context manager usage (`with bg.component() as name:`) - Responsive design patterns - Material Design integration - NiceGUI-compatible API patterns ## Documentation Full documentation is available at: [BadGUI Documentation](./docs/) ## Contributing BadGUI is open source and contributions are welcome! Please feel free to submit issues and pull requests. ## License MIT License