ex4nicegui 0.7.0__py3-none-any.whl → 0.8.0__py3-none-any.whl

ex4nicegui/reactive/EChartsComponent/ECharts.js

@@ -1,3 +1,4 @@
+import 'echarts'
 import { convertDynamicProperties } from "../../static/utils/dynamic_properties.js";
 
 function collectMapRegisterTask() {
@@ -54,10 +55,8 @@ const mapRegisterTasks = collectMapRegisterTask();
 export default {
   template: "<div></div>",
   async mounted() {
-    await this.$nextTick(); // wait for Tailwind classes to be applied
-
+    await new Promise((resolve) => setTimeout(resolve, 0)); // wait for Tailwind classes to be applied
     this.chart = echarts.init(this.$el, this.theme);
-
     this.resizeObs = new ResizeObserver(this.chart.resize)
 
     // Prevent interruption of chart animations due to resize operations.

ex4nicegui/reactive/EChartsComponent/ECharts.py

@@ -23,7 +23,7 @@ NG_ROOT = Path(nicegui.__file__).parent / "elements"
 libraries = [NG_ROOT / "lib/echarts/echarts.min.js"]
 
 
-class echarts(Element, component="ECharts.js", libraries=libraries):  # type: ignore
+class echarts(Element, component="ECharts.js", dependencies=libraries):  # type: ignore
     def __init__(
         self,
         options: Optional[dict] = None,
@@ -112,7 +112,7 @@ class echarts(Element, component="ECharts.js", libraries=libraries):  # type: ig
             self.run_method("echarts_on", ui_event_name, query)
 
     def run_chart_method(
-        self, name: str, *args, timeout: float = 1, check_interval: float = 0.01
+        self, name: str, *args, timeout: float = 1
     ) -> AwaitableResponse:
         """Run a method of the JSONEditor instance.
 
@@ -124,7 +124,6 @@ class echarts(Element, component="ECharts.js", libraries=libraries):  # type: ig
         :param name: name of the method (a prefix ":" indicates that the arguments are JavaScript expressions)
         :param args: arguments to pass to the method (Python objects or JavaScript expressions)
         :param timeout: timeout in seconds (default: 1 second)
-        :param check_interval: interval in seconds to check for a response (default: 0.01 seconds)
 
         :return: AwaitableResponse that can be awaited to get the result of the method call
         """
@@ -133,5 +132,4 @@ class echarts(Element, component="ECharts.js", libraries=libraries):  # type: ig
             name,
             *args,
             timeout=timeout,
-            check_interval=check_interval,
         )

ex4nicegui/reactive/__init__.py

@@ -55,6 +55,9 @@ from .officials.tab_panels import LazyTabPanelsBindableUi as lazy_tab_panels
 from .q_pagination import PaginationBindableUi as q_pagination
 from .officials.chip import ChipBindableUi as chip
 from .officials.tooltip import TooltipBindableUi as tooltip
+from .officials.toggle import ToggleBindableUi as toggle
+from .officials.avatar import AvatarBindableUi as avatar
+from .officials.badge import BadgeBindableUi as badge
 
 from .local_file_picker import local_file_picker
 from .UseDraggable.UseDraggable import use_draggable
@@ -132,4 +135,7 @@ __all__ = [
     "chip",
     "dialog",
     "tooltip",
+    "toggle",
+    "avatar",
+    "badge",
 ]

ex4nicegui/reactive/base.py

@@ -73,7 +73,9 @@ class BindableUi(Generic[TWidget]):
 
     @property
     def _ui_signal_on(self):
-        return partial(on, scope=self._effect_scope)
+        """equivalent to `on`, but with the effect scope,and with `onchanges`=True and `deep` = False"""
+
+        return partial(on, scope=self._effect_scope, onchanges=True, deep=False)
 
     def props(self, add: Optional[str] = None, *, remove: Optional[str] = None):
         cast(ui.element, self.element).props(add, remove=remove)

ex4nicegui/reactive/mermaid/mermaid.py

@@ -10,11 +10,9 @@ NG_ROOT = Path(nicegui.__file__).parent / "elements"
 
 EX4_LIBS_ROOT = Path(__file__).parent.parent.parent / "libs"
 
-exposed_libraries = [
+dependencies = [
     NG_ROOT / "lib/mermaid/mermaid.esm.min.mjs",
     EX4_LIBS_ROOT / "d3/*.js",
-]
-extra_libraries = [
     NG_ROOT / "lib/mermaid/*.js",
 ]
 
@@ -27,8 +25,7 @@ class NodeClickEventArguments(UiEventArguments):
 class Mermaid(  # type: ignore
     ContentElement,
     component="mermaid.js",
-    exposed_libraries=exposed_libraries,  # type: ignore
-    extra_libraries=extra_libraries,  # type: ignore
+    dependencies=dependencies,  # type: ignore
 ):
     CONTENT_PROP = "content"
 

ex4nicegui/reactive/mixins/backgroundColor.py

@@ -21,7 +21,7 @@ class BackgroundColorableMixin(Protocol):
         ...
 
     def _bind_background_color(self, value: TGetterOrReadonlyRef[str]):
-        @self._ui_signal_on(value)  # type: ignore
+        @self._ui_signal_on(value, onchanges=False)  # type: ignore
         def _(state: WatchedState):
             if state.previous is not None:
                 color_system.remove_background_color(self.element, state.previous)

ex4nicegui/reactive/mixins/flexLayout.py

@@ -0,0 +1,51 @@
+from typing import (
+    Any,
+    Callable,
+    Protocol,
+)
+from typing_extensions import Self
+import signe
+from ex4nicegui.utils.signals import to_value, TMaybeRef
+from nicegui import ui
+
+
+class FlexWrapMixin(Protocol):
+    _ui_signal_on: Callable[[Callable[..., Any]], signe.Effect[None]]
+
+    @property
+    def element(self) -> ui.element:
+        ...
+
+    def bind_style(self, classes) -> Self:
+        ...
+
+    def bind_wrap(self, value: TMaybeRef[bool]) -> Self:
+        return self.bind_style(
+            {"flex-wrap": lambda: "wrap" if to_value(value) else "nowrap"}
+        )
+
+    def _bind_specified_props(self, prop: str, value: TMaybeRef[Any]):
+        if prop == "wrap":
+            return self.bind_wrap(value)
+
+        return None
+
+
+class FlexAlignItemsMixin(Protocol):
+    _ui_signal_on: Callable[[Callable[..., Any]], signe.Effect[None]]
+
+    @property
+    def element(self) -> ui.element:
+        ...
+
+    def bind_classes(self, classes) -> Self:
+        ...
+
+    def bind_align_items(self, value: TMaybeRef[str]):
+        return self.bind_classes(lambda: f"items-{to_value(value)}")
+
+    def _bind_specified_props(self, prop: str, value: TMaybeRef[Any]):
+        if prop == "align-items":
+            return self.bind_align_items(value)
+
+        return None

ex4nicegui/reactive/mixins/textColor.py

@@ -22,7 +22,7 @@ class TextColorableMixin(Protocol):
         ...
 
     def _bind_text_color(self, color: TGetterOrReadonlyRef[str]):
-        @self._ui_signal_on(color)  # type: ignore
+        @self._ui_signal_on(color, onchanges=False)  # type: ignore
         def _(state: WatchedState):
             if state.previous is not None:
                 color_system.remove_text_color(self.element, state.previous)

ex4nicegui/reactive/mixins/value_element.py

@@ -0,0 +1,27 @@
+from typing import Any, Callable, Protocol, Generic, TypeVar
+import signe
+from ex4nicegui.utils.signals import to_value, TMaybeRef
+from nicegui.elements.mixins.value_element import ValueElement
+
+T = TypeVar("T", contravariant=True)
+
+
+class ValueElementMixin(Protocol, Generic[T]):
+    _ui_signal_on: Callable[[Callable[..., Any]], signe.Effect[None]]
+
+    @property
+    def element(self) -> ValueElement:
+        ...
+
+    def bind_value(self, value: TMaybeRef[T]):
+        @self._ui_signal_on(value)  # type: ignore
+        def _():
+            self.element.set_value(to_value(value))
+
+        return self
+
+    def _bind_specified_props(self, prop: str, value: TMaybeRef[T]):
+        if prop == "value":
+            return self.bind_value(value)
+
+        return None

ex4nicegui/reactive/officials/avatar.py

@@ -0,0 +1,86 @@
+from typing import Optional
+from ex4nicegui.reactive.services.reactive_service import ParameterClassifier
+from ex4nicegui.utils.signals import (
+    TGetterOrReadonlyRef,
+    _TMaybeRef as TMaybeRef,
+)
+from nicegui import ui
+from .base import BindableUi
+from ex4nicegui.reactive.mixins.backgroundColor import BackgroundColorableMixin
+from ex4nicegui.reactive.mixins.textColor import TextColorableMixin
+
+
+class AvatarBindableUi(
+    BindableUi[ui.avatar], TextColorableMixin, BackgroundColorableMixin
+):
+    def __init__(
+        self,
+        icon: Optional[TMaybeRef[str]] = None,
+        *,
+        color: Optional[TMaybeRef[str]] = "primary",
+        text_color: Optional[TMaybeRef[str]] = None,
+        size: Optional[TMaybeRef[str]] = None,
+        font_size: Optional[TMaybeRef[str]] = None,
+        square: TMaybeRef[bool] = False,
+        rounded: TMaybeRef[bool] = False,
+    ) -> None:
+        """Avatar
+
+        A avatar element wrapping Quasar's
+        `QAvatar <https://quasar.dev/vue-components/avatar>`_ component.
+
+        :param icon: name of the icon or image path with "img:" prefix (e.g. "map", "img:path/to/image.png")
+        :param color: background color (either a Quasar, Tailwind, or CSS color or `None`, default: "primary")
+        :param text_color: color name from the Quasar Color Palette (e.g. "primary", "teal-10")
+        :param size: size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl) (e.g. "16px", "2rem")
+        :param font_size: size in CSS units, including unit name, of the content (icon, text) (e.g. "18px", "2rem")
+        :param square: removes border-radius so borders are squared (default: False)
+        :param rounded: applies a small standard border-radius for a squared shape of the component (default: False)
+        """
+        pc = ParameterClassifier(
+            locals(),
+            maybeRefs=[
+                "icon",
+                "color",
+                "text_color",
+                "size",
+                "font_size",
+                "square",
+                "rounded",
+            ],
+            events=[],
+        )
+
+        init_kws = pc.get_values_kws()
+        element = ui.avatar(**init_kws)
+        super().__init__(element)
+
+        for key, value in pc.get_bindings().items():
+            self.bind_prop(key, value)  # type: ignore
+
+    def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
+        if prop == "color":
+            return self.bind_color(value)
+        if prop == "text-color":
+            return self.bind_text_color(value)
+
+        return super().bind_prop(prop, value)
+
+    def bind_color(self, color: TGetterOrReadonlyRef):
+        """Binds the background color property of the chip to a ui element.
+
+        Args:
+            color (TGetterOrReadonlyRef): background color ui element or getter function
+
+        """
+        BackgroundColorableMixin.bind_color(self, color)
+        return self
+
+    def bind_text_color(self, color: TGetterOrReadonlyRef):
+        """Binds the text color property of the chip to a ui element.
+
+        Args:
+            color (TGetterOrReadonlyRef):  text color ui element or getter function
+        """
+        TextColorableMixin.bind_color(self, color)
+        return self

ex4nicegui/reactive/officials/badge.py

@@ -0,0 +1,102 @@
+from typing import Optional
+from ex4nicegui.reactive.services.reactive_service import ParameterClassifier
+from ex4nicegui.utils.signals import (
+    TGetterOrReadonlyRef,
+    to_value,
+    _TMaybeRef as TMaybeRef,
+)
+from nicegui import ui
+from .base import BindableUi
+from ex4nicegui.reactive.mixins.backgroundColor import BackgroundColorableMixin
+from ex4nicegui.reactive.mixins.textColor import TextColorableMixin
+
+
+class BadgeBindableUi(
+    BindableUi[ui.badge],
+    BackgroundColorableMixin,
+    TextColorableMixin,
+):
+    def __init__(
+        self,
+        text: TMaybeRef[str] = "",
+        *,
+        color: Optional[TMaybeRef[str]] = "primary",
+        text_color: Optional[TMaybeRef[str]] = None,
+        outline: TMaybeRef[bool] = False,
+    ) -> None:
+        """Badge
+
+        A badge element wrapping Quasar's
+        `QBadge <https://quasar.dev/vue-components/badge>`_ component.
+
+        :param text: the initial value of the text field
+        :param color: the color name for component (either a Quasar, Tailwind, or CSS color or `None`, default: "primary")
+        :param text_color: text color (either a Quasar, Tailwind, or CSS color or `None`, default: `None`)
+        :param outline: use 'outline' design (colored text and borders only) (default: False)
+        """
+        pc = ParameterClassifier(
+            locals(),
+            maybeRefs=[
+                "text",
+                "color",
+                "text_color",
+                "outline",
+            ],
+            events=[],
+        )
+
+        element = ui.badge(**pc.get_values_kws())
+        super().__init__(element)
+
+        for key, value in pc.get_bindings().items():
+            self.bind_prop(key, value)  # type: ignore
+
+    @property
+    def text(self):
+        return self.element.text
+
+    def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
+        if prop == "text":
+            return self.bind_text(value)
+
+        if prop == "color":
+            return self.bind_color(value)
+        if prop == "text-color":
+            return self.bind_text_color(value)
+
+        return super().bind_prop(prop, value)
+
+    def bind_color(self, color: TGetterOrReadonlyRef):
+        """Binds the background color property of the chip to a ui element.
+
+        Args:
+            color (TGetterOrReadonlyRef): background color ui element or getter function
+
+        """
+        BackgroundColorableMixin.bind_color(self, color)
+        return self
+
+    def bind_text_color(self, color: TGetterOrReadonlyRef):
+        """Binds the text color property of the chip to a ui element.
+
+        Args:
+            color (TGetterOrReadonlyRef):  text color ui element or getter function
+
+
+        """
+        TextColorableMixin.bind_color(self, color)
+        return self
+
+    def bind_text(self, text: TGetterOrReadonlyRef):
+        """Binds the text property of the chip to a ui element.
+
+        Args:
+            text (TGetterOrReadonlyRef):  text ui element or getter function
+
+        """
+
+        @self._ui_signal_on(text)
+        def _():
+            self.element.set_text(str(to_value(text)))
+
+        return self

ex4nicegui/reactive/officials/card.py

@@ -1,18 +1,48 @@
 from typing import (
     Any,
+    Literal,
+    Optional,
 )
 from nicegui import ui
 from .base import BindableUi
+from ex4nicegui.reactive.mixins.flexLayout import FlexAlignItemsMixin
+from ex4nicegui.utils.signals import TMaybeRef
+from ex4nicegui.reactive.services.reactive_service import ParameterClassifier
 
 
-class CardBindableUi(BindableUi[ui.card]):
+class CardBindableUi(BindableUi[ui.card], FlexAlignItemsMixin):
     def __init__(
         self,
+        align_items: Optional[
+            TMaybeRef[Literal["start", "end", "center", "baseline", "stretch"]]
+        ] = None,
     ) -> None:
-        element = ui.card()
+        """Card
+
+        This element is based on Quasar's `QCard <https://quasar.dev/vue-components/card>`_ component.
+        It provides a container with a dropped shadow.
+
+        Note:
+        In contrast to this element,
+        the original QCard has no padding by default and hides outer borders and shadows of nested elements.
+        If you want the original behavior, use the `tight` method.
+
+        :param align_items: alignment of the items in the card ("start", "end", "center", "baseline", or "stretch"; default: `None`)
+        """
+        pc = ParameterClassifier(locals(), maybeRefs=["wrap", "align_items"], events=[])
+        element = ui.card(**pc.get_values_kws())
 
         super().__init__(element)
 
+        for key, value in pc.get_bindings().items():
+            self.bind_prop(key, value)  # type: ignore
+
+    def bind_prop(self, prop: str, value: TMaybeRef):
+        if FlexAlignItemsMixin._bind_specified_props(self, prop, value):
+            return self
+
+        return super().bind_prop(prop, value)
+
     def __enter__(self):
         self.element.__enter__()
         return self

ex4nicegui/reactive/officials/checkbox.py

@@ -8,15 +8,18 @@ from ex4nicegui.reactive.services.reactive_service import ParameterClassifier
 from ex4nicegui.utils.signals import (
     TGetterOrReadonlyRef,
     _TMaybeRef as TMaybeRef,
-    to_value,
 )
 from nicegui import ui
 from .base import BindableUi, DisableableMixin
+from ex4nicegui.reactive.mixins.value_element import ValueElementMixin
+
 
 T = TypeVar("T")
 
 
-class CheckboxBindableUi(BindableUi[ui.checkbox], DisableableMixin):
+class CheckboxBindableUi(
+    BindableUi[ui.checkbox], DisableableMixin, ValueElementMixin[bool]
+):
     def __init__(
         self,
         text: TMaybeRef[str] = "",
@@ -44,15 +47,7 @@ class CheckboxBindableUi(BindableUi[ui.checkbox], DisableableMixin):
         return self.element.value
 
     def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
-        if prop == "value":
-            return self.bind_value(value)
+        if ValueElementMixin._bind_specified_props(self, prop, value):
+            return self
 
         return super().bind_prop(prop, value)
-
-    def bind_value(self, value: TGetterOrReadonlyRef[bool]):
-        @self._ui_effect
-        def _():
-            self.element.set_value(to_value(value))
-            self.element.update()
-
-        return self

ex4nicegui/reactive/officials/chip.py

@@ -9,12 +9,14 @@ from nicegui import ui
 from .base import BindableUi
 from ex4nicegui.reactive.mixins.backgroundColor import BackgroundColorableMixin
 from ex4nicegui.reactive.mixins.textColor import TextColorableMixin
+from ex4nicegui.reactive.mixins.value_element import ValueElementMixin
 
 
 class ChipBindableUi(
     BindableUi[ui.chip],
     BackgroundColorableMixin,
     TextColorableMixin,
+    ValueElementMixin[bool],
 ):
     def __init__(
         self,
@@ -29,6 +31,7 @@ class ChipBindableUi(
         on_selection_change: Optional[Callable[..., Any]] = None,
         removable: TMaybeRef[bool] = False,
         on_value_change: Optional[Callable[..., Any]] = None,
+        value: TMaybeRef[bool] = True,
     ) -> None:
         pc = ParameterClassifier(
             locals(),
@@ -40,11 +43,15 @@ class ChipBindableUi(
                 "selectable",
                 "selected",
                 "removable",
+                "value",
             ],
+            v_model=("value", "on_value_change"),
             events=["on_click", "on_selection_change", "on_value_change"],
         )
 
-        element = ui.chip(**pc.get_values_kws())
+        kws = pc.get_values_kws()
+        kws.pop("value", None)
+        element = ui.chip(**kws)
         super().__init__(element)
 
         for key, value in pc.get_bindings().items():
@@ -55,6 +62,9 @@ class ChipBindableUi(
         return self.element.text
 
     def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
+        if ValueElementMixin._bind_specified_props(self, prop, value):
+            return self
+
         if prop == "text":
             return self.bind_text(value)
 
@@ -94,9 +104,8 @@ class ChipBindableUi(
 
         """
 
-        @self._ui_effect
+        @self._ui_signal_on(text)
         def _():
             self.element.set_text(str(to_value(text)))
-            self.element.update()
 
         return self

ex4nicegui/reactive/officials/circular_progress.py

@@ -6,15 +6,18 @@ from ex4nicegui.reactive.services.reactive_service import ParameterClassifier
 from ex4nicegui.utils.signals import (
     TGetterOrReadonlyRef,
     _TMaybeRef as TMaybeRef,
-    to_value,
 )
 from nicegui import ui
 from .base import BindableUi, DisableableMixin
 from ex4nicegui.reactive.mixins.backgroundColor import BackgroundColorableMixin
+from ex4nicegui.reactive.mixins.value_element import ValueElementMixin
 
 
 class CircularProgressBindableUi(
-    BindableUi[ui.circular_progress], DisableableMixin, BackgroundColorableMixin
+    BindableUi[ui.circular_progress],
+    DisableableMixin,
+    BackgroundColorableMixin,
+    ValueElementMixin[float],
 ):
     def __init__(
         self,
@@ -50,16 +53,9 @@ class CircularProgressBindableUi(
         return self.element.value
 
     def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
-        if prop == "value":
-            return self.bind_value(value)
+        if ValueElementMixin._bind_specified_props(self, prop, value):
+            return self
         if prop == "color":
             return self.bind_color(value)
 
         return super().bind_prop(prop, value)
-
-    def bind_value(self, value: TGetterOrReadonlyRef[float]):
-        @self._ui_effect
-        def _():
-            self.element.set_value(to_value(value))
-
-        return self

ex4nicegui/reactive/officials/color_picker.py

@@ -5,6 +5,7 @@ from typing import (
     cast,
 )
 from ex4nicegui.reactive.services.reactive_service import ParameterClassifier
+from ex4nicegui.reactive.mixins.value_element import ValueElementMixin
 
 from ex4nicegui.utils.signals import (
     TGetterOrReadonlyRef,
@@ -18,7 +19,7 @@ from nicegui.events import handle_event
 from .base import BindableUi
 
 
-class ColorPickerBindableUi(BindableUi[ui.color_picker]):
+class ColorPickerBindableUi(BindableUi[ui.color_picker], ValueElementMixin[bool]):
     def __init__(
         self,
         color: TMaybeRef[str] = "",
@@ -69,8 +70,8 @@ class ColorPickerBindableUi(BindableUi[ui.color_picker]):
         return self.element.value
 
     def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
-        if prop == "value":
-            return self.bind_value(value)
+        if ValueElementMixin._bind_specified_props(self, prop, value):
+            return self
 
         return super().bind_prop(prop, value)
 
@@ -81,13 +82,6 @@ class ColorPickerBindableUi(BindableUi[ui.color_picker]):
 
         return self
 
-    def bind_value(self, value: TGetterOrReadonlyRef[bool]):
-        @self._ui_effect
-        def _():
-            self.element.set_value(to_value(value))
-
-        return self
-
 
 class ColorPickerLazyBindableUi(ColorPickerBindableUi):
     def __init__(

ex4nicegui/reactive/officials/column.py

@@ -1,18 +1,27 @@
 from typing import (
     Any,
+    Literal,
+    Optional,
 )
 from ex4nicegui.reactive.services.reactive_service import ParameterClassifier
+from ex4nicegui.reactive.mixins.flexLayout import FlexAlignItemsMixin, FlexWrapMixin
 from ex4nicegui.utils.signals import (
-    TGetterOrReadonlyRef,
-    _TMaybeRef as TMaybeRef,
+    TMaybeRef,
 )
 from nicegui import ui
 from .base import BindableUi
 
 
-class ColumnBindableUi(BindableUi[ui.column]):
-    def __init__(self, *, wrap: TMaybeRef[bool] = True) -> None:
-        pc = ParameterClassifier(locals(), maybeRefs=["wrap"], events=[])
+class ColumnBindableUi(BindableUi[ui.column], FlexAlignItemsMixin, FlexWrapMixin):
+    def __init__(
+        self,
+        *,
+        wrap: TMaybeRef[bool] = True,
+        align_items: Optional[
+            TMaybeRef[Literal["start", "end", "center", "baseline", "stretch"]]
+        ] = None,
+    ) -> None:
+        pc = ParameterClassifier(locals(), maybeRefs=["wrap", "align_items"], events=[])
         element = ui.column(**pc.get_values_kws())
 
         super().__init__(element)
@@ -20,15 +29,14 @@ class ColumnBindableUi(BindableUi[ui.column]):
         for key, value in pc.get_bindings().items():
             self.bind_prop(key, value)  # type: ignore
 
-    def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
-        if prop == "wrap":
-            return self.bind_wrap(value)
+    def bind_prop(self, prop: str, value: TMaybeRef):
+        if FlexAlignItemsMixin._bind_specified_props(self, prop, value):
+            return self
+        if FlexWrapMixin._bind_specified_props(self, prop, value):
+            return self
 
         return super().bind_prop(prop, value)
 
-    def bind_wrap(self, value: TGetterOrReadonlyRef):
-        self.bind_classes({"wrap": value})
-
     def __enter__(self):
         self.element.__enter__()
         return self