ex4nicegui 0.6.9__py3-none-any.whl → 0.7.1__py3-none-any.whl

ex4nicegui/reactive/officials/knob.py

@@ -61,17 +61,17 @@ class KnobBindableUi(
     def value(self):
         return self.element.value
 
-    def bind_prop(self, prop: str, ref_ui: TGetterOrReadonlyRef):
+    def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
         if prop == "value":
-            return self.bind_value(ref_ui)
+            return self.bind_value(value)
         if prop == "color":
-            return self.bind_color(ref_ui)
+            return self.bind_color(value)
 
-        return super().bind_prop(prop, ref_ui)
+        return super().bind_prop(prop, value)
 
-    def bind_value(self, ref_ui: TGetterOrReadonlyRef[float]):
-        @self._ui_effect
+    def bind_value(self, value: TGetterOrReadonlyRef[float]):
+        @self._ui_signal_on(value)
         def _():
-            self.element.set_value(to_value(ref_ui))
+            self.element.set_value(to_value(value))
 
         return self

ex4nicegui/reactive/officials/label.py

@@ -3,6 +3,7 @@ from ex4nicegui.reactive.services.reactive_service import ParameterClassifier
 from ex4nicegui.utils.signals import (
     TGetterOrReadonlyRef,
     to_value,
+    to_raw,
     _TMaybeRef as TMaybeRef,
 )
 from nicegui import ui
@@ -17,7 +18,9 @@ class LabelBindableUi(BindableUi[ui.label], HtmlTextColorableMixin):
     ) -> None:
         pc = ParameterClassifier(locals(), maybeRefs=["text"], events=[])
 
-        element = ui.label(**pc.get_values_kws())
+        init_kws = pc.get_values_kws()
+        init_kws.update({"text": str(init_kws.get("text", ""))})
+        element = ui.label(**init_kws)
         super().__init__(element)
 
         for key, value in pc.get_bindings().items():
@@ -27,19 +30,18 @@ class LabelBindableUi(BindableUi[ui.label], HtmlTextColorableMixin):
     def text(self):
         return self.element.text
 
-    def bind_prop(self, prop: str, ref_ui: TGetterOrReadonlyRef):
+    def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
         if prop == "text":
-            return self.bind_text(ref_ui)
+            return self.bind_text(value)
 
         if prop == "color":
-            return self.bind_color(ref_ui)
+            return self.bind_color(value)
 
-        return super().bind_prop(prop, ref_ui)
+        return super().bind_prop(prop, value)
 
-    def bind_text(self, ref_ui: TGetterOrReadonlyRef):
-        @self._ui_effect
+    def bind_text(self, text: TGetterOrReadonlyRef):
+        @self._ui_signal_on(text, deep=True)
         def _():
-            self.element.set_text(str(to_value(ref_ui)))
-            self.element.update()
+            self.element.set_text(str(to_raw(to_value(text))))
 
         return self

ex4nicegui/reactive/officials/linear_progress.py

@@ -46,18 +46,18 @@ class LinearProgressBindableUi(BindableUi[ui.linear_progress], TextColorableMixi
     def value(self):
         return self.element.value
 
-    def bind_prop(self, prop: str, ref_ui: TGetterOrReadonlyRef):
+    def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
         if prop == "value":
-            return self.bind_value(ref_ui)
+            return self.bind_value(value)
 
         if prop == "color":
-            return self.bind_color(ref_ui)
+            return self.bind_color(value)
 
-        return super().bind_prop(prop, ref_ui)
+        return super().bind_prop(prop, value)
 
-    def bind_value(self, ref_ui: TGetterOrReadonlyRef):
-        @self._ui_effect
+    def bind_value(self, value: TGetterOrReadonlyRef):
+        @self._ui_signal_on(value)
         def _():
-            self.element.set_value(to_value(ref_ui))
+            self.element.set_value(to_value(value))
 
         return self

ex4nicegui/reactive/officials/number.py

@@ -70,26 +70,26 @@ class NumberBindableUi(BindableUi[ui.number]):
     def value(self):
         return self.element.value
 
-    def bind_prop(self, prop: str, ref_ui: TGetterOrReadonlyRef):
+    def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
         if prop == "value":
-            return self.bind_value(ref_ui)
+            return self.bind_value(value)
 
         if prop == "precision":
-            return self._bind_precision(ref_ui)
+            return self._bind_precision(value)
 
-        return super().bind_prop(prop, ref_ui)
+        return super().bind_prop(prop, value)
 
-    def bind_value(self, ref_ui: TGetterOrReadonlyRef[float]):
-        @self._ui_effect
+    def bind_value(self, value: TGetterOrReadonlyRef[float]):
+        @self._ui_signal_on(value)
         def _():
-            self.element.set_value(to_value(ref_ui))
+            self.element.set_value(to_value(value))
 
         return self
 
-    def _bind_precision(self, ref_ui: TGetterOrReadonlyRef[int]):
-        @self._ui_signal_on(ref_ui, onchanges=True)
+    def _bind_precision(self, precision: TGetterOrReadonlyRef[int]):
+        @self._ui_signal_on(precision)
         def _():
-            self.element.precision = to_value(ref_ui)
+            self.element.precision = to_value(precision)
             self.element.sanitize()
 
         return self

ex4nicegui/reactive/officials/radio.py

@@ -51,25 +51,25 @@ class RadioBindableUi(BindableUi[ui.radio]):
     def value(self):
         return self.element.value
 
-    def bind_prop(self, prop: str, ref_ui: TGetterOrReadonlyRef):
+    def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
         if prop == "value":
-            return self.bind_value(ref_ui)
+            return self.bind_value(value)
 
         if prop == "options":
-            return self.bind_options(ref_ui)
+            return self.bind_options(value)
 
-        return super().bind_prop(prop, ref_ui)
+        return super().bind_prop(prop, value)
 
-    def bind_options(self, ref_ui: TGetterOrReadonlyRef):
-        @self._ui_effect
+    def bind_options(self, options: TGetterOrReadonlyRef):
+        @self._ui_signal_on(options, deep=True)
         def _():
-            self.element.set_options(to_value(ref_ui))
+            self.element.set_options(to_value(options))
 
         return self
 
-    def bind_value(self, ref_ui: TGetterOrReadonlyRef):
-        @self._ui_effect
+    def bind_value(self, value: TGetterOrReadonlyRef):
+        @self._ui_signal_on(value)
         def _():
-            cast(ValueElement, self.element).set_value(to_value(ref_ui))
+            cast(ValueElement, self.element).set_value(to_value(value))
 
         return self

ex4nicegui/reactive/officials/row.py

@@ -18,14 +18,14 @@ class RowBindableUi(BindableUi[ui.row]):
         for key, value in pc.get_bindings().items():
             self.bind_prop(key, value)  # type: ignore
 
-    def bind_prop(self, prop: str, ref_ui: TMaybeRef):
+    def bind_prop(self, prop: str, value: TMaybeRef):
         if prop == "wrap":
-            return self.bind_wrap(ref_ui)
+            return self.bind_wrap(value)
 
-        return super().bind_prop(prop, ref_ui)
+        return super().bind_prop(prop, value)
 
-    def bind_wrap(self, ref_ui: TMaybeRef):
-        self.bind_classes({"wrap": ref_ui})
+    def bind_wrap(self, value: TMaybeRef):
+        self.bind_classes({"wrap": value})
 
     def __enter__(self):
         self.element.__enter__()

ex4nicegui/reactive/officials/select.py

@@ -13,6 +13,7 @@ from ex4nicegui.utils.signals import (
     TGetterOrReadonlyRef,
     _TMaybeRef as TMaybeRef,
     to_value,
+    to_raw,
 )
 from nicegui import ui
 from nicegui.elements.mixins.value_element import ValueElement
@@ -73,25 +74,25 @@ class SelectBindableUi(BindableUi[ui.select]):
     def value(self):
         return self.element.value
 
-    def bind_prop(self, prop: str, ref_ui: TGetterOrReadonlyRef):
+    def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
         if prop == "value":
-            return self.bind_value(ref_ui)
+            return self.bind_value(value)
 
         if prop == "options":
-            return self.bind_options(ref_ui)
+            return self.bind_options(value)
 
-        return super().bind_prop(prop, ref_ui)
+        return super().bind_prop(prop, value)
 
-    def bind_options(self, ref_ui: TGetterOrReadonlyRef):
-        @self._ui_effect()
+    def bind_options(self, options: TGetterOrReadonlyRef):
+        @self._ui_signal_on(options, deep=True)
         def _():
-            self.element.set_options(to_value(ref_ui))
+            self.element.set_options(to_value(options))
 
         return self
 
-    def bind_value(self, ref_ui: TGetterOrReadonlyRef):
-        @self._ui_effect()
+    def bind_value(self, value: TGetterOrReadonlyRef):
+        @self._ui_signal_on(value, deep=True)
         def _():
-            cast(ValueElement, self.element).set_value(to_value(ref_ui) or None)
+            cast(ValueElement, self.element).set_value(to_raw(to_value(value)) or None)
 
         return self

ex4nicegui/reactive/officials/slider.py

@@ -58,16 +58,16 @@ class SliderBindableUi(
     def value(self):
         return self.element.value
 
-    def bind_prop(self, prop: str, ref_ui: TGetterOrReadonlyRef):
+    def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
         if prop == "value":
-            return self.bind_value(ref_ui)
+            return self.bind_value(value)
 
-        return super().bind_prop(prop, ref_ui)
+        return super().bind_prop(prop, value)
 
-    def bind_value(self, ref_ui: TGetterOrReadonlyRef[float]):
-        @self._ui_effect
+    def bind_value(self, value: TGetterOrReadonlyRef[float]):
+        @self._ui_signal_on(value)
         def _():
-            self.element.set_value(to_value(ref_ui))
+            self.element.set_value(to_value(value))
             self.element.update()
 
         return self

ex4nicegui/reactive/officials/switch.py

@@ -35,7 +35,6 @@ class SwitchBindableUi(BindableUi[ui.switch]):
         )
 
         value_kws = pc.get_values_kws()
-        value_kws.update({"value": 0 if value is None else value})
 
         element = ui.switch(**value_kws)
         super().__init__(element)  # type: ignore
@@ -47,15 +46,15 @@ class SwitchBindableUi(BindableUi[ui.switch]):
     def value(self):
         return self.element.value
 
-    def bind_prop(self, prop: str, ref_ui: TGetterOrReadonlyRef):
+    def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
         if prop == "value":
-            return self.bind_value(ref_ui)
+            return self.bind_value(value)
 
-        return super().bind_prop(prop, ref_ui)
+        return super().bind_prop(prop, value)
 
-    def bind_value(self, ref_ui: TGetterOrReadonlyRef[bool]):
-        @self._ui_effect
+    def bind_value(self, value: TGetterOrReadonlyRef[bool]):
+        @self._ui_signal_on(value)
         def _():
-            self.element.set_value(to_value(ref_ui))
+            self.element.set_value(to_value(value))
 
         return self

ex4nicegui/reactive/officials/tab.py

@@ -33,12 +33,6 @@ class TabBindableUi(BindableUi[ui.tab]):
         for key, value in bindings_kws.items():
             self.bind_prop(key, value)  # type: ignore
 
-    # def bind_prop(self, prop: str, ref_ui: TMaybeRef):
-    #     if prop == "name":
-    #         return self.bind_name(ref_ui)
-
-    #     return super().bind_prop(prop, ref_ui)
-
     def __bind_label(self, binding_kws: Dict, value_kws: Dict):
         name_ref = binding_kws.get("name") or value_kws.get("name")
         label_ref = binding_kws.get("label") or value_kws.get("label")
@@ -49,9 +43,3 @@ class TabBindableUi(BindableUi[ui.tab]):
                 to_value(label_ref) if label_ref is not None else to_value(name_ref)
             )
             self.element.update()
-
-    # def bind_name(self, ref_ui: TMaybeRef):
-    #     @self._ui_effect
-    #     def _():
-    #         self.element._props["name"] = to_value(ref_ui)
-    #         self.element.update()

ex4nicegui/reactive/officials/tab_panels.py

@@ -49,16 +49,16 @@ class TabPanelsBindableUi(BindableUi[ui.tab_panels]):
     def value(self):
         return self.element.value
 
-    def bind_prop(self, prop: str, ref_ui: TGetterOrReadonlyRef):
+    def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
         if prop == "value":
-            return self.bind_value(ref_ui)
+            return self.bind_value(value)
 
-        return super().bind_prop(prop, ref_ui)
+        return super().bind_prop(prop, value)
 
-    def bind_value(self, ref_ui: TGetterOrReadonlyRef):
+    def bind_value(self, value: TGetterOrReadonlyRef):
         @self._ui_effect
         def _():
-            self.element.set_value(to_value(ref_ui))
+            self.element.set_value(to_value(value))
 
 
 class lazy_tab_panel(ui.tab_panel):

ex4nicegui/reactive/officials/table.py

@@ -145,22 +145,22 @@ class TableBindableUi(BindableUi[ui.table]):
         ]
         return cls(cols, rows, **other_kws)
 
-    def bind_prop(self, prop: str, ref_ui: TGetterOrReadonlyRef):
+    def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
         if prop == "dataframe":
-            return self.bind_dataframe(ref_ui)
+            return self.bind_dataframe(value)
 
         if prop == "rows":
-            return self.bind_rows(ref_ui)
+            return self.bind_rows(value)
 
         if prop == "columns":
-            return self.bind_columns(ref_ui)
+            return self.bind_columns(value)
 
-        return super().bind_prop(prop, ref_ui)
+        return super().bind_prop(prop, value)
 
-    def bind_dataframe(self, ref_df: TGetterOrReadonlyRef):
+    def bind_dataframe(self, dataframe: TGetterOrReadonlyRef):
         @ref_computed
         def cp_converted_df():
-            df = ref_df.value
+            df = dataframe.value
             return utils_common.convert_dataframe(df)
 
         @ref_computed
@@ -182,20 +182,20 @@ class TableBindableUi(BindableUi[ui.table]):
 
         return self
 
-    def bind_rows(self, ref_ui: TGetterOrReadonlyRef[List[Dict]]):
-        @self._ui_signal_on(ref_ui, deep=True)
+    def bind_rows(self, rows: TGetterOrReadonlyRef[List[Dict]]):
+        @self._ui_signal_on(rows, deep=True)
         def _():
             ele = self.element
-            ele._props["rows"] = list(to_raw(to_value(ref_ui)))
+            ele._props["rows"] = list(to_raw(to_value(rows)))
             ele.update()
 
         return self
 
-    def bind_columns(self, ref_ui: TGetterOrReadonlyRef[List[Dict]]):
-        @self._ui_signal_on(ref_ui, deep=True)
+    def bind_columns(self, columns: TGetterOrReadonlyRef[List[Dict]]):
+        @self._ui_signal_on(columns, deep=True)
         def _():
             ele = self.element
-            ele._props["columns"] = list(to_raw(to_value(ref_ui)))
+            ele._props["columns"] = list(to_raw(to_value(columns)))
             ele.update()
 
         return self

ex4nicegui/reactive/officials/tabs.py

@@ -32,13 +32,13 @@ class TabsBindableUi(BindableUi[ui.tabs]):
     def value(self):
         return self.element.value
 
-    def bind_prop(self, prop: str, ref_ui: TGetterOrReadonlyRef):
+    def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
         if prop == "value":
-            return self.bind_value(ref_ui)
+            return self.bind_value(value)
 
-        return super().bind_prop(prop, ref_ui)
+        return super().bind_prop(prop, value)
 
-    def bind_value(self, ref_ui: TGetterOrReadonlyRef):
+    def bind_value(self, value: TGetterOrReadonlyRef):
         @self._ui_effect
         def _():
-            self.element.set_value(to_value(ref_ui))
+            self.element.set_value(to_value(value))

ex4nicegui/reactive/officials/textarea.py

@@ -52,16 +52,16 @@ class TextareaBindableUi(BindableUi[ui.textarea]):
     def value(self):
         return self.element.value
 
-    def bind_prop(self, prop: str, ref_ui: TGetterOrReadonlyRef):
+    def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
         if prop == "value":
-            return self.bind_value(ref_ui)
+            return self.bind_value(value)
 
-        return super().bind_prop(prop, ref_ui)
+        return super().bind_prop(prop, value)
 
-    def bind_value(self, ref_ui: TGetterOrReadonlyRef[str]):
-        @self._ui_effect
+    def bind_value(self, value: TGetterOrReadonlyRef[str]):
+        @self._ui_signal_on(value)
         def _():
-            self.element.set_value(to_value(ref_ui))
+            self.element.set_value(to_value(value))
 
         return self
 

ex4nicegui/reactive/officials/toggle.py

@@ -0,0 +1,88 @@
+from typing import (
+    Any,
+    Callable,
+    List,
+    Optional,
+    TypeVar,
+    Dict,
+    Union,
+)
+from ex4nicegui.reactive.services.reactive_service import ParameterClassifier
+from ex4nicegui.utils.signals import (
+    TGetterOrReadonlyRef,
+    _TMaybeRef as TMaybeRef,
+    to_value,
+    to_raw,
+)
+from nicegui import ui
+from .base import BindableUi
+
+T = TypeVar("T")
+
+
+class ToggleBindableUi(BindableUi[ui.toggle]):
+    def __init__(
+        self,
+        options: Union[TMaybeRef[List], TMaybeRef[Dict]],
+        *,
+        value: TMaybeRef[Any] = None,
+        on_change: Optional[Callable[..., Any]] = None,
+        clearable: TMaybeRef[bool] = False,
+    ) -> None:
+        """Toggle
+
+        This element is based on Quasar's `QBtnToggle <https://quasar.dev/vue-components/button-toggle>`_ component.
+
+        The options can be specified as a list of values, or as a dictionary mapping values to labels.
+        After manipulating the options, call `update()` to update the options in the UI.
+
+        :param options: a list ['value1', ...] or dictionary `{'value1':'label1', ...}` specifying the options
+        :param value: the initial value
+        :param on_change: callback to execute when selection changes
+        :param clearable: whether the toggle can be cleared by clicking the selected option
+        """
+        pc = ParameterClassifier(
+            locals(),
+            maybeRefs=[
+                "options",
+                "value",
+                "clearable",
+            ],
+            v_model=("value", "on_change"),
+            events=["on_change"],
+        )
+
+        value_kws = pc.get_values_kws()
+
+        element = ui.toggle(**value_kws)
+        super().__init__(element)  # type: ignore
+
+        for key, value in pc.get_bindings().items():
+            self.bind_prop(key, value)  # type: ignore
+
+    @property
+    def value(self):
+        return self.element.value
+
+    def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
+        if prop == "value":
+            return self.bind_value(value)
+
+        if prop == "options":
+            return self.bind_options(value)
+
+        return super().bind_prop(prop, value)
+
+    def bind_options(self, options: TGetterOrReadonlyRef):
+        @self._ui_signal_on(options, deep=True)
+        def _():
+            self.element.set_options(to_value(options))
+
+        return self
+
+    def bind_value(self, value: TGetterOrReadonlyRef):
+        @self._ui_signal_on(value, deep=True)
+        def _():
+            self.element.set_value(to_raw(to_value(value)) or None)
+
+        return self

ex4nicegui/reactive/officials/tooltip.py

@@ -0,0 +1,40 @@
+from typing import Any
+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
+
+
+class TooltipBindableUi(BindableUi[ui.tooltip]):
+    def __init__(
+        self,
+        text: TMaybeRef[Any] = "",
+    ) -> None:
+        pc = ParameterClassifier(locals(), maybeRefs=["text"], events=[])
+
+        element = ui.tooltip(**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)
+
+        return super().bind_prop(prop, value)
+
+    def bind_text(self, text: TGetterOrReadonlyRef):
+        @self._ui_signal_on(text)
+        def _():
+            self.element.set_text(str(to_value(text)))
+
+        return self

ex4nicegui/reactive/q_pagination.py

@@ -36,15 +36,15 @@ class PaginationBindableUi(BindableUi[ui.pagination]):
     def value(self):
         return self.element.value
 
-    def bind_prop(self, prop: str, ref_ui: TGetterOrReadonlyRef):
+    def bind_prop(self, prop: str, value: TGetterOrReadonlyRef):
         if prop == "value":
-            return self.bind_value(ref_ui)
+            return self.bind_value(value)
 
-        return super().bind_prop(prop, ref_ui)
+        return super().bind_prop(prop, value)
 
-    def bind_value(self, ref_ui: TGetterOrReadonlyRef[int]):
+    def bind_value(self, value: TGetterOrReadonlyRef[int]):
         @self._ui_effect
         def _():
-            self.element.set_value(to_value(ref_ui))
+            self.element.set_value(to_value(value))
 
         return self

ex4nicegui/reactive/systems/reactive_system.py

@@ -1,9 +1,9 @@
 from typing import Callable, Dict
-from ex4nicegui.utils.signals import to_value
+from ex4nicegui.utils.signals import to_value, to_raw
 
 
 def convert_kws_ref2value(kws: Dict) -> Dict:
-    return {key: to_value(value) for key, value in kws.items()}
+    return {key: to_raw(to_value(value)) for key, value in kws.items()}
 
 
 def inject_method(obj, method_name: str, new_handle: Callable):

ex4nicegui/reactive/vfor.js

@@ -1,13 +1,23 @@
-export default {
-    props: { itemIds: Array },
+const { h, TransitionGroup } = Vue;
 
+export default {
+    props: { itemIds: Array, transitionProps: Object },
     render() {
+        const is_transition = !!this.transitionProps;
         const slotBox = this.$slots.default()
-
         const slots = this.itemIds.map(({ elementId }) => {
             return slotBox.find(v => v.key === elementId)
         });
 
-        return slots
+        function beforeLeave(el) {
+            const { marginLeft, marginTop, width, height } = window.getComputedStyle(el)
+            console.log('beforeLeave');
+            el.style.left = `${el.offsetLeft - parseFloat(marginLeft, 10)}px`
+            el.style.top = `${el.offsetTop - parseFloat(marginTop, 10)}px`
+            el.style.width = width
+            el.style.height = height
+        }
+
+        return is_transition ? h(TransitionGroup, { ...this.transitionProps, onBeforeLeave: beforeLeave }, slots) : slots;
     }
 }