badgui/examples/styling_example_fixed.py

#!/usr/bin/env python3
"""
BadGUI Styling Examples - showcasing .classes(), .props(), and .style() methods
"""

import badgui as bg

def main():
    # ===== STYLING EXAMPLES PAGE =====
    with bg.page("/", "StylingPage", "Styling Examples"):
        bg.label("BadGUI Styling Examples", classes=["text-h3", "text-primary", "q-mb-lg"])
        
        # ===== CLASSES EXAMPLES =====
        bg.label("1. Classes Method Examples", classes=["text-h5", "text-secondary", "q-mb-md"])
        
        # Basic classes
        label1 = bg.label("Basic classes").classes("text-bold text-blue-600 bg-blue-100 p-4 rounded")
        
        # Method chaining with classes
        label2 = bg.label("Chained classes").classes("text-center").classes("text-green-600").classes("bg-green-100 p-2")
        
        # Classes with add/remove/replace
        label3 = bg.label("Dynamic classes")
        label3.classes("text-red-600 bg-red-100 p-3")
        label3.classes(add="border border-red-300")
        label3.classes(remove="bg-red-100", add="bg-red-50")
        
        # Button with classes
        btn1 = bg.button("Styled Button")
        btn1.classes("bg-purple-500 text-white rounded-full px-6 py-2 shadow-lg hover:bg-purple-600")
        
        # ===== PROPS EXAMPLES =====
        bg.label("2. Props Method Examples", classes=["text-h5", "text-secondary", "q-mb-md", "q-mt-lg"])
        
        # Button with Quasar props
        btn2 = bg.button("Quasar Props Button")
        btn2.props("outline rounded color=primary")
        btn2.classes("q-mr-md")
        
        # Input with props
        input1 = bg.input(placeholder="Styled Input")
        input1.props('filled dense color=teal label="Enter text"')
        input1.classes("q-mb-md")
        
        # Button with multiple props
        btn3 = bg.button("Advanced Props")
        btn3.props("push glossy")
        btn3.props(add="icon=star color=orange")
        btn3.classes("q-mr-md")
        
        # ===== STYLE EXAMPLES =====
        bg.label("3. Style Method Examples", classes=["text-h5", "text-secondary", "q-mb-md", "q-mt-lg"])
        
        # CSS styles as string
        label4 = bg.label("CSS Styled Label")
        label4.style("color: #ff6b6b; font-size: 18px; font-weight: bold; padding: 10px; background: linear-gradient(45deg, #ffd93d, #ff6b6b); border-radius: 8px")
        
        # Chained styles
        label5 = bg.label("Chained Styles")
        label5.style("color: #4ecdc4; background-color: #f7f7f7; padding: 8px")
        label5.style("border-left: 4px solid #4ecdc4")
        
        # Style method chaining with add/remove
        label6 = bg.label("Dynamic Styles")
        label6.style("color: red; background: yellow; padding: 5px")
        label6.style(remove="background", add="background: lightblue; border: 2px solid navy")
        
        # ===== COMBINED STYLING =====
        bg.label("4. Combined Styling Examples", classes=["text-h5", "text-secondary", "q-mb-md", "q-mt-lg"])
        
        # All methods combined
        combined_label = bg.label("All Methods Combined")
        combined_label.classes("text-center rounded shadow-md")
        combined_label.style("background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px; font-size: 16px")
        combined_label.props(dataTest="combined")
        
        # Fancy button with all styling methods
        fancy_btn = bg.button("Fancy Button")
        fancy_btn.classes("shadow-2xl transform transition-all duration-200")
        fancy_btn.style("border-radius: 25px; padding: 12px 24px; text-transform: uppercase; letter-spacing: 1px")
        fancy_btn.props("push glossy color=deep-purple")
        
        # ===== LAYOUT STYLING =====
        bg.label("5. Layout Styling", classes=["text-h5", "text-secondary", "q-mb-md", "q-mt-lg"])
        
        # Styled row
        with bg.row() as row_container:
            row_container.classes("bg-grey-1 p-4 rounded-lg shadow").style("border-left: 5px solid #1976d2")
            bg.label("Styled Row Item 1").classes("text-primary")
            bg.label("Styled Row Item 2").classes("text-secondary")
            bg.label("Styled Row Item 3").classes("text-accent")
        
        # Styled column
        with bg.column() as col_container:
            col_container.classes("bg-gradient-to-r from-blue-50 to-indigo-100 p-6 rounded-xl").style("min-height: 100px")
            bg.label("Column Header").classes("text-lg font-bold text-indigo-800")
            bg.label("Column Content").classes("text-indigo-600")
        
        # ===== RESPONSIVE AND UTILITY CLASSES =====
        bg.label("6. Responsive & Utility Classes", classes=["text-h5", "text-secondary", "q-mb-md", "q-mt-lg"])
        
        # Responsive grid-like layout
        with bg.row() as responsive_row:
            responsive_row.classes("flex-wrap q-gutter-md")
            for i in range(6):
                card_label = bg.label(f"Card {i+1}")
                card_label.classes("bg-white p-4 rounded shadow flex-grow").style(f"min-width: 150px; background: hsl({i*60}, 70%, 90%)")
        
        # Utility classes example
        utility_label = bg.label("Utility Classes")
        utility_label.classes("text-xl font-bold text-center uppercase tracking-wide text-gray-700 bg-gray-100 p-6 rounded-lg border-2 border-dashed border-gray-300")
    
    # Build the Vue.js project
    print("🚀 Building BadGUI Styling Examples project...")
    bg.build("styling-output")

if __name__ == "__main__":
    main()