ex4nicegui 0.7.1__tar.gz → 0.8.0__tar.gz

{ex4nicegui-0.7.1 → ex4nicegui-0.8.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: ex4nicegui
-Version: 0.7.1
+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,7 +32,7 @@ Description-Content-Type: text/markdown
 - [教程](#教程)
 - [安装](#-安装)
 - [使用](#-使用)
-- [功能](#-功能)
+- [图表](#-图表)
 - [BI 模块](#bi-模块)
 
 对 [nicegui](https://github.com/zauberzeug/nicegui) 做的扩展库。内置响应式组件，完全实现数据响应式界面编程。
@@ -63,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("")
@@ -77,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],
-        },
-    ],
-}
+from ex4nicegui import rxui, to_ref
 
-bar = rxui.echarts(opts)
+ui.radio.default_props("inline")
 
-def on_click(e: rxui.echarts.EChartsMouseEventArguments):
-    ui.notify(f"on_click:{e.seriesName}:{e.name}:{e.value}")
+# 定义视图数据
+colors = ["red", "green", "blue", "yellow", "purple", "white"]
+color = to_ref("blue")
+bg_color = to_ref("red")
 
 
-bar.on("click", on_click)
-```
+## 函数中通过访问 `ref` 或其他关联函数获取值，一切会自动同步更新
+def bg_text():
+    return f"Current background color is {bg_color.value}"
 
 
-以下例子只针对指定系列触发鼠标划过事件
-```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"})
+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
@@ -268,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)
 
 
@@ -322,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` 装饰器代替。
@@ -330,7 +244,7 @@ with ui.row():
 from ex4nicegui import rxui, Ref,effect_refreshable
 ...
 
-# 明确指定监控 home.persons 变化，可以避免意味刷新
+# 明确指定监控 home.persons 变化，可以避免意外刷新
 @effect_refreshable.on(home.persons)
 def _():
     
@@ -347,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

{ex4nicegui-0.7.1 → ex4nicegui-0.8.0}/README.md

@@ -9,7 +9,7 @@
 - [教程](#教程)
 - [安装](#-安装)
 - [使用](#-使用)
-- [功能](#-功能)
+- [图表](#-图表)
 - [BI 模块](#bi-模块)
 
 对 [nicegui](https://github.com/zauberzeug/nicegui) 做的扩展库。内置响应式组件，完全实现数据响应式界面编程。
@@ -40,10 +40,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("")
@@ -54,127 +54,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],
-        },
-    ],
-}
+from ex4nicegui import rxui, to_ref
 
-bar = rxui.echarts(opts)
+ui.radio.default_props("inline")
 
-def on_click(e: rxui.echarts.EChartsMouseEventArguments):
-    ui.notify(f"on_click:{e.seriesName}:{e.name}:{e.value}")
+# 定义视图数据
+colors = ["red", "green", "blue", "yellow", "purple", "white"]
+color = to_ref("blue")
+bg_color = to_ref("red")
 
 
-bar.on("click", on_click)
-```
+## 函数中通过访问 `ref` 或其他关联函数获取值，一切会自动同步更新
+def bg_text():
+    return f"Current background color is {bg_color.value}"
 
 
-以下例子只针对指定系列触发鼠标划过事件
-```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"})
+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
@@ -245,19 +159,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)
 
 
@@ -299,6 +212,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` 装饰器代替。
@@ -307,7 +221,7 @@ with ui.row():
 from ex4nicegui import rxui, Ref,effect_refreshable
 ...
 
-# 明确指定监控 home.persons 变化，可以避免意味刷新
+# 明确指定监控 home.persons 变化，可以避免意外刷新
 @effect_refreshable.on(home.persons)
 def _():
     
@@ -324,6 +238,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

{ex4nicegui-0.7.1 → ex4nicegui-0.8.0}/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.