.. BadGUI documentation master file, created by
   sphinx-quickstart on Sat Sep 27 21:52:16 2025.
   You can adapt this file completely to your liking, but it should at least
   contain the root `toctree` directive.

BadGUI Documentation
====================

.. image:: https://img.shields.io/badge/Python-3.8+-blue.svg
   :target: https://python.org
   :alt: Python Version

.. image:: https://img.shields.io/badge/Framework-Vue.js%203-green.svg
   :target: https://vuejs.org
   :alt: Vue.js 3

.. image:: https://img.shields.io/badge/UI-Quasar-blue.svg
   :target: https://quasar.dev
   :alt: Quasar Framework

**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.

Key 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
- **🚀 Instant Development**: ``bg.dev()`` creates temp build, installs deps, and starts server automatically
- **Component-based**: Modular component system for reusable UI elements
- **Layout system**: Built-in row/column layouts with context managers
- **Multi-page routing**: Create multiple pages with Vue Router integration
- **Styling methods**: NiceGUI-style ``.classes()``, ``.props()``, and ``.style()`` methods
- **Method chaining**: Fluent API for building components
- **Dual workflow**: Instant dev mode OR static project generation

Quick Start
-----------

Installation::

    pip install badgui

Basic Usage:

.. code-block:: python

    import badgui as bg

    # Create a page using context manager
    with bg.page("/", "HomePage", "Welcome"):
        # Basic components with styling
        bg.label("Hello BadGUI!").classes("text-h3 text-primary")
        
        # Styled button with method chaining
        bg.button("Click me!").classes("q-btn-primary").props("outline")
        
        # Layout containers
        with bg.row().classes("q-gutter-md") as row:
            bg.label("Item 1").classes("bg-blue-100 p-4")
            bg.label("Item 2").classes("bg-green-100 p-4")

    # 🚀 INSTANT DEVELOPMENT - One command does it all!
    bg.dev(port=3000)  # Creates temp build, installs deps, starts server!

    # OR build static project for deployment
    # bg.build(output_dir="./my-vue-app")

.. toctree::
   :maxdepth: 2
   :caption: Contents:

   installation
   quickstart
   development
   components
   styling
   routing
   examples
   api/modules

Indices and Tables
==================

* :ref:`genindex`
* :ref:`modindex`
* :ref:`search`