adapt shoelace to latest upates in ui.elements

This commit is contained in:
Fabio Pliger
2024-02-29 14:14:55 -06:00
parent 43c085d56f
commit b9cfe74aa2
4 changed files with 131 additions and 133 deletions

View File

@@ -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...

View File

@@ -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))

View File

@@ -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)

View File

@@ -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")