Aaron SinclairandClaude
adf95f424d
Fixes: - Lambda functions now correctly pass arguments to handlers - Function parameters properly emitted in LLVM IR - Event handlers defined with parameter lists New feature - Ternary expressions: - Support Python ternary syntax (x if cond else y) in props - Eliminates repetitive if/else blocks for active states - Before: 6 lines per tab button - After: 1 line with ternary expression Example: class_='tab active' if active else 'tab' All tests passing (51 passed, 2 skipped) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
127 lines
4.4 KiB
Python
127 lines
4.4 KiB
Python
"""
|
|
Clean Tabs implementation using ternary expressions to eliminate repetition.
|
|
|
|
Before: 6 lines per tab button (if/else blocks)
|
|
After: 1 line per tab button (ternary expressions)
|
|
"""
|
|
|
|
from ritz.syntax import *
|
|
|
|
|
|
@component
|
|
def VerticalTabs():
|
|
"""Vertical tabs for settings categories."""
|
|
setting_tab = signal(0)
|
|
|
|
def set_setting(value):
|
|
setting_tab = value
|
|
|
|
with Div(class_="vertical-tabs"):
|
|
# Vertical tab menu - now just 3 lines instead of 18!
|
|
with Div(class_="vertical-tab-menu"):
|
|
with Button(class_='vertical-tab active' if setting_tab == 0 else 'vertical-tab', onclick=lambda: set_setting(0)):
|
|
yield "⚙️ General"
|
|
|
|
with Button(class_='vertical-tab active' if setting_tab == 1 else 'vertical-tab', onclick=lambda: set_setting(1)):
|
|
yield "🔒 Privacy"
|
|
|
|
with Button(class_='vertical-tab active' if setting_tab == 2 else 'vertical-tab', onclick=lambda: set_setting(2)):
|
|
yield "🚀 Advanced"
|
|
|
|
# Tab content (same as before)
|
|
with Div(class_="vertical-tab-content"):
|
|
match setting_tab:
|
|
case 0:
|
|
with Div(class_="setting-pane"):
|
|
with H3():
|
|
yield "⚙️ General Settings"
|
|
with P():
|
|
yield "Language: English"
|
|
with P():
|
|
yield "Time Zone: UTC"
|
|
|
|
case 1:
|
|
with Div(class_="setting-pane"):
|
|
with H3():
|
|
yield "🔒 Privacy Settings"
|
|
with P():
|
|
yield "Data Collection: Disabled"
|
|
with P():
|
|
yield "Analytics: Opt-out"
|
|
|
|
case 2:
|
|
with Div(class_="setting-pane"):
|
|
with H3():
|
|
yield "🚀 Advanced Settings"
|
|
with P():
|
|
yield "Debug Mode: Off"
|
|
with P():
|
|
yield "Experimental Features: Disabled"
|
|
|
|
case _:
|
|
with Div(class_="setting-pane"):
|
|
with P():
|
|
yield "Invalid setting"
|
|
|
|
|
|
@component
|
|
def Tabs():
|
|
"""Main tabs container with ternary expressions for clean tab buttons."""
|
|
tab_index = signal(0)
|
|
|
|
def set_tab(value):
|
|
tab_index = value
|
|
|
|
with Div(class_="tabs-container"):
|
|
with H1():
|
|
yield "Tab Component Demo"
|
|
|
|
with P(class_="subtitle"):
|
|
yield "Beautiful composition with ternary expressions"
|
|
|
|
# Tab menu - clean one-line buttons!
|
|
with Ul(class_="tab-menu"):
|
|
with Li(class_='tab active' if tab_index == 0 else 'tab'):
|
|
with Button(onclick=lambda: set_tab(0)):
|
|
yield "🏠 Home"
|
|
|
|
with Li(class_='tab active' if tab_index == 1 else 'tab'):
|
|
with Button(onclick=lambda: set_tab(1)):
|
|
yield "👤 Profile"
|
|
|
|
with Li(class_='tab active' if tab_index == 2 else 'tab'):
|
|
with Button(onclick=lambda: set_tab(2)):
|
|
yield "⚙️ Settings"
|
|
|
|
# Tab panes
|
|
with Div(class_="tab-content"):
|
|
match tab_index:
|
|
case 0:
|
|
with Div(class_="tab-pane home"):
|
|
with H2():
|
|
yield "🏠 Welcome Home"
|
|
with P():
|
|
yield "This is your home dashboard."
|
|
|
|
case 1:
|
|
with Div(class_="tab-pane profile"):
|
|
with H2():
|
|
yield "👤 Your Profile"
|
|
with P():
|
|
yield "Manage your account settings."
|
|
|
|
case 2:
|
|
with Div(class_="tab-pane settings"):
|
|
with H2():
|
|
yield "⚙️ Settings"
|
|
with P():
|
|
yield "Configure your preferences using the categories below:"
|
|
|
|
# Nested vertical tabs!
|
|
yield VerticalTabs()
|
|
|
|
case _:
|
|
with Div(class_="tab-pane error"):
|
|
with P():
|
|
yield "⚠️ Invalid tab selected"
|