mirror of
https://github.com/pyscript/pyscript.git
synced 2026-03-27 02:00:24 -04:00
reorg classes order in elements.py and add missing elements to examples
This commit is contained in:
Fabio Pliger
@@ -111,6 +111,14 @@ class a(TextElementBase):
|
||||
_add_js_properties(a, "download", "href", "referrerpolicy", "rel", "target", "type")
|
||||
|
||||
|
||||
class br(ElementBase):
|
||||
tag = "br"
|
||||
|
||||
|
||||
# br tags only have the global attributes ones (others have been deprecated)
|
||||
_add_js_properties(br)
|
||||
|
||||
|
||||
class button(TextElementBase):
|
||||
tag = "button"
|
||||
|
||||
@@ -132,113 +140,6 @@ _add_js_properties(
|
||||
)
|
||||
|
||||
|
||||
class h1(TextElementBase):
|
||||
tag = "h1"
|
||||
|
||||
|
||||
# https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#attributes
|
||||
# Heading elements only have global attributes
|
||||
_add_js_properties(h1)
|
||||
|
||||
|
||||
class h2(TextElementBase):
|
||||
tag = "h2"
|
||||
|
||||
|
||||
_add_js_properties(h2)
|
||||
|
||||
|
||||
class h3(TextElementBase):
|
||||
tag = "h3"
|
||||
|
||||
|
||||
_add_js_properties(h3)
|
||||
|
||||
|
||||
class h4(TextElementBase):
|
||||
tag = "h4"
|
||||
|
||||
|
||||
_add_js_properties(h4)
|
||||
|
||||
|
||||
class h5(TextElementBase):
|
||||
tag = "h5"
|
||||
|
||||
|
||||
_add_js_properties(h5)
|
||||
|
||||
|
||||
class h6(TextElementBase):
|
||||
tag = "h6"
|
||||
|
||||
|
||||
_add_js_properties(h6)
|
||||
|
||||
|
||||
class link(TextElementBase):
|
||||
tag = "link"
|
||||
|
||||
|
||||
# https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attributes
|
||||
_add_js_properties(
|
||||
link,
|
||||
"as",
|
||||
"crossorigin",
|
||||
"disabled",
|
||||
"fetchpriority",
|
||||
"href",
|
||||
"imagesizes",
|
||||
"imagesrcset",
|
||||
"integrity",
|
||||
"media",
|
||||
"rel",
|
||||
"referrerpolicy",
|
||||
"sizes",
|
||||
"title",
|
||||
"type",
|
||||
)
|
||||
|
||||
|
||||
class style(TextElementBase):
|
||||
tag = "style"
|
||||
|
||||
|
||||
# https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#attributes
|
||||
_add_js_properties(style, "blocking", "media", "nonce", "title")
|
||||
|
||||
|
||||
class script(TextElementBase):
|
||||
tag = "script"
|
||||
|
||||
# Let's add async manually since it's a reserved keyword in Python
|
||||
async_ = js_property("async")
|
||||
|
||||
|
||||
# https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attributes
|
||||
_add_js_properties(
|
||||
script,
|
||||
"blocking",
|
||||
"crossorigin",
|
||||
"defer",
|
||||
"fetchpriority",
|
||||
"integrity",
|
||||
"nomodule",
|
||||
"nonce",
|
||||
"referrerpolicy",
|
||||
"src",
|
||||
"type",
|
||||
)
|
||||
|
||||
|
||||
class p(TextElementBase):
|
||||
tag = "p"
|
||||
|
||||
|
||||
# p tags only have the global attributes ones
|
||||
_add_js_properties(p)
|
||||
|
||||
|
||||
class code(TextElementBase):
|
||||
tag = "code"
|
||||
|
||||
@@ -247,38 +148,6 @@ class code(TextElementBase):
|
||||
_add_js_properties(code)
|
||||
|
||||
|
||||
class pre(TextElementBase):
|
||||
tag = "pre"
|
||||
|
||||
|
||||
# pre tags only have the global attributes ones (others have been deprecated)
|
||||
_add_js_properties(pre)
|
||||
|
||||
|
||||
class strong(TextElementBase):
|
||||
tag = "strong"
|
||||
|
||||
|
||||
# strong tags only have the global attributes ones
|
||||
_add_js_properties(strong)
|
||||
|
||||
|
||||
class small(TextElementBase):
|
||||
tag = "small"
|
||||
|
||||
|
||||
# small tags only have the global attributes ones
|
||||
_add_js_properties(small)
|
||||
|
||||
|
||||
class br(ElementBase):
|
||||
tag = "br"
|
||||
|
||||
|
||||
# br tags only have the global attributes ones (others have been deprecated)
|
||||
_add_js_properties(br)
|
||||
|
||||
|
||||
class div(TextElementBase):
|
||||
tag = "div"
|
||||
|
||||
@@ -352,6 +221,137 @@ _add_js_properties(
|
||||
)
|
||||
|
||||
|
||||
class h1(TextElementBase):
|
||||
tag = "h1"
|
||||
|
||||
|
||||
# https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#attributes
|
||||
# Heading elements only have global attributes
|
||||
_add_js_properties(h1)
|
||||
|
||||
|
||||
class h2(TextElementBase):
|
||||
tag = "h2"
|
||||
|
||||
|
||||
_add_js_properties(h2)
|
||||
|
||||
|
||||
class h3(TextElementBase):
|
||||
tag = "h3"
|
||||
|
||||
|
||||
_add_js_properties(h3)
|
||||
|
||||
|
||||
class h4(TextElementBase):
|
||||
tag = "h4"
|
||||
|
||||
|
||||
_add_js_properties(h4)
|
||||
|
||||
|
||||
class h5(TextElementBase):
|
||||
tag = "h5"
|
||||
|
||||
|
||||
_add_js_properties(h5)
|
||||
|
||||
|
||||
class h6(TextElementBase):
|
||||
tag = "h6"
|
||||
|
||||
|
||||
_add_js_properties(h6)
|
||||
|
||||
|
||||
class link(TextElementBase):
|
||||
tag = "link"
|
||||
|
||||
|
||||
# https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attributes
|
||||
_add_js_properties(
|
||||
link,
|
||||
"as",
|
||||
"crossorigin",
|
||||
"disabled",
|
||||
"fetchpriority",
|
||||
"href",
|
||||
"imagesizes",
|
||||
"imagesrcset",
|
||||
"integrity",
|
||||
"media",
|
||||
"rel",
|
||||
"referrerpolicy",
|
||||
"sizes",
|
||||
"title",
|
||||
"type",
|
||||
)
|
||||
|
||||
|
||||
class p(TextElementBase):
|
||||
tag = "p"
|
||||
|
||||
|
||||
# p tags only have the global attributes ones
|
||||
_add_js_properties(p)
|
||||
|
||||
|
||||
class pre(TextElementBase):
|
||||
tag = "pre"
|
||||
|
||||
|
||||
# pre tags only have the global attributes ones (others have been deprecated)
|
||||
_add_js_properties(pre)
|
||||
|
||||
|
||||
class style(TextElementBase):
|
||||
tag = "style"
|
||||
|
||||
|
||||
# https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#attributes
|
||||
_add_js_properties(style, "blocking", "media", "nonce", "title")
|
||||
|
||||
|
||||
class script(TextElementBase):
|
||||
tag = "script"
|
||||
|
||||
# Let's add async manually since it's a reserved keyword in Python
|
||||
async_ = js_property("async")
|
||||
|
||||
|
||||
# https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attributes
|
||||
_add_js_properties(
|
||||
script,
|
||||
"blocking",
|
||||
"crossorigin",
|
||||
"defer",
|
||||
"fetchpriority",
|
||||
"integrity",
|
||||
"nomodule",
|
||||
"nonce",
|
||||
"referrerpolicy",
|
||||
"src",
|
||||
"type",
|
||||
)
|
||||
|
||||
|
||||
class small(TextElementBase):
|
||||
tag = "small"
|
||||
|
||||
|
||||
# small tags only have the global attributes ones
|
||||
_add_js_properties(small)
|
||||
|
||||
|
||||
class strong(TextElementBase):
|
||||
tag = "strong"
|
||||
|
||||
|
||||
# strong tags only have the global attributes ones
|
||||
_add_js_properties(strong)
|
||||
|
||||
|
||||
# Custom Elements
|
||||
class grid(TextElementBase):
|
||||
tag = "div"
|
||||
|
||||
@@ -2,6 +2,7 @@ from pyscript import when
|
||||
from pyweb import pydom
|
||||
from pyweb.ui.elements import (
|
||||
a,
|
||||
br,
|
||||
button,
|
||||
code,
|
||||
div,
|
||||
@@ -15,6 +16,8 @@ from pyweb.ui.elements import (
|
||||
img,
|
||||
input_,
|
||||
p,
|
||||
small,
|
||||
strong
|
||||
)
|
||||
from pyweb.ui.shoelace import (
|
||||
Alert,
|
||||
@@ -73,6 +76,13 @@ for input_type in [
|
||||
inputs_code.append(f"input_(type='{input_type}')")
|
||||
inputs_code = "\n".join(inputs_code)
|
||||
|
||||
headers_div = div()
|
||||
headers_code = []
|
||||
for header in [h1, h2, h3, h4, h5, h6]:
|
||||
headers_div.append(header(f"{header.tag.upper()} header"))
|
||||
headers_code.append(f"{header.tag}(\"{header.tag.upper()} header\")")
|
||||
headers_code = "\n".join(headers_code)
|
||||
|
||||
kits = {
|
||||
"shoelace": {
|
||||
"Alert": {
|
||||
@@ -146,8 +156,26 @@ when('click', btn)(lambda: window.alert("Clicked!"))
|
||||
},
|
||||
"input": {"instance": inputs_div, "code": inputs_code},
|
||||
"grid": {
|
||||
"instance": grid([div("This is a grid")]),
|
||||
"instance": grid("30% 70%", [
|
||||
div("This is a grid", style={"background-color": "lightblue"}),
|
||||
p("with 2 elements", style={"background-color": "lightyellow"})
|
||||
]),
|
||||
"code": 'grid([div("This is a grid")])',
|
||||
},
|
||||
"headers": {"instance": headers_div, "code": headers_code},
|
||||
"a": {"instance": a("Click here for something awsome", href="https://pyscript.net", target="_blank"),
|
||||
"code": 'a("Click here for something awsome", href="https://pyscript.net", target="_blank")'},
|
||||
"br": {"instance": div([p("This is a paragraph"), br(), p("with a line break")]),
|
||||
"code": 'div([p("This is a paragraph"), br(), p("with a line break")])'},
|
||||
"img": {"instance": img(src="./giphy_winner.gif", style={"max-width": "200px"}),
|
||||
"code": 'img(src="./giphy_winner.gif", style={"max-width": "200px"})'},
|
||||
"code": {"instance": code("print('Hello, World!')"),
|
||||
"code": 'code("print(\'Hello, World!\')")'},
|
||||
"p": {"instance": p("This is a paragraph"),
|
||||
"code": 'p("This is a paragraph")'},
|
||||
"small": {"instance": small("This is a small text"),
|
||||
"code": 'small("This is a small text")'},
|
||||
"strong": {"instance": strong("This is a strong text"),
|
||||
"code": 'strong("This is a strong text")'},
|
||||
},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user