https://github.com/lifeart/ember-click-outside-modifier

Ember modifier to react on clicks outside an element without stopping the event propagation
https://github.com/lifeart/ember-click-outside-modifier

ember ember-addon ember-modifier

Last synced: 2 months ago
JSON representation

Ember modifier to react on clicks outside an element without stopping the event propagation

• Host: GitHub
• URL: https://github.com/lifeart/ember-click-outside-modifier
• Owner: lifeart
• License: mit
• Created: 2020-01-05T21:48:14.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-02-05T12:36:06.000Z (11 months ago)
• Last Synced: 2024-10-02T12:21:10.470Z (3 months ago)
• Topics: ember, ember-addon, ember-modifier
• Language: JavaScript
• Size: 1.34 MB
• Stars: 15
• Watchers: 3
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

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](https://github.com/zeppelin/ember-click-outside)

Inspired by [v-click-outside](https://github.com/ndelvalle/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](https://emberjs.github.io/rfcs/0507-embroider-v2-package-format.html))

Installation

------------------------------------------------------------------------------

```

ember install ember-click-outside-modifier

```

Usage

------------------------------------------------------------------------------

```hbs



```


You can also provide specific events that you want to bind to with the `event` or `events` named arguments.

```hbs





```


## Usage with Glint

`ember-click-outside-modifier` is a glint enabled addon. Add this to your

`types/global.d.ts` file:

```ts

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](https://typed-ember.gitbook.io/glint/environments/ember/using-addons#using-glint-enabled-addons)

section on the glint handbook.

Types are made available through package.json `exports` field.

## Usage with `` tag

For usage in `gts` or `gjs` files, modifier are exported from the index:

```hbs

import { clickOutside } from 'ember-click-outside-modifier';

  


    Lorem ipsum.

  


```

Contributing

------------------------------------------------------------------------------

See the [Contributing](CONTRIBUTING.md) guide for details.

License

------------------------------------------------------------------------------

This project is licensed under the [MIT License](LICENSE.md).