alpinejs bind shortcut support

[mattbha]

alpinejs is (one of many) natural friends of django-cotton

alpinejs supports conditional bindings such as:

                <c-button
                    x-text="confirmed ? 'Are you sure?' : 'Approve'"
                    x-bind:class="confirmed ? 'bg-red-500 hover:bg-red-600' : ''"
                    @mouseleave="confirmed = false"
                    @click.prevent="if (confirmed) $el.closest('form').submit(); confirmed = true;"
                >
                </c-button>

The above is a dynamic "approve" button that on first tap changes to an "Are you sure?" button, and on 2nd tap submits the form.

To set a dynamic class in alpinejs, you use x-bind:class. It can be (and is commonly) shortened as :class=, but this does not play nice with django-cotton. The work around is to use x-bind:class over :class.

This is a low priority, but it would be nice if there was somehow support for this. It may not be possible with the syntax of variable binding within django-cotton, and I prefer it as-is if so.

[wrabit]

This is on the list, I think we can allow a double colon :: telling cotton:

1. We want to place an escaped : at the start of the attribute
2. We don't intend it to have the dynamic behaviour that the single : brings

[wrabit]

@mattbha This works well for fallthrough {{ attrs }}, but if we, for any reason we wanted to manually place this particular variable inside the component, it's not going to work as we can't use something like {{ :class }}. It's not typical you will need to reach for this, so we might have to settle for workarounds in this case, or another feature in future.

[mattbha]

having it flow through attrs I think is the only use case.

[wrabit]

Released in 1.5.0

More here: https://django-cotton.com/docs/components#alpine-js-support