Components composition and attributes

[vb8448]

Hi,

I have a button and an icon component like in the example below.
Basically, I want the button component to be able to get some extra attributes that displays an icon and I wonder if I implemented it correctly. It works, but doesn't look good to me, especially the fact that i have to render the icon in my python code.

The button it's used in the template like this {% button value="Login" klass="w-full flex items-center" i_name="fa-sign-in-alt" i_extra="mr-2" / %}

How is the right way to implement something like my use case in django-components?

Thanks.

@register("i")
class Icon(Component):
    def get_context_data(self, name: str, extra: str = '', prefix: str = 'fas') -> dict:
        return {
            "icon": name,
            "prefix": prefix,
            "extra": extra,
        }

    # language=HTML
    template: types.django_html = '<i class="{{ prefix }} {{ icon }} {{ extra }}"></i>'

@register("button")
class Button(Component):
    html_type = "button"
    html_class = "justify-center text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"

    def get_context_data(
            self,
            value: Optional[str] = None,
            html_type: Optional[str] = None,
            klass: Optional[str] = None,
            **kwargs
    ) -> dict:
        """
        :param value: Value to display on the button.
        :param html_type: Type of the button (button, submit, reset), if not provided, the default value is used(html_type attribute).
        :param klass: Extra css classes to append to with the default class(html_class attribute).
        """

        icon_attrs = {k[2:]: kwargs.pop(k) for k in list(kwargs.keys()) if k.startswith("i_")}

        for k in kwargs:
            raise ValueError(f"Unknown argument: {k}")

        icon = Icon.render(kwargs=icon_attrs) if icon_attrs else None

        return {
            "value": value or '',
            "klass": klass or '',
            "icon": icon,
            "base_attrs": {
                "html_type": html_type or self.html_type,
                "class": self.html_class,
            },
        }

    # language=HTML
    template: types.django_html = """
        <button {% html_attrs base_attrs class=klass %} >
            {% if icon %}{{ icon }}{% endif %}
            {{ value }}
            {#% slot "value" default %}{{ value }}{% endslot %#}
        </button>
    """
``

[JuroOravec]

Hi @vb8448, your approach is fine! But if it doesn't feel right, you can use the spread operator (...dict) to do the following :)

@register("button")
class Button(Component):
    def get_context_data(
            self,
            value: Optional[str] = None,
            html_type: Optional[str] = None,
            klass: Optional[str] = None,
            **kwargs
    ) -> dict:
        icon_attrs = {k[2:]: kwargs.pop(k) for k in list(kwargs.keys()) if k.startswith("i_")}

        return {
            "icon_attrs": icon_attrs,
            "base_attrs": {
                "html_type": html_type or self.html_type,
                "class": self.html_class,
            },
        }

    # language=HTML
    template: types.django_html = """
        <button {% html_attrs base_attrs class=klass %} >
            {% if icon_attrs %}
                {% component "icon" ...icon_attrs / %}
            {% endif %}
        </button>
    """

[vb8448]

Thanks.

In the end i implemented it like the following:

@register("button")
class Button(Component):
    def get_context_data(
            self,
            value: Optional[str] = None,
            html_type: Optional[str] = None,
            icon_attrs: Optional[dict] = None,
    ) -> dict:
        return {
            "icon_attrs": icon_attrs or {},
            "base_attrs": {
                "html_type": html_type or self.html_type,
                "class": self.html_class,
            },
        }

    # language=HTML
    template: types.django_html = """
        <button {% html_attrs base_attrs class=klass %} >
            {% if icon_attrs %}
                {% i ...icon_attrs / %}
            {% endif %}
            {{ value }}
        </button>
    """

And when I call thebutton component: {% button icon_attrs:name="fa-chevron-up" / %}