Fix lambda event handlers & add ternary expression support

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>
This commit is contained in:
Aaron SinclairandClaude committed 2025-11-15 11:07:58 -08:00
1 parent c947bcf6e0
commit adf95f424d
7 files changed
+1282 -665

No files matched your search

+126
View File
@@ -0,0 +1,126 @@
"""
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"