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

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]):
+    def bind_value(self, value: TGetterOrReadonlyRef[str]):
         @self._ui_effect
         def _():
-            self.element.set_value(to_value(ref_ui))
+            self.element.set_value(to_value(value))
 
         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_effect
+        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/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;
     }
 }

ex4nicegui/reactive/vfor.py

@@ -3,7 +3,7 @@ from nicegui.element import Element
 from nicegui import ui
 from ex4nicegui.utils.clientScope import _CLIENT_SCOPE_MANAGER
 from ex4nicegui.utils.signals import (
-    TReadonlyRef,
+    Ref,
     on,
     to_ref,
     to_ref_wrapper,
@@ -21,7 +21,7 @@ from typing import (
     TypeVar,
     Generic,
     Union,
-    cast,
+    Literal,
 )
 from functools import partial
 from dataclasses import dataclass
@@ -38,35 +38,90 @@ class VforItem(Empty):
 
 
 class VforContainer(Element, component="vfor.js"):
-    def __init__(self) -> None:
+    def __init__(self, transition_props: Optional[Dict[str, Any]] = None) -> None:
         super().__init__()
         self._props["itemIds"] = []
 
+        if transition_props:
+            self._props["transitionProps"] = transition_props
+
     def update_items(self, item_ids: List[Dict]):
         self._props["itemIds"] = item_ids
         self.update()
 
 
+def wrapper_getter_setter(ref: Ref, index: Ref[int], *keys: Union[str, int]):
+    proxy = ref.value
+
+    def getter():
+        item = proxy[index.value]
+        result = item
+
+        for k in keys:
+            result = result[k]
+        return result
+
+    def setter(value):
+        item = proxy[index.value]
+
+        if len(keys) == 0:
+            proxy[index.value] = value
+
+        if len(keys) == 1:
+            item[keys[0]] = value
+            return
+
+        obj = item[keys[0]]
+        for k in keys[1:-1]:
+            obj = obj[k]
+        obj[keys[-1]] = value
+
+    return getter, setter
+
+
+class VforStoreItem(Generic[_T], RefWrapper[_T]):
+    def __init__(
+        self,
+        source: _T_data,
+        index: Ref[int],
+        keys: Optional[List[Union[str, int]]] = None,
+    ) -> None:
+        self._source = source
+        self._data_index = index
+        self._keys = keys or []
+
+        getter, setter = wrapper_getter_setter(source, index, *self._keys)
+        super().__init__(getter, setter)
+
+    def __getitem__(self, key: Union[str, int]):
+        return VforStoreItem(self._source, self._data_index, self._keys + [key])
+
+
 class VforStore(Generic[_T]):
     def __init__(self, source: _T_data, index: int) -> None:
         self._source = source
+        self._raw_index = index
         self._data_index = to_ref(index)
 
     @property
     def row_index(self):
+        """Returns the responsive index of the current row."""
         return self._data_index
 
-    def get(self) -> TReadonlyRef[_T]:
-        def base_setter(value):
-            to_value(self._source)[self._data_index.value] = value
+    @property
+    def raw_index(self):
+        """Returns the index of the current row."""
+        return self._raw_index
 
-        wrapper = to_ref_wrapper(
-            lambda: to_value(self._source)[self._data_index.value],
-            base_setter,
-        )
-        wrapper._is_readonly = True
+    def get_item(self) -> _T:
+        """Returns the current item."""
+        return to_value(self._source)[self.raw_index]  # type: ignore
 
-        return cast(TReadonlyRef, wrapper)
+    def get(self) -> Ref[_T]:
+        """Returns a ref object of the current item.
+        Suitable for immutable types such as `int`, `str`, `float`, etc.
+        """
+        return VforStoreItem(self._source, self._data_index)  # type: ignore
 
     def update(self, index: int):
         self._data_index.value = index
@@ -80,10 +135,6 @@ class StoreItem:
     scope: Scope
 
 
-def _get_key_with_index(idx: int, data: Any):
-    return idx
-
-
 def _get_key_with_getter(attr: str, idx: int, data: Any):
     return get_attribute(data, attr)
 
@@ -97,28 +148,27 @@ class vfor(Generic[_T]):
 
 
     ## Examples
-    ```python
-    from ex4nicegui.reactive import rxui
-    from ex4nicegui import to_ref
-    items = to_ref(
-        [
-            {"message": "foo", "done": False},
-            {"message": "bar", "done": True},
-        ]
-    )
 
+    .. code-block:: python
+        from ex4nicegui.reactive import rxui
+        from ex4nicegui import to_ref
+        items = to_ref(
+            [
+                {"message": "foo", "done": False},
+                {"message": "bar", "done": True},
+            ]
+        )
 
-    @rxui.vfor(items,key='message')
-    def _(store: rxui.VforStore):
-        msg_ref = store.get("message")  # this is ref object
 
-        # type text into the input box and
-        # the title of the checkbox changes sync
-        with ui.card():
-            rxui.input(value=msg_ref)
-            rxui.checkbox(text=msg_ref, value=store.get("done"))
+        @rxui.vfor(items,key='message')
+        def _(store: rxui.VforStore):
+            msg_ref = store.get("message")  # this is ref object
 
-    ```
+            # type text into the input box and
+            # the title of the checkbox changes sync
+            with ui.card():
+                rxui.input(value=msg_ref)
+                rxui.checkbox(text=msg_ref, value=store.get("done"))
 
     """
 
@@ -128,9 +178,9 @@ class vfor(Generic[_T]):
         *,
         key: Optional[Union[str, Callable[[int, Any], Any]]] = None,
     ) -> None:
-        self._vfor_container = VforContainer()
         self._data = to_ref_wrapper(lambda: data) if is_reactive(data) else data
-        self._get_key = _get_key_with_index
+        self._get_key = vfor.index_key
+        self._transition_props = {}
 
         if isinstance(key, str):
             self._get_key = partial(_get_key_with_getter, key)
@@ -139,11 +189,27 @@ class vfor(Generic[_T]):
 
         self._store_map: Dict[Union[Any, int], StoreItem] = {}
 
+    def transition_group(
+        self,
+        css=True,
+        name: Optional[str] = "list",
+        duration: Optional[float] = None,
+        type: Optional[Literal["transition", "animation"]] = None,
+        mode: Optional[Literal["in-out", "out-in", "default"]] = None,
+        appear=False,
+    ):
+        kws = {k: v for k, v in locals().items() if k != "self" and v is not None}
+        self._transition_props.update(**kws)
+
+        return self
+
     def __call__(self, fn: Callable[[Any], None]):
+        _vfor_container = VforContainer(self._transition_props)
+
         def build_element(index: int, value):
             key = self._get_key(index, value)
 
-            with self._vfor_container, VforItem() as element:
+            with _vfor_container, VforItem() as element:
                 store = VforStore(self._data, index)  # type: ignore
                 scope = _CLIENT_SCOPE_MANAGER.new_scope()
 
@@ -153,18 +219,27 @@ class vfor(Generic[_T]):
 
             return key, element, store, scope
 
-        for idx, value in enumerate(to_value(self._data)):  # type: ignore
-            key, element, store, scope = build_element(idx, value)
-            self._store_map[key] = StoreItem(store, element.id, scope)
-
         ng_client = ui.context.client
 
-        @on(self._data, deep=True)
+        @on(self._data, deep=True, priority_level=-1)
         def _():
             data_map = {
                 self._get_key(idx, d): d for idx, d in enumerate(to_value(self._data))
             }
 
+            # remove item if it's not in the new data
+            remove_items = [
+                (key, value)
+                for key, value in self._store_map.items()
+                if key not in data_map
+            ]
+
+            for key, item in remove_items:
+                target = ng_client.elements.get(item.elementId)
+                _vfor_container.remove(target)  # type: ignore
+                item.scope.dispose()
+                del self._store_map[key]
+
             for idx, (key, value) in enumerate(data_map.items()):
                 store_item = self._store_map.get(key)
                 if store_item:
@@ -177,22 +252,17 @@ class vfor(Generic[_T]):
                     key, element, store, score = build_element(idx, value)
                     self._store_map[key] = StoreItem(store, element.id, score)
 
-            # remove item
-            remove_items = [
-                (key, value)
-                for key, value in self._store_map.items()
-                if key not in data_map
+            item_ids = [
+                {"key": key, "elementId": self._store_map.get(key).elementId}  # type: ignore
+                for key in data_map.keys()
             ]
 
-            for key, item in remove_items:
-                target = ng_client.elements.get(item.elementId)
-                self._vfor_container.remove(target)  # type: ignore
-                item.scope.dispose()
-                del self._store_map[key]
+            _vfor_container.update_items(item_ids)
+
+    @staticmethod
+    def value_key(_, data):
+        return data
 
-            self._vfor_container.update_items(
-                [
-                    {"key": key, "elementId": self._store_map.get(key).elementId}  # type: ignore
-                    for key in data_map.keys()
-                ]
-            )
+    @staticmethod
+    def index_key(idx, _):
+        return idx

ex4nicegui/reactive/view_model.py

@@ -0,0 +1,160 @@
+from __future__ import annotations
+from typing import Callable, Union, Type, TypeVar
+from ex4nicegui.utils.signals import (
+    deep_ref,
+    is_ref,
+    to_value,
+    to_ref,
+    on,
+    to_raw,
+    ref_computed as computed,
+    Ref,
+)
+from ex4nicegui.utils.types import ReadonlyRef
+from functools import partial
+from signe.core.reactive import NoProxy
+
+_CACHED_VARS_FLAG = "__vm_cached__"
+
+_T = TypeVar("_T")
+
+
+class ViewModel(NoProxy):
+    """A base class for reactive view models.
+
+    @see - https://github.com/CrystalWindSnake/ex4nicegui/blob/main/README.en.md#ViewModel
+
+    @中文文档 - https://gitee.com/carson_add/ex4nicegui/tree/main/#ViewModel
+
+    Example:
+    .. code-block:: python
+        from ex4nicegui import rxui
+
+        class MyVm(rxui.ViewModel):
+            count = rxui.var(0)
+            data = rxui.var(lambda: [1,2,3])
+
+        vm = MyVm()
+
+        rxui.label(vm.count)
+        rxui.number(value=vm.count)
+
+
+    """
+
+    def __init__(self):
+        for name, value in self.__class__.__dict__.items():
+            if is_ref(value):
+                setattr(self, name, deep_ref(to_value(value)))
+            if callable(value) and hasattr(value, _CACHED_VARS_FLAG):
+                setattr(self, name, computed(partial(value, self)))
+
+    @staticmethod
+    def display(model: Union[ViewModel, Type]):
+        result = to_ref("")
+
+        watch_refs = _recursive_to_refs(model)
+
+        all_refs = {
+            key: value for key, value in model.__dict__.items() if is_ref(value)
+        }
+
+        @on(watch_refs)
+        def _():
+            result.value = str(
+                {key: _recursive_to_value(value) for key, value in all_refs.items()}
+            )
+
+        return result
+
+
+def _recursive_to_value(value_or_model):
+    value = to_raw(to_value(value_or_model))
+
+    if isinstance(value, ViewModel):
+        all_refs = {
+            key: value for key, value in value.__dict__.items() if is_ref(value)
+        }
+        return {key: _recursive_to_value(value) for key, value in all_refs.items()}
+    elif isinstance(value, dict):
+        return {key: _recursive_to_value(val) for key, val in value.items()}
+    elif isinstance(value, list):
+        return [_recursive_to_value(val) for val in value]
+    else:
+        return value
+
+
+def _recursive_to_refs(model):
+    result = []
+    stack = [model]
+
+    def handle_ref(value):
+        if is_ref(value):
+            stack.append(value.value)
+            result.append(value)
+
+        elif isinstance(value, (ViewModel, Type)):
+            stack.append(value)
+        elif isinstance(value, dict):
+            stack.append(value)
+
+    while stack:
+        current = stack.pop()
+
+        if isinstance(current, (ViewModel, Type)):
+            for key, value in current.__dict__.items():
+                handle_ref(value)
+
+        elif isinstance(current, dict):
+            for key, value in current.items():
+                handle_ref(value)
+
+        elif isinstance(current, list):
+            for value in current:
+                handle_ref(value)
+
+    return result
+
+
+_T_Var_Value = TypeVar("_T_Var_Value")
+
+
+def var(value: Union[_T_Var_Value, Callable[[], _T_Var_Value]]) -> Ref[_T_Var_Value]:
+    """Create a reactive variable. Only use within rxui.ViewModel.
+
+    Args:
+        value (Union[_T_Var_Value, Callable[[], _T_Var_Value]]): The initial value or a function to generate the initial value.
+
+    Example:
+    .. code-block:: python
+        from ex4nicegui import rxui
+        class MyVm(rxui.ViewModel):
+            count = rxui.var(0)
+            data = rxui.var(lambda: [1,2,3])
+
+
+    """
+    if callable(value):
+        return deep_ref(value())
+    return deep_ref(value)
+
+
+def cached_var(func: Callable[..., _T]) -> ReadonlyRef[_T]:
+    """A decorator to cache the result of a function. Only use within rxui.ViewModel.
+
+    Args:
+        func (Callable): The function to cache.
+
+    Example:
+    .. code-block:: python
+        from ex4nicegui import rxui
+        class MyVm(rxui.ViewModel):
+            name = rxui.var("John")
+
+        @rxui.cached_var
+        def uppper_name(self):
+            return self.name.value.upper()
+
+    """
+    setattr(func, _CACHED_VARS_FLAG, None)
+    return func  # type: ignore