ex4nicegui 0.2.16__py3-none-any.whl → 0.2.18__py3-none-any.whl

ex4nicegui/__init__.py

@@ -16,4 +16,4 @@ from signe import batch
 from ex4nicegui.experimental_ import gridLayout as exp_ui
 
 
-__version__ = "0.2.16"
+__version__ = "0.2.18"

ex4nicegui/experimental_/gridLayout/__init__.py

@@ -1 +1 @@
-from .index import column, row, item
+from .index import column, row, item, grid_flex

ex4nicegui/experimental_/gridLayout/index.py

@@ -4,7 +4,39 @@ from nicegui import ui
 from typing_extensions import Literal
 from typing import Optional, Union
 
-TBreakpoint = Literal["xs[>0]", "sm[>600]", "md[>1024]", "lg[>1440]", "xl[>1920]"]
+TBreakpoint = Literal[
+    "xs[0px]",
+    "sm[600px]",
+    "md[1024px]",
+    "lg[1440px]",
+    "xl[1920px]",
+    ">xs[0px]",
+    "<sm[600px]",
+    ">sm[600px]",
+    "<md[1024px]",
+    ">md[1024px]",
+    "<lg[1440px]",
+    ">lg[1440px]",
+    "<xl[1920px]",
+    ">xl[1920px]",
+]
+
+Breakpoint_map = {
+    "xs[0px]": "xs",
+    "sm[600px]": "sm",
+    "md[1024px]": "md",
+    "lg[1440px]": "lg",
+    "xl[1920px]": "xl",
+    ">xs[0px]": "gt-xs",
+    "<sm[600px]": "lt-sm",
+    ">sm[600px]": "gt-sm",
+    "<md[1024px]": "lt-md",
+    ">md[1024px]": "gt-md",
+    "<lg[1440px]": "lt-lg",
+    ">lg[1440px]": "gt-lg",
+    "<xl[1920px]": "lt-xl",
+    ">xl[1920px]": "gt-xl",
+}
 
 
 def _gap_value(value: Union[str, float, int]):
@@ -29,6 +61,79 @@ Vertical_map = {
     "stretch": "stretch",
 }
 
+_TGrid_Type = Literal["row", "column"]
+
+
+class GridFlex(ui.element):
+    def __init__(self) -> None:
+        """ """
+        super().__init__("div")
+        self._classes = ["grid"]
+
+    @staticmethod
+    def set_classes(
+        grid_flex: "GridFlex",
+        type: _TGrid_Type,
+        template: str,
+        horizontal: THorizontal = "stretch",
+        vertical: TVertical = "stretch",
+        gap: Union[str, float, int] = 1,
+        width_full=True,
+        break_point: Optional[TBreakpoint] = None,
+    ):
+        _template = template.strip().replace(" ", "_")
+        _type = f"{type}s"
+        _justify_items = f"justify-items-{Horizontal_map[horizontal]}"
+        _align_items = f"items-{Vertical_map[vertical]}"
+        _gap = f"gap-[{_gap_value(gap)}]"
+        _w_full = "w-full" if width_full else ""
+
+        class_names = [
+            f"grid-{_type}-[{_template}]",
+            _justify_items,
+            _align_items,
+            _gap,
+            _w_full,
+        ]
+
+        if break_point is not None:
+            class_names = [f"{Breakpoint_map[break_point]}-{n}" for n in class_names]
+
+        grid_flex.classes(" ".join(class_names))
+        return grid_flex
+
+    def grid_flex(
+        self,
+        type: _TGrid_Type,
+        template: str,
+        *,
+        horizontal: THorizontal = "stretch",
+        vertical: TVertical = "stretch",
+        gap: Union[str, float, int] = 1,
+        width_full=True,
+        break_point: Optional[TBreakpoint] = None,
+    ):
+        return GridFlex.set_classes(
+            self, type, template, horizontal, vertical, gap, width_full, break_point
+        )
+
+
+def grid_flex(
+    type: _TGrid_Type,
+    template: str,
+    *,
+    horizontal: THorizontal = "stretch",
+    vertical: TVertical = "stretch",
+    gap: Union[str, float, int] = 1,
+    width_full=True,
+    break_point: Optional[TBreakpoint] = None,
+):
+    gf = GridFlex()
+
+    return GridFlex.set_classes(
+        gf, type, template, horizontal, vertical, gap, width_full, break_point
+    )
+
 
 def column(
     template: str,

ex4nicegui/layout/__init__.py

@@ -1 +1,2 @@
-from .gridbox import grid_box
+from .gridFlex import *
+from .rxFlex import *

ex4nicegui/layout/gridFlex/GridFlex.js

@@ -0,0 +1,156 @@
+const M = Vue.getCurrentScope
+const _ = Vue.onScopeDispose
+const k = Vue.toRef
+const q = Vue.readonly
+const j = Vue.customRef
+const d = Vue.ref
+const m = Vue.computed
+const B = Vue.watchEffect
+const L = Vue.getCurrentInstance
+const C = Vue.onMounted
+const N = Vue.defineComponent
+const R = Vue.openBlock
+const G = Vue.createElementBlock
+const W = Vue.normalizeStyle
+const z = Vue.unref
+const D = Vue.renderSlot
+function F(n) {
+  return M() ? (_(n), !0) : !1;
+}
+const I = typeof window < "u", Q = () => {
+};
+function P(n, s) {
+  var r;
+  if (typeof n == "number")
+    return n + s;
+  const o = ((r = n.match(/^-?[0-9]+\.?[0-9]*/)) == null ? void 0 : r[0]) || "", l = n.slice(o.length), t = Number.parseFloat(o) + s;
+  return Number.isNaN(t) ? n : t + l;
+}
+function U(...n) {
+  if (n.length !== 1)
+    return k(...n);
+  const s = n[0];
+  return typeof s == "function" ? q(j(() => ({ get: s, set: Q }))) : d(s);
+}
+const p = I ? window : void 0;
+function V() {
+  const n = d(!1);
+  return L() && C(() => {
+    n.value = !0;
+  }), n;
+}
+function A(n) {
+  const s = V();
+  return m(() => (s.value, !!n()));
+}
+function c(n, s = {}) {
+  const { window: r = p } = s, o = A(() => r && "matchMedia" in r && typeof r.matchMedia == "function");
+  let l;
+  const t = d(!1), i = () => {
+    l && ("removeEventListener" in l ? l.removeEventListener("change", e) : l.removeListener(e));
+  }, e = () => {
+    o.value && (i(), l = r.matchMedia(U(n).value), t.value = !!(l != null && l.matches), l && ("addEventListener" in l ? l.addEventListener("change", e) : l.addListener(e)));
+  };
+  return B(e), F(() => i()), t;
+}
+function H(n, s = {}) {
+  function r(e, u) {
+    let a = n[e];
+    return u != null && (a = P(a, u)), typeof a == "number" && (a = `${a}px`), a;
+  }
+  const { window: o = p } = s;
+  function l(e) {
+    return o ? o.matchMedia(e).matches : !1;
+  }
+  const t = (e) => c(`(min-width: ${r(e)})`, s), i = Object.keys(n).reduce((e, u) => (Object.defineProperty(e, u, {
+    get: () => t(u),
+    enumerable: !0,
+    configurable: !0
+  }), e), {});
+  return Object.assign(i, {
+    greater(e) {
+      return c(`(min-width: ${r(e, 0.1)})`, s);
+    },
+    greaterOrEqual: t,
+    smaller(e) {
+      return c(`(max-width: ${r(e, -0.1)})`, s);
+    },
+    smallerOrEqual(e) {
+      return c(`(max-width: ${r(e)})`, s);
+    },
+    between(e, u) {
+      return c(`(min-width: ${r(e)}) and (max-width: ${r(u, -0.1)})`, s);
+    },
+    isGreater(e) {
+      return l(`(min-width: ${r(e, 0.1)})`);
+    },
+    isGreaterOrEqual(e) {
+      return l(`(min-width: ${r(e)})`);
+    },
+    isSmaller(e) {
+      return l(`(max-width: ${r(e, -0.1)})`);
+    },
+    isSmallerOrEqual(e) {
+      return l(`(max-width: ${r(e)})`);
+    },
+    isInBetween(e, u) {
+      return l(`(min-width: ${r(e)}) and (max-width: ${r(u, -0.1)})`);
+    },
+    current() {
+      const e = Object.keys(n).map((u) => [u, t(u)]);
+      return m(() => e.filter(([, u]) => u.value).map(([u]) => u));
+    }
+  });
+}
+const T = /* @__PURE__ */ N({
+  __name: "GridFlex",
+  props: {
+    normalStyles: null,
+    breakpointStyleMap: null
+  },
+  setup(n) {
+    const s = n, r = m(() => new Map(
+      Object.entries(s.breakpointStyleMap)
+    ));
+    function o() {
+      const t = H({
+        sm: 600,
+        md: 1024,
+        lg: 1440,
+        xl: 1920
+      }), i = t.smaller("sm"), e = t.between("sm", "md"), u = t.between("md", "lg"), a = t.between("lg", "xl"), g = t.greaterOrEqual("xl"), h = t.smaller("sm"), w = t.smaller("md"), v = t.smaller("lg"), y = t.smaller("xl"), x = t.greaterOrEqual("sm"), b = t.greaterOrEqual("md"), O = t.greaterOrEqual("lg"), S = t.greaterOrEqual("xl"), E = {
+        xs: i,
+        sm: e,
+        md: u,
+        lg: a,
+        xl: g,
+        "lt-sm": h,
+        "lt-md": w,
+        "lt-lg": v,
+        "lt-xl": y,
+        "gt-xs": x,
+        "gt-sm": b,
+        "gt-md": O,
+        "gt-lg": S
+      };
+      return m(() => {
+        if (r.value.size === 0)
+          return s.normalStyles;
+        for (const [f, $] of Object.entries(E))
+          if ($.value && r.value.has(f))
+            return r.value.get(f);
+        return s.normalStyles;
+      });
+    }
+    const l = o();
+    return (t, i) => (R(), G("div", {
+      class: "grid",
+      style: W(z(l))
+    }, [
+      D(t.$slots, "default")
+    ], 4));
+  }
+});
+export {
+  T as default
+};

ex4nicegui/layout/gridFlex/__init__.py

@@ -0,0 +1 @@
+from .gridFlex import grid_flex, grid_box, mark_area, item_position, GridFlex

ex4nicegui/layout/gridFlex/gridFlex.py

@@ -0,0 +1,276 @@
+from typing import Any, Callable, Dict, Optional, cast
+from dataclasses import dataclass
+from nicegui.dataclasses import KWONLY_SLOTS
+from nicegui import ui, app
+from nicegui.element import Element
+from signe import createSignal, effect, batch
+from ex4nicegui.utils.signals import ref_from_signal
+
+from typing_extensions import Literal
+from typing import Optional, Union
+from . import utils
+
+
+TBreakpoint = Literal[
+    "xs[0px-599.99px]",
+    "sm[600px-1023.99px]",
+    "md[1024px-1439.99px]",
+    "lg[1440px-1919.99px]",
+    "xl[1920px-Infinity]",
+    ">xs[600px-Infinity]",
+    "<sm[0-599.99px]",
+    ">sm[1024px-Infinity]",
+    "<md[0-1023.99px]",
+    ">md[1440px-Infinity]",
+    "<lg[0-1439.99px]",
+    ">lg[1920px-Infinity]",
+    "<xl[0-1919.99px]",
+]
+
+Breakpoint_map = {
+    "xs[0px-599.99px]": "xs",
+    "sm[600px-1023.99px]": "sm",
+    "md[1024px-1439.99px]": "md",
+    "lg[1440px-1919.99px]": "lg",
+    "xl[1920px-Infinity]": "xl",
+    ">xs[600px-Infinity]": "gt-xs",
+    "<sm[0-599.99px]": "lt-sm",
+    ">sm[1024px-Infinity]": "gt-sm",
+    "<md[0-1023.99px]": "lt-md",
+    ">md[1440px-Infinity]": "gt-md",
+    "<lg[0-1439.99px]": "lt-lg",
+    ">lg[1920px-Infinity]": "gt-lg",
+    "<xl[0-1919.99px]": "lt-xl",
+}
+
+
+def _gap_value(value: Optional[Union[str, float, int]]):
+    if value is None:
+        return value
+
+    if isinstance(value, (float, int)):
+        value = f"{value}rem"
+    return value
+
+
+THorizontal = Literal["left", "center", "right", "stretch"]
+Horizontal_map = {
+    "left": "start",
+    "center": "center",
+    "right": "end",
+    "stretch": "stretch",
+}
+
+TVertical = Literal["top", "center", "bottom", "stretch"]
+Vertical_map = {
+    "top": "start",
+    "center": "center",
+    "bottom": "end",
+    "stretch": "stretch",
+}
+
+_TGrid_Type = Literal["row", "column"]
+Grid_Type_map = {
+    "row": "columns",
+    "column": "rows",
+}
+
+
+class GridFlex(Element, component="GridFlex.js"):
+    def __init__(self) -> None:
+        super().__init__()
+
+        self._props["normalStyles"] = {}
+        self._props["breakpointStyleMap"] = {}
+
+        self.__breakpointStyleMap = {}
+
+    @staticmethod
+    def _cleanStyle(styles: Dict):
+        return {k: v for k, v in styles.items() if v is not None}
+
+    @staticmethod
+    def to_styles(
+        type: _TGrid_Type,
+        template: str,
+        horizontal: THorizontal = "stretch",
+        vertical: TVertical = "stretch",
+        gap: Union[str, float, int] = 1,
+        width_full=True,
+    ):
+        styles = {
+            f"grid-template-{Grid_Type_map[type]}": template,
+            "justify-items": Horizontal_map[horizontal],
+            "align-items": Vertical_map[vertical],
+            "gap": _gap_value(gap),
+        }
+
+        if width_full:
+            styles.update({"width": "100%"})
+
+        return styles
+
+    def grid_flex(
+        self,
+        type: _TGrid_Type,
+        template: str,
+        *,
+        horizontal: THorizontal = "stretch",
+        vertical: TVertical = "stretch",
+        gap: Union[str, float, int] = 1,
+        width_full=True,
+        break_point: Optional[TBreakpoint] = None,
+    ):
+        styles = GridFlex.to_styles(
+            type, template, horizontal, vertical, gap, width_full
+        )
+
+        if break_point is None:
+            self._props["normalStyles"] = styles
+        else:
+            self.__breakpointStyleMap[Breakpoint_map[break_point]] = styles
+            self._props["breakpointStyleMap"] = self.__breakpointStyleMap
+
+        self.update()
+        return self
+
+    def grid_box(
+        self,
+        area: Optional[str] = None,
+        *,
+        template_rows: Optional[str] = None,
+        template_columns: Optional[str] = None,
+        horizontal: THorizontal = "stretch",
+        vertical: TVertical = "stretch",
+        gap: Optional[Union[str, float, int]] = 1,
+        width_full=True,
+        break_point: Optional[TBreakpoint] = None,
+        **kws,
+    ):
+        if area is not None and area.strip() != "":
+            areas_list = utils.areas_str2array(area)
+            area = utils.areas_array2str(areas_list)
+            areas_cols_len = max(map(len, areas_list))
+            areas_rows_len = len(areas_list)
+
+            template_columns = template_columns or f"repeat({areas_cols_len}, 1fr)"
+            template_rows = template_rows or f"repeat({areas_rows_len}, 1fr)"
+
+        styles = {
+            "grid-template-areas": area,
+            "grid-template-rows": template_rows,
+            "grid-template-columns": template_columns,
+            "justify-items": Horizontal_map[horizontal],
+            "align-items": Vertical_map[vertical],
+            "gap": _gap_value(gap),
+        }
+        styles.update(kws)
+
+        if width_full:
+            styles.update({"width": "100%"})
+
+        styles = GridFlex._cleanStyle(styles)
+
+        if break_point is None:
+            self._props["normalStyles"] = styles
+        else:
+            self.__breakpointStyleMap[Breakpoint_map[break_point]] = styles
+            self._props["breakpointStyleMap"] = self.__breakpointStyleMap
+
+        self.update()
+        return self
+
+
+def grid_box(
+    area: Optional[str] = None,
+    *,
+    template_rows: Optional[str] = None,
+    template_columns: Optional[str] = None,
+    horizontal: THorizontal = "stretch",
+    vertical: TVertical = "stretch",
+    gap: Union[str, float, int] = 1,
+    width_full=True,
+    break_point: Optional[TBreakpoint] = None,
+    **kws,
+):
+    gf = GridFlex()
+
+    gf.grid_box(
+        area,
+        template_rows=template_rows,
+        template_columns=template_columns,
+        horizontal=horizontal,
+        vertical=vertical,
+        gap=gap,
+        width_full=width_full,
+        break_point=break_point,
+        **kws,
+    )
+
+    return gf
+
+
+def grid_flex(
+    type: _TGrid_Type,
+    template: str,
+    *,
+    horizontal: THorizontal = "stretch",
+    vertical: TVertical = "stretch",
+    gap: Union[str, float, int] = 1,
+    width_full=True,
+    break_point: Optional[TBreakpoint] = None,
+):
+    gf = GridFlex()
+
+    gf.grid_flex(
+        type,
+        template,
+        horizontal=horizontal,
+        vertical=vertical,
+        gap=gap,
+        width_full=width_full,
+        break_point=break_point,
+    )
+
+    return gf
+
+
+class MarkArea:
+    def __init__(self, mark: str) -> None:
+        self.mark = mark
+
+    def __radd__(self, other: ui.element):
+        other.style(f"grid-area:{self.mark}")
+        return other
+
+
+def mark_area(mark: str):
+    return MarkArea(mark)
+
+
+class ItemPosition:
+    def __init__(
+        self,
+        horizontal: Optional[THorizontal] = None,
+        vertical: Optional[TVertical] = None,
+    ) -> None:
+        self.horizontal = horizontal
+        self.vertical = vertical
+
+    def __radd__(self, other: ui.element):
+        res = []
+        if self.horizontal is not None:
+            res.append(f"justify-self-{Horizontal_map[self.horizontal]}")
+
+        if self.vertical is not None:
+            res.append(f"self-{Vertical_map[self.vertical]}")
+
+        other.classes(" ".join(res))
+
+        return other
+
+
+def item_position(
+    *, horizontal: Optional[THorizontal] = None, vertical: Optional[TVertical] = None
+):
+    return ItemPosition(horizontal, vertical)

ex4nicegui/layout/gridFlex/utils.py

@@ -0,0 +1,48 @@
+from typing import List
+
+
+def areas_str2array(areas: str) -> List[List[str]]:
+    """
+    >>> input='''
+        sc1 sc2
+        sc3
+        table table table table
+    '''
+    >>> areas_str2array(input)
+    >>> [
+        ["sc1", "sc2"],
+        ["sc3"],
+        ["table", "table", "table", "table"]
+    ]
+    """
+    pass
+
+    lines = (line.strip() for line in areas.splitlines())
+    remove_empty_rows = (line for line in lines if len(line) > 0)
+    splie_space = (line.split() for line in remove_empty_rows)
+    return list(splie_space)
+
+
+def areas_array2str(areas_array: List[List[str]]):
+    """
+    >>> input = [
+        ["sc1", "sc2"],
+        ["sc3"],
+        ["table"] * 4
+    ]
+    >>> areas_array2str(input)
+    >>> '"sc1 sc2 . ." "sc3 . . ." "table table table table"'
+    """
+    max_len = max(map(len, areas_array))
+
+    fix_empty = (
+        [*line, *(["."] * (max_len - len(line)))] if len(line) < max_len else line
+        for line in areas_array
+    )
+
+    line2str = (f'"{" ".join(line)}"' for line in fix_empty)
+    return " ".join(line2str)
+
+
+def best_grid_template_columns(min_column_size: str):
+    return f"repeat(auto-fit,minmax(min({min_column_size},100%),1fr))"

ex4nicegui/layout/rxFlex/__init__.py

@@ -0,0 +1 @@
+from .index import rx_column, rx_row

ex4nicegui/layout/rxFlex/index.py

@@ -0,0 +1,121 @@
+from typing import Callable, List, Optional, Union, TypeVar, Generic
+from typing_extensions import Literal
+
+from ex4nicegui.layout import grid_box, mark_area
+from nicegui import ui, app
+from .types import *
+
+_T_itemWraper_add_var = TypeVar("_T_itemWraper_add_var")
+
+
+class ItemWraper:
+    def __init__(self, fn: Callable[[ui.element], ui.element]):
+        self.fn = fn
+
+    def __radd__(self, other: _T_itemWraper_add_var) -> _T_itemWraper_add_var:
+        return self.fn(other)  # type: ignore
+
+
+class rx_flex_box(ui.element):
+    def space(self):
+        return ui.element("q-space")
+
+    def gap(self, value: Union[int, float, str]):
+        if isinstance(value, (int, float)):
+            value = f"{value}rem"
+        self._style["gap"] = str(value)
+        self.update()
+        return self
+
+    def all_items_grow(self):
+        self._props["ex4ng-rx-flex-auto-grow"] = ""
+        return self
+
+
+def _q_space():
+    return ui.element("q-space")
+
+
+class rx_column(ui.column, rx_flex_box):
+    def __init__(
+        self,
+        horizontal: TColumn_Horizontal = "left",
+        vertical: TColumn_Vertical = "top",
+    ) -> None:
+        super().__init__()
+        self.tailwind.align_items
+        self.horizontal(horizontal)
+        self.vertical(vertical)
+
+        self._props["ex4ng-rx-column"] = ""
+
+    def item_horizontal(self, value: TColumn_Item_Horizontal):
+        def fn(ele: ui.element):
+            ele._style["align-self"] = Column_Item_Horizontal_map.get(value, value)
+            # ele.update()
+            return ele
+
+        return ItemWraper(fn)
+
+    def horizontal(self, value: TColumn_Horizontal):
+        self._style["align-items"] = Column_Horizontal_map.get(value, value)
+        self.update()
+        return self
+
+    def vertical(self, value: TColumn_Vertical):
+        self._style["justify-content"] = Column_Vertical_map.get(value, value)
+        self.update()
+        return self
+
+    def space(self):
+        return _q_space()
+
+
+class rx_row(ui.row, rx_flex_box):
+    def __init__(
+        self,
+        horizontal: TRow_Horizontal = "left",
+        vertical: TRow_Vertical = "top",
+    ) -> None:
+        super().__init__()
+        self.horizontal(horizontal)
+        self.vertical(vertical)
+        self._props["ex4ng-rx-row"] = ""
+
+    def item_vertical(self, value: TRow_Item_Vertical):
+        def fn(ele: ui.element):
+            ele._style["align-self"] = Row_Vertical_map.get(value, value)
+            return ele
+
+        return ItemWraper(fn)
+
+    def horizontal(self, value: TRow_Horizontal):
+        self._style["justify-content"] = Row_Horizontal_map.get(value, value)
+        self.update()
+        return self
+
+    def vertical(self, value: TRow_Vertical):
+        self._style["align-items"] = Row_Vertical_map.get(value, value)
+        self.update()
+        return
+
+    def space(self):
+        return _q_space()
+
+
+class page_view(rx_column):
+    def __init__(
+        self,
+        horizontal: TColumn_Horizontal = "left",
+        vertical: TColumn_Vertical = "top",
+    ) -> None:
+        super().__init__(horizontal, vertical)
+        self.classes("w-full h-full no-wrap")
+        ui.query("main.q-page").classes("flex")
+        ui.query(".nicegui-content").classes("grow p-0")
+
+    def all_center(self):
+        return self.horizontal("center").vertical("center")
+
+    def full_screen(self):
+        return self.classes("fullscreen")

ex4nicegui/layout/rxFlex/types.py

@@ -0,0 +1,80 @@
+# region type
+
+from typing_extensions import Literal
+
+
+Space_map = {
+    "between": "space-between",
+    "around": "space-around",
+    "evenly": "space-evenly",
+}
+
+TColumn_Item_Horizontal = Literal[
+    "auto",
+    "left",
+    "right",
+    "center",
+    "stretch",
+    "baseline",
+]
+Column_Item_Horizontal_map = {"left": "flex-start", "right": "flex-end"}
+
+
+TColumn_Horizontal = Literal[
+    "left",
+    "right",
+    "center",
+    "baseline",
+    "stretch",
+]
+
+Column_Horizontal_map = {"left": "flex-start", "right": "flex-end"}
+
+TColumn_Vertical = Literal[
+    "normal",
+    "top",
+    "bottom",
+    "center",
+    "between",
+    "around",
+    "evenly",
+    "stretch",
+]
+
+Column_Vertical_map = {"top": "flex-start", "bottom": "flex-end", **Space_map}
+
+
+TRow_Horizontal = Literal[
+    "normal",
+    "left",
+    "right",
+    "center",
+    "between",
+    "around",
+    "evenly",
+    "stretch",
+]
+
+Row_Horizontal_map = {"left": "flex-start", "right": "flex-end", **Space_map}
+
+TRow_Vertical = Literal[
+    "top",
+    "bottom",
+    "center",
+    "baseline",
+    "stretch",
+]
+
+Row_Vertical_map = {"top": "flex-start", "bottom": "flex-end"}
+
+
+TRow_Item_Vertical = Literal[
+    "auto",
+    "top",
+    "bottom",
+    "center",
+    "stretch",
+    "baseline",
+]
+TRow_Item_Vertical_map = {"top": "flex-start", "bottom": "flex-end"}
+# endregion

ex4nicegui/reactive/EChartsComponent/ECharts.js

@@ -43959,16 +43959,21 @@ const TX = { class: "echart-container relative" }, CX = /* @__PURE__ */ GL({
     });
     let i = null;
     Db(() => {
-      i = dV(n.value, a.theme), i.setOption(a.options), og(() => a.options, (s) => {
-        console.log(s), i == null || i.setOption(s);
-      }), i.on("click", (s) => {
-        t("chartClick", s);
-      }), i.getZr().on("click", function(s) {
-        s.target || t("chartClickBlank");
-      }), ZL("resize", () => {
-        i == null || i.resize();
+      i = dV(n.value, a.theme), i.setOption(a.options), og(() => a.options, (l) => {
+        i == null || i.setOption(l);
+      }), i.on("click", (l) => {
+        t("chartClick", l);
+      }), i.getZr().on("click", function(l) {
+        l.target || t("chartClickBlank");
+      });
+      function s() {
+        const l = n.value.getBoundingClientRect();
+        i == null || i.resize({ width: l.width - 5, height: l.height - 5 });
+      }
+      ZL("resize", () => {
+        s();
       }), JL(n, () => {
-        i == null || i.resize();
+        s();
       });
     });
     function o(s, l) {

{ex4nicegui-0.2.16.dist-info → ex4nicegui-0.2.18.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: ex4nicegui
-Version: 0.2.16
+Version: 0.2.18
 Summary: ...
 Home-page: 
 Author: carson_jia

{ex4nicegui-0.2.16.dist-info → ex4nicegui-0.2.18.dist-info}/RECORD

@@ -1,9 +1,15 @@
-ex4nicegui/__init__.py,sha256=iH1dCSRqN6WObCWpEs1ZD4F8BGbIHV-gvHea9EiwZk0,397
+ex4nicegui/__init__.py,sha256=_MbAAhRG7NTi391YxBHeqLpmetZrRQLlqtgHG8Nqebs,397
 ex4nicegui/experimental_/__init__.py,sha256=LSDd_U6eQ9g9St9kC4daau3MFGlVCRHGZJC4E0JRH34,36
-ex4nicegui/experimental_/gridLayout/__init__.py,sha256=XUIJ-uC9LTYjVosPQO9u6GCOen1xoEswa8G9uxemJls,38
-ex4nicegui/experimental_/gridLayout/index.py,sha256=2W1UStrShDPraBC27DuHSKqUEDSUKxE2ImBaL_qzMsg,2041
-ex4nicegui/layout/__init__.py,sha256=YoqBfyScFcWBw8EA77HygHMEc1O5AoQuOHLi6GcXtos,31
-ex4nicegui/layout/gridbox.py,sha256=yQuSFx4EpK_x6qRm1vIv6uHNOYa7XAZDTz5W_AMy7A8,2387
+ex4nicegui/experimental_/gridLayout/__init__.py,sha256=48y_Pm0xxgC_PRnixQB5R_5rPL4FuyeoeOao_W7pm7A,49
+ex4nicegui/experimental_/gridLayout/index.py,sha256=zFXuvFroo5EC1CFjt-b4hMiEy67hGP5J1GYTKH6kpUU,4737
+ex4nicegui/layout/__init__.py,sha256=yYkdH0bC1nxIDr_OtvyTqR_yXkwnY5DmelaQOIwwjas,48
+ex4nicegui/layout/gridFlex/GridFlex.js,sha256=ljkxGFucBUIPksMAT5w_35sxGogC7OzxzXnOw21Z3_k,4468
+ex4nicegui/layout/gridFlex/__init__.py,sha256=98dcrOEROibl5fnzIj644CnELbUvYTid702IjhLdpfs,79
+ex4nicegui/layout/gridFlex/gridFlex.py,sha256=8zMHKgh23wVr3TXVcvv8_KzyIZLk5zPUdgf7BWgy38k,7461
+ex4nicegui/layout/gridFlex/utils.py,sha256=hBuusveBRaHSubIr2q38AP033-VtXDFE_fDzZtg4h44,1236
+ex4nicegui/layout/rxFlex/__init__.py,sha256=dllXV6cri1oOZkOCGJpI9AlUjIZ3oB99ckLIYRW8faM,38
+ex4nicegui/layout/rxFlex/index.py,sha256=XeAsxfy35RJBE2g2WGzKgskf43K4We0d2mBzWb0kbB8,3509
+ex4nicegui/layout/rxFlex/types.py,sha256=OQBo3kkmtXhMo3BDI0GjX36HPJLDV1Cm67hPZGb1k2Q,1411
 ex4nicegui/reactive/__index.py,sha256=OaN_mD2TJORxqTzh2JeKAqaOhIBqM5cBnm21RqKt7PQ,451
 ex4nicegui/reactive/__init__.py,sha256=NZUgvItxqqgzHKrt4oGZnxxV9dlEudGiv4J3fhJdvdQ,24
 ex4nicegui/reactive/drawer.py,sha256=NWMq2gnalpYAU8tT0DwGN5l8n7fuMxTIWxOfr2QvFIA,1356
@@ -12,7 +18,7 @@ ex4nicegui/reactive/local_file_picker.py,sha256=DWNzm_IP02sY-nZWN6WEWJxlwpABW6tN
 ex4nicegui/reactive/q_pagination.py,sha256=ITXBrjLnI1a5bz3Rbn7j8lZs9UJaFuMHrM9_FW_V7NA,1217
 ex4nicegui/reactive/rxui.py,sha256=NZUgvItxqqgzHKrt4oGZnxxV9dlEudGiv4J3fhJdvdQ,24
 ex4nicegui/reactive/usePagination.py,sha256=IP1NeLxaH3413KTEjtbyuzq0FVdtnKQsTZqM-W7iEgY,2468
-ex4nicegui/reactive/EChartsComponent/ECharts.js,sha256=O4H4Mev9WN4DJqvr1PMI97ol5Yykx2ts2M8KInOtc5w,1581651
+ex4nicegui/reactive/EChartsComponent/ECharts.js,sha256=zpB_m1dxK236_qZAiM8jzMkNCVTEPgeSV6tFpdgLZoo,1581763
 ex4nicegui/reactive/EChartsComponent/ECharts.py,sha256=LhThgTo7TSjaXIaWcG6eJojuPWyhUkDkw3tJIuCkJTw,2968
 ex4nicegui/reactive/EChartsComponent/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
 ex4nicegui/reactive/UseDraggable/UseDraggable.js,sha256=D2_4c64qYwkqG_JzL1ZAwoNZDoz6qtHfPA_Z5RIvmIw,5235
@@ -57,8 +63,8 @@ ex4nicegui/tools/debug.py,sha256=HCKlVzhHx5av-983ADgwgMkScKwTreSluLA7uikGYa0,488
 ex4nicegui/utils/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
 ex4nicegui/utils/common.py,sha256=5fsaOkoj-Ild1LGsInZXra66gJLVoVcZGAIG6YOeM6E,430
 ex4nicegui/utils/signals.py,sha256=Dwvb0Anansa0N1ZH2Ko0yCX9o-QHKbXOYEtvdrtde9g,4807
-ex4nicegui-0.2.16.dist-info/LICENSE,sha256=0KDDElS2dl-HIsWvbpy8ywbLzJMBFzXLev57LnMIZXs,1094
-ex4nicegui-0.2.16.dist-info/METADATA,sha256=obmzQBUSNjKvjsFKcNjJ3DpSicwNll3O2mGx7AmsaF0,515
-ex4nicegui-0.2.16.dist-info/WHEEL,sha256=G16H4A3IeoQmnOrYV4ueZGKSjhipXx8zc8nu9FGlvMA,92
-ex4nicegui-0.2.16.dist-info/top_level.txt,sha256=VFwMiO9AFjj5rfLMJwN1ipLRASk9fJXB8tM6DNrpvPQ,11
-ex4nicegui-0.2.16.dist-info/RECORD,,
+ex4nicegui-0.2.18.dist-info/LICENSE,sha256=0KDDElS2dl-HIsWvbpy8ywbLzJMBFzXLev57LnMIZXs,1094
+ex4nicegui-0.2.18.dist-info/METADATA,sha256=wpiHNzH4hmeP__pwog5DyINiHtd99yQgHl48qj7DakI,515
+ex4nicegui-0.2.18.dist-info/WHEEL,sha256=G16H4A3IeoQmnOrYV4ueZGKSjhipXx8zc8nu9FGlvMA,92
+ex4nicegui-0.2.18.dist-info/top_level.txt,sha256=VFwMiO9AFjj5rfLMJwN1ipLRASk9fJXB8tM6DNrpvPQ,11
+ex4nicegui-0.2.18.dist-info/RECORD,,

ex4nicegui/layout/gridbox.py

@@ -1,85 +0,0 @@
-from typing import List, Optional, Union, cast
-from nicegui.client import Client
-from nicegui.element import Element
-from ex4nicegui.reactive.officials.base import BindableUi
-
-
-def _areas_str2array(areas: str) -> List[List[str]]:
-    """
-    >>> input='''
-        sc1 sc2
-        sc3
-        table table table table
-    '''
-    >>> areas_str2array(input)
-    >>> [
-        ["sc1", "sc2"],
-        ["sc3"],
-        ["table", "table", "table", "table"]
-    ]
-    """
-    pass
-
-    lines = (line.strip() for line in areas.splitlines())
-    remove_empty_rows = (line for line in lines if len(line) > 0)
-    splie_space = (line.split() for line in remove_empty_rows)
-    return list(splie_space)
-
-
-def _areas_array2str(areas_array: List[List[str]]):
-    """
-    >>> input = [
-        ["sc1", "sc2"],
-        ["sc3"],
-        ["table"] * 4
-    ]
-    >>> areas_array2str(input)
-    >>> '"sc1 sc2 . ." "sc3 . . ." "table table table table"'
-    """
-    max_len = max(map(len, areas_array))
-
-    fix_empty = (
-        [*line, *(["."] * (max_len - len(line)))] if len(line) < max_len else line
-        for line in areas_array
-    )
-
-    line2str = (f'"{" ".join(line)}"' for line in fix_empty)
-    return " ".join(line2str)
-
-
-class grid_box(Element):
-    def __init__(
-        self,
-        areas_text: str,
-        template_columns: Optional[str] = None,
-        template_rows: Optional[str] = None,
-        *,
-        _client: Client | None = None,
-    ) -> None:
-        super().__init__("div", _client=_client)
-
-        areas_list = _areas_str2array(areas_text)
-
-        areas = _areas_array2str(areas_list)
-
-        areas_cols_len = max(map(len, areas_list))
-        areas_rows_len = len(areas_list)
-
-        template_columns = template_columns or f"repeat({areas_cols_len}, 1fr)"
-        template_rows = template_rows or f"repeat({areas_rows_len}, 1fr)"
-
-        self.style(
-            f"""
-width: 100%;
-grid-template-areas: {areas};
-display: grid;
-grid-template-columns: {template_columns};
-grid-template-rows:{template_rows};"""
-        )
-
-    def areas_mark(self, element: Union[Element, BindableUi], mark: str):
-        if isinstance(element, BindableUi):
-            element = element.element
-        element = cast(Element, element)
-        element.style(f"grid-area:{mark}")
-        return element