# 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

- **NiceGUI-like syntax**: Write familiar Python code to define your UI
- **Vue.js/Quasar output**: Generates modern, responsive web applications
- **Static project generation**: Creates editable Vue projects, not live servers
- **Component-based**: Modular component system for reusable UI elements
- **Layout system**: Built-in row/column layouts for easy arrangement

## 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 some UI components
bg.label("Hello BadGUI!")

with bg.row():
    bg.button("Click me!")
    bg.input(placeholder="Enter text...")

with bg.column():
    bg.label("Column item 1")
    bg.label("Column item 2")

# Build the Vue.js project
bg.build(output_dir="./my-vue-app")
```

### Build and Run

```bash
# Generate the Vue project
python main.py

# Navigate to the generated project
cd my-vue-app

# Install dependencies
npm install

# Run the development server
npm run dev
```

## Components

BadGUI currently supports these basic components:

- `label(text)` - Text labels
- `button(text, on_click=None)` - Interactive buttons  
- `input(placeholder="")` - Text input fields
- `row()` - Horizontal layout container
- `column()` - Vertical layout container

## Project Structure

When you run `bg.build()`, BadGUI generates a complete Vue.js/Quasar project with:

- `/src/pages/IndexPage.vue` - Main page with your components
- `/src/layouts/MainLayout.vue` - App layout structure
- `/src/router/` - Vue Router configuration
- `/package.json` - Project dependencies
- `/quasar.config.js` - Quasar framework configuration

## Development Status

BadGUI is in early development. Current version (0.1.0) includes:

✅ Basic component system (label, button, input)  
✅ Layout containers (row, column)  
✅ Vue.js/Quasar project generation  
✅ Development server setup  

Planned features:
- More UI components (cards, dialogs, tables, etc.)
- Event handling and interactivity
- Data binding capabilities
- Styling and theming system
- Advanced layouts and responsive design

## Contributing

BadGUI is open source and contributions are welcome! Please feel free to submit issues and pull requests.

## License

MIT License