ember-click-outside-modifier
v4.1.0
Published
Ember modifier to catch events outside marked DOM element
Downloads
891
Readme
ember-click-outside-modifier
Ember modifier to react on clicks outside an element without stopping the event propagation. Great for closing dialogues, menus among other things.
If you need more control on click outside - take a look at ember-click-outside
Inspired by v-click-outside
Compatibility
- Ember.js v3.20 or above
- Ember CLI v2.13 or above
- Embroider or ember-auto-import >= 2.0.0 (this is v2 addon)
Installation
ember install ember-click-outside-modifier
Usage
<div {{click-outside this.onClickOutside}}></div>
You can also provide specific events that you want to bind to with the event
or events
named arguments.
<div {{click-outside this.onClickOutside event='mouseup'}}></div>
<div {{click-outside this.onClickOutside events=(array 'click' 'mouseup')}}></div>
Usage with Glint
ember-click-outside-modifier
is a glint enabled addon. Add this to your
types/global.d.ts
file:
import '@glint/environment-ember-loose';
import type EmberClickOutsideRegistry from 'ember-click-outside-modifier/template-registry';
declare module '@glint/environment-ember-loose/registry' {
export default interface Registry extends EmberClickOutsideRegistry, /* other addon registries */ {
// local entries
}
}
For the entire guide, please refer to Using Addons section on the glint handbook.
Types are made available through package.json exports
field.
Usage with <template>
tag
For usage in gts
or gjs
files, modifier are exported from the index:
import { clickOutside } from 'ember-click-outside-modifier';
<template>
<div {{clickOutside this.handleClickOutside}}>
Lorem ipsum.
</div>
</template>
Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.