small fixes and improvements to examples

fpliger · fpliger · commit 90d891e48b42 · 2024-05-09T01:15:13.000-05:00
diff --git a/pyscript.core/test/ui/demo.py b/pyscript.core/test/ui/demo.py
@@ -45,7 +45,7 @@ def create_component_details(component_label, component):
     """
     # Get the example from the examples catalog
     example = component["instance"]
-    details = example.__doc__ or f"Details missing for component {component_label}"
+    details = getattr(example, '__doc__', '') or f"Details missing for component {component_label}"
 
     return div(
         [
diff --git a/pyscript.core/test/ui/examples.py b/pyscript.core/test/ui/examples.py
@@ -82,7 +82,7 @@ def toggle_dialog():
 ]:
     inputs_div.append(input_(type=input_type, style={"display": "block"}))
     inputs_code.append(f"input_(type='{input_type}')")
-inputs_code = "\n".join(inputs_code)
+
 
 headers_div = div()
 headers_code = []
@@ -91,6 +91,17 @@ def toggle_dialog():
     headers_code.append(f'{header.tag}("{header.tag.upper()} header")')
 headers_code = "\n".join(headers_code)
 
+rich_input = input_(type='text', name='some name',
+                      autofocus=True, pattern="\w{3,16}",
+                      placeholder='add text with > 3 chars', required=True, size='20'
+                    )
+inputs_div.append(rich_input)
+inputs_code.append("# You can create inputs with more options like")
+inputs_code.append("# this by passing properties as kwargs")
+inputs_code.append(
+    "input_(type='text', name='some name', autofocus=True, pattern='\\w{3,16}', placeholder='add text with > 3 chars', required=True, size='20')"
+)
+inputs_code = "\n".join(inputs_code)
 
 MARKDOWN_EXAMPLE = """# This is a header
 
diff --git a/pyscript.core/test/ui/index.html b/pyscript.core/test/ui/index.html
@@ -25,6 +25,11 @@
             body {
                 font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
             }
+
+            input:invalid {
+                background-color: lightpink;
+            }
+
         </style>
     </head>
 

Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ def create_component_details(component_label, component):`
`45`	`45`	`"""`
`46`	`46`	`# Get the example from the examples catalog`
`47`	`47`	`example = component["instance"]`
`48`		`- details = example.__doc__ or f"Details missing for component {component_label}"`
	`48`	`+ details = getattr(example, '__doc__', '') or f"Details missing for component {component_label}"`
`49`	`49`
`50`	`50`	`return div(`
`51`	`51`	`[`