fix issues with tabler, and add link functionality

tabler/tabler#1836

CHANGELOG.md

@@ -6,8 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [0.0.14] - unreleased
-### Changed
+- fix issues with tabler https://github.com/tabler/tabler/issues/1836
 - breaking: rename required_permissions attribute to permission_required in IMenuItems
+- improve link functionality
 ## [0.0.13] - 2023-02-27
 ### Added
 - let listitem component accept subtitle slot additionally to attribute

src/conjunto/components/__init__.py

@@ -186,10 +186,9 @@ def get_context_data(self, **kwargs) -> dict:
         }
 
 
-@component.register("button")
-class Button(component.Component):
+class HtmxLinkElement(component.Component):
     """
-    HTMX enabled base button.
+    HTMX enabled base element.
 
     This could be a <button> (default), a <div> or a <a> tag, resulting in a visual
     button.
@@ -204,9 +203,8 @@ class Button(component.Component):
         icon: the icon of the button. Optional.
     """
 
-    template_name = "conjunto/components/button.html"
-    tag = "button"
-    default_class = "btn"
+    template_name = "conjunto/components/link.html"
+    tag = "div"
 
     def get_context_data(self, **kwargs) -> dict:
         context = super().get_context_data(**kwargs)
@@ -217,6 +215,7 @@ def get_context_data(self, **kwargs) -> dict:
         if htmx is True:
             htmx = "get"
         url = self.attributes.pop("url", None)
+
         context.update(
             {
                 "icon": self.attributes.pop("icon", None),
@@ -231,15 +230,62 @@ def get_context_data(self, **kwargs) -> dict:
         return context
 
 
+class DisableMixin:
+    """Component mixin that adds a disabled class attribute to the component
+
+    It extracts a possible `disabled` attribute and adds it to the class list.
+    So you could conveniently write a component like this:
+    ```django
+    {% #button disabled %}
+    ```
+    instead of:
+    ```django
+    {% #button class="disabled" %}
+    ```
+    It also adds the content of the disabled attribute into the template context, so
+    you could react in other ways to it, like hiding the element completely.
+    """
+
+    def get_context_data(self, **kwargs) -> dict:
+        context = super().get_context_data(**kwargs)
+        disabled = self.attributes.pop("disabled", None)
+        if disabled:
+            self.attributes["class"] = self.attributes.get("class", "")
+            self.attributes["class"] += " disabled"
+            context["disabled"] = disabled
+        return context
+
+
+@component.register("link")
+class Link(HtmxLinkElement):
+    """HTMX enabled link."""
+
+    tag = "a"
+
+
+@component.register("button")
+class Button(DisableMixin, HtmxLinkElement):
+    """HTMX enabled button."""
+
+    tag = "button"
+    default_class = "btn"
+
+
 @component.register("actionbutton")
 class ActionButton(Button):
+    """Action button, e.g. in a `card-actions` section"""
+
     default_class = "btn btn-action"
 
 
 @component.register("listgroupaction")
-class ListGroupAction(Button):
-    tag = "a"
-    default_class = "list-group-item-actions"
+class ListGroupAction(Link):
+    """HTMX enabled list group action button"""
+
+    # FIXME: maybe hardcoded "text-secondary" here leads to problems, as
+    #   it will be merged with the attributes, which also could include
+    #   class="text-danger"
+    default_class = "list-group-item-actions text-secondary"
 
     def get_context_data(self, **kwargs) -> dict:
         context = super().get_context_data(**kwargs)

src/conjunto/static/conjunto/css/conjunto.css

@@ -0,0 +1,7 @@
+
+/*https://github.com/tabler/tabler/issues/1836*/
+/* Don't show underlines on list item action links */
+
+a.list-group-item-actions:hover {
+  text-decoration:none;
+}

src/conjunto/templates/conjunto/components/button.html → src/conjunto/templates/conjunto/components/link.html

@@ -2,10 +2,13 @@
   {% if htmx %}
     hx-{{ htmx|lower }}="{{ url }}"{% if dialog %} hx-target="#dialog"{% elif target %} hx-target="{{ target }}"{% endif %}{% if select %} hx-select="{{ select }}"{% endif %}
     hx-swap="innerHTML"
+    {% if tag == "a" %}href="#"{% endif %}
+  {% else %}
+    {% if tag == "a" %}href="{{ url }}"{% endif %}
   {% endif %}
 >
   {% if icon %}
-    <i class="ti ti-{{ icon }} me-2 fs-2"></i>
+    <i class="ti ti-{{ icon }} fs-2"></i>
   {% endif %}
   {% render_slot slots.inner_block %}
 </{{ tag }}>

src/conjunto/templatetags/conjunto.py

@@ -9,7 +9,7 @@
 @register.simple_tag
 def conjunto_css_scripts() -> str:
     css = [
-        # "conjunto/css/bootstrap.min.css",
+        "conjunto/css/conjunto.css",
         "conjunto/css/tabler.min.css",
         "conjunto/css/tabler-icons.css",
         "conjunto/css/dropzone.min.css",