instaui 0.1.15__py2.py3-none-any.whl

instaui/components/grid.py

@@ -0,0 +1,213 @@
+from __future__ import annotations
+from typing import (
+    Literal,
+    Optional,
+    TypeVar,
+    Union,
+)
+from instaui.vars.types import TMaybeRef
+from instaui.vars.js_computed import JsComputed
+from instaui.components.element import Element
+from instaui.vars.mixin_types.observable import ObservableMixin
+
+_T = TypeVar("_T")
+
+
+class Grid(Element):
+    def __init__(
+        self,
+        *,
+        rows: Optional[TMaybeRef[Union[int, str]]] = None,
+        columns: Optional[TMaybeRef[Union[int, str]]] = None,
+        template: Optional[TMaybeRef[str]] = None,
+    ):
+        '''Grid component
+
+        Args:
+            rows (Optional[TMaybeRef[Union[int, str]]], optional): Number of rows or template for rows. Defaults to None.
+            columns (Optional[TMaybeRef[Union[int, str]]], optional): Number of columns or template for columns. Defaults to None.
+            template (Optional[TMaybeRef[str]], optional): Template for grid. Defaults to None.
+
+        # Example:
+        columns example:
+        .. code-block:: python
+            border = "border-2 border-gray-200"
+
+            with ui.grid(columns=2).classes("h-[200px]").classes(border) as g:
+
+                # a in the first row and first column
+                html.paragraph("a value").classes(border)
+                # b in the first row and second column
+                html.paragraph("b value").classes(border)
+
+                # c in the second row and span over 2 columns
+                html.paragraph("c value").use(
+                    g.mark_area_position(column_span=2)
+                ).classes(border)
+
+        template areas example:
+        .. code-block:: python
+            border = "border-2 border-gray-200"
+
+            template = r"""
+            "a b c" 1fr
+            "a b ." 2fr / 1fr 1fr 2fr
+            """
+
+            with ui.grid(template=template).classes("h-[200px]").classes(border) as g:
+                html.paragraph("a value").use(g.mark_area("a")).classes(border)
+                html.paragraph("b value").use(g.mark_area("b")).classes(border)
+                html.paragraph("c value").use(g.mark_area("c")).classes(border)
+        '''
+
+        super().__init__("div")
+        self.style("display: grid;")
+
+        if rows is not None:
+            if isinstance(rows, int):
+                rows = f"repeat({rows}, 1fr)"
+
+            if isinstance(rows, ObservableMixin):
+                rows = _convert_to_repeat_computed(rows)
+
+            self.style({"grid-template-rows": rows})
+
+        if columns is not None:
+            if isinstance(columns, int):
+                columns = f"repeat({columns}, 1fr)"
+
+            if isinstance(columns, ObservableMixin):
+                columns = _convert_to_repeat_computed(columns)
+
+            self.style({"grid-template-columns": columns})
+
+        if template is not None:
+            self.style({"grid-template": template})
+
+    def mark_area(self, area: TMaybeRef[str]):
+        """Marks an area in the grid
+
+        Args:
+            area (TMaybeRef[str]): Area name
+
+        """
+
+        def use_fn(element: Element):
+            element.style({"grid-area": area})
+
+        return use_fn
+
+    def mark_area_position(
+        self,
+        *,
+        row: Optional[int] = None,
+        column: Optional[int] = None,
+        row_span: Optional[int] = None,
+        column_span: Optional[int] = None,
+    ):
+        """Marks an area in the grid with position
+
+        Args:
+            row (Optional[int], optional): Start position of row, 1-based. Defaults to None.
+            column (Optional[int], optional): Start position of column, 1-based. Defaults to None.
+            row_span (Optional[int], optional): The span value at the end of the row. Defaults to None.
+            column_span (Optional[int], optional): The span value at the end of the column. Defaults to None.
+        """
+        real_row = "auto" if row is None else row
+        real_column = "auto" if column is None else column
+        real_row_span = "auto" if row_span is None else f"span {row_span}"
+        real_column_span = "auto" if column_span is None else f"span {column_span}"
+
+        area = f"{real_row} / {real_column} / {real_row_span} / {real_column_span}"
+        return self.mark_area(area)
+
+    @staticmethod
+    def auto_columns(
+        *,
+        min_width: TMaybeRef[str],
+        mode: TMaybeRef[Literal["auto-fill", "auto-fit"]] = "auto-fit",
+    ):
+        """
+        Generate a dynamic grid column configuration for responsive layout systems.
+
+        Creates a computed layout specification that calculates column dimensions
+        based on minimum width requirements and auto-sizing behavior. Retu
+
+        Args:
+            min_width (TMaybeRef[str]):
+                Minimum width constraint for columns as a CSS length string (e.g., "300px").
+                Accepts reactive references for dynamic updates.
+            mode (TMaybeRef[Literal["auto, optional):
+                Auto-sizing behavior strategy:
+                - "auto-fill": Preserves container space by creating additional columns
+                - "auto-fit": Adjusts columns to fit available space.
+                Defaults to "auto-fit".
+
+        Example:
+        .. code-block:: python
+
+            with ui.grid(columns=ui.grid.auto_columns(min_width="300px")):
+                ...
+        """
+        template = JsComputed(
+            inputs=[min_width, mode],
+            code=r"(min_width, mode)=> `repeat(${mode}, minmax(min(${min_width},100%), 1fr))`",
+        )
+
+        return template
+
+    @staticmethod
+    def auto_rows(
+        *,
+        min_height: TMaybeRef[str],
+        mode: TMaybeRef[Literal["auto-fill", "auto-fit"]] = "auto-fit",
+    ):
+        """
+        Generate a dynamic grid row configuration for responsive layout systems.
+
+        Creates a computed layout specification that calculates row dimensions
+        based on minimum height requirements and auto-sizing behavior.
+
+        Args:
+            min_height (TMaybeRef[str]):
+                Minimum height constraint for rows as a CSS length string (e.g., "300px").
+            mode (TMaybeRef[Literal["auto, optional):
+                Auto-sizing behavior strategy:
+                - "auto-fill": Preserves container space by creating additional rows
+                - "auto-fit": Adjusts rows to fit available space.
+                Defaults to "auto-fit".
+
+        Example:
+        .. code-block:: python
+
+            with ui.grid(rows=ui.grid.auto_rows(min_height="300px")):
+                ...
+        """
+
+        template = JsComputed(
+            inputs=[min_height, mode],
+            code=r"(min_height, mode)=> `repeat(${mode}, minmax(min(${min_height},100%), 1fr))`",
+        )
+
+        return template
+
+    def row_gap(self, gap: TMaybeRef[str]) -> Grid:
+        return self.style({"row-gap": gap})
+
+    def column_gap(self, gap: TMaybeRef[str]) -> Grid:
+        return self.style({"column-gap": gap})
+
+    def gap(self, gap: TMaybeRef[str]) -> Grid:
+        return self.row_gap(gap).column_gap(gap)
+
+
+def _convert_to_repeat_computed(value: ObservableMixin):
+    return JsComputed(
+        inputs=[value],
+        code=r"""(value)=> {
+    if (typeof value === "number"){
+        return `repeat(${value}, 1fr)`
+    }
+    return value                     
+    }""",
+    )

instaui/components/html/__init__.py

@@ -0,0 +1,49 @@
+__all__ = [
+    "span",
+    "label",
+    "paragraph",
+    "input",
+    "number",
+    "button",
+    "checkbox",
+    "form",
+    "select",
+    "option",
+    "ul",
+    "li",
+    "div",
+    "range",
+    "date",
+    "link",
+    "textarea",
+    "table",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+]
+
+from .span import Span as span
+from .label import Label as label
+from .paragraph import Paragraph as paragraph
+from .input import Input as input
+from .number import Number as number
+from .button import Button as button
+from .checkbox import Checkbox as checkbox
+from .form import Form as form
+from .select import Select as select
+from .ul import Ul as ul
+from .li import Li as li
+from .div import Div as div
+from .range import Range as range
+from .date import Date as date
+from .link import Link as link
+from .textarea import Textarea as textarea
+from .table import Table as table
+from .heading import H1 as h1, H2 as h2, H3 as h3, H4 as h4, H5 as h5, H6 as h6
+
+option = select.Option
+
+from . import _preset  # noqa: E402, F401

instaui/components/html/_mixins.py

@@ -0,0 +1,34 @@
+from __future__ import annotations
+import abc
+from typing import TYPE_CHECKING, List, Optional
+from instaui.event.event_mixin import EventMixin
+
+
+if TYPE_CHECKING:
+    from instaui.components.element import Element
+
+
+class InputEventMixin:
+    @abc.abstractmethod
+    def _input_event_mixin_element(self) -> Element:
+        pass
+
+    def on_change(
+        self,
+        handler: EventMixin,
+        *,
+        extends: Optional[List] = None,
+        key: Optional[str] = None,
+    ):
+        self._input_event_mixin_element().on("change", handler, extends=extends)
+        return self
+
+    def on_input(
+        self,
+        handler: EventMixin,
+        *,
+        extends: Optional[List] = None,
+        key: Optional[str] = None,
+    ):
+        self._input_event_mixin_element().on("input", handler, extends=extends)
+        return self

instaui/components/html/_preset.py

@@ -0,0 +1,4 @@
+from instaui.shadcn_classless._index import use_shadcn_classless
+
+
+use_shadcn_classless()

instaui/components/html/button.py

@@ -0,0 +1,38 @@
+from __future__ import annotations
+from typing import (
+    TYPE_CHECKING,
+    List,
+    Optional,
+)
+from instaui.components.element import Element
+
+from instaui.event.event_mixin import EventMixin
+from instaui.vars.types import TMaybeRef
+
+if TYPE_CHECKING:
+    pass
+
+
+class Button(Element):
+    def __init__(
+        self,
+        text: Optional[TMaybeRef[str]] = None,
+    ):
+        super().__init__("button")
+
+        if text is not None:
+            self.props(
+                {
+                    "innerText": text,
+                }
+            )
+
+    def on_click(
+        self,
+        handler: EventMixin,
+        *,
+        extends: Optional[List] = None,
+        key: Optional[str] = None,
+    ):
+        self.on("click", handler, extends=extends)
+        return self

instaui/components/html/checkbox.py

@@ -0,0 +1,35 @@
+from __future__ import annotations
+from typing import (
+    Any,
+    Optional,
+    Union,
+)
+
+from instaui.components.element import Element
+from instaui.components.value_element import ValueElement
+
+
+from instaui.vars.types import TMaybeRef
+from ._mixins import InputEventMixin
+
+
+class Checkbox(InputEventMixin, ValueElement[Union[bool, str]]):
+    def __init__(
+        self,
+        value: Union[Union[bool, str], TMaybeRef[Union[bool, str]], None] = None,
+        *,
+        model_value: Optional[TMaybeRef[Union[bool, str]]] = None,
+        checked: Optional[TMaybeRef[bool]] = None,
+        id: Optional[Any] = None,
+    ):
+        super().__init__("input", value, is_html_component=True)
+        self.props({"type": "checkbox"})
+        if id is not None:
+            self.props({"id": id})
+        if checked is not None:
+            self.props({"checked": checked})
+        if model_value is not None:
+            self.props({"value": model_value})
+
+    def _input_event_mixin_element(self) -> Element:
+        return self

instaui/components/html/date.py

@@ -0,0 +1,28 @@
+from __future__ import annotations
+from typing import TYPE_CHECKING, Union
+
+from instaui.components.value_element import ValueElement
+from ._mixins import InputEventMixin
+
+if TYPE_CHECKING:
+    from instaui.vars.types import TMaybeRef
+    from instaui.components.element import Element
+
+_T_value = str
+
+
+class Date(InputEventMixin, ValueElement[_T_value]):
+    def __init__(
+        self,
+        value: Union[_T_value, TMaybeRef[_T_value], None] = None,
+        *,
+        model_value: Union[_T_value, TMaybeRef[_T_value], None] = None,
+    ):
+        super().__init__("input", value, is_html_component=True)
+        self.props({"type": "date"})
+
+        if model_value is not None:
+            self.props({"value": model_value})
+
+    def _input_event_mixin_element(self) -> Element:
+        return self

instaui/components/html/div.py

@@ -0,0 +1,7 @@
+from __future__ import annotations
+from instaui.components.element import Element
+
+
+class Div(Element):
+    def __init__(self):
+        super().__init__("div")

instaui/components/html/form.py

@@ -0,0 +1,7 @@
+from __future__ import annotations
+from instaui.components.element import Element
+
+
+class Form(Element):
+    def __init__(self):
+        super().__init__("form")

instaui/components/html/heading.py

@@ -0,0 +1,51 @@
+from __future__ import annotations
+from typing import TYPE_CHECKING, Any, Literal, Union
+from instaui.components.element import Element
+
+if TYPE_CHECKING:
+    from instaui.vars.types import TMaybeRef
+
+
+class Heading(Element):
+    def __init__(
+        self,
+        text: Union[str, TMaybeRef[Any]],
+        *,
+        level: Literal[1, 2, 3, 4, 5, 6] = 1,
+    ):
+        super().__init__(f"h{level}")
+        self.props(
+            {
+                "innerText": text,
+            }
+        )
+
+
+class H1(Heading):
+    def __init__(self, text: Union[str, TMaybeRef[Any]]):
+        super().__init__(text, level=1)
+
+
+class H2(Heading):
+    def __init__(self, text: Union[str, TMaybeRef[Any]]):
+        super().__init__(text, level=2)
+
+
+class H3(Heading):
+    def __init__(self, text: Union[str, TMaybeRef[Any]]):
+        super().__init__(text, level=3)
+
+
+class H4(Heading):
+    def __init__(self, text: Union[str, TMaybeRef[Any]]):
+        super().__init__(text, level=4)
+
+
+class H5(Heading):
+    def __init__(self, text: Union[str, TMaybeRef[Any]]):
+        super().__init__(text, level=5)
+
+
+class H6(Heading):
+    def __init__(self, text: Union[str, TMaybeRef[Any]]):
+        super().__init__(text, level=6)

instaui/components/html/input.py

@@ -0,0 +1,28 @@
+from __future__ import annotations
+from typing import TYPE_CHECKING, Optional, Union
+from instaui.components.element import Element
+from instaui.components.value_element import ValueElement
+
+from ._mixins import InputEventMixin
+
+if TYPE_CHECKING:
+    from instaui.vars.types import TMaybeRef
+
+
+class Input(InputEventMixin, ValueElement[str]):
+    def __init__(
+        self,
+        value: Union[str, TMaybeRef[str], None] = None,
+        *,
+        model_value: Union[str, TMaybeRef[str], None] = None,
+        disabled: Optional[TMaybeRef[bool]] = None,
+    ):
+        super().__init__("input", value, is_html_component=True)
+
+        if disabled is not None:
+            self.props({"disabled": disabled})
+        if model_value is not None:
+            self.props({"value": model_value})
+
+    def _input_event_mixin_element(self) -> Element:
+        return self

instaui/components/html/label.py

@@ -0,0 +1,21 @@
+from __future__ import annotations
+from typing import TYPE_CHECKING, Any, Union
+from instaui.components.element import Element
+
+if TYPE_CHECKING:
+    from instaui.vars.types import TMaybeRef
+
+
+class Label(Element):
+    def __init__(
+        self,
+        text: Union[Any, TMaybeRef[Any], None] = None,
+    ):
+        super().__init__("label")
+
+        if text is not None:
+            self.props(
+                {
+                    "innerText": text,
+                }
+            )

instaui/components/html/li.py

@@ -0,0 +1,17 @@
+from __future__ import annotations
+from typing import TYPE_CHECKING, Any, Union
+from instaui.components.element import Element
+
+if TYPE_CHECKING:
+    from instaui.vars.types import TMaybeRef
+
+
+class Li(Element):
+    def __init__(
+        self,
+        text: Union[Any, TMaybeRef[Any], None] = None,
+    ):
+        super().__init__("li")
+
+        if text:
+            self.props({"innerText": text})

instaui/components/html/link.py

@@ -0,0 +1,31 @@
+from __future__ import annotations
+from typing import (
+    Optional,
+)
+from instaui.components.element import Element
+
+from instaui.vars.types import TMaybeRef
+
+
+class Link(Element):
+    def __init__(
+        self,
+        href: Optional[TMaybeRef[str]] = None,
+        *,
+        text: Optional[TMaybeRef[str]] = None,
+    ):
+        super().__init__("a")
+
+        if text is not None:
+            self.props(
+                {
+                    "innerText": text,
+                }
+            )
+
+        if href is not None:
+            self.props(
+                {
+                    "href": href,
+                }
+            )

instaui/components/html/number.py

@@ -0,0 +1,34 @@
+from __future__ import annotations
+from typing import TYPE_CHECKING, Optional, Union
+from instaui.components.element import Element
+from instaui.components.value_element import ValueElement
+from ._mixins import InputEventMixin
+
+if TYPE_CHECKING:
+    from instaui.vars.types import TMaybeRef
+
+
+_T_value = Union[int, float]
+
+
+class Number(InputEventMixin, ValueElement[_T_value]):
+    def __init__(
+        self,
+        value: Optional[TMaybeRef[_T_value]] = None,
+        *,
+        model_value: Optional[TMaybeRef[_T_value]] = None,
+        min: Optional[TMaybeRef[_T_value]] = None,
+        max: Optional[TMaybeRef[_T_value]] = None,
+    ):
+        super().__init__("input", value, is_html_component=True)
+        self.props({"type": "number"})
+
+        if min is not None:
+            self.props({"min": min})
+        if max is not None:
+            self.props({"max": max})
+        if model_value is not None:
+            self.props({"value": model_value})
+
+    def _input_event_mixin_element(self) -> Element:
+        return self

instaui/components/html/paragraph.py

@@ -0,0 +1,29 @@
+from __future__ import annotations
+from typing import TYPE_CHECKING, Any, Union
+from instaui.components.element import Element
+
+if TYPE_CHECKING:
+    from instaui.vars.types import TMaybeRef
+
+
+class Paragraph(Element):
+    """
+    A component class representing an HTML `<p>` (paragraph) element.
+
+    Args:
+        text (Union[str, TMaybeRef[Any]]):The text content of the paragraph.
+                                          - If a string is provided, the content is static.
+                                          - If a `TMaybeRef` object is provided, the content
+                                            will reactively update when the referenced value changes.
+    """
+
+    def __init__(
+        self,
+        text: Union[str, TMaybeRef[Any]],
+    ):
+        super().__init__("p")
+        self.props(
+            {
+                "innerText": text,
+            }
+        )

instaui/components/html/range.py

@@ -0,0 +1,48 @@
+from __future__ import annotations
+from typing import List, Union
+from instaui.components.element import Element
+from instaui.components.value_element import ValueElement
+from instaui import consts
+from instaui.vars.types import TMaybeRef
+from instaui.vars.mixin_types.element_binding import ElementBindingMixin
+from ._mixins import InputEventMixin
+
+_T_value = Union[int, float]
+
+
+class Range(InputEventMixin, ValueElement[_T_value]):
+    def __init__(
+        self,
+        value: Union[_T_value, TMaybeRef[_T_value], None] = None,
+        *,
+        min: Union[_T_value, TMaybeRef[_T_value], None] = None,
+        max: Union[_T_value, TMaybeRef[_T_value], None] = None,
+        step: Union[_T_value, TMaybeRef[_T_value], None] = None,
+    ):
+        super().__init__("input", value, is_html_component=True)
+        self.props({"type": "range"})
+
+        if min is not None:
+            self.props({"min": min})
+        if max is not None:
+            self.props({"max": max})
+        if step is not None:
+            self.props({"step": step})
+
+    def vmodel(
+        self,
+        value: ElementBindingMixin,
+        modifiers: Union[consts.TModifier, List[consts.TModifier], None] = None,
+        *,
+        prop_name: str = "value",
+    ):
+        modifiers = modifiers or []
+        if isinstance(modifiers, str):
+            modifiers = [modifiers]
+
+        modifiers_with_number = list(set([*modifiers, "number"]))
+
+        return super().vmodel(value, modifiers_with_number, prop_name=prop_name)  # type: ignore
+
+    def _input_event_mixin_element(self) -> Element:
+        return self