ex4nicegui 0.2.3__py3-none-any.whl → 0.2.5__py3-none-any.whl

ex4nicegui/__init__.py

@@ -15,4 +15,4 @@ from ex4nicegui import tools
 from signe import batch
 
 
-__version__ = "0.2.3"
+__version__ = "0.2.5"

ex4nicegui/reactive/__index.py

@@ -1,33 +1,4 @@
-from .officials import (
-    TableBindableUi as table,
-    AggridBindableUi as aggrid,
-    RadioBindableUi as radio,
-    SelectBindableUi as select,
-    SwitchBindableUi as switch,
-    InputBindableUi as input,
-    LazyInputBindableUi as lazy_input,
-    TextareaBindableUi as textarea,
-    LazyTextareaBindableUi as lazy_textarea,
-    CheckboxBindableUi as checkbox,
-    LabelBindableUi as label,
-    IconBindableUi as icon,
-    ButtonBindableUi as button,
-    ColorPickerBindableUi as color_picker,
-    ColorPickerLazyBindableUi as lazy_color_picker,
-    EChartsBindableUi as echarts,
-    RowBindableUi as row,
-    CardBindableUi as card,
-    CardSectionBindableUi as card_section,
-    CardActionsBindableUi as card_actions,
-    SliderBindableUi as slider,
-    LazySliderBindableUi as lazy_slider,
-    HtmlBindableUi as html,
-    ImageBindableUi as image,
-    UploadBindableUi as upload,
-    UploadResult,
-    DrawerBindableUi as drawer,
-    DateBindableUi as date,
-)
+from .officials import *
 from .q_pagination import QPagination as q_pagination
 from .local_file_picker import local_file_picker
 from ex4nicegui.utils.signals import ref_computed
@@ -35,5 +6,4 @@ from signe import effect
 from .UseDraggable.UseDraggable import use_draggable
 from .useMouse.UseMouse import use_mouse
 
-# from .drawer import drawer
 from .usePagination import PaginationRef as use_pagination

ex4nicegui/reactive/officials/__init__.py

@@ -0,0 +1,37 @@
+from .aggrid import AggridBindableUi as aggird
+from .button import ButtonBindableUi as button
+from .card import (
+    CardBindableUi as card,
+    CardActionsBindableUi as card_actions,
+    CardSectionBindableUi as card_section,
+)
+from .checkbox import CheckboxBindableUi as checkbox
+from .color_picker import (
+    ColorPickerBindableUi as color_picker,
+    ColorPickerLazyBindableUi as lazy_color_picker,
+)
+from .date import DateBindableUi as date
+from .drawer import DrawerBindableUi as drawer
+from .echarts import EChartsBindableUi as echarts
+from .html import HtmlBindableUi as html
+from .icon import IconBindableUi as icon
+from .image import ImageBindableUi as image
+from .input import (
+    InputBindableUi as input,
+    LazyInputBindableUi as lazy_input,
+)
+from .label import LabelBindableUi as label
+from .radio import RadioBindableUi as radio
+from .row import RowBindableUi as row
+from .select import SelectBindableUi as select
+from .slider import SliderBindableUi as slider, LazySliderBindableUi as lazy_slider
+from .switch import SwitchBindableUi as switch
+from .table import TableBindableUi as table
+from .textarea import (
+    TextareaBindableUi as textarea,
+    LazyTextareaBindableUi as lazy_textarea,
+)
+from .upload import (
+    UploadBindableUi as upload,
+    UploadResult,
+)

ex4nicegui/reactive/officials/aggrid.py

@@ -0,0 +1,81 @@
+from typing import (
+    List,
+    Dict,
+)
+import ex4nicegui.utils.common as utils_common
+from signe import effect
+from ex4nicegui.utils.signals import (
+    ReadonlyRef,
+    is_ref,
+    ref_computed,
+    _TMaybeRef as TMaybeRef,
+)
+from nicegui import ui
+from .base import BindableUi
+from .utils import _convert_kws_ref2value
+
+
+class AggridBindableUi(BindableUi[ui.aggrid]):
+    def __init__(
+        self,
+        options: TMaybeRef[Dict],
+        *,
+        html_columns: TMaybeRef[List[int]] = [],
+        theme: TMaybeRef[str] = "balham",
+    ) -> None:
+        kws = {
+            "options": options,
+            "html_columns": html_columns,
+            "theme": theme,
+        }
+
+        value_kws = _convert_kws_ref2value(kws)
+
+        element = ui.aggrid(**value_kws)
+
+        super().__init__(element)
+
+        for key, value in kws.items():
+            if is_ref(value):
+                self.bind_prop(key, value)  # type: ignore
+
+    @staticmethod
+    def from_pandas(df: TMaybeRef):
+        if is_ref(df):
+
+            @ref_computed
+            def cp_convert_df():
+                return utils_common.convert_dataframe(df.value)
+
+            @ref_computed
+            def cp_options():
+                columnDefs = [
+                    {"headerName": col, "field": col}
+                    for col in cp_convert_df.value.columns
+                ]
+                rowData = cp_convert_df.value.to_dict("records")
+                data = {"columnDefs": columnDefs, "rowData": rowData}
+                return data
+
+            return AggridBindableUi(cp_options)
+
+        columnDefs = [{"headerName": col, "field": col} for col in df.columns]  # type: ignore
+        rowData = df.to_dict("records")  # type: ignore
+        options = {"columnDefs": columnDefs, "rowData": rowData}
+        return AggridBindableUi(options)
+
+    def bind_prop(self, prop: str, ref_ui: ReadonlyRef):
+        if prop == "options":
+            return self.bind_options(ref_ui)
+
+        return super().bind_prop(prop, ref_ui)
+
+    def bind_options(self, ref_ui: ReadonlyRef[List[Dict]]):
+        @effect
+        def _():
+            ele = self.element
+            data = ref_ui.value
+            ele._props["options"].update(data)
+            ele.update()
+
+        return self

ex4nicegui/reactive/officials/base.py

@@ -0,0 +1,167 @@
+from __future__ import annotations
+
+from typing import (
+    Any,
+    Callable,
+    List,
+    Optional,
+    TypeVar,
+    Generic,
+    cast,
+    overload,
+)
+from typing_extensions import Self
+from signe import effect
+from ex4nicegui.utils.signals import (
+    ReadonlyRef,
+    Ref,
+    to_ref,
+    _TMaybeRef as TMaybeRef,
+)
+from nicegui import Tailwind, ui
+from nicegui.elements.mixins.color_elements import (
+    TextColorElement,
+    QUASAR_COLORS,
+    TAILWIND_COLORS,
+)
+
+T = TypeVar("T")
+
+TWidget = TypeVar("TWidget")
+
+
+class BindableUi(Generic[TWidget]):
+    def __init__(self, element: TWidget) -> None:
+        self.__element = element
+
+    def props(self, add: Optional[str] = None, *, remove: Optional[str] = None):
+        cast(ui.element, self.element).props(add, remove=remove)
+        return self
+
+    def classes(
+        self,
+        add: Optional[str] = None,
+        *,
+        remove: Optional[str] = None,
+        replace: Optional[str] = None,
+    ):
+        cast(ui.element, self.element).classes(add, remove=remove, replace=replace)
+        return self
+
+    def style(
+        self,
+        add: Optional[str] = None,
+        *,
+        remove: Optional[str] = None,
+        replace: Optional[str] = None,
+    ):
+        cast(ui.element, self.element).style(add, remove=remove, replace=replace)
+        return self
+
+    @overload
+    def tailwind(self, *tailwind: Tailwind) -> Self:
+        ...
+
+    @overload
+    def tailwind(self, *classes: str) -> Self:
+        ...
+
+    def tailwind(self, *args):
+        cast(ui.element, self.element).tailwind(*args)
+        return self
+
+    def tooltip(self, text: str) -> Self:
+        cast(ui.element, self.element).tooltip(text)
+        return self
+
+    def add_slot(self, name: str, template: Optional[str] = None):
+        """Add a slot to the element.
+
+        :param name: name of the slot
+        :param template: Vue template of the slot
+        :return: the slot
+        """
+        return cast(ui.element, self.element).add_slot(name, template)
+
+    @property
+    def element(self):
+        return self.__element
+
+    def bind_prop(self, prop: str, ref_ui: ReadonlyRef):
+        if prop == "visible":
+            return self.bind_visible(ref_ui)
+
+        @effect
+        def _():
+            element = cast(ui.element, self.element)
+            element._props[prop] = ref_ui.value
+            element.update()
+
+        return self
+
+    def bind_visible(self, ref_ui: ReadonlyRef[bool]):
+        @effect
+        def _():
+            element = cast(ui.element, self.element)
+            element.set_visibility(ref_ui.value)
+
+        return self
+
+    def on(
+        self,
+        type: str,
+        handler: Optional[Callable[..., Any]] = None,
+        args: Optional[List[str]] = None,
+        *,
+        throttle: float = 0.0,
+        leading_events: bool = True,
+        trailing_events: bool = True,
+    ):
+        ele = cast(ui.element, self.element)
+        ele.on(
+            type,
+            handler,
+            args,
+            throttle=throttle,
+            leading_events=leading_events,
+            trailing_events=trailing_events,
+        )
+
+        return self
+
+    def clear(self) -> None:
+        cast(ui.element, self.element).clear()
+
+
+class SingleValueBindableUi(BindableUi[TWidget], Generic[T, TWidget]):
+    def __init__(self, value: TMaybeRef[T], element: TWidget) -> None:
+        super().__init__(element)
+        self._ref = to_ref(value)
+
+    @property
+    def value(self) -> T:
+        return self._ref.value
+
+    def bind_ref(self, ref: Ref[T]):
+        @effect
+        def _():
+            ref.value = self._ref.value
+
+        return self
+
+
+def _bind_color(bindable_ui: SingleValueBindableUi, ref_ui: ReadonlyRef):
+    @effect
+    def _():
+        ele = cast(TextColorElement, bindable_ui.element)
+        color = ref_ui.value
+
+        if color in QUASAR_COLORS:
+            ele._props[ele.TEXT_COLOR_PROP] = color
+        elif color in TAILWIND_COLORS:
+            ele.classes(replace=f"text-{color}")
+        elif color is not None:
+            ele._style["color"] = color
+        ele.update()
+
+    return bindable_ui

ex4nicegui/reactive/officials/button.py

@@ -0,0 +1,86 @@
+from typing import (
+    Any,
+    Callable,
+    Optional,
+)
+from signe import effect
+from ex4nicegui.utils.signals import (
+    ReadonlyRef,
+    is_ref,
+    _TMaybeRef as TMaybeRef,
+)
+from nicegui import ui
+from .base import SingleValueBindableUi, _bind_color
+from .utils import _convert_kws_ref2value
+
+
+class ButtonBindableUi(SingleValueBindableUi[str, ui.button]):
+    def __init__(
+        self,
+        text: TMaybeRef[str] = "",
+        *,
+        on_click: Optional[Callable[..., Any]] = None,
+        color: Optional[TMaybeRef[str]] = "primary",
+        icon: Optional[TMaybeRef[str]] = None,
+    ) -> None:
+        kws = {
+            "text": text,
+            "color": color,
+            "icon": icon,
+            "on_click": on_click,
+        }
+
+        value_kws = _convert_kws_ref2value(kws)
+
+        element = ui.button(**value_kws)
+
+        super().__init__(text, element)
+
+        for key, value in kws.items():
+            if is_ref(value):
+                self.bind_prop(key, value)  # type: ignore
+
+    def bind_prop(self, prop: str, ref_ui: ReadonlyRef):
+        if prop == "text":
+            return self.bind_text(ref_ui)
+        if prop == "icon":
+            return self.bind_icon(ref_ui)
+        if prop == "color":
+            return self.bind_color(ref_ui)
+
+        return super().bind_prop(prop, ref_ui)
+
+    def bind_color(self, ref_ui: ReadonlyRef):
+        return _bind_color(self, ref_ui)
+
+    def bind_text(self, ref_ui: ReadonlyRef):
+        @effect
+        def _():
+            ele = self.element
+            ele._props["text"] = ref_ui.value
+            ele.update()
+
+        return self
+
+    def bind_icon(self, ref_ui: ReadonlyRef):
+        @effect
+        def _():
+            ele = self.element
+            ele._props["icon"] = ref_ui.value
+            ele.update()
+
+        return self
+
+    def bind_enabled(self, ref_ui: ReadonlyRef[bool]):
+        @effect
+        def _():
+            self.element.on_enabled_change(ref_ui.value)
+
+        return self
+
+    def bind_disable(self, ref_ui: ReadonlyRef[bool]):
+        @effect
+        def _():
+            self.element.on_enabled_change(not ref_ui.value)
+
+        return self

ex4nicegui/reactive/officials/card.py

@@ -0,0 +1,59 @@
+from typing import (
+    Any,
+)
+from nicegui import ui
+from .base import BindableUi
+
+
+class CardBindableUi(BindableUi[ui.card]):
+    def __init__(
+        self,
+    ) -> None:
+        element = ui.card()
+
+        super().__init__(element)
+
+    def __enter__(self):
+        self.element.__enter__()
+        return self
+
+    def __exit__(self, *_: Any):
+        self.element.__exit__(*_)
+
+    def tight(self):
+        """Removes padding and gaps between nested elements."""
+        self.element._classes.clear()
+        self.element._style.clear()
+        return self
+
+
+class CardSectionBindableUi(BindableUi[ui.card_section]):
+    def __init__(
+        self,
+    ) -> None:
+        element = ui.card_section()
+
+        super().__init__(element)
+
+    def __enter__(self):
+        self.element.__enter__()
+        return self
+
+    def __exit__(self, *_: Any):
+        self.element.__exit__(*_)
+
+
+class CardActionsBindableUi(BindableUi[ui.card_actions]):
+    def __init__(
+        self,
+    ) -> None:
+        element = ui.card_actions()
+
+        super().__init__(element)
+
+    def __enter__(self):
+        self.element.__enter__()
+        return self
+
+    def __exit__(self, *_: Any):
+        self.element.__exit__(*_)

ex4nicegui/reactive/officials/checkbox.py

@@ -0,0 +1,68 @@
+from typing import (
+    Any,
+    Callable,
+    Optional,
+    TypeVar,
+    cast,
+)
+from signe import effect
+from ex4nicegui.utils.signals import (
+    ReadonlyRef,
+    is_ref,
+    _TMaybeRef as TMaybeRef,
+)
+from nicegui import ui
+from nicegui.elements.mixins.value_element import ValueElement
+from .base import SingleValueBindableUi
+from .utils import _convert_kws_ref2value
+
+T = TypeVar("T")
+
+
+class CheckboxBindableUi(SingleValueBindableUi[bool, ui.checkbox]):
+    @staticmethod
+    def _setup_(binder: "CheckboxBindableUi"):
+        def onValueChanged(e):
+            binder._ref.value = e.args  # type: ignore
+
+        ele = cast(ValueElement, binder.element)
+
+        @effect
+        def _():
+            ele.value = binder.value
+
+        ele.on("update:modelValue", handler=onValueChanged)
+
+    def __init__(
+        self,
+        text: TMaybeRef[str] = "",
+        *,
+        value: TMaybeRef[bool] = False,
+        on_change: Optional[Callable[..., Any]] = None,
+    ) -> None:
+        kws = {"text": text, "value": value, "on_change": on_change}
+
+        value_kws = _convert_kws_ref2value(kws)
+
+        element = ui.checkbox(**value_kws)
+
+        super().__init__(value, element)
+
+        for key, value in kws.items():
+            if is_ref(value):
+                self.bind_prop(key, value)  # type: ignore
+
+        CheckboxBindableUi._setup_(self)
+
+    def bind_prop(self, prop: str, ref_ui: ReadonlyRef):
+        if prop == "value":
+            return self.bind_value(ref_ui)
+
+        return super().bind_prop(prop, ref_ui)
+
+    def bind_value(self, ref_ui: ReadonlyRef[bool]):
+        @effect
+        def _():
+            self.element.on_value_change(ref_ui.value)
+
+        return self

ex4nicegui/reactive/officials/color_picker.py

@@ -0,0 +1,101 @@
+from typing import (
+    Any,
+    Callable,
+    Optional,
+    Union,
+)
+from signe import effect
+from ex4nicegui.utils.signals import (
+    ReadonlyRef,
+    is_ref,
+    _TMaybeRef as TMaybeRef,
+)
+from nicegui import ui
+from .base import SingleValueBindableUi
+from .utils import _convert_kws_ref2value
+
+
+class ColorPickerBindableUi(SingleValueBindableUi[str, ui.color_picker]):
+    def __init__(
+        self,
+        color: TMaybeRef[str] = "",
+        *,
+        on_pick: Optional[Callable[..., Any]] = None,
+        value: TMaybeRef[bool] = False,
+    ) -> None:
+        kws = {
+            "value": value,
+            "on_pick": on_pick,
+        }
+
+        value_kws = _convert_kws_ref2value(kws)
+
+        with ui.card().tight():
+            element_menu = ui.color_picker(**value_kws)
+            self._element_picker = element_menu.default_slot.children[0]
+            self._element_picker.props(f'format-model="rgba"')
+
+            ui.button(on_click=element_menu.open, icon="colorize")
+
+        super().__init__(color, element_menu)
+
+        for key, value in kws.items():
+            if is_ref(value) and key != "color":
+                self.bind_prop(key, value)  # type: ignore
+
+        self._ex_setup()
+
+    def _ex_setup(self):
+        ele = self._element_picker
+
+        @effect
+        def _():
+            ele._props["modelValue"] = self.value
+
+        def onModelValueChanged(e):
+            self._ref.value = e.args  # type: ignore
+
+        ele.on("update:modelValue", handler=onModelValueChanged)
+
+    def bind_prop(self, prop: str, ref_ui: ReadonlyRef):
+        if prop == "value":
+            return self.bind_value(ref_ui)
+
+        return super().bind_prop(prop, ref_ui)
+
+    def bind_color(self, ref_ui: ReadonlyRef[str]):
+        @effect
+        def _():
+            self._element_picker._props["modelValue"] = ref_ui.value
+
+        return self
+
+    def bind_value(self, ref_ui: ReadonlyRef[bool]):
+        @effect
+        def _():
+            self._element_picker._props["value"] = ref_ui.value
+
+        return self
+
+
+class ColorPickerLazyBindableUi(ColorPickerBindableUi):
+    def __init__(
+        self,
+        color: TMaybeRef[str] = "",
+        *,
+        on_pick: Optional[Callable[..., Any]] = None,
+        value: TMaybeRef[bool] = False,
+    ) -> None:
+        super().__init__(color, on_pick=on_pick, value=value)
+
+    def _ex_setup(self):
+        ele = self._element_picker
+
+        # @effect
+        # def _():
+        #     ele._props["modelValue"] = self.value
+
+        def onModelValueChanged(e):
+            self._ref.value = e.args  # type: ignore
+
+        ele.on("change", handler=onModelValueChanged)