Fix tabs onclick handlers by inlining components
**Problem:** - HTab/VTab components received onclick as a parameter - When binding events, codegen used parameter name "onclick" instead of actual function - Runtime couldn't find handler function in WASM exports **Root Cause:** We don't support passing functions as component parameters yet. When a child component uses onclick=onclick where onclick is a parameter, we bind the string "onclick" instead of tracking which function was actually passed. **Fix:** Inlined HTab and VTab components back into parent components. Now lambdas are directly on Button elements, so they generate proper synthetic handlers (_lambda_0_Tabs, _lambda_1_Tabs, etc.) that get exported. **Result:** ✅ All tab click handlers now work ✅ Handlers exported: _lambda_0_Tabs, _lambda_1_Tabs, _lambda_2_Tabs, _lambda_0_VerticalTabs, _lambda_1_VerticalTabs, _lambda_2_VerticalTabs **TODO:** Implement function pointers/delegates as component parameters to restore component reusability (tracked in TYPE_SYSTEM_ROADMAP.md) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
1 parent
e1219ea0c1
commit
d8a2e28fd5
3 files changed
+537
-350
No files matched your search
+513
-342
File diff suppressed because it is too large.
Load diff
+24
-8
@@ -49,11 +49,19 @@ def VerticalTabs():
|
||||
setting_tab = value
|
||||
|
||||
with Div(class_="vertical-tabs"):
|
||||
# Vertical tab menu - using reusable VTab component!
|
||||
# Vertical tab menu - inlined until we support function params
|
||||
with Div(class_="vertical-tab-menu"):
|
||||
yield VTab(label="⚙️ General", active=setting_tab == 0, onclick=lambda: set_setting(0))
|
||||
yield VTab(label="🔒 Privacy", active=setting_tab == 1, onclick=lambda: set_setting(1))
|
||||
yield VTab(label="🚀 Advanced", active=setting_tab == 2, onclick=lambda: set_setting(2))
|
||||
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"
|
||||
|
||||
# Vertical tab content
|
||||
with Div(class_="vertical-tab-content"):
|
||||
@@ -106,11 +114,19 @@ def Tabs(orientation=0): # 0 = horizontal, 1 = vertical
|
||||
with P(class_="subtitle"):
|
||||
yield "Beautiful composition with TabMenu and TabPane components"
|
||||
|
||||
# Tab menu - using reusable HTab component!
|
||||
# Tab menu - inlined until we support function params
|
||||
with Ul(class_="tab-menu"):
|
||||
yield HTab(label="🏠 Home", active=tab_index == 0, onclick=lambda: set_tab(0))
|
||||
yield HTab(label="👤 Profile", active=tab_index == 1, onclick=lambda: set_tab(1))
|
||||
yield HTab(label="⚙️ Settings", active=tab_index == 2, onclick=lambda: set_tab(2))
|
||||
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 - match/case for clean switching
|
||||
with Div(class_="tab-content"):
|
||||
|
||||
Binary file not shown.
Reference in new issue
Block a user