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

instaui/runtime/_link_manager.py

@@ -0,0 +1,89 @@
+from __future__ import annotations
+from typing import (
+    Callable,
+    Dict,
+    Generic,
+    List,
+    Literal,
+    Optional,
+    Tuple,
+    TypeVar,
+    Hashable,
+)
+
+_TLinkActionObj = TypeVar("_TLinkActionObj")
+
+_DEFAULT_KEY_FN = lambda x: x  # noqa: E731
+
+
+class LinkManager(Generic[_TLinkActionObj]):
+    def __init__(
+        self, key_fn: Optional[Callable[[_TLinkActionObj], Hashable]] = None
+    ) -> None:
+        self._key_fn = key_fn or _DEFAULT_KEY_FN
+        self._actions_map: Dict[
+            Tuple[Literal["add", "remove"], Hashable], _TLinkActionObj
+        ] = {}
+
+    def add_link(
+        self,
+        obj: _TLinkActionObj,
+    ):
+        key = ("add", self._key_fn(obj))
+        self._actions_map[key] = obj
+
+    def remove_link(
+        self,
+        obj: _TLinkActionObj,
+    ):
+        key = ("remove", self._key_fn(obj))
+        self._actions_map[key] = obj
+
+    def get_valid_links(
+        self, secondary_manager: Optional[LinkManager] = None
+    ) -> List[_TLinkActionObj]:
+        secondary_maps = secondary_manager._actions_map if secondary_manager else {}
+        merger_map = {**secondary_maps, **self._actions_map}
+
+        result = {}
+
+        for (action, key), obj in merger_map.items():
+            if action == "add":
+                result[key] = obj
+                continue
+
+            if key in result:
+                del result[key]
+
+        return list(result.values())
+
+
+if __name__ == "__main__":
+
+    def test_baes():
+        manager: LinkManager[str] = LinkManager()
+        manager.add_link("a")
+        manager.add_link("b")
+        manager.add_link("c")
+        manager.remove_link("b")
+
+        assert manager.get_valid_links() == ["a", "c"]
+
+    test_baes()
+
+    def test_with_other():
+        other: LinkManager[str] = LinkManager()
+        other.add_link("a")
+        other.add_link("b")
+        other.add_link("c")
+
+        manager1: LinkManager[str] = LinkManager()
+        manager1.add_link("b")
+        manager1.add_link("d")
+        manager1.add_link("e")
+        manager1.remove_link("a")
+        manager1.remove_link("b")
+
+        assert manager1.get_valid_links(other) == ["c", "d", "e"]
+
+    test_with_other()

instaui/runtime/resource.py

@@ -2,6 +2,7 @@ from __future__ import annotations
 from pathlib import Path
 from typing import Any, Dict, List, Optional, Set, Union
 from .dataclass import JsLink, VueAppUse, VueAppComponent
+from ._link_manager import LinkManager
 
 
 class HtmlResource:
@@ -10,9 +11,11 @@ class HtmlResource:
     favicon: Optional[Path] = None
 
     def __init__(self) -> None:
-        self._css_links: Dict[Union[str, Path], Any] = {}
+        self._css_links_manager: LinkManager[Union[str, Path]] = LinkManager()
         self._style_tags: List[str] = []
-        self._js_links: List[JsLink] = []
+        self._js_links_manager: LinkManager[JsLink] = LinkManager(
+            key_fn=lambda js_link: js_link.link
+        )
         self._script_tags: List[str] = []
         self._vue_app_use: Set[VueAppUse] = set()
         self._vue_app_components: Set[VueAppComponent] = set()
@@ -20,7 +23,10 @@ class HtmlResource:
         self._appConfig = "{}"
 
     def add_css_link(self, link: Union[str, Path]):
-        self._css_links[link] = None
+        self._css_links_manager.add_link(link)
+
+    def remove_css_link(self, link: Union[str, Path]):
+        self._css_links_manager.remove_link(link)
 
     def add_style_tag(self, content: str):
         self._style_tags.append(content)
@@ -30,12 +36,19 @@ class HtmlResource:
         link: Union[str, Path],
         *,
         attrs: Optional[Dict[str, Any]] = None,
-        insert_before: int = -1,
     ):
-        if insert_before == -1:
-            self._js_links.append(JsLink(link, attrs or {}))
-            return
-        self._js_links.insert(insert_before, JsLink(link, attrs or {}))
+        self._js_links_manager.add_link(JsLink(link, attrs or {}))
+
+    def remove_js_link(self, link: Union[str, Path]):
+        self._js_links_manager.remove_link(JsLink(link))
+
+    def get_valid_js_links(self, default_js_links_manager: LinkManager) -> List[JsLink]:
+        return self._js_links_manager.get_valid_links(default_js_links_manager)
+
+    def get_valid_css_links(
+        self, default_css_links_manager: LinkManager[Union[str, Path]]
+    ) -> List[Union[str, Path]]:
+        return self._css_links_manager.get_valid_links(default_css_links_manager)
 
     def add_script_tag(
         self, content: str, script_attrs: Optional[Dict[str, Any]] = None

instaui/shadcn_classless/_index.py

@@ -0,0 +1,42 @@
+from pathlib import Path
+from instaui.runtime._app import get_app_slot
+
+
+_STATIC_DIR = Path(__file__).parent / "static"
+_CSS_FILE = _STATIC_DIR / "shadcn-classless.css"
+
+
+def use_shadcn_classless(value=True):
+    """Use shadcn-classless.css or not.
+
+    Args:
+        value (bool, optional): Whether to use shadcn-classless.css or not. Defaults to True.
+
+    Example:
+
+    App default use shadcn-classless.css:
+    .. code-block:: python
+
+        @ui.page('/')
+        def index():
+
+            # Create a container with shadcn-classless class
+            with html.div().classes("shadcn-classless"):
+                html.h1("Hello, world!")
+
+                with html.form():
+                    html.input()
+                    html.button("Submit")
+
+    Can be disabled:
+    .. code-block:: python
+        # App does not use shadcn-classless
+        ui.use_shadcn_classless(False)
+
+    """
+
+    if value:
+        get_app_slot()._html_resource.add_css_link(_CSS_FILE)
+
+    else:
+        get_app_slot()._html_resource.remove_css_link(_CSS_FILE)

instaui/shadcn_classless/static/shadcn-classless.css

@@ -0,0 +1,403 @@
+.shadcn-classless {
+  color-scheme: light dark;
+  font-family: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+  background-color: var(--background);
+  color: var(--foreground);
+  line-height: 1.5;
+  padding: 1rem;
+  --radius: 0.5rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+.shadcn-classless.dark-mode {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+.shadcn-classless *,
+.shadcn-classless ::after,
+.shadcn-classless ::before {
+  box-sizing: border-box;
+}
+.shadcn-classless * {
+  margin: 0;
+  padding: 0;
+}
+.shadcn-classless h1,
+.shadcn-classless h2,
+.shadcn-classless h3,
+.shadcn-classless h4,
+.shadcn-classless h5,
+.shadcn-classless h6 {
+  margin-bottom: 0.5em;
+  font-weight: 700;
+}
+.shadcn-classless h1 {
+  letter-spacing: -0.025em;
+  font-weight: 700;
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+.shadcn-classless h2 {
+  letter-spacing: -0.025em;
+  font-weight: 600;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+.shadcn-classless h3 {
+  letter-spacing: -0.025em;
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+.shadcn-classless h4 {
+  letter-spacing: -0.025em;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 1.75rem;
+}
+.shadcn-classless h5 {
+  font-size: 15px;
+}
+.shadcn-classless h6 {
+  font-size: 14px;
+}
+.shadcn-classless p {
+  margin-bottom: 1em;
+}
+.shadcn-classless a {
+  color: var(--primary);
+  text-decoration: none;
+}
+.shadcn-classless a:hover {
+  text-decoration: underline;
+}
+.shadcn-classless ul,
+.shadcn-classless ol {
+  margin-bottom: 1em;
+  padding-left: 1.5em;
+}
+.shadcn-classless header,
+.shadcn-classless main {
+  max-width: 800px;
+  margin: 0 auto;
+}
+.shadcn-classless header {
+  margin-bottom: 2rem;
+}
+.shadcn-classless header h1 {
+  font-size: 2rem;
+}
+.shadcn-classless nav ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 1rem;
+}
+.shadcn-classless section {
+  margin-bottom: 2rem;
+}
+.shadcn-classless form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.shadcn-classless input,
+.shadcn-classless select,
+.shadcn-classless textarea {
+  font-weight: 500;
+  font: inherit;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background-color: var(--background);
+  color: var(--foreground);
+  font-size: 0.875rem;
+}
+.shadcn-classless select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: transparent;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
+  background-repeat: no-repeat;
+  background-position-x: calc(100% - 0.75rem);
+  background-position-y: 50%;
+}
+.shadcn-classless input[type='submit'],
+.shadcn-classless button {
+  font: inherit;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  border: none;
+  border-radius: var(--radius);
+  transition: background-color 0.2s ease-in-out;
+}
+.shadcn-classless input[type='submit']:hover,
+.shadcn-classless button:hover {
+  background-color: color-mix(in srgb, var(--primary) 90%, transparent);
+}
+.shadcn-classless fieldset {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1rem;
+}
+.shadcn-classless legend {
+  padding: 0 0.5rem;
+}
+.shadcn-classless label {
+  display: block;
+}
+.shadcn-classless small {
+  color: var(--muted-foreground);
+}
+.shadcn-classless figure {
+  margin-bottom: 1rem;
+  overflow: hidden;
+}
+.shadcn-classless img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius);
+}
+.shadcn-classless figcaption {
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+  color: var(--muted-foreground);
+}
+.shadcn-classless blockquote {
+  border-left: 4px solid var(--border);
+  padding-left: 1rem;
+  font-style: italic;
+}
+.shadcn-classless [type='checkbox'],
+.shadcn-classless [type='radio'] {
+  margin-right: 0.5rem;
+}
+.shadcn-classless progress {
+  width: 100%;
+}
+.shadcn-classless dialog {
+  background-color: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 24px;
+  margin: auto;
+}
+.shadcn-classless dialog::backdrop {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+.shadcn-classless details {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.5rem;
+  margin-bottom: 1rem;
+}
+.shadcn-classless summary {
+  cursor: pointer;
+  font-weight: bold;
+}
+.shadcn-classless article {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+.shadcn-classless footer {
+  margin-top: 2rem;
+  text-align: center;
+  color: var(--muted-foreground);
+}
+.shadcn-classless [aria-busy='true'] {
+  opacity: 0.7;
+  cursor: progress;
+}
+@media (max-width: 600px) {
+  .shadcn-classless body {
+    padding: 0.5rem;
+  }
+  .shadcn-classless nav ul {
+    flex-direction: column;
+  }
+}
+.shadcn-classless input[type='file']::file-selector-button {
+  border: none;
+  background-color: var(--background);
+  font-weight: 600;
+}
+.shadcn-classless *:disabled {
+  cursor: not-allowed;
+}
+.shadcn-classless input[type='radio'],
+.shadcn-classless input[type='checkbox'],
+.shadcn-classless input[type='range'] {
+  accent-color: var(--primary);
+  background-color: var(--background);
+}
+.shadcn-classless kbd {
+  padding: 0.125rem 0.625rem;
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  border-radius: var(--radius);
+}
+.shadcn-classless table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+.shadcn-classless table caption {
+  color: var(--muted-foreground);
+  margin-top: 1rem;
+}
+.shadcn-classless table th {
+  color: var(--muted-foreground);
+}
+.shadcn-classless table tr {
+  border-bottom: 1px solid var(--border);
+}
+.shadcn-classless table tr:hover {
+  background-color: hsl(var(--muted) / 0.5);
+}
+.shadcn-classless table td,
+.shadcn-classless table th {
+  vertical-align: middle;
+  padding: 0.5rem;
+  text-align: start;
+}
+.shadcn-classless table tfoot {
+  background-color: var(--muted);
+}
+.shadcn-classless dialog[drawer] {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  top: auto;
+  bottom: 0;
+  width: 100vw;
+  max-height: 50vh;
+}
+.shadcn-classless dialog[drawer][open] {
+  animation: slideup 0.2s ease-in forwards;
+}
+.shadcn-classless dialog > header {
+  margin: 0;
+}
+@keyframes slideup {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+.shadcn-classless progress {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  height: 0.5rem;
+  border-radius: 9999px;
+  background-color: var(--muted);
+  border: 0;
+}
+.shadcn-classless progress[value]::-webkit-progress-value {
+  border-radius: 9999px;
+  background-color: var(--primary);
+}
+.shadcn-classless ::-webkit-progress-bar {
+  border-radius: 9999px;
+  background-color: var(--muted);
+}
+.shadcn-classless ::-moz-progress-bar {
+  border-radius: 9999px;
+  background-color: var(--primary);
+}
+.shadcn-classless progress:indeterminate {
+  background: var(--muted) linear-gradient(to right, var(--primary) 35%, var(--muted) 35%) top left / 150% 150% no-repeat;
+  animation: progress-indeterminate 1.5s linear infinite;
+}
+.shadcn-classless progress:indeterminate::-webkit-progress-bar {
+  background-color: transparent;
+}
+.shadcn-classless progress:indeterminate::-moz-progress-bar {
+  background-color: transparent;
+}
+@keyframes progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+.shadcn-classless hr {
+  border: 0;
+  height: 1px;
+  margin: 1rem 0;
+  background-color: var(--border);
+  flex-shrink: 0;
+}
+.shadcn-classless hr[vertical] {
+  width: 1px;
+  height: 1.25rem;
+  margin: 0 1rem;
+}

instaui/spa_router/_functions.py

@@ -38,7 +38,7 @@ def config_router(
 ):
     """Configure the router.
 
-    Example:
+    Examples:
     .. code-block:: python
         routes = [
             spa_router.RouteItem.create(path='/',component_fn=home),

instaui/spa_router/_route_model.py

@@ -60,7 +60,7 @@ class RouteItem(BaseModel):
     ):
         """Create a new RouteItem
 
-        Example:
+        Examples:
         .. code-block:: python
             routes = [
                 spa_router.RouteItem.create(path='/',component_fn=home),

instaui/static/insta-ui.css

@@ -1 +1 @@
-:where(body){--insta-column-gap: 1rem;height:100vh}:where(#app){height:100%}:where(*){box-sizing:border-box;margin:0;padding:0}:where(.app-box[data-v-687dcc1a],.insta-main[data-v-687dcc1a]){height:100%}:where(.insta-main[data-v-687dcc1a]){--insta-padding: 16px;padding:var(--insta-padding, 16px)}
+:root{color-scheme:light dark}:where(body){--insta-column-gap: 1rem;height:100vh}:where(*){box-sizing:border-box}:where(#app){height:100%}:where(.app-box,.insta-main){height:100%}:where(.insta-main){--insta-padding: 16px;padding:var(--insta-padding, 16px)}