mirror of
https://github.com/pyscript/pyscript.git
synced 2025-12-21 11:15:36 -05:00
UI creation API (#1960)
* add JSProperty to pydom so it can be used to create descriptors mapping to specific JS attributes * add pyweb.ui * fix pyweb imports * fix link and a elements and add a script element * fix imports and add initialization to load resources to shoelace module * new pyweb.ui test folder * remove comments * add Icon to shoelace components * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * use html property rather than accessing _js directly * add markdown suppport * move examples section out of stdlib pyweb to examples.py in the demo itself * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * simplify demo code * improve docstrings * precommit fixes * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * simplify code for main page * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * add load_resources to markdown * add showlace extra style dynamically * precommit * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * add gallery files * add global attributes and dynamic property assignment * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Add shoelace radio component (#1961) * add shoelace radio component * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> * fix type that lead using the the JSDescriptor directly instead of the factory method * add missing marked dependency * refactor gallary to simplify codebase * precommig lint * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * add text attribute to pydom Elements * add global JS attributes to elements and improve demos * lint * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * fix image instantiation on card since the API has changed * add attributes to all classes in elements * lint * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * change example creation functions to take the label and the object directly * fix input name clashing with input keyword * refactor examples to better simplify and automate * fix div clashing names * fix demo left menu width * simplify base elements demo by moving all the examples to the examples module * rename Grid to grid to align to other elements * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * reorg classes order in elements.py and add missing elements to examples * fix issue related to now importing div from pyweb.ui * improve demo * link and fix spelling typo * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Add a bunch more elements (#1966) * Add copy button * Add skeleton and spinner * Add Switch * Add text area * Add more elements * More styling to each component * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Fabio Pliger <fpliger@users.noreply.github.com> * Add radio group (#1963) * add radio group * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Fabio Pliger <fpliger@users.noreply.github.com> * Small tweaks to main demo page (#1962) * Small tweaks to main demo page * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Fabio Pliger <fpliger@users.noreply.github.com> * fix post merge issues * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * fixed issues with renaming Grid to grid, after we merged * lint * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * add multple HTML elements in alphabetical order from abbr to em * fix attributes of some of the elements added in the previous commit and add embed * fix embed attributes and add fieldset * add figcation, figure and form. Also fix ordering of definitoin of img and input_ * add style and lint * wrap up adding all major html elements * fix test failing due to different error message from fake server compared to a real test server * change default docstring associated with all classes dynamically patched * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * lint * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * add pyweb tests * lint * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * add global attributes and change abbr test * fix abbr to inherit from TextElementBase * add address test and improve error messaging when ElementBase gets a bad input as style * change test helper function to be more flexible on attributes and manage content vs non content based elements. Also adds area tests * add test for more elements up to caption * fix canvas and caption as elements that have content and fix name typo on figcaption * fix another typo on figcaption * minor fixes and complete tests for all elements * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * adapt shoelace to latest upates in ui.elements * fix issue with example code not showing created button * move global attributes to base class * replace all the calls to _add_js_properties with defining attributes directly in the classes * finish moving all properties manually on each class * remove _add_js_properties * replace JSProperty with js_property * replace JSProperty with js_property * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * fixed merge conflicts * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * remove js_property and just use JSProperty with name and allow_nones as arguments * fix bug around Element not being able to map global attributes in subclasses * remove js_property and fix references * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * precommit * precommit again * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * lint * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * enable pyweb on micropython * switch examples to micropython * fix pydom issue with micropython, created by the monkeypatch around JsProxy * print micropython version on micropython pydom example * lint and remove of textwrap in stdlib for micropython compatibility * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * added msising attributes on the option Element. Tests are all passing now * fix tests * lint * temp ugly fix for micropython, using the when decorator with a function without arguments * small fixes and improvements to examples * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * fix examples and broken link from the removal of markdown and shoelace from stdlib * lint * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * dynamically change the server address in tests * use the right element in test_a * lint * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * skipping test_audio in CI due to different behavior of fake_server vs a real server, that runs in local tests * add conditional expected_missing_file_errors property to manage different behaviour between local tests and CI (due to fake_server) * lint * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Askat <aaskat@users.noreply.github.com> Co-authored-by: Fábio Rosado <hello@fabiorosado.dev> Co-authored-by: Andrea Giammarchi <andrea.giammarchi@gmail.com>
This commit is contained in:
Fabio Pliger
@@ -37,7 +37,7 @@ const python = [
|
||||
"_path = None",
|
||||
];
|
||||
|
||||
const ignore = new Ignore(python, "./pyweb");
|
||||
const ignore = new Ignore(python, "-");
|
||||
|
||||
const write = (base, literal) => {
|
||||
for (const [key, value] of entries(literal)) {
|
||||
|
||||
@@ -47,13 +47,14 @@ def when(event_type=None, selector=None):
|
||||
wrapper = func
|
||||
|
||||
except AttributeError:
|
||||
# TODO: this is currently an quick hack to get micropython working but we need
|
||||
# to actually properly replace inspect.signature with something else
|
||||
# TODO: this is very ugly hack to get micropython working because inspect.signature
|
||||
# doesn't exist, but we need to actually properly replace inspect.signature.
|
||||
# It may be actually better to not try any magic for now and raise the error
|
||||
def wrapper(*args, **kwargs):
|
||||
try:
|
||||
return func(*args, **kwargs)
|
||||
except TypeError as e:
|
||||
if "takes 0 positional arguments" in str(e):
|
||||
if "takes" in str(e) and "positional arguments" in str(e):
|
||||
return func()
|
||||
|
||||
raise
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
from .pydom import JSProperty
|
||||
from .pydom import dom as pydom
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import inspect
|
||||
|
||||
try:
|
||||
from typing import Any
|
||||
except ImportError:
|
||||
@@ -34,6 +36,23 @@ from pyscript import display, document, window
|
||||
alert = window.alert
|
||||
|
||||
|
||||
class JSProperty:
|
||||
"""JS property descriptor that directly maps to the property with the same
|
||||
name in the underlying JS component."""
|
||||
|
||||
def __init__(self, name: str, allow_nones: bool = False):
|
||||
self.name = name
|
||||
self.allow_nones = allow_nones
|
||||
|
||||
def __get__(self, obj, objtype=None):
|
||||
return getattr(obj._js, self.name)
|
||||
|
||||
def __set__(self, obj, value):
|
||||
if not self.allow_nones and value is None:
|
||||
return
|
||||
setattr(obj._js, self.name, value)
|
||||
|
||||
|
||||
class BaseElement:
|
||||
def __init__(self, js_element):
|
||||
self._js = js_element
|
||||
@@ -104,7 +123,7 @@ class Element(BaseElement):
|
||||
# TODO: this is Pyodide specific for now!!!!!!
|
||||
# if we get passed a JSProxy Element directly we just map it to the
|
||||
# higher level Python element
|
||||
if isinstance(child, JsProxy):
|
||||
if inspect.isclass(JsProxy) and isinstance(child, JsProxy):
|
||||
return self.append(Element(child))
|
||||
|
||||
elif isinstance(child, Element):
|
||||
|
||||
1
pyscript.core/src/stdlib/pyweb/ui/__init__.py
Normal file
1
pyscript.core/src/stdlib/pyweb/ui/__init__.py
Normal file
@@ -0,0 +1 @@
|
||||
from . import elements
|
||||
947
pyscript.core/src/stdlib/pyweb/ui/elements.py
Normal file
947
pyscript.core/src/stdlib/pyweb/ui/elements.py
Normal file
@@ -0,0 +1,947 @@
|
||||
import inspect
|
||||
import sys
|
||||
|
||||
from pyscript import document, when, window
|
||||
from pyweb import JSProperty, pydom
|
||||
|
||||
#: A flag to show if MicroPython is the current Python interpreter.
|
||||
is_micropython = "MicroPython" in sys.version
|
||||
|
||||
|
||||
def getmembers_static(cls):
|
||||
"""Cross-interpreter implementation of inspect.getmembers_static."""
|
||||
|
||||
if is_micropython: # pragma: no cover
|
||||
return [(name, getattr(cls, name)) for name, _ in inspect.getmembers(cls)]
|
||||
|
||||
return inspect.getmembers_static(cls)
|
||||
|
||||
|
||||
class ElementBase(pydom.Element):
|
||||
tag = "div"
|
||||
|
||||
# GLOBAL ATTRIBUTES
|
||||
# These are attribute that all elements have (this list is a subset of the official one)
|
||||
# We are trying to capture the most used ones
|
||||
accesskey = JSProperty("accesskey")
|
||||
autofocus = JSProperty("autofocus")
|
||||
autocapitalize = JSProperty("autocapitalize")
|
||||
className = JSProperty("className")
|
||||
contenteditable = JSProperty("contenteditable")
|
||||
draggable = JSProperty("draggable")
|
||||
enterkeyhint = JSProperty("enterkeyhint")
|
||||
hidden = JSProperty("hidden")
|
||||
id = JSProperty("id")
|
||||
lang = JSProperty("lang")
|
||||
nonce = JSProperty("nonce")
|
||||
part = JSProperty("part")
|
||||
popover = JSProperty("popover")
|
||||
slot = JSProperty("slot")
|
||||
spellcheck = JSProperty("spellcheck")
|
||||
tabindex = JSProperty("tabindex")
|
||||
title = JSProperty("title")
|
||||
translate = JSProperty("translate")
|
||||
virtualkeyboardpolicy = JSProperty("virtualkeyboardpolicy")
|
||||
|
||||
def __init__(self, style=None, **kwargs):
|
||||
super().__init__(document.createElement(self.tag))
|
||||
|
||||
# set all the style properties provided in input
|
||||
if isinstance(style, dict):
|
||||
for key, value in style.items():
|
||||
self.style[key] = value
|
||||
elif style is None:
|
||||
pass
|
||||
else:
|
||||
raise ValueError(
|
||||
f"Style should be a dictionary, received {style} (type {type(style)}) instead."
|
||||
)
|
||||
|
||||
# IMPORTANT!!! This is used to auto-harvest all input arguments and set them as properties
|
||||
self._init_properties(**kwargs)
|
||||
|
||||
def _init_properties(self, **kwargs):
|
||||
"""Set all the properties (of type JSProperties) provided in input as properties
|
||||
of the class instance.
|
||||
|
||||
Args:
|
||||
**kwargs: The properties to set
|
||||
"""
|
||||
# Look at all the properties of the class and see if they were provided in kwargs
|
||||
for attr_name, attr in getmembers_static(self.__class__):
|
||||
# For each one, actually check if it is a property of the class and set it
|
||||
if isinstance(attr, JSProperty) and attr_name in kwargs:
|
||||
try:
|
||||
setattr(self, attr_name, kwargs[attr_name])
|
||||
except Exception as e:
|
||||
print(f"Error setting {attr_name} to {kwargs[attr_name]}: {e}")
|
||||
raise
|
||||
|
||||
|
||||
class TextElementBase(ElementBase):
|
||||
def __init__(self, content=None, style=None, **kwargs):
|
||||
super().__init__(style=style, **kwargs)
|
||||
|
||||
# If it's an element, append the element
|
||||
if isinstance(content, pydom.Element):
|
||||
self.append(content)
|
||||
# If it's a list of elements
|
||||
elif isinstance(content, list):
|
||||
for item in content:
|
||||
self.append(item)
|
||||
# If the content wasn't set just ignore
|
||||
elif content is None:
|
||||
pass
|
||||
else:
|
||||
# Otherwise, set content as the html of the element
|
||||
self.html = content
|
||||
|
||||
|
||||
# IMPORTANT: For all HTML components defined below, we are not mapping all
|
||||
# available attributes, just the global and the most common ones.
|
||||
# If you need to access a specific attribute, you can always use the `_js.<attribute>`
|
||||
class a(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"""
|
||||
|
||||
tag = "a"
|
||||
|
||||
download = JSProperty("download")
|
||||
href = JSProperty("href")
|
||||
referrerpolicy = JSProperty("referrerpolicy")
|
||||
rel = JSProperty("rel")
|
||||
target = JSProperty("target")
|
||||
type = JSProperty("type")
|
||||
|
||||
|
||||
class abbr(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr"""
|
||||
|
||||
tag = "abbr"
|
||||
|
||||
|
||||
class address(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address"""
|
||||
|
||||
tag = "address"
|
||||
|
||||
|
||||
class area(ElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area"""
|
||||
|
||||
tag = "area"
|
||||
|
||||
alt = JSProperty("alt")
|
||||
coords = JSProperty("coords")
|
||||
download = JSProperty("download")
|
||||
href = JSProperty("href")
|
||||
ping = JSProperty("ping")
|
||||
referrerpolicy = JSProperty("referrerpolicy")
|
||||
rel = JSProperty("rel")
|
||||
shape = JSProperty("shape")
|
||||
target = JSProperty("target")
|
||||
|
||||
|
||||
class article(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article"""
|
||||
|
||||
tag = "article"
|
||||
|
||||
|
||||
class aside(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside"""
|
||||
|
||||
tag = "aside"
|
||||
|
||||
|
||||
class audio(ElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio"""
|
||||
|
||||
tag = "audio"
|
||||
|
||||
autoplay = JSProperty("autoplay")
|
||||
controls = JSProperty("controls")
|
||||
controlslist = JSProperty("controlslist")
|
||||
crossorigin = JSProperty("crossorigin")
|
||||
disableremoteplayback = JSProperty("disableremoteplayback")
|
||||
loop = JSProperty("loop")
|
||||
muted = JSProperty("muted")
|
||||
preload = JSProperty("preload")
|
||||
src = JSProperty("src")
|
||||
|
||||
|
||||
class b(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b"""
|
||||
|
||||
tag = "b"
|
||||
|
||||
|
||||
class blockquote(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"""
|
||||
|
||||
tag = "blockquote"
|
||||
|
||||
cite = JSProperty("cite")
|
||||
|
||||
|
||||
class br(ElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br"""
|
||||
|
||||
tag = "br"
|
||||
|
||||
|
||||
class button(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"""
|
||||
|
||||
tag = "button"
|
||||
|
||||
autofocus = JSProperty("autofocus")
|
||||
disabled = JSProperty("disabled")
|
||||
form = JSProperty("form")
|
||||
formaction = JSProperty("formaction")
|
||||
formenctype = JSProperty("formenctype")
|
||||
formmethod = JSProperty("formmethod")
|
||||
formnovalidate = JSProperty("formnovalidate")
|
||||
formtarget = JSProperty("formtarget")
|
||||
name = JSProperty("name")
|
||||
type = JSProperty("type")
|
||||
value = JSProperty("value")
|
||||
|
||||
|
||||
class canvas(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas"""
|
||||
|
||||
tag = "canvas"
|
||||
|
||||
height = JSProperty("height")
|
||||
width = JSProperty("width")
|
||||
|
||||
|
||||
class caption(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption"""
|
||||
|
||||
tag = "caption"
|
||||
|
||||
|
||||
class cite(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite"""
|
||||
|
||||
tag = "cite"
|
||||
|
||||
|
||||
class code(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code"""
|
||||
|
||||
tag = "code"
|
||||
|
||||
|
||||
class data(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data"""
|
||||
|
||||
tag = "data"
|
||||
|
||||
value = JSProperty("value")
|
||||
|
||||
|
||||
class datalist(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist"""
|
||||
|
||||
tag = "datalist"
|
||||
|
||||
|
||||
class dd(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd"""
|
||||
|
||||
tag = "dd"
|
||||
|
||||
|
||||
class del_(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del"""
|
||||
|
||||
tag = "del"
|
||||
|
||||
cite = JSProperty("cite")
|
||||
datetime = JSProperty("datetime")
|
||||
|
||||
|
||||
class details(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details"""
|
||||
|
||||
tag = "details"
|
||||
|
||||
open = JSProperty("open")
|
||||
|
||||
|
||||
class dialog(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"""
|
||||
|
||||
tag = "dialog"
|
||||
|
||||
open = JSProperty("open")
|
||||
|
||||
|
||||
class div(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"""
|
||||
|
||||
tag = "div"
|
||||
|
||||
|
||||
class dl(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl"""
|
||||
|
||||
tag = "dl"
|
||||
|
||||
value = JSProperty("value")
|
||||
|
||||
|
||||
class dt(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt"""
|
||||
|
||||
tag = "dt"
|
||||
|
||||
|
||||
class em(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em"""
|
||||
|
||||
tag = "em"
|
||||
|
||||
|
||||
class embed(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed"""
|
||||
|
||||
tag = "embed"
|
||||
|
||||
height = JSProperty("height")
|
||||
src = JSProperty("src")
|
||||
type = JSProperty("type")
|
||||
width = JSProperty("width")
|
||||
|
||||
|
||||
class fieldset(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset"""
|
||||
|
||||
tag = "fieldset"
|
||||
|
||||
disabled = JSProperty("disabled")
|
||||
form = JSProperty("form")
|
||||
name = JSProperty("name")
|
||||
|
||||
|
||||
class figcaption(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption"""
|
||||
|
||||
tag = "figcaption"
|
||||
|
||||
|
||||
class figure(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure"""
|
||||
|
||||
tag = "figure"
|
||||
|
||||
|
||||
class footer(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer"""
|
||||
|
||||
tag = "footer"
|
||||
|
||||
|
||||
class form(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form"""
|
||||
|
||||
tag = "form"
|
||||
|
||||
accept_charset = JSProperty("accept-charset")
|
||||
action = JSProperty("action")
|
||||
autocapitalize = JSProperty("autocapitalize")
|
||||
autocomplete = JSProperty("autocomplete")
|
||||
enctype = JSProperty("enctype")
|
||||
name = JSProperty("name")
|
||||
method = JSProperty("method")
|
||||
nonvalidate = JSProperty("nonvalidate")
|
||||
rel = JSProperty("rel")
|
||||
target = JSProperty("target")
|
||||
|
||||
|
||||
class h1(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1"""
|
||||
|
||||
tag = "h1"
|
||||
|
||||
|
||||
class h2(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2"""
|
||||
|
||||
tag = "h2"
|
||||
|
||||
|
||||
class h3(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h3"""
|
||||
|
||||
tag = "h3"
|
||||
|
||||
|
||||
class h4(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h4"""
|
||||
|
||||
tag = "h4"
|
||||
|
||||
|
||||
class h5(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h5"""
|
||||
|
||||
tag = "h5"
|
||||
|
||||
|
||||
class h6(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h6"""
|
||||
|
||||
tag = "h6"
|
||||
|
||||
|
||||
class header(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header"""
|
||||
|
||||
tag = "header"
|
||||
|
||||
|
||||
class hgroup(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup"""
|
||||
|
||||
tag = "hgroup"
|
||||
|
||||
|
||||
class hr(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr"""
|
||||
|
||||
tag = "hr"
|
||||
|
||||
|
||||
class i(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i"""
|
||||
|
||||
tag = "i"
|
||||
|
||||
|
||||
class iframe(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe"""
|
||||
|
||||
tag = "iframe"
|
||||
|
||||
allow = JSProperty("allow")
|
||||
allowfullscreen = JSProperty("allowfullscreen")
|
||||
height = JSProperty("height")
|
||||
loading = JSProperty("loading")
|
||||
name = JSProperty("name")
|
||||
referrerpolicy = JSProperty("referrerpolicy")
|
||||
sandbox = JSProperty("sandbox")
|
||||
src = JSProperty("src")
|
||||
srcdoc = JSProperty("srcdoc")
|
||||
width = JSProperty("width")
|
||||
|
||||
|
||||
class img(ElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img"""
|
||||
|
||||
tag = "img"
|
||||
|
||||
alt = JSProperty("alt")
|
||||
crossorigin = JSProperty("crossorigin")
|
||||
decoding = JSProperty("decoding")
|
||||
fetchpriority = JSProperty("fetchpriority")
|
||||
height = JSProperty("height")
|
||||
ismap = JSProperty("ismap")
|
||||
loading = JSProperty("loading")
|
||||
referrerpolicy = JSProperty("referrerpolicy")
|
||||
sizes = JSProperty("sizes")
|
||||
src = JSProperty("src")
|
||||
width = JSProperty("width")
|
||||
|
||||
|
||||
# NOTE: Input is a reserved keyword in Python, so we use input_ instead
|
||||
class input_(ElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"""
|
||||
|
||||
tag = "input"
|
||||
|
||||
accept = JSProperty("accept")
|
||||
alt = JSProperty("alt")
|
||||
autofocus = JSProperty("autofocus")
|
||||
capture = JSProperty("capture")
|
||||
checked = JSProperty("checked")
|
||||
dirname = JSProperty("dirname")
|
||||
disabled = JSProperty("disabled")
|
||||
form = JSProperty("form")
|
||||
formaction = JSProperty("formaction")
|
||||
formenctype = JSProperty("formenctype")
|
||||
formmethod = JSProperty("formmethod")
|
||||
formnovalidate = JSProperty("formnovalidate")
|
||||
formtarget = JSProperty("formtarget")
|
||||
height = JSProperty("height")
|
||||
list = JSProperty("list")
|
||||
max = JSProperty("max")
|
||||
maxlength = JSProperty("maxlength")
|
||||
min = JSProperty("min")
|
||||
minlength = JSProperty("minlength")
|
||||
multiple = JSProperty("multiple")
|
||||
name = JSProperty("name")
|
||||
pattern = JSProperty("pattern")
|
||||
placeholder = JSProperty("placeholder")
|
||||
popovertarget = JSProperty("popovertarget")
|
||||
popovertargetaction = JSProperty("popovertargetaction")
|
||||
readonly = JSProperty("readonly")
|
||||
required = JSProperty("required")
|
||||
size = JSProperty("size")
|
||||
src = JSProperty("src")
|
||||
step = JSProperty("step")
|
||||
type = JSProperty("type")
|
||||
value = JSProperty("value")
|
||||
width = JSProperty("width")
|
||||
|
||||
|
||||
class ins(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins"""
|
||||
|
||||
tag = "ins"
|
||||
|
||||
cite = JSProperty("cite")
|
||||
datetime = JSProperty("datetime")
|
||||
|
||||
|
||||
class kbd(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd"""
|
||||
|
||||
tag = "kbd"
|
||||
|
||||
|
||||
class label(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label"""
|
||||
|
||||
tag = "label"
|
||||
|
||||
for_ = JSProperty("for")
|
||||
|
||||
|
||||
class legend(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend"""
|
||||
|
||||
tag = "legend"
|
||||
|
||||
|
||||
class li(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li"""
|
||||
|
||||
tag = "li"
|
||||
|
||||
value = JSProperty("value")
|
||||
|
||||
|
||||
class link(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link"""
|
||||
|
||||
tag = "link"
|
||||
|
||||
as_ = JSProperty("as")
|
||||
crossorigin = JSProperty("crossorigin")
|
||||
disabled = JSProperty("disabled")
|
||||
fetchpriority = JSProperty("fetchpriority")
|
||||
href = JSProperty("href")
|
||||
imagesizes = JSProperty("imagesizes")
|
||||
imagesrcset = JSProperty("imagesrcset")
|
||||
integrity = JSProperty("integrity")
|
||||
media = JSProperty("media")
|
||||
rel = JSProperty("rel")
|
||||
referrerpolicy = JSProperty("referrerpolicy")
|
||||
sizes = JSProperty("sizes")
|
||||
title = JSProperty("title")
|
||||
type = JSProperty("type")
|
||||
|
||||
|
||||
class main(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main"""
|
||||
|
||||
tag = "main"
|
||||
|
||||
|
||||
class map_(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map"""
|
||||
|
||||
tag = "map"
|
||||
|
||||
name = JSProperty("name")
|
||||
|
||||
|
||||
class mark(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark"""
|
||||
|
||||
tag = "mark"
|
||||
|
||||
|
||||
class menu(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu"""
|
||||
|
||||
tag = "menu"
|
||||
|
||||
|
||||
class meter(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter"""
|
||||
|
||||
tag = "meter"
|
||||
|
||||
form = JSProperty("form")
|
||||
high = JSProperty("high")
|
||||
low = JSProperty("low")
|
||||
max = JSProperty("max")
|
||||
min = JSProperty("min")
|
||||
optimum = JSProperty("optimum")
|
||||
value = JSProperty("value")
|
||||
|
||||
|
||||
class nav(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav"""
|
||||
|
||||
tag = "nav"
|
||||
|
||||
|
||||
class object_(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object"""
|
||||
|
||||
tag = "object"
|
||||
|
||||
data = JSProperty("data")
|
||||
form = JSProperty("form")
|
||||
height = JSProperty("height")
|
||||
name = JSProperty("name")
|
||||
type = JSProperty("type")
|
||||
usemap = JSProperty("usemap")
|
||||
width = JSProperty("width")
|
||||
|
||||
|
||||
class ol(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol"""
|
||||
|
||||
tag = "ol"
|
||||
|
||||
reversed = JSProperty("reversed")
|
||||
start = JSProperty("start")
|
||||
type = JSProperty("type")
|
||||
|
||||
|
||||
class optgroup(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup"""
|
||||
|
||||
tag = "optgroup"
|
||||
|
||||
disabled = JSProperty("disabled")
|
||||
label = JSProperty("label")
|
||||
|
||||
|
||||
class option(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option"""
|
||||
|
||||
tag = "option"
|
||||
|
||||
disabled = JSProperty("value")
|
||||
label = JSProperty("label")
|
||||
selected = JSProperty("selected")
|
||||
value = JSProperty("value")
|
||||
|
||||
|
||||
class output(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output"""
|
||||
|
||||
tag = "output"
|
||||
|
||||
for_ = JSProperty("for")
|
||||
form = JSProperty("form")
|
||||
name = JSProperty("name")
|
||||
|
||||
|
||||
class p(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p"""
|
||||
|
||||
tag = "p"
|
||||
|
||||
|
||||
class picture(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture"""
|
||||
|
||||
tag = "picture"
|
||||
|
||||
|
||||
class pre(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre"""
|
||||
|
||||
tag = "pre"
|
||||
|
||||
|
||||
class progress(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress"""
|
||||
|
||||
tag = "progress"
|
||||
|
||||
max = JSProperty("max")
|
||||
value = JSProperty("value")
|
||||
|
||||
|
||||
class q(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"""
|
||||
|
||||
tag = "q"
|
||||
|
||||
cite = JSProperty("cite")
|
||||
|
||||
|
||||
class s(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s"""
|
||||
|
||||
tag = "s"
|
||||
|
||||
|
||||
class script(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script"""
|
||||
|
||||
tag = "script"
|
||||
|
||||
# Let's add async manually since it's a reserved keyword in Python
|
||||
async_ = JSProperty("async")
|
||||
blocking = JSProperty("blocking")
|
||||
crossorigin = JSProperty("crossorigin")
|
||||
defer = JSProperty("defer")
|
||||
fetchpriority = JSProperty("fetchpriority")
|
||||
integrity = JSProperty("integrity")
|
||||
nomodule = JSProperty("nomodule")
|
||||
nonce = JSProperty("nonce")
|
||||
referrerpolicy = JSProperty("referrerpolicy")
|
||||
src = JSProperty("src")
|
||||
type = JSProperty("type")
|
||||
|
||||
|
||||
class section(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section"""
|
||||
|
||||
tag = "section"
|
||||
|
||||
|
||||
class select(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select"""
|
||||
|
||||
tag = "select"
|
||||
|
||||
|
||||
class small(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small"""
|
||||
|
||||
tag = "small"
|
||||
|
||||
|
||||
class source(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source"""
|
||||
|
||||
tag = "source"
|
||||
|
||||
media = JSProperty("media")
|
||||
sizes = JSProperty("sizes")
|
||||
src = JSProperty("src")
|
||||
srcset = JSProperty("srcset")
|
||||
type = JSProperty("type")
|
||||
|
||||
|
||||
class span(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span"""
|
||||
|
||||
tag = "span"
|
||||
|
||||
|
||||
class strong(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong"""
|
||||
|
||||
tag = "strong"
|
||||
|
||||
|
||||
class style(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style"""
|
||||
|
||||
tag = "style"
|
||||
|
||||
blocking = JSProperty("blocking")
|
||||
media = JSProperty("media")
|
||||
nonce = JSProperty("nonce")
|
||||
title = JSProperty("title")
|
||||
|
||||
|
||||
class sub(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub"""
|
||||
|
||||
tag = "sub"
|
||||
|
||||
|
||||
class summary(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary"""
|
||||
|
||||
tag = "summary"
|
||||
|
||||
|
||||
class sup(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup"""
|
||||
|
||||
tag = "sup"
|
||||
|
||||
|
||||
class table(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table"""
|
||||
|
||||
tag = "table"
|
||||
|
||||
|
||||
class tbody(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody"""
|
||||
|
||||
tag = "tbody"
|
||||
|
||||
|
||||
class td(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td"""
|
||||
|
||||
tag = "td"
|
||||
|
||||
colspan = JSProperty("colspan")
|
||||
headers = JSProperty("headers")
|
||||
rowspan = JSProperty("rowspan")
|
||||
|
||||
|
||||
class template(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template"""
|
||||
|
||||
tag = "template"
|
||||
|
||||
shadowrootmode = JSProperty("shadowrootmode")
|
||||
|
||||
|
||||
class textarea(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea"""
|
||||
|
||||
tag = "textarea"
|
||||
|
||||
autocapitalize = JSProperty("autocapitalize")
|
||||
autocomplete = JSProperty("autocomplete")
|
||||
autofocus = JSProperty("autofocus")
|
||||
cols = JSProperty("cols")
|
||||
dirname = JSProperty("dirname")
|
||||
disabled = JSProperty("disabled")
|
||||
form = JSProperty("form")
|
||||
maxlength = JSProperty("maxlength")
|
||||
minlength = JSProperty("minlength")
|
||||
name = JSProperty("name")
|
||||
placeholder = JSProperty("placeholder")
|
||||
readonly = JSProperty("readonly")
|
||||
required = JSProperty("required")
|
||||
rows = JSProperty("rows")
|
||||
spellcheck = JSProperty("spellcheck")
|
||||
wrap = JSProperty("wrap")
|
||||
|
||||
|
||||
class tfoot(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot"""
|
||||
|
||||
tag = "tfoot"
|
||||
|
||||
|
||||
class th(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th"""
|
||||
|
||||
tag = "th"
|
||||
|
||||
|
||||
class thead(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead"""
|
||||
|
||||
tag = "thead"
|
||||
|
||||
|
||||
class time(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time"""
|
||||
|
||||
tag = "time"
|
||||
|
||||
datetime = JSProperty("datetime")
|
||||
|
||||
|
||||
class title(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title"""
|
||||
|
||||
tag = "title"
|
||||
|
||||
|
||||
class tr(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr"""
|
||||
|
||||
tag = "tr"
|
||||
|
||||
abbr = JSProperty("abbr")
|
||||
colspan = JSProperty("colspan")
|
||||
headers = JSProperty("headers")
|
||||
rowspan = JSProperty("rowspan")
|
||||
scope = JSProperty("scope")
|
||||
|
||||
|
||||
class track(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track"""
|
||||
|
||||
tag = "track"
|
||||
|
||||
default = JSProperty("default")
|
||||
kind = JSProperty("kind")
|
||||
label = JSProperty("label")
|
||||
src = JSProperty("src")
|
||||
srclang = JSProperty("srclang")
|
||||
|
||||
|
||||
class u(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u"""
|
||||
|
||||
tag = "u"
|
||||
|
||||
|
||||
class ul(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul"""
|
||||
|
||||
tag = "ul"
|
||||
|
||||
|
||||
class var(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var"""
|
||||
|
||||
tag = "var"
|
||||
|
||||
|
||||
class video(TextElementBase):
|
||||
"""Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video"""
|
||||
|
||||
tag = "video"
|
||||
|
||||
autoplay = JSProperty("autoplay")
|
||||
controls = JSProperty("controls")
|
||||
crossorigin = JSProperty("crossorigin")
|
||||
disablepictureinpicture = JSProperty("disablepictureinpicture")
|
||||
disableremoteplayback = JSProperty("disableremoteplayback")
|
||||
height = JSProperty("height")
|
||||
loop = JSProperty("loop")
|
||||
muted = JSProperty("muted")
|
||||
playsinline = JSProperty("playsinline")
|
||||
poster = JSProperty("poster")
|
||||
preload = JSProperty("preload")
|
||||
src = JSProperty("src")
|
||||
width = JSProperty("width")
|
||||
|
||||
|
||||
# Custom Elements
|
||||
class grid(TextElementBase):
|
||||
tag = "div"
|
||||
|
||||
def __init__(self, layout, content=None, gap=None, **kwargs):
|
||||
super().__init__(content, **kwargs)
|
||||
self.style["display"] = "grid"
|
||||
self.style["grid-template-columns"] = layout
|
||||
|
||||
# TODO: This should be a property
|
||||
if not gap is None:
|
||||
self.style["gap"] = gap
|
||||
Reference in New Issue
Block a user