ember-frost-modal-input

A modal component that contains bunsen form content. Renders a custom header, a bunsen form and custom actions in the footer.

• Installation
• API
• Examples
• Development

Installation

ember install ember-frost-modal-input

API

| Attribute | Type | Value | Description | | --------- | ---- | ----- | ----------- | | title | string | | Optional custom title | | subtitle | string | | Optional custom subtitle | | titleComponent | string | | Optional title component to replace standard title/subtitle styles | | modalName | string | | Required name for the modal | | onClose | Function | <action-name> | Optional callback for when modal is closed | | onOpen | Function | <action-name> | Optional callback for when modal is opened |

Examples

Component template using ember-block-slots

Below is an example of template.hbs

{{#frost-modal-input
  isValid=isValid
  formValue=formValue
  title='Edit user'
  subtitle='John Smith'
  modalName='my-test-modal'
  onOpen=(action 'open')
  onClose=(action 'clearForm') as |slot|}}
  {{#block-slot slot 'target'}}
    {{frost-button
      text='Open small form'
      priority='secondary'
      size='medium'}}
  {{/block-slot}}
  {{#block-slot slot 'body' as |content|}}
    {{content.form
      autofocus=false
      bunsenModel=userModel
      inline=true
      value=formValue
      showAllErrors=showAllErrors
      }}
  {{/block-slot}}
  {{#block-slot slot 'footer' as |controls close|}}
    {{controls.confirm
      onConfirm=(action 'save')
      text='Submit'
    }}
  {{/block-slot}}
{{/frost-modal-input}}

Default title component template

{{#frost-modal-input title='Test title' subtitle='Subtitle'}}
    // Custom modal content
{{/frost-modal-input}}

Custom title component template

{{#frost-modal-input titleComponent='myTitleComponent'}}
  // Custom modal content
{{/frost-modal-input}}

Background effects

ember-remodal provides you with a remodal-bg class that you can apply to your application content, to apply blur effects to the modal overlay.

<div class="dummy-content remodal-bg">
  {{outlet}}
</div>

ember-perfectscroll effects

This gives you styling of header/footer when content is scrolled underneath either element

Styling includes: box shadow plus slight transparency in header/footer to reveal content underneath For more documentation on ember-perfectscroll: perfect-scrollbar

Development

Setup

git clone [email protected]:ciena-frost/ember-frost-modal-input.git
cd ember-frost-modal-input
npm install && bower install

Development Server

A dummy application for development is available under ember-frost-modal-input/tests/dummy. To run the server run ember server (or npm start) from the root of the repository and visit the app at http://localhost:4200.

Testing

Run npm test from the root of the project to run linting checks as well as execute the test suite and output code coverage.