mirror of
https://github.com/pyscript/pyscript.git
synced 2025-12-22 11:45:28 -05:00
adapt shoelace to latest upates in ui.elements
This commit is contained in:
@@ -6,45 +6,46 @@ from pyweb import JSProperty, js_property, pydom
|
|||||||
from pyweb.ui import elements as el
|
from pyweb.ui import elements as el
|
||||||
|
|
||||||
|
|
||||||
class ShoeBase(pydom.Element):
|
class ShoeBase(el.ElementBase):
|
||||||
tag = "div"
|
tag = "div"
|
||||||
|
|
||||||
def __init__(self, style=None, **kwargs):
|
# def __init__(self, style=None, **kwargs):
|
||||||
super().__init__(document.createElement(self.tag))
|
# super().__init__(document.createElement(self.tag))
|
||||||
|
|
||||||
# set all the style properties provided in input
|
# # set all the style properties provided in input
|
||||||
if style:
|
# if style:
|
||||||
for key, value in style.items():
|
# for key, value in style.items():
|
||||||
self.style[key] = value
|
# self.style[key] = value
|
||||||
|
|
||||||
# IMPORTANT!!! This is used to auto-harvest all input arguments and set them as properties
|
# # IMPORTANT!!! This is used to auto-harvest all input arguments and set them as properties
|
||||||
kwargs["self"] = self
|
# kwargs["self"] = self
|
||||||
self._init_properties(**kwargs)
|
# self._init_properties(**kwargs)
|
||||||
|
|
||||||
@staticmethod
|
# @staticmethod
|
||||||
def _init_properties(**kwargs):
|
# def _init_properties(**kwargs):
|
||||||
self = kwargs.pop("self")
|
# self = kwargs.pop("self")
|
||||||
|
|
||||||
# Look at all the properties of the class and see if they were provided in kwargs
|
# # Look at all the properties of the class and see if they were provided in kwargs
|
||||||
# print(f"Looking for element properties for {self.__class__}...")
|
# # print(f"Looking for element properties for {self.__class__}...")
|
||||||
for attr_name, attr in self.__class__.__dict__.items():
|
# for attr_name, attr in self.__class__.__dict__.items():
|
||||||
# print("Checking", attr_name, isinstance(attr, ShoelaceProperty), attr_name in kwargs)
|
# # print("Checking", attr_name, isinstance(attr, ShoelaceProperty), attr_name in kwargs)
|
||||||
# For each one, actually check if it is a property of the class and set it
|
# # 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:
|
# if isinstance(attr, JSProperty) and attr_name in kwargs:
|
||||||
setattr(self, attr_name, kwargs[attr_name])
|
# setattr(self, attr_name, kwargs[attr_name])
|
||||||
|
|
||||||
|
|
||||||
class TextShoeBase(ShoeBase):
|
class TextShoeBase(el.TextElementBase):
|
||||||
def __init__(self, content, style=None, **kwargs):
|
pass
|
||||||
if not style and getattr(self, "default_style", None):
|
# def __init__(self, content, style=None, **kwargs):
|
||||||
style = self.default_style
|
# if not style and getattr(self, "default_style", None):
|
||||||
|
# style = self.default_style
|
||||||
|
|
||||||
super().__init__(style=style, **kwargs)
|
# super().__init__(style=style, **kwargs)
|
||||||
|
|
||||||
if isinstance(content, pydom.Element):
|
# if isinstance(content, pydom.Element):
|
||||||
self.append(content)
|
# self.append(content)
|
||||||
else:
|
# else:
|
||||||
self._js.innerHTML = content
|
# self._js.innerHTML = content
|
||||||
|
|
||||||
|
|
||||||
class Button(ShoeBase):
|
class Button(ShoeBase):
|
||||||
@@ -197,10 +198,10 @@ class Divider(ShoeBase):
|
|||||||
|
|
||||||
vertical = js_property("vertical")
|
vertical = js_property("vertical")
|
||||||
|
|
||||||
def __init__(self, vertical=None, **kwargs):
|
# def __init__(self, vertical=None, **kwargs):
|
||||||
super().__init__(vertical=vertical, **kwargs)
|
# super().__init__(vertical=vertical, **kwargs)
|
||||||
|
|
||||||
self._init_properties(**locals())
|
# self._init_properties(**locals())
|
||||||
|
|
||||||
|
|
||||||
class BaseMixin(pydom.Element):
|
class BaseMixin(pydom.Element):
|
||||||
@@ -238,61 +239,61 @@ class Input(ShoeBase):
|
|||||||
help_text = js_property("helpText")
|
help_text = js_property("helpText")
|
||||||
value = js_property("value")
|
value = js_property("value")
|
||||||
|
|
||||||
def __init__(
|
# def __init__(
|
||||||
self,
|
# self,
|
||||||
label=None,
|
# label=None,
|
||||||
value=None,
|
# value=None,
|
||||||
type="text",
|
# type="text",
|
||||||
placeholder=None,
|
# placeholder=None,
|
||||||
help_text=None,
|
# help_text=None,
|
||||||
size=None,
|
# size=None,
|
||||||
filled=False,
|
# filled=False,
|
||||||
pill=False,
|
# pill=False,
|
||||||
disabled=False,
|
# disabled=False,
|
||||||
readonly=False,
|
# readonly=False,
|
||||||
autofocus=False,
|
# autofocus=False,
|
||||||
autocomplete=None,
|
# autocomplete=None,
|
||||||
autocorrect=None,
|
# autocorrect=None,
|
||||||
autocapitalize=None,
|
# autocapitalize=None,
|
||||||
spellcheck=None,
|
# spellcheck=None,
|
||||||
min=None,
|
# min=None,
|
||||||
max=None,
|
# max=None,
|
||||||
step=None,
|
# step=None,
|
||||||
name=None,
|
# name=None,
|
||||||
required=False,
|
# required=False,
|
||||||
pattern=None,
|
# pattern=None,
|
||||||
minlength=None,
|
# minlength=None,
|
||||||
maxlength=None,
|
# maxlength=None,
|
||||||
style=None,
|
# style=None,
|
||||||
**kwargs,
|
# **kwargs,
|
||||||
):
|
# ):
|
||||||
super().__init__(
|
# super().__init__(
|
||||||
style=style,
|
# style=style,
|
||||||
label=label,
|
# label=label,
|
||||||
value=value,
|
# value=value,
|
||||||
type=type,
|
# type=type,
|
||||||
placeholder=placeholder,
|
# placeholder=placeholder,
|
||||||
help_text=help_text,
|
# help_text=help_text,
|
||||||
size=size,
|
# size=size,
|
||||||
filled=filled,
|
# filled=filled,
|
||||||
pill=pill,
|
# pill=pill,
|
||||||
disabled=disabled,
|
# disabled=disabled,
|
||||||
readonly=readonly,
|
# readonly=readonly,
|
||||||
autofocus=autofocus,
|
# autofocus=autofocus,
|
||||||
autocomplete=autocomplete,
|
# autocomplete=autocomplete,
|
||||||
autocorrect=autocorrect,
|
# autocorrect=autocorrect,
|
||||||
autocapitalize=autocapitalize,
|
# autocapitalize=autocapitalize,
|
||||||
spellcheck=spellcheck,
|
# spellcheck=spellcheck,
|
||||||
min=min,
|
# min=min,
|
||||||
max=max,
|
# max=max,
|
||||||
step=step,
|
# step=step,
|
||||||
name=name,
|
# name=name,
|
||||||
required=required,
|
# required=required,
|
||||||
pattern=pattern,
|
# pattern=pattern,
|
||||||
minlength=minlength,
|
# minlength=minlength,
|
||||||
maxlength=maxlength,
|
# maxlength=maxlength,
|
||||||
**kwargs,
|
# **kwargs,
|
||||||
)
|
# )
|
||||||
|
|
||||||
|
|
||||||
class Badge(TextShoeBase):
|
class Badge(TextShoeBase):
|
||||||
@@ -650,7 +651,7 @@ class Textarea(ShoeBase):
|
|||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
class Tag(ShoeBase):
|
class Tag(TextShoeBase):
|
||||||
tag = "sl-tag"
|
tag = "sl-tag"
|
||||||
variant = js_property("variant")
|
variant = js_property("variant")
|
||||||
size = js_property("size")
|
size = js_property("size")
|
||||||
@@ -658,20 +659,20 @@ class Tag(ShoeBase):
|
|||||||
removable = js_property("removable")
|
removable = js_property("removable")
|
||||||
update_complete = js_property("updateComplete")
|
update_complete = js_property("updateComplete")
|
||||||
|
|
||||||
def __init__(
|
# def __init__(
|
||||||
self,
|
# self,
|
||||||
content,
|
# content,
|
||||||
variant=None,
|
# variant=None,
|
||||||
size=None,
|
# size=None,
|
||||||
pill=None,
|
# pill=None,
|
||||||
removable=None,
|
# removable=None,
|
||||||
style=None,
|
# style=None,
|
||||||
**kwargs,
|
# **kwargs,
|
||||||
):
|
# ):
|
||||||
super().__init__(**kwargs)
|
# super().__init__(**kwargs)
|
||||||
self._js.textContent = content
|
# self._js.textContent = content
|
||||||
|
|
||||||
self._init_properties(**locals())
|
# self._init_properties(**locals())
|
||||||
|
|
||||||
|
|
||||||
class Range(ShoeBase):
|
class Range(ShoeBase):
|
||||||
@@ -692,28 +693,28 @@ class Range(ShoeBase):
|
|||||||
validation_message = js_property("validationMessage")
|
validation_message = js_property("validationMessage")
|
||||||
update_complete = js_property("updateComplete")
|
update_complete = js_property("updateComplete")
|
||||||
|
|
||||||
def __init__(
|
# def __init__(
|
||||||
self,
|
# self,
|
||||||
name=None,
|
# name=None,
|
||||||
value=None,
|
# value=None,
|
||||||
label=None,
|
# label=None,
|
||||||
help_text=None,
|
# help_text=None,
|
||||||
disabled=None,
|
# disabled=None,
|
||||||
_min=None,
|
# _min=None,
|
||||||
_max=None,
|
# _max=None,
|
||||||
step=None,
|
# step=None,
|
||||||
tooltip=None,
|
# tooltip=None,
|
||||||
tooltip_formatter=None,
|
# tooltip_formatter=None,
|
||||||
form=None,
|
# form=None,
|
||||||
default_value=None,
|
# default_value=None,
|
||||||
validity=None,
|
# validity=None,
|
||||||
validation_message=None,
|
# validation_message=None,
|
||||||
style=None,
|
# style=None,
|
||||||
**kwargs,
|
# **kwargs,
|
||||||
):
|
# ):
|
||||||
super().__init__(**kwargs)
|
# super().__init__(**kwargs)
|
||||||
|
|
||||||
self._init_properties(**locals())
|
# self._init_properties(**locals())
|
||||||
|
|
||||||
|
|
||||||
class RelativeTime(ShoeBase):
|
class RelativeTime(ShoeBase):
|
||||||
@@ -724,8 +725,8 @@ class RelativeTime(ShoeBase):
|
|||||||
sync = js_property("sync")
|
sync = js_property("sync")
|
||||||
update_complete = js_property("updateComplete")
|
update_complete = js_property("updateComplete")
|
||||||
|
|
||||||
def __init__(self, date=None, style=None, **kwargs):
|
# def __init__(self, date=None, style=None, **kwargs):
|
||||||
super().__init__(date=date, style=style, **kwargs)
|
# super().__init__(date=date, style=style, **kwargs)
|
||||||
|
|
||||||
|
|
||||||
# Load resources...
|
# Load resources...
|
||||||
|
|||||||
@@ -236,7 +236,8 @@ print("SHOELACE EXAMPLES", examples.kits["shoelace"])
|
|||||||
for component_label, component in examples.kits["shoelace"].items():
|
for component_label, component in examples.kits["shoelace"].items():
|
||||||
add_component_section(component_label, component, left_div)
|
add_component_section(component_label, component, left_div)
|
||||||
|
|
||||||
|
left_div.append(shoelace.Divider(style={"margin-top": "5px", "margin-bottom": "30px"}))
|
||||||
|
left_div.append(a("Gallery", href="gallery.html", style={"text-align": "left"}))
|
||||||
# ********** ADD LEFT AND MAIN PANEL TO MAIN **********
|
# ********** ADD LEFT AND MAIN PANEL TO MAIN **********
|
||||||
main_grid.append(left_div)
|
main_grid.append(left_div)
|
||||||
main_grid.append(shoelace.Divider(vertical=True))
|
main_grid.append(shoelace.Divider(vertical=True))
|
||||||
|
|||||||
@@ -162,6 +162,9 @@ add_demo(
|
|||||||
source=inspect.getsource(tictactoe),
|
source=inspect.getsource(tictactoe),
|
||||||
)
|
)
|
||||||
|
|
||||||
|
left_div.append(shoelace.Divider(style={"margin-top": "5px", "margin-bottom": "30px"}))
|
||||||
|
left_div.append(el.a("Examples", href="/test/ui/", style={"text-align": "left"}))
|
||||||
|
|
||||||
# ********** CREATE ALL THE LAYOUT **********
|
# ********** CREATE ALL THE LAYOUT **********
|
||||||
grid = el.grid("minmax(100px, 200px) 20px auto", style={"min-height": "100%"})
|
grid = el.grid("minmax(100px, 200px) 20px auto", style={"min-height": "100%"})
|
||||||
grid.append(left_div)
|
grid.append(left_div)
|
||||||
|
|||||||
@@ -342,12 +342,8 @@ class TestElements(PyScriptTest):
|
|||||||
"value": "some value",
|
"value": "some value",
|
||||||
"name": "some name",
|
"name": "some name",
|
||||||
"autofocus": True,
|
"autofocus": True,
|
||||||
"disabled": False,
|
|
||||||
"maxlength": "10",
|
|
||||||
"minlength": "5",
|
|
||||||
"pattern": "[A-Za-z]{3}",
|
"pattern": "[A-Za-z]{3}",
|
||||||
"placeholder": "some placeholder",
|
"placeholder": "some placeholder",
|
||||||
"readonly": False,
|
|
||||||
"required": True,
|
"required": True,
|
||||||
"size": 20,
|
"size": 20,
|
||||||
}
|
}
|
||||||
@@ -540,10 +536,7 @@ class TestElements(PyScriptTest):
|
|||||||
self._create_el_and_basic_asserts("thead", "some text")
|
self._create_el_and_basic_asserts("thead", "some text")
|
||||||
|
|
||||||
def test_time(self):
|
def test_time(self):
|
||||||
properties = {
|
self._create_el_and_basic_asserts("time", "some text")
|
||||||
"datetime": "2021-07-01",
|
|
||||||
}
|
|
||||||
self._create_el_and_basic_asserts("time", "some text", properties=properties)
|
|
||||||
|
|
||||||
def test_title(self):
|
def test_title(self):
|
||||||
self._create_el_and_basic_asserts("title", "some text")
|
self._create_el_and_basic_asserts("title", "some text")
|
||||||
|
|||||||
Reference in New Issue
Block a user