update components

Author: dakixr

README.md

@@ -15,10 +15,9 @@
 - **Dev-only**: add this library as a development dependency (no runtime import)
 
 - **With uv (recommended)**:
-  - Direct from git: `uv add --dev git+https://github.com/dakixr/htpy-uikit.git`
-  - Local checkout: `uv add --dev ../path/to/htpy-uikit`
-  - Run CLI via your env: `uv run htpyuikit list`
-- **Or with pip**: `pip install .` (inside this repo)
+  - `uv tool install git+https://github.com/dakixr/htpy-uikit.git`
+- **Or with pip**: 
+  - `pip install git+https://github.com/dakixr/htpy-uikit.git`
 
 ## CLI
 

src/htpy_uikit/components/__init__.py

@@ -200,6 +200,42 @@ def icon_check(class_: str = "size-4", **attrs) -> Renderable:
     )[path(d="M20 6L9 17l-5-5"),]
 
 
+def icon_pencil(class_: str = "size-4", **attrs) -> Renderable:
+    """Pencil/edit icon."""
+    return svg(
+        class_=class_,
+        xmlns="http://www.w3.org/2000/svg",
+        viewBox="0 0 24 24",
+        fill="none",
+        stroke="currentColor",
+        stroke_width="2",
+        stroke_linecap="round",
+        stroke_linejoin="round",
+        **attrs,
+    )[
+        path(
+            d="m14.304 4.844 2.852 2.852M7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4.5m2.409-9.91a2.017 2.017 0 0 1 0 2.853l-6.844 6.844L8 14l.713-3.565 6.844-6.844a2.015 2.015 0 0 1 2.852 0Z",
+        )
+    ]
+
+
+def icon_headset(class_: str = "size-4", **attrs) -> Renderable:
+    """Headset/support icon."""
+    return svg(
+        class_=class_,
+        xmlns="http://www.w3.org/2000/svg",
+        viewBox="0 0 24 24",
+        fill="currentColor",
+        **attrs,
+    )[
+        path(
+            fill_rule="evenodd",
+            d="M12 2a7 7 0 0 0-7 7 3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h1a1 1 0 0 0 1-1V9a5 5 0 1 1 10 0v7.083A2.919 2.919 0 0 1 14.083 19H14a2 2 0 0 0-2-2h-1a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h1a2 2 0 0 0 1.732-1h.351a4.917 4.917 0 0 0 4.83-4H19a3 3 0 0 0 3-3v-2a3 3 0 0 0-3-3 7 7 0 0 0-7-7Zm1.45 3.275a4 4 0 0 0-4.352.976 1 1 0 0 0 1.452 1.376 2.001 2.001 0 0 1 2.836-.067 1 1 0 1 0 1.386-1.442 4 4 0 0 0-1.321-.843Z",
+            clip_rule="evenodd",
+        )
+    ]
+
+
 def icon_close(class_: str = "size-4", **attrs) -> Renderable:
     """Close/X icon."""
     return svg(
@@ -598,3 +634,118 @@ def icon_eye_off(class_: str = "w-5 h-5", **attrs) -> Renderable:
             d="M3.933 13.909A4.357 4.357 0 0 1 3 12c0-1 4-6 9-6m7.6 3.8A5.068 5.068 0 0 1 21 12c0 1-3 6-9 6-.314 0-.62-.014-.918-.04M5 19 19 5m-4 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z",
         )
     ]
+
+
+def icon_tag(class_: str = "size-4", **attrs) -> Renderable:
+    """
+    Tag/flag icon for active data sources.
+
+    Args:
+        class_: CSS classes for the SVG element.
+        **attrs: Additional SVG attributes.
+
+    Returns:
+        Renderable: SVG tag icon.
+    """
+    return svg(
+        class_=class_,
+        aria_hidden="true",
+        xmlns="http://www.w3.org/2000/svg",
+        width="24",
+        height="24",
+        fill="currentColor",
+        viewBox="0 0 24 24",
+        **attrs,
+    )[
+        path(
+            fill_rule="evenodd",
+            d="M3 4a1 1 0 0 0-.822 1.57L6.632 12l-4.454 6.43A1 1 0 0 0 3 20h13.153a1 1 0 0 0 .822-.43l4.847-7a1 1 0 0 0 0-1.14l-4.847-7a1 1 0 0 0-.822-.43H3Z",
+            clip_rule="evenodd",
+        )
+    ]
+
+
+def icon_plus(class_: str = "size-4", **attrs) -> Renderable:
+    """
+    Plus/add icon.
+
+    Args:
+        class_: CSS classes for the SVG element.
+        **attrs: Additional SVG attributes.
+
+    Returns:
+        Renderable: SVG plus icon.
+    """
+    return svg(
+        class_=class_,
+        xmlns="http://www.w3.org/2000/svg",
+        fill="none",
+        viewBox="0 0 24 24",
+        stroke_width="1.5",
+        stroke="currentColor",
+        **attrs,
+    )[
+        path(
+            stroke_linecap="round",
+            stroke_linejoin="round",
+            d="M12 4.5v15m7.5-7.5h-15",
+        )
+    ]
+
+
+def icon_sort_asc(class_: str = "w-3 h-3", **attrs) -> Renderable:
+    """
+    Sort ascending arrow icon.
+
+    Args:
+        class_: CSS classes for the SVG element.
+        **attrs: Additional SVG attributes.
+
+    Returns:
+        Renderable: SVG sort ascending arrow icon.
+    """
+    return svg(
+        class_=class_,
+        aria_hidden="true",
+        xmlns="http://www.w3.org/2000/svg",
+        fill="none",
+        viewBox="0 0 10 14",
+        **attrs,
+    )[
+        path(
+            stroke="currentColor",
+            stroke_linecap="round",
+            stroke_linejoin="round",
+            stroke_width="2",
+            d="M5 13V1m0 0L1 5m4-4 4 4",
+        )
+    ]
+
+
+def icon_sort_desc(class_: str = "w-3 h-3", **attrs) -> Renderable:
+    """
+    Sort descending arrow icon.
+
+    Args:
+        class_: CSS classes for the SVG element.
+        **attrs: Additional SVG attributes.
+
+    Returns:
+        Renderable: SVG sort descending arrow icon.
+    """
+    return svg(
+        class_=class_,
+        aria_hidden="true",
+        xmlns="http://www.w3.org/2000/svg",
+        fill="none",
+        viewBox="0 0 10 14",
+        **attrs,
+    )[
+        path(
+            stroke="currentColor",
+            stroke_linecap="round",
+            stroke_linejoin="round",
+            stroke_width="2",
+            d="M5 1v12m0 0 4-4m-4 4L1 9",
+        )
+    ]

src/htpy_uikit/components/icons.py

@@ -6,6 +6,7 @@
 from htpy import span
 from htpy import with_children
 from markupsafe import Markup
+from sourcetypes import js
 
 from ._utils import random_string
 from .icons import icon_close
@@ -18,7 +19,6 @@ def _modal_panel(
     width: str,
     height: str,
     close_button_attrs: dict[str, str] | None = None,
-    panel_attrs: dict[str, str] | None = None,
 ) -> Renderable:
     """
     Shared modal panel content using consistent styles.
@@ -36,9 +36,8 @@ def _modal_panel(
 
     panel_kwargs: dict[str, str] = {
         "class_": f"bg-card text-card-foreground rounded-lg shadow-lg border border-border flex flex-col {width} {height}",
+        "@click.stop": "",
     }
-    if panel_attrs:
-        panel_kwargs |= panel_attrs
 
     button_kwargs: dict[str, str] = {
         "type": "button",
@@ -84,8 +83,22 @@ def modal(
         htpy.div: Modal element
     """
 
+    at_modal_open: js = f"""
+        if ($event.detail === '{id}') {{
+            console.log('modal-open: ', '{id}');
+            show = true;
+        }}
+    """
+
+    at_modal_close: js = f"""
+        if ($event.detail === '{id}') {{
+            console.log('modal-close: ', '{id}');
+            show = false;
+        }}
+    """
+
     return div(
-        id=id,
+        # id=id,
         tabindex="-1",
         x_cloak="true",
         x_data="{ show: false }",
@@ -95,18 +108,17 @@ def modal(
             "inset-0 h-full max-h-full bg-black/50"
         ),
         **{
-            "@modal-open.window": Markup(f"if ($event.detail === '{id}') show = true;"),
-            "@modal-close.window": Markup(f"if ($event.detail === '{id}') show = false;"),
-            "@click": "show = false",
+            "@modal-open.window": Markup(at_modal_open),
+            "@modal-close.window": Markup(at_modal_close),
         },
+        **attrs_btn_close_modal(id),
     )[
         _modal_panel(
             children,
             title=title,
             width=width,
             height=height,
-            close_button_attrs={"@click": "show = false"},
-            panel_attrs={"@click.stop": ""},
+            close_button_attrs=attrs_btn_close_modal(id),
         )
     ]
 
@@ -129,27 +141,49 @@ def attrs_btn_open_modal(id: str) -> dict:
     }
 
 
+def attrs_btn_close_modal(id: str) -> dict:
+    """
+    Get attributes for closing a modal button using Alpine.js events.
+
+    Note: this can only be used inside a modal component (or any other component that uses x-data).
+    """
+    close_modal: js = f"""
+        window.dispatchEvent(new CustomEvent('modal-close', {{ detail: '{id}' }}));
+    """
+    return {
+        # we do not use the x-data because this is a button is inside the model which is already using x-data
+        "@click": Markup(close_modal),
+        "@keydown.escape.window": Markup(close_modal),
+    }
+
+
 @with_children
 def hx_modal(
     children: Node,
     *,
+    id: str | None = None,
     title: str,
     width: str = "w-full max-w-lg",
     height: str = "h-auto",
 ) -> Renderable:
     """
-    Alpine.js modal component (formerly HTMX).
+    Alpine.js modal component (designed to be used with HTMX).
 
     Args:
+        id: Modal ID (if not provided, a random ID will be generated)
         title: Modal title
-        content: Modal content
         width: Modal width classes
         height: Modal height classes
 
     Returns:
         htpy.div: Alpine.js modal element
     """
-    random_id = random_string(8)
+    random_id = id or random_string(8)
+
+    delete_modal: js = """
+        show = false; 
+        setTimeout(() => $el.remove(), 200)
+    """
 
     return div(
         tabindex="-1",
@@ -161,19 +195,16 @@ def hx_modal(
             "fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-screen "
             "inset-0 h-full max-h-full bg-black/50"
         ),
-        **{"@click": "show = false; setTimeout(() => $el.remove(), 200)"},
+        **{"@click": delete_modal},
     )[
         _modal_panel(
             children,
             title=title,
             width=width,
             height=height,
             close_button_attrs={
-                "@click": "show = false; setTimeout(() => $el.remove(), 200)",
-                "type": "button",
-            },
-            panel_attrs={
-                "@click.stop": "",
+                "@click": Markup(delete_modal),
+                "@keydown.escape.window": Markup(delete_modal),
             },
         )
     ]