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

instaui/components/element.py

@@ -7,6 +7,7 @@ from pathlib import Path
 import re
 from typing import (
     Any,
+    Callable,
     Dict,
     Iterable,
     List,
@@ -358,17 +359,58 @@ class Element(Component):
         *,
         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:
-            self.dependency.css.update(css)
+            dep.css.update(css)
 
         if externals:
-            self.dependency.externals.update(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.
 
-        get_app_slot().use_component_dependency(self.dependency.copy(), replace=True)
+        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()
@@ -420,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,22 +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
-from .textarea import Textarea as textarea
-
-option = select.Option
-
 __all__ = [
     "span",
     "label",
@@ -35,4 +16,34 @@ __all__ = [
     "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,71 +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, ui_vars.TMaybeRef[str], None] = None,
+        model_value: Union[str, TMaybeRef[str], None] = None,
     ):
         super().__init__("select", value, is_html_component=True)
 
         if model_value is not None:
             self.props({"value": model_value})
 
-    @overload
-    def on_change(self, handler: Callable, *, key: Optional[str] = None) -> Self: ...
-
-    @overload
     def on_change(
         self,
-        handler: str,
+        handler: EventMixin,
         *,
-        bindings: Optional[Dict] = None,
-        key: Optional[str] = None,
-    ) -> Self: ...
-
-    def on_change(
-        self,
-        handler: Union[Callable, str],
-        *,
-        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, 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,
     ) -> Select:
-        with cls(value) as select:
+        with cls(value, model_value=model_value) as select:
             with VFor(options) as item:
                 Select.Option(item)  # type: ignore
 
@@ -74,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/markdown/static/marked.esm.js

@@ -2577,4 +2577,3 @@ const parser = _Parser.parse;
 const lexer = _Lexer.lex;
 
 export { _Hooks as Hooks, _Lexer as Lexer, Marked, _Parser as Parser, _Renderer as Renderer, _TextRenderer as TextRenderer, _Tokenizer as Tokenizer, _defaults as defaults, _getDefaults as getDefaults, lexer, marked, options, parse, parseInline, parser, setOptions, use, walkTokens };
-//# sourceMappingURL=marked.esm.js.map

instaui/components/shiki_code/shiki_code.js

@@ -0,0 +1,126 @@
+import { h, ref, watch, computed, normalizeClass as _normalizeClass } from "vue";
+import { createHighlighter } from "@shiki";
+import { useClipboard } from "@instaui-tools/browser";
+
+
+const highlighterTask = createHighlighter({
+  themes: ["vitesse-dark", 'vitesse-light']
+})
+const getTransformersModule = transformersModuleGetter()
+
+
+export default {
+  props: ['code', 'language', 'theme', 'themes', 'transformers', 'lineNumbers'],
+  setup(props) {
+    const { transformers: transformerNames = [], themes = {
+      light: 'vitesse-light',
+      dark: 'vitesse-dark'
+    } } = props;
+
+    const highlightedCode = ref('');
+    const realLanguage = computed(() => props.language || 'python')
+    const realTheme = computed(() => props.theme || 'light')
+    const realLineNumbers = computed(() => props.lineNumbers ?? true)
+    const classes = computed(() => {
+      return _normalizeClass([
+        `language-${realLanguage.value}`,
+        `theme-${realTheme.value}`,
+        `shiki-code`,
+        { 'line-numbers': realLineNumbers.value }
+      ])
+    })
+
+    watch([() => props.code, realTheme], async ([code, _]) => {
+      if (!code) {
+        return;
+      }
+      code = code.trim()
+      const highlighter = await highlighterTask;
+      const transformers = await getTransformers(transformerNames)
+
+      highlightedCode.value = await highlighter.codeToHtml(code, {
+        themes,
+        lang: realLanguage.value,
+        transformers,
+        defaultColor: realTheme.value,
+        colorReplacements: {
+          '#ffffff': '#f8f8f2'
+        }
+      });
+
+    }, { immediate: true });
+
+
+    // copy button
+    const { copyButtonClick, btnClasses } = readyCopyButton(props)
+
+    return () => h("div",
+      { class: classes.value },
+      [h("button", { class: btnClasses.value, title: "Copy Code", onClick: copyButtonClick }),
+      h("span", { class: "lang", }, realLanguage.value),
+      h('div', { innerHTML: highlightedCode.value, style: 'overflow:hidden;' })
+      ]
+    );
+  }
+
+}
+
+
+function readyCopyButton(props) {
+  const { copy, copied } = useClipboard({ source: props.code, legacy: true })
+
+  const btnClasses = computed(() => {
+    return _normalizeClass([
+      "copy",
+      { "copied": copied.value }
+    ])
+  })
+
+  /**
+   * 
+   * @param {Event} e 
+   */
+  function copyButtonClick(e) {
+    copy(props.code)
+
+    watch(copied, (copied) => {
+      if (!copied) {
+        e.target.blur()
+      }
+    }, { once: true })
+  }
+
+  return {
+    copyButtonClick,
+    btnClasses,
+  }
+}
+
+
+/**
+ * 
+ * @param {string[]} names 
+ */
+async function getTransformers(names) {
+  if (names.length === 0) {
+    return [];
+  }
+
+  const tfModule = await getTransformersModule()
+  return names.map(name => {
+    const realName = `transformer${name.charAt(0).toUpperCase() + name.slice(1)}`
+    return tfModule[realName]()
+  })
+}
+
+
+function transformersModuleGetter() {
+  let module = null;
+
+  return async () => {
+    if (!module) {
+      module = await import(`@shiki/transformers`)
+    }
+    return module;
+  }
+}

instaui/components/shiki_code/shiki_code.py

@@ -0,0 +1,99 @@
+from __future__ import annotations
+from pathlib import Path
+from typing import Dict, Iterable, List, Literal, Optional
+from instaui import ui
+from instaui.runtime._app import get_app_slot
+from instaui import consts
+
+_STATIC_DIR = Path(__file__).parent / "static"
+_THEME_DIR = _STATIC_DIR / "themes"
+_LANG_DIR = _STATIC_DIR / "langs"
+_SHIKI_CORE_FILE = _STATIC_DIR / "shiki-core.js"
+_SHIKI_TRANSFORMERS_FILE = _STATIC_DIR / "shiki-transformers.js"
+_STYLE = _STATIC_DIR / "shiki-style.css"
+
+
+_LANGS_IMPORT_NAME = "@shiki/langs/"
+_THEMES_IMPORT_NAME = "@shiki/themes/"
+
+_IMPORT_MAPS = {
+    "@shiki": _SHIKI_CORE_FILE,
+    "@shiki/transformers": _SHIKI_TRANSFORMERS_FILE,
+    _LANGS_IMPORT_NAME: _LANG_DIR,
+    _THEMES_IMPORT_NAME: _THEME_DIR,
+    "@instaui-tools/browser": consts.TOOLS_BROWSER_JS_PATH,
+}
+
+_ZERO_IMPORT_MAPS = {
+    "@shiki": _SHIKI_CORE_FILE,
+    "@shiki/transformers": _SHIKI_TRANSFORMERS_FILE,
+    f"{_LANGS_IMPORT_NAME}python.mjs": _LANG_DIR / "python.mjs",
+    f"{_THEMES_IMPORT_NAME}vitesse-light.mjs": _THEME_DIR / "vitesse-light.mjs",
+    f"{_THEMES_IMPORT_NAME}vitesse-dark.mjs": _THEME_DIR / "vitesse-dark.mjs",
+    "@instaui-tools/browser": consts.TOOLS_BROWSER_JS_PATH,
+}
+
+
+class Code(
+    ui.element,
+    esm="./shiki_code.js",
+    externals=_IMPORT_MAPS,
+    css=[_STYLE],
+):
+    # _language_folder: ClassVar[Path] = _LANGUAGE_DIR
+
+    def __init__(
+        self,
+        code: ui.TMaybeRef[str],
+        *,
+        language: Optional[ui.TMaybeRef[str]] = None,
+        theme: Optional[ui.TMaybeRef[str]] = None,
+        themes: Optional[Dict[str, str]] = None,
+        transformers: Optional[List[TTransformerNames]] = None,
+        line_numbers: Optional[ui.TMaybeRef[bool]] = None,
+    ):
+        super().__init__()
+        self.props({"code": code})
+
+        if language:
+            self.props({"language": language})
+
+        if theme:
+            self.props({"theme": theme})
+
+        if themes:
+            self.props({"themes": themes})
+
+        if transformers:
+            self.props({"transformers": transformers})
+
+        if line_numbers is not None:
+            self.props({"lineNumbers": line_numbers})
+
+    def _to_json_dict(self):
+        self.use_zero_dependency()
+        return super()._to_json_dict()
+
+    def use_zero_dependency(self):
+        app = get_app_slot()
+        tag_name = self.dependency.tag_name  # type: ignore
+
+        if app.mode != "zero" or app.has_temp_component_dependency(tag_name):
+            return
+
+        self.update_dependencies(
+            css=[_STYLE], externals=_ZERO_IMPORT_MAPS, replace=True
+        )
+
+    @staticmethod
+    def update_zero_dependency(add_languages: Optional[Iterable[str]] = None):
+        if isinstance(add_languages, str):
+            add_languages = [add_languages]
+
+        for lang in add_languages or []:
+            name = f"{_LANGS_IMPORT_NAME}{lang}.mjs"
+            path = _LANG_DIR / f"{lang}.mjs"
+            _ZERO_IMPORT_MAPS[name] = path
+
+
+TTransformerNames = Literal["notationDiff"]