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

ex4nicegui/reactive/officials/tabs.py

@@ -2,14 +2,14 @@ from typing import Any, Callable, 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.value_element import ValueElementMixin
 
 
-class TabsBindableUi(BindableUi[ui.tabs]):
+class TabsBindableUi(BindableUi[ui.tabs], ValueElementMixin[str]):
     def __init__(
         self,
         value: Optional[TMaybeRef[str]] = None,
@@ -33,12 +33,7 @@ class TabsBindableUi(BindableUi[ui.tabs]):
         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_effect
-        def _():
-            self.element.set_value(to_value(value))

ex4nicegui/reactive/officials/textarea.py

@@ -16,9 +16,10 @@ from ex4nicegui.utils.signals import (
 from nicegui import ui
 from nicegui.events import handle_event
 from .base import BindableUi
+from ex4nicegui.reactive.mixins.value_element import ValueElementMixin
 
 
-class TextareaBindableUi(BindableUi[ui.textarea]):
+class TextareaBindableUi(BindableUi[ui.textarea], ValueElementMixin[str]):
     def __init__(
         self,
         label: Optional[TMaybeRef[str]] = None,
@@ -53,18 +54,11 @@ class TextareaBindableUi(BindableUi[ui.textarea]):
         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[str]):
-        @self._ui_effect
-        def _():
-            self.element.set_value(to_value(value))
-
-        return self
-
 
 class LazyTextareaBindableUi(TextareaBindableUi):
     def __init__(

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

@@ -33,7 +33,7 @@ class TooltipBindableUi(BindableUi[ui.tooltip]):
         return super().bind_prop(prop, value)
 
     def bind_text(self, text: TGetterOrReadonlyRef):
-        @self._ui_effect
+        @self._ui_signal_on(text)
         def _():
             self.element.set_text(str(to_value(text)))
 

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/view_model.py

@@ -24,7 +24,7 @@ class ViewModel(NoProxy):
 
     @see - https://github.com/CrystalWindSnake/ex4nicegui/blob/main/README.en.md#ViewModel
 
-    @中文文档 - https://gitee.com/carson_add/ex4nicegui/tree/main/#ViewModel
+    @中文文档 - https://gitee.com/carson_add/ex4nicegui/tree/main/#viewmodel
 
     Example:
     .. code-block:: python
@@ -151,9 +151,9 @@ def cached_var(func: Callable[..., _T]) -> ReadonlyRef[_T]:
         class MyVm(rxui.ViewModel):
             name = rxui.var("John")
 
-        @rxui.cached_var
-        def uppper_name(self):
-            return self.name.value.upper()
+            @rxui.cached_var
+            def uppper_name(self):
+                return self.name.value.upper()
 
     """
     setattr(func, _CACHED_VARS_FLAG, None)

{ex4nicegui-0.7.0.dist-info → ex4nicegui-0.8.0.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: ex4nicegui
-Version: 0.7.0
+Version: 0.8.0
 Summary: Extension library based on nicegui, providing data responsive,BI functionality modules
 Home-page: https://github.com/CrystalWindSnake/ex4nicegui
 License: MIT
@@ -16,7 +16,7 @@ Classifier: Programming Language :: Python :: 3.10
 Classifier: Programming Language :: Python :: 3.11
 Classifier: Programming Language :: Python :: 3.12
 Requires-Dist: executing (>=2.0.1,<3.0.0)
-Requires-Dist: nicegui (>=1.4.25,<2.0.0)
+Requires-Dist: nicegui (>=2.0.0,<3.0.0)
 Requires-Dist: signe (>=0.4.20,<0.5.0)
 Project-URL: Repository, https://github.com/CrystalWindSnake/ex4nicegui
 Description-Content-Type: text/markdown
@@ -32,12 +32,16 @@ Description-Content-Type: text/markdown
 - [教程](#教程)
 - [安装](#-安装)
 - [使用](#-使用)
-- [功能](#-功能)
+- [图表](#-图表)
 - [BI 模块](#bi-模块)
 
 对 [nicegui](https://github.com/zauberzeug/nicegui) 做的扩展库。内置响应式组件，完全实现数据响应式界面编程。
 
 
+![todo-app](https://github.com/CrystalWindSnake/ex4nicegui-examples/blob/main/asset/todo-app.02.gif)
+
+[查看更多示例](https://github.com/CrystalWindSnake/ex4nicegui-examples)
+
 ## 教程
 [头条文章-秒杀官方实现，python界面库，去掉90%事件代码的nicegui](https://www.toutiao.com/item/7253786340574265860/)
 
@@ -59,10 +63,10 @@ pip install ex4nicegui -U
 
 ## 🦄 使用
 
+![](./asset/sync_input.gif)
 ```python
 from nicegui import ui
-from ex4nicegui import ref_computed, effect, to_ref
-from ex4nicegui.reactive import rxui
+from ex4nicegui import rxui, ref_computed, effect, to_ref
 
 # 定义响应式数据
 r_input = to_ref("")
@@ -73,127 +77,41 @@ rxui.label(r_input)
 
 ui.run()
 ```
-![](./asset/sync_input.gif)
-
-
-### 提供 echarts 图表组件
-
-```python
-from nicegui import ui
-from ex4nicegui import ref_computed, effect, to_ref
-from ex4nicegui.reactive import rxui
-
-r_input = to_ref("")
-
-# ref_computed 创建只读响应式变量
-# 函数中使用任意其他响应式变量，会自动关联
-@ref_computed
-def cp_echarts_opts():
-    return {
-        "title": {"text": r_input.value}, #字典中使用任意响应式变量，通过 .value 获取值
-        "xAxis": {
-            "type": "category",
-            "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-        },
-        "yAxis": {"type": "value"},
-        "series": [
-            {
-                "data": [120, 200, 150, 80, 70, 110, 130],
-                "type": "bar",
-                "showBackground": True,
-                "backgroundStyle": {"color": "rgba(180, 180, 180, 0.2)"},
-            }
-        ],
-    }
-
-input = rxui.input("输入内容，图表标题会同步", value=r_input)
-# 通过响应式组件对象的 element 属性，获取原生 nicegui 组件对象
-input.element.classes("w-full")
-
-rxui.echarts(cp_echarts_opts)
-
-ui.run()
-```
-![](./asset/asyc_echarts_title.gif)
 
 
-### echarts 图表鼠标事件
-
-`on` 函数参数 `event_name` 以及 `query` 使用,查看[echarts 事件中文文档](https://echarts.apache.org/handbook/zh/concepts/event/)
+---
 
+![colors](https://github.com/CrystalWindSnake/ex4nicegui-examples/blob/main/asset/colors.01.gif)
 
-以下例子绑定鼠标单击事件
 ```python
 from nicegui import ui
-from ex4nicegui.reactive import rxui
-
-opts = {
-    "xAxis": {"type": "value", "boundaryGap": [0, 0.01]},
-    "yAxis": {
-        "type": "category",
-        "data": ["Brazil", "Indonesia", "USA", "India", "China", "World"],
-    },
-    "series": [
-        {
-            "name": "first",
-            "type": "bar",
-            "data": [18203, 23489, 29034, 104970, 131744, 630230],
-        },
-        {
-            "name": "second",
-            "type": "bar",
-            "data": [19325, 23438, 31000, 121594, 134141, 681807],
-        },
-    ],
-}
-
-bar = rxui.echarts(opts)
-
-def on_click(e: rxui.echarts.EChartsMouseEventArguments):
-    ui.notify(f"on_click:{e.seriesName}:{e.name}:{e.value}")
-
-
-bar.on("click", on_click)
-```
+from ex4nicegui import rxui, to_ref
 
+ui.radio.default_props("inline")
 
-以下例子只针对指定系列触发鼠标划过事件
-```python
-from nicegui import ui
-from ex4nicegui.reactive import rxui
+# 定义视图数据
+colors = ["red", "green", "blue", "yellow", "purple", "white"]
+color = to_ref("blue")
+bg_color = to_ref("red")
 
-opts = {
-    "xAxis": {"type": "value", "boundaryGap": [0, 0.01]},
-    "yAxis": {
-        "type": "category",
-        "data": ["Brazil", "Indonesia", "USA", "India", "China", "World"],
-    },
-    "series": [
-        {
-            "name": "first",
-            "type": "bar",
-            "data": [18203, 23489, 29034, 104970, 131744, 630230],
-        },
-        {
-            "name": "second",
-            "type": "bar",
-            "data": [19325, 23438, 31000, 121594, 134141, 681807],
-        },
-    ],
-}
 
-bar = rxui.echarts(opts)
+## 函数中通过访问 `ref` 或其他关联函数获取值，一切会自动同步更新
+def bg_text():
+    return f"Current background color is {bg_color.value}"
 
-def on_first_series_mouseover(e: rxui.echarts.EChartsMouseEventArguments):
-    ui.notify(f"on_first_series_mouseover:{e.seriesName}:{e.name}:{e.value}")
 
+# 界面
 
-bar.on("mouseover", on_first_series_mouseover, query={"seriesName": "first"})
+with ui.row(align_items="center"):
+    rxui.radio(colors, value=color)
+    ## 可以使用 lambda
+    rxui.label(lambda: f"Font color is {color.value}").bind_style({"color": color})
 
-ui.run()
+with ui.row(align_items="center"):
+    rxui.radio(colors, value=bg_color)
+    ## 直接绑定函数
+    rxui.label(bg_text).bind_style({"background-color": bg_color})
 ```
----
-
 
 
 ## ViewModel
@@ -264,19 +182,18 @@ class Home(rxui.ViewModel):
 通过 `number` 组件修改年龄，一切都会自动更新。
 
 ```python
+from typing import List
 from ex4nicegui import rxui, Ref
 from itertools import count
+from nicegui import ui
 
 id_generator = count()
 
 class Person(rxui.ViewModel):
-    name = rxui.var("")
-    age = rxui.var(0)
-
-    def __init__(self, name: str = "", age: int = 0):
+    def __init__(self, name: str, age: int):
         super().__init__()
-        self.name.value = name
-        self.age.value = age
+        self.name = rxui.var(name)
+        self.age = rxui.var(age)
         self.id = next(id_generator)
 
 
@@ -318,6 +235,7 @@ with ui.row():
             rxui.input(value=person.name, placeholder="名字")
             rxui.number(value=person.age, min=1, max=100, step=1, placeholder="年龄")
 
+ui.run()
 ```
 
 如果你觉得 `rxui.vfor` 代码过于复杂，可以使用 `effect_refreshable` 装饰器代替。
@@ -326,7 +244,7 @@ with ui.row():
 from ex4nicegui import rxui, Ref,effect_refreshable
 ...
 
-# 明确指定监控 home.persons 变化，可以避免意味刷新
+# 明确指定监控 home.persons 变化，可以避免意外刷新
 @effect_refreshable.on(home.persons)
 def _():
     
@@ -343,6 +261,127 @@ def _():
 
 ---
 
+## 图表
+
+### 提供 echarts 图表组件
+
+```python
+from nicegui import ui
+from ex4nicegui import ref_computed, effect, to_ref
+from ex4nicegui.reactive import rxui
+
+r_input = to_ref("")
+
+# ref_computed 创建只读响应式变量
+# 函数中使用任意其他响应式变量，会自动关联
+@ref_computed
+def cp_echarts_opts():
+    return {
+        "title": {"text": r_input.value}, #字典中使用任意响应式变量，通过 .value 获取值
+        "xAxis": {
+            "type": "category",
+            "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        "yAxis": {"type": "value"},
+        "series": [
+            {
+                "data": [120, 200, 150, 80, 70, 110, 130],
+                "type": "bar",
+                "showBackground": True,
+                "backgroundStyle": {"color": "rgba(180, 180, 180, 0.2)"},
+            }
+        ],
+    }
+
+input = rxui.input("输入内容，图表标题会同步", value=r_input)
+# 通过响应式组件对象的 element 属性，获取原生 nicegui 组件对象
+input.element.classes("w-full")
+
+rxui.echarts(cp_echarts_opts)
+
+ui.run()
+```
+![](./asset/asyc_echarts_title.gif)
+
+
+### echarts 图表鼠标事件
+
+`on` 函数参数 `event_name` 以及 `query` 使用,查看[echarts 事件中文文档](https://echarts.apache.org/handbook/zh/concepts/event/)
+
+
+以下例子绑定鼠标单击事件
+```python
+from nicegui import ui
+from ex4nicegui.reactive import rxui
+
+opts = {
+    "xAxis": {"type": "value", "boundaryGap": [0, 0.01]},
+    "yAxis": {
+        "type": "category",
+        "data": ["Brazil", "Indonesia", "USA", "India", "China", "World"],
+    },
+    "series": [
+        {
+            "name": "first",
+            "type": "bar",
+            "data": [18203, 23489, 29034, 104970, 131744, 630230],
+        },
+        {
+            "name": "second",
+            "type": "bar",
+            "data": [19325, 23438, 31000, 121594, 134141, 681807],
+        },
+    ],
+}
+
+bar = rxui.echarts(opts)
+
+def on_click(e: rxui.echarts.EChartsMouseEventArguments):
+    ui.notify(f"on_click:{e.seriesName}:{e.name}:{e.value}")
+
+
+bar.on("click", on_click)
+```
+
+
+以下例子只针对指定系列触发鼠标划过事件
+```python
+from nicegui import ui
+from ex4nicegui.reactive import rxui
+
+opts = {
+    "xAxis": {"type": "value", "boundaryGap": [0, 0.01]},
+    "yAxis": {
+        "type": "category",
+        "data": ["Brazil", "Indonesia", "USA", "India", "China", "World"],
+    },
+    "series": [
+        {
+            "name": "first",
+            "type": "bar",
+            "data": [18203, 23489, 29034, 104970, 131744, 630230],
+        },
+        {
+            "name": "second",
+            "type": "bar",
+            "data": [19325, 23438, 31000, 121594, 134141, 681807],
+        },
+    ],
+}
+
+bar = rxui.echarts(opts)
+
+def on_first_series_mouseover(e: rxui.echarts.EChartsMouseEventArguments):
+    ui.notify(f"on_first_series_mouseover:{e.seriesName}:{e.name}:{e.value}")
+
+
+bar.on("mouseover", on_first_series_mouseover, query={"seriesName": "first"})
+
+ui.run()
+```
+---
+
+
 ## 响应式
 
 ```python