jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2025-12-19 18:27:29 -05:00
Code Issues Projects Releases Wiki Activity

change example creation functions to take the label and the object directly

Browse Source
This commit is contained in:
Fabio Pliger
2024-02-02 12:07:19 -06:00
parent 11a4adaaa0
commit 779b367e2c
2 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
pyscript.core/test/ui/demo.py
View File

@@ -30,7 +30,7 @@ shoelace.load_resources()
# Let's define some convenience functions first # Let's define some convenience functions first
def create_component_details(component): def create_component_details(component_label, component):
"""Create a component details card. """Create a component details card.
Args: Args:
@@ -41,14 +41,13 @@ def create_component_details(component):
""" """
# Get the example from the examples catalog # Get the example from the examples catalog
examples_gallery = examples.kits["shoelace"] example = component['instance']
example = examples_gallery[component]["instance"] details = example.__doc__ or f"Details missing for component {component_label}"
details = example.__doc__ or f"Details missing for component {component}"
div = el.div( div = el.div(
[ [
# Title and description (description is picked from the class docstring) # Title and description (description is picked from the class docstring)
el.h1(component), el.h1(component_label),
markdown(details), markdown(details),
# Example section # Example section
el.h2("Example:"), el.h2("Example:"),
@@ -57,7 +56,7 @@ def create_component_details(component):
example, example,
shoelace.Details( shoelace.Details(
el.div( el.div(
examples_gallery[component]["code"], component["code"],
style=styles.STYLE_CODE_BLOCK, style=styles.STYLE_CODE_BLOCK,
), ),
summary="View Code", summary="View Code",
@@ -76,7 +75,7 @@ def create_component_details(component):
return div return div
def add_component_section(component, parent_div): def add_component_section(component_label, component, parent_div):
"""Create a link to a component and add it to the left panel. """Create a link to a component and add it to the left panel.
Args: Args:
@@ -88,14 +87,14 @@ def add_component_section(component, parent_div):
""" """
# Create the component link element # Create the component link element
div = el.div( div = el.div(
el.a(component, href="#"), el.a(component_label, href="#"),
style={"display": "block", "text-align": "center", "margin": "auto"}, style={"display": "block", "text-align": "center", "margin": "auto"},
) )
# Create a handler that opens the component details when the link is clicked # Create a handler that opens the component details when the link is clicked
@when("click", div) @when("click", div)
def _change(): def _change():
new_main = create_component_details(component) new_main = create_component_details(component_label, component)
main_area.html = "" main_area.html = ""
main_area.append(new_main) main_area.append(new_main)
@@ -194,6 +193,9 @@ def create_basic_components_page():
div = el.div() div = el.div()
div.append(el.h2("Base components:")) div.append(el.h2("Base components:"))
# for component in examples.kits["examples"]:
# add_component_section(component, left_div, )
# Buttons # Buttons
div.append(el.h3("Buttons")) div.append(el.h3("Buttons"))
btn = el.button("Click me!") btn = el.button("Click me!")
@@ -312,8 +314,8 @@ left_div.append(shoelace.Divider(style={"margin-top": "5px", "margin-bottom": "3
# Create the links to the components on th left panel # Create the links to the components on th left panel
print("SHOELACE EXAMPLES", examples.kits["shoelace"]) print("SHOELACE EXAMPLES", examples.kits["shoelace"])
for component in examples.kits["shoelace"]: for component_label, component in examples.kits["shoelace"].items():
add_component_section(component, left_div) add_component_section(component_label, component, left_div)
# ********** ADD LEFT AND MAIN PANEL TO MAIN ********** # ********** ADD LEFT AND MAIN PANEL TO MAIN **********

6
pyscript.core/test/ui/examples.py
View File

@@ -88,5 +88,11 @@ Card(el.p("This is a cool card!"), image="https://pyscript.net/assets/images/pys
"instance": Radio(), "instance": Radio(),
"code": el.code("Radio()"), "code": el.code("Radio()"),
}, },
},
'elements':{
'div': {
'instance': el.div("This is a div"),
'code': el.code('div("This is a div")')
}
} }
} }