Noodles Practicing Medicine
    Have ideas to improve npm?Join in the discussion! »

    @zestia/ember-modal-dialog

    2.3.1 • Public • Published

    @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

    • Focus trap ✔︎
    • Focus restoring ✔︎
    • Body scroll lock ✔︎
    • Class names for animating ✔︎
    • Loading state handling ✔︎
    • Optionally escapable ✔︎
    • Root element notification ✔︎
    • 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.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.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}}

    Install

    npm i @zestia/ember-modal-dialog

    DownloadsWeekly Downloads

    10

    Version

    2.3.1

    License

    MIT

    Unpacked Size

    15.2 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar