mirror of
https://github.com/pyscript/pyscript.git
synced 2026-05-09 12:00:58 -04:00
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>
This commit is contained in:
Fábio Rosado
@@ -390,6 +390,295 @@ class Radio(ShoeBase):
|
||||
)
|
||||
|
||||
|
||||
class CopyButton(ShoeBase):
|
||||
tag = "sl-copy-button"
|
||||
value = js_property("value")
|
||||
_from = js_property("from")
|
||||
disabled = js_property("disabled")
|
||||
copy_label = js_property("copyLabel")
|
||||
success_label = js_property("successLabel")
|
||||
error_label = js_property("errorLabel")
|
||||
feedback_duration = js_property("feedbackDuration")
|
||||
tooltip_placement = js_property("tooltipPlacement")
|
||||
hoist = js_property("hoist")
|
||||
update_complete = js_property("updateComplete")
|
||||
|
||||
def __init__(
|
||||
self,
|
||||
value=None,
|
||||
_from=None,
|
||||
disabled=None,
|
||||
copy_label=None,
|
||||
success_label=None,
|
||||
error_label=None,
|
||||
feedback_duration=None,
|
||||
tooltip_placement=None,
|
||||
hoist=None,
|
||||
style=None,
|
||||
**kwargs,
|
||||
):
|
||||
super().__init__(
|
||||
value=value,
|
||||
_from=_from,
|
||||
disabled=disabled,
|
||||
copy_label=copy_label,
|
||||
success_label=success_label,
|
||||
error_label=error_label,
|
||||
feedback_duration=feedback_duration,
|
||||
tooltip_placement=tooltip_placement,
|
||||
hoist=hoist,
|
||||
style=style,
|
||||
**kwargs,
|
||||
)
|
||||
|
||||
|
||||
class Skeleton(ShoeBase):
|
||||
tag = "sl-skeleton"
|
||||
effect = js_property("effect")
|
||||
update_complete = js_property("updateComplete")
|
||||
|
||||
def __init__(self, effect=None, style=None, **kwargs):
|
||||
super().__init__(effect=effect, style=style, **kwargs)
|
||||
|
||||
|
||||
class Spinner(ShoeBase):
|
||||
tag = "sl-spinner"
|
||||
update_complete = js_property("updateComplete")
|
||||
|
||||
def __init__(self, style=None, **kwargs):
|
||||
super().__init__(style=style, **kwargs)
|
||||
|
||||
|
||||
# # TODO: Need to make sure we can pass elements in it.
|
||||
# class SplitPanel(ShoeBase):
|
||||
# tag = "sl-split-panel"
|
||||
# content = js_property("content")
|
||||
# position = js_property("position")
|
||||
# position_in_pixels = js_property("positionInPixels")
|
||||
# vertical = js_property("vertical")
|
||||
# disabled = js_property("disabled")
|
||||
# primary = js_property("primary")
|
||||
# snap = js_property("snap")
|
||||
# snap_threshold = js_property("snapThreshold")
|
||||
# update_complete = js_property("updateComplete")
|
||||
|
||||
# def __init__(self, content, position=None, position_in_pixels=None, vertical=None, disabled=None, primary=None, snap=None, snap_threshold=None, style=None, **kwargs):
|
||||
# super().__init__(**kwargs)
|
||||
# self._js.InnerHTML = content
|
||||
|
||||
# self._init_properties(**locals())
|
||||
|
||||
|
||||
class Switch(ShoeBase):
|
||||
tag = "sl-switch"
|
||||
name = js_property("name")
|
||||
value = js_property("value")
|
||||
size = js_property("size")
|
||||
disabled = js_property("disabled")
|
||||
checked = js_property("checked")
|
||||
default_checked = js_property("defaultChecked")
|
||||
form = js_property("form")
|
||||
required = js_property("required")
|
||||
validity = js_property("validity")
|
||||
validation_message = js_property("validationMessage")
|
||||
update_complete = js_property("updateComplete")
|
||||
|
||||
def __init__(
|
||||
self,
|
||||
name=None,
|
||||
value=None,
|
||||
size=None,
|
||||
disabled=None,
|
||||
checked=None,
|
||||
default_checked=None,
|
||||
form=None,
|
||||
required=None,
|
||||
validity=None,
|
||||
validation_message=None,
|
||||
style=None,
|
||||
**kwargs,
|
||||
):
|
||||
super().__init__(
|
||||
name=name,
|
||||
value=value,
|
||||
size=size,
|
||||
disabled=disabled,
|
||||
checked=checked,
|
||||
default_checked=default_checked,
|
||||
form=form,
|
||||
required=required,
|
||||
validity=validity,
|
||||
validation_message=validation_message,
|
||||
style=style,
|
||||
**kwargs,
|
||||
)
|
||||
|
||||
|
||||
class Textarea(ShoeBase):
|
||||
tag = "sl-textarea"
|
||||
name = js_property("name")
|
||||
value = js_property("value")
|
||||
size = js_property("size")
|
||||
filled = js_property("filled")
|
||||
label = js_property("label")
|
||||
help_text = js_property("helpText")
|
||||
placeholder = js_property("placeholder")
|
||||
rows = js_property("rows")
|
||||
resize = js_property("resize")
|
||||
disabled = js_property("disabled")
|
||||
readonly = js_property("readonly")
|
||||
form = js_property("form")
|
||||
required = js_property("required")
|
||||
min_length = js_property("minLength")
|
||||
max_length = js_property("maxLength")
|
||||
autocalpitalize = js_property("autocapitalize")
|
||||
autocomplete = js_property("autocomplete")
|
||||
autofocus = js_property("autofocus")
|
||||
enterkeyhint = js_property("enterkeyhint")
|
||||
spellcheck = js_property("spellcheck")
|
||||
inputmode = js_property("inputmode")
|
||||
default_value = js_property("defaultValue")
|
||||
validity = js_property("validity")
|
||||
validatio_message = js_property("validationMessage")
|
||||
update_complete = js_property("updateComplete")
|
||||
|
||||
def __init__(
|
||||
self,
|
||||
name=None,
|
||||
value=None,
|
||||
size=None,
|
||||
filled=None,
|
||||
label=None,
|
||||
help_text=None,
|
||||
placeholder=None,
|
||||
rows=None,
|
||||
resize=None,
|
||||
disabled=None,
|
||||
readonly=None,
|
||||
form=None,
|
||||
required=None,
|
||||
min_length=None,
|
||||
max_length=None,
|
||||
autocapitalize=None,
|
||||
autocomplete=None,
|
||||
autofocus=None,
|
||||
enterkeyhint=None,
|
||||
spellcheck=None,
|
||||
inputmode=None,
|
||||
default_value=None,
|
||||
validity=None,
|
||||
validation_message=None,
|
||||
style=None,
|
||||
**kwargs,
|
||||
):
|
||||
super().__init__(
|
||||
name=name,
|
||||
value=value,
|
||||
size=size,
|
||||
filled=filled,
|
||||
label=label,
|
||||
help_text=help_text,
|
||||
placeholder=placeholder,
|
||||
rows=rows,
|
||||
resize=resize,
|
||||
disabled=disabled,
|
||||
readonly=readonly,
|
||||
form=form,
|
||||
required=required,
|
||||
min_length=min_length,
|
||||
max_length=max_length,
|
||||
autocapitalize=autocapitalize,
|
||||
autocomplete=autocomplete,
|
||||
autofocus=autofocus,
|
||||
enterkeyhint=enterkeyhint,
|
||||
spellcheck=spellcheck,
|
||||
inputmode=inputmode,
|
||||
default_value=default_value,
|
||||
validity=validity,
|
||||
validation_message=validation_message,
|
||||
style=style,
|
||||
**kwargs,
|
||||
)
|
||||
|
||||
|
||||
class Tag(ShoeBase):
|
||||
tag = "sl-tag"
|
||||
variant = js_property("variant")
|
||||
size = js_property("size")
|
||||
pill = js_property("pill")
|
||||
removable = js_property("removable")
|
||||
update_complete = js_property("updateComplete")
|
||||
|
||||
def __init__(
|
||||
self,
|
||||
content,
|
||||
variant=None,
|
||||
size=None,
|
||||
pill=None,
|
||||
removable=None,
|
||||
style=None,
|
||||
**kwargs,
|
||||
):
|
||||
super().__init__(**kwargs)
|
||||
self._js.textContent = content
|
||||
|
||||
self._init_properties(**locals())
|
||||
|
||||
|
||||
class Range(ShoeBase):
|
||||
tag = "sl-range"
|
||||
name = js_property("name")
|
||||
value = js_property("value")
|
||||
label = js_property("label")
|
||||
help_text = js_property("helpText")
|
||||
disabled = js_property("disabled")
|
||||
_min = js_property("min")
|
||||
_max = js_property("max")
|
||||
step = js_property("step")
|
||||
tooltip = js_property("tooltip")
|
||||
tooltip_formatter = js_property("tooltipFormatter")
|
||||
form = js_property("form")
|
||||
default_value = js_property("defaultValue")
|
||||
validity = js_property("validity")
|
||||
validation_message = js_property("validationMessage")
|
||||
update_complete = js_property("updateComplete")
|
||||
|
||||
def __init__(
|
||||
self,
|
||||
name=None,
|
||||
value=None,
|
||||
label=None,
|
||||
help_text=None,
|
||||
disabled=None,
|
||||
_min=None,
|
||||
_max=None,
|
||||
step=None,
|
||||
tooltip=None,
|
||||
tooltip_formatter=None,
|
||||
form=None,
|
||||
default_value=None,
|
||||
validity=None,
|
||||
validation_message=None,
|
||||
style=None,
|
||||
**kwargs,
|
||||
):
|
||||
super().__init__(**kwargs)
|
||||
|
||||
self._init_properties(**locals())
|
||||
|
||||
|
||||
class RelativeTime(ShoeBase):
|
||||
tag = "sl-relative-time"
|
||||
date = js_property("date")
|
||||
_format = js_property("format")
|
||||
numeric = js_property("numeric")
|
||||
sync = js_property("sync")
|
||||
update_complete = js_property("updateComplete")
|
||||
|
||||
def __init__(self, date=None, style=None, **kwargs):
|
||||
super().__init__(date=date, style=style, **kwargs)
|
||||
|
||||
|
||||
# Load resources...
|
||||
CSS = """
|
||||
.card-overview {
|
||||
|
||||
@@ -24,12 +24,20 @@ from pyweb.ui.shoelace import (
|
||||
Alert,
|
||||
Button,
|
||||
Card,
|
||||
CopyButton,
|
||||
Details,
|
||||
Dialog,
|
||||
Divider,
|
||||
Icon,
|
||||
Radio,
|
||||
Range,
|
||||
Rating,
|
||||
RelativeTime,
|
||||
Skeleton,
|
||||
Spinner,
|
||||
Switch,
|
||||
Tag,
|
||||
Textarea,
|
||||
)
|
||||
|
||||
LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
|
||||
@@ -199,5 +207,62 @@ when('click', btn)(lambda: window.alert("Clicked!"))
|
||||
"instance": markdown(MARKDOWN_EXAMPLE),
|
||||
"code": f'markdown("""{MARKDOWN_EXAMPLE}""")',
|
||||
},
|
||||
"CopyButton": {
|
||||
"instance": CopyButton(
|
||||
value="PyShoes!",
|
||||
copy_label="Copy me!",
|
||||
sucess_label="Copied, check your clipboard!",
|
||||
error_label="Oops, something went wrong!",
|
||||
feedback_timeout=2000,
|
||||
tooltip_placement="top",
|
||||
),
|
||||
"code": el.code(
|
||||
'CopyButton(value="PyShoes!", copy_label="Copy me!", sucess_label="Copied, check your clipboard!", error_label="Oops, something went wrong!", feedback_timeout=2000, tooltip_placement="top")'
|
||||
),
|
||||
},
|
||||
"Skeleton": {
|
||||
"instance": Skeleton(effect="pulse"),
|
||||
"code": el.code("Skeleton(effect='pulse')"),
|
||||
},
|
||||
"Spinner": {
|
||||
"instance": Spinner(),
|
||||
"code": el.code("Spinner()"),
|
||||
},
|
||||
"Switch": {
|
||||
"instance": Switch(name="switch", size="large"),
|
||||
"code": el.code('Switch(name="switch", size="large")'),
|
||||
},
|
||||
"Textarea": {
|
||||
"instance": Textarea(
|
||||
name="textarea",
|
||||
label="Textarea",
|
||||
size="medium",
|
||||
help_text="This is a textarea",
|
||||
resize="auto",
|
||||
),
|
||||
"code": el.code(
|
||||
'Textarea(name="textarea", label="Textarea", size="medium", help_text="This is a textarea", resize="auto")'
|
||||
),
|
||||
},
|
||||
"Tag": {
|
||||
"instance": Tag("Tag", variant="primary", size="medium"),
|
||||
"code": el.code('Tag("Tag", variant="primary", size="medium")'),
|
||||
},
|
||||
"Range": {
|
||||
"instance": Range(min=0, max=100, value=50),
|
||||
"code": el.code("Range(min=0, max=100, value=50)"),
|
||||
},
|
||||
"RelativeTime": {
|
||||
"instance": RelativeTime(date="2021-01-01T00:00:00Z"),
|
||||
"code": el.code('RelativeTime(date="2021-01-01T00:00:00Z")'),
|
||||
},
|
||||
# "SplitPanel": {
|
||||
# "instance": SplitPanel(
|
||||
# el.div("First panel"), el.div("Second panel"), orientation="vertical"
|
||||
# ),
|
||||
# "code": el.code(
|
||||
# 'SplitPanel(div("First panel"), div("Second panel"), orientation="vertical")'
|
||||
# ),
|
||||
# },
|
||||
},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user