x-on event on multiple elements of same class

[fredbouin]

I'd like to apply a set of x-on events to all elements with the same class name. I think maybe store has something to do with this but I'm a bit confused at what I'm seeing in the docs.

Essentially I have:
x-on:mouseenter="cursor = true"
x-on:mouseleave="cursor = false"
x-on:click="cursor = false"

And I want it applied to everything with the class .cursor-shrink

What would be the best approach?

[ekwoka]

You can use x-bind to bundle them into a single directive.

[fredbouin]

ok looking through the docs I think you are reffering to this:
https://alpinejs.dev/directives/bind#bind-directives

This looks promising, in this case instead of trying to add the directives to a class somehow like i suggested, I would be doing x-bind:cursor-shrink (or whatever I call the directive) on all elements I need all the x-on events applied to, correct?

[ekwoka]

Yes, something like that.

this is how the Alpine UI components work. The stuff like x-popover is just an alias for bending a specific set of things.

[fredbouin]

ok so just going by the docs example, what I'm doing is very similar except they are doing a x-show, I'd like to bind a class instead.

Let's say I'm trying to bind class hidden when open is true, I'm not sure how to adjust this line

 dialogue: {
    ['x-show']() {
         return this.open

I tried this, obviously not right, I'm unsure of the correct approach

 document.addEventListener('alpine:init', () => {
     Alpine.data('dropdown', () => ({
         open: false,
             trigger: {
                  ['x-ref']: 'trigger',
                  ['x-on:mouseenter']() {
                       this.open = true
                   },
                  ['x-on:mouseleave']() {
                        this.open = false
                   },
                   ['x-on:click']() {
                        this.open = false
                   },
             },
            dialogue: {
                 [':class="hidden"']() {
                       return this.open
                 },         
            },
      }))
 })

[SimoTod]

I suspect you are trying to do something like

['x-bind:class']() {
   return this.open ? 'hidden' : ''
}

[fredbouin]

right yes, thats the one, thank you