# gavant-ember-modals > Modal components built on ember-modal-dialog. Latest version **0.3.2** (published 2019-04-08) · 0 weekly downloads ## Install ```sh npm install gavant-ember-modals pnpm add gavant-ember-modals yarn add gavant-ember-modals bun add gavant-ember-modals ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.3.2 | | Published | 2019-04-08 | | First published | 2018-05-10 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | CommonJS | | Node | 6.* \|\| 8.* \|\| >= 10.* | | Dependencies | 8 | | Unpacked size | 31.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Gavant Software, Inc. | | Maintainers | bakerac4 | | Keywords | ember-addon, gavant, modal, dialog | ## Links - npm: https://www.npmjs.com/package/gavant-ember-modals - Repository: https://github.com/Gavant/gavant-ember-modals - Homepage: https://github.com/Gavant/gavant-ember-modals#readme - Issues: https://github.com/Gavant/gavant-ember-modals/issues - npm.io page: https://npm.io/package/gavant-ember-modals ## Dependencies (8) - [animate.css](https://npm.io/package/animate.css.md) ^3.6.1 - [ember-spread](https://npm.io/package/ember-spread.md) ^7.0.1 - [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) 7.6.0 - [ember-decorators](https://npm.io/package/ember-decorators.md) 5.1.4 - [ember-cli-htmlbars](https://npm.io/package/ember-cli-htmlbars.md) ^3.0.0 - [ember-modal-dialog](https://npm.io/package/ember-modal-dialog.md) ^3.0.0-beta.0 - [ember-cli-typescript](https://npm.io/package/ember-cli-typescript.md) ^2.0.0 - [@ember-decorators/babel-transforms](https://npm.io/package/@ember-decorators/babel-transforms.md) ^2.1.2 ## Alternatives - [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads - [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads - [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads - [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads - [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads ## Recent versions - 0.3.2 (latest) — 2019-04-08 - 0.3.1 — 2019-04-08 - 0.3.0 — 2019-04-08 - 0.2.0 — 2019-03-25 - 0.1.0 — 2018-12-12 - 0.0.15 — 2018-10-29 - 0.0.14 — 2018-10-17 - 0.0.13 — 2018-06-13 - 0.0.12 — 2018-06-05 - 0.0.11 — 2018-05-22 - 0.0.10 — 2018-05-15 - 0.0.9 — 2018-05-15 - 0.0.8 — 2018-05-15 - 0.0.7 — 2018-05-11 - 0.0.6 — 2018-05-11 - … 5 more at https://npm.io/package/gavant-ember-modals/versions ## README gavant-ember-modals ============================================================================== DISCLAIMER: This addon is not actively maintained for public use. Pull requests are welcome, but we do not guarantee responses to bug submissions or feature requests, so use at your own risk. Compatibility ------------------------------------------------------------------------------ * Ember.js v2.18 or above * Ember CLI v2.13 or above Installation ------------------------------------------------------------------------------ ``` ember install gavant-ember-modals ``` Usage ------------------------------------------------------------------------------ To use the addon styles, you must use SASS: ``` ember install ember-cli-sass ``` (Upon addon installation, an import statement will be added to your `app.scss`) `gavant-ember-modals` gives you multiple different components for extensibility. First you should add `modal-outlet` to your application template ``` {{modal-outlet}} ``` Next create a component for your modal. By default we look for it under `modal-dialogs`. So when you generate your component you would use something like This ``` ember g component modal-dialogs/add-email ``` Component ``` import Component from '@ember/component'; import { tryInvoke } from '@ember/utils'; import SpreadMixin from 'ember-spread' import { get } from '@ember/object'; export default Component.extend(SpreadMixin, { actions: { async save(changeset) { try { const result = await changeset.save(); await tryInvoke(this, 'onClose'); return result; } catch(errors) { //Do something with error } } } }); ``` Template ``` {{#modal-dialog onClose=onClose size="sm" as |modal|}} {{modal.header title=title}} {{#modal.body}} {{#form-validator changeset=changeset submit=(action "save") as |changeset validator| }} {{#input-validator target="emailAddress" text="Email"}} {{fl-input value=changeset.emailAddress type="text" placeholder="Email" maxlength="200" }} {{/input-validator}} {{#modal.footer}} {{button-basic type="link" label=(t "action.cancel") action=modal.close }} {{button-spinner type="primary" class="px-4" label=(t "action.save") action=validator.submit }} {{/modal.footer}} {{/form-validator}} {{/modal.body}} {{/modal-dialog}} ``` and now open the modal by injecting the modal service provided into the controller that needs it and call the modal services `open` method using the name of the modal you created earlier ``` import Controller from '@ember/controller'; import { inject as service } from '@ember/service'; export default Controller.extend({ modal: service(), actions: { addEmail() { get(this, 'modal').open('add-email', { title: "Add Email" }); } } }); ``` Options There are some different useful optional ways to use modals that might be of use to you. 1) `await tryInvoke(this, 'onClose');` The onClose event returns a promise when the modal is finished closing (after animating out) so if you need to do something afterwards, you can wait for that event to finish. 2) You can pass in actions to call inside the modal from the controller that is opening the modal. You do this by adding an `actions` hash to the open options i.e. ``` get(this, 'modal').open('add-email', { title: "Add Email", actions: { doSomething: bind(this, 'doSomething') } }); ``` then in the modal you can just call `await tryInvoke(this, 'doSomething');` Contributing ------------------------------------------------------------------------------ <<<<<<< HEAD ### Installation * `git clone ` * `cd gavant-ember-modals` * `npm install` ### Linting * `npm run lint:js` * `npm run lint:js -- --fix` ### Running tests * `ember test` – Runs the test suite on the current Ember version * `ember test --server` – Runs the test suite in "watch mode" * `ember try:each` – Runs the test suite against multiple Ember versions ### Running the dummy application * `ember serve` * Visit the dummy application at [http://localhost:4200](http://localhost:4200). ======= See the [Contributing](CONTRIBUTING.md) guide for details. >>>>>>> 61bd70b... message License ------------------------------------------------------------------------------ This project is licensed under the [MIT License](LICENSE.md). --- _Source: https://npm.io/package/gavant-ember-modals · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._