instaui 0.1.3__py3-none-any.whl → 0.1.5__py3-none-any.whl

instaui/components/element.py

@@ -7,10 +7,13 @@ from pathlib import Path
 import re
 from typing import (
     Any,
+    Callable,
     Dict,
+    Iterable,
     List,
     ClassVar,
     Optional,
+    Set,
     Tuple,
     Union,
     cast,
@@ -35,6 +38,7 @@ from instaui.vars.mixin_types.element_binding import ElementBindingMixin
 
 if TYPE_CHECKING:
     from instaui.event.event_mixin import EventMixin
+    from instaui.vars.types import TMaybeRef
 
 
 # Refer to the NiceGUI project.
@@ -103,7 +107,7 @@ class Element(Component):
         cls,
         *,
         esm: Union[str, Path, None] = None,
-        externals: Optional[List[Union[str, Path]]] = None,
+        externals: Optional[Dict[str, Path]] = None,
         css: Union[List[Union[str, Path]], None] = None,
     ) -> None:
         super().__init_subclass__()
@@ -112,18 +116,21 @@ class Element(Component):
             esm = _make_dependency_path(esm, cls)
 
             if externals:
-                externals = [_make_dependency_path(e, cls) for e in externals]
+                externals = {
+                    key: _make_dependency_path(value, cls)
+                    for key, value in externals.items()
+                }
 
             if css:
-                css = [_make_dependency_path(c, cls) for c in css]
+                css = set(_make_dependency_path(c, cls) for c in css)  # type: ignore
 
             tag_name = f"instaui-{esm.stem}"
 
             cls.dependency = ComponentDependencyInfo(
                 tag_name=tag_name,
                 esm=esm,
-                externals=cast(List[Path], externals or []),
-                css=cast(List[Path], css or []),
+                externals=cast(Dict[str, Path], externals or {}),
+                css=cast(Set[Path], css or set()),
             )
 
         cls._default_props = copy(cls._default_props)
@@ -225,32 +232,53 @@ class Element(Component):
     @overload
     def classes(self, add: str) -> Self: ...
     @overload
-    def classes(self, add: Dict[str, ElementBindingMixin[bool]]) -> Self: ...
+    def classes(self, add: Dict[str, TMaybeRef[bool]]) -> Self: ...
 
     @overload
-    def classes(self, add: ElementBindingMixin[str]) -> Self: ...
+    def classes(self, add: TMaybeRef[str]) -> Self: ...
 
     def classes(
         self,
         add: Union[
             str,
-            Dict[str, ElementBindingMixin[bool]],
-            ElementBindingMixin[str],
+            Dict[str, TMaybeRef[bool]],
+            TMaybeRef[str],
             VForItem,
         ],
     ) -> Self:
+        """Add classes to the component.
+
+        Args:
+            add (Union[ str, Dict[str, TMaybeRef[bool]], TMaybeRef[str], VForItem, ]): classes to add.
+
+
+        Examples:
+        .. code-block:: python
+
+            elemelt = html.span('test')
+            elemelt.classes('class1 class2')
+
+            # dynamically classes
+            class_name = ui.state('x')
+            elemelt.classes(class_name)
+
+            # apply name if True
+            apply = ui.state(True)
+            elemelt.classes({'x': apply})
+        """
+
         if isinstance(add, str):
             self._str_classes = self._update_classes(self._str_classes, add)
 
         if isinstance(add, dict):
-            self._dict_classes.update(**add)
+            self._dict_classes.update(**add)  # type: ignore
 
         if isinstance(add, ElementBindingMixin):
             self._bind_str_classes.append(add)  # type: ignore
 
         return self
 
-    def style(self, add: Union[str, Dict[str, Any], ElementBindingMixin[str]]) -> Self:
+    def style(self, add: Union[str, Dict[str, Any], TMaybeRef[str]]) -> Self:
         if isinstance(add, dict):
             add = {key: value for key, value in add.items()}
 
@@ -262,7 +290,7 @@ class Element(Component):
         self._style.update(new_style)
         return self
 
-    def props(self, add: Union[str, Dict[str, Any], ElementBindingMixin]) -> Self:
+    def props(self, add: Union[str, Dict[str, Any], TMaybeRef]) -> Self:
         if isinstance(add, ElementBindingMixin):
             self._proxy_props.append(add)
             return self
@@ -326,6 +354,64 @@ class Element(Component):
         self._element_ref = ref
         return self
 
+    def update_dependencies(
+        self,
+        *,
+        css: Optional[Iterable[Path]] = None,
+        externals: Optional[Dict[str, Path]] = None,
+        replace: bool = False,
+    ):
+        if not self.dependency:
+            return
+
+        app = get_app_slot()
+        dep = self.dependency.copy()
+        if replace:
+            dep.css.clear()
+            dep.externals.clear()
+
+        if css:
+            dep.css.update(css)
+
+        if externals:
+            dep.externals.update(externals)
+
+        app.add_temp_component_dependency(dep)
+
+    def use(self, *use_fns: Callable[[Self], None]) -> Self:
+        """Use functions to the component object.
+
+        Args:
+            use_fns (Callable[[Self], None]): The list of use functions.
+
+        Examples:
+        .. code-block:: python
+            def use_red_color(element: html.paragraph):
+                element.style('color: red')
+
+            html.paragraph('Hello').use(use_red_color)
+        """
+
+        for fn in use_fns:
+            fn(self)
+        return self
+
+    @classmethod
+    def use_init(cls, init_fn: Callable[[type[Self]], Self]) -> Self:
+        """Use this method to initialize the component.
+
+        Args:
+            init_fn (Callable[[type[Self]], Self]): The initialization function.
+
+        Examples:
+        .. code-block:: python
+            def fack_init(cls: type[html.table]) -> html.table:
+                return cls(columns=['name', 'age'],rows = [{'name': 'Alice', 'age': 25}, {'name': 'Bob', 'age': 30}])
+
+            ui.table.use_init(fack_init)
+        """
+        return init_fn(cls)
+
     def _to_json_dict(self):
         data = super()._to_json_dict()
 
@@ -376,7 +462,11 @@ class Element(Component):
             data["dir"] = list(self._directives.keys())
 
         if self.dependency:
-            get_app_slot().use_component_dependency(self.dependency)
+            app_slot = get_app_slot()
+            tag_name = self.dependency.tag_name
+            app_slot.use_component_dependency(
+                app_slot.get_temp_component_dependency(tag_name, self.dependency)
+            )
 
         if self._element_ref:
             scope = get_current_scope()

instaui/components/html/__init__.py

@@ -1,21 +1,3 @@
-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
-
-option = select.Option
-
 __all__ = [
     "span",
     "label",
@@ -33,4 +15,35 @@ __all__ = [
     "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/_preset.py

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

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:
+    import instaui.vars as ui_vars
+
+
+class Heading(Element):
+    def __init__(
+        self,
+        text: Union[str, ui_vars.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, ui_vars.TMaybeRef[Any]]):
+        super().__init__(text, level=1)
+
+
+class H2(Heading):
+    def __init__(self, text: Union[str, ui_vars.TMaybeRef[Any]]):
+        super().__init__(text, level=2)
+
+
+class H3(Heading):
+    def __init__(self, text: Union[str, ui_vars.TMaybeRef[Any]]):
+        super().__init__(text, level=3)
+
+
+class H4(Heading):
+    def __init__(self, text: Union[str, ui_vars.TMaybeRef[Any]]):
+        super().__init__(text, level=4)
+
+
+class H5(Heading):
+    def __init__(self, text: Union[str, ui_vars.TMaybeRef[Any]]):
+        super().__init__(text, level=5)
+
+
+class H6(Heading):
+    def __init__(self, text: Union[str, ui_vars.TMaybeRef[Any]]):
+        super().__init__(text, level=6)

instaui/components/html/range.py

@@ -17,6 +17,7 @@ class Range(InputEventMixin, ValueElement[_T_value]):
         *,
         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"})
@@ -25,6 +26,8 @@ class Range(InputEventMixin, ValueElement[_T_value]):
             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,

instaui/components/html/select.py

@@ -1,72 +1,53 @@
 from __future__ import annotations
 from typing import (
     TYPE_CHECKING,
-    Any,
     Callable,
     Dict,
     List,
-    Literal,
     Optional,
     Union,
     overload,
 )
 from typing_extensions import Self
-
-from instaui.vars import Ref
 from instaui.components.value_element import ValueElement
 from instaui.components.element import Element
+from instaui.event.event_mixin import EventMixin
 from instaui.vars.types import TMaybeRef
 from instaui.components.vfor import VFor
 
-if TYPE_CHECKING:
-    import instaui.vars as ui_vars
-
-
 _T_Select_Value = Union[List[str], str]
 
 
 class Select(ValueElement[Union[List[str], str]]):
     def __init__(
         self,
-        value: Union[_T_Select_Value, ui_vars.TMaybeRef[_T_Select_Value], None] = None,
+        value: Union[_T_Select_Value, TMaybeRef[_T_Select_Value], None] = None,
+        *,
+        model_value: Union[str, TMaybeRef[str], None] = None,
     ):
         super().__init__("select", value, is_html_component=True)
 
-    def vmodel(
-        self,
-        value: Ref[Any],
-        *modifiers: Literal["lazy"],
-    ):
-        return super().vmodel(value, *modifiers)  # type: ignore
-
-    @overload
-    def on_change(self, handler: Callable, *, key: Optional[str] = None) -> Self: ...
-
-    @overload
-    def on_change(
-        self,
-        handler: str,
-        *,
-        bindings: Optional[Dict] = None,
-        key: Optional[str] = None,
-    ) -> Self: ...
+        if model_value is not None:
+            self.props({"value": model_value})
 
     def on_change(
         self,
-        handler: Union[Callable, str],
+        handler: EventMixin,
         *,
-        bindings: Optional[Dict] = None,
-        key: Optional[str] = None,
+        extends: Optional[List] = None,
     ):
-        self.on("change", handler, bindings=bindings, key=key)  # type: ignore
+        self.on("change", handler)
         return self
 
     @classmethod
     def from_list(
         cls,
         options: TMaybeRef[List],
+        value: Union[_T_Select_Value, TMaybeRef[_T_Select_Value], None] = None,
+        *,
+        model_value: Union[str, TMaybeRef[str], None] = None,
     ) -> Select:
-        with cls() as select:
+        with cls(value, model_value=model_value) as select:
             with VFor(options) as item:
                 Select.Option(item)  # type: ignore
 
@@ -75,9 +56,9 @@ class Select(ValueElement[Union[List[str], str]]):
     class Option(Element):
         def __init__(
             self,
-            text: Optional[ui_vars.TMaybeRef[str]] = None,
-            value: Optional[ui_vars.TMaybeRef[str]] = None,
-            disabled: Optional[ui_vars.TMaybeRef[bool]] = None,
+            text: Optional[TMaybeRef[str]] = None,
+            value: Optional[TMaybeRef[str]] = None,
+            disabled: Optional[TMaybeRef[bool]] = None,
         ):
             props = {
                 key: value

instaui/components/html/table.py

@@ -0,0 +1,36 @@
+from __future__ import annotations
+from typing import TYPE_CHECKING, Any, List, Optional, Union
+from instaui.components.element import Element
+from instaui.components.content import Content
+from instaui.components.vfor import VFor
+
+if TYPE_CHECKING:
+    import instaui.vars as ui_vars
+
+
+class Table(Element):
+    def __init__(
+        self,
+        columns: Union[List[str], ui_vars.TMaybeRef[List[str]], None] = None,
+        rows: Union[List[List[Any]], ui_vars.TMaybeRef[List[List[Any]]], None] = None,
+    ):
+        """Create a table element.
+
+        Args:
+            columns (Union[List[str], ui_vars.TMaybeRef[List[str]], None], optional): A list of column headers or a reactive reference to such a list. Defaults to None.
+            rows (Union[List[List[Any]], ui_vars.TMaybeRef[List[List[Any]]], None], optional): A list of row data, where each row is a list of cell values, or a reactive reference to such a list. Defaults to None.
+        """
+        super().__init__("table")
+
+        with self:
+            with Element("thead"), Element("tr"):
+                with VFor(columns) as col:  # type: ignore
+                    with Element("th"):
+                        Content(col)
+
+            with Element("tbody"):
+                with VFor(rows) as row:  # type: ignore
+                    with Element("tr"):
+                        with VFor(row) as cell:  # type: ignore
+                            with Element("td"):
+                                Content(cell)

instaui/components/html/textarea.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:
+    import instaui.vars as ui_vars
+
+
+class Textarea(InputEventMixin, ValueElement[str]):
+    def __init__(
+        self,
+        value: Union[str, ui_vars.TMaybeRef[str], None] = None,
+        *,
+        model_value: Union[str, ui_vars.TMaybeRef[str], None] = None,
+        disabled: Optional[ui_vars.TMaybeRef[bool]] = None,
+    ):
+        super().__init__("textarea", 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/markdown/markdown.js

@@ -0,0 +1,33 @@
+import { h, computed } from "vue";
+import { marked } from "marked";
+
+export default {
+  props: ['content'],
+  setup(props) {
+
+    const md = computed(() => marked.parse(
+      cleanMultilineString(props.content)
+    ))
+
+    return () => h("div", { class: 'markdown-body', innerHTML: md.value });
+  }
+
+}
+
+function cleanMultilineString(text) {
+  const lines = text.split(/\r?\n/);
+
+  while (lines.length && lines[0].trim() === '') {
+    lines.shift();
+  }
+
+  while (lines.length && lines[lines.length - 1].trim() === '') {
+    lines.pop();
+  }
+
+  if (lines.length > 0) {
+    lines[0] = lines[0].replace(/^[\t ]+/, '');
+  }
+
+  return lines.join('\n');
+}

instaui/components/markdown/markdown.py

@@ -0,0 +1,41 @@
+from pathlib import Path
+from instaui import ui
+
+_STATIC_DIR = Path(__file__).parent / "static"
+_CORE_JS_FILE = _STATIC_DIR / "marked.esm.js"
+_GITHUB_MARKDOWN_CSS_FILE = _STATIC_DIR / "github-markdown.css"
+
+_IMPORT_MAPS = {
+    "marked": _CORE_JS_FILE,
+}
+
+
+class Markdown(
+    ui.element,
+    esm="./markdown.js",
+    externals=_IMPORT_MAPS,
+    css=[_GITHUB_MARKDOWN_CSS_FILE],
+):
+    def __init__(self, content: ui.TMaybeRef[str]):
+        super().__init__()
+        self.props({"content": _clean_multiline_string(content)})
+
+
+def _clean_multiline_string(text: ui.TMaybeRef[str]) -> ui.TMaybeRef[str]:
+    if not isinstance(text, str):
+        return text
+
+    if not text:
+        return ""
+
+    lines = text.splitlines()
+
+    while lines and lines[0].strip() == "":
+        lines.pop(0)
+    while lines and lines[-1].strip() == "":
+        lines.pop()
+
+    if lines:
+        lines[0] = lines[0].lstrip()
+
+    return "\n".join(lines)