npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-on-click-outside

v1.0.3

Published

vue mixin/directive that does something when you click outside a container

Downloads

10,493

Readme

vue-on-click-outside

vue-on-click-outside is a Vue directive which calls a method whenever a click event is registered outside of the element the directive was bound to. The most obvious use case is to close an element whenever someone clicks outside of it.

Installation

npm install vue-on-click-outside --save

# or if you prefer yarn
yarn add vue-on-click-outside

Usage

vue-on-click-outside provides a mixin and directive export. You may use either of them to register the directive globally or locally.

// global directive
import Vue from 'vue'
import { directive as onClickOutside } from 'vue-on-click-outside' 
Vue.directive('on-click-outside', onClickOutside)

// local mixin
import { mixin as onClickOutside } from 'vue-on-click-outside'
const MyComponent = {
  mixins: [onClickOutside]
}
export default MyComponent

If you’ve registered the directive inside of your component you’re good to go and can use it in your templates.

<template>
  <button type="button" class="i-am-a-popover-trigger" @click="open"></button>  
  <div class="i-am-a-popover close-me-by-clicking-outside-of-me" 
    v-if="showPopover" v-on-click-outside="close">
    <span>Interesting Text!</span>
  </div>
</template>

<script>
  import { mixin as onClickOutside } from 'vue-on-click-outside'
  export default {
    mixins: [onClickOutside],
    data() {
      return { showPopover: false }
    },
    methods: {
      open() { this.showPopover = true },
      close() { this.showPopover = false }
    }
  }
</script>

How it works

vue-on-click-outside uses mouseenter and mouseleave events to determine if the user is still inside the element. This should account for content that is dynamically removed on click events and is the primary distinction to the existing vue-clickaway library. Once a user clicks on something the click event bubbles up the DOM tree until it reaches the documentElement. A click listener on the documentElement then looks for elements that were not targetted by the click event and calls the callback you provided via the directive.

If you use vue-on-click-outside multiple times on a single page it will only ever create one single documentElement click listener and two event listeners for your element. If you know that your element won’t contain any dynamically created/removed content you can also use the static modifier of the directive (turning v-on-click-outside="close" into v-on-click-outside.static="close"). It will switch to a different strategy that works without the two event listeners per element.

Caveats

Some JavaScript code will make it appear as if their content is inside your element but in fact it is absolutely positioned from the body element. A lot of datepicker, tooltip, popover and many more libraries rely on this kind of behaviour. Look out for static modes or options that allow you to attach their root element to your element, that uses the directive (or some element inside the tree of your element).