ex4nicegui 0.7.1__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/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/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/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/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,14 +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_signal_on(value)
-        def _():
-            self.element.set_value(to_value(value))
-
-        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)
 

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_signal_on(value)
-        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_signal_on(value)
-        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

ex4nicegui/reactive/officials/date.py

@@ -1,11 +1,11 @@
 from typing import Any, Callable, List, Optional, TypeVar
 from typing_extensions import TypedDict
 from ex4nicegui.reactive.services.reactive_service import ParameterClassifier
+from ex4nicegui.reactive.mixins.value_element import ValueElementMixin
 
 from ex4nicegui.utils.signals import (
     TGetterOrReadonlyRef,
     _TMaybeRef as TMaybeRef,
-    to_value,
 )
 from nicegui import ui
 from .base import BindableUi
@@ -18,7 +18,7 @@ _TDateValue = TypeVar(
 )
 
 
-class DateBindableUi(BindableUi[ui.date]):
+class DateBindableUi(BindableUi[ui.date], ValueElementMixin[_TDateValue]):
     def __init__(
         self,
         value: Optional[TMaybeRef[_TDateValue]] = None,
@@ -63,14 +63,7 @@ class DateBindableUi(BindableUi[ui.date]):
         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_signal_on(value)
-        def _():
-            self.element.set_value(to_value(value))
-
-        return self

ex4nicegui/reactive/officials/dialog.py

@@ -1,15 +1,15 @@
 from ex4nicegui.reactive.services.reactive_service import ParameterClassifier
+from ex4nicegui.reactive.mixins.value_element import ValueElementMixin
 from ex4nicegui.utils.signals import (
     _TMaybeRef as TMaybeRef,
     is_setter_ref,
-    to_value,
     TGetterOrReadonlyRef,
 )
 from nicegui import ui
 from .base import BindableUi
 
 
-class DialogBindableUi(BindableUi[ui.dialog]):
+class DialogBindableUi(BindableUi[ui.dialog], ValueElementMixin[bool]):
     def __init__(
         self,
         *,
@@ -36,14 +36,7 @@ class DialogBindableUi(BindableUi[ui.dialog]):
         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[float]):
-        @self._ui_signal_on(value)
-        def _():
-            self.element.set_value(to_value(value))
-
-        return self

ex4nicegui/reactive/officials/echarts.py

@@ -34,7 +34,7 @@ class EChartsBindableUi(BindableUi[echarts]):
 
         value_kws = pc.get_values_kws()
 
-        element = echarts(**value_kws).classes("grow self-stretch h-[16rem]")
+        element = echarts(**value_kws).classes("nicegui-echart")
 
         super().__init__(element)  # type: ignore
 
@@ -94,13 +94,14 @@ class EChartsBindableUi(BindableUi[echarts]):
 
     @classmethod
     def from_pyecharts(cls, chart: TMaybeRef):
-        if is_ref(chart):
+        if is_ref(chart) or callable(chart):
 
             @ref_computed
             def chart_opt():
-                if not bool(chart.value):
+                chart_value = to_value(chart)
+                if not bool(chart_value):
                     return {}
-                return PyechartsUtils._chart2opts(chart.value)
+                return PyechartsUtils._chart2opts(chart_value)
 
             return cls(chart_opt)
 
@@ -228,7 +229,10 @@ class EChartsBindableUi(BindableUi[echarts]):
         return self
 
     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.
 
@@ -240,7 +244,6 @@ class EChartsBindableUi(BindableUi[echarts]):
         :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
         """
@@ -248,7 +251,6 @@ class EChartsBindableUi(BindableUi[echarts]):
             name,
             *args,
             timeout=timeout,
-            check_interval=check_interval,
         )
 
 

ex4nicegui/reactive/officials/expansion.py

@@ -1,15 +1,15 @@
 from typing import Any, Optional, Callable
 from nicegui import ui
 from ex4nicegui.reactive.services.reactive_service import ParameterClassifier
+from ex4nicegui.reactive.mixins.value_element import ValueElementMixin
 from ex4nicegui.utils.signals import (
     TGetterOrReadonlyRef,
     _TMaybeRef as TMaybeRef,
-    to_value,
 )
 from .base import BindableUi
 
 
-class ExpansionBindableUi(BindableUi[ui.expansion]):
+class ExpansionBindableUi(BindableUi[ui.expansion], ValueElementMixin[bool]):
     def __init__(
         self,
         text: Optional[TMaybeRef[str]] = None,
@@ -46,18 +46,11 @@ class ExpansionBindableUi(BindableUi[ui.expansion]):
         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):
-        @self._ui_signal_on(value)
-        def _():
-            self.element.set_value(to_value(value))
-
-        return self
-
     def __enter__(self):
         self.element.__enter__()
         return self

ex4nicegui/reactive/officials/input.py

@@ -1,4 +1,4 @@
-from typing import Any, Callable, List, Optional, Dict, cast
+from typing import Any, Callable, List, Optional, Dict, Union, cast
 
 
 from ex4nicegui.utils.signals import (
@@ -13,9 +13,14 @@ from nicegui import ui
 from nicegui.events import handle_event
 from .base import BindableUi, DisableableMixin
 from ex4nicegui.reactive.services.reactive_service import ParameterClassifier
+from ex4nicegui.reactive.mixins.value_element import ValueElementMixin
 
 
-class InputBindableUi(BindableUi[ui.input], DisableableMixin):
+class InputBindableUi(
+    BindableUi[ui.input],
+    DisableableMixin,
+    ValueElementMixin[str],
+):
     def __init__(
         self,
         label: Optional[TMaybeRef[str]] = None,
@@ -26,7 +31,9 @@ class InputBindableUi(BindableUi[ui.input], DisableableMixin):
         password_toggle_button: TMaybeRef[bool] = False,
         on_change: Optional[Callable[..., Any]] = None,
         autocomplete: Optional[TMaybeRef[List[str]]] = None,
-        validation: Dict[str, Callable[..., bool]] = {},
+        validation: Optional[
+            Union[Callable[..., Optional[str]], Dict[str, Callable[..., bool]]]
+        ] = None,
     ) -> None:
         pc = ParameterClassifier(
             locals(),
@@ -52,20 +59,13 @@ class InputBindableUi(BindableUi[ui.input], DisableableMixin):
             self.bind_prop(key, value)  # type: ignore
 
     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 == "password":
             return self.bind_password(value)
 
         return super().bind_prop(prop, value)
 
-    def bind_value(self, value: TGetterOrReadonlyRef[str]):
-        @self._ui_signal_on(value)
-        def _():
-            self.element.set_value(to_value(value))
-
-        return self
-
     def bind_password(self, password: TGetterOrReadonlyRef[bool]):
         @self._ui_signal_on(password)
         def _():