@zestia/ember-modal-dialog

@zestia/ember-modal-dialog

This addon provides a simple Modal Dialog component.

Installation

ember install @zestia/ember-modal-dialog

Demo

https://zestia.github.io/ember-modal-dialog/

Features

• Class names for animating ✔︎
• Loading state handling ✔︎
• Focus handling ✔︎
• Optionally escapable ✔︎
• Root element notification ✔︎
• Automatic overflow detection ✔︎
• Simple API ✔︎

Notes

• This addon intentionally does not come with any styles.

Example

The modal dialog component isn't designed to be used on its own, but rather used to compose a new modal dialog component... in this example it's called "my-modal"

// my-modal/component.js
export default class MyModal extends Component {
  @tracked person;
  @tracked loadingError;

  @action
  loaded(person) {
    this.person = person;
  }

  @action
  failedToLoad(error) {
    this.loadingError = error.message;
  }
}

{{! my-modal/template.hbs }}
<ModalDialog
  @onClose={{@onClose}}
  @onLoad={{@onFetchPerson}}
  @onLoaded={{this.loaded}}
  @onLoadError={{this.failedToLoad}} as |modal|
>
  <modal.Header>
    Welcome
  </modal.Header>

  <modal.Content>
    {{#if modal.isLoading}}
      Loading person…
    {{else if this.loadingError}}
      Unable to load person because {{this.loadingError}}
    {{else}}
      Hello {{this.person.name}}
    {{/if}}
  </modal.Content>

  <modal.Footer>
    <button {{on "click" modal.close}}>
      Close
    </button>
  </modal.Footer>
</ModalDialog>

// application/route.js
export default class ApplicationRoute extends Route {
  @action
  loadPerson() {
    // Fetch remote data
  }
}

{{! application/route.hbs }}
{{#if this.showMyModal}}
  <MyModal
    @onClose={{this.hideMyModal}}
    @onFetchPerson={{fn this.loadPerson 123}}
  />
{{/if}}

Changelog

1.0.5

• Splat attributes on header, content and footer components
• Upgrade dependencies