Click outside

WClickOutside wraps content in a div and emits click on a click or right-click anywhere outside it — to close a custom dropdown, or to finish editing in place. The click that mounted it doesn't count, so it can wrap content that a click just opened. noFilter emits on clicks inside too.

WDropdownMenu leaves its state to the parent, which usually closes it with a WClickOutside around the content.

Clicks outside the card: 0

<template>
  <div class="grid max-w-md gap-4">
    <WClickOutside
      class="rounded-xl border border-solid p-4"
      :class="active ? 'tone-primary border-tone' : 'border-line-subtle'"
      @click="clickOutside"
    >
      <button
        class="w-full cursor-pointer text-left"
        @click="active = true"
      >
        {{ active ? 'Editing — click anywhere else to finish' : 'Click to edit' }}
      </button>
    </WClickOutside>

    <span class="text-description text-sm">Clicks outside the card: {{ count }}</span>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'

import WClickOutside from 'eco-vue-js/dist/components/ClickOutside/WClickOutside.vue'

const active = ref(false)
const count = ref(0)

const clickOutside = () => {
  active.value = false
  count.value++
}
</script>

API

WClickOutside

import WClickOutside from 'eco-vue-js/dist/components/ClickOutside/WClickOutside.vue'

Props

Prop	Type	Default	Description
noFilter	boolean	—	Emits click on clicks inside the element too.

Events

Event	Payload	Description
click	(event: Event)	A click or right-click outside the element. Clicks in the same tick as mounting, such as the one that opened it, and presses that start inside, such as a drag let go outside, are ignored.
mouseenter	(value: MouseEvent)	The pointer entered the element.
mouseleave	(value: MouseEvent)	The pointer left the element.
mousedown	(value: MouseEvent)	A mouse button was pressed on the element.

Slots

Slot	Props	Description
default	—	Content that clicks count as inside of, such as a dropdown's content.