You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
3.0 KiB
94 lines
3.0 KiB
""" |
|
Test refactored components using generic component() as base |
|
""" |
|
|
|
import badgui as bg |
|
|
|
with bg.page("/", "RefactoredTest", "Refactored Components Test"): |
|
with bg.column() as main_col: |
|
main_col.classes("q-pa-lg q-gutter-md") |
|
|
|
bg.label("Refactored Components Test").classes("text-h3 q-mb-lg") |
|
|
|
# Test basic components |
|
with bg.card(title="Basic Components") as card1: |
|
card1.classes("q-mb-md") |
|
|
|
bg.label("This is a label created with the refactored method") |
|
|
|
input_field = bg.input("Enter some text here") |
|
input_field.bind_value('userText') |
|
input_field.classes("q-mb-md") |
|
|
|
button = bg.button("Click Me", icon="thumb_up") |
|
button.on_click('handleClick') |
|
|
|
# Test layout components |
|
with bg.card(title="Layout Components") as card2: |
|
card2.classes("q-mb-md") |
|
|
|
bg.label("Row layout:") |
|
with bg.row() as test_row: |
|
test_row.classes("q-gutter-md q-mb-md") |
|
|
|
bg.label("Item 1").classes("col") |
|
bg.label("Item 2").classes("col") |
|
bg.label("Item 3").classes("col") |
|
|
|
bg.label("Column layout:") |
|
with bg.column() as test_col: |
|
test_col.classes("q-gutter-sm") |
|
|
|
bg.label("Column Item 1") |
|
bg.label("Column Item 2") |
|
bg.label("Column Item 3") |
|
|
|
# Test mixed with generic components |
|
with bg.card(title="Mixed Components") as card3: |
|
card3.classes("q-mb-md") |
|
|
|
bg.label("Regular button vs Generic button:") |
|
|
|
with bg.row() as button_row: |
|
button_row.classes("q-gutter-md") |
|
|
|
# Regular button (refactored) |
|
regular_btn = bg.button("Regular Button") |
|
regular_btn.on_click('handleRegular') |
|
|
|
# Generic button |
|
generic_btn = bg.component('q-btn', label='Generic Button', color='secondary') |
|
generic_btn.on_click('handleGeneric') |
|
|
|
# JavaScript |
|
bg.script(""" |
|
const userText = ref(''); |
|
|
|
const handleClick = () => { |
|
console.log('Refactored button clicked!'); |
|
}; |
|
|
|
const handleRegular = () => { |
|
console.log('Regular (refactored) button clicked!'); |
|
}; |
|
|
|
const handleGeneric = () => { |
|
console.log('Generic button clicked!'); |
|
}; |
|
|
|
onMounted(() => { |
|
console.log('Refactored components test loaded!'); |
|
console.log('All components now use the generic component() method as their base'); |
|
}); |
|
""") |
|
|
|
if __name__ == "__main__": |
|
print("🔧 Refactored Components Test") |
|
print("Testing components that use generic component() as their base") |
|
print() |
|
print("This demonstrates:") |
|
print("- Consistent behavior across all components") |
|
print("- Reduced code duplication") |
|
print("- Easier maintenance") |
|
|
|
bg.dev(port=3033) |