diff --git a/pyscript.core/test/ui/demo.py b/pyscript.core/test/ui/demo.py index f7fcddd5..ea8716d7 100644 --- a/pyscript.core/test/ui/demo.py +++ b/pyscript.core/test/ui/demo.py @@ -149,8 +149,7 @@ def create_markdown_components_page(): the main area """ - div_ = div() - div_.append(h2("Markdown")) + div_ = div(h2("Markdown")) # Buttons markdown_txt_area = shoelace.TextArea( @@ -188,66 +187,18 @@ def create_basic_components_page(): the main area """ - div_ = div() - div_.append(h2("Base components:")) + div_ = div(h2("Base components:")) for component_label, component in examples.kits["elements"].items(): - # div.append(create_component_details(component_label, component)) div_.append(h3(component_label)) div_.append(create_component_example(component['instance'], component['code'])) - # Buttons - div_.append(h3("Buttons")) - btn = button("Click me!") - when("click", btn)(lambda: window.alert("Clicked!")) - - btn_code = dedent( - """btn = button("Click me!") -when('click', btn)(lambda: window.alert("Clicked!"))""" - ) - - div_.append(create_component_example(btn, btn_code)) - - # Inputs - inputs_div = div() - div_.append(h3("Inputs")) - inputs_code = [] - for input_type in [ - "text", - "password", - "email", - "number", - "date", - "time", - "color", - "range", - ]: - inputs_div.append(input_(type=input_type, style={"display": "block"})) - inputs_code.append(f"input_(type='{input_type}')") - inputs_code = "\n".join(inputs_code) - - div_.append(create_component_example(inputs_div, inputs_code)) - - # DIV - div_.append(h3("Div")) - _div = div( - "This is a div", - style={ - "text-align": "center", - "width": "100%", - "margin": "0 auto 0", - "background-color": "cornsilk", - }, - ) - code = "div = div('This is a div', style={'text-align': 'center', 'margin': '0 auto 0', 'background-color': 'cornsilk'})" - div_.append(create_component_example(_div, code)) - return div_ # ********** CREATE ALL THE LAYOUT ********** -grid = Grid("minmax(150px, 200px) 20px auto", style={"min-height": "100%"}) +grid = Grid("140px 20px auto", style={"min-height": "100%"}) # ********** MAIN PANEL ********** main_area = create_main_area() @@ -264,6 +215,7 @@ def restore_home(): def basic_components(): write_to_main(create_basic_components_page()) + # Make sure we highlight the code window.hljs.highlightAll() diff --git a/pyscript.core/test/ui/examples.py b/pyscript.core/test/ui/examples.py index f325ea96..2978fb1e 100644 --- a/pyscript.core/test/ui/examples.py +++ b/pyscript.core/test/ui/examples.py @@ -1,5 +1,5 @@ from pyweb import pydom -from pyweb.ui import elements as el +from pyweb.ui.elements import a, button, code, div, Grid, h1, h2, h3, input_, p from pyweb.ui.shoelace import ( Alert, Button, @@ -21,7 +21,7 @@ Details(LOREM_IPSUM, summary="Try me") """ example_dialog_close_btn = Button("Close") example_dialog = Dialog( - el.div([el.p(LOREM_IPSUM), example_dialog_close_btn]), label="Try me" + div([p(LOREM_IPSUM), example_dialog_close_btn]), label="Try me" ) example_dialog_btn = Button("Open Dialog") @@ -36,61 +36,80 @@ when("click", example_dialog_close_btn)(toggle_dialog) pydom.body.append(example_dialog) +# ELEMENTS -btn = el.button("Click me!") +# Button +btn = button("Click me!") when("click", btn)(lambda: window.alert("Clicked!")) +# Inputs +inputs_div = div() +inputs_code = [] +for input_type in [ + "text", + "password", + "email", + "number", + "date", + "time", + "color", + "range", +]: + inputs_div.append(input_(type=input_type, style={"display": "block"})) + inputs_code.append(f"input_(type='{input_type}')") +inputs_code = "\n".join(inputs_code) + kits = { "shoelace": { "Alert": { "instance": Alert( "This is a standard alert. You can customize its content and even the icon." ), - "code": el.code( + "code": code( "Alert('This is a standard alert. You can customize its content and even the icon.'" ), }, "Icon": { "instance": Icon(name="heart"), - "code": el.code('Icon(name="heart")'), + "code": code('Icon(name="heart")'), }, "Button": { "instance": Button("Try me"), - "code": el.code('Button("Try me")'), + "code": code('Button("Try me")'), }, "Card": { "instance": Card( - el.p("This is a cool card!"), + p("This is a cool card!"), image="https://pyscript.net/assets/images/pyscript-sticker-black.svg", - footer=el.div([Button("More Info"), Rating()]), + footer=div([Button("More Info"), Rating()]), ), - "code": el.code( + "code": code( """ -Card(el.p("This is a cool card!"), image="https://pyscript.net/assets/images/pyscript-sticker-black.svg", footer=el.div([Button("More Info"), Rating()])) +Card(p("This is a cool card!"), image="https://pyscript.net/assets/images/pyscript-sticker-black.svg", footer=div([Button("More Info"), Rating()])) """ ), }, "Details": { "instance": Details(LOREM_IPSUM, summary="Try me"), - "code": el.code('Details(LOREM_IPSUM, summary="Try me")'), + "code": code('Details(LOREM_IPSUM, summary="Try me")'), }, "Dialog": { "instance": example_dialog_btn, - "code": el.code( + "code": code( 'Dialog(div([p(LOREM_IPSUM), Button("Close")]), summary="Try me")' ), }, "Divider": { "instance": Divider(), - "code": el.code("Divider()"), + "code": code("Divider()"), }, "Rating": { "instance": Rating(), - "code": el.code("Rating()"), + "code": code("Rating()"), }, "Radio": { "instance": Radio(), - "code": el.code("Radio()"), + "code": code("Radio()"), }, }, 'elements':{ @@ -101,8 +120,12 @@ when('click', btn)(lambda: window.alert("Clicked!")) ''' }, 'div': { - 'instance': el.div("This is a div"), - 'code': 'div("This is a div")' - } + 'instance': div("This is a div", style={'text-align': 'center', 'margin': '0 auto', 'background-color': 'cornsilk'}), + 'code': 'div("This is a div", style={"text-align": "center", "margin": "0 auto", "background-color": "cornsilk"})' + }, + 'input':{ + 'instance': inputs_div, + 'code': inputs_code + }, } }