Does petitle-vue support @click.away?

[pthethanh]

First of all, thank you very much for this great project. I've just tried petitle-vue on my project and it's great. But I found @click.away (similar to AlpineJS) doesn't work. I wonder how can I achieve the similar thing in petitle-vue? Or do you have a plan to support it?

Thanks.

[Aferz]

That'd be a nice addition because either Vue or Petite Vue don't allow custom event modifiers.

In the meantime, for future reference, here is a basic directive that does the trick.

<div v-scope="{ count: 0 }">
    {{ count }}
    <button v-click-away="count++">inc</button>
</div>

<script src="https://unpkg.com/petite-vue"></script>

<script>
  function clickAwayDirective({ el, get }) {
    const listener = (event) => {
      if (!el.contains(event.target)) {
        get();
      }
    };

    document.addEventListener("click", listener);

    return () => {
      document.removeEventListener(listener);
    };
  }

  PetiteVue.createApp().directive("click-away", clickAwayDirective).mount();
</script>

[pthethanh]

This trick is very helpful to me. Thank you very much.

[niutech]

It's called @click.outside in Alpine v3.

[3400442579]

const clickAway = ({ el, get, exp, arg }) => {
  let isopen = false;
  let listener = (event) => {
      if (get(arg) && !isopen) {
          isopen = true;
          return;
      }
      if (!el.contains(event.target)) {
          if (get(arg))
              get(exp);
          isopen = false;
      }
  };
  document.addEventListener("click", listener);
  return () => {
       document.removeEventListener("click",listener);
  };
};

PetiteVue.createApp()
  .directive('away', clickAway)
  .mount();

v-away:open="open=false"