Socket
Socket
Sign inDemoInstall

ember-click-outside-modifier

Package Overview
Dependencies
2
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-click-outside-modifier

Ember modifier to catch events outside marked DOM element


Version published
Maintainers
1
Created

Changelog

Source

v4.1.0 (2023-08-09)

:rocket: Enhancement
  • #38 Glint Support (@SergeAstapov)
  • #32 Winden ember-modifier version range to allow v4 (@SergeAstapov)
  • #33 Remove engines field from addon package.json (@SergeAstapov)
  • #24 auto-publish unstable packages to NPM (@SergeAstapov)
:memo: Documentation
:house: Internal
  • #37 replace publish-unstable with push-dist (@SergeAstapov)
  • #28 Add 4.4 and 4.8 LTS ember-try scenarios (@SergeAstapov)
  • #26 Rename addon folder to ember-click-outside-modifier (@SergeAstapov)
  • #25 Use release-it hook to copy .md files at publish time (@SergeAstapov)
  • #22 run npx ember-cli-update --to=v4.3.0 to align with blueprint (@SergeAstapov)
  • #21 add eslint-plugin-qunit per latest blueprint (@SergeAstapov)
Committers: 1

Readme

Source

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.

Keywords

FAQs

Package last updated on 09 Aug 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc